@canonical/design-tokens 0.5.2 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/design-tokens",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Canonical design tokens (DTCG format) with CSS custom property output.",
   "type": "module",
   "license": "LGPL-3.0",
@@ -46,11 +46,11 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@canonical/terrazzo-lsp": "^0.5.2"
+    "@canonical/terrazzo-lsp": "^0.6.0"
   },
   "devDependencies": {
-    "@canonical/terrazzo-plugin-css": "^0.5.2",
-    "@canonical/webarchitect": "^0.17.1",
+    "@canonical/terrazzo-plugin-css": "^0.6.0",
+    "@canonical/webarchitect": "^0.20.0",
     "@terrazzo/cli": "2.0.0",
     "@terrazzo/parser": "2.0.0",
     "ajv": "^8.17.0",

package/tokens/canonical/canonical.resolver.json

@@ -131,6 +131,60 @@
         ]
       }
     },
+    "lifecycle": {
+      "description": "Lifecycle modifier family. Contexts: planned, inProgress, completed, failed.",
+      "default": "none",
+      "contexts": {
+        "none": [],
+        "planned": [
+          {
+            "$ref": "global/semantic/modifier/lifecycle/planned.tokens.json"
+          }
+        ],
+        "inProgress": [
+          {
+            "$ref": "global/semantic/modifier/lifecycle/in-progress.tokens.json"
+          }
+        ],
+        "completed": [
+          {
+            "$ref": "global/semantic/modifier/lifecycle/completed.tokens.json"
+          }
+        ],
+        "failed": [
+          {
+            "$ref": "global/semantic/modifier/lifecycle/failed.tokens.json"
+          }
+        ]
+      }
+    },
+    "release": {
+      "description": "Release modifier family. Contexts: experimental, alpha, beta, stable.",
+      "default": "none",
+      "contexts": {
+        "none": [],
+        "experimental": [
+          {
+            "$ref": "global/semantic/modifier/release/experimental.tokens.json"
+          }
+        ],
+        "alpha": [
+          {
+            "$ref": "global/semantic/modifier/release/alpha.tokens.json"
+          }
+        ],
+        "beta": [
+          {
+            "$ref": "global/semantic/modifier/release/beta.tokens.json"
+          }
+        ],
+        "stable": [
+          {
+            "$ref": "global/semantic/modifier/release/stable.tokens.json"
+          }
+        ]
+      }
+    },
     "surface": {
       "description": "Surface modifier for layer-aware token rebinding. Contexts: layer1, layer2, layer3. CSS output uses compound .surface selectors (depth-based compounding).",
       "default": "none",
@@ -157,6 +211,8 @@
     { "$ref": "#/modifiers/criticality" },
     { "$ref": "#/modifiers/emphasis" },
     { "$ref": "#/modifiers/importance" },
+    { "$ref": "#/modifiers/lifecycle" },
+    { "$ref": "#/modifiers/release" },
     { "$ref": "#/modifiers/surface" }
   ]
 }

package/tokens/canonical/global/semantic/color/dark.tokens.json

@@ -553,6 +553,14 @@
       "success": {
         "$value": "{color.border.success.$root}",
         "$description": "Focus ring color for elements in a success state"
+      },
+      "constructive": {
+        "$value": "{color.border.constructive.$root}",
+        "$description": "Focus ring color for constructive interactive elements"
+      },
+      "destructive": {
+        "$value": "{color.border.destructive.$root}",
+        "$description": "Focus ring color for destructive interactive elements"
       }
     },
     "foreground": {
@@ -3052,6 +3060,84 @@
             },
             "$description": "Fill color to use when the element using the branded primary foreground is in a disabled state"
           }
+        },
+        "warning": {
+          "$root": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/palette/yellow/520/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/0"
+                },
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Fill color for primary interactive elements conveying caution or warning"
+          },
+          "hover": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/hover/onDark/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Hover state for warning primary foreground"
+          },
+          "active": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/active/onDark/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Active state for warning primary foreground"
+          },
+          "disabled": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/disabled/onDark/$value"
+                },
+                {
+                  "$ref": "#/number/chroma/disabled/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Disabled state for warning primary foreground"
+          }
         }
       },
       "secondary": {

package/tokens/canonical/global/semantic/color/light.tokens.json

@@ -553,6 +553,14 @@
       "success": {
         "$value": "{color.border.success.$root}",
         "$description": "Focus ring color for elements in a success state"
+      },
+      "constructive": {
+        "$value": "{color.border.constructive.$root}",
+        "$description": "Focus ring color for constructive interactive elements"
+      },
+      "destructive": {
+        "$value": "{color.border.destructive.$root}",
+        "$description": "Focus ring color for destructive interactive elements"
       }
     },
     "foreground": {
@@ -3052,6 +3060,84 @@
             },
             "$description": "Fill color to use when the element using the branded primary foreground is in a disabled state"
           }
