/* ============================================================================ AVALME · DESIGN TOKENS Token scaffolding (no Tailwind required). Loaded BEFORE avalme.css. Provides: - Static base palettes (Tailwind subset + design dark customs). - Runtime theme switching via data-theme-* attributes on . - Semantic aliases (--color-primary-*, --color-gray-*, --color-dark-*). - Surface, motion, type, shadow tokens. See UI Guidelines/STYLE_GUIDE_AVALME.md §3.1. ============================================================================ */ /* ──────────────────────────────────────────────────────────────────────────── 1. Tailwind palette base ──────────────────────────────────────────────────────────────────────────── */ :root { /* slate */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; /* gray */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #030712; /* neutral */ --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; --color-neutral-950: #0a0a0a; /* indigo */ --color-indigo-50: #eef2ff; --color-indigo-100: #e0e7ff; --color-indigo-200: #c7d2fe; --color-indigo-300: #a5b4fc; --color-indigo-400: #818cf8; --color-indigo-500: #6366f1; --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca; --color-indigo-800: #3730a3; --color-indigo-900: #312e81; --color-indigo-950: #1e1b4b; /* blue */ --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af; --color-blue-900: #1e3a8a; --color-blue-950: #172554; /* green */ --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; --color-green-950: #052e16; /* amber */ --color-amber-50: #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-900: #78350f; --color-amber-950: #451a03; /* purple */ --color-purple-50: #faf5ff; --color-purple-100: #f3e8ff; --color-purple-200: #e9d5ff; --color-purple-300: #d8b4fe; --color-purple-400: #c084fc; --color-purple-500: #a855f7; --color-purple-600: #9333ea; --color-purple-700: #7e22ce; --color-purple-800: #6b21a8; --color-purple-900: #581c87; --color-purple-950: #3b0764; /* rose */ --color-rose-50: #fff1f2; --color-rose-100: #ffe4e6; --color-rose-200: #fecdd3; --color-rose-300: #fda4af; --color-rose-400: #fb7185; --color-rose-500: #f43f5e; --color-rose-600: #e11d48; --color-rose-700: #be123c; --color-rose-800: #9f1239; --color-rose-900: #881337; --color-rose-950: #4c0519; /* sky (used by --color-info-*) */ --color-sky-50: #f0f9ff; --color-sky-100: #e0f2fe; --color-sky-200: #bae6fd; --color-sky-300: #7dd3fc; --color-sky-400: #38bdf8; --color-sky-500: #0ea5e9; --color-sky-600: #0284c7; --color-sky-700: #0369a1; --color-sky-800: #075985; --color-sky-900: #0c4a6e; --color-sky-950: #082f49; /* emerald (used by --color-success-*) */ --color-emerald-50: #ecfdf5; --color-emerald-100: #d1fae5; --color-emerald-200: #a7f3d0; --color-emerald-300: #6ee7b7; --color-emerald-400: #34d399; --color-emerald-500: #10b981; --color-emerald-600: #059669; --color-emerald-700: #047857; --color-emerald-800: #065f46; --color-emerald-900: #064e3b; --color-emerald-950: #022c22; /* white / black */ --color-white: #ffffff; --color-black: #000000; } /* ──────────────────────────────────────────────────────────────────────────── 2. design dark palette base — defaults to "cinder" Each [data-theme-dark] block re-points these (see §4). ──────────────────────────────────────────────────────────────────────────── */ :root { --color-dark-50: #e6e7eb; --color-dark-100: #d0d2db; --color-dark-200: #b7bac4; --color-dark-300: #838794; --color-dark-400: #4c4f57; --color-dark-450: #383a41; --color-dark-500: #2a2c32; --color-dark-600: #232429; --color-dark-700: #1c1d21; --color-dark-750: #1a1b1f; --color-dark-800: #15161a; --color-dark-900: #0e0f11; } /* ──────────────────────────────────────────────────────────────────────────── 3. Semantic aliases — light gray (default: slate) data-theme-light overrides in §4. ──────────────────────────────────────────────────────────────────────────── */ :root { --color-gray-150: #e9eef5; /* Mapped to slate by default */ } [data-theme-light="slate"] { --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-150: #e9eef5; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; --color-gray-950: #020617; } [data-theme-light="gray"] { --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-150: #ebedf0; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #030712; } [data-theme-light="neutral"] { --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-150: #ededed; --color-gray-200: #e5e5e5; --color-gray-300: #d4d4d4; --color-gray-400: #a3a3a3; --color-gray-500: #737373; --color-gray-600: #525252; --color-gray-700: #404040; --color-gray-800: #262626; --color-gray-900: #171717; --color-gray-950: #0a0a0a; } /* ──────────────────────────────────────────────────────────────────────────── 4. Dark surface palettes — selectable via data-theme-dark="..." ──────────────────────────────────────────────────────────────────────────── */ [data-theme-dark="navy"] { --color-dark-50: #e7e9ef; --color-dark-100: #c2c9d6; --color-dark-200: #a5afc4; --color-dark-300: #6d7ea1; --color-dark-400: #5c6b8a; --color-dark-450: #465675; --color-dark-500: #384766; --color-dark-600: #313e59; --color-dark-700: #24314a; --color-dark-750: #222e45; --color-dark-800: #202b40; --color-dark-900: #182030; } [data-theme-dark="mirage"] { --color-dark-50: #dde5f5; --color-dark-100: #b4bfd9; --color-dark-200: #9eaac4; --color-dark-300: #6c7c9e; --color-dark-400: #3d4e70; --color-dark-450: #293859; --color-dark-500: #1e2b47; --color-dark-600: #1a2640; --color-dark-700: #101a2e; --color-dark-750: #0f1729; --color-dark-800: #0c1221; --color-dark-900: #050a16; } [data-theme-dark="mint"] { --color-dark-50: #e1e5ea; --color-dark-100: #c5ccd3; --color-dark-200: #a0abb6; --color-dark-300: #70838f; --color-dark-400: #506877; --color-dark-450: #384954; --color-dark-500: #2a3942; --color-dark-600: #242f38; --color-dark-700: #152129; --color-dark-750: #111b22; --color-dark-800: #0d161c; --color-dark-900: #0a1014; } [data-theme-dark="black"] { --color-dark-50: #ebebed; --color-dark-100: #d9d9de; --color-dark-200: #c5c5cc; --color-dark-300: #93939c; --color-dark-400: #4a4a4f; --color-dark-450: #333338; --color-dark-500: #242428; --color-dark-600: #1f1f21; --color-dark-700: #131314; --color-dark-750: #0c0c0d; --color-dark-800: #080809; --color-dark-900: #000000; } [data-theme-dark="cinder"] { --color-dark-50: #e6e7eb; --color-dark-100: #d0d2db; --color-dark-200: #b7bac4; --color-dark-300: #838794; --color-dark-400: #4c4f57; --color-dark-450: #383a41; --color-dark-500: #2a2c32; --color-dark-600: #232429; --color-dark-700: #1c1d21; --color-dark-750: #1a1b1f; --color-dark-800: #15161a; --color-dark-900: #0e0f11; } /* ──────────────────────────────────────────────────────────────────────────── 5. Primary brand palette — selectable via data-theme-primary="..." Default (no attr) uses indigo. ──────────────────────────────────────────────────────────────────────────── */ :root { --color-primary-50: var(--color-indigo-50); --color-primary-100: var(--color-indigo-100); --color-primary-200: var(--color-indigo-200); --color-primary-300: var(--color-indigo-300); --color-primary-400: var(--color-indigo-400); --color-primary-500: var(--color-indigo-500); --color-primary-600: var(--color-indigo-600); --color-primary-700: var(--color-indigo-700); --color-primary-800: var(--color-indigo-800); --color-primary-900: var(--color-indigo-900); --color-primary-950: var(--color-indigo-950); } [data-theme-primary="indigo"] { --color-primary-50: var(--color-indigo-50); --color-primary-100: var(--color-indigo-100); --color-primary-200: var(--color-indigo-200); --color-primary-300: var(--color-indigo-300); --color-primary-400: var(--color-indigo-400); --color-primary-500: var(--color-indigo-500); --color-primary-600: var(--color-indigo-600); --color-primary-700: var(--color-indigo-700); --color-primary-800: var(--color-indigo-800); --color-primary-900: var(--color-indigo-900); --color-primary-950: var(--color-indigo-950); } [data-theme-primary="blue"] { --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); } [data-theme-primary="green"] { --color-primary-50: var(--color-green-50); --color-primary-100: var(--color-green-100); --color-primary-200: var(--color-green-200); --color-primary-300: var(--color-green-300); --color-primary-400: var(--color-green-400); --color-primary-500: var(--color-green-500); --color-primary-600: var(--color-green-600); --color-primary-700: var(--color-green-700); --color-primary-800: var(--color-green-800); --color-primary-900: var(--color-green-900); --color-primary-950: var(--color-green-950); } [data-theme-primary="amber"] { --color-primary-50: var(--color-amber-50); --color-primary-100: var(--color-amber-100); --color-primary-200: var(--color-amber-300); --color-primary-300: var(--color-amber-300); --color-primary-400: var(--color-amber-400); --color-primary-500: var(--color-amber-500); --color-primary-600: var(--color-amber-600); --color-primary-700: var(--color-amber-700); --color-primary-800: var(--color-amber-800); --color-primary-900: var(--color-amber-900); --color-primary-950: var(--color-amber-950); } [data-theme-primary="purple"] { --color-primary-50: var(--color-purple-50); --color-primary-100: var(--color-purple-100); --color-primary-200: var(--color-purple-200); --color-primary-300: var(--color-purple-300); --color-primary-400: var(--color-purple-400); --color-primary-500: var(--color-purple-500); --color-primary-600: var(--color-purple-600); --color-primary-700: var(--color-purple-700); --color-primary-800: var(--color-purple-800); --color-primary-900: var(--color-purple-900); --color-primary-950: var(--color-purple-950); } [data-theme-primary="rose"] { --color-primary-50: var(--color-rose-50); --color-primary-100: var(--color-rose-100); --color-primary-200: var(--color-rose-200); --color-primary-300: var(--color-rose-300); --color-primary-400: var(--color-rose-400); --color-primary-500: var(--color-rose-500); --color-primary-600: var(--color-rose-600); --color-primary-700: var(--color-rose-700); --color-primary-800: var(--color-rose-800); --color-primary-900: var(--color-rose-900); --color-primary-950: var(--color-rose-950); } /* ──────────────────────────────────────────────────────────────────────────── 6. Surface tokens — three layered surfaces under a card. In light mode default, surfaces map to white-ish; in dark, dark-450/500/600. data-card-skin="bordered" shifts surfaces one step deeper. ──────────────────────────────────────────────────────────────────────────── */ :root { --surface-1: var(--color-white); --surface-2: var(--color-gray-50); --surface-3: var(--color-gray-100); } html.dark { --surface-1: var(--color-dark-450); --surface-2: var(--color-dark-500); --surface-3: var(--color-dark-600); } html[data-card-skin="bordered"] { --surface-1: var(--color-white); --surface-2: var(--color-gray-50); --surface-3: var(--color-gray-100); } html.dark[data-card-skin="bordered"] { --surface-1: var(--color-dark-500); --surface-2: var(--color-dark-600); --surface-3: var(--color-dark-700); } /* ──────────────────────────────────────────────────────────────────────────── 7. Semantic colors (info / success / warning / error / secondary) ──────────────────────────────────────────────────────────────────────────── */ :root { /* Info — sky */ --color-info-lighter: var(--color-sky-400); --color-info-light: var(--color-sky-500); --color-info: var(--color-sky-600); --color-info-darker: var(--color-sky-700); /* Success — emerald */ --color-success-lighter: var(--color-emerald-400); --color-success-light: var(--color-emerald-500); --color-success: var(--color-emerald-600); --color-success-darker: var(--color-emerald-700); /* Warning — design custom (amber-ish) */ --color-warning-lighter: #ffba42; --color-warning-light: #ffa71a; --color-warning: #f59200; --color-warning-darker: #db7c00; /* Error — design custom (orange-red) */ --color-error-lighter: #ff8a5c; --color-error-light: #ff6933; --color-error: #ff4f1a; --color-error-darker: #e52e00; /* Secondary — design pink/magenta (marketing only) */ --color-secondary-lighter: #ff75df; --color-secondary-light: #ff2ecf; --color-secondary: #e000ad; --color-secondary-darker: #b8008c; } /* ──────────────────────────────────────────────────────────────────────────── 8. Contextual color variants (.this:primary, .this:secondary, ...) Reassign locally so a component can adopt the matching tone. ──────────────────────────────────────────────────────────────────────────── */ .this\:primary { --color-this-lighter: var(--color-primary-400); --color-this-light: var(--color-primary-500); --color-this: var(--color-primary-600); --color-this-darker: var(--color-primary-700); } .this\:secondary { --color-this-lighter: var(--color-secondary-lighter); --color-this-light: var(--color-secondary-light); --color-this: var(--color-secondary); --color-this-darker: var(--color-secondary-darker); } .this\:info { --color-this-lighter: var(--color-info-lighter); --color-this-light: var(--color-info-light); --color-this: var(--color-info); --color-this-darker: var(--color-info-darker); } .this\:success { --color-this-lighter: var(--color-success-lighter); --color-this-light: var(--color-success-light); --color-this: var(--color-success); --color-this-darker: var(--color-success-darker); } .this\:warning { --color-this-lighter: var(--color-warning-lighter); --color-this-light: var(--color-warning-light); --color-this: var(--color-warning); --color-this-darker: var(--color-warning-darker); } .this\:error { --color-this-lighter: var(--color-error-lighter); --color-this-light: var(--color-error-light); --color-this: var(--color-error); --color-this-darker: var(--color-error-darker); } /* ──────────────────────────────────────────────────────────────────────────── 9. Shadow & motion tokens (project-local extras) Typography tokens (font-sans, text-*, font-weight-*, tracking-*, leading-*) live in §B further down — single source of truth aligned with estilos.css. Easing curves (--ease-in / --ease-out / --ease-in-out / --ease-elastic) live in §D further down — same. ──────────────────────────────────────────────────────────────────────────── */ :root { --shadow-soft: rgba(145, 158, 171, 0.2) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px; --shadow-soft-dark: 0 3px 10px 0 rgb(25 25 25 / 30%); --shadow-elevation-1: 0 1px 2px rgb(0 0 0 / .04); --shadow-elevation-2: var(--shadow-soft); --shadow-elevation-3: 0 12px 24px rgb(0 0 0 / .10); --shadow-elevation-4: 0 18px 36px rgb(0 0 0 / .12); /* Motion durations are project-local extras (estilos.css only defines --default-transition-duration). They sit between the standard 150 ms and longer 400 ms reveals. */ --motion-short: 100ms; --motion-medium: 200ms; --motion-long: 250ms; --motion-x-long: 400ms; } html.dark { --shadow-elevation-1: 0 1px 2px rgb(0 0 0 / .35); --shadow-elevation-2: var(--shadow-soft-dark); --shadow-elevation-3: 0 14px 28px rgb(0 0 0 / .55); --shadow-elevation-4: 0 18px 36px rgb(0 0 0 / .60); } /* ──────────────────────────────────────────────────────────────────────────── 11. Layout horizontal margins (design layouts.css adapted) ──────────────────────────────────────────────────────────────────────────── */ :root { --margin-x: 1rem; } @media (min-width: 768px) { :root { --margin-x: 1.5rem; } } @media (min-width: 1280px) { [data-layout="main-layout"] { --margin-x: 4rem; } [data-layout="sideblock"] { --margin-x: 1.5rem; } } @media (min-width: 1536px) { [data-layout="sideblock"], [data-layout="horizontal-nav"] { --margin-x: 3rem; } } /* ──────────────────────────────────────────────────────────────────────────── 12. Body baseline — applies font and bg from tokens ──────────────────────────────────────────────────────────────────────────── */ html { text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; /* Prevent off-screen drawers (MudDrawer Temporary anchored to End) from creating a horizontal scrollbar that reveals the drawer when the user drags sideways. Components that legitimately need horizontal scroll (wide tables, code blocks) opt in locally via overflow-x: auto. */ overflow-x: hidden; } html.dark { color-scheme: dark; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.43; color: var(--color-gray-700); background-color: var(--color-gray-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.dark body { color: var(--color-dark-200); background-color: var(--color-dark-900); } [data-card-skin="bordered"] body { background-color: var(--color-white); } html.dark[data-card-skin="bordered"] body { background-color: var(--color-dark-900); } /* ──────────────────────────────────────────────────────────────────────────── 13. Theme Customizer Drawer (ThemeCustomizerDrawer.razor) Mirrors the design template visual: every tile is a tiny mockup of the option it represents — outer tinted body containing two stacked sub-cards (header lines + row with avatar circle). ──────────────────────────────────────────────────────────────────────────── */ /* ── Drawer shell ─────────────────────────────────────────────────────── */ /* Force the drawer to span the full viewport regardless of MudLayout's appbar/footer offsets. With only top:0 / bottom:0, the drawer auto-stretches to 100vh but Mud keeps its own flex layout intact (so the drawer-content children scroll correctly). z-index is intentionally NOT overridden — Mud already stacks Overlay (1199) below Drawer (1200) and forcing it breaks that order. */ /* the floating-drawer pattern. Spec: fixed inset-y-0 right-0 z-61 w-screen flex flex-col bg-white dark:bg-dark-750/80 backdrop-blur-sm sm:inset-y-2 sm:mx-2 sm:w-80 sm:rounded-xl Mobile (≤639 px): edge-to-edge, full screen, no radius. Desktop (≥640 px): floats with 8 px gutter on top/right/bottom, 320 px wide, 12 px rounded on all 4 corners. `position: fixed !important` + `transform: none !important` defeat any GPU-acceleration / containing-block hacks that MudDrawer or its parent might apply, which otherwise let the drawer drift with page scroll. */ /* DO NOT override `position`, `top`, `bottom`, `right`, `width`, `transform` on .mud-drawer — Mud uses those internally for the slide-in/-out animation (and may use `right: -` rather than transform on some builds). Overriding any of them blocks the close state and the drawer stays permanently visible. We only override visual properties (border, background, blur) and add a `margin` to achieve the design floating look without touching the layout primitives. */ .bp-theme-drawer.mud-drawer { backdrop-filter: blur(8px); overflow: hidden; /* clip the inner scroll within the rounded corners */ border-radius: 0; /* mobile: edge-to-edge, no radius */ /* IMPORTANT: NO right margin. A `margin-right` would push the drawer inward from the viewport edge by that amount; when MudBlazor closes via `transform: translateX(100%)`, the drawer only slides by its own width — leaving a visible sliver equal to the margin. By using top/bottom/left only, the drawer hugs the viewport's right edge when open and fully disappears when closed. The animation is preserved. */ margin: 8px 0 8px 8px !important; height: 100vh !important; position: fixed !important; } @media (min-width: 640px) { .bp-theme-drawer.mud-drawer { /* Same 8 px gutter on top/bottom/left only — no right margin. */ margin: 8px 0 8px 8px !important; height: calc(100vh - 16px); max-height: calc(100vh - 16px); border-radius: var(--radius-xl); position: fixed !important; } } /* Translucent dark fill (design uses `dark:bg-dark-750/80`). The 80 % opacity + backdrop-blur on the panel creates the frosted-glass effect. `--color-dark-750` was loaded with the design palettes (§4 / §A) and is theme-aware via data-theme-dark. */ html.dark .bp-theme-drawer.mud-drawer { background: rgb(from var(--color-dark-750) r g b / 0.85) !important; } /* design .custom-scrollbar pattern (estilos.css §1000-1037): 4 px wide, semi-transparent gray-300 thumb that darkens on hover. Replaces the default browser scrollbar, which renders thick / jittery and is the main reason the drawer felt "mareado" while scrolling. */ .bp-theme-drawer .mud-drawer-content { /* Use height: 100% (works whether the parent is flex or block — Mud's drawer wrapper is flex-column by default but we don't depend on that) so the scroll container always matches the drawer's full height and overflow-y can engage properly. */ height: 100%; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: rgb(from var(--color-gray-300) r g b / 0.6) transparent; /* The drawer panel itself owns the backdrop-filter (see .bp-theme-drawer. mud-drawer above). Don't duplicate it here — nested backdrop-filter breaks the parent's frosted-glass effect on Chromium. */ } .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar { width: 4px; } .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-track { background: transparent; } .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb { background-color: rgb(from var(--color-gray-300) r g b / 0.6); border-radius: 4px; } .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-gray-400); } html.dark .bp-theme-drawer .mud-drawer-content { scrollbar-color: var(--color-dark-400) transparent; } html.dark .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb { background-color: var(--color-dark-400); } html.dark .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-dark-300); } .bp-theme-drawer-header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-white); position: sticky; top: 0; z-index: 1; } html.dark .bp-theme-drawer-header { border-bottom-color: var(--color-dark-500); background: var(--color-dark-700); } .bp-theme-drawer-title { font-family: var(--font-sans); font-size: var(--text-sm); line-height: calc(var(--spacing) * 5); color: var(--color-gray-700); } html.dark .bp-theme-drawer-title { color: var(--color-dark-100); } .bp-theme-drawer-title-icon { color: var(--color-primary-600); } .bp-theme-drawer-body { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 20px; } /* ── Section ──────────────────────────────────────────────────────────── */ .bp-theme-section { display: flex; flex-direction: column; gap: 10px; } .bp-theme-section-title { font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-gray-800); margin: 0; letter-spacing: 0; } html.dark .bp-theme-section-title { color: var(--color-dark-100); } /* Hint subtitle shown under a section title when the controls below are informational only (e.g. the Primary Colors section becomes locked while the Avalme brand is active). */ .bp-theme-section-hint { margin: -4px 0 4px; font-family: var(--font-sans); font-size: 11px; line-height: 1.4; color: var(--color-gray-500); font-style: italic; } html.dark .bp-theme-section-hint { color: var(--color-dark-300); } /* `--disabled` modifier — the section stays visible (so the user sees what options exist) but the controls below the title are dimmed and stop responding to clicks. The title + hint stay at full opacity so the "locked" message reads clearly. */ .bp-theme-section--disabled .bp-theme-grid, .bp-theme-section--disabled .mud-input-control, .bp-theme-section--disabled .mud-select { opacity: 0.4; pointer-events: none; user-select: none; } .bp-theme-grid { display: grid; gap: 10px; } .bp-theme-grid-2 { grid-template-columns: repeat(2, 1fr); } .bp-theme-grid-3 { grid-template-columns: repeat(3, 1fr); } .bp-theme-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; } .bp-theme-tile-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .bp-theme-tile-label { margin-top: calc(var(--spacing) * 1.5); font-size: var(--text-xs-plus); font-weight: 500; color: var(--color-gray-600); text-align: center; line-height: 1.2; } html.dark .bp-theme-tile-label { color: var(--color-dark-200); } /* ── Mode tile (System / Light / Dark) ────────────────────────────────── */ .bp-theme-tile { position: relative; width: 100%; aspect-ratio: 16 / 11; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; overflow: hidden; display: block; transition: box-shadow var(--motion-medium) var(--ease-in-out), outline-color var(--motion-medium) var(--ease-in-out); } .bp-theme-tile:hover { box-shadow: 0 0 0 1px var(--color-gray-300); } .bp-theme-tile.selected { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } html.dark .bp-theme-tile.selected { outline-color: var(--color-primary-500); } /* ── Mockup body (the outer tinted area inside the tile) ──────────────── */ .bp-theme-tile-body, .bp-theme-tile-half { width: 100%; height: 100%; padding: 4px; display: flex; flex-direction: column; gap: 4px; background: var(--color-gray-200); } .bp-theme-tile-body-dark, .bp-theme-tile-half-dark { background: var(--color-dark-900); } /* Two stacked mini-cards inside the body */ .bp-theme-tile-card { background: var(--color-white); border-radius: 3px; padding: 4px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .bp-theme-tile-card-dark { background: var(--color-dark-700); } .bp-theme-tile-card-row { flex-direction: row; align-items: center; gap: 5px; } /* Lines and circles inside the mini-cards */ .bp-theme-tile-line { display: block; height: 3px; border-radius: 2px; background: var(--color-gray-400); } .bp-theme-tile-line.tiny { height: 1.5px; } .bp-theme-tile-line-dark { background: var(--color-dark-400); } .bp-theme-tile-circle { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-gray-400); } .bp-theme-tile-circle-dark { background: var(--color-dark-400); } /* "System" mode tile — diagonal split using clip-path. Both halves render the full mockup body; clip-path masks each to a triangle so they meet at the center. */ .bp-theme-tile.is-mode-system { position: relative; } .bp-theme-tile.is-mode-system .bp-theme-tile-half { position: absolute; inset: 0; } .bp-theme-tile.is-mode-system .bp-theme-tile-half-light { clip-path: polygon(0 0, 100% 0, 0 100%); } .bp-theme-tile.is-mode-system .bp-theme-tile-half-dark { clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* ── Layout tile (Main / Sideblock) ──────────────────────────────────── */ .bp-theme-tile-layout { width: 100%; height: 100%; background: var(--color-gray-100); display: flex; overflow: hidden; } html.dark .bp-theme-tile-layout { background: var(--color-dark-900); } .bp-theme-tile-mainpanel { flex: 0 0 9%; background: var(--color-gray-200); border-right: 1px solid var(--color-gray-300); padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } html.dark .bp-theme-tile-mainpanel { background: var(--color-dark-700); border-right-color: var(--color-dark-600); } .bp-theme-tile-dot-stack { display: flex; flex-direction: column; gap: 4px; } .bp-theme-tile-line-stack { display: flex; flex-direction: column; gap: 3px; } .bp-theme-tile-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-gray-400); } html.dark .bp-theme-tile-dot { background: var(--color-dark-400); } .bp-theme-tile-primepanel { flex: 0 0 22%; background: var(--color-gray-200); padding: 4px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; } .bp-theme-tile-primepanel-wide { flex-basis: 30%; } html.dark .bp-theme-tile-primepanel { background: var(--color-dark-700); } .bp-theme-tile-canvas { flex: 1; background: var(--color-gray-100); display: flex; flex-direction: column; } html.dark .bp-theme-tile-canvas { background: var(--color-dark-900); } .bp-theme-tile-appbar { height: 12px; background: var(--color-gray-200); border-left: 1px solid var(--color-gray-300); display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 6px; } html.dark .bp-theme-tile-appbar { background: var(--color-dark-700); border-left-color: var(--color-dark-600); } /* ── Primary color card (diamond swatch) ──────────────────────────────── */ .bp-theme-color-card { width: 100%; aspect-ratio: 5 / 4; border-radius: 10px; border: 1px solid var(--color-gray-200); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color var(--motion-medium) var(--ease-in-out); } .bp-theme-color-card:hover { border-color: var(--color-gray-300); } .bp-theme-color-card.selected { border-color: var(--color-primary-500); } html.dark .bp-theme-color-card { border-color: var(--color-dark-500); } html.dark .bp-theme-color-card.selected { border-color: var(--color-primary-400); } /* Diamond shape — square rotated 45deg. Selected: rotates a bit more + scales. */ .bp-theme-color-diamond { width: 22px; height: 22px; border-radius: 4px; transform: rotate(45deg); transition: transform var(--motion-medium) var(--ease-in-out); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } .bp-theme-color-card.selected .bp-theme-color-diamond { transform: rotate(45deg) scale(1.1); } /* ── Light / Dark Color swatch tile (mirrors the mode tile body) ──────── */ .bp-theme-swatch { position: relative; width: 100%; aspect-ratio: 16 / 11; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; overflow: hidden; display: block; transition: outline-color var(--motion-medium) var(--ease-in-out); } .bp-theme-swatch:hover { box-shadow: 0 0 0 1px var(--color-gray-300); } .bp-theme-swatch.selected { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } html.dark .bp-theme-swatch.selected { outline-color: var(--color-primary-500); } .bp-theme-swatch-body { width: 100%; height: 100%; padding: 4px; display: flex; flex-direction: column; gap: 4px; background: var(--swatch-bg); } .bp-theme-swatch-card { background: var(--swatch-card); border-radius: 3px; padding: 4px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .bp-theme-swatch-card-row { flex-direction: row; align-items: center; gap: 5px; } .bp-theme-swatch-line { display: block; height: 3px; border-radius: 2px; background: var(--swatch-line); } .bp-theme-swatch-circle { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--swatch-line); } /* ── Card Skin select ─────────────────────────────────────────────────── */ .bp-theme-select.mud-input-control { width: 100%; } /* ── Density radio group ──────────────────────────────────────────────── */ /* MudRadioGroup renders three nested wrappers before reaching the radios: .mud-input-control (gets our class) — display:flex column (Mud default) └─ .mud-input-control-input-container — display:flex column └─ .mud-radio-group — display:inherit, flex-direction:row, NO gap ├─ .mud-radio └─ .mud-radio The actual flex container holding the radios is `.mud-radio-group`. Mud sets it to row but never adds `gap`, so the two radios sit edge-to-edge. Targeting that level directly is the only way to space them apart. */ .bp-theme-density-group .mud-radio-group { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; } .bp-theme-density-group .mud-radio { margin: 0 !important; } /* ============================================================================ * design primitives — imported verbatim from E:\Trabajo\.net\avalme\cursor\estilos.css * * The blocks below mirror the design tokens that design defines at :root. * Component-level CSS (avalme-v1.css and the bridge) consumes these via * `var(--token)` so we never sprinkle raw HEX/numbers in component rules. * * What is NOT brought in: * - `--tw-*` — Tailwind v4 runtime variables, not design tokens. * - @keyframes definitions — they live alongside the components that use them. * * Index (sections appended to the original tokens file) * §A Tailwind palettes — fill in what was missing (OKLCH, full 50-950 ramps) * §B Typography primitives (text, font-weight, tracking, leading, font family) * §C Sizing primitives (radius, container, blur, border-width) * §D Motion primitives (ease, default-transition-duration, animations) * §E Z-index primitives (--z-index-1..5) * §F MudBlazor palette mappings (was the Mud bridge stylesheet §1) * §G Lead-status palette (was avalme-v1.css §3.1) * * Single-source-of-truth invariant: this file is the ONLY place CSS variables * are defined in the project. Bridge / component / feature stylesheets only * consume tokens via var(--token), never define them. * ========================================================================== */ /* ============================================================================ * §A Tailwind palettes (OKLCH) * * Full 50-950 ramps for the palettes our existing the design tokens stylesheet §2 left * incomplete. Values are copied verbatim from estilos.css for visual parity * with the design source. The palettes already present (rose, indigo, * blue, green, amber, purple, emerald) keep their existing HEX definitions * in §2 — migrating those to OKLCH is a separate task. * ========================================================================== */ :root { /* — red — */ --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); /* — orange — */ --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); /* — yellow — */ --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); /* — lime — */ --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); /* — sky — */ --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); /* — cyan — */ --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); /* — teal — */ --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); /* — violet — */ --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); /* — fuchsia — */ --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); /* — pink — */ --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); /* — slate (full ramp; estilos.css already aliases gray to slate) — */ --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); /* — neutral — */ --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); } /* ============================================================================ * §B Typography primitives * ========================================================================== */ :root { /* — Font families — */ --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --default-font-family: var(--font-sans); /* --font-display: optional display/heading font, set ONLY by an active brand theme (e.g. `data-theme-brand="avalme"` overrides this to Montserrat for H1-H3). Default fallback IS `var(--font-sans)` so any rule that uses `var(--font-display)` outside a brand context stays on Inter and the cascade never breaks. */ --font-display: var(--font-sans); /* — Text size ramp — */ --text-xs: .75rem; /* 12 */ --text-sm: .875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --text-7xl: 4.5rem; /* 72 */ --text-8xl: 6rem; /* 96 */ /* design extras (between standard steps) */ --text-tiny: .625rem; /* 10 */ --text-tiny-plus: .6875rem; /* 11 */ --text-xs-plus: .8125rem; /* 13 */ --text-sm-plus: .9375rem; /* 15 */ /* — Font weight — */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* — Letter spacing — */ --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; /* — Line height — */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; } /* ============================================================================ * §C Sizing primitives * * Includes the radius scale that avalme-v1.css §1 / §2 were referencing via * `var(--radius-lg, 8px)` fallbacks — those fallbacks become unreachable now * because the tokens are defined. * ========================================================================== */ :root { /* — Spacing base unit (Tailwind v4) — The atomic unit every spacing utility multiplies. design uses it via calc(var(--spacing) * N) to derive widths, paddings and gaps (e.g. form-checkbox = calc(var(--spacing) * 4.5) = 18 px). */ --spacing: .25rem; /* 4 px */ /* — Border radius — */ --radius-xs: .125rem; /* 2 px */ --radius-sm: .25rem; /* 4 px */ --radius-md: .375rem; /* 6 px */ --radius-lg: .5rem; /* 8 px */ --radius-xl: .75rem; /* 12 px */ --radius-2xl: 1rem; /* 16 px */ /* — Container widths (max-w-*) — */ --container-xs: 20rem; /* 320 */ --container-sm: 24rem; /* 384 */ --container-md: 28rem; /* 448 */ --container-lg: 32rem; /* 512 */ --container-xl: 36rem; /* 576 */ --container-2xl: 42rem; /* 672 */ --container-3xl: 48rem; /* 768 */ --container-4xl: 56rem; /* 896 */ --container-5xl: 64rem; /* 1024 */ /* — Breakpoint (used by container-queries / media-query helpers) — */ --breakpoint-lg: 64rem; /* — Blur — */ --blur-xs: 4px; --blur-sm: 8px; /* — Border widths — */ --border-width-3: 3px; } /* ============================================================================ * §D Motion primitives * * Easing curves and animation shorthands. The ease-* tokens match the named * Tailwind v4 easings; --ease-elastic is a design extension used for the * sidebar/drawer slide-ins. * ========================================================================== */ :root { --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-elastic: cubic-bezier(.53, .21, .29, .67); --default-transition-duration: .15s; /* Animation shorthands — pair with the @keyframes that ship in design/Mud; only the timings are tokenized here. */ --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-shimmer: shimmer 2s linear infinite; } /* ============================================================================ * §E Z-index primitives * ========================================================================== */ :root { --z-index-1: 1; --z-index-2: 2; --z-index-3: 3; --z-index-5: 5; } /* ============================================================================ * §F MudBlazor palette mappings (was the Mud bridge stylesheet §1) * * Maps the semantic tokens onto MudBlazor's --mud-palette-* CSS * variables. Centralised here so the design tokens stylesheet is the single home of * every CSS variable definition in the project — bridge / component files * only consume tokens, never define them. * * !important is required because MudThemeProvider injects the same CSS * variables at runtime from PaletteLight/PaletteDark in * BpAdminDashboardTheme.cs; source-order alone does not beat the runtime * inline rules. * * Theme propagation: * data-theme-primary → flips --color-primary-* in §5, which cascades into * --mud-palette-primary* below. * data-theme-light → flips --color-gray-* in §3, cascades into surfaces. * data-theme-dark → flips --color-dark-* in §4, cascades into dark * surfaces below. * ========================================================================== */ /* Light theme tokens. */ :root, .mud-theme-default { /* Brand primary — flips when data-theme-primary changes */ --mud-palette-primary: var(--color-primary-600) !important; --mud-palette-primary-text: var(--color-white) !important; --mud-palette-primary-darken: var(--color-primary-700) !important; --mud-palette-primary-lighten: var(--color-primary-500) !important; --mud-palette-primary-hover: rgba(99, 102, 241, 0.08) !important; /* Tertiary — kept on primary so accent swatches don't drift to MudBlazor's stock pink */ --mud-palette-tertiary: var(--color-primary-500) !important; --mud-palette-tertiary-text: var(--color-white) !important; --mud-palette-tertiary-darken: var(--color-primary-600) !important; --mud-palette-tertiary-lighten: var(--color-primary-400) !important; /* Secondary — design secondary is reserved for marketing; keep MudBlazor's own secondary so .mud-button-secondary keeps a tonal contrast. We still point it at our token so dark mode has a sane value. */ --mud-palette-secondary: var(--color-secondary) !important; --mud-palette-secondary-text: var(--color-white) !important; --mud-palette-secondary-darken: var(--color-secondary-darker) !important; --mud-palette-secondary-lighten: var(--color-secondary-light) !important; /* Semantic */ --mud-palette-info: var(--color-info) !important; --mud-palette-info-text: var(--color-white) !important; --mud-palette-info-darken: var(--color-info-darker) !important; --mud-palette-info-lighten: var(--color-info-light) !important; --mud-palette-success: var(--color-success) !important; --mud-palette-success-text: var(--color-white) !important; --mud-palette-success-darken: var(--color-success-darker) !important; --mud-palette-success-lighten: var(--color-success-light) !important; --mud-palette-warning: var(--color-warning) !important; --mud-palette-warning-text: var(--color-white) !important; --mud-palette-warning-darken: var(--color-warning-darker) !important; --mud-palette-warning-lighten: var(--color-warning-light) !important; --mud-palette-error: var(--color-error) !important; --mud-palette-error-text: var(--color-white) !important; --mud-palette-error-darken: var(--color-error-darker) !important; --mud-palette-error-lighten: var(--color-error-light) !important; /* Surfaces & background — flip with data-theme-light (slate / gray / neutral) */ --mud-palette-background: var(--color-gray-50) !important; --mud-palette-background-gray: var(--color-gray-100) !important; --mud-palette-surface: var(--color-white) !important; /* Drawer / app bar */ --mud-palette-drawer-background: var(--color-white) !important; --mud-palette-drawer-text: var(--color-gray-700) !important; --mud-palette-drawer-icon: var(--color-gray-600) !important; --mud-palette-appbar-background: var(--color-white) !important; --mud-palette-appbar-text: var(--color-gray-700) !important; /* Text */ --mud-palette-text-primary: var(--color-gray-800) !important; --mud-palette-text-secondary: var(--color-gray-500) !important; --mud-palette-text-disabled: var(--color-gray-400) !important; /* Action / interactive surfaces */ --mud-palette-action-default: var(--color-gray-600) !important; --mud-palette-action-default-hover: rgba(0, 0, 0, 0.04) !important; --mud-palette-action-disabled: var(--color-gray-400) !important; --mud-palette-action-disabled-background: var(--color-gray-150) !important; /* Lines, dividers, table chrome */ --mud-palette-divider: var(--color-gray-200) !important; --mud-palette-divider-light: var(--color-gray-150) !important; --mud-palette-lines-default: var(--color-gray-200) !important; --mud-palette-lines-inputs: var(--color-gray-300) !important; --mud-palette-table-lines: var(--color-gray-200) !important; --mud-palette-table-striped: var(--color-gray-50) !important; --mud-palette-table-hover: var(--color-gray-100) !important; /* Overlay / scrim */ --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5) !important; --mud-palette-overlay-light: rgba(255, 255, 255, 0.6) !important; /* Skeleton */ --mud-palette-skeleton: var(--color-gray-150) !important; } /* Dark theme tokens. MudBlazor swaps to .mud-theme-dark on when IsDarkMode toggles; we also key on html.dark to keep parity with the design JS bootstrap. */ .mud-theme-dark, html.dark .mud-theme-default, html.dark { --mud-palette-primary: var(--color-primary-500) !important; --mud-palette-primary-text: var(--color-white) !important; --mud-palette-primary-darken: var(--color-primary-600) !important; --mud-palette-primary-lighten: var(--color-primary-400) !important; --mud-palette-primary-hover: rgba(129, 140, 248, 0.12) !important; --mud-palette-tertiary: var(--color-primary-400) !important; --mud-palette-tertiary-darken: var(--color-primary-500) !important; --mud-palette-tertiary-lighten: var(--color-primary-300) !important; --mud-palette-secondary: var(--color-secondary-light) !important; --mud-palette-secondary-darken: var(--color-secondary) !important; --mud-palette-secondary-lighten: var(--color-secondary-lighter) !important; --mud-palette-info: var(--color-info-light) !important; --mud-palette-info-darken: var(--color-info) !important; --mud-palette-info-lighten: var(--color-info-lighter) !important; --mud-palette-success: var(--color-success-light) !important; --mud-palette-success-darken: var(--color-success) !important; --mud-palette-success-lighten: var(--color-success-lighter) !important; --mud-palette-warning: var(--color-warning-light) !important; --mud-palette-warning-darken: var(--color-warning) !important; --mud-palette-warning-lighten: var(--color-warning-lighter) !important; --mud-palette-error: var(--color-error-light) !important; --mud-palette-error-darken: var(--color-error) !important; --mud-palette-error-lighten: var(--color-error-lighter) !important; /* Surfaces flip with data-theme-dark (navy / mirage / mint / black / cinder) */ --mud-palette-background: var(--color-dark-900) !important; --mud-palette-background-gray: var(--color-dark-800) !important; --mud-palette-surface: var(--color-dark-700) !important; --mud-palette-drawer-background: var(--color-dark-700) !important; --mud-palette-drawer-text: var(--color-dark-200) !important; --mud-palette-drawer-icon: var(--color-dark-300) !important; --mud-palette-appbar-background: var(--color-dark-800) !important; --mud-palette-appbar-text: var(--color-dark-200) !important; --mud-palette-text-primary: var(--color-dark-100) !important; --mud-palette-text-secondary: var(--color-dark-300) !important; --mud-palette-text-disabled: var(--color-dark-400) !important; --mud-palette-action-default: var(--color-dark-200) !important; --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06) !important; --mud-palette-action-disabled: var(--color-dark-400) !important; --mud-palette-action-disabled-background: var(--color-dark-600) !important; --mud-palette-divider: var(--color-dark-500) !important; --mud-palette-divider-light: var(--color-dark-600) !important; --mud-palette-lines-default: var(--color-dark-500) !important; --mud-palette-lines-inputs: var(--color-dark-400) !important; --mud-palette-table-lines: var(--color-dark-500) !important; --mud-palette-table-striped: var(--color-dark-600) !important; --mud-palette-table-hover: var(--color-dark-600) !important; --mud-palette-overlay-dark: rgba(0, 0, 0, 0.7) !important; --mud-palette-overlay-light: rgba(0, 0, 0, 0.4) !important; --mud-palette-skeleton: var(--color-dark-600) !important; } /* ============================================================================ * §G Lead-status palette (was avalme-v1.css §3.1) * * Domain palette for lead-status badges. Not theme tokens — these stay fixed * regardless of the user's theme picks. The HEX literals live here because * this is the token-definition layer for the feature; consumers (.av-color-* * in avalme-v1.css §3) reference them via var(). * * Where possible we alias to a design primitive so a single change to the * primitive (e.g. blue-500's value) ripples through every status badge. * ========================================================================== */ :root { --av-status-purple: #667eea; --av-status-pink: #ec4899; --av-status-blue: var(--color-blue-500); --av-status-green: var(--color-green-500); --av-status-orange: #f97316; --av-status-teal: #14b8a6; --av-status-red: #ef4444; --av-status-yellow: #eab308; --av-status-indigo: var(--color-indigo-500); --av-status-cyan: #06b6d4; } /* ============================================================================ * §H ─── AVALME BRAND THEME — `data-theme-brand="avalme"` * ---------------------------------------------------------------------------- * Aplica el branding corporativo de AVALME 1:1 con el Brand Identity Manual * (Page 3 — Color, Typography & Visual Language). Activarlo seteando * `data-theme-brand="avalme"` en el (lo gestiona avalme-theme.js + * el Theme Customizer Drawer). * * Cuando NO está activo, la app sigue exactamente igual que ahora: paleta * design default, primary picker normal (indigo/blue/etc.), Inter para todo. * Este bloque NO toca nada del default — solo añade un override scoped al * atributo. * * Orden de cascada: este bloque vive al FINAL del archivo y todas las * propiedades caen sobre los tokens globales y los `[data-theme-primary=…]` * overrides. Eso garantiza que cuando el brand Avalme está activo, el primary * color picker queda "dominado" por la paleta Avalme Blue (sin necesidad * de !important). * * Spec source: la imagen del manual del usuario (sesión actual). Los HEX son * verbatim del documento; el ramp 50-950 deriva del HEX base via HSL * lightness sweeps (las otras paletas Tailwind/design siguen la misma técnica). * ============================================================================ */ [data-theme-brand="avalme"] { /* ── Display font for headings (H1-H3 only) ─────────────────────────── */ --font-display: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif; /* ── Primary ramp — Avalme Blue (#0A6BFF) ───────────────────────────── */ /* 500 es el HEX exacto del manual. Las otras tonalidades derivan en HSL conservando hue (217°) y saturation (100%), variando solo lightness. */ --color-primary-50: #EBF3FF; --color-primary-100: #C7DBFF; --color-primary-200: #94BBFF; --color-primary-300: #5C95FF; --color-primary-400: #2D7BFF; --color-primary-500: #0A6BFF; --color-primary-600: #0058D9; --color-primary-700: #0046B0; --color-primary-800: #003585; --color-primary-900: #00255E; --color-primary-950: #00153B; /* ── Brand-specific named colors ────────────────────────────────────── */ --av-brand-avalme-blue: #0A6BFF; /* primary actions, key highlights */ --av-brand-deep-blue: #0B1D3A; /* headings, nav, structural elements */ --av-brand-teal: #00A3C7; /* accent, supporting highlights, data viz */ --av-brand-growth-green: #25C16F; /* success, progress, positive states */ --av-brand-charcoal: #111827; /* body text, icons, dividers */ --av-brand-soft-background: #F6F8FA; /* section backgrounds, surfaces */ --av-brand-white: #FFFFFF; /* default canvas */ /* ── Semantic token overrides ───────────────────────────────────────── */ /* Info → Teal (accent del manual). Success → Growth Green. Mantenemos warning/error en sus colores design porque el manual no los especifica explícitamente. */ --color-info: var(--av-brand-teal); --color-info-lighter: #4DC4DD; --color-info-light: #1AB2D5; --color-info-darker: #007AA0; --color-success: var(--av-brand-growth-green); --color-success-lighter: #5CD495; --color-success-light: #3FCB80; --color-success-darker: #1B9A56; /* ── Body text + surface colors (light mode default) ────────────────── */ /* El Charcoal del manual reemplaza al gray-800 default para el body text. El gray-50 se remapea a Soft Background para que el body bg — que es var(--color-gray-50) en el reset design — herede #F6F8FA sin que tengamos que overridear `body { background-color }` directo. Esto es clave para que el axis Card Skin siga funcionando: cuando el user elige "bordered", su regla `[data-card-skin="bordered"] body` puede ganar el body bg porque §H no compite directamente sobre body. */ --color-gray-50: var(--av-brand-soft-background); --color-gray-800: var(--av-brand-charcoal); } /* ── Dark mode bajo brand Avalme ───────────────────────────────────────── El manual solo da specs para light mode. Para dark, mantenemos la estructura design (dark-* tokens) pero subimos el matiz del Avalme Blue a un tono más claro para contraste sobre fondos oscuros (primary-400 en lugar de 500). */ html.dark [data-theme-brand="avalme"], [data-theme-brand="avalme"].dark, html.dark[data-theme-brand="avalme"] { /* En dark mode los tokens primary-* siguen siendo los mismos (el ramp está derivado de un hue/sat constante, las lightness más altas dan buen contraste sobre dark surfaces). No hace falta override aquí. */ } /* ═══════════════════════════════════════════════════════════════════════════ §I — TYPOGRAPHY SCALE (canonical, brand-agnostic) ───────────────────────────────────────────────────────────────────────── Single source of truth for typography in the app. Implements the table defined in UI Guidelines/STYLE_GUIDE_AVALME.md §3.3. Every `` renders the role-specific size / weight / line-height / tracking from this scale. MANDATORY rules for developers (also in CLAUDE.md): 1. To set a text's typography, pick the right `Typo.X` on ``. Do NOT write font-size / font-weight / line-height / letter-spacing in component-level CSS (av-*, bp-*, *-card, *-chip, etc.). 2. Component classes only add color, margin, padding, transform, layout — never typography metrics. 3. The scale is INVARIANT: `Typo.h5` always renders 18 / 26 / 600 regardless of where it sits in the DOM. Exceptions (Mud renders these OUTSIDE `.mud-typography-*`): - Buttons → `.mud-button-label`. Handled by `av-btn` (§14.1 av-v1.css). - Avatars → `.mud-avatar`. Handled by `av-avatar` (§14.4). - Form inputs → `.mud-input-*`. Handled by mud-bridge.css safety net. Brand composition: when `data-theme-brand="avalme"` is active, §H above overrides the FONT-FAMILY of H1-H6 to Montserrat and the SIZES of H1-H3 to the Brand Identity Manual values (48 / 32 / 22). H4-H6 sizes and all other roles stay identical to this scale. ═══════════════════════════════════════════════════════════════════════════ */ .mud-typography-h1 { font-family: var(--font-sans); font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: 0; } .mud-typography-h2 { font-family: var(--font-sans); font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: 0; } .mud-typography-h3 { font-family: var(--font-sans); font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: 0; } .mud-typography-h4 { font-family: var(--font-sans); font-size: 22px; line-height: 1.36; font-weight: 600; letter-spacing: 0; } .mud-typography-h5 { font-family: var(--font-sans); font-size: 18px; line-height: 1.44; font-weight: 600; letter-spacing: 0; } .mud-typography-h6 { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: 0; } .mud-typography-subtitle1 { font-family: var(--font-sans); font-size: var(--text-sm-plus); /* 15 px */ line-height: 1.46; font-weight: 500; letter-spacing: 0; } .mud-typography-subtitle2 { font-family: var(--font-sans); font-size: var(--text-xs-plus); /* 13 px */ line-height: 1.38; font-weight: 500; letter-spacing: 0; } .mud-typography-body1 { font-family: var(--font-sans); font-size: var(--text-sm); /* 14 px */ line-height: 1.43; font-weight: 400; letter-spacing: 0; } .mud-typography-body2 { font-family: var(--font-sans); font-size: var(--text-xs-plus); /* 13 px */ line-height: 1.38; font-weight: 400; letter-spacing: 0; } .mud-typography-caption { font-family: var(--font-sans); font-size: var(--text-xs); /* 12 px */ line-height: 1.33; font-weight: 400; letter-spacing: 0; } .mud-typography-overline { font-family: var(--font-sans); font-size: 11px; line-height: 1.27; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .mud-typography-button { font-family: var(--font-sans); font-size: var(--text-xs-plus); /* 13 px */ line-height: 1; font-weight: 500; letter-spacing: 0; text-transform: none; } /* §I.1 ── Form-control safety net (weight reset) ─────────────────────────── MudBlazor reuses `.mud-typography-subtitle1` (and `.mud-typography-body1`) on the wrappers of input labels, selects, autocompletes, datepickers, numericfields, textareas, etc. The base scale above sets `subtitle1` to weight 500 (per STYLE_GUIDE_AVALME §3.3), which is correct for emphasis text — but bleeds into form-control surfaces and makes labels and typed values look bolder / darker than form fields should look. This block resets the weight to 400 (body weight) on every form-control surface. We do NOT touch `font-size` here — Mud handles input sizing via its own Density / Dense / Margin rules and our `[data-density="compact"]` overrides in `mud-bridge.css §2`. Color is also untouched (kept at gray-600 / dark-200 via the existing §H "Components stay on Inter" block + Mud's default form-control color rules). Brand-agnostic: applies regardless of `data-theme-brand` so inputs feel identical under default brand and Avalme brand. */ .mud-input, .mud-input-root, .mud-input-input, .mud-input-slot, .mud-input-label, .mud-input-helper-text, .mud-input-control, .mud-form-control, .mud-select, .mud-select-input, .mud-autocomplete, .mud-picker-input, .mud-picker-input-button, textarea { font-weight: 400; } /* ── Typography overrides — Brand Identity Manual specs (literal) ──────── Tabla 3 del manual: H1 — Montserrat Bold 48 px / line-height 1.2 / page titles, hero H2 — Montserrat Bold 32 px / line-height 1.25 / section headings H3 — Montserrat SemiBold 22 px / line-height 1.3 / subsection headings Body — Inter Regular 16 px / line-height 1.6 / paragraphs Caption — Inter Regular 12 px / line-height 1.4 / notes, labels Aplicamos sobre tags HTML nativos (h1/h2/h3/p/small) Y las clases Mud equivalentes (.mud-typography-h1...h6, .mud-typography-body1, etc.) para cubrir ambos estilos de markup que existen en la app. */ [data-theme-brand="avalme"] h1, [data-theme-brand="avalme"] .mud-typography-h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.2; letter-spacing: 0; } [data-theme-brand="avalme"] h2, [data-theme-brand="avalme"] .mud-typography-h2 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: 0; } [data-theme-brand="avalme"] h3, [data-theme-brand="avalme"] .mud-typography-h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: 0; } /* H4-H6: el manual solo define H1-H3, pero para evitar saltos visuales mantenemos Montserrat SemiBold con tamaños descendentes coherentes con la escala H3. `subtitle1` y `subtitle2` NO se incluyen acá aunque visualmente sean "near-headings" para MudBlazor: Mud reusa `.mud-typography-subtitle1` sobre el wrapper de MudTextField outlined (y otros componentes form-control) — si le aplicáramos Montserrat 600, los inputs cambiarían de fuente/peso bajo Avalme, lo cual NO queremos. Inputs / selects / buttons mantienen Inter siempre (ver bloque "Components stay on Inter" más abajo). */ [data-theme-brand="avalme"] h4, [data-theme-brand="avalme"] h5, [data-theme-brand="avalme"] h6, [data-theme-brand="avalme"] .mud-typography-h4, [data-theme-brand="avalme"] .mud-typography-h5, [data-theme-brand="avalme"] .mud-typography-h6 { font-family: var(--font-display); font-weight: 600; } /* Body — Inter Regular 16 px / 1.6 + Charcoal text on Soft Background. */ [data-theme-brand="avalme"] body, [data-theme-brand="avalme"] .mud-application-layout, [data-theme-brand="avalme"] .mud-typography-body1, [data-theme-brand="avalme"] .mud-typography-body2 { font-family: var(--font-sans); font-weight: 400; color: var(--av-brand-charcoal); } [data-theme-brand="avalme"] body { font-size: 16px; line-height: 1.6; /* `background-color` is intentionally NOT set here — it would override the `[data-card-skin="bordered"] body { background: var(--color-white) }` rule and break the Card Skin axis. Instead we remap `--color-gray-50` to Soft Background (above), so the default body bg inherits the brand color via the existing `body { background-color: var(--color-gray-50) }` reset. */ } /* Dark mode: revertimos el Charcoal a dark-100 / dark-200 default — sino quedaría texto oscuro sobre oscuro. La background-color NO se setea aquí para no romper el Card Skin axis: las dark surfaces (dark-450/500/600) ya quedan correctas por la cadena de tokens estándar. */ html.dark [data-theme-brand="avalme"] body, html.dark [data-theme-brand="avalme"] .mud-application-layout { color: var(--color-dark-100); } /* Caption — Inter Regular 12 px / 1.4 */ [data-theme-brand="avalme"] .mud-typography-caption, [data-theme-brand="avalme"] small { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.4; } /* ── Components stay on Inter (defensive belt) ─────────────────────────── Mud reuses typography classes like `.mud-typography-subtitle1` on the wrappers of OUTLINED inputs, certain selects, drawer titles, etc. The §LAST safety net in the Mud bridge stylesheet already enforces `var(--font-sans)` globally on Mud form-control selectors, BUT specificity inside the brand block (`[data-theme-brand="avalme"] .X` = (0,2,0)) needs to be at least equal to neutralise any cascading Montserrat from a parent wrapper. This block forces Inter (var(--font-sans)) + the default body weight on every interactive component surface that Mud renders, regardless of which Material Design typography slot Mud happens to map it to. `subtitle1` and `subtitle2` are included here intentionally: they are NOT headings in the AVALME Brand Identity Manual sense. Mud uses them for things like input wrappers and drawer titles which should follow body typography, not display typography. */ [data-theme-brand="avalme"] .mud-typography-subtitle1, [data-theme-brand="avalme"] .mud-typography-subtitle2, [data-theme-brand="avalme"] .mud-typography-button, [data-theme-brand="avalme"] .mud-input, [data-theme-brand="avalme"] .mud-input-root, [data-theme-brand="avalme"] .mud-input-input, [data-theme-brand="avalme"] .mud-input-slot, [data-theme-brand="avalme"] .mud-input-label, [data-theme-brand="avalme"] .mud-input-helper-text, [data-theme-brand="avalme"] .mud-input-control, [data-theme-brand="avalme"] .mud-form-control, [data-theme-brand="avalme"] .mud-select, [data-theme-brand="avalme"] .mud-select-input, [data-theme-brand="avalme"] .mud-autocomplete, [data-theme-brand="avalme"] .mud-picker-input, [data-theme-brand="avalme"] textarea, [data-theme-brand="avalme"] .mud-button-root, [data-theme-brand="avalme"] .mud-button-label, [data-theme-brand="avalme"] .mud-icon-button, [data-theme-brand="avalme"] .mud-chip, [data-theme-brand="avalme"] .mud-checkbox, [data-theme-brand="avalme"] .mud-radio, [data-theme-brand="avalme"] .mud-switch, [data-theme-brand="avalme"] .mud-checkbox .mud-typography, [data-theme-brand="avalme"] .mud-radio .mud-typography, [data-theme-brand="avalme"] .mud-switch .mud-typography, [data-theme-brand="avalme"] .mud-menu-item, [data-theme-brand="avalme"] .mud-list-item, [data-theme-brand="avalme"] .mud-list-item-text, [data-theme-brand="avalme"] .mud-tab, [data-theme-brand="avalme"] .mud-tab-panel, [data-theme-brand="avalme"] .mud-table, [data-theme-brand="avalme"] .mud-table-cell { font-family: var(--font-sans); }