├── .github
    └── workflows
    │   ├── main.yaml
    │   └── publish.yaml
├── .gitignore
├── LICENSE
├── README.md
├── docs
    ├── .gitignore
    ├── README.md
    ├── astro.config.mjs
    ├── package.json
    ├── postcss.config.cjs
    ├── public
    │   ├── favicon.ico
    │   └── icons.svg
    ├── src
    │   ├── components
    │   │   └── sample.mdx
    │   ├── env.d.ts
    │   ├── layouts
    │   │   └── BaseLayout.astro
    │   ├── pages
    │   │   ├── index.astro
    │   │   ├── theme.ts
    │   │   └── typography.astro
    │   └── tailwind.css
    ├── tailwind.config.ts
    └── tsconfig.json
├── package.json
├── packages
    ├── palette
    │   ├── package.json
    │   ├── src
    │   │   ├── alias.test.ts
    │   │   ├── alias.ts
    │   │   ├── index.ts
    │   │   ├── plugin.test.ts
    │   │   └── plugin.ts
    │   ├── tsconfig.json
    │   └── tsup.config.ts
    └── typography
    │   ├── package.json
    │   ├── src
    │       └── index.ts
    │   ├── tsconfig.json
    │   └── tsup.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── prettier.config.cjs
├── tsconfig.json
└── turbo.json


/.github/workflows/main.yaml:
--------------------------------------------------------------------------------
 1 | on:
 2 |     push:
 3 |         branches:
 4 |             - main
 5 |     pull_request:
 6 |         branches:
 7 |             - main
 8 | jobs:
 9 |     build:
10 |         runs-on: ubuntu-22.04
11 |         strategy:
12 |             matrix:
13 |                 node-version: [18, 20]
14 |         steps:
15 |             - uses: actions/checkout@v3
16 |             - uses: pnpm/action-setup@v2
17 |               with:
18 |                   version: 8
19 |             - name: Use Node v${{ matrix.node-version }}
20 |               uses: actions/setup-node@v3
21 |               with:
22 |                   node-version: ${{ matrix.node-version }}
23 |                   cache: "pnpm"
24 |             - name: Install dependencies
25 |               run: pnpm install
26 |             - name: Sherif
27 |               run: pnpm run sherif
28 |             - name: Publint
29 |               run: pnpm run publint
30 |             - name: Run tests
31 |               run: pnpm run test
32 |             - name: Build
33 |               run: pnpm run build
34 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yaml:
--------------------------------------------------------------------------------
 1 | on:
 2 |     push:
 3 |         tags:
 4 |             - "v*"
 5 | jobs:
 6 |     build:
 7 |         runs-on: ubuntu-22.04
 8 |         steps:
 9 |             - uses: actions/checkout@v3
