@verdify/tokens 0.7.0 → 0.8.0

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 Verdify.
+
+All rights reserved.
+
+This repository contains confidential and proprietary architecture documentation
+for the Verdify ecosystem (Verdify, Spare, Veraq). It is shared with employees,
+contractors, and authorized partners under the terms of their respective
+agreements. No license — express or implied — is granted to copy, distribute,
+or create derivative works outside those agreements.
+
+Replace this file with the organization's chosen license before any public or
+open-source release of any portion of the ecosystem.

package/dist/preset-adaptive.css

@@ -10,8 +10,56 @@
 [data-adaptive="dusk"] {
   --color-surface-canvas: #1a1a26;
   --color-text-primary: #c8d0de;
+  --color-surface-raised: #1f2638;
+  --color-surface-input: #1f2638;
+  --color-surface-border: #4a5567;
+  --color-surface-border-muted: #2a3142;
+  --color-text-secondary: #8a95a8;
+  --color-text-muted: #4a5567;
+  --color-text-disabled: #2a3142;
+  --color-text-inverse: #0b0f19;
+  --color-action-secondary-bg: #1f2638;
+  --color-action-secondary-fg: #c8d0de;
+  --color-action-secondary-border: #4a5567;
+  --color-action-secondary-bg-hover: #1f2638;
+  --color-action-ghost-fg: #c8d0de;
+  --color-action-ghost-bg-hover: #1f2638;
+  --color-border-default: #4a5567;
+  --color-border-strong: #2a3142;
+  --color-control-bg: #1f2638;
+  --color-control-border: #4a5567;
+  --color-control-fg: #c8d0de;
+  --color-control-placeholder: #4a5567;
+  --color-status-verified-on-surface: #00d17a;
+  --color-status-signal-on-surface: #4d9dff;
+  --color-status-caution-on-surface: #f5a623;
+  --color-status-critical-on-surface: #ff4d4d;
 }
 [data-adaptive="night"] {
   --color-surface-canvas: #060912;
   --color-text-primary: #c8d0de;
+  --color-surface-raised: #0f1320;
+  --color-surface-input: #161b2a;
+  --color-surface-border: #1f2638;
+  --color-surface-border-muted: #2a3142;
+  --color-text-secondary: #8a95a8;
+  --color-text-muted: #4a5567;
+  --color-text-disabled: #2a3142;
+  --color-text-inverse: #0b0f19;
+  --color-action-secondary-bg: #0f1320;
+  --color-action-secondary-fg: #c8d0de;
+  --color-action-secondary-border: #1f2638;
+  --color-action-secondary-bg-hover: #161b2a;
+  --color-action-ghost-fg: #c8d0de;
+  --color-action-ghost-bg-hover: #0f1320;
+  --color-border-default: #1f2638;
+  --color-border-strong: #2a3142;
+  --color-control-bg: #161b2a;
+  --color-control-border: #1f2638;
+  --color-control-fg: #c8d0de;
+  --color-control-placeholder: #4a5567;
+  --color-status-verified-on-surface: #00d17a;
+  --color-status-signal-on-surface: #4d9dff;
+  --color-status-caution-on-surface: #f5a623;
+  --color-status-critical-on-surface: #ff4d4d;
 }

package/dist/preset.css

@@ -66,18 +66,22 @@
   --color-action-destructive-fg: #fbfcfe;
   --color-action-destructive-border: #be3939;
   --color-status-verified-fg: #007947;
+  --color-status-verified-on-surface: #007947;
   --color-status-verified-bg: #e8ecf4;
   --color-status-verified-border: #007947;
   --color-status-verified-accent: #00d17a;
   --color-status-signal-fg: #346bad;
+  --color-status-signal-on-surface: #346bad;
   --color-status-signal-bg: #e8ecf4;
   --color-status-signal-border: #346bad;
   --color-status-signal-accent: #4d9dff;
   --color-status-caution-fg: #8e6014;
+  --color-status-caution-on-surface: #8e6014;
   --color-status-caution-bg: #e8ecf4;
   --color-status-caution-border: #8e6014;
   --color-status-caution-accent: #f5a623;
   --color-status-critical-fg: #be3939;
+  --color-status-critical-on-surface: #be3939;
   --color-status-critical-bg: #e8ecf4;
   --color-status-critical-border: #be3939;
   --color-status-critical-accent: #ff4d4d;

package/dist/tokens.css

@@ -60,6 +60,18 @@
   --color-text-disabled: #b0baca; /** Disabled text — low-contrast, deliberate. Aliases mist.400; downstream consumers may alternatively compose text.primary with state.opacity.disabled (0.38) for a different visual register. */
   --color-text-inverse: #fbfcfe; /** Text on dark surfaces (e.g. obsidian backdrop, dark scrim). Aliases mist.50 — the lightest neutral. Distinct from on-brand: inverse is for neutral-dark contexts; on-brand is reserved for brand backgrounds. */
   --color-text-on-brand: #fbfcfe; /** Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline. */
