Färger

Generiska färger

Översikten och Årsrapporten använder en gemensam ColorContext för att säkerställa en konsekvent färganvändning genom hela lösningen. Fördjupad statistik kommer att kopplas till samma lösning i kommande version.

Färgdefinitionerna består dels av VGR-specifika färger (t.ex. för text och badges), dels av färgskalor som används för visualiseringar. Dessa färger utgår från VGR's designsystem, men det är i nuläget inte fullt beslutat eller dokumenterat hur de ska användas generellt (i VGR's designsystem), eller hur de är organiserade inom exempelvis kategoriska och sekventiella färger.

Detta är inte en permanent lösning. Målsättningen är att på sikt integrera färgerna i det globala Tailwind-temat. Eftersom färgerna delvis avviker från befintligt tema och har ett specifikt användningsområde, hanteras de för närvarande separat. Dialog med förvaltare behöver initieras för att möjliggöra en långsiktig lösning.

Utgångsläge

Import:


// Komponenter
const { charts, text, badge } = useColorContext().colorTheme;
// Funktioner
const { charts, text, badge } = COLOR_MAP;

Typning:


export type ColorMap = {
  charts: Charts;
  text: TextColors;
  badge: {
    success: ColorPair;
    warning: ColorPair;
    alarm: ColorPair;
    neutral: ColorPair;
  };
};

Badges

Import:

const { success, warning, alarm, neutral } = useColorContext().colorTheme.badge;

Typning:

type ColorPair = {
  background: HexColor;
  foreground: HexColor;
};

Neutral

#F3F0EF

#6B5B55

Success

#E0F7E1

#2C6B2E

Warning

#FFECB3

#8D4E18

Alarm

#FFECEC

#C00000

Textfärger

Import:

const { black, gray, link } = useColorContext().colorTheme.text;

Typning:

type TextColors = {
  black: HexColor;
  gray: readonly HexColor[];
  link: HexColor;
};

black

#121212

gray[0]

#737373

gray[1]

#636363

link

#005B89

Visualiseringar

Import:

const { base, reference, status, palettes } = useColorContext().colorTheme.charts;

Typning:

type Charts = {
  base: HexColor;
  reference: HexColor;
  status: {
    success: HexColor,
    warning: HexColor,
    alarm: HexColor
  },
  palettes: Palettes;
};

type Palettes = {
  statusSequential: StatusSequential;
  sequential: readonly HexColor[];
  categorical: readonly HexColor[];
};

type StatusSequential = {
  success: readonly HexColor[];
  warning: readonly HexColor[];
  alarm: readonly HexColor[];
};

Bas- och referensfärg

base

#116875

reference

#fc5930

Statusfärger - status

success

#43A447

warning

#CF7E1F

alarm

#C00000

Kategoriska färger - palettes.categorical

[0]

#116875

[1]

#FC5930

[2]

#6F45BB

[3]

#A48C83

[4]

#89163B

[5]

#051F23

[6]

#9575CD

[7]

#E02460

[8]

#AC641C

[9]

#1A9FB3

[10]

#6D3912

[11]

#3A2168

Sekventiella färger - palettes.sequential

[0]

#1A9FB3

[1]

#158192

[2]

#116875

[3]

#0D4E58

[4]

#09363C

[5]

#051F23

Sekventiella statusfärger - palettes.statusSequential

success

[0]

#43A447

[1]

#37863A

[2]

#2C6B2E

[3]

#215023

[4]

#173718

[5]

#0D200E

warning

[0]

#CF7E1F

[1]

#AC641C

[2]

#8D4E18

[3]

#6D3912

[4]

#4C240E

[5]

#2B1708

alarm

[0]

#FF5353

[1]

#E63C37

[2]

#C00000

[3]

#930000

[4]

#690000

[5]

#410000

Registerspecifika bakgrunder

De registerspecifika färgerna baseras på respektive registers befintliga färgtema, framför allt mainColor och boxColor.

I vissa fall har mainColor justerats (mörkats ned) för att uppfylla WCAG-krav (AA) i kombination med vit text. Det innebär att den definierade mainColor i denna lösning kan skilja sig något från registrets ursprungliga färg.

boxColor har delats upp i två varianter: light och dark. Detta för att bättre fungera tillsammans med den befintliga designen och skapa en visuell balans i gränssnittet. Ursprunglig boxColor motsvarar alltid antingen light eller dark, beroende på färgens kontrast. Den kompletterande varianten har därefter beräknats för att skapa ett harmoniskt och konsekvent färgsystem.

Import:

const { boxColorShades, mainColor } = useColorContext().colorTheme; 
const { light, dark } = boxColorShades

Typning:

interface RegisterColorObject extends ColorMap {
  shortName: string;
  mainColor: string;
  boxColorShades: { light: string; dark: string };
}

bipsy

boxColorShades

light

#f0f5fa

17.08:1

5.48:1

6.70:1

dark

#d9e4f0

14.55:1

4.66:1

5.71:1

mainColor

#4b6b8c

5.55:1

Test

boa

boxColorShades

light

#ecf6f9