10 |             - uses: pnpm/action-setup@v2
11 |               with:
12 |                   version: 8
13 |             - name: Use Node v20
14 |               uses: actions/setup-node@v3
15 |               with:
16 |                   node-version: 20
17 |                   cache: "pnpm"
18 |             - name: Install dependencies
19 |               run: pnpm install
20 |             - name: Sherif
21 |               run: pnpm run sherif
22 |             - name: Publint
23 |               run: pnpm run publint
24 |             - name: Run tests
25 |               run: pnpm run test
26 |             - name: Build
27 |               run: pnpm run build
28 |             - name: Publish
29 |               run: pnpm publish --filter windy-radix-palette
30 |               env:
31 |                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .turbo
4 | .astro
5 | .vercel
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Ross Bratton
 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 | # Windy Radix Palette
  2 | 
  3 | An unofficial package to improve the compatibility of [Radix Colors](https://www.radix-ui.com/colors) and [Tailwind](https://tailwindcss.com/).
  4 | 
  5 | ### [You probably don't need to use this plugin!](#using-radix-colors-directly)
  6 | 
  7 | > [!WARNING]
  8 | > The following documentation is for version 2.x of this package.
  9 | > v1.0.0 of this package has an issue that makes it unable to display P3 colors. There is a v2.0.0-beta.x version available which fixes this issue.
 10 | 
 11 | ## Installation
 12 | 
 13 | ```sh
 14 | npm install --save-dev windy-radix-palette @radix-ui/colors
 15 | ```
 16 | 
 17 | ## Usage
 18 | 
 19 | Add the plugin to your Tailwind config:
 20 | 
 21 | ```js
 22 | const { createPlugin } = require("windy-radix-palette");
 23 | 
 24 | const colors = createPlugin();
 25 | 
 26 | module.exports = {
 27 | 	plugins: [colors.plugin],
 28 | };
 29 | ```
 30 | 
 31 | Then you can use the classes in your markup!
 32 | 
 33 | ```html
 34 | <button class="bg-tomato-4 hover:bg-tomato-5 text-tomatoA-11">Button</button>
 35 | ```
 36 | 
 37 | ## Customization
 38 | 
 39 | ### Colors
 40 | 
 41 | By default, this plugin will add CSS properties for **all** of the available Radix Colors. This adds many hundreds of CSS properties into your stylesheet. If this is an issue for your case, you can tell the plugin which colors you'd like it to generate for you:
 42 | 
 43 | ```js
 44 | const radixColors = require("@radix-ui/colors");
 45 | const { createPlugin } = require("windy-radix-palette");
 46 | 
 47 | const colors = createPlugin({
 48 | 	colors: {
 49 | 		mauveA: radixColors.mauveA,
 50 | 		mauveDarkA: radixColors.mauveDarkA,
 51 | 		red: radixColors.red,
 52 | 		redDark: radixColors.redDark,
 53 | 	},
 54 | });
 55 | 
 56 | module.exports = {
 57 | 	plugins: [colors.plugin],
 58 | };
 59 | ```
 60 | 
 61 | ## Aliasing
 62 | 
 63 | The return value from `createPlugin()` includes an `alias` function. This function can be called to help create aliases for Radix Colors, or arbitrary values.
 64 | 
 65 | ### Semantic aliases
 66 | 
 67 | Creating semantic aliases for colors can be helpful to when it comes to theming. For example, in western culture, it would be common to see `red` mapped to "danger", `yellow` to "warning", and `green` to "success".
 68 | 
 69 | ```js
 70 | const { createPlugin } = require("windy-radix-palette");
 71 | 
 72 | const colors = createPlugin();
 73 | 
 74 | module.exports = {
 75 | 	theme: {
 76 | 		extend: {
 77 | 			colors: {
 78 | 				danger: {
 79 | 					1: colors.alias("red.1"),
 80 | 					2: colors.alias("red.2"),
 81 | 				},
 82 | 				warning: {
 83 | 					1: colors.alias("yellow.1"),
 84 | 					2: colors.alias("yellow.2"),
 85 | 				},
 86 | 				success: {
 87 | 					1: colors.alias("green.1"),
 88 | 					2: colors.alias("green.2"),
 89 | 				},
 90 | 			},
 91 | 		},
 92 | 	},
 93 | };
 94 | ```
 95 | 
 96 | ### Renaming scales
 97 | 
 98 | If you wish to rename a scale, just omit the scale step from the alias:
 99 | 
100 | ```js
101 | const { createPlugin } = require("windy-radix-palette");
102 | 
103 | const colors = createPlugin();
104 | 
105 | module.exports = {
106 | 	theme: {
107 | 		extend: {
108 | 			colors: {
109 | 				danger: colors.alias("red"),
110 | 				warning: colors.alias("yellow"),
111 | 				success: colors.alias("green"),
112 | 			},
113 | 		},
114 | 	},
115 | };
116 | ```
117 | 
118 | This will make `danger-1` map to `red-1`, `danger-2` map to `red-2`, etc.
119 | 
120 | ### Mutable aliases
121 | 
122 | > When designing for both light and dark modes, you sometimes need to map a variable to one color in light mode, and another color in dark mode. Common examples include:
123 | >
124 | > -   Components that have a white background in light mode and a subtle gray background in dark mode. For example, Card, Popover, DropdownMenu, HoverCard, Dialog etc.
125 | > -   Components that have a transparent black background in light mode and a transparent white background in dark mode. For example, Tooltip.
126 | > -   Shadows that are saturated, transparent gray in light mode, and pure black in dark mode.
127 | > -   An overlay that is light transparent black in light mode, and a darker transparent black in dark mode.
128 | >
129 | > — [Radix Colors](https://www.radix-ui.com/colors/docs/overview/aliasing#mutable-aliases)
130 | 
131 | ```js
132 | const { createPlugin } = require("windy-radix-palette");
133 | 
134 | const colors = createPlugin();
135 | 
136 | module.exports = {
137 | 	theme: {
138 | 		extend: {
139 | 			colors: {
140 | 				panel: colors.alias({
141 | 					light: "white",
142 | 					dark: "slate.2",
143 | 				}),
144 | 				"panel-contrast": colors.alias({
145 | 					light: "blackA.9",
146 | 					dark: "whiteA.9",
147 | 				}),
148 | 				shadow: colors.alias({
149 | 					light: "slateA.3",
150 | 					dark: "black",
151 | 				}),
152 | 				overlay: colors.alias({
153 | 					light: "blackA.8",
154 | 					dark: "blackA.11",
155 | 				}),
156 | 			},
157 | 		},
158 | 	},
159 | };
160 | ```
161 | 
162 | It is also possible to use a mutable alias on an entire scale:
163 | 
164 | ```js
165 | const { createPlugin } = require("windy-radix-palette");
166 | 
167 | const colors = createPlugin();
168 | 
169 | module.exports = {
170 | 	theme: {
171 | 		extend: {
172 | 			colors: {
173 | 				overlay: colors.alias({
174 | 					light: "blackA",
175 | 					dark: "whiteA",
176 | 				}),
177 | 			},
178 | 		},
179 | 	},
180 | };
181 | ```
182 | 
183 | ### Arbitrary values
184 | 
185 | You can also use the `alias` function to create aliases for arbitrary values:
186 | 
187 | ```js
188 | const { createPlugin } = require("windy-radix-palette");
189 | 
190 | const colors = createPlugin();
191 | 
192 | module.exports = {
193 | 	theme: {
194 | 		extend: {
195 | 			colors: {
196 | 				surface: colors.alias({
197 | 					light: "hsla(0, 0%, 100%, 0.9)",
198 | 					dark: "rgba(0, 0, 0, 0.25)",
199 | 				}),
200 | 			},
201 | 		},
202 | 	},
203 | };
204 | ```
205 | 
206 | ### CSS variable names
207 | 
208 | The `alias` function will try not to create any extra CSS variables if they aren't required. In the case of mutable aliases, however, a CSS variable must be created so that we have a consistent value to reference in Tailwind config.
209 | 
210 | By default, any CSS variables created will have the name `--wrp-alias-<unique-id>`, where `<unique-id>` is replaced with a randomly generated sequence of characters.
211 | 
212 | If you want to have control over the name of the generated variable, you can pass a `name` property to your alias. The variable will use the name provided, for example, the following code will create a CSS variable `--surface`:
213 | 
214 | ```js
215 | const { createPlugin } = require("windy-radix-palette");
216 | 
217 | const colors = createPlugin();
218 | 
219 | module.exports = {
220 | 	theme: {
221 | 		extend: {
222 | 			colors: {
223 | 				surface: colors.alias({
224 | 					name: "surface",
225 | 					light: "hsla(0, 0%, 100%, 0.9)",
226 | 					dark: "rgba(0, 0, 0, 0.25)",
227 | 				}),
228 | 			},
229 | 		},
230 | 	},
231 | };
232 | ```
233 | 
234 | ### Opacity Support
235 | 
236 | Use of Tailwind's opacity modifier is disabled by default. This means that classes like the following will not work with the default plugin configuration:
237 | 
238 | ```html
239 | <button class="bg-red-9/50">Button</button>
240 | ```
241 | 
242 | This is partially an opinionated decision (the Radix Colors are hand-picked with purpose), but also because it makes support for the P3 colors included in Radix Colors v3 a much better experience for users of this plugin.
243 | 
244 | ```js
245 | const { createPlugin } = require("windy-radix-palette");
246 | 
247 | const colors = createPlugin({
248 | 	opacitySupport: true,
249 | });
250 | 
251 | module.exports = {
252 | 	plugins: [colors.plugin],
253 | };
254 | ```
255 | 
256 | If you'd like to enable support for the opacity modifier, bear in mind that P3 colors will not be automatically applied when support is detected, and instead you will have to do this manually, with the help of the `p3` modifier added by this plugin:
257 | 
258 | ```html
259 | <button class="bg-red-9 p3:bg-redP3-9">Button</button>
260 | ```
261 | 
262 | ### Root Selector
263 | 
264 | By default, this plugin will add CSS properties to the `:root` CSS [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:root). The selector where these properties are placed can be customized via the `rootSelector` option. For example, when working with shadow DOM you might want to put the properties under the `:host` selector:
265 | 
266 | ```js
267 | const { createPlugin } = require("windy-radix-palette");
268 | 
269 | const colors = createPlugin({
270 | 	rootSelector: ":host",
271 | });
272 | 
273 | module.exports = {
274 | 	plugins: [colors.plugin],
275 | };
276 | ```
277 | 
278 | ## Dark mode
279 | 
280 | The colors in this palette will automatically switch to the light/dark variant based on your Tailwind dark mode settings:
281 | 
282 | -   When `darkMode` is not set, or is set to `'media'`, the palette will change based on the user's preferred color scheme ([`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme))
283 | -   When `darkMode` is set to `'class'`, the palette will change based on the presence of the dark mode selector (defaults to `.dark`), note that you can [customize the dark mode selector](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name) if required
284 | 
285 | ## Typography
286 | 
287 | We also ship a typography preset that is meant to be used in combination with `windy-radix-palette` and `@tailwindcss/typography`. It adds custom color themes for all available Radix colors.
288 | 
289 | ### Installation
290 | 
291 | ```sh
292 | npm install --save-dev windy-radix-typography @tailwindcss/typography
293 | ```
294 | 
295 | ### Usage
296 | 
297 | Add it to your Tailwind config:
298 | 
299 | ```js
300 | const { createPlugin } = require("windy-radix-palette");
301 | 
302 | const colors = createPlugin();
303 | 
304 | module.exports = {
305 | 	plugins: [colors.plugin, require("@tailwindcss/typography")],
306 | 	presets: [require("windy-radix-typography")],
307 | };
308 | ```
309 | 
310 | Now you can use the prose themes in your markup:
311 | 
312 | ```html
313 | <div class="prose prose-mauve">...</div>
314 | ```
315 | 
316 | ### Customization
317 | 
318 | Customization is done in the way you'd typically customize typography styles in Tailwind. Let's say that you want to make `a` tags blue:
319 | 
320 | ```js
321 | <div class="prose prose-slate prose-a:text-blue-11">...</div>
322 | ```
323 | 
324 | ## Using Radix Colors directly
325 | 
326 | **You probably don't need to use this plugin!**
327 | 
328 | Here is one way you can use Radix Colors with Tailwind, without this plugin:
329 | 
330 | #### 1. Import Radix Colors you want to use in your CSS
331 | 
332 | ```css
333 | @import "tailwindcss/base";
334 | @import "tailwindcss/components";
335 | @import "tailwindcss/utilities";
336 | 
337 | @import "@radix-ui/colors/slate";
338 | @import "@radix-ui/colors/slate-alpha";
339 | @import "@radix-ui/colors/slate-dark";
340 | @import "@radix-ui/colors/slate-dark-alpha";
341 | ```
342 | 
343 | #### 2. Add the colors to your Tailwind config
344 | 
345 | ```js
346 | module.exports = {
347 | 	// ...
348 | 	theme: {
349 | 		extend: {
350 | 			colors: {
351 | 				slate: {
352 | 					1: "var(--slate-1)",
353 | 					2: "var(--slate-2)",
354 | 					3: "var(--slate-3)",
355 | 					4: "var(--slate-4)",
356 | 					5: "var(--slate-5)",
357 | 					6: "var(--slate-6)",
358 | 					7: "var(--slate-7)",
359 | 					8: "var(--slate-8)",
360 | 					9: "var(--slate-9)",
361 | 					10: "var(--slate-10)",
362 | 					11: "var(--slate-11)",
363 | 					12: "var(--slate-12)",
364 | 					a1: "var(--slate-a1)",
365 | 					a2: "var(--slate-a2)",
366 | 					a3: "var(--slate-a3)",
367 | 					a4: "var(--slate-a4)",
368 | 					a5: "var(--slate-a5)",
369 | 					a6: "var(--slate-a6)",
370 | 					a7: "var(--slate-a7)",
371 | 					a8: "var(--slate-a8)",
372 | 					a9: "var(--slate-a9)",
373 | 					a10: "var(--slate-a10)",
374 | 					a11: "var(--slate-a11)",
375 | 					a12: "var(--slate-a12)",
376 | 				},
377 | 			},
378 | 		},
379 | 	},
380 | };
381 | ```
382 | 
383 | #### 3. Use colors in your markup
384 | 
385 | ```html
386 | <button class="dark:bg-slate-1 hover:bg-slate-a5 text-slate-12 bg-white">
387 | 	Button
388 | </button>
389 | ```
390 | 
391 | My reason for originally creating this plugin was to generate a version of the Radix Colors `.css` files that used the `.dark` selector, instead of `.dark-mode`, which used to be the only selector used by Radix Colors for dark mode at the time.
392 | 
393 | What I didn't realize at that time was that [Tailwind supports customizing the dark mode selector](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name), so you would have been able to integrate the two pretty easily without the trouble of using a plugin.
394 | 
395 | Nowadays, Radix Colors dark mode actually also uses the `.dark` selector as well, which means that it works nicely with Tailwind out of the box. In fact, there are examples of Radix and Tailwind integration on the Radix Primitives docs.
396 | 
397 | ## Prior Art
398 | 
399 | -   [Radix UI](https://github.com/radix-ui)
400 | 


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # dependencies
 5 | node_modules/
 6 | 
 7 | # logs
 8 | npm-debug.log*
 9 | yarn-debug.log*
10 | yarn-error.log*
11 | pnpm-debug.log*
12 | 
13 | 
14 | # environment variables
15 | .env
16 | .env.production
17 | 
18 | # macOS-specific files
19 | .DS_Store
20 | 
21 | .astro
22 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Astro Starter Kit: Minimal
 2 | 
 3 | ```
 4 | npm init astro -- --template minimal
 5 | ```
 6 | 
 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
 8 | 
 9 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
10 | 
11 | ## 🚀 Project Structure
12 | 
13 | Inside of your Astro project, you'll see the following folders and files:
14 | 
15 | ```
16 | /
17 | ├── public/
18 | ├── src/
19 | │   └── pages/
20 | │       └── index.astro
21 | └── package.json
22 | ```
23 | 
24 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
25 | 
26 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
27 | 
28 | Any static assets, like images, can be placed in the `public/` directory.
29 | 
30 | ## 🧞 Commands
31 | 
32 | All commands are run from the root of the project, from a terminal:
33 | 
34 | | Command                | Action                                           |
35 | | :--------------------- | :----------------------------------------------- |
36 | | `npm install`          | Installs dependencies                            |
37 | | `npm run dev`          | Starts local dev server at `localhost:3000`      |
38 | | `npm run build`        | Build your production site to `./dist/`          |
39 | | `npm run preview`      | Preview your build locally, before deploying     |
40 | | `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
41 | | `npm run astro --help` | Get help using the Astro CLI                     |
42 | 
43 | ## 👀 Want to learn more?
44 | 
45 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
46 | 


--------------------------------------------------------------------------------
/docs/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | import mdx from "@astrojs/mdx";
 3 | import tailwind from "@astrojs/tailwind";
 4 | import vercel from "@astrojs/vercel/serverless";
 5 | 
 6 | export default defineConfig({
 7 | 	site: "https://windy-radix-palette.vercel.app",
 8 | 	integrations: [
 9 | 		mdx(),
10 | 		tailwind({
11 | 			applyBaseStyles: false,
12 | 		}),
13 | 	],
14 | 	output: "server",
15 | 	adapter: vercel(),
16 | });
17 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "docs",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "astro dev",
 7 | 		"start": "astro dev",
 8 | 		"build": "astro build",
 9 | 		"preview": "astro preview",
10 | 		"astro": "astro"
11 | 	},
12 | 	"dependencies": {
13 | 		"@astrojs/vercel": "^5.1.0",
14 | 		"htmx.org": "^1.9.6"
15 | 	},
16 | 	"devDependencies": {
17 | 		"@astrojs/mdx": "^1.1.3",
18 | 		"@astrojs/tailwind": "^5.0.2",
19 | 		"@radix-ui/colors": "3.0.0",
20 | 		"@tailwindcss/typography": "^0.5.10",
21 | 		"astro": "^3.4.0",
22 | 		"tailwindcss": "^3.3.5",
23 | 		"windy-radix-palette": "workspace:*",
24 | 		"windy-radix-typography": "workspace:*"
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/docs/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {},
5 | 	},
6 | };
7 | 


--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brattonross/windy-radix-palette/f55b36bc2620bf4d107d5c576f670463e814b2e9/docs/public/favicon.ico


--------------------------------------------------------------------------------
/docs/public/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg">
 2 |     <symbol id="theme-system" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 3 |         <rect width="18" height="12" x="3" y="4" rx="2" ry="2"/>
 4 |         <line x1="2" x2="22" y1="20" y2="20"/>
 5 |     </symbol>
 6 |     <symbol id="theme-light" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 7 |         <circle cx="12" cy="12" r="4"/>
 8 |         <path d="M12 3v1"/>
 9 |         <path d="M12 20v1"/>
10 |         <path d="M3 12h1"/>
11 |         <path d="M20 12h1"/>
12 |         <path d="m18.364 5.636-.707.707"/>
13 |         <path d="m6.343 17.657-.707.707"/>
14 |         <path d="m5.636 5.636.707.707"/>
15 |         <path d="m17.657 17.657.707.707"/>
16 |     </symbol>
17 |     <symbol id="theme-dark" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
18 |         <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
19 |     </symbol>
20 | </svg>
21 | 


--------------------------------------------------------------------------------
/docs/src/components/sample.mdx:
--------------------------------------------------------------------------------
  1 | <p className="lead">
  2 |   Until now, trying to style an article, document, or blog post with Tailwind has been a tedious
  3 |   task that required a keen eye for typography and a lot of complex custom CSS.
  4 | </p>
  5 | 
  6 | By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
  7 | 
  8 | We get lots of complaints about it actually, with people regularly asking us things like:
  9 | 
 10 | > Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
 11 | 
 12 | We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
 13 | 
 14 | The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
 15 | 
 16 | It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
 17 | 
 18 | ```html
 19 | <article class="prose">
 20 |   <h1>Garlic bread with cheese: What the science tells us</h1>
 21 |   <p>
 22 |     For years parents have espoused the health benefits of eating garlic bread with cheese to their
 23 |     children, with the food earning such an iconic status in our culture that kids will often dress
 24 |     up as warm, cheesy loaf for Halloween.
 25 |   </p>
 26 |   <p>
 27 |     But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
 28 |     springing up around the country.
 29 |   </p>
 30 |   <!-- ... -->
 31 | </article>
 32 | ```
 33 | 
 34 | For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
 35 | 
 36 | ---
 37 | 
 38 | ## What to expect from here on out
 39 | 
 40 | What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
 41 | 
 42 | It's important to cover all of these use cases for a few reasons:
 43 | 
 44 | 1. We want everything to look good out of the box.
 45 | 2. Really just the first reason, that's the whole point of the plugin.
 46 | 3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
 47 | 
 48 | Now we're going to try out another header style.
 49 | 
 50 | ### Typography should be easy
 51 | 
 52 | So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
 53 | 
 54 | Something a wise person once told me about typography is:
 55 | 
 56 | > Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
 57 | 
 58 | It's probably important that images look okay here by default as well:
 59 | 
 60 | <figure>
 61 |   <img
 62 |     src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
 63 |     alt=""
 64 |   />
 65 |   <figcaption>
 66 |     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
 67 |     classical Latin literature from 45 BC, making it over 2000 years old.
 68 |   </figcaption>
 69 | </figure>
 70 | 
 71 | Now I'm going to show you an example of an unordered list to make sure that looks good, too:
 72 | 
 73 | - So here is the first item in this list.
 74 | - In this example we're keeping the items short.
 75 | - Later, we'll use longer, more complex list items.
 76 | 
 77 | And that's the end of this section.
 78 | 
 79 | ## What if we stack headings?
 80 | 
 81 | ### We should make sure that looks good, too.
 82 | 
 83 | Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
 84 | 
 85 | ### When a heading comes after a paragraph …
 86 | 
 87 | When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
 88 | 
 89 | - **I often do this thing where list items have headings.**
 90 | 
 91 |   For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
 92 | 
 93 |   I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
 94 | 
 95 | - **Since this is a list, I need at least two items.**
 96 | 
 97 |   I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
 98 | 
 99 | - **It's not a bad idea to add a third item either.**
100 | 
101 |   I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it. I'm going to press <kbd>Enter</kbd> now.
102 | 
103 | After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
104 | 
105 | ## Code should look okay by default.
106 | 
107 | I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
108 | 
109 | Here's what a default `tailwind.config.js` file looks like at the time of writing:
110 | 
111 | ```js
112 | module.exports = {
113 |   purge: [],
114 |   theme: {
115 |     extend: {},
116 |   },
117 |   variants: {},
118 |   plugins: [],
119 | }
120 | ```
121 | 
122 | Hopefully that looks good enough to you.
123 | 
124 | ### What about nested lists?
125 | 
126 | Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
127 | 
128 | 1. **Nested lists are rarely a good idea.**
129 |    - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
130 |    - Nested navigation in UIs is a bad idea too, keep things as flat as possible.
131 |    - Nesting tons of folders in your source code is also not helpful.
132 | 2. **Since we need to have more items, here's another one.**
133 |    - I'm not sure if we'll bother styling more than two levels deep.
134 |    - Two is already too much, three is guaranteed to be a bad idea.
135 |    - If you nest four levels deep you belong in prison.
136 | 3. **Two items isn't really a list, three is good though.**
137 |    - Again please don't nest lists if you want people to actually read your content.
138 |    - Nobody wants to look at this.
139 |    - I'm upset that we even have to bother styling this.
140 | 
141 | The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
142 | 
143 | - **For example, here's another nested list.**
144 | 
145 |   But this time with a second paragraph.
146 | 
147 |   - These list items won't have `<p>` tags
148 |   - Because they are only one line each
149 | 
150 | - **But in this second top-level list item, they will.**
151 | 
152 |   This is especially annoying because of the spacing on this paragraph.
153 | 
154 |   - As you can see here, because I've added a second line, this list item now has a `<p>` tag.
155 | 
156 |     This is the second line I'm talking about by the way.
157 | 
158 |   - Finally here's another list item so it's more like a list.
159 | 
160 | - A closing list item, but with no nested list, because why not?
161 | 
162 | And finally a sentence to close off this section.
163 | 
164 | ## We didn't forget about description lists
165 | 
166 | Well, that's not exactly true, we first released this plugin back in 2020 and it took three years before we added description lists. But they're here now, so let's just be happy about that&hellip;okay? They can be great for things like FAQs.
167 | 
168 | <dl>
169 |   <dt>Why do you never see elephants hiding in trees?</dt>
170 |   <dd>
171 |     Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
172 |     cupiditate laboriosam fugiat.
173 |   </dd>
174 |   <dt>What do you call someone with no body and no nose?</dt>
175 |   <dd>
176 |     Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia
177 |     excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.
178 |   </dd>
179 |   <dt>Why can't you hear a pterodactyl go to the bathroom?</dt>
180 |   <dd>
181 |     Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas
182 |     voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum
183 |     natus facilis atque vero consequatur! Quisquam, debitis error.
184 |   </dd>
185 | </dl>
186 | 
187 | ## There are other elements we need to style
188 | 
189 | I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
190 | 
191 | We even included table styles, check it out:
192 | 
193 | | Wrestler                | Origin       | Finisher           |
194 | | ----------------------- | ------------ | ------------------ |
195 | | Bret "The Hitman" Hart  | Calgary, AB  | Sharpshooter       |
196 | | Stone Cold Steve Austin | Austin, TX   | Stone Cold Stunner |
197 | | Randy Savage            | Sarasota, FL | Elbow Drop         |
198 | | Vader                   | Boulder, CO  | Vader Bomb         |
199 | | Razor Ramon             | Chuluota, FL | Razor's Edge       |
200 | 
201 | We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
202 | 
203 | ### Sometimes I even use `code` in headings
204 | 
205 | Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
206 | 
207 | Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
208 | 
209 | #### We haven't used an `h4` yet
210 | 
211 | But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
212 | 
213 | We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
214 | 
215 | ### We still need to think about stacked headings though.
216 | 
217 | #### Let's make sure we don't screw that up with `h4` elements, either.
218 | 
219 | Phew, with any luck we have styled the headings above this text and they look pretty good.
220 | 
221 | Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
222 | 
223 | What I've written here is probably long enough, but adding this final sentence can't hurt.
224 | 


--------------------------------------------------------------------------------
/docs/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/docs/src/layouts/BaseLayout.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import "~/tailwind.css";
  3 | 
  4 | export interface Props {
  5 | 	description?: string;
  6 | 	title?: string;
  7 | }
  8 | 
  9 | const { description, title } = Astro.props;
 10 | 
 11 | const currentTheme = Astro.cookies.has("wrp_theme")
 12 | 	? Astro.cookies.get("wrp_theme")?.value ?? "system"
 13 | 	: "system";
 14 | ---
 15 | 
 16 | <html
 17 | 	lang="en"
 18 | 	class:list={["selection:bg-irisA-5", {
 19 | 		dark: currentTheme === "dark",
 20 | 	}]}
 21 | 	style={{ colorScheme: currentTheme === "dark" ? "dark" : "light" }}
 22 | >
 23 | 	<head>
 24 | 		<meta charset="utf-8" />
 25 | 		<meta name="viewport" content="width=device-width" />
 26 | 		{
 27 | 			title ? (
 28 | 				<title>{title} &ndash; windy-radix-palette</title>
 29 | 			) : (
 30 | 				<title>windy-radix-palette</title>
 31 | 			)
 32 | 		}
 33 | 		{description ? <meta name="description" content={description} /> : null}
 34 | 		<script src="htmx.org"></script>
 35 | 		{currentTheme === "system" ? (
 36 | 			<script is:inline>
 37 | 			if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
 38 | 				document.documentElement.classList.add("dark");
 39 | 				document.documentElement.style.colorScheme = "dark";
 40 | 			}
 41 | 			</script>
 42 | 		) : null}
 43 | 		<script is:inline>
 44 | 			class ThemeFieldSet extends HTMLFieldSetElement {
 45 | 				connectedCallback() {
 46 | 					this.addEventListener("change", this.#handleChange);
 47 | 				}
 48 | 
 49 | 				disconnectedCallback() {
 50 | 					this.removeEventListener("change", this.#handleChange);
 51 | 				}
 52 | 
 53 | 				#handleChange(event) {
 54 | 					const value = event.target.value;
 55 | 					const prefersDark = window.matchMedia(
 56 | 						"(prefers-color-scheme: dark)",
 57 | 					).matches;
 58 | 					const isDark =
 59 | 						value === "dark" || (value === "system" && prefersDark);
 60 | 					document.documentElement.classList.toggle("dark", isDark);
 61 | 					document.documentElement.style.colorScheme = isDark
 62 | 						? "dark"
 63 | 						: "light";
 64 | 				}
 65 | 			}
 66 | 
 67 | 			window.customElements.define("theme-field-set", ThemeFieldSet, {
 68 | 				extends: "fieldset",
 69 | 			});
 70 | 		</script>
 71 | 	</head>
 72 | 	<body
 73 | 		class="dark:bg-[#0b0b0b] text-hi-contrast bg-white antialiased font-sans"
 74 | 		hx-boost="true"
 75 | 	>
 76 | 		<header
 77 | 			class="dark:bg-gray-1 fixed inset-x-0 top-0 h-10 bg-white shadow-[0_1px_var(--grayA6)] backdrop-blur"
 78 | 		>
 79 | 			<div class="h-full px-4 md:px-6 lg:px-8">
 80 | 				<div class="w-full flex items-center justify-between gap-4 h-full mx-auto max-w-7xl">
 81 | 					<nav class="flex items-center gap-2">
 82 | 						<a
 83 | 							class:list={[
 84 | 								"select-none focus-visible:ring-blueA-8 flex shrink-0 items-center justify-center rounded px-3 py-1 text-sm leading-4 tracking-[0.01em] outline-none focus-visible:ring-2",
 85 | 								{
 86 | 									"text-gray-1 bg-gray-12 font-medium":
 87 | 									Astro.url.pathname === "/",
 88 | 									"hover:text-hi-contrast hover:bg-grayA-3":
 89 | 									Astro.url.pathname !== "/",
 90 | 								},
 91 | 							]}
 92 | 						href="/">Palette</a
 93 | 						>
 94 | 						<a
 95 | 							class:list={[
 96 | 								"select-none focus-visible:ring-blueA-8 flex shrink-0 items-center justify-center rounded px-3 py-1 text-sm leading-4 tracking-[0.01em] outline-none focus-visible:ring-2",
 97 | 								{
 98 | 									"text-gray-1 bg-gray-12 font-medium":
 99 | 									Astro.url.pathname === "/typography",
100 | 									"hover:text-hi-contrast hover:bg-grayA-3":
101 | 									Astro.url.pathname !== "/typography",
102 | 								},
103 | 							]}
104 | 						href="/typography">Typography</a
105 | 						>
106 | 					</nav>
107 | 					<form
108 | 						action="/theme"
109 | 						hx-post="/theme"
110 | 						hx-trigger="change"
111 | 						hx-swap="none"
112 | 						method="post"
113 | 						>
114 | 						<fieldset class="flex items-center gap-2" is="theme-field-set">
115 | 							<legend class="sr-only">Theme</legend>
116 | 							{
117 | 							["light", "dark", "system"].map((theme) => (
118 | 								<label
119 | 									for={`theme-radio-${theme}`}
120 | 									class="text-grayA-10 hover:bg-grayA-4 active:bg-grayA-5 hover:text-hi-contrast active:text-hi-contrast [&:has(input:checked)]:bg-grayA-5 [&:has(input:checked)]:text-hi-contrast flex h-8 w-8 items-center justify-center rounded bg-transparent"
121 | 									>
122 | 									<svg aria-hidden="true" class="h-5 w-5">
123 | 										<use href={`/icons.svg#theme-${theme}`} />
124 | 									</svg>
125 | 									<input
126 | 										id={`theme-radio-${theme}`}
127 | 										checked={theme === currentTheme}
128 | 										hidden
129 | 										name="theme"
130 | 										type="radio"
131 | 										value={theme}
132 | 									/>
133 | 									<span class="sr-only">{theme}</span>
134 | 								</label>
135 | 							))
136 | 							}
137 | 						</fieldset>
138 | 					</form>
139 | 				</div>
140 | 			</div>
141 | 		</header>
142 | 		<div class="mt-10">
143 | 			<slot />
144 | 		</div>
145 | 	</body>
146 | </html>
147 | 


