@canonical/design-tokens 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/design-tokens",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Canonical design tokens (DTCG format) with CSS custom property output.",
   "type": "module",
   "license": "LGPL-3.0",

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."