@omni-design/components 0.12.0 → 0.13.0

package/public/styles/Dark-Mode.css

@@ -170,6 +170,8 @@ body { margin: 0; }
  * ======================================== */
 
 /* Theme: Default - Surfaces */
+:root,
+[data-surface="Surface"],
 [data-theme="Default"],
 [data-theme="Default"][data-surface="Surface"] {
   --Background: var(--Neutral-Color-1);
@@ -338,6 +340,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Dim */
+[data-surface="Surface-Dim"],
 [data-theme="Default"] [data-surface="Surface-Dim"],
 [data-theme="Default"][data-surface="Surface-Dim"] {
   --Background: var(--Neutral-Color-1);
@@ -506,6 +509,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Dimmest */
+[data-surface="Surface-Dimmest"],
 [data-theme="Default"] [data-surface="Surface-Dimmest"],
 [data-theme="Default"][data-surface="Surface-Dimmest"] {
   --Background: var(--Neutral-Color-3);
@@ -674,6 +678,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Bright */
+[data-surface="Surface-Bright"],
 [data-theme="Default"] [data-surface="Surface-Bright"],
 [data-theme="Default"][data-surface="Surface-Bright"] {
   --Background: var(--Neutral-Color-3);
@@ -842,6 +847,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Brightest */
+[data-surface="Surface-Brightest"],
 [data-theme="Default"] [data-surface="Surface-Brightest"],
 [data-theme="Default"][data-surface="Surface-Brightest"] {
   --Background: var(--Neutral-Color-11);

package/public/styles/Light-Mode.css

@@ -170,6 +170,8 @@ body { margin: 0; }
  * ======================================== */
 
 /* Theme: Default - Surfaces */
+:root,
+[data-surface="Surface"],
 [data-theme="Default"],
 [data-theme="Default"][data-surface="Surface"] {
   --Background: var(--Neutral-Color-12);
@@ -347,6 +349,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Dim */
+[data-surface="Surface-Dim"],
 [data-theme="Default"] [data-surface="Surface-Dim"],
 [data-theme="Default"][data-surface="Surface-Dim"] {
   --Background: var(--Neutral-Color-11);
@@ -524,6 +527,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Dimmest */
+[data-surface="Surface-Dimmest"],
 [data-theme="Default"] [data-surface="Surface-Dimmest"],
 [data-theme="Default"][data-surface="Surface-Dimmest"] {
   --Background: var(--Neutral-Color-3);
@@ -701,6 +705,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Bright */
+[data-surface="Surface-Bright"],
 [data-theme="Default"] [data-surface="Surface-Bright"],
 [data-theme="Default"][data-surface="Surface-Bright"] {
   --Background: var(--Neutral-Color-12);
@@ -878,6 +883,7 @@ body { margin: 0; }
 }
 
 /* Theme: Default - Surfaces-Brightest */
+[data-surface="Surface-Brightest"],
 [data-theme="Default"] [data-surface="Surface-Brightest"],
 [data-theme="Default"][data-surface="Surface-Brightest"] {
   --Background: var(--Neutral-Color-12);

package/public/styles/base.css

@@ -295,6 +295,9 @@
   --Dropdown-Frame-Radius: 2px;
   --Menu-Item-Radius: 0px;
   --Menu-Focus-Radius: 0px;
+  --Sm-Menu-Swatch: 16px;
+  --Menu-Swatch: 24px;
+  --Lg-Menu-Swatch: 32px;
   --Disabled: 0.38;
   --Rail-Width: 80px;
   --Sm-Rail-Width: 72px;
@@ -426,18 +429,38 @@
   --Background: var(--Container);
 }
 
+[data-theme][data-surface="Container"] {
+  --Background: var(--Container);
+}
+
 [data-surface="Container-Low"] {
   --Background: var(--Container-Low);
 }
 
+[data-theme][data-surface="Container-Low"] {
+  --Background: var(--Container-Low);
+}
+
 [data-surface="Container-Lowest"] {
   --Background: var(--Container-Lowest);
 }
 
+[data-theme][data-surface="Container-Lowest"] {
+  --Background: var(--Container-Lowest);
+}
+
 [data-surface="Container-High"] {
   --Background: var(--Container-High);
 }
 
+[data-theme][data-surface="Container-High"] {
+  --Background: var(--Container-High);
+}
+
 [data-surface="Container-Highest"] {
   --Background: var(--Container-Highest);
 }
+
+[data-theme][data-surface="Container-Highest"] {
+  --Background: var(--Container-Highest);
+}

package/public/styles/core.css

@@ -23,7 +23,7 @@
 }
 
 /* Platform Font Overrides */
-[data-platform="IOS-Mobile"][data-fonts] {
+[data-device="IOS-Mobile"][data-fonts] {
   --Body-Font-Family: var(--Set-Font-Family-Body);
   --Header-Font-Family: var(--Set-Font-Family-Header);
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -33,7 +33,7 @@
   --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
   --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
 }
-[data-platform="IOS-Tablet"][data-fonts] {
+[data-device="IOS-Tablet"][data-fonts] {
   --Body-Font-Family: var(--Set-Font-Family-Body);
   --Header-Font-Family: var(--Set-Font-Family-Header);
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -43,7 +43,7 @@
   --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
   --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
 }
-[data-platform="Android"][data-fonts] {
+[data-device="Android"][data-fonts] {
   --Body-Font-Family: var(--Set-Font-Family-Body);
   --Header-Font-Family: var(--Set-Font-Family-Header);
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -54,7 +54,7 @@
   --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
 }
 
-[data-platform="IOS-Mobile"][data-fonts="Default"] {
+[data-device="IOS-Mobile"][data-fonts="Default"] {
   --Body-Font-Family: "SF Pro";
   --Header-Font-Family: "SF Pro";
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -64,7 +64,7 @@
   --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
   --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
 }
-[data-platform="IOS-Tablet"][data-fonts="Default"] {
+[data-device="IOS-Tablet"][data-fonts="Default"] {
   --Body-Font-Family: "SF Pro";
   --Header-Font-Family: "SF Pro";
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -74,7 +74,7 @@
   --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
   --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
 }
-[data-platform="Android"][data-fonts="Default"] {
+[data-device="Android"][data-fonts="Default"] {
   --Body-Font-Family: "Roboto";
   --Header-Font-Family: "Roboto";
   --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
@@ -113,7 +113,7 @@
   --Body-Line-Height: 24px;
   --Body-Paragraph-Spacing: 16px;
   /* Per-style ramp — generated from the same type scale that produces
-     typography-tokens.css, so a consumer that never sets data-platform gets
+     typography-tokens.css, so a consumer that never sets data-device gets
      the identical Desktop values. Editing sizes here is wrong; edit
      src/utils/typeScale.ts. */
   /* Faces */
@@ -130,12 +130,12 @@
   --Header-Clamped-Weight: 640;
 
   /* Variable-font axes */
-  --Font-Grade-Header: 50;
   --Font-Slant-Header: 0;
+  --Font-Grade-Header: 50;
+  --Font-Width-Header: 72;
   --Font-Roundness-Header: 0;
   --Font-Optical-Size-Header: 96;
-  --Font-Width-Header: 72;
-  --Font-Variation-Header: "GRAD" var(--Font-Grade-Header), "slnt" var(--Font-Slant-Header), "ROND" var(--Font-Roundness-Header), "opsz" var(--Font-Optical-Size-Header), "wdth" var(--Font-Width-Header);
+  --Font-Variation-Header: "slnt" var(--Font-Slant-Header), "GRAD" var(--Font-Grade-Header), "wdth" var(--Font-Width-Header), "ROND" var(--Font-Roundness-Header), "opsz" var(--Font-Optical-Size-Header);
 
   /* Display — Large and Medium belong in Header or Hero areas. Small is the one sized to sit inside a component — a card title, a stat, a pull quote. */
   --Display-Large-Font-Family:   var(--Font-Family-Display);
@@ -441,7 +441,7 @@
   --Button-Line-Height: 20px;
   /* Bevel geometry for ALL THREE sizes — derived from THIS platform's button
      heights, which is why it lives beside them rather than in foundation.css.
-     Each [data-platform] block below re-emits all three for its own heights.
+     Each [data-device] block below re-emits all three for its own heights.
      It used to re-emit the MEDIUM set only, so a small or large button wore
      Desktop's bevel on every platform. */
   --Button-Highlight-Offset-x: 0px;
@@ -483,7 +483,7 @@
 }
 
 /* iOS Mobile */
-[data-platform="IOS-Mobile"] {
+[data-device="IOS-Mobile"] {
   --Container-Padding: var(--Sizing-2);
   --Platform-Label: "IOS-Mobile";
   --Button-Height: 44px;
@@ -555,7 +555,7 @@
 }
 
 /* iOS Tablet */
-[data-platform="IOS-Tablet"] {
+[data-device="IOS-Tablet"] {
   --Container-Padding: var(--Sizing-3);
   --Platform-Label: "IOS-Tablet";
   --Button-Height: 44px;
@@ -626,8 +626,87 @@
   --Button-Line-Height: 21px;
 }
 
-/* Android */
-[data-platform="Android"] {
+/* Android, a block each.
+   Android-Tablet and Android-Mobile carry identical METRICS — Figma gives
+   both a 48px button and a 12px spacer — so these two blocks hold the same
+   values. They are written separately rather than sharing a selector list
+   because every other platform has a block of its own, and a reader checking
+   "is this platform covered" should find one answer in one shape. The two
+   exist as separate devices because TYPOGRAPHY differs between them. */
+/* Android tablet */
+[data-device="Android-Tablet"] {
+  --Container-Padding: var(--Sizing-2);
+  --Platform-Label: "Android";
+  --Button-Height: 48px;
+  --Min-Stack-Gap: 12px;
+  --Button-Highlight-Offset-x: 0px;
+  --Button-Highlight-Offset-y: 0px;
+  --Button-Highlight-Blur-Radius: 0px;
+  --Button-Highlight-Spread: 0px;
+  --Button-Lowlight-Offset-x: 0px;
+  --Button-Lowlight-Offset-y: 0px;
+  --Button-Lowlight-Blur-Radius: 0px;
+  --Button-Lowlight-Spread: 0px;
+  --Sm-Button-Highlight-Offset-x: 0px;
+  --Sm-Button-Highlight-Offset-y: 0px;
+  --Sm-Button-Highlight-Blur-Radius: 0px;
+  --Sm-Button-Highlight-Spread: 0px;
+  --Sm-Button-Lowlight-Offset-x: 0px;
+  --Sm-Button-Lowlight-Offset-y: 0px;
+  --Sm-Button-Lowlight-Blur-Radius: 0px;
+  --Sm-Button-Lowlight-Spread: 0px;
+  --Lg-Button-Highlight-Offset-x: 0px;
+  --Lg-Button-Highlight-Offset-y: 0px;
+  --Lg-Button-Highlight-Blur-Radius: 0px;
+  --Lg-Button-Highlight-Spread: 0px;
+  --Lg-Button-Lowlight-Offset-x: 0px;
+  --Lg-Button-Lowlight-Offset-y: 0px;
+  --Lg-Button-Lowlight-Blur-Radius: 0px;
+  --Lg-Button-Lowlight-Spread: 0px;
+  --Target: 48px;
+  --Platform-Spacer: 12px;
+  /* Floating overlays — the platform's chrome plus room for a shadow */
+  --SnackBar-Top: 112px;
+  --SnackBar-Bottom: 48px;
+  --Overlay-Clearance: 24px;
+  --Body-Font-Size: 16px;
+  --Body-Line-Height: 24px;
+  --Body-Letter-Spacing: .5px;
+  --Body-Paragraph-Spacing: 16px;
+  --H1-Font-Size: 36px;
+  --H1-Line-Height: 40px;
+  --H1-Letter-Spacing: -.5px;
+  --H1-Paragraph-Spacing: 20px;
+  --H2-Font-Size: 28px;
+  --H2-Line-Height: 36px;
+  --H2-Letter-Spacing: -.5px;
+  --H2-Paragraph-Spacing: 20px;
+  --H3-Font-Size: 24px;
+  --H3-Line-Height: 32px;
+  --H3-Letter-Spacing: 0px;
+  --H3-Paragraph-Spacing: 16px;
+  --H4-Font-Size: 20px;
+  --H4-Line-Height: 28px;
+  --H4-Letter-Spacing: 0px;
+  --H4-Paragraph-Spacing: 12px;
+  --H5-Font-Size: 18px;
+  --H5-Line-Height: 26px;
+  --H5-Letter-Spacing: 0px;
+  --H5-Paragraph-Spacing: 12px;
+  --H6-Font-Size: 16px;
+  --H6-Line-Height: 24px;
+  --H6-Letter-Spacing: .5px;
+  --H6-Paragraph-Spacing: 8px;
+  --Label-Font-Size: 13px;
+  --Label-Line-Height: 18px;
+  --Label-Letter-Spacing: 0px;
+  --Label-Paragraph-Spacing: 4px;
+  --Button-Font-Size: 16px;
+  --Button-Line-Height: 20px;
+}
+
+/* Android phone */
+[data-device="Android-Mobile"] {
   --Container-Padding: var(--Sizing-2);
   --Platform-Label: "Android";
   --Button-Height: 48px;

package/public/styles/foundation.css

@@ -5,6 +5,24 @@
 
 :root {
 
+  /* ── The brand's CORE colours ────────────────────────────────────────────
+     The three hexes the user actually picked, verbatim.
+
+     Nothing else in the published CSS says which colour a brand chose.
+     generateScaledTones writes the pick into the tone NEAREST ITS LIGHTNESS,
+     so the index differs per colour — a dark pick lands low, a pale one high
+     — and no fixed tone can stand for it. Color-Vibrant is not it either: that
+     is hardcoded to Color-8, which on a light brand is a pale tint. The
+     library's own Colors page showed Color-11 and then Color-8 and was wrong
+     both times, because the information was never published.
+
+     Emitted here rather than derived, so a consumer can show the brand's
+     colours without reaching into Firestore — which a published stylesheet
+     cannot do. */
+  --Primary-Core: #849054;
+  --Secondary-Core: #e49090;
+  --Tertiary-Core: #f0b484;
+
   /* Button */
   --Button-Radius: 2px;
   --Sm-Button-Radius: 2px;

package/public/styles/typography-tokens.css

@@ -5,10 +5,10 @@
 
 /* typography-tokens.css
  * Auto-generated — do not edit by hand.
- * Apply [data-platform="Desktop"] etc to your root element.
+ * Apply [data-device="Desktop"] etc to your root element.
  */
 
-[data-platform="Desktop"] {
+[data-device="Desktop"] {
   /* Faces */
   --Font-Family-Display: var(--Set-Font-Family-Display, var(--Platform-Font-Families-Decorative, var(--Set-Font-Family-Decorative)));
   --Font-Family-Header: var(--Platform-Font-Families-Header, var(--Set-Font-Family-Header));
@@ -23,12 +23,12 @@
   --Header-Clamped-Weight: 640;
 
   /* Variable-font axes */
-  --Font-Grade-Header: 50;
   --Font-Slant-Header: 0;
+  --Font-Grade-Header: 50;
+  --Font-Width-Header: 72;
   --Font-Roundness-Header: 0;
   --Font-Optical-Size-Header: 96;
-  --Font-Width-Header: 72;
-  --Font-Variation-Header: "GRAD" var(--Font-Grade-Header), "slnt" var(--Font-Slant-Header), "ROND" var(--Font-Roundness-Header), "opsz" var(--Font-Optical-Size-Header), "wdth" var(--Font-Width-Header);
+  --Font-Variation-Header: "slnt" var(--Font-Slant-Header), "GRAD" var(--Font-Grade-Header), "wdth" var(--Font-Width-Header), "ROND" var(--Font-Roundness-Header), "opsz" var(--Font-Optical-Size-Header);
 
   /* Display — Large and Medium belong in Header or Hero areas. Small is the one sized to sit inside a component — a card title, a stat, a pull quote. */
   --Display-Large-Font-Family:   var(--Font-Family-Display);
@@ -328,7 +328,7 @@
   --Badge-Text-Transform: none;
 }
 
-[data-platform="IOS-Mobile"] {
+[data-device="IOS-Mobile"] {
 
 
 
@@ -567,7 +567,7 @@
 
 }
 
-[data-platform="IOS-Tablet"] {
+[data-device="IOS-Tablet"] {
 
 
 
@@ -806,7 +806,247 @@
 
 }
 
-[data-platform="Android"] {
+[data-device="Android-Tablet"] {
+
+
+
+  /* Display */
+  --Font-Family-Display: var(--Set-Font-Family-Display, var(--Platform-Font-Families-Decorative, var(--Set-Font-Family-Decorative)));
+  --Display-Small-Font-Size:     36px;
+  --Display-Small-Font-Weight:   600;
+  --Display-Small-Line-Height:   44px;
+  --Display-Small-Letter-Spacing: 0px;
+  --Font-Family-Display: var(--Set-Font-Family-Display, var(--Platform-Font-Families-Decorative, var(--Set-Font-Family-Decorative)));
+  --Display-Medium-Font-Size:     45px;
+  --Display-Medium-Font-Weight:   600;
+  --Display-Medium-Line-Height:   52px;
+  --Display-Medium-Letter-Spacing: 0px;
+  --Font-Family-Display: var(--Set-Font-Family-Display, var(--Platform-Font-Families-Decorative, var(--Set-Font-Family-Decorative)));
+  --Display-Large-Font-Size:     57px;
+  --Display-Large-Font-Weight:   600;
+  --Display-Large-Line-Height:   64px;
+  --Display-Large-Letter-Spacing: 0px;
+
+  /* Headers */
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H1-Font-Size:     28px;
+  --H1-Font-Weight:   600;
+  --H1-Line-Height:   28px;
+  --H1-Letter-Spacing: 0px;
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H2-Font-Size:     26px;
+  --H2-Font-Weight:   600;
+  --H2-Line-Height:   26px;
+  --H2-Letter-Spacing: 0px;
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H3-Font-Size:     24px;
+  --H3-Font-Weight:   600;
+  --H3-Line-Height:   24px;
+  --H3-Letter-Spacing: 0px;
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H4-Font-Size:     20px;
+  --H4-Font-Weight:   600;
+  --H4-Line-Height:   20px;
+  --H4-Letter-Spacing: 0px;
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H5-Font-Size:     18px;
+  --H5-Font-Weight:   600;
+  --H5-Line-Height:   18px;
+  --H5-Letter-Spacing: 0px;
+  --Font-Family-Body: var(--Platform-Font-Families-Decorative);
+  --H6-Font-Size:     16px;
+  --H6-Font-Weight:   600;
+  --H6-Line-Height:   16px;
+  --H6-Letter-Spacing: 0px;
+
+  /* Subtitle */
+  --Font-Family-Subtitle: var(--Platform-Font-Families-Body);
+  --Subtitle-Small-Font-Size:     16px;
+  --Subtitle-Small-Font-Weight:   700;
+  --Subtitle-Small-Line-Height:   24px;
+  --Subtitle-Small-Letter-Spacing: 0px;
+  --Font-Family-Subtitle: var(--Platform-Font-Families-Body);
+  --Subtitle-Large-Font-Size:     18px;
+  --Subtitle-Large-Font-Weight:   700;
+  --Subtitle-Large-Line-Height:   32px;
+  --Subtitle-Large-Letter-Spacing: 0px;
+
+  /* Body */
+  --Font-Family-Body: var(--Platform-Font-Families-Body);
+  --Body-Small-Font-Size:     14px;
+  --Body-Small-Font-Weight:   500;
+  --Body-Small-Line-Height:   21px;
+  --Body-Small-Letter-Spacing: 0px;
+  --Body-Small-Semibold-Font-Weight: 600;
+  --Body-Small-Bold-Font-Weight: 700;
+  --Font-Family-Body: var(--Platform-Font-Families-Body);
+  --Body-Medium-Font-Size:     16px;
+  --Body-Medium-Font-Weight:   500;
+  --Body-Medium-Line-Height:   24px;
+  --Body-Medium-Letter-Spacing: 0px;
+  --Body-Medium-Semibold-Font-Weight: 600;
+  --Body-Medium-Bold-Font-Weight: 700;
+  --Font-Family-Body: var(--Platform-Font-Families-Body);
+  --Body-Large-Font-Size:     18px;
+  --Body-Large-Font-Weight:   600;
+  --Body-Large-Line-Height:   27px;
+  --Body-Large-Letter-Spacing: 0px;
+  --Body-Large-Semibold-Font-Weight: 600;
+  --Body-Large-Bold-Font-Weight: 700;
+
+  /* Caption */
+  --Font-Family-Body: var(--Platform-Font-Families-Body);
+  /* Leading here is the PLATFORM's, not the brand's 1.5 — Material 3's own
+     table at 12 / 14 / 16. The Figma payload computes these same numbers for
+     every non-Desktop device (typographyPlatform.ts, "LINE HEIGHT is COMPUTED,
+     not read"), while this block declared a flat 21 at every size, so one
+     caption read 20 in the file and 21 in the stylesheet and nothing could
+     see it. Declared rather than left to compute so the two sides state the
+     same value instead of arriving at it separately.
+
+     EVERY property is restated, tracking included, because the payload's
+     device-floor merge replaces a style WHOLE — `{...desktopStyles, ...own}`
+     keys on the STYLE, not on the property — so a step this block declares
+     partially loses whatever it leaves out instead of inheriting it from
+     Desktop. That variable then exists on Desktop and nowhere else, and one
+     missing on six of seven devices resolves to nothing there, silently. The
+     CSS cascade would have carried it; the payload does not, and the payload
+     is the half that fails without a sound.
+
+     The 0px is this block's existing answer for Caption, extended to the two
+     new steps rather than importing Desktop's 0.1px nudge — which would leave
+     the ramp reading 0.0996 / 0 / 0.1008, three steps of one style disagreeing
+     about whether the brand tracks captions at all. Whether mobile SHOULD zero
+     it is a brand decision and still open; this only stops the ramp from
+     contradicting itself. */
+  --Caption-Small-Font-Size:     12px;
+  --Caption-Small-Font-Weight:   500;
+  --Caption-Small-Letter-Spacing: 0px;
+  --Caption-Small-Line-Height:   16px;
+  --Caption-Font-Size:     14px;
+  --Caption-Font-Weight:   500;
+  --Caption-Line-Height:   20px;
+  --Caption-Letter-Spacing: 0px;
+  --Caption-Bold-Font-Weight: 700;
+  --Caption-Large-Font-Size:     16px;
+  --Caption-Large-Font-Weight:   500;
+  --Caption-Large-Letter-Spacing: 0px;
+  --Caption-Large-Line-Height:   24px;
+
+  /* Label */
+  --Font-Family-Label: var(--Platform-Font-Families-Body);
+  --Label-ExtraSmall-Font-Size:     11px;
+  --Label-ExtraSmall-Font-Weight:   600;
+  --Label-ExtraSmall-Line-Height:   16.5px;
+  --Label-ExtraSmall-Letter-Spacing: 0px;
+  --Font-Family-Label: var(--Platform-Font-Families-Body);
+  --Label-Small-Font-Size:     12.5px;
+  --Label-Small-Font-Weight:   600;
+  --Label-Small-Line-Height:   18.75px;
+  --Label-Small-Letter-Spacing: 0px;
+  --Font-Family-Label: var(--Platform-Font-Families-Body);
+  --Label-Medium-Font-Size:     16px;
+  --Label-Medium-Font-Weight:   600;
+  --Label-Medium-Line-Height:   24px;
+  --Label-Medium-Letter-Spacing: 0px;
+  --Font-Family-Label: var(--Platform-Font-Families-Body);
+  --Label-Large-Font-Size:     18px;
+  --Label-Large-Font-Weight:   600;
+  --Label-Large-Line-Height:   27px;
+  --Label-Large-Letter-Spacing: 0px;
+
+
+  /* Mobile Nav Label — Material's navigation label: 12sp on 16, 0.5 tracking. */
+  --Font-Family-Mobile-Nav-Label: var(--Platform-Font-Families-Body);
+  --Mobile-Nav-Label-Font-Size:     12px;
+  --Mobile-Nav-Label-Font-Weight:   600;
+  --Mobile-Nav-Label-Line-Height:   16px;
+  --Mobile-Nav-Label-Letter-Spacing: 0.5px;
+
+  /* Legal */
+  --Font-Family-Body: var(--Platform-Font-Families-Body);
+  --Legal-Font-Size:     10px;
+  --Legal-Font-Weight:   400;
+  --Legal-Line-Height:   15px;
+  --Legal-Letter-Spacing: 0px;
+  --Legal-Semibold-Font-Weight: 600;
+
+  /* Overline */
+  --Font-Family-Overline: var(--Platform-Font-Families-Body);
+  --Overline-Small-Font-Size:     14px;
+  --Overline-Small-Font-Weight:   500;
+  --Overline-Small-Line-Height:   21px;
+  --Overline-Small-Letter-Spacing: 0px;
+  --Font-Family-Overline: var(--Platform-Font-Families-Body);
+  --Overline-Medium-Font-Size:     16px;
+  --Overline-Medium-Font-Weight:   600;
+  --Overline-Medium-Line-Height:   24px;
+  --Overline-Medium-Letter-Spacing: 0px;
+  --Font-Family-Overline: var(--Platform-Font-Families-Body);
+  --Overline-Large-Font-Size:     18px;
+  --Overline-Large-Font-Weight:   600;
+  --Overline-Large-Line-Height:   27px;
+  --Overline-Large-Letter-Spacing: 0px;
+
+  /* Number */
+  --Font-Family-Number: var(--Platform-Font-Families-Body);
+  --Number-Small-Font-Size:     16px;
+  --Number-Small-Font-Weight:   700;
+  --Number-Small-Line-Height:   16px;
+  --Number-Small-Letter-Spacing: 0px;
+  --Font-Family-Number: var(--Platform-Font-Families-Body);
+  --Number-Medium-Font-Size:     28px;
+  --Number-Medium-Font-Weight:   700;
+  --Number-Medium-Line-Height:   16px;
+  --Number-Medium-Letter-Spacing: 0px;
+  --Font-Family-Number: var(--Platform-Font-Families-Body);
+  --Number-Large-Font-Size:     36px;
+  --Number-Large-Font-Weight:   700;
+  --Number-Large-Line-Height:   36px;
+  --Number-Large-Letter-Spacing: 0px;
+
+  /* Button */
+  --Font-Family-Button: var(--Platform-Font-Families-Body);
+  --Button-ExtraSmall-Font-Size:     11px;
+  --Button-ExtraSmall-Font-Weight:   600;
+  --Button-ExtraSmall-Line-Height:   28px;
+  --Button-ExtraSmall-Letter-Spacing: 0px;
+  --Font-Family-Button: var(--Platform-Font-Families-Body);
+  --Button-Small-Font-Size:     14px;
+  --Button-Small-Font-Weight:   600;
+  --Button-Small-Line-Height:   16px;
+  --Button-Small-Letter-Spacing: 0px;
+  --Font-Family-Button: var(--Platform-Font-Families-Body);
+  --Button-Medium-Font-Size:     16px;
+  --Button-Medium-Font-Weight:   600;
+  --Button-Medium-Line-Height:   16px;
+  --Button-Medium-Letter-Spacing: 0px;
+  /* was Button-Standard — kept so frozen stylesheets keep resolving. */
+  --Button-Standard-Font-Size:     var(--Button-Medium-Font-Size);
+  --Button-Standard-Font-Weight:   var(--Button-Medium-Font-Weight);
+  --Button-Standard-Line-Height:   var(--Button-Medium-Line-Height);
+  --Button-Standard-Letter-Spacing: var(--Button-Medium-Letter-Spacing);
+
+  /* Alt Display — mirrors Display step for step. The pairing sets one word
+     on one baseline ("Omni" + "Design"), so the two must not diverge in
+     size or leading; colour is what separates them. */
+  --Alt-Display-Small-Font-Size:     36px;
+  --Alt-Display-Small-Font-Weight:   900;
+  --Alt-Display-Small-Line-Height:   44px;
+  --Alt-Display-Small-Letter-Spacing: 0px;
+  --Alt-Display-Medium-Font-Size:     45px;
+  --Alt-Display-Medium-Font-Weight:   900;
+  --Alt-Display-Medium-Line-Height:   52px;
+  --Alt-Display-Medium-Letter-Spacing: 0px;
+  --Alt-Display-Large-Font-Size:     57px;
+  --Alt-Display-Large-Font-Weight:   900;
+  --Alt-Display-Large-Line-Height:   64px;
+  --Alt-Display-Large-Letter-Spacing: 0px;
+
+}
+
+
+[data-device="Android-Mobile"] {
 
 
 
@@ -1051,12 +1291,12 @@
  * platforms. Desktop is absent on purpose: there the brand's heights ARE the
  * answer, and base.css already states them.
  *
- * :root[data-platform="…"], not the bare [data-platform="…"] the type ramps
+ * :root[data-device="…"], not the bare [data-device="…"] the type ramps
  * above use, and the difference is load-bearing. --Button-Height is declared
  * at :root in base.css, which the provider injects at slot 5 — AFTER this file
  * at slot 3. A bare attribute selector ties with :root at (0,1,0), so the later
  * file would win and these overrides would do nothing, with no error anywhere.
- * :root[data-platform] scores (0,2,0) and wins on specificity instead, which
+ * :root[data-device] scores (0,2,0) and wins on specificity instead, which
  * does not depend on anyone preserving the load order.
  *
  * The type ramps above can stay as they are: their :root counterpart is in
@@ -1068,7 +1308,7 @@
  * spellings follow these overrides on their own.
  */
 
-:root[data-platform="IOS-Mobile"] {
+:root[data-device="IOS-Mobile"] {
   --Button-Height: 44px;
   --Sm-Button-Height: 32px;
   --Lg-Button-Height: 50px;
@@ -1077,7 +1317,7 @@
   --Lg-Button-Icon: 24px;
 }
 
-:root[data-platform="IOS-Tablet"] {
+:root[data-device="IOS-Tablet"] {
   --Button-Height: 44px;
   --Sm-Button-Height: 32px;
   --Lg-Button-Height: 50px;
@@ -1086,7 +1326,16 @@
   --Lg-Button-Icon: 24px;
 }
 
-:root[data-platform="Android"] {
+:root[data-device="Android-Tablet"] {
+  --Button-Height: 48px;
+  --Sm-Button-Height: 32px;
+  --Lg-Button-Height: 56px;
+  --Button-Icon: 18px;
+  --Sm-Button-Icon: 18px;
+  --Lg-Button-Icon: 24px;
+}
+
+:root[data-device="Android-Mobile"] {
   --Button-Height: 48px;
   --Sm-Button-Height: 32px;
   --Lg-Button-Height: 56px;