@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/forms/_input-fields.scss

@@ -34,9 +34,19 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   height: 56px;
   background-color: transparent;
   @include typescale("body-large");
-  font-family: $font-stack;
 }
 
+// A .field is full of spans that are not the floating label: supporting text,
+// the character counter, the file path, the select caret, and - since field
+// icons stopped being <i> - the leading and trailing icons. Every rule that
+// styles "the label, or the span standing in for it" has to exclude all of
+// them, and there are five such rules. They were five hand-copied lists that
+// had already drifted (.file-path was in two of them), and adding .prefix /
+// .suffix to four of five is exactly the bug this variable prevents: the
+// leading icon inherited the label's position and sat at 16px with
+// pointer-events: none.
+$_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix";
+
 .field {
   --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-filled-text-field-container-shape: 1rem;
@@ -72,16 +82,16 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     }
 
     &:focus:not([readonly]) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret) {
+    &:focus:not([readonly]) + span:not(#{$_not-label}) {
       color: var(--input-color);
     }
 
     &:focus:not([readonly]) + label,
     &:not([placeholder=" "]) + label,
     &:not(:placeholder-shown) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
-    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
-    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
+    &:focus:not([readonly]) + span:not(#{$_not-label}),
+    &:not([placeholder=" "]) + span:not(#{$_not-label}),
+    &:not(:placeholder-shown) + span:not(#{$_not-label}) {
       transform: scale(calc(12 / 16));
       top: 8px;
     }
@@ -123,8 +133,10 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     user-select: none;
   }
 
-  > label,
-  > span:not(.supporting-text, .character-counter, .file-path, .caret) {
+  // :not(.button, .icon-button) - the file input's trigger is a <label> and is
+  // a button, not this field's floating label.
+  > label:not(.button, .icon-button),
+  > span:not(#{$_not-label}) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -134,7 +146,6 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     transform-origin: top left;
     pointer-events: none;
     @include typescale("body-large");
-    font-family: $font-stack;
     transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
   }
 
@@ -145,7 +156,6 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     padding: 0 16px;
     color: var(--md-sys-color-on-surface-variant);
     @include typescale("body-small");
-    font-family: $font-stack;
   }
 
   > .character-counter {
@@ -154,13 +164,20 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     padding: 0 16px;
     color: var(--md-sys-color-on-surface-variant);
     @include typescale("body-small");
-    font-family: $font-stack;
   }
 
   // Shared icon box. Position is set on the leading / trailing rules;
   // a lone <i> matches several of the :is() items and must not pick
   // a side here.
-  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child) {
+  //
+  // The `i` rules are the legacy path and still work. They cannot be widened
+  // to the canonical <span class="material-symbols"> form, because they lean
+  // on :first-of-type / :last-of-type - which count elements of the same
+  // *type*, and a field is full of other spans (.supporting-text, .caret,
+  // .character-counter, .file-path). So the documented markup names the side
+  // explicitly with .prefix / .suffix, and those rules key on nothing else.
+  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child),
+  > :is(.prefix, .suffix) {
     position: absolute;
     top: 16px;
     display: flex;
@@ -174,28 +191,41 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   }
 
   > i:first-of-type:not(.suffix):not(:last-child),
-  > i.prefix {
+  > i.prefix,
+  > .prefix {
     left: 12px;
     pointer-events: none;
   }
 
   > i.suffix,
   > i:last-of-type:not(:first-of-type),
-  > i:last-child:not(:first-child):not(.prefix) {
+  > i:last-child:not(:first-child):not(.prefix),
+  > .suffix {
     right: 12px;
+    // Both icons inherited this from the floating-label rule until they were
+    // excluded from it. .prefix restates it below; .suffix has to as well, or
+    // the trailing icon swallows the click that should focus the input.
+    pointer-events: none;
   }
 
-  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) {
+  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) {
     > :is(input, textarea) {
       padding-left: 52px;
     }
 
-    > :is(label, span:not(.supporting-text, .character-counter, .file-path, .caret)) {
+    // The exclusion list is what stops this indenting things that are not the
+    // floating label. .prefix / .suffix joined it when field icons stopped
+    // being <i> and became spans - without them the leading icon was pushed
+    // to 52px, i.e. indented past its own padding.
+    > :is(
+      label,
+      span:not(#{$_not-label})
+    ) {
       left: 52px;
     }
   }
 
-  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix)) {
+  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix), > .suffix) {
     > :is(input, textarea) {
       padding-right: 52px;
     }
@@ -220,9 +250,9 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
       &:focus:not([readonly]) + label,
       &:not([placeholder=" "]) + label,
       &:not(:placeholder-shown) + label,
-      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
-      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
-      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
+      &:focus:not([readonly]) + span:not(#{$_not-label}),
+      &:not([placeholder=" "]) + span:not(#{$_not-label}),
+      &:not(:placeholder-shown) + span:not(#{$_not-label}) {
         top: -8px;
         left: 16px;
         margin-left: -4px;
@@ -249,30 +279,6 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   display: inline-block;
 }
 
-.searchbar {
-  > i:first-child {
-    position: absolute;
-    padding-left: 1rem;
-    top: 0;
-    user-select: none;
-    display: flex;
-    align-self: center;
-  }
-
-  > input {
-    border-width: 0;
-    background-color: transparent;
-    padding-left: 3rem;
-  }
-}
-
-.searchbar.has-sidebar {
-  margin-left: 0;
-  @include bp-up("large") {
-    margin-left: 300px;
-  }
-}
-
 textarea {
   width: 100%;
   height: 3rem;
@@ -300,7 +306,7 @@ textarea {
   }
 }
 
-.datepicker-date-input {
+:is(.datepicker-date-input, .date-picker-date-input) {
   position: relative;
   text-indent: -9999px;
 

package/src/sass/components/forms/_radio-buttons.scss

@@ -30,18 +30,20 @@ label:has(> [type="radio"]),
   user-select: none;
   color: var(--md-sys-color-on-surface);
   @include typescale("body-large");
-  font-family: $font-stack;
 }
 
-nav:has(> label > [type="radio"]) {
+// A row of radios is a group of controls, not navigation - see rule 4 in
+// SEMANTICS.md. `.inline` is the documented hook; the bare <nav> is the older
+// markup and still works.
+:is(nav, .inline):has(> label > [type="radio"]) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 24px;
 }
 
-nav > label:has(> [type="radio"]),
-nav > .radio {
+:is(nav, .inline) > label:has(> [type="radio"]),
+:is(nav, .inline) > .radio {
   display: inline-flex;
 }
 
@@ -73,16 +75,31 @@ label:has(> [type="radio"]) > [type="radio"],
   }
 
   &:hover {
-    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-on-surface),
+    "hover"
+  );
   }
 
   &:checked:hover {
-    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-primary),
+    "hover"
+  );
   }
 
   &:focus-visible,
   &.tabbed:focus {
-    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-primary),
+    "focus"
+  );
     outline: none;
   }
 
