@navecss/tokens 0.1.1 → 0.3.0

package/dist/tokens.css

@@ -167,6 +167,12 @@
     initial-value: 2px;
   }
 
+  @property --nave-border-width-mark {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
   @property --nave-border-width-lg {
     syntax: '<length>';
     inherits: true;
@@ -216,43 +222,43 @@
   }
 
   @property --nave-layer-base {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 0;
   }
 
   @property --nave-layer-dropdown {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 100;
   }
 
   @property --nave-layer-sticky {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 200;
   }
 
   @property --nave-layer-overlay {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 300;
   }
 
   @property --nave-layer-modal {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 400;
   }
 
   @property --nave-layer-toast {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 500;
   }
 
   @property --nave-layer-tooltip {
-    syntax: '<number>';
+    syntax: '<integer>';
     inherits: true;
     initial-value: 600;
   }
@@ -339,6 +345,7 @@
     --nave-border-width-none: 0px;
     --nave-border-width-sm: 1px;
     --nave-border-width-focus: 2px;
+    --nave-border-width-mark: 2px;
     --nave-border-width-lg: 4px;
     --nave-radius-none: 0px;
     --nave-radius-sm: 4px;
@@ -380,7 +387,7 @@
   }
 }
 
-/* Nave theming — generated, do not edit. See this package's README ("Theming"). */
+/* Nave theming — generated, do not edit. See the @navecss/tokens README ("Theming"). */
 
 @property --nave-color-tint {
   syntax: '<color>';
@@ -395,39 +402,39 @@
     color-scheme: light dark;
     /* Tint seed: Changing this changes everything Nave derives from it. The contrast of the resulting palette follows from what you set, and checking it is yours. */
     --nave-color-tint: oklch(0.7859 0.1316 186.17);
-    --nave-color-surface-base: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
-    --nave-color-surface-raised: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.225 0.0067 h));
-    --nave-color-surface-overlay: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
-    --nave-color-surface-sunken: light-dark(oklch(from var(--nave-color-tint) 0.985 0.0067 h), oklch(from var(--nave-color-tint) 0.12 0.0067 h));
-    --nave-color-surface-inverse: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h), oklch(from var(--nave-color-tint) 0.965 0.0067 h));
-    --nave-color-content-primary: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h), oklch(from var(--nave-color-tint) 0.965 0.0067 h));
-    --nave-color-content-secondary: light-dark(oklch(from var(--nave-color-tint) 0.37 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-content-tertiary: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.72 0.0067 h));
-    --nave-color-content-disabled: light-dark(oklch(from var(--nave-color-tint) 0.835 0.0067 h), oklch(from var(--nave-color-tint) 0.37 0.0067 h));
-    --nave-color-content-inverse: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
+    --nave-color-surface-base: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-surface-raised: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.225 0.0067 h / 1));
+    --nave-color-surface-overlay: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
+    --nave-color-surface-sunken: light-dark(oklch(from var(--nave-color-tint) 0.985 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.12 0.0067 h / 1));
+    --nave-color-surface-inverse: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
+    --nave-color-content-primary: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
+    --nave-color-content-secondary: light-dark(oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-content-tertiary: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1));
+    --nave-color-content-disabled: light-dark(oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
+    --nave-color-content-inverse: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
     --nave-color-content-link: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
-    --nave-color-border-default: light-dark(oklch(from var(--nave-color-tint) 0.905 0.0067 h), oklch(from var(--nave-color-tint) 0.37 0.0067 h));
-    --nave-color-border-strong: light-dark(oklch(from var(--nave-color-tint) 0.72 0.0067 h), oklch(from var(--nave-color-tint) 0.47 0.0067 h));
-    --nave-color-border-control: light-dark(oklch(from var(--nave-color-tint) 0.59 0.0067 h), oklch(from var(--nave-color-tint) 0.59 0.0067 h));
-    --nave-color-border-disabled: light-dark(oklch(from var(--nave-color-tint) 0.94 0.0067 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
+    --nave-color-border-default: light-dark(oklch(from var(--nave-color-tint) 0.905 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
+    --nave-color-border-strong: light-dark(oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1));
+    --nave-color-border-control: light-dark(oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1));
+    --nave-color-border-disabled: light-dark(oklch(from var(--nave-color-tint) 0.94 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
     --nave-color-border-focus: light-dark(oklch(0.59 0.0939 186.17), oklch(0.59 0.0939 186.17));
     --nave-color-action-primary: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
     --nave-color-action-primary-hover: light-dark(oklch(0.37 0.0589 186.17), oklch(0.905 0.1106 186.17));
     --nave-color-action-primary-active: light-dark(oklch(0.27 0.0398 186.17), oklch(0.94 0.0574 186.17));
-    --nave-color-on-action-primary: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
-    --nave-color-action-secondary: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
+    --nave-color-on-action-primary: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-action-secondary: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
     --nave-color-feedback-danger: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
     --nave-color-feedback-danger-foreground: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
-    --nave-color-on-feedback-danger: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
+    --nave-color-on-feedback-danger: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
     /* Feedback tokens: warning, success and info, and their -foreground variants, resolve to one shared value here; only danger differs. Colour alone therefore cannot tell those three states apart, so wherever a feedback token carries meaning, give it a text label naming the state and a distinct icon or shape that differs per state. */
-    --nave-color-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-feedback-warning-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-on-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
-    --nave-color-feedback-success: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-feedback-success-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-on-feedback-success: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
-    --nave-color-feedback-info: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-feedback-info-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
-    --nave-color-on-feedback-info: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
+    --nave-color-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-warning-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-feedback-success: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-success-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-success: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-feedback-info: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-info-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-info: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
   }
 }

package/dist/tokens.d.ts

@@ -2,8 +2,11 @@
 
 /** The DTCG 2025.10 token set as a typed const object (e.g. `--nave-font-size-md`).
  *  Keys are CSS custom property names. The semantic colour layer
- *  (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css`
- *  and is not part of this export.
+ *  (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css` and is
+ *  not part of this object; its property NAMES are typed separately as
+ *  `ColorPropertyName`, and its VALUES are reachable only through CSS (e.g.
+ *  `var(--nave-color-action-primary)`): the browser resolves each one for the
+ *  active colour scheme, and the neutral-derived ones also follow the tint.
  */
 export declare const tokens: {
   '--nave-font-family-base': string
@@ -58,6 +61,7 @@ export declare const tokens: {
   '--nave-border-width-none': string
   '--nave-border-width-sm': string
   '--nave-border-width-focus': string
+  '--nave-border-width-mark': string
   '--nave-border-width-lg': string
   '--nave-radius-none': string
   '--nave-radius-sm': string
@@ -88,3 +92,44 @@ export declare const tokens: {
 
 export declare type TokenName = keyof typeof tokens
 export declare type TokenValue = typeof tokens[TokenName]
+
+/** Every `--nave-color-*` custom property the semantic colour layer emits: names
+ *  only, no value (see the doc comment above `tokens` for where the values live).
+ *  Disjoint from `TokenName` — a consumer who wants both writes
+ *  `TokenName | ColorPropertyName`.
+ */
+export declare type ColorPropertyName =
+  | '--nave-color-action-primary'
+  | '--nave-color-action-primary-active'
+  | '--nave-color-action-primary-hover'
+  | '--nave-color-action-secondary'
+  | '--nave-color-border-control'
+  | '--nave-color-border-default'
+  | '--nave-color-border-disabled'
+  | '--nave-color-border-focus'
+  | '--nave-color-border-strong'
+  | '--nave-color-content-disabled'
+  | '--nave-color-content-inverse'
+  | '--nave-color-content-link'
+  | '--nave-color-content-primary'
+  | '--nave-color-content-secondary'
+  | '--nave-color-content-tertiary'
+  | '--nave-color-feedback-danger'
+  | '--nave-color-feedback-danger-foreground'
+  | '--nave-color-feedback-info'
+  | '--nave-color-feedback-info-foreground'
+  | '--nave-color-feedback-success'
+  | '--nave-color-feedback-success-foreground'
+  | '--nave-color-feedback-warning'
+  | '--nave-color-feedback-warning-foreground'
+  | '--nave-color-on-action-primary'
+  | '--nave-color-on-feedback-danger'
+  | '--nave-color-on-feedback-info'
+  | '--nave-color-on-feedback-success'
+  | '--nave-color-on-feedback-warning'
+  | '--nave-color-surface-base'
+  | '--nave-color-surface-inverse'
+  | '--nave-color-surface-overlay'
+  | '--nave-color-surface-raised'
+  | '--nave-color-surface-sunken'
+  | '--nave-color-tint'

package/dist/tokens.js

@@ -3,8 +3,11 @@
 
 /** The DTCG 2025.10 token set as a typed const object (e.g. `--nave-font-size-md`).
  *  Keys are CSS custom property names. The semantic colour layer
- *  (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css`
- *  and is not part of this export.
+ *  (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css` and is
+ *  not part of this object; its property NAMES are typed separately as
+ *  `ColorPropertyName`, and its VALUES are reachable only through CSS (e.g.
+ *  `var(--nave-color-action-primary)`): the browser resolves each one for the
+ *  active colour scheme, and the neutral-derived ones also follow the tint.
  */
 export const tokens = {
   '--nave-font-family-base': "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
@@ -59,6 +62,7 @@ export const tokens = {
   '--nave-border-width-none': "0px",
   '--nave-border-width-sm': "1px",
   '--nave-border-width-focus': "2px",
+  '--nave-border-width-mark': "2px",
   '--nave-border-width-lg': "4px",
   '--nave-radius-none': "0px",
   '--nave-radius-sm': "4px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navecss/tokens",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "DTCG 2025.10 design tokens for Nave: seed-derived semantic colours, typography, spacing, and the rest of the token layer, built by a first-party DTCG 2025.10 reader.",
   "keywords": [
     "css",
@@ -51,11 +51,11 @@
     "TOKENS.md"
   ],
   "devDependencies": {
-    "@types/node": "^26.6.2",
-    "@vitest/coverage-v8": "5.0.1",
-    "prettier": "3.9.8",
+    "@types/node": "^26.6.4",
+    "@vitest/coverage-v8": "5.0.3",
+    "prettier": "3.9.9",
     "typescript": "6.0.3",
-    "vitest": "5.0.1"
+    "vitest": "5.0.3"
   },
   "engines": {
     "node": ">=22.18"
@@ -79,7 +79,6 @@
     "lint": "eslint build.ts generate-tokens-doc.ts src test --max-warnings 0",
     "lint:fix": "eslint build.ts generate-tokens-doc.ts src test --fix",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
     "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only --exclude-entrypoints css"
   }
 }

package/tokens.json

@@ -33,12 +33,24 @@
           {
             "against": "surface.sunken",
             "class": "text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "text"
           }
         ],
         "content.secondary": [
           {
             "against": "surface.base",
             "class": "text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "text"
           }
         ],
         "content.tertiary": [
@@ -49,6 +61,14 @@
           {
             "against": "surface.sunken",
             "class": "text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "text"
           }
         ],
         "content.inverse": [
@@ -67,6 +87,14 @@
           {
             "against": "surface.base",
             "class": "text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "text"
           }
         ],
         "on-action.primary": [
@@ -155,12 +183,28 @@
           {
             "against": "surface.base",
             "class": "non-text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "non-text"
           }
         ],
         "feedback.danger": [
           {
             "against": "surface.base",
             "class": "non-text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "non-text"
           }
         ],
         "feedback.warning": [
@@ -173,6 +217,18 @@
           {
             "against": "surface.base",
             "class": "non-text"
+          },
+          {
+            "against": "surface.base",
+            "class": "text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "text"
           }
         ]
       }
@@ -597,6 +653,14 @@
       "$type": "dimension",
       "$description": "Focus ring indicator outline width"
     },
+    "mark": {
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Strokes of glyphs drawn in CSS: check marks, indeterminate bars"
+    },
     "lg": {
       "$value": {
         "value": 4,
@@ -626,7 +690,7 @@
         "unit": "px"
       },
       "$type": "dimension",
-      "$description": "Inputs, buttons, tags"
+      "$description": "Inputs, buttons, tags, and the popovers, menus and select lists anchored to a control"
     },
     "card": {
       "$value": {