@ttoss/fsl-theme 2.1.1 → 2.1.3

package/README.md

@@ -43,7 +43,7 @@ One entry per semantic family. Use `vars.*` for typed CSS variable references; u
 |           | `semantic.spacing.separation.interactive.min`                    | CSS length              |
 | text      | `semantic.text.{display,headline,title,body,label}.{lg,md,sm}`   | TextStyle object        |
 |           | `semantic.text.code.{md,sm}`                                     | TextStyle object        |
-| sizing    | `semantic.sizing.hit.{min,base,prominent}`                       | CSS length              |
+| sizing    | `semantic.sizing.hit`                                            | CSS length              |
 |           | `semantic.sizing.icon.{sm,md,lg}`                                | CSS length              |
 |           | `semantic.sizing.identity.{sm,md,lg,xl}`                         | CSS length              |
 |           | `semantic.sizing.measure.reading`                                | CSS `ch` / `clamp()`    |
@@ -106,7 +106,7 @@ Find the CSS property you are setting, then follow the branch to the leaf.
 
 **`width` / `height` / `min-width` / `min-height`** → `sizing`
 
-- Interactive area (hit target) → `sizing.hit.{min|base|prominent}`
+- Interactive area (hit target) → `sizing.hit` — a single ergonomic floor, applied via `min-width`/`min-height` (ADR-020)
 - Icon glyph dimension → `sizing.icon.{sm|md|lg}`
 - Avatar / identity object → `sizing.identity.{sm|md|lg|xl}`
 - Reading line length (`max-width` in `ch`) → `sizing.measure.reading`

package/dist/{Types-a_sfpbha.d.cts → Types-8o6d09ll.d.cts}

@@ -824,21 +824,20 @@ interface CoreSizeViewport {
     full: RawValue;
   };
 }
