@atlaskit/button 16.1.3 → 16.1.4

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/shared/button-base.js +2 -4
  3. package/dist/cjs/shared/colors.js +160 -162
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/shared/button-base.js +2 -3
  6. package/dist/es2019/shared/colors.js +160 -161
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/shared/button-base.js +2 -3
  9. package/dist/esm/shared/colors.js +160 -161
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 16.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
8
+ - Updated dependencies
9
+
3
10
  ## 16.1.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/shared/button-base.js CHANGED
@@ -23,8 +23,6 @@ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-fo
23
23
 
24
24
  var _colors = require("@atlaskit/theme/colors");
25
25
 
26
- var _tokens = require("@atlaskit/tokens");
27
-
28
26
  var _blockEvents = _interopRequireDefault(require("./block-events"));
29
27
 
30
28
  var _css = require("./css");
@@ -102,7 +100,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
102
100
  action: 'clicked',
103
101
  componentName: 'button',
104
102
  packageName: "@atlaskit/button",
105
- packageVersion: "16.1.3",
103
+ packageVersion: "16.1.4",
106
104
  analyticsData: analyticsContext
107
105
  }); // Button currently calls preventDefault, which is not standard button behaviour
108
106
 
@@ -134,7 +132,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
134
132
  if (isSelected || isDisabled || appearance === 'warning') {
135
133
  spinnerHackCss = {
136
134
  '[data-theme] & svg': {
137
- stroke: isSelected || isDisabled ? (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500) : (0, _tokens.token)('color.text.onBoldWarning', _colors.N500)
135
+ stroke: isSelected || isDisabled ? "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")") : "var(--ds-text-onBoldWarning, ".concat(_colors.N500, ")")
138
136
  }
139
137
  };
140
138
  }
package/dist/cjs/shared/colors.js CHANGED
@@ -9,8 +9,6 @@ exports.default = void 0;
9
9
 
10
10
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
11
11
 
12
- var _tokens = require("@atlaskit/tokens");
13
-
14
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
13
 
16
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,106 +21,106 @@ var values = {
23
21
  background: {
24
22
  default: {
25
23
  default: {
26
- light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20A),
27
- dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN70)
24
+ light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N20A, ")"),
25
+ dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN70, ")")
28
26
  },
29
27
  hover: {
30
- light: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.N30A),
31
- dark: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.DN60)
28
+ light: "var(--ds-background-subtleNeutral-hover, ".concat(colors.N30A, ")"),
29
+ dark: "var(--ds-background-subtleNeutral-hover, ".concat(colors.DN60, ")")
32
30
  },
33
31
  active: {
34
- light: (0, _tokens.token)('color.background.subtleNeutral.pressed', fadedB75),
35
- dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.B75)
32
+ light: "var(--ds-background-subtleNeutral-pressed, ".concat(fadedB75, ")"),
33
+ dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.B75, ")")
36
34
  },
37
35
  disabled: {
38
- light: (0, _tokens.token)('color.background.disabled', colors.N20A),
39
- dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
36
+ light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
37
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
40
38
  },
41
39
  selected: {
42
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
43
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
40
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
41
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
44
42
  },
45
43
  focusSelected: {
46
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
47
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
44
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
45
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
48
46
  }
49
47
  },
50
48
  primary: {
51
49
  default: {
52
- light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B400),
53
- dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
50
+ light: "var(--ds-background-boldBrand-resting, ".concat(colors.B400, ")"),
51
+ dark: "var(--ds-background-boldBrand-resting, ".concat(colors.B100, ")")
54
52
  },
55
53
  hover: {
56
- light: (0, _tokens.token)('color.background.boldBrand.hover', colors.B300),
57
- dark: (0, _tokens.token)('color.background.boldBrand.hover', colors.B75)
54
+ light: "var(--ds-background-boldBrand-hover, ".concat(colors.B300, ")"),
55
+ dark: "var(--ds-background-boldBrand-hover, ".concat(colors.B75, ")")
58
56
  },
59
57
  active: {
60
- light: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B500),
61
- dark: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B200)
58
+ light: "var(--ds-background-boldBrand-pressed, ".concat(colors.B500, ")"),
59
+ dark: "var(--ds-background-boldBrand-pressed, ".concat(colors.B200, ")")
62
60
  },
