@yuuvis/material 0.1.0

package/scss/token/_token.scss

@@ -0,0 +1,249 @@
+@use 'sass:map';
+@use '../themes/yuuvis-standard/theme-color';
+
+/*
+
+  Font
+
+*/
+
+//Base
+$ref-font-family: 'Mulish', sans-serif;
+$ref-font-weight-bold: 900;
+$ref-font-weight-medium: 700;
+$ref-font-weight-regular: 500;
+
+//Body
+$font-body: var(--mat-sys-body-medium);
+$font-body-font: var(--mat-sys-body-medium-font);
+$font-body-line-height: var(--mat-sys-body-medium-line-height);
+$font-body-size: var(--mat-sys-body-medium-size);
+$font-body-tracking: var(--mat-sys-body-medium-tracking);
+$font-body-weight: var(--mat-sys-body-medium-weight);
+
+$font-body-subtle: var(--mat-sys-body-small);
+$font-body-subtle-font: var(--mat-sys-body-small-font);
+$font-body-subtle-line-height: var(--mat-sys-body-small-line-height);
+$font-body-subtle-size: var(--mat-sys-body-small-size);
+$font-body-subtle-tracking: var(--mat-sys-body-small-tracking);
+$font-body-subtle-weight: var(--mat-sys-body-small-weight);
+
+//Headlines
+$ref-font-headline-line-height: 1.4;
+
+$ref-font-headline-small-size: 1rem; //16px
+$font-headline-small: var(--mat-sys-headline-small);
+$font-headline-small-font: var(--mat-sys-headline-small-font);
+$font-headline-small-line-height: var(--mat-sys-headline-small-line-height);
+$font-headline-small-size: var(--mat-sys-headline-small-size);
+$font-headline-small-tracking: var(--mat-sys-headline-small-tracking);
+$font-headline-small-weight: var(--mat-sys-headline-small-weight);
+
+$ref-font-headline-medium-size: 1.125rem; //18px
+$font-headline-medium: var(--mat-sys-headline-medium);
+$font-headline-medium-font: var(--mat-sys-headline-medium-font);
+$font-headline-medium-line-height: var(--mat-sys-headline-medium-line-height);
+$font-headline-medium-size: var(--mat-sys-headline-medium-size);
+$font-headline-medium-tracking: var(--mat-sys-headline-medium-tracking);
+$font-headline-medium-weight: var(--mat-sys-headline-medium-weight);
+
+$ref-font-headline-large-size: 1.438rem; //23px
+$font-headline-large: var(--mat-sys-headline-large);
+$font-headline-large-font: var(--mat-sys-headline-large-font);
+$font-headline-large-line-height: var(--mat-sys-headline-large-line-height);
+$font-headline-large-size: var(--mat-sys-headline-large-size);
+$font-headline-large-tracking: var(--mat-sys-headline-large-tracking);
+$font-headline-large-weight: var(--mat-sys-headline-large-weight);
+
+//Title
+$ref-font-title-small-size:  0.875rem; //14px
+$font-title-small: var(--mat-sys-title-small);
+$font-title-small-font: var(--mat-sys-title-small-font);
+$font-title-small-line-height: var(--mat-sys-title-small-line-height);
+$font-title-small-size: var(--mat-sys-title-small-size);
+$font-title-small-tracking: var(--mat-sys-title-small-tracking);
+$font-title-small-weight: var(--mat-sys-title-small-weight);
+
+$ref-font-title-medium-size:  1rem; //16px
+$font-title-medium: var(--mat-sys-title-medium);
+$font-title-medium-font: var(--mat-sys-title-medium-font);
+$font-title-medium-line-height: var(--mat-sys-title-medium-line-height);
+$font-title-medium-size: var(--mat-sys-title-medium-size);
+$font-title-medium-tracking: var(--mat-sys-title-medium-tracking);
+$font-title-medium-weight: var(--mat-sys-title-medium-weight);
+
+$ref-font-title-large-size:  1.125rem; //18px
+$font-title-large: var(--mat-sys-title-large);
+$font-title-large-font: var(--mat-sys-title-large-font);
+$font-title-large-line-height: var(--mat-sys-title-large-line-height);
+$font-title-large-size: var(--mat-sys-title-large-size);
+$font-title-large-tracking: var(--mat-sys-title-large-tracking);
+$font-title-large-weight: var(--mat-sys-title-large-weight);
+
+//Other
+$font-subhead: var(--mat-sys-title-small);
+$font-subhead-font: var(--mat-sys-title-small-font);
+$font-subhead-line-height: var(--mat-sys-title-small-line-height);
+$font-subhead-size: var(--mat-sys-title-small-size);
+$font-subhead-tracking: var(--mat-sys-title-small-tracking);
+$font-subhead-weight: var(--mat-sys-title-small-weight);
+
+
+/*
+
+  Color
+
+*/
+//Outlines
+$outline: var(--mat-sys-outline);
+$outline-variant: var(--mat-sys-outline-variant);
+
+//Level (Could be used for text-color, surfaces, outlines)
+$primary: var(--mat-sys-primary);
+$on-primary: var(--mat-sys-on-primary);
+$primary-container: var(--mat-sys-primary-container);
+$on-primary-container: var(--mat-sys-on-primary-container);
+
+//Brand (Could be used for text-color, surfaces, outlines)
+$brand: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 10)}, #{map.get(theme-color.$primary-palette, 'neutral', 6)});
+$on-brand: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 90)}, #{map.get(theme-color.$primary-palette, 'neutral', 90)});
+
+//Status
+$success: light-dark(#006B54, #9EE3B5); //(Could be used for text-color, outlines)
+$success-container: #9EE3B5;
+$on-success-container: #295C4C;
+
+$danger: var(--mat-sys-error); //(Could be used for text-color, outlines)
+$danger-container: var(--mat-sys-error-container);
+$on-danger-container: var(--mat-sys-on-error-container);
+
+$warning: light-dark(#615106,#FDF2BA); //(Could be used for text-color, outlines)
+$warning-container: #FDF2BA;
+$on-warning-container:  #615106;
+
+//Surfaces
+$surface: var(--mat-sys-surface);
+$surface-container-low: var(--mat-sys-surface-container);
+$surface-container: var(--mat-sys-surface-container-high);
+$surface-container-high: var(--mat-sys-surface-container-highest);
+
+//Surfaces - Alias Token (More Semantic)
+//Custom Surface Alias Token should only reference one of Materials surface-* token
+//to ensure that the combination with $on-surface-* is accessible
+//If you are using a custom color instead of make sure that this color is accessible with all on-surface-* token
+$surface-panel: $surface-container-low;
+$surface-frame: $surface-container-low;
+
+//Surfaces - Foreground Color
+//All on-surface-* token are accessible in combination with all surface-* token
+$on-surface: var(--mat-sys-on-surface);
+//"-variant" refers to a variant of the foreground color. (not to a variant of the surface itself)
+$on-surface-subtle-variant: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 40)}, #{map.get(theme-color.$primary-palette, 'neutral', 70)});
+$on-surface-primary-variant: $primary;
+
+//Text (Alias for Surfaces - Foreground Color Token)
+$text-color: $on-surface;
+$text-color-subtle: $on-surface-subtle-variant;
+$text-color-primary: $on-surface-primary-variant;
+
+//Text Selection
+$text-selection-background: var(--mat-sys-primary-container);
+$text-selection-color: var(--mat-sys-on-primary-container);
+
+
+/*
+    Corner
+*/
+
+$corner-full: var(--mat-sys-corner-full);
+$corner-xl: var(--mat-sys-corner-extra-large);
+$corner-l: var(--mat-sys-corner-large);
+$corner: var(--mat-sys-corner-medium);
+$corner-s: var(--mat-sys-corner-small);
+$corner-xs: var(--mat-sys-corner-extra-small);
+
+
+/*
+  Sizing
+*/
+
+$_sizing-base: 1rem; // 16px
+
+$sizing-xs: $_sizing-base * 1; // 16px
+$sizing-s: $_sizing-base * 1.25; // 20px
+$sizing-m: $_sizing-base * 1.5; // 24px
+$sizing-l: $_sizing-base * 1.75; // 28px;
+$sizing-xl: $_sizing-base * 2; // 32px;
+$sizing-2xl: $_sizing-base * 2.25; // 36px;
+$sizing-3xl: $_sizing-base * 2.5; // 40px;
+$sizing-4xl: $_sizing-base * 3; // 48px;
+
+
+/*
+  Spacing
+*/
+
+$_spacing-base: 1rem; // 16px
+
+$spacing-0: 0; // 0px
+$spacing-4xs: $_spacing-base * .0625; // 1px
+$spacing-3xs: $_spacing-base * .125; // 2px
+$spacing-2xs: $_spacing-base * .25; // 4px
+$spacing-xs: $_spacing-base * .5; // 8px
+$spacing-s: $_spacing-base * .75; // 12px
+$spacing-m: $_spacing-base; // 16px (base: browserDefault)
+$spacing-l: $_spacing-base * 1.25; // 20px
+$spacing-xl: $_spacing-base * 1.5; // 24px
+$spacing-2xl: $_spacing-base * 1.75; // 28px
+$spacing-3xl: $_spacing-base * 2; // 32px
+$spacing-4xl: $_spacing-base * 3; // 48px
+
+
+/*
+  State Layer Opacity
+*/
+$dragged-state-layer-opacity: var(--mat-sys-dragged-state-layer-opacity);
+$focus-state-layer-opacity: var(--mat-sys-focus-state-layer-opacity);
+$hover-state-layer-opacity: var(--mat-sys-hover-state-layer-opacity);
+$pressed-state-layer-opacity: var(--mat-sys-pressed-state-layer-opacity);
+
+/*
+  Elements
+*/
+
+//Scrollbar
+$scrollbar-outer-size: 24px;
+$scrollbar-inner-size: 4px;
+$scrollbar-thumb-color: var(--mat-sys-outline-variant);
+$scrollbar-track-color: transparent;
+$scrollbar-thumb-color-hover: var(--mat-sys-outline);
+
+/*
+  Selection & Focus & Hover
+*/
+//There is a complete misunderstanding of aria-selected, aria-current and focusing element across the whole system
+//This should be cleaned up asap
+$focus-background: var(--mat-sys-surface-container);
+$on-focus-background: var(--mat-sys-on-surface);
+$hover-background: var(--mat-sys-surface-container-low);
+$on-hover-background: var(--mat-sys-on-surface);
+$selection-background: var(--mat-sys-surface-container-highest);
+$on-selection-background: var(--mat-sys-on-surface);
+$current-background: $focus-background;
+$on-current-background: $on-focus-background;
+
+$focus-indicator-size: 2px;
+$focus-indicator-inner: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 90)}, #{map.get(theme-color.$primary-palette, 'neutral', 10)});
+$focus-indicator-outer: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 10)}, #{map.get(theme-color.$primary-palette, 'neutral', 90)});
+
+/*
+  Additional Component Tokens
+*/
+//Dialog
+$dialog-content-display: contents;
+
+//Overlay
+$overlay-backdrop-color: light-dark(rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / .3), rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / .8));
+
+/* Progress-Bar */
+$progress-bar-height: 4px;

