@omni-design/components 0.12.0 → 0.14.0

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

@@ -18,11 +18,23 @@ export const FOUNDATIONS: ({
         head: string[];
         rows: string[][];
     };
+    body2: any[];
     trap: string;
+} | {
+    title: string;
+    lede: string;
+    body: string[];
+    table: {
+        head: string[];
+        rows: string[][];
+    };
+    trap: string;
+    body2?: undefined;
 } | {
     title: string;
     lede: string;
     body: string[];
     trap: string;
     table?: undefined;
+    body2?: undefined;
 })[];

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.12.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",
@@ -107,7 +107,9 @@
     "type": "git",
     "url": "https://github.com/lwnoble/omni-design"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^7.3.1"
+  },
   "homepage": "/",
   "browserslist": {
     "production": [

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/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;
@@ -295,6 +317,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 +451,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);
+}