0.2.6 • Published 1 year ago
@obringer/tw-color-schemes v0.2.6
Tailwind CSS Color Scheme Generator
This package helps manage multiple color schemes for tailwind.
Pass it a color scheme definition, and it gives you a colorSchemePlugin and color
object for your tailwind configuration.
Features
- Create as many color schemes as you want
- Removes the need for additional
dark:class names on each of your components - Allows components to reference a single semantic color name instead of managing all modes
- Supports multiple color formats (hex, rgb, tailwind rgb tokens)
- Typesafe, ensuring all color schemes include all required color entries
TODO
everything below here is out of date
Example
my-color-scheme.ts
import { createColorSchemes } from "@obringer/tw-color-schemes";
import { awesome } from "someones/awesome/color/scheme"
const { colors, colorSchemePlugin } = colorSchemePlugin({
core: {
background: {
default: primitive["Flat Grays"]["00"].value,
primary: primitive["Flat Grays"]["00"].value,
secondary: primitive["Flat Grays"]["01"].value,
tertiary: primitive["Flat Grays"]["02"].value,
},
text: {
default: primitive["Flat Grays"]["00"].value,
primary: primitive["Flat Grays"]["00"].value,
secondary: primitive["Transparent Grays"]["08"].value,
tertiary: primitive["Transparent Grays"]["06"].value,
},
border: {
default: primitive["Transparent Grays"]["09"].value,
primary: primitive["Transparent Grays"]["09"].value,
secondary: primitive["Transparent Grays"]["05"].value,
tertiary: primitive["Transparent Grays"]["04"].value,
},
},
});tailwind.config.ts
import type { Config } from "tailwindcss";
import { colors, colorSchemePlugin } from "./my-color-scheme.ts";
const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: { colors },
plugins: [colorSchemePlugin],
};
export default config;Root.tsx
export default function Root() {
return (
<body className="awesome">
...
<div className="text-primary">
I'm awesome text 😀
</div>
<div className="light">
<div className="text-primary">
I'm less awesome text 😔
</div>
</div>
...
</body>
)
}Installation
pnpm add -D @obringer/tw-color-schemesnpm install --save-dev @obringer/tw-color-schemesyarn add --dev @obringer/tw-color-schemesTODO
- Allow rgba and hex with alpha
0.2.6
1 year ago
0.2.3
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.2
1 year ago
0.2.1
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago