@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.
@@ -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.layer2"
13
- }
14
- },
15
- "$description": "Background fill color for the surface area"
5
+ "$value": "{color.background.layer2}",
6
+ "$description": "Background color for elevated surfaces layered above the primary background (e.g., cards, sidebars)"
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.layer2"
27
- }
28
- },
29
- "$description": "Ghost-style foreground color for minimal-chrome interactive elements",
10
+ "$value": "{color.foreground.ghost.layer2.$root}",
11
+ "$description": "Fill color for ghost-style interactive elements placed on layer 2 backgrounds",
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.layer2"
39
- }
40
- },
41
- "$description": "Branded ghost-style foreground color for minimal-chrome interactive elements"
13
+ "$value": "{color.foreground.ghost.branded.layer2.$root}",
14
+ "$description": "Fill color for branded ghost-style interactive elements placed on layer 2 backgrounds"
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.layer2"
52
- }
53
- },
54
- "$description": "Constructive ghost-style foreground color for minimal-chrome interactive elements"
17
+ "$value": "{color.foreground.ghost.constructive.layer2.$root}",
18
+ "$description": "Fill color for constructive ghost-style interactive elements placed on layer 2 backgrounds"
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.layer2"
65
- }
66
- },
67
- "$description": "Destructive ghost-style foreground color for minimal-chrome interactive elements"
21
+ "$value": "{color.foreground.ghost.destructive.layer2.$root}",
22
+ "$description": "Fill color for destructive ghost-style interactive elements placed on layer 2 backgrounds"
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.layer2"
79
- }
80
- },
81
- "$description": "Foreground color for form input elements",
26
+ "$value": "{color.foreground.input.layer2.$root}",
27
+ "$description": "Fill color for input elements placed on layer 2 backgrounds",
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.layer2"
91
- }
92
- },
93
- "$description": "Foreground color for form input elements in error state"
29
+ "$value": "{color.foreground.input.error.layer2.$root}",
30
+ "$description": "Fill color for input elements in an error validation state placed on layer 2 backgrounds"
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.layer2"
104
- }
105
- },
106
- "$description": "Foreground color for form input elements in success state"
33
+ "$value": "{color.foreground.input.success.layer2.$root}",
34
+ "$description": "Fill color for input elements in a success validation state placed on layer 2 backgrounds"
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.layer2"
117
- }
118
- },
119
- "$description": "Foreground color for form input elements in warning state"
37
+ "$value": "{color.foreground.input.warning.layer2.$root}",
38
+ "$description": "Fill color for input elements in a warning validation state placed on layer 2 backgrounds"
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.layer2"
132
- }
133
- },
134
- "$description": "Primary foreground color for navigation elements"
43
+ "$value": "{color.foreground.navigation.primary.layer2.$root}",
44
+ "$description": "Fill color for primary navigation elements placed on layer 2 backgrounds"
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.layer2"
147
- }
148
- },
149
- "$description": "Checkmark glyph color for checkbox controls"
49
+ "$value": "{color.foreground.checkbox.checkmark.layer2.$root}",
50
+ "$description": "Fill color for the checkmark icon inside checkbox components placed on layer 2 backgrounds"
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.layer2"
160
- }
161
- },
162
- "$description": "Border/fill color for unselected checkbox controls"
53
+ "$value": "{color.foreground.checkbox.unselected.layer2.$root}",
54
+ "$description": "Fill color for the unselected checkbox container placed on layer 2 backgrounds"
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.layer2"
175
- }
176
- },
177
- "$description": "Inner dot color for selected radio controls"
59
+ "$value": "{color.foreground.radio.checkmark.layer2.$root}",
60
+ "$description": "Fill color for the indicator dot inside radio button components placed on layer 2 backgrounds"
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.layer2"
188
- }
189
- },
190
- "$description": "Border color for unselected radio controls"
63
+ "$value": "{color.foreground.radio.unselected.layer2.$root}",
64
+ "$description": "Fill color for the unselected radio button container placed on layer 2 backgrounds"
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.layer2"
203
- }
204
- },
205
- "$description": "Knob color for toggle switch controls"
69
+ "$value": "{color.foreground.switch.knob.layer2.$root}",
70
+ "$description": "Fill color for the knob of switch toggle components placed on layer 2 backgrounds"
206
71
  }
207
72
  }
