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

package/overrides/_form-field.scss

@@ -1,6 +1,74 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 
+@mixin defaultSubscriptElements() {
+  background-color: var(--mat-sys-error-container);
+  padding: 0 var(--spacer-and-half) 0
+    calc(var(--triple-spacer) + var(--spacer-and-half));
+  font: var(--mat-sys-label-small);
+  border-bottom: 1px solid var(--mat-sys-error);
+
+  &:before {
+    font-size: 1rem;
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 24;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: var(--icon-font);
+    position: relative;
+    top: var(--half-spacer);
+    margin-left: calc(-1 * var(--triple-spacer));
+    padding-right: var(--half-spacer);
+  }
+}
+
+// hint or error as type value
+@mixin formFieldSubscript($type) {
+  .mat-mdc-form-field-#{$type}-wrapper {
+    padding: 0;
+
+    .mat-mdc-form-field-hint-spacer {
+      display: none;
+    }
+
+    @if $type == error {
+      mat-error {
+        @include defaultSubscriptElements();
+
+        &:before {
+          content: '\e000';
+        }
+      }
+    }
+
+    @if $type == hint {
+      // The mat-warn is set by the color directive
+      mat-hint {
+        padding-top: var(--half-spacer);
+      }
+
+      mat-hint.mat-warn {
+        @include defaultSubscriptElements();
+
+        width: 100%;
+        background-color: var(--mat-sys-primary-container);
+        border-bottom: 1px solid var(--mat-sys-primary);
+        color: var(--mat-sys-primary);
+        padding: 0
+          var(--spacer-and-half)
+          var(--half-spacer)
+          calc(var(--triple-spacer) + var(--spacer-and-half));
+
+        &:before {
+          content: '\e002';
+        }
+      }
+    }
+  }
+}
+
 @mixin override() {
   @include mat.form-field-overrides(
     (
@@ -24,6 +92,11 @@
     padding: var(--spacer);
     //margin-bottom: var(--spacer);
 
+    .mat-mdc-form-field-subscript-wrapper {
+      @include formFieldSubscript(error);
+      @include formFieldSubscript(hint);
+    }
+
     .mat-mdc-form-field-required-marker {
       @include mat.form-field-overrides(
         (
@@ -50,33 +123,7 @@
         }
       }
     }
-    .mat-mdc-form-field-subscript-wrapper {
-      .mat-mdc-form-field-error-wrapper {
-        padding: 0;
-        mat-error {
-          background-color: var(--mat-sys-error-container);
-          padding: 0 var(--spacer-and-half) 0
-            calc(var(--triple-spacer) + var(--spacer-and-half));
-          font: var(--mat-sys-label-small);
-          border-bottom: 1px solid var(--mat-sys-error);
-          &:before {
-            font-size: 1rem;
-            font-variation-settings:
-              'FILL' 1,
-              'wght' 400,
-              'GRAD' 0,
-              'opsz' 24;
-            content: '\e000';
-            /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-            font-family: var(--icon-font);
-            position: relative;
-            top: var(--half-spacer);
-            margin-left: calc(-1 * var(--triple-spacer));
-            padding-right: var(--half-spacer);
-          }
-        }
-      }
-    }
+
     &.mat-warn {
       .mat-mdc-form-field-subscript-wrapper {
         .mat-mdc-form-field-error-wrapper {

package/overrides/_slide-toggle.scss

@@ -1,14 +1,43 @@
 @use '@angular/material' as mat;
 
 @mixin override() {
+  $size: 24px;
+  $handleSize: calc($size - 4px);
+  $margin: 0 4px;
+
   @include mat.slide-toggle-overrides(
     (
+      //unselected-track-color: var(--mat-sys-outline),
+      unselected-icon-color: white,
       track-outline-color: var(--mat-sys-surface-variant),
       selected-track-outline-color: var(--mat-sys-secondary),
       label-text-font: var(--mat-sys-body-medium-font),
       label-text-size: var(--mat-sys-body-medium-size),
       label-text-weight: var(--mat-sys-body-medium-weight),
       label-text-line-height: var(--mat-sys-body-medium-line-height),
+      track-height: $size,
+      handle-height: $size,
+
+      touch-target-size: $size,
+      state-layer-size: $size,
+      handle-width: $size,
+      track-width: 42px,
+
+      selected-icon-size: $handleSize,
+      pressed-handle-size: $handleSize,
+      unselected-handle-size: $handleSize,
+      with-icon-handle-size: $handleSize,
+
+      selected-handle-horizontal-margin: $margin,
+      unselected-pressed-handle-horizontal-margin: $margin,
+      selected-with-icon-handle-horizontal-margin: 0,
+      selected-pressed-handle-horizontal-margin: 0,
+      unselected-handle-horizontal-margin: $margin,
+      unselected-with-icon-handle-horizontal-margin: $margin,
+
+      track-outline-width: 0,
+      selected-track-outline-width: 0,
+      disabled-unselected-track-outline-width: 0
     )
   );
 

package/package.json

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

package/utilities/_tokens.scss

@@ -24,13 +24,14 @@
     --paginator-height: 37px;
     --page-size-width: 80px;
 
-    --quad-spacer: 2rem;
-    --triple-spacer: 1.5rem;
-    --double-spacer: 1rem;
-    --spacer-and-half: 0.75rem;
-    --spacer: 0.5rem;
-    --half-spacer: 0.25rem;
-    --quarter-spacer: 0.125rem;
+    // Sizes based on 16px base rem
+    --quad-spacer: 2rem; // 32px
+    --triple-spacer: 1.5rem; // 24px
+    --double-spacer: 1rem; // 16px
+    --spacer-and-half: 0.75rem; // 12px
+    --spacer: 0.5rem; // 8px
+    --half-spacer: 0.25rem; // 4px
+    --quarter-spacer: 0.125rem; // 2px
 
     --text-font: Source Sans Pro, sans-serif;
     --brand-font: Poppins, sans-serif;