@universal-material/web 3.6.22 → 3.6.24

package/dist/scss/_reboot.scss

@@ -0,0 +1,498 @@
+@use "variables";
+
+@use "functions";
+@use "mixins";
+
+@mixin reboot() {
+  // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+
+  // Reboot
+  //
+  // Normalization of HTML elements, manually forked from Normalize.css to remove
+  // styles targeting irrelevant browsers while applying new styles.
+  //
+  // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+  // Document
+  //
+  // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+
+  // Root
+  //
+  // Ability to the value of the root font sizes, affecting the value of `rem`.
+  // null by default, thus nothing is generated.
+
+  :root {
+    @if variables.$enable-smooth-scroll {
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+    }
+  }
+
+
+  // Body
+  //
+  // 1. Remove the margin in all browsers.
+  // 2. As a best practice, apply a default `background-color`.
+  // 3. Prevent adjustments of font size after orientation changes in iOS.
+  // 4. Change the default tap highlight to be completely transparent in iOS.
+
+  // scss-docs-start reboot-body-rules
+  body {
+    --u-current-bg-color: var(--u-color-body);
+    background-color: var(--u-current-bg-color);
+    margin: 0; // 1
+    @include mixins.typo-prop(body-l, font-size);
+    @include mixins.typo-prop(body-l, font-weight);
+    line-height: 1.5;
+    text-align: start;
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+  }
+  // scss-docs-end reboot-body-rules
+
+
+  // Content grouping
+  //
+  // 1. Reset Firefox's gray color
+
+  hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    border-top: 1px solid;
+    opacity: 0.25;
+  }
+
+
+  // Typography
+  //
+  // 1. Remove top margins from headings
+  //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  //    margin for easier control within type scales as it avoids margin collapsing.
+
+  h6, h5, h4, h3, h2, h1 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: calc(1.375rem + 1.5vw);
+  }
+  @media (min-width: 1200px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+  }
+
+  h2 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  @media (min-width: 1200px) {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+
+  h3 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    h3 {
+      font-size: 1.75rem;
+    }
+  }
+
+  h4 {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+  @media (min-width: 1200px) {
+    h4 {
+      font-size: 1.5rem;
+    }
+  }
+
+  h5 {
+    font-size: 1.25rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  abbr[title] {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+    cursor: help;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+  }
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol,
+  ul,
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: 700;
+  }
+
+  dd {
+    margin-bottom: 0.5rem;
+    margin-left: 0;
+  }
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  small {
+    font-size: 0.875em;
+  }
+
+
+  // Mark
+
+  mark {
+    padding: 0.1875em;
+    color: var(--u-color-on-warning);
+    background-color: var(--u-color-warning);
+  }
+
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  a {
+    color: #{functions.get-color-transparency-mix(var(--u-link-color, --u-color-primary), var(--u-text-opacity))};
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  a:not([href]):not([class]), a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: var(--u-font-monospace);
+    font-size: 1em;
+  }
+
+  pre {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    font-size: 0.875em;
+  }
+  pre code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+
+  code {
+    font-size: 0.875em;
+    word-wrap: break-word;
+  }
+  a > code {
+    color: inherit;
+  }
+
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: 0.875em;
+    color: var(--u-color-on-light);
+    background-color: var(--u-color-light);
+    font-weight: var(--u-font-weight-regular);
+    border-radius: 0.25rem;
+  }
+  kbd kbd {
+    padding: 0;
+    font-size: 1em;
+  }
+
+  figure {
+    margin: 0 0 1rem;
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    color: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))};
+    text-align: left;
+  }
+
+  th {
+    text-align: inherit;
+    text-align: -webkit-match-parent;
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  label {
+    display: inline-block;
+  }
+
+  button {
+    border-radius: 0;
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  [role=button] {
+    cursor: pointer;
+  }
+
+  select {
+    word-wrap: normal;
+  }
+  select:disabled {
+    opacity: 1;
+  }
+
+  [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit] {
+    -webkit-appearance: button;
+  }
+  button:not(:disabled),
+  [type=button]:not(:disabled),
+  [type=reset]:not(:disabled),
+  [type=submit]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0.5rem;
+    font-size: calc(1.275rem + 0.3vw);
+    line-height: inherit;
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+  /* rtl:raw:
+  [type="tel"],
+  [type="url"],
+  [type="email"],
+  [type="number"] {
+    direction: ltr;
+  }
+  */
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
+
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
+
+
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
+
+  [hidden] {
+    display: none !important;
+  }
+}

package/dist/scss/_utilities.scss

@@ -0,0 +1,4 @@
+@use "utilities/divider";
+@use "utilities/scheme";
+@use "utilities/spacing";
+@use "utilities/text";

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