@omni-design/components 0.13.0 → 0.14.0

package/dist/types/docs/examples.lead.d.ts

@@ -0,0 +1,89 @@
+export const NAV_ITEMS: ({
+    icon: JSX.Element;
+    label: string;
+    badge?: undefined;
+} | {
+    icon: JSX.Element;
+    label: string;
+    badge: number;
+})[];
+export const LIST_ITEMS: {
+    label: string;
+}[];
+export const TABLE_COLUMNS: ({
+    label: string;
+    field: string;
+    width: string;
+    align?: undefined;
+} | {
+    label: string;
+    field: string;
+    align: string;
+    width?: undefined;
+})[];
+export const TABLE_ROWS: {
+    name: string;
+    calories: number;
+    fat: number;
+}[];
+export const SELECT_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export const TOOLBAR_ITEMS: {
+    icon: JSX.Element;
+    label: string;
+}[];
+export const TREE_ITEMS: ({
+    id: string;
+    label: string;
+    children: ({
+        id: string;
+        label: string;
+        children: {
+            id: string;
+            label: string;
+        }[];
+    } | {
+        id: string;
+        label: string;
+        children?: undefined;
+    })[];
+} | {
+    id: string;
+    label: string;
+    children?: undefined;
+})[];
+export namespace LEAD_EXAMPLES {
+    function ButtonGroup(): JSX.Element;
+    function ToggleButtonGroup(): JSX.Element;
+    function AppBar(): JSX.Element;
+    function Autocomplete(): JSX.Element;
+    function BottomNavigation(): JSX.Element;
+    function CodeBlock(): JSX.Element;
+    function Dialog(): JSX.Element;
+    function Drawer(): JSX.Element;
+    function DropZone(): JSX.Element;
+    function IconBadge(): JSX.Element;
+    function List(): JSX.Element;
+    function Loader(): JSX.Element;
+    function Menu(): JSX.Element;
+    function Modal(): JSX.Element;
+    function Paper(): JSX.Element;
+    function Popover(): JSX.Element;
+    function Rail(): JSX.Element;
+    function Ratio(): JSX.Element;
+    function SearchField(): JSX.Element;
+    function Select(): JSX.Element;
+    function Sidebar(): JSX.Element;
+    function Snackbar(): JSX.Element;
+    function StateMessage(): JSX.Element;
+    function Stepper(): JSX.Element;
+    function Swatch(): JSX.Element;
+    function Table(): JSX.Element;
+    function Tag(): JSX.Element;
+    function TextField(): JSX.Element;
+    function Toolbar(): JSX.Element;
+    function Tooltip(): JSX.Element;
+    function TreeView(): JSX.Element;
+}

package/dist/types/docs/figmaLinks.d.ts

