@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.
Files changed (56) hide show
  1. package/.eslintrc.js +35 -0
  2. package/CHANGELOG.md +27 -0
  3. package/README.md +1 -1
  4. package/css/atlassian-dark.css +10 -1
  5. package/css/atlassian-light.css +10 -1
  6. package/dist/cjs/artifacts/token-default-values.js +10 -1
  7. package/dist/cjs/artifacts/token-names.js +10 -1
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +196 -7
  9. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +196 -7
  10. package/dist/cjs/babel-plugin/plugin.js +57 -53
  11. package/dist/cjs/get-token.js +1 -1
  12. package/dist/cjs/tokens/atlassian-dark/color/accent.js +28 -0
  13. package/dist/cjs/tokens/atlassian-dark/color/border.js +3 -0
  14. package/dist/cjs/tokens/atlassian-light/color/accent.js +28 -0
  15. package/dist/cjs/tokens/atlassian-light/color/border.js +3 -0
  16. package/dist/cjs/tokens/default/color/accent.js +70 -2
  17. package/dist/cjs/tokens/default/color/border.js +8 -0
  18. package/dist/cjs/tokens/default/deprecated/deprecated.js +1 -1
  19. package/dist/cjs/version.json +1 -1
  20. package/dist/es2019/artifacts/token-default-values.js +10 -1
  21. package/dist/es2019/artifacts/token-names.js +10 -1
  22. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +196 -7
  23. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +196 -7
  24. package/dist/es2019/babel-plugin/plugin.js +50 -45
  25. package/dist/es2019/get-token.js +1 -1
  26. package/dist/es2019/tokens/atlassian-dark/color/accent.js +28 -0
  27. package/dist/es2019/tokens/atlassian-dark/color/border.js +3 -0
  28. package/dist/es2019/tokens/atlassian-light/color/accent.js +28 -0
  29. package/dist/es2019/tokens/atlassian-light/color/border.js +3 -0
  30. package/dist/es2019/tokens/default/color/accent.js +70 -2
  31. package/dist/es2019/tokens/default/color/border.js +8 -0
  32. package/dist/es2019/tokens/default/deprecated/deprecated.js +1 -1
  33. package/dist/es2019/version.json +1 -1
  34. package/dist/esm/artifacts/token-default-values.js +10 -1
  35. package/dist/esm/artifacts/token-names.js +10 -1
  36. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +196 -7
  37. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +196 -7
  38. package/dist/esm/babel-plugin/plugin.js +57 -53
  39. package/dist/esm/get-token.js +1 -1
  40. package/dist/esm/tokens/atlassian-dark/color/accent.js +28 -0
  41. package/dist/esm/tokens/atlassian-dark/color/border.js +3 -0
  42. package/dist/esm/tokens/atlassian-light/color/accent.js +28 -0
  43. package/dist/esm/tokens/atlassian-light/color/border.js +3 -0
  44. package/dist/esm/tokens/default/color/accent.js +70 -2
  45. package/dist/esm/tokens/default/color/border.js +8 -0
  46. package/dist/esm/tokens/default/deprecated/deprecated.js +1 -1
  47. package/dist/esm/version.json +1 -1
  48. package/dist/types/artifacts/token-default-values.d.ts +10 -1
  49. package/dist/types/artifacts/token-names.d.ts +19 -1
  50. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  51. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  52. package/dist/types/artifacts/types-internal.d.ts +2 -2
  53. package/dist/types/artifacts/types.d.ts +2 -2
  54. package/dist/types/babel-plugin/plugin.d.ts +5 -5
  55. package/dist/types/types.d.ts +13 -0
  56. 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
