@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.
- package/.eslintrc.js +3 -0
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/box.js +3 -40
- package/dist/cjs/components/inline.partial.js +1 -0
- package/dist/cjs/components/internal/base-box.js +61 -0
- package/dist/cjs/components/stack.partial.js +1 -0
- package/dist/cjs/internal/style-maps.partial.js +370 -0
- package/dist/cjs/internal/xcss.js +17 -7
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.js +1 -37
- package/dist/es2019/components/inline.partial.js +1 -0
- package/dist/es2019/components/internal/base-box.js +52 -0
- package/dist/es2019/components/stack.partial.js +1 -0
- package/dist/es2019/internal/style-maps.partial.js +341 -0
- package/dist/es2019/internal/xcss.js +13 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.js +2 -40
- package/dist/esm/components/inline.partial.js +1 -0
- package/dist/esm/components/internal/base-box.js +53 -0
- package/dist/esm/components/stack.partial.js +1 -0
- package/dist/esm/internal/style-maps.partial.js +340 -0
- package/dist/esm/internal/xcss.js +17 -7
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.d.ts +1 -1
- package/dist/types/components/internal/base-box.d.ts +83 -0
- package/dist/types/components/types.d.ts +1 -1
- package/dist/types/internal/style-maps.partial.d.ts +396 -0
- package/dist/types/internal/xcss.d.ts +5 -5
- package/package.json +2 -1
- package/report.api.md +206 -327
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +313 -363
- package/scripts/border-codegen-template.tsx +79 -0
- package/scripts/codegen-file-templates/align-self.tsx +9 -0
- package/scripts/codegen-file-templates/border-style.tsx +6 -0
- package/scripts/codegen-file-templates/dimensions.tsx +17 -0
- package/scripts/codegen-file-templates/display.tsx +6 -0
- package/scripts/codegen-file-templates/flex-grow.tsx +6 -0
- package/scripts/codegen-file-templates/flex-shrink.tsx +6 -0
- package/scripts/codegen-file-templates/flex.tsx +5 -0
- package/scripts/codegen-file-templates/layer.tsx +13 -0
- package/scripts/codegen-file-templates/overflow.tsx +20 -0
- package/scripts/codegen-file-templates/position.tsx +8 -0
- package/scripts/codegen-styles.tsx +80 -120
- package/scripts/color-codegen-template.tsx +9 -19
- package/scripts/misc-codegen-template.tsx +20 -40
- package/scripts/spacing-codegen-template.tsx +5 -12
- package/scripts/utils.tsx +15 -4
- package/tmp/api-report-tmp.d.ts +201 -326
- package/dist/cjs/components/internal/base-box.partial.js +0 -825
- package/dist/cjs/internal/color-map.js +0 -42
- package/dist/cjs/internal/style-maps.js +0 -130
- package/dist/es2019/components/internal/base-box.partial.js +0 -842
- package/dist/es2019/internal/color-map.js +0 -35
- package/dist/es2019/internal/style-maps.js +0 -117
- package/dist/esm/components/internal/base-box.partial.js +0 -820
- package/dist/esm/internal/color-map.js +0 -35
- package/dist/esm/internal/style-maps.js +0 -117
- package/dist/types/components/internal/base-box.partial.d.ts +0 -521
- package/dist/types/internal/color-map.d.ts +0 -36
- package/dist/types/internal/style-maps.d.ts +0 -151
- package/scripts/color-map-template.tsx +0 -52
- 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
|
-
|
|
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.
|
|
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",
|