+  --color-dark-surface-raised: #0f1320; /** Raised surface · cards — dark family (dusk/night). Mirrors surface.raised in light. */
+  --color-dark-surface-input: #161b2a; /** Input / well — dark family (dusk/night). */
+  --color-dark-surface-border: #1f2638; /** Border / divider — dark family (dusk/night). */
+  --color-dark-surface-border-muted: #2a3142; /** Muted border — dark family (dusk/night). */
+  --color-dark-text-secondary: #8a95a8; /** Secondary text — dark family (dusk/night); 6.6:1 on night canvas. */
+  --color-dark-text-muted: #4a5567; /** Muted text — dark family; de-emphasized, same sub-UI register as light muted (~2.3-2.6:1). */
+  --color-dark-text-disabled: #2a3142; /** Disabled text — dark family; low-contrast, deliberate (contrast-exempt). */
+  --color-dark-text-inverse: #0b0f19; /** Text on light surfaces within a dark context — dark family. (0 current component uses.) */
+  --color-dusk-surface-raised: #1f2638; /** Raised surface · cards — DUSK band only. The dusk canvas (#1a1a26, L≈0.011) is lighter than the shared dark family's raised (obsidian.850, L≈0.0067), which inverted elevation. Obsidian.700 (L≈0.0196) sits ABOVE the dusk canvas so cards read raised, while secondary text still clears AA (≈5.0:1). */
+  --color-dusk-surface-input: #1f2638; /** Input / well — DUSK band only. Same tone as dusk raised (lifted above the dusk canvas); distinguished from cards by its border. Obsidian.700 keeps muted text at the ≈2.0:1 perceptible floor (obsidian.600 would drop it to ~1.7:1 and fail). */
+  --color-dusk-surface-border: #4a5567; /** Border / divider — DUSK band only. Obsidian.500 (L≈0.089) gives inputs/cards a visible boundary on the dusk canvas (≈2.3:1) where the shared dark border (obsidian.700) would be ~invisible. */
+  --color-dusk-surface-border-muted: #2a3142; /** Muted border — DUSK band only; the softer divider above the dusk canvas. */
   --color-scrim-light: rgba(11, 15, 25, 0.5); /** Modal/sheet backdrop on light surfaces — obsidian-900 at 50% opacity (per BR-2 spec §4). */
   --color-scrim-dark: rgba(6, 9, 18, 0.7); /** Modal/sheet backdrop on dark surfaces — obsidian-950 at 70% opacity for stronger isolation. */
   --color-action-primary-bg: #7053e5; /** Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. — AA-darkened (brand-strong, 5.04:1 with white). */
@@ -77,18 +89,22 @@
   --color-action-destructive-fg: #fbfcfe; /** Text/icon on a destructive action. */
   --color-action-destructive-border: #be3939; /** Destructive action border. — AA-darkened (critical-strong, 5.34:1 with white). */
   --color-status-verified-fg: #007947; /** Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand. */
+  --color-status-verified-on-surface: #007947; /** Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip. */
   --color-status-verified-bg: #e8ecf4; /** Verified status chip background — neutral; color carried by fg/border (restraint over volume). */
   --color-status-verified-border: #007947; /** Verified status border — AA-dark shade (≥3:1 non-text). */
   --color-status-verified-accent: #00d17a; /** Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement. */
   --color-status-signal-fg: #346bad; /** Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg). */
+  --color-status-signal-on-surface: #346bad; /** Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip. */
   --color-status-signal-bg: #e8ecf4; /** Informational status chip background — neutral. */
   --color-status-signal-border: #346bad; /** Informational status border — AA-dark shade (≥3:1 non-text). */
   --color-status-signal-accent: #4d9dff; /** Signal bright decorative accent (#4D9DFF) — for icons/fills. */
   --color-status-caution-fg: #8e6014; /** Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress. */
+  --color-status-caution-on-surface: #8e6014; /** Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip. */
   --color-status-caution-bg: #e8ecf4; /** Caution status chip background — neutral. */
   --color-status-caution-border: #8e6014; /** Caution status border — AA-dark shade (≥3:1 non-text). */
   --color-status-caution-accent: #f5a623; /** Caution bright decorative accent (#F5A623) — for icons/fills. */
   --color-status-critical-fg: #be3939; /** Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure. */
+  --color-status-critical-on-surface: #be3939; /** Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip. */
   --color-status-critical-bg: #e8ecf4; /** Critical status chip background — neutral. */
   --color-status-critical-border: #be3939; /** Critical status border — AA-dark shade (≥3:1 non-text). */
   --color-status-critical-accent: #ff4d4d; /** Critical bright decorative accent (#FF4D4D) — for icons/fills. */

package/dist/tokens.d.ts

@@ -101,6 +101,28 @@ declare const tokens: {
       inverse: DesignToken;
       "on-brand": DesignToken;
     };