--------------------------------------------------------------------------------
/docs/src/pages/index.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import BaseLayout from "~/layouts/BaseLayout.astro";
  3 | 
  4 | const STEPS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  5 | const COLORS = [
  6 | 	{
  7 | 		label: "Gray",
  8 | 		name: "gray",
  9 | 	},
 10 | 	{
 11 | 		label: "Mauve",
 12 | 		name: "mauve",
 13 | 	},
 14 | 	{
 15 | 		label: "Slate",
 16 | 		name: "slate",
 17 | 	},
 18 | 	{
 19 | 		label: "Sage",
 20 | 		name: "sage",
 21 | 	},
 22 | 	{
 23 | 		label: "Olive",
 24 | 		name: "olive",
 25 | 	},
 26 | 	{
 27 | 		label: "Sand",
 28 | 		name: "sand",
 29 | 	},
 30 | 	{
 31 | 		label: "Tomato",
 32 | 		name: "tomato",
 33 | 	},
 34 | 	{
 35 | 		label: "Red",
 36 | 		name: "red",
 37 | 	},
 38 | 	{
 39 | 		label: "Ruby",
 40 | 		name: "ruby",
 41 | 	},
 42 | 	{
 43 | 		label: "Crimson",
 44 | 		name: "crimson",
 45 | 	},
 46 | 	{
 47 | 		label: "Pink",
 48 | 		name: "pink",
 49 | 	},
 50 | 	{
 51 | 		label: "Plum",
 52 | 		name: "plum",
 53 | 	},
 54 | 	{
 55 | 		label: "Purple",
 56 | 		name: "purple",
 57 | 	},
 58 | 	{
 59 | 		label: "Violet",
 60 | 		name: "violet",
 61 | 	},
 62 | 	{
 63 | 		label: "Iris",
 64 | 		name: "iris",
 65 | 	},
 66 | 	{
 67 | 		label: "Indigo",
 68 | 		name: "indigo",
 69 | 	},
 70 | 	{
 71 | 		label: "Blue",
 72 | 		name: "blue",
 73 | 	},
 74 | 	{
 75 | 		label: "Cyan",
 76 | 		name: "cyan",
 77 | 	},
 78 | 	{
 79 | 		label: "Teal",
 80 | 		name: "teal",
 81 | 	},
 82 | 	{
 83 | 		label: "Jade",
 84 | 		name: "jade",
 85 | 	},
 86 | 	{
 87 | 		label: "Green",
 88 | 		name: "green",
 89 | 	},
 90 | 	{
 91 | 		label: "Grass",
 92 | 		name: "grass",
 93 | 	},
 94 | 	{
 95 | 		label: "Bronze",
 96 | 		name: "bronze",
 97 | 	},
 98 | 	{
 99 | 		label: "Gold",
100 | 		name: "gold",
101 | 	},
102 | 	{
103 | 		label: "Brown",
104 | 		name: "brown",
105 | 	},
106 | 	{
107 | 		label: "Orange",
108 | 		name: "orange",
109 | 	},
110 | 	{
111 | 		label: "Amber",
112 | 		name: "amber",
113 | 	},
114 | 	{
115 | 		label: "Yellow",
116 | 		name: "yellow",
117 | 	},
118 | 	{
119 | 		label: "Lime",
120 | 		name: "lime",
121 | 	},
122 | 	{
123 | 		label: "Mint",
124 | 		name: "mint",
125 | 	},
126 | 	{
127 | 		label: "Sky",
128 | 		name: "sky",
129 | 	},
130 | ];
131 | ---
132 | 
133 | <BaseLayout>
134 | 	<main class="flex flex-col gap-12 px-4 py-12 md:px-6 lg:px-8">
135 | 		<div class="mx-auto flex w-full max-w-7xl flex-col gap-12">
136 | 			<header class="flex flex-col items-start gap-4">
137 | 				<h1
138 | 					class="text-hi-contrast m-0 text-4xl font-medium tracking-tighter lg:text-5xl"
139 | 				>
140 | 					Bring Radix Colors to Tailwind CSS
141 | 				</h1>
142 | 				<p class="text-lo-contrast m-0 text-base md:text-xl">
143 | 					An unofficial package to improve the compatibility of Radix
144 | 					Colors and Tailwind CSS.
145 | 				</p>
146 | 				<div class="flex items-center space-x-4">
147 | 					<a
148 | 						href="https://github.com/brattonross/windy-radix-palette"
149 | 						class:list={[
150 | 							"inline-flex",
151 | 							"items-center",
152 | 							"justify-center",
153 | 							"space-x-2",
154 | 							"rounded-md",
155 | 							"text-lg",
156 | 							"text-black",
157 | 							"font-medium",
158 | 							"px-4",
159 | 							"h-12",
160 | 							"transition-all",
161 | 							"bg-white",
162 | 							"no-underline",
163 | 							"select-none",
164 | 							"shadow-[-15px_0_30px_-10px_var(--orangeA7),_0_0_30px_-10px_var(--pinkA7),_15px_0_30px_-10px_var(--violetA7)]",
165 | 							"hover:shadow-[-15px_0_30px_-10px_var(--orangeA8),_0_0_30px_-10px_var(--pinkA8),_15px_0_30px_-10px_var(--violetA8)]",
166 | 						]}
167 | 					>
168 | 						<span>Get started</span>
169 | 						<svg
170 | 							width="15"
171 | 							height="15"
172 | 							viewBox="0 0 15 15"
173 | 							fill="none"
174 | 							xmlns="http://www.w3.org/2000/svg"
175 | 							><path
176 | 								d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
177 | 								fill="currentColor"
178 | 								fill-rule="evenodd"
179 | 								clip-rule="evenodd"></path>
180 | 						</svg>
181 | 					</a>
182 | 				</div>
183 | 			</header>
184 | 			<div
185 | 				class="grid grid-cols-[repeat(12,minmax(0px,1fr))] items-center gap-0.5 whitespace-nowrap md:grid-cols-[minmax(64px,1fr)_repeat(12,minmax(0px,1fr))]"
186 | 			>
187 | 				<div class="hidden md:block"></div>
188 | 				{
189 | 					STEPS.map((n) => (
190 | 						<div class="text-lo-contrast pb-2 text-center text-xs">
191 | 							{n}
192 | 						</div>
193 | 					))
194 | 				}
195 | 				{
196 | 					COLORS.map((color) => (
197 | 						<>
198 | 							<div class="text-lo-contrast align-center hidden text-xs md:block">
199 | 								{color.label}
200 | 							</div>
201 | 							{STEPS.map((step) => (
202 | 								<div
203 | 									class={`bg-${color.name}-${step} h-[35px]`}
204 | 								/>
205 | 							))}
206 | 						</>
207 | 					))
208 | 				}
209 | 			</div>
210 | 		</div>
211 | 	</main>
212 | </BaseLayout>
213 | 


