Komponenter· Tema
Tema
Färger, typografi, avstånd, rundningar, knappar, färgscheman och färdiga paletter som alla komponenter hämtar sitt utseende från.
2 komponenter
Temats värden
Varje sektion och block hämtar sina färger, typsnitt, avstånd och rundningar från dessa värden. När webbplatsens utseende ändras i redigeraren ändras dessa, och alla komponenter följer med. Tabellen visar det valda temats värden.
Färger
| Namn | Värde | Prov |
|---|---|---|
--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 |
Typografi
| Namn | Värde | Prov |
|---|---|---|
--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 |
Avstånd
| Namn | Värde | Prov |
|---|---|---|
--space-lg | 32px | |
--space-md | 16px | |
--space-mdLg | 24px | |
--space-section | 4rem | |
--space-sectionGap | 2rem | |
--space-sm | 8px | |
--space-xl | 4rem | |
--space-xs | 4px |
Rundningar
| Namn | Värde | Prov |
|---|---|---|
--radius-full | 9999px | |
--radius-md | 8px | |
--radius-sm | 4px | |
--radius-xl | 24px |
Knappar
| Namn | Värde | Prov |
|---|---|---|
--button-paddingX | 30px | |
--button-paddingY | 14px | |
--button-radius | 8px | |
--button-style | solid | |
--button-weight | 400 |
Kort
| Namn | Värde | Prov |
|---|---|---|
--card-border | 1px | |
--card-radius | 16px | |
--card-shadow | var(--shadow-card) |
Skuggor
| Namn | Värde | Prov |
|---|---|---|
--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) |
Färgscheman
| Namn | Värde | Prov |
|---|---|---|
--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) |
Färdiga paletter
Paletterna i redigerarens panel Utseende och gallerins ”Prova andra färger”. Var och en klarar WCAG AA-kontrast i alla färgscheman.
- Nordlig skog ljus
- Havsbris ljus
- Sandstrand ljus
- Tegel och betong ljus
- Blåbär ljus
- Pastell ljus
- Natt och guld mörk
- Svartvitt ljus
- Grafiskt svart mörk
- Norrsken mörk
- Rökbastu mörk
Färgscheman
Tema schemes
En sektions färgschema (ljust, dämpat, mörkt, accent) ändrar bakgrund och text, och knappar och länkar följer med. Kontrasten kontrolleras i varje.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Typografi
Tema typography
Rubriker H1–H4, brödtext, länk, lista och citat med temats typsnitt och storlekar.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.