79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import plugin from "tailwindcss/plugin";
|
|
import { typography } from "./typography";
|
|
// @ts-expect-error: lib of tailwind has no types
|
|
import { parseColor } from "tailwindcss/lib/util/color";
|
|
|
|
/* Converts HEX color to RGB */
|
|
const toRGB = (value: string) => parseColor(value).color.join(" ");
|
|
|
|
export default plugin.withOptions(
|
|
(_options = {}) =>
|
|
() => {
|
|
// add more base styles
|
|
},
|
|
// add configuration which is merged with the final config
|
|
() => ({
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
white: toRGB("#ffffff"),
|
|
black: toRGB("#000000"),
|
|
primary: {
|
|
50: toRGB("#f4f9f9"),
|
|
100: toRGB("#dbeceb"),
|
|
200: toRGB("#b6d9d6"),
|
|
300: toRGB("#8abebc"),
|
|
400: toRGB("#478585"),
|
|
500: toRGB("#526f6f"),
|
|
600: toRGB("#4b6667"),
|
|
700: toRGB("#345253"),
|
|
800: toRGB("#2a4647"),
|
|
900: toRGB("#1f3536"),
|
|
950: toRGB("#162324"),
|
|
},
|
|
secondary: {
|
|
50: toRGB("#f7f9f9"),
|
|
100: toRGB("#e7f2f4"),
|
|
200: toRGB("#d7e8ea"),
|
|
300: toRGB("#afc6ca"),
|
|
400: toRGB("#8fb2b6"),
|
|
500: toRGB("#7b9a9e"),
|
|
600: toRGB("#4f747a"),
|
|
700: toRGB("#415e63"),
|
|
800: toRGB("#445f64"),
|
|
900: toRGB("#2b4347"),
|
|
950: toRGB("#0d1415"),
|
|
},
|
|
info: {
|
|
50: toRGB("#eff9ff"),
|
|
100: toRGB("#dff2ff"),
|
|
200: toRGB("#b8e8ff"),
|
|
300: toRGB("#78d6ff"),
|
|
400: toRGB("#2cc0ff"),
|
|
500: toRGB("#06aaf1"),
|
|
600: toRGB("#006ca7"),
|
|
700: toRGB("#006ca7"),
|
|
800: toRGB("#025b8a"),
|
|
900: toRGB("#084c72"),
|
|
950: toRGB("#06304b"),
|
|
},
|
|
error: {
|
|
50: toRGB("#fcf3f8"),
|
|
100: toRGB("#f9eaf4"),
|
|
200: toRGB("#f5d5e9"),
|
|
300: toRGB("#ea9ecb"),
|
|
400: toRGB("#e383ba"),
|
|
500: toRGB("#d75d9f"),
|
|
600: toRGB("#c43e81"),
|
|
700: toRGB("#a82e67"),
|
|
800: toRGB("#8c2855"),
|
|
900: toRGB("#75264a"),
|
|
950: toRGB("#461129"),
|
|
},
|
|
},
|
|
},
|
|
...typography,
|
|
},
|
|
}),
|
|
);
|