feat: add a dark theme to cde and use material defaults with atlasng tokens

apps/cde-ui/project.json

@@ -27,6 +27,22 @@
           "includePaths": ["node_modules/", "libs/design-system/styles", "apps/cde-ui/src/sass"]
         },
         "polyfills": ["zone.js"]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "5.5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "8kb",
+              "maximumError": "16kb"
+            }
+          ]
+        }
       }
     },
     "serve": {

apps/cde-ui/src/app/app.component.html

@@ -28,6 +28,16 @@
     >
       <mat-icon>explore</mat-icon>
     </a>
+    <button
+      mat-icon-button
+      hraFeature="theme-toggle"
+      hraClickEvent
+      [hraPlainTooltip]="themeToggleLabel()"
+      [attr.aria-label]="themeToggleLabel()"
+      (click)="themeService.toggle()"
+    >
+      <mat-icon>{{ themeService.theme() === 'dark' ? 'light_mode' : 'dark_mode' }}</mat-icon>
+    </button>
 
     <hra-help-button action="https://humanatlas.io/user-story/5" />
 

apps/cde-ui/src/app/app.component.scss

@@ -1,20 +1,23 @@
+@use 'utils';
+@use 'vars';
+
 :host {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 20rem;
+  min-height: 100vh;
+  background-color: vars.$surface;
 
-  ::ng-deep hra-table-of-contents-layout {
-    @media (min-width: 1100px) {
-      margin: 0;
-      padding: 2.5rem;
-      gap: 0;
-      justify-content: center;
+  ::ng-deep hra-table-of-contents-layout.hra-table-of-contents-layout-side-column {
+    margin: 0;
+    padding: 2.5rem;
+    gap: 0;
+    justify-content: center;
 
-      .content-container {
-        margin: 0 !important;
-        padding: 0 2.5rem !important;
-      }
+    .content-container {
+      margin: 0 !important;
+      padding: 0 2.5rem !important;
     }
   }
 
@@ -26,3 +29,15 @@
     }
   }
 }
+
+// Explore menu options: the option name over a body medium description
+::ng-deep .more-menu .option-text {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
+
+  .option-description {
+    @include utils.use-font(body, medium);
+    color: vars.$on-surface-variant;
+  }
+}

apps/cde-ui/src/app/app.component.spec.ts

@@ -1,15 +1,32 @@
 import { HttpClientModule } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { signal } from '@angular/core';
+import { PrivacyPreferencesService } from '@hra-ui/design-system/privacy';
+import { PlainTooltipDirective } from '@hra-ui/design-system/tooltips/plain-tooltip';
 import { Shallow } from 'shallow-render';
 import { AppComponent } from './app.component';
+import { Theme, ThemeService } from './services/theme-service/theme.service';
 
 describe('AppComponent', () => {
   let shallow: Shallow<AppComponent>;
   beforeEach(async () => {
-    shallow = new Shallow(AppComponent).import(HttpClientModule, HttpClientTestingModule);
+    shallow = new Shallow(AppComponent)
+      .import(HttpClientModule, HttpClientTestingModule)
+      .dontMock(PlainTooltipDirective)
+      .mock(PrivacyPreferencesService, { launch: jest.fn() });
   });
 
   it(`should have as title 'cde-ui'`, async () => {
     await expect(shallow.render()).resolves.toBeTruthy();
   });
+
+  it('switches themes with the theme toggle', async () => {
+    const toggle = jest.fn();
+    const { find } = await shallow.mock(ThemeService, { theme: signal<Theme>('light'), toggle }).render();
+    const button = find('[hraFeature="theme-toggle"]');
+
+    expect(button.nativeElement.getAttribute('aria-label')).toEqual('Switch to dark theme');
+    button.triggerEventHandler('click', {});
+    expect(toggle).toHaveBeenCalled();
+  });
 });

apps/cde-ui/src/app/app.component.ts

@@ -15,6 +15,7 @@ import { createNotifier } from 'ngxtension/create-notifier';
 import { CRUMBS_DATA_KEY, removeLastCrumbRoute, ROOT_CRUMBS } from './shared/resolvers/crumbs.resolver';
 import { getOptionalRouteData } from './shared/utils/route-properties';
 import { Breakpoints, watchBreakpoint } from '@hra-ui/cdk/breakpoints';
+import { ThemeService } from './services/theme-service/theme.service';
 
 /**
  * App component for CDE
@@ -59,6 +60,14 @@ export class AppComponent extends BaseApplicationComponent {
   /** Whether the screen size is considered small (mobile) */
   private readonly isSmallScreen = watchBreakpoint(Breakpoints.Mobile);
 
+  /** Light and dark theme switcher */
+  protected readonly themeService = inject(ThemeService);
+
+  /** Theme toggle label, naming the theme a click switches to */
+  protected readonly themeToggleLabel = computed(() =>
+    this.themeService.theme() === 'dark' ? 'Switch to light theme' : 'Switch to dark theme',
+  );
+
   /** Computed breadcrumbs for the current route */
   protected readonly crumbs = computed(() => {
     if (this.isSmallScreen()) {

apps/cde-ui/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, inject, provideEnvironmentInitializer } from '@angular/core';
 import {
   provideRouter,
   withComponentInputBinding,
@@ -9,6 +9,7 @@ import {
 import { provideContentTemplateDefs } from '@hra-ui/cdk/content-template';
 import { provideNothrowPlatformLocation } from '@hra-ui/cdk/platform-location';
 import { provideAnalytics, withErrorHandler, withRouterEvents } from '@hra-ui/common/analytics';
+import { provideCustomScrollOptions } from '@hra-ui/common/custom-scroll';
 import { provideAppConfiguration } from '@hra-ui/common/injectors';
 import { provideRouterExt } from '@hra-ui/common/router-ext';
 import { provideDesignSystem } from '@hra-ui/design-system';
@@ -20,13 +21,26 @@ import { GridContainerDef } from '@hra-ui/design-system/content-templates/grid-c
 import { ImageDef } from '@hra-ui/design-system/content-templates/image';
 import { MarkdownDef } from '@hra-ui/design-system/content-templates/markdown';
 import { PageSectionDef } from '@hra-ui/design-system/content-templates/page-section';
-import { IconDef, provideIcons } from '@hra-ui/design-system/icons';
+import { IconConfig, IconConfigRegistryService, IconDef, provideIcons } from '@hra-ui/design-system/icons';
+import { provideTableOfContentsLayoutOptions } from '@hra-ui/design-system/layouts/table-of-contents';
+import { provideTableOfContentsOptions } from '@hra-ui/design-system/navigation/table-of-contents';
 import { PageTableDef } from '@hra-ui/design-system/table';
+import { providePlainTooltipOptions } from '@hra-ui/design-system/tooltips/plain-tooltip';
 import { provideMarkdown } from 'ngx-markdown';
 import { ROUTES } from './app.routes';
 import { StudiesGridDef } from './components/studies-grid/types/studies-grid.definition';
 import { handleNavigationError } from './shared/utils/navigation-error-handler';
 
+/**
+ * CDE logo in theme colors, so it follows the light and dark themes wherever it appears,
+ * such as the landing page hero and the Spatial Omics Gallery header.
+ * Takes precedence over the fixed colors the design system gives every product logo.
+ */
+const CDE_LOGO_CONFIG: IconConfig = {
+  color: 'var(--mat-sys-on-secondary)',
+  backgroundColor: 'var(--mat-sys-secondary)',
+};
+
 /**
  * Set of config options available during the application bootstrap operation.
  */
@@ -51,17 +65,28 @@ export const appConfig: ApplicationConfig = {
       CopyEmailButtonDef,
       StudiesGridDef,
     ]),
+    // Page changes jump to the top instead of animating with the design system's smooth scrolling.
+    // hubmapconsortium/hra-ui#2361 tracks the fix for every HRA app.
+    provideCustomScrollOptions({ instantNavigation: true }),
     provideDesignSystem(),
+    provideEnvironmentInitializer(() => {
+      inject(IconConfigRegistryService).setIconConfig('cde', 'product', CDE_LOGO_CONFIG);
+    }),
     provideHttpClient(),
     provideIcons(),
     provideMarkdown(),
     provideNothrowPlatformLocation(),
+    providePlainTooltipOptions({ hraStyles: false }),
     provideRouter(
       ROUTES,
       withComponentInputBinding(),
       withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }),
       withNavigationErrorHandler(handleNavigationError),
     ),
     provideRouterExt(),
+    // The table of contents follows AtlasNG's: a Material navigation list, in a side column from AtlasNG's
+    // medium breakpoint (960px)
+    provideTableOfContentsLayoutOptions({ sideColumnQuery: '(min-width: 960px)' }),
+    provideTableOfContentsOptions({ navList: true }),
   ],
 };

