@onemrvapublic/design-system-theme 19.3.2 → 19.4.0-alpha.10

package/index.scss

@@ -1,41 +1,28 @@
-@forward './components/autocomplete' as autocomplete-*;
-@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/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-*;
-@forward './components/progress-bar' as progress-bar-*;
-@forward './components/radio' as radio-*;
-@forward './components/snack-bar' as snack-bar-*;
-@forward './components/sidenav' as sidenav-*;
-@forward './components/slide-toggle' as slide-toggle-*;
-@forward './components/table' as tables-*;
-@forward './components/toolbar' as toolbar-*;
-@forward './components/tabs' as tabs-*;
-@forward './components/input' as input-*;
-@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/tree' as tree-*;
-@forward './components/sort' as sort-*;
-@forward './components/grid-list' as grid-list-*;
-@forward './components/divider' as divider-*;
-@forward './components/badge' as badge-*;
-@forward './components/bottom-sheet' as bottom-sheet-*;
-@forward './components/icon-button' as icon-button-*;
+@forward './overrides/button' as button-*;
+@forward './overrides/button-toggle' as button-toggle-*;
+@forward './overrides/cards' as cards-*;
+@forward './overrides/checkbox' as checkbox-*;
+@forward './overrides/chips' as chips-*;
+@forward './overrides/drag-and-drop' as drag-and-drop-*;
+@forward './overrides/dialogs' as dialogs-*;
+@forward './overrides/divider' as divider-*;
+@forward './overrides/expansion' as expansion-*;
+@forward './overrides/form-field' as form-field-*;
+@forward './overrides/icon' as icon-*;
+@forward './overrides/icon-button' as icon-button-*;
+@forward './overrides/menu' as menu-*;
+@forward './overrides/progress-bar' as progress-bar-*;
+@forward './overrides/radio' as radio-*;
+@forward './overrides/slide-toggle' as slide-toggle-*;
+@forward './overrides/table' as tables-*;
+@forward './overrides/tabs' as tabs-*;
+@forward './overrides/input' as input-*;
+@forward './overrides/stepper' as stepper-*;
+@forward './overrides/icon' as icon-*;
+@forward './overrides/tooltip' as tooltip-*;
+@forward './overrides/toolbar' as toolbar-*;
+@forward './overrides/select' as select-*;
+@forward './overrides/fab' as fab-*;
 
 @forward './utilities/variables' show $onemrva-theme;
 @forward './utilities/variables' show $breakpoints;
@@ -45,169 +32,170 @@
 @forward './utilities/grid' show grid;
 @forward './utilities/utilities' show utilities;
 
-@use 'sass:map';
+// ------------------------------------------------------------
 @use '@angular/material' as mat;
 
-@use './components/autocomplete';
-@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 choice-chips;
-@use './components/container';
-@use './components/datepicker';
-@use './components/dialogs';
-@use './components/drag-and-drop' as drag-and-drop;
-@use './components/expansion' as expansion;
-@use './components/form-field' as form-field;
-@use './components/links';
-@use './components/hacks';
-@use './components/lists';
-@use './components/menu';
-@use './components/progress-bar' as progress-bar;
-@use './components/radio';
-@use './components/snack-bar';
-@use './components/sidenav';
-@use './components/slider';
-@use './components/slide-toggle' as slide-toggle;
-@use './components/table';
-@use './components/tabs';
-@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/tree';
-@use './components/sort';
-@use './components/grid-list';
-@use './components/divider';
-@use './components/badge';
-@use './components/bottom-sheet';
-
+@use './utilities/palettes' as palettes;
+@use './utilities/tokens' as tokens;
+@use './utilities/variables' as variables;
 @use './utilities/utilities';
+@use './utilities/animations';
 @use './utilities/fonts';
 @use './utilities/spacing';
 @use './utilities/grid';
