@yuuvis/material 0.1.0

package/scss/index.scss

@@ -0,0 +1,45 @@
+@use 'sass:meta';
+@forward 'material-components/tools';
+
+@mixin global-styles($generics: true, $vendors: true, $elements: true, $components: true, $utils: true, $material-components: true) {
+  @layer token, generics, vendors, elements, ng-components, components,  utils;
+
+  @layer token {
+    @include meta.load-css('./themes/yuuvis-standard/theme');
+    @include meta.load-css('./token');
+  }
+
+  @if ($generics) {
+    @layer generics {
+      @include meta.load-css('./generics');
+    }
+  }
+
+  @if ($vendors) {
+    @layer vendors {
+      @include meta.load-css('./vendors');
+    }
+  }
+
+  @if ($elements) {
+    @layer elements {
+      @include meta.load-css('./elements');
+    }
+  }
+
+  @if ($components) {
+    @layer components {
+      @include meta.load-css('./components');
+    }
+  }
+
+  @if ($utils or $components) {
+    @layer utils {
+      @include meta.load-css('./utils');
+    }
+  }
+
+  @if($material-components){
+    @include meta.load-css('./material-components');
+  }
+}

package/scss/material-components/_button.scss

@@ -0,0 +1,5 @@
+
+.mdc-button .mdc-button__label{
+  line-height: 1;
+  text-box: trim-both cap alphabetic
+}

package/scss/material-components/_cdk-overlay.scss

@@ -0,0 +1,6 @@
+@use './../token/token.tools' as t;
+
+
+.cdk-overlay-backdrop.cdk-overlay-dark-backdrop{
+  background-color: t.use-token(overlay-backdrop-color);
+}

package/scss/material-components/_dialog.scss

@@ -0,0 +1,6 @@
+@use './../token/token.tools' as t;
+
+.mdc-dialog--open .mat-mdc-dialog-surface{
+  border: 1px solid t.use-token(outline-variant);
+}
+

package/scss/material-components/_icon-button.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+@use './../token/token.tools' as t;
+
+.ymt-icon-button--size-s.mat-mdc-icon-button {
+  @include mat.icon-button-overrides(
+    (
+      state-layer-size: t.use-token(sizing-l),
+      icon-size: t.use-token(sizing-s)
+    )
+  );
+
+  .mat-icon {
+    height: t.use-token(sizing-s);
+    width: t.use-token(sizing-s);
+    font-size: t.use-token(sizing-s);
+    line-height: 1;
+  }
+}
+
+.ymt-icon-button--size-m.mat-mdc-icon-button {
+  @include mat.icon-button-overrides(
+    (
+      state-layer-size: t.use-token(sizing-2xl),
+      icon-size: t.use-token(sizing-m)
+    )
+  );
+
+  .mat-icon {
+    height: t.use-token(sizing-m);
+    width: t.use-token(sizing-m);
+    font-size: t.use-token(sizing-m);
+    line-height: 1;
+  }
+}

package/scss/material-components/_icon.scss

@@ -0,0 +1,15 @@
+@use './../token/token.tools' as t;
+
+.ymt-icon--size-s.mat-icon {
+  height: t.use-token(sizing-s);
+  width: t.use-token(sizing-s);
+  font-size: t.use-token(sizing-s);
+  line-height: 1;
+}
+
+.ymt-icon--size-m.mat-icon {
+  height: t.use-token(sizing-m);
+  width: t.use-token(sizing-m);
+  font-size: t.use-token(sizing-m);
+  line-height: 1;
+}

package/scss/material-components/_menu.scss

@@ -0,0 +1,10 @@
+@use './../token/token.tools' as t;
+
+.mat-mdc-menu-panel{
+  margin-block-start: t.use-token(spacing-xs);
+  border: 1px solid t.use-token(outline-variant);
+}
+
+[mat-menu-item].mat-mdc-menu-item{
+  min-height: t.use-token(sizing-3xl)
+}

package/scss/material-components/_select.scss

@@ -0,0 +1,19 @@
+@use './../token/token.tools' as t;
+
+.mat-mdc-select-trigger{
+  gap: t.use-token(spacing-xs);
+}
+
+div.mat-mdc-select-panel{
+  border: 1px solid t.use-token(outline-variant);
+}
+
+.cdk-overlay-container .cdk-overlay-connected-position-bounding-box .cdk-overlay-pane div.mat-mdc-select-panel {
+  border-radius: t.use-token(corner-xs);
+  margin-block-start: t.use-token(spacing-xs);
+}
+
+
+.mat-mdc-select-panel .mat-mdc-option{
+  min-height: t.use-token(sizing-3xl)
+}

package/scss/material-components/_tools.scss

@@ -0,0 +1 @@
+@forward 'progress/progress.tools';

package/scss/material-components/index.scss

@@ -0,0 +1,8 @@
+@forward 'icon';
+@forward 'icon-button';
+@forward 'button';
+@forward 'select';
+@forward 'progress';
+@forward 'menu';
+@forward 'dialog';
+@forward 'cdk-overlay';

package/scss/material-components/progress/_index.scss

@@ -0,0 +1 @@
+@forward 'progress';

package/scss/material-components/progress/_progress.scss

