@atlaskit/tokens 0.10.5 → 0.10.8
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/.eslintrc.js +35 -0
- package/CHANGELOG.md +27 -0
- package/README.md +1 -1
- package/css/atlassian-dark.css +10 -1
- package/css/atlassian-light.css +10 -1
- package/dist/cjs/artifacts/token-default-values.js +10 -1
- package/dist/cjs/artifacts/token-names.js +10 -1
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +196 -7
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +196 -7
- package/dist/cjs/babel-plugin/plugin.js +57 -53
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/cjs/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/cjs/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/cjs/tokens/atlassian-light/color/border.js +3 -0
- package/dist/cjs/tokens/default/color/accent.js +70 -2
- package/dist/cjs/tokens/default/color/border.js +8 -0
- package/dist/cjs/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/token-default-values.js +10 -1
- package/dist/es2019/artifacts/token-names.js +10 -1
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +196 -7
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +196 -7
- package/dist/es2019/babel-plugin/plugin.js +50 -45
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/es2019/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/es2019/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/es2019/tokens/atlassian-light/color/border.js +3 -0
- package/dist/es2019/tokens/default/color/accent.js +70 -2
- package/dist/es2019/tokens/default/color/border.js +8 -0
- package/dist/es2019/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/token-default-values.js +10 -1
- package/dist/esm/artifacts/token-names.js +10 -1
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +196 -7
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +196 -7
- package/dist/esm/babel-plugin/plugin.js +57 -53
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/esm/tokens/atlassian-dark/color/border.js +3 -0
- package/dist/esm/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/esm/tokens/atlassian-light/color/border.js +3 -0
- package/dist/esm/tokens/default/color/accent.js +70 -2
- package/dist/esm/tokens/default/color/border.js +8 -0
- package/dist/esm/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/token-default-values.d.ts +10 -1
- package/dist/types/artifacts/token-names.d.ts +19 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types/artifacts/types-internal.d.ts +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/babel-plugin/plugin.d.ts +5 -5
- package/dist/types/types.d.ts +13 -0
- package/package.json +4 -1
|
@@ -4,75 +4,79 @@ import tokenNames from '../artifacts/token-names';
|
|
|
4
4
|
export default function plugin() {
|
|
5
5
|
return {
|
|
6
6
|
visitor: {
|
|
7
|
-
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
Program: {
|
|
8
|
+
enter: function enter(path, state) {
|
|
9
|
+
path.traverse({
|
|
10
|
+
CallExpression: function (_CallExpression) {
|
|
11
|
+
function CallExpression(_x) {
|
|
12
|
+
return _CallExpression.apply(this, arguments);
|
|
13
|
+
}
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
CallExpression.toString = function () {
|
|
16
|
+
return _CallExpression.toString();
|
|
17
|
+
};
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
return CallExpression;
|
|
20
|
+
}(function (path) {
|
|
21
|
+
var tokenImportScope = getTokenImportScope(path);
|
|
19
22
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
if (!tokenImportScope) {
|
|
24
|
+
return;
|
|
25
|
+
} // Check arguments have correct format
|
|
23
26
|
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
if (!path.node.arguments[0]) {
|
|
29
|
+
throw new Error("token() requires at least one argument");
|
|
30
|
+
} else if (!t.isStringLiteral(path.node.arguments[0])) {
|
|
31
|
+
throw new Error("token() must have a string as the first argument");
|
|
32
|
+
} else if (path.node.arguments.length > 2) {
|
|
33
|
+
throw new Error("token() does not accept ".concat(path.node.arguments.length, " arguments"));
|
|
34
|
+
} // Check the token exists
|
|
32
35
|
|
|
33
36
|
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
var tokenName = path.node.arguments[0].value;
|
|
38
|
+
var cssTokenValue = tokenNames[tokenName];
|
|
36
39
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
if (!cssTokenValue) {
|
|
41
|
+
throw new Error("token '".concat(tokenName, "' does not exist"));
|
|
42
|
+
}
|
|
40
43
|
|
|
41
|
-
|
|
44
|
+
var replacementNode; // if no fallback is set, optionally find one from the default theme
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
if (path.node.arguments.length < 2) {
|
|
47
|
+
if (state.opts.shouldUseAutoFallback) {
|
|
48
|
+
replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
|
|
49
|
+
} else {
|
|
50
|
+
replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
|
|
51
|
+
}
|
|
52
|
+
} // Handle fallbacks
|
|
50
53
|
|
|
51
54
|
|
|
52
|
-
|
|
55
|
+
var fallback = path.node.arguments[1];
|
|
53
56
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
57
|
+
if (t.isStringLiteral(fallback)) {
|
|
58
|
+
// String literals can be concatenated into css variable call
|
|
59
|
+
// Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
|
|
60
|
+
replacementNode = t.stringLiteral(fallback.value ? "var(".concat(cssTokenValue, ", ").concat(fallback.value, ")") : "var(".concat(cssTokenValue, ")"));
|
|
61
|
+
} else if (t.isExpression(fallback)) {
|
|
62
|
+
// Expressions should be placed in a template string/literal
|
|
63
|
+
replacementNode = t.templateLiteral([t.templateElement({
|
|
64
|
+
cooked: "var(".concat(cssTokenValue, ", "),
|
|
65
|
+
// Currently we create a "raw" value by inserting escape characters via regex (https://github.com/babel/babel/issues/9242)
|
|
66
|
+
raw: "var(".concat(cssTokenValue.replace(/\\|`|\${/g, '\\$&'), ", ")
|
|
67
|
+
}, false), t.templateElement({
|
|
68
|
+
raw: ')',
|
|
69
|
+
cooked: ')'
|
|
70
|
+
}, true)], [fallback]);
|
|
71
|
+
} // Replace path and call scope.crawl() to refresh the scope bindings + references
|
|
69
72
|
|
|
70
73
|
|
|
71
|
-
|
|
74
|
+
replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
|
|
72
75
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
tokenImportScope.crawl();
|
|
77
|
+
})
|
|
78
|
+
});
|
|
79
|
+
},
|
|
76
80
|
exit: function exit(path) {
|
|
77
81
|
path.traverse({
|
|
78
82
|
ImportDeclaration: function ImportDeclaration(path) {
|
package/dist/esm/get-token.js
CHANGED
|
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
|
|
|
2
2
|
import tokens from './artifacts/token-names';
|
|
3
3
|
import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
|
|
4
4
|
var name = "@atlaskit/tokens";
|
|
5
|
-
var version = "0.10.
|
|
5
|
+
var version = "0.10.8";
|
|
6
6
|
|
|
7
7
|
function token(path, fallback) {
|
|
8
8
|
var token = tokens[path];
|
|
@@ -65,6 +65,14 @@ var color = {
|
|
|
65
65
|
bolder: {
|
|
66
66
|
value: 'M200'
|
|
67
67
|
}
|
|
68
|
+
},
|
|
69
|
+
gray: {
|
|
70
|
+
'[default]': {
|
|
71
|
+
value: 'DN800'
|
|
72
|
+
},
|
|
73
|
+
bolder: {
|
|
74
|
+
value: 'DN1000'
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
},
|
|
@@ -93,6 +101,9 @@ var color = {
|
|
|
93
101
|
},
|
|
94
102
|
magenta: {
|
|
95
103
|
value: 'M500'
|
|
104
|
+
},
|
|
105
|
+
gray: {
|
|
106
|
+
value: 'DN600'
|
|
96
107
|
}
|
|
97
108
|
}
|
|
98
109
|
},
|
|
@@ -121,6 +132,9 @@ var color = {
|
|
|
121
132
|
},
|
|
122
133
|
magenta: {
|
|
123
134
|
value: 'M500'
|
|
135
|
+
},
|
|
136
|
+
gray: {
|
|
137
|
+
value: 'DN600'
|
|
124
138
|
}
|
|
125
139
|
}
|
|
126
140
|
},
|
|
@@ -237,6 +251,20 @@ var color = {
|
|
|
237
251
|
bolder: {
|
|
238
252
|
value: 'M400'
|
|
239
253
|
}
|
|
254
|
+
},
|
|
255
|
+
gray: {
|
|
256
|
+
subtlest: {
|
|
257
|
+
value: 'DN300'
|
|
258
|
+
},
|
|
259
|
+
subtler: {
|
|
260
|
+
value: 'DN400'
|
|
261
|
+
},
|
|
262
|
+
subtle: {
|
|
263
|
+
value: 'DN500'
|
|
264
|
+
},
|
|
265
|
+
bolder: {
|
|
266
|
+
value: 'DN700'
|
|
267
|
+
}
|
|
240
268
|
}
|
|
241
269
|
}
|
|
242
270
|
}
|
|
@@ -65,6 +65,14 @@ var color = {
|
|
|
65
65
|
bolder: {
|
|
66
66
|
value: 'M900'
|
|
67
67
|
}
|
|
68
|
+
},
|
|
69
|
+
gray: {
|
|
70
|
+
'[default]': {
|
|
71
|
+
value: 'N800'
|
|
72
|
+
},
|
|
73
|
+
bolder: {
|
|
74
|
+
value: 'N1000'
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
},
|
|
@@ -93,6 +101,9 @@ var color = {
|
|
|
93
101
|
},
|
|
94
102
|
magenta: {
|
|
95
103
|
value: 'M600'
|
|
104
|
+
},
|
|
105
|
+
gray: {
|
|
106
|
+
value: 'N600'
|
|
96
107
|
}
|
|
97
108
|
}
|
|
98
109
|
},
|
|
@@ -121,6 +132,9 @@ var color = {
|
|
|
121
132
|
},
|
|
122
133
|
magenta: {
|
|
123
134
|
value: 'M600'
|
|
135
|
+
},
|
|
136
|
+
gray: {
|
|
137
|
+
value: 'N600'
|
|
124
138
|
}
|
|
125
139
|
}
|
|
126
140
|
},
|
|
@@ -237,6 +251,20 @@ var color = {
|
|
|
237
251
|
bolder: {
|
|
238
252
|
value: 'M700'
|
|
239
253
|
}
|
|
254
|
+
},
|
|
255
|
+
gray: {
|
|
256
|
+
subtlest: {
|
|
257
|
+
value: 'N200'
|
|
258
|
+
},
|
|
259
|
+
subtler: {
|
|
260
|
+
value: 'N300'
|
|
261
|
+
},
|
|
262
|
+
subtle: {
|
|
263
|
+
value: 'N500'
|
|
264
|
+
},
|
|
265
|
+
bolder: {
|
|
266
|
+
value: 'N700'
|
|
267
|
+
}
|
|
240
268
|
}
|
|
241
269
|
}
|
|
242
270
|
}
|
|
@@ -145,6 +145,24 @@ var color = {
|
|
|
145
145
|
description: 'Use on bold magenta accent backgrounds.'
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
+
},
|
|
149
|
+
gray: {
|
|
150
|
+
'[default]': {
|
|
151
|
+
attributes: {
|
|
152
|
+
group: 'paint',
|
|
153
|
+
state: 'active',
|
|
154
|
+
introduced: '0.10.5',
|
|
155
|
+
description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.'
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
bolder: {
|
|
159
|
+
attributes: {
|
|
160
|
+
group: 'paint',
|
|
161
|
+
state: 'active',
|
|
162
|
+
introduced: '0.10.5',
|
|
163
|
+
description: 'Use for text and icons on gray subtle accent backgrounds.'
|
|
164
|
+
}
|
|
165
|
+
}
|
|
148
166
|
}
|
|
149
167
|
}
|
|
150
168
|
},
|
|
@@ -213,6 +231,14 @@ var color = {
|
|
|
213
231
|
introduced: '0.6.0',
|
|
214
232
|
description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
|
|
215
233
|
}
|
|
234
|
+
},
|
|
235
|
+
gray: {
|
|
236
|
+
attributes: {
|
|
237
|
+
group: 'paint',
|
|
238
|
+
state: 'active',
|
|
239
|
+
introduced: '0.10.5',
|
|
240
|
+
description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.'
|
|
241
|
+
}
|
|
216
242
|
}
|
|
217
243
|
}
|
|
218
244
|
},
|
|
@@ -281,6 +307,14 @@ var color = {
|
|
|
281
307
|
introduced: '0.6.0',
|
|
282
308
|
description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
|
|
283
309
|
}
|
|
310
|
+
},
|
|
311
|
+
gray: {
|
|
312
|
+
attributes: {
|
|
313
|
+
group: 'paint',
|
|
314
|
+
state: 'active',
|
|
315
|
+
introduced: '0.10.5',
|
|
316
|
+
description: 'Use for borders on non-bold gray accent backgrounds.'
|
|
317
|
+
}
|
|
284
318
|
}
|
|
285
319
|
}
|
|
286
320
|
},
|
|
@@ -300,7 +334,7 @@ var color = {
|
|
|
300
334
|
group: 'paint',
|
|
301
335
|
state: 'active',
|
|
302
336
|
introduced: '0.7.0',
|
|
303
|
-
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
337
|
+
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
304
338
|
}
|
|
305
339
|
},
|
|
306
340
|
subtle: {
|
|
@@ -308,7 +342,7 @@ var color = {
|
|
|
308
342
|
group: 'paint',
|
|
309
343
|
state: 'active',
|
|
310
344
|
introduced: '0.7.0',
|
|
311
|
-
description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as
|
|
345
|
+
description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
312
346
|
}
|
|
313
347
|
},
|
|
314
348
|
bolder: {
|
|
@@ -557,6 +591,40 @@ var color = {
|
|
|
557
591
|
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.'
|
|
558
592
|
}
|
|
559
593
|
}
|
|
594
|
+
},
|
|
595
|
+
gray: {
|
|
596
|
+
subtlest: {
|
|
597
|
+
attributes: {
|
|
598
|
+
group: 'paint',
|
|
599
|
+
state: 'active',
|
|
600
|
+
introduced: '0.7.0',
|
|
601
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
|
|
602
|
+
}
|
|
603
|
+
},
|
|
604
|
+
subtler: {
|
|
605
|
+
attributes: {
|
|
606
|
+
group: 'paint',
|
|
607
|
+
state: 'active',
|
|
608
|
+
introduced: '0.7.0',
|
|
609
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
subtle: {
|
|
613
|
+
attributes: {
|
|
614
|
+
group: 'paint',
|
|
615
|
+
state: 'active',
|
|
616
|
+
introduced: '0.7.0',
|
|
617
|
+
description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
618
|
+
}
|
|
619
|
+
},
|
|
620
|
+
bolder: {
|
|
621
|
+
attributes: {
|
|
622
|
+
group: 'paint',
|
|
623
|
+
state: 'active',
|
|
624
|
+
introduced: '0.7.0',
|
|
625
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
626
|
+
}
|
|
627
|
+
}
|
|
560
628
|
}
|
|
561
629
|
}
|
|
562
630
|
}
|
|
@@ -9,6 +9,14 @@ var color = {
|
|
|
9
9
|
description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
|
+
bold: {
|
|
13
|
+
attributes: {
|
|
14
|
+
group: 'paint',
|
|
15
|
+
state: 'active',
|
|
16
|
+
introduced: '0.10.8',
|
|
17
|
+
description: 'A neutral border option that passes min 3:1 contrast ratios.'
|
|
18
|
+
}
|
|
19
|
+
},
|
|
12
20
|
inverse: {
|
|
13
21
|
attributes: {
|
|
14
22
|
group: 'paint',
|
|
@@ -156,7 +156,7 @@ var color = {
|
|
|
156
156
|
deprecated: '0.7.0',
|
|
157
157
|
deleted: '0.8.0',
|
|
158
158
|
replacement: 'color.background.accent.blue.subtler',
|
|
159
|
-
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
159
|
+
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
bold: {
|
package/dist/esm/version.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their value in the default Atlassian theme ('light')
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::65fed9d3a0df2e2c1ccee929e1349bb4>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
declare const defaultTokenValues: {
|
|
@@ -23,6 +23,8 @@ declare const defaultTokenValues: {
|
|
|
23
23
|
readonly 'color.text.accent.teal.bolder': "#1D474C";
|
|
24
24
|
readonly 'color.text.accent.magenta': "#943D73";
|
|
25
25
|
readonly 'color.text.accent.magenta.bolder': "#50253F";
|
|
26
|
+
readonly 'color.text.accent.gray': "#44546F";
|
|
27
|
+
readonly 'color.text.accent.gray.bolder': "#172B4D";
|
|
26
28
|
readonly 'color.text': "#172B4D";
|
|
27
29
|
readonly 'color.text.subtle': "#44546F";
|
|
28
30
|
readonly 'color.text.subtlest': "#626F86";
|
|
@@ -51,6 +53,7 @@ declare const defaultTokenValues: {
|
|
|
51
53
|
readonly 'color.icon.accent.purple': "#8270DB";
|
|
52
54
|
readonly 'color.icon.accent.teal': "#1D9AAA";
|
|
53
55
|
readonly 'color.icon.accent.magenta': "#CD519D";
|
|
56
|
+
readonly 'color.icon.accent.gray': "#758195";
|
|
54
57
|
readonly 'color.icon': "#44546F";
|
|
55
58
|
readonly 'color.icon.subtle': "#626F86";
|
|
56
59
|
readonly 'color.icon.inverse': "#FFFFFF";
|
|
@@ -71,7 +74,9 @@ declare const defaultTokenValues: {
|
|
|
71
74
|
readonly 'color.border.accent.purple': "#8270DB";
|
|
72
75
|
readonly 'color.border.accent.teal': "#1D9AAA";
|
|
73
76
|
readonly 'color.border.accent.magenta': "#CD519D";
|
|
77
|
+
readonly 'color.border.accent.gray': "#758195";
|
|
74
78
|
readonly 'color.border': "#091E4224";
|
|
79
|
+
readonly 'color.border.bold': "#758195";
|
|
75
80
|
readonly 'color.border.inverse': "#FFFFFF";
|
|
76
81
|
readonly 'color.border.focused': "#388BFF";
|
|
77
82
|
readonly 'color.border.input': "#091E4224";
|
|
@@ -133,6 +138,10 @@ declare const defaultTokenValues: {
|
|
|
133
138
|
readonly 'color.background.accent.magenta.bolder': "#AE4787";
|
|
134
139
|
readonly 'color.background.accent.magenta': "#FDD0EC";
|
|
135
140
|
readonly 'color.background.accent.magenta.bold': "#E774BB";
|
|
141
|
+
readonly 'color.background.accent.gray.subtlest': "#F1F2F4";
|
|
142
|
+
readonly 'color.background.accent.gray.subtler': "#DCDFE4";
|
|
143
|
+
readonly 'color.background.accent.gray.subtle': "#8993A5";
|
|
144
|
+
readonly 'color.background.accent.gray.bolder': "#626F86";
|
|
136
145
|
readonly 'color.background.disabled': "#091E420F";
|
|
137
146
|
readonly 'color.background.inverse.subtle': "#00000029";
|
|
138
147
|
readonly 'color.background.inverse.subtle.hovered': "#0000003D";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::3acc6507214a2d925fd75bce0549f0ab>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: {
|
|
@@ -20,6 +20,8 @@ declare const tokens: {
|
|
|
20
20
|
readonly 'color.text.accent.teal.bolder': "--ds-text-accent-teal-bolder";
|
|
21
21
|
readonly 'color.text.accent.magenta': "--ds-text-accent-magenta";
|
|
22
22
|
readonly 'color.text.accent.magenta.bolder': "--ds-text-accent-magenta-bolder";
|
|
23
|
+
readonly 'color.text.accent.gray': "--ds-text-accent-gray";
|
|
24
|
+
readonly 'color.text.accent.gray.bolder': "--ds-text-accent-gray-bolder";
|
|
23
25
|
readonly 'color.text': "--ds-text";
|
|
24
26
|
readonly 'color.text.subtle': "--ds-text-subtle";
|
|
25
27
|
readonly 'color.text.subtlest': "--ds-text-subtlest";
|
|
@@ -48,6 +50,7 @@ declare const tokens: {
|
|
|
48
50
|
readonly 'color.icon.accent.purple': "--ds-icon-accent-purple";
|
|
49
51
|
readonly 'color.icon.accent.teal': "--ds-icon-accent-teal";
|
|
50
52
|
readonly 'color.icon.accent.magenta': "--ds-icon-accent-magenta";
|
|
53
|
+
readonly 'color.icon.accent.gray': "--ds-icon-accent-gray";
|
|
51
54
|
readonly 'color.icon': "--ds-icon";
|
|
52
55
|
readonly 'color.icon.subtle': "--ds-icon-subtle";
|
|
53
56
|
readonly 'color.icon.inverse': "--ds-icon-inverse";
|
|
@@ -68,7 +71,9 @@ declare const tokens: {
|
|
|
68
71
|
readonly 'color.border.accent.purple': "--ds-border-accent-purple";
|
|
69
72
|
readonly 'color.border.accent.teal': "--ds-border-accent-teal";
|
|
70
73
|
readonly 'color.border.accent.magenta': "--ds-border-accent-magenta";
|
|
74
|
+
readonly 'color.border.accent.gray': "--ds-border-accent-gray";
|
|
71
75
|
readonly 'color.border': "--ds-border";
|
|
76
|
+
readonly 'color.border.bold': "--ds-border-bold";
|
|
72
77
|
readonly 'color.border.inverse': "--ds-border-inverse";
|
|
73
78
|
readonly 'color.border.focused': "--ds-border-focused";
|
|
74
79
|
readonly 'color.border.input': "--ds-border-input";
|
|
@@ -130,6 +135,10 @@ declare const tokens: {
|
|
|
130
135
|
readonly 'color.background.accent.magenta.bolder': "--ds-background-accent-magenta-bolder";
|
|
131
136
|
readonly 'color.background.accent.magenta': "--ds-background-accent-magenta";
|
|
132
137
|
readonly 'color.background.accent.magenta.bold': "--ds-background-accent-magenta-bold";
|
|
138
|
+
readonly 'color.background.accent.gray.subtlest': "--ds-background-accent-gray-subtlest";
|
|
139
|
+
readonly 'color.background.accent.gray.subtler': "--ds-background-accent-gray-subtler";
|
|
140
|
+
readonly 'color.background.accent.gray.subtle': "--ds-background-accent-gray-subtle";
|
|
141
|
+
readonly 'color.background.accent.gray.bolder': "--ds-background-accent-gray-bolder";
|
|
133
142
|
readonly 'color.background.disabled': "--ds-background-disabled";
|
|
134
143
|
readonly 'color.background.inverse.subtle': "--ds-background-inverse-subtle";
|
|
135
144
|
readonly 'color.background.inverse.subtle.hovered': "--ds-background-inverse-subtle-hovered";
|
|
@@ -296,6 +305,8 @@ export declare type CSSTokenMap = {
|
|
|
296
305
|
'color.text.accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
|
|
297
306
|
'color.text.accent.magenta': 'var(--ds-text-accent-magenta)';
|
|
298
307
|
'color.text.accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
|
|
308
|
+
'color.text.accent.gray': 'var(--ds-text-accent-gray)';
|
|
309
|
+
'color.text.accent.gray.bolder': 'var(--ds-text-accent-gray-bolder)';
|
|
299
310
|
'color.text': 'var(--ds-text)';
|
|
300
311
|
'color.text.subtle': 'var(--ds-text-subtle)';
|
|
301
312
|
'color.text.subtlest': 'var(--ds-text-subtlest)';
|
|
@@ -324,6 +335,7 @@ export declare type CSSTokenMap = {
|
|
|
324
335
|
'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
|
|
325
336
|
'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
|
|
326
337
|
'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
|
|
338
|
+
'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
|
|
327
339
|
'color.icon': 'var(--ds-icon)';
|
|
328
340
|
'color.icon.subtle': 'var(--ds-icon-subtle)';
|
|
329
341
|
'color.icon.inverse': 'var(--ds-icon-inverse)';
|
|
@@ -344,7 +356,9 @@ export declare type CSSTokenMap = {
|
|
|
344
356
|
'color.border.accent.purple': 'var(--ds-border-accent-purple)';
|
|
345
357
|
'color.border.accent.teal': 'var(--ds-border-accent-teal)';
|
|
346
358
|
'color.border.accent.magenta': 'var(--ds-border-accent-magenta)';
|
|
359
|
+
'color.border.accent.gray': 'var(--ds-border-accent-gray)';
|
|
347
360
|
'color.border': 'var(--ds-border)';
|
|
361
|
+
'color.border.bold': 'var(--ds-border-bold)';
|
|
348
362
|
'color.border.inverse': 'var(--ds-border-inverse)';
|
|
349
363
|
'color.border.focused': 'var(--ds-border-focused)';
|
|
350
364
|
'color.border.input': 'var(--ds-border-input)';
|
|
@@ -406,6 +420,10 @@ export declare type CSSTokenMap = {
|
|
|
406
420
|
'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
|
|
407
421
|
'color.background.accent.magenta': 'var(--ds-background-accent-magenta)';
|
|
408
422
|
'color.background.accent.magenta.bold': 'var(--ds-background-accent-magenta-bold)';
|
|
423
|
+
'color.background.accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
|
|
424
|
+
'color.background.accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
|
|
425
|
+
'color.background.accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
|
|
426
|
+
'color.background.accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
|
|
409
427
|
'color.background.disabled': 'var(--ds-background-disabled)';
|
|
410
428
|
'color.background.inverse.subtle': 'var(--ds-background-inverse-subtle)';
|
|
411
429
|
'color.background.inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::f6554dd5fa7c18bf2250697f2e567297>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: ({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::27eae6ae1ffaceb474ba5af373b377f1>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: ({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::dbbb6d07f548d897a8888f293192334a>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
6
|
+
export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.[default]' | 'color.border.bold' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|