@charset "UTF-8"; /* ===================================================================== OnlyBeats — Paleta / Override de colores Web Awesome --------------------------------------------------------------------- Qué hace: - Redefine las escalas de las variantes brand / success / warning / danger con la identidad de OnlyBeats (neón sutil). - Añade TRES variantes nuevas usables como variant="indigo", variant="pink" y variant="caution" (naranja) en cualquier componente WA. - Light: tonos un poco más profundos (legibles sobre blanco). - Dark: mismos colores pero "glow" (cores más brillantes). - neutral / gray se dejan tal cual (los originales de WA están bien). Cómo carga: - Va dentro de @layer wa-theme-overrides (la capa de mayor precedencia en Web Awesome), así que gana SIEMPRE sobre el tema, sin depender del orden del . Aun así debe enlazarse en el después de webawesome/styles/themes/default.css. Mecánica de las variantes nuevas (indigo / pink): - Los componentes WA sólo conocen variant=brand|neutral|success| warning|danger dentro de su shadow DOM. Pero las custom properties heredan al shadow DOM, y el `:where(:root)` interno del componente no hace match dentro del shadow, por lo que basta con setear los 9 tokens genéricos (--wa-color-fill/border/on-*) en el host desde el light DOM. Eso es justo lo que hace el bloque del final. ===================================================================== */ @layer wa-theme-overrides { /* =================================================================== 1) ESCALAS DE COLOR (independientes del modo: iguales en light/dark) 95 = casi blanco → 05 = casi negro =================================================================== */ :where(:root), :host { /* ---- BRAND · Cyan / Teal (core dark = #00B8CC) ---- */ --wa-color-brand-95: #e4f9fc; --wa-color-brand-90: #c2f1f8; --wa-color-brand-80: #88e3f0; --wa-color-brand-70: #3fd2e6; --wa-color-brand-60: #00b8cc; --wa-color-brand-50: #0094a8; --wa-color-brand-40: #007180; --wa-color-brand-30: #005763; --wa-color-brand-20: #003e47; --wa-color-brand-10: #00242a; --wa-color-brand-05: #00161a; --wa-color-brand: var(--wa-color-brand-60); --wa-color-brand-on: #00161a; /* ---- SUCCESS · Verde menta neón (derivado) ---- */ --wa-color-success-95: #e3faec; --wa-color-success-90: #c1f2d5; --wa-color-success-80: #88e4ad; --wa-color-success-70: #4cd687; --wa-color-success-60: #22d07a; --wa-color-success-50: #0f9a59; --wa-color-success-40: #0a7d48; --wa-color-success-30: #086139; --wa-color-success-20: #06472a; --wa-color-success-10: #032a19; --wa-color-success-05: #021a10; --wa-color-success: var(--wa-color-success-60); --wa-color-success-on: #021a10; /* ---- WARNING · Oro / Ámbar (core dark = #DFB04A) ---- */ --wa-color-warning-95: #fbf4e0; --wa-color-warning-90: #f7e9bd; --wa-color-warning-80: #eed085; --wa-color-warning-70: #dfb04a; --wa-color-warning-60: #cf9a32; --wa-color-warning-50: #b27f24; --wa-color-warning-40: #8f6418; --wa-color-warning-30: #734f12; --wa-color-warning-20: #56390b; --wa-color-warning-10: #342105; --wa-color-warning-05: #221502; --wa-color-warning: var(--wa-color-warning-70); --wa-color-warning-on: #221502; /* ---- DANGER · Rojo coral neón (derivado) ---- */ --wa-color-danger-95: #ffecee; --wa-color-danger-90: #ffd2d8; --wa-color-danger-80: #ffa3ae; --wa-color-danger-70: #ff7585; --wa-color-danger-60: #ff4d61; --wa-color-danger-50: #e22038; --wa-color-danger-40: #b81628; --wa-color-danger-30: #921020; --wa-color-danger-20: #6b0b17; --wa-color-danger-10: #41040c; --wa-color-danger-05: #2b0207; --wa-color-danger: var(--wa-color-danger-60); --wa-color-danger-on: #2b0207; /* ---- INDIGO · variante nueva (variant="indigo") ---- */ --wa-color-indigo-95: #f0effe; --wa-color-indigo-90: #ddd9fd; --wa-color-indigo-80: #bcb2fb; --wa-color-indigo-70: #9a89f9; --wa-color-indigo-60: #7c5cff; --wa-color-indigo-50: #5f3ae6; --wa-color-indigo-40: #4a2bc0; --wa-color-indigo-30: #3b2299; --wa-color-indigo-20: #2a1870; --wa-color-indigo-10: #170c45; --wa-color-indigo-05: #0e0730; --wa-color-indigo: var(--wa-color-indigo-60); --wa-color-indigo-on: #ffffff; /* ---- PINK · variante nueva (variant="pink") ---- */ --wa-color-pink-95: #ffecf6; --wa-color-pink-90: #ffd0e9; --wa-color-pink-80: #ffa1d1; --wa-color-pink-70: #ff74ba; --wa-color-pink-60: #ff4fb0; --wa-color-pink-50: #e21f8a; --wa-color-pink-40: #b81570; --wa-color-pink-30: #921059; --wa-color-pink-20: #6b0b41; --wa-color-pink-10: #410526; --wa-color-pink-05: #2b0318; --wa-color-pink: var(--wa-color-pink-60); --wa-color-pink-on: #2b0318; /* ---- CAUTION · Naranja neón (variant="caution", core 60 = #FF7A18) ---- */ --wa-color-caution-95: #fff1e3; --wa-color-caution-90: #ffe0c2; --wa-color-caution-80: #ffc086; --wa-color-caution-70: #ff9d4d; --wa-color-caution-60: #ff7a18; --wa-color-caution-50: #e25f00; --wa-color-caution-40: #b84c00; --wa-color-caution-30: #923c00; --wa-color-caution-20: #6b2c00; --wa-color-caution-10: #411a00; --wa-color-caution-05: #2b1100; --wa-color-caution: var(--wa-color-caution-60); --wa-color-caution-on: #2b1100; } /* =================================================================== 2) TOKENS SEMÁNTICOS — LIGHT (mismo grupo de selectores que usa el tema default de WA) =================================================================== */ :where(:root), .wa-light, .wa-dark .wa-invert, .wa-light .wa-theme-default, .wa-dark .wa-theme-default.wa-invert, .wa-dark .wa-theme-default .wa-invert { /* BRAND */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); --wa-color-brand-fill-loud: var(--wa-color-brand-50); --wa-color-brand-border-quiet: var(--wa-color-brand-90); --wa-color-brand-border-normal: var(--wa-color-brand-80); --wa-color-brand-border-loud: var(--wa-color-brand-60); --wa-color-brand-on-quiet: var(--wa-color-brand-40); --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: #ffffff; /* SUCCESS */ --wa-color-success-fill-quiet: var(--wa-color-success-95); --wa-color-success-fill-normal: var(--wa-color-success-90); --wa-color-success-fill-loud: var(--wa-color-success-50); --wa-color-success-border-quiet: var(--wa-color-success-90); --wa-color-success-border-normal: var(--wa-color-success-80); --wa-color-success-border-loud: var(--wa-color-success-60); --wa-color-success-on-quiet: var(--wa-color-success-40); --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: #ffffff; /* WARNING (oro: el texto sobre el fill siempre oscuro) */ --wa-color-warning-fill-quiet: var(--wa-color-warning-95); --wa-color-warning-fill-normal: var(--wa-color-warning-90); --wa-color-warning-fill-loud: var(--wa-color-warning-50); --wa-color-warning-border-quiet: var(--wa-color-warning-90); --wa-color-warning-border-normal: var(--wa-color-warning-80); --wa-color-warning-border-loud: var(--wa-color-warning-60); --wa-color-warning-on-quiet: var(--wa-color-warning-40); --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: var(--wa-color-warning-05); /* DANGER */ --wa-color-danger-fill-quiet: var(--wa-color-danger-95); --wa-color-danger-fill-normal: var(--wa-color-danger-90); --wa-color-danger-fill-loud: var(--wa-color-danger-50); --wa-color-danger-border-quiet: var(--wa-color-danger-90); --wa-color-danger-border-normal: var(--wa-color-danger-80); --wa-color-danger-border-loud: var(--wa-color-danger-60); --wa-color-danger-on-quiet: var(--wa-color-danger-40); --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: #ffffff; /* INDIGO (variante nueva) */ --wa-color-indigo-fill-quiet: var(--wa-color-indigo-95); --wa-color-indigo-fill-normal: var(--wa-color-indigo-90); --wa-color-indigo-fill-loud: var(--wa-color-indigo-50); --wa-color-indigo-border-quiet: var(--wa-color-indigo-90); --wa-color-indigo-border-normal: var(--wa-color-indigo-80); --wa-color-indigo-border-loud: var(--wa-color-indigo-60); --wa-color-indigo-on-quiet: var(--wa-color-indigo-40); --wa-color-indigo-on-normal: var(--wa-color-indigo-30); --wa-color-indigo-on-loud: #ffffff; /* PINK (variante nueva) */ --wa-color-pink-fill-quiet: var(--wa-color-pink-95); --wa-color-pink-fill-normal: var(--wa-color-pink-90); --wa-color-pink-fill-loud: var(--wa-color-pink-50); --wa-color-pink-border-quiet: var(--wa-color-pink-90); --wa-color-pink-border-normal: var(--wa-color-pink-80); --wa-color-pink-border-loud: var(--wa-color-pink-60); --wa-color-pink-on-quiet: var(--wa-color-pink-40); --wa-color-pink-on-normal: var(--wa-color-pink-30); --wa-color-pink-on-loud: #ffffff; /* CAUTION (variante nueva) */ --wa-color-caution-fill-quiet: var(--wa-color-caution-95); --wa-color-caution-fill-normal: var(--wa-color-caution-90); --wa-color-caution-fill-loud: var(--wa-color-caution-50); --wa-color-caution-border-quiet: var(--wa-color-caution-90); --wa-color-caution-border-normal: var(--wa-color-caution-80); --wa-color-caution-border-loud: var(--wa-color-caution-60); --wa-color-caution-on-quiet: var(--wa-color-caution-40); --wa-color-caution-on-normal: var(--wa-color-caution-30); --wa-color-caution-on-loud: #ffffff; } /* =================================================================== 3) TOKENS SEMÁNTICOS — DARK (versión "glow": cores más brillantes) =================================================================== */ .wa-dark, .wa-invert, .wa-dark .wa-theme-default, .wa-light .wa-theme-default.wa-invert, .wa-light .wa-theme-default .wa-invert { /* BRAND */ --wa-color-brand-fill-quiet: var(--wa-color-brand-10); --wa-color-brand-fill-normal: var(--wa-color-brand-20); --wa-color-brand-fill-loud: var(--wa-color-brand-60); --wa-color-brand-border-quiet: var(--wa-color-brand-20); --wa-color-brand-border-normal: var(--wa-color-brand-30); --wa-color-brand-border-loud: var(--wa-color-brand-60); --wa-color-brand-on-quiet: var(--wa-color-brand-60); --wa-color-brand-on-normal: var(--wa-color-brand-70); --wa-color-brand-on-loud: var(--wa-color-brand-05); /* SUCCESS */ --wa-color-success-fill-quiet: var(--wa-color-success-10); --wa-color-success-fill-normal: var(--wa-color-success-20); --wa-color-success-fill-loud: var(--wa-color-success-60); --wa-color-success-border-quiet: var(--wa-color-success-20); --wa-color-success-border-normal: var(--wa-color-success-30); --wa-color-success-border-loud: var(--wa-color-success-60); --wa-color-success-on-quiet: var(--wa-color-success-60); --wa-color-success-on-normal: var(--wa-color-success-70); --wa-color-success-on-loud: var(--wa-color-success-05); /* WARNING (oro brillante #DFB04A en loud) */ --wa-color-warning-fill-quiet: var(--wa-color-warning-10); --wa-color-warning-fill-normal: var(--wa-color-warning-20); --wa-color-warning-fill-loud: var(--wa-color-warning-70); --wa-color-warning-border-quiet: var(--wa-color-warning-20); --wa-color-warning-border-normal: var(--wa-color-warning-30); --wa-color-warning-border-loud: var(--wa-color-warning-70); --wa-color-warning-on-quiet: var(--wa-color-warning-70); --wa-color-warning-on-normal: var(--wa-color-warning-80); --wa-color-warning-on-loud: var(--wa-color-warning-05); /* DANGER */ --wa-color-danger-fill-quiet: var(--wa-color-danger-10); --wa-color-danger-fill-normal: var(--wa-color-danger-20); --wa-color-danger-fill-loud: var(--wa-color-danger-60); --wa-color-danger-border-quiet: var(--wa-color-danger-20); --wa-color-danger-border-normal: var(--wa-color-danger-30); --wa-color-danger-border-loud: var(--wa-color-danger-60); --wa-color-danger-on-quiet: var(--wa-color-danger-60); --wa-color-danger-on-normal: var(--wa-color-danger-70); --wa-color-danger-on-loud: var(--wa-color-danger-05); /* INDIGO (variante nueva) */ --wa-color-indigo-fill-quiet: var(--wa-color-indigo-10); --wa-color-indigo-fill-normal: var(--wa-color-indigo-20); --wa-color-indigo-fill-loud: var(--wa-color-indigo-60); --wa-color-indigo-border-quiet: var(--wa-color-indigo-20); --wa-color-indigo-border-normal: var(--wa-color-indigo-30); --wa-color-indigo-border-loud: var(--wa-color-indigo-60); --wa-color-indigo-on-quiet: var(--wa-color-indigo-70); --wa-color-indigo-on-normal: var(--wa-color-indigo-80); --wa-color-indigo-on-loud: #ffffff; /* PINK (variante nueva) */ --wa-color-pink-fill-quiet: var(--wa-color-pink-10); --wa-color-pink-fill-normal: var(--wa-color-pink-20); --wa-color-pink-fill-loud: var(--wa-color-pink-60); --wa-color-pink-border-quiet: var(--wa-color-pink-20); --wa-color-pink-border-normal: var(--wa-color-pink-30); --wa-color-pink-border-loud: var(--wa-color-pink-60); --wa-color-pink-on-quiet: var(--wa-color-pink-60); --wa-color-pink-on-normal: var(--wa-color-pink-70); --wa-color-pink-on-loud: var(--wa-color-pink-05); /* CAUTION (variante nueva) */ --wa-color-caution-fill-quiet: var(--wa-color-caution-10); --wa-color-caution-fill-normal: var(--wa-color-caution-20); --wa-color-caution-fill-loud: var(--wa-color-caution-60); --wa-color-caution-border-quiet: var(--wa-color-caution-20); --wa-color-caution-border-normal: var(--wa-color-caution-30); --wa-color-caution-border-loud: var(--wa-color-caution-60); --wa-color-caution-on-quiet: var(--wa-color-caution-70); --wa-color-caution-on-normal: var(--wa-color-caution-80); --wa-color-caution-on-loud: var(--wa-color-caution-05); } /* =================================================================== 4) MAPEO DE LAS VARIANTES NUEVAS hacia los tokens de consumo. Esto es lo que permite usar variant="indigo" y variant="pink" en cualquier componente WA (button, badge, tag, callout, etc.). Las custom properties se heredan al shadow DOM del componente. También se exponen como clases utilitarias .wa-indigo / .wa-pink. =================================================================== */ .wa-indigo, [variant="indigo"] { --wa-color-fill-loud: var(--wa-color-indigo-fill-loud); --wa-color-fill-normal: var(--wa-color-indigo-fill-normal); --wa-color-fill-quiet: var(--wa-color-indigo-fill-quiet); --wa-color-border-loud: var(--wa-color-indigo-border-loud); --wa-color-border-normal: var(--wa-color-indigo-border-normal); --wa-color-border-quiet: var(--wa-color-indigo-border-quiet); --wa-color-on-loud: var(--wa-color-indigo-on-loud); --wa-color-on-normal: var(--wa-color-indigo-on-normal); --wa-color-on-quiet: var(--wa-color-indigo-on-quiet); } .wa-pink, [variant="pink"] { --wa-color-fill-loud: var(--wa-color-pink-fill-loud); --wa-color-fill-normal: var(--wa-color-pink-fill-normal); --wa-color-fill-quiet: var(--wa-color-pink-fill-quiet); --wa-color-border-loud: var(--wa-color-pink-border-loud); --wa-color-border-normal: var(--wa-color-pink-border-normal); --wa-color-border-quiet: var(--wa-color-pink-border-quiet); --wa-color-on-loud: var(--wa-color-pink-on-loud); --wa-color-on-normal: var(--wa-color-pink-on-normal); --wa-color-on-quiet: var(--wa-color-pink-on-quiet); } .wa-caution, [variant="caution"] { --wa-color-fill-loud: var(--wa-color-caution-fill-loud); --wa-color-fill-normal: var(--wa-color-caution-fill-normal); --wa-color-fill-quiet: var(--wa-color-caution-fill-quiet); --wa-color-border-loud: var(--wa-color-caution-border-loud); --wa-color-border-normal: var(--wa-color-caution-border-normal); --wa-color-border-quiet: var(--wa-color-caution-border-quiet); --wa-color-on-loud: var(--wa-color-caution-on-loud); --wa-color-on-normal: var(--wa-color-caution-on-normal); --wa-color-on-quiet: var(--wa-color-caution-on-quiet); } }