apps/cde-ui/src/app/components/example-list/example-list.component.html

@@ -1,7 +1,7 @@
 <ul class="examples">
   @for (example of examples(); track example.url) {
     <li>
-      <a class="example" hraFeature="example" [hraClickEvent]="{ url: example.url }" [hraLink]="example.url">
+      <a class="example" hraFeature="example" matRipple [hraClickEvent]="{ url: example.url }" [hraLink]="example.url">
         <span class="thumbnail">
           <img alt="" [attr.src]="example.image | assetUrl" />
         </span>

apps/cde-ui/src/app/components/example-list/example-list.component.scss

@@ -28,7 +28,7 @@
     padding: 0.75rem;
     color: inherit;
     text-decoration: none;
-    @include cde-utils.card(0.625rem);
+    @include cde-utils.card(vars.$corner-small);
 
     &:hover,
     &:focus-visible {
@@ -38,23 +38,25 @@
     }
 
     &:focus-visible {
-      outline: 0.125rem solid vars.$tertiary;
-      outline-offset: -0.125rem;
+      @include cde-utils.focus-ring;
     }
   }
 
   .thumbnail {
+    position: relative;
     flex-shrink: 0;
     width: min(6.5rem, 30%);
     aspect-ratio: 16 / 10;
     overflow: hidden;
-    border-radius: 0.5rem;
-    background-color: vars.$secondary;
+    border-radius: vars.$corner-small;
+    background-color: vars.$surface-container-high;
 
     img {
-      display: block;
-      width: 100%;
-      height: 100%;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
       object-fit: cover;
     }
   }