17.05:1

5.47:1

6.69:1

dark

#d0e6ed

14.47:1

4.64:1

5.68:1

mainColor

#245d71

7.29:1

Test

brimp

boxColorShades

light

#faeeee

16.53:1

5.30:1

6.48:1

dark

#f1dada

14.08:1

4.51:1

5.52:1

mainColor

#c9494a

4.63:1

Test

fot

boxColorShades

light

#edf1f8

16.54:1

5.30:1

6.49:1

dark

#d8e0ed

14.10:1

4.52:1

5.53:1

mainColor

#00497c

9.36:1

Test

hnsb

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

hnsv

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

boxColorShades

light

#ebf6f8

17.01:1

5.46:1

6.67:1

dark

#cfe6eb

14.43:1

4.63:1

5.66:1

mainColor

#258092

4.58:1

Test

kranio

boxColorShades

light

#e5f5eb

16.59:1

5.32:1

6.51:1

dark

#cae6d4

14.08:1

4.51:1

5.52:1

mainColor

#567167

5.31:1

Test

lvr

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#667a7a

4.54:1

Test

munh

boxColorShades

light

#f0f5fa

17.08:1

5.48:1

6.70:1

dark

#d9e4f0

14.55:1

4.66:1

5.71:1

mainColor

#4b6b8c

5.55:1

Test

myr

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

ndr

boxColorShades

light

#f0f1f4

16.59:1

5.32:1

6.51:1

dark

#dddfe6

14.07:1

4.51:1

5.52:1

mainColor

#00488d

9.08:1

Test

nkh

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

nrok

boxColorShades

light

#edf1f8

16.54:1

5.30:1

6.49:1

dark

#d8e0ed

14.10:1

4.52:1

5.53:1

mainColor

#0063c1

5.91:1

Test

oto

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

qregpv

boxColorShades

light

#e1f4ff

16.58:1

5.32:1

6.50:1

dark

#cfe2ed

14.05:1

4.51:1

5.51:1

mainColor

#005c95

7.08:1

Test

rattspsyk

boxColorShades

light

#f0f5fa

17.08:1

5.48:1

6.70:1

dark

#d9e4f0

14.55:1

4.66:1

5.71:1

mainColor

#4b6b8c

5.55:1

Test

boxColorShades

light

#f3f0ff

16.70:1

5.36:1

6.55:1

dark

#e1ddf2

14.12:1

4.53:1

5.54:1

mainColor

#4d3d64

9.69:1

Test

riksat

boxColorShades

light

#f0f5fa

17.08:1

5.48:1

6.70:1

dark

#d9e4f0

14.55:1

4.66:1

5.71:1

mainColor

#3e70a3

5.18:1

Test

sar

boxColorShades

light

#edf4f5

16.82:1

5.40:1

6.60:1

dark

#d2e3e6

14.16:1

4.54:1

5.55:1

mainColor

#368091

4.51:1

Test

sep

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

sesar

boxColorShades

light

#edf1f8

16.54:1

5.30:1

6.49:1

dark

#d8e0ed

14.10:1

4.52:1

5.53:1

mainColor

#00528f

8.07:1

Test

sfr

boxColorShades

light

#e8f3fb

16.63:1

5.33:1

6.52:1

dark

#d1e2ee

14.12:1

4.53:1

5.54:1

mainColor

#005b91

7.23:1

Test

shlr

boxColorShades

light

#e7f3f5

16.54:1

5.30:1

6.49:1

dark

#cde3e6

14.03:1

4.50:1

5.50:1

mainColor

#3a6b72

5.96:1

Test

siber

boxColorShades

light

#f0f5fa

17.08:1

5.48:1

6.70:1

dark

#d9e4f0

14.55:1

4.66:1

5.71:1

mainColor

#4b6b8c

5.55:1

Test

slr

boxColorShades

light

#edf4f5

16.82:1

5.40:1

6.60:1

dark

#d2e3e6

14.16:1

4.54:1

5.55:1

mainColor

#368091

4.51:1

Test

spoq

boxColorShades

light

#edf1fc

16.58:1

5.32:1

6.50:1

dark

#d8dff1

14.05:1

4.50:1

5.51:1

mainColor

#3d3889

9.88:1

Test

strax

boxColorShades

light

#edf1f8

16.54:1

5.30:1

6.49:1

dark

#d8e0ed

14.10:1

4.52:1

5.53:1

mainColor

#0063c1

5.91:1

Test

svereh

boxColorShades

light

#faeeee

16.53:1

5.30:1

6.48:1

dark

#f1dada

14.08:1

4.51:1

5.52:1

mainColor

#852728

9.06:1

Test

sweaps

boxColorShades

light

#edf1f8

16.54:1

5.30:1

6.49:1

dark

#d8e0ed

14.10:1

4.52:1

5.53:1

mainColor

#0063c1

5.91:1

Test

ton

boxColorShades

light

#f2f5f5

17.09:1

5.48:1

6.70:1

dark

#dce5e5

14.61:1

4.69:1

5.73:1

mainColor

#24676b

6.51:1

Test

TESTER