mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-26 03:11:28 +01:00
134 lines
3.3 KiB
JavaScript
134 lines
3.3 KiB
JavaScript
const plugin = require("tailwindcss/plugin");
|
|
|
|
const sizes = {
|
|
"2xs": "1.4rem",
|
|
xs: "1.8rem",
|
|
sm: "2.0rem",
|
|
md: "2.3rem",
|
|
lg: "2.6rem",
|
|
};
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ["class", '[data-resolved-appearance="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
keyframes: {
|
|
blinkRing: {
|
|
"0%, 49%": { "--tw-ring-color": "var(--primary)" },
|
|
"50%, 99%": { "--tw-ring-color": "transparent" },
|
|
"100%": { "--tw-ring-color": "var(--primary)" },
|
|
},
|
|
},
|
|
animation: {
|
|
blinkRing: "blinkRing 150ms step-start 400ms infinite",
|
|
},
|
|
opacity: {
|
|
disabled: "0.3",
|
|
},
|
|
fontSize: {
|
|
xs: "0.8rem",
|
|
},
|
|
height: sizes,
|
|
width: sizes,
|
|
minHeight: sizes,
|
|
minWidth: sizes,
|
|
lineHeight: {
|
|
// HACK: Minus 2 to account for borders inside inputs
|
|
xs: "calc(1.75rem - 2px)",
|
|
sm: "calc(2.0rem - 2px)",
|
|
md: "calc(2.5rem - 2px)",
|
|
},
|
|
transitionProperty: {
|
|
grid: "grid",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
mono: [
|
|
"var(--font-family-editor)",
|
|
"JetBrains Mono",
|
|
"ui-monospace",
|
|
"SFMono-Regular",
|
|
"Menlo",
|
|
"Monaco",
|
|
"Fira Code",
|
|
"Ubuntu Mono",
|
|
"Consolas",
|
|
"Liberation Mono",
|
|
"Courier New",
|
|
"DejaVu Sans Mono",
|
|
"Hack",
|
|
"monospace",
|
|
],
|
|
sans: [
|
|
"var(--font-family-interface)",
|
|
"Inter UI",
|
|
"-apple-system",
|
|
"BlinkMacSystemFont",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Oxygen-Sans",
|
|
"Ubuntu",
|
|
"Cantarell",
|
|
"Helvetica Neue",
|
|
"sans-serif",
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
],
|
|
},
|
|
fontSize: {
|
|
"4xs": "0.6rem",
|
|
"3xs": "0.675rem",
|
|
"2xs": "0.75rem",
|
|
xs: "0.8rem",
|
|
sm: "0.9rem",
|
|
base: "1rem",
|
|
lg: "1.12rem",
|
|
xl: "1.25rem",
|
|
"2xl": "1.5rem",
|
|
"3xl": "2rem",
|
|
"4xl": "2.5rem",
|
|
"5xl": "3rem",
|
|
editor: "var(--editor-font-size)",
|
|
shrink: "0.8em",
|
|
},
|
|
boxShadow: {
|
|
DEFAULT: "0 1px 3px 0 var(--shadow)",
|
|
lg: "0 10px 15px -3px var(--shadow)",
|
|
},
|
|
colors: {
|
|
transparent: "transparent",
|
|
placeholder: "var(--textSubtlest)",
|
|
shadow: "var(--shadow)",
|
|
backdrop: "var(--backdrop)",
|
|
selection: "var(--selection)",
|
|
|
|
// New theme values
|
|
surface: "var(--surface)",
|
|
"surface-highlight": "var(--surfaceHighlight)",
|
|
"surface-active": "var(--surfaceActive)",
|
|
text: "var(--text)",
|
|
"text-subtle": "var(--textSubtle)",
|
|
"text-subtlest": "var(--textSubtlest)",
|
|
border: "var(--border)",
|
|
"border-subtle": "var(--borderSubtle)",
|
|
"border-focus": "var(--borderFocus)",
|
|
primary: "var(--primary)",
|
|
danger: "var(--danger)",
|
|
secondary: "var(--secondary)",
|
|
success: "var(--success)",
|
|
info: "var(--info)",
|
|
notice: "var(--notice)",
|
|
warning: "var(--warning)",
|
|
},
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/container-queries"),
|
|
plugin(({ addVariant }) => {
|
|
addVariant("hocus", ["&:hover", "&:focus-visible", "&.focus:focus"]);
|
|
addVariant("focus-visible-or-class", ["&:focus-visible", "&.focus:focus"]);
|
|
}),
|
|
],
|
|
};
|