ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-10-30 17:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
94609daf445bb956888872af5faa8d6b635d40e2
hyperframes/scripts/contrast-pairs.json
T
Miguel Ángel 94609daf44 feat(studio): audio pills show real peaks and loudness (#4282) 
* feat(studio): audio clips draw real peaks shaded by loudness

The pill fill is the track tint at 70 percent, and each bar's opacity follows the cached server peaks. Muting greys the pill in place. Linked video audio shows a 1px tick.

* style(studio): format the audio waveform markup

* fix(studio): map audio peaks across the full clip width

* fix(studio): keep waveform visible through fade wedges

* fix(studio): keep silent waveform bins visible

* fix(studio): keep waveform baseline visible edge to edge

* fix(studio): keep waveform visible over fades

* fix(studio): keep quiet waveform bars visible

* fix(studio): paint waveform above fade wedges

* fix(studio): fit waveform inside audio clip

* fix(studio): preserve waveform contrast tokens

* test(studio): ratchet waveform color literals

* fix(studio): keep loudness floor internal

* chore(studio): document intentional fallow findings

* refactor(studio): share fade handle rendering

* fix(studio): pass fade handle styles explicitly

* refactor(studio): split waveform drawing stages

* test(studio): cover waveform canvas painting
2026-09-22 08:58:21 -04:00

340 lines
12 KiB
JSON
Raw Blame History

{
"themes": [
{
"id": "dark",
"selector": "@theme static",
"canvas": "--timeline-shell-bg",
"pairs": [
{
"id": "ruler-ticks",
"foreground": "--timeline-tick-text",
"background": ["--timeline-shell-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/player/components/TimelineRuler.tsx:105",
"packages/studio/src/player/components/TimelineRuler.tsx:133"
]
},
{
"id": "group-secondary-label",
"foreground": "--timeline-text-secondary",
"background": ["--timeline-gutter-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/player/components/TimelineLayerGroupHeader.tsx:62",
"packages/studio/src/player/components/TimelineLayerGroupHeader.tsx:86"
]
},
{
"id": "pending-track-label",
"foreground": "--timeline-track-label",
"background": ["--timeline-row-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/player/components/TimelineLanes.tsx:270",
"packages/studio/src/player/components/TimelineLanes.tsx:353",
"packages/studio/src/player/components/TimelineLanes.tsx:357"
],
"opacity": 0.5
},
{
"id": "clip-label",
"foreground": "--timeline-clip-chip-text",
"background": ["--timeline-row-bg", "--timeline-clip-bg", "--timeline-clip-chip-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:286"
]
},
{
"id": "audio-clip-label",
"foreground": "--timeline-clip-chip-text",
"background": [
"--timeline-row-bg",
"--timeline-clip-audio-bg",
"--timeline-clip-chip-audio-bg"
],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/styles/studio.css:230",
"packages/studio/src/styles/studio.css:300"
]
},
{
"id": "clip-timecode",
"foreground": "--timeline-tick-text",
"background": ["--timeline-row-bg", "--timeline-clip-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:305"
]
},
{
"id": "active-clip-timecode",
"foreground": "--timeline-tick-text",
"background": ["--timeline-row-bg", "--timeline-clip-bg", "--timeline-clip-bg-active"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/styles/studio.css:305"
]
},
{
"id": "clip-border-exterior",
"foreground": "--timeline-clip-border",
"background": ["--timeline-row-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:204",
"packages/studio/src/player/components/TimelineLanes.tsx:270"
],
"paintBacking": ["--timeline-row-bg", "--timeline-clip-bg"]
},
{
"id": "active-border-exterior",
"foreground": "--timeline-clip-border-active",
"background": ["--timeline-row-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:219",
"packages/studio/src/player/components/TimelineLanes.tsx:270"
],
"paintBacking": ["--timeline-row-bg", "--timeline-clip-bg"]
},
{
"id": "selected-outline",
"foreground": "--timeline-clip-selection",
"background": ["--timeline-row-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:251",
"packages/studio/src/player/components/TimelineLanes.tsx:270"
]
},
{
"id": "selected-handle",
"foreground": "--timeline-handle",
"background": ["--timeline-row-bg", "--timeline-clip-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:86",
"packages/studio/src/styles/studio.css:203"
],
"opacity": 0.492
},
{
"id": "active-selected-handle",
"foreground": "--timeline-handle",
"background": ["--timeline-row-bg", "--timeline-clip-bg", "--timeline-clip-bg-active"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:86",
"packages/studio/src/styles/studio.css:203",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/styles/studio.css:223"
],
"opacity": 0.492
},
{
"id": "hovered-handle",
"foreground": "--timeline-handle",
"background": ["--timeline-row-bg", "--timeline-clip-bg-hover"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:87",
"packages/studio/src/styles/studio.css:243"
],
"opacity": 0.456
},
{
"id": "active-hovered-handle",
"foreground": "--timeline-handle",
"background": [
"--timeline-row-bg",
"--timeline-clip-bg-hover",
"--timeline-clip-bg-active"
],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:87",
"packages/studio/src/styles/studio.css:243",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/styles/studio.css:223"
],
"opacity": 0.456
},
{
"id": "dragging-handle",
"foreground": "--timeline-handle",
"background": ["--timeline-row-bg", "--timeline-clip-bg-dragging"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:85",
"packages/studio/src/styles/studio.css:261"
],
"opacity": 0.57
},
{
"id": "active-dragging-handle",
"foreground": "--timeline-handle",
"background": [
"--timeline-row-bg",
"--timeline-clip-bg-dragging",
"--timeline-clip-bg-active"
],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/player/components/TimelineClip.tsx:160",
"packages/studio/src/player/components/TimelineClip.tsx:161",
"packages/studio/src/player/components/timelineTheme.ts:85",
"packages/studio/src/styles/studio.css:261",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/styles/studio.css:223"
],
"opacity": 0.57
},
{
"id": "quiet-waveform",
"foreground": "--timeline-waveform-bar-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:230",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/player/components/AudioWaveform.tsx:139",
"packages/studio/src/player/components/AudioWaveform.tsx:145"
],
"opacity": 0.64,
"format": "rgb-channels"
},
{
"id": "active-quiet-waveform",
"foreground": "--timeline-waveform-bar-rgb",
"background": [
"--timeline-row-bg",
"--timeline-clip-audio-bg",
"--timeline-clip-bg-active"
],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:230",
"packages/studio/src/styles/studio.css:213",
"packages/studio/src/player/components/AudioWaveform.tsx:139",
"packages/studio/src/player/components/AudioWaveform.tsx:145"
],
"opacity": 0.64,
"format": "rgb-channels"
},
{
"id": "quiet-muted-waveform",
"foreground": "--timeline-waveform-muted-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-muted-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:246",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
}
]
},
{
"id": "paper",
"selector": ":root[data-theme=\"paper\"]",
"canvas": "--timeline-shell-bg",
"pairs": [
{
"id": "quiet-waveform",
"foreground": "--timeline-waveform-bar-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/theme.css:336",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
},
{
"id": "quiet-muted-waveform",
"foreground": "--timeline-waveform-muted-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-muted-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/theme.css:340",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
}
]
},
{
"id": "paper",
"selector": ":root[data-theme=\"paper\"]",
"canvas": "--timeline-row-bg",
"pairs": [
{
"id": "clip-label",
"foreground": "--timeline-clip-chip-text",
"background": ["--timeline-clip-bg", "--timeline-clip-chip-bg"],
"role": "text",
"minimum": 4.5,
"sources": [
"packages/studio/src/styles/theme.css",
"packages/studio/src/styles/studio.css"
]
},
{
"id": "selected-outline",
"foreground": "--timeline-clip-selection",
"background": ["--timeline-row-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/theme.css",
"packages/studio/src/styles/studio.css"
]
}
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink