@zevaui/tokens 0.2.0 → 0.2.1

package/README.md

@@ -21,6 +21,24 @@ and are compiled at build time — never at runtime — into:
 Components in `@zevaui/components` consume these tokens exclusively through
 `var(--zui-*)` references — no literal color, spacing, or radius values.
 
+Importing the custom properties defines them; it paints nothing. Two of them
+are the page's own, and your app has to apply them:
+
+```css
+body {
+  background-color: var(--zui-color-bg-canvas);
+  color: var(--zui-color-text-default);
+}
+```
+
+`color-bg-canvas` is the background every theme is designed against — it is
+what the contrast floors below are measured on. Component text that sits on
+the page rather than on a component's own surface is coloured for it, so a
+page that never paints it leaves that text on the browser's white instead.
+In the dark theme that lands at 1.05:1 against a 4.5:1 floor. The contrast
+guarantees are a property of theme values applied as intended, not a promise
+that any background you choose will pass.
+
 ## Guarantees
 
 Every theme in this package is validated against the machine-readable contract

package/dist/index.js

@@ -38,15 +38,15 @@ export const tokens = {
     "color-bg-inverse": "oklch(0.21 0.034 264.665)",
     "color-border-default": "oklch(0.928 0.006 264.531)",
     "color-border-subtle": "oklch(0.967 0.003 264.542)",
-    "color-border-strong": "oklch(0.707 0.022 261.325)",
+    "color-border-strong": "oklch(0.551 0.027 264.364)",
     "color-accent-default": "oklch(0.546 0.245 262.881)",
     "color-accent-subtle": "oklch(0.932 0.032 255.585)",
     "color-accent-strong": "oklch(0.488 0.243 264.376)",
     "color-danger-default": "oklch(0.577 0.245 27.325)",
     "color-danger-subtle": "oklch(0.936 0.032 17.717)",
-    "color-success-default": "oklch(0.627 0.194 149.214)",
+    "color-success-default": "oklch(0.527 0.154 150.069)",
     "color-success-subtle": "oklch(0.962 0.044 156.743)",
-    "color-warning-default": "oklch(0.769 0.188 70.08)",
+    "color-warning-default": "oklch(0.555 0.163 48.998)",
     "color-warning-subtle": "oklch(0.962 0.059 95.617)",
     "color-focus-ring": "oklch(0.623 0.214 259.815)",
     "font-body-family": "\"Inter\", system-ui, -apple-system, sans-serif",
@@ -84,11 +84,11 @@ export const tokens = {
     "color-bg-inverse": "oklch(0.985 0.002 247.839)",
     "color-border-default": "oklch(0.278 0.033 256.848)",
     "color-border-subtle": "oklch(0.278 0.033 256.848)",
-    "color-border-strong": "oklch(0.446 0.03 256.802)",
+    "color-border-strong": "oklch(0.551 0.027 264.364)",
     "color-accent-default": "oklch(0.623 0.214 259.815)",
     "color-accent-subtle": "oklch(0.379 0.146 265.522)",
     "color-accent-strong": "oklch(0.707 0.165 254.624)",
-    "color-danger-default": "oklch(0.637 0.237 25.331)",
+    "color-danger-default": "oklch(0.704 0.191 22.216)",
     "color-danger-subtle": "oklch(0.396 0.141 25.723)",
     "color-success-default": "oklch(0.723 0.219 149.579)",
     "color-success-subtle": "oklch(0.393 0.095 152.535)",

package/dist/styles.css

@@ -138,15 +138,15 @@
   --zui-color-bg-inverse: var(--zui-gray-900);
   --zui-color-border-default: var(--zui-gray-200);
   --zui-color-border-subtle: var(--zui-gray-100);
-  --zui-color-border-strong: var(--zui-gray-400);
+  --zui-color-border-strong: var(--zui-gray-500);
   --zui-color-accent-default: var(--zui-blue-600);
   --zui-color-accent-subtle: var(--zui-blue-100);
   --zui-color-accent-strong: var(--zui-blue-700);
   --zui-color-danger-default: var(--zui-red-600);
   --zui-color-danger-subtle: var(--zui-red-100);
-  --zui-color-success-default: var(--zui-green-600);
+  --zui-color-success-default: var(--zui-green-700);
   --zui-color-success-subtle: var(--zui-green-100);
-  --zui-color-warning-default: var(--zui-amber-500);
+  --zui-color-warning-default: var(--zui-amber-700);
   --zui-color-warning-subtle: var(--zui-amber-100);
   --zui-color-focus-ring: var(--zui-blue-500);
   --zui-font-body-family: var(--zui-font-family-sans);
@@ -300,11 +300,11 @@
     --zui-color-bg-inverse: var(--zui-gray-50);
     --zui-color-border-default: var(--zui-gray-800);
     --zui-color-border-subtle: var(--zui-gray-800);
-    --zui-color-border-strong: var(--zui-gray-600);
+    --zui-color-border-strong: var(--zui-gray-500);
     --zui-color-accent-default: var(--zui-blue-500);
     --zui-color-accent-subtle: var(--zui-blue-900);
     --zui-color-accent-strong: var(--zui-blue-400);
-    --zui-color-danger-default: var(--zui-red-500);
+    --zui-color-danger-default: var(--zui-red-400);
     --zui-color-danger-subtle: var(--zui-red-900);
     --zui-color-success-default: var(--zui-green-500);
     --zui-color-success-subtle: var(--zui-green-900);
@@ -461,11 +461,11 @@
   --zui-color-bg-inverse: var(--zui-gray-50);
   --zui-color-border-default: var(--zui-gray-800);
   --zui-color-border-subtle: var(--zui-gray-800);
-  --zui-color-border-strong: var(--zui-gray-600);
+  --zui-color-border-strong: var(--zui-gray-500);
   --zui-color-accent-default: var(--zui-blue-500);
   --zui-color-accent-subtle: var(--zui-blue-900);
   --zui-color-accent-strong: var(--zui-blue-400);
-  --zui-color-danger-default: var(--zui-red-500);
+  --zui-color-danger-default: var(--zui-red-400);
   --zui-color-danger-subtle: var(--zui-red-900);
   --zui-color-success-default: var(--zui-green-500);
   --zui-color-success-subtle: var(--zui-green-900);

package/dist/tokens.manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "generated": "2026-08-22T22:28:43.739Z",
+  "generated": "2026-09-06T06:49:34.306Z",
   "themes": [
     "light",
     "dark",
@@ -782,18 +782,18 @@
       "type": "color",
       "cssVar": "--zui-color-border-strong",
       "values": {
-        "light": "oklch(0.707 0.022 261.325)",
-        "dark": "oklch(0.446 0.03 256.802)",
+        "light": "oklch(0.551 0.027 264.364)",
+        "dark": "oklch(0.551 0.027 264.364)",
         "highContrast": "oklch(0 0 0)"
       },
       "references": {
         "light": [
           "gray",
-          "400"
+          "500"
         ],
         "dark": [
           "gray",
-          "600"
+          "500"
         ],
         "highContrast": [
           "black"
@@ -902,7 +902,7 @@
       "cssVar": "--zui-color-danger-default",
       "values": {
         "light": "oklch(0.577 0.245 27.325)",
-        "dark": "oklch(0.637 0.237 25.331)",
+        "dark": "oklch(0.704 0.191 22.216)",
         "highContrast": "oklch(0.505 0.213 27.518)"
       },
       "references": {
@@ -912,7 +912,7 @@
         ],
         "dark": [
           "red",
-          "500"
+          "400"
         ],
         "highContrast": [
           "red",
@@ -961,14 +961,14 @@
       "type": "color",
       "cssVar": "--zui-color-success-default",
       "values": {
-        "light": "oklch(0.627 0.194 149.214)",
+        "light": "oklch(0.527 0.154 150.069)",
         "dark": "oklch(0.723 0.219 149.579)",
         "highContrast": "oklch(0.527 0.154 150.069)"
       },
       "references": {
         "light": [
           "green",
-          "600"
+          "700"
         ],
         "dark": [
           "green",
@@ -1021,14 +1021,14 @@
       "type": "color",
       "cssVar": "--zui-color-warning-default",
       "values": {
-        "light": "oklch(0.769 0.188 70.08)",
+        "light": "oklch(0.555 0.163 48.998)",
         "dark": "oklch(0.828 0.189 84.429)",
         "highContrast": "oklch(0.473 0.137 46.201)"
       },
       "references": {
         "light": [
           "amber",
-          "500"
+          "700"
         ],
         "dark": [
           "amber",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevaui/tokens",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Design tokens for ZevaUI: a single source of truth compiled to CSS custom properties, a typed manifest, and per-theme stylesheets",
   "license": "Apache-2.0",
   "repository": {