@atlaskit/primitives 0.10.0 → 0.11.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 (23) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/constellation/xcss/usage.mdx +1 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/cjs/xcss/style-maps.partial.js +191 -190
  5. package/dist/cjs/xcss/xcss.js +1 -1
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/es2019/xcss/style-maps.partial.js +191 -190
  8. package/dist/es2019/xcss/xcss.js +1 -1
  9. package/dist/esm/version.json +1 -1
  10. package/dist/esm/xcss/style-maps.partial.js +191 -190
  11. package/dist/esm/xcss/xcss.js +1 -1
  12. package/dist/types/xcss/style-maps.partial.d.ts +190 -189
  13. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +190 -189
  14. package/package.json +2 -2
  15. package/report.api.md +178 -177
  16. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +280 -142
  17. package/scripts/border-codegen-template.tsx +3 -6
  18. package/scripts/codegen-file-templates/display.tsx +1 -0
  19. package/scripts/codegen-file-templates/flex-shrink.tsx +1 -1
  20. package/scripts/codegen-styles.tsx +5 -5
  21. package/scripts/color-codegen-template.tsx +2 -4
  22. package/tmp/api-report-tmp.d.ts +178 -177
  23. package/tsconfig.node.json +0 -7
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { css } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
4
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
5
5
  * @codegenId dimensions
6
- * @codegenCommand yarn codegen-styles
6
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
8
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
9
9
  */