--------------------------------------------------------------------------------
/docs/src/pages/theme.ts:
--------------------------------------------------------------------------------
 1 | import type { APIRoute } from "astro";
 2 | 
 3 | export const POST: APIRoute = async ({ request }) => {
 4 | 	const formData = await request.formData();
 5 | 	const theme = formData.get("theme");
 6 | 	return new Response(null, {
 7 | 		headers: {
 8 | 			"Set-Cookie":
 9 | 				theme && ["light", "dark"].includes(theme.toString())
10 | 					? `wrp_theme=${theme}; Path=/; HttpOnly; Max-Age=31536000; SameSite=Strict; Secure`
11 | 					: "wrp_theme=; Path=/; HttpOnly; Max-Age=0; SameSite=Strict; Secure",
12 | 		},
13 | 	});
14 | };
15 | 


--------------------------------------------------------------------------------
/docs/src/pages/typography.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Content } from "~/components/sample.mdx";
 3 | import BaseLayout from "~/layouts/BaseLayout.astro";
 4 | ---
 5 | 
 6 | <BaseLayout>
 7 | 	<div
 8 | 		class="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-12 lg:max-w-4xl lg:px-8 lg:py-16 xl:max-w-6xl"
 9 | 	>
10 | 		<article>
11 | 			<div
12 | 				class="prose prose-gray prose-sm sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl dark:prose-invert mx-auto"
13 | 			>
14 | 				<h1>windy-radix-typography</h1>
15 | 				<Content />
16 | 			</div>
17 | 		</article>
18 | 	</div>
19 | </BaseLayout>
20 | 


--------------------------------------------------------------------------------
/docs/src/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/docs/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import { createPlugin } from "windy-radix-palette";
 2 | 
 3 | const radix = createPlugin();
 4 | 
 5 | /** @type {import('tailwindcss').Config} */
 6 | export default {
 7 | 	content: ["./src/**/*.{astro,html,ts}"],
 8 | 	darkMode: "class",
 9 | 	theme: {
10 | 		extend: {
11 | 			colors: {
12 | 				"hi-contrast": radix.alias("gray", 12),
13 | 				"lo-contrast": radix.alias("gray", 11),
14 | 			},
15 | 		},
16 | 	},
17 | 	safelist: [
18 | 		{
19 | 			pattern:
20 | 				/bg-(gray|mauve|slate|sage|olive|sand|tomato|red|ruby|crimson|pink|plum|purple|violet|iris|indigo|blue|cyan|teal|jade|green|grass|bronze|gold|brown|orange|amber|yellow|lime|mint|sky)-(1|2|3|4|5|6|7|8|9|10|11|12)$/,
21 | 		},
22 | 	],
23 | 	plugins: [radix.plugin, require("@tailwindcss/typography")],
24 | 	presets: [require("windy-radix-typography")],
25 | };
26 | 


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://json.schemastore.org/tsconfig",
 3 | 	"extends": "astro/tsconfigs/strict",
 4 | 	"compilerOptions": {
 5 | 		"baseUrl": ".",
 6 | 		"paths": {
 7 | 			"~/*": [
 8 | 				"src/*"
 9 | 			]
10 | 		}
11 | 	}
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://json.schemastore.org/tsconfig.json",
 3 | 	"private": true,
 4 | 	"name": "windy-radix-palette-monorepo",
 5 | 	"repository": "https://github.com/brattonross/windy-radix-palette",
 6 | 	"author": "Ross Bratton <bratton.ross@gmail.com>",
 7 | 	"license": "MIT",
 8 | 	"type": "module",
 9 | 	"workspaces": [
10 | 		"docs",
11 | 		"packages/*"
12 | 	],
13 | 	"scripts": {
14 | 		"build": "turbo build",
15 | 		"dev": "turbo dev",
16 | 		"test": "turbo test",
17 | 		"format": "prettier --write .",
18 | 		"sherif": "sherif",
19 | 		"publint": "publint"
20 | 	},
21 | 	"devDependencies": {
22 | 		"prettier": "^3.0.3",
23 | 		"prettier-plugin-astro": "^0.12.1",
24 | 		"prettier-plugin-tailwindcss": "^0.5.6",
25 | 		"publint": "^0.2.5",
26 | 		"sherif": "^0.3.1",
27 | 		"turbo": "^1.10.16",
28 | 		"typescript": "^5.2.2"
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/packages/palette/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://json.schemastore.org/package.json",
 3 | 	"name": "windy-radix-palette",
 4 | 	"version": "2.0.0-beta.7",
 5 | 	"description": "Bring Radix Colors to Tailwind CSS",
 6 | 	"repository": {
 7 | 		"url": "https://github.com/brattonross/windy-radix-palette",
 8 | 		"directory": "packages/palette"
 9 | 	},
10 | 	"publishConfig": {
11 | 		"access": "public"
12 | 	},
13 | 	"keywords": [
14 | 		"tailwindcss",
15 | 		"plugin",
16 | 		"radix-ui"
17 | 	],
18 | 	"author": "Ross Bratton <bratton.ross@gmail.com>",
19 | 	"license": "MIT",
20 | 	"files": [
21 | 		"dist"
22 | 	],
23 | 	"exports": {
24 | 		".": {
25 | 			"import": {
26 | 				"types": "./dist/index.d.mts",
27 | 				"default": "./dist/index.mjs"
28 | 			},
29 | 			"require": {
30 | 				"types": "./dist/index.d.ts",
31 | 				"default": "./dist/index.js"
32 | 			}
33 | 		}
34 | 	},
35 | 	"main": "./dist/index.js",
36 | 	"types": "./dist/index.d.ts",
37 | 	"scripts": {
38 | 		"dev": "tsup --watch",
39 | 		"build": "tsup",
40 | 		"test": "vitest"
41 | 	},
42 | 	"dependencies": {
43 | 		"@paralleldrive/cuid2": "^2.2.2"
44 | 	},
45 | 	"peerDependencies": {
46 | 		"@radix-ui/colors": ">=3.0.0",
47 | 		"tailwindcss": ">=3.0.0"
48 | 	},
49 | 	"devDependencies": {
50 | 		"@radix-ui/colors": "3.0.0",
51 | 		"tailwindcss": "^3.3.5",
52 | 		"tsup": "^7.2.0",
53 | 		"vite": "^4.5.0",
54 | 		"vitest": "^0.34.6"
55 | 	}
56 | }
57 | 


--------------------------------------------------------------------------------
/packages/palette/src/alias.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, test } from "vitest";
  2 | import { Aliaser } from "./alias";
  3 | 
  4 | function defaultThemeFn(_: string, defaultValue: string): string {
  5 | 	return defaultValue;
  6 | }
  7 | 
  8 | describe("Aliaser", () => {
  9 | 	test("full palette, same between light and dark mode", () => {
 10 | 		const aliaser = new Aliaser();
 11 | 		const result = aliaser.alias("gray");
 12 | 		expect(result).toEqual({
 13 | 			"1": "var(--gray1)",
 14 | 			"2": "var(--gray2)",
 15 | 			"3": "var(--gray3)",
 16 | 			"4": "var(--gray4)",
 17 | 			"5": "var(--gray5)",
 18 | 			"6": "var(--gray6)",
 19 | 			"7": "var(--gray7)",
 20 | 			"8": "var(--gray8)",
 21 | 			"9": "var(--gray9)",
 22 | 			"10": "var(--gray10)",
 23 | 			"11": "var(--gray11)",
 24 | 			"12": "var(--gray12)",
 25 | 		});
 26 | 
 27 | 		const styles = aliaser.generateStyles({
 28 | 			darkMode: "media",
 29 | 			themeFn: defaultThemeFn,
 30 | 		});
 31 | 		expect(styles).toEqual({});
 32 | 	});
 33 | 
 34 | 	test("single color, same between light and dark mode", () => {
 35 | 		const aliaser = new Aliaser();
 36 | 		const result = aliaser.alias("gray.12");
 37 | 		expect(result).toEqual("var(--gray12)");
 38 | 
 39 | 		const styles = aliaser.generateStyles({
 40 | 			darkMode: "media",
 41 | 			themeFn: defaultThemeFn,
 42 | 		});
 43 | 		expect(styles).toEqual({});
 44 | 	});
 45 | 
 46 | 	test("single color, same between light and dark mode, object option", () => {
 47 | 		const aliaser = new Aliaser();
 48 | 		const result = aliaser.alias({ value: "gray.12" });
 49 | 		expect(result).toEqual("var(--gray12)");
 50 | 
 51 | 		const styles = aliaser.generateStyles({
 52 | 			darkMode: "media",
 53 | 			themeFn: defaultThemeFn,
 54 | 		});
 55 | 		expect(styles).toEqual({});
 56 | 	});
 57 | 
 58 | 	test("full palette, different between light and dark mode", () => {
 59 | 		const aliaser = new Aliaser();
 60 | 		const result = aliaser.alias({
 61 | 			name: "test",
 62 | 			light: "gray",
 63 | 			dark: "red",
 64 | 		});
 65 | 		expect(result).toEqual({
 66 | 			"1": "var(--test-1)",
 67 | 			"2": "var(--test-2)",
 68 | 			"3": "var(--test-3)",
 69 | 			"4": "var(--test-4)",
 70 | 			"5": "var(--test-5)",
 71 | 			"6": "var(--test-6)",
 72 | 			"7": "var(--test-7)",
 73 | 			"8": "var(--test-8)",
 74 | 			"9": "var(--test-9)",
 75 | 			"10": "var(--test-10)",
 76 | 			"11": "var(--test-11)",
 77 | 			"12": "var(--test-12)",
 78 | 		});
 79 | 
 80 | 		const styles = aliaser.generateStyles({
 81 | 			darkMode: "media",
 82 | 			themeFn: defaultThemeFn,
 83 | 		});
 84 | 		expect(styles).toEqual({
 85 | 			":root": {
 86 | 				"--test-1": "var(--gray1)",
 87 | 				"--test-2": "var(--gray2)",
 88 | 				"--test-3": "var(--gray3)",
 89 | 				"--test-4": "var(--gray4)",
 90 | 				"--test-5": "var(--gray5)",
 91 | 				"--test-6": "var(--gray6)",
 92 | 				"--test-7": "var(--gray7)",
 93 | 				"--test-8": "var(--gray8)",
 94 | 				"--test-9": "var(--gray9)",
 95 | 				"--test-10": "var(--gray10)",
 96 | 				"--test-11": "var(--gray11)",
 97 | 				"--test-12": "var(--gray12)",
 98 | 			},
 99 | 			"@media (prefers-color-scheme: dark)": {
100 | 				":root": {
101 | 					"--test-1": "var(--red1)",
102 | 					"--test-2": "var(--red2)",
103 | 					"--test-3": "var(--red3)",
104 | 					"--test-4": "var(--red4)",
105 | 					"--test-5": "var(--red5)",
106 | 					"--test-6": "var(--red6)",
107 | 					"--test-7": "var(--red7)",
108 | 					"--test-8": "var(--red8)",
109 | 					"--test-9": "var(--red9)",
110 | 					"--test-10": "var(--red10)",
111 | 					"--test-11": "var(--red11)",
112 | 					"--test-12": "var(--red12)",
113 | 				},
114 | 			},
115 | 		});
116 | 	});
117 | 
118 | 	test("single color, different between light and dark mode", () => {
119 | 		const aliaser = new Aliaser();
120 | 		const result = aliaser.alias({
121 | 			name: "test",
122 | 			light: "gray.12",
123 | 			dark: "gray.11",
124 | 		});
125 | 		expect(result).toEqual("var(--test)");
126 | 
127 | 		const styles = aliaser.generateStyles({
128 | 			darkMode: "media",
129 | 			themeFn: defaultThemeFn,
130 | 		});
131 | 		expect(styles).toEqual({
132 | 			":root": {
133 | 				"--test": "var(--gray12)",
134 | 			},
135 | 			"@media (prefers-color-scheme: dark)": {
136 | 				":root": {
137 | 					"--test": "var(--gray11)",
138 | 				},
139 | 			},
140 | 		});
141 | 	});
142 | 
143 | 	test("custom root selector", () => {
144 | 		const aliaser = new Aliaser({ rootSelector: ":host" });
145 | 		aliaser.alias({
146 | 			name: "test",
147 | 			light: "gray",
148 | 			dark: "red",
149 | 		});
150 | 
151 | 		const styles = aliaser.generateStyles({
152 | 			darkMode: "media",
153 | 			themeFn: defaultThemeFn,
154 | 		});
155 | 		expect(styles).toEqual({
156 | 			":host": {
157 | 				"--test-1": "var(--gray1)",
158 | 				"--test-2": "var(--gray2)",
159 | 				"--test-3": "var(--gray3)",
160 | 				"--test-4": "var(--gray4)",
161 | 				"--test-5": "var(--gray5)",
162 | 				"--test-6": "var(--gray6)",
163 | 				"--test-7": "var(--gray7)",
164 | 				"--test-8": "var(--gray8)",
165 | 				"--test-9": "var(--gray9)",
166 | 				"--test-10": "var(--gray10)",
167 | 				"--test-11": "var(--gray11)",
168 | 				"--test-12": "var(--gray12)",
169 | 			},
170 | 			"@media (prefers-color-scheme: dark)": {
171 | 				":host": {
172 | 					"--test-1": "var(--red1)",
173 | 					"--test-2": "var(--red2)",
174 | 					"--test-3": "var(--red3)",
175 | 					"--test-4": "var(--red4)",
176 | 					"--test-5": "var(--red5)",
177 | 					"--test-6": "var(--red6)",
178 | 					"--test-7": "var(--red7)",
179 | 					"--test-8": "var(--red8)",
180 | 					"--test-9": "var(--red9)",
181 | 					"--test-10": "var(--red10)",
182 | 					"--test-11": "var(--red11)",
183 | 					"--test-12": "var(--red12)",
184 | 				},
185 | 			},
186 | 		});
187 | 	});
188 | 
189 | 	test("uses theme function", () => {
190 | 		const aliaser = new Aliaser();
191 | 		aliaser.alias({
192 | 			name: "test",
193 | 			light: "gray.12",
194 | 			dark: "gray.11",
195 | 		});
196 | 
197 | 		const styles = aliaser.generateStyles({
198 | 			darkMode: "media",
199 | 			themeFn: () => "var(--from-theme)",
200 | 		});
201 | 		expect(styles).toEqual({
202 | 			":root": {
203 | 				"--test": "var(--from-theme)",
204 | 			},
205 | 			"@media (prefers-color-scheme: dark)": {
206 | 				":root": {
207 | 					"--test": "var(--from-theme)",
208 | 				},
209 | 			},
210 | 		});
211 | 	});
212 | 
213 | 	describe("darkMode: class", () => {
214 | 		test("full palette", () => {
215 | 			const aliaser = new Aliaser();
216 | 			aliaser.alias({ name: "test", light: "gray", dark: "red" });
217 | 
218 | 			const styles = aliaser.generateStyles({
219 | 				darkMode: "class",
220 | 				themeFn: defaultThemeFn,
221 | 			});
222 | 			expect(styles).toEqual({
223 | 				":root": {
224 | 					"--test-1": "var(--gray1)",
225 | 					"--test-2": "var(--gray2)",
226 | 					"--test-3": "var(--gray3)",
227 | 					"--test-4": "var(--gray4)",
228 | 					"--test-5": "var(--gray5)",
229 | 					"--test-6": "var(--gray6)",
230 | 					"--test-7": "var(--gray7)",
231 | 					"--test-8": "var(--gray8)",
232 | 					"--test-9": "var(--gray9)",
233 | 					"--test-10": "var(--gray10)",
234 | 					"--test-11": "var(--gray11)",
235 | 					"--test-12": "var(--gray12)",
236 | 				},
237 | 				".dark": {
238 | 					"--test-1": "var(--red1)",
239 | 					"--test-2": "var(--red2)",
240 | 					"--test-3": "var(--red3)",
241 | 					"--test-4": "var(--red4)",
242 | 					"--test-5": "var(--red5)",
243 | 					"--test-6": "var(--red6)",
244 | 					"--test-7": "var(--red7)",
245 | 					"--test-8": "var(--red8)",
246 | 					"--test-9": "var(--red9)",
247 | 					"--test-10": "var(--red10)",
248 | 					"--test-11": "var(--red11)",
249 | 					"--test-12": "var(--red12)",
250 | 				},
251 | 			});
252 | 		});
253 | 
254 | 		test("single color", () => {
255 | 			const aliaser = new Aliaser();
256 | 			aliaser.alias({ name: "test", light: "gray.12", dark: "gray.11" });
257 | 
258 | 			const styles = aliaser.generateStyles({
259 | 				darkMode: "class",
260 | 				themeFn: defaultThemeFn,
261 | 			});
262 | 			expect(styles).toEqual({
263 | 				":root": {
264 | 					"--test": "var(--gray12)",
265 | 				},
266 | 				".dark": {
267 | 					"--test": "var(--gray11)",
268 | 				},
269 | 			});
270 | 		});
271 | 	});
272 | 
273 | 	describe("darkMode: custom", () => {
274 | 		test("full palette", () => {
275 | 			const aliaser = new Aliaser();
276 | 			aliaser.alias({ name: "test", light: "gray", dark: "red" });
277 | 
278 | 			const styles = aliaser.generateStyles({
279 | 				darkMode: ["class", ".dark-mode"],
280 | 				themeFn: defaultThemeFn,
281 | 			});
282 | 			expect(styles).toEqual({
283 | 				":root": {
284 | 					"--test-1": "var(--gray1)",
285 | 					"--test-2": "var(--gray2)",
286 | 					"--test-3": "var(--gray3)",
287 | 					"--test-4": "var(--gray4)",
288 | 					"--test-5": "var(--gray5)",
289 | 					"--test-6": "var(--gray6)",
290 | 					"--test-7": "var(--gray7)",
291 | 					"--test-8": "var(--gray8)",
292 | 					"--test-9": "var(--gray9)",
293 | 					"--test-10": "var(--gray10)",
294 | 					"--test-11": "var(--gray11)",
295 | 					"--test-12": "var(--gray12)",
296 | 				},
297 | 				".dark-mode": {
298 | 					"--test-1": "var(--red1)",
299 | 					"--test-2": "var(--red2)",
300 | 					"--test-3": "var(--red3)",
301 | 					"--test-4": "var(--red4)",
302 | 					"--test-5": "var(--red5)",
303 | 					"--test-6": "var(--red6)",
304 | 					"--test-7": "var(--red7)",
305 | 					"--test-8": "var(--red8)",
306 | 					"--test-9": "var(--red9)",
307 | 					"--test-10": "var(--red10)",
308 | 					"--test-11": "var(--red11)",
309 | 					"--test-12": "var(--red12)",
310 | 				},
311 | 			});
312 | 		});
313 | 
314 | 		test("single color", () => {
315 | 			const aliaser = new Aliaser();
316 | 			aliaser.alias({ name: "test", light: "gray.12", dark: "gray.11" });
317 | 
318 | 			const styles = aliaser.generateStyles({
319 | 				darkMode: ["class", ".dark-mode"],
320 | 				themeFn: defaultThemeFn,
321 | 			});
322 | 			expect(styles).toEqual({
323 | 				":root": {
324 | 					"--test": "var(--gray12)",
325 | 				},
326 | 				".dark-mode": {
327 | 					"--test": "var(--gray11)",
328 | 				},
329 | 			});
330 | 		});
331 | 	});
332 | 
333 | 	test("arbitrary values", () => {
334 | 		const aliaser = new Aliaser();
335 | 
336 | 		const result = aliaser.alias({
337 | 			name: "test",
338 | 			light: "hsla(0, 0%, 100%, 0.5)",
339 | 			dark: "rgba(0, 0, 0, 0.5)",
340 | 		});
341 | 		expect(result).toEqual("var(--test)");
342 | 
343 | 		const styles = aliaser.generateStyles({
344 | 			darkMode: "media",
345 | 			themeFn: defaultThemeFn,
346 | 		});
347 | 		expect(styles).toEqual({
348 | 			":root": {
349 | 				"--test": "hsla(0, 0%, 100%, 0.5)",
350 | 			},
351 | 			"@media (prefers-color-scheme: dark)": {
352 | 				":root": {
353 | 					"--test": "rgba(0, 0, 0, 0.5)",
354 | 				},
355 | 			},
356 | 		});
357 | 	});
358 | });
359 | 


