@canonical/design-tokens 0.0.2 → 0.2.0

package/bin/terrazzo-lsp.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+await import("@canonical/terrazzo-lsp/dist/esm/cli.js");

package/dist/tokens.json

@@ -21407,7 +21407,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-border-branded",
     "derivation": "channel-modifier",
-    "description": "Border color for containers and separators",
+    "description": "Border color for elements that need to reflect the brand identity",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21519,7 +21519,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-foreground-ghost-branded",
     "derivation": "channel-modifier",
-    "description": "Ghost-style foreground color for minimal-chrome interactive elements",
+    "description": "Fill color for branded ghost-style interactive elements that match the background in their default state",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21565,7 +21565,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-foreground-primary-branded",
     "derivation": "channel-modifier",
-    "description": "Primary interactive foreground color for buttons and actionable elements",
+    "description": "Fill color for primary interactive elements that need to reflect the brand identity",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21611,7 +21611,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-icon-branded",
     "derivation": "channel-modifier",
-    "description": "Icon fill color for informational and decorative icons",
+    "description": "Icon color for branded elements that need to reflect the brand identity",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21723,7 +21723,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-text-branded",
     "derivation": "channel-modifier",
-    "description": "Body text color for readable content",
+    "description": "Text color for branded elements that need to reflect the brand identity",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21835,7 +21835,7 @@
     "cssOutputFile": "modifiers.emphasis.css",
     "derivedFrom": "--color-foreground-secondary-branded",
     "derivation": "channel-modifier",