+    dark: {
+      surface: {
+        raised: DesignToken;
+        input: DesignToken;
+        border: DesignToken;
+        "border-muted": DesignToken;
+      };
+      text: {
+        secondary: DesignToken;
+        muted: DesignToken;
+        disabled: DesignToken;
+        inverse: DesignToken;
+      };
+    };
+    dusk: {
+      surface: {
+        raised: DesignToken;
+        input: DesignToken;
+        border: DesignToken;
+        "border-muted": DesignToken;
+      };
+    };
     scrim: {
       light: DesignToken;
       dark: DesignToken;
@@ -132,24 +154,28 @@ declare const tokens: {
     status: {
       verified: {
         fg: DesignToken;
+        "on-surface": DesignToken;
         bg: DesignToken;
         border: DesignToken;
         accent: DesignToken;
       };
       signal: {
         fg: DesignToken;
+        "on-surface": DesignToken;
         bg: DesignToken;
         border: DesignToken;
         accent: DesignToken;
       };
       caution: {
         fg: DesignToken;
+        "on-surface": DesignToken;
         bg: DesignToken;
         border: DesignToken;
         accent: DesignToken;
       };
       critical: {
         fg: DesignToken;
+        "on-surface": DesignToken;
         bg: DesignToken;
         border: DesignToken;
         accent: DesignToken;

package/dist/tokens.js

@@ -1176,6 +1176,274 @@ module.exports = {
         path: ["color", "text", "on-brand"],
       },
     },
+    dark: {
+      surface: {
+        raised: {
+          $value: "#0f1320",
+          $type: "color",
+          $description:
+            "Raised surface · cards — dark family (dusk/night). Mirrors surface.raised in light.",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.850}",
+            $type: "color",
+            $description:
+              "Raised surface · cards — dark family (dusk/night). Mirrors surface.raised in light.",
+          },
+          name: "ColorDarkSurfaceRaised",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "surface",
+            subitem: "raised",
+          },
+          path: ["color", "dark", "surface", "raised"],
+        },
+        input: {
+          $value: "#161b2a",
+          $type: "color",
+          $description: "Input / well — dark family (dusk/night).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.800}",
+            $type: "color",
+            $description: "Input / well — dark family (dusk/night).",
+          },
+          name: "ColorDarkSurfaceInput",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "surface",
+            subitem: "input",
+          },
+          path: ["color", "dark", "surface", "input"],
+        },
+        border: {
+          $value: "#1f2638",
+          $type: "color",
+          $description: "Border / divider — dark family (dusk/night).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.700}",
+            $type: "color",
+            $description: "Border / divider — dark family (dusk/night).",
+          },
+          name: "ColorDarkSurfaceBorder",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "surface",
+            subitem: "border",
+          },
+          path: ["color", "dark", "surface", "border"],
+        },
+        "border-muted": {
+          $value: "#2a3142",
+          $type: "color",
+          $description: "Muted border — dark family (dusk/night).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.600}",
+            $type: "color",
+            $description: "Muted border — dark family (dusk/night).",
+          },
+          name: "ColorDarkSurfaceBorderMuted",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "surface",
+            subitem: "border-muted",
+          },
+          path: ["color", "dark", "surface", "border-muted"],
+        },
+      },
+      text: {
+        secondary: {
+          $value: "#8a95a8",
+          $type: "color",
+          $description:
+            "Secondary text — dark family (dusk/night); 6.6:1 on night canvas.",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.400}",
+            $type: "color",
+            $description:
+              "Secondary text — dark family (dusk/night); 6.6:1 on night canvas.",
+          },
+          name: "ColorDarkTextSecondary",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "text",
+            subitem: "secondary",
+          },
+          path: ["color", "dark", "text", "secondary"],
+        },
+        muted: {
+          $value: "#4a5567",
+          $type: "color",
+          $description:
+            "Muted text — dark family; de-emphasized, same sub-UI register as light muted (~2.3-2.6:1).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.500}",
+            $type: "color",
+            $description:
+              "Muted text — dark family; de-emphasized, same sub-UI register as light muted (~2.3-2.6:1).",
+          },
+          name: "ColorDarkTextMuted",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "text",
+            subitem: "muted",
+          },
+          path: ["color", "dark", "text", "muted"],
+        },
+        disabled: {
+          $value: "#2a3142",
+          $type: "color",
+          $description:
+            "Disabled text — dark family; low-contrast, deliberate (contrast-exempt).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.600}",
+            $type: "color",
+            $description:
+              "Disabled text — dark family; low-contrast, deliberate (contrast-exempt).",
+          },
+          name: "ColorDarkTextDisabled",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "text",
+            subitem: "disabled",
+          },
+          path: ["color", "dark", "text", "disabled"],
+        },
+        inverse: {
+          $value: "#0b0f19",
+          $type: "color",
+          $description:
+            "Text on light surfaces within a dark context — dark family. (0 current component uses.)",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.mist.950}",
+            $type: "color",
+            $description:
+              "Text on light surfaces within a dark context — dark family. (0 current component uses.)",
+          },
+          name: "ColorDarkTextInverse",
+          attributes: {
+            category: "color",
+            type: "dark",
+            item: "text",
+            subitem: "inverse",
+          },
+          path: ["color", "dark", "text", "inverse"],
+        },
+      },
+    },
+    dusk: {
+      surface: {
+        raised: {
+          $value: "#1f2638",
+          $type: "color",
+          $description:
+            "Raised surface · cards — DUSK band only. The dusk canvas (#1a1a26, L≈0.011) is lighter than the shared dark family's raised (obsidian.850, L≈0.0067), which inverted elevation. Obsidian.700 (L≈0.0196) sits ABOVE the dusk canvas so cards read raised, while secondary text still clears AA (≈5.0:1).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.700}",
+            $type: "color",
+            $description:
+              "Raised surface · cards — DUSK band only. The dusk canvas (#1a1a26, L≈0.011) is lighter than the shared dark family's raised (obsidian.850, L≈0.0067), which inverted elevation. Obsidian.700 (L≈0.0196) sits ABOVE the dusk canvas so cards read raised, while secondary text still clears AA (≈5.0:1).",
+          },
+          name: "ColorDuskSurfaceRaised",
+          attributes: {
+            category: "color",
+            type: "dusk",
+            item: "surface",
+            subitem: "raised",
+          },
+          path: ["color", "dusk", "surface", "raised"],
+        },
+        input: {
+          $value: "#1f2638",
+          $type: "color",
+          $description:
+            "Input / well — DUSK band only. Same tone as dusk raised (lifted above the dusk canvas); distinguished from cards by its border. Obsidian.700 keeps muted text at the ≈2.0:1 perceptible floor (obsidian.600 would drop it to ~1.7:1 and fail).",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.700}",
+            $type: "color",
+            $description:
+              "Input / well — DUSK band only. Same tone as dusk raised (lifted above the dusk canvas); distinguished from cards by its border. Obsidian.700 keeps muted text at the ≈2.0:1 perceptible floor (obsidian.600 would drop it to ~1.7:1 and fail).",
+          },
+          name: "ColorDuskSurfaceInput",
+          attributes: {
+            category: "color",
+            type: "dusk",
+            item: "surface",
+            subitem: "input",
+          },
+          path: ["color", "dusk", "surface", "input"],
+        },
+        border: {
+          $value: "#4a5567",
+          $type: "color",
+          $description:
+            "Border / divider — DUSK band only. Obsidian.500 (L≈0.089) gives inputs/cards a visible boundary on the dusk canvas (≈2.3:1) where the shared dark border (obsidian.700) would be ~invisible.",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.500}",
+            $type: "color",
+            $description:
+              "Border / divider — DUSK band only. Obsidian.500 (L≈0.089) gives inputs/cards a visible boundary on the dusk canvas (≈2.3:1) where the shared dark border (obsidian.700) would be ~invisible.",
+          },
+          name: "ColorDuskSurfaceBorder",
+          attributes: {
+            category: "color",
+            type: "dusk",
+            item: "surface",
+            subitem: "border",
+          },
+          path: ["color", "dusk", "surface", "border"],
+        },
+        "border-muted": {
+          $value: "#2a3142",
+          $type: "color",
+          $description:
+            "Muted border — DUSK band only; the softer divider above the dusk canvas.",
+          filePath: "src/tokens/color.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.neutral.obsidian.600}",
+            $type: "color",
+            $description:
+              "Muted border — DUSK band only; the softer divider above the dusk canvas.",
+          },
+          name: "ColorDuskSurfaceBorderMuted",
+          attributes: {
+            category: "color",
+            type: "dusk",
+            item: "surface",
+            subitem: "border-muted",
+          },
+          path: ["color", "dusk", "surface", "border-muted"],
+        },
+      },
+    },
     scrim: {
       light: {
         $value: "#0b0f1980",
@@ -1543,6 +1811,28 @@ module.exports = {
           },
           path: ["color", "status", "verified", "fg"],
         },
+        "on-surface": {
+          $value: "#007947",
+          $type: "color",
+          $description:
+            "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          filePath: "src/tokens/component.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.semantic.verified-strong}",
+            $type: "color",
+            $description:
+              "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          },
+          name: "ColorStatusVerifiedOnSurface",
+          attributes: {
+            category: "color",
+            type: "status",
+            item: "verified",
+            subitem: "on-surface",
+          },
+          path: ["color", "status", "verified", "on-surface"],
+        },
         bg: {
           $value: "#e8ecf4",
           $type: "color",
@@ -1633,6 +1923,28 @@ module.exports = {
           },
           path: ["color", "status", "signal", "fg"],
         },