63
61
  disabled: {
64
- light: (0, _tokens.token)('color.background.disabled', colors.N20A),
65
- dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
62
+ light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
63
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
66
64
  },
67
65
  selected: {
68
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
69
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
66
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
67
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
70
68
  },
71
69
  focusSelected: {
72
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
73
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
70
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
71
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
74
72
  }
75
73
  },
76
74
  warning: {
77
75
  default: {
78
- light: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300),
79
- dark: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300)
76
+ light: "var(--ds-background-boldWarning-resting, ".concat(colors.Y300, ")"),
77
+ dark: "var(--ds-background-boldWarning-resting, ".concat(colors.Y300, ")")
80
78
  },
81
79
  hover: {
82
- light: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200),
83
- dark: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200)
80
+ light: "var(--ds-background-boldWarning-hover, ".concat(colors.Y200, ")"),
81
+ dark: "var(--ds-background-boldWarning-hover, ".concat(colors.Y200, ")")
84
82
  },
85
83
  active: {
86
- light: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400),
87
- dark: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400)
84
+ light: "var(--ds-background-boldWarning-pressed, ".concat(colors.Y400, ")"),
85
+ dark: "var(--ds-background-boldWarning-pressed, ".concat(colors.Y400, ")")
88
86
  },
89
87
  disabled: {
90
- light: (0, _tokens.token)('color.background.disabled', colors.N20A),
91
- dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
88
+ light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
89
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
92
90
  },
93
91
  selected: {
94
- light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
95
- dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
92
+ light: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")"),
93
+ dark: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")")
96
94
  },
97
95
  focusSelected: {
98
- light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
99
- dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
96
+ light: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")"),
97
+ dark: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")")
100
98
  }
101
99
  },
102
100
  danger: {
103
101
  default: {
104
- light: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400),
105
- dark: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400)
102
+ light: "var(--ds-background-boldDanger-resting, ".concat(colors.R400, ")"),
103
+ dark: "var(--ds-background-boldDanger-resting, ".concat(colors.R400, ")")
106
104
  },
107
105
  hover: {
108
- light: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300),
109
- dark: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300)
106
+ light: "var(--ds-background-boldDanger-hover, ".concat(colors.R300, ")"),
107
+ dark: "var(--ds-background-boldDanger-hover, ".concat(colors.R300, ")")
110
108
  },
111
109
  active: {
112
- light: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500),
113
- dark: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500)
110
+ light: "var(--ds-background-boldDanger-pressed, ".concat(colors.R500, ")"),
111
+ dark: "var(--ds-background-boldDanger-pressed, ".concat(colors.R500, ")")
114
112
  },
115
113
  disabled: {
116
- light: (0, _tokens.token)('color.background.disabled', colors.N20A),
117
- dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
114
+ light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
115
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
118
116
  },
119
117
  selected: {
120
- light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
121
- dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
118
+ light: "var(--ds-background-selected-resting, ".concat(colors.R500, ")"),
119
+ dark: "var(--ds-background-selected-resting, ".concat(colors.R500, ")")
122
120
  },
123
121
  focusSelected: {
124
- light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
125
- dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
122
+ light: "var(--ds-background-selected-resting, ".concat(colors.R500, ")"),
123
+ dark: "var(--ds-background-selected-resting, ".concat(colors.R500, ")")
126
124
  }
127
125
  },
128
126
  link: {
@@ -131,12 +129,12 @@ var values = {
131
129
  dark: 'none'
132
130
  },
133
131
  selected: {
134
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
135
- dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
132
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
133
+ dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
136
134
  },
137
135
  focusSelected: {
138
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
139
- dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
136
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
137
+ dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
140
138
  }
141
139
  },
142
140
  subtle: {
@@ -145,24 +143,24 @@ var values = {
145
143
  dark: 'none'
146
144
  },
147
145
  hover: {
148
- light: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.N30A),
149
- dark: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.DN60)
146
+ light: "var(--ds-background-transparentNeutral-hover, ".concat(colors.N30A, ")"),
147
+ dark: "var(--ds-background-transparentNeutral-hover, ".concat(colors.DN60, ")")
150
148
  },