@@ -163,16 +180,31 @@ label:has(> [type="radio"]:disabled),
 }
 
 [type="radio"]:hover + span::before {
-  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-on-surface),
+    "hover"
+  );
 }
 
 [type="radio"]:checked:hover + span::before {
-  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-primary),
+    "hover"
+  );
 }
 
 [type="radio"]:focus-visible + span::before,
 [type="radio"].tabbed:focus + span::before {
-  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-radio-button-state-layer-size),
+    var(--md-comp-radio-button-icon-size),
+    var(--md-sys-color-primary),
+    "focus"
+  );
 }
 
 [type="radio"]:disabled + span {

package/src/sass/components/forms/_select.scss

@@ -34,7 +34,6 @@ select {
   background-color: var(--md-comp-filled-select-container-color);
   color: var(--md-comp-filled-select-input-text-color);
   @include typescale("body-large");
-  font-family: $font-stack;
 
   &:focus {
     outline: 2px solid var(--md-sys-color-primary);
@@ -133,6 +132,44 @@ select.browser-default {
   }
 }
 
+// Filled selects always have a floated label. Put that label in a real row
+// so translated wrapping and enlarged text reserve space above the value.
+.field:has(> .hide-select):has(> label):not(.outlined) {
+  display: grid;
+
+  > label {
+    grid-row: 1;
+    background-color: var(--md-comp-filled-text-field-container-color);
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    position: static;
+    transform: none;
+    margin: 0;
+    padding: 8px 16px 0;
+    padding-inline-end: 52px;
+    overflow-wrap: anywhere;
+    pointer-events: auto;
+    @include typescale("body-small");
+  }
+
+  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) > label {
+    padding-left: 52px;
+  }
+
+  &.disabled > label {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+  }
+
+  > input.menu-trigger {
+    grid-row: 2;
+    height: auto;
+    min-height: calc(var(--md-sys-typescale-body-large-line-height) + 8px);
+    padding-block: 0 7px;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
 .field:has(> .hide-select).disabled {
   .caret {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);

package/src/sass/components/forms/{_range.scss → _slider.scss}

@@ -3,9 +3,8 @@
 // Sliders.
 //
 // Anatomy is the HTML. An <input type="range"> is the control. A wrapping
-// .range (or label / .range-field) is the host. .slider is the carousel —
-// do not put it on a range. The IIFE plugin is Expressive.Range because
-// Slider is the carousel.
+// .slider is the host (.range and .range-field are the older names).
+// The plugin is Expressive.Slider; Expressive.Range is kept as an alias.
 //
 // Variants (M3 Expressive):
 //   standard   default. Active from the start to the handle.
@@ -30,7 +29,10 @@
 //   stop       4dp primary dot
 //   label      40dp, inverse-surface / inverse-on-surface, body-small
 
-$_host: ".range, .range-field, label:has(> [type='range'])";
+// M3 calls this component "Slider", so `.slider` is the name. It was the image
+// slideshow's host before 0.8.0. The slideshow is gone in 0.8.0, so the class
+// belongs to this component and nothing else.
+$_host: ".slider, .range, .range-field, label:has(> [type='range'])";
 
 :is(#{$_host}),
 input[type="range"] {
@@ -61,7 +63,6 @@ input[type="range"] {
   overflow: visible;
   color: var(--md-sys-color-on-surface);
   @include typescale("body-large");
-  font-family: $font-stack;
 }
 
 // Sizes. Default is XS. .small / .large keep the old names, now S / L.
@@ -119,7 +120,7 @@ input[type="range"] {
 }
 
 // Inset icon. Sits in the active track; M / L / XL are the intended sizes.
-:is(#{$_host}) > i:first-child {
+:is(#{$_host}) > #{$icon}:first-child {
   position: absolute;
   z-index: 1;
   left: var(--md-comp-slider-stop-inset);
@@ -133,7 +134,7 @@ input[type="range"] {
   pointer-events: none;
 }
 
-:is(#{$_host}).vertical > i:first-child {
+:is(#{$_host}).vertical > #{$icon}:first-child {
   left: 50%;
   top: auto;
   bottom: var(--md-comp-slider-stop-inset);
@@ -427,7 +428,6 @@ input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
   box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
 }
 
-.keyboard-focused input[type="range"]:focus:not(:disabled)::-webkit-slider-thumb,
 input[type="range"]:focus-visible:not(:disabled)::-webkit-slider-thumb {
   box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
 }
@@ -469,7 +469,6 @@ input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
   box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
 }
 
-.keyboard-focused input[type="range"]:focus:not(:disabled)::-moz-range-thumb,
 input[type="range"]:focus-visible:not(:disabled)::-moz-range-thumb {
   box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
 }

package/src/sass/components/forms/_switches.scss

@@ -32,7 +32,6 @@
   -webkit-tap-highlight-color: transparent;
   color: var(--md-sys-color-on-surface);
   @include typescale("body-large");
-  font-family: $font-stack;
 }
 
 .switch label {
@@ -104,16 +103,16 @@
   }
 
   &:hover {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   }
 
   &:checked:hover {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
   }
 
   &:focus-visible,
   &.tabbed:focus {
-    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
     outline: none;
   }
 
@@ -186,19 +185,19 @@
 
 .switch [type="checkbox"]:hover + .lever,
 .switch [type="checkbox"]:hover + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
 }
 
 .switch [type="checkbox"]:checked:hover + .lever,
 .switch [type="checkbox"]:checked:hover + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
 }
 
 .switch [type="checkbox"]:focus-visible + .lever,
 .switch [type="checkbox"].tabbed:focus + .lever,
 .switch [type="checkbox"]:focus-visible + span,
 .switch [type="checkbox"].tabbed:focus + span {
-  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
 }
 
 .switch [type="checkbox"]:disabled + .lever,

package/src/sass/expressive.scss

@@ -41,6 +41,11 @@
 
 @forward "abstracts";
 
+// @font-face must stay unlayered. A face declared inside @layer base can
+// lose to any unlayered consumer face, or be ignored by engines that still
+// treat layered faces as experimental.
+@include meta.load-css("base/fonts");
+
 @layer tokens, base, components, utilities;
 
 @layer tokens {

package/src/sass/tokens/_index.scss

@@ -1,4 +1,7 @@
-// Material Design 3 design tokens. Emits :root custom properties only.
+// Material Design 3 design tokens. Emits custom properties only - on :root,
+// and on [vibrant] for the emphasis axis.
 
 @forward "reference";  // raw ramps + resolved light/dark pairs
 @forward "theme";      // maps the pairs onto the live --md-sys-color-* names
+@forward "vibrant";    // [vibrant] remaps the surface family onto an accent
+@forward "state";      // md.sys.state.* state layer opacities

package/src/sass/tokens/_reference.scss

@@ -129,7 +129,7 @@ $sys-dark: (
   "surface-variant": "neutral-variant30", "surface-tint": "primary80"
 ) !default;
 
-:root {
+:root, :host {
   --md-source: #{$md-source};
 
   /* primary, secondary, tertiary, neutral, neutral-variant - all generated */
@@ -181,109 +181,118 @@ $sys-dark: (
     --md-sys-color-#{$role}-dark: var(--md-ref-palette-#{$ref});
   }
 
+  /* typefaces
+     M3 separates expressive large type (brand) from readable small type
+     (plain). Roboto is the default for both. Noto Sans follows it as the
+     language fallback recommended by Material. Override either brand/plain
+     token to customize the scale without rewriting every role. */
+  --md-ref-typeface-brand: "Roboto";
+  --md-ref-typeface-plain: "Roboto";
+  --md-ref-typeface-fallback: "Noto Sans", sans-serif;
+
   /* display - large */
-  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-display-large-font-family-style: Regular;
   --md-sys-typescale-display-large-font-weight: 400;
-  --md-sys-typescale-display-large-font-size: 57px;
-  --md-sys-typescale-display-large-line-height: 64px;
-  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  --md-sys-typescale-display-large-font-size: 3.5625rem;
+  --md-sys-typescale-display-large-line-height: 4rem;
+  --md-sys-typescale-display-large-letter-spacing: -0.015625rem;
   /* display - medium */
-  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-display-medium-font-family-style: Regular;
   --md-sys-typescale-display-medium-font-weight: 400;
-  --md-sys-typescale-display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  --md-sys-typescale-display-medium-font-size: 2.8125rem;
+  --md-sys-typescale-display-medium-line-height: 3.25rem;
+  --md-sys-typescale-display-medium-letter-spacing: 0rem;
   /* display - small */
-  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-display-small-font-family-style: Regular;
   --md-sys-typescale-display-small-font-weight: 400;
-  --md-sys-typescale-display-small-font-size: 36px;
-  --md-sys-typescale-display-small-line-height: 44px;
-  --md-sys-typescale-display-small-letter-spacing: 0px;
+  --md-sys-typescale-display-small-font-size: 2.25rem;
+  --md-sys-typescale-display-small-line-height: 2.75rem;
+  --md-sys-typescale-display-small-letter-spacing: 0rem;
   /* headline - large */
-  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-headline-large-font-family-style: Regular;
   --md-sys-typescale-headline-large-font-weight: 400;
-  --md-sys-typescale-headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  --md-sys-typescale-headline-large-font-size: 2rem;
+  --md-sys-typescale-headline-large-line-height: 2.5rem;
+  --md-sys-typescale-headline-large-letter-spacing: 0rem;
   /* headline - medium */
-  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-headline-medium-font-family-style: Regular;
   --md-sys-typescale-headline-medium-font-weight: 400;
-  --md-sys-typescale-headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  --md-sys-typescale-headline-medium-font-size: 1.75rem;
+  --md-sys-typescale-headline-medium-line-height: 2.25rem;
+  --md-sys-typescale-headline-medium-letter-spacing: 0rem;
   /* headline - small */
-  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-headline-small-font-family-style: Regular;
   --md-sys-typescale-headline-small-font-weight: 400;
-  --md-sys-typescale-headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-line-height: 32px;
-  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  --md-sys-typescale-headline-small-font-size: 1.5rem;
+  --md-sys-typescale-headline-small-line-height: 2rem;
+  --md-sys-typescale-headline-small-letter-spacing: 0rem;
   /* body - large */
-  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-body-large-font-family-style: Regular;
   --md-sys-typescale-body-large-font-weight: 400;
-  --md-sys-typescale-body-large-font-size: 16px;
-  --md-sys-typescale-body-large-line-height: 24px;
-  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  --md-sys-typescale-body-large-font-size: 1rem;
+  --md-sys-typescale-body-large-line-height: 1.5rem;
+  --md-sys-typescale-body-large-letter-spacing: 0.03125rem;
   /* body - medium */
-  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-body-medium-font-family-style: Regular;
   --md-sys-typescale-body-medium-font-weight: 400;
-  --md-sys-typescale-body-medium-font-size: 14px;
-  --md-sys-typescale-body-medium-line-height: 20px;
-  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  --md-sys-typescale-body-medium-font-size: 0.875rem;
+  --md-sys-typescale-body-medium-line-height: 1.25rem;
+  --md-sys-typescale-body-medium-letter-spacing: 0.015625rem;
   /* body - small */
-  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-body-small-font-family-style: Regular;
   --md-sys-typescale-body-small-font-weight: 400;
-  --md-sys-typescale-body-small-font-size: 12px;
-  --md-sys-typescale-body-small-line-height: 16px;
-  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  --md-sys-typescale-body-small-font-size: 0.75rem;
+  --md-sys-typescale-body-small-line-height: 1rem;
+  --md-sys-typescale-body-small-letter-spacing: 0.025rem;
   /* label - large */
-  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-label-large-font-family-style: Medium;
   --md-sys-typescale-label-large-font-weight: 500;
-  --md-sys-typescale-label-large-font-size: 14px;
-  --md-sys-typescale-label-large-line-height: 20px;
-  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  --md-sys-typescale-label-large-font-size: 0.875rem;
+  --md-sys-typescale-label-large-line-height: 1.25rem;
+  --md-sys-typescale-label-large-letter-spacing: 0.00625rem;
   /* label - medium */
-  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-label-medium-font-family-style: Medium;
   --md-sys-typescale-label-medium-font-weight: 500;
-  --md-sys-typescale-label-medium-font-size: 12px;
-  --md-sys-typescale-label-medium-line-height: 16px;
-  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  --md-sys-typescale-label-medium-font-size: 0.75rem;
+  --md-sys-typescale-label-medium-line-height: 1rem;
+  --md-sys-typescale-label-medium-letter-spacing: 0.03125rem;
   /* label - small */
-  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-label-small-font-family-style: Medium;
   --md-sys-typescale-label-small-font-weight: 500;
-  --md-sys-typescale-label-small-font-size: 11px;
-  --md-sys-typescale-label-small-line-height: 16px;
-  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  --md-sys-typescale-label-small-font-size: 0.6875rem;
+  --md-sys-typescale-label-small-line-height: 1rem;
+  --md-sys-typescale-label-small-letter-spacing: 0.03125rem;
   /* title - large */
-  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-name: var(--md-ref-typeface-brand), var(--md-ref-typeface-fallback);
   --md-sys-typescale-title-large-font-family-style: Regular;
   --md-sys-typescale-title-large-font-weight: 400;
-  --md-sys-typescale-title-large-font-size: 22px;
-  --md-sys-typescale-title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
+  --md-sys-typescale-title-large-font-size: 1.375rem;
+  --md-sys-typescale-title-large-line-height: 1.75rem;
+  --md-sys-typescale-title-large-letter-spacing: 0rem;
   /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-title-medium-font-family-style: Medium;
   --md-sys-typescale-title-medium-font-weight: 500;
-  --md-sys-typescale-title-medium-font-size: 16px;
-  --md-sys-typescale-title-medium-line-height: 24px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  --md-sys-typescale-title-medium-font-size: 1rem;
+  --md-sys-typescale-title-medium-line-height: 1.5rem;
+  --md-sys-typescale-title-medium-letter-spacing: 0.009375rem;
   /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-name: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
   --md-sys-typescale-title-small-font-family-style: Medium;
   --md-sys-typescale-title-small-font-weight: 500;
-  --md-sys-typescale-title-small-font-size: 14px;
-  --md-sys-typescale-title-small-line-height: 20px;
-  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  --md-sys-typescale-title-small-font-size: 0.875rem;
+  --md-sys-typescale-title-small-line-height: 1.25rem;
+  --md-sys-typescale-title-small-letter-spacing: 0.00625rem;
 }