/* * dx-brand.css — Override DX Fluent accent na brend-teal. * * Strategija (prema DevExpress docs https://docs.devexpress.com/Blazor/405705 * i https://docs.devexpress.com/Blazor/405530): * * 1. SetCustomAccentColor("#0d8a96") u App.razor generira --dxbl-accent-color-* * skalu automatski. * * 2. Ovaj CSS file nadjačava --dxds-primary-* (public API, 17 varijabli) teal * skalom izvedenom iz brand tokena, te nadjačava semantic surface-primary * varijable za preciznu kontrolu stanja gumba. * * Sve --dxds-* varijable su JAVNI API (docs: "Design System CSS variables that * serve as public APIs"). --dxbl-* su interne i ne treba ih dirati. * * Boje skale temelje se na brand tokenima iz brand.css: * --accent: #0d8a96 (primary / 90 u skali) * --accent-deep: #0a6a74 (hover / pressed / ~110-120) * --accent-ink: #073f46 (najdublja nijansa / ~150-170) * --accent-soft: #dceff0 (najsvjetlija nijansa / ~10-20) * --accent-soft-2:#e9f4f4 * * Linkano NAKON NaruciSe.styles.css kako bi overridealo temu. */ :root { /* ── Primarna skala (--dxds-primary-10 → -170) ────────────────────────── 10 = najsvjetlije (gotovo bijelo s teal prigušenjem) 90 = base accent (#0d8a96 ≈ brand --accent) 170 = najtamniji teal Izvedeno analogno Mint paleti iz DevExpress Design System (405638): Mint-90 = #018574, naša baza je #0d8a96 (malo svjetlija / toplija teal) */ --dxds-primary-10: #f0fafb; --dxds-primary-20: #dff2f4; /* ≈ --accent-soft-2 (#e9f4f4) */ --dxds-primary-30: #cceaed; /* ≈ --accent-soft (#dceff0) */ --dxds-primary-40: #b3dde1; --dxds-primary-50: #92cdd3; --dxds-primary-60: #6ab9c1; --dxds-primary-70: #3da4ae; --dxds-primary-80: #1f96a2; --dxds-primary-90: #0d8a96; /* ── brand --accent (base) ─── */ --dxds-primary-100: #0c7e89; --dxds-primary-110: #0b717b; /* ≈ između accent i accent-deep */ --dxds-primary-120: #0a6a74; /* ── brand --accent-deep ──── */ --dxds-primary-130: #085e67; --dxds-primary-140: #074f57; --dxds-primary-150: #063f46; /* ── brand --accent-ink ───── */ --dxds-primary-160: #042e33; --dxds-primary-170: #021d20; /* ── Semantic surface-primary varijable (javni API, docs 405706) ───────── Ove varijable direktno upravljaju pozadinskom bojom DX primarnih gumba i aktivnih linkova u sva stanja (rest / hover / active / selected). Dokumentirane na: https://docs.devexpress.com/DesignSystem/405706 Semanitčki pattern (analogan Blue temi gdje -90 = rest, -80 = hover, -130 = active/selected): */ /* Default (solid primary) surface — gumb u mirovanju */ --dxds-color-surface-primary-default-rest: #0d8a96; /* --accent */ --dxds-color-surface-primary-default-hovered: #1f96a2; /* primary-80, svjetlije */ --dxds-color-surface-primary-default-active: #085e67; /* primary-130, tamnije */ --dxds-color-surface-primary-default-selected: #0a6a74; /* --accent-deep */ --dxds-color-surface-primary-default-disabled: #0a6a74; /* Subdued surface — npr. sekundarni naglasci, hover pozadine */ --dxds-color-surface-primary-subdued-rest: #0a6a74; /* --accent-deep */ --dxds-color-surface-primary-subdued-hovered: #0b717b; /* primary-110 */ --dxds-color-surface-primary-subdued-active: #074f57; /* primary-140 */ --dxds-color-surface-primary-subdued-selected: #085e67; /* primary-130 */ /* Deep surface — najtamniji variant */ --dxds-color-surface-primary-deep-rest: #063f46; /* --accent-ink */ --dxds-color-surface-primary-deep-hovered: #074f57; /* primary-140 */ --dxds-color-surface-primary-deep-active: #042e33; /* primary-160 */ --dxds-color-surface-primary-deep-selected: #063f46; } /* * Fallback — direktni selektor za primarni DX gumb. * Aktivira se ako semantic surface-primary varijable nisu dovoljne * (npr. stari DX version koji ne koristi dxds-color-surface-primary-*). * Linkano zadnje u , specifičnost osigurava override. */ .dxbl-btn.dxbl-btn-primary { background-color: var(--accent); border-color: var(--accent); color: #ffffff; } .dxbl-btn.dxbl-btn-primary:hover, .dxbl-btn.dxbl-btn-primary:focus-visible { background-color: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } .dxbl-btn.dxbl-btn-primary:active { background-color: var(--accent-ink); border-color: var(--accent-ink); color: #ffffff; }