@canonical/design-tokens 0.0.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/bin/terrazzo-lsp.mjs +2 -0
  2. package/dist/tokens.json +23 -23
  3. package/package.json +44 -7
  4. package/tokens/canonical/global/semantic/dimension/large.tokens.json +2 -1
  5. package/tokens/canonical/global/semantic/dimension/medium.tokens.json +2 -1
  6. package/tokens/canonical/global/semantic/modifier/anticipation/caution.tokens.json +8 -44
  7. package/tokens/canonical/global/semantic/modifier/anticipation/constructive.tokens.json +10 -55
  8. package/tokens/canonical/global/semantic/modifier/anticipation/destructive.tokens.json +10 -55
  9. package/tokens/canonical/global/semantic/modifier/criticality/error.tokens.json +12 -66
  10. package/tokens/canonical/global/semantic/modifier/criticality/information.tokens.json +8 -44
  11. package/tokens/canonical/global/semantic/modifier/criticality/success.tokens.json +12 -66
  12. package/tokens/canonical/global/semantic/modifier/criticality/warning.tokens.json +12 -66
  13. package/tokens/canonical/global/semantic/modifier/emphasis/branded.tokens.json +12 -66
  14. package/tokens/canonical/global/semantic/modifier/emphasis/muted.tokens.json +6 -33
  15. package/tokens/canonical/global/semantic/modifier/surface/layer1.tokens.json +30 -165
  16. package/tokens/canonical/global/semantic/modifier/surface/layer2.tokens.json +30 -165
  17. package/tokens/canonical/global/semantic/modifier/surface/layer3.tokens.json +30 -165
package/tokens/canonical/global/semantic/modifier/criticality/information.tokens.json CHANGED
@@ -3,57 +3,21 @@
3
3
  "color": {
4
4
  "foreground": {
5
5
  "secondary": {
6
- "$value": {
7
- "colorSpace": "oklch",
8
- "components": [0.5, 0.3, 328],
9
- "alpha": 1
10
- },
11
- "$extensions": {
12
- "com.canonical.modifier": {
13
- "aliasOf": "color.foreground.secondary.information"
14
- }
15
- },
16
- "$description": "Secondary interactive foreground color for less prominent actions"
6
+ "$value": "{color.foreground.secondary.information.$root}",
7
+ "$description": "Fill color for secondary interactive elements conveying informational or neutral feedback"
17
8
  }
18
9
  },
19
10
  "text": {
20
- "$value": {
21
- "colorSpace": "oklch",
22
- "components": [0.5, 0.3, 328],
23
- "alpha": 1
24
- },
25
- "$extensions": {
26
- "com.canonical.modifier": {
27
- "aliasOf": "color.text.information"
28
- }
29
- },
30
- "$description": "Body text color for readable content"
11
+ "$value": "{color.text.information.$root}",
12
+ "$description": "Text color for conveying informational or neutral feedback"
31
13
  },
32
14
  "icon": {
33
- "$value": {
34
- "colorSpace": "oklch",
35
- "components": [0.5, 0.3, 328],
36
- "alpha": 1
37
- },
38
- "$extensions": {
39
- "com.canonical.modifier": {
40
- "aliasOf": "color.icon.information"
41
- }
42
- },
43
- "$description": "Icon fill color for informational and decorative icons"
15
+ "$value": "{color.icon.information.$root}",
16
+ "$description": "Icon color for conveying informational or neutral feedback"
44
17
  },
45
18
  "border": {
46
- "$value": {
47
- "colorSpace": "oklch",
48
- "components": [0.5, 0.3, 328],
49
- "alpha": 1
50
- },
51
- "$extensions": {
52
- "com.canonical.modifier": {
53
- "aliasOf": "color.border.information"
54
- }
55
- },
56
- "$description": "Border color for containers and separators"
19
+ "$value": "{color.border.information.$root}",
20
+ "$description": "Border color for elements conveying informational or neutral feedback"
57
21
  },
58
22
  "$type": "color"
59
23
  },
package/tokens/canonical/global/semantic/modifier/criticality/success.tokens.json CHANGED
@@ -3,83 +3,29 @@
3
3
  "color": {
4
4
  "foreground": {
5
5
  "secondary": {
6
- "$value": {
7
- "colorSpace": "oklch",
8
- "components": [0.5, 0.3, 328],
9
- "alpha": 1
10
- },
11
- "$extensions": {
12
- "com.canonical.modifier": {
13
- "aliasOf": "color.foreground.secondary.success"
14
- }
15
- },
16
- "$description": "Secondary interactive foreground color for less prominent actions"
6
+ "$value": "{color.foreground.secondary.success.$root}",
7
+ "$description": "Fill color for secondary interactive elements indicating successful completion or positive outcomes"
17
8
  },
18
9
  "input": {
19
- "$value": {
20
- "colorSpace": "oklch",
21
- "components": [0.5, 0.3, 328],
22
- "alpha": 1
23
- },
24
- "$extensions": {
25
- "com.canonical.modifier": {
26
- "aliasOf": "color.foreground.input.success"
27
- }
28
- },
29
- "$description": "Foreground color for form input elements"
10
+ "$value": "{color.foreground.input.success.$root}",
11
+ "$description": "Fill color for input elements in a success validation state"
30
12
  }
31
13
  },
32
14
  "text": {
33
- "$value": {
34
- "colorSpace": "oklch",
35
- "components": [0.5, 0.3, 328],
36
- "alpha": 1
37
- },
38
- "$extensions": {
39
- "com.canonical.modifier": {
40
- "aliasOf": "color.text.success"
41
- }
42
- },
43
- "$description": "Body text color for readable content"
15
+ "$value": "{color.text.success.$root}",
16
+ "$description": "Text color for indicating successful completion or positive outcomes"
44
17
  },
45
18
  "icon": {
46
- "$value": {
47
- "colorSpace": "oklch",
48
- "components": [0.5, 0.3, 328],
49
- "alpha": 1
50
- },
51
- "$extensions": {
52
- "com.canonical.modifier": {
53
- "aliasOf": "color.icon.success"
54
- }
55
- },
56
- "$description": "Icon fill color for informational and decorative icons"
19
+ "$value": "{color.icon.success.$root}",
20
+ "$description": "Icon color for indicating successful completion or positive outcomes"
57
21
  },
58
22
  "border": {
59
- "$value": {
60
- "colorSpace": "oklch",
61
- "components": [0.5, 0.3, 328],
62
- "alpha": 1
63
- },
64
- "$extensions": {
65
- "com.canonical.modifier": {
66
- "aliasOf": "color.border.success"
67
- }
68
- },
69
- "$description": "Border color for containers and separators"
23
+ "$value": "{color.border.success.$root}",
24
+ "$description": "Border color for elements indicating successful completion or positive outcomes"
70
25
  },
71
26
  "focusRing": {
72
- "$value": {
73
- "colorSpace": "oklch",
74
- "components": [0.5, 0.3, 328],
75
- "alpha": 1
76
- },
77
- "$extensions": {
78
- "com.canonical.modifier": {
79
- "aliasOf": "color.focusRing.success"
80
- }
81
- },
82
- "$description": "Outline color for keyboard focus indicators"
27
+ "$value": "{color.focusRing.success}",
28
+ "$description": "Focus ring color for elements in a success state"
83
29
  },
84
30
  "$type": "color"
85
31
  },
