Files
imperial-command-center/tailwind.config.js
root 5fe7bc71ef Add photo frame idle mode and switch to Skylight-style theme
- After 5 min of no touch/motion, dashboard hides behind a fullscreen
  photo slideshow with centered time and date overlay
- Photos loaded from PHOTOS_PATH env var (defaults to ~/Pictures/dashboard)
  via IPC + file:// URLs; traversal-guarded, recursive up to 2 levels
- Motion or touch exits idle back to dashboard
- Theme repainted warm cream / sage / stone ink with Nunito font and
  rounded cards; dark tokens kept so component classes still resolve
- Adds PHOTO_FRAME.md with Samba cifs mount + systemd env instructions
2026-04-14 10:44:51 -05:00

102 lines
3.2 KiB
JavaScript
Executable File

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// Skylight-style warm light theme.
// Token names kept as "dark.*" so existing components don't need class changes.
dark: {
primary: '#faf6f0', // page bg - warm cream
secondary: '#ffffff', // card bg - white
tertiary: '#f5ede1', // subtle panels / compact rows
elevated: '#ffffff', // elevated cards
hover: '#ede2cf', // hover states
border: '#ebe0cc', // soft warm borders
'border-light': '#d9cab0',
},
// Sage accent (Skylight uses muted greens/peach, not blue)
accent: {
DEFAULT: '#7fa894', // sage
light: '#a0c2b1',
dark: '#5e8a76',
},
// Warm ink text scale
ink: {
DEFAULT: '#3a322a', // primary dark text
muted: '#6b5f51',
subtle: '#8a7d6e',
faint: '#b0a494',
},
status: {
success: '#4a9d7a', // muted green
warning: '#d99a4a', // warm amber
error: '#c75b5b', // muted brick
},
// Legacy imperial tokens retained so old references don't break
imperial: {
black: '#faf6f0',
dark: '#f5ede1',
medium: '#ebe0cc',
light: '#d9cab0',
red: '#c75b5b',
'red-dark': '#a84545',
'red-light': '#d97777',
},
},
fontFamily: {
sans: ['Nunito', 'Quicksand', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
display: ['Nunito', 'Quicksand', 'sans-serif'],
},
fontSize: {
'touch': '1.125rem',
},
spacing: {
'touch': '44px',
'touch-lg': '56px',
},
borderRadius: {
'xl': '1rem',
'2xl': '1.5rem',
'3xl': '2rem',
},
boxShadow: {
'card': '0 2px 8px rgba(58, 50, 42, 0.06), 0 1px 2px rgba(58, 50, 42, 0.04)',
'card-lg': '0 8px 24px rgba(58, 50, 42, 0.08), 0 2px 6px rgba(58, 50, 42, 0.05)',
'glow-green': '0 0 12px rgba(127, 168, 148, 0.35)',
'glow-blue': '0 0 12px rgba(127, 168, 148, 0.35)',
'glow-orange': '0 0 12px rgba(217, 154, 74, 0.35)',
},
animation: {
'fade-in': 'fade-in 0.2s ease-out',
'fade-slow': 'fade-in 1.2s ease-out',
'slide-up': 'slide-up 0.3s ease-out',
'pulse': 'pulse 2s ease-in-out infinite',
'ken-burns': 'ken-burns 20s ease-in-out infinite alternate',
},
keyframes: {
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
'slide-up': {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
'pulse': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
'ken-burns': {
'0%': { transform: 'scale(1.0) translate(0, 0)' },
'100%': { transform: 'scale(1.08) translate(-1%, -1%)' },
},
},
},
},
plugins: [],
};