├── package.json ├── LICENSE ├── readme.md ├── .gitignore └── index.js /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "radix-colors-for-tailwind", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/samrobbins85/radix-colors-for-tailwind.git" 9 | }, 10 | "author": "Sam Robbins", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/samrobbins85/radix-colors-for-tailwind/issues" 14 | }, 15 | "homepage": "https://github.com/samrobbins85/radix-colors-for-tailwind#readme", 16 | "dependencies": { 17 | "@radix-ui/colors": "^0.1.7", 18 | "tailwindcss": "^2.2.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2021 Sam Robbins 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Radix colors for Tailwind 2 | 3 | This adds the [radix color palette](https://www.radix-ui.com/colors) to Tailwind CSS 4 | 5 | ## Installation 6 | 7 | You can install this using 8 | 9 | ```sh 10 | npm install radix-colors-for-tailwind 11 | ``` 12 | 13 | or 14 | 15 | ```sh 16 | yarn add radix-colors-for-tailwind 17 | ``` 18 | 19 | ## Usage 20 | 21 | You can add this plugin under the `plugins` key of your `tailwind.config.js` as follows: 22 | 23 | ```js 24 | plugins: [ 25 | require("radix-colors-for-tailwind")({ 26 | colors: ["blue", "cyan", "lime"], 27 | }), 28 | ], 29 | ``` 30 | 31 | Replace the colours in the `colors` array with whatever colours you want including 32 | 33 | Colours can then be accessed under the `radix` property, so the second step of blue would be `radix-blue2`, or if you were to use this for example with text colour, `text-radix-blue2`. 34 | 35 | ## Additional features 36 | 37 | This package also includes a range of component classes to speed up development, these are based on the suggestions for how to use [the scale](https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale) 38 | 39 | ### `color-bg` 40 | 41 | If you do `color-bg` e.g. `blue-bg`, you will get a background color of step `3`, this follows the pattern explained [here](https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale#steps-35-component-backgrounds). If you want to make this interactive, instead use the class `color-bg-int`, and you will also have states for hover and focus. 42 | 43 | ### `color-cta` 44 | 45 | Following a similar pattern, `color-cta` will give you a background color of step `4` for a darker look, and similarly gives you the option of `color-cta-int` to have hover and focus states 46 | 47 | ### `color-border` 48 | 49 | If you want to add borders to your components, you can use the `color-border` pattern, this uses step `6` by default, but will use step `7` if you do `color-border-int` 50 | 51 | ### `color-solid` 52 | 53 | If you want solid backgrounds to your components rather than the lighter ones provided by the other classes, then you can use `color-solid`, giving you a background of step `9`, again, there's a `color-solid-int` option that also gives you a hover state at step `10` 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/node 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=node 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | .pnpm-debug.log* 14 | 15 | # Diagnostic reports (https://nodejs.org/api/report.html) 16 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 17 | 18 | # Runtime data 19 | pids 20 | *.pid 21 | *.seed 22 | *.pid.lock 23 | 24 | # Directory for instrumented libs generated by jscoverage/JSCover 25 | lib-cov 26 | 27 | # Coverage directory used by tools like istanbul 28 | coverage 29 | *.lcov 30 | 31 | # nyc test coverage 32 | .nyc_output 33 | 34 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 35 | .grunt 36 | 37 | # Bower dependency directory (https://bower.io/) 38 | bower_components 39 | 40 | # node-waf configuration 41 | .lock-wscript 42 | 43 | # Compiled binary addons (https://nodejs.org/api/addons.html) 44 | build/Release 45 | 46 | # Dependency directories 47 | node_modules/ 48 | jspm_packages/ 49 | 50 | # Snowpack dependency directory (https://snowpack.dev/) 51 | web_modules/ 52 | 53 | # TypeScript cache 54 | *.tsbuildinfo 55 | 56 | # Optional npm cache directory 57 | .npm 58 | 59 | # Optional eslint cache 60 | .eslintcache 61 | 62 | # Microbundle cache 63 | .rpt2_cache/ 64 | .rts2_cache_cjs/ 65 | .rts2_cache_es/ 66 | .rts2_cache_umd/ 67 | 68 | # Optional REPL history 69 | .node_repl_history 70 | 71 | # Output of 'npm pack' 72 | *.tgz 73 | 74 | # Yarn Integrity file 75 | .yarn-integrity 76 | 77 | # dotenv environment variables file 78 | .env 79 | .env.test 80 | .env.production 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # Serverless directories 104 | .serverless/ 105 | 106 | # FuseBox cache 107 | .fusebox/ 108 | 109 | # DynamoDB Local files 110 | .dynamodb/ 111 | 112 | # TernJS port file 113 | .tern-port 114 | 115 | # Stores VSCode versions used for testing VSCode extensions 116 | .vscode-test 117 | 118 | # yarn v2 119 | .yarn/cache 120 | .yarn/unplugged 121 | .yarn/build-state.yml 122 | .yarn/install-state.gz 123 | .pnp.* 124 | 125 | # End of https://www.toptal.com/developers/gitignore/api/node 126 | 127 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const plugin = require("tailwindcss/plugin"); 2 | const radixColors = require("@radix-ui/colors"); 3 | 4 | module.exports = plugin.withOptions( 5 | function (options) { 6 | return function ({ addComponents, addBase }) { 7 | let radixStyles = {}; 8 | let lightColors = {}; 9 | let darkColors = {}; 10 | let radix = options.colors ?? []; 11 | radix.forEach((color) => { 12 | const light = { ...radixColors[color] }; 13 | Object.keys(light).forEach( 14 | (oldKey) => 15 | delete Object.assign(light, { 16 | ["--" + oldKey]: light[oldKey], 17 | })[oldKey] 18 | ); 19 | const dark = { ...radixColors[color + "Dark"] }; 20 | Object.keys(dark).forEach( 21 | (oldKey) => 22 | delete Object.assign(dark, { 23 | ["--" + oldKey]: dark[oldKey], 24 | })[oldKey] 25 | ); 26 | darkColors = { ...darkColors, ...dark }; 27 | lightColors = { ...lightColors, ...light }; 28 | const styles = { 29 | ["." + color + "-bg"]: { 30 | backgroundColor: `var(--${color}3)`, 31 | }, 32 | ["." + color + "-bg-int"]: { 33 | backgroundColor: `var(--${color}3)`, 34 | }, 35 | ["." + color + "-bg-int:hover"]: { 36 | backgroundColor: `var(--${color}4)`, 37 | }, 38 | ["." + color + "-bg-int:focus"]: { 39 | backgroundColor: `var(--${color}5)`, 40 | }, 41 | ["." + color + "-cta"]: { 42 | backgroundColor: `var(--${color}4)`, 43 | }, 44 | ["." + color + "-cta-int"]: { 45 | backgroundColor: `var(--${color}4)`, 46 | }, 47 | ["." + color + "-cta-int:hover"]: { 48 | backgroundColor: `var(--${color}5)`, 49 | }, 50 | ["." + color + "-cta-int:focus"]: { 51 | backgroundColor: `var(--${color}6)`, 52 | }, 53 | ["." + color + "-border"]: { 54 | borderColor: `var(--${color}6)`, 55 | }, 56 | ["." + color + "-border-int"]: { 57 | borderColor: `var(--${color}7)`, 58 | }, 59 | ["." + color + "-border-int:hover"]: { 60 | borderColor: `var(--${color}8)`, 61 | }, 62 | ["." + color + "-solid"]: { 63 | backgroundColor: `var(--${color}9)`, 64 | }, 65 | ["." + color + "-solid-int"]: { 66 | backgroundColor: `var(--${color}9)`, 67 | }, 68 | ["." + color + "-solid-int:hover"]: { 69 | backgroundColor: `var(--${color}10)`, 70 | }, 71 | }; 72 | radixStyles = { ...radixStyles, ...styles }; 73 | }); 74 | addBase({ 75 | ":root": { 76 | ...lightColors, 77 | }, 78 | ".dark": { 79 | ...darkColors, 80 | }, 81 | }); 82 | addComponents(radixStyles); 83 | }; 84 | }, 85 | function (options) { 86 | const chosen = options.colors ?? []; 87 | const filtered = Object.keys(radixColors) 88 | .filter( 89 | (color) => 90 | chosen.includes(color) && 91 | !color.includes("A") && 92 | !color.includes("Dark") 93 | ) 94 | .reduce((obj, key) => { 95 | Object.keys(radixColors[key]).forEach( 96 | (color) => (obj[color] = `var(--${color})`) 97 | ); 98 | return obj; 99 | }, {}); 100 | return { 101 | theme: { 102 | extend: { 103 | colors: { 104 | radix: { 105 | ...filtered, 106 | }, 107 | }, 108 | }, 109 | }, 110 | }; 111 | } 112 | ); 113 | --------------------------------------------------------------------------------