@@ -18,6 +18,7 @@ export namespace FIGMA_PAGES {
     let Breadcrumbs: string;
     let Button: string;
     let ButtonGroup: string;
+    let ToggleButtonGroup: string;
     let Card: string;
     let Checkbox: string;
     let Chip: string;

package/dist/types/docs/samples.buttongroup.d.ts

@@ -0,0 +1,22 @@
+export const BUTTON_GROUP_SAMPLES: {
+    separated: () => JSX.Element;
+    fit: () => JSX.Element;
+    orientation: () => JSX.Element;
+    size: () => JSX.Element;
+    variant: () => JSX.Element;
+    disabled: () => JSX.Element;
+    'aria-label': () => JSX.Element;
+};
+export const TOGGLE_BUTTON_GROUP_SAMPLES: {
+    allowEmpty: () => JSX.Element;
+    multiple: () => JSX.Element;
+    separated: () => JSX.Element;
+    variant: () => JSX.Element;
+    color: () => JSX.Element;
+    size: () => JSX.Element;
+    fit: () => JSX.Element;
+    orientation: () => JSX.Element;
+    'value / defaultValue': () => JSX.Element;
+    onChange: () => JSX.Element;
+    disabled: () => JSX.Element;
+};

package/dist/types/docs/samples.core.d.ts

@@ -0,0 +1,104 @@
+export namespace CORE_SAMPLES {
+    namespace Button {
+        function selected(): JSX.Element;
+        function avatar(): JSX.Element;
+        function letterNumber(): JSX.Element;
+        function swatch(): JSX.Element;
+    }
+    namespace Chip {
+        export function variant(): JSX.Element;
+        export function selected_1(): JSX.Element;
+        export { selected_1 as selected };
+        export function clickable(): JSX.Element;
+        export function disabled(): JSX.Element;
+    }
+    namespace Badge {
+        export function variant_1(): JSX.Element;
+        export { variant_1 as variant };
+        export function dot(): JSX.Element;
+        export function showZero(): JSX.Element;
+        export function invisible(): JSX.Element;
+        export function overlap(): JSX.Element;
+    }
+    namespace Alert {
+        function color(): JSX.Element;
+        function size(): JSX.Element;
+    }
+    namespace Avatar {
+        export function defaultPhoto(): JSX.Element;
+        export function size_1(): JSX.Element;
+        export { size_1 as size };
+        export function clickable_1(): JSX.Element;
+        export { clickable_1 as clickable };
+    }
+    namespace Icon {
+        export function color_1(): JSX.Element;
+        export { color_1 as color };
+        export function size_2(): JSX.Element;
+        export { size_2 as size };
+        export function twoTone(): JSX.Element;
+        export function disabled_1(): JSX.Element;
+        export { disabled_1 as disabled };
+    }
+    namespace Swatch {
+        export function size_3(): JSX.Element;
+        export { size_3 as size };
+        export function selected_2(): JSX.Element;
+        export { selected_2 as selected };
+        export function disabled_2(): JSX.Element;
+        export { disabled_2 as disabled };
+        export function radio(): JSX.Element;
+    }
+    namespace Tag {
+        export function color_2(): JSX.Element;
+        export { color_2 as color };
+        export function width(): JSX.Element;
+        export function allCaps(): JSX.Element;
+    }
+    namespace IconBadge {
+        export function color_3(): JSX.Element;
+        export { color_3 as color };
+        export function size_4(): JSX.Element;
+        export { size_4 as size };
+    }
+    namespace Link {
+        export function disabled_3(): JSX.Element;
+        export { disabled_3 as disabled };
+    }
+    namespace Divider {
+        export function color_4(): JSX.Element;
+        export { color_4 as color };
+        export function orientation(): JSX.Element;
+        export function size_5(): JSX.Element;
+        export { size_5 as size };
+        export function indicatorStyle(): JSX.Element;
+        export function textAlign(): JSX.Element;
+    }
+    namespace Loader {
+        export function color_5(): JSX.Element;
+        export { color_5 as color };
+        export function size_6(): JSX.Element;
+        export { size_6 as size };
+    }
+    namespace StateMessage {
+        export function type(): JSX.Element;
+        export function size_7(): JSX.Element;
+        export { size_7 as size };
+    }
+    namespace Fab {
+        export function variant_2(): JSX.Element;
+        export { variant_2 as variant };
+    }
+    namespace Rating {
+        export function color_6(): JSX.Element;
+        export { color_6 as color };
+        export function size_8(): JSX.Element;
+        export { size_8 as size };
+        export function readOnly(): JSX.Element;
+    }
+    namespace CodeBlock {
+        function showCopy(): JSX.Element;
+        function showHeader(): JSX.Element;
+        function wrap(): JSX.Element;
+    }
+}

package/dist/types/docs/samples.d.ts

@@ -0,0 +1,27 @@
+export const PALETTES: string[];
+export const BUTTON_ONLY: string[];
+export const SIZES: string[];
+export function Cell({ label, emphasis, width, children }: {
+    label: any;
+    emphasis?: boolean;
+    width: any;
+    children: any;
+}): JSX.Element;
+export function Axis({ values, render, defaultValue, width }: {
+    values: any;
+    render: any;
+    defaultValue: any;
+    width: any;
+}): JSX.Element;
+export function AxisStack({ values, render, defaultValue, width }: {
+    values: any;
+    render: any;
+    defaultValue: any;
+    width?: string;
+}): JSX.Element;
+export function Toggle({ render, offLabel, onLabel, width }: {
+    render: any;
+    offLabel?: string;
+    onLabel?: string;
+    width: any;
+}): JSX.Element;

package/dist/types/docs/samples.forms.d.ts

@@ -0,0 +1,69 @@
+export namespace FORM_SAMPLES {
+    let Checkbox: {
+        variant: () => JSX.Element;
+        size: () => JSX.Element;
+        'checked / defaultChecked': () => JSX.Element;
+        indeterminate: () => JSX.Element;
+        disabled: () => JSX.Element;
+    };
+    namespace Radio {
+        function color(): JSX.Element;
+        function size(): JSX.Element;
+        function labelPlacement(): JSX.Element;
+        function checked(): JSX.Element;
+        function disabled(): JSX.Element;
+    }
+    let SwitchInput: {
+        variant: () => JSX.Element;
+        size: () => JSX.Element;
+        'checked / defaultChecked': () => JSX.Element;
+        icon: () => JSX.Element;
+        labelPlacement: () => JSX.Element;
+        disabled: () => JSX.Element;
+    };
+    namespace Input {
+        export function variant(): JSX.Element;
+        export function size_1(): JSX.Element;
+        export { size_1 as size };
+        export function labelPosition(): JSX.Element;
+        export function validation(): JSX.Element;
+        export function disabled_1(): JSX.Element;
+        export { disabled_1 as disabled };
+    }
+    namespace TextField {
+        export function error(): JSX.Element;
+        export function size_2(): JSX.Element;
+        export { size_2 as size };
+    }
+    namespace SearchField {
+        export function color_1(): JSX.Element;
+        export { color_1 as color };
+        export function showClearButton(): JSX.Element;
+        export function size_3(): JSX.Element;
+        export { size_3 as size };
+    }
+    namespace Select {
+        export function labelPosition_1(): JSX.Element;
+        export { labelPosition_1 as labelPosition };
+        export function size_4(): JSX.Element;
+        export { size_4 as size };
+        export function mode(): JSX.Element;
+    }
+    namespace Autocomplete {
+        export function labelPosition_2(): JSX.Element;
+        export { labelPosition_2 as labelPosition };
+        export function size_5(): JSX.Element;
+        export { size_5 as size };
+    }
+    namespace DropZone {
+        export function multiple(): JSX.Element;
+        export function size_6(): JSX.Element;
+        export { size_6 as size };
+        export function disabled_2(): JSX.Element;
+        export { disabled_2 as disabled };
+    }
+    namespace Avatar {
+        export function color_2(): JSX.Element;
+        export { color_2 as color };
+    }
+}

package/dist/types/docs/samples.nav.d.ts

@@ -0,0 +1,70 @@
+export namespace NAV_SAMPLES {
+    namespace Tabs {
+        function orientation(): JSX.Element;
+        function baseline(): JSX.Element;
+        function variant(): JSX.Element;
+        function size(): JSX.Element;
+        function scrollable(): JSX.Element;
+    }
+    namespace Breadcrumbs {
+        export function size_1(): JSX.Element;
+        export { size_1 as size };
+        export function condense(): JSX.Element;
+        export function backOnlyMobile(): JSX.Element;
+    }
+    let Pagination: {
+        size: () => JSX.Element;
+        'showFirstButton / showLastButton': () => JSX.Element;
+    };
+    namespace Stepper {
+        export function orientation_1(): JSX.Element;
+        export { orientation_1 as orientation };
+        export function size_2(): JSX.Element;
+        export { size_2 as size };
+        export function clickable(): JSX.Element;
+        export function dashedIncomplete(): JSX.Element;
+    }
+    namespace List {
+        export function orientation_2(): JSX.Element;
+        export { orientation_2 as orientation };
+        export function dividers(): JSX.Element;
+        export function clickable_1(): JSX.Element;
+        export { clickable_1 as clickable };
+        export function selectionMode(): JSX.Element;
+        export function loading(): JSX.Element;
+    }
+    namespace TreeView {
+        export function selectionMode_1(): JSX.Element;
+        export { selectionMode_1 as selectionMode };
+    }
+    namespace AppBar {
+        function mode(): JSX.Element;
+        function brandType(): JSX.Element;
+        function menuType(): JSX.Element;
+    }
+    namespace Rail {
+        export function variant_1(): JSX.Element;
+        export { variant_1 as variant };
+        export function expandable(): JSX.Element;
+        export function expandedWidth(): JSX.Element;
+        export function labelStyle(): JSX.Element;
+    }
+    namespace BottomNavigation {
+        export function showLabels(): JSX.Element;
+        export function variant_2(): JSX.Element;
+        export { variant_2 as variant };
+    }
+    namespace Sidebar {
+        export function variant_3(): JSX.Element;
+        export { variant_3 as variant };
+    }
+    namespace Toolbar {
+        export function type(): JSX.Element;
+        export function orientation_3(): JSX.Element;
+        export { orientation_3 as orientation };
+    }
+    namespace Menu {
+        export function size_3(): JSX.Element;
+        export { size_3 as size };
+    }
+}

package/dist/types/docs/samples.slider.d.ts

@@ -0,0 +1,12 @@
+export const SLIDER_SAMPLES: {
+    variant: () => JSX.Element;
+    size: () => JSX.Element;
+    'value / defaultValue': () => JSX.Element;
+    fill: () => JSX.Element;
+    orientation: () => JSX.Element;
+    marks: () => JSX.Element;
+    step: () => JSX.Element;
+    valueLabelDisplay: () => JSX.Element;
+    label: () => JSX.Element;
+    disabled: () => JSX.Element;
+};

package/dist/types/docs/samples.surfaces.d.ts

@@ -0,0 +1,69 @@
+export namespace SURFACE_SAMPLES {
+    namespace Card {
+        function variant(): JSX.Element;
+        function size(): JSX.Element;
+        function orientation(): JSX.Element;
+        function clickable(): JSX.Element;
+        function elevated(): JSX.Element;
+        function selected(): JSX.Element;
+    }
+    namespace Accordion {
+        export function variant_1(): JSX.Element;
+        export { variant_1 as variant };
+        export function size_1(): JSX.Element;
+        export { size_1 as size };
+        export function defaultExpanded(): JSX.Element;
+        export function disabled(): JSX.Element;
+    }
+    namespace Paper {
+        export function outlined(): JSX.Element;
+        export function variant_2(): JSX.Element;
+        export { variant_2 as variant };
+    }
+    namespace Ratio {
+        function fit(): JSX.Element;
+    }
+    namespace Table {
+        function loading(): JSX.Element;
+    }
+    namespace Modal {
+        export function open(): JSX.Element;
+        export function size_2(): JSX.Element;
+        export { size_2 as size };
+        export function layout(): JSX.Element;
+        export function closeOnBackdrop(): JSX.Element;
+        export function showCloseButton(): JSX.Element;
+    }
+    namespace Dialog {
+        export function open_1(): JSX.Element;
+        export { open_1 as open };
+        export function maxWidth(): JSX.Element;
+        export function fullScreen(): JSX.Element;
+        export function alert(): JSX.Element;
+        export function nonModal(): JSX.Element;
+    }
+    namespace Drawer {
+        export function open_2(): JSX.Element;
+        export { open_2 as open };
+        export function anchor(): JSX.Element;
+        export function size_3(): JSX.Element;
+        export { size_3 as size };
+        export function hideBackdrop(): JSX.Element;
+    }
+    namespace Snackbar {
+        export function open_3(): JSX.Element;
+        export { open_3 as open };
+        export function color(): JSX.Element;
+        export function anchor_1(): JSX.Element;
+        export { anchor_1 as anchor };
+    }
+    namespace Tooltip {
+        function placement(): JSX.Element;
+        function arrow(): JSX.Element;
+        function describeChild(): JSX.Element;
+    }
+    namespace Popover {
+        export function open_4(): JSX.Element;
+        export { open_4 as open };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omni-design/components",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "DynoDesign adaptive component library — token-driven React components with customizable CSS theming",
   "author": "Lise Noble",
   "license": "Apache-2.0",

package/public/styles/README.md

@@ -66,7 +66,7 @@ variable-font axes (`--Font-Slant-Header`, `--Font-Roundness-Header`, …) and
 the full per-style ramp into both.
 
 The old wording — overwrite only base/Light/Dark — therefore gave a consumer
-the brand's colours but not its fonts or axes, silently. A design system with a
+the brand's colors but not its fonts or axes, silently. A design system with a
 header weight of 857 rendered at 600 because the lib's bundled copy won.
 
 **The checked-in copies here are SEEDS, not the authority.** They define the

package/public/styles/base.css

@@ -99,24 +99,35 @@
   --Buttons-Default-Quiet: var(--Buttons-Secondary-Quiet);
   --Buttons-Default-Hover: #efa5a4;
   --Buttons-Default-Pressed: #efa5a4;
-  --Icons-Default: var(--Icon-Surfaces-Neutral-Color-9);
-  --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
-  --Icons-Primary: var(--Icon-Surfaces-Primary-Color-9);
-  --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-9);
-  --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-9);
-  --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-9);
-  --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-9);
-  --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-9);
-  --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-9);
-  --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
-  --Icons-Info: var(--Icon-Surfaces-Info-Color-9);
-  --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-9);
-  --Icons-Success: var(--Icon-Surfaces-Success-Color-9);
-  --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-9);
-  --Icons-Warning: var(--Icon-Surfaces-Warning-Color-9);
-  --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-9);
-  --Icons-Error: var(--Icon-Surfaces-Error-Color-9);
-  --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-9);
+  /* The Icons ramp, with a fallback that is doing real work.
+     `--Icon-Surfaces-<Palette>-Color-9` and its Variant sibling are referenced
+     here and defined NOWHERE — not in this file and not in a generated brand
+     sheet. An undefined var() makes the whole declaration invalid at computed
+     value time, so every one of these resolved to nothing, and a Switch on
+     `secondary` painted the same dark track as one on `tertiary`, `info` and
+     `error`. Nine variants, one color, no error anywhere.
+     The surface-scoped name stays FIRST, because a brand that emits it should
+     win — that is the rule this system runs on. The palette ramp behind it is
+     what the themed blocks further down this file already use, so the fallback
+     agrees with them rather than inventing a value. */
+  --Icons-Default: var(--Icon-Surfaces-Neutral-Color-9, var(--Neutral-Color-6));
+  --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9, var(--Neutral-Color-7));
+  --Icons-Primary: var(--Icon-Surfaces-Primary-Color-9, var(--Primary-Color-6));
+  --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-9, var(--Primary-Color-7));
+  --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-9, var(--Secondary-Color-6));
+  --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-9, var(--Secondary-Color-7));
+  --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-9, var(--Tertiary-Color-6));
+  --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-9, var(--Tertiary-Color-7));
+  --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-9, var(--Neutral-Color-6));
+  --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9, var(--Neutral-Color-7));
+  --Icons-Info: var(--Icon-Surfaces-Info-Color-9, var(--Info-Color-6));
+  --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-9, var(--Info-Color-7));
+  --Icons-Success: var(--Icon-Surfaces-Success-Color-9, var(--Success-Color-6));
+  --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-9, var(--Success-Color-7));
+  --Icons-Warning: var(--Icon-Surfaces-Warning-Color-9, var(--Warning-Color-6));
+  --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-9, var(--Warning-Color-7));
+  --Icons-Error: var(--Icon-Surfaces-Error-Color-9, var(--Error-Color-6));
+  --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-9, var(--Error-Color-7));
 }
 
 :root {
@@ -175,7 +186,7 @@
 
 
 :root {
-  /* Default Primary / Secondary / Tertiary Tone — the Color-N each brand colour sits at. */
+  /* Default Primary / Secondary / Tertiary Tone — the Color-N each brand color sits at. */
   --DPT: 6;
   --DST: 7;
   --DTT: 8;
@@ -250,6 +261,17 @@
   --Checkbox-Gap: 8px;
   --Sm-Checkbox-Gap: 4px;
   --Lg-Checkbox-Gap: 12px;
+  /* The Switch track. These are the Component-Size collection's values, and
+     they are here because they were nowhere: the number lived in Figma and
+     again as a literal in Switch.js, with nothing able to see the two drift.
+     They had — 28x16 and 40x24 against the file's 35x20 and 42x24, with large
+     matching, which is why it read as consistent. */
+  --Switch-Width: 42px;
+  --Sm-Switch-Width: 35px;
+  --Lg-Switch-Width: 56px;
+  --Switch-Height: 24px;
+  --Sm-Switch-Height: 20px;
+  --Lg-Switch-Height: 32px;
   --Divider: 1px;
   --Sm-Divider: 0.5px;
   --Lg-Divider: 2px;

package/public/styles/foundation.css

@@ -5,19 +5,19 @@
 
 :root {
 
-  /* ── The brand's CORE colours ────────────────────────────────────────────
+  /* ── The brand's CORE colors ────────────────────────────────────────────
      The three hexes the user actually picked, verbatim.
 
-     Nothing else in the published CSS says which colour a brand chose.
+     Nothing else in the published CSS says which color 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
+     so the index differs per color — 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
+     colors without reaching into Firestore — which a published stylesheet
      cannot do. */
   --Primary-Core: #849054;
   --Secondary-Core: #e49090;

package/public/styles/typography-tokens.css

@@ -551,7 +551,7 @@
 
   /* 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. */
+     size or leading; color is what separates them. */
   --Alt-Display-Small-Font-Size:     34px;
   --Alt-Display-Small-Font-Weight:   900;
   --Alt-Display-Small-Line-Height:   41px;
@@ -790,7 +790,7 @@
 
   /* 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. */
+     size or leading; color is what separates them. */
   --Alt-Display-Small-Font-Size:     34px;
   --Alt-Display-Small-Font-Weight:   900;
   --Alt-Display-Small-Line-Height:   41px;
@@ -1029,7 +1029,7 @@
 
   /* 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. */
+     size or leading; color is what separates them. */
   --Alt-Display-Small-Font-Size:     36px;
   --Alt-Display-Small-Font-Weight:   900;
   --Alt-Display-Small-Line-Height:   44px;
@@ -1269,7 +1269,7 @@
 
   /* 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. */
+     size or leading; color is what separates them. */
   --Alt-Display-Small-Font-Size:     36px;
   --Alt-Display-Small-Font-Weight:   900;
   --Alt-Display-Small-Line-Height:   44px;
@@ -1391,11 +1391,11 @@
 }
 
 /* ---------------------------------------------------------------------------
-   Alt Display colour — three variants, one pair of stops
+   Alt Display color — three variants, one pair of stops
 
    Set data-alt-display on the element or any ancestor:
      default   (or unset)  the Alt reads as a heading
-     colored               a flat Alt colour
+     colored               a flat Alt color
      gradient              the two stops the theme publishes
 
    The stops are re-published per theme and surface, so every variant follows
@@ -1420,7 +1420,7 @@
 .typography-alt-display-large,
 .typography-alt-display-medium,
 .typography-alt-display-small {
-  /* Stop 1 alone: in the flat variants the two agree, and a plain colour keeps
+  /* Stop 1 alone: in the flat variants the two agree, and a plain color keeps
      the selection highlight, print, and forced-colors working. */
   color: var(--Alt-Display-Color-Stop-1);
 }
@@ -1453,7 +1453,7 @@
 .typography-alt-display-small[data-alt-display="gradient"],
 [data-alt-display="gradient"] .typography-alt-display-small {
     /* The UA drops background-image here, and transparent text would leave
-       nothing on screen. Hand the glyphs back to the system colour. */
+       nothing on screen. Hand the glyphs back to the system color. */
     background-image: none;
     -webkit-background-clip: border-box;
     background-clip: border-box;