package/tokens/canonical/global/semantic/modifier/criticality/warning.tokens.json CHANGED
@@ -3,83 +3,29 @@
3
3
  "color": {
4
4
  "foreground": {
5
5
  "secondary": {
6
- "$value": {
7
- "colorSpace": "oklch",
8
- "components": [0.5, 0.3, 328],
9
- "alpha": 1
10
- },
11
- "$extensions": {
12
- "com.canonical.modifier": {
13
- "aliasOf": "color.foreground.secondary.warning"
14
- }
15
- },
16
- "$description": "Secondary interactive foreground color for less prominent actions"
6
+ "$value": "{color.foreground.secondary.warning.$root}",
7
+ "$description": "Fill color for secondary interactive elements conveying caution or potential issues"
17
8
  },
18
9
  "input": {
19
- "$value": {
20
- "colorSpace": "oklch",
21
- "components": [0.5, 0.3, 328],
22
- "alpha": 1
23
- },
24
- "$extensions": {
25
- "com.canonical.modifier": {
26
- "aliasOf": "color.foreground.input.warning"
27
- }
28
- },
29
- "$description": "Foreground color for form input elements"
10
+ "$value": "{color.foreground.input.warning.$root}",
11
+ "$description": "Fill color for input elements in a warning validation state"
30
12
  }
31
13
  },
32
14
  "text": {
33
- "$value": {
34
- "colorSpace": "oklch",
35
- "components": [0.5, 0.3, 328],
36
- "alpha": 1
37
- },
38
- "$extensions": {
39
- "com.canonical.modifier": {
40
- "aliasOf": "color.text.warning"
41
- }
42
- },
43
- "$description": "Body text color for readable content"
15
+ "$value": "{color.text.warning.$root}",
16
+ "$description": "Text color for conveying caution or potential issues"
44
17
  },
45
18
  "icon": {
46
- "$value": {
47
- "colorSpace": "oklch",
48
- "components": [0.5, 0.3, 328],
49
- "alpha": 1
50
- },
51
- "$extensions": {
52
- "com.canonical.modifier": {
53
- "aliasOf": "color.icon.warning"
54
- }
55
- },
56
- "$description": "Icon fill color for informational and decorative icons"
19
+ "$value": "{color.icon.warning.$root}",
20
+ "$description": "Icon color for conveying caution or potential issues"
57
21
  },
58
22
  "border": {
59
- "$value": {
60
- "colorSpace": "oklch",
61
- "components": [0.5, 0.3, 328],
62
- "alpha": 1
63
- },
64
- "$extensions": {
65
- "com.canonical.modifier": {
66
- "aliasOf": "color.border.warning"
67
- }
68
- },
69
- "$description": "Border color for containers and separators"
23
+ "$value": "{color.border.warning.$root}",
24
+ "$description": "Border color for elements conveying caution or potential issues that require attention"
70
25
  },
71
26
  "focusRing": {
72
- "$value": {
73
- "colorSpace": "oklch",
74
- "components": [0.5, 0.3, 328],
75
- "alpha": 1
76
- },
77
- "$extensions": {
78
- "com.canonical.modifier": {
79
- "aliasOf": "color.focusRing.warning"
80
- }
81
- },
82
- "$description": "Outline color for keyboard focus indicators"
27
+ "$value": "{color.focusRing.warning}",
28
+ "$description": "Focus ring color for elements in a warning state"
83
29
  },
84
30
  "$type": "color"
85
31
  },
