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 |
|
13 | import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
|
14 | import {CSSProperties} from 'react';
|
15 |
|
16 | type ResponsiveProp<T> = {
|
17 | base?: T,
|
18 | S?: T,
|
19 | M?: T,
|
20 | L?: T,
|
21 | [custom: string]: T | undefined
|
22 | }
|
23 | type Responsive<T> = T | ResponsiveProp<T>
|
24 |
|
25 | export 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/Element/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 |
|
115 | // These support more properties than specific Spectrum components
|
116 | // but still based on spectrum global/alias variables.
|
117 | export interface ViewStyleProps extends StyleProps {
|
118 | /** The background color for the element. */
|
119 | backgroundColor?: Responsive<BackgroundColorValue>,
|
120 |
|
121 | /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
122 | borderWidth?: Responsive<BorderSizeValue>,
|
123 | /** 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). */
|
124 | borderStartWidth?: Responsive<BorderSizeValue>,
|
125 | /** 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). */
|
126 | borderEndWidth?: Responsive<BorderSizeValue>,
|
127 | // borderLeftWidth?: BorderSizeValue,
|
128 | // borderRightWidth?: BorderSizeValue,
|
129 | /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
|
130 | borderTopWidth?: Responsive<BorderSizeValue>,
|
131 | /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
|
132 | borderBottomWidth?: Responsive<BorderSizeValue>,
|
133 | /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
134 | borderXWidth?: Responsive<BorderSizeValue>,
|
135 | /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
136 | borderYWidth?: Responsive<BorderSizeValue>,
|
137 |
|
138 | /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
|
139 | borderColor?: Responsive<BorderColorValue>,
|
140 | /** 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). */
|
141 | borderStartColor?: Responsive<BorderColorValue>,
|
142 | /** 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). */
|
143 | borderEndColor?: Responsive<BorderColorValue>,
|
144 | // borderLeftColor?: BorderColorValue,
|
145 | // borderRightColor?: BorderColorValue,
|
146 | /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
|
147 | borderTopColor?: Responsive<BorderColorValue>,
|
148 | /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
|
149 | borderBottomColor?: Responsive<BorderColorValue>,
|
150 | /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
|
151 | borderXColor?: Responsive<BorderColorValue>,
|
152 | /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
153 | borderYColor?: Responsive<BorderColorValue>,
|
154 |
|
155 | /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
|
156 | borderRadius?: Responsive<BorderRadiusValue>,
|
157 | /** 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). */
|
158 | borderTopStartRadius?: Responsive<BorderRadiusValue>,
|
159 | /** 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). */
|
160 | borderTopEndRadius?: Responsive<BorderRadiusValue>,
|
161 | /** 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). */
|
162 | borderBottomStartRadius?: Responsive<BorderRadiusValue>,
|
163 | /** 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). */
|
164 | borderBottomEndRadius?: Responsive<BorderRadiusValue>,
|
165 | // borderTopLeftRadius?: BorderRadiusValue,
|
166 | // borderTopRightRadius?: BorderRadiusValue,
|
167 | // borderBottomLeftRadius?: BorderRadiusValue,
|
168 | // borderBottomRightRadius?: BorderRadiusValue,
|
169 |
|
170 | /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
171 | padding?: Responsive<DimensionValue>,
|
172 | /** 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). */
|
173 | paddingStart?: Responsive<DimensionValue>,
|
174 | /** 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). */
|
175 | paddingEnd?: Responsive<DimensionValue>,
|
176 | // paddingLeft?: Responsive<DimensionValue>,
|
177 | // paddingRight?: Responsive<DimensionValue>,
|
178 | /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
|
179 | paddingTop?: Responsive<DimensionValue>,
|
180 | /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
|
181 | paddingBottom?: Responsive<DimensionValue>,
|
182 | /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
183 | paddingX?: Responsive<DimensionValue>,
|
184 | /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
185 | paddingY?: Responsive<DimensionValue>,
|
186 |
|
187 | /** 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). */
|
188 | overflow?: Responsive<string>
|
189 | // ...
|
190 | // shadows?
|
191 | // transforms?
|
192 | }
|
193 |
|
194 | export interface BoxAlignmentStyleProps {
|
195 | /**
|
196 | * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
|
197 | * @default 'stretch'
|
198 | */
|
199 | justifyContent?: Responsive<'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
|
200 | /**
|
201 | * The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
|
202 | * @default 'start'
|
203 | */
|
204 | alignContent?: Responsive<'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
|
205 | /**
|
206 | * The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
|
207 | * @default 'stretch'
|
208 | */
|
209 | alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
|
210 | /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
|
211 | gap?: Responsive<DimensionValue>,
|
212 | /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
|
213 | columnGap?: Responsive<DimensionValue>,
|
214 | /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
|
215 | rowGap?: Responsive<DimensionValue>
|
216 | }
|
217 |
|
218 | export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {
|
219 | /**
|
220 | * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
|
221 | * @default 'row'
|
222 | */
|
223 | direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>,
|
224 | /**
|
225 | * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
|
226 | * @default false
|
227 | */
|
228 | wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>
|
229 | }
|
230 |
|
231 | export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
|
232 | /** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
|
233 | areas?: Responsive<string[]>,
|
234 | /** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
|
235 | rows?: Responsive<string | DimensionValue[]>,
|
236 | /** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
|
237 | columns?: Responsive<string | DimensionValue[]>,
|
238 | /** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
|
239 | autoColumns?: Responsive<DimensionValue>,
|
240 | /** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
|
241 | autoRows?: Responsive<DimensionValue>,
|
242 | /** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
|
243 | autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>,
|
244 | /** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
|
245 | 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'>
|
246 | }
|