@atlaskit/ds-explorations 2.2.12 → 2.2.13

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 (29) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/box.partial.js +2 -2
  3. package/dist/cjs/components/interaction-surface.partial.js +402 -2
  4. package/dist/cjs/components/text.partial.js +2 -2
  5. package/dist/cjs/internal/color-map.js +2 -2
  6. package/dist/es2019/components/box.partial.js +2 -2
  7. package/dist/es2019/components/interaction-surface.partial.js +402 -2
  8. package/dist/es2019/components/text.partial.js +2 -2
  9. package/dist/es2019/internal/color-map.js +2 -2
  10. package/dist/esm/components/box.partial.js +2 -2
  11. package/dist/esm/components/interaction-surface.partial.js +402 -2
  12. package/dist/esm/components/text.partial.js +2 -2
  13. package/dist/esm/internal/color-map.js +2 -2
  14. package/dist/types/components/box.partial.d.ts +2 -2
  15. package/dist/types/components/interaction-surface.partial.d.ts +40 -0
  16. package/dist/types/components/text.partial.d.ts +2 -2
  17. package/dist/types/internal/color-map.d.ts +2 -2
  18. package/dist/types-ts4.5/components/box.partial.d.ts +2 -2
  19. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +40 -0
  20. package/dist/types-ts4.5/components/text.partial.d.ts +2 -2
  21. package/dist/types-ts4.5/internal/color-map.d.ts +2 -2
  22. package/package.json +2 -2
  23. package/report.api.md +40 -0
  24. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +404 -0
  25. package/src/components/box.partial.tsx +2 -2
  26. package/src/components/interaction-surface.partial.tsx +406 -2
  27. package/src/components/text.partial.tsx +2 -2
  28. package/src/internal/color-map.tsx +2 -2
  29. package/tmp/api-report-tmp.d.ts +40 -0
@@ -47,13 +47,213 @@ export default InteractionSurface;
47
47
 
48
48
  /**
49
49
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
50
- * @codegen <<SignedSource::01dc580099e9b8257da4c8f610e7874c>>
50
+ * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
51
51
  * @codegenId interactions
52
52
  * @codegenCommand yarn codegen-styles
53
53
  * @codegenParams ["background"]
54
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
54
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
55
55
  */