@@ -22,9 +22,9 @@ export const dimensionMap = {
22
22
  */
23
23
  /**
24
24
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
25
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
25
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
26
26
  * @codegenId spacing
27
- * @codegenCommand yarn codegen-styles
27
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
28
28
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
29
29
  */
30
30
  export const spaceMap = {
@@ -48,128 +48,128 @@ export const spaceMap = {
48
48
  */
49
49
  /**
50
50
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
51
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
51
+ * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
52
52
  * @codegenId colors
53
- * @codegenCommand yarn codegen-styles
53
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
54
54
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
55
55
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
56
56
  */
57
57
  export const borderColorMap = {
58
58
  'color.border': "var(--ds-border, #091e4221)",
59
- 'accent.red': "var(--ds-border-accent-red, #FF5630)",
60
- 'accent.orange': "var(--ds-border-accent-orange, #D94008)",
61
- 'accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
62
- 'accent.green': "var(--ds-border-accent-green, #36B37E)",
63
- 'accent.teal': "var(--ds-border-accent-teal, #00B8D9)",
64
- 'accent.blue': "var(--ds-border-accent-blue, #0065FF)",
65
- 'accent.purple': "var(--ds-border-accent-purple, #6554C0)",
66
- 'accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
67
- 'accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
68
- disabled: "var(--ds-border-disabled, #FAFBFC)",
69
- focused: "var(--ds-border-focused, #4C9AFF)",
70
- input: "var(--ds-border-input, #FAFBFC)",
71
- inverse: "var(--ds-border-inverse, #FFFFFF)",
72
- selected: "var(--ds-border-selected, #0052CC)",
73
- brand: "var(--ds-border-brand, #0052CC)",
74
- danger: "var(--ds-border-danger, #FF5630)",
75
- warning: "var(--ds-border-warning, #FFC400)",
76
- success: "var(--ds-border-success, #00875A)",
77
- discovery: "var(--ds-border-discovery, #998DD9)",
78
- information: "var(--ds-border-information, #0065FF)",
79
- bold: "var(--ds-border-bold, #344563)"
59
+ 'color.border.accent.red': "var(--ds-border-accent-red, #FF5630)",
60
+ 'color.border.accent.orange': "var(--ds-border-accent-orange, #D94008)",
61
+ 'color.border.accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
62
+ 'color.border.accent.green': "var(--ds-border-accent-green, #36B37E)",
63
+ 'color.border.accent.teal': "var(--ds-border-accent-teal, #00B8D9)",
64
+ 'color.border.accent.blue': "var(--ds-border-accent-blue, #0065FF)",
65
+ 'color.border.accent.purple': "var(--ds-border-accent-purple, #6554C0)",
66
+ 'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
67
+ 'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
68
+ 'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
69
+ 'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
70
+ 'color.border.input': "var(--ds-border-input, #FAFBFC)",
71
+ 'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
72
+ 'color.border.selected': "var(--ds-border-selected, #0052CC)",
73
+ 'color.border.brand': "var(--ds-border-brand, #0052CC)",
74
+ 'color.border.danger': "var(--ds-border-danger, #FF5630)",
75
+ 'color.border.warning': "var(--ds-border-warning, #FFC400)",
76
+ 'color.border.success': "var(--ds-border-success, #00875A)",
77
+ 'color.border.discovery': "var(--ds-border-discovery, #998DD9)",
78
+ 'color.border.information': "var(--ds-border-information, #0065FF)",
79
+ 'color.border.bold': "var(--ds-border-bold, #344563)"
80
80
  };
81
81
  export const backgroundColorMap = {
82
- 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
83
- 'accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
84
- 'accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
85
- 'accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
86
- 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
87
- 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
88
- 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
89
- 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
90
- 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
91
- 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
92
- 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
93
- 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
94
- 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
95
- 'accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
96
- 'accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
97
- 'accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
98
- 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
99
- 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
100
- 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
101
- 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
102
- 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
103
- 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
104
- 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
105
- 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
106
- 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
107
- 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
108
- 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
109
- 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
110
- 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
111
- 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
112
- 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
113
- 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
114
- 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
115
- 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
116
- 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
117
- 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
118
- disabled: "var(--ds-background-disabled, #091e4289)",
119
- input: "var(--ds-background-input, #FAFBFC)",
120
- 'input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
121
- 'input.pressed': "var(--ds-background-input-pressed, #FFFFFF)",
122
- 'inverse.subtle': "var(--ds-background-inverse-subtle, #00000029)",
123
- 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered, #0000003D)",
124
- 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed, #00000052)",
125
- neutral: "var(--ds-background-neutral, #DFE1E6)",
126
- 'neutral.hovered': "var(--ds-background-neutral-hovered, #091e4214)",
127
- 'neutral.pressed': "var(--ds-background-neutral-pressed, #B3D4FF)",
128
- 'neutral.subtle': "var(--ds-background-neutral-subtle, transparent)",
129
- 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered, #091e4214)",
130
- 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
131
- 'neutral.bold': "var(--ds-background-neutral-bold, #42526E)",
132
- 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered, #505F79)",
133
- 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed, #344563)",
134
- selected: "var(--ds-background-selected, #DEEBFF)",
135
- 'selected.hovered': "var(--ds-background-selected-hovered, #B3D4FF)",
136
- 'selected.pressed': "var(--ds-background-selected-pressed, #4C9AFF)",
137
- 'selected.bold': "var(--ds-background-selected-bold, #0052CC)",
138
- 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
139
- 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
140
- 'brand.bold': "var(--ds-background-brand-bold, #0052CC)",
141
- 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
142
- 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
143
- danger: "var(--ds-background-danger, #FFEBE6)",
144
- 'danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
145
- 'danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
146
- 'danger.bold': "var(--ds-background-danger-bold, #DE350B)",
147
- 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
148
- 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
149
- warning: "var(--ds-background-warning, #FFFAE6)",
150
- 'warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
151
- 'warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
152
- 'warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
153
- 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
154
- 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
155
- success: "var(--ds-background-success, #E3FCEF)",
156
- 'success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
157
- 'success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
158
- 'success.bold': "var(--ds-background-success-bold, #00875A)",
159
- 'success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
160
- 'success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
161
- discovery: "var(--ds-background-discovery, #EAE6FF)",
162
- 'discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
163
- 'discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
164
- 'discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
165
- 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
166
- 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
167
- information: "var(--ds-background-information, #DEEBFF)",
168
- 'information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
169
- 'information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
170
- 'information.bold': "var(--ds-background-information-bold, #0052CC)",
171
- 'information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
172
- 'information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
82
+ 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
83
+ 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
84
+ 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
85
+ 'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
86
+ 'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
87
+ 'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
88
+ 'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
89
+ 'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
90
+ 'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
91
+ 'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
92
+ 'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
93
+ 'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
94
+ 'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
95
+ 'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
96
+ 'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
97
+ 'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
98
+ 'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
99
+ 'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
100
+ 'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
101
+ 'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
102
+ 'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
103
+ 'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
104
+ 'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
105
+ 'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
106
+ 'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
107
+ 'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
108
+ 'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
109
+ 'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
110
+ 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
111
+ 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
112
+ 'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
113
+ 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
114
+ 'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
115
+ 'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
116
+ 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
117
+ 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
118
+ 'color.background.disabled': "var(--ds-background-disabled, #091e4289)",
119
+ 'color.background.input': "var(--ds-background-input, #FAFBFC)",
120
+ 'color.background.input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
121
+ 'color.background.input.pressed': "var(--ds-background-input-pressed, #FFFFFF)",
122
+ 'color.background.inverse.subtle': "var(--ds-background-inverse-subtle, #00000029)",
123
+ 'color.background.inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered, #0000003D)",
124
+ 'color.background.inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed, #00000052)",
125
+ 'color.background.neutral': "var(--ds-background-neutral, #DFE1E6)",
126
+ 'color.background.neutral.hovered': "var(--ds-background-neutral-hovered, #091e4214)",
127
+ 'color.background.neutral.pressed': "var(--ds-background-neutral-pressed, #B3D4FF)",
128
+ 'color.background.neutral.subtle': "var(--ds-background-neutral-subtle, transparent)",
129
+ 'color.background.neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered, #091e4214)",
130
+ 'color.background.neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
131
+ 'color.background.neutral.bold': "var(--ds-background-neutral-bold, #42526E)",
132
+ 'color.background.neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered, #505F79)",
133
+ 'color.background.neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed, #344563)",
134
+ 'color.background.selected': "var(--ds-background-selected, #DEEBFF)",
135
+ 'color.background.selected.hovered': "var(--ds-background-selected-hovered, #B3D4FF)",
136
+ 'color.background.selected.pressed': "var(--ds-background-selected-pressed, #4C9AFF)",
137
+ 'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
138
+ 'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
139
+ 'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
140
+ 'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
141
+ 'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
142
+ 'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
143
+ 'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
144
+ 'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
145
+ 'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
146
+ 'color.background.danger.bold': "var(--ds-background-danger-bold, #DE350B)",
147
+ 'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
148
+ 'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
149
+ 'color.background.warning': "var(--ds-background-warning, #FFFAE6)",
150
+ 'color.background.warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
151
+ 'color.background.warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
152
+ 'color.background.warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
153
+ 'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
154
+ 'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
155
+ 'color.background.success': "var(--ds-background-success, #E3FCEF)",
156
+ 'color.background.success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
157
+ 'color.background.success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
158
+ 'color.background.success.bold': "var(--ds-background-success-bold, #00875A)",
159
+ 'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
160
+ 'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
161
+ 'color.background.discovery': "var(--ds-background-discovery, #EAE6FF)",
162
+ 'color.background.discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
163
+ 'color.background.discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
164
+ 'color.background.discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
165
+ 'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
166
+ 'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
167
+ 'color.background.information': "var(--ds-background-information, #DEEBFF)",
168
+ 'color.background.information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
169
+ 'color.background.information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
170
+ 'color.background.information.bold': "var(--ds-background-information-bold, #0052CC)",
171
+ 'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
172
+ 'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
173
173
  'color.blanket': "var(--ds-blanket, #091e4289)",
174
174
  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
175
175
  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
@@ -185,84 +185,84 @@ export const backgroundColorMap = {
185
185
  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
186
186
  };
187
187
  export const shadowMap = {
188
- overflow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)",
189
- 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter, #091e421f)",
190
- 'overflow.spread': "var(--ds-shadow-overflow-spread, #091e4229)",
191
- overlay: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)",
192
- raised: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
188
+ 'elevation.shadow.overflow': "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)",
189
+ 'elevation.shadow.overflow.perimeter': "var(--ds-shadow-overflow-perimeter, #091e421f)",
190
+ 'elevation.shadow.overflow.spread': "var(--ds-shadow-overflow-spread, #091e4229)",
191
+ 'elevation.shadow.overlay': "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)",
192
+ 'elevation.shadow.raised': "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
193
193
  };
194
194
  export const textColorMap = {
195
195
  'color.text': "var(--ds-text, #172B4D)",
196
- 'accent.red': "var(--ds-text-accent-red, #DE350B)",
197
- 'accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
198
- 'accent.orange': "var(--ds-text-accent-orange, #F18D13)",
199
- 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder, #B65C02)",
200
- 'accent.yellow': "var(--ds-text-accent-yellow, #FF991F)",
201
- 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder, #FF8B00)",
202
- 'accent.green': "var(--ds-text-accent-green, #00875A)",
203
- 'accent.green.bolder': "var(--ds-text-accent-green-bolder, #006644)",
204
- 'accent.teal': "var(--ds-text-accent-teal, #00A3BF)",
205
- 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder, #008DA6)",
206
- 'accent.blue': "var(--ds-text-accent-blue, #0052CC)",
207
- 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder, #0747A6)",
208
- 'accent.purple': "var(--ds-text-accent-purple, #5243AA)",
209
- 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder, #403294)",
210
- 'accent.magenta': "var(--ds-text-accent-magenta, #E774BB)",
211
- 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder, #DA62AC)",
212
- 'accent.gray': "var(--ds-text-accent-gray, #505F79)",
213
- 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder, #172B4D)",
214
- disabled: "var(--ds-text-disabled, #A5ADBA)",
215
- inverse: "var(--ds-text-inverse, #FFFFFF)",
216
- selected: "var(--ds-text-selected, #0052CC)",
217
- brand: "var(--ds-text-brand, #0065FF)",
218
- danger: "var(--ds-text-danger, #DE350B)",
219
- warning: "var(--ds-text-warning, #974F0C)",
220
- 'warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
221
- success: "var(--ds-text-success, #006644)",
222
- discovery: "var(--ds-text-discovery, #403294)",
223
- information: "var(--ds-text-information, #0052CC)",
224
- subtlest: "var(--ds-text-subtlest, #7A869A)",
225
- subtle: "var(--ds-text-subtle, #42526E)"
196
+ 'color.text.accent.red': "var(--ds-text-accent-red, #DE350B)",
197
+ 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
198
+ 'color.text.accent.orange': "var(--ds-text-accent-orange, #F18D13)",
199
+ 'color.text.accent.orange.bolder': "var(--ds-text-accent-orange-bolder, #B65C02)",
200
+ 'color.text.accent.yellow': "var(--ds-text-accent-yellow, #FF991F)",
201
+ 'color.text.accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder, #FF8B00)",
202
+ 'color.text.accent.green': "var(--ds-text-accent-green, #00875A)",
203
+ 'color.text.accent.green.bolder': "var(--ds-text-accent-green-bolder, #006644)",
204
+ 'color.text.accent.teal': "var(--ds-text-accent-teal, #00A3BF)",
205
+ 'color.text.accent.teal.bolder': "var(--ds-text-accent-teal-bolder, #008DA6)",
206
+ 'color.text.accent.blue': "var(--ds-text-accent-blue, #0052CC)",
207
+ 'color.text.accent.blue.bolder': "var(--ds-text-accent-blue-bolder, #0747A6)",
208
+ 'color.text.accent.purple': "var(--ds-text-accent-purple, #5243AA)",
209
+ 'color.text.accent.purple.bolder': "var(--ds-text-accent-purple-bolder, #403294)",
210
+ 'color.text.accent.magenta': "var(--ds-text-accent-magenta, #E774BB)",
211
+ 'color.text.accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder, #DA62AC)",
212
+ 'color.text.accent.gray': "var(--ds-text-accent-gray, #505F79)",
213
+ 'color.text.accent.gray.bolder': "var(--ds-text-accent-gray-bolder, #172B4D)",
214
+ 'color.text.disabled': "var(--ds-text-disabled, #A5ADBA)",
215
+ 'color.text.inverse': "var(--ds-text-inverse, #FFFFFF)",
216
+ 'color.text.selected': "var(--ds-text-selected, #0052CC)",
217
+ 'color.text.brand': "var(--ds-text-brand, #0065FF)",
218
+ 'color.text.danger': "var(--ds-text-danger, #DE350B)",
219
+ 'color.text.warning': "var(--ds-text-warning, #974F0C)",
220
+ 'color.text.warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
221
+ 'color.text.success': "var(--ds-text-success, #006644)",
222
+ 'color.text.discovery': "var(--ds-text-discovery, #403294)",
223
+ 'color.text.information': "var(--ds-text-information, #0052CC)",
224
+ 'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
225
+ 'color.text.subtle': "var(--ds-text-subtle, #42526E)"
226
226
  };
227
227
  export const fillMap = {
228
228
  'color.icon': "var(--ds-icon, #505F79)",
229
- 'accent.red': "var(--ds-icon-accent-red, #FF5630)",
230
- 'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
231
- 'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
232
- 'accent.green': "var(--ds-icon-accent-green, #36B37E)",
233
- 'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
234
- 'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
235
- 'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
236
- 'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
237
- 'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
238
- disabled: "var(--ds-icon-disabled, #8993A4)",
239
- inverse: "var(--ds-icon-inverse, #FFFFFF)",
240
- selected: "var(--ds-icon-selected, #0052CC)",
241
- brand: "var(--ds-icon-brand, #0065FF)",
242
- danger: "var(--ds-icon-danger, #DE350B)",
243
- warning: "var(--ds-icon-warning, #FFC400)",
244
- 'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
245
- success: "var(--ds-icon-success, #00875A)",
246
- discovery: "var(--ds-icon-discovery, #8777D9)",
247
- information: "var(--ds-icon-information, #0747A6)",
248
- subtle: "var(--ds-icon-subtle, #6B778C)"
229
+ 'color.icon.accent.red': "var(--ds-icon-accent-red, #FF5630)",
230
+ 'color.icon.accent.orange': "var(--ds-icon-accent-orange, #D94008)",
231
+ 'color.icon.accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
232
+ 'color.icon.accent.green': "var(--ds-icon-accent-green, #36B37E)",
233
+ 'color.icon.accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
234
+ 'color.icon.accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
235
+ 'color.icon.accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
236
+ 'color.icon.accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
237
+ 'color.icon.accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
238
+ 'color.icon.disabled': "var(--ds-icon-disabled, #8993A4)",
239
+ 'color.icon.inverse': "var(--ds-icon-inverse, #FFFFFF)",
240
+ 'color.icon.selected': "var(--ds-icon-selected, #0052CC)",
241
+ 'color.icon.brand': "var(--ds-icon-brand, #0065FF)",
242
+ 'color.icon.danger': "var(--ds-icon-danger, #DE350B)",
243
+ 'color.icon.warning': "var(--ds-icon-warning, #FFC400)",
244
+ 'color.icon.warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
245
+ 'color.icon.success': "var(--ds-icon-success, #00875A)",
246
+ 'color.icon.discovery': "var(--ds-icon-discovery, #8777D9)",
247
+ 'color.icon.information': "var(--ds-icon-information, #0747A6)",
248
+ 'color.icon.subtle': "var(--ds-icon-subtle, #6B778C)"
249
249
  };
250
250
  /**
251
251
  * @codegenEnd
252
252
  */
253
253
  /**
254
254
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
255
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
255
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
256
256
  * @codegenId misc
257
- * @codegenCommand yarn codegen-styles
257
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
258
258
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
259
259
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
260
260
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
261
261
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
262
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
262
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
263
263
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
264
264
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
265
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
265
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
266
266
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
267
267
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
268
268
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -284,7 +284,8 @@ export const displayMap = {
284
284
  block: 'block',
285
285
  inline: 'inline',
286
286
  inlineBlock: 'inline-block',
287
- inlineFlex: 'inline-flex'
287
+ inlineFlex: 'inline-flex',
288
+ grid: 'grid'
288
289
  };
289
290
  export const flexDirectionMap = {
290
291
  row: 'row',
@@ -295,7 +296,7 @@ export const flexGrowMap = {
295
296
  '1': 1
296
297
  };
297
298
  export const flexShrinkMap = {
298
- '0': 0,
299
+ '0': '0',
299
300
  '1': 1
300
301
  };
301
302
  export const flexMap = {
@@ -335,24 +336,24 @@ export const positionMap = {
335
336
  */
336
337
  /**
337
338
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
338
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
339
+ * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
339
340
  * @codegenId border
340
- * @codegenCommand yarn codegen-styles
341
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
341
342
  * @codegenParams ["width", "radius"]
342
343
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
343
344
  */
344
345
  export const borderWidthMap = {
345
- 'width.0': "var(--ds-width-0, 0px)",
346
- 'width.050': "var(--ds-width-050, 1px)",
347
- 'width.100': "var(--ds-width-100, 2px)"
346
+ 'border.width.0': "var(--ds-width-0, 0px)",
347
+ 'border.width.050': "var(--ds-width-050, 1px)",
348
+ 'border.width.100': "var(--ds-width-100, 2px)"
348
349
  };
349
350
  export const borderRadiusMap = {
350
- 'radius.050': "var(--ds-radius-050, 2px)",
351
- 'radius.100': "var(--ds-radius-100, 4px)",
352
- 'radius.200': "var(--ds-radius-200, 8px)",
353
- 'radius.300': "var(--ds-radius-300, 12px)",
354
- 'radius.400': "var(--ds-radius-400, 16px)",
355
- 'radius.round': "var(--ds-radius-round, 50%)"
351
+ 'border.radius.050': "var(--ds-radius-050, 2px)",
352
+ 'border.radius.100': "var(--ds-radius-100, 3px)",
353
+ 'border.radius.200': "var(--ds-radius-200, 8px)",
354
+ 'border.radius.300': "var(--ds-radius-300, 12px)",
355
+ 'border.radius.400': "var(--ds-radius-400, 16px)",
356
+ 'border.radius.round': "var(--ds-radius-round, 50%)"
356
357
  };
357
358
 
358
359
  /**
package/dist/es2019/xcss/xcss.js CHANGED
@@ -109,7 +109,7 @@ const transformStyles = styleObj => {
109
109
  }
110
110
  const tokenValue = tokensMap[key][value];
111
111
  if (!tokenValue) {
112
- const message = `Invalid token alias: ${value}`;
112
+ const message = `Invalid token alias: ${key}: ${value}`;
113
113
  warnOnce(message);
114
114
  }
115
115
  styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "sideEffects": false
5
5
  }