@onemrvapublic/design-system-theme 17.2.47 → 17.2.49

package/components/_autocomplete.scss

@@ -5,9 +5,6 @@
 
   @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/_badge.scss

@@ -0,0 +1,10 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin theme($theme) {
+  @include mat.badge-base($theme);
+  @include mat.badge-theme($theme);
+
+
+
+}

package/components/_bottom-sheet.scss

@@ -0,0 +1,7 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin theme($theme) {
+  @include mat.bottom-sheet-base($theme);
+  @include mat.bottom-sheet-theme($theme);
+}

package/components/_button-toggle.scss

@@ -0,0 +1,39 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  @include mat.button-toggle-base($theme);
+  @include mat.button-toggle-theme($theme);
+
+  $spacer: map-get($theme, "spacer");
+  $accent400: µ.accent($theme, 400);
+  $accent500: µ.accent($theme, 500);
+
+  mat-button-toggle-group {
+    border-radius: $onemrva-button-border-radius;
+    border-color: µ.grayscale($theme, 300);
+    mat-button-toggle {
+      font: mat.get-theme-typography($theme,'button');
+      // padding: $spacer 2 * $spacer;
+      font-weight: 600;
+      color: µ.grayscale($theme, 900);
+      .mat-button-toggle-button {
+        padding: $spacer 2 * $spacer;
+        width: auto;
+      }
+      .mat-button-toggle-label-content {
+        line-height: 21px !important;
+        padding: 0;
+      }
+      &.mat-button-toggle-checked {
+        background-color: µ.primary($theme, 500);
+        .mat-button-toggle-label-content {
+          color: µ.accent($theme, "500-contrast");
+        }
+      }
+    }
+  }
+}

package/components/{_buttons.scss → _button.scss}

@@ -7,9 +7,9 @@
 
   @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);
@@ -17,30 +17,6 @@
   $accent-gradient: transparent
     linear-gradient(90deg, $accent400 0%, $accent500 100%) 0% 0% no-repeat
     padding-box;
-  mat-button-toggle-group {
-    border-radius: $onemrva-button-border-radius;
-    border-color: µ.grayscale($theme, 300);
-    mat-button-toggle {
-      font: mat.get-theme-typography($theme,'button');
-      // padding: $spacer 2 * $spacer;
-      font-weight: 600;
-      color: µ.grayscale($theme, 900);
-      .mat-button-toggle-button {
-        padding: $spacer 2 * $spacer;
-        width: auto;
-      }
-      .mat-button-toggle-label-content {
-        line-height: 21px !important;
-        padding: 0;
-      }
-      &.mat-button-toggle-checked {
-        background-color: µ.primary($theme, 500);
-        .mat-button-toggle-label-content {
-          color: µ.accent($theme, "500-contrast");
-        }
-      }
-    }
-  }
   .mat-mdc-button-base {
 
     &.mat-error {

package/components/_cards.scss

@@ -7,9 +7,9 @@
 
   @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 {

package/components/_checkbox.scss

@@ -7,9 +7,9 @@
 
   @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,

package/components/_chips.scss

@@ -9,9 +9,9 @@
 
   @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) {

package/components/_datepicker.scss

@@ -4,9 +4,6 @@
 @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

@@ -7,10 +7,7 @@
 
   @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/_divider.scss

@@ -0,0 +1,10 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin theme($theme) {
+  @include mat.divider-base($theme);
+  @include mat.divider-theme($theme);
+
+
+
+}

package/components/_expansion.scss

@@ -7,9 +7,9 @@
 
   @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"]) {

package/components/_fab.scss

@@ -0,0 +1,13 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@use "sass:map";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  @include mat.fab-base($theme);
+  @include mat.fab-theme($theme);
+
+
+
+}

package/components/_form-field.scss

@@ -5,7 +5,4 @@
 @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-button.scss

@@ -0,0 +1,11 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@use "sass:map";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  @include mat.icon-button-base($theme);
+  @include mat.icon-button-theme($theme);
+
+}

package/components/_icon.scss

@@ -1,6 +1,5 @@
 @use "@angular/material" as mat;
 @use "./µ";
-//@import "@angular/material/theming";
 @use "sass:map";
 @import "../utilities/variables";
 
@@ -8,9 +7,9 @@
 
   @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 {

package/components/_lists.scss

@@ -5,9 +5,9 @@
 @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

@@ -6,9 +6,9 @@
 
   @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

@@ -5,9 +5,6 @@
 @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

@@ -6,9 +6,9 @@
 @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

@@ -5,9 +5,9 @@
 @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

@@ -6,9 +6,6 @@
 @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/_slider.scss

@@ -0,0 +1,14 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  @include mat.slider-base($theme);
+  @include mat.slider-theme($theme);
+
+
+
+  
+}

package/components/{_snackbar.scss → _snack-bar.scss}

@@ -5,9 +5,6 @@
 @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

@@ -5,9 +5,9 @@
 @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 → _table.scss}

