@verdify/tokens 0.8.0 → 0.9.0

package/dist/preset-adaptive.css

@@ -34,6 +34,7 @@
   --color-status-signal-on-surface: #4d9dff;
   --color-status-caution-on-surface: #f5a623;
   --color-status-critical-on-surface: #ff4d4d;
+  --focus-ring-casing: #c8d0de;
 }
 [data-adaptive="night"] {
   --color-surface-canvas: #060912;
@@ -62,4 +63,5 @@
   --color-status-signal-on-surface: #4d9dff;
   --color-status-caution-on-surface: #f5a623;
   --color-status-critical-on-surface: #ff4d4d;
+  --focus-ring-casing: #c8d0de;
 }

package/dist/preset.css

@@ -100,6 +100,7 @@
   --focus-ring-width: 2px;
   --focus-ring-color: #4d9dff;
   --focus-ring-offset: 2px;
+  --focus-ring-casing: #0b0f19;
   --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
   --font-weight-regular: 400;

package/dist/tokens.css

@@ -121,8 +121,9 @@
   --container-xl: 80rem; /** Container max-width at xl breakpoint */
   --container-2xl: 96rem; /** Container max-width at 2xl breakpoint */
   --focus-ring-width: 2px; /** Focus ring width. Per WCAG 2.4.7. */
-  --focus-ring-color: #4d9dff; /** Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation). */
-  --focus-ring-offset: 2px; /** Focus ring offset (gap between target and ring). */
+  --focus-ring-color: #4d9dff; /** Focus ring identity layer — semantic.signal (#4D9DFF). NOT ≥3:1 on light surfaces alone (2.56:1 on canvas); the casing layer carries WCAG 1.4.11 contrast (see ring.casing). */
+  --focus-ring-offset: 2px; /** Focus ring offset (gap between target and ring); renders the ring on the page surface, not on a filled control. */
+  --focus-ring-casing: #0b0f19; /** Two-tone focus ring contrast layer — the band's AAA text color, so the indicator has a ≥3:1 edge on every surface (light: dark ink ≈17:1; dark: light text ≈11:1+). Per WCAG 1.4.11. */
   --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /** Primary UI and reading family — Inter Variable per BR-1 §5.1. System fallbacks listed in priority order. */
   --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /** Technical family for IDs, hashes, code, timestamps — JetBrains Mono Variable per BR-1 §5.1. */
   --font-weight-regular: 400; /** Body / paragraph weight */

package/dist/tokens.d.ts