+        "on-surface": {
+          $value: "#346bad",
+          $type: "color",
+          $description:
+            "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          filePath: "src/tokens/component.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.semantic.signal-strong}",
+            $type: "color",
+            $description:
+              "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          },
+          name: "ColorStatusSignalOnSurface",
+          attributes: {
+            category: "color",
+            type: "status",
+            item: "signal",
+            subitem: "on-surface",
+          },
+          path: ["color", "status", "signal", "on-surface"],
+        },
         bg: {
           $value: "#e8ecf4",
           $type: "color",
@@ -1721,6 +2033,28 @@ module.exports = {
           },
           path: ["color", "status", "caution", "fg"],
         },
+        "on-surface": {
+          $value: "#8e6014",
+          $type: "color",
+          $description:
+            "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          filePath: "src/tokens/component.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.semantic.caution-strong}",
+            $type: "color",
+            $description:
+              "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          },
+          name: "ColorStatusCautionOnSurface",
+          attributes: {
+            category: "color",
+            type: "status",
+            item: "caution",
+            subitem: "on-surface",
+          },
+          path: ["color", "status", "caution", "on-surface"],
+        },
         bg: {
           $value: "#e8ecf4",
           $type: "color",
@@ -1809,6 +2143,28 @@ module.exports = {
           },
           path: ["color", "status", "critical", "fg"],
         },
