@atlaskit/primitives 1.2.3 → 1.3.1

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 (25) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/box.js +33 -25
  3. package/dist/cjs/components/internal/types.js +5 -0
  4. package/dist/cjs/xcss/style-maps.partial.js +87 -7
  5. package/dist/es2019/components/box.js +31 -26
  6. package/dist/es2019/components/internal/types.js +1 -0
  7. package/dist/es2019/xcss/style-maps.partial.js +87 -7
  8. package/dist/esm/components/box.js +32 -26
  9. package/dist/esm/components/internal/types.js +1 -0
  10. package/dist/esm/xcss/style-maps.partial.js +87 -7
  11. package/dist/types/components/box.d.ts +66 -6
  12. package/dist/types/components/internal/types.d.ts +1 -0
  13. package/dist/types/xcss/style-maps.partial.d.ts +82 -2
  14. package/dist/types-ts4.5/components/box.d.ts +66 -6
  15. package/dist/types-ts4.5/components/internal/types.d.ts +1 -0
  16. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +82 -2
  17. package/package.json +2 -2
  18. package/report.api.md +154 -7
  19. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +324 -4
  20. package/tmp/api-report-tmp.d.ts +94 -4
  21. package/dist/cjs/components/internal/base-box.js +0 -61
  22. package/dist/es2019/components/internal/base-box.js +0 -52
  23. package/dist/esm/components/internal/base-box.js +0 -53
  24. package/dist/types/components/internal/base-box.d.ts +0 -85
  25. package/dist/types-ts4.5/components/internal/base-box.d.ts +0 -85
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -49,11 +49,11 @@ export var spaceMap = {
49
49
  */
50
50
  /**
51
51
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
52
- * @codegen <<SignedSource::4a24a8ef38d5bf0a2803ceff3c393915>>
52
+ * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
53
53
  * @codegenId colors
54
54
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
55
55
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
56
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
56
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
57
57
  */
58
58
  export var borderColorMap = {
59
59
  'color.border': "var(--ds-border, #091e4221)",
@@ -82,45 +82,125 @@ export var borderColorMap = {
82
82
  };
83
83
  export var backgroundColorMap = {
84
84
  'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
85
+ 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)",
86
+ 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)",
85
87
  'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
88
+ 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)",
89
+ 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed, #94C748)",
86
90
  'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
91
+ 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)",
92
+ 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)",
87
93
  'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
94
+ 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered, #37471F)",
95
+ 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed, #37471F)",
88
96
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
97
+ 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered, #FF7452)",
98
+ 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed, #FF5630)",
89
99
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
100
+ 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered, #FF5630)",
101
+ 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed, #DE350B)",
90
102
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
103
+ 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered, #FF5630)",
104
+ 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed, #FF7452)",
91
105
  'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
106
+ 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered, #FF5630)",
107
+ 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed, #FF7452)",
92
108
  'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
109
+ 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered, #FEC57B)",
110
+ 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed, #FFE2BD)",
93
111
  'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
112
+ 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered, #F18D13)",
113
+ 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed, #FEC57B)",
94
114
  'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
115
+ 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered, #974F0C)",
116
+ 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed, #B65C02)",
95
117
  'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
118
+ 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered, #5F3811)",
119
+ 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed, #974F0C)",
96
120
  'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
121
+ 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered, #FFC400)",
122
+ 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed, #FFAB00)",
97
123
  'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
124
+ 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered, #FFAB00)",
125
+ 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed, #FF991F)",
98
126
  'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
127
+ 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered, #FFAB00)",
128
+ 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed, #FFC400)",
99
129
  'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
130
+ 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered, #FFAB00)",
131
+ 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed, #FFC400)",
100
132
  'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
133
+ 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered, #57D9A3)",
134
+ 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed, #36B37E)",
101
135
  'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
136
+ 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered, #36B37E)",
137
+ 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed, #00875A)",
102
138
  'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
139
+ 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered, #36B37E)",
140
+ 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed, #57D9A3)",
103
141
  'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
