@yuuvis/material 2.1.19 → 2.1.21

package/scss/themes/yuuvis-standard/theme.scss

@@ -1,284 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-@use 'theme-color';
-@use '../../token/token';
-
-:root {
-  //todo: move to global styles
-  color-scheme: light dark;
-
-  /*
-    Material Theming & System Token Overrides
-    */
-
-  $theme: (
-    color: (
-      primary: theme-color.$primary-palette,
-      tertiary: theme-color.$tertiary-palette
-    ),
-    typography: (
-      plain-family: token.$ref-font-family,
-      brand-family: token.$ref-font-family,
-      bold-weight: token.$ref-font-weight-bold,
-      medium-weight: token.$ref-font-weight-medium,
-      regular-weight: token.$ref-font-weight-regular
-    ),
-    density: -1
-  );
-
-  $overrides: (
-    'outline-variant': light-dark(map.get(theme-color.$primary-palette, 'neutral-variant', 90), map.get(theme-color.$primary-palette, 'neutral', 20)),
-    'surface-variant': var(--mat-sys-surface),
-    'on-surface-variant': var(--mat-sys-on-surface),
-    //Headline
-    'headline-small': var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height)
-      var(--mat-sys-headline-small-font),
-    'headline-small-size': token.$ref-font-headline-small-size,
-    'headline-small-line-height': token.$ref-font-headline-line-height,
-    'headline-small-weight': token.$ref-font-weight-bold,
-    'headline-small-tracking': token.$ref-font-headline-small-tracking,
-
-    'headline-medium': var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height)
-      var(--mat-sys-headline-medium-font),
-    'headline-medium-size': token.$ref-font-headline-medium-size,
-    'headline-medium-line-height': token.$ref-font-headline-line-height,
-    'headline-medium-weight': token.$ref-font-weight-bold,
-    'headline-medium-tracking': token.$ref-font-headline-medium-tracking,
-
-    'headline-large': var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height)
-      var(--mat-sys-headline-large-font),
-    'headline-large-size': token.$ref-font-headline-large-size,
-    'headline-large-line-height': token.$ref-font-headline-line-height,
-    'headline-large-weight': token.$ref-font-weight-bold,
-    'headline-large-tracking': token.$ref-font-headline-large-tracking,
-
-    //Title
-    'title-small': var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
-    'title-small-size': token.$ref-font-title-small-size,
-    'title-small-weight': token.$ref-font-weight-bold,
-    'title-small-line-height': token.$ref-font-title-line-height,
-    'title-small-tracking': token.$ref-font-title-small-tracking,
-
-    'title-medium': var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
-      var(--mat-sys-title-medium-font),
-    'title-medium-size': token.$ref-font-title-medium-size,
-    'title-medium-weight': token.$ref-font-weight-bold,
-    'title-medium-line-height': token.$ref-font-title-line-height,
-    'title-medium-tracking': token.$ref-font-title-medium-tracking,
-
-    'title-large': var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
-    'title-large-size': token.$ref-font-title-large-size,
-    'title-large-weight': token.$ref-font-weight-bold,
-    'title-large-line-height': token.$ref-font-title-line-height,
-    'title-large-tracking': token.$ref-font-title-large-tracking,
-
-    //Body
-    'body-small': var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
-    'body-small-line-height': token.$ref-font-body-line-height,
-    'body-small-tracking': token.$ref-font-body-small-tracking,
-
-    'body-medium': var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
-    'body-medium-line-height': token.$ref-font-body-line-height,
-    'body-medium-tracking': token.$ref-font-body-medium-tracking,
-
-    'body-large': unset,
-    'body-large-font': unset,
-    'body-large-size': unset,
-    'body-large-weight': unset,
-    'body-large-line-height': unset,
-    'body-large-tracking': unset,
-
-    //Label
-    'label-small': var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
-    'label-medium': var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
-      var(--mat-sys-label-medium-font),
-    'label-large': var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
-    //Display
-    'display-small': unset,
-    'display-small-font': unset,
-    'display-small-size': unset,
-    'display-small-weight': unset,
-    'display-small-line-height': unset,
-    'display-small-tracking': unset,
-    'display-medium': unset,
-    'display-medium-font': unset,
-    'display-medium-size': unset,
-    'display-medium-weight': unset,
-    'display-medium-line-height': unset,
-    'display-medium-tracking': unset,
-    'display-large': unset,
-    'display-large-font': unset,
-    'display-large-size': unset,
-    'display-large-weight': unset,
-    'display-largeline-height': unset,
-    'display-large-tracking': unset
-  );
-
-  @include mat.theme($theme, $overrides);
-
-  /*
-      Material Component Token Overrides
-    */
-
-  /* Core */
-  @include mat.core-overrides(
-    (
-      option-label-text-font: token.$font-body-font,
-      option-label-text-line-height: token.$font-body-line-height,
-      option-label-text-size: token.$font-body-size,
-      option-label-text-tracking: token.$font-body-tracking,
-      option-label-text-weight: token.$font-body-weight,
-      optgroup-label-text-font: token.$font-body-font,
-      optgroup-label-text-line-height: token.$font-body-line-height,
-      optgroup-label-text-size: token.$font-body-size,
-      optgroup-label-text-tracking: token.$font-body-tracking,
-      optgroup-label-text-weight: token.$font-body-weight
-    )
-  );
-
-  /* Loading Indicator/Progress-Bar/-Spinner */
-  @include mat.progress-bar-overrides(
-    (
-      active-indicator-height: token.$progress-bar-height,
-      track-height: token.$progress-bar-height,
-      //track-shape: none,
-      active-indicator-color: var(--mat-sys-primary),
-      track-color: rgb(from var(--mat-sys-primary) r g b / 0.2)
-    )
-  );
-  @include mat.progress-spinner-overrides(
-    (
-      active-indicator-color: var(--mat-sys-primary),
-      // "active-indicator-width" does not work!
-       // "size" does not work!
-    )
-  );
-  /* Buttons */
-  @include mat.button-overrides(());
-  /*Icon Button*/
-  /* This is a quick and dirty workaround.
-   Material Icon Button with larger absolute positioned touch
-   targets cause horizontal scrollbar to appear.*/
-  @include mat.icon-button-overrides(
-    (
-      touch-target-display: none,
-      state-layer-color: var(--mat-sys-on-surface),
-      state-layer-size: token.$sizing-2xl,
-      icon-size: token.$sizing-m
-    )
-  );
-
-  /*Fab*/
-  @include mat.fab-overrides(
-    (
-      container-elevation-shadow: none,
-      focus-container-elevation-shadow: none,
-      hover-container-elevation-shadow: none,
-      pressed-container-elevation-shadow: none,
-      touch-target-display: none,
-      extended-container-elevation-shadow: none,
-      extended-focus-container-elevation-shadow: none,
-      extended-hover-container-elevation-shadow: none,
-      extended-pressed-container-elevation-shadow: none,
-      extended-container-height: 36px,
-      small-container-elevation-shadow: none,
-      small-focus-container-elevation-shadow: none,
-      small-hover-container-elevation-shadow: none,
-      small-pressed-container-elevation-shadow: none,
-      small-touch-target-display: none
-    )
-  );
-
-  /*Form Field*/
-  @include mat.form-field-density(-4);
-  @include mat.form-field-overrides(
-    (
-      container-text-font: var(--mat-sys-body-medium-font),
-      container-text-size: var(--mat-sys-body-medium-size),
-      container-text-line-height: var(--mat-sys-body-medium-line-height),
-      container-text-tracking: var(--mat-sys-body-medium-tracking),
-      container-text-weight: var(--mat-sys-body-medium-weight),
-      container-vertical-padding: 10px,
-      outlined-focus-outline-color: token.$focus-indicator-outer,
-      outlined-focus-outline-width: token.$focus-indicator-size,
-      outlined-label-text-font: var(--mat-sys-body-medium-font),
-      outlined-label-text-size: var(--mat-sys-body-medium-size),
-      outlined-label-text-tracking: var(--mat-sys-body-medium-tracking),
-      outlined-label-text-weight: var(--mat-sys-body-medium-weight)
-    )
-  );
-
-  /* Datepicker */
-  @include mat.datepicker-overrides (
-    (
-      calendar-container-background-color: token.$surface,
-    )
-  );
-
-
-  /*Select*/
-  @include mat.select-overrides(
-    (
-      trigger-text-font: var(--mat-sys-body-medium-font),
-      trigger-text-line-height: var(--mat-sys-body-medium-line-height),
-      trigger-text-size: var(--mat-sys-body-medium-size),
-      trigger-text-tracking: var(--mat-sys-body-medium-tracking),
-      trigger-text-weight: var(--mat-sys-body-medium-weight),
-      container-elevation-shadow: none,
-      panel-background-color: var(--mat-sys-surface-container-low)
-    )
-  );
-
-  /*Menu*/
-  @include mat.menu-overrides(
-    (
-      container-elevation-shadow: none,
-      container-shape: var(--mat-sys-corner-medium),
-      container-color: var(--mat-sys-surface-container-low),
-      item-label-text-font: token.$font-body-font,
-      item-label-text-line-height: token.$font-body-line-height,
-      item-label-text-size: token.$font-body-size,
-      item-label-text-tracking: token.$font-body-tracking,
-      item-label-text-weight: token.$font-body-weight
-    )
-  );
-
-  /*Dialog*/
-  @include mat.dialog-overrides(
-    (
-      container-shape: var(--mat-sys-corner-medium),
-      container-color: var(--mat-sys-surface),
-      subhead-color: var(--mat-sys-on-surface),
-      subhead-font: var(--mat-sys-title-large-font),
-      subhead-line-height: var(--mat-sys-title-large-line-height),
-      subhead-size: var(--mat-sys-title-large-size),
-      subhead-weight: var(--mat-sys-title-large-weight),
-      subhead-tracking: var(--mat-sys-title-large-tracking),
-      with-actions-content-padding: none
-    )
-  );
-
-  /*Tree*/
-  @include mat.tree-overrides(
-    (
-      node-text-font: var(--mat-sys-body-medium-font),
-      node-text-size: var(--mat-sys-body-medium-size),
-      node-text-weight: var(--mat-sys-body-medium-weight),
-      node-min-height: token.$sizing-l
-    )
-  );
-
-  /*Tabs*/
-  @include mat.tabs-overrides(
-    (
-      divider-color: var(--mat-sys-outline-variant)
-    )
-  );
-
-  /*Tooltip*/
-  @include mat.tooltip-overrides(
-    (
-      container-color: light-dark(rgb(from var(--mat-sys-inverse-surface) r g b / 0.9), rgb(from var(--mat-sys-inverse-surface) r g b / 0.95))
-    )
-  );
-}