-@use './utilities/variables' as variables;
-
-@mixin font-theme($production: true) {
-  @include fonts.theme(variables.$onemrva-theme, $production);
-}
+@use './utilities/container' as container;
+
+@use 'overrides/button-toggle';
+@use 'overrides/button';
+@use 'overrides/checkbox';
+@use 'overrides/cards';
+@use 'overrides/carousel';
+@use 'overrides/chips';
+@use 'overrides/dialogs';
+@use 'overrides/divider';
+@use 'overrides/drag-and-drop';
+@use 'overrides/expansion';
+@use 'overrides/fab';
+@use 'overrides/icon';
+@use 'overrides/icon-button';
+@use 'overrides/form-field';
+@use 'overrides/menu';
+@use 'overrides/progress-bar';
+@use 'overrides/tabs';
+@use 'overrides/radio';
+@use 'overrides/select';
+@use 'overrides/slide-toggle';
+@use 'overrides/table';
+@use 'overrides/layout';
+@use 'overrides/tooltip';
+@use 'overrides/toast';
+@use 'overrides/toolbar';
+@use 'overrides/toc';
+@use 'overrides/stepper';
+@use 'overrides/stickers';
+
+@mixin onemrva() {
+  color-scheme: light dark;
+  margin: 0;
+  padding: 0;
+
+  &.dark-theme {
+    color-scheme: dark;
+  }
+  &.light-theme {
+    color-scheme: light;
+  }
 
-@mixin spacing-theme() {
+  @include fonts.theme();
+  @include layout.override();
+  @include utilities.utilities();
+  @include animations.animations();
   @include spacing.spacing();
-}
-
-@mixin grid-theme() {
   @include grid.grid();
-}
-
-@mixin utilities-theme() {
-  @include utilities.utilities();
-}
-
-/// Shortcut to load material core
-@mixin core() {
-  @include mat.core();
-  @include mat.core-theme(variables.$onemrva-theme);
-  @include mat.core-base(variables.$onemrva-theme);
-  @include mat.typography-hierarchy(variables.$onemrva-theme);
-}
 
-@mixin fixes($theme) {
-  onemrva-layout {
-    --layout-header-height: 92px;
+  @include mat.theme(
+    (
+      color: (
+        primary: palettes.$primary-palette,
+        tertiary: palettes.$tertiary-palette,
+      ),
+      //typography: (
+      //  use-system-variables: false,
+      //  plain-family: Source Sans Pro,
+      //  brand-family: Poppins,
+      //  bold-weight: 900,
+      //  medium-weight: 600,
+      //  regular-weight: 400,
+      //),
+       //density: 0,
+    )
+  );
+  .mat-accent {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$secondary-palette,
+        ),
+      )
+    );
   }
-  // Material design doesn't support h5 and h6 natively
-  .mat-typography {
-    h4 {
-      font: 700 20px / 35px
-        #{mat.get-theme-typography($theme, 'button', font-family)};
-      letter-spacing: normal;
-      margin: 0 0 16px;
-    }
-
-    h5,
-    h6 {
-      font-family: Poppins, sans-serif;
-      font-weight: 600;
-    }
-
-    h5 {
-      font-size: 18px;
-      line-height: 32px;
-    }
-
-    h6 {
-      font-size: 16px;
-      line-height: 28px;
-    }
+  .mat-success {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$success-palette,
+        ),
+      )
+    );
   }
