@onemrvapublic/design-system-theme 19.4.0-alpha.9 → 20.0.0-develop.1

package/fesm2022/onemrvapublic-design-system-theme.mjs

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 class OnemrvaThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaThemeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaThemeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaThemeModule, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: {
@@ -15,7 +15,7 @@ class OnemrvaThemeModule {
             },
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [

package/fesm2022/onemrvapublic-design-system-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-theme.mjs","sources":["../../../../projects/onemrva/theme/src/lib/theme.module.ts","../../../../projects/onemrva/theme/src/index.ts","../../../../projects/onemrva/theme/src/onemrvapublic-design-system-theme.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport {\n  MatFormFieldDefaultOptions,\n  MAT_FORM_FIELD_DEFAULT_OPTIONS,\n} from '@angular/material/form-field';\n\n@NgModule({\n  providers: [\n    {\n      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n      useValue: {\n        appearance: 'outline',\n        floatLabel: 'always',\n      } as MatFormFieldDefaultOptions,\n    },\n  ],\n  imports: [],\n})\nexport class OnemrvaThemeModule {}\n","/*\n * Public API Surface of theme\n */\n\nexport * from './lib/theme.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAlB,kBAAkB,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAXlB,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;AACvC,gBAAA,QAAQ,EAAE;AACR,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,UAAU,EAAE,QAAQ;AACS,iBAAA;AAChC,aAAA;AACF,SAAA,EAAA,CAAA,CAAA;;4FAGU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,8BAA8B;AACvC,4BAAA,QAAQ,EAAE;AACR,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,UAAU,EAAE,QAAQ;AACS,6BAAA;AAChC,yBAAA;AACF,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACjBD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system-theme.mjs","sources":["../../../../projects/onemrva/theme/src/lib/theme.module.ts","../../../../projects/onemrva/theme/src/index.ts","../../../../projects/onemrva/theme/src/onemrvapublic-design-system-theme.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport {\n  MatFormFieldDefaultOptions,\n  MAT_FORM_FIELD_DEFAULT_OPTIONS,\n} from '@angular/material/form-field';\n\n@NgModule({\n  providers: [\n    {\n      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n      useValue: {\n        appearance: 'outline',\n        floatLabel: 'always',\n      } as MatFormFieldDefaultOptions,\n    },\n  ],\n  imports: [],\n})\nexport class OnemrvaThemeModule {}\n","/*\n * Public API Surface of theme\n */\n\nexport * from './lib/theme.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAXlB,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;AACvC,gBAAA,QAAQ,EAAE;AACR,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,UAAU,EAAE,QAAQ;AACS,iBAAA;AAChC,aAAA;AACF,SAAA,EAAA,CAAA,CAAA;;2FAGU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,8BAA8B;AACvC,4BAAA,QAAQ,EAAE;AACR,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,UAAU,EAAE,QAAQ;AACS,6BAAA;AAChC,yBAAA;AACF,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACjBD;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -1 +1,9 @@
-export * from './lib/theme.module';
+import * as i0 from '@angular/core';
+
+declare class OnemrvaThemeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaThemeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaThemeModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaThemeModule>;
+}
+
+export { OnemrvaThemeModule };

package/index.scss

@@ -61,6 +61,7 @@
 @use 'overrides/form-field';
 @use 'overrides/menu';
 @use 'overrides/progress-bar';
+@use 'overrides/panel';
 @use 'overrides/tabs';
 @use 'overrides/radio';
 @use 'overrides/select';
@@ -76,14 +77,22 @@
 
 @mixin onemrva() {
   color-scheme: light dark;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
   margin: 0;
   padding: 0;
-
   &.dark-theme {
-    color-scheme: dark;
+    color-scheme: dark !important;
+    @media (prefers-color-scheme: light) {
+      color-scheme: dark !important;
+    }
   }
+
   &.light-theme {
-    color-scheme: light;
+    color-scheme: light !important;
+    @media (prefers-color-scheme: dark) {
+      color-scheme: light !important;
+    }
   }
 
   @include fonts.theme();
@@ -114,7 +123,7 @@
     @include mat.theme(
       (
         color: (
-          primary: palettes.$secondary-palette,
+          primary: palettes.$tertiary-palette,
         ),
       )
     );
@@ -156,6 +165,7 @@
     );
   }
   .mat-grayscale,