--------------------------------------------------------------------------------
/packages/palette/src/alias.ts:
--------------------------------------------------------------------------------
  1 | import { createId } from "@paralleldrive/cuid2";
  2 | import * as radix from "@radix-ui/colors";
  3 | 
  4 | const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
  5 | 
  6 | export type NumberOrString<T extends number> = T | `${T}`;
  7 | export type RadixStep = NumberOrString<(typeof steps)[number]>;
  8 | export type NonDark<T> = T extends `${infer U}Dark${infer V}` ? `${U}${V}` : T;
  9 | export type RadixColor = keyof typeof radix;
 10 | export type RadixColorWithStep = `${RadixColor}.${RadixStep}`;
 11 | export type Loose<T extends string> = T | ({} & string);
 12 | export type AliasFullPaletteOptions =
 13 | 	| NonDark<RadixColor>
 14 | 	| {
 15 | 			/** The color to use in light mode. */
 16 | 			light: Loose<NonDark<RadixColor>>;
 17 | 			/** The color to use in dark mode. */
 18 | 			dark: Loose<NonDark<RadixColor>>;
 19 | 	  };
 20 | export type AliasSingleColorOptions =
 21 | 	| {
 22 | 			/** The color to use in light mode. */
 23 | 			light: NonDark<RadixColorWithStep>;
 24 | 			/** The color to use in dark mode. */
 25 | 			dark: NonDark<RadixColorWithStep>;
 26 | 	  }
 27 | 	| {
 28 | 			/** Unique name for the alias. Used to generate the CSS variable name. */
 29 | 			name: string;
 30 | 			/** The color to use in light mode. */
 31 | 			light: Loose<NonDark<RadixColorWithStep>>;
 32 | 			/** The color to use in dark mode. */
 33 | 			dark: Loose<NonDark<RadixColorWithStep>>;
 34 | 	  }
 35 | 	| NonDark<RadixColorWithStep>
 36 | 	| {
 37 | 			/** The color to use in both light and dark mode. */
 38 | 			value: NonDark<RadixColorWithStep>;
 39 | 	  }
 40 | 	| {
 41 | 			/** Unique name for the alias. Used to generate the CSS variable name. */
 42 | 			name: string;
 43 | 			/** The color to use in both light and dark mode. */
 44 | 			value: Loose<NonDark<RadixColorWithStep>>;
 45 | 	  };
 46 | export type AliasOptions = AliasFullPaletteOptions | AliasSingleColorOptions;
 47 | export type DarkModeConfig = "class" | "media" | ["class", string];
 48 | 
 49 | export type AliaserOptions = {
 50 | 	rootSelector?: string;
 51 | };
 52 | 
 53 | export class Aliaser {
 54 | 	#aliases = new Map<string, { light: string; dark: string }>();
 55 | 	#radixColorNames: Array<string> = Object.keys(radix).filter(
 56 | 		(color) => !color.includes("Dark"),
 57 | 	);
 58 | 	#rootSelector: string;
 59 | 
 60 | 	public constructor(options: AliaserOptions = {}) {
 61 | 		this.#rootSelector = options.rootSelector ?? ":root";
 62 | 	}
 63 | 
 64 | 	/**
 65 | 	 * Alias a color to a new name.
 66 | 	 *
 67 | 	 * Can either be a single color, or a full palette.
 68 | 	 * Different values can be provided for light and dark mode.
 69 | 	 */
 70 | 	public alias(
 71 | 		options: AliasOptions,
 72 | 		step?: RadixStep,
 73 | 	): string | Record<string, string> {
 74 | 		if (step) {
 75 | 			return `var(--${options}${step})`;
 76 | 		} else if (typeof options === "string" && options.includes(".")) {
 77 | 			const [color, step] = options.split(".");
 78 | 			return `var(--${color}${step})`;
 79 | 		}
 80 | 
 81 | 		if (typeof options === "object" && "value" in options) {
 82 | 			const [color, step] = options.value.split(".");
 83 | 			return `var(--${color}${step})`;
 84 | 		}
 85 | 
 86 | 		if (typeof options === "string") {
 87 | 			const result: Record<string, string> = {};
 88 | 			for (let i = 1; i <= 12; i++) {
 89 | 				result[i] = `var(--${options}${i})`;
 90 | 			}
 91 | 			return result;
 92 | 		}
 93 | 
 94 | 		const variableName = this.#generatePrefix(
 95 | 			"name" in options ? options.name : undefined,
 96 | 		);
 97 | 		this.#aliases.set(variableName, {
 98 | 			light: options.light,
 99 | 			dark: options.dark,
100 | 		});
101 | 
102 | 		if (
103 | 			!this.#isRadixColorName(options.light) ||
104 | 			!this.#isRadixColorName(options.dark)
105 | 		) {
106 | 			return `var(--${variableName})`;
107 | 		}
108 | 
109 | 		if (options.light.includes(".") || options.dark.includes(".")) {
110 | 			return `var(--${variableName})`;
111 | 		}
112 | 
113 | 		const result: Record<string, string> = {};
114 | 		for (let i = 1; i <= 12; i++) {
115 | 			result[i] = `var(--${variableName}-${i})`;
116 | 		}
117 | 		return result;
118 | 	}
119 | 
120 | 	/** Generates Tailwind base styles for the aliased colors. */
121 | 	public generateStyles({
122 | 		darkMode,
123 | 		themeFn,
124 | 	}: {
125 | 		darkMode: DarkModeConfig;
126 | 		themeFn: (path: string, defaultValue: string) => string;
127 | 	}): Record<string, any> {
128 | 		if (this.#aliases.size === 0) {
129 | 			return {};
130 | 		}
131 | 
132 | 		const darkModeSelector = this.#getDarkModeSelector(darkMode);
133 | 		const lightTable: Record<string, string> = {};
134 | 		const darkTable: Record<string, string> = {};
135 | 
136 | 		for (const [variableName, { light, dark }] of this.#aliases) {
137 | 			if (!this.#isRadixColorName(light)) {
138 | 				lightTable[`--${variableName}`] = light;
139 | 			} else if (light.includes(".")) {
140 | 				const [color, step] = light.split(".");
141 | 				lightTable[`--${variableName}`] = themeFn(
142 | 					`colors.${light}`,
143 | 					`var(--${color}${step})`,
144 | 				);
145 | 			} else {
146 | 				for (let i = 1; i <= steps.length; i++) {
147 | 					lightTable[`--${variableName}-${i}`] = themeFn(
148 | 						`colors.${light}.${i}`,
149 | 						`var(--${light}${i})`,
150 | 					);
151 | 				}
152 | 			}
153 | 
154 | 			if (!this.#isRadixColorName(dark)) {
155 | 				darkTable[`--${variableName}`] = dark;
156 | 			} else if (dark.includes(".")) {
157 | 				const [color, step] = dark.split(".");
158 | 				darkTable[`--${variableName}`] = themeFn(
159 | 					`colors.${dark}`,
160 | 					`var(--${color}${step})`,
161 | 				);
162 | 			} else {
163 | 				for (let i = 1; i <= steps.length; i++) {
164 | 					darkTable[`--${variableName}-${i}`] = themeFn(
165 | 						`colors.${dark}.${i}`,
166 | 						`var(--${dark}${i})`,
167 | 					);
168 | 				}
169 | 			}
170 | 		}
171 | 
172 | 		return darkMode === "media"
173 | 			? {
174 | 					[this.#rootSelector]: lightTable,
175 | 					[darkModeSelector]: {
176 | 						[this.#rootSelector]: darkTable,
177 | 					},
178 | 			  }
179 | 			: {
180 | 					[this.#rootSelector]: lightTable,
181 | 					[darkModeSelector]: darkTable,
182 | 			  };
183 | 	}
184 | 
185 | 	#getDarkModeSelector(darkMode: DarkModeConfig): string {
186 | 		if (darkMode === "class") {
187 | 			return ".dark";
188 | 		} else if (Array.isArray(darkMode)) {
189 | 			return darkMode[1] ?? ".dark";
190 | 		} else {
191 | 			return "@media (prefers-color-scheme: dark)";
192 | 		}
193 | 	}
194 | 
195 | 	#generatePrefix(name?: string): string {
196 | 		if (name) {
197 | 			return name;
198 | 		}
199 | 
200 | 		return "wrp-alias-" + createId();
201 | 	}
202 | 
203 | 	#isRadixColorName(name: string): boolean {
204 | 		return this.#radixColorNames.includes(name.split(".")[0]);
205 | 	}
206 | }
207 | 


--------------------------------------------------------------------------------
/packages/palette/src/index.ts:
--------------------------------------------------------------------------------
 1 | export type { PluginOptions } from "./plugin";
 2 | export { createPlugin, createPlugin as default } from "./plugin";
 3 | export type {
 4 | 	AliasFullPaletteOptions,
 5 | 	AliasOptions,
 6 | 	AliasSingleColorOptions,
 7 | 	DarkModeConfig,
 8 | 	Loose,
 9 | 	NonDark,
10 | 	NumberOrString,
11 | 	RadixColor,
12 | 	RadixColorWithStep,
13 | 	RadixStep,
14 | } from "./alias";
15 | 


--------------------------------------------------------------------------------
/packages/palette/src/plugin.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, test } from "vitest";
  2 | import {
  3 | 	generateBaseStyles,
  4 | 	generateTailwindConfig,
  5 | 	hexToRGBChannels,
  6 | } from "./plugin";
  7 | 
  8 | test(hexToRGBChannels, () => {
  9 | 	expect(hexToRGBChannels("#ffffff")).toBe("255 255 255");
 10 | 	expect(hexToRGBChannels("#000000")).toBe("0 0 0");
 11 | });
 12 | 
 13 | describe(generateBaseStyles, () => {
 14 | 	test("opacity support disabled", () => {
 15 | 		expect(
 16 | 			generateBaseStyles({
 17 | 				colors: testColors,
 18 | 				opacitySupport: false,
 19 | 			}),
 20 | 		).toEqual({
 21 | 			light: {
 22 | 				"--gray1": "#fcfcfc",
 23 | 				"--gray2": "#f9f9f9",
 24 | 				"--gray3": "#f0f0f0",
 25 | 				"--gray4": "#e8e8e8",
 26 | 				"--gray5": "#e0e0e0",
 27 | 				"--gray6": "#d9d9d9",
 28 | 				"--gray7": "#cecece",
 29 | 				"--gray8": "#bbbbbb",
 30 | 				"--gray9": "#8d8d8d",
 31 | 				"--gray10": "#838383",
 32 | 				"--gray11": "#646464",
 33 | 				"--gray12": "#202020",
 34 | 				"--grayA1": "#00000003",
 35 | 				"--grayA2": "#00000006",
 36 | 				"--grayA3": "#0000000f",
 37 | 				"--grayA4": "#00000017",
 38 | 				"--grayA5": "#0000001f",
 39 | 				"--grayA6": "#00000026",
 40 | 				"--grayA7": "#00000031",
 41 | 				"--grayA8": "#00000044",
 42 | 				"--grayA9": "#00000072",
 43 | 				"--grayA10": "#0000007c",
 44 | 				"--grayA11": "#0000009b",
 45 | 				"--grayA12": "#000000df",
 46 | 			},
 47 | 			dark: {
 48 | 				"--gray1": "#111111",
 49 | 				"--gray2": "#191919",
 50 | 				"--gray3": "#222222",
 51 | 				"--gray4": "#2a2a2a",
 52 | 				"--gray5": "#313131",
 53 | 				"--gray6": "#3a3a3a",
 54 | 				"--gray7": "#484848",
 55 | 				"--gray8": "#606060",
 56 | 				"--gray9": "#6e6e6e",
 57 | 				"--gray10": "#7b7b7b",
 58 | 				"--gray11": "#b4b4b4",
 59 | 				"--gray12": "#eeeeee",
 60 | 				"--grayA1": "#00000000",
 61 | 				"--grayA2": "#ffffff09",
 62 | 				"--grayA3": "#ffffff12",
 63 | 				"--grayA4": "#ffffff1b",
 64 | 				"--grayA5": "#ffffff22",
 65 | 				"--grayA6": "#ffffff2c",
 66 | 				"--grayA7": "#ffffff3b",
 67 | 				"--grayA8": "#ffffff55",
 68 | 				"--grayA9": "#ffffff64",
 69 | 				"--grayA10": "#ffffff72",
 70 | 				"--grayA11": "#ffffffaf",
 71 | 				"--grayA12": "#ffffffed",
 72 | 			},
 73 | 			lightP3: {
 74 | 				"--gray1": "color(display-p3 0.988 0.988 0.988)",
 75 | 				"--gray2": "color(display-p3 0.975 0.975 0.975)",
 76 | 				"--gray3": "color(display-p3 0.939 0.939 0.939)",
 77 | 				"--gray4": "color(display-p3 0.908 0.908 0.908)",
 78 | 				"--gray5": "color(display-p3 0.88 0.88 0.88)",
 79 | 				"--gray6": "color(display-p3 0.849 0.849 0.849)",
 80 | 				"--gray7": "color(display-p3 0.807 0.807 0.807)",
 81 | 				"--gray8": "color(display-p3 0.732 0.732 0.732)",
 82 | 				"--gray9": "color(display-p3 0.553 0.553 0.553)",
 83 | 				"--gray10": "color(display-p3 0.512 0.512 0.512)",
 84 | 				"--gray11": "color(display-p3 0.392 0.392 0.392)",
 85 | 				"--gray12": "color(display-p3 0.125 0.125 0.125)",
 86 | 				"--grayA1": "color(display-p3 0 0 0 / 0.012)",
 87 | 				"--grayA2": "color(display-p3 0 0 0 / 0.024)",
 88 | 				"--grayA3": "color(display-p3 0 0 0 / 0.063)",
 89 | 				"--grayA4": "color(display-p3 0 0 0 / 0.09)",
 90 | 				"--grayA5": "color(display-p3 0 0 0 / 0.122)",
 91 | 				"--grayA6": "color(display-p3 0 0 0 / 0.153)",
 92 | 				"--grayA7": "color(display-p3 0 0 0 / 0.192)",
 93 | 				"--grayA8": "color(display-p3 0 0 0 / 0.267)",
 94 | 				"--grayA9": "color(display-p3 0 0 0 / 0.447)",
 95 | 				"--grayA10": "color(display-p3 0 0 0 / 0.486)",
 96 | 				"--grayA11": "color(display-p3 0 0 0 / 0.608)",
 97 | 				"--grayA12": "color(display-p3 0 0 0 / 0.875)",
 98 | 			},
 99 | 			darkP3: {
100 | 				"--gray1": "color(display-p3 0.067 0.067 0.067)",
101 | 				"--gray2": "color(display-p3 0.098 0.098 0.098)",
102 | 				"--gray3": "color(display-p3 0.135 0.135 0.135)",
103 | 				"--gray4": "color(display-p3 0.163 0.163 0.163)",
104 | 				"--gray5": "color(display-p3 0.192 0.192 0.192)",
105 | 				"--gray6": "color(display-p3 0.228 0.228 0.228)",
106 | 				"--gray7": "color(display-p3 0.283 0.283 0.283)",
107 | 				"--gray8": "color(display-p3 0.375 0.375 0.375)",
108 | 				"--gray9": "color(display-p3 0.431 0.431 0.431)",
109 | 				"--gray10": "color(display-p3 0.484 0.484 0.484)",
110 | 				"--gray11": "color(display-p3 0.706 0.706 0.706)",
111 | 				"--gray12": "color(display-p3 0.933 0.933 0.933)",
112 | 				"--grayA1": "color(display-p3 0 0 0 / 0)",
113 | 				"--grayA2": "color(display-p3 1 1 1 / 0.034)",
114 | 				"--grayA3": "color(display-p3 1 1 1 / 0.071)",
115 | 				"--grayA4": "color(display-p3 1 1 1 / 0.105)",
116 | 				"--grayA5": "color(display-p3 1 1 1 / 0.134)",
117 | 				"--grayA6": "color(display-p3 1 1 1 / 0.172)",
118 | 				"--grayA7": "color(display-p3 1 1 1 / 0.231)",
119 | 				"--grayA8": "color(display-p3 1 1 1 / 0.332)",
120 | 				"--grayA9": "color(display-p3 1 1 1 / 0.391)",
121 | 				"--grayA10": "color(display-p3 1 1 1 / 0.445)",
122 | 				"--grayA11": "color(display-p3 1 1 1 / 0.685)",
123 | 				"--grayA12": "color(display-p3 1 1 1 / 0.929)",
124 | 			},
125 | 		});
126 | 	});
127 | 
128 | 	test("opacity support enabled", () => {
129 | 		expect(
130 | 			generateBaseStyles({
131 | 				colors: testColors,
132 | 				opacitySupport: true,
133 | 			}),
134 | 		).toEqual({
135 | 			light: {
136 | 				"--gray1": "252 252 252",
137 | 				"--gray2": "249 249 249",
138 | 				"--gray3": "240 240 240",
139 | 				"--gray4": "232 232 232",
140 | 				"--gray5": "224 224 224",
141 | 				"--gray6": "217 217 217",
142 | 				"--gray7": "206 206 206",
143 | 				"--gray8": "187 187 187",
144 | 				"--gray9": "141 141 141",
145 | 				"--gray10": "131 131 131",
146 | 				"--gray11": "100 100 100",
147 | 				"--gray12": "32 32 32",
148 | 				"--grayA1": "#00000003",
149 | 				"--grayA2": "#00000006",
150 | 				"--grayA3": "#0000000f",
151 | 				"--grayA4": "#00000017",
152 | 				"--grayA5": "#0000001f",
153 | 				"--grayA6": "#00000026",
154 | 				"--grayA7": "#00000031",
155 | 				"--grayA8": "#00000044",
156 | 				"--grayA9": "#00000072",
157 | 				"--grayA10": "#0000007c",
158 | 				"--grayA11": "#0000009b",
159 | 				"--grayA12": "#000000df",
160 | 			},
161 | 			dark: {
162 | 				"--gray1": "17 17 17",
163 | 				"--gray2": "25 25 25",
164 | 				"--gray3": "34 34 34",
165 | 				"--gray4": "42 42 42",
166 | 				"--gray5": "49 49 49",
167 | 				"--gray6": "58 58 58",
168 | 				"--gray7": "72 72 72",
169 | 				"--gray8": "96 96 96",
170 | 				"--gray9": "110 110 110",
171 | 				"--gray10": "123 123 123",
172 | 				"--gray11": "180 180 180",
173 | 				"--gray12": "238 238 238",
174 | 				"--grayA1": "#00000000",
175 | 				"--grayA2": "#ffffff09",
176 | 				"--grayA3": "#ffffff12",
177 | 				"--grayA4": "#ffffff1b",
178 | 				"--grayA5": "#ffffff22",
179 | 				"--grayA6": "#ffffff2c",
180 | 				"--grayA7": "#ffffff3b",
181 | 				"--grayA8": "#ffffff55",
182 | 				"--grayA9": "#ffffff64",
183 | 				"--grayA10": "#ffffff72",
184 | 				"--grayA11": "#ffffffaf",
185 | 				"--grayA12": "#ffffffed",
186 | 			},
187 | 			lightP3: {
188 | 				"--grayP31": "display-p3 0.988 0.988 0.988",
189 | 				"--grayP32": "display-p3 0.975 0.975 0.975",
190 | 				"--grayP33": "display-p3 0.939 0.939 0.939",
191 | 				"--grayP34": "display-p3 0.908 0.908 0.908",
192 | 				"--grayP35": "display-p3 0.88 0.88 0.88",
193 | 				"--grayP36": "display-p3 0.849 0.849 0.849",
194 | 				"--grayP37": "display-p3 0.807 0.807 0.807",
195 | 				"--grayP38": "display-p3 0.732 0.732 0.732",
196 | 				"--grayP39": "display-p3 0.553 0.553 0.553",
197 | 				"--grayP310": "display-p3 0.512 0.512 0.512",
198 | 				"--grayP311": "display-p3 0.392 0.392 0.392",
199 | 				"--grayP312": "display-p3 0.125 0.125 0.125",
200 | 				"--grayP3A1": "color(display-p3 0 0 0 / 0.012)",
201 | 				"--grayP3A2": "color(display-p3 0 0 0 / 0.024)",
202 | 				"--grayP3A3": "color(display-p3 0 0 0 / 0.063)",
203 | 				"--grayP3A4": "color(display-p3 0 0 0 / 0.09)",
204 | 				"--grayP3A5": "color(display-p3 0 0 0 / 0.122)",
205 | 				"--grayP3A6": "color(display-p3 0 0 0 / 0.153)",
206 | 				"--grayP3A7": "color(display-p3 0 0 0 / 0.192)",
207 | 				"--grayP3A8": "color(display-p3 0 0 0 / 0.267)",
208 | 				"--grayP3A9": "color(display-p3 0 0 0 / 0.447)",
209 | 				"--grayP3A10": "color(display-p3 0 0 0 / 0.486)",
210 | 				"--grayP3A11": "color(display-p3 0 0 0 / 0.608)",
211 | 				"--grayP3A12": "color(display-p3 0 0 0 / 0.875)",
212 | 			},
213 | 			darkP3: {
214 | 				"--grayP31": "display-p3 0.067 0.067 0.067",
215 | 				"--grayP32": "display-p3 0.098 0.098 0.098",
216 | 				"--grayP33": "display-p3 0.135 0.135 0.135",
217 | 				"--grayP34": "display-p3 0.163 0.163 0.163",
218 | 				"--grayP35": "display-p3 0.192 0.192 0.192",
219 | 				"--grayP36": "display-p3 0.228 0.228 0.228",
220 | 				"--grayP37": "display-p3 0.283 0.283 0.283",
221 | 				"--grayP38": "display-p3 0.375 0.375 0.375",
222 | 				"--grayP39": "display-p3 0.431 0.431 0.431",
223 | 				"--grayP310": "display-p3 0.484 0.484 0.484",
224 | 				"--grayP311": "display-p3 0.706 0.706 0.706",
225 | 				"--grayP312": "display-p3 0.933 0.933 0.933",
226 | 				"--grayP3A1": "color(display-p3 0 0 0 / 0)",
227 | 				"--grayP3A2": "color(display-p3 1 1 1 / 0.034)",
228 | 				"--grayP3A3": "color(display-p3 1 1 1 / 0.071)",
229 | 				"--grayP3A4": "color(display-p3 1 1 1 / 0.105)",
230 | 				"--grayP3A5": "color(display-p3 1 1 1 / 0.134)",
231 | 				"--grayP3A6": "color(display-p3 1 1 1 / 0.172)",
232 | 				"--grayP3A7": "color(display-p3 1 1 1 / 0.231)",
233 | 				"--grayP3A8": "color(display-p3 1 1 1 / 0.332)",
234 | 				"--grayP3A9": "color(display-p3 1 1 1 / 0.391)",
235 | 				"--grayP3A10": "color(display-p3 1 1 1 / 0.445)",
236 | 				"--grayP3A11": "color(display-p3 1 1 1 / 0.685)",
237 | 				"--grayP3A12": "color(display-p3 1 1 1 / 0.929)",
238 | 			},
239 | 		});
240 | 	});
241 | });
242 | 
243 | describe(generateTailwindConfig, () => {
244 | 	test("opacity support disabled", () => {
245 | 		expect(
246 | 			generateTailwindConfig({
247 | 				colors: testColors,
248 | 				opacitySupport: false,
249 | 			}),
250 | 		).toEqual({
251 | 			theme: {
252 | 				extend: {
253 | 					colors: {
254 | 						gray: {
255 | 							1: "var(--gray1)",
256 | 							2: "var(--gray2)",
257 | 							3: "var(--gray3)",
258 | 							4: "var(--gray4)",
259 | 							5: "var(--gray5)",
260 | 							6: "var(--gray6)",
261 | 							7: "var(--gray7)",
262 | 							8: "var(--gray8)",
263 | 							9: "var(--gray9)",
264 | 							10: "var(--gray10)",
265 | 							11: "var(--gray11)",
266 | 							12: "var(--gray12)",
267 | 						},
268 | 						grayA: {
269 | 							1: "var(--grayA1)",
270 | 							2: "var(--grayA2)",
271 | 							3: "var(--grayA3)",
272 | 							4: "var(--grayA4)",
273 | 							5: "var(--grayA5)",
274 | 							6: "var(--grayA6)",
275 | 							7: "var(--grayA7)",
276 | 							8: "var(--grayA8)",
277 | 							9: "var(--grayA9)",
278 | 							10: "var(--grayA10)",
279 | 							11: "var(--grayA11)",
280 | 							12: "var(--grayA12)",
281 | 						},
282 | 					},
283 | 				},
284 | 			},
285 | 		});
286 | 	});
287 | 
288 | 	test("opacity support enabled", () => {
289 | 		expect(
290 | 			generateTailwindConfig({
291 | 				colors: testColors,
292 | 				opacitySupport: true,
293 | 			}),
294 | 		).toEqual({
295 | 			theme: {
296 | 				extend: {
297 | 					colors: {
298 | 						gray: {
299 | 							1: "rgb(var(--gray1) / <alpha-value>)",
300 | 							2: "rgb(var(--gray2) / <alpha-value>)",
301 | 							3: "rgb(var(--gray3) / <alpha-value>)",
302 | 							4: "rgb(var(--gray4) / <alpha-value>)",
303 | 							5: "rgb(var(--gray5) / <alpha-value>)",
304 | 							6: "rgb(var(--gray6) / <alpha-value>)",
305 | 							7: "rgb(var(--gray7) / <alpha-value>)",
306 | 							8: "rgb(var(--gray8) / <alpha-value>)",
307 | 							9: "rgb(var(--gray9) / <alpha-value>)",
308 | 							10: "rgb(var(--gray10) / <alpha-value>)",
309 | 							11: "rgb(var(--gray11) / <alpha-value>)",
310 | 							12: "rgb(var(--gray12) / <alpha-value>)",
311 | 						},
312 | 						grayA: {
313 | 							1: "var(--grayA1)",
314 | 							2: "var(--grayA2)",
315 | 							3: "var(--grayA3)",
316 | 							4: "var(--grayA4)",
317 | 							5: "var(--grayA5)",
318 | 							6: "var(--grayA6)",
319 | 							7: "var(--grayA7)",
320 | 							8: "var(--grayA8)",
321 | 							9: "var(--grayA9)",
322 | 							10: "var(--grayA10)",
323 | 							11: "var(--grayA11)",
324 | 							12: "var(--grayA12)",
325 | 						},
326 | 						grayP3: {
327 | 							1: "color(var(--grayP31) / <alpha-value>)",
328 | 							2: "color(var(--grayP32) / <alpha-value>)",
329 | 							3: "color(var(--grayP33) / <alpha-value>)",
330 | 							4: "color(var(--grayP34) / <alpha-value>)",
331 | 							5: "color(var(--grayP35) / <alpha-value>)",
332 | 							6: "color(var(--grayP36) / <alpha-value>)",
333 | 							7: "color(var(--grayP37) / <alpha-value>)",
334 | 							8: "color(var(--grayP38) / <alpha-value>)",
335 | 							9: "color(var(--grayP39) / <alpha-value>)",
336 | 							10: "color(var(--grayP310) / <alpha-value>)",
337 | 							11: "color(var(--grayP311) / <alpha-value>)",
338 | 							12: "color(var(--grayP312) / <alpha-value>)",
339 | 						},
340 | 						grayP3A: {
341 | 							1: "var(--grayP3A1)",
342 | 							2: "var(--grayP3A2)",
343 | 							3: "var(--grayP3A3)",
344 | 							4: "var(--grayP3A4)",
345 | 							5: "var(--grayP3A5)",
346 | 							6: "var(--grayP3A6)",
347 | 							7: "var(--grayP3A7)",
348 | 							8: "var(--grayP3A8)",
349 | 							9: "var(--grayP3A9)",
350 | 							10: "var(--grayP3A10)",
351 | 							11: "var(--grayP3A11)",
352 | 							12: "var(--grayP3A12)",
353 | 						},
354 | 					},
355 | 				},
356 | 			},
357 | 		});
358 | 	});
359 | });
360 | 
361 | const testColors = {
362 | 	gray: {
363 | 		gray1: "#fcfcfc",
364 | 		gray2: "#f9f9f9",
365 | 		gray3: "#f0f0f0",
366 | 		gray4: "#e8e8e8",
367 | 		gray5: "#e0e0e0",
368 | 		gray6: "#d9d9d9",
369 | 		gray7: "#cecece",
370 | 		gray8: "#bbbbbb",
371 | 		gray9: "#8d8d8d",
372 | 		gray10: "#838383",
373 | 		gray11: "#646464",
374 | 		gray12: "#202020",
375 | 	},
376 | 	grayA: {
377 | 		grayA1: "#00000003",
378 | 		grayA2: "#00000006",
379 | 		grayA3: "#0000000f",
380 | 		grayA4: "#00000017",
381 | 		grayA5: "#0000001f",
382 | 		grayA6: "#00000026",
383 | 		grayA7: "#00000031",
384 | 		grayA8: "#00000044",
385 | 		grayA9: "#00000072",
386 | 		grayA10: "#0000007c",
387 | 		grayA11: "#0000009b",
388 | 		grayA12: "#000000df",
389 | 	},
390 | 	grayP3: {
391 | 		gray1: "color(display-p3 0.988 0.988 0.988)",
392 | 		gray2: "color(display-p3 0.975 0.975 0.975)",
393 | 		gray3: "color(display-p3 0.939 0.939 0.939)",
394 | 		gray4: "color(display-p3 0.908 0.908 0.908)",
395 | 		gray5: "color(display-p3 0.88 0.88 0.88)",
396 | 		gray6: "color(display-p3 0.849 0.849 0.849)",
397 | 		gray7: "color(display-p3 0.807 0.807 0.807)",
398 | 		gray8: "color(display-p3 0.732 0.732 0.732)",
399 | 		gray9: "color(display-p3 0.553 0.553 0.553)",
400 | 		gray10: "color(display-p3 0.512 0.512 0.512)",
401 | 		gray11: "color(display-p3 0.392 0.392 0.392)",
402 | 		gray12: "color(display-p3 0.125 0.125 0.125)",
403 | 	},
404 | 	grayP3A: {
405 | 		grayA1: "color(display-p3 0 0 0 / 0.012)",
406 | 		grayA2: "color(display-p3 0 0 0 / 0.024)",
407 | 		grayA3: "color(display-p3 0 0 0 / 0.063)",
408 | 		grayA4: "color(display-p3 0 0 0 / 0.09)",
409 | 		grayA5: "color(display-p3 0 0 0 / 0.122)",
410 | 		grayA6: "color(display-p3 0 0 0 / 0.153)",
411 | 		grayA7: "color(display-p3 0 0 0 / 0.192)",
412 | 		grayA8: "color(display-p3 0 0 0 / 0.267)",
413 | 		grayA9: "color(display-p3 0 0 0 / 0.447)",
414 | 		grayA10: "color(display-p3 0 0 0 / 0.486)",
415 | 		grayA11: "color(display-p3 0 0 0 / 0.608)",
416 | 		grayA12: "color(display-p3 0 0 0 / 0.875)",
417 | 	},
418 | 	grayDark: {
419 | 		gray1: "#111111",
420 | 		gray2: "#191919",
421 | 		gray3: "#222222",
422 | 		gray4: "#2a2a2a",
423 | 		gray5: "#313131",
424 | 		gray6: "#3a3a3a",
425 | 		gray7: "#484848",
426 | 		gray8: "#606060",
427 | 		gray9: "#6e6e6e",
428 | 		gray10: "#7b7b7b",
429 | 		gray11: "#b4b4b4",
430 | 		gray12: "#eeeeee",
431 | 	},
432 | 	grayDarkA: {
433 | 		grayA1: "#00000000",
434 | 		grayA2: "#ffffff09",
435 | 		grayA3: "#ffffff12",
436 | 		grayA4: "#ffffff1b",
437 | 		grayA5: "#ffffff22",
438 | 		grayA6: "#ffffff2c",
439 | 		grayA7: "#ffffff3b",
440 | 		grayA8: "#ffffff55",
441 | 		grayA9: "#ffffff64",
442 | 		grayA10: "#ffffff72",
443 | 		grayA11: "#ffffffaf",
444 | 		grayA12: "#ffffffed",
445 | 	},
446 | 	grayDarkP3: {
447 | 		gray1: "color(display-p3 0.067 0.067 0.067)",
448 | 		gray2: "color(display-p3 0.098 0.098 0.098)",
449 | 		gray3: "color(display-p3 0.135 0.135 0.135)",
450 | 		gray4: "color(display-p3 0.163 0.163 0.163)",
451 | 		gray5: "color(display-p3 0.192 0.192 0.192)",
452 | 		gray6: "color(display-p3 0.228 0.228 0.228)",
453 | 		gray7: "color(display-p3 0.283 0.283 0.283)",
454 | 		gray8: "color(display-p3 0.375 0.375 0.375)",
455 | 		gray9: "color(display-p3 0.431 0.431 0.431)",
456 | 		gray10: "color(display-p3 0.484 0.484 0.484)",
457 | 		gray11: "color(display-p3 0.706 0.706 0.706)",
458 | 		gray12: "color(display-p3 0.933 0.933 0.933)",
459 | 	},
460 | 	grayDarkP3A: {
461 | 		grayA1: "color(display-p3 0 0 0 / 0)",
462 | 		grayA2: "color(display-p3 1 1 1 / 0.034)",
463 | 		grayA3: "color(display-p3 1 1 1 / 0.071)",
464 | 		grayA4: "color(display-p3 1 1 1 / 0.105)",
465 | 		grayA5: "color(display-p3 1 1 1 / 0.134)",
466 | 		grayA6: "color(display-p3 1 1 1 / 0.172)",
467 | 		grayA7: "color(display-p3 1 1 1 / 0.231)",
468 | 		grayA8: "color(display-p3 1 1 1 / 0.332)",
469 | 		grayA9: "color(display-p3 1 1 1 / 0.391)",
470 | 		grayA10: "color(display-p3 1 1 1 / 0.445)",
471 | 		grayA11: "color(display-p3 1 1 1 / 0.685)",
472 | 		grayA12: "color(display-p3 1 1 1 / 0.929)",
473 | 	},
474 | };
475 | 


