@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/README.md

@@ -65,21 +65,26 @@ fine — it crosses no boundary.
 
 ## Breakpoints
 
-Four of them, in `abstracts/_breakpoints.scss`, reached through mixins:
+The five Material 3 window size classes live in
+`abstracts/_breakpoints.scss` and are reached through mixins:
 
 ```scss
-@include bp-up("small")   { }   // @media (width >= 601px)
-@include bp-down("large") { }   // @media (width < 993px)
-@include bp-between("small", "large") { }
+@include bp-up("medium") { }                    // width >= 600px
+@include bp-down("expanded") { }                // width < 840px
+@include bp-between("expanded", "large") { }   // 840px–1199px
 ```
 
-Names are `small` (601px), `large` (993px), `xlarge` (1201px), `xxlarge`
-(1601px) — the boundary a query sits on, not the size of the screen it
-targets. `xxlarge` is M3 extra-large (desktop / widescreen); the 12-column
-grid grows a `.xxl` prefix there, and `.container` lifts its 1280px cap to
-1920px. Range syntax has an exclusive comparator, so the old `600.99px` /
-`992.99px` values used to stop `max-width` and `min-width` both matching on
-the boundary pixel are gone, and each boundary is written once.
+| M3 class | Width | Grid prefix |
+| --- | --- | --- |
+| Compact | `< 600px` | `.s` (default) |
+| Medium | `600–839px` | `.m` |
+| Expanded | `840–1199px` | `.l` |
+| Large | `1200–1599px` | `.xl` |
+| Extra-large | `>= 1600px` | `.xxl` |
+
+The grid prefixes remain unchanged for markup compatibility. At Extra-large,
+`.container` lifts its 1280px cap to 1920px. Range syntax uses exclusive
+comparators, so each boundary is written once without fractional max-widths.
 
 ## Theming
 
@@ -126,6 +131,51 @@ only has to set `color-scheme: dark` and all 30 tokens re-resolve — and settin
 `color-scheme` on any subtree re-themes just that subtree. `color-scheme` is
 load-bearing now; changing it is not cosmetic.
 