142
+ 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered, #36B37E)",
143
+ 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed, #57D9A3)",
104
144
  'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
145
+ 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered, #00C7E6)",
146
+ 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed, #00B8D9)",
105
147
  'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
148
+ 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered, #00B8D9)",
149
+ 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed, #00A3BF)",
106
150
  'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
151
+ 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered, #00B8D9)",
152
+ 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed, #00C7E6)",
107
153
  'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
154
+ 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered, #00B8D9)",
155
+ 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed, #00C7E6)",
108
156
  'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
157
+ 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered, #2684FF)",
158
+ 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed, #0065FF)",
109
159
  'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
160
+ 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered, #0065FF)",
161
+ 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed, #0052CC)",
110
162
  'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
163
+ 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered, #0065FF)",
164
+ 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed, #2684FF)",
111
165
  'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
166
+ 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered, #0065FF)",
167
+ 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed, #2684FF)",
112
168
  'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
169
+ 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered, #8777D9)",
170
+ 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed, #6554C0)",
113
171
  'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
172
+ 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered, #6554C0)",
173
+ 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed, #5243AA)",
114
174
  'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
175
+ 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered, #6554C0)",
176
+ 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed, #8777D9)",
115
177
  'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
116
- 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
117
- 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
178
+ 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered, #6554C0)",
179
+ 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed, #8777D9)",
180
+ 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
181
+ 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
182
+ 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)",
183
+ 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
184
+ 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)",
185
+ 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)",
118
186
  'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
119
- 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
187
+ 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)",
188
+ 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)",
189
+ 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #AE4787)",
190
+ 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered, #943D73)",
191
+ 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
120
192
  'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
193
+ 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered, #5E6C84)",
194
+ 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed, #505F79)",
121
195
  'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
122
- 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
123
- 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
196
+ 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered, #505F79)",
197
+ 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed, #42526E)",
198
+ 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #505F79)",
199
+ 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered, #5E6C84)",
200
+ 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed, #6B778C)",
201
+ 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #42526E)",
202
+ 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered, #344563)",
203
+ 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed, #253858)",
124
204
  'color.background.disabled': "var(--ds-background-disabled, #091e4289)",
125
205
  'color.background.input': "var(--ds-background-input, #FAFBFC)",
126
206
  'color.background.input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
package/dist/types/components/box.d.ts CHANGED
@@ -1,9 +1,69 @@
1
1
  /** @jsx jsx */
2
- import { ComponentPropsWithoutRef, ElementType, FC, ReactElement } from 'react';
3
- import { BaseBoxPropsFoundation } from './internal/base-box';
4
- import { BasePrimitiveProps } from './types';
5
- export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
6
- type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
2
+ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
3
+ import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
4
+ import { SVGElements } from './internal/types';
5
+ import type { BasePrimitiveProps } from './types';
6
+ type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
7
+ type CustomElementType<P = any> = {
8
+ [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
9
+ }[AllowedElements];
10
+ export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
11
+ type BaseBoxProps<T extends CustomElementType> = {
12
+ /**
13
+ * The DOM element to render as the Box. Defaults to `div`.
14
+ */
15
+ as?: T;
16
+ /**
17
+ * Elements to be rendered inside the Box.
18
+ */
19
+ children?: ReactNode;
20
+ /**
21
+ * Token representing background color with a built-in fallback value.
22
+ */
23
+ backgroundColor?: BackgroundColor;
24
+ /**
25
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
26
+ *
27
+ * @see paddingBlock
28
+ * @see paddingInline
29
+ */
30
+ padding?: Space;
31
+ /**
32
+ * Tokens representing CSS shorthand `paddingBlock`.
33
+ *
34
+ * @see paddingBlockStart
35
+ * @see paddingBlockEnd
36
+ */
37
+ paddingBlock?: Space;
38
+ /**
39
+ * Tokens representing CSS `paddingBlockStart`.
40
+ */
41
+ paddingBlockStart?: Space;
42
+ /**
43
+ * Tokens representing CSS `paddingBlockEnd`.
44
+ */
45
+ paddingBlockEnd?: Space;
46
+ /**
47
+ * Tokens representing CSS shorthand `paddingInline`.
48
+ *
49
+ * @see paddingInlineStart
50
+ * @see paddingInlineEnd
51
+ */
52
+ paddingInline?: Space;
53
+ /**
54
+ * Tokens representing CSS `paddingInlineStart`.
55
+ */
56
+ paddingInlineStart?: Space;
57
+ /**
58
+ * Tokens representing CSS `paddingInlineEnd`.
59
+ */
60
+ paddingInlineEnd?: Space;
61
+ /**
62
+ * Forwarded ref
63
+ */
64
+ ref?: ComponentPropsWithRef<T>['ref'];
65
+ };
66
+ type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
7
67
  /**
8
68
  * __Box__
9
69
  *
@@ -14,5 +74,5 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(prop
14
74
  * - [Code](https://atlassian.design/components/primitives/box/code)
15
75
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
16
76
  */
17
- declare const Box: BoxComponent;
77
+ export declare const Box: BoxComponent;
18
78
  export default Box;
package/dist/types/components/internal/types.d.ts ADDED
@@ -0,0 +1 @@
1
+ export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
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)";
package/dist/types-ts4.5/components/box.d.ts CHANGED
@@ -1,9 +1,69 @@
1
1
  /** @jsx jsx */