package/tokens/canonical/global/semantic/modifier/emphasis/branded.tokens.json CHANGED
@@ -3,83 +3,29 @@
3
3
  "color": {
4
4
  "foreground": {
5
5
  "primary": {
6
- "$value": {
7
- "colorSpace": "oklch",
8
- "components": [0.5, 0.3, 328],
9
- "alpha": 1
10
- },
11
- "$extensions": {
12
- "com.canonical.modifier": {
13
- "aliasOf": "color.foreground.primary.branded"
14
- }
15
- },
16
- "$description": "Primary interactive foreground color for buttons and actionable elements"
6
+ "$value": "{color.foreground.primary.branded.$root}",
7
+ "$description": "Fill color for primary interactive elements that need to reflect the brand identity"
17
8
  },
18
9
  "secondary": {
19
- "$value": {
20
- "colorSpace": "oklch",
21
- "components": [0.5, 0.3, 328],
22
- "alpha": 1
23
- },
24
- "$extensions": {
25
- "com.canonical.modifier": {
26
- "aliasOf": "color.foreground.secondary.branded"
27
- }
28
- },
29
- "$description": "Secondary interactive foreground color for less prominent actions"
10
+ "$value": "{color.foreground.secondary.branded.$root}",
11
+ "$description": "Fill color for secondary interactive elements that need to reflect the brand identity"
30
12
  },
31
13
  "ghost": {
32
- "$value": {
33
- "colorSpace": "oklch",
34
- "components": [0.5, 0.3, 328],
35
- "alpha": 1
36
- },
37
- "$extensions": {
38
- "com.canonical.modifier": {
39
- "aliasOf": "color.foreground.ghost.branded"
40
- }
41
- },
42
- "$description": "Ghost-style foreground color for minimal-chrome interactive elements"
14
+ "$value": "{color.foreground.ghost.branded.$root}",
15
+ "$description": "Fill color for branded ghost-style interactive elements that match the background in their default state"
43
16
  }
44
17
  },
45
18
  "text": {
46
- "$value": {
47
- "colorSpace": "oklch",
48
- "components": [0.5, 0.3, 328],
49
- "alpha": 1
50
- },
51
- "$extensions": {
52
- "com.canonical.modifier": {
53
- "aliasOf": "color.text.branded"
54
- }
55
- },
56
- "$description": "Body text color for readable content"
19
+ "$value": "{color.text.branded.$root}",
20
+ "$description": "Text color for branded elements that need to reflect the brand identity"
57
21
  },
58
22
  "icon": {
59
- "$value": {
60
- "colorSpace": "oklch",
61
- "components": [0.5, 0.3, 328],
62
- "alpha": 1
63
- },
64
- "$extensions": {
65
- "com.canonical.modifier": {
66
- "aliasOf": "color.icon.branded"
67
- }
68
- },
69
- "$description": "Icon fill color for informational and decorative icons"
23
+ "$value": "{color.icon.branded.$root}",
24
+ "$description": "Icon color for branded elements that need to reflect the brand identity"
70
25
  },
71
26
  "border": {
72
- "$value": {
73
- "colorSpace": "oklch",
74
- "components": [0.5, 0.3, 328],
75
- "alpha": 1
76
- },
77
- "$extensions": {
78
- "com.canonical.modifier": {
79
- "aliasOf": "color.border.branded"
80
- }
81
- },
82
- "$description": "Border color for containers and separators"
27
+ "$value": "{color.border.branded.$root}",
28
+ "$description": "Border color for elements that need to reflect the brand identity"
83
29
  },
84
30
  "$type": "color"
85
31
  },
package/tokens/canonical/global/semantic/modifier/emphasis/muted.tokens.json CHANGED
@@ -2,43 +2,16 @@
2
2
  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
3
3
  "color": {
4
4
  "text": {
5
- "$value": {
6
- "colorSpace": "oklch",
7
- "components": [0.5, 0.3, 328],
8
- "alpha": 1
9
- },
10
- "$extensions": {
11
- "com.canonical.modifier": {
12
- "aliasOf": "color.text.muted"
13
- }
14
- },
15
- "$description": "Body text color for readable content"
5
+ "$value": "{color.text.muted.$root}",
6
+ "$description": "Subtle text color for low-emphasis or secondary information"
16
7
  },
17
8
  "icon": {
18
- "$value": {
19
- "colorSpace": "oklch",
20
- "components": [0.5, 0.3, 328],
21
- "alpha": 1
22
- },
23
- "$extensions": {
24
- "com.canonical.modifier": {
25
- "aliasOf": "color.icon.muted"
26
- }
27
- },
28
- "$description": "Icon fill color for informational and decorative icons"
9
+ "$value": "{color.icon.muted.$root}",
10
+ "$description": "Subtle icon color for low-emphasis or decorative icons"
29
11
  },
30
12
  "border": {
31
- "$value": {
32
- "colorSpace": "oklch",
33
- "components": [0.5, 0.3, 328],
34
- "alpha": 1
35
- },
36
- "$extensions": {
37
- "com.canonical.modifier": {
38
- "aliasOf": "color.border.muted"
39
- }
40
- },
41
- "$description": "Border color for containers and separators"
13
+ "$value": "{color.border.muted.$root}",
14
+ "$description": "Subtle border color for low-emphasis elements such as dividers and decorative borders that don't need to meet contrast requirements"
42
15
  },
43
16
  "$type": "color"
44
17
  },
package/tokens/canonical/global/semantic/modifier/surface/layer1.tokens.json CHANGED
@@ -2,207 +2,72 @@
2
2
  "$schema": "https://designtokens.org/schemas/2025.10/format.json",
