@verdify/tokens 0.6.0 → 0.7.0

package/dist/preset.css

@@ -10,6 +10,7 @@
   --breakpoint-xl: 80rem;
   --breakpoint-2xl: 96rem;
   --color-brand-brand: #7c5cff;
+  --color-brand-brand-strong: #7053e5;
   --color-brand-brand-deep: #5b3ee8;
   --color-neutral-obsidian-300: #c8d0de;
   --color-neutral-obsidian-400: #8a95a8;
@@ -50,9 +51,9 @@
   --color-text-on-brand: #fbfcfe;
   --color-scrim-light: rgba(11, 15, 25, 0.5);
   --color-scrim-dark: rgba(6, 9, 18, 0.7);
-  --color-action-primary-bg: #7c5cff;
+  --color-action-primary-bg: #7053e5;
   --color-action-primary-fg: #fbfcfe;
-  --color-action-primary-border: #7c5cff;
+  --color-action-primary-border: #7053e5;
   --color-action-primary-bg-hover: #5b3ee8;
   --color-action-primary-bg-active: #5b3ee8;
   --color-action-secondary-bg: #e8ecf4;
@@ -61,9 +62,9 @@
   --color-action-secondary-bg-hover: #d6dce8;
   --color-action-ghost-fg: #0b0f19;
   --color-action-ghost-bg-hover: #e8ecf4;
-  --color-action-destructive-bg: #ff4d4d;
+  --color-action-destructive-bg: #be3939;
   --color-action-destructive-fg: #fbfcfe;
-  --color-action-destructive-border: #ff4d4d;
+  --color-action-destructive-border: #be3939;
   --color-status-verified-fg: #007947;
   --color-status-verified-bg: #e8ecf4;
   --color-status-verified-border: #007947;

package/dist/tokens.css

@@ -13,6 +13,7 @@
   --breakpoint-xl: 80rem; /** Extra large breakpoint (1280px) — desktops */
   --breakpoint-2xl: 96rem; /** 2X large breakpoint (1536px) — wide desktops */
   --color-brand-brand: #7c5cff; /** Sovereign Violet — the single brand anchor. Identity color; the logo seam and primary brand moments. Sits outside the traffic-light status register. */
+  --color-brand-brand-strong: #7053e5; /** AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only. */
   --color-brand-brand-deep: #5b3ee8; /** Companion to brand.brand — used on light surfaces where #7C5CFF fails WCAG 2.2 non-text contrast (>=3:1). Luminance shift only. */
   --color-neutral-obsidian-300: #c8d0de; /** Primary text on dark */
   --color-neutral-obsidian-400: #8a95a8; /** Secondary text */
@@ -61,9 +62,9 @@
   --color-text-on-brand: #fbfcfe; /** Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline. */
   --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: #7c5cff; /** Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. */
+  --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). */
   --color-action-primary-fg: #fbfcfe; /** Text/icon on a primary action. */
-  --color-action-primary-border: #7c5cff; /** Primary action border — matches bg. */
+  --color-action-primary-border: #7053e5; /** Primary action border — matches bg. — AA-darkened (brand-strong, 5.04:1 with white). */
   --color-action-primary-bg-hover: #5b3ee8; /** Primary action hover — deep companion. */
   --color-action-primary-bg-active: #5b3ee8; /** Primary action pressed/active. */
   --color-action-secondary-bg: #e8ecf4; /** Secondary action background — neutral raised surface. */
@@ -72,9 +73,9 @@
   --color-action-secondary-bg-hover: #d6dce8; /** Secondary action hover. */
   --color-action-ghost-fg: #0b0f19; /** Ghost action text/icon — no fill until hover. */
   --color-action-ghost-bg-hover: #e8ecf4; /** Ghost action hover fill. */
-  --color-action-destructive-bg: #ff4d4d; /** Destructive action background — Critical. A status color used for a destructive control; never the brand. */
+  --color-action-destructive-bg: #be3939; /** Destructive action background — Critical. A status color used for a destructive control; never the brand. — AA-darkened (critical-strong, 5.34:1 with white). */
   --color-action-destructive-fg: #fbfcfe; /** Text/icon on a destructive action. */
-  --color-action-destructive-border: #ff4d4d; /** Destructive action border. */
+  --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-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). */

package/dist/tokens.d.ts