-/** Three-step hit target size ramp (min / base / prominent). */
-interface CoreSizeHitScale {
-  min: RawValue;
-  base: RawValue;
-  prominent: RawValue;
-}
 /**
- * Hit target sizes split by pointer type.
- * `toCssVars` automatically injects the `coarse` values under `@media (any-pointer: coarse)`.
+ * Hit target floors split by pointer type.
+ *
+ * A **single ergonomic floor per pointer profile** — the minimum interactive
+ * target, never a visual size and never a scale. The theme defines one value;
+ * `toCssVars` injects the `coarse` value under `@media (any-pointer: coarse)`.
+ * (Evidence: the former three-step ramp shipped with only `base` ever consumed
+ * — see ADR-020.)
  */
 interface CoreSizeHit {
-  /** Fine pointer (mouse/trackpad) hit targets */
-  fine: CoreSizeHitScale;
-  /** Coarse pointer (touch) hit targets */
-  coarse: CoreSizeHitScale;
+  /** Fine pointer (mouse/trackpad) hit target floor. */
+  fine: RawValue;
+  /** Coarse pointer (touch) hit target floor. */
+  coarse: RawValue;
 }
 interface CoreSizing {
   ramp: {
@@ -852,20 +851,20 @@ interface CoreSizing {
 }
 interface SemanticSizing {
   /**
-   * Ergonomic hit targets. Each token resolves to the **fine-pointer** value.
-   * The CSS output layer (`toCssVars`) automatically injects coarse-pointer
-   * overrides inside `@media (any-pointer: coarse)` — no component code needed.
+   * Ergonomic hit target — a **single interactive floor** (min interactive
+   * area), not a visual size and not a scale. Enforce via `min-height` /
+   * `min-width`; the visible control size comes from its inset + type, with
+   * `hit` only guaranteeing the ergonomic minimum.
    *
-   * Fine-pointer values (`core.sizing.hit.fine.*`) may use `clamp(floor, preferred, max)`
-   * where `floor` is a fixed `Npx` ergonomic minimum — this guarantees accessibility
-   * while allowing themes to express density preferences (e.g. via the rem scale).
-   * Coarse-pointer values (`core.sizing.hit.coarse.*`) are always fixed `px`.
+   * Resolves to the **fine-pointer** value (`core.sizing.hit.fine`), which may
+   * use `clamp(floor, preferred, max)` where `floor` is a fixed `Npx`
+   * ergonomic minimum — guaranteeing accessibility while letting the rem
+   * `preferred` respect user font-size. The CSS output layer (`toCssVars`)
+   * automatically injects the coarse-pointer override (`core.sizing.hit.coarse`,
+   * always fixed `px`) inside `@media (any-pointer: coarse)` — no component
+   * code needed.
    */
-  hit: {
-    /** Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via `min-width` / `min-height`; not a visual size. */min: CoreSizingRef; /** Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies. */
-    base: CoreSizingRef; /** Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions). */
-    prominent: CoreSizingRef;
-  };
+  hit: CoreSizingRef;
   /**
    * Visual glyph dimensions. Set on the icon element itself; never used to
    * gate the hit target that wraps it (that is `hit.*`).

package/dist/{Types-a_sfpbha.d.mts → Types-8o6d09ll.d.mts}

@@ -824,21 +824,20 @@ interface CoreSizeViewport {
     full: RawValue;
   };
 }
-/** Three-step hit target size ramp (min / base / prominent). */
-interface CoreSizeHitScale {
-  min: RawValue;
-  base: RawValue;
-  prominent: RawValue;
-}
 /**
- * Hit target sizes split by pointer type.
- * `toCssVars` automatically injects the `coarse` values under `@media (any-pointer: coarse)`.
+ * Hit target floors split by pointer type.
+ *
+ * A **single ergonomic floor per pointer profile** — the minimum interactive
+ * target, never a visual size and never a scale. The theme defines one value;
+ * `toCssVars` injects the `coarse` value under `@media (any-pointer: coarse)`.
+ * (Evidence: the former three-step ramp shipped with only `base` ever consumed
+ * — see ADR-020.)
  */
 interface CoreSizeHit {
-  /** Fine pointer (mouse/trackpad) hit targets */
-  fine: CoreSizeHitScale;
-  /** Coarse pointer (touch) hit targets */
-  coarse: CoreSizeHitScale;
+  /** Fine pointer (mouse/trackpad) hit target floor. */
+  fine: RawValue;
+  /** Coarse pointer (touch) hit target floor. */
+  coarse: RawValue;
 }
 interface CoreSizing {
   ramp: {
@@ -852,20 +851,20 @@ interface CoreSizing {
 }
 interface SemanticSizing {
   /**
-   * Ergonomic hit targets. Each token resolves to the **fine-pointer** value.
-   * The CSS output layer (`toCssVars`) automatically injects coarse-pointer
-   * overrides inside `@media (any-pointer: coarse)` — no component code needed.
+   * Ergonomic hit target — a **single interactive floor** (min interactive
+   * area), not a visual size and not a scale. Enforce via `min-height` /
+   * `min-width`; the visible control size comes from its inset + type, with
+   * `hit` only guaranteeing the ergonomic minimum.
    *
-   * Fine-pointer values (`core.sizing.hit.fine.*`) may use `clamp(floor, preferred, max)`
-   * where `floor` is a fixed `Npx` ergonomic minimum — this guarantees accessibility
-   * while allowing themes to express density preferences (e.g. via the rem scale).
-   * Coarse-pointer values (`core.sizing.hit.coarse.*`) are always fixed `px`.
+   * Resolves to the **fine-pointer** value (`core.sizing.hit.fine`), which may
+   * use `clamp(floor, preferred, max)` where `floor` is a fixed `Npx`
+   * ergonomic minimum — guaranteeing accessibility while letting the rem
+   * `preferred` respect user font-size. The CSS output layer (`toCssVars`)
+   * automatically injects the coarse-pointer override (`core.sizing.hit.coarse`,
+   * always fixed `px`) inside `@media (any-pointer: coarse)` — no component
+   * code needed.
    */
-  hit: {
-    /** Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via `min-width` / `min-height`; not a visual size. */min: CoreSizingRef; /** Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies. */
-    base: CoreSizingRef; /** Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions). */
-    prominent: CoreSizingRef;
-  };
+  hit: CoreSizingRef;
   /**
    * Visual glyph dimensions. Set on the icon element itself; never used to
    * gate the hit target that wraps it (that is `hit.*`).

package/dist/{baseBundle-CXdxj_re.mjs → baseBundle-BpCf8Cc9.mjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { a as darkAlternate, i as baseTheme, n as createTheme, r as baseBrief } from "./createTheme-Bm9LVQ4w.mjs";
+import { a as darkAlternate, i as baseTheme, n as createTheme, r as baseBrief } from "./createTheme-C05ONnLw.mjs";
 
 //#region src/baseBundle.ts
 /**

package/dist/{baseBundle-a9LDsqYy.cjs → baseBundle-DaO6jyk3.cjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_createTheme = require('./createTheme-B7H0xSVp.cjs');
+const require_createTheme = require('./createTheme-r7mUCPFX.cjs');
 
 //#region src/baseBundle.ts
 /**

package/dist/{createTheme-Bm9LVQ4w.mjs → createTheme-C05ONnLw.mjs}

@@ -52,15 +52,17 @@ var baseTheme = {
       },
       neutral: {
         0: "#ffffff",
-        50: "#f8fafc",
-        100: "#f1f5f9",
-        200: "#e2e8f0",
-        300: "#cbd5e1",
-        400: "#94a3b8",
-        500: "#64748b",
-        700: "#334155",
-        900: "#0f172a",
-        1e3: "#020617"
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#e4e4e7",
+        300: "#d4d4d8",
+        400: "#a1a1aa",
+        500: "#71717a",
+        600: "#52525b",
+        700: "#3f3f46",
+        800: "#27272a",
+        900: "#18181b",
+        1e3: "#09090b"
       },
       red: {
         100: "#fee2e2",
@@ -131,7 +133,7 @@ var baseTheme = {
     },
     font: {
       family: {
-        sans: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
+        sans: "\"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
         serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
         mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
       },
@@ -239,16 +241,8 @@ var baseTheme = {
         }
       },
       hit: {
-        fine: {
-          min: "clamp(28px, 1.75rem, 32px)",
-          base: "clamp(32px, 2rem, 40px)",
-          prominent: "clamp(40px, 2.5rem, 48px)"
-        },
-        coarse: {
-          min: "32px",
-          base: "48px",
-          prominent: "56px"
-        }
+        fine: "clamp(32px, 2rem, 36px)",
+        coarse: "48px"
       }
     },
     radii: {
@@ -358,7 +352,7 @@ var baseTheme = {
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
             pressed: "{core.colors.neutral.400}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.900}",
@@ -432,7 +426,7 @@ var baseTheme = {
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -451,10 +445,10 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.50}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.50}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.50}",
             invalid: "{core.colors.neutral.0}"
@@ -462,14 +456,14 @@ var baseTheme = {
           border: {
             default: "{core.colors.neutral.300}",
             hover: "{core.colors.neutral.500}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.1000}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.500}",
+            expanded: "{core.colors.neutral.500}",
             invalid: "{core.colors.red.600}"
           },
           text: {
@@ -477,7 +471,7 @@ var baseTheme = {
             disabled: "{core.colors.neutral.500}",
             checked: "{core.colors.neutral.0}",
             invalid: "{core.colors.neutral.900}",
-            indeterminate: "{core.colors.neutral.900}"
+            indeterminate: "{core.colors.neutral.0}"
           }
         },
         secondary: {
@@ -486,30 +480,30 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.100}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.50}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.50}"
           },
           border: {
             default: "{core.colors.neutral.200}",
             hover: "{core.colors.neutral.300}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.1000}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.900}",
             disabled: "{core.colors.neutral.500}",
             checked: "{core.colors.neutral.0}",
-            indeterminate: "{core.colors.neutral.900}"
+            indeterminate: "{core.colors.neutral.0}"
           }
         },
         negative: {
@@ -596,7 +590,7 @@ var baseTheme = {
             checked: "{core.colors.neutral.500}",
             indeterminate: "{core.colors.neutral.300}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -612,8 +606,8 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.100}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
-            droptarget: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
+            droptarget: "{core.colors.neutral.100}",
             visited: "{core.colors.neutral.50}"
           },
           border: {
@@ -622,8 +616,8 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.300}",
-            droptarget: "{core.colors.brand.300}"
+            selected: "{core.colors.neutral.400}",
+            droptarget: "{core.colors.neutral.400}"
           },
           text: {
             default: "{core.colors.neutral.900}",
@@ -637,7 +631,7 @@ var baseTheme = {
             hover: "{core.colors.neutral.100}",
             active: "{core.colors.neutral.200}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.100}",
             visited: "{core.colors.neutral.100}"
           },
@@ -647,7 +641,7 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.300}"
+            selected: "{core.colors.neutral.400}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -843,16 +837,18 @@ var baseTheme = {
           },
           border: {
             default: "{core.colors.neutral.0}",
-            focused: "{core.colors.brand.500}"
+            focused: "{core.colors.brand.500}",
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}"
           },
           text: {
-            default: "{core.colors.brand.700}",
-            hover: "{core.colors.brand.900}",
-            active: "{core.colors.brand.900}",
+            default: "{core.colors.neutral.800}",
+            hover: "{core.colors.neutral.1000}",
+            active: "{core.colors.neutral.1000}",
             disabled: "{core.colors.neutral.500}",
-            current: "{core.colors.brand.900}",
+            current: "{core.colors.neutral.1000}",
             visited: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.900}"
+            expanded: "{core.colors.neutral.1000}"
           }
         },
         secondary: {
@@ -861,9 +857,9 @@ var baseTheme = {
             hover: "{core.colors.neutral.100}",
             active: "{core.colors.neutral.200}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.100}",
-            current: "{core.colors.brand.100}",
+            current: "{core.colors.neutral.200}",
             visited: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.100}"
           },
@@ -873,15 +869,15 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.400}",
-            current: "{core.colors.brand.500}"
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}"
           },
           text: {
             default: "{core.colors.neutral.700}",
             hover: "{core.colors.neutral.900}",
             disabled: "{core.colors.neutral.500}",
-            selected: "{core.colors.brand.700}",
-            current: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}",
             visited: "{core.colors.neutral.700}",
             expanded: "{core.colors.neutral.900}"
           }
@@ -953,6 +949,11 @@ var baseTheme = {
         raised: "{core.elevation.level.2}",
         overlay: "{core.elevation.level.3}",
         blocking: "{core.elevation.level.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.0}",
+        overlay: "{core.colors.neutral.0}",
+        blocking: "{core.colors.neutral.0}"
       }
     },
     text: {
@@ -1108,9 +1109,9 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}"
+          sm: "{core.spacing.1}",
+          md: "{core.spacing.2}",
+          lg: "{core.spacing.4}"
         },
         surface: {
           sm: "{core.spacing.4}",
@@ -1145,11 +1146,7 @@ var baseTheme = {
       }
     },
     sizing: {
-      hit: {
-        min: "{core.sizing.hit.fine.min}",
-        base: "{core.sizing.hit.fine.base}",
-        prominent: "{core.sizing.hit.fine.prominent}"
-      },
+      hit: "{core.sizing.hit.fine}",
       icon: {
         sm: "{core.sizing.ramp.ui.2}",
         md: "{core.sizing.ramp.ui.3}",
@@ -1356,23 +1353,31 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.900}",
-            selected: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.800}",
             droptarget: "{core.colors.neutral.700}",
             pressed: "{core.colors.neutral.500}",
             expanded: "{core.colors.neutral.500}",
-            invalid: "{core.colors.neutral.700}"
+            invalid: "{core.colors.neutral.700}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           border: {
             default: "{core.colors.neutral.500}",
             hover: "{core.colors.neutral.300}",
+            active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.700}",
-            invalid: "{core.colors.red.300}"
+            invalid: "{core.colors.red.300}",
+            selected: "{core.colors.neutral.300}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           text: {
             default: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            invalid: "{core.colors.neutral.0}"
+            invalid: "{core.colors.neutral.0}",
+            checked: "{core.colors.neutral.900}",
+            indeterminate: "{core.colors.neutral.900}"
           }
         },
         secondary: {
@@ -1381,27 +1386,30 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.900}",
-            selected: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.800}",
             droptarget: "{core.colors.neutral.700}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.neutral.500}"
+            expanded: "{core.colors.neutral.500}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           border: {
             default: "{core.colors.neutral.500}",
             hover: "{core.colors.neutral.300}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.300}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.300}"
           },
           text: {
             default: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            checked: "{core.colors.neutral.0}"
+            checked: "{core.colors.neutral.900}",
+            indeterminate: "{core.colors.neutral.900}"
           }
         },
         negative: {
@@ -1463,7 +1471,7 @@ var darkAlternate = {
             hover: "{core.colors.neutral.700}",
             active: "{core.colors.neutral.700}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.700}",
             droptarget: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.700}"
           },
@@ -1481,7 +1489,7 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.500}",
             droptarget: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.700}"
           },
@@ -1637,16 +1645,18 @@ var darkAlternate = {
           },
           border: {
             default: "{core.colors.neutral.900}",
-            focused: "{core.colors.brand.400}"
+            focused: "{core.colors.brand.400}",
+            selected: "{core.colors.neutral.0}",
+            current: "{core.colors.neutral.0}"
           },
           text: {
-            default: "{core.colors.brand.300}",
-            hover: "{core.colors.brand.100}",
-            active: "{core.colors.brand.100}",
+            default: "{core.colors.neutral.200}",
+            hover: "{core.colors.neutral.0}",
+            active: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            current: "{core.colors.brand.100}",
+            current: "{core.colors.neutral.0}",
             visited: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.100}"
+            expanded: "{core.colors.neutral.0}"
           }
         },
         secondary: {
@@ -1654,8 +1664,8 @@ var darkAlternate = {
             default: "{core.colors.neutral.900}",
             hover: "{core.colors.neutral.700}",
             active: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
-            current: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.700}",
+            current: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.900}",
             expanded: "{core.colors.neutral.700}",
             disabled: "{core.colors.neutral.700}",
@@ -1666,15 +1676,15 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.400}",
-            selected: "{core.colors.brand.500}",
-            current: "{core.colors.brand.500}"
+            selected: "{core.colors.neutral.300}",
+            current: "{core.colors.neutral.300}"
           },
           text: {
             default: "{core.colors.neutral.300}",
             hover: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            selected: "{core.colors.brand.300}",
-            current: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.0}",
+            current: "{core.colors.neutral.0}",
             visited: "{core.colors.neutral.300}",
             expanded: "{core.colors.neutral.50}"
           }
@@ -1744,6 +1754,11 @@ var darkAlternate = {
         raised: "{core.elevation.emphatic.2}",
         overlay: "{core.elevation.emphatic.3}",
         blocking: "{core.elevation.emphatic.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.800}",
+        overlay: "{core.colors.neutral.700}",
+        blocking: "{core.colors.neutral.700}"
       }
     }
   }