From 78bf512ffdff6f6992538bc1880b59889c954e97 Mon Sep 17 00:00:00 2001 From: Yiming Li Date: Sat, 27 Nov 2021 17:30:54 +0800 Subject: [PATCH] feat: improve the shades generating algorithm and add test cases --- .github/workflows/ci.yml | 1 + README.md | 74 +- babel.config.js | 7 + .../customized-palette-keys/vite.config.ts | 2 +- examples/override-shades/vite.config.ts | 2 +- examples/tailwind/index.html | 71 +- examples/tailwind/style.css | 4 +- examples/tailwind/vite.config.ts | 2 +- examples/windi/index.html | 71 +- examples/windi/main.ts | 1 + examples/windi/style.css | 4 +- examples/windi/vite.config.ts | 2 +- jest.config.js | 5 + package.json | 8 +- pnpm-lock.yaml | 2990 ++++++++++++++++- src/__snapshots__/shades.spec.ts.snap | 177 + src/__snapshots__/utils.spec.ts.snap | 89 + src/index.ts | 92 +- src/shades.spec.ts | 10 + src/shades.ts | 36 + src/utils.spec.ts | 28 + src/utils.ts | 61 + 22 files changed, 3559 insertions(+), 178 deletions(-) create mode 100644 babel.config.js create mode 100644 jest.config.js create mode 100644 src/__snapshots__/shades.spec.ts.snap create mode 100644 src/__snapshots__/utils.spec.ts.snap create mode 100644 src/shades.spec.ts create mode 100644 src/shades.ts create mode 100644 src/utils.spec.ts create mode 100644 src/utils.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b9cfb24..de4b9bf 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -24,6 +24,7 @@ jobs: - name: Install and Build 🔧 run: | pnpm i + pnpm test pnpm run build for d in examples/* ; do (cd "$d" && pnpm run build && cp -r dist/ ../../dist/"${d:9}" && cp -r dist/ ../../dist) diff --git a/README.md b/README.md index 36e244f..f863ea7 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,12 @@ - [Override auto-generated shade values](#override-auto-generated-shade-values) - [Customized palette keys](#customized-palette-keys) - [Full configurations](#full-configurations) - - [Reference](#reference) + - [About shades generating algorithm](#about-shades-generating-algorithm) + - [Credits](#credits) Adds multiple themes support for Tailwind CSS and Windi CSS. -You can just develop your app with one theme and it will work with multiple themes color palettes, all you need is just to specify your default (for shade `500`) color values for your theme pallette. We will generate all shades from `50` to `900` for you, following the built-in shade name convention of the [default color values](https://tailwindcss.com/docs/customizing-colors). +You can just develop your app with one theme and it will work with multiple themes color palettes, all you need is just to specify your default color values for your theme pallette. We will generate all shades from `50` to `900` for you, following the built-in shade name convention of the [default color values](https://tailwindcss.com/docs/customizing-colors). | Dracula (default theme) | Material | | --------------------------- | ----------------------------- | @@ -242,7 +243,7 @@ As the [tailwindcss docs says](https://tailwindcss.com/docs/customizing-colors#g > Bad news, color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating these sorts of color palettes. We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them. -You can specify all (or just a part of) the shades of a color if you want, this will overwrite the auto-generated shade value. It will be super useful if you find the auto-generated not satisfying. Below is an example configuration, you can explore more on the [`override-shades`](examples/override-shades) example: +Although our shade generating algorithm is okay in most cases, you may still find the auto-generated shades not satisfying. You can specify all (or just a part of) the shades of a color if you want, this will overwrite the auto-generated shade value. Below is an example configuration, you can explore more on the [`override-shades`](examples/override-shades) example: ```js themeable({ @@ -301,39 +302,42 @@ themeable({ This is the type definition of this plugin, you can dive into the source code to see more, all the type definitions are well documented for your convenience. If you have any questions, please fell free to open an issue. And new theme contribution is welcome! ```ts -interface ThemeableOptions { - /** - * Support a list of theme definitions, the user should define the colors of the theme follow the contribute of Dracula theme. - * See https://draculatheme.com/contribute#color-palette - * @default [] - */ - themes?: Theme[]; - /** - * Prefix of the class to enable a theme, for example the container with class `${classPrefix}-dracula` will enable dracula theme in its children elements - * @default `themeable` - */ - classPrefix?: string; - /** The lighten step for auto generated shades smaller than the default `500` color - * For example, if you passed `#50FA7B` as the `green` theme key, and `shadeLightenStep` is 8, - * then we will use this color as the `DEFAULT` and shade `500` to generate all other shades of `green`, - * for shade smaller than `500`, we will add the lightness up `shadeLightenStep` in per 100 gap. - * Color `#50FA7B` converted to HSL is [135, 94, 64], so the shade `400` will be computed to [135, 94, 72] - * @default 8 - */ - shadeLightenStep?: number; - /** Similar with `shadeLightenStep` but for shades larger than `500` - * @default 11 - */ - shadeDarkenStep?: number; - /** When not specify any theme in HTML, the `defaultTheme` will be used - * @default `dracula` - */ - defaultTheme?: string; +export interface ThemeableOptions { + /** + * Support a list of theme definitions, the user should define the colors of the theme follow the contribute of Dracula theme. + * See https://draculatheme.com/contribute#color-palette + * @default [] + */ + themes?: Theme[] + /** + * Prefix of the class to enable a theme, for example the container with class `${classPrefix}-dracula` will enable dracula theme in its children elements + * @default `themeable` + */ + classPrefix?: string + /** When not specify any theme in HTML, the `defaultTheme` will be used + * @default `dracula` + */ + defaultTheme?: string + /** + * This will allow you the change the difference in saturation between each shade of color. By default we use 1.771968374684816 because these are the averages that steps change in tailwind's default colors. Thanks to https://tw-shade-gen.netlify.app/ + */ + saturationFactor?: number + /** + * This will allow you the change the difference in lightness between each shade of color. By default we use 7.3903743315508015 because these are the averages that steps change in tailwind's default colors. Thanks to https://tw-shade-gen.netlify.app/ + */ + lightFactor?: number } ``` -## Reference +## About shades generating algorithm -1. https://github.com/dracula/tailwind -2. https://github.com/anheric/tailwindshades -3. [Theming Tailwind with CSS Variables](https://www.youtube.com/watch?v=MAtaT8BZEAo) +The shades generating algorithm will find a best shade number (`50`-`900`) for your color, and then generate darker and lighter shades with fixed saturation and lightness step (`saturationFactor` and `lightFactor`). + +## Credits + +1. Idea of shades generation + 1. https://github.com/dracula/tailwind + 2. https://github.com/nickgraffis/tailwind-color-generator + 3. https://github.com/anheric/tailwindshades +2. Idea of theming + 1. [Theming Tailwind with CSS Variables](https://www.youtube.com/watch?v=MAtaT8BZEAo) diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e8b6520 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,7 @@ +// https://jestjs.io/docs/getting-started#using-typescript +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { node: 'current' } }], + '@babel/preset-typescript' + ] +} diff --git a/examples/customized-palette-keys/vite.config.ts b/examples/customized-palette-keys/vite.config.ts index 4ef6b25..4463974 100644 --- a/examples/customized-palette-keys/vite.config.ts +++ b/examples/customized-palette-keys/vite.config.ts @@ -5,5 +5,5 @@ export default defineConfig({ plugins: [ WindiCSS() ], - base: '/tailwindcss-themeable/customized-palette-keys/' + base: './' }) diff --git a/examples/override-shades/vite.config.ts b/examples/override-shades/vite.config.ts index f55dc39..4463974 100644 --- a/examples/override-shades/vite.config.ts +++ b/examples/override-shades/vite.config.ts @@ -5,5 +5,5 @@ export default defineConfig({ plugins: [ WindiCSS() ], - base: '/tailwindcss-themeable/override-shades/' + base: './' }) diff --git a/examples/tailwind/index.html b/examples/tailwind/index.html index 497ccb8..23ed608 100644 --- a/examples/tailwind/index.html +++ b/examples/tailwind/index.html @@ -21,7 +21,9 @@ top-0 flex justify-between - bg-themeable-selection + bg-themeable-background + border-themeable-selection + shadow-lg shadow-themeable-foreground px-8 py-4 text-themeable-foreground @@ -35,7 +37,7 @@