89 lines
3.8 KiB
JavaScript
89 lines
3.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// ── AETHER DRIFT TOKENS ──
|
|
// RGB-channel variables enable Tailwind opacity modifiers (e.g. bg-accent-rose/10)
|
|
surface: {
|
|
base: 'rgb(var(--bg-base) / <alpha-value>)',
|
|
channel: 'rgb(var(--bg-channel) / <alpha-value>)',
|
|
chat: 'rgb(var(--bg-chat) / <alpha-value>)',
|
|
members: 'rgb(var(--bg-members) / <alpha-value>)',
|
|
elevated: 'rgb(var(--bg-elevated) / <alpha-value>)',
|
|
input: 'rgb(var(--bg-input) / <alpha-value>)',
|
|
overlay: 'var(--bg-overlay)',
|
|
},
|
|
border: {
|
|
hard: 'rgb(var(--border-hard) / <alpha-value>)',
|
|
soft: 'rgb(var(--border-soft) / <alpha-value>)',
|
|
},
|
|
accent: {
|
|
mint: 'rgb(var(--accent-mint) / <alpha-value>)',
|
|
peach: 'rgb(var(--accent-peach) / <alpha-value>)',
|
|
lavender: 'rgb(var(--accent-lavender) / <alpha-value>)',
|
|
sky: 'rgb(var(--accent-sky) / <alpha-value>)',
|
|
amber: 'rgb(var(--accent-amber) / <alpha-value>)',
|
|
rose: 'rgb(var(--accent-rose) / <alpha-value>)',
|
|
coral: 'rgb(var(--accent-coral) / <alpha-value>)',
|
|
primary: 'rgb(var(--accent-primary) / <alpha-value>)',
|
|
'primary-hover': 'rgb(var(--accent-primary-hover) / <alpha-value>)',
|
|
'primary-active':'rgb(var(--accent-primary-active) / <alpha-value>)',
|
|
},
|
|
txt: {
|
|
primary: 'rgb(var(--text-primary) / <alpha-value>)',
|
|
secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
|
|
tertiary: 'rgb(var(--text-tertiary) / <alpha-value>)',
|
|
message: 'rgb(var(--text-message) / <alpha-value>)',
|
|
link: 'rgb(var(--text-link) / <alpha-value>)',
|
|
positive: 'rgb(var(--text-positive) / <alpha-value>)',
|
|
warning: 'rgb(var(--text-warning) / <alpha-value>)',
|
|
danger: 'rgb(var(--text-danger) / <alpha-value>)',
|
|
},
|
|
interactive: {
|
|
hover: 'var(--interactive-hover)',
|
|
active: 'var(--interactive-active)',
|
|
selected: 'var(--interactive-selected)',
|
|
muted: 'rgb(var(--interactive-muted) / <alpha-value>)',
|
|
},
|
|
status: {
|
|
online: 'rgb(var(--status-online) / <alpha-value>)',
|
|
idle: 'rgb(var(--status-idle) / <alpha-value>)',
|
|
dnd: 'rgb(var(--status-dnd) / <alpha-value>)',
|
|
offline: 'rgb(var(--status-offline) / <alpha-value>)',
|
|
},
|
|
glass: {
|
|
bg: 'var(--glass-bg)',
|
|
border: 'var(--glass-border)',
|
|
highlight: 'var(--glass-highlight)',
|
|
},
|
|
notification: 'rgb(var(--notification) / <alpha-value>)',
|
|
},
|
|
boxShadow: {
|
|
'header': '0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05)',
|
|
'elevation-low': '0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05)',
|
|
'elevation-high': '0 8px 16px rgba(0, 0, 0, 0.24)',
|
|
'glass': '0 2px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 var(--glass-highlight)',
|
|
'input': 'inset 0 1px 2px rgba(0, 0, 0, 0.25)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['DM Sans', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'slide-up-sheet': 'slide-up-sheet 200ms ease-out',
|
|
},
|
|
keyframes: {
|
|
'slide-up-sheet': {
|
|
'0%': { transform: 'translateY(100%)' },
|
|
'100%': { transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|