56
56
  var backgroundActiveColorMap = {
57
+ 'accent.lime.subtlest': css({
58
+ ':active': {
59
+ backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
60
+ }
61
+ }),
62
+ 'accent.lime.subtler': css({
63
+ ':active': {
64
+ backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
65
+ }
66
+ }),
67
+ 'accent.lime.subtle': css({
68
+ ':active': {
69
+ backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
70
+ }
71
+ }),
72
+ 'accent.lime.bolder': css({
73
+ ':active': {
74
+ backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
75
+ }
76
+ }),
77
+ 'accent.red.subtlest': css({
78
+ ':active': {
79
+ backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FF9C8F)"
80
+ }
81
+ }),
82
+ 'accent.red.subtler': css({
83
+ ':active': {
84
+ backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87462)"
85
+ }
86
+ }),
87
+ 'accent.red.subtle': css({
88
+ ':active': {
89
+ backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD2CC)"
90
+ }
91
+ }),
92
+ 'accent.red.bolder': css({
93
+ ':active': {
94
+ backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #601E16)"
95
+ }
96
+ }),
97
+ 'accent.orange.subtlest': css({
98
+ ':active': {
99
+ backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC57B)"
100
+ }
101
+ }),
102
+ 'accent.orange.subtler': css({
103
+ ':active': {
104
+ backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FAA53D)"
105
+ }
106
+ }),
107
+ 'accent.orange.subtle': css({
108
+ ':active': {
109
+ backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FFE2BD)"
110
+ }
111
+ }),
112
+ 'accent.orange.bolder': css({
113
+ ':active': {
114
+ backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #5F3811)"
115
+ }
116
+ }),
117
+ 'accent.yellow.subtlest': css({
118
+ ':active': {
119
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
120
+ }
121
+ }),
122
+ 'accent.yellow.subtler': css({
123
+ ':active': {
124
+ backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
125
+ }
126
+ }),
127
+ 'accent.yellow.subtle': css({
128
+ ':active': {
129
+ backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #F8E6A0)"
130
+ }
131
+ }),
132
+ 'accent.yellow.bolder': css({
133
+ ':active': {
134
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
135
+ }
136
+ }),
137
+ 'accent.green.subtlest': css({
138
+ ':active': {
139
+ backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
140
+ }
141
+ }),
142
+ 'accent.green.subtler': css({
143
+ ':active': {
144
+ backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
145
+ }
146
+ }),
147
+ 'accent.green.subtle': css({
148
+ ':active': {
149
+ backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
150
+ }
151
+ }),
152
+ 'accent.green.bolder': css({
153
+ ':active': {
154
+ backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
155
+ }
156
+ }),
157
+ 'accent.teal.subtlest': css({
158
+ ':active': {
159
+ backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #8BDBE5)"
160
+ }
161
+ }),
162
+ 'accent.teal.subtler': css({
163
+ ':active': {
164
+ backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #60C6D2)"
165
+ }
166
+ }),
167
+ 'accent.teal.subtle': css({
168
+ ':active': {
169
+ backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C1F0F5)"
170
+ }
171
+ }),
172
+ 'accent.teal.bolder': css({
173
+ ':active': {
174
+ backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #1D474C)"
175
+ }
176
+ }),
177
+ 'accent.blue.subtlest': css({
178
+ ':active': {
179
+ backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
180
+ }
181
+ }),
182
+ 'accent.blue.subtler': css({
183
+ ':active': {
184
+ backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
185
+ }
186
+ }),
187
+ 'accent.blue.subtle': css({
188
+ ':active': {
189
+ backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
190
+ }
191
+ }),
192
+ 'accent.blue.bolder': css({
193
+ ':active': {
194
+ backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
195
+ }
196
+ }),
197
+ 'accent.purple.subtlest': css({
198
+ ':active': {
199
+ backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
200
+ }
201
+ }),
202
+ 'accent.purple.subtler': css({
203
+ ':active': {
204
+ backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
205
+ }
206
+ }),
207
+ 'accent.purple.subtle': css({
208
+ ':active': {
209
+ backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
210
+ }
211
+ }),
212
+ 'accent.purple.bolder': css({
213
+ ':active': {
214
+ backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
215
+ }
216
+ }),
217
+ 'accent.magenta.subtlest': css({
218
+ ':active': {
219
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
220
+ }
221
+ }),
222
+ 'accent.magenta.subtler': css({
223
+ ':active': {
224
+ backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
225
+ }
226
+ }),
227
+ 'accent.magenta.subtle': css({
228
+ ':active': {
229
+ backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
230
+ }
231
+ }),
232
+ 'accent.magenta.bolder': css({
233
+ ':active': {
234
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
235
+ }
236
+ }),
237
+ 'accent.gray.subtlest': css({
238
+ ':active': {
239
+ backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
240
+ }
241
+ }),
242
+ 'accent.gray.subtler': css({
243
+ ':active': {
244
+ backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
245
+ }
246
+ }),
247
+ 'accent.gray.subtle': css({
248
+ ':active': {
249
+ backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
250
+ }
251
+ }),
252
+ 'accent.gray.bolder': css({
253
+ ':active': {
254
+ backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
255
+ }
256
+ }),
57
257
  input: css({
58
258
  ':active': {
59
259
  backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
@@ -171,6 +371,206 @@ var backgroundActiveColorMap = {
171
371
  })
172
372
  };
173
373
  var backgroundHoverColorMap = {
374
+ 'accent.lime.subtlest': css({
375
+ ':hover': {
376
+ backgroundColor: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
377
+ }
378
+ }),
379
+ 'accent.lime.subtler': css({
380
+ ':hover': {
381
+ backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
382
+ }
383
+ }),
384
+ 'accent.lime.subtle': css({
385
+ ':hover': {
386
+ backgroundColor: "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)"
387
+ }
388
+ }),
389
+ 'accent.lime.bolder': css({
390
+ ':hover': {
391
+ backgroundColor: "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)"
392
+ }
393
+ }),
394
+ 'accent.red.subtlest': css({
395
+ ':hover': {
396
+ backgroundColor: "var(--ds-background-accent-red-subtlest-hovered, #FFD2CC)"
397
+ }
398
+ }),
399
+ 'accent.red.subtler': css({
400
+ ':hover': {
401
+ backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FF9C8F)"
402
+ }
403
+ }),
404
+ 'accent.red.subtle': css({
405
+ ':hover': {
406
+ backgroundColor: "var(--ds-background-accent-red-subtle-hovered, #FF9C8F)"
407
+ }
408
+ }),
409
+ 'accent.red.bolder': css({
410
+ ':hover': {
411
+ backgroundColor: "var(--ds-background-accent-red-bolder-hovered, #AE2A19)"
412
+ }
413
+ }),
414
+ 'accent.orange.subtlest': css({
415
+ ':hover': {
416
+ backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FFE2BD)"
417
+ }
418
+ }),
419
+ 'accent.orange.subtler': css({
420
+ ':hover': {
421
+ backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC57B)"
422
+ }
423
+ }),
424
+ 'accent.orange.subtle': css({
425
+ ':hover': {
426
+ backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC57B)"
427
+ }
428
+ }),
429
+ 'accent.orange.bolder': css({
430
+ ':hover': {
431
+ backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #974F0C)"
432
+ }
433
+ }),
434
+ 'accent.yellow.subtlest': css({
435
+ ':hover': {
436
+ backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
437
+ }
438
+ }),
439
+ 'accent.yellow.subtler': css({
440
+ ':hover': {
441
+ backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
442
+ }
443
+ }),
444
+ 'accent.yellow.subtle': css({
445
+ ':hover': {
446
+ backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #F5CD47)"
447
+ }
448
+ }),
449
+ 'accent.yellow.bolder': css({
450
+ ':hover': {
451
+ backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
452
+ }
453
+ }),
454
+ 'accent.green.subtlest': css({
455
+ ':hover': {
456
+ backgroundColor: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)"
457
+ }
458
+ }),
459
+ 'accent.green.subtler': css({
460
+ ':hover': {
461
+ backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
462
+ }
463
+ }),
464
+ 'accent.green.subtle': css({
465
+ ':hover': {
466
+ backgroundColor: "var(--ds-background-accent-green-subtle-hovered, #7EE2B8)"
467
+ }
468
+ }),
469
+ 'accent.green.bolder': css({
470
+ ':hover': {
471
+ backgroundColor: "var(--ds-background-accent-green-bolder-hovered, #216E4E)"
472
+ }
473
+ }),
474
+ 'accent.teal.subtlest': css({
475
+ ':hover': {
476
+ backgroundColor: "var(--ds-background-accent-teal-subtlest-hovered, #C1F0F5)"
477
+ }
478
+ }),
479
+ 'accent.teal.subtler': css({
480
+ ':hover': {
481
+ backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #8BDBE5)"
482
+ }
483
+ }),
484
+ 'accent.teal.subtle': css({
485
+ ':hover': {
486
+ backgroundColor: "var(--ds-background-accent-teal-subtle-hovered, #8BDBE5)"
487
+ }
488
+ }),
489
+ 'accent.teal.bolder': css({
490
+ ':hover': {
491
+ backgroundColor: "var(--ds-background-accent-teal-bolder-hovered, #206B74)"
492
+ }
493
+ }),
494
+ 'accent.blue.subtlest': css({
495
+ ':hover': {
496
+ backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
497
+ }
498
+ }),
499
+ 'accent.blue.subtler': css({
500
+ ':hover': {
501
+ backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
502
+ }
503
+ }),
504
+ 'accent.blue.subtle': css({
505
+ ':hover': {
506
+ backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
507
+ }
508
+ }),
509
+ 'accent.blue.bolder': css({
510
+ ':hover': {
511
+ backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
512
+ }
513
+ }),
514
+ 'accent.purple.subtlest': css({
515
+ ':hover': {
516
+ backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
517
+ }
518
+ }),
519
+ 'accent.purple.subtler': css({
520
+ ':hover': {
521
+ backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
522
+ }
523
+ }),
524
+ 'accent.purple.subtle': css({
525
+ ':hover': {
526
+ backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
527
+ }
528
+ }),
529
+ 'accent.purple.bolder': css({
530
+ ':hover': {
531
+ backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
532
+ }
533
+ }),
534
+ 'accent.magenta.subtlest': css({
535
+ ':hover': {
536
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)"
537
+ }
538
+ }),
539
+ 'accent.magenta.subtler': css({
540
+ ':hover': {
541
+ backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
542
+ }
543
+ }),
544
+ 'accent.magenta.subtle': css({
545
+ ':hover': {
546
+ backgroundColor: "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)"
547
+ }
548
+ }),
549
+ 'accent.magenta.bolder': css({
550
+ ':hover': {
551
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
552
+ }
553
+ }),
554
+ 'accent.gray.subtlest': css({
555
+ ':hover': {
556
+ backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
557
+ }
558
+ }),
559
+ 'accent.gray.subtler': css({
560
+ ':hover': {
561
+ backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
562
+ }
563
+ }),
564
+ 'accent.gray.subtle': css({
565
+ ':hover': {
566
+ backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
567
+ }
568
+ }),
569
+ 'accent.gray.bolder': css({
570
+ ':hover': {
571
+ backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
572
+ }
573
+ }),
174
574
  input: css({
175
575
  ':hover': {
176
576
  backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
@@ -220,11 +220,11 @@ var lineHeightMap = {
220
220
  */
221
221
  /**
222
222
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
223
- * @codegen <<SignedSource::8a6efbd43991cb2ebd97bd5eed33e192>>
223
+ * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
224
224
  * @codegenId colors
225
225
  * @codegenCommand yarn codegen-styles
226
226
  * @codegenParams ["text"]
227
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
227
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
228
228
  */
229
229
  var textColorMap = {
230
230
  'color.text': css({
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::1884888c7b0fc397963699c7902aaec7>>
6
+ * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
9
9
  */
10
10
  export default {
11
11
  'neutral.bold': 'inverse',
@@ -291,11 +291,11 @@ export type PaddingInline = keyof typeof paddingInlineMap;
291
291
  */
292
292
  /**
293
293
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
294
- * @codegen <<SignedSource::3c02977212ac78f3a0f9de93e0a253c2>>
294
+ * @codegen <<SignedSource::fe1f557b04d44d23dfae5c9494ccddcc>>
295
295
  * @codegenId colors
296
296
  * @codegenCommand yarn codegen-styles
297
297
  * @codegenParams ["border", "background", "shadow"]
298
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
298
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
299
299
  */
300
300
  declare const borderColorMap: {
301
301
  readonly 'color.border': import("@emotion/react").SerializedStyles;
@@ -21,6 +21,46 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
21
21
  declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
22
22
  export default InteractionSurface;
23
23
  declare const backgroundHoverColorMap: {
24
+ 'accent.lime.subtlest': import("@emotion/react").SerializedStyles;
25
+ 'accent.lime.subtler': import("@emotion/react").SerializedStyles;
26
+ 'accent.lime.subtle': import("@emotion/react").SerializedStyles;
27
+ 'accent.lime.bolder': import("@emotion/react").SerializedStyles;
28
+ 'accent.red.subtlest': import("@emotion/react").SerializedStyles;
29
+ 'accent.red.subtler': import("@emotion/react").SerializedStyles;
30
+ 'accent.red.subtle': import("@emotion/react").SerializedStyles;
31
+ 'accent.red.bolder': import("@emotion/react").SerializedStyles;
32
+ 'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
33
+ 'accent.orange.subtler': import("@emotion/react").SerializedStyles;
34
+ 'accent.orange.subtle': import("@emotion/react").SerializedStyles;
35
+ 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
36
+ 'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
37
+ 'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
38
+ 'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
39
+ 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
40
+ 'accent.green.subtlest': import("@emotion/react").SerializedStyles;
41
+ 'accent.green.subtler': import("@emotion/react").SerializedStyles;
42
+ 'accent.green.subtle': import("@emotion/react").SerializedStyles;
43
+ 'accent.green.bolder': import("@emotion/react").SerializedStyles;
44
+ 'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
45
+ 'accent.teal.subtler': import("@emotion/react").SerializedStyles;
46
+ 'accent.teal.subtle': import("@emotion/react").SerializedStyles;
47
+ 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
48
+ 'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
49
+ 'accent.blue.subtler': import("@emotion/react").SerializedStyles;
50
+ 'accent.blue.subtle': import("@emotion/react").SerializedStyles;
51
+ 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
52
+ 'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
53
+ 'accent.purple.subtler': import("@emotion/react").SerializedStyles;
54
+ 'accent.purple.subtle': import("@emotion/react").SerializedStyles;
55
+ 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
56
+ 'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
57
+ 'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
58
+ 'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
59
+ 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
60
+ 'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
61
+ 'accent.gray.subtler': import("@emotion/react").SerializedStyles;
62
+ 'accent.gray.subtle': import("@emotion/react").SerializedStyles;
63
+ 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
24
64
  input: import("@emotion/react").SerializedStyles;
25
65
  'inverse.subtle': import("@emotion/react").SerializedStyles;
26
66
  neutral: import("@emotion/react").SerializedStyles;
@@ -128,11 +128,11 @@ export type LineHeight = keyof typeof lineHeightMap;
128
128
  */
129
129
  /**
130
130
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
131
- * @codegen <<SignedSource::8a6efbd43991cb2ebd97bd5eed33e192>>
131
+ * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
132
132
  * @codegenId colors
133
133
  * @codegenCommand yarn codegen-styles
134
134
  * @codegenParams ["text"]
135
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
135
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
136
136
  */
137
137
  declare const textColorMap: {
138
138
  readonly 'color.text': import("@emotion/react").SerializedStyles;
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::1884888c7b0fc397963699c7902aaec7>>
6
+ * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
9
9
  */
10
10
  declare const _default: {
11
11
  readonly 'neutral.bold': "inverse";
@@ -291,11 +291,11 @@ export type PaddingInline = keyof typeof paddingInlineMap;
291
291
  */
292
292
  /**
293
293
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
294
- * @codegen <<SignedSource::3c02977212ac78f3a0f9de93e0a253c2>>
294
+ * @codegen <<SignedSource::fe1f557b04d44d23dfae5c9494ccddcc>>
295
295
  * @codegenId colors
296
296
  * @codegenCommand yarn codegen-styles
297
297
  * @codegenParams ["border", "background", "shadow"]
298
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
298
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
299
299
  */
300
300
  declare const borderColorMap: {
301
301
  readonly 'color.border': import("@emotion/react").SerializedStyles;
@@ -21,6 +21,46 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
21
21
  declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
22
22
  export default InteractionSurface;
23
23
  declare const backgroundHoverColorMap: {
24
+ 'accent.lime.subtlest': import("@emotion/react").SerializedStyles;
25
+ 'accent.lime.subtler': import("@emotion/react").SerializedStyles;
26
+ 'accent.lime.subtle': import("@emotion/react").SerializedStyles;
27
+ 'accent.lime.bolder': import("@emotion/react").SerializedStyles;
28
+ 'accent.red.subtlest': import("@emotion/react").SerializedStyles;
29
+ 'accent.red.subtler': import("@emotion/react").SerializedStyles;
30
+ 'accent.red.subtle': import("@emotion/react").SerializedStyles;
31
+ 'accent.red.bolder': import("@emotion/react").SerializedStyles;
32
+ 'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
33
+ 'accent.orange.subtler': import("@emotion/react").SerializedStyles;
34
+ 'accent.orange.subtle': import("@emotion/react").SerializedStyles;
35
+ 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
36
+ 'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
37
+ 'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
38
+ 'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
39
+ 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
40
+ 'accent.green.subtlest': import("@emotion/react").SerializedStyles;
41
+ 'accent.green.subtler': import("@emotion/react").SerializedStyles;
42
+ 'accent.green.subtle': import("@emotion/react").SerializedStyles;
43
+ 'accent.green.bolder': import("@emotion/react").SerializedStyles;
44
+ 'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
45
+ 'accent.teal.subtler': import("@emotion/react").SerializedStyles;
46
+ 'accent.teal.subtle': import("@emotion/react").SerializedStyles;
47
+ 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
48
+ 'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
49
+ 'accent.blue.subtler': import("@emotion/react").SerializedStyles;
50
+ 'accent.blue.subtle': import("@emotion/react").SerializedStyles;
51
+ 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
52
+ 'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
53
+ 'accent.purple.subtler': import("@emotion/react").SerializedStyles;
54
+ 'accent.purple.subtle': import("@emotion/react").SerializedStyles;
55
+ 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
56
+ 'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
57
+ 'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
58
+ 'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
59
+ 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
60
+ 'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
61
+ 'accent.gray.subtler': import("@emotion/react").SerializedStyles;
62
+ 'accent.gray.subtle': import("@emotion/react").SerializedStyles;
63
+ 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
24
64
  input: import("@emotion/react").SerializedStyles;
25
65
  'inverse.subtle': import("@emotion/react").SerializedStyles;
26
66
  neutral: import("@emotion/react").SerializedStyles;
@@ -133,11 +133,11 @@ export type LineHeight = keyof typeof lineHeightMap;
133
133
  */
134
134
  /**
135
135
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
136
- * @codegen <<SignedSource::8a6efbd43991cb2ebd97bd5eed33e192>>
136
+ * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
137
137
  * @codegenId colors
138
138
  * @codegenCommand yarn codegen-styles
139
139
  * @codegenParams ["text"]
140
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
140
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
141
141
  */
142
142
  declare const textColorMap: {
143
143
  readonly 'color.text': import("@emotion/react").SerializedStyles;
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::1884888c7b0fc397963699c7902aaec7>>
6
+ * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
9
9
  */
10
10
  declare const _default: {
11
11
  readonly 'neutral.bold': "inverse";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.2.12",
3
+ "version": "2.2.13",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
25
25
  "prepare": "yarn ak-postbuild"
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/tokens": "^1.18.0",
28
+ "@atlaskit/tokens": "^1.19.0",
29
29
  "@babel/runtime": "^7.0.0",
30
30
  "@emotion/react": "^11.7.1",
31
31
  "tiny-invariant": "^1.2.0"