@atlaskit/ds-explorations 3.5.2 → 4.0.1

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 (65) hide show
  1. package/CHANGELOG.md +370 -358
  2. package/README.md +4 -3
  3. package/afm-jira/tsconfig.json +24 -0
  4. package/dist/cjs/components/interaction-surface.partial.js +1 -1
  5. package/dist/cjs/index.js +0 -7
  6. package/dist/cjs/internal/color-map.js +1 -1
  7. package/dist/es2019/components/interaction-surface.partial.js +1 -1
  8. package/dist/es2019/index.js +0 -1
  9. package/dist/es2019/internal/color-map.js +1 -1
  10. package/dist/esm/components/interaction-surface.partial.js +1 -1
  11. package/dist/esm/index.js +0 -1
  12. package/dist/esm/internal/color-map.js +1 -1
  13. package/dist/types/components/interaction-surface.partial.d.ts +1 -1
  14. package/dist/types/index.d.ts +0 -2
  15. package/dist/types/internal/color-map.d.ts +1 -1
  16. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +1 -1
  17. package/dist/types-ts4.5/index.d.ts +0 -2
  18. package/dist/types-ts4.5/internal/color-map.d.ts +1 -1
  19. package/docs/01-basic.tsx +11 -13
  20. package/examples/99-interactions.tsx +174 -176
  21. package/package.json +6 -10
  22. package/report.api.md +127 -126
  23. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +540 -540
  24. package/scripts/__tests__/codegen.test.tsx +15 -17
  25. package/scripts/codegen-styles.tsx +25 -92
  26. package/scripts/color-codegen-template.tsx +69 -82
  27. package/scripts/color-map-template.tsx +24 -29
  28. package/scripts/dimension-codegen-template.tsx +32 -35
  29. package/scripts/interaction-codegen.tsx +61 -74
  30. package/scripts/misc-codegen-template.tsx +23 -25
  31. package/scripts/utils.tsx +30 -34
  32. package/src/components/__tests__/unit/interaction-suface.test.tsx +61 -62
  33. package/src/components/interaction-surface.partial.tsx +412 -416
  34. package/src/components/surface-provider.tsx +1 -1
  35. package/src/components/types.tsx +10 -10
  36. package/src/constants.tsx +9 -9
  37. package/src/index.tsx +0 -2
  38. package/src/internal/color-map.tsx +28 -28
  39. package/src/internal/role-to-element.tsx +21 -21
  40. package/tsconfig.app.json +44 -44
  41. package/tsconfig.dev.json +71 -83
  42. package/dist/cjs/components/text.partial.js +0 -280
  43. package/dist/cjs/internal/spacing-scale.js +0 -15
  44. package/dist/es2019/components/text.partial.js +0 -271
  45. package/dist/es2019/internal/spacing-scale.js +0 -9
  46. package/dist/esm/components/text.partial.js +0 -274
  47. package/dist/esm/internal/spacing-scale.js +0 -9
  48. package/dist/types/components/text.partial.d.ts +0 -157
  49. package/dist/types/internal/spacing-scale.d.ts +0 -9
  50. package/dist/types-ts4.5/components/text.partial.d.ts +0 -162
  51. package/dist/types-ts4.5/internal/spacing-scale.d.ts +0 -24
  52. package/examples/02-text-advanced.tsx +0 -30
  53. package/examples/02-text.tsx +0 -110
  54. package/examples/06-section-message.tsx +0 -82
  55. package/examples/07-comment.tsx +0 -51
  56. package/examples/08-lozenge.tsx +0 -34
  57. package/scripts/spacing-codegen-template.tsx +0 -66
  58. package/scripts/spacing-scale-template.tsx +0 -24
  59. package/scripts/typography-codegen-template.tsx +0 -72
  60. package/src/components/__tests__/unit/text.test.tsx +0 -64
  61. package/src/components/__tests__/vr-tests/__snapshots__/text-snapshot-test/text--default.png +0 -0
  62. package/src/components/__tests__/vr-tests/text-snapshot-test.vr.tsx +0 -6
  63. package/src/components/text.partial.tsx +0 -375
  64. package/src/internal/spacing-scale.tsx +0 -24
  65. package/text/package.json +0 -15
package/src/components/interaction-surface.partial.tsx CHANGED
@@ -9,20 +9,20 @@ import { SurfaceContext } from './surface-provider';
9
9
  import { type BasePrimitiveProps } from './types';
10
10
 
11
11
  const baseStyles = css({
12
- position: 'absolute',
13
- inset: 0,
14
- borderRadius: 'inherit',
15
- cursor: 'pointer',
16
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
17
- '~ *': {
18
- position: 'relative',
19
- pointerEvents: 'none',
20
- },
12
+ position: 'absolute',
13
+ inset: 0,
14
+ borderRadius: 'inherit',
15
+ cursor: 'pointer',
16
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
17
+ '~ *': {
18
+ position: 'relative',
19
+ pointerEvents: 'none',
20
+ },
21
21
  });
22
22
 
23
23
  interface InteractionSurfaceProps extends BasePrimitiveProps {
24
- children: ReactNode;
25
- appearance?: InteractionBackgroundColor;
24
+ children: ReactNode;
25
+ appearance?: InteractionBackgroundColor;
26
26
  }
27
27
 
