@atlaskit/primitives 16.2.0 → 16.4.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 (10) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/cjs/xcss/style-maps.partial.js +26 -6
  3. package/dist/es2019/xcss/style-maps.partial.js +26 -6
  4. package/dist/esm/xcss/style-maps.partial.js +26 -6
  5. package/dist/types/utils/types.d.ts +1 -1
  6. package/dist/types/xcss/style-maps.partial.d.ts +26 -6
  7. package/dist/types-ts4.5/utils/types.d.ts +1 -1
  8. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +26 -6
  9. package/package.json +5 -5
  10. package/scripts/codegen-styles.tsx +180 -182
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 16.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e45f66913297e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e45f66913297e) -
8
+ Import emotion box into Forge UI Kit library
9
+
10
+ ## 16.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`644c0f593ae62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/644c0f593ae62) -
15
+ Adds background color tokens to types.
16
+ - [`644c0f593ae62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/644c0f593ae62) -
17
+ Adds new semantic background and text tokens.
18
+
19
+ **Background Tokens (`background.[semantics].subtler.*`):**
20
+
21
+ Added `subtler` variants for semantic background colors with default, hovered, and pressed states:
22
+ - `background.success.subtler.[default|hovered|pressed]`
23
+ - `background.warning.subtler.[default|hovered|pressed]`
24
+ - `background.danger.subtler.[default|hovered|pressed]`
25
+ - `background.information.subtler.[default|hovered|pressed]`
26
+ - `background.discovery.subtler.[default|hovered|pressed]`
27
+
28
+ **Text Tokens (`text.[semantics].bolder`):**
29
+
30
+ Added `bolder` variants for semantic text colors to ensure proper contrast on colored backgrounds:
31
+ - `text.success.bolder`
32
+ - `text.warning.bolder`
33
+ - `text.danger.bolder`
34
+ - `text.information.bolder`
35
+ - `text.discovery.bolder`
36
+
37
+ ### Patch Changes
38
+
39
+ - Updated dependencies
40
+
3
41
  ## 16.2.0
4
42
 
5
43
  ### Minor 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)",
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)",
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)",
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)';
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)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "16.2.0",
3
+ "version": "16.4.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.16.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.1.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,7 +162,7 @@
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
167
  "@atlaskit/icon": "^29.0.0",
168
168
  "@atlaskit/icon-object": "^7.3.0",
package/scripts/codegen-styles.tsx CHANGED
@@ -29,198 +29,196 @@ const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
29
29
  .filter((item) => !item.isDirectory())
30
30
  .map((item) => join(__dirname, 'codegen-file-templates', item.name));
31
31
 
32
- const targetPath = join(__dirname, '../', 'src', 'xcss', 'style-maps.partial.tsx');
33
- const xcssCodemodPath = join(
34
- process.cwd(),
35
- '../../../',
36
- 'packages/design-system/css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
37
- );
32
+ // Output paths for partial codegen
33
+ const primitivesOutputs = [
34
+ join(__dirname, '../src/xcss/style-maps.partial.tsx'),
35
+ join(
36
+ __dirname,
37
+ '../../css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
38
+ ),
39
+ ];
38
40
 
39
- const sourceFns = [
41
+ const forgeOutputPath = join(__dirname, '../../../forge/forge-ui/src/components/UIKit/tokens.partial.tsx');
42
+
43
+ // Generate partial sections for @atlaskit/primitives style-maps
44
+ const primitivesSourceFns = [
40
45
  // width, height, minWidth, maxWidth, minHeight, maxHeight
41
- () =>
42
- createPartialSignedArtifact(
43
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
44
- 'yarn workspace @atlaskit/primitives codegen-styles',
45
- {
46
- id: 'dimensions',
47
- absoluteFilePath: targetPath,
48
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
49
- },
50
- ),
51
- () =>
52
- createPartialSignedArtifact(
53
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
54
- 'yarn workspace @atlaskit/primitives codegen-styles',
55
- {
56
- id: 'dimensions',
57
- absoluteFilePath: xcssCodemodPath,
58
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
59
- },
60
- ),
46
+ ...primitivesOutputs.map((outputPath) =>
47
+ () =>
48
+ createPartialSignedArtifact(
49
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
50
+ 'yarn workspace @atlaskit/primitives codegen-styles',
51
+ {
52
+ id: 'dimensions',
53
+ absoluteFilePath: outputPath,
54
+ dependencies: templateFiles.filter((v) => v.includes('dimensions')),
55
+ },
56
+ ),
57
+ ),
61
58
  // padding*, gap*, inset*
62
- () =>
63
- createPartialSignedArtifact(
64
- createSpacingStylesFromTemplate,
65
- 'yarn workspace @atlaskit/primitives codegen-styles',
66
- {
67
- id: 'spacing',
68
- absoluteFilePath: targetPath,
69
- dependencies: [spacingTokensDependencyPath],
70
- },
71
- ),
72
- () =>
73
- createPartialSignedArtifact(
74
- createSpacingStylesFromTemplate,
75
- 'yarn workspace @atlaskit/primitives codegen-styles',
76
- {
77
- id: 'spacing',
78
- absoluteFilePath: xcssCodemodPath,
79
- dependencies: [spacingTokensDependencyPath],
80
- },
81
- ),
59
+ ...primitivesOutputs.map((outputPath) =>
60
+ () =>
61
+ createPartialSignedArtifact(
62
+ createSpacingStylesFromTemplate,
63
+ 'yarn workspace @atlaskit/primitives codegen-styles',
64
+ {
65
+ id: 'spacing',
66
+ absoluteFilePath: outputPath,
67
+ dependencies: [spacingTokensDependencyPath],
68
+ },
69
+ ),
70
+ ),
82
71
  // text color, background-color, border-color
83
- () =>
84
- createPartialSignedArtifact(
85
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
86
- 'yarn workspace @atlaskit/primitives codegen-styles',
87
- {
88
- id: 'colors',
89
- absoluteFilePath: targetPath,
90
- dependencies: [colorTokensDependencyPath],
91
- },
92
- ),
93
- () =>
94
- createPartialSignedArtifact(
95
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
96
- 'yarn workspace @atlaskit/primitives codegen-styles',
97
- {
98
- id: 'colors',
99
- absoluteFilePath: xcssCodemodPath,
100
- dependencies: [colorTokensDependencyPath],
101
- },
102
- ),
72
+ ...primitivesOutputs.map((outputPath) =>
73
+ () =>
74
+ createPartialSignedArtifact(
75
+ (options) => options.map(createColorStylesFromTemplate).join('\n'),
76
+ 'yarn workspace @atlaskit/primitives codegen-styles',
77
+ {
78
+ id: 'colors',
79
+ absoluteFilePath: outputPath,
80
+ dependencies: [colorTokensDependencyPath],
81
+ },
82
+ ),
83
+ ),
103
84
  // inverse color map
104
- () =>
105
- createPartialSignedArtifact(
106
- createInverseColorMapTemplate,
107
- 'yarn workspace @atlaskit/primitives codegen-styles',
108
- {
109
- id: 'inverse-colors',
110
- absoluteFilePath: targetPath,
111
- dependencies: [colorTokensDependencyPath],
112
- },
113
- ),
85
+ ...primitivesOutputs.map((outputPath) =>
86
+ () =>
87
+ createPartialSignedArtifact(
88
+ createInverseColorMapTemplate,
89
+ 'yarn workspace @atlaskit/primitives codegen-styles',
90
+ {
91
+ id: 'inverse-colors',
92
+ absoluteFilePath: outputPath,
93
+ dependencies: [colorTokensDependencyPath],
94
+ },
95
+ ),
96
+ ),
114
97
  // elevation (opacity, shadow, surface)
115
- () =>
116
- createPartialSignedArtifact(
117
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
118
- 'yarn workspace @atlaskit/primitives codegen-styles',
119
- {
120
- id: 'elevation',
121
- absoluteFilePath: targetPath,
122
- dependencies: [colorTokensDependencyPath],
123
- },
124
- ),
125
- () =>
126
- createPartialSignedArtifact(
127
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
128
- 'yarn workspace @atlaskit/primitives codegen-styles',
129
- {
130
- id: 'elevation',
131
- absoluteFilePath: xcssCodemodPath,
132
- dependencies: [colorTokensDependencyPath],
133
- },
134
- ),
98
+ ...primitivesOutputs.map((outputPath) =>
99
+ () =>
100
+ createPartialSignedArtifact(
101
+ (options) => options.map(createElevationStylesFromTemplate).join('\n'),
102
+ 'yarn workspace @atlaskit/primitives codegen-styles',
103
+ {
104
+ id: 'elevation',
105
+ absoluteFilePath: outputPath,
106
+ dependencies: [colorTokensDependencyPath],
107
+ },
108
+ ),
109
+ ),
135
110
  // border-width, border-radius
136
- () =>
137
- createPartialSignedArtifact(
138
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
139
- 'yarn workspace @atlaskit/primitives codegen-styles',
140
- {
141
- id: 'border',
142
- absoluteFilePath: targetPath,
143
- dependencies: [shapeTokensDependencyPath],
144
- },
145
- ),
146
- () =>
147
- createPartialSignedArtifact(
148
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
149
- 'yarn workspace @atlaskit/primitives codegen-styles',
150
- {
151
- id: 'border',
152
- absoluteFilePath: xcssCodemodPath,
153
- dependencies: [shapeTokensDependencyPath],
154
- },
155
- ),
156
- // border-color, border-radius, border-width, layer',
157
- () =>
158
- createPartialSignedArtifact(
159
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
160
- 'yarn workspace @atlaskit/primitives codegen-styles',
161
- {
162
- id: 'misc',
163
- absoluteFilePath: targetPath,
164
- dependencies: templateFiles,
165
- },
166
- ),
167
- () =>
168
- createPartialSignedArtifact(
169
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
170
- 'yarn workspace @atlaskit/primitives codegen-styles',
171
- {
172
- id: 'misc',
173
- absoluteFilePath: xcssCodemodPath,
174
- dependencies: templateFiles,
175
- },
176
- ),
111
+ ...primitivesOutputs.map((outputPath) =>
112
+ () =>
113
+ createPartialSignedArtifact(
114
+ (options) => options.map(createShapeStylesFromTemplate).join('\n'),
115
+ 'yarn workspace @atlaskit/primitives codegen-styles',
116
+ {
117
+ id: 'border',
118
+ absoluteFilePath: outputPath,
119
+ dependencies: [shapeTokensDependencyPath],
120
+ },
121
+ ),
122
+ ),
123
+ // border-color, border-radius, border-width, layer
124
+ ...primitivesOutputs.map((outputPath) =>
125
+ () =>
126
+ createPartialSignedArtifact(
127
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
128
+ 'yarn workspace @atlaskit/primitives codegen-styles',
129
+ {
130
+ id: 'misc',
131
+ absoluteFilePath: outputPath,
132
+ dependencies: templateFiles,
133
+ },
134
+ ),
135
+ ),
177
136
  // font*, lineheight
178
- () =>
179
- createPartialSignedArtifact(
180
- createTypographyStylesFromTemplate,
181
- 'yarn workspace @atlaskit/primitives codegen-styles',
182
- {
183
- id: 'typography',
184
- absoluteFilePath: targetPath,
185
- dependencies: templateFiles,
186
- },
187
- ),
188
- () =>
189
- createPartialSignedArtifact(
190
- createTypographyStylesFromTemplate,
191
- 'yarn workspace @atlaskit/primitives codegen-styles',
192
- {
193
- id: 'typography',
194
- absoluteFilePath: xcssCodemodPath,
195
- dependencies: templateFiles,
196
- },
197
- ),
137
+ ...primitivesOutputs.map((outputPath) =>
138
+ () =>
139
+ createPartialSignedArtifact(
140
+ createTypographyStylesFromTemplate,
141
+ 'yarn workspace @atlaskit/primitives codegen-styles',
142
+ {
143
+ id: 'typography',
144
+ absoluteFilePath: outputPath,
145
+ dependencies: templateFiles,
146
+ },
147
+ ),
148
+ ),
198
149
  // font and weight map for text primitive
199
- () =>
200
- createPartialSignedArtifact(
201
- createTextStylesFromTemplate,
202
- 'yarn workspace @atlaskit/primitives codegen-styles',
203
- {
204
- id: 'text',
205
- absoluteFilePath: targetPath,
206
- dependencies: templateFiles,
207
- },
208
- ),
209
- () =>
210
- createPartialSignedArtifact(
211
- createTextStylesFromTemplate,
212
- 'yarn workspace @atlaskit/primitives codegen-styles',
213
- {
214
- id: 'text',
215
- absoluteFilePath: xcssCodemodPath,
216
- dependencies: templateFiles,
217
- },
218
- ),
150
+ ...primitivesOutputs.map((outputPath) =>
151
+ () =>
152
+ createPartialSignedArtifact(
153
+ createTextStylesFromTemplate,
154
+ 'yarn workspace @atlaskit/primitives codegen-styles',
155
+ {
156
+ id: 'text',
157
+ absoluteFilePath: outputPath,
158
+ dependencies: templateFiles,
159
+ },
160
+ ),
161
+ ),
219
162
  ];
220
163
 
221
- sourceFns.forEach((sourceFn) => {
222
- writeFileSync(targetPath, sourceFn());
223
- writeFileSync(xcssCodemodPath, sourceFn());
164
+ /**
165
+ * Generate Forge UI Kit tokens using partial codegen
166
+ *
167
+ * Note: Forge uses a SINGLE codegen block (@codegen-start:forge-tokens) with all tokens,
168
+ * unlike Primitives which uses separate blocks per category. This allows Forge to mix
169
+ * generated token maps with manual utility functions in one file.
170
+ *
171
+ * @see https://developer.atlassian.com/platform/forge/ui-kit/components/xcss/
172
+ */
173
+ const generateForgeTokensContent = (): string => {
174
+ const sections = [
175
+ '/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */',
176
+ createStylesFromFileTemplate('dimensions'),
177
+ '',
178
+ createSpacingStylesFromTemplate(),
179
+ '',
180
+ ...(['text', 'background', 'border'] as const).map(createColorStylesFromTemplate),
181
+ '',
182
+ createInverseColorMapTemplate(),
183
+ '',
184
+ ...(['opacity', 'shadow', 'surface'] as const).map(createElevationStylesFromTemplate),
185
+ '',
186
+ ...(['width', 'radius'] as const).map(createShapeStylesFromTemplate),
187
+ '',
188
+ createStylesFromFileTemplate('layer'),
189
+ '',
190
+ createTypographyStylesFromTemplate(),
191
+ '',
192
+ createTextStylesFromTemplate(),
193
+ ];
194
+
195
+ return sections.join('\n');
196
+ };
197
+
198
+ const forgeSourceFn = () =>
199
+ createPartialSignedArtifact(
200
+ generateForgeTokensContent,
201
+ 'yarn workspace @atlaskit/primitives codegen-styles',
202
+ {
203
+ id: 'forge-tokens',
204
+ absoluteFilePath: forgeOutputPath,
205
+ dependencies: [
206
+ ...templateFiles,
207
+ colorTokensDependencyPath,
208
+ spacingTokensDependencyPath,
209
+ shapeTokensDependencyPath,
210
+ ],
211
+ },
212
+ );
213
+
214
+ // Write all generated files
215
+ primitivesSourceFns.forEach((sourceFn, index) => {
216
+ const outputPath = primitivesOutputs[Math.floor(index / 9)]; // 9 configs per output
217
+ writeFileSync(outputPath, sourceFn());
224
218
  });
225
219
 
226
- console.log(`${targetPath} written!`);
220
+ writeFileSync(forgeOutputPath, forgeSourceFn());
221
+
222
+ console.log('Generated style maps for:');
223
+ primitivesOutputs.forEach((path) => console.log(` - ${path}`));
224
+ console.log(` - ${forgeOutputPath}`);