-    "description": "Secondary interactive foreground color for less prominent actions",
+    "description": "Fill color for secondary interactive elements that need to reflect the brand identity",
     "declarations": [
       {
         "selector": ".caution",
@@ -21914,7 +21914,7 @@
     "cssOutputFile": "modifiers.criticality.css",
     "derivedFrom": "--color-focusRing-warning",
     "derivation": "channel-modifier",
-    "description": "Outline color for keyboard focus indicators",
+    "description": "Focus ring color for elements in a warning state",
     "declarations": [
       {
         "selector": ".success",
@@ -21960,7 +21960,7 @@
     "cssOutputFile": "modifiers.criticality.css",
     "derivedFrom": "--color-foreground-input-warning",
     "derivation": "channel-modifier",
-    "description": "Foreground color for form input elements",
+    "description": "Fill color for input elements in a warning validation state",
     "declarations": [
       {
         "selector": ".success",
@@ -22006,7 +22006,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-background-layer3",
     "derivation": "channel-surface",
-    "description": "Background fill color for the surface area",
+    "description": "Background color for surfaces nested within layer 2 (e.g., content sections within cards)",
     "declarations": [
       {
         "selector": ".surface",
@@ -22052,7 +22052,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-checkbox-checkmark-layer3",
     "derivation": "channel-surface",
-    "description": "Checkmark glyph color for checkbox controls",
+    "description": "Fill color for the checkmark icon inside checkbox components placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22098,7 +22098,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-checkbox-unselected-layer3",
     "derivation": "channel-surface",
-    "description": "Border/fill color for unselected checkbox controls",
+    "description": "Fill color for the unselected checkbox container placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22144,7 +22144,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-ghost-layer3",
     "derivation": "channel-surface",
-    "description": "Ghost-style foreground color for minimal-chrome interactive elements",
+    "description": "Fill color for ghost-style interactive elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22190,7 +22190,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-ghost-branded-layer3",
     "derivation": "channel-surface",
-    "description": "Branded ghost-style foreground color for minimal-chrome interactive elements",
+    "description": "Fill color for branded ghost-style interactive elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22236,7 +22236,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-ghost-constructive-layer3",
     "derivation": "channel-surface",
-    "description": "Constructive ghost-style foreground color for minimal-chrome interactive elements",
+    "description": "Fill color for constructive ghost-style interactive elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22282,7 +22282,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-ghost-destructive-layer3",
     "derivation": "channel-surface",
-    "description": "Destructive ghost-style foreground color for minimal-chrome interactive elements",
+    "description": "Fill color for destructive ghost-style interactive elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22328,7 +22328,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-input-layer3",
     "derivation": "channel-surface",
-    "description": "Foreground color for form input elements",
+    "description": "Fill color for input elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22374,7 +22374,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-input-error-layer3",
     "derivation": "channel-surface",
-    "description": "Foreground color for form input elements in error state",
+    "description": "Fill color for input elements in an error validation state placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22420,7 +22420,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-input-success-layer3",
     "derivation": "channel-surface",
-    "description": "Foreground color for form input elements in success state",
+    "description": "Fill color for input elements in a success validation state placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22466,7 +22466,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-input-warning-layer3",
     "derivation": "channel-surface",
-    "description": "Foreground color for form input elements in warning state",
+    "description": "Fill color for input elements in a warning validation state placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22512,7 +22512,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-navigation-primary-layer3",
     "derivation": "channel-surface",
-    "description": "Primary foreground color for navigation elements",
+    "description": "Fill color for primary navigation elements placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22558,7 +22558,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-radio-checkmark-layer3",
     "derivation": "channel-surface",
-    "description": "Inner dot color for selected radio controls",
+    "description": "Fill color for the indicator dot inside radio button components placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22604,7 +22604,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-radio-unselected-layer3",
     "derivation": "channel-surface",
-    "description": "Border color for unselected radio controls",
+    "description": "Fill color for the unselected radio button container placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",
@@ -22650,7 +22650,7 @@
     "cssOutputFile": "modifiers.surfaces.css",
     "derivedFrom": "--color-foreground-switch-knob-layer3",
     "derivation": "channel-surface",
-    "description": "Knob color for toggle switch controls",
+    "description": "Fill color for the knob of switch toggle components placed on layer 3 backgrounds",
     "declarations": [
       {
         "selector": ".surface",

package/package.json

@@ -1,24 +1,61 @@
 {
   "name": "@canonical/design-tokens",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Canonical design tokens (DTCG format) with CSS custom property output.",
   "type": "module",
   "license": "LGPL-3.0",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/canonical/design-tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/canonical/design-tokens/issues"
+  },
+  "homepage": "https://github.com/canonical/design-tokens#readme",
+  "engines": {
+    "bun": ">=1.3",
+    "node": ">=22"
+  },
+  "keywords": [
+    "design-tokens",
+    "css-custom-properties",
+    "canonical",
+    "dtcg"
+  ],
   "files": [
     "dist",
-    "tokens"
+    "tokens",
+    "bin"
   ],
+  "bin": {
+    "terrazzo-lsp": "./bin/terrazzo-lsp.mjs"
+  },
   "scripts": {
     "build": "tz build",
     "build:all": "bun run build",
-    "check": "bun run check:webarchitect",
-    "check:webarchitect": "webarchitect assets"
+    "check": "bun run check:biome && bun run check:tokens && bun run check:webarchitect",
+    "check:biome": "biome check",
+    "check:biome:fix": "biome check --write",
+    "check:fix": "bun run check:biome:fix",
+    "check:tokens": "tz check",
+    "check:webarchitect": "webarchitect assets",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@canonical/terrazzo-lsp": "^0.2.0"
   },
   "devDependencies": {
-    "@canonical/terrazzo-plugin-css": "0.0.2",
+    "@canonical/terrazzo-plugin-css": "^0.2.0",
     "@canonical/webarchitect": "^0.17.1",
-    "@terrazzo/cli": "2.0.0-beta.6",
-    "@terrazzo/parser": "2.0.0-beta.6"
+    "@terrazzo/cli": "2.0.0",
+    "@terrazzo/parser": "2.0.0",
+    "ajv": "^8.17.0",
+    "ajv-formats": "^3.0.0",
+    "vitest": "^4.0.18"
   },
   "gitHead": "715800edd9e0cf4743af85aca438b37b08d55667"
 }

package/tokens/canonical/global/semantic/dimension/large.tokens.json

@@ -1,3 +1,4 @@
 {
-  "$schema": "https://designtokens.org/schemas/2025.10/format.json"
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "$description": "Dimension: large breakpoint context. Structural placeholder pending design confirmation."
 }

package/tokens/canonical/global/semantic/dimension/medium.tokens.json

@@ -1,3 +1,4 @@
 {
-  "$schema": "https://designtokens.org/schemas/2025.10/format.json"
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "$description": "Dimension: medium breakpoint context. Structural placeholder pending design confirmation."
 }

package/tokens/canonical/global/semantic/modifier/anticipation/caution.tokens.json

@@ -3,57 +3,21 @@
   "color": {
     "foreground": {
       "secondary": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.secondary.warning"
-          }
-        },
-        "$description": "Secondary interactive foreground color for less prominent actions"
+        "$value": "{color.foreground.secondary.warning.$root}",
+        "$description": "Fill color for secondary interactive elements conveying caution or potential issues"
       }
     },
     "text": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.text.warning"
-        }
-      },
-      "$description": "Body text color for readable content"
+      "$value": "{color.text.warning.$root}",
+      "$description": "Text color for conveying caution or potential issues"
     },
     "icon": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.icon.warning"
-        }
-      },
-      "$description": "Icon fill color for informational and decorative icons"
+      "$value": "{color.icon.warning.$root}",
+      "$description": "Icon color for conveying caution or potential issues"
     },
     "border": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.border.warning"
-        }
-      },
-      "$description": "Border color for containers and separators"
+      "$value": "{color.border.warning.$root}",
+      "$description": "Border color for elements conveying caution or potential issues that require attention"
     },
     "$type": "color"
   },

package/tokens/canonical/global/semantic/modifier/anticipation/constructive.tokens.json