+        "on-surface": {
+          $value: "#be3939",
+          $type: "color",
+          $description:
+            "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          filePath: "src/tokens/component.tokens.json",
+          isSource: true,
+          original: {
+            $value: "{color.semantic.critical-strong}",
+            $type: "color",
+            $description:
+              "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.",
+          },
+          name: "ColorStatusCriticalOnSurface",
+          attributes: {
+            category: "color",
+            type: "status",
+            item: "critical",
+            subitem: "on-surface",
+          },
+          path: ["color", "status", "critical", "on-surface"],
+        },
         bg: {
           $value: "#e8ecf4",
           $type: "color",

package/dist/tokens.json

@@ -56,6 +56,18 @@
   "ColorTextDisabled": "#b0baca",
   "ColorTextInverse": "#fbfcfe",
   "ColorTextOnBrand": "#fbfcfe",
+  "ColorDarkSurfaceRaised": "#0f1320",
+  "ColorDarkSurfaceInput": "#161b2a",
+  "ColorDarkSurfaceBorder": "#1f2638",
+  "ColorDarkSurfaceBorderMuted": "#2a3142",
+  "ColorDarkTextSecondary": "#8a95a8",
+  "ColorDarkTextMuted": "#4a5567",
+  "ColorDarkTextDisabled": "#2a3142",
+  "ColorDarkTextInverse": "#0b0f19",
+  "ColorDuskSurfaceRaised": "#1f2638",
+  "ColorDuskSurfaceInput": "#1f2638",
+  "ColorDuskSurfaceBorder": "#4a5567",
+  "ColorDuskSurfaceBorderMuted": "#2a3142",
   "ColorScrimLight": "#0b0f1980",
   "ColorScrimDark": "#060912b3",
   "ColorActionPrimaryBg": "#7053e5",
@@ -73,18 +85,22 @@
   "ColorActionDestructiveFg": "#fbfcfe",
   "ColorActionDestructiveBorder": "#be3939",
   "ColorStatusVerifiedFg": "#007947",
+  "ColorStatusVerifiedOnSurface": "#007947",
   "ColorStatusVerifiedBg": "#e8ecf4",
   "ColorStatusVerifiedBorder": "#007947",
   "ColorStatusVerifiedAccent": "#00d17a",
   "ColorStatusSignalFg": "#346bad",
+  "ColorStatusSignalOnSurface": "#346bad",
   "ColorStatusSignalBg": "#e8ecf4",
   "ColorStatusSignalBorder": "#346bad",
   "ColorStatusSignalAccent": "#4d9dff",
   "ColorStatusCautionFg": "#8e6014",
+  "ColorStatusCautionOnSurface": "#8e6014",
   "ColorStatusCautionBg": "#e8ecf4",
   "ColorStatusCautionBorder": "#8e6014",
   "ColorStatusCautionAccent": "#f5a623",
   "ColorStatusCriticalFg": "#be3939",
+  "ColorStatusCriticalOnSurface": "#be3939",
   "ColorStatusCriticalBg": "#e8ecf4",
   "ColorStatusCriticalBorder": "#be3939",
   "ColorStatusCriticalAccent": "#ff4d4d",

package/dist/tokens.mjs

@@ -59,6 +59,18 @@ export const ColorTextMuted = "#8a95a8"; // Muted text — shared with obsidian.
 export const ColorTextDisabled = "#b0baca"; // Disabled text — low-contrast, deliberate. Aliases mist.400; downstream consumers may alternatively compose text.primary with state.opacity.disabled (0.38) for a different visual register.
 export const ColorTextInverse = "#fbfcfe"; // Text on dark surfaces (e.g. obsidian backdrop, dark scrim). Aliases mist.50 — the lightest neutral. Distinct from on-brand: inverse is for neutral-dark contexts; on-brand is reserved for brand backgrounds.
 export const ColorTextOnBrand = "#fbfcfe"; // Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline.
+export const ColorDarkSurfaceRaised = "#0f1320"; // Raised surface · cards — dark family (dusk/night). Mirrors surface.raised in light.
+export const ColorDarkSurfaceInput = "#161b2a"; // Input / well — dark family (dusk/night).
+export const ColorDarkSurfaceBorder = "#1f2638"; // Border / divider — dark family (dusk/night).
+export const ColorDarkSurfaceBorderMuted = "#2a3142"; // Muted border — dark family (dusk/night).
+export const ColorDarkTextSecondary = "#8a95a8"; // Secondary text — dark family (dusk/night); 6.6:1 on night canvas.
+export const ColorDarkTextMuted = "#4a5567"; // Muted text — dark family; de-emphasized, same sub-UI register as light muted (~2.3-2.6:1).
+export const ColorDarkTextDisabled = "#2a3142"; // Disabled text — dark family; low-contrast, deliberate (contrast-exempt).
+export const ColorDarkTextInverse = "#0b0f19"; // Text on light surfaces within a dark context — dark family. (0 current component uses.)
+export const ColorDuskSurfaceRaised = "#1f2638"; // Raised surface · cards — DUSK band only. The dusk canvas (#1a1a26, L≈0.011) is lighter than the shared dark family's raised (obsidian.850, L≈0.0067), which inverted elevation. Obsidian.700 (L≈0.0196) sits ABOVE the dusk canvas so cards read raised, while secondary text still clears AA (≈5.0:1).
+export const ColorDuskSurfaceInput = "#1f2638"; // Input / well — DUSK band only. Same tone as dusk raised (lifted above the dusk canvas); distinguished from cards by its border. Obsidian.700 keeps muted text at the ≈2.0:1 perceptible floor (obsidian.600 would drop it to ~1.7:1 and fail).
+export const ColorDuskSurfaceBorder = "#4a5567"; // Border / divider — DUSK band only. Obsidian.500 (L≈0.089) gives inputs/cards a visible boundary on the dusk canvas (≈2.3:1) where the shared dark border (obsidian.700) would be ~invisible.
+export const ColorDuskSurfaceBorderMuted = "#2a3142"; // Muted border — DUSK band only; the softer divider above the dusk canvas.
 export const ColorScrimLight = "#0b0f1980"; // Modal/sheet backdrop on light surfaces — obsidian-900 at 50% opacity (per BR-2 spec §4).
 export const ColorScrimDark = "#060912b3"; // Modal/sheet backdrop on dark surfaces — obsidian-950 at 70% opacity for stronger isolation.
 export const ColorActionPrimaryBg = "#7053e5"; // Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. — AA-darkened (brand-strong, 5.04:1 with white).
@@ -76,18 +88,22 @@ export const ColorActionDestructiveBg = "#be3939"; // Destructive action backgro
 export const ColorActionDestructiveFg = "#fbfcfe"; // Text/icon on a destructive action.
 export const ColorActionDestructiveBorder = "#be3939"; // Destructive action border. — AA-darkened (critical-strong, 5.34:1 with white).
 export const ColorStatusVerifiedFg = "#007947"; // Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand.
+export const ColorStatusVerifiedOnSurface = "#007947"; // Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.
 export const ColorStatusVerifiedBg = "#e8ecf4"; // Verified status chip background — neutral; color carried by fg/border (restraint over volume).
 export const ColorStatusVerifiedBorder = "#007947"; // Verified status border — AA-dark shade (≥3:1 non-text).
 export const ColorStatusVerifiedAccent = "#00d17a"; // Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement.
 export const ColorStatusSignalFg = "#346bad"; // Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg).
+export const ColorStatusSignalOnSurface = "#346bad"; // Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.
 export const ColorStatusSignalBg = "#e8ecf4"; // Informational status chip background — neutral.
 export const ColorStatusSignalBorder = "#346bad"; // Informational status border — AA-dark shade (≥3:1 non-text).
 export const ColorStatusSignalAccent = "#4d9dff"; // Signal bright decorative accent (#4D9DFF) — for icons/fills.
 export const ColorStatusCautionFg = "#8e6014"; // Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress.
+export const ColorStatusCautionOnSurface = "#8e6014"; // Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.
 export const ColorStatusCautionBg = "#e8ecf4"; // Caution status chip background — neutral.
 export const ColorStatusCautionBorder = "#8e6014"; // Caution status border — AA-dark shade (≥3:1 non-text).
 export const ColorStatusCautionAccent = "#f5a623"; // Caution bright decorative accent (#F5A623) — for icons/fills.
 export const ColorStatusCriticalFg = "#be3939"; // Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure.
+export const ColorStatusCriticalOnSurface = "#be3939"; // Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip.
 export const ColorStatusCriticalBg = "#e8ecf4"; // Critical status chip background — neutral.
 export const ColorStatusCriticalBorder = "#be3939"; // Critical status border — AA-dark shade (≥3:1 non-text).
 export const ColorStatusCriticalAccent = "#ff4d4d"; // Critical bright decorative accent (#FF4D4D) — for icons/fills.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdify/tokens",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Verdify design tokens — W3C DTCG sources with Tailwind v4 preset, CSS vars, JS/TS, and raw JSON outputs",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -13,29 +13,36 @@
     "directory": "packages/tokens"
   },
   "exports": {
-    ".":                  { "import": "./dist/tokens.mjs", "require": "./dist/tokens.js", "types": "./dist/tokens.d.ts" },
-    "./css":              "./dist/tokens.css",
-    "./preset":           "./dist/preset.css",
-    "./preset-adaptive":  "./dist/preset-adaptive.css",
-    "./json":             "./dist/tokens.json",
-    "./tokens/*":         "./src/tokens/*"
-  },
-  "files": ["dist/", "src/tokens/", "README.md"],
-  "scripts": {
-    "sync":           "tsx scripts/sync-color.ts",
-    "sync:print":     "tsx scripts/sync-print.ts",
-    "build:ase":      "tsx scripts/build-ase.ts",
-    "validate":       "tsx scripts/validate.ts",
-    "build":          "pnpm run sync && pnpm run sync:print && pnpm run build:ase && pnpm run validate && tsx scripts/build.ts",
-    "verify":         "pnpm run build && git diff --exit-code src/ ../ui_flutter/lib/src/theme/",
-    "test":           "tsx scripts/test.ts",
-    "prepublishOnly": "pnpm run build"
+    ".": {
+      "import": "./dist/tokens.mjs",
+      "require": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./css": "./dist/tokens.css",
+    "./preset": "./dist/preset.css",
+    "./preset-adaptive": "./dist/preset-adaptive.css",
+    "./json": "./dist/tokens.json",
+    "./tokens/*": "./src/tokens/*"
   },
+  "files": [
+    "dist/",
+    "src/tokens/",
+    "README.md"
+  ],
   "devDependencies": {
     "style-dictionary": "^4.0.0",
-    "tsx":              "^4.7.0",
-    "typescript":       "^5.4.0",
-    "ajv":              "^8.12.0",
-    "@types/node":      "^20.0.0"
+    "tsx": "^4.7.0",
+    "typescript": "^5.4.0",
+    "ajv": "^8.12.0",
+    "@types/node": "^20.0.0"
+  },
+  "scripts": {
+    "sync": "tsx scripts/sync-color.ts",
+    "sync:print": "tsx scripts/sync-print.ts",
+    "build:ase": "tsx scripts/build-ase.ts",
+    "validate": "tsx scripts/validate.ts",
+    "build": "pnpm run sync && pnpm run sync:print && pnpm run build:ase && pnpm run validate && tsx scripts/build.ts",
+    "verify": "pnpm run build && git diff --exit-code src/ ../ui_flutter/lib/src/theme/",
+    "test": "tsx scripts/test.ts"
   }
-}
+}

