@universal-material/web 3.6.21 → 3.6.23

package/dist/scss/_variables.scss

@@ -0,0 +1,139 @@
+@use "sass:string";
+@use "sass:map";
+
+$awesome-cubic-bezier: cubic-bezier(.19, 1, .22, 1) !default;
+
+$enable-smooth-scroll: true !default;
+$include-reboot: true !default;
+
+$layout-directions: (
+  "",
+  -block,
+  -inline
+);
+
+$spacing-sides: (
+  "": "",
+  t: -top,
+  b: -bottom,
+  s: -inline-start,
+  e: -inline-end,
+  x: -inline,
+  y: -block,
+);
+
+$breakpoints: (
+  xs: 0,
+  sm: 600px,
+  md: 840px,
+  lg: 1200px,
+  xl: 1600px
+) !default;
+
+$theme-colors: (
+  primary,
+  secondary,
+  tertiary
+);
+
+$color-roles: (
+  primary,
+  primary-container,
+  secondary,
+  secondary-container,
+  tertiary,
+  tertiary-container,
+  error,
+  error-container,
+  surface,
+  surface-variant,
+  surface-container,
+  surface-container-highest,
+  surface-container-high,
+  surface-container-low,
+  surface-container-lowest
+);
+
+$rgb-colors: (
+  primary: string.unquote("103, 80, 164"),
+  on-primary: string.unquote("255, 255, 255"),
+  primary-container: string.unquote("234, 221, 255"),
+  on-primary-container: string.unquote("33, 0, 93"),
+  secondary: string.unquote("98, 91, 113"),
+  secondary-container: string.unquote("232, 222, 248"),
+  on-secondary-container: string.unquote("29, 25, 43"),
+  on-secondary: string.unquote("255, 255, 255"),
+  tertiary: string.unquote("125, 82, 96"),
+  on-tertiary: string.unquote("255, 255, 255"),
+  tertiary-container: string.unquote("255, 216, 228"),
+  on-tertiary-container: string.unquote("49, 17, 29"),
+  error: string.unquote("179, 38, 30"),
+  on-error: string.unquote("255, 255, 255"),
+  error-container: string.unquote("249, 222, 220"),
+  on-error-container: string.unquote("65, 14, 11"),
+  surface: string.unquote("254, 247, 255"),
+  on-surface: string.unquote("29, 27, 32"),
+  surface-variant: string.unquote("231, 224, 236"),
+  on-surface-variant: string.unquote("73, 69, 79"),
+  surface-container-highest: string.unquote("230, 224, 233"),
+  surface-container-high: string.unquote("236, 230, 240"),
+  surface-container: string.unquote("243, 237, 247"),
+  surface-container-low: string.unquote("247, 242, 250"),
+  surface-container-lowest: string.unquote("255, 255, 255"),
+  inverse-surface: string.unquote("50, 47, 53"),
+  on-inverse-surface: string.unquote("245, 239, 247"),
+  outline: string.unquote("121, 116, 126"),
+  outline-variant: string.unquote("202, 196, 208"),
+  scrim: string.unquote("0, 0, 0"),
+  shadow: string.unquote("0, 0, 0")
+);
+
+$colors: ();
+
+@each $name, $value in $rgb-colors {
+  $colors: map.set($colors, $name, string.unquote("rgb(#{$value})"));
+}
+
+$fixed-colors: (
+  success,
+  info,
+  warning
+);
+
+$spacings: (
+  0: 0,
+  extra-small: 4px,
+  small: 8px,
+  medium: 16px,
+  large: 24px,
+  extra-large: 40px,
+) !default;
+
+$state-layer-opacity: (
+  hover: .08,
+  focus: .1,
+  press: .1,
+  drag: .16
+) !default;
+
+$font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+$font-weights: (
+  thin: 100,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  bolder: 900,
+) !default;
+
+$shape-corner: (
+  none: 0,
+  extra-small: 4px,
+  small: 8px,
+  medium: 12px,
+  large: 16px,
+  extra-large: 28px,
+  full: 9999px
+) !default;

package/dist/scss/colors/_text-bg.scss

