Merge branch 'light-mode' into 'main'

Theme Colors

See merge request !105

projects/nshmp-template/src/lib/components/content-container/content-container.component.html

@@ -2,7 +2,7 @@
 <div class="app-content">
   <!-- Control Panel -->
   <div
-    class="side-panel"
+    class="side-panel control-panel"
     [ngClass]="{
       selected: headerService.controlPanelSelected(),
     }"
@@ -44,7 +44,7 @@
   <!-- Settings -->
   @if (showSettingsPanel()) {
     <div
-      class="side-panel"
+      class="side-panel settings"
       [ngClass]="{
         selected: headerService.settingsSelected(),
       }"

projects/nshmp-template/src/lib/components/content-container/content-container.component.scss

@@ -11,9 +11,6 @@
   }
 }
 
-$panel-control-height: 44px;
-$panel-control-height-small: 24px;
-
 .app-content {
   display: flex;
   flex-direction: row;
@@ -30,12 +27,12 @@ $panel-control-height-small: 24px;
 
     .panel-control {
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      height: $panel-control-height;
+      height: variables.$side-panel-control-height;
     }
 
     .panel-content {
       overflow: scroll;
-      height: calc(100% - $panel-control-height);
+      height: calc(100% - variables.$side-panel-control-height);
 
       button {
         margin-bottom: variables.$form-field-padding-bottom;
@@ -45,7 +42,7 @@ $panel-control-height-small: 24px;
     .control {
       @include mat.icon-button-overrides(
         (
-          state-layer-size: $panel-control-height,
+          state-layer-size: variables.$side-panel-control-height,
         )
       );
     }
@@ -78,11 +75,11 @@ body.small-screen :host {
     padding-top: 5px;
 
     .panel-control {
-      height: $panel-control-height-small;
+      height: variables.$side-panel-control-height-small;
     }
 
     .panel-content {
-      height: calc(100% - $panel-control-height-small);
+      height: calc(100% - variables.$side-panel-control-height-small);
     }
 
     .control {
@@ -91,7 +88,7 @@ body.small-screen :host {
       @include mat.icon-button-overrides(
         (
           icon-size: 18px,
-          state-layer-size: $panel-control-height-small,
+          state-layer-size: variables.$side-panel-control-height-small,
           touch-target-display: 0,
         )
       );

projects/nshmp-template/src/lib/components/footer/footer.component.scss

@@ -10,7 +10,7 @@
 
 .nshmp-template-footer {
   height: variables.$footer-height;
-  background-color: variables.$nshmp-primary-color;
+  background-color: variables.$usgs-dark-blue;
   color: white;
   font-size: 12px;
 

projects/nshmp-template/src/lib/components/header/header.component.scss

@@ -25,7 +25,7 @@ $app-title-max-height: calc(variables.$header-height - $icon-size - ($logo-paddi
 
   @include mat.toolbar-overrides(
     (
-      container-background-color: var(--mat-sys-primary),
+      container-background-color: variables.$usgs-dark-blue,
       standard-height: variables.$header-height,
     )
   );

projects/nshmp-template/styles/_material-theme.scss

@@ -51,7 +51,8 @@ html {
       surface-container-low: variables.$nshmp-surface-container-low,
       surface-container-high: variables.$nshmp-surface-container-high,
       surface-container-highest: variables.$nshmp-surface-container-highest,
-      surface-container-bright: variables.$nshmp-surface-container-highest,
+      surface-bright: variables.$nshmp-surface-container-bright,
+      surface-extra-bright: variables.$nshmp-surface-container-extra-bright,
     )
   );
 
@@ -111,6 +112,11 @@ html {
     hover-state-layer-opacity: 0.3,
   ));
 
+  // Dialog overrides
+  @include mat.dialog-overrides((
+    container-color: var(--mat-sys-surface-container-high),
+  ));
+
   // Primary color buttons
   button.primary {
     @include mat.button-overrides(
@@ -138,19 +144,20 @@ html {
     @include mat.button-overrides(
       (
         // Raised
-        protected-container-color: var(--mat-sys-surface-container-highest),
+        protected-container-color: variables.$nshmp-surface-container-extra-bright,
+        protected-label-text-color: variables.$nshmp-on-primary-color,
         // Flat
-        filled-container-color: var(--mat-sys-surface-container-highest),
-        filled-label-text-color: var(--mat-sys-on-secondary-container),
+        filled-container-color: variables.$nshmp-surface-container-extra-bright,
+        filled-label-text-color: variables.$nshmp-on-primary-color,
       )
     );
 
     @include mat.fab-overrides(
       (
-        container-color: var(--mat-sys-surface-container-highest),
-        small-container-color: var(--mat-sys-surface-container-highest),
-        small-foreground-color: var(--mat-sys-on-secondary-container),
-        foreground-color:  var(--mat-sys-on-secondary-container),
+        container-color: variables.$nshmp-surface-container-extra-bright,
+        small-container-color: variables.$nshmp-surface-container-extra-bright,
+        small-foreground-color: variables.$nshmp-on-primary-color,
+        foreground-color: variables.$nshmp-on-primary-color,
       )
     );
   }

projects/nshmp-template/styles/_variables.scss

@@ -22,6 +22,8 @@ $footer-height: 58px !default;
 
 /* App control and settings panels */
 $side-panel-width: 350px !default;
+$side-panel-control-height: 44px;
+$side-panel-control-height-small: 24px;
 
 /* Form fields */
 $form-field-height: 40px !default;
@@ -35,19 +37,20 @@ $form-field-padding-bottom: calc($form-caption-line-height + 4px);
 /*
  Material 3 surface colors
 
- Colors created at 15%.
- Light colors: https://noeldelgado.github.io/shadowlord/#fafafa
- Dark colors: https://noeldelgado.github.io/shadowlord/#28272e
+ Light colors: https://noeldelgado.github.io/shadowlord/#fcfcfc
+ Dark colors: https://noeldelgado.github.io/shadowlord/#242525
 */
-$nshmp-surface-container: light-dark(#fafafa, #28272e);
-$nshmp-surface-container-low: light-dark(#fbfbfb, #222127);
-$nshmp-surface-container-high: light-dark(#d5d5d5, #48474d);
-$nshmp-surface-container-highest: light-dark(#afafaf,#69686d);
-$nshmp-surface-container-bright: light-dark(#8a8a8a, #89888c);
+$nshmp-surface-container: light-dark(#efefef, #1b1b1b);
+$nshmp-surface-container-low: light-dark(#fdfdfd, #1d1d1d);
+$nshmp-surface-container-high: light-dark(#fcfcfc, #313131);
+$nshmp-surface-container-highest: light-dark(#d6d6d6,#515151);
+$nshmp-surface-container-bright: light-dark(#b0b0b0, #727272);
+$nshmp-surface-container-extra-bright: light-dark(#8b8b8b, #939393);
 
 // Material 3 main colors
-$nshmp-primary-color: #00264c !default;
+$usgs-dark-blue: light-dark(#00264c, #264767) !default;
+$nshmp-primary-color: light-dark(#00264c, #4d6782) !default;
 $nshmp-secondary-color: $nshmp-surface-container-high !default;
 $nshmp-error-color: #f44336 !default;
-$nshmp-on-primary-color: #ffffff;
+$nshmp-on-primary-color: #fefefe;