@@ -0,0 +1,32 @@
+@use '../../token/token.tools' as t;
+
+.ymt-progress-bar {
+  &--position-absolute {
+    &.mat-mdc-progress-bar.mdc-linear-progress {
+      position: absolute;
+    }
+  }
+}
+
+.ymt-progress-spinner {
+  &--tiny {
+    width: t.use-token(sizing-xs) !important;
+    height: t.use-token(sizing-xs) !important;
+  }
+  &--small {
+    width: t.use-token(sizing-s) !important;
+    height: t.use-token(sizing-s) !important;
+  }
+  &--medium {
+    width: t.use-token(sizing-m) !important;
+    height: t.use-token(sizing-m)  !important;
+  }
+  &--large {
+    width: t.use-token(sizing-xl)  !important;
+    height: t.use-token(sizing-xl)  !important;
+  }
+  &--giant {
+    width: t.use-token(sizing-4xl)  !important;
+    height: t.use-token(sizing-4xl)  !important;
+  }
+}

package/scss/material-components/progress/_progress.tools.scss

@@ -0,0 +1,8 @@
+@use '@angular/material' as mat;
+
+@mixin progress-bar-height($height: 4px) {
+  @include mat.progress-bar-overrides((
+          active-indicator-height: $height,
+          track-height: $height,
+  ));
+}

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

@@ -0,0 +1,136 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+
+// Note: Color palettes are generated from primary: #2A70AC, secondary: #8E9198, tertiary: #8E9198, neutral: #8E9198, neutral variant: #8E9198, error: #BF3352
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001d35,
+    20: #003256,
+    25: #003e68,
+    30: #00497a,
+    35: #00558d,
+    40: #13629d,
+    50: #387bb8,
+    60: #5595d3,
+    70: #72b0f0,
+    80: #9ccaff,
+    90: #d0e4ff,
+    95: #e9f1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3136,
+    25: #383c42,
+    30: #43474d,
+    35: #4f5359,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a8abb2,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eef0f8,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3136,
+    25: #383c42,
+    30: #43474d,
+    35: #4f5359,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a8abb2,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eef0f8,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3136,
+    25: #383c42,
+    30: #43474d,
+    35: #4f5359,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a8abb2,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eef0f8,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+    4: #0b0e14,
+    6: #101419,
+    12: #1c2025,
+    17: #272a30,
+    22: #31353b,
+    24: #36393f,
+    87: #d7dae1,
+    92: #e6e8f0,
+    94: #ebeef5,
+    96: #f1f3fb,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3136,
+    25: #383c42,
+    30: #43474d,
+    35: #4f5359,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a8abb2,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eef0f8,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #400011,
+    20: #670021,
+    25: #7c0029,
+    30: #8f0732,
+    35: #a0193d,
+    40: #b12848,
+    50: #d2425f,
+    60: #f45b78,
+    70: #ff8798,
+    80: #ffb2ba,
+    90: #ffd9dc,
+    95: #ffeced,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

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

@@ -0,0 +1,230 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use 'theme-color';
+@use '../../token/token';
+@use '../../token/token.tools' as t;
+
+: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-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-medium,
+
+    '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-medium,
+
+    '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-medium,
+
+    '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': 0.875rem,
+    'title-small-weight': token.$ref-font-weight-medium,
+    'title-small-line-height': token.$ref-font-headline-line-height,
+
+    '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': 1rem,
+    'title-medium-weight': token.$ref-font-weight-medium,
+    'title-medium-line-height': token.$ref-font-headline-line-height,
+
+    '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': 1.125rem,
+    'title-large-weight': token.$ref-font-weight-medium,
+    'title-large-line-height': token.$ref-font-headline-line-height,
+
+    '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-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-large': var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
+
+    '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-small': var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
+      var(--mat-sys-display-small-font),
+    'display-medium': var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height)
+      var(--mat-sys-display-medium-font),
+    'display-large': var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
+      var(--mat-sys-display-large-font)
+  );
+
+  @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: 40px, // does not work!
+    //size: var(--ymt-sizing-small), // 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: var(--yuv-focus-indicator-outer),
+      outlined-focus-outline-width: var(--yuv-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)
+    )
+  );
+
+  /*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-container-low),
+      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),
+      //supporting-text-color: var(--mat-sys-on-surface-variant),
+      //supporting-text-font: var(--mat-sys-body-medium-font),
+      //supporting-text-line-height: var(--mat-sys-body-medium-line-height),
+      //supporting-text-size: var(--mat-sys-body-medium-size),
+      //supporting-text-weight: var(--mat-sys-body-medium-weight),
+      //supporting-text-tracking: var(--mat-sys-body-medium-tracking),
+      //container-elevation-shadow: none,
+      //container-max-width: none,
+      //container-small-max-width: none,
+      //container-min-width: none,
+      //actions-alignment: none,
+      //actions-padding: none,
+      //content-padding: none,
+      with-actions-content-padding: none,
+      //headline-padding: none,
+    )
+  );
+}

package/scss/token/_css-token.scss

@@ -0,0 +1,11 @@
+@use 'sass:meta';
+@use './token';
+@use './token.tools' as t;
+
+:root{
+  @each $key, $value in meta.module-variables('token') {
+    @if(str-index($key, "ref-") != 1){
+      #{t.token($key)}:#{$value};
+    }
+  }
+}

package/scss/token/_index.scss

@@ -0,0 +1 @@
+@forward "css-token";

package/scss/token/_token.config.scss

@@ -0,0 +1 @@
+$prefix: 'ymt';