--------------------------------------------------------------------------------
/packages/palette/src/plugin.ts:
--------------------------------------------------------------------------------
  1 | import * as radix from "@radix-ui/colors";
  2 | import plugin from "tailwindcss/plugin";
  3 | import { Aliaser } from "./alias";
  4 | 
  5 | export type PluginOptions = {
  6 | 	/**
  7 | 	 * Radix Colors that should have Tailwind classes generated.
  8 | 	 */
  9 | 	colors?: Partial<typeof radix>;
 10 | 	/**
 11 | 	 * Generates Tailwind configuration that supports use with the opacity modifier.
 12 | 	 *
 13 | 	 * **Note:** Enabling this option will mean that P3 colors cannot be automatically
 14 | 	 * supported when support is detected, and you will instead need to manually add
 15 | 	 * classes for them to your markup.
 16 | 	 * @see https://tailwindcss.com/docs/background-color#changing-the-opacity
 17 | 	 * @default false
 18 | 	 */
 19 | 	opacitySupport?: boolean;
 20 | 	/**
 21 | 	 * The root selector to use for the generated CSS variables.
 22 | 	 * @default ":root"
 23 | 	 */
 24 | 	rootSelector?: string;
 25 | };
 26 | 
 27 | export function createPlugin({
 28 | 	colors = radix,
 29 | 	opacitySupport = false,
 30 | 	rootSelector = ":root",
 31 | }: PluginOptions = {}) {
 32 | 	const aliaser = new Aliaser({
 33 | 		rootSelector,
 34 | 	});
 35 | 
 36 | 	const wrpPlugin = plugin(({ addBase, addVariant, config, theme }) => {
 37 | 		const baseStyles = generateBaseStyles({
 38 | 			colors,
 39 | 			opacitySupport,
 40 | 		});
 41 | 		const darkModeConfig = config("darkMode", "media");
 42 | 		const [darkMode, className = ".dark"] = ([] as Array<string>).concat(
 43 | 			darkModeConfig,
 44 | 		);
 45 | 
 46 | 		addVariant(
 47 | 			"p3",
 48 | 			"@supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) }",
 49 | 		);
 50 | 
 51 | 		if (darkMode === "class") {
 52 | 			addBase({
 53 | 				[rootSelector]: baseStyles.light,
 54 | 				[className]: baseStyles.dark,
 55 | 				"@supports (color: color(display-p3 1 1 1))": {
 56 | 					"@media (color-gamut: p3)": {
 57 | 						[rootSelector]: baseStyles.lightP3,
 58 | 						[className]: baseStyles.darkP3,
 59 | 					},
 60 | 				},
 61 | 			});
 62 | 		} else {
 63 | 			addBase({
 64 | 				[rootSelector]: baseStyles.light,
 65 | 				"@media (prefers-color-scheme: dark)": {
 66 | 					[rootSelector]: baseStyles.dark,
 67 | 				},
 68 | 				"@supports (color: color(display-p3 1 1 1))": {
 69 | 					"@media (color-gamut: p3)": {
 70 | 						[rootSelector]: baseStyles.lightP3,
 71 | 						"@media (prefers-color-scheme: dark)": {
 72 | 							[rootSelector]: baseStyles.darkP3,
 73 | 						},
 74 | 					},
 75 | 				},
 76 | 			});
 77 | 		}
 78 | 
 79 | 		addBase(
 80 | 			aliaser.generateStyles({
 81 | 				darkMode: darkModeConfig,
 82 | 				themeFn: theme,
 83 | 			}),
 84 | 		);
 85 | 	}, generateTailwindConfig({ colors, opacitySupport }));
 86 | 
 87 | 	return { alias: aliaser.alias.bind(aliaser), plugin: wrpPlugin };
 88 | }
 89 | 
 90 | export function hexToRGBChannels(hex: string): string {
 91 | 	const r = hex.substring(1, 3);
 92 | 	const g = hex.substring(3, 5);
 93 | 	const b = hex.substring(5, 7);
 94 | 	return `${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)}`;
 95 | }
 96 | 
 97 | export function generateBaseStyles(options: {
 98 | 	colors: Partial<typeof radix>;
 99 | 	opacitySupport: boolean;
100 | }): {
101 | 	light: Record<string, string>;
102 | 	dark: Record<string, string>;
103 | 	lightP3: Record<string, string>;
104 | 	darkP3: Record<string, string>;
105 | } {
106 | 	const mappings: Record<
107 | 		"light" | "dark" | "lightP3" | "darkP3",
108 | 		Record<string, string>
109 | 	> = {
110 | 		light: {},
111 | 		dark: {},
112 | 		lightP3: {},
113 | 		darkP3: {},
114 | 	};
115 | 
116 | 	for (const [colorName, steps] of Object.entries(options.colors)) {
117 | 		let map = mappings.light;
118 | 		if (colorName.includes("P3")) {
119 | 			map = colorName.includes("Dark")
120 | 				? mappings.darkP3
121 | 				: mappings.lightP3;
122 | 		} else if (colorName.includes("Dark")) {
123 | 			map = mappings.dark;
124 | 		}
125 | 
126 | 		for (const [key, value] of Object.entries(steps)) {
127 | 			let color = value;
128 | 			if (options.opacitySupport && !key.includes("A")) {
129 | 				if (colorName.includes("P3")) {
130 | 					color = value.slice(
131 | 						value.indexOf("(") + 1,
132 | 						value.indexOf(")"),
133 | 					);
134 | 				} else {
135 | 					color = hexToRGBChannels(value);
136 | 				}
137 | 			}
138 | 
139 | 			let varName = key;
140 | 			// When opacity support is enabled, P3 colors will have "P3" in the name,
141 | 			// in order to avoid conflicts with the non-P3 colors.
142 | 			if (options.opacitySupport && colorName.includes("P3")) {
143 | 				const normalizedColorName = colorName.replace("Dark", "");
144 | 				varName = `${normalizedColorName}${key.slice(
145 | 					normalizedColorName.length - "P3".length,
146 | 				)}`;
147 | 			}
148 | 
149 | 			map[`--${varName}`] = color;
150 | 		}
151 | 	}
152 | 
153 | 	return mappings;
154 | }
155 | 
156 | export function generateTailwindConfig({
157 | 	colors,
158 | 	opacitySupport,
159 | }: Required<Pick<PluginOptions, "colors" | "opacitySupport">>) {
160 | 	const themeColors: Record<string, Record<string, string>> = {};
161 | 
162 | 	for (const [colorName, steps] of Object.entries(colors)) {
163 | 		if (!opacitySupport && colorName.includes("P3")) {
164 | 			continue;
165 | 		}
166 | 
167 | 		const themeColor: Record<string, string> = {};
168 | 		for (const key of Object.keys(steps)) {
169 | 			const stepKey = key.replace(
170 | 				colorName.replace("Dark", "").replace("P3", ""),
171 | 				"",
172 | 			);
173 | 			let value = `var(--${key})`;
174 | 			if (opacitySupport) {
175 | 				if (colorName.includes("P3")) {
176 | 					const variable = `var(--${colorName.replace(
177 | 						"Dark",
178 | 						"",
179 | 					)}${stepKey})`;
180 | 					if (colorName.includes("A")) {
181 | 						value = variable;
182 | 					} else {
183 | 						value = `color(${variable} / <alpha-value>)`;
184 | 					}
185 | 				} else if (!colorName.includes("A")) {
186 | 					value = `rgb(var(--${key}) / <alpha-value>)`;
187 | 				}
188 | 			}
189 | 			themeColor[stepKey] = value;
190 | 		}
191 | 
192 | 		themeColors[colorName.replace("Dark", "")] = themeColor;
193 | 	}
194 | 
195 | 	return {
196 | 		theme: {
197 | 			extend: {
198 | 				colors: themeColors,
199 | 			},
200 | 		},
201 | 	};
202 | }
203 | 


