@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/defaults.css

@@ -1,4 +1,5 @@
-@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+@layer rc-base, rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.native, rc-theme-material.components, rc-theme-material.css-components,
+  rc-theme-material.overrides;
 
 @layer rc-theme-material.defaults {
   /*
@@ -149,10 +150,22 @@
     --md-ref-palette-neutral-variant100: #ffffffff;
     /* Neutral 0 */
     --md-ref-palette-neutral0: #000000ff;
+    /* Neutral 4 */
+    --md-ref-palette-neutral4: #0f0e11ff;
+    /* Neutral 6 */
+    --md-ref-palette-neutral6: #141317ff;
     /* Neutral 10 */
     --md-ref-palette-neutral10: #1c1b1fff;
+    /* Neutral 12 */
+    --md-ref-palette-neutral12: #211f23ff;
+    /* Neutral 17 */
+    --md-ref-palette-neutral17: #2b292eff;
     /* Neutral 20 */
     --md-ref-palette-neutral20: #313033ff;
+    /* Neutral 22 */
+    --md-ref-palette-neutral22: #363438ff;
+    /* Neutral 24 */
+    --md-ref-palette-neutral24: #3b383dff;
     /* Neutral 30 */
     --md-ref-palette-neutral30: #484649ff;
     /* Neutral 40 */
@@ -165,10 +178,20 @@
     --md-ref-palette-neutral70: #aeaaaeff;
     /* Neutral 80 */
     --md-ref-palette-neutral80: #c9c5caff;
+    /* Neutral 87 */
+    --md-ref-palette-neutral87: #ded8deff;
     /* Neutral 90 */
     --md-ref-palette-neutral90: #e6e1e5ff;
+    /* Neutral 92 */
+    --md-ref-palette-neutral92: #ece6ecff;
+    /* Neutral 94 */
+    --md-ref-palette-neutral94: #f2ecf2ff;
     /* Neutral 95 */
     --md-ref-palette-neutral95: #f4eff4ff;
+    /* Neutral 96 */
+    --md-ref-palette-neutral96: #f8f2f8ff;
+    /* Neutral 98 */
+    --md-ref-palette-neutral98: #fdf8fdff;
     /* Neutral 99 */
     --md-ref-palette-neutral99: #fffbfeff;
     /* Neutral 100 */
@@ -496,9 +519,9 @@
     /* Display Large font name */
     --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
     /* Plain typeface */
-    --md-ref-typeface-plain: Roboto;
+    --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
     /* Brand typeface */
-    --md-ref-typeface-brand: Roboto;
+    --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
     /* Bold weight */
     --md-ref-typeface-weight-bold: 700;
     /* Medium weight */
@@ -645,6 +668,77 @@
     /* Motion path */
     --md-sys-motion-path-standard-path: 1;
 
+    /*
+     * Repo-authored composites, not vendored. The tokens above are the raw
+     * control points and millisecond primitives material-tokens ships;
+     * nothing composes them into a usable `cubic-bezier()` or names the
+     * duration bands the Material 3 motion spec actually refers to, so any
+     * component or bridge rule reaching for one directly resolved to
+     * nothing. Each alias below is assembled from those primitives; see
+     * defaults.test.ts for the full set this asserts, so a future re-vendor
+     * that drops or renames a primitive fails a test instead of silently
+     * breaking every alias that composes it.
+     */
+    --md-sys-motion-easing-standard: cubic-bezier(
+      var(--md-sys-motion-easing-standard-x0),
+      var(--md-sys-motion-easing-standard-y0),
+      var(--md-sys-motion-easing-standard-x1),
+      var(--md-sys-motion-easing-standard-y1)
+    );
+    --md-sys-motion-easing-standard-decelerate: cubic-bezier(
+      var(--md-sys-motion-easing-standard-decelerate-x0),
+      var(--md-sys-motion-easing-standard-decelerate-y0),
+      var(--md-sys-motion-easing-standard-decelerate-x1),
+      var(--md-sys-motion-easing-standard-decelerate-y1)
+    );
+    --md-sys-motion-easing-standard-accelerate: cubic-bezier(
+      var(--md-sys-motion-easing-standard-accelerate-x0),
+      var(--md-sys-motion-easing-standard-accelerate-y0),
+      var(--md-sys-motion-easing-standard-accelerate-x1),
+      var(--md-sys-motion-easing-standard-accelerate-y1)
+    );
+    --md-sys-motion-easing-emphasized: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-x0),
+      var(--md-sys-motion-easing-emphasized-y0),
+      var(--md-sys-motion-easing-emphasized-x1),
+      var(--md-sys-motion-easing-emphasized-y1)
+    );
+    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-decelerate-x0),
+      var(--md-sys-motion-easing-emphasized-decelerate-y0),
+      var(--md-sys-motion-easing-emphasized-decelerate-x1),
+      var(--md-sys-motion-easing-emphasized-decelerate-y1)
+    );
+    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-accelerate-x0),
+      var(--md-sys-motion-easing-emphasized-accelerate-y0),
+      var(--md-sys-motion-easing-emphasized-accelerate-x1),
+      var(--md-sys-motion-easing-emphasized-accelerate-y1)
+    );
+    --md-sys-motion-easing-linear: cubic-bezier(
+      var(--md-sys-motion-easing-linear-x0),
+      var(--md-sys-motion-easing-linear-y0),
+      var(--md-sys-motion-easing-linear-x1),
+      var(--md-sys-motion-easing-linear-y1)
+    );
+    /* Duration bands, named per the Material 3 motion spec. */
+    --md-sys-motion-duration-short1: var(--md-sys-motion-duration-50);
+    --md-sys-motion-duration-short2: var(--md-sys-motion-duration-100);
+    --md-sys-motion-duration-short3: var(--md-sys-motion-duration-150);
+    --md-sys-motion-duration-short4: var(--md-sys-motion-duration-200);
+    --md-sys-motion-duration-medium1: var(--md-sys-motion-duration-250);
+    --md-sys-motion-duration-medium2: var(--md-sys-motion-duration-300);
+    --md-sys-motion-duration-medium3: var(--md-sys-motion-duration-350);
+    --md-sys-motion-duration-medium4: var(--md-sys-motion-duration-400);
+    --md-sys-motion-duration-long1: var(--md-sys-motion-duration-450);
+    --md-sys-motion-duration-long2: var(--md-sys-motion-duration-500);
+    --md-sys-motion-duration-long3: var(--md-sys-motion-duration-550);
+    --md-sys-motion-duration-long4: var(--md-sys-motion-duration-600);
+    --md-sys-motion-duration-extra-long1: var(--md-sys-motion-duration-700);
+    --md-sys-motion-duration-extra-long2: var(--md-sys-motion-duration-800);
+    --md-sys-motion-duration-extra-long3: var(--md-sys-motion-duration-900);
+    --md-sys-motion-duration-extra-long4: var(--md-sys-motion-duration-1000);
+
     /* State tokens */
     /* Dragged state layer opacity */
     --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
