78 lines
1.6 KiB
JavaScript
78 lines
1.6 KiB
JavaScript
const colors = require("tailwindcss/colors");
|
|
const defaultTheme = require("tailwindcss/defaultTheme");
|
|
const typography = require("./tailwind-typography-styles.cjs");
|
|
|
|
const { themeVariants, prefersDark, prefersLight } = require("tailwindcss-theme-variants");
|
|
|
|
module.exports = {
|
|
mode: "jit",
|
|
purge: ["./src/**/*.{html,js,md,svelte,svx,ts}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
gray: colors.trueGray,
|
|
pink: colors.pink,
|
|
},
|
|
|
|
fontFamily: {
|
|
sans: ["'Crimson Text'", ...defaultTheme.fontFamily.sans],
|
|
heading: ["'Crimson Text'", ...defaultTheme.fontFamily.serif],
|
|
},
|
|
|
|
maxWidth: {
|
|
prose: "42rem",
|
|
},
|
|
|
|
typography,
|
|
},
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/typography"),
|
|
themeVariants({
|
|
themes: {
|
|
light: {
|
|
mediaQuery: prefersLight,
|
|
semantics: {
|
|
colors: {
|
|
"primary": "white",
|
|
"primary-dark": "gray-100",
|
|
|
|
"on-primary": "gray-900",
|
|
"on-primary-weak": "gray-600",
|
|
"on-primary-faint": "gray-400",
|
|
|
|
|
|
"accent": "pink-600",
|
|
"accent-vivid": "pink-400",
|
|
"accent-strong": "pink-800",
|
|
|
|
"on-accent": "black",
|
|
},
|
|
},
|
|
},
|
|
dark: {
|
|
mediaQuery: prefersDark,
|
|
semantics: {
|
|
colors: {
|
|
"primary": "gray-900",
|
|
"primary-dark": "black",
|
|
|
|
"on-primary": "white",
|
|
"on-primary-weak": "gray-400",
|
|
"on-primary-faint": "gray-600",
|
|
|
|
|
|
"accent": "pink-400",
|
|
"accent-vivid": "pink-600",
|
|
"accent-strong": "pink-200",
|
|
|
|
"on-accent": "white",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fallback: "compact",
|
|
}),
|
|
],
|
|
};
|