+        },
+        "warning": {
+          "$root": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/palette/yellow/520/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/0"
+                },
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/palette/yellow/520/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Fill color for primary interactive elements conveying caution or warning"
+          },
+          "hover": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/hover/onLight/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Hover state for warning primary foreground"
+          },
+          "active": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/active/onLight/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/1"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Active state for warning primary foreground"
+          },
+          "disabled": {
+            "$value": {
+              "colorSpace": {
+                "$ref": "#/color/foreground/primary/warning/$root/$value/colorSpace"
+              },
+              "components": [
+                {
+                  "$ref": "#/number/lightness/foreground/primary/disabled/onLight/$value"
+                },
+                {
+                  "$ref": "#/number/chroma/disabled/$value"
+                },
+                {
+                  "$ref": "#/color/foreground/primary/warning/$root/$value/components/2"
+                }
+              ]
+            },
+            "$description": "Disabled state for warning primary foreground"
+          }
         }
       },
       "secondary": {

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

@@ -2,6 +2,10 @@
   "$schema": "https://designtokens.org/schemas/2025.10/format.json",
   "color": {
     "foreground": {
+      "primary": {
+        "$value": "{color.foreground.primary.warning.$root}",
+        "$description": "Fill color for primary interactive elements conveying caution or potential issues"
+      },
       "secondary": {
         "$value": "{color.foreground.secondary.warning.$root}",
         "$description": "Fill color for secondary interactive elements conveying caution or potential issues"
@@ -17,9 +21,13 @@
     },
     "border": {
       "$value": "{color.border.warning.$root}",
-      "$description": "Border color for elements conveying caution or potential issues that require attention"
+      "$description": "Border color for elements conveying caution or potential issues"
+    },
+    "focusRing": {
+      "$value": "{color.focusRing.warning}",
+      "$description": "Focus ring color for caution interactive elements"
     },
     "$type": "color"
   },
-  "$description": "Anticipation: caution context. Uses .warning variant as closest handover match (placeholder)."
+  "$description": "Anticipation: caution context."
 }

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

@@ -23,6 +23,10 @@
       "$value": "{color.border.constructive.$root}",
       "$description": "Border color for elements indicating constructive or additive actions"
     },
+    "focusRing": {
+      "$value": "{color.focusRing.constructive}",
+      "$description": "Focus ring color for constructive interactive elements"
+    },
     "$type": "color"
   },
   "$description": "Anticipation: constructive context."

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

@@ -23,6 +23,10 @@
       "$value": "{color.border.destructive.$root}",
       "$description": "Border color for elements indicating destructive or irreversible actions"
     },
+    "focusRing": {
+      "$value": "{color.focusRing.destructive}",
+      "$description": "Focus ring color for destructive interactive elements"
+    },
     "$type": "color"
   },
   "$description": "Anticipation: destructive context."