- CallExpression: function (_CallExpression) {
8
- function CallExpression(_x, _x2) {
9
- return _CallExpression.apply(this, arguments);
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
- CallExpression.toString = function () {
13
- return _CallExpression.toString();
14
- };
15
+ CallExpression.toString = function () {
16
+ return _CallExpression.toString();
17
+ };
15
18
 
16
- return CallExpression;
17
- }(function (path, state) {
18
- var tokenImportScope = getTokenImportScope(path);
19
+ return CallExpression;
20
+ }(function (path) {
21
+ var tokenImportScope = getTokenImportScope(path);
19
22
 
20
- if (!tokenImportScope) {
21
- return;
22
- } // Check arguments have correct format
23
+ if (!tokenImportScope) {
24
+ return;
25
+ } // Check arguments have correct format
23
26
 
24
27
 
25
- if (!path.node.arguments[0]) {
26
- throw new Error("token() requires at least one argument");
27
- } else if (!t.isStringLiteral(path.node.arguments[0])) {
28
- throw new Error("token() must have a string as the first argument");
29
- } else if (path.node.arguments.length > 2) {
30
- throw new Error("token() does not accept ".concat(path.node.arguments.length, " arguments"));
31
- } // Check the token exists
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
- var tokenName = path.node.arguments[0].value;
35
- var cssTokenValue = tokenNames[tokenName];
37
+ var tokenName = path.node.arguments[0].value;
38
+ var cssTokenValue = tokenNames[tokenName];
36
39
 
37
- if (!cssTokenValue) {
38
- throw new Error("token '".concat(tokenName, "' does not exist"));
39
- }
40
+ if (!cssTokenValue) {
41
+ throw new Error("token '".concat(tokenName, "' does not exist"));
42
+ }
40
43
 
41
- var replacementNode; // if no fallback is set, optionally find one from the default theme
44
+ var replacementNode; // if no fallback is set, optionally find one from the default theme
42
45
 
43
- if (path.node.arguments.length < 2) {
44
- if (state.opts.shouldUseAutoFallback) {
45
- replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
46
- } else {
47
- replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
48
- }
49
- } // Handle fallbacks
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
- var fallback = path.node.arguments[1];
55
+ var fallback = path.node.arguments[1];
53
56
 
54
- if (t.isStringLiteral(fallback)) {
55
- // String literals can be concatenated into css variable call
56
- // Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
57
- replacementNode = t.stringLiteral(fallback.value ? "var(".concat(cssTokenValue, ", ").concat(fallback.value, ")") : "var(".concat(cssTokenValue, ")"));
58
- } else if (t.isExpression(fallback)) {
59
- // Expressions should be placed in a template string/literal
60
- replacementNode = t.templateLiteral([t.templateElement({
61
- cooked: "var(".concat(cssTokenValue, ", "),
62
- // Currently we create a "raw" value by inserting escape characters via regex (https://github.com/babel/babel/issues/9242)
63
- raw: "var(".concat(cssTokenValue.replace(/\\|`|\${/g, '\\$&'), ", ")
64
- }, false), t.templateElement({
65
- raw: ')',
66
- cooked: ')'
67
- }, true)], [fallback]);
68
- } // Replace path and call scope.crawl() to refresh the scope bindings + references
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
- replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
74
+ replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
72
75
 
73
- tokenImportScope.crawl();
74
- }),
75
- Program: {
76
+ tokenImportScope.crawl();
77
+ })
78
+ });
79
+ },
76
80
  exit: function exit(path) {
77
81
  path.traverse({
78
82
  ImportDeclaration: function ImportDeclaration(path) {
@@ -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";
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
  }
@@ -4,6 +4,9 @@ var color = {
4
4
  '[default]': {
5
5
  value: 'DN300A'
6
6
  },
7
+ bold: {
8
+ value: 'DN600'
9
+ },
7
10
  inverse: {
8
11
  value: 'DN0'
9
12
  },
@@ -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
  }
@@ -4,6 +4,9 @@ var color = {
4
4
  '[default]': {
5
5
  value: 'N300A'
6
6
  },
7
+ bold: {
8
+ value: 'N600'
9
+ },
7
10
  inverse: {
8
11
  value: 'N0'
9
12
  },
@@ -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 coloured tags.'
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 coloured tags.'
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 coloured tags.'
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: {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.5",
3
+ "version": "0.10.8",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -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::3dd78c77e87d6557a4bade2368be7eb8>>
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::1ab44c57c547c6cb7bb389b286bdd50f>>
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::2790b3e5387d05c20675eb77bb4ec986>>
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::7cdaec19ecd5c921bc01bf32e95ed909>>
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::b41790657bd6ccb424e840279549eee6>>
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';