@canonical/design-tokens 0.0.1

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

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json"
+}

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

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json"
+}

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

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "dimension": {
+    "$type": "dimension",
+    "size": {
+      "rootFontSize": {
+        "$value": "{dimension.200}",
+        "$description": "Base font size defining the root rem unit for small breakpoint layouts (16px)"
+      },
+      "height": {
+        "baseline": {
+          "$value": "{dimension.100}",
+          "$description": "Baseline grid unit for vertical rhythm and component alignment (8px)"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "dimension": {
+    "$type": "dimension",
+    "size": {
+      "rootFontSize": {
+        "$value": "{dimension.225}",
+        "$description": "Base font size defining the root rem unit for extra-large breakpoint layouts (18px)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "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"
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "$type": "color"
+  },
+  "$description": "Anticipation: caution context. Uses .warning variant as closest handover match (placeholder)."
+}

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

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "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"
+      },
+      "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"
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "$type": "color"
+  },
+  "$description": "Anticipation: constructive context."
+}

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

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "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"
+      },
+      "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"
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "$type": "color"
+  },
+  "$description": "Anticipation: destructive context."
+}

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

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "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"
+      },
+      "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"
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "$type": "color"
+  },
+  "$description": "Criticality: error context."
+}

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

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.secondary.information"
+          }
+        },
+        "$description": "Secondary interactive foreground color for less prominent actions"
+      }
+    },
+    "text": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.text.information"
+        }
+      },
+      "$description": "Body text color for readable content"
+    },
+    "icon": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.icon.information"
+        }
+      },
+      "$description": "Icon fill color for informational and decorative icons"
+    },
+    "border": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.border.information"
+        }
+      },
+      "$description": "Border color for containers and separators"
+    },
+    "$type": "color"
+  },
+  "$description": "Criticality: information context."
+}

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

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "secondary": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.secondary.success"
+          }
+        },
+        "$description": "Secondary interactive foreground color for less prominent actions"
+      },
+      "input": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.input.success"
+          }
+        },
+        "$description": "Foreground color for form input elements"
+      }
+    },
+    "text": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.text.success"
+        }
+      },
+      "$description": "Body text color for readable content"
+    },
+    "icon": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.icon.success"
+        }
+      },
+      "$description": "Icon fill color for informational and decorative icons"
+    },
+    "border": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.border.success"
+        }
+      },
+      "$description": "Border color for containers and separators"
+    },
+    "focusRing": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.focusRing.success"
+        }
+      },
+      "$description": "Outline color for keyboard focus indicators"
+    },
+    "$type": "color"
+  },
+  "$description": "Criticality: success context."
+}

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

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "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"
+      },
+      "input": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.input.warning"
+          }
+        },
+        "$description": "Foreground color for form input elements"
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "focusRing": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.focusRing.warning"
+        }
+      },
+      "$description": "Outline color for keyboard focus indicators"
+    },
+    "$type": "color"
+  },
+  "$description": "Criticality: warning context."
+}

package/tokens/canonical/global/semantic/modifier/emphasis/branded.tokens.json

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "color": {
+    "foreground": {
+      "primary": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.primary.branded"
+          }
+        },
+        "$description": "Primary interactive foreground color for buttons and actionable elements"
+      },
+      "secondary": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.secondary.branded"
+          }
+        },
+        "$description": "Secondary interactive foreground color for less prominent actions"
+      },
+      "ghost": {
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [0.5, 0.3, 328],
+          "alpha": 1
+        },
+        "$extensions": {
+          "com.canonical.modifier": {
+            "aliasOf": "color.foreground.ghost.branded"
+          }
+        },
+        "$description": "Ghost-style foreground color for minimal-chrome interactive elements"
+      }
+    },
+    "text": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.text.branded"
+        }
+      },
+      "$description": "Body text color for readable content"
+    },
+    "icon": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.icon.branded"
+        }
+      },
+      "$description": "Icon fill color for informational and decorative icons"
+    },
+    "border": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.5, 0.3, 328],
+        "alpha": 1
+      },
+      "$extensions": {
+        "com.canonical.modifier": {
+          "aliasOf": "color.border.branded"
+        }
+      },
+      "$description": "Border color for containers and separators"
+    },
+    "$type": "color"
+  },
+  "$description": "Emphasis: branded context."
+}

package/tokens/canonical/global/semantic/modifier/emphasis/highlighted.tokens.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
+  "$description": "Emphasis: highlighted context. All roles deferred pending design confirmation."
+}