kami
93619824d8
A pass over the whole app against the Ethos laws, then a focused pass on Vibe with the operator reviewing each change. Across the app: - The player bar restores the last track it played, paused at zero, so a fresh tab opens on where the listener was instead of "nothing playing". - Track titles link to their album, matching the artist links beside them. Playback stays on the artwork tile; a title that played was the surprise. - The search field is bg-bg2. Tailwind cannot alpha-modify these var() colors, so bg-surface0/70 emitted no rule at all and the input fell back to the UA's white. - Row hover is light falling off to the right, not a flat slab. - The artwork placeholder can drop its note glyph, so TrackRow no longer layers a play icon on top of one. Vibe: - A seeded Vibe plays its seed first. The seed sits in front of the durable plan without being part of it, so the first advance consumes it locally and reports no plan feedback. - The queue drops a second recording of a song it already holds — same title, different track id, which id-based dedup let through. - Up next is read from the queue rather than the plan preview, since the seed is not a plan item. - The header carries the live profile (energy, discovery, goal) and both verbs. Keep is gone: letting a track finish already reports `completed`, which the director weighs the same. - The aura is one warm diffuse blob in the page background, warm-hued only and quieter on mobile. - Compact artwork is 32px. It was h-8 w-8, which this remapped spacing scale renders as 64px inside a 44px row, and that overflow was the "stacked" look. Verified by render at 1440x900 and 390x844, no horizontal overflow at either. 26 frontend and 122 backend tests pass. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Geist', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['11px', '14px'],
|
|
xs: ['12px', '16px'],
|
|
sm: ['14px', '20px'],
|
|
base: ['16px', '24px'],
|
|
lg: ['18px', '26px'],
|
|
xl: ['24px', '32px'],
|
|
'2xl': ['32px', '40px'],
|
|
},
|
|
colors: {
|
|
bg0: 'var(--ethos-bg0)',
|
|
bg1: 'var(--ethos-bg1)',
|
|
bg2: 'var(--ethos-bg2)',
|
|
surface0: 'var(--ethos-surface0)',
|
|
surface1: 'var(--ethos-surface1)',
|
|
surface2: 'var(--ethos-surface2)',
|
|
border: 'var(--ethos-border)',
|
|
text: 'var(--ethos-text)',
|
|
secondary: 'var(--ethos-secondary)',
|
|
muted: 'var(--ethos-muted)',
|
|
disabled: 'var(--ethos-disabled)',
|
|
machine: 'var(--ethos-machine)',
|
|
accent: 'var(--ethos-accent)',
|
|
'accent-h': 'var(--ethos-accent-hover)',
|
|
green: 'var(--ethos-green)',
|
|
amber: 'var(--ethos-amber)',
|
|
red: 'var(--ethos-red)',
|
|
purple: 'var(--ethos-purple)',
|
|
cyan: 'var(--ethos-cyan)',
|
|
orange: 'var(--ethos-orange)',
|
|
'on-accent': 'var(--ethos-on-accent)',
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: '8px',
|
|
sm: '4px',
|
|
md: '8px',
|
|
lg: '12px',
|
|
xl: '16px',
|
|
full: '9999px',
|
|
},
|
|
spacing: {
|
|
0.5: '4px',
|
|
1: '8px',
|
|
1.5: '12px',
|
|
2: '16px',
|
|
2.5: '20px',
|
|
3: '24px',
|
|
4: '32px',
|
|
5: '40px',
|
|
6: '48px',
|
|
7: '56px',
|
|
8: '64px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 150ms ease both',
|
|
'rise': 'rise 150ms ease both',
|
|
'slide-in': 'slideIn 150ms ease both',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
rise: {
|
|
'0%': { opacity: '0', transform: 'translateY(6px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideIn: {
|
|
'0%': { opacity: '0', transform: 'translateX(8px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|