mirror of
https://github.com/Dvorinka/SEEN.git
synced 2026-06-04 20:43:03 +00:00
small fix, don't worry about it
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,130 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
|
||||
display: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
|
||||
mono: ['"JetBrains Mono"', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
// Surface Architecture
|
||||
'surface-dim': 'rgb(var(--color-surface-dim) / <alpha-value>)',
|
||||
'surface': 'rgb(var(--color-surface) / <alpha-value>)',
|
||||
'surface-bright': 'rgb(var(--color-surface-bright) / <alpha-value>)',
|
||||
'surface-lowest': 'rgb(var(--color-surface-container-lowest) / <alpha-value>)',
|
||||
'surface-low': 'rgb(var(--color-surface-container-low) / <alpha-value>)',
|
||||
'surface-container': 'rgb(var(--color-surface-container) / <alpha-value>)',
|
||||
'surface-high': 'rgb(var(--color-surface-container-high) / <alpha-value>)',
|
||||
'surface-highest': 'rgb(var(--color-surface-container-highest) / <alpha-value>)',
|
||||
// Legacy mappings
|
||||
bg: 'rgb(var(--color-bg) / <alpha-value>)',
|
||||
fg: 'rgb(var(--color-fg) / <alpha-value>)',
|
||||
muted: 'rgb(var(--color-muted) / <alpha-value>)',
|
||||
'muted-fg': 'rgb(var(--color-muted-fg) / <alpha-value>)',
|
||||
card: 'rgb(var(--color-card) / <alpha-value>)',
|
||||
border: 'rgb(var(--color-border) / <alpha-value>)',
|
||||
// Primary
|
||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
||||
'primary-container': 'rgb(var(--color-primary-container) / <alpha-value>)',
|
||||
'primary-fixed': 'rgb(var(--color-primary-fixed) / <alpha-value>)',
|
||||
'primary-fixed-dim': 'rgb(var(--color-primary-fixed-dim) / <alpha-value>)',
|
||||
'on-primary': 'rgb(var(--color-on-primary) / <alpha-value>)',
|
||||
'on-primary-container': 'rgb(var(--color-on-primary-container) / <alpha-value>)',
|
||||
// Accent alias
|
||||
accent: 'rgb(var(--color-accent) / <alpha-value>)',
|
||||
// Secondary
|
||||
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
||||
'secondary-container': 'rgb(var(--color-secondary-container) / <alpha-value>)',
|
||||
'secondary-fixed': 'rgb(var(--color-secondary-fixed) / <alpha-value>)',
|
||||
'secondary-fixed-dim': 'rgb(var(--color-secondary-fixed-dim) / <alpha-value>)',
|
||||
'on-secondary': 'rgb(var(--color-on-secondary) / <alpha-value>)',
|
||||
'on-secondary-container': 'rgb(var(--color-on-secondary-container) / <alpha-value>)',
|
||||
// Tertiary
|
||||
tertiary: 'rgb(var(--color-tertiary) / <alpha-value>)',
|
||||
'tertiary-container': 'rgb(var(--color-tertiary-container) / <alpha-value>)',
|
||||
// Semantic
|
||||
success: 'rgb(var(--color-success) / <alpha-value>)',
|
||||
warning: 'rgb(var(--color-warning) / <alpha-value>)',
|
||||
danger: 'rgb(var(--color-danger) / <alpha-value>)',
|
||||
'on-danger': 'rgb(var(--color-on-danger) / <alpha-value>)',
|
||||
// Outlines
|
||||
outline: 'rgb(var(--color-outline) / <alpha-value>)',
|
||||
'outline-variant': 'rgb(var(--color-outline-variant) / <alpha-value>)',
|
||||
'on-surface-variant': 'rgb(var(--color-on-surface-variant) / <alpha-value>)',
|
||||
// Inverse
|
||||
'inverse-surface': 'rgb(var(--color-inverse-surface) / <alpha-value>)',
|
||||
'inverse-on-surface': 'rgb(var(--color-inverse-on-surface) / <alpha-value>)',
|
||||
'inverse-primary': 'rgb(var(--color-inverse-primary) / <alpha-value>)',
|
||||
// Tint
|
||||
'surface-tint': 'rgb(var(--color-surface-tint) / <alpha-value>)',
|
||||
},
|
||||
boxShadow: {
|
||||
brutal: '8px 8px 0 rgb(var(--color-primary))',
|
||||
'brutal-sm': '4px 4px 0 rgb(var(--color-primary))',
|
||||
'brutal-lg': '12px 12px 0 rgb(var(--color-primary))',
|
||||
'brutal-hover': '12px 12px 0 rgb(var(--color-primary))',
|
||||
'brutal-outline': '8px 8px 0 rgb(var(--color-outline))',
|
||||
none: 'none',
|
||||
},
|
||||
borderRadius: {
|
||||
none: '0',
|
||||
DEFAULT: '0',
|
||||
},
|
||||
borderWidth: {
|
||||
DEFAULT: '3px',
|
||||
0: '0',
|
||||
2: '2px',
|
||||
3: '3px',
|
||||
4: '4px',
|
||||
6: '6px',
|
||||
8: '8px',
|
||||
},
|
||||
keyframes: {
|
||||
'brutal-appear': {
|
||||
'0%': { opacity: 0 },
|
||||
'100%': { opacity: 1 },
|
||||
},
|
||||
'brutal-scale': {
|
||||
'0%': { transform: 'scale(0.9)' },
|
||||
'50%': { transform: 'scale(1.05)' },
|
||||
'100%': { transform: 'scale(1)' },
|
||||
},
|
||||
'glitch-anim': {
|
||||
'0%': { clip: 'rect(42px, 9999px, 44px, 0)' },
|
||||
'5%': { clip: 'rect(12px, 9999px, 59px, 0)' },
|
||||
'10%': { clip: 'rect(48px, 9999px, 29px, 0)' },
|
||||
'15%': { clip: 'rect(42px, 9999px, 73px, 0)' },
|
||||
'20%': { clip: 'rect(63px, 9999px, 27px, 0)' },
|
||||
'100%': { clip: 'rect(4px, 9999px, 91px, 0)' },
|
||||
},
|
||||
'flicker': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'42%': { opacity: 0 },
|
||||
'43%': { opacity: 1 },
|
||||
'48%': { opacity: 0 },
|
||||
'49%': { opacity: 1 },
|
||||
},
|
||||
'slide-brutal': {
|
||||
'0%': { transform: 'translateX(-100%)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'brutal-appear': 'brutal-appear 0.1s steps(1) both',
|
||||
'brutal-scale': 'brutal-scale 0.1s steps(2) both',
|
||||
'glitch': 'glitch-anim 3s infinite linear alternate-reverse',
|
||||
'flicker': 'flicker 5s infinite',
|
||||
'slide-brutal': 'slide-brutal 0.2s steps(3) both',
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-primary': 'linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary)) 100%)',
|
||||
'gradient-secondary': 'linear-gradient(135deg, rgb(var(--color-secondary)) 0%, rgb(var(--color-secondary)) 100%)',
|
||||
'gradient-mesh': 'repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(var(--color-primary) / 0.03) 10px, rgb(var(--color-primary) / 0.03) 20px)',
|
||||
'brutal-stripes': 'repeating-linear-gradient(45deg, transparent, transparent 20px, rgb(var(--color-primary) / 0.05) 20px, rgb(var(--color-primary) / 0.05) 40px)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user