├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── docs
├── aliases.md
├── props.md
├── src
│ └── q-elementary.png
└── theming.md
├── jest.config.js
├── package-lock.json
├── package.json
├── src
├── clear-props.js
├── dict.js
├── dict.test.js
├── index.js
├── modifiers.js
├── modifiers.test.js
├── normalize-props.js
├── normalize-props.test.js
├── styles.js
├── styles.test.js
├── theme.js
├── theme.test.js
├── transformers.js
├── transformers.test.js
└── wrapper.js
└── test
├── __snapshots__
├── sc-ext.test.js.snap
└── sc.test.js.snap
├── flex-box.js
├── flexer-vs-rebass.test.js
├── sc-ext.test.js
└── sc.test.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "test": {
4 | "presets": [["@babel/env", { "loose": true }], "@babel/react"],
5 | "plugins": ["@babel/transform-runtime"]
6 | },
7 | "cjs": {
8 | "presets": [["@babel/env", { "loose": true }]],
9 | "plugins": ["@babel/transform-runtime", "lodash"]
10 | },
11 | "esm": {
12 | "presets": [["@babel/env", { "loose": true, "modules": false }]],
13 | "plugins": [["@babel/transform-runtime", { "useESModules": true }], "lodash"]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["airbnb", "plugin:prettier/recommended"],
3 | "parser": "babel-eslint",
4 | "env": {
5 | "browser": true,
6 | "jasmine": true,
7 | "node": true
8 | },
9 | "globals": {
10 | "test": true
11 | },
12 | "plugins": ["react"],
13 | "rules": {
14 | "react/forbid-prop-types": 0,
15 | "global-require": 0,
16 | "prefer-arrow-callback": 0,
17 | "func-names": 0,
18 | "import/no-extraneous-dependencies": 0,
19 | "no-underscore-dangle": 0,
20 | "no-unused-expressions": 0,
21 | "no-use-before-define": 0,
22 | "react/jsx-filename-extension": 0,
23 | "react/sort-comp": 0,
24 | "react/no-multi-comp": 0,
25 | "react/require-extension": 0,
26 | "react/prefer-stateless-function": 0,
27 | "react/prop-types": 0,
28 | "react/jsx-no-bind": 0,
29 | "react/jsx-closing-bracket-location": 0,
30 | "jsx-a11y/alt-text": 0,
31 | "react/jsx-curly-brace-presence": 0,
32 | "no-return-assign": 0,
33 | "react/no-find-dom-node": 0,
34 | "no-param-reassign": 0,
35 | "consistent-return": 0
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build/*
2 | node_modules/
3 | coverage/
4 | npm-debug.log
5 | .eslintcache
6 | .idea
7 | .vscode
8 | .DS_Store
9 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | demo/
2 | dist/
3 | tests/
4 | test/
5 | src/
6 | .*
7 | docs/
8 | .storybook/
9 | config/
10 | example/
11 | .DS_Store
12 | coverage/
13 | .jest
14 | jest.config.js
15 | logo.jpg
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "useTabs": false,
4 | "semi": true,
5 | "singleQuote": true,
6 | "trailingComma": "all",
7 | "arrowParens": "avoid",
8 | "jsxBracketSameLine": true,
9 | "bracketSpacing": true,
10 | "proseWrap": "preserve",
11 | "overrides": [
12 | {
13 | "files": "package*.json",
14 | "options": {
15 | "useTabs": false,
16 | "tabWidth": 2
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 |
2 | sudo: false
3 | language: node_js
4 | node_js:
5 | - "stable"
6 | cache:
7 | directories:
8 | - ~/.npm
9 | notifications:
10 | email: false
11 | install: npm install
12 | script:
13 | - npm run cover
14 | - npm run build
15 | branches:
16 | only: master
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Eddort
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 | Elementary
5 |
6 | Elementary is a library for creating atomic react components.
7 | Inspired by tachyons and styled-system.
8 |
9 |
10 |
11 | [![Build Status][badge]][travis]
12 | [![Coverage][coverage-badge]][coverage]
13 | [![Version][version-badge]][npm]
14 | ![MIT License][license]
15 |
16 |
17 |
18 | [badge]: https://flat.badgen.net/travis/quarkly/elementary/master
19 | [travis]: https://travis-ci.com/quarkly/elementary
20 | [coverage-badge]: https://flat.badgen.net/codecov/c/github/quarkly/elementary
21 | [coverage]: https://codecov.io/github/quarkly/elementary
22 | [version-badge]: https://flat.badgen.net/npm/v/@quarkly/elementary
23 | [npm]: https://npmjs.com/package/@quarkly/elementary
24 | [license]: https://flat.badgen.net/badge/license/MIT/blue
25 |
26 |
27 |
28 | # Features
29 |
30 | - Any css properties - props
31 | - Simple writing media queries
32 | - Alias system
33 | - Scaling indents and font sizes
34 | - Support hover, focus ..etc as props
35 | - Fully themed
36 | - Mixins support
37 |
38 | # Demo
39 |
40 | - [Codesandbox](https://codesandbox.io/embed/quarklyelementary-demo-jplhn)
41 | - [@quarkly/elements](https://github.com/quarkly/elements)
42 |
43 | # Installation and Usage
44 |
45 | ```sh
46 | npm i @quarkly/elementary
47 | ```
48 |
49 | ```sh
50 | npm i styled-components
51 | ```
52 |
53 | Let's create element:
54 |
55 | ```jsx
56 | import React from 'react';
57 | import ReactDom from 'react-dom';
58 | import elementary from '@quarkly/elementary';
59 |
60 | const Box = elementary.div();
61 |
62 | ReactDom.render(
63 | ,
64 | document.getElementById('root'),
65 | );
66 | ```
67 |
68 | Since Elementary is based on styled-components, the interface may be familiar to you.
69 |
70 | ```jsx
71 | const Box = elementary.div`
72 | border: 2px solid tomato;
73 | `;
74 | ```
75 |
76 | # Advanced usage
77 |
78 | ```jsx
79 | import React from 'react';
80 | import ReactDom from 'react-dom';
81 | import elementary from '@quarkly/elementary';
82 |
83 | const Box = elementary.div({
84 | effects: {
85 | hover: ':hover',
86 | },
87 | variant: 'boxes',
88 | rules: ['height', 'backgroundColor'],
89 | });
90 |
91 | ReactDom.render(
92 | ,
93 | document.getElementById('root'),
94 | );
95 | ```
96 |
97 | First argument is the configuration:
98 |
99 | - rules - an array of css properties that we will use.
100 | - effects - what effects can be used from jsx (hover, focus ..etc)
101 | - variant - options for component styles from themes
102 | - name - componentName and default styles for this component from a theme
103 |
104 | # Docs
105 |
106 | - [Props](docs/props.md)
107 | - [Aliases](docs/aliases.md)
108 | - [Theming](docs/theming.md)
109 |
110 | # License
111 |
112 | Licensed under MIT.
113 |
--------------------------------------------------------------------------------
/docs/aliases.md:
--------------------------------------------------------------------------------
1 | # Aliases
2 |
3 | Elementary aliases are short names for each css rule
4 |
5 | # Table of short names
6 |
7 | | Css rule | Alias |
8 | | --- | --- |
9 | | *margin* | `m` |
10 | | *marginTop* | `mt` |
11 | | *marginRight* | `mr` |
12 | | *marginBottom* | `mb` |
13 | | *marginLeft* | `ml` |
14 | | *padding* | `p` |
15 | | *paddingTop* | `pt` |
16 | | *paddingRight* | `pr` |
17 | | *paddingBottom* | `pb` |
18 | | *paddingLeft* | `pl` |
19 | | *fontSize* | `fz` |
20 | | *color* | `c` |
21 | | *fontFamily* | `ff` |
22 | | *textAlign* | `ta` |
23 | | *lineHeight* | `lh` |
24 | | *fontWeight* | `fw` |
25 | | *fontStyle* | `fs` |
26 | | *letterSpacing* | `lts` |
27 | | *display* | `d` |
28 | | *width* | `w` |
29 | | *maxWidth* | `maw` |
30 | | *minWidth* | `miw` |
31 | | *height* | `h` |
32 | | *maxHeight* | `mah` |
33 | | *minHeight* | `mih` |
34 | | *verticalAlign* | `va` |
35 | | *alignItems* | `ai` |
36 | | *alignContent* | `ac` |
37 | | *justifyItems* | `ji` |
38 | | *justifyContent* | `jc` |
39 | | *flexWrap* | `fxw` |
40 | | *flexBasis* | `fxb` |
41 | | *flexDirection* | `fxd` |
42 | | *flex* | `fx` |
43 | | *justifySelf* | `js` |
44 | | *alignSelf* | `as` |
45 | | *order* | `ord` |
46 | | *border* | `bd` |
47 | | *borderTop* | `bdt` |
48 | | *borderRight* | `bdr` |
49 | | *borderBottom* | `bdb` |
50 | | *borderLeft* | `bdl` |
51 | | *borderColor* | `bdc` |
52 | | *borderRadius* | `bdrs` |
53 | | *boxShadow* | `bxsh` |
54 | | *opacity* | `op` |
55 | | *overflow* | `ov` |
56 | | *background* | `bg` |
57 | | *backgroundColor* | `bgc` |
58 | | *backgroundImage* | `bgi` |
59 | | *backgroundPosition* | `bgp` |
60 | | *backgroundRepeat* | `bgr` |
61 | | *backgroundSize* | `bgsz` |
62 | | *position* | `pos` |
63 | | *zIndex* | `z` |
64 | | *top* | `t` |
65 | | *right* | `r` |
66 | | *bottom* | `b` |
67 | | *left* | `l` |
68 |
--------------------------------------------------------------------------------
/docs/props.md:
--------------------------------------------------------------------------------
1 | # Props
2 |
3 | The list of all elementary styling props.
4 |
5 |
6 | ### Layout
7 |
8 | - [display / d](#display)
9 | - [height / h](#height)
10 | - [minHeight / mih](#minHeight)
11 | - [maxHeight / mah](#maxHeight)
12 | - [width / w](#width)
13 | - [minWidth / miw](#minWidth)
14 | - [maxWidth / maw](#maxWidth)
15 | - [size](#size)
16 | - [verticalAlign](#verticalAlign)
17 |
18 |
19 | ### Spaces
20 |
21 | - [padding / p](#p)
22 | - [paddingTop / pt](#pt)
23 | - [paddingRight / pr](#pr)
24 | - [paddingBottom / pb](#pb)
25 | - [paddingLeft / pl](#pl)
26 | - [paddingX / px](#px)
27 | - [paddingY / py](#py)
28 | - [margin / m](#m)
29 | - [marginTop / mt](#mt)
30 | - [marginRight / mr](#mr)
31 | - [marginBottom / mb](#mb)
32 | - [marginLeft / ml](#ml)
33 | - [marginX / mx](#mx)
34 | - [marginY / my](#my)
35 |
36 |
37 | ### Typography
38 |
39 | - [fontSize / fz](#fontSize)
40 | - [color / c](#color)
41 | - [fontFamily / ff](#fontFamily)
42 | - [fontWeight / fw](#fontWeight)
43 | - [textAlign / ta](#textAlign)
44 | - [lineHeight / lh](#lineHeight)
45 | - [fontStyle / fs](#fontStyle)
46 | - [letterSpacing / lts](#letterSpacing)
47 |
48 |
49 | ### Flex
50 |
51 | - [alignItems / ai](#alignItems)
52 | - [alignContent / ac](#alignContent)
53 | - [justifyItems / ji](#justifyItems)
54 | - [justifyContent / jc](#justifyContent)
55 | - [flexWrap / fxw](#flexWrap)
56 | - [flexBasis / fxb](#flexBasis)
57 | - [flexDirection / fxd](#flexDirection)
58 | - [flex / fx](#flex)
59 | - [order / ord](#order)
60 |
61 |
62 | ### Grid
63 |
64 | - [justifySelf / js](#justifySelf)
65 | - [alignSelf / as](#alignSelf)
66 | - [gridGap](#gridGap)
67 | - [gridColumnGap](#gridColumnGap)
68 | - [gridRowGap](#gridRowGap)
69 | - [gridColumn](#gridColumn)
70 | - [gridRow](#gridRow)
71 | - [gridAutoFlow](#gridAutoFlow)
72 | - [gridAutoColumns](#gridAutoColumns)
73 | - [gridAutoRows](#gridAutoRows)
74 | - [gridTemplateColumns](#gridTemplateColumns)
75 | - [gridTemplateRows](#gridTemplateRows)
76 | - [gridTemplateAreas](#gridTemplateAreas)
77 | - [gridArea](#gridTemplateAreas)
78 |
79 |
80 | ### Background
81 |
82 | - [background / bg](#bg)
83 | - [backgroundColor / bgc](#bgc)
84 | - [backgroundImage / bgi](#background)
85 | - [backgroundSize / bgsz](#backgroundSize)
86 | - [backgroundPosition / bgp](#backgroundPosition)
87 | - [backgroundRepeat / bgr](#backgroundRepeat)
88 |
89 |
90 | ### Misc
91 |
92 | - [border / bd](#border)
93 | - [borderTop / bdt](#borderTop)
94 | - [borderRight / bdr](#borderRight)
95 | - [borderBottom / bdb](#borderBottom)
96 | - [borderLeft / bdl](#borderLeft)
97 | - [borderColor / bdc](#borderColor)
98 | - [borderRadius / bdrs](#borderRadius)
99 | - [opacity / op](#opacity)
100 | - [boxShadow / bxsh](#boxShadow)
101 | - [overflow / ov](#overflow)
102 |
103 |
104 | ### Position
105 |
106 | - [position / pos](#position)
107 | - [top / t](#top)
108 | - [right / r](#right)
109 | - [bottom / b](#bottom)
110 | - [left / l](#left)
111 | - [zIndex / z](#zIndex)
112 |
113 |
114 |
115 |
116 |
117 | ## Reference
118 |
119 |
120 | ### `display`
121 |
122 | This CSS property specifies the display behavior (box rendering type) of an element.
123 |
124 | | Type | Default |
125 | | ------------------------------------------------------------- | :------ |
126 | | oneOf(inline, block, inline-block, flex, grid, none) or array | block |
127 |
128 |
129 | | Value examples | Description |
130 | | ------------------------------------------------ | :---------------------------------------------------------- |
131 | | "inline" | Simple value |
132 | | ["block", "block", "inline", "inline", "inline"] | Value for different breakpoints (sets in theme/breakpoints) |
133 |
134 |
135 | ### `height`
136 |
137 | This CSS property sets the height of an element. The height of an element does not include padding, borders, or margins.
138 |
139 | | Type | Default |
140 | | ----------------------- | :------ |
141 | | string, number or array | auto |
142 |
143 |
144 | | Value examples | Description |
145 | | ----------------------- | :---------------------------------------------------------- |
146 | | "100px" | Value in pixels |
147 | | "40%" | Percentage value |
148 | | "10em" | Value in em |
149 | | "10rem" | Value in rem |
150 | | "10ch" | Value in ch |
151 | | "10ex" | Value in ex |
152 | | "10vh" | Value in vh |
153 | | "10vw" | Value in vw |
154 | | "10vmin" | Value in vmin |
155 | | "10vmax" | Value in vmax |
156 | | "auto" | The browser calculates the height |
157 | | 1/2 | Value in fractions of the parent container |
158 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
159 |
160 |
161 |
162 | ### `minHeight`
163 |
164 | This CSS property defines the minimum height of an element.
165 |
166 | | Type | Default |
167 | | ----------------------- | :------ |
168 | | string, number or array | 0 |
169 |
170 |
171 | | Value examples | Description |
172 | | ----------------------- | :---------------------------------------------------------- |
173 | | "100px" | Value in pixels |
174 | | "40%" | Percentage value |
175 | | "10em" | Value in em |
176 | | "10rem" | Value in rem |
177 | | "10ch" | Value in ch |
178 | | "10ex" | Value in ex |
179 | | "10vh" | Value in vh |
180 | | "10vw" | Value in vw |
181 | | "10vmin" | Value in vmin |
182 | | "10vmax" | Value in vmax |
183 | | 1/2 | Value in fractions of the parent container |
184 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
185 |
186 |
187 |
188 |
189 | ### `maxHeight`
190 |
191 | This CSS property defines the maximum height of an element.
192 |
193 | | Type | Default |
194 | | ----------------------- | :------ |
195 | | string, number or array | none |
196 |
197 |
198 | | Value examples | Description |
199 | | ----------------------- | :---------------------------------------------------------- |
200 | | "100px" | Value in pixels |
201 | | "40%" | Percentage value |
202 | | "10em" | Value in em |
203 | | "10rem" | Value in rem |
204 | | "10ch" | Value in ch |
205 | | "10ex" | Value in ex |
206 | | "10vh" | Value in vh |
207 | | "10vw" | Value in vw |
208 | | "10vmin" | Value in vmin |
209 | | "10vmax" | Value in vmax |
210 | | 1/2 | Value in fractions of the parent container |
211 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
212 |
213 |
214 |
215 |
216 | ### `width`
217 |
218 | This CSS property sets the width of an element. The width of an element does not include padding, borders, or margins.
219 |
220 | | Type | Default |
221 | | ----------------------- | :------ |
222 | | string, number or array | auto |
223 |
224 |
225 | | Value examples | Description |
226 | | ----------------------- | :---------------------------------------------------------- |
227 | | "100px" | Value in pixels |
228 | | "40%" | Percentage value |
229 | | "10em" | Value in em |
230 | | "10rem" | Value in rem |
231 | | "10ch" | Value in ch |
232 | | "10ex" | Value in ex |
233 | | "10vh" | Value in vh |
234 | | "10vw" | Value in vw |
235 | | "10vmin" | Value in vmin |
236 | | "10vmax" | Value in vmax |
237 | | "auto" | The browser calculates the width |
238 | | 1/2 | Value in fractions of the parent container |
239 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
240 |
241 |
242 |
243 |
244 | ### `minWidth`
245 |
246 | This CSS property defines the minimum width of an element.
247 |
248 | | Type | Default |
249 | | ----------------------- | :------ |
250 | | string, number or array | 0 |
251 |
252 |
253 | | Value examples | Description |
254 | | ----------------------- | :---------------------------------------------------------- |
255 | | "100px" | Value in pixels |
256 | | "40%" | Percentage value |
257 | | "10em" | Value in em |
258 | | "10rem" | Value in rem |
259 | | "10ch" | Value in ch |
260 | | "10ex" | Value in ex |
261 | | "10vh" | Value in vh |
262 | | "10vw" | Value in vw |
263 | | "10vmin" | Value in vmin |
264 | | "10vmax" | Value in vmax |
265 | | 1/2 | Value in fractions of the parent container |
266 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
267 |
268 |
269 |
270 | ### `maxWidth`
271 |
272 | This CSS property defines the maximum width of an element.
273 |
274 | | Type | Default |
275 | | ----------------------- | :------ |
276 | | string, number or array | none |
277 |
278 |
279 | | Value examples | Description |
280 | | ----------------------- | :---------------------------------------------------------- |
281 | | "100px" | Value in pixels |
282 | | "40%" | Percentage value |
283 | | "10em" | Value in em |
284 | | "10rem" | Value in rem |
285 | | "10ch" | Value in ch |
286 | | "10ex" | Value in ex |
287 | | "10vh" | Value in vh |
288 | | "10vw" | Value in vw |
289 | | "10vmin" | Value in vmin |
290 | | "10vmax" | Value in vmax |
291 | | 1/2 | Value in fractions of the parent container |
292 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
293 |
294 |
295 |
296 | ### `size`
297 |
298 | This property defines both "width" and "height" CSS properties.
299 |
300 | | Type | Default |
301 | | --------------- | :------ |
302 | | string or array | none |
303 |
304 |
305 | | Value examples | Description |
306 | | ----------------------- | :---------------------------------------------------------- |
307 | | "100px" | Value in pixels |
308 | | "40%" | Percentage value |
309 | | "10em" | Value in em |
310 | | "10rem" | Value in rem |
311 | | "10ch" | Value in ch |
312 | | "10ex" | Value in ex |
313 | | "10vh" | Value in vh |
314 | | "10vw" | Value in vw |
315 | | "10vmin" | Value in vmin |
316 | | "10vmax" | Value in vmax |
317 | | 1/2 | Value in fractions of the parent container |
318 | | [1, 1/2, 2/3, 2/3, 1/3] | Value for diffenent breakpoints (sets in theme/breakpoints) |
319 |
320 |
321 |
322 | ### `verticalAlign`
323 |
324 | This CSS property sets the vertical alignment of an element.
325 |
326 | | Type | Default |
327 | | ----------------------------------------------------------- | :------- |
328 | | oneOf(baseline, text-top, text-bottom, sub, super) or array | baseline |
329 |
330 |
331 | | Value examples | Description |
332 | | ------------------------------------------------------------ | :---------------------------------------------------------- |
333 | | "baseline" | Simple value |
334 | | ["baseline", "baseline", "text-top", "text-top", "text-top"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
335 |
336 |
337 | ### `p`
338 |
339 | The shorthand for the "padding" CSS property. Used to generate space around an element's content, inside of any defined borders.
340 |
341 | | Type | Default |
342 | | ----------------------- | :------ |
343 | | string, number or array | none |
344 |
345 |
346 | | Value examples | Description |
347 | | ---------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
348 | | "100px" | Value in pixels |
349 | | "40%" | Percentage value |
350 | | "10em" | Value in em |
351 | | "10rem" | Value in rem |
352 | | "10ch" | Value in ch |
353 | | "10ex" | Value in ex |
354 | | "10vh" | Value in vh |
355 | | "10vw" | Value in vw |
356 | | "10vmin" | Value in vmin |
357 | | "10vmax" | Value in vmax |
358 | | 5 | Value from theme/scale |
359 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
360 | | "100px, 200px, 300px, 400px" | If four values are specified, they are applied to the top, right, bottom and the left padding respectively in the specified order |
361 | | "100px, 200px, 300px" | If three values are specified, the first value is applied to the top padding, the second value is applied to the right and left padding, and the third is applied to the bottom padding |
362 | | "100px, 200px" | If two values are specified, the first value is applied to the top and bottom paddings, and the second value is applied to the right and left paddings |
363 |
364 |
365 | ### `pt`
366 |
367 | The shorthand for the "padding-top" CSS property.
368 |
369 | | Type | Default |
370 | | ----------------------- | :------ |
371 | | string, number or array | none |
372 |
373 |
374 | | Value examples | Description |
375 | | ----------------- | :---------------------------------------------------------- |
376 | | "100px" | Value in pixels |
377 | | "40%" | Percentage value |
378 | | "10em" | Value in em |
379 | | "10rem" | Value in rem |
380 | | "10ch" | Value in ch |
381 | | "10ex" | Value in ex |
382 | | "10vh" | Value in vh |
383 | | "10vw" | Value in vw |
384 | | "10vmin" | Value in vmin |
385 | | "10vmax" | Value in vmax |
386 | | 5 | Value from theme/scale |
387 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
388 |
389 |
390 | ### `pr`
391 |
392 | The shorthand for the "padding-right" CSS property.
393 |
394 | | Type | Default |
395 | | ----------------------- | :------ |
396 | | string, number or array | none |
397 |
398 |
399 | | Value examples | Description |
400 | | ----------------- | :---------------------------------------------------------- |
401 | | "100px" | Value in pixels |
402 | | "40%" | Percentage value |
403 | | "10em" | Value in em |
404 | | "10rem" | Value in rem |
405 | | "10ch" | Value in ch |
406 | | "10ex" | Value in ex |
407 | | "10vh" | Value in vh |
408 | | "10vw" | Value in vw |
409 | | "10vmin" | Value in vmin |
410 | | "10vmax" | Value in vmax |
411 | | 5 | Value from theme/scale |
412 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
413 |
414 |
415 |
416 | ### `pb`
417 |
418 | The shorthand for the "padding-bottom" CSS property.
419 |
420 | | Type | Default |
421 | | ----------------------- | :------ |
422 | | string, number or array | none |
423 |
424 |
425 | | Value examples | Description |
426 | | ----------------- | :---------------------------------------------------------- |
427 | | "100px" | Value in pixels |
428 | | "40%" | Percentage value |
429 | | "10em" | Value in em |
430 | | "10rem" | Value in rem |
431 | | "10ch" | Value in ch |
432 | | "10ex" | Value in ex |
433 | | "10vh" | Value in vh |
434 | | "10vw" | Value in vw |
435 | | "10vmin" | Value in vmin |
436 | | "10vmax" | Value in vmax |
437 | | 5 | Value from theme/scale |
438 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
439 |
440 |
441 |
442 | ### `pl`
443 |
444 | The shorthand for the "padding-left" CSS property.
445 |
446 | | Type | Default |
447 | | ----------------------- | :------ |
448 | | string, number or array | none |
449 |
450 |
451 | | Value examples | Description |
452 | | ----------------- | :---------------------------------------------------------- |
453 | | "100px" | Value in pixels |
454 | | "40%" | Percentage value |
455 | | "10em" | Value in em |
456 | | "10rem" | Value in rem |
457 | | "10ch" | Value in ch |
458 | | "10ex" | Value in ex |
459 | | "10vh" | Value in vh |
460 | | "10vw" | Value in vw |
461 | | "10vmin" | Value in vmin |
462 | | "10vmax" | Value in vmax |
463 | | 5 | Value from theme/scale |
464 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
465 |
466 |
467 |
468 | ### `px`
469 |
470 | Both "padding-right" and "padding-left" (x-axis) CSS properties.
471 |
472 | | Type | Default |
473 | | ----------------------- | :------ |
474 | | string, number or array | none |
475 |
476 |
477 | | Value examples | Description |
478 | | ----------------- | :---------------------------------------------------------- |
479 | | "100px" | Value in pixels |
480 | | "40%" | Percentage value |
481 | | "10em" | Value in em |
482 | | "10rem" | Value in rem |
483 | | "10ch" | Value in ch |
484 | | "10ex" | Value in ex |
485 | | "10vh" | Value in vh |
486 | | "10vw" | Value in vw |
487 | | "10vmin" | Value in vmin |
488 | | "10vmax" | Value in vmax |
489 | | 5 | Value from theme/scale |
490 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
491 |
492 |
493 |
494 | ### `py`
495 |
496 | This property defines both "padding-top" and "padding-bottom" (y-axis) CSS properties.
497 |
498 | | Type | Default |
499 | | ----------------------- | :------ |
500 | | string, number or array | none |
501 |
502 |
503 | | Value examples | Description |
504 | | ----------------- | :---------------------------------------------------------- |
505 | | "100px" | Value in pixels |
506 | | "40%" | Percentage value |
507 | | "10em" | Value in em |
508 | | "10rem" | Value in rem |
509 | | "10ch" | Value in ch |
510 | | "10ex" | Value in ex |
511 | | "10vh" | Value in vh |
512 | | "10vw" | Value in vw |
513 | | "10vmin" | Value in vmin |
514 | | "10vmax" | Value in vmax |
515 | | 5 | Value from theme/scale |
516 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
517 |
518 |
519 |
520 | ### `m`
521 |
522 | The shorthand for the "margin" CSS property. Used to set the margins for an element, outside of any defined borders.
523 |
524 | | Type | Default |
525 | | ----------------------- | :------ |
526 | | string, number or array | none |
527 |
528 |
529 | | Value examples | Description |
530 | | ---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
531 | | "100px" | Value in pixels |
532 | | "40%" | Percentage value |
533 | | "10em" | Value in em |
534 | | "10rem" | Value in rem |
535 | | "10ch" | Value in ch |
536 | | "10ex" | Value in ex |
537 | | "10vh" | Value in vh |
538 | | "10vw" | Value in vw |
539 | | "10vmin" | Value in vmin |
540 | | "10vmax" | Value in vmax |
541 | | 5 | Value from theme/scale |
542 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
543 | | "100px, 200px, 300px, 400px" | The four-value syntax: first for top margin, second for right margin, third for bottom margin, fourth for left margin |
544 | | "100px, 200px, 300px" | The three-value syntax: first for top margin, second for right and left margins, third for bottom margin |
545 | | "100px, 200px" | The two-value syntax: first for top and bottom margins, second for right and left margins |
546 |
547 |
548 |
549 | ### `mt`
550 |
551 | The shorthand for the "margin-top" CSS property.
552 |
553 | | Type | Default |
554 | | ----------------------- | :------ |
555 | | string, number or array | none |
556 |
557 |
558 | | Value examples | Description |
559 | | ----------------- | :---------------------------------------------------------- |
560 | | "100px" | Value in pixels |
561 | | "40%" | Percentage value |
562 | | "10em" | Value in em |
563 | | "10rem" | Value in rem |
564 | | "10ch" | Value in ch |
565 | | "10ex" | Value in ex |
566 | | "10vh" | Value in vh |
567 | | "10vw" | Value in vw |
568 | | "10vmin" | Value in vmin |
569 | | "10vmax" | Value in vmax |
570 | | 5 | Value from theme/scale |
571 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
572 |
573 |
574 |
575 | ### `mr`
576 |
577 | The shorthand for the "margin-right" CSS property.
578 |
579 | | Type | Default |
580 | | ----------------------- | :------ |
581 | | string, number or array | none |
582 |
583 |
584 | | Value examples | Description |
585 | | ----------------- | :---------------------------------------------------------- |
586 | | "100px" | Value in pixels |
587 | | "40%" | Percentage value |
588 | | "10em" | Value in em |
589 | | "10rem" | Value in rem |
590 | | "10ch" | Value in ch |
591 | | "10ex" | Value in ex |
592 | | "10vh" | Value in vh |
593 | | "10vw" | Value in vw |
594 | | "10vmin" | Value in vmin |
595 | | "10vmax" | Value in vmax |
596 | | 5 | Value from theme/scale |
597 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
598 |
599 |
600 |
601 | ### `mb`
602 |
603 | The shorthand for the "margin-bottom" CSS property.
604 |
605 | | Type | Default |
606 | | ----------------------- | :------ |
607 | | string, number or array | none |
608 |
609 |
610 | | Value examples | Description |
611 | | ----------------- | :---------------------------------------------------------- |
612 | | "100px" | Value in pixels |
613 | | "40%" | Percentage value |
614 | | "10em" | Value in em |
615 | | "10rem" | Value in rem |
616 | | "10ch" | Value in ch |
617 | | "10ex" | Value in ex |
618 | | "10vh" | Value in vh |
619 | | "10vw" | Value in vw |
620 | | "10vmin" | Value in vmin |
621 | | "10vmax" | Value in vmax |
622 | | 5 | Value from theme/scale |
623 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
624 |
625 |
626 |
627 | ### `ml`
628 |
629 | The shorthand for the "margin-left" CSS property.
630 |
631 | | Type | Default |
632 | | ----------------------- | :------ |
633 | | string, number or array | none |
634 |
635 |
636 | | Value examples | Description |
637 | | ----------------- | :---------------------------------------------------------- |
638 | | "100px" | Value in pixels |
639 | | "40%" | Percentage value |
640 | | "10em" | Value in em |
641 | | "10rem" | Value in rem |
642 | | "10ch" | Value in ch |
643 | | "10ex" | Value in ex |
644 | | "10vh" | Value in vh |
645 | | "10vw" | Value in vw |
646 | | "10vmin" | Value in vmin |
647 | | "10vmax" | Value in vmax |
648 | | 5 | Value from theme/scale |
649 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
650 |
651 |
652 |
653 | ### `mx`
654 |
655 | This property defines both are "margin-right" and "margin-left" (x-axis) CSS properties.
656 |
657 | | Type | Default |
658 | | ----------------------- | :------ |
659 | | string, number or array | none |
660 |
661 |
662 | | Value examples | Description |
663 | | ----------------- | :---------------------------------------------------------- |
664 | | "100px" | Value in pixels |
665 | | "40%" | Percentage value |
666 | | "10em" | Value in em |
667 | | "10rem" | Value in rem |
668 | | "10ch" | Value in ch |
669 | | "10ex" | Value in ex |
670 | | "10vh" | Value in vh |
671 | | "10vw" | Value in vw |
672 | | "10vmin" | Value in vmin |
673 | | "10vmax" | Value in vmax |
674 | | 5 | Value from theme/scale |
675 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
676 |
677 |
678 |
679 | ### `my`
680 |
681 | Both are "margin-top" and "margin-bottom" (x-axis) CSS properties.
682 |
683 | | Type | Default |
684 | | ----------------------- | :------ |
685 | | string, number or array | none |
686 |
687 |
688 | | Value examples | Description |
689 | | ----------------- | :---------------------------------------------------------- |
690 | | "100px" | Value in pixels |
691 | | "40%" | Percentage value |
692 | | "10em" | Value in em |
693 | | "10rem" | Value in rem |
694 | | "10ch" | Value in ch |
695 | | "10ex" | Value in ex |
696 | | "10vh" | Value in vh |
697 | | "10vw" | Value in vw |
698 | | "10vmin" | Value in vmin |
699 | | "10vmax" | Value in vmax |
700 | | 5 | Value from theme/scale |
701 | | [5, 5, 6, 6, 6] | Value for diffenent breakpoints (sets in theme/breakpoints) |
702 |
703 |
704 |
705 | ### `fontSize`
706 |
707 | This CSS property sets the size of a font.
708 |
709 | | Type | Default |
710 | | ----------------------------------------------------------------------------------------------------------------------------- | :------ |
711 | | oneOf(medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, initial, inherit), string, number or array | medium |
712 |
713 |
714 | | Value examples | Description |
715 | | ---------------------------------------- | :---------------------------------------------------------- |
716 | | "medium" | Value is a predefined name |
717 | | "40%" | Percentage value |
718 | | "10em" | Value in em |
719 | | "10rem" | Value in rem |
720 | | "10ch" | Value in ch |
721 | | "10ex" | Value in ex |
722 | | "10vh" | Value in vh |
723 | | "10vw" | Value in vw |
724 | | "10vmin" | Value in vmin |
725 | | "10vmax" | Value in vmax |
726 | | 5 | Value from theme/fontSizes |
727 | | ["12px", "14px", "16px", "18px", "20px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
728 |
729 |
730 |
731 | ### `color`
732 |
733 | This CSS property specifies the color of the text.
734 | Colors can be specified by the following methods:
735 | - Hexadecimal colors (`#0000ff`)
736 | - RGB colors (`rgb(0, 0, 255)`)
737 | - RGBA colors (`rgba(0, 0, 255, 0.3)`)
738 | - HSL colors (`hsl(120, 100%, 25%)`)
739 | - HSLA colors (`hsla(120, 100%, 25%, 0.3)`)
740 | - Predefined/Cross-browser color names (`darkblue`)
741 | - Theme variable (`primary`)
742 |
743 | | Type | Default |
744 | | --------------- | :-------------- |
745 | | string or array | *not specified* |
746 |
747 |
748 | | Value examples | Description |
749 | | ------------------------------------------------------------- | :---------------------------------------------------------- |
750 | | "#0000ff" | Value in hexadecimal colors |
751 | | "rgb(0, 0, 255)" | Value in RGB colors |
752 | | "rgba(0, 0, 255, 0.3)" | Value in RGBA colors |
753 | | "hsl(120, 100%, 25%)" | Value in HSL colors |
754 | | "hsla(120, 100%, 25%, 0.3)" | Value in ch |
755 | | "darkblue" | Value is a predefined name |
756 | | "primary" | Value from theme/colors |
757 | | ["primary", "red", "rgb(0, 0, 255)", "yellow-l3", "green-d2"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
758 |
759 |
760 |
761 | ### `fontFamily`
762 |
763 | This CSS property specifies the font for an element.
764 |
765 | | Type | Default |
766 | | --------------- | :----------------------- |
767 | | string or array | *depends on the browser* |
768 |
769 |
770 | | Value examples | Description |
771 | | ------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- |
772 | | "times" | Value is the name of a font-family |
773 | | "sans-serif" | Value is the name of a generic font family. |
774 | | "'Times New Roman', Times, serif" | Value contains several font names that act as a "fallback" system. If the browser does not support the first font, it tries the next font |
775 | | "sans-heavy" | Value from theme/fonts |
776 | | ["sans-serif", "sans-serif", "serif", "serif", "serif"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
777 |
778 |
779 |
780 | ### `fontWeight`
781 |
782 | This CSS property sets how thick or thin characters in text should be displayed.
783 |
784 | | Type | Default |
785 | | ------------------------------------------------------------------------------------------------------------- | :------ |
786 | | oneOf(normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, initial, inherit), or array | normal |
787 |
788 |
789 | | Value examples | Description |
790 | | ------------------------- | :---------------------------------------------------------- |
791 | | "normal" | Value is a predefined name |
792 | | 500 | Weight numeric value |
793 | | [700, 600, 500, 400, 300] | Value for diffenent breakpoints (sets in theme/breakpoints) |
794 |
795 |
796 |
797 | ### `textAlign`
798 |
799 | This CSS property specifies the horizontal alignment of text in an element.
800 |
801 | | Type | Default |
802 | | --------------------------------------------------------------- | :-------------- |
803 | | oneOf(left, right, center, justify, initial, inherit), or array | left *or* right |
804 |
805 |
806 | | Value examples | Description |
807 | | -------------------------------------------- | :---------------------------------------------------------- |
808 | | "left" | Value is a predefined name |
809 | | ["center", "center", "left", "left", "left"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
810 |
811 |
812 |
813 |
814 | ### `lineHeight`
815 |
816 | This CSS property specifies the height of a line.
817 | It can be specified in number, length or percentage.
818 |
819 | | Type | Default |
820 | | -------------------------- | :------ |
821 | | "normal", string, or array | normal |
822 |
823 |
824 | | Value examples | Description |
825 | | --------------------------- | :---------------------------------------------------------- |
826 | | "normal" | Value is a predefined name |
827 | | "1.6" | Numeric values |
828 | | "100px" | Value in pixels |
829 | | "40%" | Percentage value |
830 | | "10em" | Value in em |
831 | | "10rem" | Value in rem |
832 | | "10ch" | Value in ch |
833 | | "10ex" | Value in ex |
834 | | "10vh" | Value in vh |
835 | | "10vw" | Value in vw |
836 | | "10vmin" | Value in vmin |
837 | | "10vmax" | Value in vmax |
838 | | ["1", "1", "1.6", "2", "2"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
839 |
840 |
841 |
842 | ### `fontStyle`
843 |
844 | This CSS property specifies the font style of the text.
845 | It can be specified in number, length or percentage.
846 |
847 | | Type | Default |
848 | | ---------------------------------------------------------- | :------ |
849 | | oneOf(normal, italic, oblique, initial, inherit), or array | normal |
850 |
851 |
852 | | Value examples | Description |
853 | | -------------------------------------------------- | :---------------------------------------------------------- |
854 | | "normal" | Value is a predefined name |
855 | | ["normal", "normal", "normal", "italic", "italic"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
856 |
857 |
858 |
859 | ### `letterSpacing`
860 |
861 | This CSS property increases or decreases the space between characters in the text.
862 | It can be specified in number, length or percentage.
863 |
864 | | Type | Default |
865 | | ------------------------------------------------- | :------ |
866 | | oneOf(normal, initial, inherit), string, or array | normal |
867 |
868 |
869 | | Value examples | Description |
870 | | -------------------------------------------------- | :---------------------------------------------------------- |
871 | | "normal" | Value is a predefined name |
872 | | "2px" | Value in pixels |
873 | | ["normal", "normal", "normal", "italic", "italic"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
874 |
875 |
876 |
877 |
878 | ### `alignItems`
879 |
880 | This CSS property specifies the default alignment for items inside the flexible container.
881 |
882 | | Type | Default |
883 | | --------------------------------------------------------------------------------- | :------ |
884 | | oneOf(stretch, center, flex-start, flex-end, baseline, initial, inherit) or array | stretch |
885 |
886 |
887 | | Value examples | Description |
888 | | -------------------------------------------------------------- | :---------------------------------------------------------- |
889 | | "stretch" | Value is a predefined name |
890 | | ["center", "center", "flex-start", "flex-start", "flex-start"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
891 |
892 |
893 |
894 | ### `alignContent`
895 |
896 | This CSS property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items it aligns flex lines. There must be multiple lines of items for this property to have any effect!
897 |
898 | | Type | Default |
899 | | ---------------------------------------------------------------------------------------------------- | :------ |
900 | | oneOf(stretch, center, flex-start, flex-end, space-between, space-around, initial, inherit) or array | stretch |
901 |
902 |
903 | | Value examples | Description |
904 | | -------------------------------------------------------------- | :---------------------------------------------------------- |
905 | | "stretch" | Value is a predefined name |
906 | | ["center", "center", "flex-start", "flex-start", "flex-start"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
907 |
908 |
909 |
910 | ### `justifyItems`
911 |
912 | This CSS property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
913 |
914 | | Type | Default |
915 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
916 | | oneOf(auto, normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, left, right, baseline, first baseline, last baseline, safe center, unsafe center, legacy right, legacy left, legacy center, inherit, initial, unset) or array | none |
917 |
918 |
919 | | Value examples | Description |
920 | | -------------------------------------------------------------- | :---------------------------------------------------------- |
921 | | "stretch" | Value is a predefined name |
922 | | ["center", "center", "flex-start", "flex-start", "flex-start"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
923 |
924 |
925 |
926 | ### `justifyContent`
927 |
928 | This CSS property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
929 |
930 | | Type | Default |
931 | | ------------------------------------------------------------------------------------------- | :--------- |
932 | | oneOf(flex-start, flex-end, center, space-between, space-around, initial, inherit) or array | flex-start |
933 |
934 |
935 | | Value examples | Description |
936 | | -------------------------------------------------------------- | :---------------------------------------------------------- |
937 | | "center" | Value is a predefined name |
938 | | ["center", "center", "flex-start", "flex-start", "flex-start"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
939 |
940 |
941 |
942 | ### `flexWrap`
943 |
944 | This CSS property specifies whether the flexible items should wrap or not.
945 |
946 | | Type | Default |
947 | | ------------------------------------------------------------ | :------ |
948 | | oneOf(nowrap, wrap, wrap-reverse, initial, inherit) or array | nowrap |
949 |
950 |
951 | | Value examples | Description |
952 | | ---------------------------------------------- | :---------------------------------------------------------- |
953 | | "wrap" | Value is a predefined name |
954 | | ["wrap", "wrap", "nowrap", "nowrap", "nowrap"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
955 |
956 |
957 |
958 | ### `flexBasis`
959 |
960 | This CSS property specifies the initial length of a flexible item.
961 |
962 | | Type | Default |
963 | | --------------- | :------ |
964 | | number or array | 0 |
965 |
966 |
967 | | Value examples | Description |
968 | | ------------------------- | :---------------------------------------------------------- |
969 | | "1" | Numeric value |
970 | | "100px" | Value in pixels |
971 | | "40%" | Percentage value |
972 | | "10em" | Value in em |
973 | | "10rem" | Value in rem |
974 | | "10ch" | Value in ch |
975 | | "10ex" | Value in ex |
976 | | "10vh" | Value in vh |
977 | | "10vw" | Value in vw |
978 | | "10vmin" | Value in vmin |
979 | | "10vmax" | Value in vmax |
980 | | ["1", "1", "2", "2", "2"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
981 |
982 |
983 |
984 | ### `flexDirection`
985 |
986 | This CSS property specifies the direction of the flexible items.
987 |
988 | | Type | Default |
989 | | -------------------------------------------------------------------------- | :------ |
990 | | oneOf(row, row-reverse, column, column-reverse, initial, inherit) or array | row |
991 |
992 |
993 | | Value examples | Description |
994 | | -------------------------------------------- | :---------------------------------------------------------- |
995 | | "row" | Value is a predefined name |
996 | | ["column", "column", "column", "row", "row"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
997 |
998 |
999 |
1000 | ### `flex`
1001 |
1002 | This CSS property is a shorthand property for: flex-grow, flex-shrink, flex-basis.
1003 |
1004 | | Type | Default |
1005 | | --------------- | :------- |
1006 | | string or array | 0 1 auto |
1007 |
1008 |
1009 | | Value examples | Description |
1010 | | ---------------------------------------------------- | :----------------------------------------------------------- |
1011 | | "auto" | Value is a predefined name |
1012 | | "0 1 auto" | Value is a group of flex-grow flex-shrink and flex-basis values |
1013 | | ["1 1 auto", "1 1 auto", "1 1 auto", "auto", "auto"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1014 |
1015 |
1016 |
1017 |
1018 | ### `order`
1019 |
1020 | This CSS property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
1021 |
1022 | | Type | Default |
1023 | | --------------- | :------ |
1024 | | number or array | 0 |
1025 |
1026 |
1027 | | Value examples | Description |
1028 | | ------------------------- | :---------------------------------------------------------- |
1029 | | "0" | Numeric value |
1030 | | ["0", "0", "1", "1", "1"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1031 |
1032 |
1033 |
1034 |
1035 | ### `justifySelf`
1036 |
1037 | This CSS property sets the way a box is justified inside its alignment container along the appropriate axis.
1038 |
1039 | | Type | Default |
1040 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
1041 | | oneOf(auto, normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, left, right, baseline, first baseline, last baseline, safe center, unsafe center, legacy right, legacy left, legacy center, inherit, initial, unset) or array | auto |
1042 |
1043 |
1044 |
1045 | ### `alignSelf`
1046 |
1047 | This CSS property overrides the grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
1048 |
1049 | | Type | Default |
1050 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
1051 | | oneOf(auto, normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, left, right, baseline, first baseline, last baseline, safe center, unsafe center, legacy right, legacy left, legacy center, inherit, initial, unset) or array | auto |
1052 |
1053 |
1054 |
1055 | ### `gridGap`
1056 |
1057 | It is a shorthand for row-gap and column-gap.
1058 |
1059 | **Syntax**: there are three different syntaxes you can use with this property:
1060 |
1061 | 1. the one-value syntax for both row and column in any CSS units ("20px", "3vmin", "100%", e.g.),
1062 | 2. the two-value syntax: first row, second column in any CSS units ("20px 10px", "3vmin 2vmax", "21px 82%", e.g.),
1063 | 3. global values (inherit, initial, unset)
1064 |
1065 | | Type | Default |
1066 | | --------------- | :------ |
1067 | | string or array | normal |
1068 |
1069 |
1070 | ### `gridColumnGap`
1071 |
1072 | This CSS property sets the size of the gap (gutter) between the element's columns.
1073 |
1074 | | Type | Default |
1075 | | ------------------------------------------------------ | :------ |
1076 | | oneOf(normal, inherit, initial, unset) string or array | normal |
1077 |
1078 |
1079 |
1080 | ### `gridRowGap`
1081 |
1082 | This CSS property sets the size of the gap (gutter) between an element's grid rows.
1083 |
1084 | | Type | Default |
1085 | | ------------------------------------------------------ | :------ |
1086 | | oneOf(normal, inherit, initial, unset) string or array | normal |
1087 |
1088 |
1089 |
1090 |
1091 | ### `gridColumn`
1092 |
1093 | This is a shorthand property for grid-column-start and grid-column-end.
1094 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
1095 |
1096 | | Type | Default |
1097 | | --------------- | :------ |
1098 | | string or array | auto |
1099 |
1100 |
1101 |
1102 |
1103 | ### `gridRow`
1104 |
1105 | This is a shorthand property for grid-row-start and grid-row-end.
1106 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
1107 |
1108 | | Type | Default |
1109 | | --------------- | :------ |
1110 | | string or array | auto |
1111 |
1112 |
1113 |
1114 |
1115 | ### `gridAutoFlow`
1116 |
1117 | This CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
1118 |
1119 | | Type | Default |
1120 | | ------------------------------------------------------------------------------------ | :------ |
1121 | | oneOf(row, column, dense, row dense, column dense, inherit, initial, unset) or array | row |
1122 |
1123 |
1124 |
1125 | ### `gridAutoColumns`
1126 |
1127 | This CSS property specifies the size of an implicitly-created grid column track.
1128 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
1129 |
1130 | | Type | Default |
1131 | | --------------- | :------ |
1132 | | string or array | auto |
1133 |
1134 |
1135 |
1136 |
1137 | ### `gridAutoRows`
1138 |
1139 | This CSS property specifies the size of an implicitly-created grid row track.
1140 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
1141 |
1142 | | Type | Default |
1143 | | --------------- | :------ |
1144 | | string or array | auto |
1145 |
1146 |
1147 |
1148 |
1149 | ### `gridTemplateColumns`
1150 |
1151 | This CSS property defines the line names and track sizing functions of the grid columns.
1152 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
1153 |
1154 | | Type | Default |
1155 | | --------------- | :------ |
1156 | | string or array | none |
1157 |
1158 |
1159 |
1160 |
1161 | ### `gridTemplateRows`
1162 |
1163 | This CSS property defines the line names and track sizing functions of the grid rows.
1164 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
1165 |
1166 | | Type | Default |
1167 | | --------------- | :------ |
1168 | | string or array | none |
1169 |
1170 |
1171 |
1172 |
1173 | ### `gridTemplateAreas`
1174 |
1175 | This CSS property specifies named grid areas.
1176 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
1177 |
1178 | | Type | Default |
1179 | | --------------- | :------ |
1180 | | string or array | none |
1181 |
1182 |
1183 |
1184 |
1185 | ### `gridArea`
1186 |
1187 | This is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
1188 | [Read about syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
1189 |
1190 | | Type | Default |
1191 | | --------------- | :------ |
1192 | | string or array | auto |
1193 |
1194 |
1195 |
1196 | ### `background`
1197 |
1198 | This is a shorthand property for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment.
1199 |
1200 | **Syntax**: background="bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment"
1201 |
1202 | | Type | Default |
1203 | | --------------- | :--------- |
1204 | | string or array | individual |
1205 |
1206 |
1207 | | Value examples | Description |
1208 | | ---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1209 | | "lightblue url('image.jpg') center center cover no-repeat padding-box content-box fixed" | Value is a group of values for properties in the following order: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment |
1210 |
1211 |
1212 | ### `bgc`
1213 |
1214 | The shorthand for the "background-color" CSS property.
1215 |
1216 | | Type | Default |
1217 | | --------------- | :------ |
1218 | | string or array | none |
1219 |
1220 |
1221 | | Value examples | Description |
1222 | | ------------------------------------------------------------- | :---------------------------------------------------------- |
1223 | | "#0000ff" | Value in hexadecimal colors |
1224 | | "rgb(0, 0, 255)" | Value in RGB colors |
1225 | | "rgba(0, 0, 255, 0.3)" | Value in RGBA colors |
1226 | | "hsl(120, 100%, 25%)" | Value in HSL colors |
1227 | | "hsla(120, 100%, 25%, 0.3)" | Value in ch |
1228 | | "darkblue" | Value is a predefined name |
1229 | | "primary" | Value from theme/colors |
1230 | | ["primary", "red", "rgb(0, 0, 255)", "yellow-l3", "green-d2"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1231 |
1232 |
1233 |
1234 |
1235 | ### `backgroundImage`
1236 |
1237 | This CSS property sets one or more background images for an element.
1238 |
1239 | **Syntax**: backgroundColor="url(firstImage.png), url(secondImage.png)"
1240 |
1241 | | Type | Default |
1242 | | --------------- | :------ |
1243 | | string or array | none |
1244 |
1245 |
1246 | | Value examples | Description |
1247 | | ----------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
1248 | | "url(image1.jpg), url(image2.jpg)" | Value is the two image URLs |
1249 | | ["url(image1.jpg)", "url(image2.jpg)", "url(image3.jpg)", "url(image4.jpg)", "url(image5.jpg)"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1250 |
1251 |
1252 |
1253 |
1254 | ### `backgroundSize`
1255 |
1256 | This CSS property specifies the size of the background images.
1257 |
1258 | **Syntax**: there are four different syntaxes you can use with this property:
1259 |
1260 | 1. the keyword syntax ("auto", "cover" and "contain"),
1261 | 2. the one-value syntax (sets the width of the image (height becomes "auto"),
1262 | 3. the two-value syntax (first value: width of the image, second value: height),
1263 | 4. the multiple background syntax (separated with comma).
1264 |
1265 | | Type | Default |
1266 | | -------------------------------------------------------------- | :------ |
1267 | | oneOf(auto, cover, contain, initial, inherit), string or array | auto |
1268 |
1269 |
1270 | | Value examples | Description |
1271 | | ------------------------------------------------- | :------------------------------------------------------------------ |
1272 | | "auto" | Value is a predefined name |
1273 | | "100px" | Value in pixels |
1274 | | "50%" | Percentage value |
1275 | | "10em" | Value in em |
1276 | | "10rem" | Value in rem |
1277 | | "10ch" | Value in ch |
1278 | | "10ex" | Value in ex |
1279 | | "10vh" | Value in vh |
1280 | | "10vw" | Value in vw |
1281 | | "10vmin" | Value in vmin |
1282 | | "10vmax" | Value in vmax |
1283 | | "10px 150px" | The two-value syntax: first for width, second for height |
1284 | | ["cover", "cover", "cover", "contain", "contain"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1285 |
1286 |
1287 |
1288 | ### `backgroundPosition`
1289 |
1290 | This CSS property sets the starting position of a background image.
1291 |
1292 | **Syntax**: there are three different syntaxes you can use with this property:
1293 |
1294 | 1. the keyword syntax ("left top", "left center", e.g.),
1295 | 2. the two-value syntax in percentages (the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%),
1296 | 3. the two-value syntax in any CSS units(the first value is the horizontal position and the second value is the vertical. The top left corner is 0 0).
1297 |
1298 | | Type | Default |
1299 | | ------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
1300 | | oneOf(left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom), string or array | 0% 0% |
1301 |
1302 |
1303 | | Value examples | Description |
1304 | | -------------------------------------------------------- | :--------------------------------------------------------------------------------------------- |
1305 | | "left top" | The two-value syntax in predefined names: the first is for horizontal, the second is for vertical |
1306 | | "25% 75%" | The two-value syntax in percentages: the first is for horizontal, the second is for vertical |
1307 | | "50px 150px" | The two-value syntax in pixels: the first is for horizontal, the second is for vertical |
1308 | | ["left top", "left top", "left top", "center", "center"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1309 |
1310 |
1311 |
1312 | ### `backgroundRepeat`
1313 |
1314 | This CSS property sets if/how a background image will be repeated.
1315 |
1316 | | Type | Default |
1317 | | ------------------------------------------------------------------------------------- | :------ |
1318 | | oneOf(repeat, repeat-x, repeat-y, no-repeat, space, round, initial, inherit) or array | repeat |
1319 |
1320 |
1321 | | Value examples | Description |
1322 | | ----------------------------------------------------- | :---------------------------------------------------------- |
1323 | | "repeat" | Value is a predefined name |
1324 | | ["repeat", "repeat-x", "no-repeat", "space", "round"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1325 |
1326 |
1327 |
1328 |
1329 | ### `border`
1330 |
1331 | It is a shorthand property for: border-width, border-style (required), border-color.
1332 |
1333 | | Type | Default |
1334 | | --------------- | :---------------- |
1335 | | string or array | medium none color |
1336 |
1337 |
1338 | | Value examples | Description |
1339 | | ------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------- |
1340 | | "2px solid blue" | The three-value syntax: first for border-width, second for border-style, third for border-color |
1341 | | ["2px solid blue", "2px solid blue", "3px solid blue", "3px solid blue", "4px solid blue"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1342 |
1343 |
1344 |
1345 |
1346 | ### `borderTop`
1347 |
1348 | This is a shorthand property that sets all the top border properties in one declaration. The properties that can be set must be in the following order: border-top-width, border-top-style (required), border-top-color.
1349 |
1350 | | Type | Default |
1351 | | --------------- | :---------------- |
1352 | | string or array | medium none color |
1353 |
1354 |
1355 | | Value examples | Description |
1356 | | ------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- |
1357 | | "2px solid blue" | The three-value syntax: first for border-top-width, second for border-top-style, third for border-top-color |
1358 | | ["2px solid blue", "2px solid blue", "3px solid blue", "3px solid blue", "4px solid blue"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1359 |
1360 |
1361 |
1362 | ### `borderRight`
1363 |
1364 | It is a shorthand property sets all the right border properties in one declaration. The properties that can be set must be in the following order: border-right-width, border-right-style (required), border-right-color.
1365 |
1366 | | Type | Default |
1367 | | --------------- | :---------------- |
1368 | | string or array | medium none color |
1369 |
1370 |
1371 | | Value examples | Description |
1372 | | ------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------- |
1373 | | "2px solid blue" | The three-value syntax: first for border-right-width, second for border-right-style, third for border-right-color |
1374 | | ["2px solid blue", "2px solid blue", "3px solid blue", "3px solid blue", "4px solid blue"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1375 |
1376 |
1377 |
1378 |
1379 | ### `borderBottom`
1380 |
1381 | It is a shorthand property sets all the bottom border properties in one declaration. The properties that can be set must be in the following order: border-bottom-width, border-bottom-style (required), border-bottom-color.
1382 |
1383 | | Type | Default |
1384 | | --------------- | :---------------- |
1385 | | string or array | medium none color |
1386 |
1387 |
1388 | | Value examples | Description |
1389 | | ------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------ |
1390 | | "2px solid blue" | The three-value syntax: first for border-bottom-width, second for border-bottom-style, third for border-bottom-color |
1391 | | ["2px solid blue", "2px solid blue", "3px solid blue", "3px solid blue", "4px solid blue"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1392 |
1393 |
1394 |
1395 |
1396 | ### `borderLeft`
1397 |
1398 | It is a shorthand property sets all the left border properties in one declaration. The properties that can be set must be in the following order: border-left-width, border-left-style (required), border-left-color.
1399 |
1400 | | Type | Default |
1401 | | --------------- | :---------------- |
1402 | | string or array | medium none color |
1403 |
1404 |
1405 | | Value examples | Description |
1406 | | ------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
1407 | | "2px solid blue" | The three-value syntax: first for border-left-width, second for border-left-style, third for border-left-color |
1408 | | ["2px solid blue", "2px solid blue", "3px solid blue", "3px solid blue", "4px solid blue"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1409 |
1410 |
1411 |
1412 |
1413 | ### `borderColor`
1414 |
1415 | This CSS property sets the color of an element's four borders. This property can have from one to four values.
1416 |
1417 | **Syntax**: there are four different syntaxes you can use with this property:
1418 |
1419 | 1. the one-value syntax (the value applies to all four borders),
1420 | 1. the two-value syntax (first value applies to top and bottom, and the second value applies to right and left borders),
1421 | 2. the three-value syntax (first value applies to top, second value applies to right and left, and third value applies to bottom border),
1422 | 3. the four-value syntax (first value applies to top, second value applies to right, third value applies to bottom, and fourth value applies to left border).
1423 |
1424 | | Type | Default |
1425 | | ----------------------------------------------------- | :------ |
1426 | | oneOf(transparent, initial, inherit), string or array | none |
1427 |
1428 |
1429 | | Value examples | Description |
1430 | | ------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
1431 | | "blue" | The one-value syntax for all four borders |
1432 | | "blue green" | The two-value syntax: first for top and bottom borders, second for left and right borders |
1433 | | "blue green yellow" | The three-value syntax: first for top border, second for left and right borders, third for bottom border |
1434 | | "blue green yellow orange" | The four-value syntax: first for top border, second for right border, third for bottom border, fourth for left border |
1435 | | ["blue", "black", "green", "yellow", "red"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1436 |
1437 |
1438 |
1439 |
1440 | ### `borderRadius`
1441 |
1442 | This CSS property defines the radius of the element's corners. This property can have from one to four values.
1443 |
1444 | **Syntax**: there are four different syntaxes you can use with this property:
1445 |
1446 | 1. the one-value syntax (the value applies to all four corners, which are rounded equally),
1447 | 2. the two-value syntax (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners),
1448 | 3. the three-value syntax (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner),
1449 | 4. the four-value syntax (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner).
1450 |
1451 | | Type | Default |
1452 | | --------------- | :------ |
1453 | | string or array | 0 |
1454 |
1455 |
1456 | | Value examples | Description |
1457 | | -------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
1458 | | "10px" | The one-value syntax in pixels for all four corners |
1459 | | "50%" | Percentage value |
1460 | | "10em" | Value in em |
1461 | | "10rem" | Value in rem |
1462 | | "10ch" | Value in ch |
1463 | | "10ex" | Value in ex |
1464 | | "10vh" | Value in vh |
1465 | | "10vw" | Value in vw |
1466 | | "10vmin" | Value in vmin |
1467 | | "10vmax" | Value in vmax |
1468 | | "10px 150px" | The two-value syntax: first for top-left and bottom-right corners, second for top-right and bottom-left corners |
1469 | | "10px 150px 200px" | The three-value syntax: first for top-left corner, second for top-right and bottom-left corners, third for bottom-right corner |
1470 | | "10px 150px 200px 50px" | The four-value syntax: first for top-left corner, second for top-right corner, third for bottom-left corner, fourth for bottom-right corner |
1471 | | ["3px", "5px", "10px", "20px", "30px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1472 |
1473 |
1474 |
1475 | ### `opacity`
1476 |
1477 | This CSS property sets the opacity level for an element.
1478 |
1479 | | Type | Default |
1480 | | --------------- | :------ |
1481 | | number or array | 1 |
1482 |
1483 |
1484 | | Value examples | Description |
1485 | | --------------------------------- | :---------------------------------------------------------- |
1486 | | "0.6" | Numeric value |
1487 | | ["0.2", "0.4", "0.6", "0.8", "1"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1488 |
1489 |
1490 |
1491 |
1492 |
1493 | ### `boxShadow`
1494 |
1495 | This CSS property attaches one or more shadows to an element. To attach more than one shadow to an element, add a comma-separated list of shadows.
1496 |
1497 | **Syntax**: boxShadow="h-offset v-offset blur spread color"
1498 |
1499 | | Type | Default |
1500 | | --------------- | :------ |
1501 | | string or array | none |
1502 |
1503 |
1504 | | Value examples | Description |
1505 | | -------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
1506 | | "none" | Value is a predefined name |
1507 | | "10px 20px" | The two-value syntax: first for the h-offset, second for the v-offset |
1508 | | "10px 20px 30px 2px blue" | The five-value syntax: first for the h-offset, second for the v-offset, third for the blur, fourth for the spread, fifth for the color |
1509 | | ["none", "2px 2px", "5px 5px", "10px 10px", "20px 20px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1510 |
1511 |
1512 |
1513 | ### `overflow`
1514 |
1515 | This CSS property specifies what should happen if content overflows an element's box.
1516 |
1517 | | Type | Default |
1518 | | --------------------------------------------------------------- | :------ |
1519 | | oneOf(visible, hidden, scroll, auto, initial, inherit) or array | visible |
1520 |
1521 |
1522 | | Value examples | Description |
1523 | | ------------------------------------------------- | :---------------------------------------------------------- |
1524 | | "scroll" | Value is a predefined name |
1525 | | ["visible", "hidden", "scroll", "auto", "hidden"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1526 |
1527 |
1528 |
1529 |
1530 | ### `position`
1531 |
1532 | This CSS property specifies the type of positioning method used for an element.
1533 |
1534 | | Type | Default |
1535 | | --------------------------------------------------------------------------- | :------ |
1536 | | oneOf(static, absolute, fixed, relative, sticky, initial, inherit) or array | static |
1537 |
1538 |
1539 | | Value examples | Description |
1540 | | ----------------------------------------------------- | :---------------------------------------------------------- |
1541 | | "absolute" | Value is a predefined name |
1542 | | ["static", "absolute", "fixed", "relative", "sticky"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1543 |
1544 |
1545 |
1546 |
1547 | ### `top`
1548 |
1549 | This CSS property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
1550 |
1551 | **Behavior**
1552 |
1553 | 1. If position="absolute" or position="fixed" - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor,
1554 | 2. If position="relative" - the top property makes the element's top edge to move above/below its normal position.
1555 | 3. If position="sticky" - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
1556 |
1557 | | Type | Default |
1558 | | --------------- | :------ |
1559 | | string or array | auto |
1560 |
1561 |
1562 | | Value examples | Description |
1563 | | -------------------------------------- | :---------------------------------------------------------- |
1564 | | "auto" | Value is a predefined name |
1565 | | "10px" | Value in pixels |
1566 | | "10%" | Percentage value |
1567 | | "10em" | Value in em |
1568 | | "10rem" | Value in rem |
1569 | | "10ch" | Value in ch |
1570 | | "10ex" | Value in ex |
1571 | | "10vh" | Value in vh |
1572 | | "10vw" | Value in vw |
1573 | | "10vmin" | Value in vmin |
1574 | | "10vmax" | Value in vmax |
1575 | | ["2px", "5px", "10px", "20px", "30px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1576 |
1577 |
1578 |
1579 | ### `right`
1580 |
1581 | This CSS property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
1582 |
1583 | **Behavior**
1584 |
1585 | 1. If position="absolute" or position="fixed" - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor,
1586 | 2. If position="relative" - the right property sets the right edge of an element to a unit to the left/right of its normal position,
1587 | 3. If position="sticky" - the right property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
1588 |
1589 | | Type | Default |
1590 | | --------------- | :------ |
1591 | | string or array | auto |
1592 |
1593 |
1594 | | Value examples | Description |
1595 | | -------------------------------------- | :---------------------------------------------------------- |
1596 | | "auto" | Value is a predefined name |
1597 | | "10px" | Value in pixels |
1598 | | "10%" | Percentage value |
1599 | | "10em" | Value in em |
1600 | | "10rem" | Value in rem |
1601 | | "10ch" | Value in ch |
1602 | | "10ex" | Value in ex |
1603 | | "10vh" | Value in vh |
1604 | | "10vw" | Value in vw |
1605 | | "10vmin" | Value in vmin |
1606 | | "10vmax" | Value in vmax |
1607 | | ["2px", "5px", "10px", "20px", "30px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1608 |
1609 |
1610 |
1611 | ### `bottom`
1612 |
1613 | This CSS property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
1614 |
1615 | **Behavior**
1616 |
1617 | 1. If position="absolute" or position="fixed" - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor,
1618 | 2. If position="relative" - the bottom property makes the element's bottom edge to move above/below its normal position.
1619 | 3. If position="sticky" - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
1620 |
1621 | | Type | Default |
1622 | | --------------- | :------ |
1623 | | string or array | auto |
1624 |
1625 |
1626 | | Value examples | Description |
1627 | | -------------------------------------- | :---------------------------------------------------------- |
1628 | | "auto" | Value is a predefined name |
1629 | | "10px" | Value in pixels |
1630 | | "10%" | Percentage value |
1631 | | "10em" | Value in em |
1632 | | "10rem" | Value in rem |
1633 | | "10ch" | Value in ch |
1634 | | "10ex" | Value in ex |
1635 | | "10vh" | Value in vh |
1636 | | "10vw" | Value in vw |
1637 | | "10vmin" | Value in vmin |
1638 | | "10vmax" | Value in vmax |
1639 | | ["2px", "5px", "10px", "20px", "30px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1640 |
1641 |
1642 |
1643 | ### `left`
1644 |
1645 | This CSS property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
1646 |
1647 | **Behavior**
1648 |
1649 | 1. If position="absolute" or position="fixed" - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor,
1650 | 2. If position="relative" - the left property sets the left edge of an element to a unit to the left/right of its normal position,
1651 | 3. If position="sticky" - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
1652 |
1653 | | Type | Default |
1654 | | --------------- | :------ |
1655 | | string or array | auto |
1656 |
1657 |
1658 | | Value examples | Description |
1659 | | -------------------------------------- | :---------------------------------------------------------- |
1660 | | "auto" | Value is a predefined name |
1661 | | "10px" | Value in pixels |
1662 | | "10%" | Percentage value |
1663 | | "10em" | Value in em |
1664 | | "10rem" | Value in rem |
1665 | | "10ch" | Value in ch |
1666 | | "10ex" | Value in ex |
1667 | | "10vh" | Value in vh |
1668 | | "10vw" | Value in vw |
1669 | | "10vmin" | Value in vmin |
1670 | | "10vmax" | Value in vmax |
1671 | | ["2px", "5px", "10px", "20px", "30px"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1672 |
1673 |
1674 |
1675 | ### `zIndex`
1676 |
1677 | This CSS property specifies the stack order of an element. Works on positioned elements (position="absolute", position="relative", position="fixed", or position="sticky").
1678 |
1679 | | Type | Default |
1680 | | ---------------------------------------------- | :------ |
1681 | | oneOf(auto, initial, inherit), number or array | auto |
1682 |
1683 |
1684 | | Value examples | Description |
1685 | | ------------------------- | :---------------------------------------------------------- |
1686 | | "auto" | Value is a predefined name |
1687 | | "1" | Numeric value |
1688 | | ["1", "1", "2", "2", "2"] | Value for diffenent breakpoints (sets in theme/breakpoints) |
1689 |
--------------------------------------------------------------------------------
/docs/src/q-elementary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quarkly/elementary/ca3497d99dbf45c942ff827d1a52a1f08f95d5c1/docs/src/q-elementary.png
--------------------------------------------------------------------------------
/docs/theming.md:
--------------------------------------------------------------------------------
1 | # Theming
2 |
3 | Themes is intended for:
4 |
5 | - breakpoints
6 | - text / background colors
7 | - margin / padding scale
8 | - fonts scale
9 | - variants
10 | - mixins
11 |
12 | # Demo
13 |
14 | https://codesandbox.io/s/quarklyelementary-demo-vml6f
15 |
16 | # Theme example
17 |
18 | ```js
19 | const theme = {
20 | breakpoints: ['40em', '52em', '64em'],
21 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
22 | space: [0, 4, 8, 16, 32, 64, 128, 256],
23 | colors: {
24 | blue: '#326ada',
25 | pink: '#ff0060',
26 | gray: '#a19c9c',
27 | },
28 | mixins: {
29 | rotate: {
30 | '@keyframes spin': {
31 | '100%': {
32 | '-webkit-transform': 'rotate(360deg)',
33 | transform: 'rotate(360deg)',
34 | },
35 | },
36 | animation: 'spin 4s linear infinite',
37 | },
38 | },
39 | };
40 | ```
41 |
42 | # Code
43 |
44 | ```jsx
45 | import React from 'react';
46 | import ReactDom from 'react-dom';
47 | import elementary from '@quarkly/elementary';
48 | import { ThemeProvider } from 'styled-components';
49 |
50 | const theme = { ... };
51 |
52 | const Box = elementary.div(['height', 'width', 'backgroundColor', 'margin'], {
53 | effects: { hover: ':hover' },
54 | variant: 'boxes',
55 | themed: 'Box',
56 | });
57 |
58 | ReactDom.render(
59 |
60 |
69 | ,
70 | document.getElementById('root'),
71 | );
72 | ```
73 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | verbose: true,
3 | testURL: 'http://localhost',
4 | };
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@quarkly/elementary",
3 | "version": "1.1.4",
4 | "author": "Eddort",
5 | "description": "Library for creating atomic react components",
6 | "main": "build/cjs",
7 | "module": "build/esm",
8 | "sideEffects": false,
9 | "scripts": {
10 | "build": "npm run clean && npm run build:cjs && npm run build:esm",
11 | "clean": "rm -rf build/*",
12 | "build:cjs": "NODE_ENV=cjs babel src --out-dir build/cjs --ignore '**/*.test.js'",
13 | "build:esm": "NODE_ENV=esm babel src --out-dir build/esm --ignore '**/*.test.js'",
14 | "test": "jest",
15 | "test:watch": "jest --watch",
16 | "cover": "jest --coverage && npx codecov"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "https://github.com/quarkly/elementary"
21 | },
22 | "keywords": [
23 | "react",
24 | "styled-components",
25 | "css-in-js",
26 | "atomic-css",
27 | "atomic-components",
28 | "styled-system"
29 | ],
30 | "peerDependencies": {
31 | "styled-components": "^4.2.0"
32 | },
33 | "devDependencies": {
34 | "@babel/cli": "^7.2.3",
35 | "@babel/core": "^7.4.0",
36 | "@babel/plugin-transform-runtime": "^7.4.0",
37 | "@babel/preset-env": "^7.4.2",
38 | "@babel/preset-react": "^7.0.0",
39 | "@babel/register": "^7.4.0",
40 | "@emotion/core": "^10.0.9",
41 | "@emotion/styled": "^10.0.9",
42 | "ava": "^1.3.1",
43 | "babel-eslint": "^10.0.1",
44 | "babel-jest": "^24.3.1",
45 | "babel-plugin-lodash": "^3.3.4",
46 | "codecov": "^3.5.0",
47 | "enzyme": "^3.10.0",
48 | "enzyme-adapter-react-16": "^1.14.0",
49 | "eslint": "^4.19.1",
50 | "eslint-config-airbnb": "^16.1.0",
51 | "eslint-config-prettier": "^4.0.0",
52 | "eslint-plugin-import": "^2.9.0",
53 | "eslint-plugin-jsx-a11y": "^6.0.3",
54 | "eslint-plugin-prettier": "^3.0.1",
55 | "eslint-plugin-react": "^7.7.0",
56 | "husky": "^1.3.1",
57 | "jest": "^24.3.1",
58 | "jest-styled-components": "^6.3.1",
59 | "lint-staged": "^8.1.5",
60 | "nyc": "^13.3.0",
61 | "prettier": "^1.16.4",
62 | "react": "^16.8.5",
63 | "react-dom": "^16.8.6",
64 | "react-test-renderer": "^16.8.5",
65 | "rebass": "^4.0.2",
66 | "styled-components": "^4.2.0"
67 | },
68 | "license": "MIT",
69 | "bugs": {
70 | "url": "https://github.com/quarkly/elementary/issues"
71 | },
72 | "homepage": "https://github.com/quarkly/elementary#readme",
73 | "dependencies": {
74 | "lodash": ">=4.17.13",
75 | "lodash.merge": ">=4.6.2"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/clear-props.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { get, merge, isArray } from 'lodash/fp';
3 | import { hashPropsWithAliases } from './dict';
4 |
5 | export const omit = (props, omitMap) =>
6 | Object.keys(props).reduce((acc, prop) => {
7 | if (omitMap[prop]) {
8 | return acc;
9 | }
10 | acc[prop] = props[prop];
11 | return acc;
12 | }, {});
13 |
14 | export const hashify = array =>
15 | array.reduce((acc, item) => {
16 | acc[item] = true;
17 | return acc;
18 | }, {});
19 |
20 | export const getOmitPropsFromConfig = config => {
21 | const uMap = get('omit', config);
22 | if (isArray(uMap)) {
23 | return hashify(uMap);
24 | }
25 | return uMap;
26 | };
27 |
28 | export const createOmitMap = config => {
29 | const userOmitMap = getOmitPropsFromConfig(config);
30 | return merge(userOmitMap, hashPropsWithAliases);
31 | };
32 |
33 | export default (Tag, config) =>
34 | React.forwardRef((props, ref) =>
35 | React.createElement(Tag, {
36 | ref,
37 | ...omit(props, createOmitMap(config)),
38 | }),
39 | );
40 |
--------------------------------------------------------------------------------
/src/dict.js:
--------------------------------------------------------------------------------
1 | const dict = {
2 | margin: {
3 | alias: 'm',
4 | scale: 'space',
5 | transformer: 'space',
6 | type: ['number', 'string'],
7 | },
8 | marginTop: {
9 | alias: 'mt',
10 | scale: 'space',
11 | transformer: 'space',
12 | type: ['number', 'string'],
13 | },
14 | marginRight: {
15 | alias: 'mr',
16 | scale: 'space',
17 | transformer: 'space',
18 | type: ['number', 'string'],
19 | },
20 | marginBottom: {
21 | alias: 'mb',
22 | scale: 'space',
23 | transformer: 'space',
24 | type: ['number', 'string'],
25 | },
26 | marginLeft: {
27 | alias: 'ml',
28 | scale: 'space',
29 | transformer: 'space',
30 | type: ['number', 'string'],
31 | },
32 | padding: {
33 | alias: 'p',
34 | scale: 'space',
35 | transformer: 'space',
36 | type: ['number', 'string'],
37 | },
38 | paddingTop: {
39 | alias: 'pt',
40 | scale: 'space',
41 | transformer: 'space',
42 | type: ['number', 'string'],
43 | },
44 | paddingRight: {
45 | alias: 'pr',
46 | scale: 'space',
47 | transformer: 'space',
48 | type: ['number', 'string'],
49 | },
50 | paddingBottom: {
51 | alias: 'pb',
52 | scale: 'space',
53 | transformer: 'space',
54 | type: ['number', 'string'],
55 | },
56 | paddingLeft: {
57 | alias: 'pl',
58 | scale: 'space',
59 | transformer: 'space',
60 | type: ['number', 'string'],
61 | },
62 | fontSize: {
63 | alias: 'fz',
64 | scale: 'fontSizes',
65 | transformer: 'fontSize',
66 | type: ['number', 'string'],
67 | },
68 | color: {
69 | alias: 'c',
70 | variant: 'colors',
71 | type: 'string',
72 | },
73 | fontFamily: {
74 | alias: 'ff',
75 | variant: 'fonts',
76 | type: 'string',
77 | },
78 | textAlign: {
79 | alias: 'ta',
80 | type: 'string',
81 | },
82 | lineHeight: {
83 | alias: 'lh',
84 | type: ['number', 'string'],
85 | },
86 | fontWeight: {
87 | alias: 'fw',
88 | type: ['number', 'string'],
89 | },
90 | fontStyle: {
91 | alias: 'fs',
92 | type: 'string',
93 | },
94 | letterSpacing: {
95 | alias: 'lts',
96 | type: ['number', 'string'],
97 | },
98 | display: {
99 | alias: 'd',
100 | type: 'string',
101 | },
102 | width: {
103 | alias: 'w',
104 | transformer: 'width',
105 | type: ['number', 'string'],
106 | },
107 | maxWidth: {
108 | alias: 'maw',
109 | transformer: 'pixel',
110 | type: ['number', 'string'],
111 | },
112 | minWidth: {
113 | alias: 'miw',
114 | transformer: 'pixel',
115 | type: ['number', 'string'],
116 | },
117 | height: {
118 | alias: 'h',
119 | transformer: 'pixel',
120 | type: ['number', 'string'],
121 | },
122 | maxHeight: {
123 | alias: 'mah',
124 | transformer: 'pixel',
125 | type: ['number', 'string'],
126 | },
127 | minHeight: {
128 | alias: 'mih',
129 | transformer: 'pixel',
130 | type: ['number', 'string'],
131 | },
132 | sizeWidth: {
133 | type: 'string',
134 | },
135 | sizeHeight: {
136 | type: 'string',
137 | },
138 | ratioPadding: {
139 | type: ['number', 'string'],
140 | },
141 | ratio: {
142 | type: ['number', 'string'],
143 | },
144 | verticalAlign: {
145 | alias: 'va',
146 | type: 'string',
147 | },
148 | alignItems: {
149 | alias: 'ai',
150 | type: 'string',
151 | },
152 | alignContent: {
153 | alias: 'ac',
154 | type: 'string',
155 | },
156 | justifyItems: {
157 | alias: 'ji',
158 | type: 'string',
159 | },
160 | justifyContent: {
161 | alias: 'jc',
162 | type: 'string',
163 | },
164 | flexWrap: {
165 | alias: 'fxw',
166 | type: 'string',
167 | },
168 | flexBasis: {
169 | alias: 'fxb',
170 | transformer: 'width',
171 | type: 'string',
172 | },
173 | flexDirection: {
174 | alias: 'fxd',
175 | type: 'string',
176 | },
177 | flex: {
178 | alias: 'fx',
179 | type: 'string',
180 | },
181 | justifySelf: {
182 | alias: 'js',
183 | type: 'string',
184 | },
185 | alignSelf: {
186 | alias: 'asf',
187 | type: 'string',
188 | },
189 | order: {
190 | alias: 'ord',
191 | type: 'string',
192 | },
193 | gridGap: { type: 'string', scale: 'space', transformer: 'pixel' },
194 | gridColumnGap: { type: 'string', scale: 'space', transformer: 'pixel' },
195 | gridRowGap: { type: 'string', scale: 'space', transformer: 'pixel' },
196 | gridColumn: { type: 'string' },
197 | gridRow: { type: 'string' },
198 | gridAutoFlow: { type: 'string' },
199 | gridAutoColumns: { type: 'string' },
200 | gridAutoRows: { type: 'string' },
201 | gridTemplateColumns: { type: 'string' },
202 | gridTemplateRows: { type: 'string' },
203 | gridTemplateAreas: { type: 'string' },
204 | gridArea: { type: 'string' },
205 | border: {
206 | alias: 'bd',
207 | type: 'string',
208 | },
209 | borderTop: {
210 | alias: 'bdt',
211 | type: 'string',
212 | },
213 | borderRight: {
214 | alias: 'bdr',
215 | type: 'string',
216 | },
217 | borderBottom: {
218 | alias: 'bdb',
219 | type: 'string',
220 | },
221 | borderLeft: {
222 | alias: 'bdl',
223 | type: 'string',
224 | },
225 | borderColor: {
226 | alias: 'bdc',
227 | variant: 'colors',
228 | type: 'string',
229 | },
230 | borderRadius: {
231 | alias: 'bdrs',
232 | transformer: 'pixel',
233 | type: 'string',
234 | },
235 | boxShadow: {
236 | alias: 'bxsh',
237 | variant: 'shadows',
238 | type: 'string',
239 | },
240 | opacity: {
241 | alias: 'op',
242 | type: ['number', 'string'],
243 | },
244 | overflow: {
245 | alias: 'ov',
246 | type: 'string',
247 | },
248 | background: {
249 | alias: 'bg',
250 | variant: 'colors',
251 | type: 'string',
252 | },
253 | backgroundColor: {
254 | alias: 'bgc',
255 | variant: 'colors',
256 | type: 'string',
257 | },
258 | backgroundImage: {
259 | alias: 'bgi',
260 | type: 'string',
261 | },
262 | backgroundPosition: {
263 | alias: 'bgp',
264 | type: 'string',
265 | },
266 | backgroundRepeat: {
267 | alias: 'bgr',
268 | type: 'string',
269 | },
270 | backgroundSize: {
271 | alias: 'bgsz',
272 | type: 'string',
273 | },
274 | position: {
275 | alias: 'pos',
276 | type: 'string',
277 | },
278 | zIndex: {
279 | alias: 'z',
280 | type: 'number',
281 | },
282 | top: {
283 | alias: 't',
284 | transformer: 'pixel',
285 | type: ['number', 'string'],
286 | },
287 | right: {
288 | alias: 'r',
289 | transformer: 'pixel',
290 | type: ['number', 'string'],
291 | },
292 | bottom: {
293 | alias: 'b',
294 | transformer: 'pixel',
295 | type: ['number', 'string'],
296 | },
297 | left: {
298 | alias: 'l',
299 | transformer: 'pixel',
300 | type: ['number', 'string'],
301 | },
302 | size: {
303 | transformer: 'pixel',
304 | type: ['number', 'string'],
305 | compose: ['height', 'width'],
306 | },
307 | paddingX: {
308 | alias: 'px',
309 | transformer: 'pixel',
310 | type: ['number', 'string'],
311 | compose: ['paddingLeft', 'paddingRight'],
312 | },
313 | paddingY: {
314 | alias: 'py',
315 | transformer: 'pixel',
316 | type: ['number', 'string'],
317 | compose: ['paddingTop', 'paddingBottom'],
318 | },
319 | marginX: {
320 | alias: 'mx',
321 | transformer: 'pixel',
322 | type: ['number', 'string'],
323 | compose: ['marginLeft', 'marginRight'],
324 | },
325 | marginY: {
326 | alias: 'my',
327 | transformer: 'pixel',
328 | type: ['number', 'string'],
329 | compose: ['marginTop', 'marginBottom'],
330 | },
331 | };
332 |
333 | export const hashPropsWithAliases = Object.keys(dict).reduce((acc, name) => {
334 | const propValue = { ...dict[name], name };
335 | acc[name] = propValue;
336 | if (propValue.alias) acc[propValue.alias] = propValue;
337 | return acc;
338 | }, {});
339 |
340 | export default dict;
341 |
--------------------------------------------------------------------------------
/src/dict.test.js:
--------------------------------------------------------------------------------
1 | import { toPropTypes } from './styles';
2 | import dict from './dict';
3 |
4 | const getName = name => dict[name].alias || name;
5 |
6 | const checkName = () => {
7 | const acc = {};
8 | return name => {
9 | if (acc[name]) {
10 | throw new Error(`colission with name: ${name}`);
11 | }
12 | acc[name] = true;
13 | return true;
14 | };
15 | };
16 |
17 | describe('Style dict', () => {
18 | test('type exists in all style object', () => {
19 | Object.values(dict).forEach(style => expect(style.type).toBeDefined());
20 | });
21 | test('to propTypes convert', () => {
22 | Object.values(dict).forEach(style => expect(toPropTypes(style)).toBeDefined());
23 | });
24 | test('aliases is unique', () => {
25 | const check = checkName();
26 | Object.keys(dict).forEach(style => expect(check(getName(style))).toBeDefined());
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import SC from 'styled-components';
2 | import { wrap } from './wrapper';
3 |
4 | export { default as dict } from './dict';
5 |
6 | export default wrap(SC);
7 |
--------------------------------------------------------------------------------
/src/modifiers.js:
--------------------------------------------------------------------------------
1 | import { isUndefined } from 'lodash/fp';
2 | import { getFromTheme, themeGet } from './theme';
3 |
4 | export const variants = key => props => getFromTheme(props, `${key}.${props.variant}`);
5 | export const themed = key => props => getFromTheme(props, key);
6 | export const mixins = props => {
7 | const mix = themeGet(props, 'mixins', {});
8 | return Object.keys(mix).reduce((acc, mixin) => {
9 | if (isUndefined(props[mixin])) {
10 | return acc;
11 | }
12 | return { ...acc, ...mix[mixin] };
13 | }, {});
14 | };
15 |
16 | export default { variants, themed, mixins };
17 |
--------------------------------------------------------------------------------
/src/modifiers.test.js:
--------------------------------------------------------------------------------
1 | import bootsrap from './styles';
2 |
3 | const fakeApplier = (rules, props) =>
4 | Object.values(rules).reduce((acc, rule) => ({ ...acc, ...rule(props) }), {});
5 |
6 | const fakeTheme = {
7 | someVariants: {
8 | alert: {
9 | color: 'red',
10 | margin: '300px',
11 | },
12 | },
13 | someName: {
14 | margin: '122px',
15 | padding: '30px',
16 | },
17 | mixins: {
18 | cRed: {
19 | color: 'red',
20 | },
21 | cBlue: {
22 | color: 'blue',
23 | },
24 | },
25 | };
26 |
27 | describe('Test modifiers', () => {
28 | test('variant works fine', () => {
29 | const [rules] = bootsrap(['margin'], { variant: 'someVariants', mixins: true, aliases: true });
30 | expect(fakeApplier(rules, { theme: fakeTheme, variant: 'alert' })).toStrictEqual({
31 | margin: '300px',
32 | color: 'red',
33 | });
34 | expect(
35 | fakeApplier(rules, { m: 3, theme: fakeTheme, variant: 'alert', mixins: true, aliases: true }),
36 | ).toStrictEqual({
37 | margin: '16px',
38 | color: 'red',
39 | });
40 | expect(fakeApplier(rules, { theme: fakeTheme })).toStrictEqual({});
41 | });
42 | test('themed works fine', () => {
43 | const [rules] = bootsrap(['margin'], { name: 'someName', mixins: true, aliases: true });
44 | expect(fakeApplier(rules, { m: 3, theme: fakeTheme })).toStrictEqual({
45 | margin: '16px',
46 | padding: '30px',
47 | });
48 | expect(fakeApplier(rules, { theme: fakeTheme })).toStrictEqual({
49 | margin: '122px',
50 | padding: '30px',
51 | });
52 | });
53 | test('mixins works fine', () => {
54 | const [rules] = bootsrap(['margin'], { mixins: true, aliases: true });
55 | expect(fakeApplier(rules, { m: 3, theme: fakeTheme, cRed: true })).toStrictEqual({
56 | margin: '16px',
57 | color: 'red',
58 | });
59 | expect(fakeApplier(rules, { m: 3, theme: fakeTheme, cBlue: true })).toStrictEqual({
60 | margin: '16px',
61 | color: 'blue',
62 | });
63 | expect(fakeApplier(rules, { m: 3, theme: fakeTheme, cBlueFake: true })).toStrictEqual({
64 | margin: '16px',
65 | });
66 | });
67 | test('actual priority', () => {
68 | const [rules] = bootsrap(['margin'], {
69 | name: 'someName',
70 | variant: 'someVariants',
71 | mixins: true,
72 | aliases: true,
73 | });
74 | expect(
75 | fakeApplier(rules, { m: 3, theme: fakeTheme, variant: 'alert', cBlue: true }),
76 | ).toStrictEqual({
77 | margin: '16px',
78 | padding: '30px',
79 | color: 'blue',
80 | });
81 | expect(fakeApplier(rules, { m: 3, theme: fakeTheme, variant: 'alert' })).toStrictEqual({
82 | margin: '16px',
83 | padding: '30px',
84 | color: 'red',
85 | });
86 | expect(fakeApplier(rules, { theme: fakeTheme, variant: 'alert' })).toStrictEqual({
87 | margin: '300px',
88 | padding: '30px',
89 | color: 'red',
90 | });
91 | expect(fakeApplier(rules, { theme: fakeTheme })).toStrictEqual({
92 | margin: '122px',
93 | padding: '30px',
94 | });
95 | });
96 | });
97 |
--------------------------------------------------------------------------------
/src/normalize-props.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { isString, isObject } from 'lodash/fp';
3 |
4 | const normalizeMap = {
5 | as(value) {
6 | return isString(value) || isObject(value);
7 | },
8 | };
9 |
10 | export const applynormalizer = (key, value) => {
11 | if (!normalizeMap[key]) return value;
12 | if (normalizeMap[key](value)) return value;
13 | return null;
14 | };
15 |
16 | export const normalizer = props => {
17 | return Object.keys(props).reduce((acc, key) => {
18 | acc[key] = applynormalizer(key, props[key]);
19 | return acc;
20 | }, {});
21 | };
22 |
23 | export default Tag =>
24 | React.forwardRef((props, ref) =>
25 | React.createElement(Tag, {
26 | ref,
27 | ...normalizer(props),
28 | }),
29 | );
30 |
--------------------------------------------------------------------------------
/src/normalize-props.test.js:
--------------------------------------------------------------------------------
1 | import { normalizer } from './normalize-props';
2 |
3 | describe('normalizer', () => {
4 | test('as', () => {
5 | expect(normalizer({})).toStrictEqual({});
6 | expect(normalizer({ some: 123 })).toStrictEqual({ some: 123 });
7 | expect(normalizer({ as: 1, some: 123 })).toStrictEqual({ some: 123, as: null });
8 | expect(normalizer({ as: undefined, some: 123 })).toStrictEqual({ some: 123, as: null });
9 | expect(normalizer({ as: true, some: 123 })).toStrictEqual({ some: 123, as: null });
10 | expect(normalizer({ as: false, some: 123 })).toStrictEqual({ some: 123, as: null });
11 | expect(normalizer({ as: 'p', some: 123 })).toStrictEqual({ some: 123, as: 'p' });
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
1 | import { isArray, map, isUndefined, get, omit, merge } from 'lodash/fp';
2 | import PropTypes from 'prop-types';
3 | import { memoize } from 'lodash';
4 | import stylesDict, { hashPropsWithAliases } from './dict';
5 | import { getFromTheme, themeGet, variantGet } from './theme';
6 | import transformers, { pixel } from './transformers';
7 | import { variants, themed, mixins } from './modifiers';
8 |
9 | const RULE = 0;
10 | const PROP_TYPES = 1;
11 |
12 | export const getNames = memoize(properties =>
13 | properties.reduce((acc, name) => {
14 | if (isUndefined(stylesDict[name])) return acc;
15 | acc.push(name);
16 | if (stylesDict[name].alias) acc.push(stylesDict[name].alias);
17 | return acc;
18 | }, []),
19 | );
20 | export const typeToPropTypes = memoize(type => PropTypes[type]);
21 |
22 | export const toPropTypes = style =>
23 | isArray(style.type)
24 | ? PropTypes.oneOfType(map(typeToPropTypes, style.type).concat(PropTypes.array))
25 | : PropTypes.oneOfType([typeToPropTypes(style.type), PropTypes.array]);
26 |
27 | export const createMediaQuery = n => `@media screen and (min-width: ${pixel(n)})`;
28 |
29 | export const getTransformer = name => transformers[name] || (value => value);
30 |
31 | export const createRule = (property, variant, scale, transform) => props => {
32 | let resultRule = null;
33 | // ищем свойство в пропсах
34 | const propertyValue = get(property, props);
35 | if (isUndefined(propertyValue)) {
36 | return resultRule;
37 | }
38 | const createStyle = n => {
39 | let scaleMap = [];
40 | if (variant) n = variantGet(props, variant, n);
41 | if (scale) scaleMap = themeGet(props, scale, scaleMap);
42 | return {
43 | [hashPropsWithAliases[property].name]: transform(n, scaleMap),
44 | };
45 | };
46 | if (isArray(propertyValue)) {
47 | const breakpoints = getFromTheme(props, 'breakpoints');
48 | // количество свойств в массиве должно быть не больше чем в брейкпоинтах
49 | const consistentValues = propertyValue.slice(1, breakpoints.length + 1);
50 | resultRule = [createStyle(propertyValue[0])];
51 | let index = 1;
52 | resultRule = resultRule.concat(
53 | map(
54 | value => ({
55 | // eslint-disable-next-line no-plusplus
56 | [createMediaQuery(breakpoints[index++])]: createStyle(value),
57 | }),
58 | consistentValues,
59 | ),
60 | );
61 | } else {
62 | resultRule = createStyle(propertyValue);
63 | }
64 | return resultRule;
65 | };
66 |
67 | export const makeRule = memoize(
68 | (property /* config */) => {
69 | // Инициализация - старт
70 | const { transformer, variant, scale } = hashPropsWithAliases[property];
71 | const transform = getTransformer(transformer);
72 | // Инициализация - конец
73 | const rule = createRule(property, variant, scale, transform);
74 | const propType = toPropTypes(hashPropsWithAliases[property]);
75 | return [rule, propType];
76 | },
77 | prop => prop,
78 | );
79 |
80 | export const compose = memoize(
81 | property => {
82 | const composed = [];
83 | const dictRule = hashPropsWithAliases[property];
84 | const rules = dictRule.compose.reduce((acc, cssRule) => {
85 | const [rule] = makeRule(cssRule);
86 | acc.push(rule);
87 | return acc;
88 | }, []);
89 | composed[RULE] = props => {
90 | if (isUndefined(props[property])) return;
91 | const clearProps = omit(property, props);
92 | return rules.reduce(
93 | (acc, rule, i) =>
94 | merge(makeComoosedRule(rule, dictRule.compose[i], props[property], clearProps), acc),
95 | {},
96 | );
97 | };
98 | composed[PROP_TYPES] = toPropTypes(dictRule);
99 | return composed;
100 | },
101 | property => property,
102 | );
103 |
104 | export const makeComoosedRule = (rule, ruleKey, ruleValue, props) => {
105 | if (isArray(ruleValue)) {
106 | return rule
107 | .call(null, {
108 | [ruleKey]: ruleValue,
109 | ...props,
110 | })
111 | .reduce((ac, style) => ({ ...ac, ...style }));
112 | }
113 | return rule.call(null, {
114 | [ruleKey]: ruleValue,
115 | ...props,
116 | });
117 | };
118 |
119 | // дописать вызов создания плагинов
120 | export const makeRules = (properties /* config */) =>
121 | properties.reduce(
122 | (acc, property) => {
123 | const dictRule = hashPropsWithAliases[property];
124 | if (isUndefined(dictRule)) return acc;
125 | let result = [];
126 | if (dictRule.compose) {
127 | result = compose(property);
128 | } else {
129 | result = makeRule(property);
130 | }
131 |
132 | acc[RULE][property] = result[RULE];
133 | acc[PROP_TYPES][property] = result[PROP_TYPES];
134 | return acc;
135 | },
136 | [{}, {}],
137 | );
138 |
139 | export const upFirstChar = memoize(string => string.charAt(0).toUpperCase() + string.slice(1));
140 |
141 | export const makeEffectRuleName = (effect, rule) => `${effect}${upFirstChar(rule)}`;
142 |
143 | export const makeRulesWithEffect = (properties, config) => {
144 | const [rules, propTypes] = makeRules(properties);
145 | if (isUndefined(config.effects)) return [rules, propTypes];
146 | const effectNames = Object.keys(config.effects);
147 | const [rulesWithEffect, PropTypesWithEffect] = makeEffects({
148 | effectNames,
149 | properties,
150 | rules,
151 | propTypes,
152 | config,
153 | });
154 | return [{ ...rules, ...rulesWithEffect }, { ...propTypes, ...PropTypesWithEffect }];
155 | };
156 |
157 | export const makeEffectActivator = ({ effectKey, properties, effectName, rules }) => props => ({
158 | [`&${effectKey}`]: properties.reduce((accum, property) => {
159 | if (isUndefined(hashPropsWithAliases[property])) return accum;
160 | const effectRuleName = makeEffectRuleName(effectName, property);
161 | const effectedProps = { [property]: get(effectRuleName, props), theme: props.theme };
162 | const targetRule = rules[property];
163 | let styles = targetRule.call(null, effectedProps);
164 | if (isArray(styles)) {
165 | styles = styles.reduce((ac, style) => ({ ...ac, ...style }));
166 | }
167 | return { ...accum, ...styles };
168 | }, {}),
169 | });
170 |
171 | export const makeEffectPropTypes = ({ effectName, propTypes }) =>
172 | Object.keys(propTypes).reduce((accum, propTypeName) => {
173 | const propTypeFn = propTypes[propTypeName];
174 | accum[makeEffectRuleName(effectName, propTypeName)] = propTypeFn;
175 | return accum;
176 | }, {});
177 |
178 | export const makeEffects = ({ effectNames, properties, rules, propTypes, config }) =>
179 | effectNames.reduce(
180 | (acc, effectName) => {
181 | const effectKey = config.effects[effectName];
182 | acc[RULE][`&${effectKey}`] = makeEffectActivator({
183 | effectKey,
184 | properties,
185 | effectName,
186 | rules,
187 | });
188 | acc[PROP_TYPES] = makeEffectPropTypes({ effectName, propTypes });
189 | return acc;
190 | },
191 | [{}, {}],
192 | );
193 |
194 | export const activator = rules =>
195 | memoize(props => {
196 | if (!Object.keys(rules).length) {
197 | return {};
198 | }
199 | return Object.keys(props).reduce((acc, prop) => {
200 | if (isUndefined(rules[prop])) {
201 | return acc;
202 | }
203 | const styles = rules[prop](props);
204 | if (isArray(styles)) {
205 | return merge(
206 | styles.reduce((accum, style) => {
207 | Object.assign(accum, style);
208 | return accum;
209 | }, {}),
210 | acc,
211 | );
212 | }
213 | return merge(styles, acc);
214 | }, {});
215 | });
216 | export default (properties, config = {}) => {
217 | const deps = [];
218 | if (config.name) {
219 | deps.push(themed(config.name));
220 | }
221 | if (config.variant) {
222 | deps.push(variants(config.variant));
223 | }
224 | if (config.mixins) {
225 | deps.push(mixins);
226 | }
227 | let propNames = properties;
228 | if (config.aliases) {
229 | propNames = getNames(properties);
230 | }
231 | if (config.effects) {
232 | const [rules, propTypes] = makeRulesWithEffect(propNames, config);
233 | return [[...deps, ...Object.values(rules)], propTypes];
234 | }
235 | const [rules, propTypes] = makeRulesWithEffect(propNames, config);
236 | return [[...deps, activator(rules)], propTypes];
237 | };
238 |
--------------------------------------------------------------------------------
/src/styles.test.js:
--------------------------------------------------------------------------------
1 | import dict from './dict';
2 | import { makeRule, makeRules, makeRulesWithEffect } from './styles';
3 |
4 | const fakeApplier = (rules, props) =>
5 | Object.values(rules).reduce((acc, rule) => ({ ...acc, ...rule(props) }), {});
6 |
7 | describe('Create rule', () => {
8 | test('base', () => {
9 | Object.keys(dict).forEach(style => expect(makeRule(style)).toBeDefined());
10 | });
11 | });
12 | describe('Use rule', () => {
13 | test('single rule with alias', () => {
14 | const [rule] = makeRule('backgroundColor');
15 | expect(rule({ backgroundColor: 'red' })).toStrictEqual({ backgroundColor: 'red' });
16 | expect(rule({ backgroundColor: ['red', 'green'] })).toStrictEqual([
17 | { backgroundColor: 'red' },
18 | { '@media screen and (min-width: 52em)': { backgroundColor: 'green' } },
19 | ]);
20 | expect(rule({ backgroundColor: false })).toStrictEqual({ backgroundColor: false });
21 | expect(rule({})).toBe(null);
22 | expect(rule({ color: 'someFakeValue' })).toBe(null);
23 | expect(rule()).toBe(null);
24 | });
25 | test('single rule', () => {
26 | const [rule] = makeRule('color');
27 | expect(rule({ color: 'red' })).toStrictEqual({ color: 'red' });
28 | expect(rule({ color: ['red', 'green', 'tomato'] })).toStrictEqual([
29 | { color: 'red' },
30 | { '@media screen and (min-width: 52em)': { color: 'green' } },
31 | { '@media screen and (min-width: 64em)': { color: 'tomato' } },
32 | ]);
33 | expect(rule({ color: false })).toStrictEqual({ color: false });
34 | expect(rule({})).toBe(null);
35 | expect(rule({ backgroundColor: 'someFakeValue' })).toBe(null);
36 | expect(rule({ someFakeValue: 'someFakeValue' })).toBe(null);
37 | expect(rule()).toBe(null);
38 | });
39 | });
40 | describe('makeRules', () => {
41 | test('single rule', () => {
42 | const [rules, propTypes] = makeRules(['color', 'backgroundColor']);
43 | expect(rules).toBeDefined();
44 | expect(propTypes).toBeDefined();
45 | });
46 | test('incorrect rule', () => {
47 | const [rules, propTypes] = makeRules(['fakeRule']);
48 | expect(rules).toBeDefined();
49 | expect(propTypes).toBeDefined();
50 | });
51 | });
52 | describe('makeRules with effect', () => {
53 | test('single rule', () => {
54 | const [rules, propTypes] = makeRulesWithEffect(['color', 'backgroundColor'], {
55 | effects: { hover: ':hover' },
56 | });
57 | expect(rules).toBeDefined();
58 | expect(propTypes).toBeDefined();
59 | expect(
60 | fakeApplier(rules, { backgroundColor: 'red', hoverBackgroundColor: 'blue' }),
61 | ).toBeDefined();
62 | expect(
63 | fakeApplier(rules, {
64 | backgroundColor: 'red',
65 | hoverBackgroundColor: 'blue',
66 | hoverColor: 'red',
67 | }),
68 | ).toBeDefined();
69 | expect(
70 | fakeApplier(rules, {
71 | backgroundColor: 'red',
72 | hoverBackgroundColor: 'blue',
73 | hoverColor: 'red',
74 | }),
75 | ).toStrictEqual({
76 | backgroundColor: 'red',
77 | '&:hover': { color: 'red', backgroundColor: 'blue' },
78 | });
79 | });
80 | test('rules with commpose', () => {
81 | const [rules, propTypes] = makeRulesWithEffect(['color', 'backgroundColor', 'size'], {});
82 | expect(propTypes).toBeDefined();
83 | expect(
84 | fakeApplier(rules, {
85 | size: '20px',
86 | }),
87 | ).toStrictEqual({
88 | height: '20px',
89 | width: '20px',
90 | });
91 | expect(
92 | fakeApplier(rules, {
93 | size: 20,
94 | }),
95 | ).toStrictEqual({
96 | height: '20px',
97 | width: '20px',
98 | });
99 | });
100 | test('rules with commpose & effect', () => {
101 | const [rules, propTypes] = makeRulesWithEffect(['color', 'backgroundColor', 'size'], {
102 | effects: {
103 | hover: ':hover',
104 | },
105 | });
106 | expect(propTypes).toBeDefined();
107 | expect(rules['&:hover']).toBeDefined();
108 | expect(
109 | fakeApplier(rules, {
110 | size: 20,
111 | hoverSize: 22,
112 | }),
113 | ).toStrictEqual({
114 | height: '20px',
115 | width: '20px',
116 | '&:hover': { height: '22px', width: '22px' },
117 | });
118 | });
119 | test('rules with commpose & media query', () => {
120 | const [rules, propTypes] = makeRulesWithEffect(['color', 'backgroundColor', 'size'], {
121 | effects: {
122 | hover: ':hover',
123 | },
124 | });
125 | expect(propTypes).toBeDefined();
126 | expect(rules['&:hover']).toBeDefined();
127 | expect(
128 | fakeApplier(rules, {
129 | size: [20, 30, 40],
130 | hoverSize: 22,
131 | }),
132 | ).toStrictEqual({
133 | '@media screen and (min-width: 52em)': {
134 | height: '30px',
135 | width: '30px',
136 | },
137 | '@media screen and (min-width: 64em)': {
138 | height: '40px',
139 | width: '40px',
140 | },
141 | width: '20px',
142 | height: '20px',
143 | '&:hover': { height: '22px', width: '22px' },
144 | });
145 | });
146 | });
147 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import { get, isUndefined } from 'lodash/fp';
2 |
3 | export const themeDefault = {
4 | breakpoints: ['40em', '52em', '64em'],
5 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
6 | space: [0, 4, 8, 16, 32, 64, 128, 256],
7 | };
8 |
9 | export const getFromTheme = (props, key) => get(key, props.theme) || get(key, themeDefault);
10 |
11 | export const variantGet = (props, key, name) => {
12 | const variants = getFromTheme(props, key);
13 | if (isUndefined(variants)) return name;
14 | const value = get(name, variants);
15 | return isUndefined(value) ? name : value;
16 | };
17 |
18 | export const themeGet = (props, key, def) => {
19 | const value = getFromTheme(props, key);
20 | return isUndefined(value) ? def : value;
21 | };
22 |
23 | export default themeDefault;
24 |
--------------------------------------------------------------------------------
/src/theme.test.js:
--------------------------------------------------------------------------------
1 | import { makeRule } from './styles';
2 |
3 | const theme = {
4 | colors: {
5 | black: '#0f0f0f0',
6 | quark: 'rgb(8, 96, 220)',
7 | },
8 | };
9 |
10 | describe('Test themed', () => {
11 | test('color', () => {
12 | const [rule] = makeRule('color');
13 | expect(rule({ color: 'red', theme })).toStrictEqual({ color: 'red' });
14 | expect(rule({ color: 'black', theme })).toStrictEqual({ color: '#0f0f0f0' });
15 | expect(rule({ color: 'black' })).toStrictEqual({ color: 'black' });
16 | expect(rule({ color: '#ffffff', theme })).toStrictEqual({ color: '#ffffff' });
17 | expect(rule({ color: 'quark', theme })).toStrictEqual({ color: 'rgb(8, 96, 220)' });
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/src/transformers.js:
--------------------------------------------------------------------------------
1 | import { isNumber, get, isUndefined } from 'lodash/fp';
2 |
3 | export const pixel = n => (isNumber(n) && n !== 0 ? `${n}px` : n);
4 |
5 | export const width = n => (!isNumber(n) || n > 1 ? pixel(n) : `${n * 100}%`);
6 |
7 | export const fontSize = (n, scale) => {
8 | if (!isNumber(n)) {
9 | return pixel(n);
10 | }
11 | const value = get(n, scale);
12 | if (isUndefined(value)) {
13 | return pixel(n);
14 | }
15 | return pixel(value);
16 | };
17 |
18 | export const space = (n, scale) => {
19 | if (!isNumber(n)) {
20 | return pixel(n);
21 | }
22 | const isNegative = n < 0;
23 | const absolute = Math.abs(n);
24 | const value = get(absolute, scale);
25 | if (isUndefined(value)) {
26 | return pixel(n);
27 | }
28 | if (!isNumber(value)) {
29 | return isNegative ? `-${value}` : value;
30 | }
31 | return pixel(value * (isNegative ? -1 : 1));
32 | };
33 |
34 | export default { pixel, width, space, fontSize };
35 |
--------------------------------------------------------------------------------
/src/transformers.test.js:
--------------------------------------------------------------------------------
1 | import { makeRule } from './styles';
2 |
3 | describe('Test transformers', () => {
4 | describe('Space transformer', () => {
5 | test('number scale', () => {
6 | const [rule] = makeRule('margin');
7 | expect(rule({ margin: 2 })).toStrictEqual({ margin: '8px' });
8 | expect(rule({ margin: -2 })).toStrictEqual({ margin: '-8px' });
9 | expect(rule({ margin: 3 })).toStrictEqual({ margin: '16px' });
10 | expect(rule({ margin: -3 })).toStrictEqual({ margin: '-16px' });
11 | });
12 | test('number negative scale', () => {
13 | const [rule] = makeRule('margin');
14 | expect(rule({ margin: -2 })).toStrictEqual({ margin: '-8px' });
15 | expect(rule({ margin: -3 })).toStrictEqual({ margin: '-16px' });
16 | });
17 | test('number to pixel transform', () => {
18 | const [rule] = makeRule('margin');
19 | expect(rule({ margin: 23 })).toStrictEqual({ margin: '23px' });
20 | expect(rule({ margin: 33 })).toStrictEqual({ margin: '33px' });
21 | });
22 | test('negative number to pixel transform', () => {
23 | const [rule] = makeRule('margin');
24 | expect(rule({ margin: -23 })).toStrictEqual({ margin: '-23px' });
25 | expect(rule({ margin: -33 })).toStrictEqual({ margin: '-33px' });
26 | });
27 | test('number scale %', () => {
28 | const [rule] = makeRule('margin');
29 | expect(rule({ margin: 1 / 2 })).toStrictEqual({ margin: '0.5px' });
30 | });
31 | test('if value in theme is str', () => {
32 | const [rule] = makeRule('margin');
33 | expect(rule({ margin: 1, theme: { space: ['0', '33em'] } })).toStrictEqual({
34 | margin: '33em',
35 | });
36 | expect(rule({ margin: -1, theme: { space: ['0', '33em'] } })).toStrictEqual({
37 | margin: '-33em',
38 | });
39 | expect(rule({ margin: 0 })).toStrictEqual({ margin: 0 });
40 | });
41 | });
42 | describe('Width transformer', () => {
43 | test('number scale %', () => {
44 | const [rule] = makeRule('width');
45 | expect(rule({ width: 1 })).toStrictEqual({ width: '100%' });
46 | expect(rule({ width: 1 / 2 })).toStrictEqual({ width: '50%' });
47 | expect(rule({ width: 1 / 5 })).toStrictEqual({ width: '20%' });
48 | });
49 | test('number scale px', () => {
50 | const [rule] = makeRule('width');
51 | expect(rule({ width: 11 })).toStrictEqual({ width: '11px' });
52 | expect(rule({ width: 111 })).toStrictEqual({ width: '111px' });
53 | });
54 | test('number scale strict px', () => {
55 | const [rule] = makeRule('width');
56 | expect(rule({ width: '11px' })).toStrictEqual({ width: '11px' });
57 | expect(rule({ width: '111px' })).toStrictEqual({ width: '111px' });
58 | });
59 | test('number scale strict em/rem', () => {
60 | const [rule] = makeRule('width');
61 | expect(rule({ width: '11em' })).toStrictEqual({ width: '11em' });
62 | expect(rule({ width: '111rem' })).toStrictEqual({ width: '111rem' });
63 | });
64 | });
65 | describe('fontSize transformer', () => {
66 | test('number scale', () => {
67 | const [rule] = makeRule('fontSize');
68 | expect(rule({ fontSize: 1 })).toStrictEqual({ fontSize: '14px' });
69 | expect(rule({ fontSize: 0 })).toStrictEqual({ fontSize: '12px' });
70 | expect(rule({ fontSize: 2 })).toStrictEqual({ fontSize: '16px' });
71 | });
72 | test('pixel number', () => {
73 | const [rule] = makeRule('fontSize');
74 | expect(rule({ fontSize: 14 })).toStrictEqual({ fontSize: '14px' });
75 | expect(rule({ fontSize: 12 })).toStrictEqual({ fontSize: '12px' });
76 | expect(rule({ fontSize: 16 })).toStrictEqual({ fontSize: '16px' });
77 | });
78 | test('pixel string', () => {
79 | const [rule] = makeRule('fontSize');
80 | expect(rule({ fontSize: '14px' })).toStrictEqual({ fontSize: '14px' });
81 | expect(rule({ fontSize: '12px' })).toStrictEqual({ fontSize: '12px' });
82 | expect(rule({ fontSize: '16px' })).toStrictEqual({ fontSize: '16px' });
83 | });
84 | test('em string', () => {
85 | const [rule] = makeRule('fontSize');
86 | expect(rule({ fontSize: '2em' })).toStrictEqual({ fontSize: '2em' });
87 | expect(rule({ fontSize: '6em' })).toStrictEqual({ fontSize: '6em' });
88 | expect(rule({ fontSize: '1em' })).toStrictEqual({ fontSize: '1em' });
89 | });
90 | });
91 | });
92 |
--------------------------------------------------------------------------------
/src/wrapper.js:
--------------------------------------------------------------------------------
1 | import { isArray } from 'lodash/fp';
2 | import bootstrap from './styles';
3 | import dict from './dict';
4 | import clearProps from './clear-props';
5 | import normalize from './normalize-props';
6 |
7 | const defaultStyles = Object.keys(dict);
8 |
9 | export const isTemplate = arg => isArray(arg);
10 |
11 | export const makeComponent = (styled, tag, styles, config, other) => {
12 | const [rules, propTypes] = bootstrap(styles, config);
13 | let Component;
14 | if (config.omit) {
15 | Component = styled(clearProps(tag, config))(...other, ...rules);
16 | } else {
17 | Component = styled(tag)(other, ...rules);
18 | }
19 | if (config.normalize) {
20 | Component = normalize(Component);
21 | }
22 | if (config.propTypes) {
23 | Component.propTypes = propTypes;
24 | }
25 | if (config.name) {
26 | Component.displayName = config.name;
27 | }
28 | return Component;
29 | };
30 |
31 | export const makeElementary = styled => (tag, config = {}, ...other) => {
32 | const styles = config.styles || defaultStyles;
33 | if (isTemplate(config)) {
34 | return makeComponent(styled, tag, styles, {}, config);
35 | }
36 | return makeComponent(styled, tag, styles, config, other);
37 | };
38 |
39 | export const wrap = styled => {
40 | const elementary = makeElementary(styled);
41 | return Object.keys(styled).reduce(
42 | (acc, tag) => {
43 | acc[tag] = elementary.bind(null, tag);
44 | return acc;
45 | },
46 | tag => elementary.bind(null, tag),
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/test/__snapshots__/sc-ext.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`sc setup works 1`] = `
4 | .c0 {
5 | color: red;
6 | }
7 |
8 |
11 | `;
12 |
--------------------------------------------------------------------------------
/test/__snapshots__/sc.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`sc setup works 1`] = `
4 | .c0 {
5 | color: red;
6 | }
7 |
8 |
11 | `;
12 |
--------------------------------------------------------------------------------
/test/flex-box.js:
--------------------------------------------------------------------------------
1 | import elementary from '../src';
2 |
3 | export const Box = elementary.div({
4 | styles: [
5 | 'display',
6 | 'height',
7 | 'minHeight',
8 | 'maxHeight',
9 | 'width',
10 | 'minWidth',
11 | 'maxWidth',
12 | 'padding',
13 | 'paddingTop',
14 | 'paddingRight',
15 | 'paddingBottom',
16 | 'paddingLeft',
17 | 'paddingX',
18 | 'paddingY',
19 | 'margin',
20 | 'marginTop',
21 | 'marginRight',
22 | 'marginBottom',
23 | 'marginLeft',
24 | 'marginX',
25 | 'marginY',
26 | 'alignItems',
27 | 'alignContent',
28 | 'justifyItems',
29 | 'justifyContent',
30 | 'flexWrap',
31 | 'flexBasis',
32 | 'flexDirection',
33 | 'flex',
34 | 'order',
35 | 'justifySelf',
36 | 'alignSelf',
37 | 'zIndex',
38 | ],
39 | });
40 |
41 | export const Flex = elementary(Box)(
42 | {},
43 | {
44 | display: 'flex',
45 | },
46 | );
47 |
--------------------------------------------------------------------------------
/test/flexer-vs-rebass.test.js:
--------------------------------------------------------------------------------
1 | import Enzyme, { render } from 'enzyme';
2 | import React from 'react';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { Flex, Box } from 'rebass/styled-components';
5 |
6 | import { Flex as ElFlex, Box as ElBox } from './flex-box';
7 |
8 | const Elementary = () => (
9 |
10 |
11 |
12 | );
13 |
14 | const Rebass = () => (
15 |
16 |
17 |
18 | );
19 |
20 | Enzyme.configure({ adapter: new Adapter() });
21 |
22 | const banchIt = (calls, fn) => {
23 | const dateStart = new Date();
24 | // eslint-disable-next-line no-plusplus
25 | for (let i = 0; i < calls; i++) {
26 | fn();
27 | }
28 | return new Date() - dateStart;
29 | };
30 |
31 | it('Pure render time', () => {
32 | const rabass = banchIt(200, () => render());
33 | const elementary = banchIt(200, () => render());
34 | // console.log('Rebass:', rabass);
35 | // console.log('Elementary:', elementary);
36 | expect(rabass).toBeGreaterThan(elementary);
37 | });
38 |
--------------------------------------------------------------------------------
/test/sc-ext.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 | import renderer from 'react-test-renderer';
4 | import 'jest-styled-components';
5 | import elementary from '../src';
6 |
7 | const Button = styled.button`
8 | color: red;
9 | `;
10 |
11 | test('sc setup works', () => {
12 | const tree = renderer.create().toJSON();
13 | expect(tree).toMatchSnapshot();
14 | expect(tree).toHaveStyleRule('color', 'red');
15 | });
16 |
17 | const Box = elementary('div')(
18 | { effects: { hover: ':hover' }, styles: ['color'], aliases: true, mixins: true },
19 | { color: 'indigo' },
20 | );
21 |
22 | const Empty = elementary('div')({ styles: [] });
23 |
24 | describe('Elementary integration to SC extend', () => {
25 | test('extend with inline', () => {
26 | const tree = renderer.create().toJSON();
27 | expect(tree).toHaveStyleRule('color', 'blue');
28 | expect(tree).toHaveStyleRule('color', 'red', {
29 | modifier: ':hover',
30 | });
31 | });
32 | test('extend without inline', () => {
33 | const tree = renderer.create().toJSON();
34 | expect(tree).toHaveStyleRule('color', 'indigo');
35 | expect(tree).toHaveStyleRule('color', 'red', {
36 | modifier: ':hover',
37 | });
38 | });
39 | test('render without props', () => {
40 | const tree = renderer.create().toJSON();
41 | expect(tree).toBeDefined();
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/test/sc.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 | import renderer from 'react-test-renderer';
4 | import 'jest-styled-components';
5 | import elementary from '../src';
6 |
7 | const Button = styled.button`
8 | color: red;
9 | `;
10 |
11 | test('sc setup works', () => {
12 | const tree = renderer.create().toJSON();
13 | expect(tree).toMatchSnapshot();
14 | expect(tree).toHaveStyleRule('color', 'red');
15 | });
16 |
17 | const ElButton = elementary('button')({ styles: ['color'], aliases: true });
18 |
19 | const Box = elementary('div')({
20 | effects: { hover: ':hover' },
21 | aliases: true,
22 | styles: ['color'],
23 | omit: {},
24 | propTypes: true,
25 | });
26 |
27 | const ComposedBox = elementary('div')({
28 | effects: { hover: ':hover', focus: ':focus' },
29 | styles: ['color'],
30 | aliases: true,
31 | omit: {},
32 | });
33 |
34 | const NamedBox = elementary('div')({
35 | effects: { hover: ':hover', focus: ':focus' },
36 | styles: ['color'],
37 | aliases: true,
38 | name: 'NamedBox',
39 | });
40 |
41 | const ChainBox = elementary.div({
42 | effects: { hover: ':hover', focus: ':focus' },
43 | aliases: true,
44 | styles: ['color'],
45 | });
46 |
47 | const ExtendedSC = elementary(Button)({
48 | effects: { hover: ':hover' },
49 | aliases: true,
50 | styles: ['color'],
51 | });
52 | const ExtendedEL = elementary(Box)({
53 | effects: { hover: ':hover' },
54 | aliases: true,
55 | styles: ['margin'],
56 | });
57 | const WithIncorrectProp = elementary(Box)({
58 | effects: { hover: ':hover' },
59 | aliases: true,
60 | styles: ['fake'],
61 | });
62 |
63 | const ZeroConfig = elementary.div();
64 | const ZeroConfigWithTemplate = elementary.div`
65 | color: red;
66 | `;
67 |
68 | const BoxWithSizeAndEffects = elementary.div({ effects: { hover: ':hover' }, aliases: true });
69 |
70 | const BoxWithOmit = elementary.div({
71 | effects: { hover: ':hover' },
72 | omit: ['role'],
73 | aliases: true,
74 | normalize: true,
75 | });
76 |
77 | describe('Elementary integration to SC', () => {
78 | test('base', () => {
79 | const tree = renderer.create().toJSON();
80 | expect(tree).toHaveStyleRule('color', 'red');
81 | });
82 | test('media rules', () => {
83 | const tree = renderer.create().toJSON();
84 | expect(tree).toHaveStyleRule('color', 'red');
85 | expect(tree).toHaveStyleRule('color', 'blue', {
86 | media: 'screen and (min-width: 52em)',
87 | });
88 | });
89 | test('effect', () => {
90 | const tree = renderer.create().toJSON();
91 | expect(tree).toHaveStyleRule('color', 'blue');
92 | expect(tree).toHaveStyleRule('color', 'red', {
93 | modifier: ':hover',
94 | });
95 | });
96 | test('composed effect', () => {
97 | const tree = renderer.create().toJSON();
98 | expect(tree).toHaveStyleRule('color', 'blue');
99 | expect(tree).toHaveStyleRule('color', 'red', {
100 | modifier: ':hover',
101 | });
102 | expect(tree).toHaveStyleRule('color', 'tomato', {
103 | modifier: ':focus',
104 | });
105 | });
106 | test('media effect', () => {
107 | const tree = renderer.create().toJSON();
108 | expect(tree).toHaveStyleRule('color', 'blue');
109 | expect(tree).toHaveStyleRule('color', 'red', {
110 | modifier: ':hover',
111 | });
112 | expect(tree).toHaveStyleRule('color', 'green', {
113 | media: 'screen and (min-width: 52em)',
114 | modifier: ':hover',
115 | });
116 | });
117 | test('chain call from elemetary', () => {
118 | const tree = renderer.create().toJSON();
119 | expect(tree).toHaveStyleRule('color', 'blue');
120 | });
121 | test('extend from sc component', () => {
122 | const tree = renderer.create().toJSON();
123 | expect(tree).toHaveStyleRule('color', 'blue');
124 | });
125 | test('extend from el component', () => {
126 | const tree = renderer.create().toJSON();
127 | // expect(tree).toHaveStyleRule('color', 'blue');
128 | expect(tree).toHaveStyleRule('margin', '100px');
129 | });
130 | test('with incorrect prop', () => {
131 | const tree = renderer.create().toJSON();
132 | expect(tree).toBeDefined();
133 | });
134 | test('zero-config component', () => {
135 | const tree = renderer.create().toJSON();
136 | expect(tree).toHaveStyleRule('color', 'blue');
137 | expect(tree).toHaveStyleRule('margin', '100px');
138 | });
139 | test('zero-config component with template', () => {
140 | const tree = renderer.create().toJSON();
141 | expect(tree).toHaveStyleRule('color', 'red');
142 | expect(tree).toHaveStyleRule('margin', '100px');
143 | });
144 | test('compoosed rule', () => {
145 | const tree = renderer.create().toJSON();
146 | expect(tree).toHaveStyleRule('height', '20px');
147 | expect(tree).toHaveStyleRule('width', '20px');
148 | });
149 | test('compoosed rule with media query', () => {
150 | const tree = renderer.create().toJSON();
151 | expect(tree).toHaveStyleRule('height', '30px', {
152 | media: 'screen and (min-width: 52em)',
153 | });
154 | expect(tree).toHaveStyleRule('width', '30px', {
155 | media: 'screen and (min-width: 52em)',
156 | });
157 | expect(tree).toHaveStyleRule('height', '20px');
158 | expect(tree).toHaveStyleRule('width', '20px');
159 | });
160 | test('compoosed rule & effect', () => {
161 | const tree = renderer.create().toJSON();
162 | expect(tree).toHaveStyleRule('height', '22px', {
163 | modifier: ':hover',
164 | });
165 | expect(tree).toHaveStyleRule('width', '22px', {
166 | modifier: ':hover',
167 | });
168 | });
169 | test('compoosed rule & effect & media', () => {
170 | const tree = renderer.create().toJSON();
171 | expect(tree).toHaveStyleRule('height', '30px', {
172 | media: 'screen and (min-width: 52em)',
173 | modifier: ':hover',
174 | });
175 | expect(tree).toHaveStyleRule('width', '30px', {
176 | media: 'screen and (min-width: 52em)',
177 | modifier: ':hover',
178 | });
179 | expect(tree).toHaveStyleRule('height', '22px', {
180 | modifier: ':hover',
181 | });
182 | expect(tree).toHaveStyleRule('width', '22px', {
183 | modifier: ':hover',
184 | });
185 | });
186 | test('config name to displayName', () => {
187 | expect(NamedBox.displayName).toStrictEqual('NamedBox');
188 | });
189 | test('omit props from html element', () => {
190 | const tree = renderer
191 | // eslint-disable-next-line jsx-a11y/aria-role
192 | .create()
193 | .toJSON();
194 | expect(tree.props.role).toBeUndefined();
195 | expect(tree.props.passrole).toBeDefined();
196 | });
197 | test('sc component with "as" bool props not thrown', () => {
198 | const tree = renderer
199 | // eslint-disable-next-line jsx-a11y/aria-role
200 | .create()
201 | .toJSON();
202 | expect(tree).toBeDefined();
203 | });
204 | });
205 |
--------------------------------------------------------------------------------