From 75bbcf7c2fd3ad392b5ca912241d4caacbd37450 Mon Sep 17 00:00:00 2001
From: mgechev <mgechev@gmail.com>
Date: Mon, 21 Jun 2021 15:52:05 -0700
Subject: [PATCH] docs: improve styles of the roadmap done section (#42616)

The "Done" section was previously broken in dark mode. This PR:
- Fixes the dark mode styles
- Expands the done section by default

PR Close #42616
---
 aio/content/guide/roadmap.md                         |  6 ++++--
 aio/src/styles/2-modules/_index.scss                 |  2 +-
 aio/src/styles/2-modules/_theme.scss                 |  2 ++
 aio/src/styles/2-modules/roadmap/_roadmap-theme.scss | 11 +++++++++++
 aio/src/styles/2-modules/{ => roadmap}/_roadmap.scss |  0
 5 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
 rename aio/src/styles/2-modules/{ => roadmap}/_roadmap.scss (100%)

diff --git a/aio/content/guide/roadmap.md b/aio/content/guide/roadmap.md
index 18572a2e62..a664225ab7 100644
--- a/aio/content/guide/roadmap.md
+++ b/aio/content/guide/roadmap.md
@@ -80,8 +80,10 @@ A long-standing feature request is to add the ability to add directives to host
 
 A common problem with web applications is their slow initial load time. A way to improve it is to apply more granular code-splitting on a component level. To encourage this practice, we’ll be working on more ergonomic code-splitting APIs.
 
-<details class="roadmap-done-details">
-<summary class="roadmap-done-summary">Done</summary>
+<details class="roadmap-done-details" open="true">
+<summary class="roadmap-done-summary">
+  <h2>Done</h2>
+</summary>
 
 ### Accelerated debugging and performance profiling with Angular DevTools
 
diff --git a/aio/src/styles/2-modules/_index.scss b/aio/src/styles/2-modules/_index.scss
index 913e3a9c58..22d4bf0670 100644
--- a/aio/src/styles/2-modules/_index.scss
+++ b/aio/src/styles/2-modules/_index.scss
@@ -28,7 +28,7 @@
 @forward 'progress-bar/progress-bar';
 @forward 'presskit/presskit';
 @forward 'resources/resources';
-@forward 'roadmap';
+@forward 'roadmap/roadmap';
 @forward 'search-results/search-results';
 @forward 'select-menu/select-menu';
 @forward 'table/table';
diff --git a/aio/src/styles/2-modules/_theme.scss b/aio/src/styles/2-modules/_theme.scss
index 62919bd78e..35990de1aa 100644
--- a/aio/src/styles/2-modules/_theme.scss
+++ b/aio/src/styles/2-modules/_theme.scss
@@ -20,6 +20,7 @@
 @use 'notification/notification-theme';
 @use 'presskit/presskit-theme';
 @use 'resources/resources-theme';
+@use 'roadmap/roadmap-theme';
 @use 'search-results/search-results-theme';
 @use 'select-menu/select-menu-theme';
 @use 'table/table-theme';
@@ -47,6 +48,7 @@
   @include notification-theme.theme($theme);
   @include presskit-theme.theme($theme);
   @include resources-theme.theme($theme);
+  @include roadmap-theme.theme($theme);
   @include search-results-theme.theme($theme);
   @include select-menu-theme.theme($theme);
   @include table-theme.theme($theme);
diff --git a/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss b/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
new file mode 100644
index 0000000000..ae4e6ffe3c
--- /dev/null
+++ b/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
@@ -0,0 +1,11 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '../../constants';
+
+@mixin theme($theme) {
+  $is-dark-theme: map.get($theme, is-dark);
+
+  .roadmap-done-summary::marker {
+    color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
+  }
+}
diff --git a/aio/src/styles/2-modules/_roadmap.scss b/aio/src/styles/2-modules/roadmap/_roadmap.scss
similarity index 100%
rename from aio/src/styles/2-modules/_roadmap.scss
rename to aio/src/styles/2-modules/roadmap/_roadmap.scss