Merge branch 'cell-distance-explorer' of https://github.com/hubmapcon…

…sortium/hra-ui into cde-create-visualization-page
hubmapconsortium · Apr 5, 2024 · 4d8e542 · 4d8e542
2 parents e387421 + 6f08612
commit 4d8e542
Show file tree

Hide file tree

Showing 8 changed files with 523 additions and 30 deletions.
diff --git a/apps/cde-ui/src/index.html b/apps/cde-ui/src/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
-  <body>
+  <body class="mat-typography">
     <cde-root></cde-root>
   </body>
 </html>
diff --git a/apps/cde-ui/src/styles.scss b/apps/cde-ui/src/styles.scss
@@ -1,29 +1,3 @@
-@use 'angular-material-css-vars' as mat-css;
-@use 'reset';
-@use 'theming';
-@use 'overrides';
-
-cde-root {
-  display: block;
-  height: 100%;
-  font-family: 'Metropolis';
-}
-
-.cdk-global-scrollblock {
-  overflow-y: unset !important;
-}
-
-$mat-css-default-light-theme: map-merge(
-  mat-css.$default-light-theme,
-  (
-    --palette-primary-100-no-rgb: mat-css.hex-to-rgb(#c6ecf6),
-    --palette-primary-500-no-rgb: mat-css.hex-to-rgb(#006298),
-    --palette-primary-700-no-rgb: mat-css.hex-to-rgb(#00385f),
-    --palette-accent-A100: mat-css.hex-to-rgb(#fff7f8),
-    --palette-accent-A200: mat-css.hex-to-rgb(#990000),
-    --palette-warn-500: mat-css.hex-to-rgb(#dc231e),
-  )
-);
-
-@include theming.init($default-theme: $mat-css-default-light-theme);
-@include overrides.init();
+@use './styles/resets';
+@use './styles/fonts';
+@use './styles/material-theming';
diff --git a/apps/cde-ui/src/styles/_fonts.scss b/apps/cde-ui/src/styles/_fonts.scss
@@ -0,0 +1,2 @@
+@use '@fontsource/metropolis';
+@use '@fontsource/nunito-sans';
diff --git a/apps/cde-ui/src/styles/_material-theming.scss b/apps/cde-ui/src/styles/_material-theming.scss
@@ -0,0 +1,55 @@
+@use '@angular/material' as mat;
+@use './palettes' as palettes;
+
+@include mat.core();
+
+$primary: mat.define-palette(palettes.$hra-red1-palette, 500);
+$accent: mat.define-palette(palettes.$hra-blue1-palette, 500);
+
+$typography: mat.define-rem-typography-config(
+  $font-family: 'Metropolis',
+  $headline-5: mat.define-typography-level(72px, 90px, 500, $letter-spacing: -5%),
+  $headline-6: mat.define-typography-level(42px, 52.5px, 500),
+  $subtitle-1: mat.define-typography-level(24px, 36px, 500),
+  $body-1: mat.define-typography-level(20px, 30px, 400, 'Nunito Sans', $letter-spacing: 7%),
+  $body-2: mat.define-typography-level(18px, 27px, 400, 'Nunito Sans', $letter-spacing: 7%),
+  $button: mat.define-typography-level(18px, 34.5px, 500),
+  $caption: mat.define-typography-level(14px, 21px, 400, $letter-spacing: 0.5%),
+);
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+    ),
+    typography: $typography,
+    density: 0,
+  )
+);
+
+@include mat.core-theme($theme);
+@include mat.typography-hierarchy($theme);
+
+/** Add theme mixin for material components here! */
+@include mat.button-theme($theme);
+@include mat.button-toggle-theme($theme);
+@include mat.card-theme($theme);
+@include mat.divider-theme($theme);
+@include mat.form-field-theme($theme);
+@include mat.icon-theme($theme);
+@include mat.progress-bar-theme($theme);
+@include mat.select-theme($theme);
+
+// TODO: Maybe use strong-focus-indicators? https://material.angular.io/guide/theming#strong-focus-indicators
+
+.footer {
+  $footer-typography: mat.define-rem-typography-config(
+    $font-family: 'Metropolis',
+    $body-1: mat.define-typography-level(18px, 27px, 500),
+    $caption: mat.define-typography-level(15px, 22.5px, 400),
+  );
+
+  @include mat.core-typography($footer-typography);
+  @include mat.typography-hierarchy($footer-typography);
+}