package/scss/token/_token.tools.scss

@@ -0,0 +1,23 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use './token.config' as token-config;
+@use './token';
+
+$_map: meta.module-variables('token');
+
+@function use-token($token-name){
+
+  @if(str-index($token-name, "ref-") == 1){
+    @error 'The ymt-Token with name: #{$token-name} is not a CSS Custom Property (variable).';
+  }
+
+  @if(map.has-key($_map, $token-name) == false){
+    @error 'The ymt-Token with name: #{$token-name} does not exist';
+  }
+
+  @return var(#{token($token-name)});
+}
+
+@function token($token-name){
+  @return '--#{token-config.$prefix}-#{$token-name}';
+}

package/scss/utils/_font.scss

@@ -0,0 +1,41 @@
+@use '../token/token.tools' as t;
+
+.ymt-font-body {
+  font: t.use-token(font-body);
+  letter-spacing: t.use-token(font-body-tracking);
+}
+.ymt-font-body-subtle {
+  font: t.use-token(font-body-subtle);
+  letter-spacing: t.use-token(font-body-subtle-tracking);
+}
+
+.ymt-font-headline-small {
+  font: t.use-token(font-headline-small);
+  letter-spacing: t.use-token(font-headline-small-tracking);
+}
+.ymt-font-headline-medium {
+  font: t.use-token(font-headline-medium);
+  letter-spacing: t.use-token(font-headline-medium-tracking);
+}
+.ymt-font-headline-large {
+  font: t.use-token(font-headline-large);
+  letter-spacing: t.use-token(font-headline-large-tracking);
+}
+
+.ymt-font-title-small {
+  font: t.use-token(font-title-small);
+  letter-spacing: t.use-token(font-title-small-tracking);
+}
+.ymt-font-title-medium {
+  font: t.use-token(font-title-medium);
+  letter-spacing: t.use-token(font-title-medium-tracking);
+}
+.ymt-font-title-large {
+  font: t.use-token(font-title-large);
+  letter-spacing: t.use-token(font-title-large-tracking);
+}
+
+.ymt-font-subhead {
+  font: t.use-token(font-subhead);
+  letter-spacing: t.use-token(font-subhead-tracking);
+}

package/scss/utils/_index.scss

@@ -0,0 +1,3 @@
+@forward "visibility";
+@forward "font";
+@forward "spacing";

package/scss/utils/_spacing.scss

@@ -0,0 +1,53 @@
+@use '../token/token.tools' as t;
+
+.ymt-spacing {
+  &-padding {
+    &--0 {
+      padding: t.use-token(spacing-0);
+    }
+
+    &--4xs {
+      padding: t.use-token(spacing-4xs);
+    }
+
+    &--3xs {
+      padding: t.use-token(spacing-3xs);
+    }
+
+    &--2xs {
+      padding: t.use-token(spacing-2xs);
+    }
+
+    &--xs {
+      padding: t.use-token(spacing-xs);
+    }
+
+    &--s {
+      padding: t.use-token(spacing-s);
+    }
+
+    &--m {
+      padding: t.use-token(spacing-m);
+    }
+
+    &--l {
+      padding: t.use-token(spacing-l);
+    }
+
+    &--xl {
+      padding: t.use-token(spacing-xl);
+    }
+
+    &--2xl {
+      padding: t.use-token(spacing-2xl);
+    }
+
+    &--3xl {
+      padding: t.use-token(spacing-3xl);
+    }
+
+    &--4xl {
+      padding: t.use-token(spacing-4xl);
+    }
+  }
+}

package/scss/utils/_visibility.scss

@@ -0,0 +1,9 @@
+.ymt-hide-sr {
+  position: absolute!important;
+  clip: rect(1px, 1px, 1px, 1px)!important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  margin: 0;
+}