@universal-material/web 3.6.22 → 3.6.23

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});
+        }
+      }
+    }
+  }
+}

package/dist/scss/utilities/_text.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "../variables";
+@use "../mixins";
+
+.u-text-monospace { font-family: var(--u-font-monospace); }
+
+// Alignment
+
+.u-text-justify  { text-align: justify !important; }
+.u-text-nowrap   { white-space: nowrap !important; }
+.u-text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Contextual
+.u-text-high-emphasis {
+  color: var(--u-color-high-emphasis) !important;
+}
+
+.u-text-low-emphasis {
+  color: var(--u-color-low-emphasis) !important;
+}
+
+.u-text-lower-emphasis {
+  color: var(--u-color-lower-emphasis) !important;
+}
+
+// Responsive alignment
+
+@each $breakpoint in map.keys(variables.$breakpoints) {
+  @include mixins.media-breakpoint-up($breakpoint) {
+    $infix: mixins.breakpoint-infix($breakpoint);
+
+    .u-text#{$infix}-left   { text-align: left !important; }
+    .u-text#{$infix}-center { text-align: center !important; }
+    .u-text#{$infix}-right  { text-align: right !important; }
+
+    .u-text#{$infix}-start {
+      text-align: start !important;
+    }
+
+    .u-text#{$infix}-end {
+      text-align: end !important;
+    }
+  }
+}
+
+@each $weight, $value in variables.$font-weights {
+  .u-font-weight-#{$weight} {
+    font-weight: var(--u-font-weight-#{$weight}) !important;
+  }
+}