mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-01-15 13:43:39 +01:00
89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
const plugin = require('tailwindcss/plugin')
|
|
|
|
/** @type {import("tailwindcss").Config} */
|
|
module.exports = {
|
|
darkMode: ["class", "[data-appearance=\"dark\"]"],
|
|
content: [
|
|
"./index.html",
|
|
"./src-web/**/*.{html,js,jsx,ts,tsx}"
|
|
],
|
|
theme: {
|
|
extend: {
|
|
opacity: {
|
|
"disabled": "0.3"
|
|
},
|
|
fontSize: {
|
|
"xs": "0.8rem"
|
|
},
|
|
height: {
|
|
"xs": "1.5rem",
|
|
"sm": "2.0rem",
|
|
"md": "2.5rem"
|
|
},
|
|
lineHeight: {
|
|
// HACK: Minus 2 to account for borders inside inputs
|
|
"xs": "calc(1.5rem - 2px)",
|
|
"sm": "calc(2.0rem - 2px)",
|
|
"md": "calc(2.5rem - 2px)"
|
|
},
|
|
},
|
|
fontFamily: {
|
|
"mono": ["JetBrains Mono", "Menlo", "monospace"],
|
|
"sans": ["Inter", "sans-serif"]
|
|
},
|
|
fontSize: {
|
|
sm: "0.9rem",
|
|
base: "1rem",
|
|
xl: "1.25rem",
|
|
"2xl": "1.563rem",
|
|
"3xl": "1.953rem",
|
|
"4xl": "2.441rem",
|
|
"5xl": "3.052rem"
|
|
},
|
|
colors: {
|
|
selection: "hsl(var(--color-violet-500) / 0.4)",
|
|
focus: "hsl(var(--color-blue-500) / 0.6)",
|
|
invalid: "hsl(var(--color-red-500))",
|
|
highlight: "hsl(var(--color-gray-300) / 0.35)",
|
|
highlightSecondary: "hsl(var(--color-gray-300) / 0.2)",
|
|
transparent: "transparent",
|
|
white: "hsl(0 100% 100% / <alpha-value>)",
|
|
black: "hsl(0 100% 0% / <alpha-value>)",
|
|
placeholder: "hsl(var(--color-gray-400) / <alpha-value>)",
|
|
red: color("red"),
|
|
orange: color("orange"),
|
|
yellow: color("yellow"),
|
|
gray: color("gray"),
|
|
blue: color("blue"),
|
|
green: color("green"),
|
|
pink: color("pink"),
|
|
violet: color("violet")
|
|
}
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/container-queries"),
|
|
plugin(function({ addVariant }) {
|
|
addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus'])
|
|
addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus'])
|
|
})
|
|
]
|
|
};
|
|
|
|
function color(name) {
|
|
return {
|
|
0: `hsl(var(--color-${name}-0) / <alpha-value>)`,
|
|
50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
|
|
100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
|
|
200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
|
|
300: `hsl(var(--color-${name}-300) / <alpha-value>)`,
|
|
400: `hsl(var(--color-${name}-400) / <alpha-value>)`,
|
|
500: `hsl(var(--color-${name}-500) / <alpha-value>)`,
|
|
600: `hsl(var(--color-${name}-600) / <alpha-value>)`,
|
|
700: `hsl(var(--color-${name}-700) / <alpha-value>)`,
|
|
800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
|
|
900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
|
|
950: `hsl(var(--color-${name}-950) / <alpha-value>)`,
|
|
1000: `hsl(var(--color-${name}-1000) / <alpha-value>)`
|
|
};
|
|
}
|