mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
Rahim
d562279df1
The in-flight compiler skin migration refactored the shared Tailwind token modules from main's function API (`root = (isShadowDOM) => cn(...)`, flat exports) into a string-aggregate API (`video`/`audio` nested objects) that the constrained-JSX skins consume. Since then, main built 16 runtime skin files on the function API — including the new live-video / live-audio presets — which the new token shape cannot satisfy without porting. Rather than regress main's skins or break the build, park the authored migration sources (constrained-JSX skins + refactored token layer + tailwind.css) under packages/skins/__old__, a sibling of src/ that sits outside the package tsconfig include, tsdown globs, and (via biome ignore) linting. Main remains the source of truth for live skins. The full migration snapshot (build wiring, generated React skins/CSS, core manifests, icons generate config, html/react edits) is preserved in the git tag backup/pre-rebase-2b2bbfad. The audit and port backlog live in .claude/plans/compiler-rebase-audit.md.
124 lines
4.0 KiB
CSS
124 lines
4.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@source "./default";
|
|
@source "./minimal";
|
|
@source "./shared";
|
|
|
|
/* ==========================================================================
|
|
Design system tokens
|
|
|
|
Shared defaults exposed as Tailwind theme variables. Tailwind v4 emits
|
|
these on `:root` and also makes them addressable as utilities
|
|
(`bg-(--media-color-primary)` etc.).
|
|
|
|
Layered overrides target the skin's root via the `data-skin` attribute
|
|
each skin component sets on its outer element:
|
|
- `@theme` — universal defaults.
|
|
- `[data-skin^="<skin>-"]` — skin-wide overrides shared across presets.
|
|
- `[data-skin="<skin>-<preset>"]` — preset-specific overrides.
|
|
|
|
Truly contextual values (motion-reduced, contrast-more, fullscreen, …)
|
|
stay as utilities in the skin's `root` token.
|
|
========================================================================== */
|
|
|
|
@theme {
|
|
/* Spring transition shared by error-dialog popups */
|
|
--media-spring-transition: linear(
|
|
0,
|
|
0.034 1.5%,
|
|
0.763 9.7%,
|
|
1.066 13.9%,
|
|
1.198 19.9%,
|
|
1.184 21.8%,
|
|
0.963 37.5%,
|
|
0.997 50.9%,
|
|
1
|
|
);
|
|
|
|
/* Border radius */
|
|
--media-video-border-radius: var(--media-border-radius, 2rem);
|
|
|
|
/* Controls */
|
|
--media-controls-transition-duration: 100ms;
|
|
--media-controls-transition-timing-function: ease-out;
|
|
|
|
/* Surface */
|
|
--media-surface-background-color: oklch(1 0 0 / 0.1);
|
|
--media-surface-inner-border-color: oklch(1 0 0 / 0.05);
|
|
--media-surface-outer-border-color: oklch(0 0 0 / 0.1);
|
|
--media-surface-shadow-color: oklch(0 0 0 / 0.15);
|
|
--media-surface-backdrop-filter: blur(16px) saturate(1.5);
|
|
|
|
/* Popup */
|
|
--media-popup-transition-duration: 100ms;
|
|
--media-popup-transition-timing-function: ease-out;
|
|
|
|
/* Tooltip */
|
|
--media-tooltip-side-offset: 0.75rem;
|
|
--media-tooltip-text-color: currentColor;
|
|
--media-tooltip-background-color: oklch(1 0 0 / 0.1);
|
|
--media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
|
|
|
|
/* Popover */
|
|
--media-popover-side-offset: 0.5rem;
|
|
|
|
/* Error dialog */
|
|
--media-error-dialog-transition-duration: 350ms;
|
|
--media-error-dialog-transition-delay: 100ms;
|
|
--media-error-dialog-transition-timing-function: var(--media-spring-transition);
|
|
|
|
/* Caption track */
|
|
--media-caption-track-y: -0.5rem;
|
|
--media-caption-track-delay: 25ms;
|
|
--media-caption-track-duration: var(--media-controls-transition-duration);
|
|
}
|
|
|
|
@layer skins {
|
|
/* ========================================================================
|
|
Default skin
|
|
======================================================================== */
|
|
|
|
[data-skin="default-audio"] {
|
|
--media-text-color: var(--media-color-primary, oklch(0 0 0));
|
|
|
|
--media-surface-background-color: oklch(1 0 0 / 0.5);
|
|
--media-surface-inner-border-color: oklch(1 0 0 / 0.1);
|
|
--media-surface-outer-border-color: oklch(0 0 0 / 0.05);
|
|
|
|
--media-popover-side-offset: 0.75rem;
|
|
|
|
--media-error-dialog-transition-duration: 250ms;
|
|
--media-error-dialog-transition-timing-function: ease-out;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Minimal skin
|
|
======================================================================== */
|
|
|
|
[data-skin^="minimal-"] {
|
|
--media-video-border-radius: var(--media-border-radius, 0.75rem);
|
|
|
|
--media-tooltip-side-offset: 0.5rem;
|
|
--media-tooltip-border-color: transparent;
|
|
|
|
--media-popover-side-offset: 1.5rem;
|
|
|
|
--media-controls-background-color: transparent;
|
|
|
|
--media-error-dialog-transition-duration: 150ms;
|
|
--media-error-dialog-transition-timing-function: ease-out;
|
|
}
|
|
|
|
[data-skin="minimal-audio"] {
|
|
--media-controls-background-color: oklch(1 0 0);
|
|
--media-controls-backdrop-filter: blur(16px) saturate(1.5);
|
|
--media-controls-border-color: oklch(0 0 0 / 0.05);
|
|
--media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
|
|
|
|
--media-popover-side-offset: 0.75rem;
|
|
--media-tooltip-border-color: oklch(0 0 0 / 0.05);
|
|
|
|
--media-error-dialog-transition-duration: 250ms;
|
|
}
|
|
}
|