@atlaskit/primitives 0.6.0 → 0.7.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 (62) hide show
  1. package/.eslintrc.js +3 -0
  2. package/CHANGELOG.md +8 -0
  3. package/dist/cjs/components/box.js +3 -40
  4. package/dist/cjs/components/inline.partial.js +1 -0
  5. package/dist/cjs/components/internal/base-box.js +61 -0
  6. package/dist/cjs/components/stack.partial.js +1 -0
  7. package/dist/cjs/internal/style-maps.partial.js +370 -0
  8. package/dist/cjs/internal/xcss.js +17 -7
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/components/box.js +1 -37
  11. package/dist/es2019/components/inline.partial.js +1 -0
  12. package/dist/es2019/components/internal/base-box.js +52 -0
  13. package/dist/es2019/components/stack.partial.js +1 -0
  14. package/dist/es2019/internal/style-maps.partial.js +341 -0
  15. package/dist/es2019/internal/xcss.js +13 -7
  16. package/dist/es2019/version.json +1 -1
  17. package/dist/esm/components/box.js +2 -40
  18. package/dist/esm/components/inline.partial.js +1 -0
  19. package/dist/esm/components/internal/base-box.js +53 -0
  20. package/dist/esm/components/stack.partial.js +1 -0
  21. package/dist/esm/internal/style-maps.partial.js +340 -0
  22. package/dist/esm/internal/xcss.js +17 -7
  23. package/dist/esm/version.json +1 -1
  24. package/dist/types/components/box.d.ts +1 -1
  25. package/dist/types/components/internal/base-box.d.ts +83 -0
  26. package/dist/types/components/types.d.ts +1 -1
  27. package/dist/types/internal/style-maps.partial.d.ts +396 -0
  28. package/dist/types/internal/xcss.d.ts +5 -5
  29. package/package.json +2 -1
  30. package/report.api.md +206 -327
  31. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +313 -363
  32. package/scripts/border-codegen-template.tsx +79 -0
  33. package/scripts/codegen-file-templates/align-self.tsx +9 -0
  34. package/scripts/codegen-file-templates/border-style.tsx +6 -0
  35. package/scripts/codegen-file-templates/dimensions.tsx +17 -0
  36. package/scripts/codegen-file-templates/display.tsx +6 -0
  37. package/scripts/codegen-file-templates/flex-grow.tsx +6 -0
  38. package/scripts/codegen-file-templates/flex-shrink.tsx +6 -0
  39. package/scripts/codegen-file-templates/flex.tsx +5 -0
  40. package/scripts/codegen-file-templates/layer.tsx +13 -0
  41. package/scripts/codegen-file-templates/overflow.tsx +20 -0
  42. package/scripts/codegen-file-templates/position.tsx +8 -0
  43. package/scripts/codegen-styles.tsx +80 -120
  44. package/scripts/color-codegen-template.tsx +9 -19
  45. package/scripts/misc-codegen-template.tsx +20 -40
  46. package/scripts/spacing-codegen-template.tsx +5 -12
  47. package/scripts/utils.tsx +15 -4
  48. package/tmp/api-report-tmp.d.ts +201 -326
  49. package/dist/cjs/components/internal/base-box.partial.js +0 -825
  50. package/dist/cjs/internal/color-map.js +0 -42
  51. package/dist/cjs/internal/style-maps.js +0 -130
  52. package/dist/es2019/components/internal/base-box.partial.js +0 -842
  53. package/dist/es2019/internal/color-map.js +0 -35
  54. package/dist/es2019/internal/style-maps.js +0 -117
  55. package/dist/esm/components/internal/base-box.partial.js +0 -820
  56. package/dist/esm/internal/color-map.js +0 -35
  57. package/dist/esm/internal/style-maps.js +0 -117
  58. package/dist/types/components/internal/base-box.partial.d.ts +0 -521
  59. package/dist/types/internal/color-map.d.ts +0 -36
  60. package/dist/types/internal/style-maps.d.ts +0 -151
  61. package/scripts/color-map-template.tsx +0 -52
  62. package/scripts/dimension-codegen-template.tsx +0 -75
@@ -0,0 +1,396 @@
1
+ import { SerializedStyles } from '@emotion/react';
2
+ /**
3
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
5
+ * @codegenId dimensions
6
+ * @codegenCommand yarn codegen-styles
7
+ * @codegenParams ["dimensions"]
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
9
+ */
10
+ export declare const dimensionMap: {
11
+ readonly '100%': "100%";
12
+ readonly 'size.100': "16px";
13
+ readonly 'size.200': "24px";
14
+ readonly 'size.300': "32px";
15
+ readonly 'size.400': "40px";
16
+ readonly 'size.500': "48px";
17
+ readonly 'size.600': "96px";
18
+ readonly 'size.1000': "192px";
19
+ };
20
+ export declare type Width = keyof typeof dimensionMap;
21
+ export declare type Height = keyof typeof dimensionMap;
22
+ export declare type MinWidth = keyof typeof dimensionMap;
23
+ export declare type MaxWidth = keyof typeof dimensionMap;
24
+ export declare type MinHeight = keyof typeof dimensionMap;
25
+ export declare type MaxHeight = keyof typeof dimensionMap;
26
+ /**
27
+ * @codegenEnd
28
+ */
29
+ /**
30
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
31
+ * @codegen <<SignedSource::c9769f86fc43a4afcc45953fc5f06926>>
32
+ * @codegenId spacing
33
+ * @codegenCommand yarn codegen-styles
34
+ * @codegenParams ["padding"]
35
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
36
+ */
37
+ export declare const paddingMap: {
38
+ readonly 'space.0': "var(--ds-space-0)";
39
+ readonly 'space.025': "var(--ds-space-025)";
40
+ readonly 'space.050': "var(--ds-space-050)";
41
+ readonly 'space.075': "var(--ds-space-075)";
42
+ readonly 'space.100': "var(--ds-space-100)";
43
+ readonly 'space.150': "var(--ds-space-150)";
44
+ readonly 'space.200': "var(--ds-space-200)";
45
+ readonly 'space.250': "var(--ds-space-250)";
46
+ readonly 'space.300': "var(--ds-space-300)";
47
+ readonly 'space.400': "var(--ds-space-400)";
48
+ readonly 'space.500': "var(--ds-space-500)";
49
+ readonly 'space.600': "var(--ds-space-600)";
50
+ readonly 'space.800': "var(--ds-space-800)";
51
+ readonly 'space.1000': "var(--ds-space-1000)";
52
+ };
53
+ export declare type Padding = keyof typeof paddingMap;
54
+ export declare type PaddingBlock = keyof typeof paddingMap;
55
+ export declare type PaddingBlockStart = keyof typeof paddingMap;
56
+ export declare type PaddingBlockEnd = keyof typeof paddingMap;
57
+ export declare type PaddingInline = keyof typeof paddingMap;
58
+ export declare type PaddingInlineStart = keyof typeof paddingMap;
59
+ export declare type PaddingInlineEnd = keyof typeof paddingMap;
60
+ /**
61
+ * @codegenEnd
62
+ */
63
+ /**
64
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
65
+ * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
66
+ * @codegenId colors
67
+ * @codegenCommand yarn codegen-styles
68
+ * @codegenParams ["border", "background", "shadow", "text"]
69
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
70
+ */
71
+ export declare const borderColorMap: {
72
+ readonly 'color.border': "var(--ds-border)";
73
+ readonly 'accent.red': "var(--ds-border-accent-red)";
74
+ readonly 'accent.orange': "var(--ds-border-accent-orange)";
75
+ readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
76
+ readonly 'accent.green': "var(--ds-border-accent-green)";
77
+ readonly 'accent.teal': "var(--ds-border-accent-teal)";
78
+ readonly 'accent.blue': "var(--ds-border-accent-blue)";
79
+ readonly 'accent.purple': "var(--ds-border-accent-purple)";
80
+ readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
81
+ readonly 'accent.gray': "var(--ds-border-accent-gray)";
82
+ readonly disabled: "var(--ds-border-disabled)";
83
+ readonly focused: "var(--ds-border-focused)";
84
+ readonly input: "var(--ds-border-input)";
85
+ readonly inverse: "var(--ds-border-inverse)";
86
+ readonly selected: "var(--ds-border-selected)";
87
+ readonly brand: "var(--ds-border-brand)";
88
+ readonly danger: "var(--ds-border-danger)";
89
+ readonly warning: "var(--ds-border-warning)";
90
+ readonly success: "var(--ds-border-success)";
91
+ readonly discovery: "var(--ds-border-discovery)";
92
+ readonly information: "var(--ds-border-information)";
93
+ readonly bold: "var(--ds-border-bold)";
94
+ };
95
+ export declare type BorderColor = keyof typeof borderColorMap;
96
+ export declare const backgroundColorMap: {
97
+ readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
98
+ readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
99
+ readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
100
+ readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
101
+ readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
102
+ readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
103
+ readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
104
+ readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
105
+ readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
106
+ readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
107
+ readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
108
+ readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
109
+ readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
110
+ readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
111
+ readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
112
+ readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
113
+ readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
114
+ readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
115
+ readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
116
+ readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
117
+ readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
118
+ readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
119
+ readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
120
+ readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
121
+ readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
122
+ readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
123
+ readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
124
+ readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
125
+ readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
126
+ readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
127
+ readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
128
+ readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
129
+ readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
130
+ readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
131
+ readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
132
+ readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
133
+ readonly disabled: "var(--ds-background-disabled)";
134
+ readonly input: "var(--ds-background-input)";
135
+ readonly 'input.hovered': "var(--ds-background-input-hovered)";
136
+ readonly 'input.pressed': "var(--ds-background-input-pressed)";
137
+ readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
138
+ readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
139
+ readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
140
+ readonly neutral: "var(--ds-background-neutral)";
141
+ readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
142
+ readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
143
+ readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
144
+ readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
145
+ readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
146
+ readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
147
+ readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
148
+ readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
149
+ readonly selected: "var(--ds-background-selected)";
150
+ readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
151
+ readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
152
+ readonly 'selected.bold': "var(--ds-background-selected-bold)";
153
+ readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
154
+ readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
155
+ readonly 'brand.bold': "var(--ds-background-brand-bold)";
156
+ readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
157
+ readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
158
+ readonly danger: "var(--ds-background-danger)";
159
+ readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
160
+ readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
161
+ readonly 'danger.bold': "var(--ds-background-danger-bold)";
162
+ readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
163
+ readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
164
+ readonly warning: "var(--ds-background-warning)";
165
+ readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
166
+ readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
167
+ readonly 'warning.bold': "var(--ds-background-warning-bold)";
168
+ readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
169
+ readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
170
+ readonly success: "var(--ds-background-success)";
171
+ readonly 'success.hovered': "var(--ds-background-success-hovered)";
172
+ readonly 'success.pressed': "var(--ds-background-success-pressed)";
173
+ readonly 'success.bold': "var(--ds-background-success-bold)";
174
+ readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
175
+ readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
176
+ readonly discovery: "var(--ds-background-discovery)";
177
+ readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
178
+ readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
179
+ readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
180
+ readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
181
+ readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
182
+ readonly information: "var(--ds-background-information)";
183
+ readonly 'information.hovered': "var(--ds-background-information-hovered)";
184
+ readonly 'information.pressed': "var(--ds-background-information-pressed)";
185
+ readonly 'information.bold': "var(--ds-background-information-bold)";
186
+ readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
187
+ readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
188
+ readonly 'color.blanket': "var(--ds-blanket)";
189
+ readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
190
+ readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
191
+ readonly 'elevation.surface': "var(--ds-surface)";
192
+ readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
193
+ readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
194
+ readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
195
+ readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
196
+ readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
197
+ readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
198
+ readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
199
+ readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
200
+ readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
201
+ };
202
+ export declare type BackgroundColor = keyof typeof backgroundColorMap;
203
+ export declare const shadowMap: {
204
+ readonly overflow: "var(--ds-shadow-overflow)";
205
+ readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
206
+ readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
207
+ readonly overlay: "var(--ds-shadow-overlay)";
208
+ readonly raised: "var(--ds-shadow-raised)";
209
+ };
210
+ export declare type Shadow = keyof typeof shadowMap;
211
+ export declare const textColorMap: {
212
+ readonly 'color.text': "var(--ds-text)";
213
+ readonly 'accent.red': "var(--ds-text-accent-red)";
214
+ readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
215
+ readonly 'accent.orange': "var(--ds-text-accent-orange)";
216
+ readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
217
+ readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
218
+ readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
219
+ readonly 'accent.green': "var(--ds-text-accent-green)";
220
+ readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
221
+ readonly 'accent.teal': "var(--ds-text-accent-teal)";
222
+ readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
223
+ readonly 'accent.blue': "var(--ds-text-accent-blue)";
224
+ readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
225
+ readonly 'accent.purple': "var(--ds-text-accent-purple)";
226
+ readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
227
+ readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
228
+ readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
229
+ readonly 'accent.gray': "var(--ds-text-accent-gray)";
230
+ readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
231
+ readonly disabled: "var(--ds-text-disabled)";
232
+ readonly inverse: "var(--ds-text-inverse)";
233
+ readonly selected: "var(--ds-text-selected)";
234
+ readonly brand: "var(--ds-text-brand)";
235
+ readonly danger: "var(--ds-text-danger)";
236
+ readonly warning: "var(--ds-text-warning)";
237
+ readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
238
+ readonly success: "var(--ds-text-success)";
239
+ readonly discovery: "var(--ds-text-discovery)";
240
+ readonly information: "var(--ds-text-information)";
241
+ readonly subtlest: "var(--ds-text-subtlest)";
242
+ readonly subtle: "var(--ds-text-subtle)";
243
+ };
244
+ export declare type TextColor = keyof typeof textColorMap;
245
+ /**
246
+ * @codegenEnd
247
+ */
248
+ /**
249
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
250
+ * @codegen <<SignedSource::dd62140c127dcca8e478ad22341d4626>>
251
+ * @codegenId misc
252
+ * @codegenCommand yarn codegen-styles
253
+ * @codegenParams ["align-self", "border-style", "display", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
254
+ * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
255
+ * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
256
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
257
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
258
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
259
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
260
+ * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
261
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
262
+ * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
263
+ * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
264
+ */
265
+ export declare const alignSelfMap: {
266
+ readonly center: "center";
267
+ readonly start: "start";
268
+ readonly stretch: "stretch";
269
+ readonly end: "end";
270
+ readonly baseline: "baseline";
271
+ };
272
+ export declare type AlignSelf = keyof typeof alignSelfMap;
273
+ export declare const borderStyleMap: {
274
+ readonly none: "none";
275
+ readonly solid: "solid";
276
+ };
277
+ export declare type BorderStyle = keyof typeof borderStyleMap;
278
+ export declare type Display = 'flex' | 'block' | 'inline' | 'inline-block' | 'inline-flex';
279
+ export declare const flexGrowMap: {
280
+ readonly '0': 0;
281
+ readonly '1': 1;
282
+ };
283
+ export declare type FlexGrow = keyof typeof flexGrowMap;
284
+ export declare const flexShrinkMap: {
285
+ readonly '0': 0;
286
+ readonly '1': 1;
287
+ };
288
+ export declare type FlexShrink = keyof typeof flexShrinkMap;
289
+ export declare const flexMap: {
290
+ readonly '1': 1;
291
+ };
292
+ export declare type Flex = keyof typeof flexMap;
293
+ export declare const layerMap: {
294
+ readonly card: 100;
295
+ readonly navigation: 200;
296
+ readonly dialog: 300;
297
+ readonly layer: 400;
298
+ readonly blanket: 500;
299
+ readonly modal: 510;
300
+ readonly flag: 600;
301
+ readonly spotlight: 700;
302
+ readonly tooltip: 800;
303
+ };
304
+ export declare type Layer = keyof typeof layerMap;
305
+ export declare const overflowMap: {
306
+ readonly auto: "auto";
307
+ readonly hidden: "hidden";
308
+ };
309
+ export declare type Overflow = keyof typeof overflowMap;
310
+ export declare const overflowInlineMap: {
311
+ readonly auto: "auto";
312
+ readonly hidden: "hidden";
313
+ };
314
+ export declare type OverflowInline = keyof typeof overflowInlineMap;
315
+ export declare const overflowBlockMap: {
316
+ readonly auto: "auto";
317
+ readonly hidden: "hidden";
318
+ };
319
+ export declare type OverflowBlock = keyof typeof overflowBlockMap;
320
+ export declare const positionMap: {
321
+ readonly absolute: "absolute";
322
+ readonly fixed: "fixed";
323
+ readonly relative: "relative";
324
+ readonly static: "static";
325
+ };
326
+ export declare type Position = keyof typeof positionMap;
327
+ /**
328
+ * @codegenEnd
329
+ */
330
+ /**
331
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
332
+ * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
333
+ * @codegenId border
334
+ * @codegenCommand yarn codegen-styles
335
+ * @codegenParams ["width", "radius"]
336
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
337
+ */
338
+ export declare const borderWidthMap: {
339
+ readonly 'width.0': "var(--ds-width-0)";
340
+ readonly 'width.050': "var(--ds-width-050)";
341
+ readonly 'width.100': "var(--ds-width-100)";
342
+ };
343
+ export declare type BorderWidth = keyof typeof borderWidthMap;
344
+ export declare const borderRadiusMap: {
345
+ readonly 'radius.050': "var(--ds-radius-050)";
346
+ readonly 'radius.100': "var(--ds-radius-100)";
347
+ readonly 'radius.200': "var(--ds-radius-200)";
348
+ readonly 'radius.300': "var(--ds-radius-300)";
349
+ readonly 'radius.400': "var(--ds-radius-400)";
350
+ readonly 'radius.round': "var(--ds-radius-round)";
351
+ };
352
+ export declare type BorderRadius = keyof typeof borderRadiusMap;
353
+ /**
354
+ * @codegenEnd
355
+ */
356
+ export declare type TokenisedProps = {
357
+ alignSelf?: AlignSelf;
358
+ backgroundColor?: BackgroundColor;
359
+ borderColor?: BorderColor;
360
+ borderStyle?: BorderStyle;
361
+ borderRadius?: BorderRadius;
362
+ borderWidth?: BorderWidth;
363
+ display?: Display;
364
+ flex?: Flex;
365
+ flexGrow?: FlexGrow;
366
+ flexShrink?: FlexShrink;
367
+ height?: Height;
368
+ layer?: Layer;
369
+ maxWidth?: MaxWidth;
370
+ maxHeight?: MaxHeight;
371
+ minWidth?: MinWidth;
372
+ minHeight?: MinHeight;
373
+ overflow?: Overflow;
374
+ overflowInline?: OverflowInline;
375
+ overflowBlock?: OverflowBlock;
376
+ padding?: Padding;
377
+ paddingBlock?: PaddingBlock;
378
+ paddingBlockStart?: PaddingBlockStart;
379
+ paddingBlockEnd?: PaddingBlockEnd;
380
+ paddingInline?: PaddingInline;
381
+ paddingInlineStart?: PaddingInlineStart;
382
+ paddingInlineEnd?: PaddingInlineEnd;
383
+ position?: Position;
384
+ shadow?: Shadow;
385
+ textColor?: TextColor;
386
+ width?: Width;
387
+ };
388
+ declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
389
+ declare type SpacingProperty = typeof spacingProperties[number];
390
+ declare type SpacingToken = keyof typeof paddingMap;
391
+ declare type BackgroundColorToken = keyof typeof backgroundColorMap;
392
+ declare type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
393
+ declare type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
394
+ export declare const paddingStylesMap: SpacingStyleMap;
395
+ export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
396
+ export {};
@@ -2,7 +2,7 @@
2
2
  import { css as cssEmotion } from '@emotion/react';
3
3
  import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos, SerializedStyles } from '@emotion/serialize';
4
4
  import { Box, Inline } from '../index';
5
- import { TokenisedProps } from './style-maps';
5
+ import { TokenisedProps } from './style-maps.partial';
6
6
  declare const uniqueSymbol: unique symbol;
7
7
  /**
8
8
  * Only exposed for testing.
@@ -11,9 +11,10 @@ declare const uniqueSymbol: unique symbol;
11
11
  export declare const transformStyles: (styleObj?: CSSObject | CSSObject[] | undefined) => CSSObject | CSSObject[] | undefined;
12
12
  /**
13
13
  * @internal used in primitives
14
- * @returns
14
+ * @returns a collection of styles that can be applied to the respective primitive
15
15
  */
16
- export declare const parseXcss: (args: SafeCSS) => ReturnType<typeof cssEmotion>;
16
+ declare type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
17
+ export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
17
18
  declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
18
19
  declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
19
20
  declare const boxWrapper: (style: any) => {
@@ -25,10 +26,9 @@ declare const inlineWrapper: (style: any) => {
25
26
  readonly styles: InlineStyles;
26
27
  };
27
28
  declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
28
- declare type SafeCSS = XCSS | XCSS[];
29
29
  declare type AllowedBoxStyles = keyof SafeCSSObject;
30
30
  declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
31
- export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
31
+ export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
32
32
  readonly symbol: typeof uniqueSymbol;
33
33
  readonly styles: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
34
34
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,6 +38,7 @@
38
38
  "./responsive": "./src/helpers/responsive/index.tsx"
39
39
  },
40
40
  "dependencies": {
41
+ "@atlaskit/ds-lib": "^2.1.2",
41
42
  "@atlaskit/tokens": "^1.2.0",
42
43
  "@babel/runtime": "^7.0.0",
43
44
  "@emotion/react": "^11.7.1",