@atlaskit/primitives 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/xcss/style-maps.partial.js +87 -7
  3. package/dist/es2019/xcss/style-maps.partial.js +87 -7
  4. package/dist/esm/xcss/style-maps.partial.js +87 -7
  5. package/dist/types/xcss/style-maps.partial.d.ts +98 -2
  6. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +98 -2
  7. package/package.json +2 -2
  8. package/report.api.md +98 -0
  9. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +324 -4
  10. package/tmp/api-report-tmp.d.ts +98 -0
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
50
50
  */
51
51
  /**
52
52
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
53
- * @codegen <<SignedSource::4a24a8ef38d5bf0a2803ceff3c393915>>
53
+ * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
54
54
  * @codegenId colors
55
55
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
56
56
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
57
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
57
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
58
58
  */
59
59
  export declare const borderColorMap: {
60
60
  readonly 'color.border': "var(--ds-border)";
@@ -84,45 +84,125 @@ export declare const borderColorMap: {
84
84
  export type BorderColor = keyof typeof borderColorMap;
85
85
  export declare const backgroundColorMap: {
86
86
  readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
87
+ readonly 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered)";
88
+ readonly 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed)";
87
89
  readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
90
+ readonly 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered)";
91
+ readonly 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed)";
88
92
  readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
93
+ readonly 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered)";
94
+ readonly 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed)";
89
95
  readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
96
+ readonly 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered)";
97
+ readonly 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed)";
90
98
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
99
+ readonly 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered)";
100
+ readonly 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed)";
91
101
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
102
+ readonly 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered)";
103
+ readonly 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed)";
92
104
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
105
+ readonly 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered)";
106
+ readonly 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed)";
93
107
  readonly 'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder)";
108
+ readonly 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered)";
109
+ readonly 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed)";
94
110
  readonly 'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
111
+ readonly 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered)";
112
+ readonly 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed)";
95
113
  readonly 'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
114
+ readonly 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered)";
115
+ readonly 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed)";
96
116
  readonly 'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
117
+ readonly 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered)";
118
+ readonly 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed)";
97
119
  readonly 'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
120
+ readonly 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered)";
121
+ readonly 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed)";
98
122
  readonly 'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
123
+ readonly 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered)";
124
+ readonly 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed)";
99
125
  readonly 'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
126
+ readonly 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered)";
127
+ readonly 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed)";
100
128
  readonly 'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
129
+ readonly 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered)";
130
+ readonly 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed)";
101
131
  readonly 'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
132
+ readonly 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered)";
133
+ readonly 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed)";
102
134
  readonly 'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
135
+ readonly 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered)";
136
+ readonly 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed)";
103
137
  readonly 'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler)";
138
+ readonly 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered)";
139
+ readonly 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed)";
104
140
  readonly 'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle)";
141
+ readonly 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered)";
142
+ readonly 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed)";
105
143
  readonly 'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder)";
144
+ readonly 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered)";
145
+ readonly 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed)";
106
146
  readonly 'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
147
+ readonly 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered)";
148
+ readonly 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed)";
107
149
  readonly 'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
150
+ readonly 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered)";
151
+ readonly 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed)";
108
152
  readonly 'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
153
+ readonly 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered)";
154
+ readonly 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed)";
109
155
  readonly 'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
156
+ readonly 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered)";
157
+ readonly 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed)";
110
158
  readonly 'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
159
+ readonly 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered)";
160
+ readonly 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed)";
111
161
  readonly 'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
162
+ readonly 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered)";
163
+ readonly 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed)";
112
164
  readonly 'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
165
+ readonly 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered)";
166
+ readonly 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed)";
113
167
  readonly 'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
168
+ readonly 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered)";
169
+ readonly 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed)";
114
170
  readonly 'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
171
+ readonly 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered)";
172
+ readonly 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed)";
115
173
  readonly 'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
174
+ readonly 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered)";
175
+ readonly 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed)";
116
176
  readonly 'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
