Färger

Sundsvalls designsystem bygger på en bred färgpalett av primitiver (rena kulörskalor i 10 steg, 50–900) och semantiska teman som mappar primitiverna mot meningsbärande färger för olika kontexter. Värden på den här sidan läses live från src/data/tokens.json – som i sin tur genereras från @sk-web-gui/theme. Inget är hårdkodat.

Gör inte detta:

/* En parallell implementation. Driver isär från upstream. */
:root {
  --color-light-vattjom-surface-primary-default: #005595;
  --color-light-juniskar-surface-primary-default: #a90074;
}

Gör detta i stället: installera @sk-web-gui/core – paketet registrerar samma variabler i :root automatiskt och uppdateras med npm update.

npm install @sk-web-gui/core

// I din rot eller layout
import '@sk-web-gui/core/dist/index.css';

Då har du tillgång till alla --color-light-*, --space-*, --font-size-* och --radius-* runtime, inklusive dark-mode-stöd.

Primitiver

Detta är basskalorna. Använd dem för att bygga semantik, inte direkt i komponentkod. Token-namn: var(--color-primitives-<kulör>-<steg>).

Gray

Gray 50

#fafafa

Gray 100

#f0f0f0

Gray 200

#e5e5e5

Gray 300

#b7b7ba

Gray 400

#a2a2a7

Gray 500

#68686d

Gray 600

#51515c

Gray 700

#444450

Gray 800

#2f2f3c

Gray 900

#1f1f25

Blue

Blue 50

#f0f5f9

Blue 100

#e1ecf4

Blue 200

#cfe0ec

Blue 300

#b5cfe3

Blue 400

#73acd6

Blue 500

#4293d1

Blue 600

#1472b8

Blue 700

#005595

Blue 800

#004c85

Blue 900

#004070

Green

Green 50

#f1f9f5

Green 100

#e1efe9

Green 200

#c9e4d7

Green 300

#aad4bf

Green 400

#65b88f

Green 500

#16a25e

Green 600

#12874e

Green 700

#00733b

Green 800

#00592d

Green 900

#004222

Purple

Purple 50

#f6f1f9

Purple 100

#efe8f3

Purple 200

#e4d8e9

Purple 300

#d6c4de

Purple 400

#ba90ce

Purple 500

#8c42ae

Purple 600

#722796

Purple 700

#5b1f78

Purple 800

#4d1a65

Purple 900

#2e103d

Pink

Pink 50

#faeff8

Pink 100

#f6e4f2

Pink 200

#f1d5ea

Pink 300

#e9bee0

Pink 400

#df83cd

Pink 500

#d558ae

Pink 600

#bf1d8c

Pink 700

#a90074

Pink 800

#8a005e

Pink 900

#6b004a

Orange

Orange 50

#fff5eb

Orange 100

#ffe7d1

Orange 200

#ffd3a8

Orange 300

#ffc68f

Orange 400

#ffa34d

Orange 500

#ff840f

Orange 600

#db6900

Orange 700

#b94e18

Orange 800

#8c3b12

Orange 900

#5c2100

Red

Red 50

#ffebeb

Red 100

#fee2e2

Red 200

#fcd4d4

Red 300

#fbc1c1

Red 400

#f78282

Red 500

#f44e4e

Red 600

#d62e2e

Red 700

#b92424

Red 800

#971a1a

Red 900

#6d0303

Varumärkesteman

Sundsvall har fyra varumärkesteman uppkallade efter platser i kommunen. Varje tema har samma struktur: background.100/200/300, surface.primary.default/hover, surface.accent.default/hover, text.default/primary/secondary. Komponenterna i @sk-web-gui/react tar dessa som color-prop, t.ex. <Button color="vattjom">.

Vattjom

Primärt blått varumärkestema (baserat på primitives.blue). Används för standardprimärknappar, länkar och fokusringar.

background100

#f0f5f9

background200

#e1ecf4

background300

#b5cfe3

surface.primary.default

#005595

surface.primary.hover

#004070

surface.accent.default

#cfe0ec

surface.accent.hover

#e1ecf4

text.default

#004c85

text.primary

#004c85

text.secondary

#e1ecf4

Använd token-namn, inte hex: var(--color-light-vattjom-surface-primary-default) osv.

Grönsta

Grönt tema (baserat på primitives.green). För framgångsindikationer, miljö- och hållbarhetsbudskap.

background100

#f1f9f5

background200

#c9e4d7

background300

#aad4bf

surface.primary.default

#00733b

surface.primary.hover

#00592d

surface.accent.default

#c9e4d7

surface.accent.hover

#e1efe9

text.default

#00592d

text.primary

#00592d

text.secondary

#e1efe9

Använd token-namn, inte hex: var(--color-light-gronsta-surface-primary-default) osv.

Juniskär

Magenta/rosa tema (baserat på primitives.pink). För framträdande, expressiva ytor – använd sparsamt.

background100

#faeff8

background200

#f6e4f2

background300

#e9bee0

surface.primary.default

#a90074

surface.primary.hover

#8a005e

surface.accent.default

#f1d5ea

surface.accent.hover

#f6e4f2

text.default

#8a005e

text.primary

#8a005e

text.secondary

#f6e4f2

Använd token-namn, inte hex: var(--color-light-juniskar-surface-primary-default) osv.

Björnstigen

Lila tema (baserat på primitives.purple). För att differentiera sekundära flöden från huvudbudskapet.

background100

#f6f1f9

background200

#efe8f3

background300

#d6c4de

surface.primary.default

#5b1f78

surface.primary.hover

#4d1a65

surface.accent.default

#e4d8e9

surface.accent.hover

#efe8f3

text.default

#4d1a65

text.primary

#4d1a65

text.secondary

#efe8f3

Använd token-namn, inte hex: var(--color-light-bjornstigen-surface-primary-default) osv.

Status

Funktionella färger för meddelanden. Samma struktur som varumärkesteman.

Success

Bekräftelse, klart, godkänd.

background100

#f1f9f5

background200

#e1efe9

background300

#aad4bf

surface.primary.default

#12874e

surface.primary.hover

#00733b

surface.accent.default

#c9e4d7

surface.accent.hover

#e1efe9

text.default

#00592d

text.primary

#00592d

text.secondary

#e1efe9

default

#00592d

Använd token-namn, inte hex: var(--color-light-success-surface-primary-default) osv.

Warning

Varning som inte blockerar – något behöver uppmärksammas.

background100

#fff5eb

background200

#ffe7d1

background300

#ffc68f

surface.primary.default

#db6900

surface.primary.hover

#b94e18

surface.accent.default

#ffd3a8

surface.accent.hover

#ffe7d1

text.default

#8c3b12

text.primary

#8c3b12

text.secondary

#ffffff

default

#8c3b12

Använd token-namn, inte hex: var(--color-light-warning-surface-primary-default) osv.

Error

Fel, blockerande validering.

background100

#ffebeb

background200

#fee2e2

background300

#fbc1c1

surface.primary.default

#d62e2e

surface.primary.hover

#b92424

surface.accent.default

#fbc1c1

surface.accent.hover

#fcd4d4

text.default

#971a1a

text.primary

#971a1a

text.secondary

#ffffff

default

#971a1a

Använd token-namn, inte hex: var(--color-light-error-surface-primary-default) osv.

Info

Neutralt informativt budskap.

background100

#f0f5f9

background200

#e1ecf4

background300

#b5cfe3

surface.primary.default

#1472b8

surface.primary.hover

#005595

surface.accent.default

#cfe0ec

surface.accent.hover

#e1ecf4

text.default

#004c85

text.primary

#004c85

text.secondary

#e1ecf4

default

#004c85

Använd token-namn, inte hex: var(--color-light-info-surface-primary-default) osv.

I koden – korrekta variabelnamn

En AI-assistent som inte läser den här sidan brukar gissa fel på två sätt: hitta på --color-semantic-*-variabler (finns inte) eller hårdkoda hex. Här är facit för de vanligaste fallen.

Fokusring (WCAG-krav)

:focus-visible {
  outline: 2px solid var(--color-light-ring);
  outline-offset: 2px;
}

Variabeln heter --color-light-ring (motsvarande --color-dark-ring för mörkt läge). Inte --color-semantic-focus, --color-focus, --focus-ring — sådana finns inte.

Alerts och statusmeddelanden

Använd den semantiska familjen för det status-meddelande som är aktuellt. Strukturen är identisk med varumärkesteman:

/* Error alert */
.alert-error {
  background: var(--color-light-error-surface-accent-default);   /* ljus rosa bakgrund */
  border-left-color: var(--color-light-error-surface-primary-default); /* mörkröd kant */
  color: var(--color-light-error-text-default);                  /* mörkröd text */
}

/* Warning */
.alert-warning {
  background: var(--color-light-warning-surface-accent-default);
  border-left-color: var(--color-light-warning-surface-primary-default);
  color: var(--color-light-warning-text-default);
}
/* analogt för success och info */

Inte --color-semantic-error, --color-error, eller hårdkodad hex. Du får ingen dark mode och ingen varumärkesuppdatering om du gissar.

Primärknapp på varumärkestema

.btn-primary {
  background: var(--color-light-vattjom-surface-primary-default);
  color: var(--color-light-vattjom-text-secondary);
}
.btn-primary:hover {
  background: var(--color-light-vattjom-surface-primary-hover);
}

Byt vattjom mot gronsta / juniskar / bjornstigen för andra teman. Reactanvändare slipper detta helt: <Button color="vattjom" variant="primary"> ger samma resultat.

Vanliga AI-gissningar som inte finns

Felaktigt (vanlig gissning)	Det rätta
`--color-semantic-focus`	`--color-light-ring`
`--color-semantic-error`	`--color-light-error-surface-primary-default`
`--color-semantic-warning`	`--color-light-warning-surface-primary-default`
`--color-semantic-success`	`--color-light-success-surface-primary-default`
`--color-semantic-info`	`--color-light-info-surface-primary-default`
`--color-brand-primary`	`--color-light-vattjom-surface-primary-default`
`--color-text-on-brand`	`--color-light-vattjom-text-secondary` (text på primary)
`--space-md`, `--space-lg`	Numeriska: `--space-16` (1.6rem), `--space-24`, osv.

Mörkt läge

Stilguiden stödjer även dark mode. Alla teman ovan har motsvarande ColorDark*-tokens med samma struktur. På den här portalen visas bara light-tokens; för dark, se packages/theme/src/colors.ts.

Källa

Färgerna definieras i packages/theme/src/colors.ts. Importeras i runtime via @sk-web-gui/theme. CSS-variabler genereras av Style Dictionary i den här portalen vid npm run tokens:sync.