@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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/components/box.js +33 -25
- package/dist/cjs/components/internal/types.js +5 -0
- package/dist/cjs/xcss/style-maps.partial.js +87 -7
- package/dist/es2019/components/box.js +31 -26
- package/dist/es2019/components/internal/types.js +1 -0
- package/dist/es2019/xcss/style-maps.partial.js +87 -7
- package/dist/esm/components/box.js +32 -26
- package/dist/esm/components/internal/types.js +1 -0
- package/dist/esm/xcss/style-maps.partial.js +87 -7
- package/dist/types/components/box.d.ts +66 -6
- package/dist/types/components/internal/types.d.ts +1 -0
- package/dist/types/xcss/style-maps.partial.d.ts +82 -2
- package/dist/types-ts4.5/components/box.d.ts +66 -6
- package/dist/types-ts4.5/components/internal/types.d.ts +1 -0
- package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +82 -2
- package/package.json +2 -2
- package/report.api.md +154 -7
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +324 -4
- package/tmp/api-report-tmp.d.ts +94 -4
- package/dist/cjs/components/internal/base-box.js +0 -61
- package/dist/es2019/components/internal/base-box.js +0 -52
- package/dist/esm/components/internal/base-box.js +0 -53
- package/dist/types/components/internal/base-box.d.ts +0 -85
- package/dist/types-ts4.5/components/internal/base-box.d.ts +0 -85
|
@@ -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::
|
|
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::
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
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.
|
|
119
|
+
"@atlaskit/tokens": "^1.19.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
|
@@ -21,7 +21,6 @@ import type * as CSS_2 from 'csstype';
|
|
|
21
21
|
import type { CSSProperties } from 'react';
|
|
22
22
|
import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
|
|
23
23
|
import { ElementType } from 'react';
|
|
24
|
-
import { FC } from 'react';
|
|
25
24
|
import { ForwardRefExoticComponent } from 'react';
|
|
26
25
|
import { jsx } from '@emotion/react';
|
|
27
26
|
import { MemoExoticComponent } from 'react';
|
|
@@ -82,6 +81,9 @@ type AllMedia =
|
|
|
82
81
|
| '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)'
|
|
83
82
|
| MediaQuery;
|
|
84
83
|
|
|
84
|
+
// @public (undocumented)
|
|
85
|
+
type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
|
|
86
|
+
|
|
85
87
|
// @public (undocumented)
|
|
86
88
|
type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
|
|
87
89
|
|
|
@@ -97,45 +99,125 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
|
|
|
97
99
|
// @public (undocumented)
|
|
98
100
|
const backgroundColorMap: {
|
|
99
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)';
|
|
100
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)';
|
|
101
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)';
|
|
102
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)';
|
|
103
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)';
|
|
104
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)';
|
|
105
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)';
|
|
106
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)';
|
|
107
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)';
|
|
108
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)';
|
|
109
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)';
|
|
110
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)';
|
|
111
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)';
|
|
112
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)';
|
|
113
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)';
|
|
114
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)';
|
|
115
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)';
|
|
116
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)';
|
|
117
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)';
|
|
118
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)';
|
|
119
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)';
|
|
120
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)';
|
|
121
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)';
|
|
122
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)';
|
|
123
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)';
|
|
124
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)';
|
|
125
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)';
|
|
126
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)';
|
|
127
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)';
|
|
128
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)';
|
|
129
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)';
|
|
130
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)';
|
|
131
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)';
|
|
132
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)';
|
|
133
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)';
|
|
134
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)';
|
|
135
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)';
|
|
136
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)';
|
|
137
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)';
|
|
138
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)';
|
|
139
221
|
readonly 'color.background.disabled': 'var(--ds-background-disabled)';
|
|
140
222
|
readonly 'color.background.input': 'var(--ds-background-input)';
|
|
141
223
|
readonly 'color.background.input.hovered': 'var(--ds-background-input-hovered)';
|
|
@@ -213,7 +295,7 @@ const backgroundColorMap: {
|
|
|
213
295
|
};
|
|
214
296
|
|
|
215
297
|
// @public (undocumented)
|
|
216
|
-
type
|
|
298
|
+
type BaseBoxProps<T extends CustomElementType> = {
|
|
217
299
|
as?: T;
|
|
218
300
|
children?: ReactNode;
|
|
219
301
|
backgroundColor?: BackgroundColor;
|
|
@@ -314,18 +396,17 @@ const borderWidthMap: {
|
|
|
314
396
|
export const Box: BoxComponent;
|
|
315
397
|
|
|
316
398
|
// @public (undocumented)
|
|
317
|
-
type BoxComponent
|
|
399
|
+
type BoxComponent = <T extends CustomElementType>(
|
|
318
400
|
props: BoxProps<T>,
|
|
319
|
-
) => ReactElement | null
|
|
320
|
-
FC<BoxProps<T>>;
|
|
401
|
+
) => ReactElement | null;
|
|
321
402
|
|
|
322
403
|
// @public (undocumented)
|
|
323
|
-
export type BoxProps<T extends
|
|
404
|
+
export type BoxProps<T extends CustomElementType> = Omit<
|
|
324
405
|
ComponentPropsWithoutRef<T>,
|
|
325
406
|
'as' | 'className'
|
|
326
407
|
> &
|
|
327
408
|
BasePrimitiveProps &
|
|
328
|
-
|
|
409
|
+
BaseBoxProps<T>;
|
|
329
410
|
|
|
330
411
|
// @public
|
|
331
412
|
export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
|
|
@@ -348,6 +429,11 @@ type CSSPseudos = {
|
|
|
348
429
|
[Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
|
|
349
430
|
};
|
|
350
431
|
|
|
432
|
+
// @public (undocumented)
|
|
433
|
+
type CustomElementType<P = any> = {
|
|
434
|
+
[K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
|
|
435
|
+
}[AllowedElements];
|
|
436
|
+
|
|
351
437
|
// @public (undocumented)
|
|
352
438
|
export type Dimension = keyof typeof dimensionMap;
|
|
353
439
|
|
|
@@ -874,6 +960,67 @@ export type StackProps<T extends ElementType = 'div'> = {
|
|
|
874
960
|
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
875
961
|
} & BasePrimitiveProps;
|
|
876
962
|
|
|
963
|
+
// @public (undocumented)
|
|
964
|
+
type SVGElements =
|
|
965
|
+
| 'animate'
|
|
966
|
+
| 'animateMotion'
|
|
967
|
+
| 'animateTransform'
|
|
968
|
+
| 'circle'
|
|
969
|
+
| 'clipPath'
|
|
970
|
+
| 'defs'
|
|
971
|
+
| 'desc'
|
|
972
|
+
| 'ellipse'
|
|
973
|
+
| 'feBlend'
|
|
974
|
+
| 'feColorMatrix'
|
|
975
|
+
| 'feComponentTransfer'
|
|
976
|
+
| 'feComposite'
|
|
977
|
+
| 'feConvolveMatrix'
|
|
978
|
+
| 'feDiffuseLighting'
|
|
979
|
+
| 'feDisplacementMap'
|
|
980
|
+
| 'feDistantLight'
|
|
981
|
+
| 'feDropShadow'
|
|
982
|
+
| 'feFlood'
|
|
983
|
+
| 'feFuncA'
|
|
984
|
+
| 'feFuncB'
|
|
985
|
+
| 'feFuncG'
|
|
986
|
+
| 'feFuncR'
|
|
987
|
+
| 'feGaussianBlur'
|
|
988
|
+
| 'feImage'
|
|
989
|
+
| 'feMerge'
|
|
990
|
+
| 'feMergeNode'
|
|
991
|
+
| 'feMorphology'
|
|
992
|
+
| 'feOffset'
|
|
993
|
+
| 'fePointLight'
|
|
994
|
+
| 'feSpecularLighting'
|
|
995
|
+
| 'feSpotLight'
|
|
996
|
+
| 'feTile'
|
|
997
|
+
| 'feTurbulence'
|
|
998
|
+
| 'filter'
|
|
999
|
+
| 'foreignObject'
|
|
1000
|
+
| 'g'
|
|
1001
|
+
| 'image'
|
|
1002
|
+
| 'line'
|
|
1003
|
+
| 'linearGradient'
|
|
1004
|
+
| 'marker'
|
|
1005
|
+
| 'mask'
|
|
1006
|
+
| 'metadata'
|
|
1007
|
+
| 'mpath'
|
|
1008
|
+
| 'path'
|
|
1009
|
+
| 'pattern'
|
|
1010
|
+
| 'polygon'
|
|
1011
|
+
| 'polyline'
|
|
1012
|
+
| 'radialGradient'
|
|
1013
|
+
| 'rect'
|
|
1014
|
+
| 'stop'
|
|
1015
|
+
| 'svg'
|
|
1016
|
+
| 'switch'
|
|
1017
|
+
| 'symbol'
|
|
1018
|
+
| 'text'
|
|
1019
|
+
| 'textPath'
|
|
1020
|
+
| 'tspan'
|
|
1021
|
+
| 'use'
|
|
1022
|
+
| 'view';
|
|
1023
|
+
|
|
877
1024
|
// @public (undocumented)
|
|
878
1025
|
export type TextColor = keyof typeof textColorMap;
|
|
879
1026
|
|