package/src/tokens/color.tokens.json

@@ -264,6 +264,76 @@
         "$description": "Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline."
       }
     },
+    "dark": {
+      "surface": {
+        "raised": {
+          "$value": "{color.neutral.obsidian.850}",
+          "$type": "color",
+          "$description": "Raised surface · cards — dark family (dusk/night). Mirrors surface.raised in light."
+        },
+        "input": {
+          "$value": "{color.neutral.obsidian.800}",
+          "$type": "color",
+          "$description": "Input / well — dark family (dusk/night)."
+        },
+        "border": {
+          "$value": "{color.neutral.obsidian.700}",
+          "$type": "color",
+          "$description": "Border / divider — dark family (dusk/night)."
+        },
+        "border-muted": {
+          "$value": "{color.neutral.obsidian.600}",
+          "$type": "color",
+          "$description": "Muted border — dark family (dusk/night)."
+        }
+      },
+      "text": {
+        "secondary": {
+          "$value": "{color.neutral.obsidian.400}",
+          "$type": "color",
+          "$description": "Secondary text — dark family (dusk/night); 6.6:1 on night canvas."
+        },
+        "muted": {
+          "$value": "{color.neutral.obsidian.500}",
+          "$type": "color",
+          "$description": "Muted text — dark family; de-emphasized, same sub-UI register as light muted (~2.3-2.6:1)."
+        },
+        "disabled": {
+          "$value": "{color.neutral.obsidian.600}",
+          "$type": "color",
+          "$description": "Disabled text — dark family; low-contrast, deliberate (contrast-exempt)."
+        },
+        "inverse": {
+          "$value": "{color.neutral.mist.950}",
+          "$type": "color",
+          "$description": "Text on light surfaces within a dark context — dark family. (0 current component uses.)"
+        }
+      }
+    },
+    "dusk": {
+      "surface": {
+        "raised": {
+          "$value": "{color.neutral.obsidian.700}",
+          "$type": "color",
+          "$description": "Raised surface · cards — DUSK band only. The dusk canvas (#1a1a26, L≈0.011) is lighter than the shared dark family's raised (obsidian.850, L≈0.0067), which inverted elevation. Obsidian.700 (L≈0.0196) sits ABOVE the dusk canvas so cards read raised, while secondary text still clears AA (≈5.0:1)."
+        },
+        "input": {
+          "$value": "{color.neutral.obsidian.700}",
+          "$type": "color",
+          "$description": "Input / well — DUSK band only. Same tone as dusk raised (lifted above the dusk canvas); distinguished from cards by its border. Obsidian.700 keeps muted text at the ≈2.0:1 perceptible floor (obsidian.600 would drop it to ~1.7:1 and fail)."
+        },
+        "border": {
+          "$value": "{color.neutral.obsidian.500}",
+          "$type": "color",
+          "$description": "Border / divider — DUSK band only. Obsidian.500 (L≈0.089) gives inputs/cards a visible boundary on the dusk canvas (≈2.3:1) where the shared dark border (obsidian.700) would be ~invisible."
+        },
+        "border-muted": {
+          "$value": "{color.neutral.obsidian.600}",
+          "$type": "color",
+          "$description": "Muted border — DUSK band only; the softer divider above the dusk canvas."
+        }
+      }
+    },
     "scrim": {
       "light": {
         "$value": "rgba(11, 15, 25, 0.5)",

package/src/tokens/component.tokens.json

@@ -26,28 +26,32 @@
     },
     "status": {
       "verified": {
-        "fg":     { "$value": "{color.semantic.verified-strong}", "$type": "color", "$description": "Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand." },
-        "bg":     { "$value": "{color.surface.raised}",           "$type": "color", "$description": "Verified status chip background — neutral; color carried by fg/border (restraint over volume)." },
-        "border": { "$value": "{color.semantic.verified-strong}", "$type": "color", "$description": "Verified status border — AA-dark shade (≥3:1 non-text)." },
-        "accent": { "$value": "{color.semantic.verified}",        "$type": "color", "$description": "Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement." }
+        "fg":         { "$value": "{color.semantic.verified-strong}", "$type": "color", "$description": "Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand." },
+        "on-surface": { "$value": "{color.semantic.verified-strong}", "$type": "color", "$description": "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip." },
+        "bg":         { "$value": "{color.surface.raised}",           "$type": "color", "$description": "Verified status chip background — neutral; color carried by fg/border (restraint over volume)." },
+        "border":     { "$value": "{color.semantic.verified-strong}", "$type": "color", "$description": "Verified status border — AA-dark shade (≥3:1 non-text)." },
+        "accent":     { "$value": "{color.semantic.verified}",        "$type": "color", "$description": "Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement." }
       },
       "signal": {
-        "fg":     { "$value": "{color.semantic.signal-strong}", "$type": "color", "$description": "Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg)." },
-        "bg":     { "$value": "{color.surface.raised}",         "$type": "color", "$description": "Informational status chip background — neutral." },
-        "border": { "$value": "{color.semantic.signal-strong}", "$type": "color", "$description": "Informational status border — AA-dark shade (≥3:1 non-text)." },
-        "accent": { "$value": "{color.semantic.signal}",        "$type": "color", "$description": "Signal bright decorative accent (#4D9DFF) — for icons/fills." }
+        "fg":         { "$value": "{color.semantic.signal-strong}", "$type": "color", "$description": "Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg)." },
+        "on-surface": { "$value": "{color.semantic.signal-strong}", "$type": "color", "$description": "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip." },
+        "bg":         { "$value": "{color.surface.raised}",         "$type": "color", "$description": "Informational status chip background — neutral." },
+        "border":     { "$value": "{color.semantic.signal-strong}", "$type": "color", "$description": "Informational status border — AA-dark shade (≥3:1 non-text)." },
+        "accent":     { "$value": "{color.semantic.signal}",        "$type": "color", "$description": "Signal bright decorative accent (#4D9DFF) — for icons/fills." }
       },
       "caution": {
-        "fg":     { "$value": "{color.semantic.caution-strong}", "$type": "color", "$description": "Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress." },
-        "bg":     { "$value": "{color.surface.raised}",          "$type": "color", "$description": "Caution status chip background — neutral." },
-        "border": { "$value": "{color.semantic.caution-strong}", "$type": "color", "$description": "Caution status border — AA-dark shade (≥3:1 non-text)." },
-        "accent": { "$value": "{color.semantic.caution}",        "$type": "color", "$description": "Caution bright decorative accent (#F5A623) — for icons/fills." }
+        "fg":         { "$value": "{color.semantic.caution-strong}", "$type": "color", "$description": "Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress." },
+        "on-surface": { "$value": "{color.semantic.caution-strong}", "$type": "color", "$description": "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip." },
+        "bg":         { "$value": "{color.surface.raised}",          "$type": "color", "$description": "Caution status chip background — neutral." },
+        "border":     { "$value": "{color.semantic.caution-strong}", "$type": "color", "$description": "Caution status border — AA-dark shade (≥3:1 non-text)." },
+        "accent":     { "$value": "{color.semantic.caution}",        "$type": "color", "$description": "Caution bright decorative accent (#F5A623) — for icons/fills." }
       },
       "critical": {
-        "fg":     { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure." },
-        "bg":     { "$value": "{color.surface.raised}",           "$type": "color", "$description": "Critical status chip background — neutral." },
-        "border": { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Critical status border — AA-dark shade (≥3:1 non-text)." },
-        "accent": { "$value": "{color.semantic.critical}",        "$type": "color", "$description": "Critical bright decorative accent (#FF4D4D) — for icons/fills." }
+        "fg":         { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure." },
+        "on-surface": { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Status foreground for INLINE status text/icons on a theme surface — band-aware: -strong on light bands, bright base on dusk/night (AA on dark). Distinct from .fg, which is for the always-light status chip." },
+        "bg":         { "$value": "{color.surface.raised}",           "$type": "color", "$description": "Critical status chip background — neutral." },
+        "border":     { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Critical status border — AA-dark shade (≥3:1 non-text)." },
+        "accent":     { "$value": "{color.semantic.critical}",        "$type": "color", "$description": "Critical bright decorative accent (#FF4D4D) — for icons/fills." }
       }
     },
     "border": {