+## Shadow roots
+
+The sheet is supported as a shadow root's **only** stylesheet — adopted into
+`shadowRoot.adoptedStyleSheets` with no copy in the document. So a rule that
+declares a token pairs its anchor with the `:host` twin that reaches the same
+elements from inside a shadow tree:
+
+```scss
+// no - :root matches the document element and nothing else, so this token
+// is simply absent in a shadow-only load, and every declaration reading it
+// is then invalid at computed-value time
+:root { --md-comp-nav-drawer-width: 300px; }
+
+// yes
+:root, :host { --md-comp-nav-drawer-width: 300px; }
+:root[theme='dark'], :host([theme='dark']) { color-scheme: dark; }
+[vibrant], :host([vibrant]) { … }
+```
+
+An anchor is anything that can only match a document root or a descendant of
+one, which is `html` and `body` as well: a shadow root has neither inside it.
+`base/_grid.scss` put `--gap-size` on `body` and `.row` reads it without a
+fallback, so a `.row` in a shadow-only load had an invalid `gap` rather than a
+default one.
+
+`color-scheme` counts as a token here: `light-dark()` resolves against the
+element's used `color-scheme`, so an unpaired `:root[theme='dark']` means a
+shadow tree cannot be pinned to a theme the way a page can.
+
+`:host` matches nothing in a document, so pairing an anchor cannot change a
+normal load. It is not weightless, though: bare `:host` matches `:root` at
+(0,1,0), but `:host(<compound>)` adds its argument's weight on top, so
+`:host([vibrant])` is (0,2,0) against `[vibrant]`'s (0,1,0). The two arms match
+disjoint elements and never compete, so nothing in the sheet turns on it — but
+do not reach for the pairing as a way to keep specificity flat.
+
+`tests/shadow-dom.test.js` fails any rule that skips the pairing; the commitment
+behind it is `adr/0002-shadow-only-stylesheet-adoption.md`. That commitment
+covers everything *inside* the shadow root, portals included: the six places that
+create an element at runtime (Tooltip, Snackbar, Lightbox's caption, the drawer's
+drag target, and the Datepicker's two menus) route through `Utils.portalRoot()`
+and append into the originating shadow root, so no document-level copy is needed.
+The cost is that they no longer escape an ancestor's `overflow` or stacking
+context — the ADR states what that re-anchors.
+
 ## Translucent colors
 
 ```scss

package/src/sass/abstracts/_breakpoints.scss

@@ -1,38 +1,36 @@
 @use "sass:map";
 @use "sass:list";
 
-// Breakpoints, as media-query range syntax.
+// Material 3 window size classes, expressed as media-query boundaries.
 //
 // The old form built a query by interpolating a whole string:
 //
 //   $medium-and-down: "only screen and (max-width : 992.99px)";
 //   @media #{$medium-and-down} { ... }
 //
-// which needed the `.99` because `max-width: 993px` and `min-width: 993px`
-// both match at exactly 993px. Range syntax has an exclusive comparator, so
-// the fractional values are gone and the boundary is stated once:
+// which needed the `.99` because inclusive max/min queries both match on the
+// boundary pixel. Range syntax has an exclusive comparator, so fractional
+// values are unnecessary and every boundary is stated once:
 //
-//   @include bp-down("large") { ... }   ->  @media (width < 993px)
+//   @include bp-down("expanded") { ... }   ->  @media (width < 840px)
 //
 // `only screen` went with them: it existed to hide queries from Netscape 4
 // and IE, and `screen` alone excludes print anyway - which these rules never
 // wanted to do, since a hidden element should stay hidden on paper.
 
-// Boundaries, not the size of the screen they target. Column prefixes
-// s / m / l / xl / xxl sit on these in order; there is no `medium` key
-// because the tablet class is `m` and the mixin name is the boundary.
-//
-// M3 window-size classes, for the ones that line up:
-//   compact      width <  600     below "small"
-//   medium       600 ≤ width < 840   (we do not split 840 out of "small")
-//   expanded     840 ≤ width < 1200  "large" is 993, close enough
-//   large       1200 ≤ width < 1600  "xlarge"
-//   extra-large  width ≥ 1600        "xxlarge"
+// Compact starts at zero and is the unwrapped/default style. The remaining
+// entries are the exact lower bounds from the M3 adaptive-layout spec:
+//   compact       0 ≤ width <  600
+//   medium      600 ≤ width <  840
+//   expanded    840 ≤ width < 1200
+//   large      1200 ≤ width < 1600
+//   extra-large       width ≥ 1600
 $breakpoints: (
-  "small": 601px,     // phone        -> tablet
-  "large": 993px,     // tablet       -> desktop
-  "xlarge": 1201px,   // desktop      -> large desktop
-  "xxlarge": 1601px,  // large        -> extra-large / widescreen
+  "compact": 0px,
+  "medium": 600px,
+  "expanded": 840px,
+  "large": 1200px,
+  "extra-large": 1600px,
 ) !default;
 
 @function breakpoint($name) {

package/src/sass/abstracts/_mixins.scss

@@ -1,14 +1,36 @@
+@use "sass:list";
+@use "sass:map";
 @use "./elevation" as *;
 @use "./variables" as *;
 
+$_state-layers: ("hover", "focus", "pressed", "dragged");
 
-// Common-button geometry. M3 default is 40dp, label-large, 20dp corners
-// (a stadium), 24dp inset, 8dp icon gap. Variants only change color/elevation.
+/// A state layer opacity, as the percentage `color-mix()` wants.
+///
+/// The tokens hold numbers (0.08), because an overlay uses one as `opacity`
+/// directly. A tint mixed with `color-mix()` needs a percentage, so it is
+/// multiplied here rather than at forty-odd call sites.
+///
+/// Validated for the same reason `z-depth()` validates: a typo would produce a
+/// `var()` naming a token nothing declares, which invalidates the whole
+/// declaration at computed-value time - silently, and in a way nothing but the
+/// rendered page would show.
+@function state-opacity($state) {
+  @if not list.index($_state-layers, $state) {
+    @error "Unknown state layer #{$state}. Expected one of #{$_state-layers}.";
+  }
+  @return calc(var(--md-sys-state-#{$state}-state-layer-opacity) * 100%);
+}
+
+
+// Common-button geometry. M3 Expressive's default size is small: 40dp,
+// label-large, corner.full, 16dp inset, 8dp icon gap. The size axis moves
+// those tokens; the style mixins only change color and elevation.
 @mixin btn(
   $height: var(--md-comp-filled-button-container-height, 40px),
-  $border-radius: var(--md-comp-filled-button-container-shape, 20px),
-  $padding-left: var(--md-comp-filled-button-leading-space, 24px),
-  $padding-right: var(--md-comp-filled-button-trailing-space, 24px),
+  $border-radius: var(--md-comp-filled-button-container-shape, 9999px),
+  $padding-left: var(--md-comp-filled-button-leading-space, 16px),
+  $padding-right: var(--md-comp-filled-button-trailing-space, 16px),
   $font-size: var(--md-sys-typescale-label-large-font-size),
 ) {
   box-sizing: border-box;
@@ -36,8 +58,8 @@
   transition: background-color .2s ease-out, box-shadow .2s ease-out;
 }
 
-// State layers are 8% hover / 10% focus+press of the on-color, mixed in oklab
-// onto the container. Filled and tonal have no elevation.
+// State layers mix the on-color into the container in oklab; the opacities come
+// from md.sys.state via `state-opacity()`. Filled and tonal have no elevation.
 
 @mixin btn-filled {
   color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
@@ -46,7 +68,7 @@
   &:hover {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary) 8%,
+      var(--md-sys-color-on-primary) state-opacity("hover"),
       var(--md-sys-color-primary)
     );
   }
@@ -55,7 +77,7 @@
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-primary) 10%,
+      var(--md-sys-color-on-primary) state-opacity("focus"),
       var(--md-sys-color-primary)
     );
   }
@@ -70,7 +92,7 @@
   &:hover {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-secondary-container) 8%,
+      var(--md-sys-color-on-secondary-container) state-opacity("hover"),
       var(--md-sys-color-secondary-container)
     );
   }
@@ -79,7 +101,7 @@
   &:focus {
     background-color: color-mix(
       in oklab,
-      var(--md-sys-color-on-secondary-container) 10%,
+      var(--md-sys-color-on-secondary-container) state-opacity("focus"),
       var(--md-sys-color-secondary-container)
     );
   }
@@ -94,13 +116,13 @@
 
   &:hover {
     @include z-depth("2");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), var(--md-sys-color-surface-container-low));
   }
 
   &:active,
   &:focus {
     @include z-depth("1");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), var(--md-sys-color-surface-container-low));
   }
 
   @include focus-visible();
@@ -109,15 +131,19 @@
 @mixin btn-outlined {
   background-color: transparent;
   color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  // The width is not subtracted from the inset the way `.icon-button.outlined`
+  // subtracts it: there it keeps a round control as wide as it is tall, and a
+  // common button's width is its content's. `border-box` already keeps the
+  // height right.
+  border: var(--md-comp-filled-button-outline-width, 1px) solid var(--md-sys-color-outline);
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
   }
 
   @include focus-visible();
@@ -130,12 +156,12 @@
   border-color: transparent;
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
   }
 
   @include focus-visible();
@@ -151,21 +177,129 @@
   cursor: default;
 }
 
+// Off the screen but not out of the document: still focusable, still read, and
+// still a form control. `display: none` and `visibility: hidden` both take the
+// element out of the tab order, which is the wrong trade for a control whose
+// label is drawn elsewhere - a hidden radio that cannot be focused has no
+// arrow-key model left.
+//
+// _chips.scss and _navigation-rail.scss each carry their own copy of this and
+// predate the mixin; fold them in when either is next touched.
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 // Focus with Keyboard
+// The ring itself, for the rare selector that cannot be written as
+// `&:focus-visible` on the focused element - a filter chip draws its ring on
+// the <label>, but the focus is on the checkbox before it.
+@mixin focus-ring {
+  outline: 3px solid var(--md-sys-color-secondary);
+  outline-offset: 2px;
+}
+
 @mixin focus-visible {
   &:focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
+    @include focus-ring();
   }
 }
 
 // M3 type role. Every property must name a token tokens/_reference.scss
 // actually defines — a missing var() drops the whole declaration.
 @mixin typescale($role) {
-  font-family: var(--md-sys-typescale-#{$role}-font-family-name), #{$font-stack};
+  font-family: var(--md-sys-typescale-#{$role}-font-family-name);
   font-size: var(--md-sys-typescale-#{$role}-font-size);
   font-weight: var(--md-sys-typescale-#{$role}-font-weight);
   line-height: var(--md-sys-typescale-#{$role}-line-height);
   letter-spacing: var(--md-sys-typescale-#{$role}-letter-spacing);
 }
 
+/// The state layer some controls draw as a ring rather than an overlay.
+///
+/// Checkboxes and radio buttons have no room for an overlay pseudo-element, so
+/// they grow a `box-shadow` from the control's edge out to the state layer
+/// size. `color-mix()` wants a percentage where the token is a number, hence
+/// the `* 100%`.
+@mixin state-layer-ring($outer, $inner, $color, $state) {
+  box-shadow: 0 0 0 calc((#{$outer} - #{$inner}) / 2)
+    color-mix(
+      in oklab,
+      #{$color} state-opacity($state),
+      transparent
+    );
+}
+
+/// The button size tokens for one rung of `$button-sizes`.
+///
+/// Tokens only. The type role is emitted beside the call, never from here:
+/// `:root` takes this mixin for the default size, and a typescale on :root
+/// would set the page's font.
+@mixin button-size($name) {
+  $s: map.get($button-sizes, $name);
+
+  --md-comp-filled-button-container-height: #{map.get($s, height)};
+  --md-comp-filled-button-icon-size: #{map.get($s, icon)};
+  --md-comp-filled-button-leading-space: #{map.get($s, space)};
+  --md-comp-filled-button-trailing-space: #{map.get($s, space)};
+  --md-comp-filled-button-icon-label-space: #{map.get($s, gap)};
+  --md-comp-filled-button-outline-width: #{map.get($s, outline)};
+}
+
+/// The icon-button tokens for one rung of `$icon-button-sizes`.
+@mixin icon-button-size($name) {
+  $s: map.get($icon-button-sizes, $name);
+
+  --md-comp-icon-button-container-height: #{map.get($s, height)};
+  --md-comp-icon-button-icon-size: #{map.get($s, icon)};
+  --md-comp-icon-button-leading-space: #{map.get($s, space)};
+  --md-comp-icon-button-trailing-space: #{map.get($s, space)};
+  --md-comp-icon-button-narrow-space: #{map.get($s, narrow)};
+  --md-comp-icon-button-wide-space: #{map.get($s, wide)};
+  --md-comp-icon-button-container-shape-square: #{map.get($s, square)};
+  --md-comp-icon-button-pressed-container-shape: #{map.get($s, pressed)};
+  --md-comp-icon-button-outline-width: #{map.get($s, outline)};
+}
+
+// Media-covering triggers share the card state layer and focus indicator.
+@mixin card-media-trigger {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-hover-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-focus-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+    outline: var(--md-comp-card-focus-indicator-thickness) solid var(--md-comp-card-focus-indicator-color);
+    outline-offset: calc(-1 * var(--md-comp-card-focus-indicator-thickness));
+  }
+
+  &:active {
+    background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-pressed-state-layer-opacity) * 100%), transparent);
+    box-shadow: none;
+  }
+}

package/src/sass/abstracts/_variables.scss

@@ -1,5 +1,20 @@
 @use "sass:math";
 
+// "Is this child an icon, or is it the label?" - a question several components
+// ask, and every one of them used to answer it by element: <i> was the icon,
+// <span> was the label. That broke the day the canonical icon became a <span>,
+// silently, in five selectors at once: icon+label buttons lost their leading
+// inset, icon-only toolbar actions stopped being 48dp circles and picked up the
+// text-action pill instead.
+//
+// So the answer lives in one place. `i` stays in the list for markup written
+// before 0.8.0. Interpolate it inside :is() - never as a bare comma list, which
+// breaks out of its context (see $_bar in components/_navbar).
+$icon: ":is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons)" !default;
+
+// The label beside an icon: any span that is not itself an icon.
+$icon-label: "span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)" !default;
+
 // Colors
 //
 // The 2014 Material palette ($colors + colorFunc()) is gone. It generated 532
@@ -38,7 +53,7 @@ $menu-item-height: 50px !default;
 
 // Media query ranges now live in abstracts/_breakpoints.scss, which states
 // each boundary once and emits range syntax - see the note there about why
-// the 600.99px / 992.99px / 1200.99px values are gone.
+// the old fractional max-width values are gone.
 
 // Grid
 $gutter-width: 1.5rem !default;
@@ -46,12 +61,22 @@ $element-top-margin: math.div($gutter-width, 3) !default;
 $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
 
 // Typography
-$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+// M3's typeface tokens choose Roboto by default. Noto Sans is the first
+// fallback so unsupported scripts keep a compatible visual style.
+$font-stack: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback) !default;
+
+// Self-hosted woff2 directory, relative to the compiled CSS file. The npm
+// build writes CSS to dist/css/ and fonts to dist/fonts/. Override when
+// compiling Sass to a different location. Set $expressive-include-fonts to
+// false to emit no @font-face rules (for example when the page already
+// loads these families from elsewhere).
+$expressive-font-path: "../fonts" !default;
+$expressive-include-fonts: true !default;
 $text-color: var(--md-sys-color-on-background) !default;
 
-// Base of the html font-size ladder in base/_typography.scss. Flow text is
-// derived from it, so the two cannot drift.
-$root-font-size: 14px !default;
+// Modern browsers default to 16px. M3's web conversion is SP_SIZE / 16 = rem;
+// flow text uses the same basis without overriding the user's browser setting.
+$root-font-size: 16px !default;
 
 // Flow text: font-size interpolates between these two across the viewport
 // range below. This used to be a @while loop emitting 21 media queries.
@@ -59,3 +84,42 @@ $flow-text-min: 1.2rem !default;
 $flow-text-max: 1.68rem !default;   // the old loop's ceiling: 1.2rem * (1 + .02 * 20)
 $flow-text-from: 360px !default;
 $flow-text-to: 960px !default;      // the old loop's last step: 360px + 20 * 30px
+
+// The common-button size axis, md.comp.button.{xsmall…xlarge} (DSP 34.0.21).
+//
+//   size     height  icon  space  gap  label            outline
+//   xsmall     32     20     12     8   label-large        1
+//   small      40     20     16     8   label-large        1   <- default
+//   medium     56     24     24     8   title-medium       1
+//   large      96     32     48    12   headline-small     2
+//   xlarge    136     40     64    16   headline-large     3
+//
+// `space` is both the leading and the trailing inset. Expressive dropped the
+// old "24dp, but 16dp next to an icon" asymmetry, so a button is symmetric at
+// every size, whatever is inside it. The round shape is corner.full at every
+// size, so it is declared once by the component rather than five times here.
+// `outline` is the one number the style axis reads back: M3 thickens an
+// outlined button's border with its size.
+//
+// It lives in abstracts because two components read it - `_buttons.scss` for
+// the size classes, `_button-groups.scss` to size the items of a group from
+// the group itself. A partial may not @use another partial, so a table two of
+// them share has to be here.
+$button-sizes: (
+  "xsmall": (height: 32px, icon: 20px, space: 12px, gap: 8px, outline: 1px, label: "label-large"),
+  "small": (height: 40px, icon: 20px, space: 16px, gap: 8px, outline: 1px, label: "label-large"),
+  "medium": (height: 56px, icon: 24px, space: 24px, gap: 8px, outline: 1px, label: "title-medium"),
+  "large": (height: 96px, icon: 32px, space: 48px, gap: 12px, outline: 2px, label: "headline-small"),
+  "xlarge": (height: 136px, icon: 40px, space: 64px, gap: 16px, outline: 3px, label: "headline-large"),
+);
+
+// Icon-button geometry is shared with button groups. A group-size class must
+// reach both common buttons and icon buttons without asking authors to repeat
+// the size on every child.
+$icon-button-sizes: (
+  "xsmall": (height: 32px, icon: 20px, space: 6px, narrow: 4px, wide: 10px, square: 12px, pressed: 8px, outline: 1px),
+  "small": (height: 40px, icon: 24px, space: 8px, narrow: 4px, wide: 14px, square: 12px, pressed: 8px, outline: 1px),
+  "medium": (height: 56px, icon: 24px, space: 16px, narrow: 12px, wide: 24px, square: 16px, pressed: 12px, outline: 1px),
+  "large": (height: 96px, icon: 32px, space: 32px, narrow: 16px, wide: 48px, square: 28px, pressed: 16px, outline: 2px),
+  "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
+);

package/src/sass/base/_fonts.scss

@@ -0,0 +1,63 @@
+@use "../abstracts" as *;
+
+// Self-hosted faces for the families the tokens and icon classes name.
+// Unlayered on purpose: @font-face inside a cascade layer is unreliable.
+// $expressive-font-path is relative to the compiled CSS (dist/css -> dist/fonts).
+
+@if $expressive-include-fonts {
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-outlined.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Material Symbols Rounded";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-rounded.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Material Symbols Sharp";
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src: url("#{$expressive-font-path}/material-symbols-sharp.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/roboto-latin-400.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/roboto-latin-500.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Noto Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/noto-sans-latin-400.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Noto Sans";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("#{$expressive-font-path}/noto-sans-latin-500.woff2") format("woff2");
+  }
+}

package/src/sass/base/_global.scss

@@ -35,30 +35,13 @@ a {
 //  Blockquote
 blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
 
-// Icon Styles
+// <i> as an element - italics. The icon modifiers (.left, .right, .tiny ..)
+// used to live here, keyed on `i`, which silently tied them to one element:
+// writing an icon as the canonical <span class="material-symbols"> dropped
+// them. They now hang off the icon class list in components/_icons-material-design,
+// where the size modifiers already were, so they follow the class instead.
 i {
   line-height: inherit;
-  &.left {
-    float: left;
-    margin-left: -8px;
-    // margin-right: 15px;
-  }
-  &.right {
-    float: right;
-    // margin-left: 15px;
-  }
-  &.tiny {
-    font-size: 1rem;
-  }
-  &.small {
-    font-size: 2rem;
-  }
-  &.medium {
-    font-size: 4rem;
-  }
-  &.large {
-    font-size: 6rem;
-  }
 }
 
 // Tables
@@ -113,7 +96,7 @@ td, th {
 }
 
 // Responsive Table
-@include bp-down("large") {
+@include bp-down("expanded") {
 
   table.responsive-table {
     width: 100%;
@@ -178,4 +161,3 @@ td, th {
     }
   }
 }
-