@atlaskit/css 0.14.0 → 0.14.2
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/css
|
|
2
2
|
|
|
3
|
+
## 0.14.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d92f75f49b03f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d92f75f49b03f) -
|
|
8
|
+
added type definitions to return type of generated code
|
|
9
|
+
|
|
10
|
+
## 0.14.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`eb69a4b60c75e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb69a4b60c75e) -
|
|
15
|
+
Split type export and regular export
|
|
16
|
+
|
|
3
17
|
## 0.14.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -29,12 +29,27 @@ export type Dimension = keyof typeof dimensionMap;
|
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
32
|
-
* @codegen <<SignedSource::
|
|
32
|
+
* @codegen <<SignedSource::f62f00a8bb1e658389b8878b668fcfd1>>
|
|
33
33
|
* @codegenId spacing
|
|
34
34
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
35
35
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
36
36
|
*/
|
|
37
|
-
export const positiveSpaceMap
|
|
37
|
+
export const positiveSpaceMap: {
|
|
38
|
+
'space.0': 'var(--ds-space-0)';
|
|
39
|
+
'space.025': 'var(--ds-space-025)';
|
|
40
|
+
'space.050': 'var(--ds-space-050)';
|
|
41
|
+
'space.075': 'var(--ds-space-075)';
|
|
42
|
+
'space.100': 'var(--ds-space-100)';
|
|
43
|
+
'space.150': 'var(--ds-space-150)';
|
|
44
|
+
'space.200': 'var(--ds-space-200)';
|
|
45
|
+
'space.250': 'var(--ds-space-250)';
|
|
46
|
+
'space.300': 'var(--ds-space-300)';
|
|
47
|
+
'space.400': 'var(--ds-space-400)';
|
|
48
|
+
'space.500': 'var(--ds-space-500)';
|
|
49
|
+
'space.600': 'var(--ds-space-600)';
|
|
50
|
+
'space.800': 'var(--ds-space-800)';
|
|
51
|
+
'space.1000': 'var(--ds-space-1000)';
|
|
52
|
+
} = {
|
|
38
53
|
'space.0': token('space.0', '0px'),
|
|
39
54
|
'space.025': token('space.025', '2px'),
|
|
40
55
|
'space.050': token('space.050', '4px'),
|
|
@@ -52,7 +67,17 @@ export const positiveSpaceMap = {
|
|
|
52
67
|
};
|
|
53
68
|
export type Space = keyof typeof positiveSpaceMap;
|
|
54
69
|
|
|
55
|
-
export const negativeSpaceMap
|
|
70
|
+
export const negativeSpaceMap: {
|
|
71
|
+
'space.negative.025': 'var(--ds-space-negative-025)';
|
|
72
|
+
'space.negative.050': 'var(--ds-space-negative-050)';
|
|
73
|
+
'space.negative.075': 'var(--ds-space-negative-075)';
|
|
74
|
+
'space.negative.100': 'var(--ds-space-negative-100)';
|
|
75
|
+
'space.negative.150': 'var(--ds-space-negative-150)';
|
|
76
|
+
'space.negative.200': 'var(--ds-space-negative-200)';
|
|
77
|
+
'space.negative.250': 'var(--ds-space-negative-250)';
|
|
78
|
+
'space.negative.300': 'var(--ds-space-negative-300)';
|
|
79
|
+
'space.negative.400': 'var(--ds-space-negative-400)';
|
|
80
|
+
} = {
|
|
56
81
|
'space.negative.025': token('space.negative.025', '-2px'),
|
|
57
82
|
'space.negative.050': token('space.negative.050', '-4px'),
|
|
58
83
|
'space.negative.075': token('space.negative.075', '-6px'),
|
|
@@ -65,7 +90,31 @@ export const negativeSpaceMap = {
|
|
|
65
90
|
};
|
|
66
91
|
export type NegativeSpace = keyof typeof negativeSpaceMap;
|
|
67
92
|
|
|
68
|
-
export const allSpaceMap
|
|
93
|
+
export const allSpaceMap: {
|
|
94
|
+
'space.0': 'var(--ds-space-0)';
|
|
95
|
+
'space.025': 'var(--ds-space-025)';
|
|
96
|
+
'space.050': 'var(--ds-space-050)';
|
|
97
|
+
'space.075': 'var(--ds-space-075)';
|
|
98
|
+
'space.100': 'var(--ds-space-100)';
|
|
99
|
+
'space.150': 'var(--ds-space-150)';
|
|
100
|
+
'space.200': 'var(--ds-space-200)';
|
|
101
|
+
'space.250': 'var(--ds-space-250)';
|
|
102
|
+
'space.300': 'var(--ds-space-300)';
|
|
103
|
+
'space.400': 'var(--ds-space-400)';
|
|
104
|
+
'space.500': 'var(--ds-space-500)';
|
|
105
|
+
'space.600': 'var(--ds-space-600)';
|
|
106
|
+
'space.800': 'var(--ds-space-800)';
|
|
107
|
+
'space.1000': 'var(--ds-space-1000)';
|
|
108
|
+
'space.negative.025': 'var(--ds-space-negative-025)';
|
|
109
|
+
'space.negative.050': 'var(--ds-space-negative-050)';
|
|
110
|
+
'space.negative.075': 'var(--ds-space-negative-075)';
|
|
111
|
+
'space.negative.100': 'var(--ds-space-negative-100)';
|
|
112
|
+
'space.negative.150': 'var(--ds-space-negative-150)';
|
|
113
|
+
'space.negative.200': 'var(--ds-space-negative-200)';
|
|
114
|
+
'space.negative.250': 'var(--ds-space-negative-250)';
|
|
115
|
+
'space.negative.300': 'var(--ds-space-negative-300)';
|
|
116
|
+
'space.negative.400': 'var(--ds-space-negative-400)';
|
|
117
|
+
} = { ...positiveSpaceMap, ...negativeSpaceMap };
|
|
69
118
|
|
|
70
119
|
export type AllSpace = keyof typeof allSpaceMap;
|
|
71
120
|
|
|
@@ -75,12 +124,40 @@ export type AllSpace = keyof typeof allSpaceMap;
|
|
|
75
124
|
|
|
76
125
|
/**
|
|
77
126
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
78
|
-
* @codegen <<SignedSource::
|
|
127
|
+
* @codegen <<SignedSource::4965497f0b36c04fd6da39c956d1afd9>>
|
|
79
128
|
* @codegenId inverse-colors
|
|
80
129
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
81
130
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d227fb20aa75533eb903b15ddcb61e67>>
|
|
82
131
|
*/
|
|
83
|
-
export const inverseColorMap
|
|
132
|
+
export const inverseColorMap: {
|
|
133
|
+
'color.background.neutral.bold': 'color.text.inverse';
|
|
134
|
+
'color.background.neutral.bold.hovered': 'color.text.inverse';
|
|
135
|
+
'color.background.neutral.bold.pressed': 'color.text.inverse';
|
|
136
|
+
'color.background.selected.bold': 'color.text.inverse';
|
|
137
|
+
'color.background.selected.bold.hovered': 'color.text.inverse';
|
|
138
|
+
'color.background.selected.bold.pressed': 'color.text.inverse';
|
|
139
|
+
'color.background.brand.bold': 'color.text.inverse';
|
|
140
|
+
'color.background.brand.bold.hovered': 'color.text.inverse';
|
|
141
|
+
'color.background.brand.bold.pressed': 'color.text.inverse';
|
|
142
|
+
'color.background.brand.boldest': 'color.text.inverse';
|
|
143
|
+
'color.background.brand.boldest.hovered': 'color.text.inverse';
|
|
144
|
+
'color.background.brand.boldest.pressed': 'color.text.inverse';
|
|
145
|
+
'color.background.danger.bold': 'color.text.inverse';
|
|
146
|
+
'color.background.danger.bold.hovered': 'color.text.inverse';
|
|
147
|
+
'color.background.danger.bold.pressed': 'color.text.inverse';
|
|
148
|
+
'color.background.warning.bold': 'color.text.warning.inverse';
|
|
149
|
+
'color.background.warning.bold.hovered': 'color.text.warning.inverse';
|
|
150
|
+
'color.background.warning.bold.pressed': 'color.text.warning.inverse';
|
|
151
|
+
'color.background.success.bold': 'color.text.inverse';
|
|
152
|
+
'color.background.success.bold.hovered': 'color.text.inverse';
|
|
153
|
+
'color.background.success.bold.pressed': 'color.text.inverse';
|
|
154
|
+
'color.background.discovery.bold': 'color.text.inverse';
|
|
155
|
+
'color.background.discovery.bold.hovered': 'color.text.inverse';
|
|
156
|
+
'color.background.discovery.bold.pressed': 'color.text.inverse';
|
|
157
|
+
'color.background.information.bold': 'color.text.inverse';
|
|
158
|
+
'color.background.information.bold.hovered': 'color.text.inverse';
|
|
159
|
+
'color.background.information.bold.pressed': 'color.text.inverse';
|
|
160
|
+
} = {
|
|
84
161
|
'color.background.neutral.bold': 'color.text.inverse',
|
|
85
162
|
'color.background.neutral.bold.hovered': 'color.text.inverse',
|
|
86
163
|
'color.background.neutral.bold.pressed': 'color.text.inverse',
|
|
@@ -116,20 +193,29 @@ export const inverseColorMap = {
|
|
|
116
193
|
|
|
117
194
|
/**
|
|
118
195
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
119
|
-
* @codegen <<SignedSource::
|
|
196
|
+
* @codegen <<SignedSource::6aacaedfda6806fa55bfa683125d8717>>
|
|
120
197
|
* @codegenId elevation
|
|
121
198
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
122
199
|
* @codegenParams ["opacity", "shadow", "surface"]
|
|
123
200
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d227fb20aa75533eb903b15ddcb61e67>>
|
|
124
201
|
*/
|
|
125
|
-
export const opacityMap
|
|
202
|
+
export const opacityMap: {
|
|
203
|
+
'opacity.disabled': 'var(--ds-opacity-disabled)';
|
|
204
|
+
'opacity.loading': 'var(--ds-opacity-loading)';
|
|
205
|
+
} = {
|
|
126
206
|
'opacity.disabled': token('opacity.disabled', '0.4'),
|
|
127
207
|
'opacity.loading': token('opacity.loading', '0.2'),
|
|
128
208
|
} as const;
|
|
129
209
|
|
|
130
210
|
export type Opacity = keyof typeof opacityMap;
|
|
131
211
|
|
|
132
|
-
export const shadowMap
|
|
212
|
+
export const shadowMap: {
|
|
213
|
+
'elevation.shadow.overflow': 'var(--ds-shadow-overflow)';
|
|
214
|
+
'elevation.shadow.overflow.perimeter': 'var(--ds-shadow-overflow-perimeter)';
|
|
215
|
+
'elevation.shadow.overflow.spread': 'var(--ds-shadow-overflow-spread)';
|
|
216
|
+
'elevation.shadow.overlay': 'var(--ds-shadow-overlay)';
|
|
217
|
+
'elevation.shadow.raised': 'var(--ds-shadow-raised)';
|
|
218
|
+
} = {
|
|
133
219
|
'elevation.shadow.overflow': token(
|
|
134
220
|
'elevation.shadow.overflow',
|
|
135
221
|
'0px 0px 8px #091e423f, 0px 0px 1px #091e424f',
|
|
@@ -148,7 +234,18 @@ export const shadowMap = {
|
|
|
148
234
|
|
|
149
235
|
export type Shadow = keyof typeof shadowMap;
|
|
150
236
|
|
|
151
|
-
export const surfaceColorMap
|
|
237
|
+
export const surfaceColorMap: {
|
|
238
|
+
'elevation.surface': 'var(--ds-surface)';
|
|
239
|
+
'elevation.surface.hovered': 'var(--ds-surface-hovered)';
|
|
240
|
+
'elevation.surface.pressed': 'var(--ds-surface-pressed)';
|
|
241
|
+
'elevation.surface.overlay': 'var(--ds-surface-overlay)';
|
|
242
|
+
'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
|
|
243
|
+
'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
|
|
244
|
+
'elevation.surface.raised': 'var(--ds-surface-raised)';
|
|
245
|
+
'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
|
|
246
|
+
'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
|
|
247
|
+
'elevation.surface.sunken': 'var(--ds-surface-sunken)';
|
|
248
|
+
} = {
|
|
152
249
|
'elevation.surface': token('elevation.surface', '#FFFFFF'),
|
|
153
250
|
'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
|
|
154
251
|
'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
|
|
@@ -169,13 +266,37 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
|
|
|
169
266
|
|
|
170
267
|
/**
|
|
171
268
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
172
|
-
* @codegen <<SignedSource::
|
|
269
|
+
* @codegen <<SignedSource::be24024fbe022ef5c1df8228e137d9be>>
|
|
173
270
|
* @codegenId colors
|
|
174
271
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
175
272
|
* @codegenParams ["border", "background", "text", "fill"]
|
|
176
273
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d227fb20aa75533eb903b15ddcb61e67>>
|
|
177
274
|
*/
|
|
178
|
-
export const borderColorMap
|
|
275
|
+
export const borderColorMap: {
|
|
276
|
+
'color.border': 'var(--ds-border)';
|
|
277
|
+
'color.border.accent.lime': 'var(--ds-border-accent-lime)';
|
|
278
|
+
'color.border.accent.red': 'var(--ds-border-accent-red)';
|
|
279
|
+
'color.border.accent.orange': 'var(--ds-border-accent-orange)';
|
|
280
|
+
'color.border.accent.yellow': 'var(--ds-border-accent-yellow)';
|
|
281
|
+
'color.border.accent.green': 'var(--ds-border-accent-green)';
|
|
282
|
+
'color.border.accent.teal': 'var(--ds-border-accent-teal)';
|
|
283
|
+
'color.border.accent.blue': 'var(--ds-border-accent-blue)';
|
|
284
|
+
'color.border.accent.purple': 'var(--ds-border-accent-purple)';
|
|
285
|
+
'color.border.accent.magenta': 'var(--ds-border-accent-magenta)';
|
|
286
|
+
'color.border.accent.gray': 'var(--ds-border-accent-gray)';
|
|
287
|
+
'color.border.disabled': 'var(--ds-border-disabled)';
|
|
288
|
+
'color.border.focused': 'var(--ds-border-focused)';
|
|
289
|
+
'color.border.input': 'var(--ds-border-input)';
|
|
290
|
+
'color.border.inverse': 'var(--ds-border-inverse)';
|
|
291
|
+
'color.border.selected': 'var(--ds-border-selected)';
|
|
292
|
+
'color.border.brand': 'var(--ds-border-brand)';
|
|
293
|
+
'color.border.danger': 'var(--ds-border-danger)';
|
|
294
|
+
'color.border.warning': 'var(--ds-border-warning)';
|
|
295
|
+
'color.border.success': 'var(--ds-border-success)';
|
|
296
|
+
'color.border.discovery': 'var(--ds-border-discovery)';
|
|
297
|
+
'color.border.information': 'var(--ds-border-information)';
|
|
298
|
+
'color.border.bold': 'var(--ds-border-bold)';
|
|
299
|
+
} = {
|
|
179
300
|
'color.border': token('color.border', '#091e4221'),
|
|
180
301
|
'color.border.accent.lime': token('color.border.accent.lime', '#6A9A23'),
|
|
181
302
|
'color.border.accent.red': token('color.border.accent.red', '#FF5630'),
|
|
@@ -203,7 +324,205 @@ export const borderColorMap = {
|
|
|
203
324
|
|
|
204
325
|
export type BorderColor = keyof typeof borderColorMap;
|
|
205
326
|
|
|
206
|
-
export const backgroundColorMap
|
|
327
|
+
export const backgroundColorMap: {
|
|
328
|
+
'color.background.accent.lime.subtlest': 'var(--ds-background-accent-lime-subtlest)';
|
|
329
|
+
'color.background.accent.lime.subtlest.hovered': 'var(--ds-background-accent-lime-subtlest-hovered)';
|
|
330
|
+
'color.background.accent.lime.subtlest.pressed': 'var(--ds-background-accent-lime-subtlest-pressed)';
|
|
331
|
+
'color.background.accent.lime.subtler': 'var(--ds-background-accent-lime-subtler)';
|
|
332
|
+
'color.background.accent.lime.subtler.hovered': 'var(--ds-background-accent-lime-subtler-hovered)';
|
|
333
|
+
'color.background.accent.lime.subtler.pressed': 'var(--ds-background-accent-lime-subtler-pressed)';
|
|
334
|
+
'color.background.accent.lime.subtle': 'var(--ds-background-accent-lime-subtle)';
|
|
335
|
+
'color.background.accent.lime.subtle.hovered': 'var(--ds-background-accent-lime-subtle-hovered)';
|
|
336
|
+
'color.background.accent.lime.subtle.pressed': 'var(--ds-background-accent-lime-subtle-pressed)';
|
|
337
|
+
'color.background.accent.lime.bolder': 'var(--ds-background-accent-lime-bolder)';
|
|
338
|
+
'color.background.accent.lime.bolder.hovered': 'var(--ds-background-accent-lime-bolder-hovered)';
|
|
339
|
+
'color.background.accent.lime.bolder.pressed': 'var(--ds-background-accent-lime-bolder-pressed)';
|
|
340
|
+
'color.background.accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
|
|
341
|
+
'color.background.accent.red.subtlest.hovered': 'var(--ds-background-accent-red-subtlest-hovered)';
|
|
342
|
+
'color.background.accent.red.subtlest.pressed': 'var(--ds-background-accent-red-subtlest-pressed)';
|
|
343
|
+
'color.background.accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
|
|
344
|
+
'color.background.accent.red.subtler.hovered': 'var(--ds-background-accent-red-subtler-hovered)';
|
|
345
|
+
'color.background.accent.red.subtler.pressed': 'var(--ds-background-accent-red-subtler-pressed)';
|
|
346
|
+
'color.background.accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
|
|
347
|
+
'color.background.accent.red.subtle.hovered': 'var(--ds-background-accent-red-subtle-hovered)';
|
|
348
|
+
'color.background.accent.red.subtle.pressed': 'var(--ds-background-accent-red-subtle-pressed)';
|
|
349
|
+
'color.background.accent.red.bolder': 'var(--ds-background-accent-red-bolder)';
|
|
350
|
+
'color.background.accent.red.bolder.hovered': 'var(--ds-background-accent-red-bolder-hovered)';
|
|
351
|
+
'color.background.accent.red.bolder.pressed': 'var(--ds-background-accent-red-bolder-pressed)';
|
|
352
|
+
'color.background.accent.orange.subtlest': 'var(--ds-background-accent-orange-subtlest)';
|
|
353
|
+
'color.background.accent.orange.subtlest.hovered': 'var(--ds-background-accent-orange-subtlest-hovered)';
|
|
354
|
+
'color.background.accent.orange.subtlest.pressed': 'var(--ds-background-accent-orange-subtlest-pressed)';
|
|
355
|
+
'color.background.accent.orange.subtler': 'var(--ds-background-accent-orange-subtler)';
|
|
356
|
+
'color.background.accent.orange.subtler.hovered': 'var(--ds-background-accent-orange-subtler-hovered)';
|
|
357
|
+
'color.background.accent.orange.subtler.pressed': 'var(--ds-background-accent-orange-subtler-pressed)';
|
|
358
|
+
'color.background.accent.orange.subtle': 'var(--ds-background-accent-orange-subtle)';
|
|
359
|
+
'color.background.accent.orange.subtle.hovered': 'var(--ds-background-accent-orange-subtle-hovered)';
|
|
360
|
+
'color.background.accent.orange.subtle.pressed': 'var(--ds-background-accent-orange-subtle-pressed)';
|
|
361
|
+
'color.background.accent.orange.bolder': 'var(--ds-background-accent-orange-bolder)';
|
|
362
|
+
'color.background.accent.orange.bolder.hovered': 'var(--ds-background-accent-orange-bolder-hovered)';
|
|
363
|
+
'color.background.accent.orange.bolder.pressed': 'var(--ds-background-accent-orange-bolder-pressed)';
|
|
364
|
+
'color.background.accent.yellow.subtlest': 'var(--ds-background-accent-yellow-subtlest)';
|
|
365
|
+
'color.background.accent.yellow.subtlest.hovered': 'var(--ds-background-accent-yellow-subtlest-hovered)';
|
|
366
|
+
'color.background.accent.yellow.subtlest.pressed': 'var(--ds-background-accent-yellow-subtlest-pressed)';
|
|
367
|
+
'color.background.accent.yellow.subtler': 'var(--ds-background-accent-yellow-subtler)';
|
|
368
|
+
'color.background.accent.yellow.subtler.hovered': 'var(--ds-background-accent-yellow-subtler-hovered)';
|
|
369
|
+
'color.background.accent.yellow.subtler.pressed': 'var(--ds-background-accent-yellow-subtler-pressed)';
|
|
370
|
+
'color.background.accent.yellow.subtle': 'var(--ds-background-accent-yellow-subtle)';
|
|
371
|
+
'color.background.accent.yellow.subtle.hovered': 'var(--ds-background-accent-yellow-subtle-hovered)';
|
|
372
|
+
'color.background.accent.yellow.subtle.pressed': 'var(--ds-background-accent-yellow-subtle-pressed)';
|
|
373
|
+
'color.background.accent.yellow.bolder': 'var(--ds-background-accent-yellow-bolder)';
|
|
374
|
+
'color.background.accent.yellow.bolder.hovered': 'var(--ds-background-accent-yellow-bolder-hovered)';
|
|
375
|
+
'color.background.accent.yellow.bolder.pressed': 'var(--ds-background-accent-yellow-bolder-pressed)';
|
|
376
|
+
'color.background.accent.green.subtlest': 'var(--ds-background-accent-green-subtlest)';
|
|
377
|
+
'color.background.accent.green.subtlest.hovered': 'var(--ds-background-accent-green-subtlest-hovered)';
|
|
378
|
+
'color.background.accent.green.subtlest.pressed': 'var(--ds-background-accent-green-subtlest-pressed)';
|
|
379
|
+
'color.background.accent.green.subtler': 'var(--ds-background-accent-green-subtler)';
|
|
380
|
+
'color.background.accent.green.subtler.hovered': 'var(--ds-background-accent-green-subtler-hovered)';
|
|
381
|
+
'color.background.accent.green.subtler.pressed': 'var(--ds-background-accent-green-subtler-pressed)';
|
|
382
|
+
'color.background.accent.green.subtle': 'var(--ds-background-accent-green-subtle)';
|
|
383
|
+
'color.background.accent.green.subtle.hovered': 'var(--ds-background-accent-green-subtle-hovered)';
|
|
384
|
+
'color.background.accent.green.subtle.pressed': 'var(--ds-background-accent-green-subtle-pressed)';
|
|
385
|
+
'color.background.accent.green.bolder': 'var(--ds-background-accent-green-bolder)';
|
|
386
|
+
'color.background.accent.green.bolder.hovered': 'var(--ds-background-accent-green-bolder-hovered)';
|
|
387
|
+
'color.background.accent.green.bolder.pressed': 'var(--ds-background-accent-green-bolder-pressed)';
|
|
388
|
+
'color.background.accent.teal.subtlest': 'var(--ds-background-accent-teal-subtlest)';
|
|
389
|
+
'color.background.accent.teal.subtlest.hovered': 'var(--ds-background-accent-teal-subtlest-hovered)';
|
|
390
|
+
'color.background.accent.teal.subtlest.pressed': 'var(--ds-background-accent-teal-subtlest-pressed)';
|
|
391
|
+
'color.background.accent.teal.subtler': 'var(--ds-background-accent-teal-subtler)';
|
|
392
|
+
'color.background.accent.teal.subtler.hovered': 'var(--ds-background-accent-teal-subtler-hovered)';
|
|
393
|
+
'color.background.accent.teal.subtler.pressed': 'var(--ds-background-accent-teal-subtler-pressed)';
|
|
394
|
+
'color.background.accent.teal.subtle': 'var(--ds-background-accent-teal-subtle)';
|
|
395
|
+
'color.background.accent.teal.subtle.hovered': 'var(--ds-background-accent-teal-subtle-hovered)';
|
|
396
|
+
'color.background.accent.teal.subtle.pressed': 'var(--ds-background-accent-teal-subtle-pressed)';
|
|
397
|
+
'color.background.accent.teal.bolder': 'var(--ds-background-accent-teal-bolder)';
|
|
398
|
+
'color.background.accent.teal.bolder.hovered': 'var(--ds-background-accent-teal-bolder-hovered)';
|
|
399
|
+
'color.background.accent.teal.bolder.pressed': 'var(--ds-background-accent-teal-bolder-pressed)';
|
|
400
|
+
'color.background.accent.blue.subtlest': 'var(--ds-background-accent-blue-subtlest)';
|
|
401
|
+
'color.background.accent.blue.subtlest.hovered': 'var(--ds-background-accent-blue-subtlest-hovered)';
|
|
402
|
+
'color.background.accent.blue.subtlest.pressed': 'var(--ds-background-accent-blue-subtlest-pressed)';
|
|
403
|
+
'color.background.accent.blue.subtler': 'var(--ds-background-accent-blue-subtler)';
|
|
404
|
+
'color.background.accent.blue.subtler.hovered': 'var(--ds-background-accent-blue-subtler-hovered)';
|
|
405
|
+
'color.background.accent.blue.subtler.pressed': 'var(--ds-background-accent-blue-subtler-pressed)';
|
|
406
|
+
'color.background.accent.blue.subtle': 'var(--ds-background-accent-blue-subtle)';
|
|
407
|
+
'color.background.accent.blue.subtle.hovered': 'var(--ds-background-accent-blue-subtle-hovered)';
|
|
408
|
+
'color.background.accent.blue.subtle.pressed': 'var(--ds-background-accent-blue-subtle-pressed)';
|
|
409
|
+
'color.background.accent.blue.bolder': 'var(--ds-background-accent-blue-bolder)';
|
|
410
|
+
'color.background.accent.blue.bolder.hovered': 'var(--ds-background-accent-blue-bolder-hovered)';
|
|
411
|
+
'color.background.accent.blue.bolder.pressed': 'var(--ds-background-accent-blue-bolder-pressed)';
|
|
412
|
+
'color.background.accent.purple.subtlest': 'var(--ds-background-accent-purple-subtlest)';
|
|
413
|
+
'color.background.accent.purple.subtlest.hovered': 'var(--ds-background-accent-purple-subtlest-hovered)';
|
|
414
|
+
'color.background.accent.purple.subtlest.pressed': 'var(--ds-background-accent-purple-subtlest-pressed)';
|
|
415
|
+
'color.background.accent.purple.subtler': 'var(--ds-background-accent-purple-subtler)';
|
|
416
|
+
'color.background.accent.purple.subtler.hovered': 'var(--ds-background-accent-purple-subtler-hovered)';
|
|
417
|
+
'color.background.accent.purple.subtler.pressed': 'var(--ds-background-accent-purple-subtler-pressed)';
|
|
418
|
+
'color.background.accent.purple.subtle': 'var(--ds-background-accent-purple-subtle)';
|
|
419
|
+
'color.background.accent.purple.subtle.hovered': 'var(--ds-background-accent-purple-subtle-hovered)';
|
|
420
|
+
'color.background.accent.purple.subtle.pressed': 'var(--ds-background-accent-purple-subtle-pressed)';
|
|
421
|
+
'color.background.accent.purple.bolder': 'var(--ds-background-accent-purple-bolder)';
|
|
422
|
+
'color.background.accent.purple.bolder.hovered': 'var(--ds-background-accent-purple-bolder-hovered)';
|
|
423
|
+
'color.background.accent.purple.bolder.pressed': 'var(--ds-background-accent-purple-bolder-pressed)';
|
|
424
|
+
'color.background.accent.magenta.subtlest': 'var(--ds-background-accent-magenta-subtlest)';
|
|
425
|
+
'color.background.accent.magenta.subtlest.hovered': 'var(--ds-background-accent-magenta-subtlest-hovered)';
|
|
426
|
+
'color.background.accent.magenta.subtlest.pressed': 'var(--ds-background-accent-magenta-subtlest-pressed)';
|
|
427
|
+
'color.background.accent.magenta.subtler': 'var(--ds-background-accent-magenta-subtler)';
|
|
428
|
+
'color.background.accent.magenta.subtler.hovered': 'var(--ds-background-accent-magenta-subtler-hovered)';
|
|
429
|
+
'color.background.accent.magenta.subtler.pressed': 'var(--ds-background-accent-magenta-subtler-pressed)';
|
|
430
|
+
'color.background.accent.magenta.subtle': 'var(--ds-background-accent-magenta-subtle)';
|
|
431
|
+
'color.background.accent.magenta.subtle.hovered': 'var(--ds-background-accent-magenta-subtle-hovered)';
|
|
432
|
+
'color.background.accent.magenta.subtle.pressed': 'var(--ds-background-accent-magenta-subtle-pressed)';
|
|
433
|
+
'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
|
|
434
|
+
'color.background.accent.magenta.bolder.hovered': 'var(--ds-background-accent-magenta-bolder-hovered)';
|
|
435
|
+
'color.background.accent.magenta.bolder.pressed': 'var(--ds-background-accent-magenta-bolder-pressed)';
|
|
436
|
+
'color.background.accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
|
|
437
|
+
'color.background.accent.gray.subtlest.hovered': 'var(--ds-background-accent-gray-subtlest-hovered)';
|
|
438
|
+
'color.background.accent.gray.subtlest.pressed': 'var(--ds-background-accent-gray-subtlest-pressed)';
|
|
439
|
+
'color.background.accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
|
|
440
|
+
'color.background.accent.gray.subtler.hovered': 'var(--ds-background-accent-gray-subtler-hovered)';
|
|
441
|
+
'color.background.accent.gray.subtler.pressed': 'var(--ds-background-accent-gray-subtler-pressed)';
|
|
442
|
+
'color.background.accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
|
|
443
|
+
'color.background.accent.gray.subtle.hovered': 'var(--ds-background-accent-gray-subtle-hovered)';
|
|
444
|
+
'color.background.accent.gray.subtle.pressed': 'var(--ds-background-accent-gray-subtle-pressed)';
|
|
445
|
+
'color.background.accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
|
|
446
|
+
'color.background.accent.gray.bolder.hovered': 'var(--ds-background-accent-gray-bolder-hovered)';
|
|
447
|
+
'color.background.accent.gray.bolder.pressed': 'var(--ds-background-accent-gray-bolder-pressed)';
|
|
448
|
+
'color.background.disabled': 'var(--ds-background-disabled)';
|
|
449
|
+
'color.background.input': 'var(--ds-background-input)';
|
|
450
|
+
'color.background.input.hovered': 'var(--ds-background-input-hovered)';
|
|
451
|
+
'color.background.input.pressed': 'var(--ds-background-input-pressed)';
|
|
452
|
+
'color.background.inverse.subtle': 'var(--ds-background-inverse-subtle)';
|
|
453
|
+
'color.background.inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
|
|
454
|
+
'color.background.inverse.subtle.pressed': 'var(--ds-background-inverse-subtle-pressed)';
|
|
455
|
+
'color.background.neutral': 'var(--ds-background-neutral)';
|
|
456
|
+
'color.background.neutral.hovered': 'var(--ds-background-neutral-hovered)';
|
|
457
|
+
'color.background.neutral.pressed': 'var(--ds-background-neutral-pressed)';
|
|
458
|
+
'color.background.neutral.subtle': 'var(--ds-background-neutral-subtle)';
|
|
459
|
+
'color.background.neutral.subtle.hovered': 'var(--ds-background-neutral-subtle-hovered)';
|
|
460
|
+
'color.background.neutral.subtle.pressed': 'var(--ds-background-neutral-subtle-pressed)';
|
|
461
|
+
'color.background.neutral.bold': 'var(--ds-background-neutral-bold)';
|
|
462
|
+
'color.background.neutral.bold.hovered': 'var(--ds-background-neutral-bold-hovered)';
|
|
463
|
+
'color.background.neutral.bold.pressed': 'var(--ds-background-neutral-bold-pressed)';
|
|
464
|
+
'color.background.selected': 'var(--ds-background-selected)';
|
|
465
|
+
'color.background.selected.hovered': 'var(--ds-background-selected-hovered)';
|
|
466
|
+
'color.background.selected.pressed': 'var(--ds-background-selected-pressed)';
|
|
467
|
+
'color.background.selected.bold': 'var(--ds-background-selected-bold)';
|
|
468
|
+
'color.background.selected.bold.hovered': 'var(--ds-background-selected-bold-hovered)';
|
|
469
|
+
'color.background.selected.bold.pressed': 'var(--ds-background-selected-bold-pressed)';
|
|
470
|
+
'color.background.brand.subtlest': 'var(--ds-background-brand-subtlest)';
|
|
471
|
+
'color.background.brand.subtlest.hovered': 'var(--ds-background-brand-subtlest-hovered)';
|
|
472
|
+
'color.background.brand.subtlest.pressed': 'var(--ds-background-brand-subtlest-pressed)';
|
|
473
|
+
'color.background.brand.bold': 'var(--ds-background-brand-bold)';
|
|
474
|
+
'color.background.brand.bold.hovered': 'var(--ds-background-brand-bold-hovered)';
|
|
475
|
+
'color.background.brand.bold.pressed': 'var(--ds-background-brand-bold-pressed)';
|
|
476
|
+
'color.background.brand.boldest': 'var(--ds-background-brand-boldest)';
|
|
477
|
+
'color.background.brand.boldest.hovered': 'var(--ds-background-brand-boldest-hovered)';
|
|
478
|
+
'color.background.brand.boldest.pressed': 'var(--ds-background-brand-boldest-pressed)';
|
|
479
|
+
'color.background.danger': 'var(--ds-background-danger)';
|
|
480
|
+
'color.background.danger.hovered': 'var(--ds-background-danger-hovered)';
|
|
481
|
+
'color.background.danger.pressed': 'var(--ds-background-danger-pressed)';
|
|
482
|
+
'color.background.danger.bold': 'var(--ds-background-danger-bold)';
|
|
483
|
+
'color.background.danger.bold.hovered': 'var(--ds-background-danger-bold-hovered)';
|
|
484
|
+
'color.background.danger.bold.pressed': 'var(--ds-background-danger-bold-pressed)';
|
|
485
|
+
'color.background.warning': 'var(--ds-background-warning)';
|
|
486
|
+
'color.background.warning.hovered': 'var(--ds-background-warning-hovered)';
|
|
487
|
+
'color.background.warning.pressed': 'var(--ds-background-warning-pressed)';
|
|
488
|
+
'color.background.warning.bold': 'var(--ds-background-warning-bold)';
|
|
489
|
+
'color.background.warning.bold.hovered': 'var(--ds-background-warning-bold-hovered)';
|
|
490
|
+
'color.background.warning.bold.pressed': 'var(--ds-background-warning-bold-pressed)';
|
|
491
|
+
'color.background.success': 'var(--ds-background-success)';
|
|
492
|
+
'color.background.success.hovered': 'var(--ds-background-success-hovered)';
|
|
493
|
+
'color.background.success.pressed': 'var(--ds-background-success-pressed)';
|
|
494
|
+
'color.background.success.bold': 'var(--ds-background-success-bold)';
|
|
495
|
+
'color.background.success.bold.hovered': 'var(--ds-background-success-bold-hovered)';
|
|
496
|
+
'color.background.success.bold.pressed': 'var(--ds-background-success-bold-pressed)';
|
|
497
|
+
'color.background.discovery': 'var(--ds-background-discovery)';
|
|
498
|
+
'color.background.discovery.hovered': 'var(--ds-background-discovery-hovered)';
|
|
499
|
+
'color.background.discovery.pressed': 'var(--ds-background-discovery-pressed)';
|
|
500
|
+
'color.background.discovery.bold': 'var(--ds-background-discovery-bold)';
|
|
501
|
+
'color.background.discovery.bold.hovered': 'var(--ds-background-discovery-bold-hovered)';
|
|
502
|
+
'color.background.discovery.bold.pressed': 'var(--ds-background-discovery-bold-pressed)';
|
|
503
|
+
'color.background.information': 'var(--ds-background-information)';
|
|
504
|
+
'color.background.information.hovered': 'var(--ds-background-information-hovered)';
|
|
505
|
+
'color.background.information.pressed': 'var(--ds-background-information-pressed)';
|
|
506
|
+
'color.background.information.bold': 'var(--ds-background-information-bold)';
|
|
507
|
+
'color.background.information.bold.hovered': 'var(--ds-background-information-bold-hovered)';
|
|
508
|
+
'color.background.information.bold.pressed': 'var(--ds-background-information-bold-pressed)';
|
|
509
|
+
'color.blanket': 'var(--ds-blanket)';
|
|
510
|
+
'color.blanket.selected': 'var(--ds-blanket-selected)';
|
|
511
|
+
'color.blanket.danger': 'var(--ds-blanket-danger)';
|
|
512
|
+
'color.skeleton': 'var(--ds-skeleton)';
|
|
513
|
+
'color.skeleton.subtle': 'var(--ds-skeleton-subtle)';
|
|
514
|
+
'elevation.surface': 'var(--ds-surface)';
|
|
515
|
+
'elevation.surface.hovered': 'var(--ds-surface-hovered)';
|
|
516
|
+
'elevation.surface.pressed': 'var(--ds-surface-pressed)';
|
|
517
|
+
'elevation.surface.overlay': 'var(--ds-surface-overlay)';
|
|
518
|
+
'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
|
|
519
|
+
'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
|
|
520
|
+
'elevation.surface.raised': 'var(--ds-surface-raised)';
|
|
521
|
+
'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
|
|
522
|
+
'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
|
|
523
|
+
'elevation.surface.sunken': 'var(--ds-surface-sunken)';
|
|
524
|
+
'utility.elevation.surface.current': 'var(--ds-elevation-surface-current)';
|
|
525
|
+
} = {
|
|
207
526
|
'color.background.accent.lime.subtlest': token(
|
|
208
527
|
'color.background.accent.lime.subtlest',
|
|
209
528
|
'#EEFBDA',
|
|
@@ -771,7 +1090,45 @@ export const backgroundColorMap = {
|
|
|
771
1090
|
|
|
772
1091
|
export type BackgroundColor = keyof typeof backgroundColorMap;
|
|
773
1092
|
|
|
774
|
-
export const textColorMap
|
|
1093
|
+
export const textColorMap: {
|
|
1094
|
+
'color.text': 'var(--ds-text)';
|
|
1095
|
+
'color.text.accent.lime': 'var(--ds-text-accent-lime)';
|
|
1096
|
+
'color.text.accent.lime.bolder': 'var(--ds-text-accent-lime-bolder)';
|
|
1097
|
+
'color.text.accent.red': 'var(--ds-text-accent-red)';
|
|
1098
|
+
'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
|
|
1099
|
+
'color.text.accent.orange': 'var(--ds-text-accent-orange)';
|
|
1100
|
+
'color.text.accent.orange.bolder': 'var(--ds-text-accent-orange-bolder)';
|
|
1101
|
+
'color.text.accent.yellow': 'var(--ds-text-accent-yellow)';
|
|
1102
|
+
'color.text.accent.yellow.bolder': 'var(--ds-text-accent-yellow-bolder)';
|
|
1103
|
+
'color.text.accent.green': 'var(--ds-text-accent-green)';
|
|
1104
|
+
'color.text.accent.green.bolder': 'var(--ds-text-accent-green-bolder)';
|
|
1105
|
+
'color.text.accent.teal': 'var(--ds-text-accent-teal)';
|
|
1106
|
+
'color.text.accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
|
|
1107
|
+
'color.text.accent.blue': 'var(--ds-text-accent-blue)';
|
|
1108
|
+
'color.text.accent.blue.bolder': 'var(--ds-text-accent-blue-bolder)';
|
|
1109
|
+
'color.text.accent.purple': 'var(--ds-text-accent-purple)';
|
|
1110
|
+
'color.text.accent.purple.bolder': 'var(--ds-text-accent-purple-bolder)';
|
|
1111
|
+
'color.text.accent.magenta': 'var(--ds-text-accent-magenta)';
|
|
1112
|
+
'color.text.accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
|
|
1113
|
+
'color.text.accent.gray': 'var(--ds-text-accent-gray)';
|
|
1114
|
+
'color.text.accent.gray.bolder': 'var(--ds-text-accent-gray-bolder)';
|
|
1115
|
+
'color.text.disabled': 'var(--ds-text-disabled)';
|
|
1116
|
+
'color.text.inverse': 'var(--ds-text-inverse)';
|
|
1117
|
+
'color.text.selected': 'var(--ds-text-selected)';
|
|
1118
|
+
'color.text.brand': 'var(--ds-text-brand)';
|
|
1119
|
+
'color.text.danger': 'var(--ds-text-danger)';
|
|
1120
|
+
'color.text.warning': 'var(--ds-text-warning)';
|
|
1121
|
+
'color.text.warning.inverse': 'var(--ds-text-warning-inverse)';
|
|
1122
|
+
'color.text.success': 'var(--ds-text-success)';
|
|
1123
|
+
'color.text.discovery': 'var(--ds-text-discovery)';
|
|
1124
|
+
'color.text.information': 'var(--ds-text-information)';
|
|
1125
|
+
'color.text.subtlest': 'var(--ds-text-subtlest)';
|
|
1126
|
+
'color.text.subtle': 'var(--ds-text-subtle)';
|
|
1127
|
+
'color.link': 'var(--ds-link)';
|
|
1128
|
+
'color.link.pressed': 'var(--ds-link-pressed)';
|
|
1129
|
+
'color.link.visited': 'var(--ds-link-visited)';
|
|
1130
|
+
'color.link.visited.pressed': 'var(--ds-link-visited-pressed)';
|
|
1131
|
+
} = {
|
|
775
1132
|
'color.text': token('color.text', '#172B4D'),
|
|
776
1133
|
'color.text.accent.lime': token('color.text.accent.lime', '#4C6B1F'),
|
|
777
1134
|
'color.text.accent.lime.bolder': token('color.text.accent.lime.bolder', '#37471F'),
|
|
@@ -813,7 +1170,31 @@ export const textColorMap = {
|
|
|
813
1170
|
|
|
814
1171
|
export type TextColor = keyof typeof textColorMap;
|
|
815
1172
|
|
|
816
|
-
export const fillMap
|
|
1173
|
+
export const fillMap: {
|
|
1174
|
+
'color.icon': 'var(--ds-icon)';
|
|
1175
|
+
'color.icon.accent.lime': 'var(--ds-icon-accent-lime)';
|
|
1176
|
+
'color.icon.accent.red': 'var(--ds-icon-accent-red)';
|
|
1177
|
+
'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
|
|
1178
|
+
'color.icon.accent.yellow': 'var(--ds-icon-accent-yellow)';
|
|
1179
|
+
'color.icon.accent.green': 'var(--ds-icon-accent-green)';
|
|
1180
|
+
'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
|
|
1181
|
+
'color.icon.accent.blue': 'var(--ds-icon-accent-blue)';
|
|
1182
|
+
'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
|
|
1183
|
+
'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
|
|
1184
|
+
'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
|
|
1185
|
+
'color.icon.disabled': 'var(--ds-icon-disabled)';
|
|
1186
|
+
'color.icon.inverse': 'var(--ds-icon-inverse)';
|
|
1187
|
+
'color.icon.selected': 'var(--ds-icon-selected)';
|
|
1188
|
+
'color.icon.brand': 'var(--ds-icon-brand)';
|
|
1189
|
+
'color.icon.danger': 'var(--ds-icon-danger)';
|
|
1190
|
+
'color.icon.warning': 'var(--ds-icon-warning)';
|
|
1191
|
+
'color.icon.warning.inverse': 'var(--ds-icon-warning-inverse)';
|
|
1192
|
+
'color.icon.success': 'var(--ds-icon-success)';
|
|
1193
|
+
'color.icon.discovery': 'var(--ds-icon-discovery)';
|
|
1194
|
+
'color.icon.information': 'var(--ds-icon-information)';
|
|
1195
|
+
'color.icon.subtlest': 'var(--ds-icon-subtlest)';
|
|
1196
|
+
'color.icon.subtle': 'var(--ds-icon-subtle)';
|
|
1197
|
+
} = {
|
|
817
1198
|
'color.icon': token('color.icon', '#505F79'),
|
|
818
1199
|
'color.icon.accent.lime': token('color.icon.accent.lime', '#6A9A23'),
|
|
819
1200
|
'color.icon.accent.red': token('color.icon.accent.red', '#FF5630'),
|
|
@@ -875,13 +1256,20 @@ export type Layer = keyof typeof layerMap;
|
|
|
875
1256
|
|
|
876
1257
|
/**
|
|
877
1258
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
878
|
-
* @codegen <<SignedSource::
|
|
1259
|
+
* @codegen <<SignedSource::dea9cf58b8eaaad9590d4ca8b842832b>>
|
|
879
1260
|
* @codegenId border
|
|
880
1261
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
881
1262
|
* @codegenParams ["width", "radius"]
|
|
882
1263
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::4713f1e2c0d199b832b10fd3c9dd214b>>
|
|
883
1264
|
*/
|
|
884
|
-
export const borderWidthMap
|
|
1265
|
+
export const borderWidthMap: {
|
|
1266
|
+
'border.width': 'var(--ds-border-width)';
|
|
1267
|
+
'border.width.0': 'var(--ds-border-width-0)';
|
|
1268
|
+
'border.width.indicator': 'var(--ds-border-width-indicator)';
|
|
1269
|
+
'border.width.outline': 'var(--ds-border-width-outline)';
|
|
1270
|
+
'border.width.selected': 'var(--ds-border-width-selected)';
|
|
1271
|
+
'border.width.focused': 'var(--ds-border-width-focused)';
|
|
1272
|
+
} = {
|
|
885
1273
|
'border.width': token('border.width', '1px'),
|
|
886
1274
|
// @deprecated
|
|
887
1275
|
'border.width.0': token('border.width.0', '0px'),
|
|
@@ -891,11 +1279,26 @@ export const borderWidthMap = {
|
|
|
891
1279
|
'border.width.outline': token('border.width.outline', '2px'),
|
|
892
1280
|
'border.width.selected': token('border.width.selected', '2px'),
|
|
893
1281
|
'border.width.focused': token('border.width.focused', '2px'),
|
|
894
|
-
}
|
|
1282
|
+
};
|
|
895
1283
|
|
|
896
1284
|
export type BorderWidth = keyof typeof borderWidthMap;
|
|
897
1285
|
|
|
898
|
-
export const borderRadiusMap
|
|
1286
|
+
export const borderRadiusMap: {
|
|
1287
|
+
'radius.xsmall': 'var(--ds-radius-xsmall)';
|
|
1288
|
+
'radius.small': 'var(--ds-radius-small)';
|
|
1289
|
+
'radius.medium': 'var(--ds-radius-medium)';
|
|
1290
|
+
'radius.large': 'var(--ds-radius-large)';
|
|
1291
|
+
'radius.xlarge': 'var(--ds-radius-xlarge)';
|
|
1292
|
+
'radius.full': 'var(--ds-radius-full)';
|
|
1293
|
+
'radius.tile': 'var(--ds-radius-tile)';
|
|
1294
|
+
'border.radius': 'var(--ds-border-radius)';
|
|
1295
|
+
'border.radius.050': 'var(--ds-border-radius-050)';
|
|
1296
|
+
'border.radius.100': 'var(--ds-border-radius-100)';
|
|
1297
|
+
'border.radius.200': 'var(--ds-border-radius-200)';
|
|
1298
|
+
'border.radius.300': 'var(--ds-border-radius-300)';
|
|
1299
|
+
'border.radius.400': 'var(--ds-border-radius-400)';
|
|
1300
|
+
'border.radius.circle': 'var(--ds-border-radius-circle)';
|
|
1301
|
+
} = {
|
|
899
1302
|
'radius.xsmall': token('radius.xsmall', '2px'),
|
|
900
1303
|
'radius.small': token('radius.small', '3px'),
|
|
901
1304
|
'radius.medium': token('radius.medium', '6px'),
|
|
@@ -917,7 +1320,7 @@ export const borderRadiusMap = {
|
|
|
917
1320
|
'border.radius.400': token('border.radius.400', '16px'),
|
|
918
1321
|
// @deprecated
|
|
919
1322
|
'border.radius.circle': token('border.radius.circle', '9999px'),
|
|
920
|
-
}
|
|
1323
|
+
};
|
|
921
1324
|
|
|
922
1325
|
export type BorderRadius = keyof typeof borderRadiusMap;
|
|
923
1326
|
|
|
@@ -927,14 +1330,30 @@ export type BorderRadius = keyof typeof borderRadiusMap;
|
|
|
927
1330
|
|
|
928
1331
|
/**
|
|
929
1332
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
930
|
-
* @codegen <<SignedSource::
|
|
1333
|
+
* @codegen <<SignedSource::ab32bc819d015e7451c245e6a77eba28>>
|
|
931
1334
|
* @codegenId typography
|
|
932
1335
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
933
1336
|
* @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
|
|
934
1337
|
* @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
|
|
935
1338
|
* @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
|
|
936
1339
|
*/
|
|
937
|
-
export const fontMap
|
|
1340
|
+
export const fontMap: {
|
|
1341
|
+
'font.body': 'var(--ds-font-body)';
|
|
1342
|
+
'font.body.UNSAFE_small': 'var(--ds-font-body-UNSAFE_small)';
|
|
1343
|
+
'font.body.large': 'var(--ds-font-body-large)';
|
|
1344
|
+
'font.body.small': 'var(--ds-font-body-small)';
|
|
1345
|
+
'font.code': 'var(--ds-font-code)';
|
|
1346
|
+
'font.heading.large': 'var(--ds-font-heading-large)';
|
|
1347
|
+
'font.heading.medium': 'var(--ds-font-heading-medium)';
|
|
1348
|
+
'font.heading.small': 'var(--ds-font-heading-small)';
|
|
1349
|
+
'font.heading.xlarge': 'var(--ds-font-heading-xlarge)';
|
|
1350
|
+
'font.heading.xsmall': 'var(--ds-font-heading-xsmall)';
|
|
1351
|
+
'font.heading.xxlarge': 'var(--ds-font-heading-xxlarge)';
|
|
1352
|
+
'font.heading.xxsmall': 'var(--ds-font-heading-xxsmall)';
|
|
1353
|
+
'font.metric.large': 'var(--ds-font-metric-large)';
|
|
1354
|
+
'font.metric.medium': 'var(--ds-font-metric-medium)';
|
|
1355
|
+
'font.metric.small': 'var(--ds-font-metric-small)';
|
|
1356
|
+
} = {
|
|
938
1357
|
'font.body': token(
|
|
939
1358
|
'font.body',
|
|
940
1359
|
'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
@@ -999,7 +1418,12 @@ export const fontMap = {
|
|
|
999
1418
|
|
|
1000
1419
|
export type Font = keyof typeof fontMap;
|
|
1001
1420
|
|
|
1002
|
-
export const fontWeightMap
|
|
1421
|
+
export const fontWeightMap: {
|
|
1422
|
+
'font.weight.bold': 'var(--ds-font-weight-bold)';
|
|
1423
|
+
'font.weight.medium': 'var(--ds-font-weight-medium)';
|
|
1424
|
+
'font.weight.regular': 'var(--ds-font-weight-regular)';
|
|
1425
|
+
'font.weight.semibold': 'var(--ds-font-weight-semibold)';
|
|
1426
|
+
} = {
|
|
1003
1427
|
'font.weight.bold': token('font.weight.bold', '700'),
|
|
1004
1428
|
'font.weight.medium': token('font.weight.medium', '500'),
|
|
1005
1429
|
'font.weight.regular': token('font.weight.regular', '400'),
|
|
@@ -1008,7 +1432,13 @@ export const fontWeightMap = {
|
|
|
1008
1432
|
|
|
1009
1433
|
export type FontWeight = keyof typeof fontWeightMap;
|
|
1010
1434
|
|
|
1011
|
-
export const fontFamilyMap
|
|
1435
|
+
export const fontFamilyMap: {
|
|
1436
|
+
'font.family.body': 'var(--ds-font-family-body)';
|
|
1437
|
+
'font.family.brand.body': 'var(--ds-font-family-brand-body)';
|
|
1438
|
+
'font.family.brand.heading': 'var(--ds-font-family-brand-heading)';
|
|
1439
|
+
'font.family.code': 'var(--ds-font-family-code)';
|
|
1440
|
+
'font.family.heading': 'var(--ds-font-family-heading)';
|
|
1441
|
+
} = {
|
|
1012
1442
|
'font.family.body': token(
|
|
1013
1443
|
'font.family.body',
|
|
1014
1444
|
'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
@@ -1039,13 +1469,18 @@ export type FontFamily = keyof typeof fontFamilyMap;
|
|
|
1039
1469
|
|
|
1040
1470
|
/**
|
|
1041
1471
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
1042
|
-
* @codegen <<SignedSource::
|
|
1472
|
+
* @codegen <<SignedSource::379f638b84496f34817234c7f3c58f74>>
|
|
1043
1473
|
* @codegenId text
|
|
1044
1474
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
1045
1475
|
* @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
|
|
1046
1476
|
* @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
|
|
1047
1477
|
*/
|
|
1048
|
-
export const textSizeMap
|
|
1478
|
+
export const textSizeMap: {
|
|
1479
|
+
medium: 'var(--ds-font-body)';
|
|
1480
|
+
UNSAFE_small: 'var(--ds-font-body-UNSAFE_small)';
|
|
1481
|
+
large: 'var(--ds-font-body-large)';
|
|
1482
|
+
small: 'var(--ds-font-body-small)';
|
|
1483
|
+
} = {
|
|
1049
1484
|
medium: token(
|
|
1050
1485
|
'font.body',
|
|
1051
1486
|
'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
@@ -1066,7 +1501,12 @@ export const textSizeMap = {
|
|
|
1066
1501
|
|
|
1067
1502
|
export type TextSize = keyof typeof textSizeMap;
|
|
1068
1503
|
|
|
1069
|
-
export const textWeightMap
|
|
1504
|
+
export const textWeightMap: {
|
|
1505
|
+
bold: 'var(--ds-font-weight-bold)';
|
|
1506
|
+
medium: 'var(--ds-font-weight-medium)';
|
|
1507
|
+
regular: 'var(--ds-font-weight-regular)';
|
|
1508
|
+
semibold: 'var(--ds-font-weight-semibold)';
|
|
1509
|
+
} = {
|
|
1070
1510
|
bold: token('font.weight.bold', '700'),
|
|
1071
1511
|
medium: token('font.weight.medium', '500'),
|
|
1072
1512
|
regular: token('font.weight.regular', '400'),
|
|
@@ -1075,7 +1515,11 @@ export const textWeightMap = {
|
|
|
1075
1515
|
|
|
1076
1516
|
export type TextWeight = keyof typeof textWeightMap;
|
|
1077
1517
|
|
|
1078
|
-
export const metricTextSizeMap
|
|
1518
|
+
export const metricTextSizeMap: {
|
|
1519
|
+
large: 'var(--ds-font-metric-large)';
|
|
1520
|
+
medium: 'var(--ds-font-metric-medium)';
|
|
1521
|
+
small: 'var(--ds-font-metric-small)';
|
|
1522
|
+
} = {
|
|
1079
1523
|
large: token(
|
|
1080
1524
|
'font.metric.large',
|
|
1081
1525
|
'normal 653 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5,7 +5,8 @@ type MediaQuery = '(min-width: 30rem)' | '(min-width: 48rem)' | '(min-width: 64r
|
|
|
5
5
|
declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "whiteSpaceTrim" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "animationRange" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "viewTimeline" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
6
6
|
requiredProperties: TAllowedProperties;
|
|
7
7
|
} = never>() => import("@compiled/react").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, MediaQuery, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react").PseudosDeclarations & import("@compiled/react").MediaQueries<MediaQuery> & TStyles) => import("@compiled/react").CSSProps<unknown>, cssMap: <TObject extends Record<string, import("@compiled/react").AllowedStyles<MediaQuery>>, TStylesMap extends import("@compiled/react").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react").AllowedStyles<MediaQuery>> & TStylesMap) => { readonly [P in keyof TStylesMap]: import("@compiled/react").CompiledStyles<TStylesMap[P]>; }, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
|
|
8
|
-
export { css, cssMap, cx
|
|
8
|
+
export { css, cssMap, cx };
|
|
9
|
+
export type { XCSSAllProperties, XCSSAllPseudos };
|
|
9
10
|
type LocalXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
10
11
|
requiredProperties: TAllowedProperties;
|
|
11
12
|
requiredPseudos: TAllowedPseudos;
|
|
@@ -7,7 +7,8 @@ declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "
|
|
|
7
7
|
} = never>() => import("@compiled/react").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, MediaQuery, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react").PseudosDeclarations & import("@compiled/react").MediaQueries<MediaQuery> & TStyles) => import("@compiled/react").CSSProps<unknown>, cssMap: <TObject extends Record<string, import("@compiled/react").AllowedStyles<MediaQuery>>, TStylesMap extends import("@compiled/react").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react").AllowedStyles<MediaQuery>> & TStylesMap) => {
|
|
8
8
|
readonly [P in keyof TStylesMap]: import("@compiled/react").CompiledStyles<TStylesMap[P]>;
|
|
9
9
|
}, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
|
|
10
|
-
export { css, cssMap, cx
|
|
10
|
+
export { css, cssMap, cx };
|
|
11
|
+
export type { XCSSAllProperties, XCSSAllPseudos };
|
|
11
12
|
type LocalXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
12
13
|
requiredProperties: TAllowedProperties;
|
|
13
14
|
requiredPseudos: TAllowedPseudos;
|
package/offerings.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "css",
|
|
4
|
+
"package": "@atlaskit/css",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "css",
|
|
7
|
+
"package": "@atlaskit/css",
|
|
8
|
+
"type": "named"
|
|
9
|
+
},
|
|
10
|
+
"type": "function",
|
|
11
|
+
"keywords": ["css", "styles", "theme", "styling", "utilities"],
|
|
12
|
+
"categories": ["utility"],
|
|
13
|
+
"shortDescription": "A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.",
|
|
14
|
+
"status": "general-availability",
|
|
15
|
+
"usageGuidelines": [
|
|
16
|
+
"Prefer `cssMap` for CSS-in-JS styling",
|
|
17
|
+
"Use typescript to infer most things, eg. which media queries you're allowed to use",
|
|
18
|
+
"If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead"
|
|
19
|
+
],
|
|
20
|
+
"examples": ["./examples/ai/css.tsx"]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "cssMap",
|
|
24
|
+
"package": "@atlaskit/css",
|
|
25
|
+
"import": {
|
|
26
|
+
"name": "cssMap",
|
|
27
|
+
"package": "@atlaskit/css",
|
|
28
|
+
"type": "named"
|
|
29
|
+
},
|
|
30
|
+
"type": "function",
|
|
31
|
+
"keywords": ["css", "styles", "theme", "styling", "utilities"],
|
|
32
|
+
"categories": ["utility"],
|
|
33
|
+
"shortDescription": "A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.",
|
|
34
|
+
"status": "general-availability",
|
|
35
|
+
"usageGuidelines": [
|
|
36
|
+
"This is the primary way to define styles in a more structured manner than `css`",
|
|
37
|
+
"Use typescript to infer most things, eg. which media queries you're allowed to use",
|
|
38
|
+
"If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead",
|
|
39
|
+
"You MUST use this when working with an `xcss` prop as `css` does not work there"
|
|
40
|
+
],
|
|
41
|
+
"examples": ["./examples/ai/css-map.tsx"]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "cx",
|
|
45
|
+
"package": "@atlaskit/css",
|
|
46
|
+
"import": {
|
|
47
|
+
"name": "cx",
|
|
48
|
+
"package": "@atlaskit/css",
|
|
49
|
+
"type": "named"
|
|
50
|
+
},
|
|
51
|
+
"type": "function",
|
|
52
|
+
"keywords": ["css", "styles", "theme", "styling", "utilities"],
|
|
53
|
+
"categories": ["utility"],
|
|
54
|
+
"shortDescription": "A function for combining styles in an `xcss` prop to maintain correct typing.",
|
|
55
|
+
"status": "general-availability",
|
|
56
|
+
"usageGuidelines": [
|
|
57
|
+
"Use this to combine styles in an `xcss` prop to maintain correct typing, eg. `cx(styles.root, styles.bordered)`",
|
|
58
|
+
"This is not required for native elements which should use `[]` instead, eg. `[styles.root, styles.bordered]`"
|
|
59
|
+
],
|
|
60
|
+
"examples": ["./examples/ai/cx.tsx"]
|
|
61
|
+
}
|
|
62
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/css",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@af/visual-regression": "workspace:^",
|
|
56
56
|
"@atlaskit/button": "^23.4.0",
|
|
57
57
|
"@atlaskit/ds-lib": "^5.0.0",
|
|
58
|
-
"@atlaskit/primitives": "^14.
|
|
58
|
+
"@atlaskit/primitives": "^14.15.0",
|
|
59
59
|
"@emotion/react": "^11.7.1",
|
|
60
60
|
"@testing-library/react": "^13.4.0",
|
|
61
61
|
"@types/jscodeshift": "^0.11.0",
|