2
- import { ComponentPropsWithoutRef, ElementType, FC, ReactElement } from 'react';
3
- import { BaseBoxPropsFoundation } from './internal/base-box';
4
- import { BasePrimitiveProps } from './types';
5
- export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
6
- type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
2
+ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
3
+ import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
4
+ import { SVGElements } from './internal/types';
5
+ import type { BasePrimitiveProps } from './types';
6
+ type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
7
+ type CustomElementType<P = any> = {
8
+ [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
9
+ }[AllowedElements];
10
+ export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
11
+ type BaseBoxProps<T extends CustomElementType> = {
12
+ /**
13
+ * The DOM element to render as the Box. Defaults to `div`.
14
+ */
15
+ as?: T;
16
+ /**
17
+ * Elements to be rendered inside the Box.
18
+ */
19
+ children?: ReactNode;
20
+ /**
21
+ * Token representing background color with a built-in fallback value.
22
+ */
23
+ backgroundColor?: BackgroundColor;
24
+ /**
25
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
26
+ *
27
+ * @see paddingBlock
28
+ * @see paddingInline
29
+ */
30
+ padding?: Space;
31
+ /**
32
+ * Tokens representing CSS shorthand `paddingBlock`.
33
+ *
34
+ * @see paddingBlockStart
35
+ * @see paddingBlockEnd
36
+ */
37
+ paddingBlock?: Space;
38
+ /**
39
+ * Tokens representing CSS `paddingBlockStart`.
40
+ */
41
+ paddingBlockStart?: Space;
42
+ /**
43
+ * Tokens representing CSS `paddingBlockEnd`.
44
+ */
45
+ paddingBlockEnd?: Space;
46
+ /**
47
+ * Tokens representing CSS shorthand `paddingInline`.
48
+ *
49
+ * @see paddingInlineStart
50
+ * @see paddingInlineEnd
51
+ */
52
+ paddingInline?: Space;
53
+ /**
54
+ * Tokens representing CSS `paddingInlineStart`.
55
+ */
56
+ paddingInlineStart?: Space;
57
+ /**
58
+ * Tokens representing CSS `paddingInlineEnd`.
59
+ */
60
+ paddingInlineEnd?: Space;
61
+ /**
62
+ * Forwarded ref
63
+ */
64
+ ref?: ComponentPropsWithRef<T>['ref'];
65
+ };
66
+ type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
7
67
  /**
8
68
  * __Box__
9
69
  *
@@ -14,5 +74,5 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(prop
14
74
  * - [Code](https://atlassian.design/components/primitives/box/code)
15
75
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
16
76
  */
17
- declare const Box: BoxComponent;
77
+ export declare const Box: BoxComponent;
18
78
  export default Box;
package/dist/types-ts4.5/components/internal/types.d.ts ADDED
@@ -0,0 +1 @@
1
+ export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';