Komponentit· Teema
Teema
Värit, typografia, välit, pyöristykset, painikkeet, värimaailmat ja valmiit paletit, joista kaikki komponentit ottavat ulkoasunsa.
2 komponenttia
Teeman arvot
Jokainen osio ja lohko ottaa värinsä, fonttinsa, välinsä ja pyöristyksensä näistä arvoista. Kun sivuston ulkoasua muutetaan editorissa, muuttuvat nämä, ja kaikki komponentit seuraavat. Taulukko näyttää valitun teeman arvot.
Värit
| Nimi | Arvo | Näyte |
|---|---|---|
--color-accent | var(--color-primary) | |
--color-background | #ffffff | |
--color-border | #d5d9e0 | |
--color-danger | #b3261e | |
--color-info | var(--color-primary) | |
--color-muted | #5b6470 | |
--color-onDanger | #ffffff | |
--color-onInfo | var(--color-onPrimary) | |
--color-onPrimary | #ffffff | |
--color-onSuccess | #ffffff | |
--color-onWarning | #ffffff | |
--color-primary | #0055ff | |
--color-secondary | #1f2937 | |
--color-success | #15803d | |
--color-surface | #f4f5f7 | |
--color-text | #111111 | |
--color-warning | #b45309 |
Typografia
| Nimi | Arvo | Näyte |
|---|---|---|
--font-body | Inter, system-ui, sans-serif | Aa Ää Öö |
--font-heading | Inter, system-ui, sans-serif | Aa Ää Öö |
--font-letterSpacing | 0em | |
--font-lineHeight | 1.65 | |
--font-scale | 1 | |
--font-weight | 400 |
Välit
| Nimi | Arvo | Näyte |
|---|---|---|
--space-lg | 32px | |
--space-md | 16px | |
--space-mdLg | 24px | |
--space-section | 4rem | |
--space-sectionGap | 2rem | |
--space-sm | 8px | |
--space-xl | 4rem | |
--space-xs | 4px |
Pyöristykset
| Nimi | Arvo | Näyte |
|---|---|---|
--radius-full | 9999px | |
--radius-md | 8px | |
--radius-sm | 4px | |
--radius-xl | 24px |
Painikkeet
| Nimi | Arvo | Näyte |
|---|---|---|
--button-paddingX | 30px | |
--button-paddingY | 14px | |
--button-radius | 8px | |
--button-style | solid | |
--button-weight | 400 |
Kortit
| Nimi | Arvo | Näyte |
|---|---|---|
--card-border | 1px | |
--card-radius | 16px | |
--card-shadow | var(--shadow-card) |
Varjot
| Nimi | Arvo | Näyte |
|---|---|---|
--shadow-card | 0 2px 8px rgba(0,0,0,0.1) | |
--shadow-lg | 0 8px 24px rgba(0,0,0,0.12) | |
--shadow-md | 0 2px 8px rgba(0,0,0,0.1) | |
--shadow-none | none | |
--shadow-sm | 0 1px 2px rgba(0,0,0,0.06) | |
--shadow-xl | 0 16px 48px rgba(0,0,0,0.16) |
Värimaailmat
| Nimi | Arvo | Näyte |
|---|---|---|
--scheme-accent-background | var(--color-primary) | |
--scheme-accent-border | color-mix(in srgb, var(--color-onPrimary) 30%, transparent) | |
--scheme-accent-muted | color-mix(in srgb, var(--color-onPrimary) 80%, transparent) | |
--scheme-accent-primary | var(--color-onPrimary) | |
--scheme-accent-surface | color-mix(in srgb, var(--color-onPrimary) 15%, var(--color-primary)) | |
--scheme-accent-text | var(--color-onPrimary) | |
--scheme-dark-background | var(--color-text) | |
--scheme-dark-border | color-mix(in srgb, var(--color-background) 25%, transparent) | |
--scheme-dark-muted | color-mix(in srgb, var(--color-background) 75%, transparent) | |
--scheme-dark-primary | var(--color-background) | |
--scheme-dark-surface | color-mix(in srgb, var(--color-background) 12%, var(--color-text)) | |
--scheme-dark-text | var(--color-background) | |
--scheme-light-background | var(--color-background) | |
--scheme-light-border | var(--color-border) | |
--scheme-light-muted | var(--color-muted) | |
--scheme-light-primary | var(--color-primary) | |
--scheme-light-surface | var(--color-surface) | |
--scheme-light-text | var(--color-text) | |
--scheme-muted-background | var(--color-surface) | |
--scheme-muted-border | var(--color-border) | |
--scheme-muted-muted | var(--color-muted) | |
--scheme-muted-primary | var(--color-primary) | |
--scheme-muted-surface | var(--color-background) | |
--scheme-muted-text | var(--color-text) |
Valmiit paletit
Editorin Ulkoasu-paneelin ja gallerian ”Kokeile eri värejä” -valinnan paletit. Jokainen täyttää WCAG AA -kontrastin kaikissa värimaailmoissa.
- Pohjoinen metsä vaalea
- Merituuli vaalea
- Hiekkaranta vaalea
- Tiili ja betoni vaalea
- Mustikka vaalea
- Pastelli vaalea
- Yö ja kulta tumma
- Mustavalkoinen vaalea
- Graafinen musta tumma
- Revontulet tumma
- Savusauna tumma
Värimaailmat
Teema schemes
Osion värimaailma (vaalea, hillitty, tumma, korostus) vaihtaa osion taustan ja tekstin, ja painikkeet ja linkit seuraavat. Kontrasti tarkistetaan jokaisessa.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Typografia
Teema typography
Otsikot H1–H4, leipäteksti, linkki, luettelo ja lainaus teeman fonteilla ja kooilla.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.