+  .mat-disabled,
   .mdc-checkbox--disabled,
   .mat-neutral {
     @include mat.theme(
@@ -183,6 +193,7 @@
   @include icon.override();
   @include icon-button.override();
   @include menu.override();
+  @include panel.override();
   @include progress-bar.override();
   @include radio.override();
   @include select.override();

package/overrides/_button.scss

@@ -42,9 +42,17 @@
       background: var(--background-gradient);
       .onemrva-spinner {
         svg {
-          fill: white;
+          fill: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
         }
       }
+      &.mat-accent {
+        .onemrva-spinner {
+          svg {
+            fill: var(--on-background-gradient);
+          }
+        }
+      }
+
       &:hover,
       &:active {
         box-shadow: var(--mat-sys-level2);
@@ -56,7 +64,7 @@
     &.mat-mdc-button-disabled {
       .onemrva-spinner {
         svg {
-          fill: white;
+          fill: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
         }
       }
     }

package/overrides/_carousel.scss

@@ -6,7 +6,7 @@
   onemrva-mat-carousel {
     onemrva-mat-carousel-item {
       onemrva-mat-panel {
-        height: calc(100% - 48px);
+        height: calc(100% - 50px);
       }
     }
   }

package/overrides/_checkbox.scss

@@ -1,10 +1,9 @@
 @use '@angular/material' as mat;
-@use 'sass:map';
-@use '../utilities/variables' as variables;
 
 @mixin override() {
   @include mat.checkbox-overrides(
     (
+      selected-checkmark-color: var(--on-background-gradient),
       selected-icon-color: var(--mat-sys-primary),
       selected-pressed-icon-color: var(--mat-sys-primary),
       selected-focus-icon-color: var(--mat-sys-primary),
@@ -23,12 +22,18 @@
     .mdc-checkbox__native-control:enabled:indeterminate {
       ~ .mdc-checkbox__background {
         background: var(--background-gradient);
-        border: 2px solid var(--mat-sys-secondary);
+        border: 2px solid var(--mat-sys-tertiary);
       }
     }
 
-    // strangely, the overrides don't work when it's pre-checked
     &.mat-success {
+      @include mat.checkbox-overrides(
+        (
+          selected-checkmark-color: var(--mat-sys-on-primary),
+        )
+      );
+
+      // strangely, the overrides don't work when it's pre-checked
       .mdc-checkbox__native-control:enabled:checked,
       .mdc-checkbox__native-control:enabled:indeterminate {
         ~ .mdc-checkbox__background {

package/overrides/_chips.scss

@@ -12,31 +12,31 @@
       label-text-font: var(--mat-sys-label-large-font),
       label-text-size: var(--mat-sys-label-large-size),
       label-text-line-height: var(--mat-sys-label-large-height),
+      with-trailing-icon-trailing-icon-color: var(--mat-sys-primary),
     )
   );
   mat-chip-option,
+  mat-chip-row,
   mat-chip {
-    &.mat-accent {
+    &.mat-accent:not(.mat-mdc-chip-disabled) {
       background: var(--background-gradient);
       @include mat.chips-overrides(
         (
-          outline-color: var(--mat-sys-secondary),
+          outline-color: var(--mat-sys-tertiary),
+          with-trailing-icon-trailing-icon-color: var(--on-background-gradient),
+          label-text-color: var(--on-background-gradient),
         )
       );
-      .mat-mdc-chip-action-label {
-        color: var(--on-background-gradient);
-      }
     }
-    &.mat-error {
-      background: var(--mat-sys-primary-container);
+    &.mat-error:not(.mat-mdc-chip-disabled) {
       @include mat.chips-overrides(
         (
-          outline-color: var(--mat-sys-primary),
+          elevated-container-color: var(--mat-sys-error-container),
+          outline-color: var(--mat-sys-on-error-container),
+          with-trailing-icon-trailing-icon-color: var(--mat-sys-primary),
+          label-text-color: var(--mat-sys-primary),
         )
       );
-      .mat-mdc-chip-action-label {
-        color: var(--mat-sys-primary);
-      }
     }
   }
 }

package/overrides/_layout.scss

@@ -1,6 +1,30 @@
 @use '@angular/material' as mat;
 
 @mixin override() {
+  &:not(.light-theme) {
+    @media (prefers-color-scheme: dark) {
+      header {
+        .logo {
+          filter: brightness(0) invert(1);
+        }
+        .application-title {
+          color: var(--mat-sys-on-surface) !important;
+        }
+      }
+    }
+  }
+
+  &.dark-theme {
+    header {
+      .logo {
+        filter: brightness(0) invert(1);
+      }
+      .application-title {
+        color: var(--mat-sys-on-surface);
+      }
+    }
+  }
+
   .bkg {
     .mat-drawer-content {
       background-image: var(--background-error-page);

package/overrides/_panel.scss

@@ -0,0 +1,66 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  &:not(.light-theme) {
+    onemrva-mat-panel {
+      &[class^='mat-'] {
+        @media (prefers-color-scheme: dark) {
+          @include mat.form-field-overrides(
+            (
+              outlined-label-text-color: var(--mat-sys-on-background),
+              outlined-outline-color: var(--mat-sys-on-background),
+              outlined-focus-label-text-color: var(--mat-sys-on-background),
+              outlined-focus-outline-color: var(--mat-sys-on-background),
+              outlined-hover-label-text-color: var(--mat-sys-on-background),
+              outlined-hover-outline-color: var(--mat-sys-on-background),
+              outlined-input-text-color: var(--mat-sys-on-background),
+              outlined-input-text-placeholder-color: var(
+                  --mat-sys-on-background
+                ),
+            )
+          );
+          @include mat.select-overrides(
+            (
+              enabled-arrow-color: var(--mat-sys-on-background),
+              focused-arrow-color: var(--mat-sys-on-background),
+              placeholder-text-color: var(--mat-sys-on-background),
+              enabled-trigger-text-color: var(--mat-sys-on-background),
+            )
+          );
+        }
+      }
+    }
+  }
+  &.dark-theme {
+    onemrva-mat-panel {
+      onemrva-mat-panel {
+        &[class^='mat-'] {
+          @media (prefers-color-scheme: dark) {
+            @include mat.form-field-overrides(
+              (
+                outlined-label-text-color: var(--mat-sys-on-background),
+                outlined-outline-color: var(--mat-sys-on-background),
+                outlined-focus-label-text-color: var(--mat-sys-on-background),
+                outlined-focus-outline-color: var(--mat-sys-on-background),
+                outlined-hover-label-text-color: var(--mat-sys-on-background),
+                outlined-hover-outline-color: var(--mat-sys-on-background),
+                outlined-input-text-color: var(--mat-sys-on-background),
+                outlined-input-text-placeholder-color: var(
+                    --mat-sys-on-background
+                  ),
+              )
+            );
+            @include mat.select-overrides(
+              (
+                enabled-arrow-color: var(--mat-sys-on-background),
+                focused-arrow-color: var(--mat-sys-on-background),
+                placeholder-text-color: var(--mat-sys-on-background),
+                enabled-trigger-text-color: var(--mat-sys-on-background),
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/overrides/_radio.scss

@@ -3,9 +3,9 @@
 @mixin override() {
   @include mat.radio-overrides(
     (
-      selected-icon-color: var(--mat-sys-secondary),
-      selected-hover-icon-color: var(--mat-sys-secondary),
-      selected-focus-icon-color: var(--mat-sys-secondary),
+      selected-icon-color: var(--mat-sys-tertiary),
+      selected-hover-icon-color: var(--mat-sys-tertiary),
+      selected-focus-icon-color: var(--mat-sys-tertiary),
       label-text-font: var(--mat-sys-label-large-font),
       label-text-size: var(--mat-sys-label-large-size),
       label-text-weight: var(--mat-sys-label-large-weight),

package/overrides/_select.scss

@@ -16,17 +16,21 @@
       padding: 0;
       .selection-choice {
         background: var(--mat-sys-surface-container-high);
+        font: var(--mat-sys-body-small);
         width: 98%;
+        a {
+          text-decoration: underline;
+        }
         span {
-          font-size: var(--mat-sys-body-small-size);
           &.grey {
             color: var(--mat-sys-neutral10);
           }
         }
-        .disabled {
+        .mat-disabled {
           pointer-events: none;
+          font-weight: 400;
           cursor: default;
-          // color: utils.palette($theme, 'grayscale', 500) !important;
+          // color: var(--mat-sys-neutral10);
           text-decoration: none;
         }
       }

package/overrides/_table.scss

@@ -12,14 +12,18 @@
   );
 
   .mat-mdc-table {
+    .mat-mdc-table-sticky-border-elem-left {
+      border-right: 1px solid var(--mat-sys-outline, rgba(0, 0, 0, 0.12));
+    }
+
     &:not(.mat-card-table) {
       tbody tr,
       mat-row {
         &:nth-child(odd) {
           background-color: var(--mat-sys-primary-container);
-          a {
-            color: var(--mat-sys-on-primary-container);
-          }
+          // a {
+          //   color: var(--mat-sys-on-primary-container);
+          // }
         }
       }
     }

package/overrides/_tabs.scss

@@ -3,17 +3,21 @@
 @mixin override() {
   @include mat.tabs-overrides(
     (
-      active-indicator-color: var(--mat-sys-secondary),
-      active-focus-indicator-color: var(--mat-sys-secondary),
-      active-hover-indicator-color: var(--mat-sys-secondary),
+      active-indicator-color: var(--mat-sys-tertiary),
+      active-focus-indicator-color: var(--mat-sys-tertiary),
+      active-hover-indicator-color: var(--mat-sys-tertiary),
       active-indicator-height: 3px,
-      label-text-font: var(--mat-sys-headline-medium),
+      label-text-font: var(--mat-sys-title-medium-font),
+      label-text-size: var(--mat-sys-title-medium-size),
+      label-text-weight: var(--mat-sys-title-medium-weight),
+      label-text-line-height: var(--mat-sys-title-medium-height),
     )
   );
   .mat-mdc-tab-link {
     &.mdc-tab--active {
       .mdc-tab__text-label {
         //text-shadow: 0 0 2px var(--mat-sys-on-surface); // THC HACK
+        font-weight: bold;
       }
     }
   }

package/overrides/_toolbar.scss

@@ -14,5 +14,13 @@
         flex: 1 1 auto;
       }
     }
+    &.mat-accent {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: var(--background-gradient),
+          container-text-color: var(--on-background-gradient),
+        )
+      );
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v19.4.0-alpha.9",
+    "version": "v20.0.0-develop.1",
     "publishConfig": {
         "access": "public"
     },

package/palettes/_palette-alt1.scss

@@ -0,0 +1,189 @@
+$palette: (
+  primary: (
+    0: #000000,
+    10: #180e54,
+    20: #2d2669,
+    25: #383275,
+    30: #443e81,
+    35: #504a8d,
+    40: #625d9c,
+    // 6e68ae is not accessible if not on white
+    // 600 5e5994
+    50: #756fb5,
+    60: #8f88d1,
+    70: #a9a3ee,
+    80: #c6c0ff,
+    90: #f1f0fc,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    5: #100f1d,
+    10: #1b1a28,
+    15: #262432,
+    20: #302f3d,
+    25: #3b3a49,
+    30: #474555,
+    35: #535161,
+    40: #5f5c6d,
+    50: #787586,
+    60: #928fa0,
+    70: #aca9bb,
+    80: #c8c4d7,
+    90: #e4e0f4,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+
+  tertiary: (
+    0: #000000,
+    10: #420007,
+    20: #6c000d,
+    25: #810010,
+    30: #970014,
+    35: #b00019,
+    40: #eb142a,
+    50: #f14d52,
+    60: #f87d7b,
+    70: #fca6a3,
+    80: #fca3a4,
+    90: #ffe3e0,
+    95: #fff0ee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #0f0a12,
+    6: #130e16,
+    10: #1d1820,
+    12: #211c24,
+    17: #27222f,
+    20: #322d3b,
+    22: #363141,
+    24: #3a3545,
+    25: #3d3848,
+    30: #494454,
+    35: #555060,
+    40: #615c6c,
+    50: #7a7585,
+    60: #948f9f,
+    70: #afaaba,
+    80: #cac5d5,
+    87: #d8d3e3,
+    90: #f5e9f8,
+    92: #f7ecfa,
+    94: #f9eefc,
+    95: #faf1fd,
+    96: #fcf4fe,
+    98: #fdf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    5: #111016,
+    10: #1c1b21,
+    15: #26252b,
+    20: #313036,
+    25: #3c3a41,
+    30: #47464d,
+    35: #535158,
+    40: #5f5d65,
+    50: #78767d,
+    60: #928f97,
+    70: #adaab2,
+    80: #c9c5cd,
+    90: #e5e1e9,
+    95: #f3eff8,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #4c0e08,
+    20: #7f1b11,
+    25: #992216,
+    30: #b3291a,
+    35: #bc2411,
+    40: #bf2600,
+    // fixed
+    50: #cc4d2e,
+    60: #d9755c,
+    70: #e59c8a,
+    80: #f2c4b7,
+    90: #ffebe6,
+    // fixed
+    95: #fff1ec,
+    98: #fff7f5,
+    99: #fffcfa,
+    100: #ffffff,
+    // fixed
+  ),
+  info: (
+    0: #000000,
+    10: #0e006a,
+    20: #1c00a6,
+    25: #2300c6,
+    30: #301ed3,
+    35: #3e32de,
+    40: #463ce5,
+    50: #4d66ea,
+    60: #6782ef,
+    70: #8ba4f5,
+    80: #b0c6f9,
+    90: #d6e7fc,
+    95: #e8f2fe,
+    98: #f4f8ff,
+    99: #fafcff,
+    100: #ffffff,
+  ),
+  warn: (
+    0: #000000,
+    10: #401a01,
+    20: #7f3402,
+    25: #9f4102,
+    30: #bf4e03,
+    // fixed
+    35: #c14e02,
+    40: #c75300,
+    // fixed
+    50: #dc7520,
+    60: #f09740,
+    70: #f9ba70,
+    80: #fbdcb0,
+    90: #fff4eb,
+    // fixed
+    95: #fff7f1,
+    98: #fffaf7,
+    99: #fffcfa,
+    100: #ffffff,
+  ),
+  success: (
+    0: #000000,
+    10: #002110,
+    20: #00391f,
+    25: #004527,
+    30: #00522f,
+    35: #005f37,
+    40: #328154,
+    // moved from 50 to 40
+    50: #5cb280,
+    60: #72c092,
+    70: #88cfa5,
+    80: #9eddb7,
+    90: #ebfff4,
+    // replaced previous bright green with this
+    95: #f3fff8,
+    98: #f8fffaf6,
+    99: #fbfffd,
+    100: #ffffff,
+  ),
+);

package/palettes/_palette-alt2.scss

@@ -0,0 +1,190 @@
+$palette: (
+  primary: (
+    0: #000000,
+    10: #180e54,
+    20: #2d2669,
+    25: #383275,
+    30: #443e81,
+    35: #504a8d,
+    40: #625d9c,
+    // 6e68ae is not accessible if not on white
+    // 600 5e5994
+    50: #756fb5,
+    60: #8f88d1,
+    70: #a9a3ee,
+    80: #c6c0ff,
+    90: #f1f0fc,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    5: #100f1d,
+    10: #1b1a28,
+    15: #262432,
+    20: #302f3d,
+    25: #3b3a49,
+    30: #474555,
+    35: #535161,
+    40: #5f5c6d,
+    50: #787586,
+    60: #928fa0,
+    70: #aca9bb,
+    80: #c8c4d7,
+    90: #e4e0f4,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+
+  tertiary: (
+    0: #000000,
+    10: #420007,
+    20: #6c000d,
+    25: #810010,
+    30: #970014,
+    35: #b00019,
+    40: #eb142a,
+    50: #f14d52,
+    60: #f87d7b,
+    70: #fca6a3,
+    80: #fca3a4,
+    90: #ffe3e0,
+    95: #fff0ee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #0e0e13,
+    6: #131319,
+    10: #1b1b21,
+    12: #1f1f25,
+    17: #2a2930,
+    20: #303036,
+    22: #34343b,
+    24: #39383f,
+    25: #3b3b41,
+    30: #47464d,
+    35: #525259,
+    40: #5e5e65,
+    50: #77767e,
+    60: #919097,
+    70: #acaab2,
+    80: #c8c5cd,
+    87: #dbd9e1,
+    90: #e4e1ea,
+    92: #e9e7ef,
+    94: #efecf5,
+    95: #f2eff8,
+    96: #f5f2fb,
+    98: #f6f5f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1d1a22,
+    20: #332f37,
+    25: #3e3a42,
+    30: #49454e,
+    35: #55515a,
+    40: #615c66,
+    50: #7b757f,
+    60: #958e99,
+    70: #b0a9b3,
+    80: #cbc4cf,
+    90: #f9f2fd,
+    // lighter tone
+    95: #fbf6fe,
+    98: #fdfbff,
+    99: #fefeff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #4c0e08,
+    20: #7f1b11,
+    25: #992216,
+    30: #b3291a,
+    35: #bc2411,
+    40: #bf2600,
+    // fixed
+    50: #cc4d2e,
+    60: #d9755c,
+    70: #e59c8a,
+    80: #f2c4b7,
+    90: #ffebe6,
+    // fixed
+    95: #fff1ec,
+    98: #fff7f5,
+    99: #fffcfa,
+    100: #ffffff,
+    // fixed
+  ),
+  info: (
+    0: #000000,
+    10: #0e006a,
+    20: #1c00a6,
+    25: #2300c6,
+    30: #301ed3,
+    35: #3e32de,
+    40: #463ce5,
+    // main tone - shifting to blue
+    50: #4d66ea,
+    60: #6782ef,
+    70: #8ba4f5,
+    80: #b0c6f9,
+    90: #d6e7fc,
+    // lighter blue tones
+    95: #e8f2fe,
+    98: #f4f8ff,
+    99: #fafcff,
+    100: #ffffff,
+  ),
+  warn: (
+    0: #000000,
+    10: #401a01,
+    20: #7f3402,
+    25: #9f4102,
+    30: #bf4e03,
+    // fixed
+    35: #c14e02,
+    40: #c75300,
+    // fixed
+    50: #dc7520,
+    60: #f09740,
+    70: #f9ba70,
+    80: #fbdcb0,
+    90: #fff4eb,
+    // fixed
+    95: #fff7f1,
+    98: #fffaf7,
+    99: #fffcfa,
+    100: #ffffff,
+  ),
+  success: (
+    0: #000000,
+    10: #002110,
+    20: #00391f,
+    25: #004527,
+    30: #00522f,
+    35: #005f37,
+    40: #328154,
+    // moved from 50 to 40
+    50: #5cb280,
+    60: #72c092,
+    70: #88cfa5,
+    80: #9eddb7,
+    90: #ebfff4,
+    // replaced previous bright green with this
+    95: #f3fff8,
+    98: #f8fffaf6,
+    99: #fbfffd,
+    100: #ffffff,
+  ),
+);

package/palettes/_palette.scss

@@ -6,7 +6,9 @@ $palette: (
     25: #383275,
     30: #443e81,
     35: #504a8d,
-    40: #6e68ae,
+    40: #625d9c,
+    // 6e68ae is not accessible if not on white
+    // 600 5e5994
     50: #756fb5,
     60: #8f88d1,
     70: #a9a3ee,
@@ -24,7 +26,7 @@ $palette: (
     25: #810010,
     30: #970014,
     35: #b00019,
-    40: #eb152a,
+    40: #eb142a,
     50: #f14d52,
     60: #f87d7b,
     70: #fca6a3,
@@ -43,7 +45,7 @@ $palette: (
     25: #810010,
     30: #970014,
     35: #b00019,
-    40: #eb152a,
+    40: #eb142a,
     50: #f14d52,
     60: #f87d7b,
     70: #fca6a3,
@@ -56,9 +58,14 @@ $palette: (
   ),
   neutral: (
     0: #000000,
-    //    10: #1b1b21,
-    10: #312f3b,
+    4: #0e0e13,
+    6: #131319,
+    10: #1b1b21,
+    12: #1f1f25,
+    17: #2a2930,
     20: #303036,
+    22: #34343b,
+    24: #39383f,
     25: #3b3b41,
     30: #47464d,
     35: #525259,
@@ -67,24 +74,15 @@ $palette: (
     60: #919097,
     70: #acaab2,
     80: #c8c5cd,
-    90: #e4e1ea,
-    95: #f2eff8,
-    98: #ffffff,
-    99: #ffffff,
-    //   98: #f6f5f9,
-    //   99: #fffbff,
-    100: #ffffff,
-    4: #0e0e13,
-    6: #131319,
-    12: #1f1f25,
-    17: #2a2930,
-    22: #34343b,
-    24: #39383f,
     87: #dbd9e1,
-    92: #f6f5f9,
-    //92: #eae7ef,
+    90: #e4e1ea,
+    92: #e9e7ef,
     94: #efecf5,
+    95: #f2eff8,
     96: #f5f2fb,
+    98: #f6f5f9,
+    99: #fffbff,
+    100: #ffffff,
   ),
   neutral-variant: (
     0: #000000,
@@ -98,41 +96,33 @@ $palette: (
     60: #958e99,
     70: #b0a9b3,
     80: #cbc4cf,
-    90: #f1eaf5,
+    90: #f9f2fd,
     // lighter tone
-    95: #f6eef9,
-    98: #fef7ff,
-    99: #fffbff,
+    95: #fbf6fe,
+    98: #fdfbff,
+    99: #fefeff,
     100: #ffffff,
   ),
   error: (
     0: #000000,
-    10: #4b0003,
-    // dark crimson
-    20: #730006,
-    // rich deep red
-    25: #8c0008,
-    // ruby red
-    30: #a4000a,
-    // bright dark red
-    35: #be000c,
-    // vibrant red
-    40: #d8170c,
-    // main tone (unchanged)
-    50: #e63220,
-    // clean true red
-    60: #f24a38,
-    // medium red, no orange
-    70: #f86c5e,
-    // bright red-pink
-    80: #fba198,
-    // soft pink-red
-    90: #ffe1dd,
-    // 💡 much lighter, gentle red tint
-    95: #ffebe6,
-    98: #fff4f2,
-    99: #fffbff,
+    10: #4c0e08,
+    20: #7f1b11,
+    25: #992216,
+    30: #b3291a,
+    35: #bc2411,
+    40: #bf2600,
+    // fixed
+    50: #cc4d2e,
+    60: #d9755c,
+    70: #e59c8a,
+    80: #f2c4b7,
+    90: #ffebe6,
+    // fixed
+    95: #fff1ec,
+    98: #fff7f5,
+    99: #fffcfa,
     100: #ffffff,
+    // fixed
   ),
   info: (
     0: #000000,
@@ -142,36 +132,37 @@ $palette: (
     30: #301ed3,
     35: #3e32de,
     40: #463ce5,
-    // main tone
-    50: #6159ea,
-    60: #7b75ef,
-    70: #9a96f5,
-    80: #bab7f9,
-    90: #e0e0fc,
-    // 💡 lighter than previous #d0cefa
-    95: #eae9fe,
-    98: #f5f4ff,
-    99: #fbfaff,
+    // main tone - shifting to blue
+    50: #4d66ea,
+    60: #6782ef,
+    70: #8ba4f5,
+    80: #b0c6f9,
+    90: #d6e7fc,
+    // lighter blue tones
+    95: #e8f2fe,
+    98: #f4f8ff,
+    99: #fafcff,
     100: #ffffff,
   ),
   warn: (
     0: #000000,
-    10: #3d0600,
-    20: #631000,
-    25: #771700,
-    30: #8c1d00,
-    35: #a12200,
-    40: #bf4e03,
-    // main tone
-    50: #f87e2f,
-    60: #fa9c58,
-    70: #fcb982,
-    80: #fdd7ac,
-    90: #ffebda,
-    // lighter warning bg
-    95: #fff2e9,
-    98: #fff8f4,
-    99: #fffbfa,
+    10: #401a01,
+    20: #7f3402,
+    25: #9f4102,
+    30: #bf4e03,
+    // fixed
+    35: #c14e02,
+    40: #c75300,
+    // fixed
+    50: #dc7520,
+    60: #f09740,
+    70: #f9ba70,
+    80: #fbdcb0,
+    90: #fff4eb,
+    // fixed
+    95: #fff7f1,
+    98: #fffaf7,
+    99: #fffcfa,
     100: #ffffff,
   ),
   success: (

package/utilities/_fonts.scss

@@ -8,8 +8,9 @@
     @import url('https://cdn.services.rvaonem.fgov.be/font/material/import.css');
   }
 
-  font: var(--mat-sys-body-medium);
-
+  & {
+    font: var(--mat-sys-body-medium);
+  }
   h1 {
     font: var(--mat-sys-display-small);
   }
@@ -36,10 +37,10 @@
 
   @include mat.theme-overrides(
     (
-      body-large: 400 1.125rem/1.9375rem Source Sans Pro,
+      body-large: 400 1.125rem/1.625rem Source Sans Pro,
       body-large-font: Source Sans Pro,
       body-large-size: 1.125rem,
-      body-large-height: 1.9375rem,
+      body-large-height: 1.625rem,
       body-large-weight: 400,
 
       body-medium: 400 1rem/1.625rem Source Sans Pro,
@@ -60,31 +61,31 @@
       display-small-height: 3.25rem,
       display-small-weight: 600,
 
-      display-medium: 700 4.5rem / 6.25rem Poppins,
+      display-medium: 700 4.5rem/6.25rem Poppins,
       display-medium-font: Poppins,
       display-medium-size: 4.5rem,
       display-medium-height: 6.25rem,
       display-medium-weight: 700,
 
-      display-large: 700 9.25rem / 11.25rem Poppins,
+      display-large: 700 9.25rem/11.25rem Poppins,
       display-large-font: Poppins,
       display-large-size: 9.25rem,
       display-large-height: 11.25rem,
       display-large-weight: 700,
 
-      headline-small: 600 1.3rem/2.25rem Poppins,
+      headline-small: 600 1.25rem/2.25rem Poppins,
       headline-small-font: Poppins,
-      headline-small-size: 1.3rem,
+      headline-small-size: 1.25rem,
       headline-small-height: 2.25rem,
       headline-small-weight: 600,
 
-      headline-medium: 600 1.5rem / 2.5rem Poppins,
+      headline-medium: 600 1.5rem/2.5rem Poppins,
       headline-medium-font: Poppins,
       headline-medium-size: 1.5rem,
       headline-medium-height: 2.5rem,
       headline-medium-weight: 600,
 
-      headline-large: 600 1.625rem / 2.75rem Poppins,
+      headline-large: 600 1.625rem/2.75rem Poppins,
       headline-large-font: Poppins,
       headline-large-size: 1.625rem,
       headline-large-height: 2.75rem,
@@ -108,21 +109,21 @@
       label-small-height: 1.125rem,
       label-small-weight: 400,
 
-      title-small: 600 0.9rem/1.6rem Poppins,
+      title-small: 600 0.75rem/1.3125rem Poppins,
       title-small-font: Poppins,
-      title-small-size: 0.9rem,
-      title-small-height: 1.6rem,
+      title-small-size: 0.75rem,
+      title-small-height: 1.3125rem,
       title-small-weight: 600,
 
-      title-medium: 600 1rem/1.8rem Poppins,
+      title-medium: 600 1rem/1.75rem Poppins,
       title-medium-font: Poppins,
       title-medium-size: 1rem,
-      title-medium-height: 1.8rem,
+      title-medium-height: 1.75rem,
       title-medium-weight: 600,
 
-      title-large: 600 1.1rem/2rem Poppins,
+      title-large: 600 1.125rem/2rem Poppins,
       title-large-font: Poppins,
-      title-large-size: 1.1rem,
+      title-large-size: 1.125rem,
       title-large-height: 2rem,
       title-large-weight: 600,
 

package/utilities/_grid.scss

@@ -30,8 +30,8 @@
 
     & > * {
       flex-shrink: 0 !important;
-      width: calc(100% - var(--bs-gutter-x) * 2) !important;
-      max-width: calc(100% - var(--bs-gutter-x) * 2) !important;
+      width: 100% !important;
+      max-width: 100% !important;
       padding-right: var(--bs-gutter-x) !important;
       padding-left: var(--bs-gutter-x) !important;
       margin-top: var(--bs-gutter-y) !important;

package/utilities/_palettes.scss

@@ -1,24 +1,28 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../palettes/palette' as palette;
 
-$_palette: palette.$palette;
+//@use '../palettes/palette' as palette;
+@use '../palettes/palette-alt1' as palette;
+//@use '../palettes/palette-alt2' as palette;
 
 $_rest: (
-  secondary: map.get($_palette, secondary),
-  neutral: map.get($_palette, neutral),
-  neutral-variant: map.get($_palette, neutral-variant),
-  error: map.get($_palette, error),
+  secondary: map.get(palette.$palette, secondary),
+  neutral: map.get(palette.$palette, neutral),
+  'neutral-variant': map.get(palette.$palette, 'neutral-variant'),
+  error: map.get(palette.$palette, error),
 );
 
-$primary-palette: map.merge(map.get($_palette, primary), $_rest);
-$secondary-palette: map.merge(map.get($_palette, secondary), $_rest);
-$tertiary-palette: map.merge(map.get($_palette, tertiary), $_rest);
-$success-palette: map.merge(map.get($_palette, success), $_rest);
-$warn-palette: map.merge(map.get($_palette, warn), $_rest);
-$info-palette: map.merge(map.get($_palette, info), $_rest);
-$error-palette: map.merge(map.get($_palette, error), $_rest);
-$neutral-palette: map.merge(map.get($_palette, neutral-variant), $_rest);
+$primary-palette: map.merge(map.get(palette.$palette, primary), $_rest);
+$secondary-palette: map.merge(map.get(palette.$palette, secondary), $_rest);
+$tertiary-palette: map.merge(map.get(palette.$palette, tertiary), $_rest);
+$success-palette: map.merge(map.get(palette.$palette, success), $_rest);
+$warn-palette: map.merge(map.get(palette.$palette, warn), $_rest);
+$info-palette: map.merge(map.get(palette.$palette, info), $_rest);
+$error-palette: map.merge(map.get(palette.$palette, error), $_rest);
+$neutral-palette: map.merge(
+  map.get(palette.$palette, 'neutral-variant'),
+  $_rest
+);
 
 //@function _high-contrast-value($light, $dark, $theme-type) {
 //  @if ($theme-type == light) {

package/utilities/_tokens.scss

@@ -70,12 +70,14 @@
       --avatar-font-size: 4rem;
     }
 
-    @media (prefers-color-scheme: dark) {
-      --on-background-gradient: black;
-      --background-gradient: transparent
-        linear-gradient(90deg, #f78fb3 0%, #fca3a4 100%) 0% 0% no-repeat
-        padding-box;
+    &:not(.light-theme) {
+      @media (prefers-color-scheme: dark) {
+        // TODO : dark mode
+        --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+      }
+    }
 
+    &.dark-theme {
       // TODO : dark mode
       --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
     }

package/lib/theme.module.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class OnemrvaThemeModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaThemeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaThemeModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaThemeModule>;
-}

package/palettes/_clemence.scss

@@ -1,164 +0,0 @@
-$palette: (
-  primary: (
-    0: #000000,
-    10: #1c1a2c,
-    20: #373457,
-    25: #45416d,
-    30: #524e82,
-    35: #605b98,
-    40: #6e68ae,
-    50: #8681bc,
-    60: #9e9ac9,
-    70: #b6b3d6,
-    80: #cfcde4,
-    90: #e7e6f2,
-    95: #f3f2f8,
-    98: #fafafc,
-    99: #fdfcfe,
-    100: #ffffff,
-  ),
-  secondary: (
-    0: #000000,
-    10: #3b0412,
-    20: #760925,
-    25: #930b2e,
-    30: #b00e38,
-    35: #ce1041,
-    40: #eb124a,
-    50: #ee3a68,
-    60: #f26186,
-    70: #f588a4,
-    80: #f8b0c3,
-    90: #fcd8e1,
-    95: #fdebf0,
-    98: #fef7f9,
-    99: #fffbfc,
-    100: #ffffff,
-  ),
-  tertiary: (
-    0: #000000,
-    10: #3b0412,
-    20: #760925,
-    25: #930b2e,
-    30: #b00e38,
-    35: #ce1041,
-    40: #eb124a,
-    50: #ee3a68,
-    60: #f26186,
-    70: #f588a4,
-    80: #f8b0c3,
-    90: #fcd8e1,
-    95: #fdebf0,
-    98: #fef7f9,
-    99: #fffbfc,
-    100: #ffffff,
-  ),
-  neutral: (
-    0: #000000,
-    10: #2b2b28,
-    20: #565651,
-    25: #6c6b65,
-    30: #81807a,
-    35: #96968e,
-    40: #acaba2,
-    50: #bab9b2,
-    60: #c8c7c1,
-    70: #d6d5d0,
-    80: #e3e3e0,
-    90: #f1f1f0,
-    95: #f8f8f7,
-    98: #fcfcfc,
-    99: #fefefd,
-    100: #ffffff,
-  ),
-  neutral-variant: (
-    0: #000000,
-    10: #1d1a22,
-    20: #332f37,
-    25: #3e3a42,
-    30: #49454e,
-    35: #55515a,
-    40: #615c66,
-    50: #7b757f,
-    60: #958e99,
-    70: #b0a9b3,
-    80: #cbc4cf,
-    90: #e8e0eb,
-    95: #f6eef9,
-    98: #fef7ff,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  success: (
-    0: #000000,
-    10: #122a14,
-    20: #235328,
-    25: #2c6831,
-    30: #357d3b,
-    35: #3d9145,
-    40: #46a64f,
-    50: #65b56c,
-    60: #84c48a,
-    70: #a2d2a7,
-    80: #c1e1c4,
-    90: #e0f0e2,
-    95: #f0f8f0,
-    98: #f9fcf9,
-    99: #fcfefc,
-    100: #ffffff,
-  ),
-  warn: (
-    0: #000000,
-    10: #3d1a00,
-    20: #7a3300,
-    25: #994000,
-    30: #b84d00,
-    35: #d65900,
-    40: #f56600,
-    50: #f7802a,
-    60: #f89955,
-    70: #fab280,
-    80: #fcccaa,
-    90: #fde6d4,
-    95: #fef2ea,
-    98: #fffaf6,
-    99: #fffcfb,
-    100: #ffffff,
-  ),
-  error: (
-    0: #000000,
-    10: #370603,
-    20: #6e0c06,
-    25: #890e08,
-    30: #a41109,
-    35: #c0140a,
-    40: #db170c,
-    50: #e13e34,
-    60: #e7645d,
-    70: #ed8b85,
-    80: #f3b2ae,
-    90: #f9d8d6,
-    95: #fceceb,
-    98: #fef7f7,
-    99: #fefbfb,
-    100: #ffffff,
-  ),
-  info: (
-    0: #000000,
-    10: #120f39,
-    20: #231e72,
-    25: #2c268f,
-    30: #352dac,
-    35: #3d34c8,
-    40: #463ce5,
-    50: #655ce9,
-    60: #847dee,
-    70: #a29ef2,
-    80: #c1bef6,
-    90: #e0defb,
-    95: #f0effd,
-    98: #f9f8fe,
-    99: #fcfcff,
-    100: #ffffff,
-  ),
-);