@atlaskit/tokens 0.7.3 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +77 -0
- package/css/atlassian-dark.css +2 -0
- package/css/atlassian-light.css +2 -0
- package/dist/cjs/artifacts/rename-mapping.js +89 -89
- package/dist/cjs/artifacts/token-default-values.js +2 -0
- package/dist/cjs/artifacts/token-names.js +2 -0
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +216 -178
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +216 -178
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/tokens/atlassian-dark/color/skeleton.js +20 -0
- package/dist/cjs/tokens/atlassian-light/color/skeleton.js +20 -0
- package/dist/cjs/tokens/default/color/skeleton.js +28 -0
- package/dist/cjs/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/rename-mapping.js +89 -89
- package/dist/es2019/artifacts/token-default-values.js +2 -0
- package/dist/es2019/artifacts/token-names.js +2 -0
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +216 -178
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +216 -178
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/tokens/atlassian-dark/color/skeleton.js +13 -0
- package/dist/es2019/tokens/atlassian-light/color/skeleton.js +13 -0
- package/dist/es2019/tokens/default/color/skeleton.js +21 -0
- package/dist/es2019/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/rename-mapping.js +89 -89
- package/dist/esm/artifacts/token-default-values.js +2 -0
- package/dist/esm/artifacts/token-names.js +2 -0
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +216 -178
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +216 -178
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/tokens/atlassian-dark/color/skeleton.js +13 -0
- package/dist/esm/tokens/atlassian-light/color/skeleton.js +13 -0
- package/dist/esm/tokens/default/color/skeleton.js +21 -0
- package/dist/esm/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/token-default-values.d.ts +2 -0
- package/dist/types/artifacts/token-names.d.ts +4 -0
- package/dist/types/artifacts/types-internal.d.ts +1 -1
- package/dist/types/artifacts/types.d.ts +1 -1
- package/dist/types/tokens/atlassian-dark/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/atlassian-light/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/default/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/default/utility/utility.d.ts +10 -10
- package/dist/types/types.d.ts +8 -0
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var color = {
|
|
|
10
10
|
boldBlue: {
|
|
11
11
|
attributes: {
|
|
12
12
|
group: 'paint',
|
|
13
|
-
state: '
|
|
13
|
+
state: 'deleted',
|
|
14
14
|
replacement: 'color.background.accent.blue.bolder',
|
|
15
15
|
description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
16
16
|
}
|
|
@@ -18,7 +18,7 @@ var color = {
|
|
|
18
18
|
boldGreen: {
|
|
19
19
|
attributes: {
|
|
20
20
|
group: 'paint',
|
|
21
|
-
state: '
|
|
21
|
+
state: 'deleted',
|
|
22
22
|
replacement: 'color.background.accent.green.bolder',
|
|
23
23
|
description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
24
24
|
}
|
|
@@ -26,7 +26,7 @@ var color = {
|
|
|
26
26
|
boldOrange: {
|
|
27
27
|
attributes: {
|
|
28
28
|
group: 'paint',
|
|
29
|
-
state: '
|
|
29
|
+
state: 'deleted',
|
|
30
30
|
replacement: 'color.background.accent.orange.bolder',
|
|
31
31
|
description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
32
32
|
}
|
|
@@ -34,7 +34,7 @@ var color = {
|
|
|
34
34
|
boldPurple: {
|
|
35
35
|
attributes: {
|
|
36
36
|
group: 'paint',
|
|
37
|
-
state: '
|
|
37
|
+
state: 'deleted',
|
|
38
38
|
replacement: 'color.background.accent.purple.bolder',
|
|
39
39
|
description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
40
40
|
}
|
|
@@ -42,7 +42,7 @@ var color = {
|
|
|
42
42
|
boldRed: {
|
|
43
43
|
attributes: {
|
|
44
44
|
group: 'paint',
|
|
45
|
-
state: '
|
|
45
|
+
state: 'deleted',
|
|
46
46
|
replacement: 'color.background.accent.red.bolder',
|
|
47
47
|
description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
48
48
|
}
|
|
@@ -50,7 +50,7 @@ var color = {
|
|
|
50
50
|
boldTeal: {
|
|
51
51
|
attributes: {
|
|
52
52
|
group: 'paint',
|
|
53
|
-
state: '
|
|
53
|
+
state: 'deleted',
|
|
54
54
|
replacement: 'color.background.accent.teal.bolder',
|
|
55
55
|
description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
56
56
|
}
|
|
@@ -58,7 +58,7 @@ var color = {
|
|
|
58
58
|
subtleBlue: {
|
|
59
59
|
attributes: {
|
|
60
60
|
group: 'paint',
|
|
61
|
-
state: '
|
|
61
|
+
state: 'deleted',
|
|
62
62
|
replacement: 'color.background.accent.blue.subtler',
|
|
63
63
|
description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
64
64
|
}
|
|
@@ -66,7 +66,7 @@ var color = {
|
|
|
66
66
|
subtleGreen: {
|
|
67
67
|
attributes: {
|
|
68
68
|
group: 'paint',
|
|
69
|
-
state: '
|
|
69
|
+
state: 'deleted',
|
|
70
70
|
replacement: 'color.background.accent.green.subtler',
|
|
71
71
|
description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
72
72
|
}
|
|
@@ -74,7 +74,7 @@ var color = {
|
|
|
74
74
|
subtleMagenta: {
|
|
75
75
|
attributes: {
|
|
76
76
|
group: 'paint',
|
|
77
|
-
state: '
|
|
77
|
+
state: 'deleted',
|
|
78
78
|
replacement: 'color.background.accent.magenta.subtler',
|
|
79
79
|
description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
80
80
|
}
|
|
@@ -82,7 +82,7 @@ var color = {
|
|
|
82
82
|
subtleOrange: {
|
|
83
83
|
attributes: {
|
|
84
84
|
group: 'paint',
|
|
85
|
-
state: '
|
|
85
|
+
state: 'deleted',
|
|
86
86
|
replacement: 'color.background.accent.orange.subtler',
|
|
87
87
|
description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
88
88
|
}
|
|
@@ -90,7 +90,7 @@ var color = {
|
|
|
90
90
|
subtlePurple: {
|
|
91
91
|
attributes: {
|
|
92
92
|
group: 'paint',
|
|
93
|
-
state: '
|
|
93
|
+
state: 'deleted',
|
|
94
94
|
replacement: 'color.background.accent.purple.subtler',
|
|
95
95
|
description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
96
96
|
}
|
|
@@ -98,7 +98,7 @@ var color = {
|
|
|
98
98
|
subtleRed: {
|
|
99
99
|
attributes: {
|
|
100
100
|
group: 'paint',
|
|
101
|
-
state: '
|
|
101
|
+
state: 'deleted',
|
|
102
102
|
replacement: 'color.background.accent.red.subtler',
|
|
103
103
|
description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
104
104
|
}
|
|
@@ -106,7 +106,7 @@ var color = {
|
|
|
106
106
|
subtleTeal: {
|
|
107
107
|
attributes: {
|
|
108
108
|
group: 'paint',
|
|
109
|
-
state: '
|
|
109
|
+
state: 'deleted',
|
|
110
110
|
replacement: 'color.background.accent.teal.subtler',
|
|
111
111
|
description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
112
112
|
}
|
|
@@ -118,7 +118,7 @@ var color = {
|
|
|
118
118
|
'[default]': {
|
|
119
119
|
attributes: {
|
|
120
120
|
group: 'paint',
|
|
121
|
-
state: '
|
|
121
|
+
state: 'deleted',
|
|
122
122
|
replacement: 'color.background.accent.blue.subtler',
|
|
123
123
|
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
|
|
124
124
|
}
|
|
@@ -126,7 +126,7 @@ var color = {
|
|
|
126
126
|
bold: {
|
|
127
127
|
attributes: {
|
|
128
128
|
group: 'paint',
|
|
129
|
-
state: '
|
|
129
|
+
state: 'deleted',
|
|
130
130
|
replacement: 'color.background.accent.blue.subtle',
|
|
131
131
|
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
132
132
|
}
|
|
@@ -136,7 +136,7 @@ var color = {
|
|
|
136
136
|
'[default]': {
|
|
137
137
|
attributes: {
|
|
138
138
|
group: 'paint',
|
|
139
|
-
state: '
|
|
139
|
+
state: 'deleted',
|
|
140
140
|
replacement: 'color.background.accent.red.subtler',
|
|
141
141
|
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
142
142
|
}
|
|
@@ -144,7 +144,7 @@ var color = {
|
|
|
144
144
|
bold: {
|
|
145
145
|
attributes: {
|
|
146
146
|
group: 'paint',
|
|
147
|
-
state: '
|
|
147
|
+
state: 'deleted',
|
|
148
148
|
replacement: 'color.background.accent.red.subtle',
|
|
149
149
|
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
150
150
|
}
|
|
@@ -154,7 +154,7 @@ var color = {
|
|
|
154
154
|
'[default]': {
|
|
155
155
|
attributes: {
|
|
156
156
|
group: 'paint',
|
|
157
|
-
state: '
|
|
157
|
+
state: 'deleted',
|
|
158
158
|
replacement: 'color.background.accent.orange.subtler',
|
|
159
159
|
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
160
160
|
}
|
|
@@ -162,7 +162,7 @@ var color = {
|
|
|
162
162
|
bold: {
|
|
163
163
|
attributes: {
|
|
164
164
|
group: 'paint',
|
|
165
|
-
state: '
|
|
165
|
+
state: 'deleted',
|
|
166
166
|
replacement: 'color.background.accent.orange.subtle',
|
|
167
167
|
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
168
168
|
}
|
|
@@ -172,7 +172,7 @@ var color = {
|
|
|
172
172
|
'[default]': {
|
|
173
173
|
attributes: {
|
|
174
174
|
group: 'paint',
|
|
175
|
-
state: '
|
|
175
|
+
state: 'deleted',
|
|
176
176
|
replacement: 'color.background.accent.yellow.subtler',
|
|
177
177
|
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
178
178
|
}
|
|
@@ -180,7 +180,7 @@ var color = {
|
|
|
180
180
|
bold: {
|
|
181
181
|
attributes: {
|
|
182
182
|
group: 'paint',
|
|
183
|
-
state: '
|
|
183
|
+
state: 'deleted',
|
|
184
184
|
replacement: 'color.background.accent.yellow.subtle',
|
|
185
185
|
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
186
186
|
}
|
|
@@ -190,7 +190,7 @@ var color = {
|
|
|
190
190
|
'[default]': {
|
|
191
191
|
attributes: {
|
|
192
192
|
group: 'paint',
|
|
193
|
-
state: '
|
|
193
|
+
state: 'deleted',
|
|
194
194
|
replacement: 'color.background.accent.green.subtler',
|
|
195
195
|
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
196
196
|
}
|
|
@@ -198,7 +198,7 @@ var color = {
|
|
|
198
198
|
bold: {
|
|
199
199
|
attributes: {
|
|
200
200
|
group: 'paint',
|
|
201
|
-
state: '
|
|
201
|
+
state: 'deleted',
|
|
202
202
|
replacement: 'color.background.accent.green.subtle',
|
|
203
203
|
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
204
204
|
}
|
|
@@ -208,7 +208,7 @@ var color = {
|
|
|
208
208
|
'[default]': {
|
|
209
209
|
attributes: {
|
|
210
210
|
group: 'paint',
|
|
211
|
-
state: '
|
|
211
|
+
state: 'deleted',
|
|
212
212
|
replacement: 'color.background.accent.teal.subtler',
|
|
213
213
|
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
214
214
|
}
|
|
@@ -216,7 +216,7 @@ var color = {
|
|
|
216
216
|
bold: {
|
|
217
217
|
attributes: {
|
|
218
218
|
group: 'paint',
|
|
219
|
-
state: '
|
|
219
|
+
state: 'deleted',
|
|
220
220
|
replacement: 'color.background.accent.teal.subtle',
|
|
221
221
|
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
222
222
|
}
|
|
@@ -226,7 +226,7 @@ var color = {
|
|
|
226
226
|
'[default]': {
|
|
227
227
|
attributes: {
|
|
228
228
|
group: 'paint',
|
|
229
|
-
state: '
|
|
229
|
+
state: 'deleted',
|
|
230
230
|
replacement: 'color.background.accent.purple.subtler',
|
|
231
231
|
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
232
232
|
}
|
|
@@ -234,7 +234,7 @@ var color = {
|
|
|
234
234
|
bold: {
|
|
235
235
|
attributes: {
|
|
236
236
|
group: 'paint',
|
|
237
|
-
state: '
|
|
237
|
+
state: 'deleted',
|
|
238
238
|
replacement: 'color.background.accent.purple.subtle',
|
|
239
239
|
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
240
240
|
}
|
|
@@ -244,7 +244,7 @@ var color = {
|
|
|
244
244
|
'[default]': {
|
|
245
245
|
attributes: {
|
|
246
246
|
group: 'paint',
|
|
247
|
-
state: '
|
|
247
|
+
state: 'deleted',
|
|
248
248
|
replacement: 'color.background.accent.magenta.subtler',
|
|
249
249
|
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
250
250
|
}
|
|
@@ -252,7 +252,7 @@ var color = {
|
|
|
252
252
|
bold: {
|
|
253
253
|
attributes: {
|
|
254
254
|
group: 'paint',
|
|
255
|
-
state: '
|
|
255
|
+
state: 'deleted',
|
|
256
256
|
replacement: 'color.background.accent.magenta.subtle',
|
|
257
257
|
description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
258
258
|
}
|
|
@@ -262,7 +262,7 @@ var color = {
|
|
|
262
262
|
blanket: {
|
|
263
263
|
attributes: {
|
|
264
264
|
group: 'paint',
|
|
265
|
-
state: '
|
|
265
|
+
state: 'deleted',
|
|
266
266
|
replacement: 'color.blanket.[default]',
|
|
267
267
|
description: 'Use for the screen overlay that appears with modal dialogs'
|
|
268
268
|
}
|
|
@@ -299,7 +299,7 @@ var color = {
|
|
|
299
299
|
hover: {
|
|
300
300
|
attributes: {
|
|
301
301
|
group: 'paint',
|
|
302
|
-
state: '
|
|
302
|
+
state: 'deleted',
|
|
303
303
|
replacement: 'color.background.brand.bold.hovered',
|
|
304
304
|
description: 'Hover state of background.boldBrand'
|
|
305
305
|
}
|
|
@@ -307,7 +307,7 @@ var color = {
|
|
|
307
307
|
pressed: {
|
|
308
308
|
attributes: {
|
|
309
309
|
group: 'paint',
|
|
310
|
-
state: '
|
|
310
|
+
state: 'deleted',
|
|
311
311
|
replacement: 'color.background.brand.bold.pressed',
|
|
312
312
|
description: 'Pressed state of background.boldBrand'
|
|
313
313
|
}
|
|
@@ -315,7 +315,7 @@ var color = {
|
|
|
315
315
|
resting: {
|
|
316
316
|
attributes: {
|
|
317
317
|
group: 'paint',
|
|
318
|
-
state: '
|
|
318
|
+
state: 'deleted',
|
|
319
319
|
replacement: 'color.background.brand.bold.[default]',
|
|
320
320
|
description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
|
|
321
321
|
}
|
|
@@ -325,7 +325,7 @@ var color = {
|
|
|
325
325
|
hover: {
|
|
326
326
|
attributes: {
|
|
327
327
|
group: 'paint',
|
|
328
|
-
state: '
|
|
328
|
+
state: 'deleted',
|
|
329
329
|
replacement: 'color.background.danger.bold.hovered',
|
|
330
330
|
description: 'Hover state of background.boldDanger'
|
|
331
331
|
}
|
|
@@ -333,7 +333,7 @@ var color = {
|
|
|
333
333
|
pressed: {
|
|
334
334
|
attributes: {
|
|
335
335
|
group: 'paint',
|
|
336
|
-
state: '
|
|
336
|
+
state: 'deleted',
|
|
337
337
|
replacement: 'color.background.danger.bold.pressed',
|
|
338
338
|
description: 'Pressed state of background.boldDanger'
|
|
339
339
|
}
|
|
@@ -341,7 +341,7 @@ var color = {
|
|
|
341
341
|
resting: {
|
|
342
342
|
attributes: {
|
|
343
343
|
group: 'paint',
|
|
344
|
-
state: '
|
|
344
|
+
state: 'deleted',
|
|
345
345
|
replacement: 'color.background.danger.bold.[default]',
|
|
346
346
|
description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
|
|
347
347
|
}
|
|
@@ -351,7 +351,7 @@ var color = {
|
|
|
351
351
|
hover: {
|
|
352
352
|
attributes: {
|
|
353
353
|
group: 'paint',
|
|
354
|
-
state: '
|
|
354
|
+
state: 'deleted',
|
|
355
355
|
replacement: 'color.background.discovery.bold.hovered',
|
|
356
356
|
description: 'Hover state of background.boldDiscovery'
|
|
357
357
|
}
|
|
@@ -359,7 +359,7 @@ var color = {
|
|
|
359
359
|
pressed: {
|
|
360
360
|
attributes: {
|
|
361
361
|
group: 'paint',
|
|
362
|
-
state: '
|
|
362
|
+
state: 'deleted',
|
|
363
363
|
replacement: 'color.background.discovery.bold.pressed',
|
|
364
364
|
description: 'Pressed state of background.boldDiscovery'
|
|
365
365
|
}
|
|
@@ -367,7 +367,7 @@ var color = {
|
|
|
367
367
|
resting: {
|
|
368
368
|
attributes: {
|
|
369
369
|
group: 'paint',
|
|
370
|
-
state: '
|
|
370
|
+
state: 'deleted',
|
|
371
371
|
replacement: 'color.background.discovery.bold.[default]',
|
|
372
372
|
description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
|
|
373
373
|
}
|
|
@@ -377,7 +377,7 @@ var color = {
|
|
|
377
377
|
hover: {
|
|
378
378
|
attributes: {
|
|
379
379
|
group: 'paint',
|
|
380
|
-
state: '
|
|
380
|
+
state: 'deleted',
|
|
381
381
|
replacement: 'color.background.neutral.bold.hovered',
|
|
382
382
|
description: 'Hover state of background.boldNeutral'
|
|
383
383
|
}
|
|
@@ -385,7 +385,7 @@ var color = {
|
|
|
385
385
|
pressed: {
|
|
386
386
|
attributes: {
|
|
387
387
|
group: 'paint',
|
|
388
|
-
state: '
|
|
388
|
+
state: 'deleted',
|
|
389
389
|
replacement: 'color.background.neutral.bold.pressed',
|
|
390
390
|
description: 'Pressed state of background.boldNeutral'
|
|
391
391
|
}
|
|
@@ -393,7 +393,7 @@ var color = {
|
|
|
393
393
|
resting: {
|
|
394
394
|
attributes: {
|
|
395
395
|
group: 'paint',
|
|
396
|
-
state: '
|
|
396
|
+
state: 'deleted',
|
|
397
397
|
replacement: 'color.background.neutral.bold.[default]',
|
|
398
398
|
description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
|
|
399
399
|
}
|
|
@@ -403,7 +403,7 @@ var color = {
|
|
|
403
403
|
hover: {
|
|
404
404
|
attributes: {
|
|
405
405
|
group: 'paint',
|
|
406
|
-
state: '
|
|
406
|
+
state: 'deleted',
|
|
407
407
|
replacement: 'color.background.success.bold.hovered',
|
|
408
408
|
description: 'Hover state of background.boldSuccess'
|
|
409
409
|
}
|
|
@@ -411,7 +411,7 @@ var color = {
|
|
|
411
411
|
pressed: {
|
|
412
412
|
attributes: {
|
|
413
413
|
group: 'paint',
|
|
414
|
-
state: '
|
|
414
|
+
state: 'deleted',
|
|
415
415
|
replacement: 'color.background.success.bold.pressed',
|
|
416
416
|
description: 'Pressed state of background.boldSuccess'
|
|
417
417
|
}
|
|
@@ -419,7 +419,7 @@ var color = {
|
|
|
419
419
|
resting: {
|
|
420
420
|
attributes: {
|
|
421
421
|
group: 'paint',
|
|
422
|
-
state: '
|
|
422
|
+
state: 'deleted',
|
|
423
423
|
replacement: 'color.background.success.bold.[default]',
|
|
424
424
|
description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
|
|
425
425
|
}
|
|
@@ -429,7 +429,7 @@ var color = {
|
|
|
429
429
|
hover: {
|
|
430
430
|
attributes: {
|
|
431
431
|
group: 'paint',
|
|
432
|
-
state: '
|
|
432
|
+
state: 'deleted',
|
|
433
433
|
replacement: 'color.background.warning.bold.hovered',
|
|
434
434
|
description: 'Hover state of background.boldWarning'
|
|
435
435
|
}
|
|
@@ -437,7 +437,7 @@ var color = {
|
|
|
437
437
|
pressed: {
|
|
438
438
|
attributes: {
|
|
439
439
|
group: 'paint',
|
|
440
|
-
state: '
|
|
440
|
+
state: 'deleted',
|
|
441
441
|
replacement: 'color.background.warning.bold.pressed',
|
|
442
442
|
description: 'Pressed state of background.boldWarning'
|
|
443
443
|
}
|
|
@@ -445,7 +445,7 @@ var color = {
|
|
|
445
445
|
resting: {
|
|
446
446
|
attributes: {
|
|
447
447
|
group: 'paint',
|
|
448
|
-
state: '
|
|
448
|
+
state: 'deleted',
|
|
449
449
|
replacement: 'color.background.warning.bold.[default]',
|
|
450
450
|
description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
|
|
451
451
|
}
|
|
@@ -454,7 +454,7 @@ var color = {
|
|
|
454
454
|
card: {
|
|
455
455
|
attributes: {
|
|
456
456
|
group: 'paint',
|
|
457
|
-
state: '
|
|
457
|
+
state: 'deleted',
|
|
458
458
|
replacement: 'elevation.surface.raised',
|
|
459
459
|
description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
|
|
460
460
|
}
|
|
@@ -462,7 +462,7 @@ var color = {
|
|
|
462
462
|
default: {
|
|
463
463
|
attributes: {
|
|
464
464
|
group: 'paint',
|
|
465
|
-
state: '
|
|
465
|
+
state: 'deleted',
|
|
466
466
|
replacement: 'elevation.surface.[default]',
|
|
467
467
|
description: 'Use as the primary background for the UI'
|
|
468
468
|
}
|
|
@@ -470,7 +470,7 @@ var color = {
|
|
|
470
470
|
overlay: {
|
|
471
471
|
attributes: {
|
|
472
472
|
group: 'paint',
|
|
473
|
-
state: '
|
|
473
|
+
state: 'deleted',
|
|
474
474
|
replacement: 'elevation.surface.overlay',
|
|
475
475
|
description: "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
|
|
476
476
|
}
|
|
@@ -497,7 +497,7 @@ var color = {
|
|
|
497
497
|
pressed: {
|
|
498
498
|
attributes: {
|
|
499
499
|
group: 'paint',
|
|
500
|
-
state: '
|
|
500
|
+
state: 'deleted',
|
|
501
501
|
replacement: 'color.background.input.pressed',
|
|
502
502
|
description: 'Pressed state for background.subtleBorderedNeutral'
|
|
503
503
|
}
|
|
@@ -505,7 +505,7 @@ var color = {
|
|
|
505
505
|
resting: {
|
|
506
506
|
attributes: {
|
|
507
507
|
group: 'paint',
|
|
508
|
-
state: '
|
|
508
|
+
state: 'deleted',
|
|
509
509
|
replacement: 'color.background.input.[default]',
|
|
510
510
|
description: 'Hover state for background.subtleBorderedNeutral'
|
|
511
511
|
}
|
|
@@ -541,7 +541,7 @@ var color = {
|
|
|
541
541
|
hover: {
|
|
542
542
|
attributes: {
|
|
543
543
|
group: 'paint',
|
|
544
|
-
state: '
|
|
544
|
+
state: 'deleted',
|
|
545
545
|
replacement: 'color.background.danger.[default].hovered',
|
|
546
546
|
description: 'Hover state for background.subtleDanger'
|
|
547
547
|
}
|
|
@@ -549,7 +549,7 @@ var color = {
|
|
|
549
549
|
pressed: {
|
|
550
550
|
attributes: {
|
|
551
551
|
group: 'paint',
|
|
552
|
-
state: '
|
|
552
|
+
state: 'deleted',
|
|
553
553
|
replacement: 'color.background.danger.[default].pressed',
|
|
554
554
|
description: 'Pressed state for background.subtleDanger'
|
|
555
555
|
}
|
|
@@ -557,7 +557,7 @@ var color = {
|
|
|
557
557
|
resting: {
|
|
558
558
|
attributes: {
|
|
559
559
|
group: 'paint',
|
|
560
|
-
state: '
|
|
560
|
+
state: 'deleted',
|
|
561
561
|
replacement: 'color.background.danger.[default].[default]',
|
|
562
562
|
description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
|
|
563
563
|
}
|
|
@@ -567,7 +567,7 @@ var color = {
|
|
|
567
567
|
hover: {
|
|
568
568
|
attributes: {
|
|
569
569
|
group: 'paint',
|
|
570
|
-
state: '
|
|
570
|
+
state: 'deleted',
|
|
571
571
|
replacement: 'color.background.discovery.[default].hovered',
|
|
572
572
|
description: 'Hover state for background.subtleDiscovery'
|
|
573
573
|
}
|
|
@@ -575,7 +575,7 @@ var color = {
|
|
|
575
575
|
pressed: {
|
|
576
576
|
attributes: {
|
|
577
577
|
group: 'paint',
|
|
578
|
-
state: '
|
|
578
|
+
state: 'deleted',
|
|
579
579
|
replacement: 'color.background.discovery.[default].pressed',
|
|
580
580
|
description: 'Pressed state for background.subtleDiscovery'
|
|
581
581
|
}
|
|
@@ -583,7 +583,7 @@ var color = {
|
|
|
583
583
|
resting: {
|
|
584
584
|
attributes: {
|
|
585
585
|
group: 'paint',
|
|
586
|
-
state: '
|
|
586
|
+
state: 'deleted',
|
|
587
587
|
replacement: 'color.background.discovery.[default].[default]',
|
|
588
588
|
description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
|
|
589
589
|
}
|
|
@@ -593,7 +593,7 @@ var color = {
|
|
|
593
593
|
hover: {
|
|
594
594
|
attributes: {
|
|
595
595
|
group: 'paint',
|
|
596
|
-
state: '
|
|
596
|
+
state: 'deleted',
|
|
597
597
|
replacement: 'color.background.neutral.[default].hovered',
|
|
598
598
|
description: 'Hover state for background.subtleNeutral'
|
|
599
599
|
}
|
|
@@ -601,7 +601,7 @@ var color = {
|
|
|
601
601
|
pressed: {
|
|
602
602
|
attributes: {
|
|
603
603
|
group: 'paint',
|
|
604
|
-
state: '
|
|
604
|
+
state: 'deleted',
|
|
605
605
|
replacement: 'color.background.neutral.[default].pressed',
|
|
606
606
|
description: 'Pressed state for background.subtleNeutral'
|
|
607
607
|
}
|
|
@@ -609,7 +609,7 @@ var color = {
|
|
|
609
609
|
resting: {
|
|
610
610
|
attributes: {
|
|
611
611
|
group: 'paint',
|
|
612
|
-
state: '
|
|
612
|
+
state: 'deleted',
|
|
613
613
|
replacement: 'color.background.neutral.[default].[default]',
|
|
614
614
|
description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
|
|
615
615
|
}
|
|
@@ -619,7 +619,7 @@ var color = {
|
|
|
619
619
|
hover: {
|
|
620
620
|
attributes: {
|
|
621
621
|
group: 'paint',
|
|
622
|
-
state: '
|
|
622
|
+
state: 'deleted',
|
|
623
623
|
replacement: 'color.background.success.[default].hovered',
|
|
624
624
|
description: 'Hover state for background.subtleSuccess'
|
|
625
625
|
}
|
|
@@ -627,7 +627,7 @@ var color = {
|
|
|
627
627
|
pressed: {
|
|
628
628
|
attributes: {
|
|
629
629
|
group: 'paint',
|
|
630
|
-
state: '
|
|
630
|
+
state: 'deleted',
|
|
631
631
|
replacement: 'color.background.success.[default].pressed',
|
|
632
632
|
description: 'Pressed state for background.subtleSuccess'
|
|
633
633
|
}
|
|
@@ -635,7 +635,7 @@ var color = {
|
|
|
635
635
|
resting: {
|
|
636
636
|
attributes: {
|
|
637
637
|
group: 'paint',
|
|
638
|
-
state: '
|
|
638
|
+
state: 'deleted',
|
|
639
639
|
replacement: 'color.background.success.[default].[default]',
|
|
640
640
|
description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges.'
|
|
641
641
|
}
|
|
@@ -645,7 +645,7 @@ var color = {
|
|
|
645
645
|
hover: {
|
|
646
646
|
attributes: {
|
|
647
647
|
group: 'paint',
|
|
648
|
-
state: '
|
|
648
|
+
state: 'deleted',
|
|
649
649
|
replacement: 'color.background.warning.[default].hovered',
|
|
650
650
|
description: 'Hover state for background.subtleWarning'
|
|
651
651
|
}
|
|
@@ -653,7 +653,7 @@ var color = {
|
|
|
653
653
|
pressed: {
|
|
654
654
|
attributes: {
|
|
655
655
|
group: 'paint',
|
|
656
|
-
state: '
|
|
656
|
+
state: 'deleted',
|
|
657
657
|
replacement: 'color.background.warning.[default].pressed',
|
|
658
658
|
description: 'Pressed state for background.subtleWarning'
|
|
659
659
|
}
|
|
@@ -661,7 +661,7 @@ var color = {
|
|
|
661
661
|
resting: {
|
|
662
662
|
attributes: {
|
|
663
663
|
group: 'paint',
|
|
664
|
-
state: '
|
|
664
|
+
state: 'deleted',
|
|
665
665
|
replacement: 'color.background.warning.[default].[default]',
|
|
666
666
|
description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
|
|
667
667
|
}
|
|
@@ -670,7 +670,7 @@ var color = {
|
|
|
670
670
|
sunken: {
|
|
671
671
|
attributes: {
|
|
672
672
|
group: 'paint',
|
|
673
|
-
state: '
|
|
673
|
+
state: 'deleted',
|
|
674
674
|
replacement: 'elevation.surface.sunken',
|
|
675
675
|
description: 'Use as a secondary background for the UI'
|
|
676
676
|
}
|
|
@@ -679,7 +679,7 @@ var color = {
|
|
|
679
679
|
hover: {
|
|
680
680
|
attributes: {
|
|
681
681
|
group: 'paint',
|
|
682
|
-
state: '
|
|
682
|
+
state: 'deleted',
|
|
683
683
|
replacement: 'color.background.neutral.subtle.hovered',
|
|
684
684
|
description: 'Hover state for UIs that do not have a default background, such as menu items or subtle buttons.'
|
|
685
685
|
}
|
|
@@ -687,7 +687,7 @@ var color = {
|
|
|
687
687
|
pressed: {
|
|
688
688
|
attributes: {
|
|
689
689
|
group: 'paint',
|
|
690
|
-
state: '
|
|
690
|
+
state: 'deleted',
|
|
691
691
|
replacement: 'color.background.neutral.subtle.pressed',
|
|
692
692
|
description: 'Pressed state for UIs that do not have a default background, such as menu items or subtle buttons.'
|
|
693
693
|
}
|
|
@@ -698,7 +698,7 @@ var color = {
|
|
|
698
698
|
highEmphasis: {
|
|
699
699
|
attributes: {
|
|
700
700
|
group: 'paint',
|
|
701
|
-
state: '
|
|
701
|
+
state: 'deleted',
|
|
702
702
|
replacement: 'color.text.[default]',
|
|
703
703
|
description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
|
|
704
704
|
}
|
|
@@ -707,7 +707,7 @@ var color = {
|
|
|
707
707
|
pressed: {
|
|
708
708
|
attributes: {
|
|
709
709
|
group: 'paint',
|
|
710
|
-
state: '
|
|
710
|
+
state: 'deleted',
|
|
711
711
|
replacement: 'color.link.pressed',
|
|
712
712
|
description: 'Use for links in a pressed state'
|
|
713
713
|
}
|
|
@@ -715,7 +715,7 @@ var color = {
|
|
|
715
715
|
resting: {
|
|
716
716
|
attributes: {
|
|
717
717
|
group: 'paint',
|
|
718
|
-
state: '
|
|
718
|
+
state: 'deleted',
|
|
719
719
|
replacement: 'color.link.[default]',
|
|
720
720
|
description: 'Use for links in a resting or hover state. Add an underline for hover states'
|
|
721
721
|
}
|
|
@@ -724,7 +724,7 @@ var color = {
|
|
|
724
724
|
lowEmphasis: {
|
|
725
725
|
attributes: {
|
|
726
726
|
group: 'paint',
|
|
727
|
-
state: '
|
|
727
|
+
state: 'deleted',
|
|
728
728
|
replacement: 'color.text.subtlest',
|
|
729
729
|
description: "\nUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.\n\nUse for icons that are paired with text.medEmphasis text"
|
|
730
730
|
}
|
|
@@ -732,7 +732,7 @@ var color = {
|
|
|
732
732
|
mediumEmphasis: {
|
|
733
733
|
attributes: {
|
|
734
734
|
group: 'paint',
|
|
735
|
-
state: '
|
|
735
|
+
state: 'deleted',
|
|
736
736
|
replacement: 'color.text.subtle',
|
|
737
737
|
description: "\nUse for secondary text, such navigation, subtle button links, input field labels, and all caps subheadings.\n\nUse for icon-only buttons, or icons paired with text.highEmphasis text\n "
|
|
738
738
|
}
|
|
@@ -740,7 +740,7 @@ var color = {
|
|
|
740
740
|
onBold: {
|
|
741
741
|
attributes: {
|
|
742
742
|
group: 'paint',
|
|
743
|
-
state: '
|
|
743
|
+
state: 'deleted',
|
|
744
744
|
replacement: 'color.text.inverse',
|
|
745
745
|
description: 'Use for text and icons when on bold backgrounds'
|
|
746
746
|
}
|
|
@@ -748,7 +748,7 @@ var color = {
|
|
|
748
748
|
onBoldWarning: {
|
|
749
749
|
attributes: {
|
|
750
750
|
group: 'paint',
|
|
751
|
-
state: '
|
|
751
|
+
state: 'deleted',
|
|
752
752
|
replacement: 'color.text.warning.inverse',
|
|
753
753
|
description: 'Use for text and icons when on bold warning backgrounds'
|
|
754
754
|
}
|
|
@@ -758,7 +758,7 @@ var color = {
|
|
|
758
758
|
focus: {
|
|
759
759
|
attributes: {
|
|
760
760
|
group: 'paint',
|
|
761
|
-
state: '
|
|
761
|
+
state: 'deleted',
|
|
762
762
|
replacement: 'color.border.focused',
|
|
763
763
|
description: 'Use for focus rings of elements in a focus state'
|
|
764
764
|
}
|
|
@@ -766,7 +766,7 @@ var color = {
|
|
|
766
766
|
neutral: {
|
|
767
767
|
attributes: {
|
|
768
768
|
group: 'paint',
|
|
769
|
-
state: '
|
|
769
|
+
state: 'deleted',
|
|
770
770
|
replacement: 'color.border.[default]',
|
|
771
771
|
description: 'Use to create borders around UI elements such as text fields, checkboxes, and radio buttons, or to visually group or separate UI elements, such as flat cards or side panel dividers'
|
|
772
772
|
}
|
|
@@ -776,7 +776,7 @@ var color = {
|
|
|
776
776
|
brand: {
|
|
777
777
|
attributes: {
|
|
778
778
|
group: 'paint',
|
|
779
|
-
state: '
|
|
779
|
+
state: 'deleted',
|
|
780
780
|
replacement: 'color.icon.brand',
|
|
781
781
|
description: "\nUse rarely for icons or borders representing brand, in-progress, or information, such as the icons in information sections messages.\n\nAlso use for blue icons or borders when there is no meaning tied to the color, such as file type icons."
|
|
782
782
|
}
|
|
@@ -784,7 +784,7 @@ var color = {
|
|
|
784
784
|
danger: {
|
|
785
785
|
attributes: {
|
|
786
786
|
group: 'paint',
|
|
787
|
-
state: '
|
|
787
|
+
state: 'deleted',
|
|
788
788
|
replacement: 'color.icon.danger',
|
|
789
789
|
description: "\nUse rarely for icons and borders representing critical information, such the icons in error section messages or the borders on invalid text fields.\n\nAlso use for red icons or borders when there is no meaning tied to the color, such as file type icons."
|
|
790
790
|
}
|
|
@@ -792,7 +792,7 @@ var color = {
|
|
|
792
792
|
discovery: {
|
|
793
793
|
attributes: {
|
|
794
794
|
group: 'paint',
|
|
795
|
-
state: '
|
|
795
|
+
state: 'deleted',
|
|
796
796
|
replacement: 'color.icon.discovery',
|
|
797
797
|
description: "\nUse rarely for icons and borders representing new information, such as the icons in discovery section mesages or the borders in onboarding spotlights.\n\nAlso use for purple icons or borders when there is no meaning tied to the color, such as file type icons.\n"
|
|
798
798
|
}
|
|
@@ -800,7 +800,7 @@ var color = {
|
|
|
800
800
|
success: {
|
|
801
801
|
attributes: {
|
|
802
802
|
group: 'paint',
|
|
803
|
-
state: '
|
|
803
|
+
state: 'deleted',
|
|
804
804
|
replacement: 'color.icon.success',
|
|
805
805
|
description: "\nUse rarely for icons and borders representing positive information, such as the icons in success section messages or the borders on validated text fields.\n\nAlso use for green icons or borders when there is no meaning tied to the color, such as file type icons.\n"
|
|
806
806
|
}
|
|
@@ -808,7 +808,7 @@ var color = {
|
|
|
808
808
|
warning: {
|
|
809
809
|
attributes: {
|
|
810
810
|
group: 'paint',
|
|
811
|
-
state: '
|
|
811
|
+
state: 'deleted',
|
|
812
812
|
replacement: 'color.icon.warning.[default]',
|
|
813
813
|
description: "\nUse rarely for icons and borders representing semi-urgent information, such as the icons in warning section messages.\n\nAlso use for yellow icons or borders when there is no meaning tied to the color, such as file type icons.\n"
|
|
814
814
|
}
|
|
@@ -818,7 +818,7 @@ var color = {
|
|
|
818
818
|
hover: {
|
|
819
819
|
attributes: {
|
|
820
820
|
group: 'paint',
|
|
821
|
-
state: '
|
|
821
|
+
state: 'deleted',
|
|
822
822
|
replacement: 'color.interaction.hovered',
|
|
823
823
|
description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
|
|
824
824
|
}
|
|
@@ -826,7 +826,7 @@ var color = {
|
|
|
826
826
|
pressed: {
|
|
827
827
|
attributes: {
|
|
828
828
|
group: 'paint',
|
|
829
|
-
state: '
|
|
829
|
+
state: 'deleted',
|
|
830
830
|
replacement: 'color.interaction.pressed',
|
|
831
831
|
description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
|
|
832
832
|
}
|
|
@@ -837,7 +837,7 @@ var color = {
|
|
|
837
837
|
card: {
|
|
838
838
|
attributes: {
|
|
839
839
|
group: 'shadow',
|
|
840
|
-
state: '
|
|
840
|
+
state: 'deleted',
|
|
841
841
|
replacement: 'elevation.shadow.raised',
|
|
842
842
|
description: "\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board.\n\nCombine with background.overlay"
|
|
843
843
|
}
|
|
@@ -845,7 +845,7 @@ var color = {
|
|
|
845
845
|
overlay: {
|
|
846
846
|
attributes: {
|
|
847
847
|
group: 'shadow',
|
|
848
|
-
state: '
|
|
848
|
+
state: 'deleted',
|
|
849
849
|
replacement: 'elevation.shadow.overlay',
|
|
850
850
|
description: "\nUse for the box shadow of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the box shadow of raised cards in a dragged state.\n\nCombine with background.overlay"
|
|
851
851
|
}
|