Om kategorien
Formål
Samlet fargekategori for hele nettstedet (/, turer/ og slides/), bygget rundt én delt aksentfamilie i oklch() og tema-nøytrale flate- og tekstfarger med light-dark().
Merk: Hardregel: skriv egne fargedefinisjoner i farger.css med oklch() via light-dark() - ikke systemfargenøkkelord som canvas/canvasText (unntak: forced-colors: active-blokker, der spec anbefaler å skrive dem rått). Lokale var(--token, reserve-verdi)-fallbacker skal speile tokenets faktiske verdi ord for ord.
Egner seg for
- Farger som brukes minst to steder, eller som inngår i den delte aksent-, kategori- eller diagramfamilien.
- Tema-bevisste flater og tekstfarger som skal fungere likt i lyst og mørkt tema via
light-dark().
Egner seg ikke for
- Systemfarger i
forced-colors, somCanvasogHighlight; de skal skrives direkte, ikke tokeniseres. - Bevisst faste, lokalt begrunnede unntak fra den delte paletten.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--border-color | color-mix(in srgb, currentColor 50%, transparent) | Standard nøytral kantlinjefarge. Bevisst ikke splittet i egne hue/kroma/lysthet-deler fordi currentColor allerede gjør den tema-bevisst og holder den koblet til omgivende tekstfarge. |
--text-color-hover | color-mix(in srgb, currentColor 10%, transparent) | Svak hover-toning for tekstlenker og tekstknapper. Bygger på currentColor slik at effekten følger den aktuelle forgrunnsfargen uten egen mørk-modus-logikk. |
--background-color-hover | color-mix(in srgb, currentColor 15%, transparent) | Litt sterkere hover-toning for knapper og interaktive rader enn tekstvarianten, fortsatt avledet fra currentColor for å bevare tema-bevisst oppførsel. |
--scrim-color | color-mix(in srgb, var(--color-surface-text) 40%, transparent) | Tema-bevisst scrim bak modaler og ::backdrop. Ved å blande inn den mørk/lys-bevisste color-surface-text-tokenen blir sløret automatisk mørkere i lyst tema og lysere i mørkt tema, uten å bruke et rått systemfargenøkkelord. |
--color-surface | light-dark(oklch(100% 0 0), oklch(20% 0 0)) | Standard bakgrunn for sider, dialoger og kort. Egendefinert lys/mørk-oklch-par i stedet for systemfargenøkkelordet canvas, slik at fargen alltid er en ekte, tallfestet designtoken - i forced-colors brukes fortsatt rå Canvas direkte etter spec-anbefalt praksis. |
--color-surface-text | light-dark(oklch(13% 0 0), oklch(93% 0 0)) | Standard tekstfarge på color-surface. Egendefinert lys/mørk-oklch-par i stedet for systemfargenøkkelordet canvasText - nær, men ikke helt, svart/hvit for å unngå unødvendig hard kontrast, i tråd med vanlig praksis for lesbar brødtekst. |
--color-surface-inverse | var(--color-surface-text) | Bakgrunn for fylte eller inverterte flater, som filled-varianten av lm-link-button. Alias til surface-text - samme tonepar, brukt som bakgrunn i stedet for tekst, for en enkel og robust invertert kontrastmodell. |
--color-surface-inverse-text | var(--color-surface) | Tekstfarge på color-surface-inverse. Alias til surface - sammen med den inverterte bakgrunnen gir dette en enkel og robust kontrastmodell. |
--color-surface-muted | color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-text) 8%) | Svakt tonet panel- og kortbakgrunn. Blander de to egendefinerte oklch-baserte overflatetokenene i stedet for de rå systemfargenøkkelordene canvas/canvasText, slik at tonen fortsatt følger aktivt tema automatisk. |
--color-focus-ring | var(--color-surface-text) | Fokusringfarge som må være synlig uansett elementets egen bakgrunn. currentColor ville feile på inverterte komponenter, derfor brukes den nøytrale, oklch-baserte overflatetekstfargen i stedet for det rå systemfargenøkkelordet canvasText. |
--color-accent-hue | 255 | Hue-komponenten for hele aksent-, kategori- og diagramfamilien - en rolig Apple-systemBlue-basert blåtone. Holdes separat slik at hele familien kan roteres uten å regne om ferdige farger manuelt. |
--color-accent-chroma | 0.14 | Delt kroma for aksentfamilien. Tonet ned fra tidligere 0.21 for en mer restrained, Apple-aktig ro - blått som fortsatt er tydelig identifiserbart, men uten glorete metning. Ved å isolere metningen i egen token kan hele familien tones opp eller ned uten å endre hue eller lysthet. |
--color-accent-lightness-light | 58% | Lysthet for aksentfamilien i lyst tema. Lett dempet fra 60% for å beholde tilstrekkelig kontrast mot lyst overflatetema når kromaen er senket. |
--color-accent-lightness-dark | 68% | Lysthet for aksentfamilien i mørkt tema. Løftet fra 62% for å bevare lesbarhet på mørk overflate når kromaen er senket. |
--color-accent | light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)) | Delt aksentfarge for blå hovedaksent, tonet til en rolig Apple-systemBlue-basert blåtone med bevisst redusert metning. Selve lys/mørk-paret lagres eksplisitt, mens hue/kroma/lysthet-tokenene over beholdes som dokumenterte byggeklosser for familiejusteringer. |
--color-fare-base | oklch(58% 0.16 25) | Rødlig grunnfarge for destruktive handlinger, advarsler og feiltekst. Tonet ned fra tidligere 65%/0.23 for et roligere, Apple-restrained statusuttrykk - fortsatt tydelig rødt, men uten skrikende metning. Definert som egen basisfarge slik at flere komponenter kan peke til samme kilde. |
--color-suksess-base | oklch(62% 0.12 150) | Grønnlig grunnfarge for vellykkede handlinger og bekreftelser. Tonet ned fra tidligere 73%/0.19 for å matche resten av det roligere statusuttrykket - avdempet, sikker grønn i stedet for lys neon. Samler all suksess-semantikk rundt én stabil kilde. |
--color-fare | var(--color-fare-base) | Direkte alias til fare-base for steder som trenger den rene statusfargen uten videre blanding. Aliaset gjør forholdet eksplisitt i tokenkilden. |
--color-suksess | var(--color-suksess-base) | Direkte alias til suksess-base for komponenter som trenger den rene bekreftelsesfargen. |
--color-feil | color-mix(in srgb, currentColor 75%, var(--color-fare) 25%) | Ferdig blandet feiltekstfarge som låner litt av fare-fargen uten å miste koblingen til gjeldende tekstfarge. Dermed henger feiltekst og destruktive signaler visuelt sammen. |
--caption-overlay-gradient | linear-gradient(to top, oklch(0% 0 0 / 65%), transparent) | Mørk gradient bak bildetekst som ligger over vilkårlige bilder. Dette er med vilje ikke tema-bevisst, fordi oppgaven er å sikre hvit tekst over bildepiksler, ikke over canvas. |
--caption-overlay-color | oklch(0% 0 0 / 65%) | Flat ensfarget variant av samme mørke scrim som overlay-gradient, brukt når en gradient ikke passer. |
--caption-overlay-text-color | oklch(100% 0 0) | Lys tekstfarge over bildescrimene. Holdes fast og tema-uavhengig for å bevare lesbarhet over mørke bildeoverlegg. |
--chart-color-1 | light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)) | Første diagramfarge - samme rolige Apple-systemBlue-baserte blåtone som aksentfargen. Universell fargekilde for diagrammer som trenger deterministiske indeksfarger. |
--chart-color-2 | light-dark(oklch(62% 0.12 150), oklch(70% 0.12 150)) | Andre diagramfarge - en dempet grønn i samme rolige familie som resten av paletten. |
--chart-color-3 | light-dark(oklch(68% 0.13 55), oklch(75% 0.13 55)) | Tredje diagramfarge - en varm, rolig oransje/gyllen tone som gir tydelig kontrast til blå og grønn uten å skrike. |
--chart-color-4 | light-dark(oklch(58% 0.13 305), oklch(70% 0.13 305)) | Fjerde diagramfarge - en avdempet lilla som runder ut den kalde siden av paletten. |
--chart-color-5 | light-dark(oklch(64% 0.11 210), oklch(72% 0.11 210)) | Femte diagramfarge - en rolig cyan/teal som ligger mellom blå og grønn i familien. |
--chart-color-6 | light-dark(oklch(66% 0.14 15), oklch(74% 0.14 15)) | Sjette diagramfarge - en dempet rosa/koral som fullfører den seksdelte familien uten å konkurrere med fare-fargen. |
--category-color-one | var(--chart-color-1) | Første kategorifarge, direkte koblet til chart.color-1 for å holde tidslinje- og diagramfarger i samme familie. |
--category-color-two | var(--chart-color-3) | Andre kategorifarge, peker til tredje diagramfarge for å gi større visuell avstand mellom kategoriene. |
--category-color-three | var(--chart-color-5) | Tredje kategorifarge, peker til femte diagramfarge for å fullføre tre tydelig adskilte kategoriidentiteter uten egen oppskrift. |
Detaljer
- Systemfarger i
forced-colorstokeniseres bevisst ikke; skrivCanvas,CanvasText,ButtonText,HighlightogMarkdirekte. --color-accent-hueog--color-accent-chromadeler hue og kroma for hele aksent-, kategori- og diagramfamilien, så én endring forplanter seg videre.--chart-color-1…--chart-color-6roterer hue i 60°-steg og er felles kilde for<lm-chart-pie>ognth-child-fallback i nettlesere utensibling-index()ogsibling-count().--category-color-one/two/threebygger på--chart-color-1/-3/-5for faste kategori-farger i samme familie.