@@ -67,17 +69,17 @@
   }
 
   .title {
-    @include cde-utils.font(vars.$body-medium-font, 1.125rem, 1.5rem, 600, 0);
-    color: vars.$secondary;
+    @include utils.use-font(title, medium);
+    color: vars.$on-surface;
   }
 
   .description {
-    @include cde-utils.font(vars.$body-medium-font, 0.875rem, 1.25rem, 400, 0.0125rem);
-    color: vars.$primary;
+    @include utils.use-font(body, medium);
+    color: vars.$on-surface-variant;
   }
 
   .credit {
-    @include cde-utils.font(vars.$body-medium-font, 0.875rem, 1.25rem, 400, 0.0125rem);
+    @include utils.use-font(body, medium);
     color: vars.$on-surface-variant;
   }
 
@@ -91,8 +93,8 @@
     height: 2.5rem;
     margin-left: auto;
     border-radius: vars.$corner-full;
-    background-color: utils.with-alpha(vars.$tertiary, 10%);
-    color: vars.$on-tertiary-fixed;
+    background-color: utils.with-alpha(vars.$primary, 10%);
+    color: vars.$on-primary-container;
   }
 
   @container (max-width: 28rem) {

apps/cde-ui/src/app/components/example-list/example-list.component.spec.ts

@@ -33,6 +33,14 @@ describe('ExampleListComponent', () => {
     expect(screen.getByRole('link', { name: /Example B/ })).toHaveAttribute('href', '/example/1');
   });
 
+  it('should ripple each row when pressed', async () => {
+    await setup();
+
+    for (const link of screen.getAllByRole('link')) {
+      expect(link).toHaveClass('mat-ripple');
+    }
+  });
+
   it('should show the data credit only when provided', async () => {
     const { container } = await setup();
 

apps/cde-ui/src/app/components/example-list/example-list.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { HraCommonModule } from '@hra-ui/common';
 import { LinkDirective } from '@hra-ui/common/router-ext';
@@ -22,7 +23,7 @@ export interface ExampleItem {
  */
 @Component({
   selector: 'cde-example-list',
-  imports: [HraCommonModule, LinkDirective, MatIconModule],
+  imports: [HraCommonModule, LinkDirective, MatIconModule, MatRippleModule],
   templateUrl: './example-list.component.html',
   styleUrl: './example-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/cde-ui/src/app/components/file-upload/file-upload.component.html

@@ -1,6 +1,6 @@
 <ng-container hraFeature="file-upload">
   @if (!file && errorMessage()) {
-    <hra-error-indicator announce [errors]="[errorMessage(), errorActionMessage()]" />
+    <hra-error-indicator announce icon="warning" [errors]="[errorMessage(), errorActionMessage()]" />
   }
 
   @if (file && !errorMessage()) {
@@ -9,8 +9,6 @@
     <button
       mat-flat-button
       class="upload"
-      hraPrimaryButton
-      hraButtonSize="large"
       hraFeature="upload"
       hraClickEvent
       [attr.aria-label]="uploadAriaLabel() ?? null"

apps/cde-ui/src/app/components/landing-card/landing-card.component.html

@@ -3,6 +3,7 @@
 <a
   class="card"
   hraFeature="primary-action"
+  matRipple
   [hraClickEvent]="{ url: data.action.url }"
   [hraLink]="data.action.url"
   [hraLinkExternal]="data.action.external"