mirror of
https://github.com/recklessop/zroc.git
synced 2026-07-03 13:23:15 -04:00
Justin
b7b9f6191d
- Add zroc-planner UI page with VM selector, journal retention slider (1h-30d), WAN compression input, and live bandwidth/journal/mirror storage estimates - Add CSV and PDF export for planning reports - Add light/dark mode toggle in TopBar with localStorage persistence - Wire theme via CSS custom properties for full Tailwind opacity support - Add Planner route and sidebar entry Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.3 KiB
JavaScript
67 lines
2.3 KiB
JavaScript
// tailwind.config.js
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
canvas: 'rgb(var(--color-canvas) / <alpha-value>)',
|
|
surface: 'rgb(var(--color-surface) / <alpha-value>)',
|
|
raised: 'rgb(var(--color-raised) / <alpha-value>)',
|
|
border: 'rgb(var(--color-border) / <alpha-value>)',
|
|
'border-bright': 'rgb(var(--color-border-bright) / <alpha-value>)',
|
|
accent: {
|
|
DEFAULT: '#0ea5e9',
|
|
dim: '#0284c7',
|
|
bright: '#38bdf8',
|
|
glow: 'rgba(14,165,233,0.15)',
|
|
},
|
|
ok: '#10b981',
|
|
warn: '#f59e0b',
|
|
crit: '#ef4444',
|
|
info: '#818cf8',
|
|
'text-primary': 'rgb(var(--color-text-primary) / <alpha-value>)',
|
|
'text-secondary': 'rgb(var(--color-text-secondary) / <alpha-value>)',
|
|
'text-muted': 'rgb(var(--color-text-muted) / <alpha-value>)',
|
|
},
|
|
fontFamily: {
|
|
mono: ['"IBM Plex Mono"', 'monospace'],
|
|
sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
|
|
data: ['"JetBrains Mono"', 'monospace'],
|
|
},
|
|
boxShadow: {
|
|
glow: '0 0 20px rgba(14,165,233,0.2)',
|
|
'glow-sm': '0 0 8px rgba(14,165,233,0.15)',
|
|
'glow-ok': '0 0 12px rgba(16,185,129,0.2)',
|
|
'glow-crit':'0 0 12px rgba(239,68,68,0.25)',
|
|
panel: '0 4px 24px rgba(0,0,0,0.4)',
|
|
},
|
|
keyframes: {
|
|
pulse_led: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.35' },
|
|
},
|
|
slide_in_right: {
|
|
from: { transform: 'translateX(100%)', opacity: '0' },
|
|
to: { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
fade_in: {
|
|
from: { opacity: '0', transform: 'translateY(6px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
modal_in: {
|
|
from: { opacity: '0', transform: 'scale(0.96)' },
|
|
to: { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'pulse-led': 'pulse_led 2s ease-in-out infinite',
|
|
'slide-in-right': 'slide_in_right 0.25s ease-out',
|
|
'fade-in': 'fade_in 0.2s ease-out',
|
|
'modal-in': 'modal_in 0.2s ease-out',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|