@onemrvapublic/design-system-theme 17.2.43 → 17.2.44

package/components/_autocomplete.scss

@@ -1,4 +1,14 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
 @mixin theme($theme) {
+
+  @include mat.autocomplete-base($theme);
+  @include mat.autocomplete-theme($theme);
+  @include mat.autocomplete-typography(map.get($theme, typography));
+  @include mat.autocomplete-color(map.get($theme, color));
+  @include mat.autocomplete-density($theme);
+
   .mdc-menu-surface.mat-mdc-autocomplete-panel {
     padding: 0;
   }

package/components/_buttons.scss

@@ -1,16 +1,15 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
-@mixin theme($theme, $loadMaterial : false) {
-  @if $loadMaterial {
-    // TODO
-    @include mat.button-base($theme);
-    @include mat.button-theme($theme);
-    @include mat.button-typography($theme);
-    @include mat.button-color($theme);
-    @include mat.button-density($theme);
-  }
+@mixin theme($theme) {
+
+  @include mat.button-base($theme);
+  @include mat.button-theme($theme);
+  @include mat.button-typography(map.get($theme, typography));
+  @include mat.button-color(map.get($theme, color));
+  @include mat.button-density($theme);
 
   $spacer: map-get($theme, "spacer");
   $accent400: µ.accent($theme, 400);

package/components/_cards.scss

@@ -5,6 +5,12 @@
 @mixin theme($theme) {
   $border-radius: 20px;
 
+  @include mat.card-base($theme);
+  @include mat.card-theme($theme);
+  @include mat.card-typography(map.get($theme, typography));
+  @include mat.card-color(map.get($theme, color));
+  @include mat.card-density($theme);
+
   .onemrva-shadow-highlight {
     &:hover {
       box-shadow: 0 2px 6px #00000026 !important;

package/components/_checkbox.scss

@@ -4,6 +4,13 @@
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+
+  @include mat.checkbox-base($theme);
+  @include mat.checkbox-theme($theme);
+  @include mat.checkbox-typography(map.get($theme, typography));
+  @include mat.checkbox-color(map.get($theme, color));
+  @include mat.checkbox-density($theme);
+  
   .mat-mdc-checkbox .mdc-checkbox {
     .mdc-checkbox__native-control:enabled:checked,
     .mdc-checkbox__native-control:enabled:indeterminate {

package/components/_chips.scss

@@ -1,4 +1,5 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
@@ -6,6 +7,14 @@
   $primary: µ.primary($theme);
   $color: mat.get-color-from-palette(map-get($theme, "grayscale"));
 
+
+  @include mat.chips-base($theme);
+  @include mat.chips-theme($theme);
+  @include mat.chips-typography(map.get($theme, typography));
+  @include mat.chips-color(map.get($theme, color));
+  @include mat.chips-density($theme);
+  
+
   .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
     background: none;
   }
@@ -25,6 +34,15 @@
     font-style: normal;
     font-weight: 500;
     line-height: 21px; /* 131.25% */
+    .mat-mdc-chip-graphic {
+      width: 0;
+      padding: 0 !important;
+    }
+    &.mat-mdc-chip-selected {
+      .mat-mdc-chip-graphic {
+        width: var(--mdc-chip-with-avatar-avatar-size);
+      }
+    }
     .mat-icon {
       line-height: 14px;
     }
@@ -93,57 +111,9 @@
     .mat-mdc-chip-remove {
       margin-top: 6px;
     }
-  }
-
-
-
-
-
-
-
-  #NO {
-    &.mat-mdc-standard-chip {
-      &:active {
-        box-shadow: none !important;
-      }
 
-      &:hover,
-      &:active,
-      &:focus {
-        .mat-mdc-chip-focus-overlay {
-          display: none;
-        }
-      }
-
-      .mat-mdc-chip-action-label {
-        display: flex;
-        align-items: center;
-      }
-      .mat-mdc-chip-action-label {
-        .mat-icon {
-          line-height: 18px;
-          font-size: 18px;
-          height: 18px;
-          width: 22px;
-        }
-      }
-
-
-      .mat-mdc-chip-action {
-        padding: 0;
-      }
-
-      .mat-mdc-chip-remove {
-        opacity: 0.4;
-        height: 16px;
-        width: 16px;
-        margin-left: 8px;
-
-        &:hover {
-          opacity: 0.54;
-        }
-
-      }
+    .mdc-evolution-chip__action--trailing {
+      padding: 0 0 0 8px !important;
     }
   }
 }

package/components/_datepicker.scss

@@ -1,4 +1,13 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
 @mixin theme($theme) {
+  @include mat.datepicker-base($theme);
+  @include mat.datepicker-theme($theme);
+  @include mat.datepicker-typography(map.get($theme, typography));
+  @include mat.datepicker-color(map.get($theme, color));
+  @include mat.datepicker-density($theme);
+
   .mat-datepicker-close-button {
     display: none;
   }

package/components/_dialogs.scss

@@ -1,8 +1,16 @@
 @use "./µ";
+@use "sass:map";
 @use "@angular/material" as mat;
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+
+  @include mat.dialog-base($theme);
+  @include mat.dialog-theme($theme);
+  @include mat.dialog-typography(map.get($theme, typography));
+  @include mat.dialog-color(map.get($theme, color));
+  @include mat.dialog-density($theme);
+  
   $spacer: map-get($theme, "spacer");
 
   .mdc-dialog__title::before {

package/components/_expansion.scss

@@ -1,6 +1,17 @@
 @use "./µ";
+@use "sass:map";
+@use "@angular/material" as mat;
+
 
 @mixin theme($theme) {
+
+  @include mat.expansion-base($theme);
+  @include mat.expansion-theme($theme);
+  @include mat.expansion-typography(map.get($theme, typography));
+  @include mat.expansion-color(map.get($theme, color));
+  @include mat.expansion-density($theme);
+  
+  
   .mat-expansion-panel:not([class*="mat-elevation-z"]) {
     box-shadow: none;
   }

package/components/_form-field.scss

@@ -0,0 +1,11 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "./µ";
+
+@mixin theme($theme) {
+  @include mat.form-field-base($theme);
+  @include mat.form-field-theme($theme);
+  @include mat.form-field-typography(map.get($theme, typography));
+  @include mat.form-field-color(map.get($theme, color));
+  @include mat.form-field-density($theme);
+}

package/components/_icon.scss

@@ -1,9 +1,18 @@
 @use "@angular/material" as mat;
 @use "./µ";
 //@import "@angular/material/theming";
+@use "sass:map";
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+
+  @include mat.icon-base($theme);
+  @include mat.icon-theme($theme);
+  @include mat.icon-typography(map.get($theme, typography));
+  @include mat.icon-color(map.get($theme, color));
+  @include mat.icon-density($theme);
+  
+  
   mat-icon {
     $xsmallsize: 12px;
     $smallsize: 16px;

package/components/_lists.scss

@@ -3,6 +3,11 @@
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.list-base($theme);
+  @include mat.list-theme($theme);
+  @include mat.list-typography(map.get($theme, typography));
+  @include mat.list-color(map.get($theme, color));
+  @include mat.list-density($theme);
   .mat-mdc-list-base {
     .mat-mdc-list-item {
       @include µ.body-1($theme);

package/components/_menu.scss

@@ -3,6 +3,13 @@
 @use "./µ";
 
 @mixin theme($theme) {
+
+  @include mat.menu-base($theme);
+  @include mat.menu-theme($theme);
+  @include mat.menu-typography(map.get($theme, typography));
+  @include mat.menu-color(map.get($theme, color));
+  @include mat.menu-density($theme);
+
   .mat-mdc-menu-panel {
     top: 5px;
 

package/components/_progress-bar.scss

@@ -3,6 +3,11 @@
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.progress-bar-base($theme);
+  @include mat.progress-bar-theme($theme);
+  @include mat.progress-bar-typography(map.get($theme, typography));
+  @include mat.progress-bar-color(map.get($theme, color));
+  @include mat.progress-bar-density($theme);
   $primary: µ.primary($theme);
 
   .mat-mdc-progress-bar {

package/components/_radio.scss

@@ -4,6 +4,11 @@
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+  @include mat.radio-base($theme);
+  @include mat.radio-theme($theme);
+  @include mat.radio-typography(map.get($theme, typography));
+  @include mat.radio-color(map.get($theme, color));
+  @include mat.radio-density($theme);
   .mat-mdc-radio-button {
     label {
       @include µ.label-button($theme);

package/components/_select.scss

@@ -1,8 +1,13 @@
-
+@use "@angular/material" as mat;
 @use "sass:map";
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.select-base($theme);
+  @include mat.select-theme($theme);
+  @include mat.select-typography(map.get($theme, typography));
+  @include mat.select-color(map.get($theme, color));
+  @include mat.select-density($theme);
   .mat-mdc-select {
     --mat-select-invalid-arrow-color: #{µ.error($theme, 500)};
     .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {

package/components/_slide-toggle.scss

@@ -4,6 +4,11 @@
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+  @include mat.slide-toggle-base($theme);
+  @include mat.slide-toggle-theme($theme);
+  @include mat.slide-toggle-typography(map.get($theme, typography));
+  @include mat.slide-toggle-color(map.get($theme, color));
+  @include mat.slide-toggle-density($theme);
   .mat-mdc-slide-toggle {
     &.mat-primary {
       .mdc-switch:enabled .mdc-switch__track:after {

package/components/_snackbar.scss

@@ -1,7 +1,13 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.snack-bar-base($theme);
+  @include mat.snack-bar-theme($theme);
+  @include mat.snack-bar-typography(map.get($theme, typography));
+  @include mat.snack-bar-color(map.get($theme, color));
+  @include mat.snack-bar-density($theme);
   .mat-mdc-snack-bar-container {
     box-shadow: none;
 

package/components/_stepper.scss

@@ -1,7 +1,13 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.stepper-base($theme);
+  @include mat.stepper-theme($theme);
+  @include mat.stepper-typography(map.get($theme, typography));
+  @include mat.stepper-color(map.get($theme, color));
+  @include mat.stepper-density($theme);
   $spacer: map-get($theme, "spacer");
 
   mat-stepper,

package/components/_tables.scss

@@ -1,8 +1,14 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+  @include mat.table-base($theme);
+  @include mat.table-theme($theme);
+  @include mat.table-typography(map.get($theme, typography));
+  @include mat.table-color(map.get($theme, color));
+  @include mat.table-density($theme);
   .mat-mdc-table {
     th.mat-mdc-header-cell {
       color: black;

package/components/_tabs.scss

@@ -1,7 +1,13 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 
 @mixin theme($theme) {
+  @include mat.tabs-base($theme);
+  @include mat.tabs-theme($theme);
+  @include mat.tabs-typography(map.get($theme, typography));
+  @include mat.tabs-color(map.get($theme, color));
+  @include mat.tabs-density($theme);
   .mat-mdc-tab-link {
     text-decoration: none;
   }

package/components/_text-inputs.scss

@@ -1,5 +1,6 @@
 @use "@angular/material" as mat;
 @use "./µ";
+@use "sass:map";
 @import "../utilities/variables";
 
 @mixin inputStyle($color) {
@@ -20,6 +21,13 @@
 }
 
 @mixin theme($theme) {
+
+  @include mat.input-base($theme);
+  @include mat.input-theme($theme);
+  @include mat.input-typography(map.get($theme, typography));
+  @include mat.input-color(map.get($theme, color));
+  @include mat.input-density($theme);
+
   .mat-mdc-form-field {
     line-height: 1.125;
 
@@ -31,9 +39,7 @@
       color: µ.grayscale($theme, 900);
     }
 
-    .mat-mdc-text-field-wrapper
-      .mat-mdc-form-field-flex
-      .mat-mdc-floating-label {
+    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
       top: 25px;
     }
 
@@ -93,9 +99,7 @@
     &.mat-form-field-onemrva-warning {
       &.mat-focused,
       &:hover {
-        .mat-mdc-text-field-wrapper
-          .mat-mdc-form-field-flex
-          .mat-mdc-floating-label {
+        .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
           left: 3px;
         }
       }
@@ -154,9 +158,7 @@
       ) {
       &.mat-focused,
       &:hover {
-        .mat-mdc-text-field-wrapper
-          .mat-mdc-form-field-flex
-          .mat-mdc-floating-label {
+        .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
           left: 3px;
         }
       }

package/components/_toolbar.scss

@@ -1,9 +1,14 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
 @mixin theme($theme) {
-
+  @include mat.toolbar-base($theme);
+  @include mat.toolbar-theme($theme);
+  @include mat.toolbar-typography(map.get($theme, typography));
+  @include mat.toolbar-color(map.get($theme, color));
+  @include mat.toolbar-density($theme);
   .mat-toolbar{
     &.sticky {
       position: sticky !important;

package/components/_tooltip.scss

@@ -1,8 +1,14 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
 @mixin theme($theme) {
+  @include mat.tooltip-base($theme);
+  @include mat.tooltip-theme($theme);
+  @include mat.tooltip-typography(map.get($theme, typography));
+  @include mat.tooltip-color(map.get($theme, color));
+  @include mat.tooltip-density($theme);
   .mat-mdc-tooltip {
     font-size: 12px;
     background: #ffffff;

package/index.scss

@@ -3,12 +3,13 @@
 @forward "./components/cards" as cards-*;
 @forward "./components/checkbox" as checkbox-*;
 @forward "./components/chips" as chips-*;
-@forward "./components/choice-button" as choice-button-*;
+@forward "components/choice-chips" as choice-chips-*;
 @forward "./components/container" as container-*;
 @forward "./components/datepicker" as datepicker-*;
 @forward "./components/drag-and-drop" as drag-and-drop-*;
 @forward "./components/dialogs" as dialogs-*;
 @forward "./components/expansion" as expansion-*;
+@forward "./components/form-field" as form-field-*;
 @forward "./components/links" as links-*;
 @forward "./components/lists" as lists-*;
 @forward "./components/menu" as menu-*;
@@ -40,12 +41,13 @@
 @use "./components/cards";
 @use "./components/checkbox";
 @use "./components/chips";
-@use "./components/choice-button" as choiceButton;
+@use "components/choice-chips" as choiceChips;
 @use "./components/container";
 @use "./components/datepicker";
 @use "./components/dialogs";
 @use "./components/drag-and-drop" as dragAndDrop;
 @use "./components/expansion" as expansion;
+@use "./components/form-field" as formField;
 @use "./components/links";
 @use "./components/lists";
 @use "./components/menu";
@@ -108,13 +110,17 @@
   @include utilities.utilities();
 }
 
+@mixin core($b: variables.$breakpoints) {
+  @include mat.core-theme(variables.$onemrva-theme);
+}
+
 @mixin onemrva($b: variables.$breakpoints) {
 
   @include mat.core-theme(variables.$onemrva-theme);
   @include mat.all-component-themes(variables.$onemrva-theme);
-  @include mat.all-component-typographies(
-    map.get(variables.$onemrva-theme, typography)
-  );
+  //@include mat.all-component-typographies(
+  //  map.get(variables.$onemrva-theme, typography)
+  //);
 
   @include fonts.theme(variables.$onemrva-theme);
 
@@ -123,8 +129,10 @@
   @include cards.theme(variables.$onemrva-theme);
   @include checkbox.theme(variables.$onemrva-theme);
   @include chips.theme(variables.$onemrva-theme);
-  @include choiceButton.theme(variables.$onemrva-theme);
+  @include choiceChips.theme(variables.$onemrva-theme);
+  @include formField.theme(variables.$onemrva-theme);
   @include datepicker.theme(variables.$onemrva-theme);
+
   @include dialogs.theme(variables.$onemrva-theme);
   @include dragAndDrop.theme(variables.$onemrva-theme);
   @include expansion.theme(variables.$onemrva-theme);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "17.2.43",
+    "version": "17.2.44",
     "publishConfig": {
         "access": "public"
     },