@workday/canvas-kit-mcp 14.2.23 → 14.2.25
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/dist/cli.js +1 -1
- package/dist/cli.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/tokens/v4/v4-token-migration.md +726 -739
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
## What's New in v4
|
|
2
2
|
|
|
3
|
-
Canvas Tokens v4 introduces significant updates to align with
|
|
3
|
+
Canvas Tokens v4 introduces significant updates to align with our Design Refresh,
|
|
4
4
|
providing enhanced scalability, better product support, and a more comprehensive token system. This
|
|
5
5
|
release focuses on improving the color system with extended alpha scales, updating brand tokens to
|
|
6
6
|
use numerical naming conventions, and introducing new surface, focus, accent, and semantic tokens.
|
|
@@ -53,67 +53,55 @@ previous `color.bg.surface.*` tokens. This new system provides better semantic n
|
|
|
53
53
|
organization for surface colors used across UI components, including containers, modals, popovers,
|
|
54
54
|
and interactive states.
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
| color.surface.
|
|
61
|
-
| color.surface.
|
|
62
|
-
| color.surface.
|
|
63
|
-
| color.surface.
|
|
64
|
-
| color.surface.
|
|
65
|
-
| color.surface.
|
|
66
|
-
| color.surface.
|
|
67
|
-
| color.surface.
|
|
68
|
-
| color.surface.transparent | `{base.neutralA0}` | `--cnvs-sys-color-surface-transparent` | Transparent surfaces |
|
|
69
|
-
| color.surface.inverse | `{base.neutral0}` | `--cnvs-sys-color-surface-inverse` | Inverse surfaces |
|
|
70
|
-
|
|
56
|
+
| Token | JS Value | CSS Variable | Use For |
|
|
57
|
+
| ------------------------- | ---------------- | -------------------------------------- | ------------------------------- |
|
|
58
|
+
| color.surface.default | `base.neutral0` | `--cnvs-sys-color-surface-default` | Primary content surfaces |
|
|
59
|
+
| color.surface.alt.default | `base.slateA50` | `--cnvs-sys-color-surface-alt-default` | De-emphasized secondary content |
|
|
60
|
+
| color.surface.alt.strong | `base.slateA100` | `--cnvs-sys-color-surface-alt-strong` | Stronger de-emphasis |
|
|
61
|
+
| color.surface.navigation | `base.neutralA0` | `--cnvs-sys-color-surface-navigation` | Global navigation (transparent) |
|
|
62
|
+
| color.surface.popover | `base.neutral0` | `--cnvs-sys-color-surface-popover` | Popover containers |
|
|
63
|
+
| color.surface.modal | `base.neutral0` | `--cnvs-sys-color-surface-modal` | Modal containers |
|
|
64
|
+
| color.surface.raised | `base.slateA25` | `--cnvs-sys-color-surface-raised` | Elevated surfaces |
|
|
65
|
+
| color.surface.loading | `base.slateA200` | `--cnvs-sys-color-surface-loading` | Skeleton/loading states |
|
|
66
|
+
| color.surface.transparent | `base.neutralA0` | `--cnvs-sys-color-surface-transparent` | Transparent surfaces |
|
|
67
|
+
| color.surface.inverse | `base.neutral0` | `--cnvs-sys-color-surface-inverse` | Inverse surfaces |
|
|
71
68
|
|
|
72
69
|
#### Semantic Surface Tokens
|
|
73
70
|
|
|
74
71
|
Semantic surface tokens provide color-coded backgrounds for status indicators and feedback states,
|
|
75
72
|
using alpha variants of the base palette colors for subtle yet clear visual communication.
|
|
76
73
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
| color.surface.
|
|
82
|
-
| color.surface.
|
|
83
|
-
| color.surface.
|
|
84
|
-
| color.surface.
|
|
85
|
-
| color.surface.
|
|
86
|
-
| color.surface.
|
|
87
|
-
| color.surface.success.default | `{base.greenA25}` | `--cnvs-sys-color-surface-success-default` |
|
|
88
|
-
| color.surface.success.strong | `{base.greenA50}` | `--cnvs-sys-color-surface-success-strong` |
|
|
89
|
-
|
|
74
|
+
| Token | JS Value | CSS Variable |
|
|
75
|
+
| ----------------------------- | --------------- | ------------------------------------------ |
|
|
76
|
+
| color.surface.info.default | `base.blueA25` | `--cnvs-sys-color-surface-info-default` |
|
|
77
|
+
| color.surface.info.strong | `base.blueA50` | `--cnvs-sys-color-surface-info-strong` |
|
|
78
|
+
| color.surface.danger.default | `base.redA25` | `--cnvs-sys-color-surface-danger-default` |
|
|
79
|
+
| color.surface.danger.strong | `base.redA50` | `--cnvs-sys-color-surface-danger-strong` |
|
|
80
|
+
| color.surface.warning.default | `base.amberA25` | `--cnvs-sys-color-surface-warning-default` |
|
|
81
|
+
| color.surface.warning.strong | `base.amberA50` | `--cnvs-sys-color-surface-warning-strong` |
|
|
82
|
+
| color.surface.success.default | `base.greenA25` | `--cnvs-sys-color-surface-success-default` |
|
|
83
|
+
| color.surface.success.strong | `base.greenA50` | `--cnvs-sys-color-surface-success-strong` |
|
|
90
84
|
|
|
91
85
|
#### Contrast Surface Tokens
|
|
92
86
|
|
|
93
87
|
Contrast surface tokens provide high-contrast backgrounds for surfaces that need to stand out
|
|
94
88
|
prominently, typically used for elevated or emphasized content areas.
|
|
95
89
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
| color.surface.contrast.default | `{base.neutralA900}` | `--cnvs-sys-color-surface-contrast-default` |
|
|
101
|
-
| color.surface.contrast.strong | `{base.neutralA950}` | `--cnvs-sys-color-surface-contrast-strong` |
|
|
102
|
-
|
|
90
|
+
| Token | JS Value | CSS Variable |
|
|
91
|
+
| ------------------------------ | ------------------ | ------------------------------------------- |
|
|
92
|
+
| color.surface.contrast.default | `base.neutralA900` | `--cnvs-sys-color-surface-contrast-default` |
|
|
93
|
+
| color.surface.contrast.strong | `base.neutralA950` | `--cnvs-sys-color-surface-contrast-strong` |
|
|
103
94
|
|
|
104
95
|
#### AI Surface Tokens
|
|
105
96
|
|
|
106
97
|
AI surface tokens provide specialized colors for AI-related UI components and interactions,
|
|
107
98
|
supporting hover and pressed states for interactive AI elements.
|
|
108
99
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
| color.surface.ai.
|
|
114
|
-
| color.surface.ai.hover | `{base.blueA200}` | `--cnvs-sys-color-surface-ai-hover` |
|
|
115
|
-
| color.surface.ai.pressed | `{base.blueA200}` | `--cnvs-sys-color-surface-ai-pressed` |
|
|
116
|
-
|
|
100
|
+
| Token | JS Value | CSS Variable |
|
|
101
|
+
| ------------------------ | --------------- | ------------------------------------- |
|
|
102
|
+
| color.surface.ai.default | `base.blueA100` | `--cnvs-sys-color-surface-ai-default` |
|
|
103
|
+
| color.surface.ai.hover | `base.blueA200` | `--cnvs-sys-color-surface-ai-hover` |
|
|
104
|
+
| color.surface.ai.pressed | `base.blueA200` | `--cnvs-sys-color-surface-ai-pressed` |
|
|
117
105
|
|
|
118
106
|
#### Interaction Overlay Tokens
|
|
119
107
|
|
|
@@ -121,16 +109,13 @@ Interaction overlay tokens define visual feedback for hover and pressed states o
|
|
|
121
109
|
surfaces, with separate variants for default and inverse color schemes. The scrim token provides a
|
|
122
110
|
backdrop overlay for modal and dialog interactions.
|
|
123
111
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
| color.surface.overlay.
|
|
129
|
-
| color.surface.overlay.
|
|
130
|
-
| color.surface.overlay.
|
|
131
|
-
| color.surface.overlay.pressed.inverse | `{base.whiteA300}` | `--cnvs-sys-color-surface-overlay-pressed-inverse` |
|
|
132
|
-
| color.surface.overlay.scrim | `{base.neutralA400}` | `--cnvs-sys-color-surface-overlay-scrim` |
|
|
133
|
-
|
|
112
|
+
| Token | JS Value | CSS Variable |
|
|
113
|
+
| ------------------------------------- | ------------------ | -------------------------------------------------- |
|
|
114
|
+
| color.surface.overlay.hover.default | `base.slateA50` | `--cnvs-sys-color-surface-overlay-hover-default` |
|
|
115
|
+
| color.surface.overlay.hover.inverse | `base.whiteA200` | `--cnvs-sys-color-surface-overlay-hover-inverse` |
|
|
116
|
+
| color.surface.overlay.pressed.default | `base.slateA100` | `--cnvs-sys-color-surface-overlay-pressed-default` |
|
|
117
|
+
| color.surface.overlay.pressed.inverse | `base.whiteA300` | `--cnvs-sys-color-surface-overlay-pressed-inverse` |
|
|
118
|
+
| color.surface.overlay.scrim | `base.neutralA400` | `--cnvs-sys-color-surface-overlay-scrim` |
|
|
134
119
|
|
|
135
120
|
### Brand Surface Tokens
|
|
136
121
|
|
|
@@ -138,69 +123,57 @@ Brand surface tokens provide brand-colored backgrounds for status indicators, fe
|
|
|
138
123
|
selected states. These tokens use alpha variants of brand colors to create subtle yet recognizable
|
|
139
124
|
brand-aligned surfaces with default and strong intensity options.
|
|
140
125
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
| color.brand.surface.
|
|
146
|
-
| color.brand.surface.
|
|
147
|
-
| color.brand.surface.
|
|
148
|
-
| color.brand.surface.
|
|
149
|
-
| color.brand.surface.
|
|
150
|
-
| color.brand.surface.
|
|
151
|
-
| color.brand.surface.
|
|
152
|
-
| color.brand.surface.positive.strong | `{brand.positiveA50}` | `--cnvs-sys-color-brand-surface-positive-strong` |
|
|
153
|
-
| color.brand.surface.selected | `{brand.primaryA50}` | `--cnvs-sys-color-brand-surface-selected` |
|
|
154
|
-
|
|
126
|
+
| Token | JS Value | CSS Variable |
|
|
127
|
+
| ------------------------------------ | ------------------- | ------------------------------------------------- |
|
|
128
|
+
| color.brand.surface.primary.default | `brand.primaryA25` | `--cnvs-sys-color-brand-surface-primary-default` |
|
|
129
|
+
| color.brand.surface.primary.strong | `brand.primaryA50` | `--cnvs-sys-color-brand-surface-primary-strong` |
|
|
130
|
+
| color.brand.surface.critical.default | `brand.criticalA25` | `--cnvs-sys-color-brand-surface-critical-default` |
|
|
131
|
+
| color.brand.surface.critical.strong | `brand.criticalA50` | `--cnvs-sys-color-brand-surface-critical-strong` |
|
|
132
|
+
| color.brand.surface.caution.default | `brand.cautionA25` | `--cnvs-sys-color-brand-surface-caution-default` |
|
|
133
|
+
| color.brand.surface.caution.strong | `brand.cautionA50` | `--cnvs-sys-color-brand-surface-caution-strong` |
|
|
134
|
+
| color.brand.surface.positive.default | `brand.positiveA25` | `--cnvs-sys-color-brand-surface-positive-default` |
|
|
135
|
+
| color.brand.surface.positive.strong | `brand.positiveA50` | `--cnvs-sys-color-brand-surface-positive-strong` |
|
|
136
|
+
| color.brand.surface.selected | `brand.primaryA50` | `--cnvs-sys-color-brand-surface-selected` |
|
|
155
137
|
|
|
156
138
|
### Focus Tokens
|
|
157
139
|
|
|
158
140
|
New focus tokens provide consistent focus indicators across the design system, supporting both
|
|
159
141
|
standard and high-contrast scenarios.
|
|
160
142
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
| color.focus.inverse | `{base.neutral0}` | `--cnvs-sys-color-focus-inverse` |
|
|
166
|
-
| color.focus.contrast | `{base.neutralA900}` | `--cnvs-sys-color-focus-contrast` |
|
|
167
|
-
|
|
143
|
+
| Token | JS Value | CSS Variable |
|
|
144
|
+
| -------------------- | ------------------ | --------------------------------- |
|
|
145
|
+
| color.focus.inverse | `base.neutral0` | `--cnvs-sys-color-focus-inverse` |
|
|
146
|
+
| color.focus.contrast | `base.neutralA900` | `--cnvs-sys-color-focus-contrast` |
|
|
168
147
|
|
|
169
148
|
### Brand Focus Tokens
|
|
170
149
|
|
|
171
150
|
Brand focus tokens provide brand-aligned focus indicators for primary, critical, and caution states,
|
|
172
151
|
with separate inner and outer variants for caution to support layered alert designs.
|
|
173
152
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
| color.brand.focus.
|
|
179
|
-
| color.brand.focus.
|
|
180
|
-
| color.brand.focus.caution.outer | `{brand.caution500}` | `--cnvs-sys-color-brand-focus-caution-outer` |
|
|
181
|
-
| color.brand.focus.caution.inner | `{brand.caution400}` | `--cnvs-sys-color-brand-focus-caution-inner` |
|
|
182
|
-
|
|
153
|
+
| Token | JS Value | CSS Variable |
|
|
154
|
+
| ------------------------------- | ------------------- | -------------------------------------------- |
|
|
155
|
+
| color.brand.focus.primary | `brand.primary500` | `--cnvs-sys-color-brand-focus-primary` |
|
|
156
|
+
| color.brand.focus.critical | `brand.critical500` | `--cnvs-sys-color-brand-focus-critical` |
|
|
157
|
+
| color.brand.focus.caution.outer | `brand.caution500` | `--cnvs-sys-color-brand-focus-caution-outer` |
|
|
158
|
+
| color.brand.focus.caution.inner | `brand.caution400` | `--cnvs-sys-color-brand-focus-caution-inner` |
|
|
183
159
|
|
|
184
160
|
### Accent Tokens
|
|
185
161
|
|
|
186
162
|
New accent tokens provide semantic color values for UI elements that need to stand out or convey
|
|
187
163
|
meaning, including status indicators, interactive overlays, and muted variants for subtle emphasis.
|
|
188
164
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
| color.accent.
|
|
194
|
-
| color.accent.
|
|
195
|
-
| color.accent.
|
|
196
|
-
| color.accent.
|
|
197
|
-
| color.accent.
|
|
198
|
-
| color.accent.
|
|
199
|
-
| color.accent.
|
|
200
|
-
| color.accent.
|
|
201
|
-
| color.accent.overlay.hover | `{base.neutralA200}` | `--cnvs-sys-color-accent-overlay-hover` |
|
|
202
|
-
| color.accent.overlay.pressed | `{base.neutralA400}` | `--cnvs-sys-color-accent-overlay-pressed` |
|
|
203
|
-
|
|
165
|
+
| Token | JS Value | CSS Variable |
|
|
166
|
+
| ---------------------------- | ------------------ | ----------------------------------------- |
|
|
167
|
+
| color.accent.info | `base.blue600` | `--cnvs-sys-color-accent-info` |
|
|
168
|
+
| color.accent.danger | `base.red600` | `--cnvs-sys-color-accent-danger` |
|
|
169
|
+
| color.accent.warning | `base.amber400` | `--cnvs-sys-color-accent-warning` |
|
|
170
|
+
| color.accent.success | `base.green600` | `--cnvs-sys-color-accent-success` |
|
|
171
|
+
| color.accent.ai | `base.blue950` | `--cnvs-sys-color-accent-ai` |
|
|
172
|
+
| color.accent.contrast | `base.neutralA900` | `--cnvs-sys-color-accent-contrast` |
|
|
173
|
+
| color.accent.muted.default | `base.slate600` | `--cnvs-sys-color-accent-muted-default` |
|
|
174
|
+
| color.accent.muted.soft | `base.slate400` | `--cnvs-sys-color-accent-muted-soft` |
|
|
175
|
+
| color.accent.overlay.hover | `base.neutralA200` | `--cnvs-sys-color-accent-overlay-hover` |
|
|
176
|
+
| color.accent.overlay.pressed | `base.neutralA400` | `--cnvs-sys-color-accent-overlay-pressed` |
|
|
204
177
|
|
|
205
178
|
### Brand Accent Tokens
|
|
206
179
|
|
|
@@ -208,16 +181,13 @@ Brand accent tokens provide brand-aligned accent colors for primary actions, cri
|
|
|
208
181
|
caution indicators, and positive feedback, ensuring consistent brand expression across interactive
|
|
209
182
|
elements.
|
|
210
183
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
| color.brand.accent.
|
|
216
|
-
| color.brand.accent.
|
|
217
|
-
| color.brand.accent.
|
|
218
|
-
| color.brand.accent.positive | `{brand.positive600}` | `--cnvs-sys-color-brand-accent-positive` |
|
|
219
|
-
| color.brand.accent.action | `{brand.primary600}` | `--cnvs-sys-color-brand-accent-action` |
|
|
220
|
-
|
|
184
|
+
| Token | JS Value | CSS Variable |
|
|
185
|
+
| --------------------------- | ------------------- | ---------------------------------------- |
|
|
186
|
+
| color.brand.accent.primary | `brand.primary600` | `--cnvs-sys-color-brand-accent-primary` |
|
|
187
|
+
| color.brand.accent.critical | `brand.critical600` | `--cnvs-sys-color-brand-accent-critical` |
|
|
188
|
+
| color.brand.accent.caution | `brand.caution400` | `--cnvs-sys-color-brand-accent-caution` |
|
|
189
|
+
| color.brand.accent.positive | `brand.positive600` | `--cnvs-sys-color-brand-accent-positive` |
|
|
190
|
+
| color.brand.accent.action | `brand.primary600` | `--cnvs-sys-color-brand-accent-action` |
|
|
221
191
|
|
|
222
192
|
### Foreground Token Updates
|
|
223
193
|
|
|
@@ -225,19 +195,16 @@ Foreground tokens have been updated to use alpha variants for better contrast co
|
|
|
225
195
|
consistency with the new alpha scale system. These updates provide more granular control over text
|
|
226
196
|
hierarchy and readability.
|
|
227
197
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
|
231
|
-
|
|
|
232
|
-
| color.fg.
|
|
233
|
-
| color.fg.
|
|
234
|
-
| color.fg.
|
|
235
|
-
| color.fg.
|
|
236
|
-
| color.fg.
|
|
237
|
-
| color.fg.
|
|
238
|
-
| color.fg.contrast.default | `{base.neutralA900}` | `--cnvs-sys-color-fg-contrast-default` |
|
|
239
|
-
| color.fg.contrast.strong | `{base.neutralA950}` | `--cnvs-sys-color-fg-contrast-strong` |
|
|
240
|
-
|
|
198
|
+
| Token | JS Value | CSS Variable |
|
|
199
|
+
| ------------------------- | ------------------ | -------------------------------------- |
|
|
200
|
+
| color.fg.default | `base.neutralA800` | `--cnvs-sys-color-fg-default` |
|
|
201
|
+
| color.fg.strong | `base.neutralA900` | `--cnvs-sys-color-fg-strong` |
|
|
202
|
+
| color.fg.stronger | `base.neutralA950` | `--cnvs-sys-color-fg-stronger` |
|
|
203
|
+
| color.fg.disabled | `base.slateA400` | `--cnvs-sys-color-fg-disabled` |
|
|
204
|
+
| color.fg.muted.default | `base.slateA600` | `--cnvs-sys-color-fg-muted-default` |
|
|
205
|
+
| color.fg.muted.strong | `base.slateA700` | `--cnvs-sys-color-fg-muted-strong` |
|
|
206
|
+
| color.fg.contrast.default | `base.neutralA900` | `--cnvs-sys-color-fg-contrast-default` |
|
|
207
|
+
| color.fg.contrast.strong | `base.neutralA950` | `--cnvs-sys-color-fg-contrast-strong` |
|
|
241
208
|
|
|
242
209
|
#### Semantic Foreground Colors
|
|
243
210
|
|
|
@@ -246,21 +213,18 @@ default and strong variants for different emphasis levels. These tokens ensure c
|
|
|
246
213
|
usage for informational, warning, error, and success states, plus specialized tokens for AI-related
|
|
247
214
|
content and inverse text.
|
|
248
215
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
| color.fg.
|
|
254
|
-
| color.fg.
|
|
255
|
-
| color.fg.
|
|
256
|
-
| color.fg.
|
|
257
|
-
| color.fg.
|
|
258
|
-
| color.fg.
|
|
259
|
-
| color.fg.
|
|
260
|
-
| color.fg.
|
|
261
|
-
| color.fg.ai | `{base.blue950}` | `--cnvs-sys-color-fg-ai` |
|
|
262
|
-
| color.fg.inverse | `{base.neutral0}` | `--cnvs-sys-color-fg-inverse` |
|
|
263
|
-
|
|
216
|
+
| Token | JS Value | CSS Variable |
|
|
217
|
+
| ------------------------ | --------------- | ------------------------------------- |
|
|
218
|
+
| color.fg.info.default | `base.blue600` | `--cnvs-sys-color-fg-info-default` |
|
|
219
|
+
| color.fg.info.strong | `base.blue700` | `--cnvs-sys-color-fg-info-strong` |
|
|
220
|
+
| color.fg.danger.default | `base.red600` | `--cnvs-sys-color-fg-danger-default` |
|
|
221
|
+
| color.fg.danger.strong | `base.red700` | `--cnvs-sys-color-fg-danger-strong` |
|
|
222
|
+
| color.fg.warning.default | `base.amber600` | `--cnvs-sys-color-fg-warning-default` |
|
|
223
|
+
| color.fg.warning.strong | `base.amber700` | `--cnvs-sys-color-fg-warning-strong` |
|
|
224
|
+
| color.fg.success.default | `base.green600` | `--cnvs-sys-color-fg-success-default` |
|
|
225
|
+
| color.fg.success.strong | `base.green700` | `--cnvs-sys-color-fg-success-strong` |
|
|
226
|
+
| color.fg.ai | `base.blue950` | `--cnvs-sys-color-fg-ai` |
|
|
227
|
+
| color.fg.inverse | `base.neutral0` | `--cnvs-sys-color-fg-inverse` |
|
|
264
228
|
|
|
265
229
|
### Brand Foreground References
|
|
266
230
|
|
|
@@ -268,69 +232,57 @@ Brand foreground tokens provide text colors that align with brand colors, offeri
|
|
|
268
232
|
strong variants for different emphasis levels. These tokens are used for brand-colored text, links,
|
|
269
233
|
and selected states.
|
|
270
234
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
|
274
|
-
|
|
|
275
|
-
| color.brand.fg.
|
|
276
|
-
| color.brand.fg.
|
|
277
|
-
| color.brand.fg.
|
|
278
|
-
| color.brand.fg.
|
|
279
|
-
| color.brand.fg.
|
|
280
|
-
| color.brand.fg.
|
|
281
|
-
| color.brand.fg.
|
|
282
|
-
| color.brand.fg.positive.strong | `{brand.positive700}` | `--cnvs-sys-color-brand-fg-positive-strong` |
|
|
283
|
-
| color.brand.fg.selected | `{brand.primary700}` | `--cnvs-sys-color-brand-fg-selected` |
|
|
284
|
-
|
|
235
|
+
| Token | JS Value | CSS Variable |
|
|
236
|
+
| ------------------------------- | ------------------- | -------------------------------------------- |
|
|
237
|
+
| color.brand.fg.primary.default | `brand.primary600` | `--cnvs-sys-color-brand-fg-primary-default` |
|
|
238
|
+
| color.brand.fg.primary.strong | `brand.primary700` | `--cnvs-sys-color-brand-fg-primary-strong` |
|
|
239
|
+
| color.brand.fg.critical.default | `brand.critical600` | `--cnvs-sys-color-brand-fg-critical-default` |
|
|
240
|
+
| color.brand.fg.critical.strong | `brand.critical700` | `--cnvs-sys-color-brand-fg-critical-strong` |
|
|
241
|
+
| color.brand.fg.caution.default | `brand.caution600` | `--cnvs-sys-color-brand-fg-caution-default` |
|
|
242
|
+
| color.brand.fg.caution.strong | `brand.caution700` | `--cnvs-sys-color-brand-fg-caution-strong` |
|
|
243
|
+
| color.brand.fg.positive.default | `brand.positive600` | `--cnvs-sys-color-brand-fg-positive-default` |
|
|
244
|
+
| color.brand.fg.positive.strong | `brand.positive700` | `--cnvs-sys-color-brand-fg-positive-strong` |
|
|
245
|
+
| color.brand.fg.selected | `brand.primary700` | `--cnvs-sys-color-brand-fg-selected` |
|
|
285
246
|
|
|
286
247
|
### Border Token Updates
|
|
287
248
|
|
|
288
249
|
Border tokens have been updated to use alpha variants and provide more semantic options for
|
|
289
250
|
different border use cases, including input fields, status indicators, and inverse color schemes.
|
|
290
251
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
|
294
|
-
|
|
|
295
|
-
| color.border.default
|
|
296
|
-
| color.border.
|
|
297
|
-
| color.border.
|
|
298
|
-
| color.border.
|
|
299
|
-
| color.border.
|
|
300
|
-
| color.border.
|
|
301
|
-
| color.border.
|
|
302
|
-
| color.border.
|
|
303
|
-
| color.border.
|
|
304
|
-
| color.border.inverse | `{base.whiteA500}` | `--cnvs-sys-color-border-inverse-default` |
|
|
305
|
-
| color.border.inverse.strong | `{base.whiteA700}` | `--cnvs-sys-color-border-inverse-strong` |
|
|
306
|
-
|
|
252
|
+
| Token | JS Value | CSS Variable |
|
|
253
|
+
| ---------------------------- | ------------------ | ----------------------------------------- |
|
|
254
|
+
| color.border.default | `base.slateA200` | `--cnvs-sys-color-border-default` |
|
|
255
|
+
| color.border.strong | `base.slateA300` | `--cnvs-sys-color-border-strong` |
|
|
256
|
+
| color.border.input.default | `base.slateA500` | `--cnvs-sys-color-border-input-default` |
|
|
257
|
+
| color.border.input.hover | `base.slateA700` | `--cnvs-sys-color-border-input-hover` |
|
|
258
|
+
| color.border.info | `base.blue500` | `--cnvs-sys-color-border-info` |
|
|
259
|
+
| color.border.danger | `base.red500` | `--cnvs-sys-color-border-danger` |
|
|
260
|
+
| color.border.warning | `base.amber400` | `--cnvs-sys-color-border-warning` |
|
|
261
|
+
| color.border.contrast | `base.neutralA900` | `--cnvs-sys-color-border-contrast` |
|
|
262
|
+
| color.border.transparent | `base.neutralA0` | `--cnvs-sys-color-border-transparent` |
|
|
263
|
+
| color.border.inverse.default | `base.whiteA500` | `--cnvs-sys-color-border-inverse-default` |
|
|
264
|
+
| color.border.inverse.strong | `base.whiteA700` | `--cnvs-sys-color-border-inverse-strong` |
|
|
307
265
|
|
|
308
266
|
### Brand Border Tokens
|
|
309
267
|
|
|
310
268
|
Brand border tokens provide brand-aligned border colors for primary, critical, and caution states,
|
|
311
269
|
ensuring consistent brand expression in bordered components and status indicators.
|
|
312
270
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
| color.brand.border.
|
|
318
|
-
| color.brand.border.critical | `{brand.critical500}` | `--cnvs-sys-color-brand-border-critical` |
|
|
319
|
-
| color.brand.border.caution | `{brand.caution400}` | `--cnvs-sys-color-brand-border-caution` |
|
|
320
|
-
|
|
271
|
+
| Token | JS Value | CSS Variable |
|
|
272
|
+
| ---------------------------------- | ------------------- | ----------------------------------------------- |
|
|
273
|
+
| color.brand.border.primary.default | `brand.primary500` | `--cnvs-sys-color-brand-border-primary-default` |
|
|
274
|
+
| color.brand.border.critical | `brand.critical500` | `--cnvs-sys-color-brand-border-critical` |
|
|
275
|
+
| color.brand.border.caution | `brand.caution400` | `--cnvs-sys-color-brand-border-caution` |
|
|
321
276
|
|
|
322
277
|
### Shadow Tokens
|
|
323
278
|
|
|
324
279
|
Shadow tokens define the color values used for drop shadows and elevation effects, using alpha
|
|
325
280
|
variants of slate to create subtle depth and layering in the UI.
|
|
326
281
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
|
330
|
-
|
|
|
331
|
-
| color.shadow.base | `{base.slateA200}` | `--cnvs-sys-color-shadow-base` |
|
|
332
|
-
| color.shadow.ambient | `{base.slateA100}` | `--cnvs-sys-color-shadow-ambient` |
|
|
333
|
-
|
|
282
|
+
| Token | JS Value | CSS Variable |
|
|
283
|
+
| -------------------- | ---------------- | --------------------------------- |
|
|
284
|
+
| color.shadow.base | `base.slateA200` | `--cnvs-sys-color-shadow-base` |
|
|
285
|
+
| color.shadow.ambient | `base.slateA100` | `--cnvs-sys-color-shadow-ambient` |
|
|
334
286
|
|
|
335
287
|
### Semantic Size Tokens
|
|
336
288
|
|
|
@@ -338,59 +290,55 @@ New semantic size tokens provide meaningful size values mapped to specific use c
|
|
|
338
290
|
generic numeric values with descriptive names that clearly indicate their intended purpose. This
|
|
339
291
|
improves code readability and ensures consistent sizing across components.
|
|
340
292
|
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
|
344
|
-
|
|
|
345
|
-
| size.
|
|
346
|
-
| size.
|
|
347
|
-
| size.
|
|
348
|
-
| size.
|
|
349
|
-
| size.
|
|
350
|
-
| size.
|
|
351
|
-
| size.xl | `{base.size700}` | `--cnvs-sys-size-xl` | Large Buttons, Tabs, Avatar |
|
|
352
|
-
| size.xxl | `{base.size800}` | `--cnvs-sys-size-xxl` | Table Cell, Toast |
|
|
353
|
-
|
|
293
|
+
| Token | JS Value | CSS Variable | Description |
|
|
294
|
+
| --------- | -------------- | ---------------------- | ----------------------------------------- |
|
|
295
|
+
| size.xxxs | `base.size200` | `--cnvs-sys-size-xxxs` | |
|
|
296
|
+
| size.xxs | `base.size250` | `--cnvs-sys-size-xxs` | |
|
|
297
|
+
| size.xs | `base.size300` | `--cnvs-sys-size-xs` | Count Badge |
|
|
298
|
+
| size.sm | `base.size400` | `--cnvs-sys-size-sm` | X-Small Buttons, Pills, Checkboxes |
|
|
299
|
+
| size.md | `base.size500` | `--cnvs-sys-size-md` | Small Buttons, Segmented Control, Tooltip |
|
|
300
|
+
| size.lg | `base.size600` | `--cnvs-sys-size-lg` | Medium Buttons, Input Fields, Menu Items |
|
|
301
|
+
| size.xl | `base.size700` | `--cnvs-sys-size-xl` | Large Buttons, Tabs, Avatar |
|
|
302
|
+
| size.xxl | `base.size800` | `--cnvs-sys-size-xxl` | Table Cell, Toast |
|
|
354
303
|
|
|
355
304
|
### Space Tokens
|
|
356
305
|
|
|
357
306
|
Space tokens have been reorganized into semantic padding and gap tokens, replacing the previous
|
|
358
307
|
generic `space.*` tokens. This provides clearer intent and better alignment with common CSS
|
|
359
|
-
properties.
|
|
360
|
-
|
|
361
|
-
### Padding Tokens
|
|
308
|
+
properties. Which token you choose depends
|
|
309
|
+
on the context of how it's used. In general you should:
|
|
362
310
|
|
|
311
|
+
- use `padding` tokens for interior space (`padding` and `inset`)
|
|
312
|
+
- use `gap` tokens for exterior space around and between elements (`gap` and `margin`)
|
|
313
|
+
- use `size` tokens for an element's container space (`height` and `width`)
|
|
363
314
|
|
|
315
|
+
### Padding Tokens
|
|
364
316
|
|
|
365
|
-
| Token | JS Value
|
|
366
|
-
| ------------ |
|
|
367
|
-
| padding.none | `
|
|
368
|
-
| padding.xxs | `
|
|
369
|
-
| padding.xs | `
|
|
370
|
-
| padding.sm | `
|
|
371
|
-
| padding.md | `
|
|
372
|
-
| padding.lg | `
|
|
373
|
-
| padding.xl | `
|
|
374
|
-
| padding.xxl | `
|
|
375
|
-
|
|
317
|
+
| Token | JS Value | CSS Variable | Description |
|
|
318
|
+
| ------------ | -------------- | ------------------------- | ---------------------------------- |
|
|
319
|
+
| padding.none | `base.size0` | `--cnvs-sys-padding-none` | No space between content and edges |
|
|
320
|
+
| padding.xxs | `base.size50` | `--cnvs-sys-padding-xxs` | Compact padding |
|
|
321
|
+
| padding.xs | `base.size100` | `--cnvs-sys-padding-xs` | Horizontal padding on Input Fields |
|
|
322
|
+
| padding.sm | `base.size150` | `--cnvs-sys-padding-sm` | Rich Text Editor, X-Small Buttons |
|
|
323
|
+
| padding.md | `base.size200` | `--cnvs-sys-padding-md` | Small Button content |
|
|
324
|
+
| padding.lg | `base.size250` | `--cnvs-sys-padding-lg` | Medium Buttons with Icons |
|
|
325
|
+
| padding.xl | `base.size300` | `--cnvs-sys-padding-xl` | Card and Medium Button content |
|
|
326
|
+
| padding.xxl | `base.size400` | `--cnvs-sys-padding-xxl` | Modal and Large Button content |
|
|
376
327
|
|
|
377
328
|
### Gap Tokens
|
|
378
329
|
|
|
379
|
-
Gap tokens define spacing between elements
|
|
330
|
+
Gap tokens define spacing between elements (`gap` and `margin`), providing consistent spacing
|
|
380
331
|
for component relationships and content organization.
|
|
381
332
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
|
385
|
-
|
|
|
386
|
-
| gap.
|
|
387
|
-
| gap.
|
|
388
|
-
| gap.
|
|
389
|
-
| gap.
|
|
390
|
-
| gap.
|
|
391
|
-
| gap.xl | `{base.size400}` | `--cnvs-sys-gap-xl` | Default card spacing, 12-column gutter |
|
|
392
|
-
| gap.xxl | `{base.size800}` | `--cnvs-sys-gap-xxl` | Space between content sections |
|
|
393
|
-
|
|
333
|
+
| Token | JS Value | CSS Variable | Description |
|
|
334
|
+
| -------- | -------------- | --------------------- | -------------------------------------- |
|
|
335
|
+
| gap.none | `base.size0` | `--cnvs-sys-gap-none` | No space between elements |
|
|
336
|
+
| gap.xs | `base.size50` | `--cnvs-sys-gap-xs` | Icon to text, labels to inputs |
|
|
337
|
+
| gap.sm | `base.size100` | `--cnvs-sys-gap-sm` | Pills, buttons, inline icon to text |
|
|
338
|
+
| gap.md | `base.size200` | `--cnvs-sys-gap-md` | Default inline spacing |
|
|
339
|
+
| gap.lg | `base.size300` | `--cnvs-sys-gap-lg` | Tighter spacing between cards |
|
|
340
|
+
| gap.xl | `base.size400` | `--cnvs-sys-gap-xl` | Default card spacing, 12-column gutter |
|
|
341
|
+
| gap.xxl | `base.size800` | `--cnvs-sys-gap-xxl` | Space between content sections |
|
|
394
342
|
|
|
395
343
|
## Shape Token Updates
|
|
396
344
|
|
|
@@ -398,19 +346,16 @@ Shape tokens define border radius values for rounded corners across components.
|
|
|
398
346
|
been updated with new larger values (xl, xxl, xxxl) to support modern design patterns requiring more
|
|
399
347
|
pronounced rounding on larger containers and elevated surfaces.
|
|
400
348
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
|
404
|
-
|
|
|
405
|
-
| shape.
|
|
406
|
-
| shape.
|
|
407
|
-
| shape.
|
|
408
|
-
| shape.
|
|
409
|
-
| shape.
|
|
410
|
-
| shape.
|
|
411
|
-
| shape.xxxl | `{base.size400}` | `--cnvs-sys-shape-xxxl` | Modals and large containers (NEW) |
|
|
412
|
-
| shape.full | `{base.size75}` \* 100 | `--cnvs-sys-shape-full` | Buttons, Badge, Status Indicator |
|
|
413
|
-
|
|
349
|
+
| Token | JS Value | CSS Variable | Description |
|
|
350
|
+
| ---------- | -------------------- | ----------------------- | --------------------------------- |
|
|
351
|
+
| shape.none | `base.size0` | `--cnvs-sys-shape-none` | Full-width containers |
|
|
352
|
+
| shape.sm | `base.size50` | `--cnvs-sys-shape-sm` | Inputs, Toasts, Tooltips |
|
|
353
|
+
| shape.md | `base.size100` | `--cnvs-sys-shape-md` | Cards, Menus |
|
|
354
|
+
| shape.lg | `base.size150` | `--cnvs-sys-shape-lg` | Dialogs, Modals, Bottom Sheets |
|
|
355
|
+
| shape.xl | `base.size200` | `--cnvs-sys-shape-xl` | Extra large rounding (New) |
|
|
356
|
+
| shape.xxl | `base.size300` | `--cnvs-sys-shape-xxl` | Cards and elevated items (New) |
|
|
357
|
+
| shape.xxxl | `base.size400` | `--cnvs-sys-shape-xxxl` | Modals and large containers (New) |
|
|
358
|
+
| shape.full | `base.size75` \* 100 | `--cnvs-sys-shape-full` | Buttons, Badge, Status Indicator |
|
|
414
359
|
|
|
415
360
|
### Breakpoint Updates
|
|
416
361
|
|
|
@@ -418,540 +363,583 @@ Breakpoint tokens define responsive design breakpoints for different screen size
|
|
|
418
363
|
been updated with clearer naming (replacing single-letter tokens) and a new `xl` breakpoint to
|
|
419
364
|
support wide monitor displays, ensuring better responsive design coverage across all device types.
|
|
420
365
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
|
424
|
-
|
|
|
425
|
-
| breakpoints.
|
|
426
|
-
| breakpoints.
|
|
427
|
-
| breakpoints.
|
|
428
|
-
| breakpoints.lg | `{base.baseline}` \* 128 | `--cnvs-sys-breakpoints-lg` | Desktops (1024px) |
|
|
429
|
-
| breakpoints.xl | `{base.baseline}` \* 180 | `--cnvs-sys-breakpoints-xl` | Wide monitors (NEW - 1440px) |
|
|
430
|
-
|
|
366
|
+
| Token | JS Value | CSS Variable | Description |
|
|
367
|
+
| ---------------- | ---------------------- | ----------------------------- | ---------------------------- |
|
|
368
|
+
| breakpoints.zero | 0 | `--cnvs-sys-breakpoints-zero` | Below small |
|
|
369
|
+
| breakpoints.sm | `base.baseline` \* 40 | `--cnvs-sys-breakpoints-sm` | Mobile devices (320px) |
|
|
370
|
+
| breakpoints.md | `base.baseline` \* 96 | `--cnvs-sys-breakpoints-md` | Laptops (768px) |
|
|
371
|
+
| breakpoints.lg | `base.baseline` \* 128 | `--cnvs-sys-breakpoints-lg` | Desktops (1024px) |
|
|
372
|
+
| breakpoints.xl | `base.baseline` \* 180 | `--cnvs-sys-breakpoints-xl` | Wide monitors (1440px) (New) |
|
|
431
373
|
|
|
432
374
|
## Deprecated Tokens
|
|
433
375
|
|
|
434
|
-
The following tokens have been deprecated in v4.
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
One of the most common deprecated tokens is `sys.color.bg.primary.default`, which now points to `sys.color.brand.accent.primary`:
|
|
439
|
-
|
|
440
|
-
```javascript
|
|
441
|
-
// ❌ Deprecated (still works, but points to new value)
|
|
442
|
-
sys.color.bg.primary.default
|
|
443
|
-
// → resolves to: sys.color.brand.accent.primary
|
|
444
|
-
|
|
445
|
-
// ✅ Recommended (use directly)
|
|
446
|
-
sys.color.brand.accent.primary
|
|
447
|
-
```
|
|
376
|
+
The following tokens have been deprecated in v4. These tokens still exist and point to their
|
|
377
|
+
original values so they do not break as you upgrade. However, they are no longer used in our system,
|
|
378
|
+
and we strongly recommend updating your code to use our new tokens.
|
|
448
379
|
|
|
449
|
-
|
|
380
|
+
Use the sections below for reference as you update.
|
|
450
381
|
|
|
451
382
|
### Deprecated Brand Tokens
|
|
452
383
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
|
458
|
-
|
|
|
459
|
-
| brand.primary.
|
|
460
|
-
| brand.primary.
|
|
461
|
-
| brand.primary.
|
|
462
|
-
| brand.primary.
|
|
463
|
-
| brand.primary.
|
|
464
|
-
| brand.
|
|
465
|
-
| brand.error.
|
|
466
|
-
| brand.error.
|
|
467
|
-
| brand.error.
|
|
468
|
-
| brand.error.
|
|
469
|
-
| brand.error.
|
|
470
|
-
| brand.error.
|
|
471
|
-
| brand.
|
|
472
|
-
| brand.alert.
|
|
473
|
-
| brand.alert.
|
|
474
|
-
| brand.alert.
|
|
475
|
-
| brand.alert.
|
|
476
|
-
| brand.alert.
|
|
477
|
-
| brand.alert.
|
|
478
|
-
| brand.
|
|
479
|
-
| brand.success.
|
|
480
|
-
| brand.success.
|
|
481
|
-
| brand.success.
|
|
482
|
-
| brand.success.
|
|
483
|
-
| brand.success.
|
|
484
|
-
| brand.success.
|
|
485
|
-
| brand.
|
|
486
|
-
| brand.neutral.
|
|
487
|
-
| brand.neutral.
|
|
488
|
-
| brand.neutral.
|
|
489
|
-
| brand.neutral.
|
|
490
|
-
| brand.neutral.
|
|
491
|
-
| brand.neutral.
|
|
492
|
-
| brand.
|
|
493
|
-
| brand.common.
|
|
494
|
-
| brand.common.
|
|
495
|
-
| brand.common.
|
|
496
|
-
|
|
384
|
+
Most of our brand tokens are being replaced by brand tokens with numerical scale names. This makes
|
|
385
|
+
them more versatile to create accessible color palettes. However, some deprecated brand tokens map
|
|
386
|
+
to system colors instead. Refer to the table below for the specific token mappings.
|
|
387
|
+
|
|
388
|
+
| Deprecated Token | Replacement Token |
|
|
389
|
+
| ---------------------------- | ---------------------------- |
|
|
390
|
+
| `brand.primary.lightest` | `brand.primary25` |
|
|
391
|
+
| `brand.primary.lighter` | `brand.primary50` |
|
|
392
|
+
| `brand.primary.light` | `brand.primary200` |
|
|
393
|
+
| `brand.primary.dark` | `brand.primary700` |
|
|
394
|
+
| `brand.primary.darkest` | `brand.primary800` |
|
|
395
|
+
| `brand.primary.accent` | `system.color.fg.inverse` |
|
|
396
|
+
| `brand.error.base` | `brand.critical600` |
|
|
397
|
+
| `brand.error.lightest` | `brand.critical25` |
|
|
398
|
+
| `brand.error.lighter` | `brand.critical50` |
|
|
399
|
+
| `brand.error.light` | `brand.critical200` |
|
|
400
|
+
| `brand.error.dark` | `brand.critical700` |
|
|
401
|
+
| `brand.error.darkest` | `brand.critical800` |
|
|
402
|
+
| `brand.error.accent` | `system.color.fg.inverse` |
|
|
403
|
+
| `brand.alert.base` | `brand.caution400` |
|
|
404
|
+
| `brand.alert.lightest` | `brand.caution25` |
|
|
405
|
+
| `brand.alert.lighter` | `brand.caution50` |
|
|
406
|
+
| `brand.alert.light` | `brand.caution200` |
|
|
407
|
+
| `brand.alert.dark` | `brand.caution500` |
|
|
408
|
+
| `brand.alert.darkest` | `brand.caution600` |
|
|
409
|
+
| `brand.alert.accent` | `system.color.fg.contrast` |
|
|
410
|
+
| `brand.success.base` | `brand.positive600` |
|
|
411
|
+
| `brand.success.lightest` | `brand.positive25` |
|
|
412
|
+
| `brand.success.lighter` | `brand.positive50` |
|
|
413
|
+
| `brand.success.light` | `brand.positive200` |
|
|
414
|
+
| `brand.success.dark` | `brand.positive700` |
|
|
415
|
+
| `brand.success.darkest` | `brand.positive800` |
|
|
416
|
+
| `brand.success.accent` | `system.color.fg.inverse` |
|
|
417
|
+
| `brand.neutral.lightest` | `brand.neutral25` |
|
|
418
|
+
| `brand.neutral.lighter` | `brand.neutral50` |
|
|
419
|
+
| `brand.neutral.light` | `brand.neutral200` |
|
|
420
|
+
| `brand.neutral.base` | `brand.neutral600` |
|
|
421
|
+
| `brand.neutral.dark` | `brand.neutral700` |
|
|
422
|
+
| `brand.neutral.darkest` | `brand.neutral800` |
|
|
423
|
+
| `brand.neutral.accent` | `system.color.fg.inverse` |
|
|
424
|
+
| `brand.common.focus-outline` | `brand.common.focus` |
|
|
425
|
+
| `brand.common.errorInner` | `brand.common.critical` |
|
|
426
|
+
| `brand.common.alertInner` | `brand.common.caution.inner` |
|
|
427
|
+
| `brand.common.alertOuter` | `brand.common.caution.outer` |
|
|
497
428
|
|
|
498
429
|
### Deprecated Space Tokens
|
|
499
430
|
|
|
500
|
-
Space tokens
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
|
508
|
-
|
|
|
509
|
-
| space.
|
|
510
|
-
| space.
|
|
511
|
-
| space.
|
|
512
|
-
| space.
|
|
513
|
-
| space.
|
|
514
|
-
| space.
|
|
515
|
-
| space.
|
|
516
|
-
| space.
|
|
517
|
-
|
|
431
|
+
Space tokens have been deprecated in favor of more specific tokens. Which token you choose depends
|
|
432
|
+
on the context of how it's used. In general you should:
|
|
433
|
+
|
|
434
|
+
- use `padding` tokens for interior space (`padding` and `inset`)
|
|
435
|
+
- use `gap` tokens for exterior space around and between elements (`gap` and `margin`)
|
|
436
|
+
- use `size` tokens for an element's container space (`height` and `width`)
|
|
437
|
+
|
|
438
|
+
| Deprecated Token | Value (px) | Padding Token | Gap Token | Size Token | Notes |
|
|
439
|
+
| ------------------- | ---------- | -------------- | ---------- | ----------- | ---------------------------------------------- |
|
|
440
|
+
| `system.space.zero` | 0px | `padding.none` | `gap.none` | — | |
|
|
441
|
+
| `system.space.half` | 2px | — | — | — | No direct map. Use `0.125rem` or `base.size25` |
|
|
442
|
+
| `system.space.x1` | 4px | `padding.xxs` | `gap.xs` | — | |
|
|
443
|
+
| `system.space.x2` | 8px | `padding.xs` | `gap.sm` | — | |
|
|
444
|
+
| `system.space.x3` | 12px | `padding.sm` | — | — | |
|
|
445
|
+
| `system.space.x4` | 16px | `padding.md` | `gap.md` | `size.xxxs` | |
|
|
446
|
+
| `system.space.x5` | 20px | `padding.lg` | — | `size.xxs` | |
|
|
447
|
+
| `system.space.x6` | 24px | `padding.xl` | `gap.lg` | `size.xs` | |
|
|
448
|
+
| `system.space.x8` | 32px | `padding.xxl` | `gap.xl` | | |
|
|
449
|
+
| `system.space.x10` | 40px | — | — | `size.md` | |
|
|
450
|
+
| `system.space.x14` | 56px | — | — | `size.xl` | |
|
|
451
|
+
| `system.space.x16` | 64px | — | `gap.xxl` | `size.xxl` | |
|
|
452
|
+
| `system.space.x20` | 80px | — | — | — | No direct map. Use `5rem` or `base.size1000` |
|
|
518
453
|
|
|
519
454
|
### Deprecated Shape Tokens
|
|
520
|
-
Shape tokens don't have a 1:1 replacement. Use the notes below to determine the replacement token for your use case.
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
| Deprecated Token | Replacement | CSS Variable | Notes |
|
|
524
|
-
| ---------------- | ----------- | ------------------------------------ | ---------------------------------------------------------- |
|
|
525
|
-
| shape.half | — | — | Use `shape.sm` for status indicators, pills |
|
|
526
|
-
| shape.x1 | — | — | Use `shape.sm` for status indicators, pills |
|
|
527
|
-
| shape.x1-half | — | — | Use `shape.md` for input components |
|
|
528
|
-
| shape.x2 | — | — | Use `shape.lg` for toasts, tooltips, and smaller surfaces. Use `shape.xxl` for cards. Use `shape.xxxl` for modal containers |
|
|
529
|
-
| shape.x4 | — | — | Use `shape.xxxl` for modal containers |
|
|
530
|
-
| shape.x6 | — | — | Use `shape.xxxl` for dialog sheets |
|
|
531
|
-
| shape.zero | shape.none | `--cnvs-sys-shape-none` | Renamed |
|
|
532
|
-
| shape.round | shape.full | `--cnvs-sys-shape-full` | Renamed |
|
|
533
455
|
|
|
456
|
+
Our scalar (`system.shape.x*`) tokens have been deprecated. They do not have a 1:1 replacement
|
|
457
|
+
because our changes to our overall shape language. Which token you choose depends on its specifc
|
|
458
|
+
usage. Please refer to the 'Notes' column for reference. Use the notes below to determine the
|
|
459
|
+
replacement token for your use case.
|
|
460
|
+
|
|
461
|
+
| Deprecated Token | Replacement | CSS Variable | Notes |
|
|
462
|
+
| --------------------- | ------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
463
|
+
| `system.shape.half` | — | — | Use `shape.sm` for status indicators, pills |
|
|
464
|
+
| `system.shape.x1` | — | — | Use `shape.sm` for status indicators, pills |
|
|
465
|
+
| `system.shape.x1Half` | — | — | Use `shape.md` for input components |
|
|
466
|
+
| `system.shape.x2` | — | — | Use `shape.lg` for toasts, tooltips, and smaller surfaces. Use `shape.xxl` for cards. Use `shape.xxxl` for modal containers |
|
|
467
|
+
| `system.shape.x4` | — | — | Use `shape.xxxl` for modal containers |
|
|
468
|
+
| `system.shape.x6` | — | — | Use `shape.xxxl` for dialog sheets |
|
|
469
|
+
| `system.shape.zero` | `system.shape.none` | `--cnvs-sys-shape-none` | Renamed |
|
|
470
|
+
| `system.shape.round` | `system.shape.full` | `--cnvs-sys-shape-full` | Renamed |
|
|
534
471
|
|
|
535
472
|
### Deprecated Breakpoint Tokens
|
|
536
473
|
|
|
474
|
+
Breakpoint tokens have been renamed for consistency and have a 1:1 mapping with their replacement
|
|
475
|
+
tokens. Please refer to the table below to upgrade.
|
|
537
476
|
|
|
538
|
-
|
|
539
|
-
|
|
|
540
|
-
|
|
|
541
|
-
|
|
|
542
|
-
|
|
|
543
|
-
| breakpoints.l | breakpoints.lg | `--cnvs-sys-breakpoints-lg` |
|
|
544
|
-
|
|
477
|
+
| Deprecated Token | Replacement Token |
|
|
478
|
+
| ---------------------- | ----------------------- |
|
|
479
|
+
| `system.breakpoints.s` | `system.breakpoints.sm` |
|
|
480
|
+
| `system.breakpoints.m` | `system.breakpoints.md` |
|
|
481
|
+
| `system.breakpoints.l` | `system.breakpoints.lg` |
|
|
545
482
|
|
|
546
483
|
### Deprecated Color Tokens
|
|
547
484
|
|
|
548
|
-
The following color tokens have been deprecated in v4. Each deprecated token now points to a new
|
|
485
|
+
The following color tokens have been deprecated in v4. Each deprecated token now points to a new
|
|
486
|
+
token value. The deprecated tokens will continue to work but will resolve to their replacement
|
|
487
|
+
values. We recommend updating your code to use the new token names directly.
|
|
549
488
|
|
|
550
489
|
#### Background Color Tokens
|
|
551
490
|
|
|
552
491
|
**Primary Background Tokens**
|
|
553
492
|
|
|
554
|
-
The primary background tokens have been reorganized to better align with brand and surface
|
|
493
|
+
The primary background tokens have been reorganized to better align with brand and surface
|
|
494
|
+
semantics. All deprecated tokens point directly to their original values:
|
|
495
|
+
|
|
496
|
+
| Deprecated Token | Replacement Token | Notes |
|
|
497
|
+
| ---------------------------------- | -------------------------------------------- | ------------------------------------------------------------- |
|
|
498
|
+
| `system.color.bg.primary.default` | `system.color.brand.accent.primary` | Primary brand color for backgrounds |
|
|
499
|
+
| `system.color.bg.primary.strong` | `system.color.brand.accent.primary` | Use with `system.color.accent.overlay.hover` for hover states |
|
|
500
|
+
| `system.color.bg.primary.stronger` | `system.color.brand.accent.primary` | Use with `system.color.accent.overlay.pressed` for active |
|
|
501
|
+
| `system.color.bg.primary.soft` | `system.color.brand.surface.primary.default` | Surface background with primary brand color |
|
|
502
|
+
| `system.color.bg.primary.softer` | `system.color.brand.surface.primary.strong` | Stronger surface background with primary brand color |
|
|
503
|
+
| `system.color.bg.primary.softest` | `system.color.brand.surface.primary.default` | Surface background with primary brand color |
|
|
504
|
+
|
|
505
|
+
**Alt Background Tokens**
|
|
506
|
+
|
|
507
|
+
| Deprecated Token | Replacement Token |
|
|
508
|
+
| ------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
509
|
+
| `system.color.bg.alt.soft` | `system.color.surface.alt.default` |
|
|
510
|
+
| `system.color.bg.alt.softer` | `system.color.surface.raised` |
|
|
511
|
+
| `system.color.bg.alt.strong` | `system.color.surface.alt.default` with overlay (`system.color.surface.overlay.hover`) |
|
|
512
|
+
| `system.color.bg.alt.stronger` | `system.color.surface.alt.default` with overlay (`system.color.surface.overlay.pressed`) |
|
|
513
|
+
|
|
514
|
+
**Transparent/Overlay Background Tokens**
|
|
515
|
+
|
|
516
|
+
| Deprecated Token | Replacement Token |
|
|
517
|
+
| -------------------------------------- | ---------------------------------------------- |
|
|
518
|
+
| `system.color.bg.transparent.default` | `system.color.surface.transparent` |
|
|
519
|
+
| `system.color.bg.transparent.strong` | `system.color.surface.overlay.hover.default` |
|
|
520
|
+
| `system.color.bg.transparent.stronger` | `system.color.surface.overlay.pressed.default` |
|
|
521
|
+
| `system.color.bg.overlay` | `system.color.surface.overlay.scrim` |
|
|
522
|
+
| `system.color.bg.translucent` | `system.color.surface.contrast.default` |
|
|
523
|
+
|
|
524
|
+
**Muted Background Tokens**
|
|
525
|
+
|
|
526
|
+
| Deprecated Token | Replacement Token |
|
|
527
|
+
| ------------------------------- | -------------------------------------------------------------------------------------- |
|
|
528
|
+
| `system.color.bg.muted.default` | `system.color.accent.muted.default` |
|
|
529
|
+
| `system.color.bg.muted.soft` | `system.color.accent.muted.soft` |
|
|
530
|
+
| `system.color.bg.muted.softer` | `system.color.accent.muted.soft` |
|
|
531
|
+
| `system.color.bg.muted.strong` | `system.color.accent.muted.default` with overlay (`system.color.accent.overlay.hover`) |
|
|
532
|
+
|
|
533
|
+
**Contrast Background Tokens**
|
|
534
|
+
|
|
535
|
+
| Deprecated Token | Replacement Token |
|
|
536
|
+
| ---------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
537
|
+
| `system.color.bg.contrast.default` | `system.color.surface.contrast.default` |
|
|
538
|
+
| `system.color.bg.contrast.strong` | `system.color.surface.contrast.strong` with overlay (`system.color.accent.overlay.hover`) |
|
|
539
|
+
|
|
540
|
+
**Critical Background Tokens**
|
|
541
|
+
|
|
542
|
+
| Deprecated Token | Replacement Token |
|
|
543
|
+
| ----------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
544
|
+
| `system.color.bg.critical.default` | `system.color.brand.accent.critical` |
|
|
545
|
+
| `system.color.bg.critical.soft` | `system.color.surface.danger.default` |
|
|
546
|
+
| `system.color.bg.critical.softer` | `system.color.brand.surface.critical.strong` |
|
|
547
|
+
| `system.color.bg.critical.softest` | `system.color.brand.surface.critical.default` |
|
|
548
|
+
| `system.color.bg.critical.strong` | `system.color.brand.accent.critical` with overlay (`system.color.accent.overlay.hover`) |
|
|
549
|
+
| `system.color.bg.critical.stronger` | `system.color.brand.accent.critical` with overlay (`system.color.accent.overlay.pressed`) |
|
|
550
|
+
|
|
551
|
+
**Caution/Warning Background Tokens**
|
|
552
|
+
|
|
553
|
+
| Deprecated Token | Replacement Token |
|
|
554
|
+
| ---------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
555
|
+
| `system.color.bg.caution.default` | `system.color.brand.accent.caution` |
|
|
556
|
+
| `system.color.bg.caution.soft` | `system.color.surface.warning.default` |
|
|
557
|
+
| `system.color.bg.caution.softer` | `system.color.brand.surface.caution.strong` |
|
|
558
|
+
| `system.color.bg.caution.softest` | `system.color.brand.surface.caution.default` |
|
|
559
|
+
| `system.color.bg.caution.strong` | `system.color.brand.accent.caution` with overlay (`system.color.accent.overlay.hover`) |
|
|
560
|
+
| `system.color.bg.caution.stronger` | `system.color.brand.accent.caution` with overlay (`system.color.accent.overlay.pressed`) |
|
|
561
|
+
|
|
562
|
+
**Positive/Success Background Tokens**
|
|
563
|
+
|
|
564
|
+
| Deprecated Token | Replacement Token |
|
|
565
|
+
| ----------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
566
|
+
| `system.color.bg.positive.default` | `system.color.brand.accent.positive` |
|
|
567
|
+
| `system.color.bg.positive.strong` | `system.color.brand.accent.positive` with overlay (`system.color.accent.overlay.hover`) |
|
|
568
|
+
| `system.color.bg.positive.stronger` | `system.color.brand.accent.positive` with overlay (`system.color.accent.overlay.pressed`) |
|
|
569
|
+
| `system.color.bg.positive.soft` | `system.color.brand.surface.positive.default` |
|
|
570
|
+
| `system.color.bg.positive.softer` | `system.color.brand.surface.positive.strong` |
|
|
571
|
+
| `system.color.bg.positive.softest` | `system.color.surface.success.default` |
|
|
572
|
+
|
|
573
|
+
**Info Background Tokens**
|
|
574
|
+
|
|
575
|
+
| Deprecated Token | Replacement Token |
|
|
576
|
+
| ------------------------------- | ------------------------------------------------------------------------------- |
|
|
577
|
+
| `system.color.bg.info.default` | `system.color.accent.info` |
|
|
578
|
+
| `system.color.bg.info.strong` | `system.color.accent.info` with overlay (`system.color.accent.overlay.hover`) |
|
|
579
|
+
| `system.color.bg.info.stronger` | `system.color.accent.info` with overlay (`system.color.accent.overlay.pressed`) |
|
|
580
|
+
| `system.color.bg.info.soft` | `system.color.surface.info.default` |
|
|
581
|
+
| `system.color.bg.info.softer` | `system.color.surface.info.strong` |
|
|
582
|
+
| `system.color.bg.info.softest` | `system.color.surface.info.default` |
|
|
583
|
+
|
|
584
|
+
**AI Background Tokens**
|
|
585
|
+
|
|
586
|
+
| Deprecated Token | Replacement Token |
|
|
587
|
+
| ------------------------------ | --------------------------------- |
|
|
588
|
+
| `system.color.bg.ai.default` | `system.color.surface.ai.default` |
|
|
589
|
+
| `system.color.bg.ai.strong` | `system.color.surface.ai.hover` |
|
|
590
|
+
| `system.color.bg.ai.stronger` | `system.color.surface.ai.pressed` |
|
|
591
|
+
| `system.color.bg.ai.strongest` | `system.color.accent.ai` |
|
|
592
|
+
|
|
593
|
+
#### Foreground Color Tokens
|
|
555
594
|
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
|
595
|
+
**Text Tokens**
|
|
596
|
+
|
|
597
|
+
System text tokens (`system.color.text.*`) are deprecated and are mostly being replaced with
|
|
598
|
+
foreground tokens (`system.color.fg.*`) to consolidate duplicated tokens. However, a few are
|
|
599
|
+
replaced with brand and other tokens. Please refer to the table below for the specific token
|
|
600
|
+
mappings.
|
|
601
|
+
|
|
602
|
+
| Deprecated Token | Replacement Token |
|
|
603
|
+
| ------------------------------------- | ---------------------------------------- |
|
|
604
|
+
| `system.color.text.default` | `system.color.fg.default` |
|
|
605
|
+
| `system.color.text.strong` | `system.color.fg.strong` |
|
|
606
|
+
| `system.color.text.stronger` | `system.color.fg.strong` |
|
|
607
|
+
| `system.color.text.disabled` | `system.opacity.disabled` |
|
|
608
|
+
| `system.color.text.hint` | `system.color.fg.muted.default` |
|
|
609
|
+
| `system.color.text.inverse` | `system.color.fg.inverse` |
|
|
610
|
+
| `system.color.text.critical.default` | `system.color.brand.fg.critical.default` |
|
|
611
|
+
| `system.color.text.critical.strong` | `system.color.brand.fg.critical.strong` |
|
|
612
|
+
| `system.color.text.critical.stronger` | `system.color.brand.fg.critical.strong` |
|
|
613
|
+
| `system.color.text.critical.soft` | `system.color.fg.danger` |
|
|
614
|
+
| `system.color.text.critical.softer` | `system.color.fg.danger` |
|
|
615
|
+
| `system.color.text.primary.default` | `system.color.brand.fg.primary.default` |
|
|
616
|
+
| `system.color.text.primary.strong` | `system.color.brand.fg.primary.strong` |
|
|
617
|
+
| `system.color.text.primary.stronger` | `system.color.brand.fg.primary.strong` |
|
|
618
|
+
| `system.color.text.primary.soft` | `system.color.fg.info` |
|
|
619
|
+
| `system.color.text.primary.softer` | `system.color.fg.info` |
|
|
620
|
+
| `system.color.text.caution.default` | `system.color.fg.warning` |
|
|
621
|
+
| `system.color.text.caution.strong` | `system.color.fg.contrast.strong` |
|
|
622
|
+
| `system.color.text.caution.soft` | `system.color.fg.warning` |
|
|
623
|
+
| `system.color.text.caution.stronger` | `system.color.fg.contrast.strong` |
|
|
624
|
+
| `system.color.text.caution.softer` | `system.color.fg.warning` |
|
|
625
|
+
| `system.color.text.ai` | `system.color.fg.ai` |
|
|
626
|
+
| `system.color.text.positive.default` | `system.color.brand.fg.positive.default` |
|
|
627
|
+
| `system.color.text.positive.strong` | `system.color.brand.fg.positive.strong` |
|
|
628
|
+
| `system.color.text.positive.stronger` | `system.color.brand.fg.positive.strong` |
|
|
629
|
+
| `system.color.text.positive.soft` | `system.color.fg.success` |
|
|
630
|
+
| `system.color.text.positive.softer` | `system.color.fg.success` |
|
|
631
|
+
| `system.color.text.info.default` | `system.color.fg.info.default` |
|
|
632
|
+
| `system.color.text.info.strong` | `system.color.fg.info.strong` |
|
|
633
|
+
| `system.color.text.info.stronger` | `system.color.fg.info.strong` |
|
|
634
|
+
| `system.color.text.info.soft` | `system.color.fg.info.default` |
|
|
635
|
+
| `system.color.text.info.softer` | `system.color.fg.info` |
|
|
636
|
+
|
|
637
|
+
Similarly, system icon tokens (`system.color.icon.*`) are deprecated and are mostly being replaced
|
|
638
|
+
with foreground tokens (`system.color.fg.*`) to consolidate duplicated tokens. However, a few are
|
|
639
|
+
replaced with brand and other tokens. Please refer to the table below for the specific token
|
|
640
|
+
mappings.
|
|
641
|
+
|
|
642
|
+
| Deprecated Token | Replacement Token |
|
|
643
|
+
| ------------------------------------- | ---------------------------------------------------------------------------------- |
|
|
644
|
+
| `system.color.icon.default` | `system.color.fg.default` |
|
|
645
|
+
| `system.color.icon.soft` | `system.color.fg.muted.default` |
|
|
646
|
+
| `system.color.icon.strong` | `system.color.fg.muted.strong` |
|
|
647
|
+
| `system.color.icon.inverse` | `system.color.fg.inverse` |
|
|
648
|
+
| `system.color.icon.primary.default` | `system.color.brand.fg.primary.default` |
|
|
649
|
+
| `system.color.icon.primary.strong` | `system.color.brand.fg.primary.strong` |
|
|
650
|
+
| `system.color.icon.primary.stronger` | `system.color.brand.fg.primary.strong` |
|
|
651
|
+
| `system.color.icon.primary.soft` | `system.color.fg.info` |
|
|
652
|
+
| `system.color.icon.primary.softer` | `system.color.fg.info` |
|
|
653
|
+
| `system.color.icon.positive.default` | `system.color.brand.fg.positive.default` |
|
|
654
|
+
| `system.color.icon.positive.strong` | `system.color.brand.fg.positive.strong` with `system.color.accent.overlay.hover` |
|
|
655
|
+
| `system.color.icon.positive.stronger` | `system.color.brand.fg.positive.strong` with `system.color.accent.overlay.pressed` |
|
|
656
|
+
| `system.color.icon.positive.soft` | `system.color.fg.success` |
|
|
657
|
+
| `system.color.icon.positive.softer` | `system.color.fg.success` |
|
|
658
|
+
| `system.color.icon.critical.default` | `system.color.brand.fg.critical.default` |
|
|
659
|
+
| `system.color.icon.critical.strong` | `system.color.fg.danger-strong` |
|
|
660
|
+
| `system.color.icon.critical.stronger` | `system.color.fg.danger.strong` |
|
|
661
|
+
| `system.color.icon.critical.soft` | `system.color.fg.danger` |
|
|
662
|
+
| `system.color.icon.critical.softer` | `system.color.fg.danger` |
|
|
663
|
+
| `system.color.icon.caution.default` | `system.color.fg.contrast.default` |
|
|
664
|
+
| `system.color.icon.caution.strong` | `system.color.brand.fg.caution.default` |
|
|
665
|
+
| `system.color.icon.caution.stronger` | `system.color.brand.fg.caution.strong` |
|
|
666
|
+
| `system.color.icon.caution.soft` | `system.color.fg.warning` |
|
|
667
|
+
| `system.color.icon.caution.softer` | `system.color.fg.warning` |
|
|
668
|
+
| `system.color.icon.disabled` | `system.color.fg.disabled` |
|
|
669
|
+
| `system.color.icon.info.default` | `system.color.fg.info.default` |
|
|
670
|
+
| `system.color.icon.info.strong` | `system.color.fg.info.strong` |
|
|
671
|
+
| `system.color.icon.info.stronger` | `system.color.fg.info.strong` |
|
|
672
|
+
|
|
673
|
+
**Foreground Tokens**
|
|
674
|
+
|
|
675
|
+
Some foreground (`system.color.fg.*`) tokens are being remapped to other system colors to
|
|
676
|
+
consolidate them.
|
|
677
|
+
|
|
678
|
+
| Deprecated Token | Replacement Token |
|
|
679
|
+
| ----------------------------------- | ---------------------------------------------------------------------------------- |
|
|
680
|
+
| `system.color.fg.critical.default` | `system.color.brand.fg.critical.default` |
|
|
681
|
+
| `system.color.fg.critical.strong` | `system.color.brand.fg.critical.strong` with `system.color.accent.overlay.hover` |
|
|
682
|
+
| `system.color.fg.critical.stronger` | `system.color.fg.danger tokens` |
|
|
683
|
+
| `system.color.fg.critical.soft` | `system.color.fg.danger` |
|
|
684
|
+
| `system.color.fg.critical.softer` | `system.color.fg.danger` |
|
|
685
|
+
| `system.color.fg.muted.stronger` | `system.color.fg.muted.strong` |
|
|
686
|
+
| `system.color.fg.muted.soft` | `system.color.fg.muted` |
|
|
687
|
+
| `system.color.fg.primary.default` | `system.color.brand.fg.primary.default` |
|
|
688
|
+
| `system.color.fg.primary.soft` | `system.color.fg.info` or use `system.color.brand.fg.primary` for brand colors |
|
|
689
|
+
| `system.color.fg.primary.softer` | `system.color.fg.info` or use `system.color.brand.fg.primary` for brand colors |
|
|
690
|
+
| `system.color.fg.primary.stronger` | `system.color.brand.fg.primary.strong` |
|
|
691
|
+
| `system.color.fg.primary.strong` | `system.color.brand.fg.primary.strong` |
|
|
692
|
+
| `system.color.fg.caution.default` | `system.color.brand.fg.caution.default` |
|
|
693
|
+
| `system.color.fg.caution.strong` | `system.color.brand.fg.caution.strong` with `system.color.accent.overlay.hover` |
|
|
694
|
+
| `system.color.fg.caution.soft` | `system.color.fg.warning` |
|
|
695
|
+
| `system.color.fg.caution.stronger` | `system.color.fg.warning-strong` |
|
|
696
|
+
| `system.color.fg.caution.softer` | `system.color.fg.warning` |
|
|
697
|
+
| `system.color.fg.info.softer` | `system.color.fg.ai` |
|
|
698
|
+
| `system.color.fg.info.soft` | `system.color.fg.info` |
|
|
699
|
+
| `system.color.fg.info.stronger` | `system.color.fg.info.strong` |
|
|
700
|
+
| `system.color.fg.positive.default` | `system.color.brand.fg.positive.default` |
|
|
701
|
+
| `system.color.fg.positive.softer` | `system.color.fg.success` |
|
|
702
|
+
| `system.color.fg.positive.soft` | `system.color.fg.success` |
|
|
703
|
+
| `system.color.fg.positive.strong` | `system.color.brand.fg.positive.strong` with `system.color.accent.overlay.hover` |
|
|
704
|
+
| `system.color.fg.positive.stronger` | `system.color.brand.fg.positive.strong` with `system.color.accent.overlay.pressed` |
|
|
705
|
+
|
|
706
|
+
#### System Border Color Tokens
|
|
707
|
+
|
|
708
|
+
> Important: The `system.color.border.inverse` token is a breaking change. **Important** This is a > breaking change. Teams will have to update their code to use
|
|
709
|
+
> `system.color.border.inverse.default`.
|
|
710
|
+
|
|
711
|
+
| Deprecated Token | Replacement Token | Notes |
|
|
712
|
+
| -------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------- |
|
|
713
|
+
| `system.color.border.input.disabled` | `system.opacity.disabled` | Use `system.color.fg.disabled` for disabled input text and icons |
|
|
714
|
+
| `system.color.border.input.strong` | `system.color.border.input.hover` | |
|
|
715
|
+
| `system.color.border.input.inverse` | `system.color.border.inverse.default` | |
|
|
716
|
+
| `system.color.border.contrast.strong` | `system.color.border.contrast.default` | Use `system.color.border.contrast.default` instead |
|
|
717
|
+
| `system.color.border.primary.default` | `system.color.brand.border.primary` | |
|
|
718
|
+
| `system.color.border.critical.default` | `system.color.brand.border.critical` | |
|
|
719
|
+
| `system.color.border.caution.default` | `system.color.brand.focus.caution.inner` | |
|
|
720
|
+
| `system.color.border.caution.strong` | `system.color.brand.focus.caution.outer` | |
|
|
721
|
+
| `system.color.border.ai` | `system.color.accent.ai` | |
|
|
722
|
+
| `system.color.border.divider` | `system.color.border.default` | |
|
|
723
|
+
| `system.color.border.container` | `system.color.border.strong` | |
|
|
724
|
+
|
|
725
|
+
#### System Static Color Tokens
|
|
726
|
+
|
|
727
|
+
System static color tokens have been deprecated. Almost all of these will directly map to a base
|
|
728
|
+
palette token, but some will map to a system token. Other mappings will depend on the token's usage.
|
|
729
|
+
Please refer to the 'Notes' column in the tables below for additional context.
|
|
730
|
+
|
|
731
|
+
**Static Amber/Orange/Gold Tokens**
|
|
732
|
+
|
|
733
|
+
Our amber, orange, and gold tokens have been deprecated. Some of their replacement mappings depends
|
|
734
|
+
on their specific usage. Refer to the table below for the recommended mapping and notes for
|
|
735
|
+
additional context.
|
|
736
|
+
|
|
737
|
+
| Deprecated Token | Replacement Token | Notes |
|
|
738
|
+
| ------------------------------------- | -------------------------------------- | ----------------------------------------------------------------- |
|
|
739
|
+
| `system.color.static.amber.default` | `system.color.accent.warning` | |
|
|
740
|
+
| `system.color.static.amber.softest` | `system.color.surface.warning.default` | |
|
|
741
|
+
| `system.color.static.amber.soft` | `system.color.surface.warning.strong` | |
|
|
742
|
+
| `system.color.static.amber.softer` | `base.palette.amber.50` | |
|
|
743
|
+
| `system.color.static.amber.strong` | `system.color.accent.warning` | |
|
|
744
|
+
| `system.color.static.amber.stronger` | `system.color.accent.warning` | |
|
|
745
|
+
| `system.color.static.amber.strongest` | `system.color.fg.warning.strong` | |
|
|
746
|
+
| `system.color.static.orange.default` | `base.palette.amber.400` | Prefer `system.color.bg.caution.default` when used as background |
|
|
747
|
+
| `system.color.static.orange.soft` | `base.palette.amber.100` | Prefer `system.color.bg.caution.soft` when used as background |
|
|
748
|
+
| `system.color.static.orange.strong` | `base.palette.amber.500` | Prefer `system.color.bg.caution.strong` when used as background |
|
|
749
|
+
| `system.color.static.gold.stronger` | `base.palette.amber.600` | Prefer `system.color.bg.caution.stronger` when used as background |
|
|
750
|
+
|
|
751
|
+
**Static Blue Tokens**
|
|
752
|
+
|
|
753
|
+
The `system.color.static.blue.default` token should map to `system.color.accent.info`. All other
|
|
754
|
+
`system.color.static.blue` tokens should map to `base.palette.blue.*` tokens.
|
|
755
|
+
|
|
756
|
+
| Deprecated Token | Replacement Token |
|
|
757
|
+
| ------------------------------------ | -------------------------- |
|
|
758
|
+
| `system.color.static.blue.default` | `system.color.accent.info` |
|
|
759
|
+
| `system.color.static.blue.softest` | `base.palette.blue.25` |
|
|
760
|
+
| `system.color.static.blue.softer` | `base.palette.blue.50` |
|
|
761
|
+
| `system.color.static.blue.soft` | `base.palette.blue.100` |
|
|
762
|
+
| `system.color.static.blue.strong` | `base.palette.blue.700` |
|
|
763
|
+
| `system.color.static.blue.stronger` | `base.palette.blue.800` |
|
|
764
|
+
| `system.color.static.blue.strongest` | `base.palette.blue.950` |
|
|
765
|
+
|
|
766
|
+
**Static Green Tokens**
|
|
767
|
+
|
|
768
|
+
All `system.color.static.green.*` should map to `base.palette.green.*` tokens.
|
|
769
|
+
|
|
770
|
+
| Deprecated Token | Replacement Token |
|
|
771
|
+
| ------------------------------------- | ------------------------ |
|
|
772
|
+
| `system.color.static.green.default` | `base.palette.green.600` |
|
|
773
|
+
| `system.color.static.green.softest` | `base.palette.green.25` |
|
|
774
|
+
| `system.color.static.green.softer` | `base.palette.green.50` |
|
|
775
|
+
| `system.color.static.green.soft` | `base.palette.green.100` |
|
|
776
|
+
| `system.color.static.green.strong` | `base.palette.green.700` |
|
|
777
|
+
| `system.color.static.green.stronger` | `base.palette.green.800` |
|
|
778
|
+
| `system.color.static.green.strongest` | `base.palette.green.950` |
|
|
779
|
+
|
|
780
|
+
**Static Red Tokens**
|
|
781
|
+
|
|
782
|
+
All `system.color.static.red.*` should map to `base.palette.red.*` tokens.
|
|
783
|
+
|
|
784
|
+
| Deprecated Token | Replacement Token |
|
|
785
|
+
| ----------------------------------- | ---------------------- |
|
|
786
|
+
| `system.color.static.red.default` | `base.palette.red.600` |
|
|
787
|
+
| `system.color.static.red.softest` | `base.palette.red.25` |
|
|
788
|
+
| `system.color.static.red.softer` | `base.palette.red.50` |
|
|
789
|
+
| `system.color.static.red.soft` | `base.palette.red.100` |
|
|
790
|
+
| `system.color.static.red.strong` | `base.palette.red.700` |
|
|
791
|
+
| `system.color.static.red.stronger` | `base.palette.red.800` |
|
|
792
|
+
| `system.color.static.red.strongest` | `base.palette.red.950` |
|
|
793
|
+
|
|
794
|
+
**Static Gray/Slate Tokens**
|
|
795
|
+
|
|
796
|
+
All `system.color.static.gray.*` should map to `base.palette.slate.*` tokens.
|
|
797
|
+
|
|
798
|
+
| Deprecated Token | Replacement Token |
|
|
799
|
+
| ------------------------------------ | ------------------------ |
|
|
800
|
+
| `system.color.static.gray.default` | `base.palette.slate.600` |
|
|
801
|
+
| `system.color.static.gray.softest` | `base.palette.slate.50` |
|
|
802
|
+
| `system.color.static.gray.softer` | `base.palette.slate.100` |
|
|
803
|
+
| `system.color.static.gray.soft` | `base.palette.slate.200` |
|
|
804
|
+
| `system.color.static.gray.strong` | `base.palette.slate.700` |
|
|
805
|
+
| `system.color.static.gray.stronger` | `base.palette.slate.800` |
|
|
806
|
+
| `system.color.static.gray.strongest` | `base.palette.slate.950` |
|
|
807
|
+
|
|
808
|
+
**Static Neutral Tokens**
|
|
809
|
+
|
|
810
|
+
The static white and black tokens should map to our base palette neutral tokens.
|
|
811
|
+
|
|
812
|
+
| Deprecated Token | Replacement Token |
|
|
813
|
+
| --------------------------- | --------------------------- |
|
|
814
|
+
| `system.color.static.white` | `base.palette.neutral.0` |
|
|
815
|
+
| `system.color.static.black` | `base.palette.neutral.1000` |
|
|
816
|
+
|
|
817
|
+
### System Shadow Tokens
|
|
818
|
+
|
|
819
|
+
Our `system.shadow.*` tokens have been updated to use more descriptive names.
|
|
820
|
+
|
|
821
|
+
| Deprecated Token | Replacement Token |
|
|
822
|
+
| ----------------------- | ----------------------------- |
|
|
823
|
+
| `system.shadow.1` | `system.color.shadow.base` |
|
|
824
|
+
| `system.shadow.2` | `system.color.shadow.ambient` |
|
|
825
|
+
| `system.shadow.default` | `system.color.shadow.base`. |
|
|
826
|
+
|
|
827
|
+
### System Typography Tokens
|
|
828
|
+
|
|
829
|
+
Some of our type tokens have been renamed for consistency, but the values are still the same. You
|
|
830
|
+
should not see any visual changes after updating to v4. Please refer to the sections below on the
|
|
831
|
+
specific changes and how to update.
|
|
832
|
+
|
|
833
|
+
#### Type Composite Tokens
|
|
834
|
+
|
|
835
|
+
Our composite `system.type.*` tokens (which combine font-family, font-weight, line-height,
|
|
836
|
+
font-size, and letter-spacing) have been renamed to use shorter, abbreviated names. The longer,
|
|
837
|
+
descriptive names are deprecated. Please update to the abbreviated token names. Use the table below
|
|
838
|
+
for reference.
|
|
839
|
+
|
|
840
|
+
| Deprecated Token | Replacement Tokens |
|
|
841
|
+
| ---------------------------- | ------------------------ |
|
|
842
|
+
| `system.type.subtext.small` | `system.type.subtext.sm` |
|
|
843
|
+
| `system.type.subtext.medium` | `system.type.subtext.md` |
|
|
844
|
+
| `system.type.subtext.large` | `system.type.subtext.lg` |
|
|
845
|
+
| `system.type.body.small` | `system.type.body.sm` |
|
|
846
|
+
| `system.type.body.medium` | `system.type.body.md` |
|
|
847
|
+
| `system.type.body.large` | `system.type.body.lg` |
|
|
848
|
+
| `system.type.heading.small` | `system.type.heading.sm` |
|
|
849
|
+
| `system.type.heading.medium` | `system.type.heading.md` |
|
|
850
|
+
| `system.type.heading.large` | `system.type.heading.lg` |
|
|
851
|
+
| `system.type.title.small` | `system.type.title.sm` |
|
|
852
|
+
| `system.type.title.medium` | `system.type.title.md` |
|
|
853
|
+
| `system.type.title.large` | `system.type.title.lg` |
|
|
854
|
+
|
|
855
|
+
Example Update:
|
|
856
|
+
|
|
857
|
+
```ts
|
|
858
|
+
// Before with v3 tokens
|
|
859
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
860
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
861
|
+
|
|
862
|
+
const customTypeStyles = createStyles({
|
|
863
|
+
...system.type.body.large,
|
|
864
|
+
fontWeight: system.type.fontWeight.bold,
|
|
865
|
+
});
|
|
866
|
+
```
|
|
564
867
|
|
|
565
|
-
|
|
868
|
+
```ts
|
|
869
|
+
// After with v4 tokens
|
|
870
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
871
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
566
872
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
873
|
+
const customTypeStyles = createStyles({
|
|
874
|
+
...system.type.body.lg,
|
|
875
|
+
fontWeight: system.type.fontWeight.bold,
|
|
876
|
+
});
|
|
877
|
+
```
|
|
570
878
|
|
|
571
|
-
|
|
572
|
-
|
|
879
|
+
Similarly, our typography tokens for `font-size` and `line-height` have been renamed to use
|
|
880
|
+
abbreviated size names (`sm`, `md`, `lg`) instead of longer, descriptive names (`small`, `medium`,
|
|
881
|
+
`large`) for consistency. The values of the tokens are the same, and there should be no visual
|
|
882
|
+
change when you upgrade.
|
|
883
|
+
|
|
884
|
+
#### Font-Size Tokens
|
|
885
|
+
|
|
886
|
+
Pleas refer to the table below when replacing deprecated font-size tokens.
|
|
887
|
+
|
|
888
|
+
| Deprecated Token | Replacement Token |
|
|
889
|
+
| --------------------------------- | ----------------------------- |
|
|
890
|
+
| `system.font-size.subtext.small` | `system.font-size.subtext.sm` |
|
|
891
|
+
| `system.font-size.subtext.medium` | `system.font-size.subtext.md` |
|
|
892
|
+
| `system.font-size.subtext.large` | `system.font-size.subtext.lg` |
|
|
893
|
+
| `system.font-size.body.small` | `system.font-size.body.sm` |
|
|
894
|
+
| `system.font-size.body.medium` | `system.font-size.body.md` |
|
|
895
|
+
| `system.font-size.body.large` | `system.font-size.body.lg` |
|
|
896
|
+
| `system.font-size.heading.small` | `system.font-size.heading.sm` |
|
|
897
|
+
| `system.font-size.heading.medium` | `system.font-size.heading.md` |
|
|
898
|
+
| `system.font-size.heading.large` | `system.font-size.heading.lg` |
|
|
899
|
+
| `system.font-size.title.small` | `system.font-size.title.sm` |
|
|
900
|
+
| `system.font-size.title.medium` | `system.font-size.title.md` |
|
|
901
|
+
| `system.font-size.title.large` | `system.font-size.title.lg` |
|
|
902
|
+
|
|
903
|
+
Example Update:
|
|
904
|
+
|
|
905
|
+
```ts
|
|
906
|
+
// Before with v3 tokens
|
|
907
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
908
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
909
|
+
|
|
910
|
+
const customTypeStyles = createStyles({
|
|
911
|
+
fontSize: system.fontSize.body.large,
|
|
912
|
+
});
|
|
573
913
|
```
|
|
574
914
|
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
580
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
581
|
-
| `sys.color.bg.alt.soft` | `sys.color.surface.alt.default` |
|
|
582
|
-
| `sys.color.bg.alt.softer` | `sys.color.surface.raised` |
|
|
583
|
-
| `sys.color.bg.alt.strong` | `sys.color.surface.alt.default` (+ overlay) |
|
|
584
|
-
| `sys.color.bg.alt.stronger` | `sys.color.surface.alt.default` (+ overlay) |
|
|
585
|
-
|
|
586
|
-
**Transparent/Overlay Background Tokens:**
|
|
587
|
-
|
|
588
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
589
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
590
|
-
| `sys.color.bg.transparent.default` | `sys.color.surface.transparent` |
|
|
591
|
-
| `sys.color.bg.transparent.strong` | `sys.color.surface.overlay.hover.default` |
|
|
592
|
-
| `sys.color.bg.transparent.stronger` | `sys.color.surface.overlay.pressed.default` |
|
|
593
|
-
| `sys.color.bg.overlay` | `sys.color.surface.overlay.scrim` |
|
|
594
|
-
| `sys.color.bg.translucent` | `sys.color.surface.contrast.default` |
|
|
595
|
-
|
|
596
|
-
**Muted Background Tokens:**
|
|
597
|
-
|
|
598
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
599
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
600
|
-
| `sys.color.bg.muted.default` | `sys.color.accent.muted.default` |
|
|
601
|
-
| `sys.color.bg.muted.soft` | `sys.color.accent.muted.soft` |
|
|
602
|
-
| `sys.color.bg.muted.softer` | `sys.color.accent.muted.soft` |
|
|
603
|
-
| `sys.color.bg.muted.strong` | `sys.color.accent.muted.default` (+ overlay) |
|
|
604
|
-
|
|
605
|
-
**Contrast Background Tokens:**
|
|
606
|
-
|
|
607
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
608
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
609
|
-
| `sys.color.bg.contrast.default` | `sys.color.surface.contrast.default` |
|
|
610
|
-
| `sys.color.bg.contrast.strong` | `sys.color.surface.contrast.strong` (+ overlay)|
|
|
611
|
-
|
|
612
|
-
**Semantic Background Tokens**
|
|
613
|
-
|
|
614
|
-
**Critical/Error Background Tokens:**
|
|
615
|
-
|
|
616
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
617
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
618
|
-
| `sys.color.bg.critical.default` | `sys.color.brand.accent.critical` |
|
|
619
|
-
| `sys.color.bg.critical.strong` | `sys.color.brand.accent.critical` (+ overlay) |
|
|
620
|
-
| `sys.color.bg.critical.stronger` | `sys.color.brand.accent.critical` (+ overlay) |
|
|
621
|
-
| `sys.color.bg.critical.soft` | `base.palette.red.100` (use `sys.color.surface.danger.default`) |
|
|
622
|
-
| `sys.color.bg.critical.softer` | `sys.color.brand.surface.critical.strong` |
|
|
623
|
-
| `sys.color.bg.critical.softest` | `sys.color.brand.surface.critical.default` |
|
|
624
|
-
|
|
625
|
-
**Caution/Warning Background Tokens:**
|
|
626
|
-
|
|
627
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
628
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
629
|
-
| `sys.color.bg.caution.default` | `sys.color.brand.accent.caution` |
|
|
630
|
-
| `sys.color.bg.caution.strong` | `sys.color.brand.accent.caution` (+ overlay) |
|
|
631
|
-
| `sys.color.bg.caution.stronger` | `sys.color.brand.accent.caution` (+ overlay) |
|
|
632
|
-
| `sys.color.bg.caution.soft` | `base.palette.amber.100` (use `sys.color.surface.warning.default`) |
|
|
633
|
-
| `sys.color.bg.caution.softer` | `sys.color.brand.surface.caution.strong` |
|
|
634
|
-
| `sys.color.bg.caution.softest` | `sys.color.brand.surface.caution.default` |
|
|
635
|
-
|
|
636
|
-
**Positive/Success Background Tokens:**
|
|
637
|
-
|
|
638
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
639
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
640
|
-
| `sys.color.bg.positive.default` | `sys.color.brand.accent.positive` |
|
|
641
|
-
| `sys.color.bg.positive.strong` | `sys.color.brand.accent.positive` (+ overlay) |
|
|
642
|
-
| `sys.color.bg.positive.stronger` | `sys.color.brand.accent.positive` (+ overlay) |
|
|
643
|
-
| `sys.color.bg.positive.soft` | `sys.color.brand.surface.positive.default` |
|
|
644
|
-
| `sys.color.bg.positive.softer` | `sys.color.brand.surface.positive.strong` |
|
|
645
|
-
| `sys.color.bg.positive.softest` | `base.palette.green.25` (use `sys.color.surface.success.default`) |
|
|
646
|
-
|
|
647
|
-
**Info Background Tokens:**
|
|
648
|
-
|
|
649
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
650
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
651
|
-
| `sys.color.bg.info.default` | `sys.color.accent.info` |
|
|
652
|
-
| `sys.color.bg.info.strong` | `sys.color.accent.info` (+ overlay) |
|
|
653
|
-
| `sys.color.bg.info.stronger` | `sys.color.accent.info` (+ overlay) |
|
|
654
|
-
| `sys.color.bg.info.soft` | `sys.color.surface.info.default` |
|
|
655
|
-
| `sys.color.bg.info.softer` | `sys.color.surface.info.strong` |
|
|
656
|
-
| `sys.color.bg.info.softest` | `sys.color.surface.info.default` |
|
|
657
|
-
|
|
658
|
-
**AI Background Tokens:**
|
|
659
|
-
|
|
660
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
661
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
662
|
-
| `sys.color.bg.ai.default` | `sys.color.surface.ai.default` |
|
|
663
|
-
| `sys.color.bg.ai.strong` | `sys.color.surface.ai.hover` |
|
|
664
|
-
| `sys.color.bg.ai.stronger` | `sys.color.surface.ai.pressed` |
|
|
665
|
-
| `sys.color.bg.ai.strongest` | `sys.color.accent.ai` |
|
|
915
|
+
```ts
|
|
916
|
+
// After with v4 tokens
|
|
917
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
918
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
666
919
|
|
|
667
|
-
|
|
920
|
+
const customTypeStyles = createStyles({
|
|
921
|
+
fontSize: system.fontSize.body.lg,
|
|
922
|
+
});
|
|
923
|
+
```
|
|
668
924
|
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
|
674
|
-
|
|
|
675
|
-
| `
|
|
676
|
-
| `
|
|
677
|
-
| `
|
|
678
|
-
| `
|
|
679
|
-
| `
|
|
680
|
-
| `
|
|
681
|
-
| `
|
|
682
|
-
| `
|
|
683
|
-
| `
|
|
684
|
-
| `
|
|
685
|
-
| `
|
|
686
|
-
| `
|
|
687
|
-
| `sys.color.text.primary.soft` | `base.palette.blue.400` (use `sys.color.fg.info`) |
|
|
688
|
-
| `sys.color.text.primary.softer` | `base.palette.blue.200` (use `sys.color.fg.info`) |
|
|
689
|
-
| `sys.color.text.caution.default` | `sys.color.fg.contrast.default` (use `sys.color.fg.warning`) |
|
|
690
|
-
| `sys.color.text.caution.strong` | `sys.color.fg.contrast.strong` |
|
|
691
|
-
| `sys.color.text.caution.soft` | `base.palette.amber.400` (use `sys.color.fg.warning`) |
|
|
692
|
-
| `sys.color.text.caution.stronger` | `sys.color.fg.contrast.strong` |
|
|
693
|
-
| `sys.color.text.caution.softer` | `base.palette.amber.200` (use `sys.color.fg.warning`) |
|
|
694
|
-
| `sys.color.text.positive.default` | `sys.color.brand.fg.positive.default` |
|
|
695
|
-
| `sys.color.text.positive.strong` | `sys.color.brand.fg.positive.strong` |
|
|
696
|
-
| `sys.color.text.positive.stronger` | `sys.color.brand.fg.positive.strong` |
|
|
697
|
-
| `sys.color.text.positive.soft` | `base.palette.green.400` (use `sys.color.fg.success`) |
|
|
698
|
-
| `sys.color.text.positive.softer` | `base.palette.green.200` (use `sys.color.fg.success`) |
|
|
699
|
-
| `sys.color.text.info.default` | `sys.color.fg.info.default` |
|
|
700
|
-
| `sys.color.text.info.strong` | `sys.color.fg.info.strong` |
|
|
701
|
-
| `sys.color.text.info.stronger` | `sys.color.fg.info.strong` |
|
|
702
|
-
| `sys.color.text.info.soft` | `base.palette.blue.400` (use `sys.color.fg.info.default`) |
|
|
703
|
-
| `sys.color.text.info.softer` | `base.palette.blue.200` (use `sys.color.fg.info`) |
|
|
704
|
-
| `sys.color.text.ai` | `base.palette.blue.950` (use `sys.color.fg.ai`) |
|
|
705
|
-
|
|
706
|
-
**Icon Tokens (deprecated - use `sys.color.fg.*` instead):**
|
|
707
|
-
|
|
708
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
709
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
710
|
-
| `sys.color.icon.default` | `sys.color.fg.default` |
|
|
711
|
-
| `sys.color.icon.soft` | `sys.color.fg.muted.default` |
|
|
712
|
-
| `sys.color.icon.strong` | `sys.color.fg.muted.strong` |
|
|
713
|
-
| `sys.color.icon.inverse` | `base.palette.neutral.0` (use `sys.color.fg.inverse`) |
|
|
714
|
-
| `sys.color.icon.disabled` | `base.palette.slate.400` (use `sys.color.fg.disabled`) |
|
|
715
|
-
| `sys.color.icon.primary.default` | `sys.color.brand.fg.primary.default` |
|
|
716
|
-
| `sys.color.icon.primary.strong` | `sys.color.brand.fg.primary.strong` |
|
|
717
|
-
| `sys.color.icon.primary.stronger` | `sys.color.brand.fg.primary.strong` |
|
|
718
|
-
| `sys.color.icon.primary.soft` | `base.palette.blue.400` (use `sys.color.fg.info`) |
|
|
719
|
-
| `sys.color.icon.primary.softer` | `base.palette.blue.200` (use `sys.color.fg.info`) |
|
|
720
|
-
| `sys.color.icon.critical.default` | `sys.color.brand.fg.critical.default` |
|
|
721
|
-
| `sys.color.icon.critical.strong` | `sys.color.brand.fg.critical.strong` |
|
|
722
|
-
| `sys.color.icon.critical.stronger` | `base.palette.red.800` (use `sys.color.fg.danger.strong`) |
|
|
723
|
-
| `sys.color.icon.critical.soft` | `base.palette.red.400` (use `sys.color.fg.danger`) |
|
|
724
|
-
| `sys.color.icon.critical.softer` | `base.palette.red.200` (use `sys.color.fg.danger`) |
|
|
725
|
-
| `sys.color.icon.caution.default` | `sys.color.fg.contrast.default` |
|
|
726
|
-
| `sys.color.icon.caution.strong` | `sys.color.brand.fg.caution.default` |
|
|
727
|
-
| `sys.color.icon.caution.stronger` | `sys.color.brand.fg.caution.strong` |
|
|
728
|
-
| `sys.color.icon.caution.soft` | `sys.color.brand.fg.caution.default` (use `sys.color.fg.warning`) |
|
|
729
|
-
| `sys.color.icon.caution.softer` | `base.palette.amber.500` (use `sys.color.fg.warning`) |
|
|
730
|
-
| `sys.color.icon.positive.default` | `sys.color.brand.fg.positive.default` |
|
|
731
|
-
| `sys.color.icon.positive.strong` | `sys.color.brand.fg.positive.strong` |
|
|
732
|
-
| `sys.color.icon.positive.stronger` | `sys.color.brand.fg.positive.strong` |
|
|
733
|
-
| `sys.color.icon.positive.soft` | `base.palette.green.400` (use `sys.color.fg.success`) |
|
|
734
|
-
| `sys.color.icon.positive.softer` | `base.palette.green.200` (use `sys.color.fg.success`) |
|
|
735
|
-
| `sys.color.icon.info.default` | `sys.color.fg.info.default` |
|
|
736
|
-
| `sys.color.icon.info.strong` | `sys.color.fg.info.strong` |
|
|
737
|
-
| `sys.color.icon.info.stronger` | `base.palette.blue.800` (use `sys.color.fg.info.strong`) |
|
|
738
|
-
|
|
739
|
-
**Foreground Tokens:**
|
|
740
|
-
|
|
741
|
-
| Deprecated Token | Points To (New Token Value) |
|
|
742
|
-
| ------------------------------------- | ----------------------------------------------- |
|
|
743
|
-
| `sys.color.fg.critical.default` | `sys.color.brand.fg.critical.default` |
|
|
744
|
-
| `sys.color.fg.critical.strong` | `sys.color.brand.fg.critical.strong` |
|
|
745
|
-
| `sys.color.fg.critical.stronger` | `base.palette.red.800` (use `sys.color.fg.danger` tokens) |
|
|
746
|
-
| `sys.color.fg.critical.soft` | `base.palette.red.400` (use `sys.color.fg.danger`) |
|
|
747
|
-
| `sys.color.fg.critical.softer` | `base.palette.red.200` (use `sys.color.fg.danger`) |
|
|
748
|
-
| `sys.color.fg.muted.stronger` | `sys.color.fg.muted.strong` |
|
|
749
|
-
| `sys.color.fg.muted.soft` | `base.palette.slate.400` (use `sys.color.fg.muted`) |
|
|
750
|
-
| `sys.color.fg.primary.soft` | `base.palette.blue.400` (use `sys.color.fg.info` or `sys.color.brand.fg.primary`) |
|
|
751
|
-
| `sys.color.fg.primary.softer` | `base.palette.blue.200` (use `sys.color.fg.info` or `sys.color.brand.fg.primary`) |
|
|
752
|
-
| `sys.color.fg.primary.stronger` | `sys.color.brand.fg.primary.strong` |
|
|
753
|
-
| `sys.color.fg.caution.default` | `sys.color.brand.fg.caution.default` |
|
|
754
|
-
| `sys.color.fg.caution.strong` | `sys.color.brand.fg.caution.strong` |
|
|
755
|
-
| `sys.color.fg.caution.soft` | `base.palette.amber.700` (use `sys.color.fg.warning`) |
|
|
756
|
-
| `sys.color.fg.caution.stronger` | `base.palette.amber.975` (use `sys.color.fg.warning.strong`) |
|
|
757
|
-
| `sys.color.fg.caution.softer` | `base.palette.amber.500` (use `sys.color.fg.warning`) |
|
|
758
|
-
| `sys.color.fg.info.softer` | `sys.color.fg.ai` |
|
|
759
|
-
| `sys.color.fg.info.soft` | `base.palette.blue.400` (use `sys.color.fg.info`) |
|
|
760
|
-
| `sys.color.fg.info.stronger` | `sys.color.fg.info.strong` |
|
|
761
|
-
| `sys.color.fg.positive.default` | `sys.color.fg.success.default` (use `sys.color.brand.fg.positive.default`) |
|
|
762
|
-
| `sys.color.fg.positive.softer` | `base.palette.green.200` (use `sys.color.fg.success`) |
|
|
763
|
-
| `sys.color.fg.positive.soft` | `base.palette.green.400` (use `sys.color.fg.success`) |
|
|
764
|
-
| `sys.color.fg.positive.strong` | `sys.color.brand.fg.positive.strong` |
|
|
765
|
-
| `sys.color.fg.positive.stronger` | `sys.color.brand.fg.positive.strong` |
|
|
766
|
-
|
|
767
|
-
#### Border Color Tokens
|
|
768
|
-
|
|
769
|
-
**Input Border Tokens:**
|
|
770
|
-
|
|
771
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
772
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
773
|
-
| `sys.color.border.input.disabled` | `sys.opacity.disabled` | Use `sys.color.fg.disabled` instead |
|
|
774
|
-
| `sys.color.border.input.strong` | `sys.color.border.input.hover` | Use `sys.color.border.input.hover` instead |
|
|
775
|
-
| `sys.color.border.input.inverse` | `sys.color.border.inverse` | Use `sys.color.border.inverse` instead |
|
|
776
|
-
|
|
777
|
-
**Inverse Border Tokens:**
|
|
778
|
-
|
|
779
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
780
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
781
|
-
| `sys.color.border.inverse` | `base.palette.neutral.0` | Use `sys.color.border.inverse` instead |
|
|
782
|
-
|
|
783
|
-
**Contrast Border Tokens:**
|
|
784
|
-
|
|
785
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
786
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
787
|
-
| `sys.color.border.contrast.default` | `sys.color.border.contrast.default` | Use `sys.color.border.contrast.default` instead |
|
|
788
|
-
| `sys.color.border.contrast.strong` | `sys.color.border.contrast.default` | Use `sys.color.border.contrast.default` instead |
|
|
789
|
-
|
|
790
|
-
**Semantic Border Tokens:**
|
|
791
|
-
|
|
792
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
793
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
794
|
-
| `sys.color.border.primary.default` | `sys.color.brand.border.primary` | Use `sys.color.brand.border.primary` instead |
|
|
795
|
-
| `sys.color.border.critical.default` | `sys.color.brand.border.critical` | Use `sys.color.brand.border.critical` instead |
|
|
796
|
-
| `sys.color.border.caution.default` | `sys.color.brand.focus.caution.inner` | Use `sys.color.brand.focus.caution.inner` instead |
|
|
797
|
-
| `sys.color.border.caution.strong` | `sys.color.brand.focus.caution.outer` | Use `sys.color.brand.focus.caution.outer` instead |
|
|
798
|
-
| `sys.color.border.info.default` | `sys.color.border.info.default` | Use `sys.color.border.info.default` instead |
|
|
799
|
-
| `sys.color.border.ai` | `sys.color.accent.ai` | Use `sys.color.accent.ai` instead |
|
|
800
|
-
|
|
801
|
-
**Utility Border Tokens:**
|
|
802
|
-
|
|
803
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
804
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
805
|
-
| `sys.color.border.divider` | `sys.color.border.default` | Use `sys.color.border.default` instead |
|
|
806
|
-
| `sys.color.border.container` | `sys.color.border.strong` | Use `sys.color.border.default` or `sys.color.border.strong` |
|
|
807
|
-
|
|
808
|
-
#### Static Color Tokens
|
|
809
|
-
|
|
810
|
-
Static color tokens have been deprecated in favor of using base palette tokens directly. All static tokens point to their corresponding `base.palette.*` values.
|
|
811
|
-
|
|
812
|
-
**Static Amber/Orange/Gold Tokens:**
|
|
813
|
-
|
|
814
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
815
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
816
|
-
| `sys.color.static.amber.default` | `sys.color.accent.warning` | Use `sys.color.accent.warning` instead |
|
|
817
|
-
| `sys.color.static.amber.softest` | `sys.color.surface.warning.default` | Use `sys.color.accent.warning` instead |
|
|
818
|
-
| `sys.color.static.amber.soft` | `sys.color.surface.warning.strong` | Use `sys.color.surface.warning.strong` instead |
|
|
819
|
-
| `sys.color.static.amber.softer` | `base.palette.amber.50` | Use `base.palette.amber.*` tokens directly |
|
|
820
|
-
| `sys.color.static.amber.strong` | `sys.color.accent.warning` | Use `sys.color.accent.warning` instead |
|
|
821
|
-
| `sys.color.static.amber.stronger` | `sys.color.accent.warning` | Use `sys.color.accent.warning` instead |
|
|
822
|
-
| `sys.color.static.amber.strongest` | `sys.color.fg.warning.strong` | Use `sys.color.fg.warning.strong` instead |
|
|
823
|
-
| `sys.color.static.orange.default` | `base.palette.amber.400` | Prefer `sys.color.bg.caution.default` if used as background |
|
|
824
|
-
| `sys.color.static.orange.soft` | `base.palette.amber.100` | Prefer `sys.color.bg.caution.soft` if used as background |
|
|
825
|
-
| `sys.color.static.orange.strong` | `base.palette.amber.500` | Prefer `sys.color.bg.caution.strong` if used as background |
|
|
826
|
-
| `sys.color.static.gold.stronger` | `base.palette.amber.600` | Prefer `sys.color.bg.caution.stronger` if used as background |
|
|
827
|
-
|
|
828
|
-
**Static Blue Tokens:**
|
|
829
|
-
|
|
830
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
831
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
832
|
-
| `sys.color.static.blue.default` | `sys.color.accent.info` | Use `sys.color.accent.info` instead |
|
|
833
|
-
| `sys.color.static.blue.softest` | `base.palette.blue.25` | Use `base.palette.blue.*` tokens directly |
|
|
834
|
-
| `sys.color.static.blue.softer` | `base.palette.blue.50` | Use `base.palette.blue.*` tokens directly |
|
|
835
|
-
| `sys.color.static.blue.soft` | `base.palette.blue.100` | Use `base.palette.blue.*` tokens directly |
|
|
836
|
-
| `sys.color.static.blue.strong` | `base.palette.blue.700` | Use `base.palette.blue.*` tokens directly |
|
|
837
|
-
| `sys.color.static.blue.stronger` | `base.palette.blue.800` | Use `base.palette.blue.*` tokens directly |
|
|
838
|
-
| `sys.color.static.blue.strongest` | `base.palette.blue.950` | Use `base.palette.blue.*` tokens directly |
|
|
839
|
-
|
|
840
|
-
**Static Green Tokens:**
|
|
841
|
-
|
|
842
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
843
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
844
|
-
| `sys.color.static.green.default` | `base.palette.green.600` | Use `base.palette.green.*` tokens directly |
|
|
845
|
-
| `sys.color.static.green.softest` | `base.palette.green.25` | Use `base.palette.green.*` tokens directly |
|
|
846
|
-
| `sys.color.static.green.softer` | `base.palette.green.50` | Use `base.palette.green.*` tokens directly |
|
|
847
|
-
| `sys.color.static.green.soft` | `base.palette.green.100` | Use `base.palette.green.*` tokens directly |
|
|
848
|
-
| `sys.color.static.green.strong` | `base.palette.green.700` | Use `base.palette.green.*` tokens directly |
|
|
849
|
-
| `sys.color.static.green.stronger` | `base.palette.green.800` | Use `base.palette.green.*` tokens directly |
|
|
850
|
-
| `sys.color.static.green.strongest` | `base.palette.green.950` | Use `base.palette.green.*` tokens directly |
|
|
851
|
-
|
|
852
|
-
**Static Red Tokens:**
|
|
853
|
-
|
|
854
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
855
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
856
|
-
| `sys.color.static.red.default` | `base.palette.red.600` | Use `base.palette.red.*` tokens directly |
|
|
857
|
-
| `sys.color.static.red.softest` | `base.palette.red.25` | Use `base.palette.red.*` tokens directly |
|
|
858
|
-
| `sys.color.static.red.softer` | `base.palette.red.50` | Use `base.palette.red.*` tokens directly |
|
|
859
|
-
| `sys.color.static.red.soft` | `base.palette.red.100` | Use `base.palette.red.*` tokens directly |
|
|
860
|
-
| `sys.color.static.red.strong` | `base.palette.red.700` | Use `base.palette.red.*` tokens directly |
|
|
861
|
-
| `sys.color.static.red.stronger` | `base.palette.red.800` | Use `base.palette.red.*` tokens directly |
|
|
862
|
-
| `sys.color.static.red.strongest` | `base.palette.red.950` | Use `base.palette.red.*` tokens directly |
|
|
863
|
-
|
|
864
|
-
**Static Gray/Slate Tokens:**
|
|
865
|
-
|
|
866
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
867
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
868
|
-
| `sys.color.static.gray.default` | `base.palette.slate.600` | Use `base.palette.slate.*` tokens directly |
|
|
869
|
-
| `sys.color.static.gray.softest` | `base.palette.slate.50` | Use `base.palette.slate.*` tokens directly |
|
|
870
|
-
| `sys.color.static.gray.softer` | `base.palette.slate.100` | Use `base.palette.slate.*` tokens directly |
|
|
871
|
-
| `sys.color.static.gray.soft` | `base.palette.slate.200` | Use `base.palette.slate.*` tokens directly |
|
|
872
|
-
| `sys.color.static.gray.strong` | `base.palette.slate.700` | Use `base.palette.slate.*` tokens directly |
|
|
873
|
-
| `sys.color.static.gray.stronger` | `base.palette.slate.800` | Use `base.palette.slate.*` tokens directly |
|
|
874
|
-
| `sys.color.static.gray.strongest` | `base.palette.slate.950` | Use `base.palette.slate.*` tokens directly |
|
|
875
|
-
|
|
876
|
-
**Static Neutral Tokens:**
|
|
877
|
-
|
|
878
|
-
| Deprecated Token | Points To (New Token Value) | Notes |
|
|
879
|
-
| ------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
|
|
880
|
-
| `sys.color.static.white` | `base.palette.neutral.0` | Use `base.palette.neutral.0` directly |
|
|
881
|
-
| `sys.color.static.black` | `base.palette.neutral.1000` | Use `base.palette.neutral.1000` directly |
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
### Deprecated Shadow Color Tokens
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
| Deprecated Token | Replacement | CSS Variable | Comment |
|
|
889
|
-
| ---------------- | ------------------------ | ------------------------------------ | ------------------- |
|
|
890
|
-
| shadow.1 | sys.color.shadow.base | `--cnvs-sys-color-shadow-base` | First shadow color |
|
|
891
|
-
| shadow.2 | sys.color.shadow.ambient | `--cnvs-sys-color-shadow-ambient` | Second shadow color |
|
|
892
|
-
| shadow.default | sys.color.shadow.base | `--cnvs-sys-color-shadow-base` | Main shadow color |
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
> **Note:**
|
|
896
|
-
> `shadow.1`, `shadow.2`, and `shadow.default` are deprecated.
|
|
897
|
-
> Use `sys.color.shadow.base` and `sys.color.shadow.ambient` instead.
|
|
898
|
-
|
|
899
|
-
#### Typography Tokens
|
|
900
|
-
|
|
901
|
-
Typography tokens have been updated to use semantic size names (`sm`, `md`, `lg`) instead of descriptive names (`small`, `medium`, `large`).
|
|
902
|
-
|
|
903
|
-
**Deprecated Font-Size Tokens:**
|
|
904
|
-
|
|
905
|
-
| Deprecated Token | Replacement Token | Notes |
|
|
906
|
-
| ------------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
|
|
907
|
-
| `sys.font-size.subtext.small` | `sys.font-size.subtext.sm` | Use semantic size name `sm` instead of `small` |
|
|
908
|
-
| `sys.font-size.subtext.medium` | `sys.font-size.subtext.md` | Use semantic size name `md` instead of `medium` |
|
|
909
|
-
| `sys.font-size.subtext.large` | `sys.font-size.subtext.lg` | Use semantic size name `lg` instead of `large` |
|
|
910
|
-
| `sys.font-size.body.small` | `sys.font-size.body.sm` | Use semantic size name `sm` instead of `small` |
|
|
911
|
-
| `sys.font-size.body.medium` | `sys.font-size.body.md` | Use semantic size name `md` instead of `medium` |
|
|
912
|
-
| `sys.font-size.body.large` | `sys.font-size.body.lg` | Use semantic size name `lg` instead of `large` |
|
|
913
|
-
| `sys.font-size.heading.small` | `sys.font-size.heading.sm` | Use semantic size name `sm` instead of `small` |
|
|
914
|
-
| `sys.font-size.heading.medium` | `sys.font-size.heading.md` | Use semantic size name `md` instead of `medium` |
|
|
915
|
-
| `sys.font-size.heading.large` | `sys.font-size.heading.lg` | Use semantic size name `lg` instead of `large` |
|
|
916
|
-
| `sys.font-size.title.small` | `sys.font-size.title.sm` | Use semantic size name `sm` instead of `small` |
|
|
917
|
-
| `sys.font-size.title.medium` | `sys.font-size.title.md` | Use semantic size name `md` instead of `medium` |
|
|
918
|
-
| `sys.font-size.title.large` | `sys.font-size.title.lg` | Use semantic size name `lg` instead of `large` |
|
|
919
|
-
|
|
920
|
-
**Deprecated Line-Height Tokens:**
|
|
921
|
-
|
|
922
|
-
| Deprecated Token | Replacement Token | Notes |
|
|
923
|
-
| ------------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
|
|
924
|
-
| `sys.line-height.subtext.small` | `sys.line-height.subtext.sm` | Use semantic size name `sm` instead of `small` |
|
|
925
|
-
| `sys.line-height.subtext.medium` | `sys.line-height.subtext.md` | Use semantic size name `md` instead of `medium` |
|
|
926
|
-
| `sys.line-height.subtext.large` | `sys.line-height.subtext.lg` | Use semantic size name `lg` instead of `large` |
|
|
927
|
-
| `sys.line-height.body.small` | `sys.line-height.body.sm` | Use semantic size name `sm` instead of `small` |
|
|
928
|
-
| `sys.line-height.body.medium` | `sys.line-height.body.md` | Use semantic size name `md` instead of `medium` |
|
|
929
|
-
| `sys.line-height.body.large` | `sys.line-height.body.lg` | Use semantic size name `lg` instead of `large` |
|
|
930
|
-
| `sys.line-height.heading.small` | `sys.line-height.heading.sm` | Use semantic size name `sm` instead of `small` |
|
|
931
|
-
| `sys.line-height.heading.medium` | `sys.line-height.heading.md` | Use semantic size name `md` instead of `medium` |
|
|
932
|
-
| `sys.line-height.heading.large` | `sys.line-height.heading.lg` | Use semantic size name `lg` instead of `large` |
|
|
933
|
-
| `sys.line-height.title.small` | `sys.line-height.title.sm` | Use semantic size name `sm` instead of `small` |
|
|
934
|
-
| `sys.line-height.title.medium` | `sys.line-height.title.md` | Use semantic size name `md` instead of `medium` |
|
|
935
|
-
| `sys.line-height.title.large` | `sys.line-height.title.lg` | Use semantic size name `lg` instead of `large` |
|
|
936
|
-
|
|
937
|
-
**Deprecated Type (Typography) Tokens:**
|
|
938
|
-
|
|
939
|
-
The `sys.type.*` tokens (which combine font-family, font-weight, line-height, font-size, and letter-spacing) have been deprecated. Instead, use the individual token properties directly:
|
|
940
|
-
|
|
941
|
-
| Deprecated Token | Replacement | Notes |
|
|
942
|
-
| ------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
943
|
-
| `sys.type.subtext.small` | Use `sys.font-size.subtext.sm`, `sys.line-height.subtext.sm`, etc. | Use individual typography tokens instead of composite token |
|
|
944
|
-
| `sys.type.subtext.medium` | Use `sys.font-size.subtext.md`, `sys.line-height.subtext.md`, etc. | Use individual typography tokens instead of composite token |
|
|
945
|
-
| `sys.type.subtext.large` | Use `sys.font-size.subtext.lg`, `sys.line-height.subtext.lg`, etc. | Use individual typography tokens instead of composite token |
|
|
946
|
-
| `sys.type.body.small` | Use `sys.font-size.body.sm`, `sys.line-height.body.sm`, etc. | Use individual typography tokens instead of composite token |
|
|
947
|
-
| `sys.type.body.medium` | Use `sys.font-size.body.md`, `sys.line-height.body.md`, etc. | Use individual typography tokens instead of composite token |
|
|
948
|
-
| `sys.type.body.large` | Use `sys.font-size.body.lg`, `sys.line-height.body.lg`, etc. | Use individual typography tokens instead of composite token |
|
|
949
|
-
| `sys.type.heading.small` | Use `sys.font-size.heading.sm`, `sys.line-height.heading.sm`, etc. | Use individual typography tokens instead of composite token |
|
|
950
|
-
| `sys.type.heading.medium` | Use `sys.font-size.heading.md`, `sys.line-height.heading.md`, etc. | Use individual typography tokens instead of composite token |
|
|
951
|
-
| `sys.type.heading.large` | Use `sys.font-size.heading.lg`, `sys.line-height.heading.lg`, etc. | Use individual typography tokens instead of composite token |
|
|
952
|
-
| `sys.type.title.small` | Use `sys.font-size.title.sm`, `sys.line-height.title.sm`, etc. | Use individual typography tokens instead of composite token |
|
|
953
|
-
| `sys.type.title.medium` | Use `sys.font-size.title.md`, `sys.line-height.title.md`, etc. | Use individual typography tokens instead of composite token |
|
|
954
|
-
| `sys.type.title.large` | Use `sys.font-size.title.lg`, `sys.line-height.title.lg`, etc. | Use individual typography tokens instead of composite token |
|
|
925
|
+
#### Line-Height Tokens
|
|
926
|
+
|
|
927
|
+
Pleas refer to the table below when replacing deprecated line-height tokens.
|
|
928
|
+
|
|
929
|
+
| Deprecated Token | Replacement Token |
|
|
930
|
+
| ----------------------------------- | ------------------------------- |
|
|
931
|
+
| `system.line-height.subtext.small` | `system.line-height.subtext.sm` |
|
|
932
|
+
| `system.line-height.subtext.medium` | `system.line-height.subtext.md` |
|
|
933
|
+
| `system.line-height.subtext.large` | `system.line-height.subtext.lg` |
|
|
934
|
+
| `system.line-height.body.small` | `system.line-height.body.sm` |
|
|
935
|
+
| `system.line-height.body.medium` | `system.line-height.body.md` |
|
|
936
|
+
| `system.line-height.body.large` | `system.line-height.body.lg` |
|
|
937
|
+
| `system.line-height.heading.small` | `system.line-height.heading.sm` |
|
|
938
|
+
| `system.line-height.heading.medium` | `system.line-height.heading.md` |
|
|
939
|
+
| `system.line-height.heading.large` | `system.line-height.heading.lg` |
|
|
940
|
+
| `system.line-height.title.small` | `system.line-height.title.sm` |
|
|
941
|
+
| `system.line-height.title.medium` | `system.line-height.title.md` |
|
|
942
|
+
| `system.line-height.title.large` | `system.line-height.title.lg` |
|
|
955
943
|
|
|
956
944
|
---
|
|
957
945
|
|
|
@@ -968,5 +956,4 @@ The `sys.type.*` tokens (which combine font-family, font-weight, line-height, fo
|
|
|
968
956
|
5. **Review common tokens**: Update `focus-outline`, `error-inner`, `alert-inner`, and `alert-outer`
|
|
969
957
|
to their new names
|
|
970
958
|
6. **Update typography tokens**: Replace `small`/`medium`/`large` size names with `sm`/`md`/`lg` for
|
|
971
|
-
font-size and line-height tokens.
|
|
972
|
-
typography property tokens
|
|
959
|
+
font-size and line-height tokens.
|