1 | <div align="center">
|
2 |
|
3 | ![Open Props Logo](https://user-images.githubusercontent.com/1134620/141246730-7df4cf2a-6249-42ca-a01b-494c3ccddabe.png)
|
4 |
|
5 | ## Open Source CSS Variables
|
6 |
|
7 | `colors` `gradients` `shadows` `aspect ratios` `typography`
|
8 | `easings` `animations` `sizes` `borders` `z-indexes` `media-queries`
|
9 |
|
10 | [![Tests](https://github.com/argyleink/open-props/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/argyleink/open-props/actions/workflows/tests.yml)
|
11 | [![npm version](http://img.shields.io/npm/v/open-props.svg)](https://npmjs.org/package/open-props)
|
12 | ![Discord](https://badgen.net/discord/members/AqA4fU886r)
|
13 |
|
14 | <br>
|
15 |
|
16 | ### Need help? 👉 [Discord](https://discord.gg/AqA4fU886r)
|
17 |
|
18 | </div>
|
19 |
|
20 | <br>
|
21 |
|
22 | #### CDN ([browse](https://unpkg.com/browse/open-props@latest/))
|
23 |
|
24 | - [https://unpkg.com/open-props](https://unpkg.com/open-props)
|
25 | - [https://unpkg.com/open-props/normalize.min.css](https://unpkg.com/open-props/normalize.min.css) - Normalize (light + dark) [demo](https://codepen.io/argyleink/pen/KKvRORE)
|
26 | - [https://unpkg.com/open-props/open-props.tokens.json](https://unpkg.com/open-props/open-props.tokens.json) - Design Tokens
|
27 | - [https://unpkg.com/open-props/open-props.figma-tokens.sync.json](https://unpkg.com/open-props/open-props.figma-tokens.sync.json) - Figma Design Tokens
|
28 | - [https://unpkg.com/open-props/open-props.style-dictionary-tokens.json](https://unpkg.com/open-props/open-props.style-dictionary-tokens.json) - Style Dictionary Tokens
|
29 |
|
30 | #### CLI
|
31 |
|
32 | - `npm run build` - creates all the various minified bundles of props
|