frontend/src/styles/skins.css
Rama main · réplica de lectura del repositorio original.
/* AUTO-GENERATED by scripts/build-skins.mjs — do not edit by hand.
* Edit scripts/skin-palettes.mjs, then: node scripts/build-skins.mjs
*
* The default skin owns `:root` (light) with dark under
* `:root[data-theme="dark"]` and a prefers-color-scheme fallback for the
* moment before the pre-paint script has stamped the attribute — the same
* axis Daylight's own component CSS uses. Any non-default skin would get a
* [data-skin] block instead.
*/
/* ══ Daylight ═══════════════════════════════════════════ */
:root {
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--radius: 0.75rem;
--background: 0 0% 100%;
--foreground: 222.9 24.1% 5.7%;
--paper: 0 0% 100%;
--paper-2: 220 42.9% 97.3%;
--paper-3: 216 41.7% 95.3%;
--card: 0 0% 100%;
--card-foreground: 222.9 24.1% 5.7%;
--card-tint: 216 45.5% 97.8%;
--popover: 0 0% 100%;
--popover-foreground: 222.9 24.1% 5.7%;
--primary: 220.7 100% 50%;
--primary-foreground: 0 0% 100%;
--secondary: 216 45.5% 95.7%;
--secondary-foreground: 222.9 24.1% 5.7%;
--muted: 220 42.9% 97.3%;
--muted-foreground: 218 14.9% 39.6%;
--accent: 220.7 100% 50%;
--accent-bright: 220.7 100% 50%;
--accent-foreground: 0 0% 100%;
--copper: 4 50% 47.1%;
--success: 151.9 69.1% 26.7%;
--destructive: 4 50% 47.1%;
--destructive-foreground: 0 0% 100%;
--ring: 220.7 100% 50%;
--border: 218.4 15.6% 87%;
--border-strong: 218.4 15.6% 75.5%;
--input: 218.4 15.6% 81.6%;
--accent-soft: 220.7 100% 97.7%;
--copper-soft: 4 44.4% 94.7%;
--success-soft: 158.9 30.6% 91.2%;
--cat-organize: 210 52% 40%;
--cat-edit: 265 52% 40%;
--cat-optimize: 175 52% 40%;
--cat-security: 350 52% 40%;
--cat-to-pdf: 150 52% 40%;
--cat-from-pdf: 32 52% 40%;
--cat-advanced: 240 52% 40%;
--cat-image: 320 52% 40%;
--cat-video: 12 52% 40%;
--cat-developer: 190 52% 40%;
--cat-archive: 45 52% 40%;
--cat-document: 95 52% 40%;
--sidebar-background: 220 42.9% 97.3%;
--sidebar-foreground: 222.9 24.1% 5.7%;
--sidebar-primary: 220.7 100% 50%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 216 45.5% 95.7%;
--sidebar-accent-foreground: 222.9 24.1% 5.7%;
--sidebar-border: 218.4 15.6% 87%;
--sidebar-ring: 220.7 100% 50%;
--rail: #F5F7FB;
--scrim: rgba(10,12,13,.5);
--hero-bg: #FFFFFF;
--panel-glass: rgba(255,255,255,.85);
--edge: rgba(0,82,255,.3);
--edge-soft: rgba(0,82,255,.12);
--edge-hot: rgba(0,82,255,.5);
--halo: transparent;
--halo-2: transparent;
--sheen: rgba(255,255,255,.6);
--grain-o: 0;
--glass-blur: 0px;
--glass-a: rgba(12,126,86,.06);
--primary-glow: transparent;
--shadow-panel: 0 28px 64px -24px rgba(16,20,22,.2);
}
:root[data-theme="dark"] {
--background: 214.7 65.5% 5.7%;
--foreground: 220 37.5% 96.9%;
--paper: 213.9 48.9% 9.2%;
--paper-2: 213.3 44.3% 12%;
--paper-3: 214.8 38.3% 15.9%;
--card: 213.9 48.9% 9.2%;
--card-foreground: 220 37.5% 96.9%;
--card-tint: 213.3 45.8% 11.6%;
--popover: 213.9 48.9% 9.2%;
--popover-foreground: 220 37.5% 96.9%;
--primary: 220.9 100% 69.8%;
--primary-foreground: 216 68.2% 8.6%;
--secondary: 216.4 41.8% 15.5%;
--secondary-foreground: 220 37.5% 96.9%;
--muted: 213.3 45.8% 11.6%;
--muted-foreground: 216.4 24.1% 77.3%;
--accent: 220.9 100% 69.8%;
--accent-bright: 220.9 100% 69.8%;
--accent-foreground: 216 68.2% 8.6%;
--copper: 4.1 65.4% 64.9%;
--success: 144.2 51.7% 70.8%;
--destructive: 4.1 65.4% 64.9%;
--destructive-foreground: 210 11.8% 6.7%;
--ring: 220.9 100% 69.8%;
--border: 215.5 20.8% 21.1%;
--border-strong: 216 14.5% 34.1%;
--input: 215.7 17.7% 26%;
--accent-soft: 218.1 51.1% 14%;
--copper-soft: 281.6 14.7% 11.6%;
--success-soft: 182.4 54.8% 10.1%;
--cat-organize: 210 52% 64%;
--cat-edit: 265 52% 64%;
--cat-optimize: 175 52% 64%;
--cat-security: 350 52% 64%;
--cat-to-pdf: 150 52% 64%;
--cat-from-pdf: 32 52% 64%;
--cat-advanced: 240 52% 64%;
--cat-image: 320 52% 64%;
--cat-video: 12 52% 64%;
--cat-developer: 190 52% 64%;
--cat-archive: 45 52% 64%;
--cat-document: 95 52% 64%;
--sidebar-background: 213.9 48.9% 9.2%;
--sidebar-foreground: 220 37.5% 96.9%;
--sidebar-primary: 220.9 100% 69.8%;
--sidebar-primary-foreground: 216 68.2% 8.6%;
--sidebar-accent: 216.4 41.8% 15.5%;
--sidebar-accent-foreground: 220 37.5% 96.9%;
--sidebar-border: 215.5 20.8% 21.1%;
--sidebar-ring: 220.9 100% 69.8%;
--rail: #0C1623;
--scrim: rgba(0,0,0,.7);
--hero-bg: #050D18;
--panel-glass: rgba(23,26,29,.85);
--edge: rgba(101,150,255,.3);
--edge-soft: rgba(101,150,255,.12);
--edge-hot: rgba(101,150,255,.5);
--halo: transparent;
--halo-2: transparent;
--sheen: rgba(255,255,255,.15);
--grain-o: 0;
--glass-blur: 0px;
--glass-a: rgba(56,211,146,.07);
--primary-glow: transparent;
--shadow-panel: 0 24px 56px -20px rgba(0,0,0,.7);
}
:root[data-theme="midnight"] {
--background: 0 0% 0%;
--foreground: 220 37.5% 96.9%;
--paper: 240 6% 4%;
--paper-2: 240 6% 6%;
--paper-3: 240 5% 8%;
--card: 240 6% 4%;
--card-foreground: 220 37.5% 96.9%;
--card-tint: 0 0% 2%;
--popover: 240 6% 6%;
--popover-foreground: 220 37.5% 96.9%;
--primary: 220.9 100% 69.8%;
--primary-foreground: 216 68.2% 8.6%;
--secondary: 240 5% 8%;
--secondary-foreground: 220 37.5% 96.9%;
--muted: 240 6% 6%;
--muted-foreground: 216.4 24.1% 77.3%;
--accent: 220.9 100% 69.8%;
--accent-bright: 220.9 100% 69.8%;
--accent-foreground: 216 68.2% 8.6%;
--copper: 4.1 65.4% 64.9%;
--success: 144.2 51.7% 70.8%;
--destructive: 4.1 65.4% 64.9%;
--destructive-foreground: 210 11.8% 6.7%;
--ring: 220.9 100% 69.8%;
--border: 240 6% 12%;
--border-strong: 240 6% 19%;
--input: 240 6% 12%;
--accent-soft: 218.1 51.1% 14%;
--copper-soft: 281.6 14.7% 11.6%;
--success-soft: 182.4 54.8% 10.1%;
--cat-organize: 210 52% 64%;
--cat-edit: 265 52% 64%;
--cat-optimize: 175 52% 64%;
--cat-security: 350 52% 64%;
--cat-to-pdf: 150 52% 64%;
--cat-from-pdf: 32 52% 64%;
--cat-advanced: 240 52% 64%;
--cat-image: 320 52% 64%;
--cat-video: 12 52% 64%;
--cat-developer: 190 52% 64%;
--cat-archive: 45 52% 64%;
--cat-document: 95 52% 64%;
--sidebar-background: 213.9 48.9% 9.2%;
--sidebar-foreground: 220 37.5% 96.9%;
--sidebar-primary: 220.9 100% 69.8%;
--sidebar-primary-foreground: 216 68.2% 8.6%;
--sidebar-accent: 216.4 41.8% 15.5%;
--sidebar-accent-foreground: 220 37.5% 96.9%;
--sidebar-border: 215.5 20.8% 21.1%;
--sidebar-ring: 220.9 100% 69.8%;
--rail: #0C1623;
--scrim: rgba(0,0,0,.7);
--hero-bg: #050D18;
--panel-glass: rgba(23,26,29,.85);
--edge: rgba(101,150,255,.3);
--edge-soft: rgba(101,150,255,.12);
--edge-hot: rgba(101,150,255,.5);
--halo: transparent;
--halo-2: transparent;
--sheen: rgba(255,255,255,.15);
--grain-o: 0;
--glass-blur: 0px;
--glass-a: rgba(56,211,146,.07);
--primary-glow: transparent;
--shadow-panel: 0 24px 56px -20px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--background: 214.7 65.5% 5.7%;
--foreground: 220 37.5% 96.9%;
--paper: 213.9 48.9% 9.2%;
--paper-2: 213.3 44.3% 12%;
--paper-3: 214.8 38.3% 15.9%;
--card: 213.9 48.9% 9.2%;
--card-foreground: 220 37.5% 96.9%;
--card-tint: 213.3 45.8% 11.6%;
--popover: 213.9 48.9% 9.2%;
--popover-foreground: 220 37.5% 96.9%;
--primary: 220.9 100% 69.8%;
--primary-foreground: 216 68.2% 8.6%;
--secondary: 216.4 41.8% 15.5%;
--secondary-foreground: 220 37.5% 96.9%;
--muted: 213.3 45.8% 11.6%;
--muted-foreground: 216.4 24.1% 77.3%;
--accent: 220.9 100% 69.8%;
--accent-bright: 220.9 100% 69.8%;
--accent-foreground: 216 68.2% 8.6%;
--copper: 4.1 65.4% 64.9%;
--success: 144.2 51.7% 70.8%;
--destructive: 4.1 65.4% 64.9%;
--destructive-foreground: 210 11.8% 6.7%;
--ring: 220.9 100% 69.8%;
--border: 215.5 20.8% 21.1%;
--border-strong: 216 14.5% 34.1%;
--input: 215.7 17.7% 26%;
--accent-soft: 218.1 51.1% 14%;
--copper-soft: 281.6 14.7% 11.6%;
--success-soft: 182.4 54.8% 10.1%;
--cat-organize: 210 52% 64%;
--cat-edit: 265 52% 64%;
--cat-optimize: 175 52% 64%;
--cat-security: 350 52% 64%;
--cat-to-pdf: 150 52% 64%;
--cat-from-pdf: 32 52% 64%;
--cat-advanced: 240 52% 64%;
--cat-image: 320 52% 64%;
--cat-video: 12 52% 64%;
--cat-developer: 190 52% 64%;
--cat-archive: 45 52% 64%;
--cat-document: 95 52% 64%;
--sidebar-background: 213.9 48.9% 9.2%;
--sidebar-foreground: 220 37.5% 96.9%;
--sidebar-primary: 220.9 100% 69.8%;
--sidebar-primary-foreground: 216 68.2% 8.6%;
--sidebar-accent: 216.4 41.8% 15.5%;
--sidebar-accent-foreground: 220 37.5% 96.9%;
--sidebar-border: 215.5 20.8% 21.1%;
--sidebar-ring: 220.9 100% 69.8%;
--rail: #0C1623;
--scrim: rgba(0,0,0,.7);
--hero-bg: #050D18;
--panel-glass: rgba(23,26,29,.85);
--edge: rgba(101,150,255,.3);
--edge-soft: rgba(101,150,255,.12);
--edge-hot: rgba(101,150,255,.5);
--halo: transparent;
--halo-2: transparent;
--sheen: rgba(255,255,255,.15);
--grain-o: 0;
--glass-blur: 0px;
--glass-a: rgba(56,211,146,.07);
--primary-glow: transparent;
--shadow-panel: 0 24px 56px -20px rgba(0,0,0,.7);
}
}