package/tokens/canonical/global/semantic/modifier/lifecycle/completed.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.success.$root}",
+        "$description": "Fill color for secondary elements indicating a completed state"
+      }
+    },
+    "text": {
+      "$value": "{color.text.success.$root}",
+      "$description": "Text color for indicating a completed state"
+    },
+    "icon": {
+      "$value": "{color.icon.success.$root}",
+      "$description": "Icon color for indicating a completed state"
+    },
+    "border": {
+      "$value": "{color.border.success.$root}",
+      "$description": "Border color for elements indicating a completed state"
+    },
+    "$type": "color"
+  },
+  "$description": "Lifecycle: completed context. Maps to success (green) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/lifecycle/failed.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.error.$root}",
+        "$description": "Fill color for secondary elements indicating a failed state"
+      }
+    },
+    "text": {
+      "$value": "{color.text.error.$root}",
+      "$description": "Text color for indicating a failed state"
+    },
+    "icon": {
+      "$value": "{color.icon.error.$root}",
+      "$description": "Icon color for indicating a failed state"
+    },
+    "border": {
+      "$value": "{color.border.error.$root}",
+      "$description": "Border color for elements indicating a failed state"
+    },
+    "$type": "color"
+  },
+  "$description": "Lifecycle: failed context. Maps to error (red) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/lifecycle/in-progress.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.information.$root}",
+        "$description": "Fill color for secondary elements indicating an in-progress state"
+      }
+    },
+    "text": {
+      "$value": "{color.text.information.$root}",
+      "$description": "Text color for indicating an in-progress state"
+    },
+    "icon": {
+      "$value": "{color.icon.information.$root}",
+      "$description": "Icon color for indicating an in-progress state"
+    },
+    "border": {
+      "$value": "{color.border.information.$root}",
+      "$description": "Border color for elements indicating an in-progress state"
+    },
+    "$type": "color"
+  },
+  "$description": "Lifecycle: in-progress context. Maps to information (blue) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/lifecycle/planned.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.information.$root}",
+        "$description": "Fill color for secondary elements indicating a planned or pending state"
+      }
+    },
+    "text": {
+      "$value": "{color.text.information.$root}",
+      "$description": "Text color for indicating a planned or pending state"
+    },
+    "icon": {
+      "$value": "{color.icon.information.$root}",
+      "$description": "Icon color for indicating a planned or pending state"
+    },
+    "border": {
+      "$value": "{color.border.information.$root}",
+      "$description": "Border color for elements indicating a planned or pending state"
+    },
+    "$type": "color"
+  },
+  "$description": "Lifecycle: planned context. Maps to information (blue/neutral) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/release/alpha.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.warning.$root}",
+        "$description": "Fill color for secondary elements indicating an alpha release stage"
+      }
+    },
+    "text": {
+      "$value": "{color.text.warning.$root}",
+      "$description": "Text color for indicating an alpha release stage"
+    },
+    "icon": {
+      "$value": "{color.icon.warning.$root}",
+      "$description": "Icon color for indicating an alpha release stage"
+    },
+    "border": {
+      "$value": "{color.border.warning.$root}",
+      "$description": "Border color for elements indicating an alpha release stage"
+    },
+    "$type": "color"
+  },
+  "$description": "Release: alpha context. Maps to warning (amber) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/release/beta.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.information.$root}",
+        "$description": "Fill color for secondary elements indicating a beta release stage"
+      }
+    },
+    "text": {
+      "$value": "{color.text.information.$root}",
+      "$description": "Text color for indicating a beta release stage"
+    },
+    "icon": {
+      "$value": "{color.icon.information.$root}",
+      "$description": "Icon color for indicating a beta release stage"
+    },
+    "border": {
+      "$value": "{color.border.information.$root}",
+      "$description": "Border color for elements indicating a beta release stage"
+    },
+    "$type": "color"
+  },
+  "$description": "Release: beta context. Maps to information (blue) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/release/experimental.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.warning.$root}",
+        "$description": "Fill color for secondary elements indicating an experimental release stage"
+      }
+    },
+    "text": {
+      "$value": "{color.text.warning.$root}",
+      "$description": "Text color for indicating an experimental release stage"
+    },
+    "icon": {
+      "$value": "{color.icon.warning.$root}",
+      "$description": "Icon color for indicating an experimental release stage"
+    },
+    "border": {
+      "$value": "{color.border.warning.$root}",
+      "$description": "Border color for elements indicating an experimental release stage"
+    },
+    "$type": "color"
+  },
+  "$description": "Release: experimental context. Maps to warning (orange) colours pending design confirmation."
+}

package/tokens/canonical/global/semantic/modifier/release/stable.tokens.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": "{color.foreground.secondary.success.$root}",
+        "$description": "Fill color for secondary elements indicating a stable release"
+      }
+    },
+    "text": {
+      "$value": "{color.text.success.$root}",
+      "$description": "Text color for indicating a stable release"
+    },
+    "icon": {
+      "$value": "{color.icon.success.$root}",
+      "$description": "Icon color for indicating a stable release"
+    },
+    "border": {
+      "$value": "{color.border.success.$root}",
+      "$description": "Border color for elements indicating a stable release"
+    },
+    "$type": "color"
+  },
+  "$description": "Release: stable context. Maps to success (green) colours pending design confirmation."
+}