125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
import catppuccin from '@catppuccin/tailwindcss';
|
|
import type { Config } from 'tailwindcss';
|
|
import { fontFamily } from 'tailwindcss/defaultTheme';
|
|
|
|
export default {
|
|
content: [
|
|
'./src/**/*.{html,ts,scss,css}',
|
|
'../magic/src/**/*.{html,ts,scss,css}',
|
|
],
|
|
darkMode: ['selector', ':not(.latte)'],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px',
|
|
},
|
|
},
|
|
extend: {
|
|
/**
|
|
--background: var(--ctp-base);
|
|
--foreground: var(--ctp-text);
|
|
|
|
--muted: var(--ctp-overlay0);
|
|
--muted-foreground: var(--ctp-overlay1);
|
|
|
|
--popover: var(--ctp-mantle);
|
|
--popover-foreground: var(--ctp-text);
|
|
|
|
--border: var(--ctp-surface1);
|
|
--input: var(--ctp-surface1);
|
|
|
|
--card: var(--ctp-mantle);
|
|
--card-foreground: var(--ctp-text);
|
|
|
|
--primary: var(--ctp-mauve);
|
|
--primary-foreground: var(--ctp-base);
|
|
|
|
--secondary: var(--ctp-surface0);
|
|
--secondary-foreground: var(--ctp-text);
|
|
|
|
--accent: var(--ctp-base);
|
|
--accent-foreground: var(--ctp-text);
|
|
|
|
--success: var(--ctp-green);
|
|
--success-foreground: var(--ctp-crust);
|
|
|
|
--info: var(--ctp-blue);
|
|
--info-foreground: var(--ctp-crust);
|
|
|
|
--warning: var(--ctp-peach);
|
|
--warning-foreground: var(--ctp-crust);
|
|
|
|
--destructive: var(--ctp-red);
|
|
--destructive-foreground: var(--ctp-crust);
|
|
|
|
--ring: var(--ctp-text);
|
|
*/
|
|
colors: {
|
|
border: 'rgba(var(--ctp-overlay1), <alpha-value>)',
|
|
input: 'rgba(var(--ctp-surface2), <alpha-value>)',
|
|
ring: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
background: 'rgba(var(--ctp-base), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
primary: {
|
|
DEFAULT: 'rgba(var(--ctp-lavender), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-base), <alpha-value>)',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'rgba(var(--ctp-surface0), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'rgba(var(--ctp-red), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
|
|
},
|
|
warning: {
|
|
DEFAULT: 'rgba(var(--ctp-peach), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
|
|
},
|
|
info: {
|
|
DEFAULT: 'rgba(var(--ctp-blue), <alpha-value>)',
|
|
foreground: 'rgba(var(--info-foreground), <alpha-value>)',
|
|
},
|
|
success: {
|
|
DEFAULT: 'rgba(var(--ctp-green), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'rgba(var(--ctp-overlay0), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-overlay1), <alpha-value>)',
|
|
},
|
|
invariant: {
|
|
DEFAULT: 'rgba(var(--ctp-subtext0), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-mantle), <alpha-value>)',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'rgba(var(--ctp-base), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'rgba(var(--ctp-mantle), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
},
|
|
card: {
|
|
DEFAULT: 'rgba(var(--ctp-mantle), <alpha-value>)',
|
|
foreground: 'rgba(var(--ctp-text), <alpha-value>)',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', ...fontFamily.sans],
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
catppuccin({
|
|
defaultFlavour: 'mocha',
|
|
}),
|
|
],
|
|
} satisfies Config;
|