/* ══════════════════════════════════════════════════ */ /* ══ TOKENS - ALIAS-LAG ══ */ /* ══ ══ */ /* ══ Denne fil er et tyndt alias-lag der ══ */ /* ══ mapper vores gamle var(--color-*) navne ══ */ /* ══ til var(--mud-palette-*) fra MudTheme. ══ */ /* ══ ══ */ /* ══ Kilde til alle design-beslutninger: ══ */ /* ══ MudTheme i MainLayout.razor ══ */ /* ══ ══ */ /* ══ Domæne-specifikke farver (aktivitetstyper, ══ */ /* ══ kalender-slots, status-semantik) beholdes ══ */ /* ══ her da de ikke hører til i MudTheme. ══ */ /* ══ ══ */ /* ══ Udfases gradvist under per-side design-pas ══ */ /* ══ når var(--color-*) erstattes direkte. ══ */ /* ══════════════════════════════════════════════════ */ :root { /* ── Breakpoints (reference only) ── Custom properties cannot be read inside @media, so these two document the sanctioned values; write them literally as (max-width: 599px) and (max-width: 959px). They sit on MudBlazor's sm/md edges so MudHidden and our CSS switch at the same width. */ --bp-phone: 599px; --bp-tablet: 959px; /* ════════════════════════════════════════════════ */ /* ══ ALIASER → MudTheme ══ */ /* ════════════════════════════════════════════════ */ /* ── Brand ── */ --home-red: var(--mud-palette-primary); --home-red-dark: var(--mud-palette-primary-darken); --color-brand: var(--mud-palette-primary); --color-brand-bg: var(--mud-palette-primary-lighten); --color-primary: var(--mud-palette-primary); /* ── Brand m. alpha ── Bevidst literal rgba (ikke bundet til --mud-palette-primary): de nuværende scoped-styles skifter IKKE i dark mode, og det bevarer vi 1:1. Basis: Primary #dc2626. */ --color-brand-alpha-05: rgba(220, 38, 38, 0.05); --color-brand-alpha-06: rgba(220, 38, 38, 0.06); --color-brand-alpha-08: rgba(220, 38, 38, 0.08); --color-brand-alpha-10: rgba(220, 38, 38, 0.10); /* ── Tertiary m. alpha (stat-strips) ── Basis: Tertiary #d0c2b3 */ --color-tertiary-soft: rgba(208, 194, 179, 0.6); /* ── Status ── */ --color-success: var(--mud-palette-success); --color-info: var(--mud-palette-info); /* ── Text ── */ --color-text-primary: var(--mud-palette-text-primary); --color-text-secondary: var(--mud-palette-text-secondary); --color-text-muted: var(--mud-palette-text-disabled); --color-text-dim: var(--mud-palette-text-secondary); --color-text-heading: var(--mud-palette-text-primary); --color-text-body: var(--mud-palette-text-primary); --color-text-soft: var(--mud-palette-text-secondary); --color-text-subtle: var(--mud-palette-text-primary); --color-text-medium: var(--mud-palette-text-secondary); --color-text-dark: var(--mud-palette-text-primary); --color-text-success: var(--mud-palette-success-darken); --color-text-error: var(--mud-palette-error-darken); --color-text-info: var(--mud-palette-info-darken); /* ── Backgrounds ── */ /* MudBlazor emits -gray; the codebase spells it -grey, so alias it here. */ --mud-palette-background-grey: var(--mud-palette-background-gray); --mud-palette-grey-default: var(--mud-palette-gray-default); --color-bg-page: var(--mud-palette-background); --color-bg-subtle: var(--mud-palette-background-grey); --color-bg-off-white: var(--mud-palette-surface); --color-bg-card: var(--mud-palette-surface); --color-bg-neutral: var(--mud-palette-action-disabled-background); --color-bg-muted: var(--mud-palette-background-grey); --color-bg-subtle-gray: var(--mud-palette-background-grey); --color-bg-success: var(--mud-palette-success-lighten); --color-bg-error: var(--mud-palette-error-lighten); --color-bg-info: var(--mud-palette-info-lighten); --color-bg-blue-soft: var(--mud-palette-info-lighten); --color-bg-hover: #f1f5f9; --color-bg-selected: #e5e5e5; /* valgt række i master/detail-lister */ --color-icon-box-bg: #ffffff; --color-bg-teal-soft: #e0f2f1; --color-bg-sky-light: #f0f9ff; /* ── Borders ── */ --color-border-card: var(--mud-palette-divider); --color-border-subtle: var(--mud-palette-divider-light); --color-border-input: var(--mud-palette-divider); --color-border-neutral: var(--mud-palette-divider); --color-border-light: var(--mud-palette-divider-light); --color-border-red-light:var(--mud-palette-error-lighten); --color-border-hover: #cbd5e1; --color-border-sky: #bae6fd; --color-border-section: #d1d1d1; /* sektionskanter, foreløbig kun på sagssiden */ /* ── Radii ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: var(--mud-default-borderradius); --radius-lg: 12px; --radius-xl: 16px; --radius-btn: 8px; --radius-pill: 999px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.08); --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.14); --shadow-segmented: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06); /* aktiv pille i segmented control */ /* ── Dropdown/menu surface (delt af MudMenu-popovers, .pill-select__dropdown m.fl.) ── */ --dropdown-bg: var(--mud-palette-background); /* #ffffff — var: --mud-palette-surface (#fafafa) */ --dropdown-border: 1px solid var(--mud-palette-divider); --dropdown-radius: var(--radius-lg); --dropdown-shadow: var(--shadow-popover); /* ── Kort-ramme (delt af alle side-kort; borderless pr. mentor-beslutning) ── "Borderless" = ét sted. Slå rammer til igen = ret denne ene linje. */ --card-border: none; /* ramme-værdi var: 1px solid var(--color-border-card) */ /* ── Focus rings ── */ --focus-ring-brand: 0 0 0 3px var(--color-brand-alpha-10); --focus-ring-brand-soft: 0 0 0 3px var(--color-brand-alpha-08); /* ── Transitions ── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Ikon-størrelser (rolle-baseret skala — se docs/design/icons.md) ── */ --icon-size-title: 20px; /* sektionstitler / CardHeader / kort-ikon-bokse */ --icon-size-sub: 15px; /* underbeskrivelse / metadata-linjer */ --icon-size-btn: 16px; /* ikon ved siden af tekst i knap (StartIcon/EndIcon); ikon-kun-knapper er 20px */ --icon-size-table: 14px; /* ikoner i tabelceller */ --icon-size-caret: 14px; /* dropdown-caret og andre passive felt-ikoner */ --icon-size-nav: 20px; /* segment / fane / nav */ --icon-size-edit: 11px; /* blyant ved siden af en redigerbar værdi (undtagelse, se icons.md) */ --icon-size-row-action: 18px; /* ikon-kun-knapper i en række på sagssiden: køber- og notehandlinger (undtagelse, se icons.md) */ /* ── Note-kategori piller (NoteEditorDialog; matcher NoteCategoryHelper.ColorKey) ── */ --note-pill-saelger: #e0507a; --note-pill-servicecenter: #2f9e8f; --note-pill-koebsaftale: #e0b400; --note-pill-fremvisning: #7c5fd6; --note-pill-koeber: #e07f3c; --note-pill-ehandel: #5fae5f; --note-pill-refusion: #4f8fe0; --note-pill-aitekst: #3ec4d6; /* ── Status Semantic Tokens ── */ --status-processing-bg: #ffedd5; --status-processing-text: var(--color-type-amber); --status-forsale-bg: var(--mud-palette-success-lighten); --status-forsale-text: var(--mud-palette-success-darken); --status-closed-bg: #d1fae5; --status-closed-text: #065f46; /* ── Side-specifikke tokens ── */ --color-bg-public-form: #f3f3f3; /* Baggrund på offentlige formularsider */ --color-icon-brand-bg: rgba(220,38,38,0.08); /* Ikon-baggrundsfarve (settings m.fl.) */ --color-info-text-dark: #0c4a6e; /* Mørk info-tekst (Forberedelsesskema) */ /* ── Bank-brandfarver (bruges som inline style-værdier i bankvalg) ── */ --color-bank-danske: #003755; --color-bank-nordea: #0000a0; --color-bank-jyske: #2d6a2e; --color-bank-nykredit: #004c46; --color-bank-sydbank: #1a1a6c; --color-bank-sparnord: #e06000; --color-bank-arbejdernes: #c0272d; --color-bank-handelsbanken: #005baa; --color-bank-saxo: #0a2540; --color-bank-ringkjobing: #00573f; --color-bank-laanOgspar: #8b1a2b; --color-bank-middelfart: #5c2d82; --color-bank-sparekassendanmark: #b8860b; --color-bank-vestjysk: #2e4057; --color-bank-coop: #00843d; --color-bank-lunar: #5a2dcc; --color-bank-banknordik: #003d6b; --color-bank-albank: #1e3a5f; --color-bank-moens: #4a7c59; --color-bank-kreditbanken: #7a4419; /* ════════════════════════════════════════════════ */ /* ══ DOMÆNE-SPECIFIKKE FARVER ══ */ /* ══ Disse hører IKKE til i MudTheme - ══ */ /* ══ de er forretningslogik (aktivitetstyper, ══ */ /* ══ kalender-slots, events). ══ */ /* ════════════════════════════════════════════════ */ /* ── Accent (filter chips, toggle) ── */ --color-accent: rgb(159, 192, 204); --color-accent-hover: rgb(141, 175, 188); /* ── Aktivitets- og tag-typefarver ── */ --color-type-teal: #0d9488; --color-type-blue: #2563eb; --color-type-orange: #ea580c; --color-type-cyan: #0891b2; --color-type-amber: #c2410c; --color-type-yellow: #eab308; --color-type-violet: #7c3aed; --color-type-indigo: #6366f1; /* ── Kalender: typografi ── Bevidst kompakte størrelser (kalender-densitet) der ligger udenfor MudTheme-skalaen. Indkapslet her ved typografi-harmoniseringen - INGEN størrelsesændring. Konsolideres evt. ved kalender-splittet. */ --cal-daynum-size: 0.9375rem; /* dagnumre + måned/år-labels */ --cal-microtext-size: 0.5625rem; /* agent-tags + dagnavne i ugevisning */ --cal-day-header-sm-size: 0.625rem; /* lille mini-kalenders dagheader */ /* ── Kalender: struktur-dimensioner (delt på tværs af side- + dialog-kalendere) ── */ --cal-grid-radius: 14px; /* grid-card hjørner */ --cal-gutter-width: 56px; /* tids-gutter + header-gutter bredde */ --cal-daynum-circle: 28px; /* today-cirkel diameter */ /* ── Kalender: tidsplan-slot farver ── */ --color-slot-grid-gap: #e0e0e0; --color-slot-today-bg: #e3f2fd; --color-slot-busy-bg: #ef9a9a; --color-slot-tentative-bg: #fef3c7; --color-slot-tentative-hover-bg: #fde68a; --color-slot-oof-bg: #ce93d8; --color-slot-working-elsewhere-bg: #a5d6a7; --color-slot-selected-bg: #42a5f5; --color-slot-selected-hover-bg: #1e88e5; /* ── Kalender: event-type baggrunde ── */ --color-event-moede-bg: #f0fdfa; --color-event-opfoelgning-bg:#fff7ed; --color-event-opkald-bg: #ecfeff; --color-event-aabenthus-bg: #faf5ff; --color-event-today-bg: #fffbeb; --color-event-weekend-bg: #fefaf9; /* ── Reconnect modal ── */ --color-reconnect-btn: #6b9ed2; --color-reconnect-btn-hover: #3b6ea2; --color-reconnect-anim: #0087ff; }