@ttoss/fsl-theme 2.1.2 → 2.1.4

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`
@@ -290,6 +290,8 @@ export const myVars: CssVarsMap<MySemanticTokens> = buildVarsMap(
 
 For one-off custom keys, use `toCssVarName` from `@ttoss/fsl-theme/css` directly — no extended type required.
 
+The first-party dataviz extension ships its own mirror — import `datavizVars` from `@ttoss/fsl-theme/dataviz` instead of hand-rolling this recipe (e.g. `datavizVars.color.series[1]` → `'var(--tt-dataviz-color-series-1)'`).
+
 ## Next.js (SSR)
 
 ### React 19 App Router (recommended)

package/dist/{baseBundle-C6RP-2Qb.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-gTjIryKH.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-C6yVk4x0.cjs → baseBundle-DaO6jyk3.cjs}

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

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

@@ -52,17 +52,17 @@ var baseTheme = {
       },
       neutral: {
         0: "#ffffff",
-        50: "#f8fafc",
-        100: "#f1f5f9",
-        200: "#e2e8f0",
-        300: "#cbd5e1",
-        400: "#94a3b8",
-        500: "#64748b",
-        600: "#475569",
-        700: "#334155",
-        800: "#1e293b",
-        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",
@@ -133,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"
       },
@@ -352,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}",
@@ -426,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}",
@@ -445,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}"
@@ -456,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: {
@@ -471,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: {
@@ -480,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: {
@@ -590,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}",
@@ -606,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: {
@@ -616,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}",
@@ -631,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}"
           },
@@ -641,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}",
@@ -837,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: {
@@ -855,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}"
           },
@@ -867,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}"
           }
@@ -1351,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: {
@@ -1376,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: {
@@ -1458,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}"
           },
@@ -1476,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}"
           },
@@ -1632,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: {
@@ -1649,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}",
@@ -1661,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}"
           }