@canonical/design-tokens 0.3.3 → 0.4.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.
- package/package.json +3 -3
- package/tokens/dist/modifiers.css +75 -0
- package/tokens/dist/tokens.css +1027 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canonical/design-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Canonical design tokens (DTCG format) with CSS custom property output.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "LGPL-3.0",
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
"test": "vitest run"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@canonical/terrazzo-lsp": "^0.
|
|
49
|
+
"@canonical/terrazzo-lsp": "^0.4.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@canonical/terrazzo-plugin-css": "^0.
|
|
52
|
+
"@canonical/terrazzo-plugin-css": "^0.4.0",
|
|
53
53
|
"@canonical/webarchitect": "^0.17.1",
|
|
54
54
|
"@terrazzo/cli": "2.0.0",
|
|
55
55
|
"@terrazzo/parser": "2.0.0",
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* -------------------------------------------
|
|
2
|
+
* Modifier classes — autogenerated. DO NOT EDIT!
|
|
3
|
+
* ------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
.positive {
|
|
6
|
+
--modifier-color-color: var(--color-foreground-primary-constructive);
|
|
7
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
8
|
+
--modifier-color-color-border: var(--color-border-constructive);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.negative {
|
|
12
|
+
--modifier-color-color: var(--color-foreground-primary-destructive);
|
|
13
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
14
|
+
--modifier-color-color-border: var(--color-border-destructive);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.caution {
|
|
18
|
+
--modifier-color-color: var(--color-foreground-primary-branded);
|
|
19
|
+
--modifier-color-color-text: var(--color-text);
|
|
20
|
+
--modifier-color-color-border: var(--color-border-warning);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.information {
|
|
24
|
+
--modifier-color-color: var(--color-foreground-secondary-information);
|
|
25
|
+
--modifier-color-color-text: var(--color-text-on-foreground-secondary-information);
|
|
26
|
+
--modifier-color-color-border: var(--color-border-information);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.constructive {
|
|
30
|
+
--modifier-color-color: var(--color-foreground-primary-constructive);
|
|
31
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
32
|
+
--modifier-color-color-border: var(--color-border-constructive);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.destructive {
|
|
36
|
+
--modifier-color-color: var(--color-foreground-primary-destructive);
|
|
37
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
38
|
+
--modifier-color-color-border: var(--color-border-destructive);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.success {
|
|
42
|
+
--modifier-color-color: var(--color-foreground-primary-constructive);
|
|
43
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
44
|
+
--modifier-color-color-border: var(--color-border-constructive);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.error {
|
|
48
|
+
--modifier-color-color: var(--color-foreground-primary-destructive);
|
|
49
|
+
--modifier-color-color-text: var(--color-text-on-foreground-primary);
|
|
50
|
+
--modifier-color-color-border: var(--color-border-destructive);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.warning {
|
|
54
|
+
--modifier-color-color: var(--color-foreground-primary-branded);
|
|
55
|
+
--modifier-color-color-text: var(--color-text);
|
|
56
|
+
--modifier-color-color-border: var(--color-border-warning);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.primary {
|
|
60
|
+
--modifier-hierarchy-hierarchy: var(--color-foreground-primary);
|
|
61
|
+
--modifier-hierarchy-hierarchy-text: var(--color-text-on-foreground-primary);
|
|
62
|
+
--modifier-hierarchy-hierarchy-border: var(--color-border-highlighted);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.secondary {
|
|
66
|
+
--modifier-hierarchy-hierarchy: var(--color-foreground-secondary);
|
|
67
|
+
--modifier-hierarchy-hierarchy-text: var(--color-text-on-foreground-secondary);
|
|
68
|
+
--modifier-hierarchy-hierarchy-border: var(--color-border);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.tertiary {
|
|
72
|
+
--modifier-hierarchy-hierarchy: var(--color-foreground-ghost);
|
|
73
|
+
--modifier-hierarchy-hierarchy-text: var(--color-text-muted);
|
|
74
|
+
--modifier-hierarchy-hierarchy-border: var(--color-border-muted);
|
|
75
|
+
}
|
|
@@ -0,0 +1,1027 @@
|
|
|
1
|
+
/* -------------------------------------------
|
|
2
|
+
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
|
|
3
|
+
* ------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
/* Primitive aubergine shade 20 */
|
|
8
|
+
--color-palette-aubergine-20: oklch(97.9% 0.0041 337.35);
|
|
9
|
+
/* Primitive aubergine shade 40 */
|
|
10
|
+
--color-palette-aubergine-40: oklch(95.9% 0.01 335.48);
|
|
11
|
+
/* Primitive aubergine shade 100 */
|
|
12
|
+
--color-palette-aubergine-100: oklch(89.79% 0.0314 333.98);
|
|
13
|
+
/* Primitive aubergine shade 180 */
|
|
14
|
+
--color-palette-aubergine-180: oklch(82.39% 0.065 335.39);
|
|
15
|
+
/* Primitive aubergine shade 280 */
|
|
16
|
+
--color-palette-aubergine-280: oklch(73.5% 0.1149 334.98);
|
|
17
|
+
/* Primitive aubergine shade 398 */
|
|
18
|
+
--color-palette-aubergine-398: oklch(64% 0.1559 335.15);
|
|
19
|
+
/* Primitive aubergine shade 520 */
|
|
20
|
+
--color-palette-aubergine-520: oklch(54.9% 0.1568 334.95);
|
|
21
|
+
/* Primitive aubergine shade 590 */
|
|
22
|
+
--color-palette-aubergine-590: oklch(49.9% 0.1437 334.86);
|
|
23
|
+
/* Primitive aubergine shade 700 */
|
|
24
|
+
--color-palette-aubergine-700: oklch(42.17% 0.1151 335.03);
|
|
25
|
+
/* Primitive aubergine shade 820 */
|
|
26
|
+
--color-palette-aubergine-820: oklch(33.14% 0.0761 335.14);
|
|
27
|
+
/* Primitive aubergine shade 930 */
|
|
28
|
+
--color-palette-aubergine-930: oklch(22.84% 0.0401 334.87);
|
|
29
|
+
/* Primitive aubergine shade 960 */
|
|
30
|
+
--color-palette-aubergine-960: oklch(22.64% 0 0);
|
|
31
|
+
/* Primitive aubergine shade 990 */
|
|
32
|
+
--color-palette-aubergine-990: oklch(11.96% 0.0169 332.62);
|
|
33
|
+
/* Primitive black */
|
|
34
|
+
--color-palette-black: oklch(0% 0 0);
|
|
35
|
+
/* Primitive black */
|
|
36
|
+
--color-backdrop: oklch(0% 0 0 / 0.15);
|
|
37
|
+
/* Primitive black */
|
|
38
|
+
--color-border-highlighted: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
39
|
+
/* Primitive black */
|
|
40
|
+
--color-foreground-primary: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
41
|
+
/* Primitive black */
|
|
42
|
+
--color-text: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
43
|
+
/* Primitive blue shade 20 */
|
|
44
|
+
--color-palette-blue-20: oklch(97.8% 0.0062 255.47);
|
|
45
|
+
/* Primitive blue shade 40 */
|
|
46
|
+
--color-palette-blue-40: oklch(95.89% 0.0125 255.51);
|
|
47
|
+
/* Primitive blue shade 100 */
|
|
48
|
+
--color-palette-blue-100: oklch(89.81% 0.0366 255.96);
|
|
49
|
+
/* Primitive blue shade 100 */
|
|
50
|
+
--color-foreground-secondary-information: light-dark(oklch(89.81% 0.0366 255.96), oklch(33.32% 0.0875 255.77));
|
|
51
|
+
/* Primitive blue shade 180 */
|
|
52
|
+
--color-palette-blue-180: oklch(82.36% 0.0735 255.56);
|
|
53
|
+
/* Primitive blue shade 280 */
|
|
54
|
+
--color-palette-blue-280: oklch(73.61% 0.1249 255.7);
|
|
55
|
+
/* Primitive blue shade 398 */
|
|
56
|
+
--color-palette-blue-398: oklch(64.05% 0.1793 256.08);
|
|
57
|
+
/* Primitive blue shade 520 */
|
|
58
|
+
--color-palette-blue-520: oklch(54.9% 0.1803 256.04);
|
|
59
|
+
/* Primitive blue shade 520 */
|
|
60
|
+
--color-border-information: oklch(54.9% 0.1803 256.04);
|
|
61
|
+
/* Primitive blue shade 520 */
|
|
62
|
+
--color-focus-ring: var(--color-palette-blue-520);
|
|
63
|
+
/* Primitive blue shade 520 */
|
|
64
|
+
--color-foreground-checkbox-selected: oklch(54.9% 0.1803 256.04);
|
|
65
|
+
/* Primitive blue shade 520 */
|
|
66
|
+
--color-foreground-slider-progress: oklch(54.9% 0.1803 256.04);
|
|
67
|
+
/* Primitive blue shade 590 */
|
|
68
|
+
--color-palette-blue-590: oklch(49.89% 0.1635 256.12);
|
|
69
|
+
/* Primitive blue shade 590 */
|
|
70
|
+
--color-text-information: light-dark(oklch(49.89% 0.1635 256.12), oklch(64.05% 0.1793 256.08));
|
|
71
|
+
/* Primitive blue shade 590 */
|
|
72
|
+
--color-text-link: light-dark(oklch(49.89% 0.1635 256.12), oklch(64.05% 0.1793 256.08));
|
|
73
|
+
/* Primitive blue shade 700 */
|
|
74
|
+
--color-palette-blue-700: oklch(42.18% 0.1294 255.95);
|
|
75
|
+
/* Primitive blue shade 700 */
|
|
76
|
+
--color-text-on-foreground-secondary-information: light-dark(oklch(42.18% 0.1294 255.95), oklch(82.36% 0.0735 255.56));
|
|
77
|
+
/* Primitive blue shade 820 */
|
|
78
|
+
--color-palette-blue-820: oklch(33.32% 0.0875 255.77);
|
|
79
|
+
/* Primitive blue shade 930 */
|
|
80
|
+
--color-palette-blue-930: oklch(22.89% 0.0465 255.85);
|
|
81
|
+
/* Primitive blue shade 960 */
|
|
82
|
+
--color-palette-blue-960: oklch(18.96% 0.0347 256.41);
|
|
83
|
+
/* Primitive blue shade 990 */
|
|
84
|
+
--color-palette-blue-990: oklch(12.15% 0.0193 259.05);
|
|
85
|
+
/* Primitive gray shade 20 */
|
|
86
|
+
--color-palette-gray-20: oklch(97.91% 0 0);
|
|
87
|
+
/* Primitive gray shade 20 */
|
|
88
|
+
--color-background-layer2: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
89
|
+
/* Primitive gray shade 20 */
|
|
90
|
+
--color-foreground-input: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
91
|
+
/* Primitive gray shade 20 */
|
|
92
|
+
--color-foreground-input-layer3: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
93
|
+
/* Primitive gray shade 40 */
|
|
94
|
+
--color-palette-gray-40: oklch(95.81% 0 0);
|
|
95
|
+
/* Primitive gray shade 40 */
|
|
96
|
+
--color-background-container: light-dark(var(--color-palette-gray-40), var(--color-palette-gray-930));
|
|
97
|
+
/* Primitive gray shade 40 */
|
|
98
|
+
--color-foreground-navigation-secondary: light-dark(oklch(95.81% 0 0), oklch(23.08% 0 0));
|
|
99
|
+
/* Primitive gray shade 100 */
|
|
100
|
+
--color-palette-gray-100: oklch(89.75% 0 0);
|
|
101
|
+
/* Primitive gray shade 100 */
|
|
102
|
+
--color-border-muted: light-dark(oklch(89.75% 0 0), oklch(33.29% 0 0));
|
|
103
|
+
/* Primitive gray shade 100 */
|
|
104
|
+
--color-foreground-secondary: light-dark(oklch(89.75% 0 0), oklch(33.29% 0 0));
|
|
105
|
+
/* Primitive gray shade 100 */
|
|
106
|
+
--color-foreground-secondary-category: light-dark(oklch(89.75% 0 0), oklch(33.29% 0 0));
|
|
107
|
+
/* Primitive gray shade 100 */
|
|
108
|
+
--color-foreground-slider-track: light-dark(oklch(89.75% 0 0), oklch(33.29% 0 0));
|
|
109
|
+
/* Primitive gray shade 180 */
|
|
110
|
+
--color-palette-gray-180: oklch(82.34% 0 0);
|
|
111
|
+
/* Primitive gray shade 280 */
|
|
112
|
+
--color-palette-gray-280: oklch(73.48% 0 0);
|
|
113
|
+
/* Primitive gray shade 398 */
|
|
114
|
+
--color-palette-gray-398: oklch(64.01% 0 0);
|
|
115
|
+
/* Primitive gray shade 520 */
|
|
116
|
+
--color-palette-gray-520: oklch(54.86% 0 0);
|
|
117
|
+
/* Primitive gray shade 520 */
|
|
118
|
+
--color-border: oklch(54.86% 0 0);
|
|
119
|
+
/* Primitive gray shade 520 */
|
|
120
|
+
--color-border-category: oklch(54.86% 0 0);
|
|
121
|
+
/* Primitive gray shade 520 */
|
|
122
|
+
--color-foreground-slider-track-endstop: oklch(54.86% 0 0);
|
|
123
|
+
/* Primitive gray shade 520 */
|
|
124
|
+
--color-foreground-switch-unselected: oklch(54.86% 0 0);
|
|
125
|
+
/* Primitive gray shade 590 */
|
|
126
|
+
--color-palette-gray-590: oklch(49.97% 0 0);
|
|
127
|
+
/* Primitive gray shade 590 */
|
|
128
|
+
--color-text-muted: light-dark(oklch(49.97% 0 0), oklch(64.01% 0 0));
|
|
129
|
+
/* Primitive gray shade 700 */
|
|
130
|
+
--color-palette-gray-700: oklch(42.02% 0 0);
|
|
131
|
+
/* Primitive gray shade 700 */
|
|
132
|
+
--color-text-on-foreground-secondary: light-dark(oklch(42.02% 0 0), oklch(82.34% 0 0));
|
|
133
|
+
/* Primitive gray shade 700 */
|
|
134
|
+
--color-text-on-foreground-secondary-category: light-dark(oklch(42.02% 0 0), oklch(82.34% 0 0));
|
|
135
|
+
/* Primitive gray shade 820 */
|
|
136
|
+
--color-palette-gray-820: oklch(33.29% 0 0);
|
|
137
|
+
/* Primitive gray shade 930 */
|
|
138
|
+
--color-palette-gray-930: oklch(23.08% 0 0);
|
|
139
|
+
/* Primitive gray shade 960 */
|
|
140
|
+
--color-palette-gray-960: oklch(18.67% 0 0);
|
|
141
|
+
/* Primitive gray shade 990 */
|
|
142
|
+
--color-palette-gray-990: oklch(12.21% 0 0);
|
|
143
|
+
/* Primitive green shade 20 */
|
|
144
|
+
--color-palette-green-20: oklch(97.89% 0.0101 145.5);
|
|
145
|
+
/* Primitive green shade 20 */
|
|
146
|
+
--color-foreground-input-success: light-dark(oklch(97.89% 0.0101 145.5), oklch(18.9% 0.0295 144.3));
|
|
147
|
+
/* Primitive green shade 20 */
|
|
148
|
+
--color-foreground-input-success-layer3: light-dark(oklch(97.89% 0.0101 145.5), oklch(18.9% 0.0295 144.3));
|
|
149
|
+
/* Primitive green shade 40 */
|
|
150
|
+
--color-palette-green-40: oklch(95.86% 0.0247 143.5);
|
|
151
|
+
/* Primitive green shade 40 */
|
|
152
|
+
--color-foreground-input-success-layer2: light-dark(oklch(95.86% 0.0247 143.5), oklch(22.8% 0.0373 144.23));
|
|
153
|
+
/* Primitive green shade 100 */
|
|
154
|
+
--color-palette-green-100: oklch(89.83% 0.0804 143.81);
|
|
155
|
+
/* Primitive green shade 100 */
|
|
156
|
+
--color-foreground-secondary-success: light-dark(oklch(89.83% 0.0804 143.81), oklch(33.31% 0.0672 144.49));
|
|
157
|
+
/* Primitive green shade 180 */
|
|
158
|
+
--color-palette-green-180: oklch(82.35% 0.1488 143.84);
|
|
159
|
+
/* Primitive green shade 280 */
|
|
160
|
+
--color-palette-green-280: oklch(73.5% 0.1708 143.94);
|
|
161
|
+
/* Primitive green shade 398 */
|
|
162
|
+
--color-palette-green-398: oklch(64.05% 0.1743 144.01);
|
|
163
|
+
/* Primitive green shade 520 */
|
|
164
|
+
--color-palette-green-520: oklch(55.1% 0.1575 144.01);
|
|
165
|
+
/* Primitive green shade 520 */
|
|
166
|
+
--color-border-constructive: oklch(55.1% 0.1575 144.01);
|
|
167
|
+
/* Primitive green shade 520 */
|
|
168
|
+
--color-border-success: oklch(55.1% 0.1575 144.01);
|
|
169
|
+
/* Primitive green shade 520 */
|
|
170
|
+
--color-foreground-primary-constructive: oklch(55.1% 0.1575 144.01);
|
|
171
|
+
/* Primitive green shade 590 */
|
|
172
|
+
--color-palette-green-590: oklch(50% 0.1355 143.96);
|
|
173
|
+
/* Primitive green shade 590 */
|
|
174
|
+
--color-text-constructive: light-dark(oklch(50% 0.1355 143.96), oklch(64.05% 0.1743 144.01));
|
|
175
|
+
/* Primitive green shade 590 */
|
|
176
|
+
--color-text-success: light-dark(oklch(50% 0.1355 143.96), oklch(64.05% 0.1743 144.01));
|
|
177
|
+
/* Primitive green shade 700 */
|
|
178
|
+
--color-palette-green-700: oklch(42.22% 0.0981 143.94);
|
|
179
|
+
/* Primitive green shade 700 */
|
|
180
|
+
--color-text-on-foreground-secondary-success: light-dark(oklch(42.22% 0.0981 143.94), oklch(82.35% 0.1488 143.84));
|
|
181
|
+
/* Primitive green shade 820 */
|
|
182
|
+
--color-palette-green-820: oklch(33.31% 0.0672 144.49);
|
|
183
|
+
/* Primitive green shade 930 */
|
|
184
|
+
--color-palette-green-930: oklch(22.8% 0.0373 144.23);
|
|
185
|
+
/* Primitive green shade 960 */
|
|
186
|
+
--color-palette-green-960: oklch(18.9% 0.0295 144.3);
|
|
187
|
+
/* Primitive green shade 990 */
|
|
188
|
+
--color-palette-green-990: oklch(11.94% 0.0171 144.41);
|
|
189
|
+
/* Primitive orange shade 20 */
|
|
190
|
+
--color-palette-orange-20: oklch(97.94% 0.006 43.34);
|
|
191
|
+
/* Primitive orange shade 40 */
|
|
192
|
+
--color-palette-orange-40: oklch(95.77% 0.0136 34.3);
|
|
193
|
+
/* Primitive orange shade 100 */
|
|
194
|
+
--color-palette-orange-100: oklch(89.79% 0.0395 37.53);
|
|
195
|
+
/* Primitive orange shade 100 */
|
|
196
|
+
--color-foreground-secondary-branded: light-dark(oklch(89.79% 0.0395 37.53), oklch(33.2% 0.0846 37.83));
|
|
197
|
+
/* Primitive orange shade 180 */
|
|
198
|
+
--color-palette-orange-180: oklch(82.3% 0.0829 38.38);
|
|
199
|
+
/* Primitive orange shade 280 */
|
|
200
|
+
--color-palette-orange-280: oklch(73.64% 0.1455 38.09);
|
|
201
|
+
/* Primitive orange shade 398 (Ubuntu orange - primary brand color) */
|
|
202
|
+
--color-palette-orange-398: oklch(64.05% 0.1941 37.76);
|
|
203
|
+
/* Primitive orange shade 398 (Ubuntu orange - primary brand color) */
|
|
204
|
+
--color-background-logo: var(--color-brand-primary);
|
|
205
|
+
/* Primitive orange shade 398 (Ubuntu orange - primary brand color) */
|
|
206
|
+
--color-brand-primary: var(--color-palette-orange-398);
|
|
207
|
+
/* Primitive orange shade 520 */
|
|
208
|
+
--color-palette-orange-520: oklch(54.94% 0.1746 37.97);
|
|
209
|
+
/* Primitive orange shade 520 */
|
|
210
|
+
--color-border-branded: oklch(54.94% 0.1746 37.97);
|
|
211
|
+
/* Primitive orange shade 520 */
|
|
212
|
+
--color-foreground-primary-branded: oklch(54.94% 0.1746 37.97);
|
|
213
|
+
/* Primitive orange shade 590 */
|
|
214
|
+
--color-palette-orange-590: oklch(49.91% 0.157 37.79);
|
|
215
|
+
/* Primitive orange shade 590 */
|
|
216
|
+
--color-text-branded: light-dark(oklch(49.91% 0.157 37.79), oklch(64.05% 0.1941 37.76));
|
|
217
|
+
/* Primitive orange shade 700 */
|
|
218
|
+
--color-palette-orange-700: oklch(42.18% 0.1239 38.22);
|
|
219
|
+
/* Primitive orange shade 820 */
|
|
220
|
+
--color-palette-orange-820: oklch(33.2% 0.0846 37.83);
|
|
221
|
+
/* Primitive orange shade 930 */
|
|
222
|
+
--color-palette-orange-930: oklch(22.99% 0.0436 38.46);
|
|
223
|
+
/* Primitive orange shade 960 */
|
|
224
|
+
--color-palette-orange-960: oklch(18.88% 0.0332 39.49);
|
|
225
|
+
/* Primitive orange shade 990 */
|
|
226
|
+
--color-palette-orange-990: oklch(12.18% 0.019 31.68);
|
|
227
|
+
/* Primitive purple shade 20 */
|
|
228
|
+
--color-palette-purple-20: oklch(97.83% 0.0067 295.45);
|
|
229
|
+
/* Primitive purple shade 40 */
|
|
230
|
+
--color-palette-purple-40: oklch(95.88% 0.0134 290.75);
|
|
231
|
+
/* Primitive purple shade 100 */
|
|
232
|
+
--color-palette-purple-100: oklch(89.85% 0.0381 288.89);
|
|
233
|
+
/* Primitive purple shade 180 */
|
|
234
|
+
--color-palette-purple-180: oklch(82.35% 0.0796 290.16);
|
|
235
|
+
/* Primitive purple shade 280 */
|
|
236
|
+
--color-palette-purple-280: oklch(73.57% 0.1383 290.14);
|
|
237
|
+
/* Primitive purple shade 398 */
|
|
238
|
+
--color-palette-purple-398: oklch(64.07% 0.2026 290.2);
|
|
239
|
+
/* Primitive purple shade 520 */
|
|
240
|
+
--color-palette-purple-520: oklch(55% 0.2581 289.96);
|
|
241
|
+
/* Primitive purple shade 590 */
|
|
242
|
+
--color-palette-purple-590: oklch(49.99% 0.2579 290.01);
|
|
243
|
+
/* Primitive purple shade 590 */
|
|
244
|
+
--color-text-link-visited: light-dark(oklch(49.99% 0.2579 290.01), oklch(64.07% 0.2026 290.2));
|
|
245
|
+
/* Primitive purple shade 700 */
|
|
246
|
+
--color-palette-purple-700: oklch(42.16% 0.2006 289.92);
|
|
247
|
+
/* Primitive purple shade 820 */
|
|
248
|
+
--color-palette-purple-820: oklch(33.35% 0.1259 289.76);
|
|
249
|
+
/* Primitive purple shade 930 */
|
|
250
|
+
--color-palette-purple-930: oklch(23.08% 0.06 289.47);
|
|
251
|
+
/* Primitive purple shade 960 */
|
|
252
|
+
--color-palette-purple-960: oklch(18.67% 0.0438 289.84);
|
|
253
|
+
/* Primitive purple shade 990 */
|
|
254
|
+
--color-palette-purple-990: oklch(12.31% 0.0224 289.18);
|
|
255
|
+
/* Primitive red shade 20 */
|
|
256
|
+
--color-palette-red-20: oklch(97.97% 0.0055 31.05);
|
|
257
|
+
/* Primitive red shade 20 */
|
|
258
|
+
--color-foreground-input-error: light-dark(oklch(97.97% 0.0055 31.05), oklch(18.7% 0.0364 23.99));
|
|
259
|
+
/* Primitive red shade 20 */
|
|
260
|
+
--color-foreground-input-error-layer3: light-dark(oklch(97.97% 0.0055 31.05), oklch(18.7% 0.0364 23.99));
|
|
261
|
+
/* Primitive red shade 40 */
|
|
262
|
+
--color-palette-red-40: oklch(95.83% 0.0131 23.19);
|
|
263
|
+
/* Primitive red shade 40 */
|
|
264
|
+
--color-foreground-input-error-layer2: light-dark(oklch(95.83% 0.0131 23.19), oklch(22.83% 0.0493 23.67));
|
|
265
|
+
/* Primitive red shade 100 */
|
|
266
|
+
--color-palette-red-100: oklch(89.76% 0.0384 23.87);
|
|
267
|
+
/* Primitive red shade 100 */
|
|
268
|
+
--color-foreground-secondary-error: light-dark(oklch(89.76% 0.0384 23.87), oklch(33.35% 0.0953 24.66));
|
|
269
|
+
/* Primitive red shade 180 */
|
|
270
|
+
--color-palette-red-180: oklch(82.27% 0.0804 23.7);
|
|
271
|
+
/* Primitive red shade 280 */
|
|
272
|
+
--color-palette-red-280: oklch(73.6% 0.144 24.23);
|
|
273
|
+
/* Primitive red shade 398 */
|
|
274
|
+
--color-palette-red-398: oklch(64.18% 0.2184 24.11);
|
|
275
|
+
/* Primitive red shade 520 */
|
|
276
|
+
--color-palette-red-520: oklch(54.88% 0.2107 23.83);
|
|
277
|
+
/* Primitive red shade 520 */
|
|
278
|
+
--color-border-destructive: oklch(54.88% 0.2107 23.83);
|
|
279
|
+
/* Primitive red shade 520 */
|
|
280
|
+
--color-border-error: oklch(54.88% 0.2107 23.83);
|
|
281
|
+
/* Primitive red shade 520 */
|
|
282
|
+
--color-foreground-primary-destructive: oklch(54.88% 0.2107 23.83);
|
|
283
|
+
/* Primitive red shade 590 */
|
|
284
|
+
--color-palette-red-590: oklch(49.93% 0.1883 23.79);
|
|
285
|
+
/* Primitive red shade 590 */
|
|
286
|
+
--color-text-destructive: light-dark(oklch(49.93% 0.1883 23.79), oklch(64.18% 0.2184 24.11));
|
|
287
|
+
/* Primitive red shade 590 */
|
|
288
|
+
--color-text-error: light-dark(oklch(49.93% 0.1883 23.79), oklch(64.18% 0.2184 24.11));
|
|
289
|
+
/* Primitive red shade 700 */
|
|
290
|
+
--color-palette-red-700: oklch(42.23% 0.1451 23.93);
|
|
291
|
+
/* Primitive red shade 700 */
|
|
292
|
+
--color-text-on-foreground-secondary-error: light-dark(oklch(42.23% 0.1451 23.93), oklch(82.27% 0.0804 23.7));
|
|
293
|
+
/* Primitive red shade 820 */
|
|
294
|
+
--color-palette-red-820: oklch(33.35% 0.0953 24.66);
|
|
295
|
+
/* Primitive red shade 930 */
|
|
296
|
+
--color-palette-red-930: oklch(22.83% 0.0493 23.67);
|
|
297
|
+
/* Primitive red shade 960 */
|
|
298
|
+
--color-palette-red-960: oklch(18.7% 0.0364 23.99);
|
|
299
|
+
/* Primitive red shade 990 */
|
|
300
|
+
--color-palette-red-990: oklch(12.18% 0.019 31.68);
|
|
301
|
+
/* Primitive teal shade 20 */
|
|
302
|
+
--color-palette-teal-20: oklch(97.94% 0.0086 205.9);
|
|
303
|
+
/* Primitive teal shade 40 */
|
|
304
|
+
--color-palette-teal-40: oklch(95.82% 0.0181 205.32);
|
|
305
|
+
/* Primitive teal shade 100 */
|
|
306
|
+
--color-palette-teal-100: oklch(89.8% 0.0576 205.73);
|
|
307
|
+
/* Primitive teal shade 180 */
|
|
308
|
+
--color-palette-teal-180: oklch(82.4% 0.1039 204.69);
|
|
309
|
+
/* Primitive teal shade 280 */
|
|
310
|
+
--color-palette-teal-280: oklch(73.51% 0.1166 204.95);
|
|
311
|
+
/* Primitive teal shade 398 */
|
|
312
|
+
--color-palette-teal-398: oklch(64.18% 0.107 204.52);
|
|
313
|
+
/* Primitive teal shade 520 */
|
|
314
|
+
--color-palette-teal-520: oklch(55.08% 0.0927 204.5);
|
|
315
|
+
/* Primitive teal shade 590 */
|
|
316
|
+
--color-palette-teal-590: oklch(49.86% 0.0833 205.9);
|
|
317
|
+
/* Primitive teal shade 700 */
|
|
318
|
+
--color-palette-teal-700: oklch(42.2% 0.0675 204.86);
|
|
319
|
+
/* Primitive teal shade 820 */
|
|
320
|
+
--color-palette-teal-820: oklch(33.2% 0.0488 205.5);
|
|
321
|
+
/* Primitive teal shade 930 */
|
|
322
|
+
--color-palette-teal-930: oklch(23.04% 0.029 203.01);
|
|
323
|
+
/* Primitive teal shade 960 */
|
|
324
|
+
--color-palette-teal-960: oklch(18.77% 0.0213 206.53);
|
|
325
|
+
/* Primitive teal shade 990 */
|
|
326
|
+
--color-palette-teal-990: oklch(12.08% 0.0132 207.29);
|
|
327
|
+
/* Primitive white */
|
|
328
|
+
--color-palette-white: oklch(100% 0 0);
|
|
329
|
+
/* Primitive white */
|
|
330
|
+
--color-background: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
331
|
+
/* Primitive white */
|
|
332
|
+
--color-background-layer3: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
333
|
+
/* Primitive white */
|
|
334
|
+
--color-foreground-input-layer2: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
335
|
+
/* Primitive white */
|
|
336
|
+
--color-icon-logo: var(--color-palette-white);
|
|
337
|
+
/* Primitive white */
|
|
338
|
+
--color-text-on-foreground-primary: light-dark(oklch(100% 0 0), oklch(0% 0 0));
|
|
339
|
+
/* Primitive yellow shade 20 */
|
|
340
|
+
--color-palette-yellow-20: oklch(97.89% 0.0076 61.45);
|
|
341
|
+
/* Primitive yellow shade 20 */
|
|
342
|
+
--color-foreground-input-warning: light-dark(oklch(97.89% 0.0076 61.45), oklch(18.92% 0.0277 66.26));
|
|
343
|
+
/* Primitive yellow shade 20 */
|
|
344
|
+
--color-foreground-input-warning-layer3: light-dark(oklch(97.89% 0.0076 61.45), oklch(18.92% 0.0277 66.26));
|
|
345
|
+
/* Primitive yellow shade 40 */
|
|
346
|
+
--color-palette-yellow-40: oklch(95.75% 0.0162 64.67);
|
|
347
|
+
/* Primitive yellow shade 40 */
|
|
348
|
+
--color-foreground-input-warning-layer2: light-dark(oklch(95.75% 0.0162 64.67), oklch(22.87% 0.0359 66.12));
|
|
349
|
+
/* Primitive yellow shade 100 */
|
|
350
|
+
--color-palette-yellow-100: oklch(89.83% 0.0486 67.14);
|
|
351
|
+
/* Primitive yellow shade 100 */
|
|
352
|
+
--color-foreground-secondary-warning: light-dark(oklch(89.83% 0.0486 67.14), oklch(33.23% 0.0623 67.4));
|
|
353
|
+
/* Primitive yellow shade 180 */
|
|
354
|
+
--color-palette-yellow-180: oklch(82.24% 0.1027 66.99);
|
|
355
|
+
/* Primitive yellow shade 280 */
|
|
356
|
+
--color-palette-yellow-280: oklch(73.5% 0.1441 66.74);
|
|
357
|
+
/* Primitive yellow shade 398 */
|
|
358
|
+
--color-palette-yellow-398: oklch(64.06% 0.1384 67.1);
|
|
359
|
+
/* Primitive yellow shade 520 */
|
|
360
|
+
--color-palette-yellow-520: oklch(54.92% 0.1199 66.86);
|
|
361
|
+
/* Primitive yellow shade 520 */
|
|
362
|
+
--color-border-warning: oklch(54.92% 0.1199 66.86);
|
|
363
|
+
/* Primitive yellow shade 590 */
|
|
364
|
+
--color-palette-yellow-590: oklch(49.94% 0.1081 67.44);
|
|
365
|
+
/* Primitive yellow shade 590 */
|
|
366
|
+
--color-text-warning: light-dark(oklch(49.94% 0.1081 67.44), oklch(64.06% 0.1384 67.1));
|
|
367
|
+
/* Primitive yellow shade 700 */
|
|
368
|
+
--color-palette-yellow-700: oklch(42.26% 0.0882 67.69);
|
|
369
|
+
/* Primitive yellow shade 700 */
|
|
370
|
+
--color-text-on-foreground-secondary-warning: light-dark(oklch(42.26% 0.0882 67.69), oklch(82.24% 0.1027 66.99));
|
|
371
|
+
/* Primitive yellow shade 820 */
|
|
372
|
+
--color-palette-yellow-820: oklch(33.23% 0.0623 67.4);
|
|
373
|
+
/* Primitive yellow shade 930 */
|
|
374
|
+
--color-palette-yellow-930: oklch(22.87% 0.0359 66.12);
|
|
375
|
+
/* Primitive yellow shade 960 */
|
|
376
|
+
--color-palette-yellow-960: oklch(18.92% 0.0277 66.26);
|
|
377
|
+
/* Primitive yellow shade 990 */
|
|
378
|
+
--color-palette-yellow-990: oklch(12.03% 0.015 69.35);
|
|
379
|
+
/* Primitive dimension 025 (2px) */
|
|
380
|
+
--dimension-025: 0.125rem;
|
|
381
|
+
/* Primitive dimension 050 (4px) */
|
|
382
|
+
--dimension-050: 0.25rem;
|
|
383
|
+
/* Primitive dimension 100 (8px) */
|
|
384
|
+
--dimension-100: 0.5rem;
|
|
385
|
+
/* Primitive dimension 100 (8px) */
|
|
386
|
+
--dimension-size-height-baseline: var(--dimension-100);
|
|
387
|
+
/* Primitive dimension 150 (12px) */
|
|
388
|
+
--dimension-150: 0.75rem;
|
|
389
|
+
/* Primitive dimension 175 (14px) */
|
|
390
|
+
--dimension-175: 0.875rem;
|
|
391
|
+
/* Primitive dimension 200 (16px) */
|
|
392
|
+
--dimension-200: 1rem;
|
|
393
|
+
/* Primitive dimension 200 (16px) */
|
|
394
|
+
--dimension-size-root-font-size: var(--dimension-200);
|
|
395
|
+
/* Primitive dimension 225 (18px) */
|
|
396
|
+
--dimension-225: 1.125rem;
|
|
397
|
+
/* Primitive dimension 250 (20px) */
|
|
398
|
+
--dimension-250: 1.25rem;
|
|
399
|
+
/* Primitive dimension 300 (24px) */
|
|
400
|
+
--dimension-300: 1.5rem;
|
|
401
|
+
/* Primitive dimension 400 (32px) */
|
|
402
|
+
--dimension-400: 2rem;
|
|
403
|
+
/* Primitive dimension 500 (40px) */
|
|
404
|
+
--dimension-500: 2.5rem;
|
|
405
|
+
/* Primitive dimension 600 (48px) */
|
|
406
|
+
--dimension-600: 3rem;
|
|
407
|
+
/* Primitive dimension 700 (56px) */
|
|
408
|
+
--dimension-700: 3.5rem;
|
|
409
|
+
/* Primitive dimension 800 (64px) */
|
|
410
|
+
--dimension-800: 4rem;
|
|
411
|
+
/* Primitive dimension 900 (72px) */
|
|
412
|
+
--dimension-900: 4.5rem;
|
|
413
|
+
/* Primitive dimension 1000 (80px) */
|
|
414
|
+
--dimension-1000: 5rem;
|
|
415
|
+
/* Primitive dimension 1100 (88px) */
|
|
416
|
+
--dimension-1100: 5.5rem;
|
|
417
|
+
/* Primitive letter spacing default (0px) */
|
|
418
|
+
--dimension-letter-spacing-default: 0;
|
|
419
|
+
/* Primitive letter spacing wide (0.8px) */
|
|
420
|
+
--dimension-letter-spacing-wide: 0.05rem;
|
|
421
|
+
/* Primitive radius full */
|
|
422
|
+
--dimension-radius-full: 9999px;
|
|
423
|
+
/* Primitive radius large (0px) */
|
|
424
|
+
--dimension-radius-large: 0;
|
|
425
|
+
/* Primitive radius medium (0px) */
|
|
426
|
+
--dimension-radius-medium: 0;
|
|
427
|
+
/* Primitive radius none (0px) */
|
|
428
|
+
--dimension-radius-none: 0;
|
|
429
|
+
/* Primitive radius small (0px) */
|
|
430
|
+
--dimension-radius-small: 0;
|
|
431
|
+
/* Primitive font size 200 (10px) */
|
|
432
|
+
--dimension-size-font-size-200: 0.625rem;
|
|
433
|
+
/* Primitive font size 250 (12px) */
|
|
434
|
+
--dimension-size-font-size-250: 0.75rem;
|
|
435
|
+
/* Primitive font size 300 (14px) */
|
|
436
|
+
--dimension-size-font-size-300: 0.875rem;
|
|
437
|
+
/* Primitive font size 350 (16px) */
|
|
438
|
+
--dimension-size-font-size-350: 1rem;
|
|
439
|
+
/* Primitive font size 400 (18px) */
|
|
440
|
+
--dimension-size-font-size-400: 1.125rem;
|
|
441
|
+
/* Primitive font size 450 (21px) */
|
|
442
|
+
--dimension-size-font-size-450: 1.3125rem;
|
|
443
|
+
/* Primitive font size 500 (24px) */
|
|
444
|
+
--dimension-size-font-size-500: 1.5rem;
|
|
445
|
+
/* Primitive font size 550 (28px) */
|
|
446
|
+
--dimension-size-font-size-550: 1.75rem;
|
|
447
|
+
/* Primitive font size 600 (32px) */
|
|
448
|
+
--dimension-size-font-size-600: 2rem;
|
|
449
|
+
/* Primitive font size 650 (36px) */
|
|
450
|
+
--dimension-size-font-size-650: 2.25rem;
|
|
451
|
+
/* Primitive font size 700 (42px) */
|
|
452
|
+
--dimension-size-font-size-700: 2.625rem;
|
|
453
|
+
/* Primitive font size 750 (48px) */
|
|
454
|
+
--dimension-size-font-size-750: 3rem;
|
|
455
|
+
/* Primitive font size 800 (55px) */
|
|
456
|
+
--dimension-size-font-size-800: 3.4375rem;
|
|
457
|
+
/* Primitive font size 850 (63px) */
|
|
458
|
+
--dimension-size-font-size-850: 3.9375rem;
|
|
459
|
+
/* Primitive font size 900 (73px) */
|
|
460
|
+
--dimension-size-font-size-900: 4.5625rem;
|
|
461
|
+
/* Primitive font size 950 (84px) */
|
|
462
|
+
--dimension-size-font-size-950: 5.25rem;
|
|
463
|
+
/* Primitive font size 1000 (96px) */
|
|
464
|
+
--dimension-size-font-size-1000: 6rem;
|
|
465
|
+
/* Bottom baseline nudge 200 (5px) */
|
|
466
|
+
--dimension-space-bottom-text-baseline-nudge-200: 0.3125rem;
|
|
467
|
+
/* Bottom baseline nudge 250 (4px) */
|
|
468
|
+
--dimension-space-bottom-text-baseline-nudge-250: 0.25rem;
|
|
469
|
+
/* Bottom baseline nudge 300 (2px) */
|
|
470
|
+
--dimension-space-bottom-text-baseline-nudge-300: 0.125rem;
|
|
471
|
+
/* Bottom baseline nudge 350 (1px) */
|
|
472
|
+
--dimension-space-bottom-text-baseline-nudge-350: 0.0625rem;
|
|
473
|
+
/* Bottom baseline nudge 400 (2px) */
|
|
474
|
+
--dimension-space-bottom-text-baseline-nudge-400: 0.125rem;
|
|
475
|
+
/* Bottom baseline nudge 450 (1px) */
|
|
476
|
+
--dimension-space-bottom-text-baseline-nudge-450: 0.0625rem;
|
|
477
|
+
/* Bottom baseline nudge 500 (0px) */
|
|
478
|
+
--dimension-space-bottom-text-baseline-nudge-500: 0;
|
|
479
|
+
/* Bottom baseline nudge 550 (7px) */
|
|
480
|
+
--dimension-space-bottom-text-baseline-nudge-550: 0.4375rem;
|
|
481
|
+
/* Bottom baseline nudge 600 (7px) */
|
|
482
|
+
--dimension-space-bottom-text-baseline-nudge-600: 0.4375rem;
|
|
483
|
+
/* Bottom baseline nudge 650 (6px) */
|
|
484
|
+
--dimension-space-bottom-text-baseline-nudge-650: 0.375rem;
|
|
485
|
+
/* Bottom baseline nudge 700 (6px) */
|
|
486
|
+
--dimension-space-bottom-text-baseline-nudge-700: 0.375rem;
|
|
487
|
+
/* Bottom baseline nudge 750 (4px) */
|
|
488
|
+
--dimension-space-bottom-text-baseline-nudge-750: 0.25rem;
|
|
489
|
+
/* Bottom baseline nudge 800 (3px) */
|
|
490
|
+
--dimension-space-bottom-text-baseline-nudge-800: 0.1875rem;
|
|
491
|
+
/* Bottom baseline nudge 850 (1px) */
|
|
492
|
+
--dimension-space-bottom-text-baseline-nudge-850: 0.0625rem;
|
|
493
|
+
/* Bottom baseline nudge 900 (1px) */
|
|
494
|
+
--dimension-space-bottom-text-baseline-nudge-900: 0.0625rem;
|
|
495
|
+
/* Bottom baseline nudge 950 (6px) */
|
|
496
|
+
--dimension-space-bottom-text-baseline-nudge-950: 0.375rem;
|
|
497
|
+
/* Bottom baseline nudge 1000 (4px) */
|
|
498
|
+
--dimension-space-bottom-text-baseline-nudge-1000: 0.25rem;
|
|
499
|
+
/* Top baseline nudge 200 (7px) */
|
|
500
|
+
--dimension-space-top-text-baseline-nudge-200: 0.4375rem;
|
|
501
|
+
/* Top baseline nudge 250 (4px) */
|
|
502
|
+
--dimension-space-top-text-baseline-nudge-250: 0.25rem;
|
|
503
|
+
/* Top baseline nudge 300 (2px) */
|
|
504
|
+
--dimension-space-top-text-baseline-nudge-300: 0.125rem;
|
|
505
|
+
/* Top baseline nudge 350 (7px) */
|
|
506
|
+
--dimension-space-top-text-baseline-nudge-350: 0.4375rem;
|
|
507
|
+
/* Top baseline nudge 400 (6px) */
|
|
508
|
+
--dimension-space-top-text-baseline-nudge-400: 0.375rem;
|
|
509
|
+
/* Top baseline nudge 450 (3px) */
|
|
510
|
+
--dimension-space-top-text-baseline-nudge-450: 0.1875rem;
|
|
511
|
+
/* Top baseline nudge 500 (0px) */
|
|
512
|
+
--dimension-space-top-text-baseline-nudge-500: 0;
|
|
513
|
+
/* Top baseline nudge 550 (5px) */
|
|
514
|
+
--dimension-space-top-text-baseline-nudge-550: 0.3125rem;
|
|
515
|
+
/* Top baseline nudge 600 (1px) */
|
|
516
|
+
--dimension-space-top-text-baseline-nudge-600: 0.0625rem;
|
|
517
|
+
/* Top baseline nudge 650 (6px) */
|
|
518
|
+
--dimension-space-top-text-baseline-nudge-650: 0.375rem;
|
|
519
|
+
/* Top baseline nudge 700 (2px) */
|
|
520
|
+
--dimension-space-top-text-baseline-nudge-700: 0.125rem;
|
|
521
|
+
/* Top baseline nudge 750 (4px) */
|
|
522
|
+
--dimension-space-top-text-baseline-nudge-750: 0.25rem;
|
|
523
|
+
/* Top baseline nudge 800 (5px) */
|
|
524
|
+
--dimension-space-top-text-baseline-nudge-800: 0.3125rem;
|
|
525
|
+
/* Top baseline nudge 850 (7px) */
|
|
526
|
+
--dimension-space-top-text-baseline-nudge-850: 0.4375rem;
|
|
527
|
+
/* Top baseline nudge 900 (7px) */
|
|
528
|
+
--dimension-space-top-text-baseline-nudge-900: 0.4375rem;
|
|
529
|
+
/* Top baseline nudge 950 (6px) */
|
|
530
|
+
--dimension-space-top-text-baseline-nudge-950: 0.375rem;
|
|
531
|
+
/* Top baseline nudge 1000 (4px) */
|
|
532
|
+
--dimension-space-top-text-baseline-nudge-1000: 0.25rem;
|
|
533
|
+
/* Primitive stroke thickness large (3px) */
|
|
534
|
+
--dimension-stroke-thickness-large: 3px;
|
|
535
|
+
/* Primitive stroke thickness medium (1px) */
|
|
536
|
+
--dimension-stroke-thickness-medium: 1px;
|
|
537
|
+
/* Primitive font family stack monospace (primary: Ubuntu Sans Mono) */
|
|
538
|
+
--typography-font-family-monospace: "Ubuntu Sans Mono", "Ubuntu Mono", "Noto Color Emoji", "Adwaita Mono", "Source Code Pro", "Hack", ui-monospace, "SF Mono", "Apple Color Emoji", "Cascadia Code", "Consolas", "Segoe UI Emoji", "Roboto Mono", monospace;
|
|
539
|
+
/* Primitive font family stack monospace (primary: Ubuntu Sans Mono) */
|
|
540
|
+
--typography-font-family-code: var(--typography-font-family-monospace);
|
|
541
|
+
/* Primitive font family stack sansSerif (primary: Ubuntu Sans) */
|
|
542
|
+
--typography-font-family-sans-serif: "Ubuntu Sans", "Ubuntu", "Cantarell", "Adwaita Sans", "Noto Sans", "Oxygen", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
|
|
543
|
+
/* Primitive font family stack sansSerif (primary: Ubuntu Sans) */
|
|
544
|
+
--typography-font-family-default: var(--typography-font-family-sans-serif);
|
|
545
|
+
/* Primitive font weight bold */
|
|
546
|
+
--typography-weight-bold: 700;
|
|
547
|
+
/* Primitive font weight extraBold */
|
|
548
|
+
--typography-weight-extra-bold: 800;
|
|
549
|
+
/* Primitive font weight extraLight */
|
|
550
|
+
--typography-weight-extra-light: 200;
|
|
551
|
+
/* Primitive font weight light */
|
|
552
|
+
--typography-weight-light: 300;
|
|
553
|
+
/* Primitive font weight medium */
|
|
554
|
+
--typography-weight-medium: 500;
|
|
555
|
+
/* Primitive font weight regular */
|
|
556
|
+
--typography-weight-regular: 400;
|
|
557
|
+
/* Primitive font weight semiBold */
|
|
558
|
+
--typography-weight-semi-bold: 600;
|
|
559
|
+
/* Primitive font weight thin */
|
|
560
|
+
--typography-weight-thin: 100;
|
|
561
|
+
/* Default page background color for the primary content surface */
|
|
562
|
+
--color-foreground-ghost: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
563
|
+
/* Default page background color for the primary content surface */
|
|
564
|
+
--color-foreground-navigation-primary-layer2: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
565
|
+
/* Background color for elevated surfaces layered above the primary background (e.g., cards, sidebars) */
|
|
566
|
+
--color-foreground-ghost-layer2: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
567
|
+
/* Background color for elevated surfaces layered above the primary background (e.g., cards, sidebars) */
|
|
568
|
+
--color-foreground-navigation-primary: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
569
|
+
/* Background color for elevated surfaces layered above the primary background (e.g., cards, sidebars) */
|
|
570
|
+
--color-foreground-navigation-primary-layer3: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
571
|
+
/* Background color for surfaces nested within layer 2 (e.g., content sections within cards) */
|
|
572
|
+
--color-foreground-ghost-layer3: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
573
|
+
/* Border color for elements indicating errors or critical issues that require immediate action */
|
|
574
|
+
--color-focus-ring-error: var(--color-border-error);
|
|
575
|
+
/* Border color for elements indicating successful completion or positive outcomes */
|
|
576
|
+
--color-focus-ring-success: var(--color-border-success);
|
|
577
|
+
/* Border color for elements conveying caution or potential issues that require attention */
|
|
578
|
+
--color-focus-ring-warning: var(--color-border-warning);
|
|
579
|
+
/* Fill color for the checkmark icon inside checkbox components */
|
|
580
|
+
--color-foreground-checkbox-checkmark: var(--color-foreground-ghost);
|
|
581
|
+
/* Fill color for the checkmark icon inside checkbox components */
|
|
582
|
+
--color-foreground-radio-checkmark: var(--color-foreground-checkbox-checkmark);
|
|
583
|
+
/* Fill color for the checkmark icon inside checkbox components */
|
|
584
|
+
--color-foreground-switch-knob: var(--color-foreground-checkbox-checkmark);
|
|
585
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 2 backgrounds */
|
|
586
|
+
--color-foreground-checkbox-checkmark-layer2: var(--color-foreground-ghost-layer2);
|
|
587
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 2 backgrounds */
|
|
588
|
+
--color-foreground-radio-checkmark-layer2: var(--color-foreground-checkbox-checkmark-layer2);
|
|
589
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 2 backgrounds */
|
|
590
|
+
--color-foreground-switch-knob-layer2: var(--color-foreground-checkbox-checkmark-layer2);
|
|
591
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 3 backgrounds */
|
|
592
|
+
--color-foreground-checkbox-checkmark-layer3: var(--color-foreground-ghost-layer3);
|
|
593
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 3 backgrounds */
|
|
594
|
+
--color-foreground-radio-checkmark-layer3: var(--color-foreground-checkbox-checkmark-layer3);
|
|
595
|
+
/* Fill color for the checkmark icon inside checkbox components placed on layer 3 backgrounds */
|
|
596
|
+
--color-foreground-switch-knob-layer3: var(--color-foreground-checkbox-checkmark-layer3);
|
|
597
|
+
/* Fill color for the checkbox container when selected */
|
|
598
|
+
--color-foreground-radio-selected: var(--color-foreground-checkbox-selected);
|
|
599
|
+
/* Fill color for the checkbox container when selected */
|
|
600
|
+
--color-foreground-switch-selected: var(--color-foreground-checkbox-selected);
|
|
601
|
+
/* Fill color for the checkbox container when unselected */
|
|
602
|
+
--color-foreground-checkbox-unselected: var(--color-foreground-ghost);
|
|
603
|
+
/* Fill color for the checkbox container when unselected */
|
|
604
|
+
--color-foreground-radio-unselected: var(--color-foreground-checkbox-unselected);
|
|
605
|
+
/* Fill color for the unselected checkbox container placed on layer 2 backgrounds */
|
|
606
|
+
--color-foreground-checkbox-unselected-layer2: var(--color-foreground-ghost-layer2);
|
|
607
|
+
/* Fill color for the unselected checkbox container placed on layer 2 backgrounds */
|
|
608
|
+
--color-foreground-radio-unselected-layer2: var(--color-foreground-checkbox-unselected-layer2);
|
|
609
|
+
/* Fill color for the unselected checkbox container placed on layer 3 backgrounds */
|
|
610
|
+
--color-foreground-checkbox-unselected-layer3: var(--color-foreground-ghost-layer3);
|
|
611
|
+
/* Fill color for the unselected checkbox container placed on layer 3 backgrounds */
|
|
612
|
+
--color-foreground-radio-unselected-layer3: var(--color-foreground-checkbox-unselected-layer3);
|
|
613
|
+
/* Fill color for ghost-style interactive elements such as buttons that have the same color as the background in their default state */
|
|
614
|
+
--color-foreground-ghost-branded: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
615
|
+
/* Fill color for ghost-style interactive elements such as buttons that have the same color as the background in their default state */
|
|
616
|
+
--color-foreground-ghost-constructive: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
617
|
+
/* Fill color for ghost-style interactive elements such as buttons that have the same color as the background in their default state */
|
|
618
|
+
--color-foreground-ghost-destructive: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
619
|
+
/* Fill color for branded ghost-style interactive elements placed on layer 2 backgrounds */
|
|
620
|
+
--color-foreground-ghost-branded-layer2: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
621
|
+
/* Fill color for branded ghost-style interactive elements placed on layer 3 backgrounds */
|
|
622
|
+
--color-foreground-ghost-branded-layer3: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
623
|
+
/* Fill color for constructive ghost-style interactive elements placed on layer 2 backgrounds */
|
|
624
|
+
--color-foreground-ghost-constructive-layer2: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
625
|
+
/* Fill color for constructive ghost-style interactive elements placed on layer 3 backgrounds */
|
|
626
|
+
--color-foreground-ghost-constructive-layer3: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
627
|
+
/* Fill color for destructive ghost-style interactive elements placed on layer 2 backgrounds */
|
|
628
|
+
--color-foreground-ghost-destructive-layer2: light-dark(oklch(97.91% 0 0), oklch(18.67% 0 0));
|
|
629
|
+
/* Fill color for destructive ghost-style interactive elements placed on layer 3 backgrounds */
|
|
630
|
+
--color-foreground-ghost-destructive-layer3: light-dark(oklch(100% 0 0), oklch(12.21% 0 0));
|
|
631
|
+
/* Default color for icons that accompany text or standalone icons */
|
|
632
|
+
--color-icon: var(--color-text);
|
|
633
|
+
/* Icon color for branded elements that need to reflect the brand identity */
|
|
634
|
+
--color-icon-branded: var(--color-text-branded);
|
|
635
|
+
/* Icon color for constructive actions such as save, submit, or confirm */
|
|
636
|
+
--color-icon-constructive: var(--color-text-constructive);
|
|
637
|
+
/* Icon color for destructive actions such as delete or remove */
|
|
638
|
+
--color-icon-destructive: var(--color-text-destructive);
|
|
639
|
+
/* Icon color for indicating errors or critical issues */
|
|
640
|
+
--color-icon-error: var(--color-text-error);
|
|
641
|
+
/* Icon color for conveying informational or neutral feedback */
|
|
642
|
+
--color-icon-information: var(--color-text-information);
|
|
643
|
+
/* Icon color for icons that accompany links */
|
|
644
|
+
--color-icon-link: var(--color-text-link);
|
|
645
|
+
/* Icon color for icons that accompany visited links */
|
|
646
|
+
--color-icon-link-visited: var(--color-text-link-visited);
|
|
647
|
+
/* Subtle icon color for low-emphasis or decorative icons */
|
|
648
|
+
--color-icon-muted: var(--color-text-muted);
|
|
649
|
+
/* Icon color for icons placed on primary foreground surfaces */
|
|
650
|
+
--color-icon-on-foreground-primary: var(--color-text-on-foreground-primary);
|
|
651
|
+
/* Icon color for icons placed on secondary foreground surfaces */
|
|
652
|
+
--color-icon-on-foreground-secondary: var(--color-text-on-foreground-secondary);
|
|
653
|
+
/* Error icon color for icons placed on secondary foreground surfaces */
|
|
654
|
+
--color-icon-on-foreground-secondary-error: var(--color-text-on-foreground-secondary-error);
|
|
655
|
+
/* Information icon color for icons placed on secondary foreground surfaces */
|
|
656
|
+
--color-icon-on-foreground-secondary-information: var(--color-text-on-foreground-secondary-information);
|
|
657
|
+
/* Success icon color for icons placed on secondary foreground surfaces */
|
|
658
|
+
--color-icon-on-foreground-secondary-success: var(--color-text-on-foreground-secondary-success);
|
|
659
|
+
/* Warning icon color for icons placed on secondary foreground surfaces */
|
|
660
|
+
--color-icon-on-foreground-secondary-warning: var(--color-text-on-foreground-secondary-warning);
|
|
661
|
+
/* Icon color for indicating successful completion or positive outcomes */
|
|
662
|
+
--color-icon-success: var(--color-text-success);
|
|
663
|
+
/* Icon color for conveying caution or potential issues */
|
|
664
|
+
--color-icon-warning: var(--color-text-warning);
|
|
665
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
666
|
+
--typography-heading-1-font-family: var(--typography-font-family-sans-serif);
|
|
667
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
668
|
+
--typography-heading-1-font-size: var(--dimension-size-font-size-700);
|
|
669
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
670
|
+
--typography-heading-1-font-weight: var(--typography-weight-medium);
|
|
671
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
672
|
+
--typography-heading-1-line-height: var(--number-line-height-700);
|
|
673
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
674
|
+
--typography-heading-1-letter-spacing: var(--dimension-letter-spacing-default);
|
|
675
|
+
/* Primary page heading (e.g. for main titles and hero sections) (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
676
|
+
--typography-heading-1: var(--typography-heading-1-font-weight) var(--typography-heading-1-font-size)/var(--typography-heading-1-line-height) var(--typography-heading-1-font-family);
|
|
677
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
678
|
+
--typography-heading-1-bold-font-family: var(--typography-font-family-sans-serif);
|
|
679
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
680
|
+
--typography-heading-1-bold-font-size: var(--dimension-size-font-size-700);
|
|
681
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
682
|
+
--typography-heading-1-bold-font-weight: var(--typography-weight-bold);
|
|
683
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
684
|
+
--typography-heading-1-bold-line-height: var(--number-line-height-700);
|
|
685
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
686
|
+
--typography-heading-1-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
687
|
+
/* Bold variant of heading 1 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
688
|
+
--typography-heading-1-bold: var(--typography-heading-1-bold-font-weight) var(--typography-heading-1-bold-font-size)/var(--typography-heading-1-bold-line-height) var(--typography-heading-1-bold-font-family);
|
|
689
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
690
|
+
--typography-heading-2-font-family: var(--typography-font-family-sans-serif);
|
|
691
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
692
|
+
--typography-heading-2-font-size: var(--dimension-size-font-size-700);
|
|
693
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
694
|
+
--typography-heading-2-font-weight: var(--typography-weight-light);
|
|
695
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
696
|
+
--typography-heading-2-line-height: var(--number-line-height-700);
|
|
697
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
698
|
+
--typography-heading-2-letter-spacing: var(--dimension-letter-spacing-default);
|
|
699
|
+
/* Secondary page heading (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
700
|
+
--typography-heading-2: var(--typography-heading-2-font-weight) var(--typography-heading-2-font-size)/var(--typography-heading-2-line-height) var(--typography-heading-2-font-family);
|
|
701
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
702
|
+
--typography-heading-2-bold-font-family: var(--typography-font-family-sans-serif);
|
|
703
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
704
|
+
--typography-heading-2-bold-font-size: var(--dimension-size-font-size-700);
|
|
705
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
706
|
+
--typography-heading-2-bold-font-weight: var(--typography-weight-medium);
|
|
707
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
708
|
+
--typography-heading-2-bold-line-height: var(--number-line-height-700);
|
|
709
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
710
|
+
--typography-heading-2-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
711
|
+
/* Bold variant of heading 2 for additional emphasis (42px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
712
|
+
--typography-heading-2-bold: var(--typography-heading-2-bold-font-weight) var(--typography-heading-2-bold-font-size)/var(--typography-heading-2-bold-line-height) var(--typography-heading-2-bold-font-family);
|
|
713
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
714
|
+
--typography-heading-3-font-family: var(--typography-font-family-sans-serif);
|
|
715
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
716
|
+
--typography-heading-3-font-size: var(--dimension-size-font-size-500);
|
|
717
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
718
|
+
--typography-heading-3-font-weight: var(--typography-weight-medium);
|
|
719
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
720
|
+
--typography-heading-3-line-height: var(--number-line-height-500);
|
|
721
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
722
|
+
--typography-heading-3-letter-spacing: var(--dimension-letter-spacing-default);
|
|
723
|
+
/* Tertiary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
724
|
+
--typography-heading-3: var(--typography-heading-3-font-weight) var(--typography-heading-3-font-size)/var(--typography-heading-3-line-height) var(--typography-heading-3-font-family);
|
|
725
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
726
|
+
--typography-heading-3-bold-font-family: var(--typography-font-family-sans-serif);
|
|
727
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
728
|
+
--typography-heading-3-bold-font-size: var(--dimension-size-font-size-500);
|
|
729
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
730
|
+
--typography-heading-3-bold-font-weight: var(--typography-weight-bold);
|
|
731
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
732
|
+
--typography-heading-3-bold-line-height: var(--number-line-height-500);
|
|
733
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
734
|
+
--typography-heading-3-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
735
|
+
/* Bold variant of heading 3 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
736
|
+
--typography-heading-3-bold: var(--typography-heading-3-bold-font-weight) var(--typography-heading-3-bold-font-size)/var(--typography-heading-3-bold-line-height) var(--typography-heading-3-bold-font-family);
|
|
737
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
738
|
+
--typography-heading-4-font-family: var(--typography-font-family-sans-serif);
|
|
739
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
740
|
+
--typography-heading-4-font-size: var(--dimension-size-font-size-500);
|
|
741
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
742
|
+
--typography-heading-4-font-weight: var(--typography-weight-light);
|
|
743
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
744
|
+
--typography-heading-4-line-height: var(--number-line-height-500);
|
|
745
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
746
|
+
--typography-heading-4-letter-spacing: var(--dimension-letter-spacing-default);
|
|
747
|
+
/* Quaternary page heading (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
748
|
+
--typography-heading-4: var(--typography-heading-4-font-weight) var(--typography-heading-4-font-size)/var(--typography-heading-4-line-height) var(--typography-heading-4-font-family);
|
|
749
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
750
|
+
--typography-heading-4-bold-font-family: var(--typography-font-family-sans-serif);
|
|
751
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
752
|
+
--typography-heading-4-bold-font-size: var(--dimension-size-font-size-500);
|
|
753
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
754
|
+
--typography-heading-4-bold-font-weight: var(--typography-weight-medium);
|
|
755
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
756
|
+
--typography-heading-4-bold-line-height: var(--number-line-height-500);
|
|
757
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
758
|
+
--typography-heading-4-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
759
|
+
/* Bold variant of heading 4 for additional emphasis (24px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
760
|
+
--typography-heading-4-bold: var(--typography-heading-4-bold-font-weight) var(--typography-heading-4-bold-font-size)/var(--typography-heading-4-bold-line-height) var(--typography-heading-4-bold-font-family);
|
|
761
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
762
|
+
--typography-heading-5-font-family: var(--typography-font-family-sans-serif);
|
|
763
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
764
|
+
--typography-heading-5-font-size: var(--dimension-size-font-size-350);
|
|
765
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
766
|
+
--typography-heading-5-font-weight: var(--typography-weight-semi-bold);
|
|
767
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
768
|
+
--typography-heading-5-line-height: var(--number-line-height-350);
|
|
769
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
770
|
+
--typography-heading-5-letter-spacing: var(--dimension-letter-spacing-wide);
|
|
771
|
+
/* Quinary page heading (styled as smallcaps) (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
772
|
+
--typography-heading-5: var(--typography-heading-5-font-weight) var(--typography-heading-5-font-size)/var(--typography-heading-5-line-height) var(--typography-heading-5-font-family);
|
|
773
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
774
|
+
--typography-heading-5-bold-font-family: var(--typography-font-family-sans-serif);
|
|
775
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
776
|
+
--typography-heading-5-bold-font-size: var(--dimension-size-font-size-350);
|
|
777
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
778
|
+
--typography-heading-5-bold-font-weight: var(--typography-weight-extra-bold);
|
|
779
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
780
|
+
--typography-heading-5-bold-line-height: var(--number-line-height-350);
|
|
781
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
782
|
+
--typography-heading-5-bold-letter-spacing: var(--dimension-letter-spacing-wide);
|
|
783
|
+
/* Bold variant of heading 5 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
784
|
+
--typography-heading-5-bold: var(--typography-heading-5-bold-font-weight) var(--typography-heading-5-bold-font-size)/var(--typography-heading-5-bold-line-height) var(--typography-heading-5-bold-font-family);
|
|
785
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
786
|
+
--typography-heading-6-font-family: var(--typography-font-family-sans-serif);
|
|
787
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
788
|
+
--typography-heading-6-font-size: var(--dimension-size-font-size-350);
|
|
789
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
790
|
+
--typography-heading-6-font-weight: var(--typography-weight-semi-bold);
|
|
791
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
792
|
+
--typography-heading-6-line-height: var(--number-line-height-350);
|
|
793
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
794
|
+
--typography-heading-6-letter-spacing: var(--dimension-letter-spacing-default);
|
|
795
|
+
/* Senary page heading (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
796
|
+
--typography-heading-6: var(--typography-heading-6-font-weight) var(--typography-heading-6-font-size)/var(--typography-heading-6-line-height) var(--typography-heading-6-font-family);
|
|
797
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
798
|
+
--typography-heading-6-bold-font-family: var(--typography-font-family-sans-serif);
|
|
799
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
800
|
+
--typography-heading-6-bold-font-size: var(--dimension-size-font-size-350);
|
|
801
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
802
|
+
--typography-heading-6-bold-font-weight: var(--typography-weight-extra-bold);
|
|
803
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
804
|
+
--typography-heading-6-bold-line-height: var(--number-line-height-350);
|
|
805
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
806
|
+
--typography-heading-6-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
807
|
+
/* Bold variant of heading 6 for additional emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
808
|
+
--typography-heading-6-bold: var(--typography-heading-6-bold-font-weight) var(--typography-heading-6-bold-font-size)/var(--typography-heading-6-bold-line-height) var(--typography-heading-6-bold-font-family);
|
|
809
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
810
|
+
--typography-heading-display-font-family: var(--typography-font-family-sans-serif);
|
|
811
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
812
|
+
--typography-heading-display-font-size: var(--dimension-size-font-size-950);
|
|
813
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
814
|
+
--typography-heading-display-font-weight: var(--typography-weight-extra-light);
|
|
815
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
816
|
+
--typography-heading-display-line-height: var(--number-line-height-950);
|
|
817
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
818
|
+
--typography-heading-display-letter-spacing: var(--dimension-letter-spacing-default);
|
|
819
|
+
/* Display heading for hero sections and major page titles (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
820
|
+
--typography-heading-display: var(--typography-heading-display-font-weight) var(--typography-heading-display-font-size)/var(--typography-heading-display-line-height) var(--typography-heading-display-font-family);
|
|
821
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
822
|
+
--typography-heading-display-bold-font-family: var(--typography-font-family-sans-serif);
|
|
823
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
824
|
+
--typography-heading-display-bold-font-size: var(--dimension-size-font-size-950);
|
|
825
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
826
|
+
--typography-heading-display-bold-font-weight: var(--typography-weight-regular);
|
|
827
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
828
|
+
--typography-heading-display-bold-line-height: var(--number-line-height-950);
|
|
829
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
830
|
+
--typography-heading-display-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
831
|
+
/* Bold variant of display heading for additional emphasis (84px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
832
|
+
--typography-heading-display-bold: var(--typography-heading-display-bold-font-weight) var(--typography-heading-display-bold-font-size)/var(--typography-heading-display-bold-line-height) var(--typography-heading-display-bold-font-family);
|
|
833
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
834
|
+
--typography-text-primary-font-family: var(--typography-font-family-sans-serif);
|
|
835
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
836
|
+
--typography-text-primary-font-size: var(--dimension-size-font-size-350);
|
|
837
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
838
|
+
--typography-text-primary-font-weight: var(--typography-weight-regular);
|
|
839
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
840
|
+
--typography-text-primary-line-height: var(--number-line-height-350);
|
|
841
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
842
|
+
--typography-text-primary-letter-spacing: var(--dimension-letter-spacing-default);
|
|
843
|
+
/* Default text style for UI elements such as buttons, labels, and form inputs, etc. (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
844
|
+
--typography-text-primary: var(--typography-text-primary-font-weight) var(--typography-text-primary-font-size)/var(--typography-text-primary-line-height) var(--typography-text-primary-font-family);
|
|
845
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
846
|
+
--typography-text-primary-bold-font-family: var(--typography-font-family-sans-serif);
|
|
847
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
848
|
+
--typography-text-primary-bold-font-size: var(--dimension-size-font-size-350);
|
|
849
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
850
|
+
--typography-text-primary-bold-font-weight: var(--typography-weight-semi-bold);
|
|
851
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
852
|
+
--typography-text-primary-bold-line-height: var(--number-line-height-350);
|
|
853
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
854
|
+
--typography-text-primary-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
855
|
+
/* Bold variant of primary text for emphasis in UI elements (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
856
|
+
--typography-text-primary-bold: var(--typography-text-primary-bold-font-weight) var(--typography-text-primary-bold-font-size)/var(--typography-text-primary-bold-line-height) var(--typography-text-primary-bold-font-family);
|
|
857
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
858
|
+
--typography-text-primary-code-font-family: var(--typography-font-family-monospace);
|
|
859
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
860
|
+
--typography-text-primary-code-font-size: var(--dimension-size-font-size-350);
|
|
861
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
862
|
+
--typography-text-primary-code-font-weight: var(--typography-weight-regular);
|
|
863
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
864
|
+
--typography-text-primary-code-line-height: var(--number-line-height-350);
|
|
865
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
866
|
+
--typography-text-primary-code-letter-spacing: var(--dimension-letter-spacing-default);
|
|
867
|
+
/* Monospace text style for code snippets (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
868
|
+
--typography-text-primary-code: var(--typography-text-primary-code-font-weight) var(--typography-text-primary-code-font-size)/var(--typography-text-primary-code-line-height) var(--typography-text-primary-code-font-family);
|
|
869
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
870
|
+
--typography-text-primary-prose-font-family: var(--typography-font-family-sans-serif);
|
|
871
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
872
|
+
--typography-text-primary-prose-font-size: var(--dimension-size-font-size-350);
|
|
873
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
874
|
+
--typography-text-primary-prose-font-weight: var(--typography-weight-regular);
|
|
875
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
876
|
+
--typography-text-primary-prose-line-height: var(--number-line-height-350);
|
|
877
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
878
|
+
--typography-text-primary-prose-letter-spacing: var(--dimension-letter-spacing-default);
|
|
879
|
+
/* Body text style for flowing paragraph content and long-form reading, using oldstyle figures for improved readability (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
880
|
+
--typography-text-primary-prose: var(--typography-text-primary-prose-font-weight) var(--typography-text-primary-prose-font-size)/var(--typography-text-primary-prose-line-height) var(--typography-text-primary-prose-font-family);
|
|
881
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
882
|
+
--typography-text-primary-prose-bold-font-family: var(--typography-font-family-sans-serif);
|
|
883
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
884
|
+
--typography-text-primary-prose-bold-font-size: var(--dimension-size-font-size-350);
|
|
885
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
886
|
+
--typography-text-primary-prose-bold-font-weight: var(--typography-weight-semi-bold);
|
|
887
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
888
|
+
--typography-text-primary-prose-bold-line-height: var(--number-line-height-350);
|
|
889
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
890
|
+
--typography-text-primary-prose-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
891
|
+
/* Bold variant of primary prose text for emphasis in paragraph content (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
892
|
+
--typography-text-primary-prose-bold: var(--typography-text-primary-prose-bold-font-weight) var(--typography-text-primary-prose-bold-font-size)/var(--typography-text-primary-prose-bold-line-height) var(--typography-text-primary-prose-bold-font-family);
|
|
893
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
894
|
+
--typography-text-primary-smallcaps-font-family: var(--typography-font-family-sans-serif);
|
|
895
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
896
|
+
--typography-text-primary-smallcaps-font-size: var(--dimension-size-font-size-350);
|
|
897
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
898
|
+
--typography-text-primary-smallcaps-font-weight: var(--typography-weight-regular);
|
|
899
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
900
|
+
--typography-text-primary-smallcaps-line-height: var(--number-line-height-350);
|
|
901
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
902
|
+
--typography-text-primary-smallcaps-letter-spacing: var(--dimension-letter-spacing-wide);
|
|
903
|
+
/* Small caps variant of primary text with wide letter spacing for stylistic headings and emphasis (16px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
904
|
+
--typography-text-primary-smallcaps: var(--typography-text-primary-smallcaps-font-weight) var(--typography-text-primary-smallcaps-font-size)/var(--typography-text-primary-smallcaps-line-height) var(--typography-text-primary-smallcaps-font-family);
|
|
905
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
906
|
+
--typography-text-secondary-font-family: var(--typography-font-family-sans-serif);
|
|
907
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
908
|
+
--typography-text-secondary-font-size: var(--dimension-size-font-size-300);
|
|
909
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
910
|
+
--typography-text-secondary-font-weight: var(--typography-weight-regular);
|
|
911
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
912
|
+
--typography-text-secondary-line-height: var(--number-line-height-300);
|
|
913
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
914
|
+
--typography-text-secondary-letter-spacing: var(--dimension-letter-spacing-default);
|
|
915
|
+
/* Secondary text style for less prominent UI elements (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
916
|
+
--typography-text-secondary: var(--typography-text-secondary-font-weight) var(--typography-text-secondary-font-size)/var(--typography-text-secondary-line-height) var(--typography-text-secondary-font-family);
|
|
917
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
918
|
+
--typography-text-secondary-bold-font-family: var(--typography-font-family-sans-serif);
|
|
919
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
920
|
+
--typography-text-secondary-bold-font-size: var(--dimension-size-font-size-300);
|
|
921
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
922
|
+
--typography-text-secondary-bold-font-weight: var(--typography-weight-semi-bold);
|
|
923
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
924
|
+
--typography-text-secondary-bold-line-height: var(--number-line-height-300);
|
|
925
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
926
|
+
--typography-text-secondary-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
927
|
+
/* Bold variant of secondary text for emphasis (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
928
|
+
--typography-text-secondary-bold: var(--typography-text-secondary-bold-font-weight) var(--typography-text-secondary-bold-font-size)/var(--typography-text-secondary-bold-line-height) var(--typography-text-secondary-bold-font-family);
|
|
929
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
930
|
+
--typography-text-secondary-code-font-family: var(--typography-font-family-monospace);
|
|
931
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
932
|
+
--typography-text-secondary-code-font-size: var(--dimension-size-font-size-300);
|
|
933
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
934
|
+
--typography-text-secondary-code-font-weight: var(--typography-weight-regular);
|
|
935
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
936
|
+
--typography-text-secondary-code-line-height: var(--number-line-height-300);
|
|
937
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
938
|
+
--typography-text-secondary-code-letter-spacing: var(--dimension-letter-spacing-default);
|
|
939
|
+
/* Monospace text style for code snippets at secondary text size (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
940
|
+
--typography-text-secondary-code: var(--typography-text-secondary-code-font-weight) var(--typography-text-secondary-code-font-size)/var(--typography-text-secondary-code-line-height) var(--typography-text-secondary-code-font-family);
|
|
941
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
942
|
+
--typography-text-secondary-prose-font-family: var(--typography-font-family-sans-serif);
|
|
943
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
944
|
+
--typography-text-secondary-prose-font-size: var(--dimension-size-font-size-300);
|
|
945
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
946
|
+
--typography-text-secondary-prose-font-weight: var(--typography-weight-regular);
|
|
947
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
948
|
+
--typography-text-secondary-prose-line-height: var(--number-line-height-300);
|
|
949
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
950
|
+
--typography-text-secondary-prose-letter-spacing: var(--dimension-letter-spacing-default);
|
|
951
|
+
/* Secondary text style for flowing paragraph content, using oldstyle figures for improved readability (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
952
|
+
--typography-text-secondary-prose: var(--typography-text-secondary-prose-font-weight) var(--typography-text-secondary-prose-font-size)/var(--typography-text-secondary-prose-line-height) var(--typography-text-secondary-prose-font-family);
|
|
953
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
954
|
+
--typography-text-secondary-prose-bold-font-family: var(--typography-font-family-sans-serif);
|
|
955
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
956
|
+
--typography-text-secondary-prose-bold-font-size: var(--dimension-size-font-size-300);
|
|
957
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
958
|
+
--typography-text-secondary-prose-bold-font-weight: var(--typography-weight-semi-bold);
|
|
959
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
960
|
+
--typography-text-secondary-prose-bold-line-height: var(--number-line-height-300);
|
|
961
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
962
|
+
--typography-text-secondary-prose-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
963
|
+
/* Bold variant of secondary prose text for emphasis in paragraph content (14px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
964
|
+
--typography-text-secondary-prose-bold: var(--typography-text-secondary-prose-bold-font-weight) var(--typography-text-secondary-prose-bold-font-size)/var(--typography-text-secondary-prose-bold-line-height) var(--typography-text-secondary-prose-bold-font-family);
|
|
965
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
966
|
+
--typography-text-tertiary-font-family: var(--typography-font-family-sans-serif);
|
|
967
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
968
|
+
--typography-text-tertiary-font-size: var(--dimension-size-font-size-250);
|
|
969
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
970
|
+
--typography-text-tertiary-font-weight: var(--typography-weight-regular);
|
|
971
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
972
|
+
--typography-text-tertiary-line-height: var(--number-line-height-250);
|
|
973
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
974
|
+
--typography-text-tertiary-letter-spacing: var(--dimension-letter-spacing-default);
|
|
975
|
+
/* Tertiary body text style for supplementary UI elements (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
976
|
+
--typography-text-tertiary: var(--typography-text-tertiary-font-weight) var(--typography-text-tertiary-font-size)/var(--typography-text-tertiary-line-height) var(--typography-text-tertiary-font-family);
|
|
977
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
978
|
+
--typography-text-tertiary-bold-font-family: var(--typography-font-family-sans-serif);
|
|
979
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
980
|
+
--typography-text-tertiary-bold-font-size: var(--dimension-size-font-size-250);
|
|
981
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
982
|
+
--typography-text-tertiary-bold-font-weight: var(--typography-weight-semi-bold);
|
|
983
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
984
|
+
--typography-text-tertiary-bold-line-height: var(--number-line-height-250);
|
|
985
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
986
|
+
--typography-text-tertiary-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
987
|
+
/* Bold variant of tertiary text for emphasis (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
988
|
+
--typography-text-tertiary-bold: var(--typography-text-tertiary-bold-font-weight) var(--typography-text-tertiary-bold-font-size)/var(--typography-text-tertiary-bold-line-height) var(--typography-text-tertiary-bold-font-family);
|
|
989
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
990
|
+
--typography-text-tertiary-prose-font-family: var(--typography-font-family-sans-serif);
|
|
991
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
992
|
+
--typography-text-tertiary-prose-font-size: var(--dimension-size-font-size-250);
|
|
993
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
994
|
+
--typography-text-tertiary-prose-font-weight: var(--typography-weight-regular);
|
|
995
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
996
|
+
--typography-text-tertiary-prose-line-height: var(--number-line-height-250);
|
|
997
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
998
|
+
--typography-text-tertiary-prose-letter-spacing: var(--dimension-letter-spacing-default);
|
|
999
|
+
/* Tertiary text style for flowing paragraph content, using oldstyle figures for improved readability (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1000
|
+
--typography-text-tertiary-prose: var(--typography-text-tertiary-prose-font-weight) var(--typography-text-tertiary-prose-font-size)/var(--typography-text-tertiary-prose-line-height) var(--typography-text-tertiary-prose-font-family);
|
|
1001
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1002
|
+
--typography-text-tertiary-prose-bold-font-family: var(--typography-font-family-sans-serif);
|
|
1003
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1004
|
+
--typography-text-tertiary-prose-bold-font-size: var(--dimension-size-font-size-250);
|
|
1005
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1006
|
+
--typography-text-tertiary-prose-bold-font-weight: var(--typography-weight-semi-bold);
|
|
1007
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1008
|
+
--typography-text-tertiary-prose-bold-line-height: var(--number-line-height-250);
|
|
1009
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1010
|
+
--typography-text-tertiary-prose-bold-letter-spacing: var(--dimension-letter-spacing-default);
|
|
1011
|
+
/* Bold variant of tertiary prose text for emphasis in paragraph content (12px) (Some properties of this token are not yet supported by the W3C DTCG specification, so they are stored in $extensions and require a token transformer compatible with Canonical design system extensions.) */
|
|
1012
|
+
--typography-text-tertiary-prose-bold: var(--typography-text-tertiary-prose-bold-font-weight) var(--typography-text-tertiary-prose-bold-font-size)/var(--typography-text-tertiary-prose-bold-line-height) var(--typography-text-tertiary-prose-bold-font-family);
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
.light {
|
|
1016
|
+
color-scheme: light;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.dark {
|
|
1020
|
+
color-scheme: dark;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
@media (prefers-color-scheme: dark) {
|
|
1024
|
+
:root {
|
|
1025
|
+
color-scheme: dark;
|
|
1026
|
+
}
|
|
1027
|
+
}
|