@atlaskit/primitives 16.1.1 → 16.3.0

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 (9) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/cjs/xcss/style-maps.partial.js +29 -8
  3. package/dist/es2019/xcss/style-maps.partial.js +29 -8
  4. package/dist/esm/xcss/style-maps.partial.js +29 -8
  5. package/dist/types/utils/types.d.ts +1 -1
  6. package/dist/types/xcss/style-maps.partial.d.ts +29 -8
  7. package/dist/types-ts4.5/utils/types.d.ts +1 -1
  8. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +29 -8
  9. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,47 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 16.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`644c0f593ae62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/644c0f593ae62) -
8
+ Adds background color tokens to types.
9
+ - [`644c0f593ae62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/644c0f593ae62) -
10
+ Adds new semantic background and text tokens.
11
+
12
+ **Background Tokens (`background.[semantics].subtler.*`):**
13
+
14
+ Added `subtler` variants for semantic background colors with default, hovered, and pressed states:
15
+ - `background.success.subtler.[default|hovered|pressed]`
16
+ - `background.warning.subtler.[default|hovered|pressed]`
17
+ - `background.danger.subtler.[default|hovered|pressed]`
18
+ - `background.information.subtler.[default|hovered|pressed]`
19
+ - `background.discovery.subtler.[default|hovered|pressed]`
20
+
21
+ **Text Tokens (`text.[semantics].bolder`):**
22
+
23
+ Added `bolder` variants for semantic text colors to ensure proper contrast on colored backgrounds:
24
+ - `text.success.bolder`
25
+ - `text.warning.bolder`
26
+ - `text.danger.bolder`
27
+ - `text.information.bolder`
28
+ - `text.discovery.bolder`
29
+
30
+ ### Patch Changes
31
+
32
+ - Updated dependencies
33
+
34
+ ## 16.2.0
35
+
36
+ ### Minor Changes
37
+
38
+ - [`d50ecf8e02d28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d50ecf8e02d28) -
39
+ Added `radius.xxlarge` token available for borderRadius in `xcss`.
40
+
41
+ ### Patch Changes
42
+
43
+ - Updated dependencies
44
+
3
45
  ## 16.1.1
4
46
 
5
47
  ### Patch Changes
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -73,10 +73,10 @@ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positive
73
73
 
74
74
  /**
75
75
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
76
- * @codegen <<SignedSource::391876b08f98d21b153df0b42a122d9a>>
76
+ * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
77
77
  * @codegenId inverse-colors
78
78
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
79
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
79
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
80
80
  */
81
81
  var inverseColorMap = exports.inverseColorMap = {
82
82
  'color.background.neutral.bold': 'color.text.inverse',
@@ -114,11 +114,11 @@ var inverseColorMap = exports.inverseColorMap = {
114
114
 
115
115
  /**
116
116
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
117
- * @codegen <<SignedSource::4407d5eb027cc933eed726fed33ad1ad>>
117
+ * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
118
118
  * @codegenId elevation
119
119
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
120
120
  * @codegenParams ["opacity", "shadow", "surface"]
121
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
121
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
122
122
  */
123
123
  var opacityMap = exports.opacityMap = {
124
124
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -149,11 +149,11 @@ var surfaceColorMap = exports.surfaceColorMap = {
149
149
 
150
150
  /**
151
151
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
152
- * @codegen <<SignedSource::81e488bd12e67b8ac3ac65c71e50e967>>
152
+ * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
153
153
  * @codegenId colors
154
154
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
155
155
  * @codegenParams ["border", "background", "text", "fill"]
156
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
156
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
157
157
  */
158
158
  var borderColorMap = exports.borderColorMap = {
159
159
  'color.border': "var(--ds-border, #091e4221)",
@@ -335,30 +335,45 @@ var backgroundColorMap = exports.backgroundColorMap = {
335
335
  'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
336
336
  'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
337
337
  'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
338
+ 'color.background.danger.subtler': "var(--ds-background-danger-subtler, #FFBDAD)",
339
+ 'color.background.danger.subtler.hovered': "var(--ds-background-danger-subtler-hovered, #FF8F73)",
340
+ 'color.background.danger.subtler.pressed': "var(--ds-background-danger-subtler-pressed, #FF7452)",
338
341
  'color.background.danger.bold': "var(--ds-background-danger-bold, #DE350B)",
339
342
  'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
340
343
  'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
341
344
  'color.background.warning': "var(--ds-background-warning, #FFFAE6)",
342
345
  'color.background.warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
343
346
  'color.background.warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
347
+ 'color.background.warning.subtler': "var(--ds-background-warning-subtler, #FFF0B3)",
348
+ 'color.background.warning.subtler.hovered': "var(--ds-background-warning-subtler-hovered, #FFE380)",
349
+ 'color.background.warning.subtler.pressed': "var(--ds-background-warning-subtler-pressed, #FFC400)",
344
350
  'color.background.warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
345
351
  'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
346
352
  'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
347
353
  'color.background.success': "var(--ds-background-success, #E3FCEF)",
348
354
  'color.background.success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
349
355
  'color.background.success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
356
+ 'color.background.success.subtler': "var(--ds-background-success-subtler, #ABF5D1)",
357
+ 'color.background.success.subtler.hovered': "var(--ds-background-success-subtler-hovered, #79F2C0)",
358
+ 'color.background.success.subtler.pressed': "var(--ds-background-success-subtler-pressed, #57D9A3)",
350
359
  'color.background.success.bold': "var(--ds-background-success-bold, #00875A)",
351
360
  'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
352
361
  'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
353
362
  'color.background.discovery': "var(--ds-background-discovery, #EAE6FF)",
354
363
  'color.background.discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
355
364
  'color.background.discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
365
+ 'color.background.discovery.subtler': "var(--ds-background-discovery-subtler, #C0B6F2)",
366
+ 'color.background.discovery.subtler.hovered': "var(--ds-background-discovery-subtler-hovered, #998DD9)",
367
+ 'color.background.discovery.subtler.pressed': "var(--ds-background-discovery-subtler-pressed, #8777D9)",
356
368
  'color.background.discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
357
369
  'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
358
370
  'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
359
371
  'color.background.information': "var(--ds-background-information, #DEEBFF)",
360
372
  'color.background.information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
361
373
  'color.background.information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
374
+ 'color.background.information.subtler': "var(--ds-background-information-subtler, #B3D4FF)",
375
+ 'color.background.information.subtler.hovered': "var(--ds-background-information-subtler-hovered, #4C9AFF)",
376
+ 'color.background.information.subtler.pressed': "var(--ds-background-information-subtler-pressed, #2684FF)",
362
377
  'color.background.information.bold': "var(--ds-background-information-bold, #0052CC)",
363
378
  'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
364
379
  'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
@@ -406,11 +421,16 @@ var textColorMap = exports.textColorMap = {
406
421
  'color.text.selected': "var(--ds-text-selected, #0052CC)",
407
422
  'color.text.brand': "var(--ds-text-brand, #0065FF)",
408
423
  'color.text.danger': "var(--ds-text-danger, #DE350B)",
424
+ 'color.text.danger.bolder': "var(--ds-text-danger-bolder, #BF2600)",
409
425
  'color.text.warning': "var(--ds-text-warning, #974F0C)",
410
426
  'color.text.warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
427
+ 'color.text.warning.bolder': "var(--ds-text-warning-bolder, #974F0C)",
411
428
  'color.text.success': "var(--ds-text-success, #006644)",
429
+ 'color.text.success.bolder': "var(--ds-text-success-bolder, #006644)",
412
430
  'color.text.discovery': "var(--ds-text-discovery, #403294)",
431
+ 'color.text.discovery.bolder': "var(--ds-text-discovery-bolder, #403294)",
413
432
  'color.text.information': "var(--ds-text-information, #0052CC)",
433
+ 'color.text.information.bolder': "var(--ds-text-information-bolder, #0747A6)",
414
434
  'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
415
435
  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
416
436
  'color.link': "var(--ds-link, #0052CC)",
@@ -474,11 +494,11 @@ var layerMap = exports.layerMap = {
474
494
 
475
495
  /**
476
496
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
477
- * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
497
+ * @codegen <<SignedSource::042e960cffbaf7b7d1022ee02c3c6cbb>>
478
498
  * @codegenId border
479
499
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
480
500
  * @codegenParams ["width", "radius"]
481
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
501
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a98e95106b856526c36bec8851e84348>>
482
502
  */
483
503
  var borderWidthMap = exports.borderWidthMap = {
484
504
  'border.width': "var(--ds-border-width, 1px)",
@@ -491,6 +511,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
491
511
  'radius.medium': "var(--ds-radius-medium, 6px)",
492
512
  'radius.large': "var(--ds-radius-large, 8px)",
493
513
  'radius.xlarge': "var(--ds-radius-xlarge, 12px)",
514
+ 'radius.xxlarge': "var(--ds-radius-xxlarge, 16px)",
494
515
  'radius.full': "var(--ds-radius-full, 9999px)",
495
516
  'radius.tile': "var(--ds-radius-tile, 25%)"
496
517
  };
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -68,10 +68,10 @@ export const allSpaceMap = {
68
68
 
69
69
  /**
70
70
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
71
- * @codegen <<SignedSource::391876b08f98d21b153df0b42a122d9a>>
71
+ * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
72
72
  * @codegenId inverse-colors
73
73
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
74
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
74
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
75
75
  */
76
76
  export const inverseColorMap = {
77
77
  'color.background.neutral.bold': 'color.text.inverse',
@@ -109,11 +109,11 @@ export const inverseColorMap = {
109
109
 
110
110
  /**
111
111
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
112
- * @codegen <<SignedSource::4407d5eb027cc933eed726fed33ad1ad>>
112
+ * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
113
113
  * @codegenId elevation
114
114
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
115
115
  * @codegenParams ["opacity", "shadow", "surface"]
116
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
116
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
117
117
  */
118
118
  export const opacityMap = {
119
119
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -144,11 +144,11 @@ export const surfaceColorMap = {
144
144
 
145
145
  /**
146
146
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
147
- * @codegen <<SignedSource::81e488bd12e67b8ac3ac65c71e50e967>>
147
+ * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
148
148
  * @codegenId colors
149
149
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
150
150
  * @codegenParams ["border", "background", "text", "fill"]
151
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
151
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
152
152
  */
153
153
  export const borderColorMap = {
154
154
  'color.border': "var(--ds-border, #091e4221)",
@@ -330,30 +330,45 @@ export const backgroundColorMap = {
330
330
  'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
331
331
  'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
332
332
  'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
333
+ 'color.background.danger.subtler': "var(--ds-background-danger-subtler, #FFBDAD)",
334
+ 'color.background.danger.subtler.hovered': "var(--ds-background-danger-subtler-hovered, #FF8F73)",
335
+ 'color.background.danger.subtler.pressed': "var(--ds-background-danger-subtler-pressed, #FF7452)",
333
336
  'color.background.danger.bold': "var(--ds-background-danger-bold, #DE350B)",
334
337
  'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
335
338
  'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
336
339
  'color.background.warning': "var(--ds-background-warning, #FFFAE6)",
337
340
  'color.background.warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
338
341
  'color.background.warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
342
+ 'color.background.warning.subtler': "var(--ds-background-warning-subtler, #FFF0B3)",
343
+ 'color.background.warning.subtler.hovered': "var(--ds-background-warning-subtler-hovered, #FFE380)",
344
+ 'color.background.warning.subtler.pressed': "var(--ds-background-warning-subtler-pressed, #FFC400)",
339
345
  'color.background.warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
340
346
  'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
341
347
  'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
342
348
  'color.background.success': "var(--ds-background-success, #E3FCEF)",
343
349
  'color.background.success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
344
350
  'color.background.success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
351
+ 'color.background.success.subtler': "var(--ds-background-success-subtler, #ABF5D1)",
352
+ 'color.background.success.subtler.hovered': "var(--ds-background-success-subtler-hovered, #79F2C0)",
353
+ 'color.background.success.subtler.pressed': "var(--ds-background-success-subtler-pressed, #57D9A3)",
345
354
  'color.background.success.bold': "var(--ds-background-success-bold, #00875A)",
346
355
  'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
347
356
  'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
348
357
  'color.background.discovery': "var(--ds-background-discovery, #EAE6FF)",
349
358
  'color.background.discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
350
359
  'color.background.discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
360
+ 'color.background.discovery.subtler': "var(--ds-background-discovery-subtler, #C0B6F2)",
361
+ 'color.background.discovery.subtler.hovered': "var(--ds-background-discovery-subtler-hovered, #998DD9)",
362
+ 'color.background.discovery.subtler.pressed': "var(--ds-background-discovery-subtler-pressed, #8777D9)",
351
363
  'color.background.discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
352
364
  'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
353
365
  'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
354
366
  'color.background.information': "var(--ds-background-information, #DEEBFF)",
355
367
  'color.background.information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
356
368
  'color.background.information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
369
+ 'color.background.information.subtler': "var(--ds-background-information-subtler, #B3D4FF)",
370
+ 'color.background.information.subtler.hovered': "var(--ds-background-information-subtler-hovered, #4C9AFF)",
371
+ 'color.background.information.subtler.pressed': "var(--ds-background-information-subtler-pressed, #2684FF)",
357
372
  'color.background.information.bold': "var(--ds-background-information-bold, #0052CC)",
358
373
  'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
359
374
  'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
@@ -401,11 +416,16 @@ export const textColorMap = {
401
416
  'color.text.selected': "var(--ds-text-selected, #0052CC)",
402
417
  'color.text.brand': "var(--ds-text-brand, #0065FF)",
403
418
  'color.text.danger': "var(--ds-text-danger, #DE350B)",
419
+ 'color.text.danger.bolder': "var(--ds-text-danger-bolder, #BF2600)",
404
420
  'color.text.warning': "var(--ds-text-warning, #974F0C)",
405
421
  'color.text.warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
422
+ 'color.text.warning.bolder': "var(--ds-text-warning-bolder, #974F0C)",
406
423
  'color.text.success': "var(--ds-text-success, #006644)",
424
+ 'color.text.success.bolder': "var(--ds-text-success-bolder, #006644)",
407
425
  'color.text.discovery': "var(--ds-text-discovery, #403294)",
426
+ 'color.text.discovery.bolder': "var(--ds-text-discovery-bolder, #403294)",
408
427
  'color.text.information': "var(--ds-text-information, #0052CC)",
428
+ 'color.text.information.bolder': "var(--ds-text-information-bolder, #0747A6)",
409
429
  'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
410
430
  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
411
431
  'color.link': "var(--ds-link, #0052CC)",
@@ -469,11 +489,11 @@ export const layerMap = {
469
489
 
470
490
  /**
471
491
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
472
- * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
492
+ * @codegen <<SignedSource::042e960cffbaf7b7d1022ee02c3c6cbb>>
473
493
  * @codegenId border
474
494
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
475
495
  * @codegenParams ["width", "radius"]
476
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
496
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a98e95106b856526c36bec8851e84348>>
477
497
  */
478
498
  export const borderWidthMap = {
479
499
  'border.width': "var(--ds-border-width, 1px)",
@@ -486,6 +506,7 @@ export const borderRadiusMap = {
486
506
  'radius.medium': "var(--ds-radius-medium, 6px)",
487
507
  'radius.large': "var(--ds-radius-large, 8px)",
488
508
  'radius.xlarge': "var(--ds-radius-xlarge, 12px)",
509
+ 'radius.xxlarge': "var(--ds-radius-xxlarge, 16px)",
489
510
  'radius.full': "var(--ds-radius-full, 9999px)",
490
511
  'radius.tile': "var(--ds-radius-tile, 25%)"
491
512
  };
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -68,10 +68,10 @@ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), nega
68
68
 
69
69
  /**
70
70
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
71
- * @codegen <<SignedSource::391876b08f98d21b153df0b42a122d9a>>
71
+ * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
72
72
  * @codegenId inverse-colors
73
73
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
74
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
74
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
75
75
  */
76
76
  export var inverseColorMap = {
77
77
  'color.background.neutral.bold': 'color.text.inverse',
@@ -109,11 +109,11 @@ export var inverseColorMap = {
109
109
 
110
110
  /**
111
111
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
112
- * @codegen <<SignedSource::4407d5eb027cc933eed726fed33ad1ad>>
112
+ * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
113
113
  * @codegenId elevation
114
114
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
115
115
  * @codegenParams ["opacity", "shadow", "surface"]
116
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
116
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
117
117
  */
118
118
  export var opacityMap = {
119
119
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -144,11 +144,11 @@ export var surfaceColorMap = {
144
144
 
145
145
  /**
146
146
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
147
- * @codegen <<SignedSource::81e488bd12e67b8ac3ac65c71e50e967>>
147
+ * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
148
148
  * @codegenId colors
149
149
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
150
150
  * @codegenParams ["border", "background", "text", "fill"]
151
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
151
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
152
152
  */
153
153
  export var borderColorMap = {
154
154
  'color.border': "var(--ds-border, #091e4221)",
@@ -330,30 +330,45 @@ export var backgroundColorMap = {
330
330
  'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
331
331
  'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
332
332
  'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
333
+ 'color.background.danger.subtler': "var(--ds-background-danger-subtler, #FFBDAD)",
334
+ 'color.background.danger.subtler.hovered': "var(--ds-background-danger-subtler-hovered, #FF8F73)",
335
+ 'color.background.danger.subtler.pressed': "var(--ds-background-danger-subtler-pressed, #FF7452)",
333
336
  'color.background.danger.bold': "var(--ds-background-danger-bold, #DE350B)",
334
337
  'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
335
338
  'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
336
339
  'color.background.warning': "var(--ds-background-warning, #FFFAE6)",
337
340
  'color.background.warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
338
341
  'color.background.warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
342
+ 'color.background.warning.subtler': "var(--ds-background-warning-subtler, #FFF0B3)",
343
+ 'color.background.warning.subtler.hovered': "var(--ds-background-warning-subtler-hovered, #FFE380)",
344
+ 'color.background.warning.subtler.pressed': "var(--ds-background-warning-subtler-pressed, #FFC400)",
339
345
  'color.background.warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
340
346
  'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
341
347
  'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
342
348
  'color.background.success': "var(--ds-background-success, #E3FCEF)",
343
349
  'color.background.success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
344
350
  'color.background.success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
351
+ 'color.background.success.subtler': "var(--ds-background-success-subtler, #ABF5D1)",
352
+ 'color.background.success.subtler.hovered': "var(--ds-background-success-subtler-hovered, #79F2C0)",
353
+ 'color.background.success.subtler.pressed': "var(--ds-background-success-subtler-pressed, #57D9A3)",
345
354
  'color.background.success.bold': "var(--ds-background-success-bold, #00875A)",
346
355
  'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
347
356
  'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
348
357
  'color.background.discovery': "var(--ds-background-discovery, #EAE6FF)",
349
358
  'color.background.discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
350
359
  'color.background.discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
360
+ 'color.background.discovery.subtler': "var(--ds-background-discovery-subtler, #C0B6F2)",
361
+ 'color.background.discovery.subtler.hovered': "var(--ds-background-discovery-subtler-hovered, #998DD9)",
362
+ 'color.background.discovery.subtler.pressed': "var(--ds-background-discovery-subtler-pressed, #8777D9)",
351
363
  'color.background.discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
352
364
  'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
353
365
  'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
354
366
  'color.background.information': "var(--ds-background-information, #DEEBFF)",
355
367
  'color.background.information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
356
368
  'color.background.information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
369
+ 'color.background.information.subtler': "var(--ds-background-information-subtler, #B3D4FF)",
370
+ 'color.background.information.subtler.hovered': "var(--ds-background-information-subtler-hovered, #4C9AFF)",
371
+ 'color.background.information.subtler.pressed': "var(--ds-background-information-subtler-pressed, #2684FF)",
357
372
  'color.background.information.bold': "var(--ds-background-information-bold, #0052CC)",
358
373
  'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
359
374
  'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
@@ -401,11 +416,16 @@ export var textColorMap = {
401
416
  'color.text.selected': "var(--ds-text-selected, #0052CC)",
402
417
  'color.text.brand': "var(--ds-text-brand, #0065FF)",
403
418
  'color.text.danger': "var(--ds-text-danger, #DE350B)",
419
+ 'color.text.danger.bolder': "var(--ds-text-danger-bolder, #BF2600)",
404
420
  'color.text.warning': "var(--ds-text-warning, #974F0C)",
405
421
  'color.text.warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
422
+ 'color.text.warning.bolder': "var(--ds-text-warning-bolder, #974F0C)",
406
423
  'color.text.success': "var(--ds-text-success, #006644)",
424
+ 'color.text.success.bolder': "var(--ds-text-success-bolder, #006644)",
407
425
  'color.text.discovery': "var(--ds-text-discovery, #403294)",
426
+ 'color.text.discovery.bolder': "var(--ds-text-discovery-bolder, #403294)",
408
427
  'color.text.information': "var(--ds-text-information, #0052CC)",
428
+ 'color.text.information.bolder': "var(--ds-text-information-bolder, #0747A6)",
409
429
  'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
410
430
  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
411
431
  'color.link': "var(--ds-link, #0052CC)",
@@ -469,11 +489,11 @@ export var layerMap = {
469
489
 
470
490
  /**
471
491
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
472
- * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
492
+ * @codegen <<SignedSource::042e960cffbaf7b7d1022ee02c3c6cbb>>
473
493
  * @codegenId border
474
494
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
475
495
  * @codegenParams ["width", "radius"]
476
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
496
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a98e95106b856526c36bec8851e84348>>
477
497
  */
478
498
  export var borderWidthMap = {
479
499
  'border.width': "var(--ds-border-width, 1px)",
@@ -486,6 +506,7 @@ export var borderRadiusMap = {
486
506
  'radius.medium': "var(--ds-radius-medium, 6px)",
487
507
  'radius.large': "var(--ds-radius-large, 8px)",
488
508
  'radius.xlarge': "var(--ds-radius-xlarge, 12px)",
509
+ 'radius.xxlarge': "var(--ds-radius-xxlarge, 16px)",
489
510
  'radius.full': "var(--ds-radius-full, 9999px)",
490
511
  'radius.tile': "var(--ds-radius-tile, 25%)"
491
512
  };
package/dist/types/utils/types.d.ts CHANGED
@@ -3,4 +3,4 @@
3
3
  * as we typically want to remove these from allowed elements.
4
4
  */
5
5
  export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
6
- export type BackgroundColorToken = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current';
6
+ export type BackgroundColorToken = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current';
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -89,10 +89,10 @@ export type AllSpace = keyof typeof allSpaceMap;
89
89
  */
90
90
  /**
91
91
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
92
- * @codegen <<SignedSource::391876b08f98d21b153df0b42a122d9a>>
92
+ * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
93
93
  * @codegenId inverse-colors
94
94
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
95
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
95
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
96
96
  */
97
97
  export declare const inverseColorMap: {
98
98
  'color.background.neutral.bold': 'color.text.inverse';
@@ -128,11 +128,11 @@ export declare const inverseColorMap: {
128
128
  */
129
129
  /**
130
130
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
131
- * @codegen <<SignedSource::4407d5eb027cc933eed726fed33ad1ad>>
131
+ * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
132
132
  * @codegenId elevation
133
133
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
134
134
  * @codegenParams ["opacity", "shadow", "surface"]
135
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
135
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
136
136
  */
137
137
  export declare const opacityMap: {
138
138
  'opacity.disabled': 'var(--ds-opacity-disabled)';
@@ -165,11 +165,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
165
165
  */
166
166
  /**
167
167
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
168
- * @codegen <<SignedSource::81e488bd12e67b8ac3ac65c71e50e967>>
168
+ * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
169
169
  * @codegenId colors
170
170
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
171
171
  * @codegenParams ["border", "background", "text", "fill"]
172
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
172
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
173
173
  */
174
174
  export declare const borderColorMap: {
175
175
  'color.border': 'var(--ds-border)';
@@ -352,30 +352,45 @@ export declare const backgroundColorMap: {
352
352
  'color.background.danger': 'var(--ds-background-danger)';
353
353
  'color.background.danger.hovered': 'var(--ds-background-danger-hovered)';
354
354
  'color.background.danger.pressed': 'var(--ds-background-danger-pressed)';
355
+ 'color.background.danger.subtler': 'var(--ds-background-danger-subtler)';
356
+ 'color.background.danger.subtler.hovered': 'var(--ds-background-danger-subtler-hovered)';
357
+ 'color.background.danger.subtler.pressed': 'var(--ds-background-danger-subtler-pressed)';
355
358
  'color.background.danger.bold': 'var(--ds-background-danger-bold)';
356
359
  'color.background.danger.bold.hovered': 'var(--ds-background-danger-bold-hovered)';
357
360
  'color.background.danger.bold.pressed': 'var(--ds-background-danger-bold-pressed)';
358
361
  'color.background.warning': 'var(--ds-background-warning)';
359
362
  'color.background.warning.hovered': 'var(--ds-background-warning-hovered)';
360
363
  'color.background.warning.pressed': 'var(--ds-background-warning-pressed)';
364
+ 'color.background.warning.subtler': 'var(--ds-background-warning-subtler)';
365
+ 'color.background.warning.subtler.hovered': 'var(--ds-background-warning-subtler-hovered)';
366
+ 'color.background.warning.subtler.pressed': 'var(--ds-background-warning-subtler-pressed)';
361
367
  'color.background.warning.bold': 'var(--ds-background-warning-bold)';
362
368
  'color.background.warning.bold.hovered': 'var(--ds-background-warning-bold-hovered)';
363
369
  'color.background.warning.bold.pressed': 'var(--ds-background-warning-bold-pressed)';
364
370
  'color.background.success': 'var(--ds-background-success)';
365
371
  'color.background.success.hovered': 'var(--ds-background-success-hovered)';
366
372
  'color.background.success.pressed': 'var(--ds-background-success-pressed)';
373
+ 'color.background.success.subtler': 'var(--ds-background-success-subtler)';
374
+ 'color.background.success.subtler.hovered': 'var(--ds-background-success-subtler-hovered)';
375
+ 'color.background.success.subtler.pressed': 'var(--ds-background-success-subtler-pressed)';
367
376
  'color.background.success.bold': 'var(--ds-background-success-bold)';
368
377
  'color.background.success.bold.hovered': 'var(--ds-background-success-bold-hovered)';
369
378
  'color.background.success.bold.pressed': 'var(--ds-background-success-bold-pressed)';
370
379
  'color.background.discovery': 'var(--ds-background-discovery)';
371
380
  'color.background.discovery.hovered': 'var(--ds-background-discovery-hovered)';
372
381
  'color.background.discovery.pressed': 'var(--ds-background-discovery-pressed)';
382
+ 'color.background.discovery.subtler': 'var(--ds-background-discovery-subtler)';
383
+ 'color.background.discovery.subtler.hovered': 'var(--ds-background-discovery-subtler-hovered)';
384
+ 'color.background.discovery.subtler.pressed': 'var(--ds-background-discovery-subtler-pressed)';
373
385
  'color.background.discovery.bold': 'var(--ds-background-discovery-bold)';
374
386
  'color.background.discovery.bold.hovered': 'var(--ds-background-discovery-bold-hovered)';
375
387
  'color.background.discovery.bold.pressed': 'var(--ds-background-discovery-bold-pressed)';
376
388
  'color.background.information': 'var(--ds-background-information)';
377
389
  'color.background.information.hovered': 'var(--ds-background-information-hovered)';
378
390
  'color.background.information.pressed': 'var(--ds-background-information-pressed)';
391
+ 'color.background.information.subtler': 'var(--ds-background-information-subtler)';
392
+ 'color.background.information.subtler.hovered': 'var(--ds-background-information-subtler-hovered)';
393
+ 'color.background.information.subtler.pressed': 'var(--ds-background-information-subtler-pressed)';
379
394
  'color.background.information.bold': 'var(--ds-background-information-bold)';
380
395
  'color.background.information.bold.hovered': 'var(--ds-background-information-bold-hovered)';
381
396
  'color.background.information.bold.pressed': 'var(--ds-background-information-bold-pressed)';
@@ -424,11 +439,16 @@ export declare const textColorMap: {
424
439
  'color.text.selected': 'var(--ds-text-selected)';
425
440
  'color.text.brand': 'var(--ds-text-brand)';
426
441
  'color.text.danger': 'var(--ds-text-danger)';
442
+ 'color.text.danger.bolder': 'var(--ds-text-danger-bolder)';
427
443
  'color.text.warning': 'var(--ds-text-warning)';
428
444
  'color.text.warning.inverse': 'var(--ds-text-warning-inverse)';
445
+ 'color.text.warning.bolder': 'var(--ds-text-warning-bolder)';
429
446
  'color.text.success': 'var(--ds-text-success)';
447
+ 'color.text.success.bolder': 'var(--ds-text-success-bolder)';
430
448
  'color.text.discovery': 'var(--ds-text-discovery)';
449
+ 'color.text.discovery.bolder': 'var(--ds-text-discovery-bolder)';
431
450
  'color.text.information': 'var(--ds-text-information)';
451
+ 'color.text.information.bolder': 'var(--ds-text-information-bolder)';
432
452
  'color.text.subtlest': 'var(--ds-text-subtlest)';
433
453
  'color.text.subtle': 'var(--ds-text-subtle)';
434
454
  'color.link': 'var(--ds-link)';
@@ -493,11 +513,11 @@ export type Layer = keyof typeof layerMap;
493
513
  */
494
514
  /**
495
515
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
496
- * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
516
+ * @codegen <<SignedSource::042e960cffbaf7b7d1022ee02c3c6cbb>>
497
517
  * @codegenId border
498
518
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
499
519
  * @codegenParams ["width", "radius"]
500
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
520
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a98e95106b856526c36bec8851e84348>>
501
521
  */
502
522
  export declare const borderWidthMap: {
503
523
  'border.width': 'var(--ds-border-width)';
@@ -511,6 +531,7 @@ export declare const borderRadiusMap: {
511
531
  'radius.medium': 'var(--ds-radius-medium)';
512
532
  'radius.large': 'var(--ds-radius-large)';
513
533
  'radius.xlarge': 'var(--ds-radius-xlarge)';
534
+ 'radius.xxlarge': 'var(--ds-radius-xxlarge)';
514
535
  'radius.full': 'var(--ds-radius-full)';
515
536
  'radius.tile': 'var(--ds-radius-tile)';
516
537
  };
package/dist/types-ts4.5/utils/types.d.ts CHANGED
@@ -3,4 +3,4 @@
3
3
  * as we typically want to remove these from allowed elements.
4
4
  */
5
5
  export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
6
- export type BackgroundColorToken = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current';
6
+ export type BackgroundColorToken = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current';
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -89,10 +89,10 @@ export type AllSpace = keyof typeof allSpaceMap;
89
89
  */
90
90
  /**
91
91
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
92
- * @codegen <<SignedSource::391876b08f98d21b153df0b42a122d9a>>
92
+ * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
93
93
  * @codegenId inverse-colors
94
94
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
95
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
95
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
96
96
  */
97
97
  export declare const inverseColorMap: {
98
98
  'color.background.neutral.bold': 'color.text.inverse';
@@ -128,11 +128,11 @@ export declare const inverseColorMap: {
128
128
  */
129
129
  /**
130
130
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
131
- * @codegen <<SignedSource::4407d5eb027cc933eed726fed33ad1ad>>
131
+ * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
132
132
  * @codegenId elevation
133
133
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
134
134
  * @codegenParams ["opacity", "shadow", "surface"]
135
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
135
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
136
136
  */
137
137
  export declare const opacityMap: {
138
138
  'opacity.disabled': 'var(--ds-opacity-disabled)';
@@ -165,11 +165,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
165
165
  */
166
166
  /**
167
167
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
168
- * @codegen <<SignedSource::81e488bd12e67b8ac3ac65c71e50e967>>
168
+ * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
169
169
  * @codegenId colors
170
170
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
171
171
  * @codegenParams ["border", "background", "text", "fill"]
172
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
172
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
173
173
  */
174
174
  export declare const borderColorMap: {
175
175
  'color.border': 'var(--ds-border)';
@@ -352,30 +352,45 @@ export declare const backgroundColorMap: {
352
352
  'color.background.danger': 'var(--ds-background-danger)';
353
353
  'color.background.danger.hovered': 'var(--ds-background-danger-hovered)';
354
354
  'color.background.danger.pressed': 'var(--ds-background-danger-pressed)';
355
+ 'color.background.danger.subtler': 'var(--ds-background-danger-subtler)';
356
+ 'color.background.danger.subtler.hovered': 'var(--ds-background-danger-subtler-hovered)';
357
+ 'color.background.danger.subtler.pressed': 'var(--ds-background-danger-subtler-pressed)';
355
358
  'color.background.danger.bold': 'var(--ds-background-danger-bold)';
356
359
  'color.background.danger.bold.hovered': 'var(--ds-background-danger-bold-hovered)';
357
360
  'color.background.danger.bold.pressed': 'var(--ds-background-danger-bold-pressed)';
358
361
  'color.background.warning': 'var(--ds-background-warning)';
359
362
  'color.background.warning.hovered': 'var(--ds-background-warning-hovered)';
360
363
  'color.background.warning.pressed': 'var(--ds-background-warning-pressed)';
364
+ 'color.background.warning.subtler': 'var(--ds-background-warning-subtler)';
365
+ 'color.background.warning.subtler.hovered': 'var(--ds-background-warning-subtler-hovered)';
366
+ 'color.background.warning.subtler.pressed': 'var(--ds-background-warning-subtler-pressed)';
361
367
  'color.background.warning.bold': 'var(--ds-background-warning-bold)';
362
368
  'color.background.warning.bold.hovered': 'var(--ds-background-warning-bold-hovered)';
363
369
  'color.background.warning.bold.pressed': 'var(--ds-background-warning-bold-pressed)';
364
370
  'color.background.success': 'var(--ds-background-success)';
365
371
  'color.background.success.hovered': 'var(--ds-background-success-hovered)';
366
372
  'color.background.success.pressed': 'var(--ds-background-success-pressed)';
373
+ 'color.background.success.subtler': 'var(--ds-background-success-subtler)';
374
+ 'color.background.success.subtler.hovered': 'var(--ds-background-success-subtler-hovered)';
375
+ 'color.background.success.subtler.pressed': 'var(--ds-background-success-subtler-pressed)';
367
376
  'color.background.success.bold': 'var(--ds-background-success-bold)';
368
377
  'color.background.success.bold.hovered': 'var(--ds-background-success-bold-hovered)';
369
378
  'color.background.success.bold.pressed': 'var(--ds-background-success-bold-pressed)';
370
379
  'color.background.discovery': 'var(--ds-background-discovery)';
371
380
  'color.background.discovery.hovered': 'var(--ds-background-discovery-hovered)';
372
381
  'color.background.discovery.pressed': 'var(--ds-background-discovery-pressed)';
382
+ 'color.background.discovery.subtler': 'var(--ds-background-discovery-subtler)';
383
+ 'color.background.discovery.subtler.hovered': 'var(--ds-background-discovery-subtler-hovered)';
384
+ 'color.background.discovery.subtler.pressed': 'var(--ds-background-discovery-subtler-pressed)';
373
385
  'color.background.discovery.bold': 'var(--ds-background-discovery-bold)';
374
386
  'color.background.discovery.bold.hovered': 'var(--ds-background-discovery-bold-hovered)';
375
387
  'color.background.discovery.bold.pressed': 'var(--ds-background-discovery-bold-pressed)';
376
388
  'color.background.information': 'var(--ds-background-information)';
377
389
  'color.background.information.hovered': 'var(--ds-background-information-hovered)';
378
390
  'color.background.information.pressed': 'var(--ds-background-information-pressed)';
391
+ 'color.background.information.subtler': 'var(--ds-background-information-subtler)';
392
+ 'color.background.information.subtler.hovered': 'var(--ds-background-information-subtler-hovered)';
393
+ 'color.background.information.subtler.pressed': 'var(--ds-background-information-subtler-pressed)';
379
394
  'color.background.information.bold': 'var(--ds-background-information-bold)';
380
395
  'color.background.information.bold.hovered': 'var(--ds-background-information-bold-hovered)';
381
396
  'color.background.information.bold.pressed': 'var(--ds-background-information-bold-pressed)';
@@ -424,11 +439,16 @@ export declare const textColorMap: {
424
439
  'color.text.selected': 'var(--ds-text-selected)';
425
440
  'color.text.brand': 'var(--ds-text-brand)';
426
441
  'color.text.danger': 'var(--ds-text-danger)';
442
+ 'color.text.danger.bolder': 'var(--ds-text-danger-bolder)';
427
443
  'color.text.warning': 'var(--ds-text-warning)';
428
444
  'color.text.warning.inverse': 'var(--ds-text-warning-inverse)';
445
+ 'color.text.warning.bolder': 'var(--ds-text-warning-bolder)';
429
446
  'color.text.success': 'var(--ds-text-success)';
447
+ 'color.text.success.bolder': 'var(--ds-text-success-bolder)';
430
448
  'color.text.discovery': 'var(--ds-text-discovery)';
449
+ 'color.text.discovery.bolder': 'var(--ds-text-discovery-bolder)';
431
450
  'color.text.information': 'var(--ds-text-information)';
451
+ 'color.text.information.bolder': 'var(--ds-text-information-bolder)';
432
452
  'color.text.subtlest': 'var(--ds-text-subtlest)';
433
453
  'color.text.subtle': 'var(--ds-text-subtle)';
434
454
  'color.link': 'var(--ds-link)';
@@ -493,11 +513,11 @@ export type Layer = keyof typeof layerMap;
493
513
  */
494
514
  /**
495
515
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
496
- * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
516
+ * @codegen <<SignedSource::042e960cffbaf7b7d1022ee02c3c6cbb>>
497
517
  * @codegenId border
498
518
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
499
519
  * @codegenParams ["width", "radius"]
500
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
520
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a98e95106b856526c36bec8851e84348>>
501
521
  */
502
522
  export declare const borderWidthMap: {
503
523
  'border.width': 'var(--ds-border-width)';
@@ -511,6 +531,7 @@ export declare const borderRadiusMap: {
511
531
  'radius.medium': 'var(--ds-radius-medium)';
512
532
  'radius.large': 'var(--ds-radius-large)';
513
533
  'radius.xlarge': 'var(--ds-radius-xlarge)';
534
+ 'radius.xxlarge': 'var(--ds-radius-xxlarge)';
514
535
  'radius.full': 'var(--ds-radius-full)';
515
536
  'radius.tile': 'var(--ds-radius-tile)';
516
537
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "16.1.1",
3
+ "version": "16.3.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -134,11 +134,11 @@
134
134
  "dependencies": {
135
135
  "@atlaskit/analytics-next": "^11.1.0",
136
136
  "@atlaskit/app-provider": "^3.2.0",
137
- "@atlaskit/css": "^0.15.0",
138
- "@atlaskit/ds-lib": "^5.2.0",
137
+ "@atlaskit/css": "^0.17.0",
138
+ "@atlaskit/ds-lib": "^5.3.0",
139
139
  "@atlaskit/interaction-context": "^3.1.0",
140
140
  "@atlaskit/platform-feature-flags": "^1.1.0",
141
- "@atlaskit/tokens": "^8.0.0",
141
+ "@atlaskit/tokens": "^8.3.0",
142
142
  "@atlaskit/visually-hidden": "^3.0.0",
143
143
  "@babel/runtime": "^7.0.0",
144
144
  "@compiled/react": "^0.18.6",
@@ -162,9 +162,9 @@
162
162
  "@atlaskit/docs": "^11.2.0",
163
163
  "@atlaskit/dropdown-menu": "^16.3.0",
164
164
  "@atlaskit/flag": "^17.5.0",
165
- "@atlaskit/form": "^14.2.0",
165
+ "@atlaskit/form": "^14.3.0",
166
166
  "@atlaskit/heading": "^5.2.0",
167
- "@atlaskit/icon": "^28.5.0",
167
+ "@atlaskit/icon": "^29.0.0",
168
168
  "@atlaskit/icon-object": "^7.3.0",
169
169
  "@atlaskit/image": "^3.0.0",
170
170
  "@atlaskit/link": "^3.2.0",
@@ -173,9 +173,9 @@
173
173
  "@atlaskit/motion": "^5.3.0",
174
174
  "@atlaskit/range": "^9.2.0",
175
175
  "@atlaskit/section-message": "^8.9.0",
176
- "@atlaskit/textfield": "^8.0.0",
176
+ "@atlaskit/textfield": "^8.1.0",
177
177
  "@atlaskit/toggle": "^15.1.0",
178
- "@atlaskit/tooltip": "^20.8.0",
178
+ "@atlaskit/tooltip": "^20.10.0",
179
179
  "@atlassian/analytics-bridge": "^0.7.0",
180
180
  "@atlassian/codegen": "^0.1.0",
181
181
  "@atlassian/feature-flags-test-utils": "^1.0.0",