-}
-
-// Base for Web components
-@mixin base($production: true) {
-  @include fonts.theme(variables.$onemrva-theme, $production);
-  @include links.theme(variables.$onemrva-theme);
-  @include hacks.theme(variables.$onemrva-theme);
-  @include core();
-  @include fixes(variables.$onemrva-theme);
-}
-
-// Load everything (size does not matter)
-@mixin onemrva($production: true) {
-  @include fonts.theme(variables.$onemrva-theme, $production);
-  @include links.theme(variables.$onemrva-theme);
-  @include hacks.theme(variables.$onemrva-theme);
-  @include core();
-
-  @include cards.theme(variables.$onemrva-theme);
-  @include progress-bar.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 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 divider.theme(variables.$onemrva-theme);
-  @include expansion.theme(variables.$onemrva-theme);
-  @include grid-list.theme(variables.$onemrva-theme);
-  @include icon.theme(variables.$onemrva-theme);
-  @include sidenav.theme(variables.$onemrva-theme);
-  @include stepper.theme(variables.$onemrva-theme);
-  @include sort.theme(variables.$onemrva-theme);
-  @include toolbar.theme(variables.$onemrva-theme);
-  @include tree.theme(variables.$onemrva-theme);
-
-  @include choice-chips.theme(variables.$onemrva-theme);
-  @include drag-and-drop.theme(variables.$onemrva-theme);
-  @include container.theme(variables.$onemrva-theme, variables.$breakpoints);
-
-  @include spacing.spacing();
-  @include grid.grid();
-  @include utilities.utilities();
-  @include fixes(variables.$onemrva-theme);
+  .mat-error {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$error-palette,
+        ),
+      )
+    );
+  }
+  .mat-warn {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$warn-palette,
+        ),
+      )
+    );
+  }
+  .mat-info {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$info-palette,
+        ),
+      )
+    );
+  }
+  .mat-grayscale,
+  .mdc-checkbox--disabled,
+  .mat-neutral {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$neutral-palette,
+        ),
+      )
+    );
+  }
+  @include container.theme(variables.$breakpoints);
+
+  @include button.override();
+  @include button-toggle.override();
+  @include checkbox.override();
+  @include cards.override();
+  @include chips.override();
+  @include carousel.override();
+  @include dialogs.override();
+  @include divider.override();
+  @include drag-and-drop.override();
+  @include expansion.override();
+  @include form-field.override();
+  @include fab.override();
+  @include icon.override();
+  @include icon-button.override();
+  @include menu.override();
+  @include progress-bar.override();
+  @include radio.override();
+  @include select.override();
+  @include slide-toggle.override();
+  @include table.override();
+  @include tabs.override();
+  @include toast.override();
+  @include toolbar.override();
+  @include tooltip.override();
+  @include toc.override();
+  @include toolbar.override();
+  @include stepper.override();
+  @include stickers.override();
+
+  @include tokens.theme();
 }

package/overrides/_button-toggle.scss

@@ -0,0 +1,14 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.button-toggle-overrides(
+    (
+      selected-state-background-color: var(--mat-sys-primary),
+      selected-state-text-color: var(--mat-sys-on-primary),
+      height: 36px,
+      label-text-font: var(--brand-font),
+      label-text-size: 1rem,
+      label-text-weight: 600,
+    )
+  );
+}

package/overrides/_button.scss

@@ -0,0 +1,120 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.button-overrides(
+    (
+      outlined-outline-color: var(--mat-sys-primary),
+      outlined-label-text-color: var(--mat-sys-primary),
+      outlined-outline-width: 2px,
+      outlined-container-height: 2.25rem,
+      outlined-label-text-font: Poppins,
+      outlined-label-text-size: 1rem,
+      outlined-label-text-weight: 500,
+      outlined-hover-state-layer-opacity: 0,
+      outlined-focus-state-layer-opacity: 0,
+      outlined-pressed-state-layer-opacity: 0,
+      filled-horizontal-padding: var(--double-spacer),
+      filled-container-height: 2.25rem,
+      filled-label-text-color: var(--on-background-gradient),
+    )
+  );
+  button.mdc-button {
+    transition: all 1s ease;
+
+    &:focus-visible:not(:active) {
+      &:not(.mat-mdc-outlined-button) {
+        @include nsOutline(-1px);
+      }
+
+      &.mat-mdc-outlined-button {
+        @include nsOutline(-3px);
+
+        &.small {
+          @include nsOutline(-2px);
+        }
+      }
+      &:after {
+        outline: 5px solid var(--mat-sys-primary-fixed-dim);
+      }
+    }
+    &.mat-mdc-unelevated-button:not(:disabled) {
+      background: var(--background-gradient);
+      .onemrva-spinner {
+        svg {
+          fill: white;
+        }
+      }
+      &:hover,
+      &:active {
+        box-shadow: var(--mat-sys-level2);
+      }
+    }
+    &.mdc-button--outlined {
+      background: var(--mat-sys-surface);
+    }
+    &.mat-mdc-button-disabled {
+      .onemrva-spinner {
+        svg {
+          fill: white;
+        }
+      }
+    }
+    onemrva-mat-spinner {
+      display: none;
+    }
+
+    &.has-spinner {
+      .mdc-button__label {
+        margin-left: 20px;
+      }
+      onemrva-mat-spinner {
+        display: inline-block;
+      }
+    }
+    onemrva-mat-spinner {
+      .onemrva-spinner {
+        svg {
+          height: 18px !important;
+          width: 18px !important;
+          margin-left: 8px;
+
+          top: 17px !important;
+          left: 37px !important;
+          transform: none;
+        }
+      }
+    }
+    &.small {
+      @include mat.button-overrides(
+        (
+          outlined-outline-width: 1px,
+          outlined-container-height: 24px,
+          outlined-label-text-size: 0.8rem,
+          outlined-horizontal-padding: 12px,
+          filled-container-height: 24px,
+          filled-label-text-size: 0.8rem,
+          text-horizontal-padding: 12px,
+          text-container-height: 24px,
+          text-label-text-size: 0.8rem,
+        )
+      );
+      mat-icon {
+        height: auto;
+      }
+    }
+  }
+}
+
+@mixin nsOutline($shift) {
+  &:after {
+    position: absolute;
+    content: '';
+    top: $shift;
+    left: $shift;
+    right: $shift;
+    bottom: $shift;
+    border: 1px solid transparent;
+    border-radius: 500px;
+  }
+}