3
3
  "color": {
4
4
  "background": {
5
- "$value": {
6
- "colorSpace": "oklch",
7
- "components": [0.5, 0.3, 328],
8
- "alpha": 1
9
- },
10
- "$extensions": {
11
- "com.canonical.modifier": {
12
- "aliasOf": "color.background"
13
- }
14
- },
15
- "$description": "Background fill color for the surface area"
5
+ "$value": "{color.background.$root}",
6
+ "$description": "Default page background color for the primary content surface"
16
7
  },
17
8
  "foreground": {
18
9
  "ghost": {
19
- "$value": {
20
- "colorSpace": "oklch",
21
- "components": [0.5, 0.3, 328],
22
- "alpha": 1
23
- },
24
- "$extensions": {
25
- "com.canonical.modifier": {
26
- "aliasOf": "color.foreground.ghost"
27
- }
28
- },
29
- "$description": "Ghost-style foreground color for minimal-chrome interactive elements",
10
+ "$value": "{color.foreground.ghost.$root}",
11
+ "$description": "Fill color for ghost-style interactive elements such as buttons that have the same color as the background in their default state",
30
12
  "branded": {
31
- "$value": {
32
- "colorSpace": "oklch",
33
- "components": [0.5, 0.3, 328],
34
- "alpha": 1
35
- },
36
- "$extensions": {
37
- "com.canonical.modifier": {
38
- "aliasOf": "color.foreground.ghost.branded"
39
- }
40
- },
41
- "$description": "Branded ghost-style foreground color for minimal-chrome interactive elements"
13
+ "$value": "{color.foreground.ghost.branded.$root}",
14
+ "$description": "Fill color for branded ghost-style interactive elements that match the background in their default state"
42
15
  },
43
16
  "constructive": {
44
- "$value": {
45
- "colorSpace": "oklch",
46
- "components": [0.5, 0.3, 328],
47
- "alpha": 1
48
- },
49
- "$extensions": {
50
- "com.canonical.modifier": {
51
- "aliasOf": "color.foreground.ghost.constructive"
52
- }
53
- },
54
- "$description": "Constructive ghost-style foreground color for minimal-chrome interactive elements"
17
+ "$value": "{color.foreground.ghost.constructive.$root}",
18
+ "$description": "Fill color for constructive ghost-style interactive elements that match the background in their default state"
55
19
  },
56
20
  "destructive": {
57
- "$value": {
58
- "colorSpace": "oklch",
59
- "components": [0.5, 0.3, 328],
60
- "alpha": 1
61
- },
62
- "$extensions": {
63
- "com.canonical.modifier": {
64
- "aliasOf": "color.foreground.ghost.destructive"
65
- }
66
- },
67
- "$description": "Destructive ghost-style foreground color for minimal-chrome interactive elements"
21
+ "$value": "{color.foreground.ghost.destructive.$root}",
22
+ "$description": "Fill color for destructive ghost-style interactive elements that match the background in their default state"
68
23
  }
69
24
  },
70
25
  "input": {
71
- "$value": {
72
- "colorSpace": "oklch",
73
- "components": [0.5, 0.3, 328],
74
- "alpha": 1
75
- },
76
- "$extensions": {
77
- "com.canonical.modifier": {
78
- "aliasOf": "color.foreground.input"
79
- }
80
- },
81
- "$description": "Foreground color for form input elements",
26
+ "$value": "{color.foreground.input.$root}",
27
+ "$description": "Fill color for input elements such as text fields, textareas, and select dropdowns",
82
28
  "error": {
83
- "$value": {
84
- "colorSpace": "oklch",
85
- "components": [0.5, 0.3, 328],
86
- "alpha": 1
87
- },
88
- "$extensions": {
89
- "com.canonical.modifier": {
90
- "aliasOf": "color.foreground.input.error"
91
- }
92
- },
93
- "$description": "Foreground color for form input elements in error state"
29
+ "$value": "{color.foreground.input.error.$root}",
30
+ "$description": "Fill color for input elements in an error validation state"
94
31
  },
95
32
  "success": {
96
- "$value": {
97
- "colorSpace": "oklch",
98
- "components": [0.5, 0.3, 328],
99
- "alpha": 1
100
- },
101
- "$extensions": {
102
- "com.canonical.modifier": {
103
- "aliasOf": "color.foreground.input.success"
104
- }
105
- },
106
- "$description": "Foreground color for form input elements in success state"
33
+ "$value": "{color.foreground.input.success.$root}",
34
+ "$description": "Fill color for input elements in a success validation state"
107
35
  },
108
36
  "warning": {
109
- "$value": {
110
- "colorSpace": "oklch",
111
- "components": [0.5, 0.3, 328],
112
- "alpha": 1
113
- },
114
- "$extensions": {
115
- "com.canonical.modifier": {
116
- "aliasOf": "color.foreground.input.warning"
117
- }
118
- },
119
- "$description": "Foreground color for form input elements in warning state"
37
+ "$value": "{color.foreground.input.warning.$root}",
38
+ "$description": "Fill color for input elements in a warning validation state"
120
39
  }
121
40
  },
122
41
  "navigation": {
123
42
  "primary": {
124
- "$value": {
125
- "colorSpace": "oklch",
126
- "components": [0.5, 0.3, 328],
127
- "alpha": 1
128
- },
129
- "$extensions": {
130
- "com.canonical.modifier": {
131
- "aliasOf": "color.foreground.navigation.primary"
132
- }
133
- },
134
- "$description": "Primary foreground color for navigation elements"
43
+ "$value": "{color.foreground.navigation.primary.$root}",
44
+ "$description": "Fill color for primary navigation elements such as the main navigation bar"
135
45
  }
136
46
  },
137
47
  "checkbox": {
138
48
  "checkmark": {
139
- "$value": {
140
- "colorSpace": "oklch",
141
- "components": [0.5, 0.3, 328],
142
- "alpha": 1
143
- },
144
- "$extensions": {
145
- "com.canonical.modifier": {
146
- "aliasOf": "color.foreground.checkbox.checkmark"
147
- }
148
- },
149
- "$description": "Checkmark glyph color for checkbox controls"
49
+ "$value": "{color.foreground.checkbox.checkmark.$root}",
50
+ "$description": "Fill color for the checkmark icon inside checkbox components"
150
51
  },
151
52
  "unselected": {
152
- "$value": {
153
- "colorSpace": "oklch",
154
- "components": [0.5, 0.3, 328],
155
- "alpha": 1
156
- },
157
- "$extensions": {
158
- "com.canonical.modifier": {
159
- "aliasOf": "color.foreground.checkbox.unselected"
160
- }
161
- },
162
- "$description": "Border/fill color for unselected checkbox controls"
53
+ "$value": "{color.foreground.checkbox.unselected.$root}",
54
+ "$description": "Fill color for the checkbox container when unselected"
163
55
  }
164
56
  },
165
57
  "radio": {
166
58
  "checkmark": {
167
- "$value": {
168
- "colorSpace": "oklch",
169
- "components": [0.5, 0.3, 328],
170
- "alpha": 1
171
- },
172
- "$extensions": {
173
- "com.canonical.modifier": {
174
- "aliasOf": "color.foreground.radio.checkmark"
175
- }
176
- },
177
- "$description": "Inner dot color for selected radio controls"
59
+ "$value": "{color.foreground.radio.checkmark.$root}",
60
+ "$description": "Fill color for the indicator dot inside radio button components"
178
61
  },
179
62
  "unselected": {
180
- "$value": {
181
- "colorSpace": "oklch",
182
- "components": [0.5, 0.3, 328],
183
- "alpha": 1
184
- },
185
- "$extensions": {
186
- "com.canonical.modifier": {
187
- "aliasOf": "color.foreground.radio.unselected"
188
- }
189
- },
190
- "$description": "Border color for unselected radio controls"
63
+ "$value": "{color.foreground.radio.unselected.$root}",
64
+ "$description": "Fill color for the radio button container when unselected"
191
65
  }
192
66
  },
193
67
  "switch": {
194
68
  "knob": {
195
- "$value": {
196
- "colorSpace": "oklch",
197
- "components": [0.5, 0.3, 328],
198
- "alpha": 1
199
- },
200
- "$extensions": {
201
- "com.canonical.modifier": {
202
- "aliasOf": "color.foreground.switch.knob"
203
- }
204
- },
205
- "$description": "Knob color for toggle switch controls"
69
+ "$value": "{color.foreground.switch.knob.$root}",
70
+ "$description": "Fill color for the knob of switch toggle components"
206
71
  }
207
72
  }
208
73
  },