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

@@ -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
 

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';

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);

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%));
+  }
+}