151
149
  active: {
152
- light: (0, _tokens.token)('color.background.transparentNeutral.pressed', fadedB75),
153
- dark: (0, _tokens.token)('color.background.transparentNeutral.pressed', colors.B75)
150
+ light: "var(--ds-background-transparentNeutral-pressed, ".concat(fadedB75, ")"),
151
+ dark: "var(--ds-background-transparentNeutral-pressed, ".concat(colors.B75, ")")
154
152
  },
155
153
  disabled: {
156
154
  light: 'none',
157
155
  dark: 'none'
158
156
  },
159
157
  selected: {
160
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
161
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
158
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
159
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
162
160
  },
163
161
  focusSelected: {
164
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
165
- dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
162
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
163
+ dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
166
164
  }
167
165
  },
168
166
  'subtle-link': {
@@ -171,236 +169,236 @@ var values = {
171
169
  dark: 'none'
172
170
  },
173
171
  selected: {
174
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
175
- dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
172
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
173
+ dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
176
174
  },
177
175
  focusSelected: {
178
- light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
179
- dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
176
+ light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
177
+ dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
180
178
  }
181
179
  }
182
180
  },
183
181
  boxShadowColor: {
184
182
  default: {
185
183
  focus: {
186
- light: (0, _tokens.token)('color.border.focus', colors.B100),
187
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
184
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
185
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
188
186
  },
189
187
  focusSelected: {
190
- light: (0, _tokens.token)('color.border.focus', colors.B100),
191
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
188
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
189
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
192
190
  }
193
191
  },
194
192
  primary: {
195
193
  focus: {
196
- light: (0, _tokens.token)('color.border.focus', colors.B100),
197
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
194
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
195
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
198
196
  },
199
197
  focusSelected: {
200
- light: (0, _tokens.token)('color.border.focus', colors.B100),
201
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
198
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
199
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
202
200
  }
203
201
  },
204
202
  warning: {
205
203
  focus: {
206
- light: (0, _tokens.token)('color.border.focus', colors.Y500),
207
- dark: (0, _tokens.token)('color.border.focus', colors.Y500)
204
+ light: "var(--ds-border-focus, ".concat(colors.Y500, ")"),
205
+ dark: "var(--ds-border-focus, ".concat(colors.Y500, ")")
208
206
  },
209
207
  focusSelected: {
210
- light: (0, _tokens.token)('color.border.focus', colors.Y500),
211
- dark: (0, _tokens.token)('color.border.focus', colors.Y500)
208
+ light: "var(--ds-border-focus, ".concat(colors.Y500, ")"),
209
+ dark: "var(--ds-border-focus, ".concat(colors.Y500, ")")
212
210
  }
213
211
  },
214
212
  danger: {
215
213
  focus: {
216
- light: (0, _tokens.token)('color.border.focus', colors.R100),
217
- dark: (0, _tokens.token)('color.border.focus', colors.R100)
214
+ light: "var(--ds-border-focus, ".concat(colors.R100, ")"),
215
+ dark: "var(--ds-border-focus, ".concat(colors.R100, ")")
218
216
  },
219
217
  focusSelected: {
220
- light: (0, _tokens.token)('color.border.focus', colors.R100),
221
- dark: (0, _tokens.token)('color.border.focus', colors.R100)
218
+ light: "var(--ds-border-focus, ".concat(colors.R100, ")"),
219
+ dark: "var(--ds-border-focus, ".concat(colors.R100, ")")
222
220
  }
223
221
  },
224
222
  link: {
225
223
  focus: {
226
- light: (0, _tokens.token)('color.border.focus', colors.B100),
227
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
224
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
225
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
228
226
  },
229
227
  focusSelected: {
230
- light: (0, _tokens.token)('color.border.focus', colors.B100),
231
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
228
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
229
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
232
230
  }
233
231
  },
234
232
  subtle: {
235
233
  focus: {
236
- light: (0, _tokens.token)('color.border.focus', colors.B100),
237
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
234
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
235
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
238
236
  },
239
237
  focusSelected: {
240
- light: (0, _tokens.token)('color.border.focus', colors.B100),
241
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
238
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
239
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
242
240
  }
243
241
  },
244
242
  'subtle-link': {
245
243
  focus: {
246
- light: (0, _tokens.token)('color.border.focus', colors.B100),
247
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
244
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
245
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
248
246
  },
249
247
  focusSelected: {
250
- light: (0, _tokens.token)('color.border.focus', colors.B100),
251
- dark: (0, _tokens.token)('color.border.focus', colors.B75)
248
+ light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
249
+ dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
252
250
  }
253
251
  }
254
252
  },
