- 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
102 lines
3.2 KiB
JavaScript
Executable File
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: [],
|
|
};
|