├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tobias Buschor 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 | # CSS variables - naming conventions 2 | 3 | This project aims to identify commonalities of css-variable names in different frameworks and to derive recommendations. 4 | 5 | It would be great if third-party components could rely on the availability of the same variables! 6 | 7 | 8 | ## Colors 9 | Best practice in my eyes: 10 | ```css 11 | --hsl-h: 38.8; 12 | --hsl-s: 80%; 13 | --hsl-l: 38.4%; 14 | 15 | --color: hsl(var(--hsl-h), var(--hsl-s), var(--hsl-l)); 16 | 17 | --color-light: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) ); 18 | --color-dark: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .7 ) ); 19 | 20 | --color-bg: hsl(var(--hsl-h), var(--hsl-s), 99.5%); 21 | --color-text: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .4 ) ); 22 | 23 | --hsl2-h: 20; 24 | --hsl2-s: var(--hsl-s); 25 | --hsl2-l: var(--hsl-l); 26 | --color2: hsl(var(--hsl2-h), var(--hsl2-s), var(--hsl2-l)); 27 | ... 28 | 29 | ``` 30 | Once css `lch()` is supported, `--lch-l` will be used 31 | 32 | 33 | **advantages:** at best, you just have to change the "hue" 34 | **disadvantage:** more code than if you define the colors directly 35 | 36 | also to be considered: 37 | `--color1`; instead of `--color` ? 38 | `--theme-color` would be like the Web App Manifest standard... 39 | `--theme-primary` often used, what can go wrong when just use `--color` ? (collisions?) 40 | 41 | 42 | 43 | ## Fonts 44 | --font 45 | --font2 46 | 47 | ## Layout 48 | 49 | spacing between sections 50 | eg. `--space:3rem;` --space2...? 51 | 52 | column- / table- / grid-gaps 53 | eg. `--gap:2rem;` `--col-gap:2rem;` `--row-gap:2rem;` 54 | 55 | (max) content-width 56 | eg. `--width:50rem` 57 | 58 | 59 | ## Increment / Decrement 60 | Many properties are often requested in different gradations. 61 | Examples: 62 | `--width-x`, `--space-x`, `--gray-x` 63 | Possibilities are: 64 | `--width-0` to `--width-10` (`--width` would then correspond to `--width-5`) 65 | `--width-0` to `--width-100` (`--width` would then correspond to `--width-50`) 66 | `--width-xxs` to `--width-xxl` (`--width` would then correspond to `--width-m`) 67 | 68 | Other recommendations? 69 | 70 | 71 | ## JS-generated / Read-only 72 | 73 | CSS variables that are controlled by js and should not be changed are labelled with the prefix `--js-`. 74 | Example: `--js-optimal-font-size` 75 | This practice helps to distinguish variables that are manipulated by JavaScript and should only be read from others. 76 | 77 | Alternatives would be: 78 | - --ro-var (readonly) 79 | - --r-var (read) 80 | - --gen (generated) 81 | 82 | 83 | ## Cascade Layers 84 | If I don't misunderstand, cascade levels can get messed up when using foreign code. 85 | Do we need defacto standards here? 86 | 87 | ```css 88 | @layer base; 89 | @layer theme; 90 | @layer components; 91 | @layer utilities; 92 | ``` 93 | 94 | ## Frameworks 95 | 96 | Open-Props 97 | https://open-props.style/ 98 | 99 | Pico.css 100 | https://github.com/picocss/pico/blob/master/css/pico.classless.css 101 | 102 | MVP.css 103 | https://andybrewer.github.io/mvp/#variables 104 | 105 | feathercss: 106 | https://github.com/elishaterada/feathercss/blob/master/dist/feather.css 107 | 108 | basic.css 109 | https://github.com/vladocar/Basic.css/blob/master/css/basic.css 110 | 111 | pollen: 112 | https://github.com/radioactivepesto/pollen/tree/master/src/lib 113 | 114 | ionic framework: 115 | https://ionicframework.com/docs/theming/colors 116 | 117 | suitcss: 118 | https://github.com/suitcss/suit/blob/master/packages/theme/lib/theme.css 119 | 120 | chota: 121 | https://jenil.github.io/chota/ 122 | 123 | bulma: 124 | https://bulma.io/documentation/customize/variables/ 125 | 126 | bootstrap: 127 | https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss 128 | 129 | material-design: 130 | https://github.com/material-components/material-components-web/blob/91aa2d6a613565546a3c47c375ad929f79c910b4/docs/theming.md#step-4-changing-the-theme-with-css-custom-properties 131 | 132 | microsoft fast: 133 | https://fast.design/docs/design/design-system 134 | 135 | ant.design: 136 | https://ant.design/docs/react/customize-theme 137 | 138 | zoo-web-components: 139 | https://github.com/zooplus/zoo-web-components 140 | 141 | ## Blog-posts 142 | 143 | https://uxdesign.cc/naming-design-tokens-9454818ed7cb 144 | 145 | https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 146 | 147 | https://www.youtube.com/watch?v=P7kR5dag8iw 148 | 149 | https://css-tricks.com/what-do-you-name-color-variables/ 150 | 151 | 152 | 153 | **take part** 154 | --------------------------------------------------------------------------------