@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
|
@@ -4,7 +4,7 @@ var color = {
|
|
|
4
4
|
boldBlue: {
|
|
5
5
|
attributes: {
|
|
6
6
|
group: 'paint',
|
|
7
|
-
state: '
|
|
7
|
+
state: 'deleted',
|
|
8
8
|
replacement: 'color.background.accent.blue.bolder',
|
|
9
9
|
description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
10
10
|
}
|
|
@@ -12,7 +12,7 @@ var color = {
|
|
|
12
12
|
boldGreen: {
|
|
13
13
|
attributes: {
|
|
14
14
|
group: 'paint',
|
|
15
|
-
state: '
|
|
15
|
+
state: 'deleted',
|
|
16
16
|
replacement: 'color.background.accent.green.bolder',
|
|
17
17
|
description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
18
18
|
}
|
|
@@ -20,7 +20,7 @@ var color = {
|
|
|
20
20
|
boldOrange: {
|
|
21
21
|
attributes: {
|
|
22
22
|
group: 'paint',
|
|
23
|
-
state: '
|
|
23
|
+
state: 'deleted',
|
|
24
24
|
replacement: 'color.background.accent.orange.bolder',
|
|
25
25
|
description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
26
26
|
}
|
|
@@ -28,7 +28,7 @@ var color = {
|
|
|
28
28
|
boldPurple: {
|
|
29
29
|
attributes: {
|
|
30
30
|
group: 'paint',
|
|
31
|
-
state: '
|
|
31
|
+
state: 'deleted',
|
|
32
32
|
replacement: 'color.background.accent.purple.bolder',
|
|
33
33
|
description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
34
34
|
}
|
|
@@ -36,7 +36,7 @@ var color = {
|
|
|
36
36
|
boldRed: {
|
|
37
37
|
attributes: {
|
|
38
38
|
group: 'paint',
|
|
39
|
-
state: '
|
|
39
|
+
state: 'deleted',
|
|
40
40
|
replacement: 'color.background.accent.red.bolder',
|
|
41
41
|
description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
42
42
|
}
|
|
@@ -44,7 +44,7 @@ var color = {
|
|
|
44
44
|
boldTeal: {
|
|
45
45
|
attributes: {
|
|
46
46
|
group: 'paint',
|
|
47
|
-
state: '
|
|
47
|
+
state: 'deleted',
|
|
48
48
|
replacement: 'color.background.accent.teal.bolder',
|
|
49
49
|
description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
|
|
50
50
|
}
|
|
@@ -52,7 +52,7 @@ var color = {
|
|
|
52
52
|
subtleBlue: {
|
|
53
53
|
attributes: {
|
|
54
54
|
group: 'paint',
|
|
55
|
-
state: '
|
|
55
|
+
state: 'deleted',
|
|
56
56
|
replacement: 'color.background.accent.blue.subtler',
|
|
57
57
|
description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
58
58
|
}
|
|
@@ -60,7 +60,7 @@ var color = {
|
|
|
60
60
|
subtleGreen: {
|
|
61
61
|
attributes: {
|
|
62
62
|
group: 'paint',
|
|
63
|
-
state: '
|
|
63
|
+
state: 'deleted',
|
|
64
64
|
replacement: 'color.background.accent.green.subtler',
|
|
65
65
|
description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
66
66
|
}
|
|
@@ -68,7 +68,7 @@ var color = {
|
|
|
68
68
|
subtleMagenta: {
|
|
69
69
|
attributes: {
|
|
70
70
|
group: 'paint',
|
|
71
|
-
state: '
|
|
71
|
+
state: 'deleted',
|
|
72
72
|
replacement: 'color.background.accent.magenta.subtler',
|
|
73
73
|
description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
74
74
|
}
|
|
@@ -76,7 +76,7 @@ var color = {
|
|
|
76
76
|
subtleOrange: {
|
|
77
77
|
attributes: {
|
|
78
78
|
group: 'paint',
|
|
79
|
-
state: '
|
|
79
|
+
state: 'deleted',
|
|
80
80
|
replacement: 'color.background.accent.orange.subtler',
|
|
81
81
|
description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
82
82
|
}
|
|
@@ -84,7 +84,7 @@ var color = {
|
|
|
84
84
|
subtlePurple: {
|
|
85
85
|
attributes: {
|
|
86
86
|
group: 'paint',
|
|
87
|
-
state: '
|
|
87
|
+
state: 'deleted',
|
|
88
88
|
replacement: 'color.background.accent.purple.subtler',
|
|
89
89
|
description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
90
90
|
}
|
|
@@ -92,7 +92,7 @@ var color = {
|
|
|
92
92
|
subtleRed: {
|
|
93
93
|
attributes: {
|
|
94
94
|
group: 'paint',
|
|
95
|
-
state: '
|
|
95
|
+
state: 'deleted',
|
|
96
96
|
replacement: 'color.background.accent.red.subtler',
|
|
97
97
|
description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
98
98
|
}
|
|
@@ -100,7 +100,7 @@ var color = {
|
|
|
100
100
|
subtleTeal: {
|
|
101
101
|
attributes: {
|
|
102
102
|
group: 'paint',
|
|
103
|
-
state: '
|
|
103
|
+
state: 'deleted',
|
|
104
104
|
replacement: 'color.background.accent.teal.subtler',
|
|
105
105
|
description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
106
106
|
}
|
|
@@ -112,7 +112,7 @@ var color = {
|
|
|
112
112
|
'[default]': {
|
|
113
113
|
attributes: {
|
|
114
114
|
group: 'paint',
|
|
115
|
-
state: '
|
|
115
|
+
state: 'deleted',
|
|
116
116
|
replacement: 'color.background.accent.blue.subtler',
|
|
117
117
|
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
|
|
118
118
|
}
|
|
@@ -120,7 +120,7 @@ var color = {
|
|
|
120
120
|
bold: {
|
|
121
121
|
attributes: {
|
|
122
122
|
group: 'paint',
|
|
123
|
-
state: '
|
|
123
|
+
state: 'deleted',
|
|
124
124
|
replacement: 'color.background.accent.blue.subtle',
|
|
125
125
|
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.'
|
|
126
126
|
}
|
|
@@ -130,7 +130,7 @@ var color = {
|
|
|
130
130
|
'[default]': {
|
|
131
131
|
attributes: {
|
|
132
132
|
group: 'paint',
|
|
133
|
-
state: '
|
|
133
|
+
state: 'deleted',
|
|
134
134
|
replacement: 'color.background.accent.red.subtler',
|
|
135
135
|
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
136
136
|
}
|
|
@@ -138,7 +138,7 @@ var color = {
|
|
|
138
138
|
bold: {
|
|
139
139
|
attributes: {
|
|
140
140
|
group: 'paint',
|
|
141
|
-
state: '
|
|
141
|
+
state: 'deleted',
|
|
142
142
|
replacement: 'color.background.accent.red.subtle',
|
|
143
143
|
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.'
|
|
144
144
|
}
|
|
@@ -148,7 +148,7 @@ var color = {
|
|
|
148
148
|
'[default]': {
|
|
149
149
|
attributes: {
|
|
150
150
|
group: 'paint',
|
|
151
|
-
state: '
|
|
151
|
+
state: 'deleted',
|
|
152
152
|
replacement: 'color.background.accent.orange.subtler',
|
|
153
153
|
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
154
154
|
}
|
|
@@ -156,7 +156,7 @@ var color = {
|
|
|
156
156
|
bold: {
|
|
157
157
|
attributes: {
|
|
158
158
|
group: 'paint',
|
|
159
|
-
state: '
|
|
159
|
+
state: 'deleted',
|
|
160
160
|
replacement: 'color.background.accent.orange.subtle',
|
|
161
161
|
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.'
|
|
162
162
|
}
|
|
@@ -166,7 +166,7 @@ var color = {
|
|
|
166
166
|
'[default]': {
|
|
167
167
|
attributes: {
|
|
168
168
|
group: 'paint',
|
|
169
|
-
state: '
|
|
169
|
+
state: 'deleted',
|
|
170
170
|
replacement: 'color.background.accent.yellow.subtler',
|
|
171
171
|
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
172
172
|
}
|
|
@@ -174,7 +174,7 @@ var color = {
|
|
|
174
174
|
bold: {
|
|
175
175
|
attributes: {
|
|
176
176
|
group: 'paint',
|
|
177
|
-
state: '
|
|
177
|
+
state: 'deleted',
|
|
178
178
|
replacement: 'color.background.accent.yellow.subtle',
|
|
179
179
|
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.'
|
|
180
180
|
}
|
|
@@ -184,7 +184,7 @@ var color = {
|
|
|
184
184
|
'[default]': {
|
|
185
185
|
attributes: {
|
|
186
186
|
group: 'paint',
|
|
187
|
-
state: '
|
|
187
|
+
state: 'deleted',
|
|
188
188
|
replacement: 'color.background.accent.green.subtler',
|
|
189
189
|
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
190
190
|
}
|
|
@@ -192,7 +192,7 @@ var color = {
|
|
|
192
192
|
bold: {
|
|
193
193
|
attributes: {
|
|
194
194
|
group: 'paint',
|
|
195
|
-
state: '
|
|
195
|
+
state: 'deleted',
|
|
196
196
|
replacement: 'color.background.accent.green.subtle',
|
|
197
197
|
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.'
|
|
198
198
|
}
|
|
@@ -202,7 +202,7 @@ var color = {
|
|
|
202
202
|
'[default]': {
|
|
203
203
|
attributes: {
|
|
204
204
|
group: 'paint',
|
|
205
|
-
state: '
|
|
205
|
+
state: 'deleted',
|
|
206
206
|
replacement: 'color.background.accent.teal.subtler',
|
|
207
207
|
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
208
208
|
}
|
|
@@ -210,7 +210,7 @@ var color = {
|
|
|
210
210
|
bold: {
|
|
211
211
|
attributes: {
|
|
212
212
|
group: 'paint',
|
|
213
|
-
state: '
|
|
213
|
+
state: 'deleted',
|
|
214
214
|
replacement: 'color.background.accent.teal.subtle',
|
|
215
215
|
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.'
|
|
216
216
|
}
|
|
@@ -220,7 +220,7 @@ var color = {
|
|
|
220
220
|
'[default]': {
|
|
221
221
|
attributes: {
|
|
222
222
|
group: 'paint',
|
|
223
|
-
state: '
|
|
223
|
+
state: 'deleted',
|
|
224
224
|
replacement: 'color.background.accent.purple.subtler',
|
|
225
225
|
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
226
226
|
}
|
|
@@ -228,7 +228,7 @@ var color = {
|
|
|
228
228
|
bold: {
|
|
229
229
|
attributes: {
|
|
230
230
|
group: 'paint',
|
|
231
|
-
state: '
|
|
231
|
+
state: 'deleted',
|
|
232
232
|
replacement: 'color.background.accent.purple.subtle',
|
|
233
233
|
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.'
|
|
234
234
|
}
|
|
@@ -238,7 +238,7 @@ var color = {
|
|
|
238
238
|
'[default]': {
|
|
239
239
|
attributes: {
|
|
240
240
|
group: 'paint',
|
|
241
|
-
state: '
|
|
241
|
+
state: 'deleted',
|
|
242
242
|
replacement: 'color.background.accent.magenta.subtler',
|
|
243
243
|
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
244
244
|
}
|
|
@@ -246,7 +246,7 @@ var color = {
|
|
|
246
246
|
bold: {
|
|
247
247
|
attributes: {
|
|
248
248
|
group: 'paint',
|
|
249
|
-
state: '
|
|
249
|
+
state: 'deleted',
|
|
250
250
|
replacement: 'color.background.accent.magenta.subtle',
|
|
251
251
|
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.'
|
|
252
252
|
}
|
|
@@ -256,7 +256,7 @@ var color = {
|
|
|
256
256
|
blanket: {
|
|
257
257
|
attributes: {
|
|
258
258
|
group: 'paint',
|
|
259
|
-
state: '
|
|
259
|
+
state: 'deleted',
|
|
260
260
|
replacement: 'color.blanket.[default]',
|
|
261
261
|
description: 'Use for the screen overlay that appears with modal dialogs'
|
|
262
262
|
}
|
|
@@ -293,7 +293,7 @@ var color = {
|
|
|
293
293
|
hover: {
|
|
294
294
|
attributes: {
|
|
295
295
|
group: 'paint',
|
|
296
|
-
state: '
|
|
296
|
+
state: 'deleted',
|
|
297
297
|
replacement: 'color.background.brand.bold.hovered',
|
|
298
298
|
description: 'Hover state of background.boldBrand'
|
|
299
299
|
}
|
|
@@ -301,7 +301,7 @@ var color = {
|
|
|
301
301
|
pressed: {
|
|
302
302
|
attributes: {
|
|
303
303
|
group: 'paint',
|
|
304
|
-
state: '
|
|
304
|
+
state: 'deleted',
|
|
305
305
|
replacement: 'color.background.brand.bold.pressed',
|
|
306
306
|
description: 'Pressed state of background.boldBrand'
|
|
307
307
|
}
|
|
@@ -309,7 +309,7 @@ var color = {
|
|
|
309
309
|
resting: {
|
|
310
310
|
attributes: {
|
|
311
311
|
group: 'paint',
|
|
312
|
-
state: '
|
|
312
|
+
state: 'deleted',
|
|
313
313
|
replacement: 'color.background.brand.bold.[default]',
|
|
314
314
|
description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
|
|
315
315
|
}
|
|
@@ -319,7 +319,7 @@ var color = {
|
|
|
319
319
|
hover: {
|
|
320
320
|
attributes: {
|
|
321
321
|
group: 'paint',
|
|
322
|
-
state: '
|
|
322
|
+
state: 'deleted',
|
|
323
323
|
replacement: 'color.background.danger.bold.hovered',
|
|
324
324
|
description: 'Hover state of background.boldDanger'
|
|
325
325
|
}
|
|
@@ -327,7 +327,7 @@ var color = {
|
|
|
327
327
|
pressed: {
|
|
328
328
|
attributes: {
|
|
329
329
|
group: 'paint',
|
|
330
|
-
state: '
|
|
330
|
+
state: 'deleted',
|
|
331
331
|
replacement: 'color.background.danger.bold.pressed',
|
|
332
332
|
description: 'Pressed state of background.boldDanger'
|
|
333
333
|
}
|
|
@@ -335,7 +335,7 @@ var color = {
|
|
|
335
335
|
resting: {
|
|
336
336
|
attributes: {
|
|
337
337
|
group: 'paint',
|
|
338
|
-
state: '
|
|
338
|
+
state: 'deleted',
|
|
339
339
|
replacement: 'color.background.danger.bold.[default]',
|
|
340
340
|
description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
|
|
341
341
|
}
|
|
@@ -345,7 +345,7 @@ var color = {
|
|
|
345
345
|
hover: {
|
|
346
346
|
attributes: {
|
|
347
347
|
group: 'paint',
|
|
348
|
-
state: '
|
|
348
|
+
state: 'deleted',
|
|
349
349
|
replacement: 'color.background.discovery.bold.hovered',
|
|
350
350
|
description: 'Hover state of background.boldDiscovery'
|
|
351
351
|
}
|
|
@@ -353,7 +353,7 @@ var color = {
|
|
|
353
353
|
pressed: {
|
|
354
354
|
attributes: {
|
|
355
355
|
group: 'paint',
|
|
356
|
-
state: '
|
|
356
|
+
state: 'deleted',
|
|
357
357
|
replacement: 'color.background.discovery.bold.pressed',
|
|
358
358
|
description: 'Pressed state of background.boldDiscovery'
|
|
359
359
|
}
|
|
@@ -361,7 +361,7 @@ var color = {
|
|
|
361
361
|
resting: {
|
|
362
362
|
attributes: {
|
|
363
363
|
group: 'paint',
|
|
364
|
-
state: '
|
|
364
|
+
state: 'deleted',
|
|
365
365
|
replacement: 'color.background.discovery.bold.[default]',
|
|
366
366
|
description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
|
|
367
367
|
}
|
|
@@ -371,7 +371,7 @@ var color = {
|
|
|
371
371
|
hover: {
|
|
372
372
|
attributes: {
|
|
373
373
|
group: 'paint',
|
|
374
|
-
state: '
|
|
374
|
+
state: 'deleted',
|
|
375
375
|
replacement: 'color.background.neutral.bold.hovered',
|
|
376
376
|
description: 'Hover state of background.boldNeutral'
|
|
377
377
|
}
|
|
@@ -379,7 +379,7 @@ var color = {
|
|
|
379
379
|
pressed: {
|
|
380
380
|
attributes: {
|
|
381
381
|
group: 'paint',
|
|
382
|
-
state: '
|
|
382
|
+
state: 'deleted',
|
|
383
383
|
replacement: 'color.background.neutral.bold.pressed',
|
|
384
384
|
description: 'Pressed state of background.boldNeutral'
|
|
385
385
|
}
|
|
@@ -387,7 +387,7 @@ var color = {
|
|
|
387
387
|
resting: {
|
|
388
388
|
attributes: {
|
|
389
389
|
group: 'paint',
|
|
390
|
-
state: '
|
|
390
|
+
state: 'deleted',
|
|
391
391
|
replacement: 'color.background.neutral.bold.[default]',
|
|
392
392
|
description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
|
|
393
393
|
}
|
|
@@ -397,7 +397,7 @@ var color = {
|
|
|
397
397
|
hover: {
|
|
398
398
|
attributes: {
|
|
399
399
|
group: 'paint',
|
|
400
|
-
state: '
|
|
400
|
+
state: 'deleted',
|
|
401
401
|
replacement: 'color.background.success.bold.hovered',
|
|
402
402
|
description: 'Hover state of background.boldSuccess'
|
|
403
403
|
}
|
|
@@ -405,7 +405,7 @@ var color = {
|
|
|
405
405
|
pressed: {
|
|
406
406
|
attributes: {
|
|
407
407
|
group: 'paint',
|
|
408
|
-
state: '
|
|
408
|
+
state: 'deleted',
|
|
409
409
|
replacement: 'color.background.success.bold.pressed',
|
|
410
410
|
description: 'Pressed state of background.boldSuccess'
|
|
411
411
|
}
|
|
@@ -413,7 +413,7 @@ var color = {
|
|
|
413
413
|
resting: {
|
|
414
414
|
attributes: {
|
|
415
415
|
group: 'paint',
|
|
416
|
-
state: '
|
|
416
|
+
state: 'deleted',
|
|
417
417
|
replacement: 'color.background.success.bold.[default]',
|
|
418
418
|
description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
|
|
419
419
|
}
|
|
@@ -423,7 +423,7 @@ var color = {
|
|
|
423
423
|
hover: {
|
|
424
424
|
attributes: {
|
|
425
425
|
group: 'paint',
|
|
426
|
-
state: '
|
|
426
|
+
state: 'deleted',
|
|
427
427
|
replacement: 'color.background.warning.bold.hovered',
|
|
428
428
|
description: 'Hover state of background.boldWarning'
|
|
429
429
|
}
|
|
@@ -431,7 +431,7 @@ var color = {
|
|
|
431
431
|
pressed: {
|
|
432
432
|
attributes: {
|
|
433
433
|
group: 'paint',
|
|
434
|
-
state: '
|
|
434
|
+
state: 'deleted',
|
|
435
435
|
replacement: 'color.background.warning.bold.pressed',
|
|
436
436
|
description: 'Pressed state of background.boldWarning'
|
|
437
437
|
}
|
|
@@ -439,7 +439,7 @@ var color = {
|
|
|
439
439
|
resting: {
|
|
440
440
|
attributes: {
|
|
441
441
|
group: 'paint',
|
|
442
|
-
state: '
|
|
442
|
+
state: 'deleted',
|
|
443
443
|
replacement: 'color.background.warning.bold.[default]',
|
|
444
444
|
description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
|
|
445
445
|
}
|
|
@@ -448,7 +448,7 @@ var color = {
|
|
|
448
448
|
card: {
|
|
449
449
|
attributes: {
|
|
450
450
|
group: 'paint',
|
|
451
|
-
state: '
|
|
451
|
+
state: 'deleted',
|
|
452
452
|
replacement: 'elevation.surface.raised',
|
|
453
453
|
description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
|
|
454
454
|
}
|
|
@@ -456,7 +456,7 @@ var color = {
|
|
|
456
456
|
default: {
|
|
457
457
|
attributes: {
|
|
458
458
|
group: 'paint',
|
|
459
|
-
state: '
|
|
459
|
+
state: 'deleted',
|
|
460
460
|
replacement: 'elevation.surface.[default]',
|
|
461
461
|
description: 'Use as the primary background for the UI'
|
|
462
462
|
}
|
|
@@ -464,7 +464,7 @@ var color = {
|
|
|
464
464
|
overlay: {
|
|
465
465
|
attributes: {
|
|
466
466
|
group: 'paint',
|
|
467
|
-
state: '
|
|
467
|
+
state: 'deleted',
|
|
468
468
|
replacement: 'elevation.surface.overlay',
|
|
469
469
|
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."
|
|
470
470
|
}
|
|
@@ -491,7 +491,7 @@ var color = {
|
|
|
491
491
|
pressed: {
|
|
492
492
|
attributes: {
|
|
493
493
|
group: 'paint',
|
|
494
|
-
state: '
|
|
494
|
+
state: 'deleted',
|
|
495
495
|
replacement: 'color.background.input.pressed',
|
|
496
496
|
description: 'Pressed state for background.subtleBorderedNeutral'
|
|
497
497
|
}
|
|
@@ -499,7 +499,7 @@ var color = {
|
|
|
499
499
|
resting: {
|
|
500
500
|
attributes: {
|
|
501
501
|
group: 'paint',
|
|
502
|
-
state: '
|
|
502
|
+
state: 'deleted',
|
|
503
503
|
replacement: 'color.background.input.[default]',
|
|
504
504
|
description: 'Hover state for background.subtleBorderedNeutral'
|
|
505
505
|
}
|
|
@@ -535,7 +535,7 @@ var color = {
|
|
|
535
535
|
hover: {
|
|
536
536
|
attributes: {
|
|
537
537
|
group: 'paint',
|
|
538
|
-
state: '
|
|
538
|
+
state: 'deleted',
|
|
539
539
|
replacement: 'color.background.danger.[default].hovered',
|
|
540
540
|
description: 'Hover state for background.subtleDanger'
|
|
541
541
|
}
|
|
@@ -543,7 +543,7 @@ var color = {
|
|
|
543
543
|
pressed: {
|
|
544
544
|
attributes: {
|
|
545
545
|
group: 'paint',
|
|
546
|
-
state: '
|
|
546
|
+
state: 'deleted',
|
|
547
547
|
replacement: 'color.background.danger.[default].pressed',
|
|
548
548
|
description: 'Pressed state for background.subtleDanger'
|
|
549
549
|
}
|
|
@@ -551,7 +551,7 @@ var color = {
|
|
|
551
551
|
resting: {
|
|
552
552
|
attributes: {
|
|
553
553
|
group: 'paint',
|
|
554
|
-
state: '
|
|
554
|
+
state: 'deleted',
|
|
555
555
|
replacement: 'color.background.danger.[default].[default]',
|
|
556
556
|
description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
|
|
557
557
|
}
|
|
@@ -561,7 +561,7 @@ var color = {
|
|
|
561
561
|
hover: {
|
|
562
562
|
attributes: {
|
|
563
563
|
group: 'paint',
|
|
564
|
-
state: '
|
|
564
|
+
state: 'deleted',
|
|
565
565
|
replacement: 'color.background.discovery.[default].hovered',
|
|
566
566
|
description: 'Hover state for background.subtleDiscovery'
|
|
567
567
|
}
|
|
@@ -569,7 +569,7 @@ var color = {
|
|
|
569
569
|
pressed: {
|
|
570
570
|
attributes: {
|
|
571
571
|
group: 'paint',
|
|
572
|
-
state: '
|
|
572
|
+
state: 'deleted',
|
|
573
573
|
replacement: 'color.background.discovery.[default].pressed',
|
|
574
574
|
description: 'Pressed state for background.subtleDiscovery'
|
|
575
575
|
}
|
|
@@ -577,7 +577,7 @@ var color = {
|
|
|
577
577
|
resting: {
|
|
578
578
|
attributes: {
|
|
579
579
|
group: 'paint',
|
|
580
|
-
state: '
|
|
580
|
+
state: 'deleted',
|
|
581
581
|
replacement: 'color.background.discovery.[default].[default]',
|
|
582
582
|
description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
|
|
583
583
|
}
|
|
@@ -587,7 +587,7 @@ var color = {
|
|
|
587
587
|
hover: {
|
|
588
588
|
attributes: {
|
|
589
589
|
group: 'paint',
|
|
590
|
-
state: '
|
|
590
|
+
state: 'deleted',
|
|
591
591
|
replacement: 'color.background.neutral.[default].hovered',
|
|
592
592
|
description: 'Hover state for background.subtleNeutral'
|
|
593
593
|
}
|
|
@@ -595,7 +595,7 @@ var color = {
|
|
|
595
595
|
pressed: {
|
|
596
596
|
attributes: {
|
|
597
597
|
group: 'paint',
|
|
598
|
-
state: '
|
|
598
|
+
state: 'deleted',
|
|
599
599
|
replacement: 'color.background.neutral.[default].pressed',
|
|
600
600
|
description: 'Pressed state for background.subtleNeutral'
|
|
601
601
|
}
|
|
@@ -603,7 +603,7 @@ var color = {
|
|
|
603
603
|
resting: {
|
|
604
604
|
attributes: {
|
|
605
605
|
group: 'paint',
|
|
606
|
-
state: '
|
|
606
|
+
state: 'deleted',
|
|
607
607
|
replacement: 'color.background.neutral.[default].[default]',
|
|
608
608
|
description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
|
|
609
609
|
}
|
|
@@ -613,7 +613,7 @@ var color = {
|
|
|
613
613
|
hover: {
|
|
614
614
|
attributes: {
|
|
615
615
|
group: 'paint',
|
|
616
|
-
state: '
|
|
616
|
+
state: 'deleted',
|
|
617
617
|
replacement: 'color.background.success.[default].hovered',
|
|
618
618
|
description: 'Hover state for background.subtleSuccess'
|
|
619
619
|
}
|
|
@@ -621,7 +621,7 @@ var color = {
|
|
|
621
621
|
pressed: {
|
|
622
622
|
attributes: {
|
|
623
623
|
group: 'paint',
|
|
624
|
-
state: '
|
|
624
|
+
state: 'deleted',
|
|
625
625
|
replacement: 'color.background.success.[default].pressed',
|
|
626
626
|
description: 'Pressed state for background.subtleSuccess'
|
|
627
627
|
}
|
|
@@ -629,7 +629,7 @@ var color = {
|
|
|
629
629
|
resting: {
|
|
630
630
|
attributes: {
|
|
631
631
|
group: 'paint',
|
|
632
|
-
state: '
|
|
632
|
+
state: 'deleted',
|
|
633
633
|
replacement: 'color.background.success.[default].[default]',
|
|
634
634
|
description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges.'
|
|
635
635
|
}
|
|
@@ -639,7 +639,7 @@ var color = {
|
|
|
639
639
|
hover: {
|
|
640
640
|
attributes: {
|
|
641
641
|
group: 'paint',
|
|
642
|
-
state: '
|
|
642
|
+
state: 'deleted',
|
|
643
643
|
replacement: 'color.background.warning.[default].hovered',
|
|
644
644
|
description: 'Hover state for background.subtleWarning'
|
|
645
645
|
}
|
|
@@ -647,7 +647,7 @@ var color = {
|
|
|
647
647
|
pressed: {
|
|
648
648
|
attributes: {
|
|
649
649
|
group: 'paint',
|
|
650
|
-
state: '
|
|
650
|
+
state: 'deleted',
|
|
651
651
|
replacement: 'color.background.warning.[default].pressed',
|
|
652
652
|
description: 'Pressed state for background.subtleWarning'
|
|
653
653
|
}
|
|
@@ -655,7 +655,7 @@ var color = {
|
|
|
655
655
|
resting: {
|
|
656
656
|
attributes: {
|
|
657
657
|
group: 'paint',
|
|
658
|
-
state: '
|
|
658
|
+
state: 'deleted',
|
|
659
659
|
replacement: 'color.background.warning.[default].[default]',
|
|
660
660
|
description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
|
|
661
661
|
}
|
|
@@ -664,7 +664,7 @@ var color = {
|
|
|
664
664
|
sunken: {
|
|
665
665
|
attributes: {
|
|
666
666
|
group: 'paint',
|
|
667
|
-
state: '
|
|
667
|
+
state: 'deleted',
|
|
668
668
|
replacement: 'elevation.surface.sunken',
|
|
669
669
|
description: 'Use as a secondary background for the UI'
|
|
670
670
|
}
|
|
@@ -673,7 +673,7 @@ var color = {
|
|
|
673
673
|
hover: {
|
|
674
674
|
attributes: {
|
|
675
675
|
group: 'paint',
|
|
676
|
-
state: '
|
|
676
|
+
state: 'deleted',
|
|
677
677
|
replacement: 'color.background.neutral.subtle.hovered',
|
|
678
678
|
description: 'Hover state for UIs that do not have a default background, such as menu items or subtle buttons.'
|
|
679
679
|
}
|
|
@@ -681,7 +681,7 @@ var color = {
|
|
|
681
681
|
pressed: {
|
|
682
682
|
attributes: {
|
|
683
683
|
group: 'paint',
|
|
684
|
-
state: '
|
|
684
|
+
state: 'deleted',
|
|
685
685
|
replacement: 'color.background.neutral.subtle.pressed',
|
|
686
686
|
description: 'Pressed state for UIs that do not have a default background, such as menu items or subtle buttons.'
|
|
687
687
|
}
|
|
@@ -692,7 +692,7 @@ var color = {
|
|
|
692
692
|
highEmphasis: {
|
|
693
693
|
attributes: {
|
|
694
694
|
group: 'paint',
|
|
695
|
-
state: '
|
|
695
|
+
state: 'deleted',
|
|
696
696
|
replacement: 'color.text.[default]',
|
|
697
697
|
description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
|
|
698
698
|
}
|
|
@@ -701,7 +701,7 @@ var color = {
|
|
|
701
701
|
pressed: {
|
|
702
702
|
attributes: {
|
|
703
703
|
group: 'paint',
|
|
704
|
-
state: '
|
|
704
|
+
state: 'deleted',
|
|
705
705
|
replacement: 'color.link.pressed',
|
|
706
706
|
description: 'Use for links in a pressed state'
|
|
707
707
|
}
|
|
@@ -709,7 +709,7 @@ var color = {
|
|
|
709
709
|
resting: {
|
|
710
710
|
attributes: {
|
|
711
711
|
group: 'paint',
|
|
712
|
-
state: '
|
|
712
|
+
state: 'deleted',
|
|
713
713
|
replacement: 'color.link.[default]',
|
|
714
714
|
description: 'Use for links in a resting or hover state. Add an underline for hover states'
|
|
715
715
|
}
|
|
@@ -718,7 +718,7 @@ var color = {
|
|
|
718
718
|
lowEmphasis: {
|
|
719
719
|
attributes: {
|
|
720
720
|
group: 'paint',
|
|
721
|
-
state: '
|
|
721
|
+
state: 'deleted',
|
|
722
722
|
replacement: 'color.text.subtlest',
|
|
723
723
|
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"
|
|
724
724
|
}
|
|
@@ -726,7 +726,7 @@ var color = {
|
|
|
726
726
|
mediumEmphasis: {
|
|
727
727
|
attributes: {
|
|
728
728
|
group: 'paint',
|
|
729
|
-
state: '
|
|
729
|
+
state: 'deleted',
|
|
730
730
|
replacement: 'color.text.subtle',
|
|
731
731
|
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 "
|
|
732
732
|
}
|
|
@@ -734,7 +734,7 @@ var color = {
|
|
|
734
734
|
onBold: {
|
|
735
735
|
attributes: {
|
|
736
736
|
group: 'paint',
|
|
737
|
-
state: '
|
|
737
|
+
state: 'deleted',
|
|
738
738
|
replacement: 'color.text.inverse',
|
|
739
739
|
description: 'Use for text and icons when on bold backgrounds'
|
|
740
740
|
}
|
|
@@ -742,7 +742,7 @@ var color = {
|
|
|
742
742
|
onBoldWarning: {
|
|
743
743
|
attributes: {
|
|
744
744
|
group: 'paint',
|
|
745
|
-
state: '
|
|
745
|
+
state: 'deleted',
|
|
746
746
|
replacement: 'color.text.warning.inverse',
|
|
747
747
|
description: 'Use for text and icons when on bold warning backgrounds'
|
|
748
748
|
}
|
|
@@ -752,7 +752,7 @@ var color = {
|
|
|
752
752
|
focus: {
|
|
753
753
|
attributes: {
|
|
754
754
|
group: 'paint',
|
|
755
|
-
state: '
|
|
755
|
+
state: 'deleted',
|
|
756
756
|
replacement: 'color.border.focused',
|
|
757
757
|
description: 'Use for focus rings of elements in a focus state'
|
|
758
758
|
}
|
|
@@ -760,7 +760,7 @@ var color = {
|
|
|
760
760
|
neutral: {
|
|
761
761
|
attributes: {
|
|
762
762
|
group: 'paint',
|
|
763
|
-
state: '
|
|
763
|
+
state: 'deleted',
|
|
764
764
|
replacement: 'color.border.[default]',
|
|
765
765
|
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'
|
|
766
766
|
}
|
|
@@ -770,7 +770,7 @@ var color = {
|
|
|
770
770
|
brand: {
|
|
771
771
|
attributes: {
|
|
772
772
|
group: 'paint',
|
|
773
|
-
state: '
|
|
773
|
+
state: 'deleted',
|
|
774
774
|
replacement: 'color.icon.brand',
|
|
775
775
|
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."
|
|
776
776
|
}
|
|
@@ -778,7 +778,7 @@ var color = {
|
|
|
778
778
|
danger: {
|
|
779
779
|
attributes: {
|
|
780
780
|
group: 'paint',
|
|
781
|
-
state: '
|
|
781
|
+
state: 'deleted',
|
|
782
782
|
replacement: 'color.icon.danger',
|
|
783
783
|
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."
|
|
784
784
|
}
|
|
@@ -786,7 +786,7 @@ var color = {
|
|
|
786
786
|
discovery: {
|
|
787
787
|
attributes: {
|
|
788
788
|
group: 'paint',
|
|
789
|
-
state: '
|
|
789
|
+
state: 'deleted',
|
|
790
790
|
replacement: 'color.icon.discovery',
|
|
791
791
|
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"
|
|
792
792
|
}
|
|
@@ -794,7 +794,7 @@ var color = {
|
|
|
794
794
|
success: {
|
|
795
795
|
attributes: {
|
|
796
796
|
group: 'paint',
|
|
797
|
-
state: '
|
|
797
|
+
state: 'deleted',
|
|
798
798
|
replacement: 'color.icon.success',
|
|
799
799
|
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"
|
|
800
800
|
}
|
|
@@ -802,7 +802,7 @@ var color = {
|
|
|
802
802
|
warning: {
|
|
803
803
|
attributes: {
|
|
804
804
|
group: 'paint',
|
|
805
|
-
state: '
|
|
805
|
+
state: 'deleted',
|
|
806
806
|
replacement: 'color.icon.warning.[default]',
|
|
807
807
|
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"
|
|
808
808
|
}
|
|
@@ -812,7 +812,7 @@ var color = {
|
|
|
812
812
|
hover: {
|
|
813
813
|
attributes: {
|
|
814
814
|
group: 'paint',
|
|
815
|
-
state: '
|
|
815
|
+
state: 'deleted',
|
|
816
816
|
replacement: 'color.interaction.hovered',
|
|
817
817
|
description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
|
|
818
818
|
}
|
|
@@ -820,7 +820,7 @@ var color = {
|
|
|
820
820
|
pressed: {
|
|
821
821
|
attributes: {
|
|
822
822
|
group: 'paint',
|
|
823
|
-
state: '
|
|
823
|
+
state: 'deleted',
|
|
824
824
|
replacement: 'color.interaction.pressed',
|
|
825
825
|
description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
|
|
826
826
|
}
|
|
@@ -831,7 +831,7 @@ var color = {
|
|
|
831
831
|
card: {
|
|
832
832
|
attributes: {
|
|
833
833
|
group: 'shadow',
|
|
834
|
-
state: '
|
|
834
|
+
state: 'deleted',
|
|
835
835
|
replacement: 'elevation.shadow.raised',
|
|
836
836
|
description: "\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board.\n\nCombine with background.overlay"
|
|
837
837
|
}
|
|
@@ -839,7 +839,7 @@ var color = {
|
|
|
839
839
|
overlay: {
|
|
840
840
|
attributes: {
|
|
841
841
|
group: 'shadow',
|
|
842
|
-
state: '
|
|
842
|
+
state: 'deleted',
|
|
843
843
|
replacement: 'elevation.shadow.overlay',
|
|
844
844
|
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"
|
|
845
845
|
}
|