255
253
  color: {
256
254
  default: {
257
255
  default: {
258
- light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
259
- dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
256
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N500, ")"),
257
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN400, ")")
260
258
  },
261
259
  active: {
262
- light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
263
- dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
260
+ light: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")"),
261
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")")
264
262
  },
265
263
  disabled: {
266
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
267
- dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
264
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
265
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
268
266
  },
269
267
  selected: {
270
- light: (0, _tokens.token)('color.text.selected', colors.N20),
271
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
268
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
269
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
272
270
  },
273
271
  focusSelected: {
274
- light: (0, _tokens.token)('color.text.selected', colors.N20),
275
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
272
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
273
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
276
274
  }
277
275
  },
278
276
  primary: {
279
277
  default: {
280
- light: (0, _tokens.token)('color.text.onBold', colors.N0),
281
- dark: (0, _tokens.token)('color.text.onBold', colors.DN30)
278
+ light: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
279
+ dark: "var(--ds-text-onBold, ".concat(colors.DN30, ")")
282
280
  },
283
281
  disabled: {
284
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
285
- dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
282
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
283
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
286
284
  },
287
285
  selected: {
288
- light: (0, _tokens.token)('color.text.selected', colors.N20),
289
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
286
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
287
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
290
288
  },
291
289
  focusSelected: {
292
- light: (0, _tokens.token)('color.text.selected', colors.N20),
293
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
290
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
291
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
294
292
  }
295
293
  },
296
294
  warning: {
297
295
  default: {
298
- light: (0, _tokens.token)('color.text.onBoldWarning', colors.N800),
299
- dark: (0, _tokens.token)('color.text.onBoldWarning', colors.N800)
296
+ light: "var(--ds-text-onBoldWarning, ".concat(colors.N800, ")"),
297
+ dark: "var(--ds-text-onBoldWarning, ".concat(colors.N800, ")")
300
298
  },
301
299
  disabled: {
302
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
303
- dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
300
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
301
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
304
302
  },
305
303
  selected: {
306
- light: (0, _tokens.token)('color.text.selected', colors.N800),
307
- dark: (0, _tokens.token)('color.text.selected', colors.N800)
304
+ light: "var(--ds-text-selected, ".concat(colors.N800, ")"),
305
+ dark: "var(--ds-text-selected, ".concat(colors.N800, ")")
308
306
  },
309
307
  focusSelected: {
310
- light: (0, _tokens.token)('color.text.selected', colors.N800),
311
- dark: (0, _tokens.token)('color.text.selected', colors.N800)
308
+ light: "var(--ds-text-selected, ".concat(colors.N800, ")"),
309
+ dark: "var(--ds-text-selected, ".concat(colors.N800, ")")
312
310
  }
313
311
  },
314
312
  danger: {
315
313
  default: {
316
- light: (0, _tokens.token)('color.text.onBold', colors.N0),
317
- dark: (0, _tokens.token)('color.text.onBold', colors.N0)
314
+ light: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
315
+ dark: "var(--ds-text-onBold, ".concat(colors.N0, ")")
318
316
  },
319
317
  disabled: {
320
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
321
- dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
318
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
319
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
322
320
  },
323
321
  selected: {
324
- light: (0, _tokens.token)('color.text.selected', colors.N0),
325
- dark: (0, _tokens.token)('color.text.selected', colors.N0)
322
+ light: "var(--ds-text-selected, ".concat(colors.N0, ")"),
323
+ dark: "var(--ds-text-selected, ".concat(colors.N0, ")")
326
324
  },
327
325
  focusSelected: {
328
- light: (0, _tokens.token)('color.text.selected', colors.N0),
329
- dark: (0, _tokens.token)('color.text.selected', colors.N0)
326
+ light: "var(--ds-text-selected, ".concat(colors.N0, ")"),
327
+ dark: "var(--ds-text-selected, ".concat(colors.N0, ")")
330
328
  }
331
329
  },