@@ -654,6 +748,15 @@
     --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
     /* Hover state layer opacity */
     --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
+    /*
+     * Disabled state layer and container opacity were missing from this
+     * vendored snapshot even though a dozen component recipes already
+     * referenced them with an inline `0.38` fallback; every reference
+     * silently used that literal instead of these tokens. 0.38 is the
+     * published Material 3 constant for both.
+     */
+    --md-sys-state-disabled-state-layer-opacity: 0.38;
+    --md-sys-state-disabled-container-opacity: 0.38;
 
     /* Elevation tokens */
     /* Surface tint color */
@@ -723,8 +826,18 @@
       var(--md-ref-palette-tertiary40),
       var(--md-ref-palette-tertiary80)
     );
+    /* Tertiary fixed — persistent color, same value in both themes */
+    --md-sys-color-tertiary-fixed: var(--md-ref-palette-tertiary90);
+    /* On tertiary fixed */
+    --md-sys-color-on-tertiary-fixed: var(--md-ref-palette-tertiary10);
+    /* Tertiary fixed dim */
+    --md-sys-color-tertiary-fixed-dim: var(--md-ref-palette-tertiary80);
+    /* On tertiary fixed variant */
+    --md-sys-color-on-tertiary-fixed-variant: var(--md-ref-palette-tertiary30);
     /* Shadow */
     --md-sys-color-shadow: var(--md-ref-palette-neutral0);