28
28
  /**
@@ -37,427 +37,423 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
37
37
  * </Box>
38
38
  * ```
39
39
  */
40
- const InteractionSurface = ({
41
- appearance,
42
- children,
43
- testId,
44
- }: InteractionSurfaceProps) => {
45
- const defaultSurface = useContext(SurfaceContext);
46
- let surface = (appearance || defaultSurface) as InteractionBackgroundColor;
40
+ const InteractionSurface = ({ appearance, children, testId }: InteractionSurfaceProps) => {
41
+ const defaultSurface = useContext(SurfaceContext);
42
+ let surface = (appearance || defaultSurface) as InteractionBackgroundColor;
47
43
 
48
- // This case will occur if the Box has not set a bg color and the ancestor surface
49
- // is an elevation. An alternative would be to throw an error here as it may be better
50
- // to ensure correct predictable behaviour based on user specification.
51
- if (!(surface in backgroundActiveColorMap)) {
52
- surface = 'neutral';
53
- }
54
- return (
55
- <Fragment>
56
- <span
57
- data-testid={testId}
58
- css={[
59
- baseStyles,
60
- surface && backgroundHoverColorMap[surface],
61
- surface && backgroundActiveColorMap[surface],
62
- ]}
63
- />
64
- {children}
65
- </Fragment>
66
- );
44
+ // This case will occur if the Box has not set a bg color and the ancestor surface
45
+ // is an elevation. An alternative would be to throw an error here as it may be better
46
+ // to ensure correct predictable behaviour based on user specification.
47
+ if (!(surface in backgroundActiveColorMap)) {
48
+ surface = 'neutral';
49
+ }
50
+ return (
51
+ <Fragment>
52
+ <span
53
+ data-testid={testId}
54
+ css={[
55
+ baseStyles,
56
+ surface && backgroundHoverColorMap[surface],
57
+ surface && backgroundActiveColorMap[surface],
58
+ ]}
59
+ />
60
+ {children}
61
+ </Fragment>
62
+ );
67
63
  };
68
64
 
69
65
  export default InteractionSurface;
70
66
 
71
67
  /**
72
68
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
73
- * @codegen <<SignedSource::700f09143685cc887dba88cc11533b9c>>
69
+ * @codegen <<SignedSource::20a64bcc5ec33a2c6ae1165f4a723310>>
74
70
  * @codegenId interactions
75
71
  * @codegenCommand yarn codegen-styles
76
72
  * @codegenParams ["background"]
77
73
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
78
74
  */
79
75
  const backgroundActiveColorMap = {
80
- 'accent.lime.subtlest': css({
81
- ':active': { backgroundColor: token('color.background.accent.lime.subtlest.pressed') },
82
- }),
83
- 'accent.lime.subtler': css({
84
- ':active': { backgroundColor: token('color.background.accent.lime.subtler.pressed') },
85
- }),
86
- 'accent.lime.subtle': css({
87
- ':active': { backgroundColor: token('color.background.accent.lime.subtle.pressed') },
88
- }),
89
- 'accent.lime.bolder': css({
90
- ':active': { backgroundColor: token('color.background.accent.lime.bolder.pressed') },
91
- }),
92
- 'accent.red.subtlest': css({
93
- ':active': { backgroundColor: token('color.background.accent.red.subtlest.pressed') },
94
- }),
95
- 'accent.red.subtler': css({
96
- ':active': { backgroundColor: token('color.background.accent.red.subtler.pressed') },
97
- }),
98
- 'accent.red.subtle': css({
99
- ':active': { backgroundColor: token('color.background.accent.red.subtle.pressed') },
100
- }),
101
- 'accent.red.bolder': css({
102
- ':active': { backgroundColor: token('color.background.accent.red.bolder.pressed') },
103
- }),
104
- 'accent.orange.subtlest': css({
105
- ':active': { backgroundColor: token('color.background.accent.orange.subtlest.pressed') },
106
- }),
107
- 'accent.orange.subtler': css({
108
- ':active': { backgroundColor: token('color.background.accent.orange.subtler.pressed') },
109
- }),
110
- 'accent.orange.subtle': css({
111
- ':active': { backgroundColor: token('color.background.accent.orange.subtle.pressed') },
112
- }),
113
- 'accent.orange.bolder': css({
114
- ':active': { backgroundColor: token('color.background.accent.orange.bolder.pressed') },
115
- }),
116
- 'accent.yellow.subtlest': css({
117
- ':active': { backgroundColor: token('color.background.accent.yellow.subtlest.pressed') },
118
- }),
119
- 'accent.yellow.subtler': css({
120
- ':active': { backgroundColor: token('color.background.accent.yellow.subtler.pressed') },
121
- }),
122
- 'accent.yellow.subtle': css({
123
- ':active': { backgroundColor: token('color.background.accent.yellow.subtle.pressed') },
124
- }),
125
- 'accent.yellow.bolder': css({
126
- ':active': { backgroundColor: token('color.background.accent.yellow.bolder.pressed') },
127
- }),
128
- 'accent.green.subtlest': css({
129
- ':active': { backgroundColor: token('color.background.accent.green.subtlest.pressed') },
130
- }),
131
- 'accent.green.subtler': css({
132
- ':active': { backgroundColor: token('color.background.accent.green.subtler.pressed') },
133
- }),
134
- 'accent.green.subtle': css({
135
- ':active': { backgroundColor: token('color.background.accent.green.subtle.pressed') },
136
- }),
137
- 'accent.green.bolder': css({
138
- ':active': { backgroundColor: token('color.background.accent.green.bolder.pressed') },
139
- }),
140
- 'accent.teal.subtlest': css({
141
- ':active': { backgroundColor: token('color.background.accent.teal.subtlest.pressed') },
142
- }),
143
- 'accent.teal.subtler': css({
144
- ':active': { backgroundColor: token('color.background.accent.teal.subtler.pressed') },
145
- }),
146
- 'accent.teal.subtle': css({
147
- ':active': { backgroundColor: token('color.background.accent.teal.subtle.pressed') },
148
- }),
149
- 'accent.teal.bolder': css({
150
- ':active': { backgroundColor: token('color.background.accent.teal.bolder.pressed') },
151
- }),
152
- 'accent.blue.subtlest': css({
153
- ':active': { backgroundColor: token('color.background.accent.blue.subtlest.pressed') },
154
- }),
155
- 'accent.blue.subtler': css({
156
- ':active': { backgroundColor: token('color.background.accent.blue.subtler.pressed') },
157
- }),
158
- 'accent.blue.subtle': css({
159
- ':active': { backgroundColor: token('color.background.accent.blue.subtle.pressed') },
160
- }),
161
- 'accent.blue.bolder': css({
162
- ':active': { backgroundColor: token('color.background.accent.blue.bolder.pressed') },
163
- }),
164
- 'accent.purple.subtlest': css({
165
- ':active': { backgroundColor: token('color.background.accent.purple.subtlest.pressed') },
166
- }),
167
- 'accent.purple.subtler': css({
168
- ':active': { backgroundColor: token('color.background.accent.purple.subtler.pressed') },
169
- }),
170
- 'accent.purple.subtle': css({
171
- ':active': { backgroundColor: token('color.background.accent.purple.subtle.pressed') },
172
- }),
173
- 'accent.purple.bolder': css({
174
- ':active': { backgroundColor: token('color.background.accent.purple.bolder.pressed') },
175
- }),
176
- 'accent.magenta.subtlest': css({
177
- ':active': { backgroundColor: token('color.background.accent.magenta.subtlest.pressed') },
178
- }),
179
- 'accent.magenta.subtler': css({
180
- ':active': { backgroundColor: token('color.background.accent.magenta.subtler.pressed') },
181
- }),
182
- 'accent.magenta.subtle': css({
183
- ':active': { backgroundColor: token('color.background.accent.magenta.subtle.pressed') },
184
- }),
185
- 'accent.magenta.bolder': css({
186
- ':active': { backgroundColor: token('color.background.accent.magenta.bolder.pressed') },
187
- }),
188
- 'accent.gray.subtlest': css({
189
- ':active': { backgroundColor: token('color.background.accent.gray.subtlest.pressed') },
190
- }),
191
- 'accent.gray.subtler': css({
192
- ':active': { backgroundColor: token('color.background.accent.gray.subtler.pressed') },
193
- }),
194
- 'accent.gray.subtle': css({
195
- ':active': { backgroundColor: token('color.background.accent.gray.subtle.pressed') },
196
- }),
197
- 'accent.gray.bolder': css({
198
- ':active': { backgroundColor: token('color.background.accent.gray.bolder.pressed') },
199
- }),
200
- input: css({
201
- ':active': { backgroundColor: token('color.background.input.pressed') },
202
- }),
203
- 'inverse.subtle': css({
204
- ':active': { backgroundColor: token('color.background.inverse.subtle.pressed') },
205
- }),
206
- neutral: css({
207
- ':active': { backgroundColor: token('color.background.neutral.pressed') },
208
- }),
209
- 'neutral.subtle': css({
210
- ':active': { backgroundColor: token('color.background.neutral.subtle.pressed') },
211
- }),
212
- 'neutral.bold': css({
213
- ':active': { backgroundColor: token('color.background.neutral.bold.pressed') },
214
- }),
215
- selected: css({
216
- ':active': { backgroundColor: token('color.background.selected.pressed') },
217
- }),
218
- 'selected.bold': css({
219
- ':active': { backgroundColor: token('color.background.selected.bold.pressed') },
220
- }),
221
- 'brand.subtlest': css({
222
- ':active': { backgroundColor: token('color.background.brand.subtlest.pressed') },
223
- }),
224
- 'brand.bold': css({
225
- ':active': { backgroundColor: token('color.background.brand.bold.pressed') },
226
- }),
227
- 'brand.boldest': css({
228
- ':active': { backgroundColor: token('color.background.brand.boldest.pressed') },
229
- }),
230
- danger: css({
231
- ':active': { backgroundColor: token('color.background.danger.pressed') },
232
- }),
233
- 'danger.bold': css({
234
- ':active': { backgroundColor: token('color.background.danger.bold.pressed') },
235
- }),
236
- warning: css({
237
- ':active': { backgroundColor: token('color.background.warning.pressed') },
238
- }),
239
- 'warning.bold': css({
240
- ':active': { backgroundColor: token('color.background.warning.bold.pressed') },
241
- }),
242
- success: css({
243
- ':active': { backgroundColor: token('color.background.success.pressed') },
244
- }),
245
- 'success.bold': css({
246
- ':active': { backgroundColor: token('color.background.success.bold.pressed') },
247
- }),
248
- discovery: css({
249
- ':active': { backgroundColor: token('color.background.discovery.pressed') },
250
- }),
251
- 'discovery.bold': css({
252
- ':active': { backgroundColor: token('color.background.discovery.bold.pressed') },
253
- }),
254
- information: css({
255
- ':active': { backgroundColor: token('color.background.information.pressed') },
256
- }),
257
- 'information.bold': css({
258
- ':active': { backgroundColor: token('color.background.information.bold.pressed') },
259
- }),
260
- 'elevation.surface': css({
261
- ':active': { backgroundColor: token('elevation.surface.pressed') },
262
- }),
263
- 'elevation.surface.overlay': css({
264
- ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
265
- }),
266
- 'elevation.surface.raised': css({
267
- ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
268
- }),
76
+ 'accent.lime.subtlest': css({
77
+ ':active': { backgroundColor: token('color.background.accent.lime.subtlest.pressed') },
78
+ }),
79
+ 'accent.lime.subtler': css({
80
+ ':active': { backgroundColor: token('color.background.accent.lime.subtler.pressed') },
81
+ }),
82
+ 'accent.lime.subtle': css({
83
+ ':active': { backgroundColor: token('color.background.accent.lime.subtle.pressed') },
84
+ }),
85
+ 'accent.lime.bolder': css({
86
+ ':active': { backgroundColor: token('color.background.accent.lime.bolder.pressed') },
87
+ }),
88
+ 'accent.red.subtlest': css({
89
+ ':active': { backgroundColor: token('color.background.accent.red.subtlest.pressed') },
90
+ }),
91
+ 'accent.red.subtler': css({
92
+ ':active': { backgroundColor: token('color.background.accent.red.subtler.pressed') },
93
+ }),
94
+ 'accent.red.subtle': css({
95
+ ':active': { backgroundColor: token('color.background.accent.red.subtle.pressed') },
96
+ }),
97
+ 'accent.red.bolder': css({
98
+ ':active': { backgroundColor: token('color.background.accent.red.bolder.pressed') },
99
+ }),
100
+ 'accent.orange.subtlest': css({
101
+ ':active': { backgroundColor: token('color.background.accent.orange.subtlest.pressed') },
102
+ }),
103
+ 'accent.orange.subtler': css({
104
+ ':active': { backgroundColor: token('color.background.accent.orange.subtler.pressed') },
105
+ }),
106
+ 'accent.orange.subtle': css({
107
+ ':active': { backgroundColor: token('color.background.accent.orange.subtle.pressed') },
108
+ }),
109
+ 'accent.orange.bolder': css({
110
+ ':active': { backgroundColor: token('color.background.accent.orange.bolder.pressed') },
111
+ }),
112
+ 'accent.yellow.subtlest': css({
113
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtlest.pressed') },
114
+ }),
115
+ 'accent.yellow.subtler': css({
116
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtler.pressed') },
117
+ }),
118
+ 'accent.yellow.subtle': css({
119
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtle.pressed') },
120
+ }),
121
+ 'accent.yellow.bolder': css({
122
+ ':active': { backgroundColor: token('color.background.accent.yellow.bolder.pressed') },
123
+ }),
124
+ 'accent.green.subtlest': css({
125
+ ':active': { backgroundColor: token('color.background.accent.green.subtlest.pressed') },
126
+ }),
127
+ 'accent.green.subtler': css({
128
+ ':active': { backgroundColor: token('color.background.accent.green.subtler.pressed') },
129
+ }),
130
+ 'accent.green.subtle': css({
131
+ ':active': { backgroundColor: token('color.background.accent.green.subtle.pressed') },
132
+ }),
133
+ 'accent.green.bolder': css({
134
+ ':active': { backgroundColor: token('color.background.accent.green.bolder.pressed') },
135
+ }),
136
+ 'accent.teal.subtlest': css({
137
+ ':active': { backgroundColor: token('color.background.accent.teal.subtlest.pressed') },
138
+ }),
139
+ 'accent.teal.subtler': css({
140
+ ':active': { backgroundColor: token('color.background.accent.teal.subtler.pressed') },
141
+ }),
142
+ 'accent.teal.subtle': css({
143
+ ':active': { backgroundColor: token('color.background.accent.teal.subtle.pressed') },
144
+ }),
145
+ 'accent.teal.bolder': css({
146
+ ':active': { backgroundColor: token('color.background.accent.teal.bolder.pressed') },
147
+ }),
148
+ 'accent.blue.subtlest': css({
149
+ ':active': { backgroundColor: token('color.background.accent.blue.subtlest.pressed') },
150
+ }),
151
+ 'accent.blue.subtler': css({
152
+ ':active': { backgroundColor: token('color.background.accent.blue.subtler.pressed') },
153
+ }),
154
+ 'accent.blue.subtle': css({
155
+ ':active': { backgroundColor: token('color.background.accent.blue.subtle.pressed') },
156
+ }),
157
+ 'accent.blue.bolder': css({
158
+ ':active': { backgroundColor: token('color.background.accent.blue.bolder.pressed') },
159
+ }),
160
+ 'accent.purple.subtlest': css({
161
+ ':active': { backgroundColor: token('color.background.accent.purple.subtlest.pressed') },
162
+ }),
163
+ 'accent.purple.subtler': css({
164
+ ':active': { backgroundColor: token('color.background.accent.purple.subtler.pressed') },
165
+ }),
166
+ 'accent.purple.subtle': css({
167
+ ':active': { backgroundColor: token('color.background.accent.purple.subtle.pressed') },
168
+ }),
169
+ 'accent.purple.bolder': css({
170
+ ':active': { backgroundColor: token('color.background.accent.purple.bolder.pressed') },
171
+ }),
172
+ 'accent.magenta.subtlest': css({
173
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtlest.pressed') },
174
+ }),
175
+ 'accent.magenta.subtler': css({
176
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtler.pressed') },
177
+ }),
178
+ 'accent.magenta.subtle': css({
179
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtle.pressed') },
180
+ }),
181
+ 'accent.magenta.bolder': css({
182
+ ':active': { backgroundColor: token('color.background.accent.magenta.bolder.pressed') },
183
+ }),
184
+ 'accent.gray.subtlest': css({
185
+ ':active': { backgroundColor: token('color.background.accent.gray.subtlest.pressed') },
186
+ }),
187
+ 'accent.gray.subtler': css({
188
+ ':active': { backgroundColor: token('color.background.accent.gray.subtler.pressed') },
189
+ }),
190
+ 'accent.gray.subtle': css({
191
+ ':active': { backgroundColor: token('color.background.accent.gray.subtle.pressed') },
192
+ }),
193
+ 'accent.gray.bolder': css({
194
+ ':active': { backgroundColor: token('color.background.accent.gray.bolder.pressed') },
195
+ }),
196
+ input: css({
197
+ ':active': { backgroundColor: token('color.background.input.pressed') },
198
+ }),
199
+ 'inverse.subtle': css({
200
+ ':active': { backgroundColor: token('color.background.inverse.subtle.pressed') },
201
+ }),
202
+ neutral: css({
203
+ ':active': { backgroundColor: token('color.background.neutral.pressed') },
204
+ }),
205
+ 'neutral.subtle': css({
206
+ ':active': { backgroundColor: token('color.background.neutral.subtle.pressed') },
207
+ }),
208
+ 'neutral.bold': css({
209
+ ':active': { backgroundColor: token('color.background.neutral.bold.pressed') },
210
+ }),
211
+ selected: css({
212
+ ':active': { backgroundColor: token('color.background.selected.pressed') },
213
+ }),
214
+ 'selected.bold': css({
215
+ ':active': { backgroundColor: token('color.background.selected.bold.pressed') },
216
+ }),
217
+ 'brand.subtlest': css({
218
+ ':active': { backgroundColor: token('color.background.brand.subtlest.pressed') },
219
+ }),
220
+ 'brand.bold': css({
221
+ ':active': { backgroundColor: token('color.background.brand.bold.pressed') },
222
+ }),
223
+ 'brand.boldest': css({
224
+ ':active': { backgroundColor: token('color.background.brand.boldest.pressed') },
225
+ }),
226
+ danger: css({
227
+ ':active': { backgroundColor: token('color.background.danger.pressed') },
228
+ }),
229
+ 'danger.bold': css({
230
+ ':active': { backgroundColor: token('color.background.danger.bold.pressed') },
231
+ }),
232
+ warning: css({
233
+ ':active': { backgroundColor: token('color.background.warning.pressed') },
234
+ }),
235
+ 'warning.bold': css({
236
+ ':active': { backgroundColor: token('color.background.warning.bold.pressed') },
237
+ }),
238
+ success: css({
239
+ ':active': { backgroundColor: token('color.background.success.pressed') },
240
+ }),
241
+ 'success.bold': css({
242
+ ':active': { backgroundColor: token('color.background.success.bold.pressed') },
243
+ }),
244
+ discovery: css({
245
+ ':active': { backgroundColor: token('color.background.discovery.pressed') },
246
+ }),
247
+ 'discovery.bold': css({
248
+ ':active': { backgroundColor: token('color.background.discovery.bold.pressed') },
249
+ }),
250
+ information: css({
251
+ ':active': { backgroundColor: token('color.background.information.pressed') },
252
+ }),
253
+ 'information.bold': css({
254
+ ':active': { backgroundColor: token('color.background.information.bold.pressed') },
255
+ }),
256
+ 'elevation.surface': css({
257
+ ':active': { backgroundColor: token('elevation.surface.pressed') },
258
+ }),
259
+ 'elevation.surface.overlay': css({
260
+ ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
261
+ }),
262
+ 'elevation.surface.raised': css({
263
+ ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
264
+ }),
269
265
  };
270
266
 
271
267
  const backgroundHoverColorMap = {
272
- 'accent.lime.subtlest': css({
273
- ':hover': { backgroundColor: token('color.background.accent.lime.subtlest.hovered') },
274
- }),
275
- 'accent.lime.subtler': css({
276
- ':hover': { backgroundColor: token('color.background.accent.lime.subtler.hovered') },
277
- }),
278
- 'accent.lime.subtle': css({
279
- ':hover': { backgroundColor: token('color.background.accent.lime.subtle.hovered') },
280
- }),
281
- 'accent.lime.bolder': css({
282
- ':hover': { backgroundColor: token('color.background.accent.lime.bolder.hovered') },
283
- }),
284
- 'accent.red.subtlest': css({
285
- ':hover': { backgroundColor: token('color.background.accent.red.subtlest.hovered') },
286
- }),
287
- 'accent.red.subtler': css({
288
- ':hover': { backgroundColor: token('color.background.accent.red.subtler.hovered') },
289
- }),
290
- 'accent.red.subtle': css({
291
- ':hover': { backgroundColor: token('color.background.accent.red.subtle.hovered') },
292
- }),
293
- 'accent.red.bolder': css({
294
- ':hover': { backgroundColor: token('color.background.accent.red.bolder.hovered') },
295
- }),
296
- 'accent.orange.subtlest': css({
297
- ':hover': { backgroundColor: token('color.background.accent.orange.subtlest.hovered') },
298
- }),
299
- 'accent.orange.subtler': css({
300
- ':hover': { backgroundColor: token('color.background.accent.orange.subtler.hovered') },
301
- }),
302
- 'accent.orange.subtle': css({
303
- ':hover': { backgroundColor: token('color.background.accent.orange.subtle.hovered') },
304
- }),
305
- 'accent.orange.bolder': css({
306
- ':hover': { backgroundColor: token('color.background.accent.orange.bolder.hovered') },
307
- }),
308
- 'accent.yellow.subtlest': css({
309
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtlest.hovered') },
310
- }),
311
- 'accent.yellow.subtler': css({
312
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtler.hovered') },
313
- }),
314
- 'accent.yellow.subtle': css({
315
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtle.hovered') },
316
- }),
317
- 'accent.yellow.bolder': css({
318
- ':hover': { backgroundColor: token('color.background.accent.yellow.bolder.hovered') },
319
- }),
320
- 'accent.green.subtlest': css({
321
- ':hover': { backgroundColor: token('color.background.accent.green.subtlest.hovered') },
322
- }),
323
- 'accent.green.subtler': css({
324
- ':hover': { backgroundColor: token('color.background.accent.green.subtler.hovered') },
325
- }),
326
- 'accent.green.subtle': css({
327
- ':hover': { backgroundColor: token('color.background.accent.green.subtle.hovered') },
328
- }),
329
- 'accent.green.bolder': css({
330
- ':hover': { backgroundColor: token('color.background.accent.green.bolder.hovered') },
331
- }),
332
- 'accent.teal.subtlest': css({
333
- ':hover': { backgroundColor: token('color.background.accent.teal.subtlest.hovered') },
334
- }),
335
- 'accent.teal.subtler': css({
336
- ':hover': { backgroundColor: token('color.background.accent.teal.subtler.hovered') },
337
- }),
338
- 'accent.teal.subtle': css({
339
- ':hover': { backgroundColor: token('color.background.accent.teal.subtle.hovered') },
340
- }),
341
- 'accent.teal.bolder': css({
342
- ':hover': { backgroundColor: token('color.background.accent.teal.bolder.hovered') },
343
- }),
344
- 'accent.blue.subtlest': css({
345
- ':hover': { backgroundColor: token('color.background.accent.blue.subtlest.hovered') },
346
- }),
347
- 'accent.blue.subtler': css({
348
- ':hover': { backgroundColor: token('color.background.accent.blue.subtler.hovered') },
349
- }),
350
- 'accent.blue.subtle': css({
351
- ':hover': { backgroundColor: token('color.background.accent.blue.subtle.hovered') },
352
- }),
353
- 'accent.blue.bolder': css({
354
- ':hover': { backgroundColor: token('color.background.accent.blue.bolder.hovered') },
355
- }),
356
- 'accent.purple.subtlest': css({
357
- ':hover': { backgroundColor: token('color.background.accent.purple.subtlest.hovered') },
358
- }),
359
- 'accent.purple.subtler': css({
360
- ':hover': { backgroundColor: token('color.background.accent.purple.subtler.hovered') },
361
- }),
362
- 'accent.purple.subtle': css({
363
- ':hover': { backgroundColor: token('color.background.accent.purple.subtle.hovered') },
364
- }),
365
- 'accent.purple.bolder': css({
366
- ':hover': { backgroundColor: token('color.background.accent.purple.bolder.hovered') },
367
- }),
368
- 'accent.magenta.subtlest': css({
369
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtlest.hovered') },
370
- }),
371
- 'accent.magenta.subtler': css({
372
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtler.hovered') },
373
- }),
374
- 'accent.magenta.subtle': css({
375
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtle.hovered') },
376
- }),
377
- 'accent.magenta.bolder': css({
378
- ':hover': { backgroundColor: token('color.background.accent.magenta.bolder.hovered') },
379
- }),
380
- 'accent.gray.subtlest': css({
381
- ':hover': { backgroundColor: token('color.background.accent.gray.subtlest.hovered') },
382
- }),
383
- 'accent.gray.subtler': css({
384
- ':hover': { backgroundColor: token('color.background.accent.gray.subtler.hovered') },
385
- }),
386
- 'accent.gray.subtle': css({
387
- ':hover': { backgroundColor: token('color.background.accent.gray.subtle.hovered') },
388
- }),
389
- 'accent.gray.bolder': css({
390
- ':hover': { backgroundColor: token('color.background.accent.gray.bolder.hovered') },
391
- }),
392
- input: css({
393
- ':hover': { backgroundColor: token('color.background.input.hovered') },
394
- }),
395
- 'inverse.subtle': css({
396
- ':hover': { backgroundColor: token('color.background.inverse.subtle.hovered') },
397
- }),
398
- neutral: css({
399
- ':hover': { backgroundColor: token('color.background.neutral.hovered') },
400
- }),
401
- 'neutral.subtle': css({
402
- ':hover': { backgroundColor: token('color.background.neutral.subtle.hovered') },
403
- }),
404
- 'neutral.bold': css({
405
- ':hover': { backgroundColor: token('color.background.neutral.bold.hovered') },
406
- }),
407
- selected: css({
408
- ':hover': { backgroundColor: token('color.background.selected.hovered') },
409
- }),
410
- 'selected.bold': css({
411
- ':hover': { backgroundColor: token('color.background.selected.bold.hovered') },
412
- }),
413
- 'brand.subtlest': css({
414
- ':hover': { backgroundColor: token('color.background.brand.subtlest.hovered') },
415
- }),
416
- 'brand.bold': css({
417
- ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
418
- }),
419
- 'brand.boldest': css({
420
- ':hover': { backgroundColor: token('color.background.brand.boldest.hovered') },
421
- }),
422
- danger: css({
423
- ':hover': { backgroundColor: token('color.background.danger.hovered') },
424
- }),
425
- 'danger.bold': css({
426
- ':hover': { backgroundColor: token('color.background.danger.bold.hovered') },
427
- }),
428
- warning: css({
429
- ':hover': { backgroundColor: token('color.background.warning.hovered') },
430
- }),
431
- 'warning.bold': css({
432
- ':hover': { backgroundColor: token('color.background.warning.bold.hovered') },
433
- }),
434
- success: css({
435
- ':hover': { backgroundColor: token('color.background.success.hovered') },
436
- }),
437
- 'success.bold': css({
438
- ':hover': { backgroundColor: token('color.background.success.bold.hovered') },
439
- }),
440
- discovery: css({
441
- ':hover': { backgroundColor: token('color.background.discovery.hovered') },
442
- }),
443
- 'discovery.bold': css({
444
- ':hover': { backgroundColor: token('color.background.discovery.bold.hovered') },
445
- }),
446
- information: css({
447
- ':hover': { backgroundColor: token('color.background.information.hovered') },
448
- }),
449
- 'information.bold': css({
450
- ':hover': { backgroundColor: token('color.background.information.bold.hovered') },
451
- }),
452
- 'elevation.surface': css({
453
- ':hover': { backgroundColor: token('elevation.surface.hovered') },
454
- }),
455
- 'elevation.surface.overlay': css({
456
- ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
457
- }),
458
- 'elevation.surface.raised': css({
459
- ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
460
- }),
268
+ 'accent.lime.subtlest': css({
269
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtlest.hovered') },
270
+ }),
271
+ 'accent.lime.subtler': css({
272
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtler.hovered') },
273
+ }),
274
+ 'accent.lime.subtle': css({
275
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtle.hovered') },
276
+ }),
277
+ 'accent.lime.bolder': css({
278
+ ':hover': { backgroundColor: token('color.background.accent.lime.bolder.hovered') },
279
+ }),
280
+ 'accent.red.subtlest': css({
281
+ ':hover': { backgroundColor: token('color.background.accent.red.subtlest.hovered') },
282
+ }),
283
+ 'accent.red.subtler': css({
284
+ ':hover': { backgroundColor: token('color.background.accent.red.subtler.hovered') },
285
+ }),
286
+ 'accent.red.subtle': css({
287
+ ':hover': { backgroundColor: token('color.background.accent.red.subtle.hovered') },
288
+ }),
289
+ 'accent.red.bolder': css({
290
+ ':hover': { backgroundColor: token('color.background.accent.red.bolder.hovered') },
291
+ }),
292
+ 'accent.orange.subtlest': css({
293
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtlest.hovered') },
294
+ }),
295
+ 'accent.orange.subtler': css({
296
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtler.hovered') },
297
+ }),
298
+ 'accent.orange.subtle': css({
299
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtle.hovered') },
300
+ }),
301
+ 'accent.orange.bolder': css({
302
+ ':hover': { backgroundColor: token('color.background.accent.orange.bolder.hovered') },
303
+ }),
304
+ 'accent.yellow.subtlest': css({
305
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtlest.hovered') },
306
+ }),
307
+ 'accent.yellow.subtler': css({
308
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtler.hovered') },
309
+ }),
310
+ 'accent.yellow.subtle': css({
311
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtle.hovered') },
312
+ }),
313
+ 'accent.yellow.bolder': css({
314
+ ':hover': { backgroundColor: token('color.background.accent.yellow.bolder.hovered') },
315
+ }),
316
+ 'accent.green.subtlest': css({
317
+ ':hover': { backgroundColor: token('color.background.accent.green.subtlest.hovered') },
318
+ }),
319
+ 'accent.green.subtler': css({
320
+ ':hover': { backgroundColor: token('color.background.accent.green.subtler.hovered') },
321
+ }),
322
+ 'accent.green.subtle': css({
323
+ ':hover': { backgroundColor: token('color.background.accent.green.subtle.hovered') },
324
+ }),
325
+ 'accent.green.bolder': css({
326
+ ':hover': { backgroundColor: token('color.background.accent.green.bolder.hovered') },
327
+ }),
328
+ 'accent.teal.subtlest': css({
329
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtlest.hovered') },
330
+ }),
331
+ 'accent.teal.subtler': css({
332
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtler.hovered') },
333
+ }),
334
+ 'accent.teal.subtle': css({
335
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtle.hovered') },
336
+ }),
337
+ 'accent.teal.bolder': css({
338
+ ':hover': { backgroundColor: token('color.background.accent.teal.bolder.hovered') },
339
+ }),
340
+ 'accent.blue.subtlest': css({
341
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtlest.hovered') },
342
+ }),
343
+ 'accent.blue.subtler': css({
344
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtler.hovered') },
345
+ }),
346
+ 'accent.blue.subtle': css({
347
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtle.hovered') },
348
+ }),
349
+ 'accent.blue.bolder': css({
350
+ ':hover': { backgroundColor: token('color.background.accent.blue.bolder.hovered') },
351
+ }),
352
+ 'accent.purple.subtlest': css({
353
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtlest.hovered') },
354
+ }),
355
+ 'accent.purple.subtler': css({
356
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtler.hovered') },
357
+ }),
358
+ 'accent.purple.subtle': css({
359
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtle.hovered') },
360
+ }),
361
+ 'accent.purple.bolder': css({
362
+ ':hover': { backgroundColor: token('color.background.accent.purple.bolder.hovered') },
363
+ }),
364
+ 'accent.magenta.subtlest': css({
365
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtlest.hovered') },
366
+ }),
367
+ 'accent.magenta.subtler': css({
368
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtler.hovered') },
369
+ }),
370
+ 'accent.magenta.subtle': css({
371
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtle.hovered') },
372
+ }),
373
+ 'accent.magenta.bolder': css({
374
+ ':hover': { backgroundColor: token('color.background.accent.magenta.bolder.hovered') },
375
+ }),
376
+ 'accent.gray.subtlest': css({
377
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtlest.hovered') },
378
+ }),
379
+ 'accent.gray.subtler': css({
380
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtler.hovered') },
381
+ }),
382
+ 'accent.gray.subtle': css({
383
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtle.hovered') },
384
+ }),
385
+ 'accent.gray.bolder': css({
386
+ ':hover': { backgroundColor: token('color.background.accent.gray.bolder.hovered') },
387
+ }),
388
+ input: css({
389
+ ':hover': { backgroundColor: token('color.background.input.hovered') },
390
+ }),
391
+ 'inverse.subtle': css({
392
+ ':hover': { backgroundColor: token('color.background.inverse.subtle.hovered') },
393
+ }),
394
+ neutral: css({
395
+ ':hover': { backgroundColor: token('color.background.neutral.hovered') },
396
+ }),
397
+ 'neutral.subtle': css({
398
+ ':hover': { backgroundColor: token('color.background.neutral.subtle.hovered') },
399
+ }),
400
+ 'neutral.bold': css({
401
+ ':hover': { backgroundColor: token('color.background.neutral.bold.hovered') },
402
+ }),
403
+ selected: css({
404
+ ':hover': { backgroundColor: token('color.background.selected.hovered') },
405
+ }),
406
+ 'selected.bold': css({
407
+ ':hover': { backgroundColor: token('color.background.selected.bold.hovered') },
408
+ }),
409
+ 'brand.subtlest': css({
410
+ ':hover': { backgroundColor: token('color.background.brand.subtlest.hovered') },
411
+ }),
412
+ 'brand.bold': css({
413
+ ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
414
+ }),
415
+ 'brand.boldest': css({
416
+ ':hover': { backgroundColor: token('color.background.brand.boldest.hovered') },
417
+ }),
418
+ danger: css({
419
+ ':hover': { backgroundColor: token('color.background.danger.hovered') },
420
+ }),
421
+ 'danger.bold': css({
422
+ ':hover': { backgroundColor: token('color.background.danger.bold.hovered') },
423
+ }),
424
+ warning: css({
425
+ ':hover': { backgroundColor: token('color.background.warning.hovered') },
426
+ }),
427
+ 'warning.bold': css({
428
+ ':hover': { backgroundColor: token('color.background.warning.bold.hovered') },
429
+ }),
430
+ success: css({
431
+ ':hover': { backgroundColor: token('color.background.success.hovered') },
432
+ }),
433
+ 'success.bold': css({
434
+ ':hover': { backgroundColor: token('color.background.success.bold.hovered') },
435
+ }),
436
+ discovery: css({
437
+ ':hover': { backgroundColor: token('color.background.discovery.hovered') },
438
+ }),
439
+ 'discovery.bold': css({
440
+ ':hover': { backgroundColor: token('color.background.discovery.bold.hovered') },
441
+ }),
442
+ information: css({
443
+ ':hover': { backgroundColor: token('color.background.information.hovered') },
444
+ }),
445
+ 'information.bold': css({
446
+ ':hover': { backgroundColor: token('color.background.information.bold.hovered') },
447
+ }),
448
+ 'elevation.surface': css({
449
+ ':hover': { backgroundColor: token('elevation.surface.hovered') },
450
+ }),
451
+ 'elevation.surface.overlay': css({
452
+ ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
453
+ }),
454
+ 'elevation.surface.raised': css({
455
+ ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
456
+ }),
461
457
  };
462
458
 
463
459
  type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;