332
330
  link: {
333
331
  default: {
334
- light: (0, _tokens.token)('color.text.link.resting', colors.B400),
335
- dark: (0, _tokens.token)('color.text.link.resting', colors.B100)
332
+ light: "var(--ds-text-link-resting, ".concat(colors.B400, ")"),
333
+ dark: "var(--ds-text-link-resting, ".concat(colors.B100, ")")
336
334
  },
337
335
  hover: {
338
- light: (0, _tokens.token)('color.text.link.resting', colors.B300),
339
- dark: (0, _tokens.token)('color.text.link.resting', colors.B75)
336
+ light: "var(--ds-text-link-resting, ".concat(colors.B300, ")"),
337
+ dark: "var(--ds-text-link-resting, ".concat(colors.B75, ")")
340
338
  },
341
339
  active: {
342
- light: (0, _tokens.token)('color.text.link.pressed', colors.B500),
343
- dark: (0, _tokens.token)('color.text.link.pressed', colors.B200)
340
+ light: "var(--ds-text-link-pressed, ".concat(colors.B500, ")"),
341
+ dark: "var(--ds-text-link-pressed, ".concat(colors.B200, ")")
344
342
  },
345
343
  disabled: {
346
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
347
- dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
344
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
345
+ dark: "var(--ds-text-disabled, ".concat(colors.DN100, ")")
348
346
  },
349
347
  selected: {
350
- light: (0, _tokens.token)('color.text.selected', colors.N20),
351
- dark: (0, _tokens.token)('color.text.selected', colors.N700)
348
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
349
+ dark: "var(--ds-text-selected, ".concat(colors.N700, ")")
352
350
  },
353
351
  focusSelected: {
354
- light: (0, _tokens.token)('color.text.selected', colors.N20),
355
- dark: (0, _tokens.token)('color.text.selected', colors.N700)
352
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
353
+ dark: "var(--ds-text-selected, ".concat(colors.N700, ")")
356
354
  }
357
355
  },
358
356
  subtle: {
359
357
  default: {
360
- light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
361
- dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
358
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N500, ")"),
359
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN400, ")")
362
360
  },
363
361
  active: {
364
- light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
365
- dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
362
+ light: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")"),
363
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")")
366
364
  },
367
365
  disabled: {
368
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
369
- dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
366
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
367
+ dark: "var(--ds-text-disabled, ".concat(colors.DN100, ")")
370
368
  },
371
369
  selected: {
372
- light: (0, _tokens.token)('color.text.selected', colors.N20),
373
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
370
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
371
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
374
372
  },
375
373
  focusSelected: {
376
- light: (0, _tokens.token)('color.text.selected', colors.N20),
377
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
374
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
375
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
378
376
  }
379
377
  },
380
378
  'subtle-link': {
381
379
  default: {
382
- light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
383
- dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.DN400)
380
+ light: "var(--ds-text-mediumEmphasis, ".concat(colors.N200, ")"),
381
+ dark: "var(--ds-text-mediumEmphasis, ".concat(colors.DN400, ")")
384
382
  },
385
383
  hover: {
386
- light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N90),
387
- dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.B50)
384
+ light: "var(--ds-text-mediumEmphasis, ".concat(colors.N90, ")"),
385
+ dark: "var(--ds-text-mediumEmphasis, ".concat(colors.B50, ")")
388
386
  },
389
387
  active: {
390
- light: (0, _tokens.token)('color.text.highEmphasis', colors.N400),
391
- dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN300)
388
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N400, ")"),
389
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN300, ")")
392
390
  },
393
391
  disabled: {
394
- light: (0, _tokens.token)('color.text.disabled', colors.N70),
395
- dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
392
+ light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
393
+ dark: "var(--ds-text-disabled, ".concat(colors.DN100, ")")
396
394
  },
397
395
  selected: {
398
- light: (0, _tokens.token)('color.text.selected', colors.N20),
399
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
396
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
397
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
400
398
  },
401
399
  focusSelected: {
402
- light: (0, _tokens.token)('color.text.selected', colors.N20),
403
- dark: (0, _tokens.token)('color.text.selected', colors.DN400)
400
+ light: "var(--ds-text-selected, ".concat(colors.N20, ")"),
401
+ dark: "var(--ds-text-selected, ".concat(colors.DN400, ")")
404
402
  }
405
403
  }
406
404
  }