+    /* Scrim */
+    --md-sys-color-scrim: var(--md-ref-palette-neutral0);
     /* Error */
     --md-sys-color-error: light-dark(var(--md-ref-palette-error40), var(--md-ref-palette-error80));
     /* Outline */
@@ -732,6 +845,11 @@
       var(--md-ref-palette-neutral-variant50),
       var(--md-ref-palette-neutral-variant60)
     );
+    /* Outline variant */
+    --md-sys-color-outline-variant: light-dark(
+      var(--md-ref-palette-neutral-variant80),
+      var(--md-ref-palette-neutral-variant30)
+    );
     /* On background */
     --md-sys-color-on-background: light-dark(
       var(--md-ref-palette-neutral10),
@@ -739,8 +857,8 @@
     );
     /* Background */
     --md-sys-color-background: light-dark(
-      var(--md-ref-palette-neutral99),
-      var(--md-ref-palette-neutral10)
+      var(--md-ref-palette-neutral98),
+      var(--md-ref-palette-neutral6)
     );
     /* Inverse on surface */
     --md-sys-color-inverse-on-surface: light-dark(
@@ -767,35 +885,45 @@
       var(--md-ref-palette-neutral-variant90),
       var(--md-ref-palette-neutral-variant30)
     );
+    /* Surface dim */
+    --md-sys-color-surface-dim: light-dark(
+      var(--md-ref-palette-neutral87),
+      var(--md-ref-palette-neutral6)
+    );
     /* Surface */
     --md-sys-color-surface: light-dark(
-      var(--md-ref-palette-neutral99),
-      var(--md-ref-palette-neutral10)
+      var(--md-ref-palette-neutral98),
+      var(--md-ref-palette-neutral6)
+    );
+    /* Surface bright */
+    --md-sys-color-surface-bright: light-dark(
+      var(--md-ref-palette-neutral98),
+      var(--md-ref-palette-neutral24)
     );
     /* Surface container lowest (near-white / near-black) */
     --md-sys-color-surface-container-lowest: light-dark(
       var(--md-ref-palette-neutral100),
-      var(--md-ref-palette-neutral10)
+      var(--md-ref-palette-neutral4)
     );
     /* Surface container low */
     --md-sys-color-surface-container-low: light-dark(
-      var(--md-ref-palette-neutral99),
+      var(--md-ref-palette-neutral96),
       var(--md-ref-palette-neutral10)
     );
     /* Surface container — used for menus, sheets, and elevated surfaces */
     --md-sys-color-surface-container: light-dark(
-      var(--md-ref-palette-neutral95),
-      var(--md-ref-palette-neutral20)
+      var(--md-ref-palette-neutral94),
+      var(--md-ref-palette-neutral12)
     );
     /* Surface container high */
     --md-sys-color-surface-container-high: light-dark(
-      var(--md-ref-palette-neutral90),
-      var(--md-ref-palette-neutral20)
+      var(--md-ref-palette-neutral92),
+      var(--md-ref-palette-neutral17)
     );
     /* Surface container highest — used for text fields and chips */
     --md-sys-color-surface-container-highest: light-dark(
       var(--md-ref-palette-neutral90),
-      var(--md-ref-palette-neutral20)
+      var(--md-ref-palette-neutral22)
     );
     /* On secondary container */
     --md-sys-color-on-secondary-container: light-dark(
@@ -817,6 +945,14 @@
       var(--md-ref-palette-secondary40),
       var(--md-ref-palette-secondary80)
     );
+    /* Secondary fixed — persistent color, same value in both themes */
+    --md-sys-color-secondary-fixed: var(--md-ref-palette-secondary90);
+    /* On secondary fixed */
+    --md-sys-color-on-secondary-fixed: var(--md-ref-palette-secondary10);
+    /* Secondary fixed dim */
+    --md-sys-color-secondary-fixed-dim: var(--md-ref-palette-secondary80);
+    /* On secondary fixed variant */
+    --md-sys-color-on-secondary-fixed-variant: var(--md-ref-palette-secondary30);
     /* Inverse primary */
     --md-sys-color-inverse-primary: light-dark(
       var(--md-ref-palette-primary80),
@@ -842,18 +978,191 @@
       var(--md-ref-palette-primary40),
       var(--md-ref-palette-primary80)
     );