208
73
  },
@@ -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.layer3"
13
- }
14
- },
15
- "$description": "Background fill color for the surface area"
5
+ "$value": "{color.background.layer3}",
6
+ "$description": "Background color for surfaces nested within layer 2 (e.g., content sections within cards)"
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.layer3"
27
- }
28
- },
29
- "$description": "Ghost-style foreground color for minimal-chrome interactive elements",
10
+ "$value": "{color.foreground.ghost.layer3.$root}",
11
+ "$description": "Fill color for ghost-style interactive elements placed on layer 3 backgrounds",
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.layer3"
39
- }
40
- },
41
- "$description": "Branded ghost-style foreground color for minimal-chrome interactive elements"
13
+ "$value": "{color.foreground.ghost.branded.layer3.$root}",
14
+ "$description": "Fill color for branded ghost-style interactive elements placed on layer 3 backgrounds"
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.layer3"
52
- }
53
- },
54
- "$description": "Constructive ghost-style foreground color for minimal-chrome interactive elements"
17
+ "$value": "{color.foreground.ghost.constructive.layer3.$root}",
18
+ "$description": "Fill color for constructive ghost-style interactive elements placed on layer 3 backgrounds"
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.layer3"
65
- }
66
- },
67
- "$description": "Destructive ghost-style foreground color for minimal-chrome interactive elements"
21
+ "$value": "{color.foreground.ghost.destructive.layer3.$root}",
22
+ "$description": "Fill color for destructive ghost-style interactive elements placed on layer 3 backgrounds"
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.layer3"
79
- }
80
- },
81
- "$description": "Foreground color for form input elements",
26
+ "$value": "{color.foreground.input.layer3.$root}",
27
+ "$description": "Fill color for input elements placed on layer 3 backgrounds",
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.layer3"
91
- }
92
- },
93
- "$description": "Foreground color for form input elements in error state"
29
+ "$value": "{color.foreground.input.error.layer3.$root}",
30
+ "$description": "Fill color for input elements in an error validation state placed on layer 3 backgrounds"
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.layer3"
104
- }
105
- },
106
- "$description": "Foreground color for form input elements in success state"
33
+ "$value": "{color.foreground.input.success.layer3.$root}",
34
+ "$description": "Fill color for input elements in a success validation state placed on layer 3 backgrounds"
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.layer3"
117
- }
118
- },
119
- "$description": "Foreground color for form input elements in warning state"
37
+ "$value": "{color.foreground.input.warning.layer3.$root}",
38
+ "$description": "Fill color for input elements in a warning validation state placed on layer 3 backgrounds"
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.layer3"
132
- }
133
- },
134
- "$description": "Primary foreground color for navigation elements"
43
+ "$value": "{color.foreground.navigation.primary.layer3.$root}",
44
+ "$description": "Fill color for primary navigation elements placed on layer 3 backgrounds"
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.layer3"
147
- }
148
- },
149
- "$description": "Checkmark glyph color for checkbox controls"
49
+ "$value": "{color.foreground.checkbox.checkmark.layer3.$root}",
50
+ "$description": "Fill color for the checkmark icon inside checkbox components placed on layer 3 backgrounds"
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.layer3"
160
- }
161
- },
162
- "$description": "Border/fill color for unselected checkbox controls"
53
+ "$value": "{color.foreground.checkbox.unselected.layer3.$root}",
54
+ "$description": "Fill color for the unselected checkbox container placed on layer 3 backgrounds"
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.layer3"
175
- }
176
- },
177
- "$description": "Inner dot color for selected radio controls"
59
+ "$value": "{color.foreground.radio.checkmark.layer3.$root}",
60
+ "$description": "Fill color for the indicator dot inside radio button components placed on layer 3 backgrounds"
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.layer3"
188
- }
189
- },
190
- "$description": "Border color for unselected radio controls"
63
+ "$value": "{color.foreground.radio.unselected.layer3.$root}",
64
+ "$description": "Fill color for the unselected radio button container placed on layer 3 backgrounds"
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.layer3"
203
- }
204
- },
205
- "$description": "Knob color for toggle switch controls"
69
+ "$value": "{color.foreground.switch.knob.layer3.$root}",
70
+ "$description": "Fill color for the knob of switch toggle components placed on layer 3 backgrounds"
206
71
  }
207
72
  }
208
73
  },