mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-01-15 13:43:39 +01:00
aa85ecb618
108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
|
|
const height = {
|
|
xs: '1.8rem',
|
|
sm: '2.0rem',
|
|
md: '2.5rem',
|
|
};
|
|
|
|
/** @type {import("tailwindcss").Config} */
|
|
module.exports = {
|
|
darkMode: ['class', '[data-resolved-appearance="dark"]'],
|
|
content: ['./index.html', './src-web/**/*.{html,js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
opacity: {
|
|
disabled: '0.3',
|
|
},
|
|
fontSize: {
|
|
xs: '0.8rem',
|
|
},
|
|
height,
|
|
minHeight: height,
|
|
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: ['JetBrains Mono', 'Menlo', 'monospace'],
|
|
sans: [
|
|
'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',
|
|
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(function ({ addVariant }) {
|
|
addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus']);
|
|
addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus']);
|
|
}),
|
|
],
|
|
};
|