+    /* Primary fixed — persistent color, same value in both themes */
+    --md-sys-color-primary-fixed: var(--md-ref-palette-primary90);
+    /* On primary fixed */
+    --md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10);
+    /* Primary fixed dim */
+    --md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80);
+    /* On primary fixed variant */
+    --md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30);
+  }
+
+  /*
+   * Forced-colors (Windows High Contrast) coverage for every role defined
+   * above. Deliberately collapses to a few tiers rather than one system
+   * color per role: forced-colors mode exists to strip semantic hue in
+   * favor of the user's chosen palette, so distinguishing e.g. tertiary
+   * from error by color here would work against that intent.
+   *   - True accent (primary and its container/fixed/inverse variants):
+   *     a Highlight fill with HighlightText content, everywhere.
+   *   - Secondary emphasis (secondary, tertiary, error, and each one's
+   *     container/fixed variants): styled as a plain control instead of
+   *     color-coded by family. The "plain" role in each triple (secondary,
+   *     tertiary, error) is also the one components use as a fill for
+   *     their own filled variant (see rc-button's danger/filled styling),
+   *     so it takes the fill/content pairing ButtonText fill with
+   *     ButtonFace content; the *-container/*-fixed roles are always
+   *     read as a soft background, so they get the inverse pairing:
+   *     ButtonFace fill with ButtonText content.
+   *   - Surfaces (background/surface and every container/dim/bright
+   *     tier, surface-variant): a Canvas fill with CanvasText content,
+   *     except surface-container-highest which stays Field (text
+   *     fields, chips).
+   *   - Borders: ButtonBorder.
+   * Elevation shadows are zeroed throughout, since tonal/shadow elevation
+   * isn't part of the forced-colors palette either.
+   */
+
+  /*
+   * Scoped type scale. An element marked data-rc-type-scale multiplies every
+   * Material type size and line height beneath it by --rc-type-scale
+   * (default 1), for a region such as a hands-busy reading view that needs
+   * larger text than the rest of the page. Tokens set on the theme root are
+   * resolved there, so the scaled values are derived again on the marked
+   * element; bridge.css does the same for the RC text tokens built on them.
+   */
+  /* A marked theme root itself must outrank its own token rule above. */
+  :where(.rc-theme-material [data-rc-type-scale], :host(.rc-theme-material) [data-rc-type-scale]),
+  .rc-theme-material[data-rc-type-scale],
+  :host(.rc-theme-material[data-rc-type-scale]) {
+    --md-sys-typescale-display-large-size: calc(
+      var(--md-sys-typescale-display-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-large-line-height: calc(
+      var(--md-sys-typescale-display-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-medium-size: calc(
+      var(--md-sys-typescale-display-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-medium-line-height: calc(
+      var(--md-sys-typescale-display-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-small-size: calc(
+      var(--md-sys-typescale-display-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-small-line-height: calc(
+      var(--md-sys-typescale-display-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-large-size: calc(
+      var(--md-sys-typescale-headline-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-large-line-height: calc(
+      var(--md-sys-typescale-headline-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-medium-size: calc(
+      var(--md-sys-typescale-headline-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-medium-line-height: calc(
+      var(--md-sys-typescale-headline-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-small-size: calc(
+      var(--md-sys-typescale-headline-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-small-line-height: calc(
+      var(--md-sys-typescale-headline-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-large-size: calc(
+      var(--md-sys-typescale-title-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-large-line-height: calc(
+      var(--md-sys-typescale-title-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-medium-size: calc(
+      var(--md-sys-typescale-title-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-medium-line-height: calc(
+      var(--md-sys-typescale-title-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-small-size: calc(
+      var(--md-sys-typescale-title-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-small-line-height: calc(
+      var(--md-sys-typescale-title-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-large-size: calc(
+      var(--md-sys-typescale-body-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-large-line-height: calc(
+      var(--md-sys-typescale-body-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-medium-size: calc(
+      var(--md-sys-typescale-body-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-medium-line-height: calc(
+      var(--md-sys-typescale-body-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-small-size: calc(
+      var(--md-sys-typescale-body-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-small-line-height: calc(
+      var(--md-sys-typescale-body-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-large-size: calc(
+      var(--md-sys-typescale-label-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-large-line-height: calc(
+      var(--md-sys-typescale-label-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-medium-size: calc(
+      var(--md-sys-typescale-label-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-medium-line-height: calc(
+      var(--md-sys-typescale-label-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-small-size: calc(
+      var(--md-sys-typescale-label-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-small-line-height: calc(
+      var(--md-sys-typescale-label-small-line-height-value) * var(--rc-type-scale, 1)
+    );
   }
 
   @media (forced-colors: active) {
     .rc-theme-material,
     :host(.rc-theme-material) {
+      /* Accent tier */
       --md-sys-color-primary: Highlight;
       --md-sys-color-on-primary: HighlightText;
       --md-sys-color-primary-container: Highlight;
       --md-sys-color-on-primary-container: HighlightText;
+      --md-sys-color-primary-fixed: Highlight;
+      --md-sys-color-primary-fixed-dim: Highlight;
+      --md-sys-color-on-primary-fixed: HighlightText;
+      --md-sys-color-on-primary-fixed-variant: HighlightText;
+      --md-sys-color-inverse-primary: Canvas;
+
+      /* Secondary-emphasis tier: secondary, tertiary, and error all
+         styled as plain controls rather than color-coded */
+      --md-sys-color-secondary: ButtonText;
+      --md-sys-color-on-secondary: ButtonFace;
       --md-sys-color-secondary-container: ButtonFace;
       --md-sys-color-on-secondary-container: ButtonText;
+      --md-sys-color-secondary-fixed: ButtonFace;
+      --md-sys-color-secondary-fixed-dim: ButtonFace;
+      --md-sys-color-on-secondary-fixed: ButtonText;
+      --md-sys-color-on-secondary-fixed-variant: ButtonText;
+      --md-sys-color-tertiary: ButtonText;
+      --md-sys-color-on-tertiary: ButtonFace;
+      --md-sys-color-tertiary-container: ButtonFace;
+      --md-sys-color-on-tertiary-container: ButtonText;
+      --md-sys-color-tertiary-fixed: ButtonFace;
+      --md-sys-color-tertiary-fixed-dim: ButtonFace;
+      --md-sys-color-on-tertiary-fixed: ButtonText;
+      --md-sys-color-on-tertiary-fixed-variant: ButtonText;
+      --md-sys-color-error: ButtonText;
+      --md-sys-color-on-error: ButtonFace;
+      --md-sys-color-error-container: ButtonFace;
+      --md-sys-color-on-error-container: ButtonText;
+
+      /* Surface tier */
+      --md-sys-color-background: Canvas;
+      --md-sys-color-on-background: CanvasText;
       --md-sys-color-surface: Canvas;
+      --md-sys-color-surface-variant: Canvas;
+      --md-sys-color-surface-dim: Canvas;
+      --md-sys-color-surface-bright: Canvas;
+      --md-sys-color-surface-container-lowest: Canvas;
       --md-sys-color-surface-container-low: Canvas;
       --md-sys-color-surface-container: Canvas;
       --md-sys-color-surface-container-high: Canvas;
@@ -862,11 +1171,17 @@
       --md-sys-color-on-surface-variant: CanvasText;
       --md-sys-color-inverse-surface: CanvasText;
       --md-sys-color-inverse-on-surface: Canvas;
+
+      /* Borders */
       --md-sys-color-outline: ButtonBorder;
       --md-sys-color-outline-variant: ButtonBorder;
+
+      /* Elevation: shadows carry no meaning under forced colors */
       --md-sys-elevation-level1: 0px;
       --md-sys-elevation-level2: 0px;
       --md-sys-elevation-level3: 0px;
+      --md-sys-elevation-level4: 0px;
+      --md-sys-elevation-level5: 0px;
     }
   }
 }