177
+ readonly 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered)";
178
+ readonly 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed)";
117
179
  readonly 'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
180
+ readonly 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered)";
181
+ readonly 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed)";
118
182
  readonly 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
183
+ readonly 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered)";
184
+ readonly 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed)";
119
185
  readonly 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
186
+ readonly 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered)";
187
+ readonly 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed)";
120
188
  readonly 'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
189
+ readonly 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered)";
190
+ readonly 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed)";
121
191
  readonly 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
192
+ readonly 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered)";
193
+ readonly 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed)";
122
194
  readonly 'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
195
+ readonly 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered)";
196
+ readonly 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed)";
123
197
  readonly 'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
198
+ readonly 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered)";
199
+ readonly 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed)";
124
200
  readonly 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
201
+ readonly 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered)";
202
+ readonly 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed)";
125
203
  readonly 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
204
+ readonly 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered)";
205
+ readonly 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed)";
126
206
  readonly 'color.background.disabled': "var(--ds-background-disabled)";
127
207
  readonly 'color.background.input': "var(--ds-background-input)";
128
208
  readonly 'color.background.input.hovered': "var(--ds-background-input-hovered)";
@@ -325,6 +405,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
325
405
  /**
326
406
  * @codegenEnd
327
407
  */
408
+ type MarginSpace = Space | 'auto';
328
409
  type AutoComplete<T extends string> = T | Omit<string, T>;
329
410
  export type TokenisedProps = {
330
411
  backgroundColor?: BackgroundColor;
@@ -347,6 +428,17 @@ export type TokenisedProps = {
347
428
  insetInlineEnd?: Space;
348
429
  insetInlineStart?: Space;
349
430
  left?: AutoComplete<Space>;
431
+ margin?: AutoComplete<MarginSpace>;
432
+ marginBlock?: AutoComplete<MarginSpace>;
433
+ marginBlockEnd?: AutoComplete<MarginSpace>;
434
+ marginBlockStart?: AutoComplete<MarginSpace>;
435
+ marginBottom?: AutoComplete<MarginSpace>;
436
+ marginInline?: AutoComplete<MarginSpace>;
437
+ marginInlineEnd?: AutoComplete<MarginSpace>;
438
+ marginInlineStart?: AutoComplete<MarginSpace>;
439
+ marginLeft?: AutoComplete<MarginSpace>;
440
+ marginRight?: AutoComplete<MarginSpace>;
441
+ marginTop?: AutoComplete<MarginSpace>;
350
442
  maxBlockSize?: AutoComplete<Dimension>;
351
443
  maxHeight?: AutoComplete<Dimension>;
352
444
  maxInlineSize?: AutoComplete<Dimension>;
@@ -365,6 +457,10 @@ export type TokenisedProps = {
365
457
  paddingInline?: Space;
366
458
  paddingInlineEnd?: Space;
367
459
  paddingInlineStart?: Space;
460
+ paddingBottom?: AutoComplete<Space>;
461
+ paddingLeft?: AutoComplete<Space>;
462
+ paddingRight?: AutoComplete<Space>;
463
+ paddingTop?: AutoComplete<Space>;
368
464
  right?: AutoComplete<Space>;
369
465
  rowGap?: Space;
370
466
  top?: AutoComplete<Space>;
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
50
50
  */
51
51
  /**
52
52
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
53
- * @codegen <<SignedSource::4a24a8ef38d5bf0a2803ceff3c393915>>
53
+ * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
54
54
  * @codegenId colors
55
55
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
56
56
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
57
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
57
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
58
58
  */
59
59
  export declare const borderColorMap: {
60
60
  readonly 'color.border': "var(--ds-border)";
@@ -84,45 +84,125 @@ export declare const borderColorMap: {
84
84
  export type BorderColor = keyof typeof borderColorMap;
85
85
  export declare const backgroundColorMap: {
86
86
  readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
87
+ readonly 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered)";
88
+ readonly 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed)";
87
89
  readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
90
+ readonly 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered)";
91
+ readonly 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed)";
88
92
  readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
93
+ readonly 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered)";
94
+ readonly 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed)";
89
95
  readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