@@ -205,6 +205,7 @@ declare const tokens: {
       width: DesignToken;
       color: DesignToken;
       offset: DesignToken;
+      casing: DesignToken;
     };
   };
   font: {

package/dist/tokens.js

@@ -2488,14 +2488,14 @@ module.exports = {
         $value: "#4d9dff",
         $type: "color",
         $description:
-          "Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation).",
+          "Focus ring identity layer — semantic.signal (#4D9DFF). NOT ≥3:1 on light surfaces alone (2.56:1 on canvas); the casing layer carries WCAG 1.4.11 contrast (see ring.casing).",
         filePath: "src/tokens/focus.tokens.json",
         isSource: true,
         original: {
           $value: "{color.semantic.signal}",
           $type: "color",
           $description:
-            "Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation).",
+            "Focus ring identity layer — semantic.signal (#4D9DFF). NOT ≥3:1 on light surfaces alone (2.56:1 on canvas); the casing layer carries WCAG 1.4.11 contrast (see ring.casing).",
         },
         name: "FocusRingColor",
         attributes: {
@@ -2508,13 +2508,15 @@ module.exports = {
       offset: {
         $value: "2px",
         $type: "dimension",
-        $description: "Focus ring offset (gap between target and ring).",
+        $description:
+          "Focus ring offset (gap between target and ring); renders the ring on the page surface, not on a filled control.",
         filePath: "src/tokens/focus.tokens.json",
         isSource: true,
         original: {
           $value: "2px",
           $type: "dimension",
-          $description: "Focus ring offset (gap between target and ring).",
+          $description:
+            "Focus ring offset (gap between target and ring); renders the ring on the page surface, not on a filled control.",
         },
         name: "FocusRingOffset",
         attributes: {
@@ -2524,6 +2526,27 @@ module.exports = {
         },
         path: ["focus", "ring", "offset"],
       },
+      casing: {
+        $value: "#0b0f19",
+        $type: "color",
+        $description:
+          "Two-tone focus ring contrast layer — the band's AAA text color, so the indicator has a ≥3:1 edge on every surface (light: dark ink ≈17:1; dark: light text ≈11:1+). Per WCAG 1.4.11.",
+        filePath: "src/tokens/focus.tokens.json",
+        isSource: true,
+        original: {
+          $value: "{color.text.primary}",
+          $type: "color",
+          $description:
+            "Two-tone focus ring contrast layer — the band's AAA text color, so the indicator has a ≥3:1 edge on every surface (light: dark ink ≈17:1; dark: light text ≈11:1+). Per WCAG 1.4.11.",
+        },
+        name: "FocusRingCasing",
+        attributes: {
+          category: "focus",
+          type: "ring",
+          item: "casing",
+        },
+        path: ["focus", "ring", "casing"],
+      },
     },
   },
   font: {

package/dist/tokens.json

@@ -119,6 +119,7 @@
   "FocusRingWidth": "2px",
   "FocusRingColor": "#4d9dff",
   "FocusRingOffset": "2px",
+  "FocusRingCasing": "#0b0f19",
   "FontFamilySans": "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
   "FontFamilyMono": "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace",
   "FontWeightRegular": "400",

package/dist/tokens.mjs

@@ -120,8 +120,9 @@ export const ContainerLg = "64rem"; // Container max-width at lg breakpoint
 export const ContainerXl = "80rem"; // Container max-width at xl breakpoint
 export const Container2xl = "96rem"; // Container max-width at 2xl breakpoint
 export const FocusRingWidth = "2px"; // Focus ring width. Per WCAG 2.4.7.
-export const FocusRingColor = "#4d9dff"; // Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation).
-export const FocusRingOffset = "2px"; // Focus ring offset (gap between target and ring).
+export const FocusRingColor = "#4d9dff"; // Focus ring identity layer — semantic.signal (#4D9DFF). NOT ≥3:1 on light surfaces alone (2.56:1 on canvas); the casing layer carries WCAG 1.4.11 contrast (see ring.casing).
+export const FocusRingOffset = "2px"; // Focus ring offset (gap between target and ring); renders the ring on the page surface, not on a filled control.
+export const FocusRingCasing = "#0b0f19"; // Two-tone focus ring contrast layer — the band's AAA text color, so the indicator has a ≥3:1 edge on every surface (light: dark ink ≈17:1; dark: light text ≈11:1+). Per WCAG 1.4.11.
 export const FontFamilySans =
   "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; // Primary UI and reading family — Inter Variable per BR-1 §5.1. System fallbacks listed in priority order.
 export const FontFamilyMono =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdify/tokens",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Verdify design tokens — W3C DTCG sources with Tailwind v4 preset, CSS vars, JS/TS, and raw JSON outputs",
   "license": "UNLICENSED",
   "publishConfig": {

package/src/tokens/focus.tokens.json

@@ -2,8 +2,9 @@
   "focus": {
     "ring": {
       "width":  { "$value": "2px",                       "$type": "dimension", "$description": "Focus ring width. Per WCAG 2.4.7." },
-      "color":  { "$value": "{color.semantic.signal}",   "$type": "color",     "$description": "Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation)." },
-      "offset": { "$value": "2px",                       "$type": "dimension", "$description": "Focus ring offset (gap between target and ring)." }
+      "color":  { "$value": "{color.semantic.signal}",   "$type": "color",     "$description": "Focus ring identity layer — semantic.signal (#4D9DFF). NOT ≥3:1 on light surfaces alone (2.56:1 on canvas); the casing layer carries WCAG 1.4.11 contrast (see ring.casing)." },
+      "offset": { "$value": "2px",                       "$type": "dimension", "$description": "Focus ring offset (gap between target and ring); renders the ring on the page surface, not on a filled control." },
+      "casing": { "$value": "{color.text.primary}",      "$type": "color",     "$description": "Two-tone focus ring contrast layer — the band's AAA text color, so the indicator has a ≥3:1 edge on every surface (light: dark ink ≈17:1; dark: light text ≈11:1+). Per WCAG 1.4.11." }
     }
   }
 }