--------------------------------------------------------------------------------
/packages/palette/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"$schema": "https://json.schemastore.org/tsconfig.json",
3 | 	"extends": "../../tsconfig.json",
4 | 	"compilerOptions": {
5 | 		"outDir": "dist"
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/palette/tsup.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "tsup";
 2 | 
 3 | export default defineConfig({
 4 | 	entry: ["src/index.ts"],
 5 | 	clean: true,
 6 | 	dts: true,
 7 | 	external: ["@radix-ui/colors", "tailwindcss"],
 8 | 	format: ["cjs", "esm"],
 9 | });
10 | 


--------------------------------------------------------------------------------
/packages/typography/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://json.schemastore.org/package.json",
 3 | 	"name": "windy-radix-typography",
 4 | 	"version": "1.0.0-beta.0",
 5 | 	"description": "Bring Radix Colors to Tailwind Typography",
 6 | 	"repository": {
 7 | 		"url": "https://github.com/brattonross/windy-radix-palette",
 8 | 		"directory": "packages/typography"
 9 | 	},
10 | 	"publishConfig": {
11 | 		"access": "public"
12 | 	},
13 | 	"keywords": [
14 | 		"tailwindcss",
15 | 		"plugin",
16 | 		"radix-ui"
17 | 	],
18 | 	"author": "Ross Bratton <bratton.ross@gmail.com>",
19 | 	"license": "MIT",
20 | 	"files": [
21 | 		"dist"
22 | 	],
23 | 	"exports": {
24 | 		".": {
25 | 			"import": {
26 | 				"types": "./dist/index.d.mts",
27 | 				"default": "./dist/index.mjs"
28 | 			},
29 | 			"require": {
30 | 				"types": "./dist/index.d.ts",
31 | 				"default": "./dist/index.js"
32 | 			}
33 | 		}
34 | 	},
35 | 	"main": "./dist/index.js",
36 | 	"types": "./dist/index.d.ts",
37 | 	"scripts": {
38 | 		"dev": "tsup --watch",
39 | 		"build": "tsup"
40 | 	},
41 | 	"peerDependencies": {
42 | 		"@radix-ui/colors": ">=3.0.0",
43 | 		"@tailwindcss/typography": ">=0.1.0",
44 | 		"tailwindcss": ">=3.0.0",
45 | 		"windy-radix-palette": ">=2.0.0-beta.2"
46 | 	},
47 | 	"devDependencies": {
48 | 		"@radix-ui/colors": "3.0.0",
49 | 		"tailwindcss": "^3.3.5",
50 | 		"tsup": "^7.2.0"
51 | 	}
52 | }
53 | 


--------------------------------------------------------------------------------
/packages/typography/src/index.ts:
--------------------------------------------------------------------------------
 1 | import * as colors from "@radix-ui/colors";
 2 | import type { Config } from "tailwindcss";
 3 | 
 4 | const colorNames = Object.keys(colors).filter(
 5 | 	(color) => !color.includes("Dark"),
 6 | );
 7 | 
 8 | export const preset = {
 9 | 	content: [],
10 | 	theme: {
11 | 		extend: {
12 | 			typography: ({ theme }: { theme: (key: string) => string }) => {
13 | 				const config: Record<string, { css: Record<string, string> }> =
14 | 					{};
15 | 				for (let i = 0; i < colorNames.length; i++) {
16 | 					const color = colorNames[i];
17 | 					config[color] = {
18 | 						css: {
19 | 							"--tw-prose-body": theme(`colors.${color}.12`),
20 | 							"--tw-prose-headings": theme(`colors.${color}.12`),
21 | 							"--tw-prose-lead": theme(`colors.${color}.11`),
22 | 							"--tw-prose-links": theme(`colors.${color}.12`),
23 | 							"--tw-prose-bold": theme(`colors.${color}.12`),
24 | 							"--tw-prose-counters": theme(`colors.${color}.10`),
25 | 							"--tw-prose-bullets": theme(`colors.${color}.8`),
26 | 							"--tw-prose-hr": theme(`colors.${color}.6`),
27 | 							"--tw-prose-quotes": theme(`colors.${color}.11`),
28 | 							"--tw-prose-quote-borders": theme(
29 | 								`colors.${color}.6`,
30 | 							),
31 | 							"--tw-prose-captions": theme(`colors.${color}.11`),
32 | 							"--tw-prose-code": theme(`colors.${color}.12`),
33 | 							"--tw-prose-pre-code": theme(`colors.${color}.12`),
34 | 							"--tw-prose-pre-bg": theme(`colors.${color}.2`),
35 | 							"--tw-prose-th-borders": theme(`colors.${color}.6`),
36 | 							"--tw-prose-td-borders": theme(`colors.${color}.6`),
37 | 							"--tw-prose-invert-body": theme(
38 | 								`colors.${color}.12`,
39 | 							),
40 | 							"--tw-prose-invert-headings": theme(
41 | 								`colors.${color}.12`,
42 | 							),
43 | 							"--tw-prose-invert-lead": theme(
44 | 								`colors.${color}.11`,
45 | 							),
46 | 							"--tw-prose-invert-links": theme(
47 | 								`colors.${color}.12`,
48 | 							),
49 | 							"--tw-prose-invert-bold": theme(
50 | 								`colors.${color}.12`,
51 | 							),
52 | 							"--tw-prose-invert-counters": theme(
53 | 								`colors.${color}.10`,
54 | 							),
55 | 							"--tw-prose-invert-bullets": theme(
56 | 								`colors.${color}.8`,
57 | 							),
58 | 							"--tw-prose-invert-hr": theme(`colors.${color}.6`),
59 | 							"--tw-prose-invert-quotes": theme(
60 | 								`colors.${color}.11`,
61 | 							),
62 | 							"--tw-prose-invert-quote-borders": theme(
63 | 								`colors.${color}.6`,
64 | 							),
65 | 							"--tw-prose-invert-captions": theme(
66 | 								`colors.${color}.11`,
67 | 							),
68 | 							"--tw-prose-invert-code": theme(
69 | 								`colors.${color}.12`,
70 | 							),
71 | 							"--tw-prose-invert-pre-code": theme(
72 | 								`colors.${color}.12`,
73 | 							),
74 | 							"--tw-prose-invert-pre-bg": theme(
75 | 								`colors.${color}.2`,
76 | 							),
77 | 							"--tw-prose-invert-th-borders": theme(
78 | 								`colors.${color}.6`,
79 | 							),
80 | 							"--tw-prose-invert-td-borders": theme(
81 | 								`colors.${color}.6`,
82 | 							),
83 | 						},
84 | 					};
85 | 				}
86 | 				return config;
87 | 			},
88 | 		},
89 | 	},
90 | } satisfies Config;
91 | 
92 | export default preset;
93 | 


--------------------------------------------------------------------------------
/packages/typography/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"$schema": "https://json.schemastore.org/tsconfig.json",
3 | 	"extends": "../../tsconfig.json",
4 | 	"compilerOptions": {
5 | 		"outDir": "dist"
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/typography/tsup.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "tsup";
 2 | 
 3 | export default defineConfig({
 4 | 	entry: ["src/index.ts"],
 5 | 	clean: true,
 6 | 	dts: true,
 7 | 	external: ["@radix-ui/colors", "tailwindcss"],
 8 | 	format: ["cjs", "esm"],
 9 | });
10 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |     - "docs"
3 |     - "packages/*"
4 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	tabWidth: 4,
3 | 	useTabs: true,
4 | 	plugins: [
5 | 		require.resolve("prettier-plugin-astro"),
6 | 		require.resolve("prettier-plugin-tailwindcss"),
7 | 	],
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "http://json.schemastore.org/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowImportingTsExtensions": true,
 5 | 		"allowSyntheticDefaultImports": true,
 6 | 		"downlevelIteration": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"lib": ["esnext"],
 9 | 		"module": "esnext",
10 | 		"moduleDetection": "force",
11 | 		"moduleResolution": "bundler",
12 | 		"noEmit": true,
13 | 		"skipLibCheck": true,
14 | 		"strict": true,
15 | 		"target": "esnext",
16 | 		"verbatimModuleSyntax": true
17 | 	}
18 | }
19 | 


--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://turborepo.org/schema.json",
 3 | 	"pipeline": {
 4 | 		"build": {
 5 | 			"dependsOn": ["^build"],
 6 | 			"outputs": ["dist/**"]
 7 | 		},
 8 | 		"dev": {
 9 | 			"dependsOn": ["^build"],
10 | 			"cache": false
11 | 		},
12 | 		"test": {}
13 | 	}
14 | }
15 | 


--------------------------------------------------------------------------------