96
+ readonly 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered)";
97
+ readonly 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed)";
90
98
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
99
+ readonly 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered)";
100
+ readonly 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed)";
91
101
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
102
+ readonly 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered)";
103
+ readonly 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed)";
92
104
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
105
+ readonly 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered)";
106
+ readonly 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed)";
93
107
  readonly 'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder)";
108
+ readonly 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered)";
109
+ readonly 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed)";
94
110
  readonly 'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
111
+ readonly 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered)";
112
+ readonly 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed)";
95
113
  readonly 'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
114
+ readonly 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered)";
115
+ readonly 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed)";
96
116
  readonly 'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
117
+ readonly 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered)";
118
+ readonly 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed)";
97
119
  readonly 'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
120
+ readonly 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered)";
121
+ readonly 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed)";
98
122
  readonly 'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
123
+ readonly 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered)";
124
+ readonly 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed)";
99
125
  readonly 'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
126
+ readonly 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered)";
127
+ readonly 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed)";
100
128
  readonly 'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
129
+ readonly 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered)";
130
+ readonly 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed)";
101
131
  readonly 'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
132
+ readonly 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered)";
133
+ readonly 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed)";
102
134
  readonly 'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
135
+ readonly 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered)";
136
+ readonly 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed)";
103
137
  readonly 'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler)";
138
+ readonly 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered)";
139
+ readonly 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed)";
104
140
  readonly 'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle)";
141
+ readonly 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered)";
142
+ readonly 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed)";
105
143
  readonly 'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder)";
144
+ readonly 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered)";
145
+ readonly 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed)";
106
146
  readonly 'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
147
+ readonly 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered)";
148
+ readonly 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed)";
107
149
  readonly 'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
150
+ readonly 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered)";
151
+ readonly 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed)";
108
152
  readonly 'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
153
+ readonly 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered)";
154
+ readonly 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed)";
109
155
  readonly 'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
156
+ readonly 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered)";
157
+ readonly 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed)";
110
158
  readonly 'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
159
+ readonly 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered)";
160
+ readonly 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed)";
111
161
  readonly 'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
162
+ readonly 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered)";
163
+ readonly 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed)";
112
164
  readonly 'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
165
+ readonly 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered)";
166
+ readonly 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed)";
113
167
  readonly 'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
168
+ readonly 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered)";
169
+ readonly 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed)";
114
170
  readonly 'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
171
+ readonly 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered)";
172
+ readonly 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed)";
115
173
  readonly 'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
174
+ readonly 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered)";
175
+ readonly 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed)";
116
176
  readonly 'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
177
+ readonly 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered)";
178
+ readonly 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed)";
117
179
  readonly 'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
180
+ readonly 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered)";
181
+ readonly 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed)";
118
182
  readonly 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
183
+ readonly 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered)";
184
+ readonly 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed)";
119
185
  readonly 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
186
+ readonly 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered)";
187
+ readonly 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed)";
120
188
  readonly 'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
189
+ readonly 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered)";
190
+ readonly 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed)";
121
191
  readonly 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
192
+ readonly 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered)";
193
+ readonly 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed)";
122
194
  readonly 'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
195
+ readonly 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered)";
196
+ readonly 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed)";
123
197
  readonly 'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
198
+ readonly 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered)";
199
+ readonly 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed)";
124
200
  readonly 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
201
+ readonly 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered)";
202
+ readonly 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed)";
125
203
  readonly 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
204
+ readonly 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered)";
205
+ readonly 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed)";
126
206
  readonly 'color.background.disabled': "var(--ds-background-disabled)";
127
207
  readonly 'color.background.input': "var(--ds-background-input)";
