@onemrvapublic/design-system-theme 20.0.0-develop.11 → 20.0.0-develop.13

package/overrides/_datepicker.scss

@@ -4,6 +4,7 @@
   @include mat.datepicker-overrides(
     (
       calendar-container-background-color: var(--mat-sys-surface-container),
+      calendar-container-elevation-shadow: var(--mat-sys-level2),
     )
   );
 }

package/overrides/_form-field.scss

@@ -9,12 +9,12 @@
       outlined-hover-label-text-color: var(--mat-sys-on-surface),
       container-height: var(--input-height),
       container-vertical-padding: var(--spacer-and-half),
-      outlined-label-text-weight: bold,
       outlined-outline-color: var(--mat-sys-outline-variant),
       outlined-focus-outline-color: var(--mat-sys-on-surface),
       outlined-hover-outline-color: var(--mat-sys-on-surface),
       outlined-outline-width: 1px,
       outlined-focus-outline-width: 2px,
+      outlined-label-text-weight: var(--mat-sys-label-small),
     )
   );
 

package/overrides/_tabs.scss

@@ -13,12 +13,8 @@
       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;
-      }
-    }
+
+  .mdc-tab-indicator--active {
+    font-weight: bold;
   }
 }

package/package.json

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

package/palettes/_palette.scss

@@ -76,52 +76,31 @@ $palette: (
   ),
   neutral: (
     0: #000000,
-    // Black
-    4: #0f0f0f,
-    // Very Dark Gray
-    6: #191919,
-    // Slightly Lighter Dark Gray
+    4: #0e0e0e,
+    6: #161616,
     10: #242424,
-    // Dark Gray
-    12: #2e2e2e,
-    // Slightly Lighter Dark Gray
-    17: #393939,
-    // Medium Dark Gray
-    20: #444444,
-    // Medium Gray
-    22: #4e4e4e,
-    // Slightly Lighter Medium Gray
-    24: #595959,
-    // Light Gray
-    25: #646464,
-    // Slightly Lighter Gray
-    30: #707070,
-    35: #7d7d7d,
-    40: #898989,
-    50: #a6a6a6,
-    60: #c2c2c2,
-    70: #dfdfe7,
-    // Approaching #F1F0FC
-    80: #f1f0fc,
-    // Your provided color
-    87: #f4f2fe,
-    // Slightly Lighter than #F1F0FC
-    90: #f7f5ff,
-    // Even Lighter than 87%
-    92: #f8f7ff,
-    // Even Lighter than 90%
-    94: #faf9ff,
-    // Very subtle difference with 92%
-    95: #fbfaff,
-    // Almost white
-    96: #fcfbff,
-    // Almost white
+    12: #282829,
+    17: #343334,
+    20: #3a3a3b,
+    22: #3f3e40,
+    24: #444244,
+    25: #464446,
+    30: #514f52,
+    35: #5c5a5e,
+    40: #686569,
+    50: #7e7a80,
+    60: #949097,
+    70: #aba6ae,
+    80: #c2bbc5,
+    87: #d1cbd5,
+    90: #d8d1dc,
+    92: #ece6f0,
+    94: #f3edf7,
+    95: #f5f0f8,
+    96: #f7f2fa,
     98: #ffffff,
-    // Pure White
     99: #ffffff,
-    // Pure White
     100: #ffffff,
-    // Pure White
   ),
   neutral-variant: (
     0: #000000,
@@ -136,7 +115,7 @@ $palette: (
     50: #78767d,
     60: #928f97,
     70: #adaab2,
-    80: #c9c5cd,
+    80: #d7d5ed,
     90: #e5e1e9,
     95: #f3eff8,
     98: #fcf8ff,

package/utilities/_tokens.scss

@@ -49,22 +49,22 @@
     --avatar-font-size: 2.5rem;
     --avatar-resize: 0.75rem;
 
-    .onemrva-mat-avatar--xsmall {
+    .onemrva-mat-avatar.xsmall {
       --avatar-size: 2rem;
       --avatar-font-size: 0.75rem;
       --avatar-resize: 0.25rem;
     }
-    .onemrva-mat-avatar--small {
+    .onemrva-mat-avatar.small {
       --avatar-size: 2.5rem;
       --avatar-font-size: 1rem;
       --avatar-resize: 0.5rem;
     }
-    .onemrva-mat-avatar--large {
+    .onemrva-mat-avatar.large {
       --avatar-size: 4.5rem;
       --avatar-font-size: 2rem;
       --avatar-resize: 1rem;
     }
-    .onemrva-mat-avatar--xlarge {
+    .onemrva-mat-avatar.xlarge {
       --avatar-resize: 1.5rem;
       --avatar-size: 8rem;
       --avatar-font-size: 4rem;
@@ -73,13 +73,13 @@
     &: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');
+        --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background-dark.svg');
       }
     }
 
     &.dark-theme {
       // TODO : dark mode
-      --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+      --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background-dark.svg');
     }
   }
 }