UNPKG

18.8 kBTypeScriptView Raw
1/*
2 * Copyright 2020 Adobe. All rights reserved.
3 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License. You may obtain a copy
5 * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 *
7 * Unless required by applicable law or agreed to in writing, software distributed under
8 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 * OF ANY KIND, either express or implied. See the License for the specific language
10 * governing permissions and limitations under the License.
11 */
12
13import {BackgroundColorValue, BackgroundColorValueV6, BorderColorValue, BorderColorValueV6, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
14import {CSSProperties} from 'react';
15
16type ResponsiveProp<T> = {
17 base?: T,
18 S?: T,
19 M?: T,
20 L?: T,
21 [custom: string]: T | undefined
22}
23type Responsive<T> = T | ResponsiveProp<T>
24
25export interface StyleProps {
26 // For backward compatibility!
27 /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
28 UNSAFE_className?: string,
29 /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
30 UNSAFE_style?: CSSProperties,
31
32 /** The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
33 margin?: Responsive<DimensionValue>,
34 /** The margin for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start). */
35 marginStart?: Responsive<DimensionValue>,
36 /** The margin for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end). */
37 marginEnd?: Responsive<DimensionValue>,
38 // /** The margin for the left side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginStart` instead for RTL support. */
39 // marginLeft?: Responsive<DimensionValue>,
40 // /** The margin for the right side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginEnd` instead for RTL support. */
41 // marginRight?: Responsive<DimensionValue>,
42 /** The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top). */
43 marginTop?: Responsive<DimensionValue>,
44 /** The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom). */
45 marginBottom?: Responsive<DimensionValue>,
46 /** The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
47 marginX?: Responsive<DimensionValue>,
48 /** The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
49 marginY?: Responsive<DimensionValue>,
50
51 /** The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */
52 width?: Responsive<DimensionValue>,
53 /** The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height). */
54 height?: Responsive<DimensionValue>,
55 /** The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). */
56 minWidth?: Responsive<DimensionValue>,
57 /** The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). */
58 minHeight?: Responsive<DimensionValue>,
59 /** The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). */
60 maxWidth?: Responsive<DimensionValue>,
61 /** The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). */
62 maxHeight?: Responsive<DimensionValue>,
63
64 /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
65 flex?: Responsive<string | number | boolean>,
66 /** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
67 flexGrow?: Responsive<number>,
68 /** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
69 flexShrink?: Responsive<number>,
70 /** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
71 flexBasis?: Responsive<number | string>,
72 /** Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). */
73 justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>, // ...
74 /** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
75 alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>,
76 /** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
77 order?: Responsive<number>,
78
79 /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). */
80 gridArea?: Responsive<string>,
81 /** When used in a grid layout, specifies the column the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column). */
82 gridColumn?: Responsive<string>,
83 /** When used in a grid layout, specifies the row the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row). */
84 gridRow?: Responsive<string>,
85 /** When used in a grid layout, specifies the starting column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start). */
86 gridColumnStart?: Responsive<string>,
87 /** When used in a grid layout, specifies the ending column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end). */
88 gridColumnEnd?: Responsive<string>,
89 /** When used in a grid layout, specifies the starting row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start). */
90 gridRowStart?: Responsive<string>,
91 /** When used in a grid layout, specifies the ending row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end). */
92 gridRowEnd?: Responsive<string>,
93
94 /** Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position). */
95 position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>,
96 /** The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). */
97 zIndex?: Responsive<number>,
98 /** The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top). */
99 top?: Responsive<DimensionValue>,
100 /** The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom). */
101 bottom?: Responsive<DimensionValue>,
102 /** The logical start position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start). */
103 start?: Responsive<DimensionValue>,
104 /** The logical end position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end). */
105 end?: Responsive<DimensionValue>,
106 /** The left position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead for RTL support. */
107 left?: Responsive<DimensionValue>,
108 /** The right position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead for RTL support. */
109 right?: Responsive<DimensionValue>,
110
111 /** Hides the element. */
112 isHidden?: Responsive<boolean>
113}
114
115export type ColorVersion = 5 | 6;
116type BackgroundColor = {
117 5: BackgroundColorValue,
118 6: BackgroundColorValueV6
119};
120
121type BorderColor = {
122 5: BorderColorValue,
123 6: BorderColorValueV6
124}
125
126// These support more properties than specific Spectrum components
127// but still based on spectrum global/alias variables.
128export interface ViewStyleProps<C extends ColorVersion> extends StyleProps {
129 /**
130 * The Spectrum color token version number.
131 * @default 5
132 */
133 colorVersion?: C,
134
135 /** The background color for the element. */
136 backgroundColor?: Responsive<BackgroundColor[C]>,
137
138 /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
139 borderWidth?: Responsive<BorderSizeValue>,
140 /** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */
141 borderStartWidth?: Responsive<BorderSizeValue>,
142 /** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */
143 borderEndWidth?: Responsive<BorderSizeValue>,
144 // borderLeftWidth?: BorderSizeValue,
145 // borderRightWidth?: BorderSizeValue,
146 /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
147 borderTopWidth?: Responsive<BorderSizeValue>,
148 /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
149 borderBottomWidth?: Responsive<BorderSizeValue>,
150 /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
151 borderXWidth?: Responsive<BorderSizeValue>,
152 /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
153 borderYWidth?: Responsive<BorderSizeValue>,
154
155 /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
156 borderColor?: Responsive<BorderColor[C]>,
157 /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
158 borderStartColor?: Responsive<BorderColor[C]>,
159 /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
160 borderEndColor?: Responsive<BorderColor[C]>,
161 // borderLeftColor?: BorderColorValue,
162 // borderRightColor?: BorderColorValue,
163 /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
164 borderTopColor?: Responsive<BorderColor[C]>,
165 /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
166 borderBottomColor?: Responsive<BorderColor[C]>,
167 /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
168 borderXColor?: Responsive<BorderColor[C]>,
169 /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
170 borderYColor?: Responsive<BorderColor[C]>,
171
172 /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
173 borderRadius?: Responsive<BorderRadiusValue>,
174 /** The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius). */
175 borderTopStartRadius?: Responsive<BorderRadiusValue>,
176 /** The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius). */
177 borderTopEndRadius?: Responsive<BorderRadiusValue>,
178 /** The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius). */
179 borderBottomStartRadius?: Responsive<BorderRadiusValue>,
180 /** The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius). */
181 borderBottomEndRadius?: Responsive<BorderRadiusValue>,
182 // borderTopLeftRadius?: BorderRadiusValue,
183 // borderTopRightRadius?: BorderRadiusValue,
184 // borderBottomLeftRadius?: BorderRadiusValue,
185 // borderBottomRightRadius?: BorderRadiusValue,
186
187 /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
188 padding?: Responsive<DimensionValue>,
189 /** The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start). */
190 paddingStart?: Responsive<DimensionValue>,
191 /** The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end). */
192 paddingEnd?: Responsive<DimensionValue>,
193 // paddingLeft?: Responsive<DimensionValue>,
194 // paddingRight?: Responsive<DimensionValue>,
195 /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
196 paddingTop?: Responsive<DimensionValue>,
197 /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
198 paddingBottom?: Responsive<DimensionValue>,
199 /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
200 paddingX?: Responsive<DimensionValue>,
201 /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
202 paddingY?: Responsive<DimensionValue>,
203
204 /** Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). */
205 overflow?: Responsive<string>
206 // ...
207 // shadows?
208 // transforms?
209}
210
211export interface BoxAlignmentStyleProps {
212 /**
213 * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
214 * @default 'stretch'
215 */
216 justifyContent?: Responsive<'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
217 /**
218 * The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
219 * @default 'start'
220 */
221 alignContent?: Responsive<'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
222 /**
223 * The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
224 * @default 'stretch'
225 */
226 alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
227 /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
228 gap?: Responsive<DimensionValue>,
229 /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
230 columnGap?: Responsive<DimensionValue>,
231 /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
232 rowGap?: Responsive<DimensionValue>
233}
234
235export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {
236 /**
237 * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
238 * @default 'row'
239 */
240 direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>,
241 /**
242 * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
243 * @default false
244 */
245 wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>
246}
247
248export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
249 /** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
250 areas?: Responsive<string[]>,
251 /** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
252 rows?: Responsive<string | DimensionValue[]>,
253 /** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
254 columns?: Responsive<string | DimensionValue[]>,
255 /** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
256 autoColumns?: Responsive<DimensionValue>,
257 /** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
258 autoRows?: Responsive<DimensionValue>,
259 /** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
260 autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>,
261 /** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
262 justifyItems?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'left' | 'right' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center'>
263}