/* * Lumo -> Aura token-brug (branch release/1.4.0.aura) * ===================================================== * * Aura (Vaadin 25) is gebouwd op de nieuwe styling-API (--vaadin-* / --aura-*) en * definieert GEEN enkele --lumo-* variabele. Semsuite's eigen styling leunt daar * juist zwaar op: ~60 unieke --lumo-* tokens, verdeeld over 11 CSS-bestanden en * ~500 inline styles in Java-views. Zonder brug vallen die allemaal terug op * "unset" -> geen kleur, geen ruimte, geen radius. * * Dit bestand definieert die --lumo-* tokens opnieuw, uitgedrukt IN Aura-tokens. * Netto: alle bestaande semsuite-CSS en inline styles blijven werken en krijgen * automatisch Aura's palet, typografie, hoeken en schaduwen -- inclusief Aura's * light/dark-gedrag, want alle Aura-tokens gebruiken light-dark(). * * Dit is een COMPATIBILITEITSLAAG, geen eindstation. Wordt Aura definitief, dan * kunnen de --lumo-*-verwijzingen stapsgewijs vervangen worden door de Aura-tokens * waar ze hieronder naar wijzen, en kan dit bestand krimpen tot niets. * * Wordt alleen geladen als Aura actief is (zie SemsuiteApplication). * Bewust :root (specificiteit 0-1-0) i.p.v. Aura's :where(:root) (0-0-0), zodat * semsuite-CSS deze waarden altijd nog kan overschrijven. */ :root { /* ---------- Accent (Lumo "primary") ---------- */ --lumo-primary-color: var(--aura-accent-color); --lumo-primary-text-color: var(--aura-accent-text-color); --lumo-primary-contrast-color: var(--aura-accent-contrast-color); --lumo-primary-color-10pct: var(--aura-accent-surface); --lumo-primary-color-50pct: color-mix(in srgb, var(--aura-accent-color) 50%, transparent); /* ---------- Oppervlakken ---------- * --lumo-base-color is in semsuite altijd een kaart-/paneelachtergrond. Aura's * --aura-surface-color is precies dat (en is wat vaadin-card zelf gebruikt): * half-transparant over de getinte app-achtergrond. Ziet dat er te "wazig" uit, * vervang dan door var(--aura-surface-color-solid) voor dekkende panelen. */ --lumo-base-color: var(--aura-surface-color); --lumo-tint: var(--aura-surface-color-solid); --lumo-shade: var(--aura-neutral); /* ---------- Tekst ---------- * ⚠️ NIET var(--vaadin-text-color) gebruiken (en evenmin -secondary, -disabled of * --vaadin-border-color). Dat zijn REGISTERED custom properties: ze computen tot één * concrete kleur op het element waar ze gelden, en op :root -- waar deze brug staat -- * is dat zwart. Omdat var()-verwijzingen in een custom property worden ingevuld op het * element van de DECLARATIE (hier :root), niet op de plek van gebruik, zou elk token * hieronder dan zwart worden. In light mode valt dat niet op (tekst hoort daar toch * bijna zwart te zijn), in dark mode wordt alles onleesbaar. * * --aura-neutral is Aura's neutrale tekstkleur als ONGEREGISTREERDE token-stream: die * erft als tekst door en resolvet z'n light-dark() pas op de plek van gebruik -- dus * overal correct, ook buiten de app-layout (login, dialogen, notificaties). * Percentages volgen Aura's eigen ramp bij contrast-level 1. */ --lumo-contrast: var(--aura-neutral); --lumo-body-text-color: var(--aura-neutral); --lumo-header-text-color: var(--aura-neutral); --lumo-secondary-text-color: color-mix(in oklch, var(--aura-neutral) 65%, transparent); --lumo-tertiary-text-color: color-mix(in oklch, var(--aura-neutral) 50%, transparent); --lumo-disabled-text-color: color-mix(in oklch, var(--aura-neutral) 33%, transparent); /* ---------- Contrast-ramp ---------- * 5 en 10% hangen aan Aura's eigen container-tokens (die zijn wél ongeregistreerd), * zodat onze vlakken exact matchen met wat Aura's componenten tekenen. De rest is een * color-mix-ramp op --aura-neutral -- om dezelfde reden als hierboven. */ --lumo-contrast-5pct: var(--vaadin-background-container); --lumo-contrast-10pct: var(--vaadin-background-container-strong); --lumo-contrast-20pct: color-mix(in srgb, var(--aura-neutral) 20%, transparent); --lumo-contrast-30pct: color-mix(in srgb, var(--aura-neutral) 30%, transparent); --lumo-contrast-40pct: color-mix(in srgb, var(--aura-neutral) 40%, transparent); --lumo-contrast-50pct: color-mix(in srgb, var(--aura-neutral) 50%, transparent); --lumo-contrast-60pct: color-mix(in srgb, var(--aura-neutral) 60%, transparent); --lumo-contrast-70pct: color-mix(in srgb, var(--aura-neutral) 70%, transparent); --lumo-contrast-80pct: color-mix(in srgb, var(--aura-neutral) 80%, transparent); --lumo-contrast-90pct: color-mix(in srgb, var(--aura-neutral) 90%, transparent); --lumo-shade-5pct: var(--vaadin-background-container); --lumo-shade-10pct: var(--vaadin-background-container-strong); --lumo-shade-20pct: color-mix(in srgb, var(--aura-neutral) 20%, transparent); /* ---------- Statuskleuren ---------- * Aura levert per kleur twee varianten: de volle kleur (voor vlakken) en een * -text-variant die op de achtergrond leesbaar is. Dat sluit aan op Lumo's * *-color / *-text-color-paren. */ --lumo-error-color: var(--aura-red); --lumo-error-text-color: var(--aura-red-text); --lumo-error-contrast-color: #fff; --lumo-error-color-10pct: color-mix(in srgb, var(--aura-red) 12%, transparent); --lumo-error-color-50pct: color-mix(in srgb, var(--aura-red) 50%, transparent); --lumo-success-color: var(--aura-green); --lumo-success-text-color: var(--aura-green-text); --lumo-success-contrast-color: #fff; --lumo-success-color-10pct: color-mix(in srgb, var(--aura-green) 12%, transparent); /* Aura's geel is licht (oklch L=0.89), ook in dark mode -> donkere contrastkleur. */ --lumo-warning-color: var(--aura-yellow); --lumo-warning-text-color: var(--aura-yellow-text); --lumo-warning-contrast-color: #000; --lumo-warning-color-10pct: color-mix(in srgb, var(--aura-yellow) 20%, transparent); /* ---------- Ruimte ---------- * Aura's schaal is compacter dan Lumo's (4/8/12/16/24 px t.o.v. 4/8/16/24/40 px). * We nemen die bewust over: dit is Aura's dichtheid, en onze eigen ruimte zou * anders uit de pas lopen met de padding van Aura's eigen componenten. * Te krap bevonden? Vervang gap-{xs,s,m,l,xl} dan door de ruimere reeks * gap-{xs,s,l,xl} + calc(var(--vaadin-gap-xl) * 1.5). */ --lumo-space-xs: var(--vaadin-gap-xs); --lumo-space-s: var(--vaadin-gap-s); --lumo-space-m: var(--vaadin-gap-m); --lumo-space-l: var(--vaadin-gap-l); --lumo-space-xl: var(--vaadin-gap-xl); /* ---------- Hoeken ---------- */ --lumo-border-radius-s: var(--vaadin-radius-s); --lumo-border-radius-m: var(--vaadin-radius-m); --lumo-border-radius-l: var(--vaadin-radius-l); --lumo-border-radius: var(--vaadin-radius-m); /* ---------- Typografie ---------- * Aura zet de basis op 14px (Lumo: 16px) en levert xs..xl. De Lumo-uitschieters * xxs/xxl/xxxl leiden we daarvan af. */ --lumo-font-family: var(--aura-font-family); --lumo-font-size-xxs: calc(var(--aura-font-size-xs) * 0.92); --lumo-font-size-xs: var(--aura-font-size-xs); --lumo-font-size-s: var(--aura-font-size-s); --lumo-font-size-m: var(--aura-font-size-m); --lumo-font-size-l: var(--aura-font-size-l); --lumo-font-size-xl: var(--aura-font-size-xl); --lumo-font-size-xxl: calc(var(--aura-font-size-xl) * 1.3); --lumo-font-size-xxxl: calc(var(--aura-font-size-xl) * 1.75); /* Let op: Lumo's line-heights zijn eenheidsloze factoren, Aura's --aura-line-height-* * zijn absolute lengtes. Alleen de factor --aura-base-line-height (1.4) is * uitwisselbaar; s en l houden we eenheidsloos. */ --lumo-line-height-s: 1.25; --lumo-line-height-m: var(--aura-base-line-height); --lumo-line-height-l: 1.625; /* ---------- Schaduw ---------- */ --lumo-box-shadow-xs: var(--aura-shadow-xs); --lumo-box-shadow-s: var(--aura-shadow-s); --lumo-box-shadow-m: var(--aura-shadow-m); --lumo-box-shadow-l: var(--aura-shadow-m); --lumo-box-shadow-xl: var(--aura-shadow-m); /* ---------- Component- en icoonmaten ---------- * Aura kent geen generieke maat-tokens; deze blijven op Lumo's absolute waarden. */ --lumo-size-xs: 1.625rem; --lumo-size-s: 1.875rem; --lumo-size-m: 2.25rem; --lumo-size-l: 2.75rem; --lumo-size-xl: 3.5rem; --lumo-icon-size-s: 1.25em; --lumo-icon-size-m: 1.5em; --lumo-icon-size-l: 2.25em; /* ---------- Licht/donker ---------- * Aura kent geen theme="dark": al z'n tokens zijn light-dark(), en die volgen puur de * CSS-property color-scheme. We koppelen de Vaadin-conventie (theme="dark" op ) * daar hieronder zelf aan, zodat dezelfde toggle ook onder Lumo blijft werken. * Standaard licht -- niet "volg het OS" -- zodat de app niet ongevraagd omklapt bij * een gebruiker met dark mode aan. */ color-scheme: light; } :root[theme~="dark"] { color-scheme: dark; } /* ============================================================================ * Element-conventies die Lumo wél levert en Aura niet * ============================================================================ * Tot hier gaat deze brug alleen over tokens. Maar Lumo stylet ook twee kale HTML-elementen, * en semsuite's CSS en views leunen daarop. Aura laat ze ongemoeid, waardoor de browser-default * terugkomt -- en die is een stuk luider dan wat we gewend zijn. */ /*
is de menu-separator (menu.xml heeft er 15) en de scheiding in het user-menu. Lumo maakt * er een 1px-haarlijn van; zonder styling valt de browser terug op border-style:inset -- een * dikke grijze 3D-lijn die veel te veel aandacht trekt. Zelfde regel als Lumo, maar via de * gebrugde tokens, dus met Aura's kleur en ruimte. */ hr { align-self: stretch; display: block; height: 1px; border: 0; padding: 0; margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2); background-color: var(--lumo-contrast-10pct); } /* Lumo: links zijn niet onderstreept, alleen bij hover. Aura stylet helemaal niet, dus komt * de browser-default (altijd onderstreept) terug -- zichtbaar aan de "SEM Suite"-titel in de * sidebar. Onze eigen CSS gaat van Lumo's conventie uit (die zet zelfs text-decoration:none op * :hover), waardoor het zonder deze regel precies omgekeerd werkt. */ a { text-decoration: none; } a:where(:any-link):hover { text-decoration: underline; }