package/overrides/_cards.scss

@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.card-overrides(
+    (
+      elevated-container-shape: 20px,
+      outlined-container-shape: 20px,
+    )
+  );
+}

package/overrides/_carousel.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  onemrva-mat-carousel {
+    onemrva-mat-carousel-item {
+      onemrva-mat-panel {
+        height: calc(100% - 48px);
+      }
+    }
+  }
+}

package/overrides/_checkbox.scss

@@ -0,0 +1,41 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.checkbox-overrides(
+    (
+      selected-icon-color: var(--mat-sys-primary),
+      selected-pressed-icon-color: var(--mat-sys-primary),
+      selected-focus-icon-color: var(--mat-sys-primary),
+      selected-focus-state-layer-color: var(--mat-sys-primary),
+      selected-hover-state-layer-color: var(--mat-sys-primary),
+      selected-pressed-state-layer-color: var(--mat-sys-primary),
+      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),
+      label-text-line-height: var(--mat-sys-label-large-height),
+    )
+  );
+
+  .mat-mdc-checkbox {
+    .mdc-checkbox__native-control:enabled:checked,
+    .mdc-checkbox__native-control:enabled:indeterminate {
+      ~ .mdc-checkbox__background {
+        background: var(--background-gradient);
+        border: 2px solid var(--mat-sys-secondary);
+      }
+    }
+
+    // strangely, the overrides don't work when it's pre-checked
+    &.mat-success {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: var(--mat-sys-primary);
+          border: 2px solid var(--mat-sys-primary);
+        }
+      }
+    }
+  }
+}

package/overrides/_chips.scss

@@ -0,0 +1,42 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.chips-overrides(
+    (
+      container-shape-radius: var(--button-border-radius),
+      outline-color: var(--mat-sys-primary),
+      elevated-container-color: var(--mat-sys-primary-container),
+      container-height: 38px,
+      label-text-color: var(--mat-sys-primary),
+      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),
+    )
+  );
+  mat-chip-option,
+  mat-chip {
+    &.mat-accent {
+      background: var(--background-gradient);
+      @include mat.chips-overrides(
+        (
+          outline-color: var(--mat-sys-secondary),
+        )
+      );
+      .mat-mdc-chip-action-label {
+        color: var(--on-background-gradient);
+      }
+    }
+    &.mat-error {
+      background: var(--mat-sys-primary-container);
+      @include mat.chips-overrides(
+        (
+          outline-color: var(--mat-sys-primary),
+        )
+      );
+      .mat-mdc-chip-action-label {
+        color: var(--mat-sys-primary);
+      }
+    }
+  }
+}