@@ -6,9 +6,9 @@
 @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

@@ -5,9 +5,9 @@
 @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/_toolbar.scss

@@ -6,9 +6,9 @@
 @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

@@ -6,9 +6,9 @@
 @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/components/{_text-inputs.scss → input.scss}

@@ -24,9 +24,9 @@
 
   @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;

package/index.scss

@@ -1,9 +1,10 @@
 @forward "./components/autocomplete" as autocomplete-*;
-@forward "./components/buttons" as button-*;
+@forward "./components/button" as button-*;
+@forward "./components/button-toggle" as button-toggle-*;
 @forward "./components/cards" as cards-*;
 @forward "./components/checkbox" as checkbox-*;
 @forward "./components/chips" as chips-*;
-@forward "components/choice-chips" as choice-chips-*;
+@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-*;
@@ -15,17 +16,22 @@
 @forward "./components/menu" as menu-*;
 @forward "./components/progress-bar" as progress-bar-*;
 @forward "./components/radio" as radio-*;
-@forward "./components/snackbar" as snackbar-*;
+@forward "./components/snack-bar" as snack-bar-*;
 @forward "./components/sidenav" as sidenav-*;
 @forward "./components/slide-toggle" as slide-toggle-*;
-@forward "./components/tables" as tables-*;
+@forward "./components/table" as tables-*;
 @forward "./components/toolbar" as toolbar-*;
 @forward "./components/tabs" as tabs-*;
-@forward "./components/text-inputs" as text-inputs-*;
+@forward "./components/input" as text-inputs-*;
 @forward "./components/stepper" as stepper-*;
 @forward "./components/icon" as icon-*;
 @forward "./components/tooltip" as tooltip-*;
 @forward "./components/select" as select-*;
+@forward "./components/slider" as slider-*;
+@forward "./components/fab" as fab-*;
+@forward "./components/badge" as badge-*;
+@forward "./components/bottom-sheet" as bottom-sheet-*;
+@forward "./components/icon-button" as icon-button-*;
 
 @forward "utilities/variables" show $onemrva-theme;
 @forward "utilities/variables" show $breakpoints;
@@ -39,33 +45,39 @@
 @use "@angular/material" as mat;
 
 @use "./components/autocomplete";
-@use "./components/buttons";
+@use "./components/button";
+@use "./components/button-toggle";
+@use "./components/icon-button";
 @use "./components/cards";
 @use "./components/checkbox";
 @use "./components/chips";
-@use "components/choice-chips" as choiceChips;
+@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/form-field" as form-field;
 @use "./components/links";
 @use "./components/lists";
 @use "./components/menu";
 @use "./components/progress-bar" as progressBar;
 @use "./components/radio";
-@use "./components/snackbar";
+@use "components/snack-bar";
 @use "./components/sidenav";
-@use "./components/slide-toggle" as slideToggle;
-@use "./components/tables";
+@use "./components/slider";
+@use "./components/slide-toggle" as slide-toggle;
+@use "components/table";
 @use "./components/tabs";
-@use "./components/text-inputs" as textInputs;
+@use "./components/input" as input;
 @use "./components/stepper";
 @use "./components/icon";
 @use "./components/tooltip";
 @use "./components/select";
 @use "./components/toolbar";
+@use "./components/fab";
+@use "./components/badge";
+@use "./components/bottom-sheet";
 
 @use "utilities/utilities";
 @use "utilities/fonts";
@@ -121,6 +133,7 @@
 @mixin base($b: variables.$breakpoints) {
   @include reset();
   @include fonts.theme(variables.$onemrva-theme);
+  @include links.theme(variables.$onemrva-theme);
   @include mat.core-theme(variables.$onemrva-theme);
 }
 
@@ -135,34 +148,41 @@
 
   @include fonts.theme(variables.$onemrva-theme);
 
-  @include autocomplete.theme(variables.$onemrva-theme);
-  @include buttons.theme(variables.$onemrva-theme);
   @include cards.theme(variables.$onemrva-theme);
-  @include checkbox.theme(variables.$onemrva-theme);
+  @include progressBar.theme(variables.$onemrva-theme);
+  @include tooltip.theme(variables.$onemrva-theme);
+  @include form-field.theme(variables.$onemrva-theme);
+  @include input.theme(variables.$onemrva-theme);
+  @include select.theme(variables.$onemrva-theme);
+  @include autocomplete.theme(variables.$onemrva-theme);
+  @include dialogs.theme(variables.$onemrva-theme);
   @include chips.theme(variables.$onemrva-theme);
-  @include choiceChips.theme(variables.$onemrva-theme);
-  @include formField.theme(variables.$onemrva-theme);
+  @include slide-toggle.theme(variables.$onemrva-theme);
+  @include radio.theme(variables.$onemrva-theme);
+  @include slider.theme(variables.$onemrva-theme);
+  @include menu.theme(variables.$onemrva-theme);
+  @include lists.theme(variables.$onemrva-theme);
+  // Paginator is replaced by onemrva design system
+  @include tabs.theme(variables.$onemrva-theme);
+  @include checkbox.theme(variables.$onemrva-theme);
+  @include button.theme(variables.$onemrva-theme);
+  @include icon-button.theme(variables.$onemrva-theme);
+  @include fab.theme(variables.$onemrva-theme);
+  @include snack-bar.theme(variables.$onemrva-theme);
+  @include table.theme(variables.$onemrva-theme);
+  // Spinner is replaced by onemrva design system
+  @include badge.theme(variables.$onemrva-theme);
+  @include bottom-sheet.theme(variables.$onemrva-theme);
+  @include button-toggle.theme(variables.$onemrva-theme);
   @include datepicker.theme(variables.$onemrva-theme);
 
-  @include dialogs.theme(variables.$onemrva-theme);
+  @include choiceChips.theme(variables.$onemrva-theme);
   @include dragAndDrop.theme(variables.$onemrva-theme);
   @include expansion.theme(variables.$onemrva-theme);
   @include icon.theme(variables.$onemrva-theme);
   @include links.theme(variables.$onemrva-theme);
-  @include lists.theme(variables.$onemrva-theme);
-  @include menu.theme(variables.$onemrva-theme);
-  @include progressBar.theme(variables.$onemrva-theme);
-  @include radio.theme(variables.$onemrva-theme);
-  @include slideToggle.theme(variables.$onemrva-theme);
-  @include snackbar.theme(variables.$onemrva-theme);
   @include stepper.theme(variables.$onemrva-theme);
-  @include tables.theme(variables.$onemrva-theme);
-  @include tabs.theme(variables.$onemrva-theme);
-  @include textInputs.theme(variables.$onemrva-theme);
   @include toolbar.theme(variables.$onemrva-theme);
-  @include tooltip.theme(variables.$onemrva-theme);
-  @include select.theme(variables.$onemrva-theme);
-
 
   @include container.theme(variables.$onemrva-theme, $b);
 

package/package.json

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