128
208
  readonly 'color.background.input.hovered': "var(--ds-background-input-hovered)";
@@ -325,6 +405,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
325
405
  /**
326
406
  * @codegenEnd
327
407
  */
408
+ type MarginSpace = Space | 'auto';
328
409
  type AutoComplete<T extends string> = T | Omit<string, T>;
329
410
  export type TokenisedProps = {
330
411
  backgroundColor?: BackgroundColor;
@@ -347,6 +428,17 @@ export type TokenisedProps = {
347
428
  insetInlineEnd?: Space;
348
429
  insetInlineStart?: Space;
349
430
  left?: AutoComplete<Space>;
431
+ margin?: AutoComplete<MarginSpace>;
432
+ marginBlock?: AutoComplete<MarginSpace>;
433
+ marginBlockEnd?: AutoComplete<MarginSpace>;
434
+ marginBlockStart?: AutoComplete<MarginSpace>;
435
+ marginBottom?: AutoComplete<MarginSpace>;
436
+ marginInline?: AutoComplete<MarginSpace>;
437
+ marginInlineEnd?: AutoComplete<MarginSpace>;
438
+ marginInlineStart?: AutoComplete<MarginSpace>;
439
+ marginLeft?: AutoComplete<MarginSpace>;
440
+ marginRight?: AutoComplete<MarginSpace>;
441
+ marginTop?: AutoComplete<MarginSpace>;
350
442
  maxBlockSize?: AutoComplete<Dimension>;
351
443
  maxHeight?: AutoComplete<Dimension>;
352
444
  maxInlineSize?: AutoComplete<Dimension>;
@@ -365,6 +457,10 @@ export type TokenisedProps = {
365
457
  paddingInline?: Space;
366
458
  paddingInlineEnd?: Space;
367
459
  paddingInlineStart?: Space;
460
+ paddingBottom?: AutoComplete<Space>;
461
+ paddingLeft?: AutoComplete<Space>;
462
+ paddingRight?: AutoComplete<Space>;
463
+ paddingTop?: AutoComplete<Space>;
368
464
  right?: AutoComplete<Space>;
369
465
  rowGap?: Space;
370
466
  top?: AutoComplete<Space>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -116,7 +116,7 @@
116
116
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
117
117
  },
118
118
  "dependencies": {
119
- "@atlaskit/tokens": "^1.18.0",
119
+ "@atlaskit/tokens": "^1.20.0",
120
120
  "@babel/runtime": "^7.0.0",
121
121
  "@emotion/react": "^11.7.1",
122
122
  "@emotion/serialize": "^1.1.0",
package/report.api.md CHANGED
@@ -99,45 +99,125 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
99
99
  // @public (undocumented)
100
100
  const backgroundColorMap: {
101
101
  readonly 'color.background.accent.lime.subtlest': 'var(--ds-background-accent-lime-subtlest)';
102
+ readonly 'color.background.accent.lime.subtlest.hovered': 'var(--ds-background-accent-lime-subtlest-hovered)';
103
+ readonly 'color.background.accent.lime.subtlest.pressed': 'var(--ds-background-accent-lime-subtlest-pressed)';
102
104
  readonly 'color.background.accent.lime.subtler': 'var(--ds-background-accent-lime-subtler)';
105
+ readonly 'color.background.accent.lime.subtler.hovered': 'var(--ds-background-accent-lime-subtler-hovered)';
106
+ readonly 'color.background.accent.lime.subtler.pressed': 'var(--ds-background-accent-lime-subtler-pressed)';
103
107
  readonly 'color.background.accent.lime.subtle': 'var(--ds-background-accent-lime-subtle)';
108
+ readonly 'color.background.accent.lime.subtle.hovered': 'var(--ds-background-accent-lime-subtle-hovered)';
109
+ readonly 'color.background.accent.lime.subtle.pressed': 'var(--ds-background-accent-lime-subtle-pressed)';
104
110
  readonly 'color.background.accent.lime.bolder': 'var(--ds-background-accent-lime-bolder)';
111
+ readonly 'color.background.accent.lime.bolder.hovered': 'var(--ds-background-accent-lime-bolder-hovered)';
112
+ readonly 'color.background.accent.lime.bolder.pressed': 'var(--ds-background-accent-lime-bolder-pressed)';
105
113
  readonly 'color.background.accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
114
+ readonly 'color.background.accent.red.subtlest.hovered': 'var(--ds-background-accent-red-subtlest-hovered)';
115
+ readonly 'color.background.accent.red.subtlest.pressed': 'var(--ds-background-accent-red-subtlest-pressed)';
106
116
  readonly 'color.background.accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
117
+ readonly 'color.background.accent.red.subtler.hovered': 'var(--ds-background-accent-red-subtler-hovered)';
118
+ readonly 'color.background.accent.red.subtler.pressed': 'var(--ds-background-accent-red-subtler-pressed)';
107
119
  readonly 'color.background.accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
120
+ readonly 'color.background.accent.red.subtle.hovered': 'var(--ds-background-accent-red-subtle-hovered)';
121
+ readonly 'color.background.accent.red.subtle.pressed': 'var(--ds-background-accent-red-subtle-pressed)';
108
122
  readonly 'color.background.accent.red.bolder': 'var(--ds-background-accent-red-bolder)';
123
+ readonly 'color.background.accent.red.bolder.hovered': 'var(--ds-background-accent-red-bolder-hovered)';
124
+ readonly 'color.background.accent.red.bolder.pressed': 'var(--ds-background-accent-red-bolder-pressed)';
109
125
  readonly 'color.background.accent.orange.subtlest': 'var(--ds-background-accent-orange-subtlest)';
126
+ readonly 'color.background.accent.orange.subtlest.hovered': 'var(--ds-background-accent-orange-subtlest-hovered)';
127
+ readonly 'color.background.accent.orange.subtlest.pressed': 'var(--ds-background-accent-orange-subtlest-pressed)';
110
128
  readonly 'color.background.accent.orange.subtler': 'var(--ds-background-accent-orange-subtler)';
129
+ readonly 'color.background.accent.orange.subtler.hovered': 'var(--ds-background-accent-orange-subtler-hovered)';
130
+ readonly 'color.background.accent.orange.subtler.pressed': 'var(--ds-background-accent-orange-subtler-pressed)';
111
131
  readonly 'color.background.accent.orange.subtle': 'var(--ds-background-accent-orange-subtle)';
132
+ readonly 'color.background.accent.orange.subtle.hovered': 'var(--ds-background-accent-orange-subtle-hovered)';
133
+ readonly 'color.background.accent.orange.subtle.pressed': 'var(--ds-background-accent-orange-subtle-pressed)';
112
134
  readonly 'color.background.accent.orange.bolder': 'var(--ds-background-accent-orange-bolder)';
135
+ readonly 'color.background.accent.orange.bolder.hovered': 'var(--ds-background-accent-orange-bolder-hovered)';
136
+ readonly 'color.background.accent.orange.bolder.pressed': 'var(--ds-background-accent-orange-bolder-pressed)';
113
137
  readonly 'color.background.accent.yellow.subtlest': 'var(--ds-background-accent-yellow-subtlest)';
138
+ readonly 'color.background.accent.yellow.subtlest.hovered': 'var(--ds-background-accent-yellow-subtlest-hovered)';
139
+ readonly 'color.background.accent.yellow.subtlest.pressed': 'var(--ds-background-accent-yellow-subtlest-pressed)';
114
140
  readonly 'color.background.accent.yellow.subtler': 'var(--ds-background-accent-yellow-subtler)';
141
+ readonly 'color.background.accent.yellow.subtler.hovered': 'var(--ds-background-accent-yellow-subtler-hovered)';
142
+ readonly 'color.background.accent.yellow.subtler.pressed': 'var(--ds-background-accent-yellow-subtler-pressed)';
115
143
  readonly 'color.background.accent.yellow.subtle': 'var(--ds-background-accent-yellow-subtle)';
144
+ readonly 'color.background.accent.yellow.subtle.hovered': 'var(--ds-background-accent-yellow-subtle-hovered)';
145
+ readonly 'color.background.accent.yellow.subtle.pressed': 'var(--ds-background-accent-yellow-subtle-pressed)';
116
146
  readonly 'color.background.accent.yellow.bolder': 'var(--ds-background-accent-yellow-bolder)';
147
+ readonly 'color.background.accent.yellow.bolder.hovered': 'var(--ds-background-accent-yellow-bolder-hovered)';
148
+ readonly 'color.background.accent.yellow.bolder.pressed': 'var(--ds-background-accent-yellow-bolder-pressed)';
117
149
  readonly 'color.background.accent.green.subtlest': 'var(--ds-background-accent-green-subtlest)';
150
+ readonly 'color.background.accent.green.subtlest.hovered': 'var(--ds-background-accent-green-subtlest-hovered)';
151
+ readonly 'color.background.accent.green.subtlest.pressed': 'var(--ds-background-accent-green-subtlest-pressed)';
118
152
  readonly 'color.background.accent.green.subtler': 'var(--ds-background-accent-green-subtler)';
153
+ readonly 'color.background.accent.green.subtler.hovered': 'var(--ds-background-accent-green-subtler-hovered)';
154
+ readonly 'color.background.accent.green.subtler.pressed': 'var(--ds-background-accent-green-subtler-pressed)';
119
155
  readonly 'color.background.accent.green.subtle': 'var(--ds-background-accent-green-subtle)';
156
+ readonly 'color.background.accent.green.subtle.hovered': 'var(--ds-background-accent-green-subtle-hovered)';
157
+ readonly 'color.background.accent.green.subtle.pressed': 'var(--ds-background-accent-green-subtle-pressed)';
120
158
  readonly 'color.background.accent.green.bolder': 'var(--ds-background-accent-green-bolder)';
159
+ readonly 'color.background.accent.green.bolder.hovered': 'var(--ds-background-accent-green-bolder-hovered)';
160
+ readonly 'color.background.accent.green.bolder.pressed': 'var(--ds-background-accent-green-bolder-pressed)';
121
161
  readonly 'color.background.accent.teal.subtlest': 'var(--ds-background-accent-teal-subtlest)';
162
+ readonly 'color.background.accent.teal.subtlest.hovered': 'var(--ds-background-accent-teal-subtlest-hovered)';
163
+ readonly 'color.background.accent.teal.subtlest.pressed': 'var(--ds-background-accent-teal-subtlest-pressed)';
122
164
  readonly 'color.background.accent.teal.subtler': 'var(--ds-background-accent-teal-subtler)';
165
+ readonly 'color.background.accent.teal.subtler.hovered': 'var(--ds-background-accent-teal-subtler-hovered)';
166
+ readonly 'color.background.accent.teal.subtler.pressed': 'var(--ds-background-accent-teal-subtler-pressed)';
123
167
  readonly 'color.background.accent.teal.subtle': 'var(--ds-background-accent-teal-subtle)';
168
+ readonly 'color.background.accent.teal.subtle.hovered': 'var(--ds-background-accent-teal-subtle-hovered)';
169
+ readonly 'color.background.accent.teal.subtle.pressed': 'var(--ds-background-accent-teal-subtle-pressed)';
124
170
  readonly 'color.background.accent.teal.bolder': 'var(--ds-background-accent-teal-bolder)';
171
+ readonly 'color.background.accent.teal.bolder.hovered': 'var(--ds-background-accent-teal-bolder-hovered)';
172
+ readonly 'color.background.accent.teal.bolder.pressed': 'var(--ds-background-accent-teal-bolder-pressed)';
125
173
  readonly 'color.background.accent.blue.subtlest': 'var(--ds-background-accent-blue-subtlest)';
174
+ readonly 'color.background.accent.blue.subtlest.hovered': 'var(--ds-background-accent-blue-subtlest-hovered)';
175
+ readonly 'color.background.accent.blue.subtlest.pressed': 'var(--ds-background-accent-blue-subtlest-pressed)';
126
176
  readonly 'color.background.accent.blue.subtler': 'var(--ds-background-accent-blue-subtler)';
177
+ readonly 'color.background.accent.blue.subtler.hovered': 'var(--ds-background-accent-blue-subtler-hovered)';
178
+ readonly 'color.background.accent.blue.subtler.pressed': 'var(--ds-background-accent-blue-subtler-pressed)';
127
179
  readonly 'color.background.accent.blue.subtle': 'var(--ds-background-accent-blue-subtle)';
180
+ readonly 'color.background.accent.blue.subtle.hovered': 'var(--ds-background-accent-blue-subtle-hovered)';
181
+ readonly 'color.background.accent.blue.subtle.pressed': 'var(--ds-background-accent-blue-subtle-pressed)';
128
182
  readonly 'color.background.accent.blue.bolder': 'var(--ds-background-accent-blue-bolder)';
183
+ readonly 'color.background.accent.blue.bolder.hovered': 'var(--ds-background-accent-blue-bolder-hovered)';
184
+ readonly 'color.background.accent.blue.bolder.pressed': 'var(--ds-background-accent-blue-bolder-pressed)';
129
185
  readonly 'color.background.accent.purple.subtlest': 'var(--ds-background-accent-purple-subtlest)';
186
+ readonly 'color.background.accent.purple.subtlest.hovered': 'var(--ds-background-accent-purple-subtlest-hovered)';
187
+ readonly 'color.background.accent.purple.subtlest.pressed': 'var(--ds-background-accent-purple-subtlest-pressed)';
130
188
  readonly 'color.background.accent.purple.subtler': 'var(--ds-background-accent-purple-subtler)';
189
+ readonly 'color.background.accent.purple.subtler.hovered': 'var(--ds-background-accent-purple-subtler-hovered)';
190
+ readonly 'color.background.accent.purple.subtler.pressed': 'var(--ds-background-accent-purple-subtler-pressed)';
131
191
  readonly 'color.background.accent.purple.subtle': 'var(--ds-background-accent-purple-subtle)';
192
+ readonly 'color.background.accent.purple.subtle.hovered': 'var(--ds-background-accent-purple-subtle-hovered)';
193
+ readonly 'color.background.accent.purple.subtle.pressed': 'var(--ds-background-accent-purple-subtle-pressed)';
132
194
  readonly 'color.background.accent.purple.bolder': 'var(--ds-background-accent-purple-bolder)';
195
+ readonly 'color.background.accent.purple.bolder.hovered': 'var(--ds-background-accent-purple-bolder-hovered)';
196
+ readonly 'color.background.accent.purple.bolder.pressed': 'var(--ds-background-accent-purple-bolder-pressed)';
133
197
  readonly 'color.background.accent.magenta.subtlest': 'var(--ds-background-accent-magenta-subtlest)';
198
+ readonly 'color.background.accent.magenta.subtlest.hovered': 'var(--ds-background-accent-magenta-subtlest-hovered)';
199
+ readonly 'color.background.accent.magenta.subtlest.pressed': 'var(--ds-background-accent-magenta-subtlest-pressed)';
134
200
  readonly 'color.background.accent.magenta.subtler': 'var(--ds-background-accent-magenta-subtler)';
201
+ readonly 'color.background.accent.magenta.subtler.hovered': 'var(--ds-background-accent-magenta-subtler-hovered)';
202
+ readonly 'color.background.accent.magenta.subtler.pressed': 'var(--ds-background-accent-magenta-subtler-pressed)';
135
203
  readonly 'color.background.accent.magenta.subtle': 'var(--ds-background-accent-magenta-subtle)';
204
+ readonly 'color.background.accent.magenta.subtle.hovered': 'var(--ds-background-accent-magenta-subtle-hovered)';
205
+ readonly 'color.background.accent.magenta.subtle.pressed': 'var(--ds-background-accent-magenta-subtle-pressed)';
136
206
  readonly 'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
207
+ readonly 'color.background.accent.magenta.bolder.hovered': 'var(--ds-background-accent-magenta-bolder-hovered)';
208
+ readonly 'color.background.accent.magenta.bolder.pressed': 'var(--ds-background-accent-magenta-bolder-pressed)';
137
209
  readonly 'color.background.accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
210
+ readonly 'color.background.accent.gray.subtlest.hovered': 'var(--ds-background-accent-gray-subtlest-hovered)';
211
+ readonly 'color.background.accent.gray.subtlest.pressed': 'var(--ds-background-accent-gray-subtlest-pressed)';
138
212
  readonly 'color.background.accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
213
+ readonly 'color.background.accent.gray.subtler.hovered': 'var(--ds-background-accent-gray-subtler-hovered)';
214
+ readonly 'color.background.accent.gray.subtler.pressed': 'var(--ds-background-accent-gray-subtler-pressed)';
139
215
  readonly 'color.background.accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
216
+ readonly 'color.background.accent.gray.subtle.hovered': 'var(--ds-background-accent-gray-subtle-hovered)';
217
+ readonly 'color.background.accent.gray.subtle.pressed': 'var(--ds-background-accent-gray-subtle-pressed)';
140
218
  readonly 'color.background.accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
219
+ readonly 'color.background.accent.gray.bolder.hovered': 'var(--ds-background-accent-gray-bolder-hovered)';
220
+ readonly 'color.background.accent.gray.bolder.pressed': 'var(--ds-background-accent-gray-bolder-pressed)';
141
221
  readonly 'color.background.disabled': 'var(--ds-background-disabled)';
142
222
  readonly 'color.background.input': 'var(--ds-background-input)';
143
223
  readonly 'color.background.input.hovered': 'var(--ds-background-input-hovered)';
@@ -760,6 +840,9 @@ const layerMap: {
760
840
  readonly tooltip: 800;
761
841
  };
762
842
 
843
+ // @public (undocumented)
844
+ type MarginSpace = 'auto' | Space;
845
+
763
846
  // @public
764
847
  export const media: {
765
848
  readonly above: {
@@ -1005,6 +1088,17 @@ type TokenisedProps = {
1005
1088
  insetInlineEnd?: Space;
1006
1089
  insetInlineStart?: Space;
1007
1090
  left?: AutoComplete<Space>;
1091
+ margin?: AutoComplete<MarginSpace>;
1092
+ marginBlock?: AutoComplete<MarginSpace>;
1093
+ marginBlockEnd?: AutoComplete<MarginSpace>;
1094
+ marginBlockStart?: AutoComplete<MarginSpace>;
1095
+ marginBottom?: AutoComplete<MarginSpace>;
1096
+ marginInline?: AutoComplete<MarginSpace>;
1097
+ marginInlineEnd?: AutoComplete<MarginSpace>;
1098
+ marginInlineStart?: AutoComplete<MarginSpace>;
1099
+ marginLeft?: AutoComplete<MarginSpace>;
1100
+ marginRight?: AutoComplete<MarginSpace>;
1101
+ marginTop?: AutoComplete<MarginSpace>;
1008
1102
  maxBlockSize?: AutoComplete<Dimension>;
1009
1103
  maxHeight?: AutoComplete<Dimension>;
1010
1104
  maxInlineSize?: AutoComplete<Dimension>;
@@ -1023,6 +1117,10 @@ type TokenisedProps = {
1023
1117
  paddingInline?: Space;
1024
1118
  paddingInlineEnd?: Space;
1025
1119
  paddingInlineStart?: Space;
1120
+ paddingBottom?: AutoComplete<Space>;
1121
+ paddingLeft?: AutoComplete<Space>;
1122
+ paddingRight?: AutoComplete<Space>;
1123
+ paddingTop?: AutoComplete<Space>;
1026
1124
  right?: AutoComplete<Space>;
1027
1125
  rowGap?: Space;
1028
1126
  top?: AutoComplete<Space>;