├── .babelrc ├── .editorconfig ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── _config.yml ├── composer.js ├── index.js ├── package.json ├── src ├── composer.js ├── index.js ├── theme.js └── types.js ├── test ├── composer.js └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": "last 2 versions" 6 | } 7 | }], 8 | "stage-2" 9 | ], 10 | "plugins": ["transform-flow-strip-types"] 11 | } 12 | -------------------------------------------------------------------------------- /.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 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": [ 4 | "airbnb-base", 5 | "plugin:flowtype/recommended" 6 | ], 7 | "plugins": [ 8 | "flowtype", 9 | "flowtype-errors" 10 | ], 11 | "env": { 12 | "jest": true 13 | }, 14 | "rules": { 15 | "semi": [2, never], 16 | "comma-dangle": 0, 17 | "flowtype-errors/show-errors": 2, 18 | "import/prefer-default-export": 0 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/dist 3 | .*/coverage 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | *.js text eol=lf 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | coverage 4 | dist 5 | *.log 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - v6 4 | script: 5 | - npm run lint && npm test -- --coverage 6 | after_success: 7 | - bash <(curl -s https://codecov.io/bash) 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Diego Haz 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 | # styled-theme 💅🏿 2 | 3 | [![Generated with nod](https://img.shields.io/badge/generator-nod-2196F3.svg?style=flat-square)](https://github.com/diegohaz/nod) 4 | [![NPM version](https://img.shields.io/npm/v/styled-theme.svg?style=flat-square)](https://npmjs.org/package/styled-theme) 5 | [![Build Status](https://img.shields.io/travis/diegohaz/styled-theme/master.svg?style=flat-square)](https://travis-ci.org/diegohaz/styled-theme) [![Coverage Status](https://img.shields.io/codecov/c/github/diegohaz/styled-theme/master.svg?style=flat-square)](https://codecov.io/gh/diegohaz/styled-theme/branch/master) 6 | 7 | Theming system for [styled-components 💅](https://github.com/styled-components/styled-components) 8 | 9 | ## Install 10 | 11 | $ npm install --save styled-theme 12 | 13 | ## Usage 14 | 15 | Play with it on [WebpackBin](https://www.webpackbin.com/bins/-KeZfaFl3_761CAGa0CC) 16 | ```js 17 | import styled from 'styled-components' 18 | import { font, palette } from 'styled-theme' 19 | 20 | const Text = styled.span` 21 | font-family: ${font('primary')}; 22 | background-color: ${palette(1)}; 23 | color: ${palette('grayscale', 0, true)}; 24 | ` 25 | 26 | Text.defaultProps = { 27 | palette: 'primary' 28 | } 29 | ``` 30 | 31 | ```jsx 32 | Hello 33 | ``` 34 | 35 | ![image](https://cloud.githubusercontent.com/assets/3068563/21835155/f92c4a74-d7a1-11e6-85c1-93d6e447f98a.png) 36 | 37 | ```jsx 38 | Hello 39 | ``` 40 | 41 | ![image](https://cloud.githubusercontent.com/assets/3068563/21835169/18b3ea28-d7a2-11e6-8f3f-2fc76c706f45.png) 42 | 43 | ```jsx 44 | Hello 45 | ``` 46 | 47 | ![image](https://cloud.githubusercontent.com/assets/3068563/21835195/350f4514-d7a2-11e6-9095-4e30d04b3d61.png) 48 | 49 | ### Provide your own theme 50 | 51 | ```jsx 52 | import { ThemeProvider } from 'styled-components' 53 | 54 | const xmasTheme = { 55 | fonts: { 56 | primary: 'Georgia, serif' 57 | }, 58 | palette: { 59 | // red gradient 60 | primary: ['#D32F2F', '#F44336', '#F8877F', '#FFCDD2'] 61 | } 62 | } 63 | 64 | 65 | Hello 66 | 67 | ``` 68 | 69 | ![image](https://cloud.githubusercontent.com/assets/3068563/21835499/a49b94bc-d7a4-11e6-9cf3-ab41519cd962.png) 70 | 71 | ## Default theme structure 72 | 73 | This is the content of [`src/theme.js`](src/theme.js): 74 | 75 | ```js 76 | import coolorsToHex from 'coolors-to-hex' 77 | import { reversePalette } from './composer' 78 | 79 | const theme = {} 80 | 81 | theme.palette = { 82 | primary: coolorsToHex('https://coolors.co/1976d2-2196f3-71bcf7-97cef9-c2e2fb'), 83 | secondary: coolorsToHex('https://coolors.co/c2185b-e91e63-f06292-f48caf-f8bbd0'), 84 | danger: coolorsToHex('https://coolors.co/d32f2f-f44336-f8877f-f9a7a1-ffcdd2'), 85 | alert: coolorsToHex('https://coolors.co/ffa000-ffc107-ffd761-ffecb3-fff2ce'), 86 | success: coolorsToHex('https://coolors.co/388e3c-4caf50-7cc47f-9fd4a1-c8e6c9'), 87 | grayscale: ['#212121', '#616161', '#9e9e9e', '#bdbdbd', '#e0e0e0', '#ffffff'] 88 | } 89 | 90 | theme.reversePalette = reversePalette(theme.palette) 91 | 92 | theme.fonts = { 93 | primary: 'Helvetica Neue, Helvetica, Roboto, sans-serif', 94 | pre: 'Consolas, Liberation Mono, Menlo, Courier, monospace', 95 | quote: 'Georgia, serif' 96 | } 97 | 98 | theme.sizes = { 99 | maxWidth: '1100px' 100 | } 101 | 102 | export default theme 103 | ``` 104 | 105 | [`reversePalette`](#reversePalette) is a helper method. Import it from `styled-theme/composer`. 106 | 107 | ## API 108 | 109 | 110 | 111 | ### reversePalette 112 | 113 | Revert the palette 114 | 115 | **Parameters** 116 | 117 | - `palette` **[Palette](#palette)** 118 | 119 | **Examples** 120 | 121 | ```javascript 122 | reversePalette({ primary: ['red', 'yellow', 'green'] }) 123 | // { primary: ['green', 'yellow', 'red'] } 124 | ``` 125 | 126 | Returns **[Palette](#palette)** 127 | 128 | ### key 129 | 130 | Returns the value of `props.theme[path]` or `styledTheme[path]` 131 | 132 | **Parameters** 133 | 134 | - `path` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>)** 135 | - `defaultValue` **any** 136 | 137 | **Examples** 138 | 139 | ```javascript 140 | const Button = styled.button` 141 | font-family: ${key('fonts.primary')}; 142 | color: ${key(['colors', 'primary', 0])}; 143 | ` 144 | ``` 145 | 146 | Returns **any** 147 | 148 | ### font 149 | 150 | Shorthand to `key(['fonts', path])` 151 | 152 | **Parameters** 153 | 154 | - `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 155 | - `defaultValue` **any** 156 | 157 | **Examples** 158 | 159 | ```javascript 160 | const Button = styled.button` 161 | font-family: ${font('primary')}; 162 | ` 163 | ``` 164 | 165 | Returns **[Font](#font)** 166 | 167 | ### size 168 | 169 | Shorthand to `key(['sizes', path])` 170 | 171 | **Parameters** 172 | 173 | - `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 174 | - `defaultValue` **any** 175 | 176 | **Examples** 177 | 178 | ```javascript 179 | const Button = styled.button` 180 | padding: ${size('padding')}; 181 | ` 182 | ``` 183 | 184 | Returns **[Size](#size)** 185 | 186 | ### palette 187 | 188 | Returns the value of `props.theme[palette || reversePalette][path][index]` or 189 | `styledTheme[palette || reversePalette][path][index]` (default theme) 190 | 191 | The arguments can be passed in any order, as long as types are kept. 192 | 193 | **Parameters** 194 | 195 | - `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** The index of tone in theme palette tones array 196 | - `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** The key of the tones in theme palette object (optional, default `props.palette`) 197 | - `exceptions` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** An object with path as key and index as value 198 | - `reverse` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Flag to return tone from `reversePalette` or `palette` 199 | - `defaultValue` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Default value 200 | - `args` **...any** 201 | 202 | **Examples** 203 | 204 | ```javascript 205 | // index = 1 206 | // exception = { grayscale: 0 } 207 | // reverse = true 208 | const Button = styled.button` 209 | background-color: ${palette({ grayscale: 0 }, 1, true)}; 210 | ` 211 | 212 | // renders props.theme.reversePalette.grayscale[0] 213 |