@canonical/design-tokens 0.5.2 → 0.6.0

package/dist/modifiers.lifecycle.css

@@ -0,0 +1,27 @@
+/* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
+@layer ds.modifiers {
+	.planned {
+		--modifier-color-border: var(--color-border-information);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
+		--modifier-color-icon: var(--color-icon-information);
+		--modifier-color-text: var(--color-text-information);
+	}
+	.inProgress {
+		--modifier-color-border: var(--color-border-information);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
+		--modifier-color-icon: var(--color-icon-information);
+		--modifier-color-text: var(--color-text-information);
+	}
+	.completed {
+		--modifier-color-border: var(--color-border-success);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-success);
+		--modifier-color-icon: var(--color-icon-success);
+		--modifier-color-text: var(--color-text-success);
+	}
+	.failed {
+		--modifier-color-border: var(--color-border-error);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-error);
+		--modifier-color-icon: var(--color-icon-error);
+		--modifier-color-text: var(--color-text-error);
+	}
+}

package/dist/modifiers.release.css

@@ -0,0 +1,27 @@
+/* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
+@layer ds.modifiers {
+	.experimental {
+		--modifier-color-border: var(--color-border-warning);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
+		--modifier-color-icon: var(--color-icon-warning);
+		--modifier-color-text: var(--color-text-warning);
+	}
+	.alpha {
+		--modifier-color-border: var(--color-border-warning);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
+		--modifier-color-icon: var(--color-icon-warning);
+		--modifier-color-text: var(--color-text-warning);
+	}
+	.beta {
+		--modifier-color-border: var(--color-border-information);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
+		--modifier-color-icon: var(--color-icon-information);
+		--modifier-color-text: var(--color-text-information);
+	}
+	.stable {
+		--modifier-color-border: var(--color-border-success);
+		--modifier-color-foreground-secondary: var(--color-foreground-secondary-success);
+		--modifier-color-icon: var(--color-icon-success);
+		--modifier-color-text: var(--color-text-success);
+	}
+}

package/dist/tokens.json

@@ -21404,10 +21404,10 @@
     "type": "color",
     "tier": "semantic",
     "isPaired": false,
-    "cssOutputFile": "modifiers.emphasis.css",
-    "derivedFrom": "--color-border-branded",
+    "cssOutputFile": "modifiers.release.css",
+    "derivedFrom": "--color-border-success",
     "derivation": "channel-modifier",
-    "description": "Border color for elements that need to reflect the brand identity",
+    "description": "Border color for elements indicating a stable release",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21507,6 +21507,94 @@
             "prelude": "ds.modifiers"
           }
         ]
+      },
+      {
+        "selector": ".planned",
+        "file": "modifiers.lifecycle.css",
+        "line": 3,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".inProgress",
+        "file": "modifiers.lifecycle.css",
+        "line": 9,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".completed",
+        "file": "modifiers.lifecycle.css",
+        "line": 15,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".failed",
+        "file": "modifiers.lifecycle.css",
+        "line": 21,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".experimental",
+        "file": "modifiers.release.css",
+        "line": 3,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".alpha",
+        "file": "modifiers.release.css",
+        "line": 9,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".beta",
+        "file": "modifiers.release.css",
+        "line": 15,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".stable",
+        "file": "modifiers.release.css",
+        "line": 21,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
       }
     ]
   },
@@ -21608,10 +21696,10 @@
     "type": "color",
     "tier": "semantic",
     "isPaired": false,
-    "cssOutputFile": "modifiers.emphasis.css",
-    "derivedFrom": "--color-icon-branded",
+    "cssOutputFile": "modifiers.release.css",
+    "derivedFrom": "--color-icon-success",
     "derivation": "channel-modifier",
-    "description": "Icon color for branded elements that need to reflect the brand identity",
+    "description": "Icon color for indicating a stable release",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21711,6 +21799,94 @@
             "prelude": "ds.modifiers"
           }
         ]
+      },
+      {
+        "selector": ".planned",
+        "file": "modifiers.lifecycle.css",
+        "line": 5,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".inProgress",
+        "file": "modifiers.lifecycle.css",
+        "line": 11,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".completed",
+        "file": "modifiers.lifecycle.css",
+        "line": 17,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".failed",
+        "file": "modifiers.lifecycle.css",
+        "line": 23,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".experimental",
+        "file": "modifiers.release.css",
+        "line": 5,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".alpha",
+        "file": "modifiers.release.css",
+        "line": 11,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".beta",
+        "file": "modifiers.release.css",
+        "line": 17,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".stable",
+        "file": "modifiers.release.css",
+        "line": 23,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
       }
     ]
   },
@@ -21720,10 +21896,10 @@
     "type": "color",
     "tier": "semantic",
     "isPaired": false,
-    "cssOutputFile": "modifiers.emphasis.css",
-    "derivedFrom": "--color-text-branded",
+    "cssOutputFile": "modifiers.release.css",
+    "derivedFrom": "--color-text-success",
     "derivation": "channel-modifier",
-    "description": "Text color for branded elements that need to reflect the brand identity",
+    "description": "Text color for indicating a stable release",
     "declarations": [
       {
         "selector": ".constructive",
@@ -21823,6 +21999,94 @@
             "prelude": "ds.modifiers"
           }
         ]
+      },
+      {
+        "selector": ".planned",
+        "file": "modifiers.lifecycle.css",
+        "line": 6,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".inProgress",
+        "file": "modifiers.lifecycle.css",
+        "line": 12,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".completed",
+        "file": "modifiers.lifecycle.css",
+        "line": 18,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".failed",
+        "file": "modifiers.lifecycle.css",
+        "line": 24,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".experimental",
+        "file": "modifiers.release.css",
+        "line": 6,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".alpha",
+        "file": "modifiers.release.css",
+        "line": 12,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".beta",
+        "file": "modifiers.release.css",
+        "line": 18,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".stable",
+        "file": "modifiers.release.css",
+        "line": 24,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
       }
     ]
   },
@@ -21832,10 +22096,10 @@
     "type": "color",
     "tier": "semantic",
     "isPaired": false,
-    "cssOutputFile": "modifiers.emphasis.css",
-    "derivedFrom": "--color-foreground-secondary-branded",
+    "cssOutputFile": "modifiers.release.css",
+    "derivedFrom": "--color-foreground-secondary-success",
     "derivation": "channel-modifier",
-    "description": "Fill color for secondary interactive elements that need to reflect the brand identity",
+    "description": "Fill color for secondary elements indicating a stable release",
     "declarations": [
       {
         "selector": ".caution",
@@ -21902,6 +22166,94 @@
             "prelude": "ds.modifiers"
           }
         ]
+      },
+      {
+        "selector": ".planned",
+        "file": "modifiers.lifecycle.css",
+        "line": 4,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".inProgress",
+        "file": "modifiers.lifecycle.css",
+        "line": 10,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".completed",
+        "file": "modifiers.lifecycle.css",
+        "line": 16,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".failed",
+        "file": "modifiers.lifecycle.css",
+        "line": 22,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".experimental",
+        "file": "modifiers.release.css",
+        "line": 4,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".alpha",
+        "file": "modifiers.release.css",
+        "line": 10,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".beta",
+        "file": "modifiers.release.css",
+        "line": 16,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
+      },
+      {
+        "selector": ".stable",
+        "file": "modifiers.release.css",
+        "line": 22,
+        "atRules": [
+          {
+            "name": "layer",
+            "prelude": "ds.modifiers"
+          }
+        ]
       }
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/design-tokens",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "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/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."
+}