/* LYRC design-token skin for beat timeline. * Revert: remove `lyrc-tokens` from OR delete the in beat-timeline.html. * Source of truth: C:\Users\dagcr\Downloads\lyrc-design-system.json * Visual layer only — no layout, geometry, or behavior changes. */ body.sb-bt-page.lyrc-tokens { /* Redefine the existing --sb-* variables so all downstream rules pick up LYRC tokens */ --sb-bg: #0A0A0D; /* app background */ --sb-panel: #0D0E13; /* left/right panels */ --sb-panel-2: #15161C; /* surface base */ --sb-border: #2A2C36; /* default border */ --sb-text: rgba(255,255,255,1); /* text.primary_100 */ --sb-dim: rgba(255,255,255,0.70); /* text.secondary_70 */ --sb-accent: #3B82F6; /* single interactive accent */ --sb-accent-2: #3B82F6; /* collapse to single accent (rule: one interactive color) */ --sb-warn: #F5A623; /* status only */ --sb-ok: #34D399; /* status only */ --sb-pink: #EC4899; /* credits/notification only — not interactive */ --sb-blue: #3B82F6; --sb-yellow: #F5A623; --sb-mono: 'JetBrains Mono', monospace; /* LYRC-only tokens (namespaced so they don't collide) */ --lyrc-canvas: #000000; --lyrc-timeline: #0B0C10; --lyrc-surface-card: #1A1B22; --lyrc-surface-raised: #1C1E26; --lyrc-surface-hover: #22242E; --lyrc-surface-input: #17181F; --lyrc-border-subtle: #1F2128; --lyrc-border-strong: #3A3D4A; --lyrc-text-tertiary: rgba(255,255,255,0.50); --lyrc-text-disabled: rgba(255,255,255,0.30); --lyrc-focus-ring: 0 0 0 2px rgba(59,130,246,0.5); --lyrc-shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --lyrc-shadow-md: 0 4px 12px rgba(0,0,0,0.40); --lyrc-shadow-lg: 0 12px 32px rgba(0,0,0,0.55); --lyrc-waveform-bar: #3B6FE0; font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; } /* --- Body backdrop: flat, no radial glow (rule: no shadows/gradients on static bg) --- */ body.sb-bt-page.lyrc-tokens { background: var(--sb-bg); } /* --- Banner (info card) --- */ body.sb-bt-page.lyrc-tokens .sb-banner { border-radius: 12px; /* lg */ border: 1px solid var(--sb-border); background: var(--lyrc-surface-card); color: var(--sb-text); font-size: 13px; line-height: 1.4; } body.sb-bt-page.lyrc-tokens .sb-banner strong { color: var(--sb-accent); } /* --- Buttons: flat, no gradient (rule: no gradients on interactive controls) --- */ body.sb-bt-page.lyrc-tokens .sb-btn { border-radius: 6px; /* sm — component_radius_map.buttons */ background: var(--sb-accent); color: #FFFFFF; font-weight: 600; font-size: 13px; padding: 8px 16px; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; } body.sb-bt-page.lyrc-tokens .sb-btn:hover:not(:disabled) { background: #5B9BFF; /* accent.primary_blue_hover */ } body.sb-bt-page.lyrc-tokens .sb-btn:focus-visible { outline: none; box-shadow: var(--lyrc-focus-ring); } body.sb-bt-page.lyrc-tokens .sb-btn.secondary { background: var(--lyrc-surface-raised); border: 1px solid var(--sb-border); color: var(--sb-text); } body.sb-bt-page.lyrc-tokens .sb-btn.secondary:hover:not(:disabled) { background: var(--lyrc-surface-hover); } body.sb-bt-page.lyrc-tokens .sb-btn:disabled { opacity: 0.30; /* text.disabled_30 step */ } /* --- Log / mono readout --- */ body.sb-bt-page.lyrc-tokens .sb-log { border-radius: 8px; /* md */ background: var(--lyrc-surface-input); border: 1px solid var(--lyrc-border-subtle); font-family: var(--sb-mono); font-size: 12px; color: var(--sb-dim); } /* --- Headings & subheads --- */ body.sb-bt-page.lyrc-tokens h1 { font-size: 28px; /* display */ font-weight: 700; letter-spacing: -0.02em; } body.sb-bt-page.lyrc-tokens .sb-sub { color: var(--lyrc-text-tertiary); font-size: 14px; line-height: 1.4; } /* --- Field labels --- */ body.sb-bt-page.lyrc-tokens .sb-bt-field label { font-size: 12px; font-weight: 500; color: var(--sb-dim); letter-spacing: 0.04em; text-transform: none; } /* --- Progress bar --- */ body.sb-bt-page.lyrc-tokens .sb-bt-progress { height: 4px; border-radius: 9999px; /* pill */ background: var(--lyrc-border-subtle); } /* --- Timeline track region background --- */ body.sb-bt-page.lyrc-tokens .sb-bt-tracks { background: var(--lyrc-timeline); } /* --- Track rows --- */ body.sb-bt-page.lyrc-tokens .sb-bt-track { border-top: 1px solid var(--lyrc-border-subtle); } body.sb-bt-page.lyrc-tokens .sb-bt-track-head { background: var(--sb-panel); border-right: 1px solid var(--lyrc-border-subtle); color: var(--sb-dim); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } body.sb-bt-page.lyrc-tokens .sb-bt-track-icon { color: var(--sb-dim); } /* Icon color per track — reserved status colors for identity, NOT interactive */ body.sb-bt-page.lyrc-tokens .sb-bt-track--beat .sb-bt-track-icon { color: var(--sb-pink); } body.sb-bt-page.lyrc-tokens .sb-bt-track--transitions .sb-bt-track-icon { color: var(--sb-accent); } body.sb-bt-page.lyrc-tokens .sb-bt-track--captionwords .sb-bt-track-icon{ color: var(--sb-warn); font-size: 13px; font-weight: 700; } body.sb-bt-page.lyrc-tokens .sb-bt-track--edit .sb-bt-track-icon { color: var(--sb-ok); } /* --- Track toggles: single interactive accent = blue --- */ body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle { background: var(--lyrc-border-subtle); border-radius: 9999px; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); } body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle::after { background: #FFFFFF; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle:checked, body.sb-bt-page.lyrc-tokens .sb-bt-track--bass .sb-bt-track-toggle:checked, body.sb-bt-page.lyrc-tokens .sb-bt-track--snare .sb-bt-track-toggle:checked, body.sb-bt-page.lyrc-tokens .sb-bt-track--clap .sb-bt-track-toggle:checked { background: var(--sb-accent); } body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle:focus-visible { outline: none; box-shadow: var(--lyrc-focus-ring); } /* --- Playhead: gold → blue (single interactive color) --- */ body.sb-bt-page.lyrc-tokens .sb-bt-playhead { background: var(--sb-accent); box-shadow: none; } body.sb-bt-page.lyrc-tokens .sb-bt-playhead::after { background: var(--sb-accent); box-shadow: none; border-radius: 4px 4px 50% 50%; /* xs top corners, cap keeps its pill bottom */ } /* --- Waveform: tokened bar color, no gradient tint --- */ body.sb-bt-page.lyrc-tokens .sb-bt-waveform { background: repeating-linear-gradient( 90deg, var(--lyrc-waveform-bar) 0, var(--lyrc-waveform-bar) 2px, transparent 2px, transparent 14px ); opacity: 1; } /* --- Panels that use --sb-panel already get the new value from the redefined var. Just make sure any residual hard-coded panel colors get overridden here. --- */ body.sb-bt-page.lyrc-tokens .sb-bt-music-crop-playhead, body.sb-bt-page.lyrc-tokens .sb-bt-music-crop-playhead-cap { background: var(--sb-accent); box-shadow: none; }