@@ -0,0 +1,38 @@
+@use "sass:string";
+
+@use "../variables";
+@use "../mixins/text-bg";
+
+@each $color in variables.$color-roles {
+
+  @include text-bg.text-bg-variant-important($color);
+  @include text-bg.text-bg-variant-important(inverse-#{$color});
+
+  @include text-bg.bg-variant-important($color);
+  @include text-bg.bg-variant-important(inverse-#{$color});
+}
+
+@each $color in variables.$fixed-colors {
+  @include text-bg.text-bg-variant-important($color);
+  @include text-bg.text-bg-variant-important(#{$color}-container);
+
+  @include text-bg.bg-variant-important($color);
+  @include text-bg.bg-variant-important(#{$color}-container);
+}
+
+@each $color in variables.$theme-colors {
+  @include text-bg.text-bg-variant-important(#{$color}-fixed);
+  @include text-bg.text-bg-variant-important(#{$color}-fixed-dim, on-#{$color}-fixed);
+  @include text-bg.bg-variant-important(#{$color}-fixed);
+  @include text-bg.bg-variant-important(#{$color}-fixed-dim);
+}
+
+@include text-bg.text-bg-variant-important(body);
+@include text-bg.text-bg-variant-important(inverse-body);
+@include text-bg.text-bg-variant-important(light);
+@include text-bg.text-bg-variant-important(dark);
+
+@include text-bg.bg-variant-important(body);
+@include text-bg.bg-variant-important(inverse-body);
+@include text-bg.bg-variant-important(light);
+@include text-bg.bg-variant-important(dark);

package/dist/scss/colors/_text.scss

@@ -0,0 +1,52 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+
+@use "../variables";
+@use "../mixins/text-bg";
+
+@mixin _text-variant-block($name, $color-name) {
+
+  @if string.index($name, "-container") == null and string.index($name, "-surface") == null {
+    @include _text-variant($name, $color-name);
+    @include _text-variant($name, $color-name, inverse-);
+  }
+
+  @include _text-variant($name, $color-name, on-);
+  @include _text-variant($name, $color-name, on-inverse-);
+}
+
+@mixin _text-variant($name, $color-name: null, $prefix: '') {
+
+  @if ($color-name == null) {
+    $color-name: $name;
+  }
+
+  .u-text-#{$prefix}#{$name} {
+    @include text-bg.current-color-vars-important(--u-color-#{$prefix}#{$color-name});
+  }
+}
+
+@each $color in variables.$color-roles {
+  @include _text-variant-block($color, $color);
+}
+
+@each $color in variables.$fixed-colors {
+  @include _text-variant($color);
+  @include _text-variant(on-#{$color});
+  @include _text-variant(#{$color}-container);
+  @include _text-variant(on-#{$color}-container);
+}
+
+@each $color in variables.$theme-colors {
+  @include _text-variant(#{$color}-fixed);
+  @include _text-variant(#{$color}-fixed-dim);
+  @include _text-variant(on-#{$color}-fixed);
+  @include _text-variant(on-#{$color}-fixed-variant);
+}
+
+@include _text-variant(on-body);
+@include _text-variant(on-inverse-body);
+@include _text-variant(on-light);
+@include _text-variant(on-dark);
+

package/dist/scss/functions/_font.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+@use "sass:math";
+
+@use "../variables";
+
+@function get-rem-from-sp($sp-font-size) {
+  @return $sp-font-size * 0.0625rem;
+}
+
+@function get-letter-spacing($px-tracking, $sp-font-size) {
+  @return math.div($px-tracking, $sp-font-size) * 1rem;
+}
+
+@function get-font-family-var() {
+  @return var(--u-font-family, variables.$font-family);
+}
+
+@function get-font-weight-var($name) {
+  @return var(--u-font-weight-#{$name}, map.get(variables.$font-weights, $name));
+}
+
+@function get-typo-style($line-height, $font-size, $tracking, $font-weight) {
+  @return (
+    line-height: get-rem-from-sp($line-height),
+    font-size: get-rem-from-sp($font-size),
+    letter-spacing: get-letter-spacing($tracking, $font-size),
+    font-weight: $font-weight
+  );
+}

package/dist/scss/layout/_container.scss

@@ -0,0 +1,14 @@
+@use "../api";
+@use "../mixins";
+
+.u-container-fluid,
+.u-container {
+  padding-inline: var(--u-layout-margin-inline, var(--u-layout-margin));
+  padding-block: var(--u-layout-margin-block, var(--u-layout-margin));
+  width: 100%;
+}
+
+.u-container {
+  max-width: var(--u-container-width, 992px);
+  margin-inline: auto;
+}

package/dist/scss/layout/_grid.scss

@@ -0,0 +1,12 @@
+.u-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--u-grid-columns, 2), minmax(0, 1fr));
+  column-gap: var(--u-layout-gutter-inline, var(--u-layout-gutter));
+  row-gap: var(--u-layout-gutter-block, var(--u-layout-gutter));
+}
+
+.u-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--u-layout-gutter-block, var(--u-layout-gutter));
+}

package/dist/scss/layout/_margin-and-gutters.scss

@@ -0,0 +1,37 @@
+@use "sass:list";
+@use "sass:map";
+
+@use "../variables";
+@use "../api";
+
+@each $breakpoint in map.keys(variables.$breakpoints) {
+  $infix: api.breakpoint-infix($breakpoint);
+
+  @each $direction in variables.$layout-directions {
+
+    @include api.media-breakpoint-up($breakpoint) {
+      .u-margin#{$direction}#{$infix}-default {
+        --u-layout-margin#{$direction}: var(--u-layout-margin-default);
+      }
+
+      .u-gutter#{$direction}#{$infix}-default {
+        --u-layout-gutter#{$direction}: var(--u-layout-gutter-default);
+      }
+    }
+  }
+
+  @each $spacing in map.keys(variables.$spacings) {
+    @each $direction in variables.$layout-directions {
+
+      @include api.media-breakpoint-up($breakpoint) {
+        .u-margin#{$direction}#{$infix}-#{$spacing} {
+          --u-layout-margin#{$direction}: var(--u-spacing-#{$spacing});
+        }
+
+        .u-gutter#{$direction}#{$infix}-#{$spacing} {
+          --u-layout-gutter#{$direction}: var(--u-spacing-#{$spacing});
+        }
+      }
+    }
+  }
+}

package/dist/scss/mixins/_breakpoints.scss

@@ -0,0 +1,71 @@
+@use "sass:map";
+
+@use "../variables";
+
+@function breakpoint-next($name) {
+  $breakpoint-names: map.keys(variables.$breakpoints);
+
+  $n: index($breakpoint-names, $name);
+
+  @if not $n {
+    @return null;
+  }
+
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+@function breakpoint-min($name) {
+  $min: map.get(variables.$breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name) {
+  $next: breakpoint-next($name);
+  @return if($next, breakpoint-min($next) - .02px, null);
+}
+
+@function breakpoint-infix($name) {
+  @return if(breakpoint-min($name) == null, "", "-#{$name}");
+}
+
+@mixin media-breakpoint-up($name) {
+  $min: breakpoint-min($name);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-down($name) {
+  $max: breakpoint-max($name);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-only($name) {
+  $min:  breakpoint-min($name);
+  $next: breakpoint-next($name);
+  $max:  breakpoint-min($next);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
+      @content;
+    }
+  }
+}

package/dist/scss/mixins/_colors.scss

@@ -0,0 +1,5 @@
+@use "sass:color";
+
+@mixin _color-vars($color-name, $color-value) {
+  --u-color-#{$color-name}: #{$color-value};
+}

package/dist/scss/mixins/_text-bg.scss

@@ -0,0 +1,34 @@
+@use "sass:string";
+
+@use "../functions";
+
+@mixin current-color-vars-important($current-color-var-name) {
+  color: var(#{$current-color-var-name}) !important;
+}
+
+@mixin current-color-vars($current-color-var-name) {
+  color: var(#{$current-color-var-name});
+}
+
+@mixin bg-variant-important($color-name) {
+  .u-bg-#{$color-name} {
+    background-color: var(--u-color-#{$color-name}) !important;
+  }
+}
+
+@mixin text-bg-variant-important($color-name, $on-color-name: null) {
+
+  @if $on-color-name == null {
+    $on-color-name: on-#{$color-name};
+  }
+
+  $container-index: string.index($on-color-name, "surface-container");
+  @if $container-index != null {
+    $on-color-name: #{string.slice($on-color-name, 1, $container-index - 1)}surface;
+  }
+
+  .u-text-bg-#{$color-name} {
+    @include current-color-vars-important(--u-color-#{$on-color-name});
+    background-color: var(--u-color-#{$color-name}) !important;
+  }
+}

package/dist/scss/mixins/_typo.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+
+@use "../typo/variables";
+@use "../functions";
+
+@mixin typo($style, $target-name: null) {
+  @if not map.has-key(variables.$typography-styles, $style) {
+    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
+  }
+
+  @if $target-name != null {
+    font-family: var(--u-font-family, #{functions.get-font-family-var()});
+  } @else {
+    font-family: var(--u-font-family);
+  }
+
+  $props: map.get(variables.$typography-styles, $style);
+
+  @each $key, $value in $props {
+    @if $target-name != null {
+      #{$key}: var(--u-#{$target-name}-#{$key}, var(--u-#{$style}-#{$key}, #{$value}));
+    } @else {
+      #{$key}: var(--u-#{$style}-#{$key});
+    }
+  }
+}
+
+
+@mixin typo-prop($style, $prop, $target-name: null) {
+  @if not map.has-key(variables.$typography-styles, $style) {
+    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
+  }
+
+  $props: map.get(variables.$typography-styles, $style);
+
+  $value: map.get($props, $prop);
+
+  @if $target-name != null {
+    #{$prop}: var(--u-#{$target-name}-#{$prop}, var(--u-#{$style}-#{$prop}, #{$value}));
+  } @else {
+    #{$prop}: var(--u-#{$style}-#{$prop});
+  }
+}

package/dist/scss/table/_table.scss

@@ -0,0 +1,48 @@
+@use "../functions";
+
+:root {
+  --u-table-hover-opacity: var(--u-state-layer-hover-opacity);
+  --u-table-cell-padding: 13px 16px;
+  --u-table-cell-font-weight: #{functions.get-font-weight-var(medium)};
+}
+
+.u-table {
+  min-width: 100%;
+  border-collapse: collapse;
+  font-family: var(--u-font-family, #{functions.get-font-family-var()});
+
+  > tbody > tr,
+  > thead > tr,
+  > tfoot > tr,
+  > tr {
+    @at-root .u-table:has(> thead) > tbody > tr,
+    &:not(:first-child) {
+      border-top: 1px solid #{functions.get-color-transparency-mix(currentColor, var(--u-table-divider-opacity, 20%))};
+    }
+
+    > td {
+      padding: var(--u-td-padding, var(--u-table-cell-padding));
+      font-size: var(--u-td-font-size, .875rem);
+      font-weight: var(--u-td-font-weight, var(--u-table-cell-font-weight));
+      text-align: start;
+    }
+
+    > th {
+      --u-text-opacity: var(--u-low-emphasis-opacity);
+      padding: var(--u-th-padding, var(--u-table-cell-padding));
+      font-size: var(--u-th-font-size, .8125rem);
+      font-weight: var(--u-th-font-weight, var(--u-table-cell-font-weight));
+      color: #{functions.get-color-transparency-mix(currentColor, var(--u-text-opacity))};
+      text-align: start;
+    }
+  }
+}
+
+.u-table-hover {
+  > tbody > tr,
+  > tr {
+    &:hover {
+      background-color: #{functions.get-color-transparency-mix(currentColor, var(--u-table-hover-opacity))};
+    }
+  }
+}

package/dist/scss/typo/_font.scss

@@ -0,0 +1,5 @@
+@use "../variables";
+
+:root {
+  --u-font-family: #{variables.$font-family};
+}

package/dist/scss/typo/_typo.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+
+@use "variables";
+@use "../functions";
+@use "../mixins";
+
+:root {
+  @each $style, $props in (variables.$typography-styles) {
+    @each $key, $value in $props {
+      --u-#{$style}-#{$key}: #{$value};
+    }
+  }
+}
+
+@each $style in map.keys(variables.$typography-styles) {
+  .u-#{$style} {
+    @include mixins.typo($style);
+  }
+}

package/dist/scss/typo/_variables.scss

@@ -0,0 +1,19 @@
+@use "../functions";
+
+$typography-styles: (
+  display-l: functions.get-typo-style(64, 57, -.25, #{functions.get-font-weight-var(regular)}),
+  display-m: functions.get-typo-style(52, 45, 0, #{functions.get-font-weight-var(regular)}),
+  display-s: functions.get-typo-style(44, 36, 0, #{functions.get-font-weight-var(regular)}),
+  headline-l: functions.get-typo-style(40, 32, 0, #{functions.get-font-weight-var(regular)}),
+  headline-m: functions.get-typo-style(36, 28, 0, #{functions.get-font-weight-var(regular)}),
+  headline-s: functions.get-typo-style(32, 24, 0, #{functions.get-font-weight-var(regular)}),
+  title-l: functions.get-typo-style(28, 22, 0, #{functions.get-font-weight-var(regular)}),
+  title-m: functions.get-typo-style(24, 16, .15, #{functions.get-font-weight-var(medium)}),
+  title-s: functions.get-typo-style(20, 14, .1, #{functions.get-font-weight-var(medium)}),
+  body-l: functions.get-typo-style(24, 16, .5, #{functions.get-font-weight-var(regular)}),
+  body-m: functions.get-typo-style(20, 14, .25, #{functions.get-font-weight-var(regular)}),
+  body-s: functions.get-typo-style(16, 12, .4, #{functions.get-font-weight-var(regular)}),
+  label-l: functions.get-typo-style(20, 14, .1, #{functions.get-font-weight-var(medium)}),
+  label-m: functions.get-typo-style(16, 12, .5, #{functions.get-font-weight-var(medium)}),
+  label-s: functions.get-typo-style(16, 11, .5, #{functions.get-font-weight-var(medium)})
+) !default;

package/dist/scss/universal-material.scss

@@ -0,0 +1,16 @@
+@use "variables";
+@use "css-vars";
+@use "colors";
+@use "layout";
+@use "utilities";
+@use "table/table";
+@use "typo/font";
+@use "typo/typo";
+
+@use "reboot";
+@use "global";
+
+@if variables.$include-reboot {
+  @include reboot.reboot;
+  @include global.global-styles;
+}

package/dist/scss/utilities/_divider.scss

@@ -0,0 +1,13 @@
+@use "../api";
+
+.u-divider,
+.u-divider-no-margin {
+  display: block;
+  height: var(--u-divider-thickness, 1px);
+  background-color: var(--u-divider-color, currentColor);
+  opacity: var(--u-divider-opacity, .4);
+}
+
+.u-divider {
+  margin-block: 8px;
+}

package/dist/scss/utilities/_scheme.scss

@@ -0,0 +1,9 @@
+.u-dark {
+  color-scheme: dark !important;
+  color: var(--u-color-on-body);
+}
+
+.u-light {
+  color-scheme: light !important;
+  color: var(--u-color-on-body);
+}

package/dist/scss/utilities/_spacing.scss

@@ -0,0 +1,23 @@
+@use "sass:list";
+@use "sass:map";
+
+@use "../variables";
+@use "../api";
+
+@each $breakpoint in map.keys(variables.$breakpoints) {
+  $infix: api.breakpoint-infix($breakpoint);
+
+  @each $spacing in map.keys(variables.$spacings) {
+    @each $side, $value in variables.$spacing-sides {
+      @include api.media-breakpoint-up($breakpoint) {
+        .u-m#{$side}#{$infix}-#{$spacing} {
+          margin#{$value}: var(--u-spacing-#{$spacing});
+        }
+
+        .u-p#{$side}#{$infix}-#{$spacing} {
+          padding#{$value}: var(--u-spacing-#{$spacing});
+        }
+      }
+    }
+  }
+}