1 | /*
|
2 | * Copyright 2020 Ladifire. 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 | export interface StyleProps {
|
17 | // For backward compatibility!
|
18 | /** 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. */
|
19 | UNSAFE_className?: string,
|
20 | /** 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. */
|
21 | UNSAFE_style?: CSSProperties,
|
22 |
|
23 | /** The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
|
24 | margin?: DimensionValue,
|
25 | /** 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). */
|
26 | marginStart?: DimensionValue,
|
27 | /** 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). */
|
28 | marginEnd?: DimensionValue,
|
29 | // /** 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. */
|
30 | // marginLeft?: DimensionValue,
|
31 | // /** 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. */
|
32 | // marginRight?: DimensionValue,
|
33 | /** The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top). */
|
34 | marginTop?: DimensionValue,
|
35 | /** The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom). */
|
36 | marginBottom?: DimensionValue,
|
37 | /** The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
|
38 | marginX?: DimensionValue,
|
39 | /** The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
|
40 | marginY?: DimensionValue,
|
41 |
|
42 | /** The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */
|
43 | width?: DimensionValue,
|
44 | /** The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height). */
|
45 | height?: DimensionValue,
|
46 | /** The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). */
|
47 | minWidth?: DimensionValue,
|
48 | /** The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). */
|
49 | minHeight?: DimensionValue,
|
50 | /** The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). */
|
51 | maxWidth?: DimensionValue,
|
52 | /** The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). */
|
53 | maxHeight?: DimensionValue,
|
54 |
|
55 | /** 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). */
|
56 | flex?: string | number | boolean,
|
57 | /** 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). */
|
58 | flexGrow?: number,
|
59 | /** 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). */
|
60 | flexShrink?: number,
|
61 | /** 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). */
|
62 | flexBasis?: number | string,
|
63 | /** 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). */
|
64 | justifySelf?: 'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch', // ...
|
65 | /** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
|
66 | alignSelf?: 'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch',
|
67 | /** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
|
68 | order?: number,
|
69 |
|
70 | /** 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). */
|
71 | gridArea?: string,
|
72 | /** 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). */
|
73 | gridColumn?: string,
|
74 | /** 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). */
|
75 | gridRow?: string,
|
76 | /** 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). */
|
77 | gridColumnStart?: string,
|
78 | /** 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). */
|
79 | gridColumnEnd?: string,
|
80 | /** 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). */
|
81 | gridRowStart?: string,
|
82 | /** 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). */
|
83 | gridRowEnd?: string,
|
84 |
|
85 | /** Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position). */
|
86 | position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky',
|
87 | /** The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). */
|
88 | zIndex?: number,
|
89 | /** The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top). */
|
90 | top?: DimensionValue,
|
91 | /** The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom). */
|
92 | bottom?: DimensionValue,
|
93 | /** 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). */
|
94 | start?: DimensionValue,
|
95 | /** 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). */
|
96 | end?: DimensionValue,
|
97 | /** 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. */
|
98 | left?: DimensionValue,
|
99 | /** 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. */
|
100 | right?: DimensionValue,
|
101 |
|
102 | /** Hides the element. */
|
103 | isHidden?: boolean
|
104 | }
|
105 |
|
106 | // These support more properties than specific Spectrum components
|
107 | // but still based on spectrum global/alias variables.
|
108 | export interface ViewStyleProps extends StyleProps {
|
109 | /** The background color for the element. */
|
110 | backgroundColor?: string,
|
111 |
|
112 | /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
113 | borderWidth?: BorderSizeValue,
|
114 | /** 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). */
|
115 | borderStartWidth?: BorderSizeValue,
|
116 | /** 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). */
|
117 | borderEndWidth?: BorderSizeValue,
|
118 | // borderLeftWidth?: BorderSizeValue,
|
119 | // borderRightWidth?: BorderSizeValue,
|
120 | /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
|
121 | borderTopWidth?: BorderSizeValue,
|
122 | /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
|
123 | borderBottomWidth?: BorderSizeValue,
|
124 | /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
125 | borderXWidth?: BorderSizeValue,
|
126 | /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
127 | borderYWidth?: BorderSizeValue,
|
128 |
|
129 | /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
|
130 | borderColor?: BorderColorValue,
|
131 | /** 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). */
|
132 | borderStartColor?: BorderColorValue,
|
133 | /** 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). */
|
134 | borderEndColor?: BorderColorValue,
|
135 | // borderLeftColor?: BorderColorValue,
|
136 | // borderRightColor?: BorderColorValue,
|
137 | /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
|
138 | borderTopColor?: BorderColorValue,
|
139 | /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
|
140 | borderBottomColor?: BorderColorValue,
|
141 | /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
|
142 | borderXColor?: BorderColorValue,
|
143 | /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
|
144 | borderYColor?: BorderColorValue,
|
145 |
|
146 | /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
|
147 | borderRadius?: BorderRadiusValue,
|
148 | /** 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). */
|
149 | borderTopStartRadius?: BorderRadiusValue,
|
150 | /** 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). */
|
151 | borderTopEndRadius?: BorderRadiusValue,
|
152 | /** 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). */
|
153 | borderBottomStartRadius?: BorderRadiusValue,
|
154 | /** 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). */
|
155 | borderBottomEndRadius?: BorderRadiusValue,
|
156 | // borderTopLeftRadius?: BorderRadiusValue,
|
157 | // borderTopRightRadius?: BorderRadiusValue,
|
158 | // borderBottomLeftRadius?: BorderRadiusValue,
|
159 | // borderBottomRightRadius?: BorderRadiusValue,
|
160 |
|
161 | /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
162 | padding?: DimensionValue,
|
163 | /** 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). */
|
164 | paddingStart?: DimensionValue,
|
165 | /** 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). */
|
166 | paddingEnd?: DimensionValue,
|
167 | // paddingLeft?: DimensionValue,
|
168 | // paddingRight?: DimensionValue,
|
169 | /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
|
170 | paddingTop?: DimensionValue,
|
171 | /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
|
172 | paddingBottom?: DimensionValue,
|
173 | /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
174 | paddingX?: DimensionValue,
|
175 | /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
|
176 | paddingY?: DimensionValue,
|
177 |
|
178 | /** 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). */
|
179 | overflow?: string
|
180 | // ...
|
181 | // shadows?
|
182 | // transforms?
|
183 | }
|
184 |
|
185 | export interface BoxAlignmentStyleProps {
|
186 | /**
|
187 | * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
|
188 | * @default 'stretch'
|
189 | */
|
190 | justifyContent?: 'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
|
191 | /**
|
192 | * The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
|
193 | * @default 'start'
|
194 | */
|
195 | alignContent?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
|
196 | /**
|
197 | * The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
|
198 | * @default 'stretch'
|
199 | */
|
200 | alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center',
|
201 | /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
|
202 | gap?: DimensionValue,
|
203 | /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
|
204 | columnGap?: DimensionValue,
|
205 | /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
|
206 | rowGap?: DimensionValue
|
207 | }
|
208 |
|
209 | export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {
|
210 | /**
|
211 | * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
|
212 | * @default 'row'
|
213 | */
|
214 | direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse',
|
215 | /**
|
216 | * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
|
217 | * @default false
|
218 | */
|
219 | wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse'
|
220 | }
|
221 |
|
222 | export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
|
223 | /** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
|
224 | areas?: string[],
|
225 | /** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
|
226 | rows?: string | DimensionValue[],
|
227 | /** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
|
228 | columns?: string | DimensionValue[],
|
229 | /** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
|
230 | autoColumns?: DimensionValue,
|
231 | /** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
|
232 | autoRows?: DimensionValue,
|
233 | /** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
|
234 | autoFlow?: 'row' | 'column' | 'row dense' | 'column dense',
|
235 | /** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
|
236 | justifyItems?: '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'
|
237 | }
|