@@ -31,6 +31,7 @@ declare const tokens: {
   color: {
     brand: {
       brand: DesignToken;
+      "brand-strong": DesignToken;
       "brand-deep": DesignToken;
     };
     neutral: {

package/dist/tokens.js

@@ -196,6 +196,27 @@ module.exports = {
         },
         path: ["color", "brand", "brand"],
       },
+      "brand-strong": {
+        $value: "#7053e5",
+        $type: "color",
+        $description:
+          "AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only.",
+        filePath: "src/tokens/color.tokens.json",
+        isSource: true,
+        original: {
+          $value: "#7053E5",
+          $type: "color",
+          $description:
+            "AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only.",
+        },
+        name: "ColorBrandBrandStrong",
+        attributes: {
+          category: "color",
+          type: "brand",
+          item: "brand-strong",
+        },
+        path: ["color", "brand", "brand-strong"],
+      },
       "brand-deep": {
         $value: "#5b3ee8",
         $type: "color",
@@ -1202,17 +1223,17 @@ module.exports = {
     action: {
       primary: {
         bg: {
-          $value: "#7c5cff",
+          $value: "#7053e5",
           $type: "color",
           $description:
-            "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface.",
+            "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. — AA-darkened (brand-strong, 5.04:1 with white).",
           filePath: "src/tokens/component.tokens.json",
           isSource: true,
           original: {
-            $value: "{color.brand.brand}",
+            $value: "{color.brand.brand-strong}",
             $type: "color",
             $description:
-              "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface.",
+              "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. — AA-darkened (brand-strong, 5.04:1 with white).",
           },
           name: "ColorActionPrimaryBg",
           attributes: {
@@ -1244,15 +1265,17 @@ module.exports = {
           path: ["color", "action", "primary", "fg"],
         },
         border: {
-          $value: "#7c5cff",
+          $value: "#7053e5",
           $type: "color",
-          $description: "Primary action border — matches bg.",
+          $description:
+            "Primary action border — matches bg. — AA-darkened (brand-strong, 5.04:1 with white).",
           filePath: "src/tokens/component.tokens.json",
           isSource: true,
           original: {
-            $value: "{color.brand.brand}",
+            $value: "{color.brand.brand-strong}",
             $type: "color",
-            $description: "Primary action border — matches bg.",
+            $description:
+              "Primary action border — matches bg. — AA-darkened (brand-strong, 5.04:1 with white).",
           },
           name: "ColorActionPrimaryBorder",
           attributes: {
@@ -1431,17 +1454,17 @@ module.exports = {
       },
       destructive: {
         bg: {
-          $value: "#ff4d4d",
+          $value: "#be3939",
           $type: "color",
           $description:
-            "Destructive action background — Critical. A status color used for a destructive control; never the brand.",
+            "Destructive action background — Critical. A status color used for a destructive control; never the brand. — AA-darkened (critical-strong, 5.34:1 with white).",
           filePath: "src/tokens/component.tokens.json",
           isSource: true,
           original: {
-            $value: "{color.semantic.critical}",
+            $value: "{color.semantic.critical-strong}",
             $type: "color",
             $description:
-              "Destructive action background — Critical. A status color used for a destructive control; never the brand.",
+              "Destructive action background — Critical. A status color used for a destructive control; never the brand. — AA-darkened (critical-strong, 5.34:1 with white).",
           },
           name: "ColorActionDestructiveBg",
           attributes: {
@@ -1473,15 +1496,17 @@ module.exports = {
           path: ["color", "action", "destructive", "fg"],
         },
         border: {
-          $value: "#ff4d4d",
+          $value: "#be3939",
           $type: "color",
-          $description: "Destructive action border.",
+          $description:
+            "Destructive action border. — AA-darkened (critical-strong, 5.34:1 with white).",
           filePath: "src/tokens/component.tokens.json",
           isSource: true,
           original: {
-            $value: "{color.semantic.critical}",
+            $value: "{color.semantic.critical-strong}",
             $type: "color",
-            $description: "Destructive action border.",
+            $description:
+              "Destructive action border. — AA-darkened (critical-strong, 5.34:1 with white).",
           },
           name: "ColorActionDestructiveBorder",
           attributes: {

package/dist/tokens.json

@@ -9,6 +9,7 @@
   "BreakpointXl": "80rem",
   "Breakpoint2xl": "96rem",
   "ColorBrandBrand": "#7c5cff",
+  "ColorBrandBrandStrong": "#7053e5",
   "ColorBrandBrandDeep": "#5b3ee8",
   "ColorNeutralObsidian300": "#c8d0de",
   "ColorNeutralObsidian400": "#8a95a8",
@@ -57,9 +58,9 @@
   "ColorTextOnBrand": "#fbfcfe",
   "ColorScrimLight": "#0b0f1980",
   "ColorScrimDark": "#060912b3",
-  "ColorActionPrimaryBg": "#7c5cff",
+  "ColorActionPrimaryBg": "#7053e5",
   "ColorActionPrimaryFg": "#fbfcfe",
-  "ColorActionPrimaryBorder": "#7c5cff",
+  "ColorActionPrimaryBorder": "#7053e5",
   "ColorActionPrimaryBgHover": "#5b3ee8",
   "ColorActionPrimaryBgActive": "#5b3ee8",
   "ColorActionSecondaryBg": "#e8ecf4",
@@ -68,9 +69,9 @@
   "ColorActionSecondaryBgHover": "#d6dce8",
   "ColorActionGhostFg": "#0b0f19",
   "ColorActionGhostBgHover": "#e8ecf4",
-  "ColorActionDestructiveBg": "#ff4d4d",
+  "ColorActionDestructiveBg": "#be3939",
   "ColorActionDestructiveFg": "#fbfcfe",
-  "ColorActionDestructiveBorder": "#ff4d4d",
+  "ColorActionDestructiveBorder": "#be3939",
   "ColorStatusVerifiedFg": "#007947",
   "ColorStatusVerifiedBg": "#e8ecf4",
   "ColorStatusVerifiedBorder": "#007947",

package/dist/tokens.mjs

@@ -12,6 +12,7 @@ export const BreakpointLg = "64rem"; // Large breakpoint (1024px) — tablets la
 export const BreakpointXl = "80rem"; // Extra large breakpoint (1280px) — desktops
 export const Breakpoint2xl = "96rem"; // 2X large breakpoint (1536px) — wide desktops
 export const ColorBrandBrand = "#7c5cff"; // Sovereign Violet — the single brand anchor. Identity color; the logo seam and primary brand moments. Sits outside the traffic-light status register.
+export const ColorBrandBrandStrong = "#7053e5"; // AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only.
 export const ColorBrandBrandDeep = "#5b3ee8"; // Companion to brand.brand — used on light surfaces where #7C5CFF fails WCAG 2.2 non-text contrast (>=3:1). Luminance shift only.
 export const ColorNeutralObsidian300 = "#c8d0de"; // Primary text on dark
 export const ColorNeutralObsidian400 = "#8a95a8"; // Secondary text
@@ -60,9 +61,9 @@ export const ColorTextInverse = "#fbfcfe"; // Text on dark surfaces (e.g. obsidi
 export const ColorTextOnBrand = "#fbfcfe"; // Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline.
 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 = "#7c5cff"; // Primary action background — Sovereign Violet. The single high-emphasis CTA per surface.
+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).
 export const ColorActionPrimaryFg = "#fbfcfe"; // Text/icon on a primary action.
-export const ColorActionPrimaryBorder = "#7c5cff"; // Primary action border — matches bg.
+export const ColorActionPrimaryBorder = "#7053e5"; // Primary action border — matches bg. — AA-darkened (brand-strong, 5.04:1 with white).
 export const ColorActionPrimaryBgHover = "#5b3ee8"; // Primary action hover — deep companion.
 export const ColorActionPrimaryBgActive = "#5b3ee8"; // Primary action pressed/active.
 export const ColorActionSecondaryBg = "#e8ecf4"; // Secondary action background — neutral raised surface.
@@ -71,9 +72,9 @@ export const ColorActionSecondaryBorder = "#b0baca"; // Secondary action border.
 export const ColorActionSecondaryBgHover = "#d6dce8"; // Secondary action hover.
 export const ColorActionGhostFg = "#0b0f19"; // Ghost action text/icon — no fill until hover.
 export const ColorActionGhostBgHover = "#e8ecf4"; // Ghost action hover fill.
-export const ColorActionDestructiveBg = "#ff4d4d"; // Destructive action background — Critical. A status color used for a destructive control; never the brand.
+export const ColorActionDestructiveBg = "#be3939"; // Destructive action background — Critical. A status color used for a destructive control; never the brand. — AA-darkened (critical-strong, 5.34:1 with white).
 export const ColorActionDestructiveFg = "#fbfcfe"; // Text/icon on a destructive action.
-export const ColorActionDestructiveBorder = "#ff4d4d"; // Destructive action border.
+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 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).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdify/tokens",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Verdify design tokens — W3C DTCG sources with Tailwind v4 preset, CSS vars, JS/TS, and raw JSON outputs",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -13,36 +13,29 @@
     "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/*"
+    ".":                  { "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"
   },
-  "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"
-  },
-  "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/",
-    "test": "tsx scripts/test.ts"
+    "tsx":              "^4.7.0",
+    "typescript":       "^5.4.0",
+    "ajv":              "^8.12.0",
+    "@types/node":      "^20.0.0"
   }
-}
+}

package/src/tokens/color.tokens.json

@@ -6,6 +6,11 @@
         "$type": "color",
         "$description": "Sovereign Violet — the single brand anchor. Identity color; the logo seam and primary brand moments. Sits outside the traffic-light status register."
       },
+      "brand-strong": {
+        "$value": "#7053E5",
+        "$type": "color",
+        "$description": "AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only."
+      },
       "brand-deep": {
         "$value": "#5B3EE8",
         "$type": "color",

package/src/tokens/component.tokens.json

@@ -2,9 +2,9 @@
   "color": {
     "action": {
       "primary": {
-        "bg":        { "$value": "{color.brand.brand}",      "$type": "color", "$description": "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface." },
+        "bg":        { "$value": "{color.brand.brand-strong}",      "$type": "color", "$description": "Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. — AA-darkened (brand-strong, 5.04:1 with white)." },
         "fg":        { "$value": "{color.text.on-brand}",    "$type": "color", "$description": "Text/icon on a primary action." },
-        "border":    { "$value": "{color.brand.brand}",      "$type": "color", "$description": "Primary action border — matches bg." },
+        "border":    { "$value": "{color.brand.brand-strong}",      "$type": "color", "$description": "Primary action border — matches bg. — AA-darkened (brand-strong, 5.04:1 with white)." },
         "bg-hover":  { "$value": "{color.brand.brand-deep}", "$type": "color", "$description": "Primary action hover — deep companion." },
         "bg-active": { "$value": "{color.brand.brand-deep}", "$type": "color", "$description": "Primary action pressed/active." }
       },
@@ -19,9 +19,9 @@
         "bg-hover": { "$value": "{color.surface.raised}", "$type": "color", "$description": "Ghost action hover fill." }
       },
       "destructive": {
-        "bg":     { "$value": "{color.semantic.critical}", "$type": "color", "$description": "Destructive action background — Critical. A status color used for a destructive control; never the brand." },
+        "bg":     { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Destructive action background — Critical. A status color used for a destructive control; never the brand. — AA-darkened (critical-strong, 5.34:1 with white)." },
         "fg":     { "$value": "{color.text.on-brand}",     "$type": "color", "$description": "Text/icon on a destructive action." },
-        "border": { "$value": "{color.semantic.critical}", "$type": "color", "$description": "Destructive action border." }
+        "border": { "$value": "{color.semantic.critical-strong}", "$type": "color", "$description": "Destructive action border. — AA-darkened (critical-strong, 5.34:1 with white)." }
       }
     },
     "status": {

package/src/tokens/print.tokens.json

@@ -13,6 +13,17 @@
             }
           }
         },
+        "brand-strong": {
+          "$value": "#7053E5",
+          "$type": "color",
+          "$description": "AA-darkened companion to brand.brand — the action-primary fill where white text on #7C5CFF fails WCAG 2.2 AA (4.23:1); #7053E5 clears 5.04:1. Luminance shift only.",
+          "$extensions": {
+            "com.verdify.print": {
+              "cmyk": "51,64,0,10",
+              "pantone": "PANTONE 2725 C"
+            }
+          }
+        },
         "brand-deep": {
           "$value": "#5B3EE8",
           "$type": "color",

package/LICENSE

@@ -1,12 +0,0 @@
-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.