@@ -3,70 +3,25 @@
   "color": {
     "foreground": {
       "primary": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.primary.constructive"
-          }
-        },
-        "$description": "Primary interactive foreground color for buttons and actionable elements"
+        "$value": "{color.foreground.primary.constructive.$root}",
+        "$description": "Fill color for primary interactive elements that perform constructive actions such as save, submit, or confirm"
       },
       "ghost": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.ghost.constructive"
-          }
-        },
-        "$description": "Ghost-style foreground color for minimal-chrome interactive elements"
+        "$value": "{color.foreground.ghost.constructive.$root}",
+        "$description": "Fill color for constructive ghost-style interactive elements that match the background in their default state"
       }
     },
     "text": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.text.constructive"
-        }
-      },
-      "$description": "Body text color for readable content"
+      "$value": "{color.text.constructive.$root}",
+      "$description": "Text color for constructive actions such as save, submit, or confirm"
     },
     "icon": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.icon.constructive"
-        }
-      },
-      "$description": "Icon fill color for informational and decorative icons"
+      "$value": "{color.icon.constructive.$root}",
+      "$description": "Icon color for constructive actions such as save, submit, or confirm"
     },
     "border": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.border.constructive"
-        }
-      },
-      "$description": "Border color for containers and separators"
+      "$value": "{color.border.constructive.$root}",
+      "$description": "Border color for elements indicating constructive or additive actions"
     },
     "$type": "color"
   },

package/tokens/canonical/global/semantic/modifier/anticipation/destructive.tokens.json

@@ -3,70 +3,25 @@
   "color": {
     "foreground": {
       "primary": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.primary.destructive"
-          }
-        },
-        "$description": "Primary interactive foreground color for buttons and actionable elements"
+        "$value": "{color.foreground.primary.destructive.$root}",
+        "$description": "Fill color for primary interactive elements that perform destructive actions such as delete or remove"
       },
       "ghost": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.ghost.destructive"
-          }
-        },
-        "$description": "Ghost-style foreground color for minimal-chrome interactive elements"
+        "$value": "{color.foreground.ghost.destructive.$root}",
+        "$description": "Fill color for destructive ghost-style interactive elements that match the background in their default state"
       }
     },
     "text": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.text.destructive"
-        }
-      },
-      "$description": "Body text color for readable content"
+      "$value": "{color.text.destructive.$root}",
+      "$description": "Text color for destructive actions such as delete or remove"
     },
     "icon": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.icon.destructive"
-        }
-      },
-      "$description": "Icon fill color for informational and decorative icons"
+      "$value": "{color.icon.destructive.$root}",
+      "$description": "Icon color for destructive actions such as delete or remove"
     },
     "border": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.border.destructive"
-        }
-      },
-      "$description": "Border color for containers and separators"
+      "$value": "{color.border.destructive.$root}",
+      "$description": "Border color for elements indicating destructive or irreversible actions"
     },
     "$type": "color"
   },

package/tokens/canonical/global/semantic/modifier/criticality/error.tokens.json

@@ -3,83 +3,29 @@
   "color": {
     "foreground": {
       "secondary": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.secondary.error"
-          }
-        },
-        "$description": "Secondary interactive foreground color for less prominent actions"
+        "$value": "{color.foreground.secondary.error.$root}",
+        "$description": "Fill color for secondary interactive elements indicating errors or critical issues"
       },
       "input": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [0.5, 0.3, 328],
-          "alpha": 1
-        },
-        "$extensions": {
-          "com.canonical.modifier": {
-            "aliasOf": "color.foreground.input.error"
-          }
-        },
-        "$description": "Foreground color for form input elements"
+        "$value": "{color.foreground.input.error.$root}",
+        "$description": "Fill color for input elements in an error validation state"
       }
     },
     "text": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.text.error"
-        }
-      },
-      "$description": "Body text color for readable content"
+      "$value": "{color.text.error.$root}",
+      "$description": "Text color for indicating errors or critical issues"
     },
     "icon": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.icon.error"
-        }
-      },
-      "$description": "Icon fill color for informational and decorative icons"
+      "$value": "{color.icon.error.$root}",
+      "$description": "Icon color for indicating errors or critical issues"
     },
     "border": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.border.error"
-        }
-      },
-      "$description": "Border color for containers and separators"
+      "$value": "{color.border.error.$root}",
+      "$description": "Border color for elements indicating errors or critical issues that require immediate action"
     },
     "focusRing": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.5, 0.3, 328],
-        "alpha": 1
-      },
-      "$extensions": {
-        "com.canonical.modifier": {
-          "aliasOf": "color.focusRing.error"
-        }
-      },
-      "$description": "Outline color for keyboard focus indicators"
+      "$value": "{color.focusRing.error}",
+      "$description": "Focus ring color for elements in an error state"
     },
     "$type": "color"
   },