Farger

Variabler

Alle fargene er tilgjengelige som et Sass map i _settings.scss.

$pkt-colors: (
  // Blue
  brand-blue-100: #f1fdff,
  brand-blue-200: #e5fcff,
  brand-blue-300: #d1f9ff,
  brand-blue-500: #b3f5ff,
  brand-blue-1000: #6fe9ff,
  brand-dark-blue-700: #6a698b,
  brand-dark-blue-1000: #2a2859,
  brand-warm-blue-1000: #1f42aa,
  // Green
  brand-green-400: #c7fde9,
  brand-green-1000: #43f8b6,
  brand-light-green-400: #e5ffe6,
  brand-light-green-1000: #c7f6c9,
  brand-dark-green-1000: #034b45,

  // Yellow
  brand-yellow-1000: #f9c66b,
  brand-yellow-500: #ffe7bc,

  // Red
  brand-red-100: #fff2f1,
  brand-red-400: #ffdfdc,
  brand-red-600: #ffb4ac,
  brand-red-1000: #ff8274,

  // Beige
  brand-light-beige-1000: #f8f0dd,
  brand-dark-beige-1000: #d0bfae,

  // Neutrals
  brand-neutrals-white: #ffffff,
  brand-neutrals-100: #f9f9f9,
  brand-neutrals-200: #f2f2f2,
  brand-neutrals-1000: #2c2c2c,
  brand-neutrals-black: #000000,
  brand-neutrals-transparent: transparent,

  // Purple
  brand-purple-1000: #e0adff,

  // Grays
  grays-gray-100: #e6e6e6,
  grays-gray-200: #cccccc,
  grays-gray-300: #b3b3b3,
  grays-gray-400: #9a9a9a,
  grays-gray-500: #808080,
  grays-gray-600: #666666,
  grays-gray-700: #4d4d4d,
  grays-gray-800: #333333,
  grays-gray-900: #1a1a1a,
  grays-gray-1000: #2c2c2c
) !default;

CSS-variabler

Disse fargene gjøres også tilgjengelig i frontend med et prefix --pkt-color, som CSS custom properties.

:root {
  --pkt-color-brand-dark-beige-1000: #d0bfae;
  --pkt-color-brand-light-beige-1000: #f8f0dd;
  --pkt-color-brand-blue-1000: #6fe9ff;
}

/* Brukes enkelt der du ønsker */
.eksempel {
  background: var(--pkt-color-brand-dark-beige-1000);
}

Semantiske variabler

De semantiske fargene beskriver hva variablene er ment å brukes til. Fargenavnet er bygget opp av tre ledd: UI-element, situasjon, variant/tilstand.

Første ledd refererer til elementet som fargelegges: background, Surface.

• Background: Som regel bakgrunnen på hele siden (HTML body).
• Surface: Bakgrunnsfargen til en element, som for eksempel et panel, en knapp, en seksjon, etc.
• Border: Fargen til en ramme (stroke).
• Text/Icon: Fargen på tekst og ikoner.

Dette er våre semantiske variabler:

$pkt-semantic-colors: (
  // Background
  background-card: map-get($pkt-colors, brand-neutrals-white),
  background-default: map-get($pkt-colors, brand-neutrals-white),
  background-subtle: map-get($pkt-colors, brand-neutrals-100),
  background-transparent: map-get($pkt-colors, brand-neutrals-transparent),
  // Borders
  border-default: map-get($pkt-colors, brand-dark-blue-1000),
  border-beige: map-get($pkt-colors, brand-dark-beige-1000),
  border-blue: map-get($pkt-colors, brand-blue-1000),
  border-gray: map-get($pkt-colors, grays-gray-200),
  border-green: map-get($pkt-colors, brand-green-1000),
  border-light-beige: map-get($pkt-colors, brand-light-beige-1000),
  border-red: map-get($pkt-colors, brand-red-1000),
  border-subtle: map-get($pkt-colors, brand-neutrals-200),
  border-yellow: map-get($pkt-colors, brand-yellow-1000),
  border-states-active: map-get($pkt-colors, brand-warm-blue-1000),
  border-states-disabled: map-get($pkt-colors, grays-gray-300),
  border-states-focus: map-get($pkt-colors, brand-purple-1000),
  border-states-hover: map-get($pkt-colors, brand-warm-blue-1000),
  // Surface
  surface-default-faded-green: map-get($pkt-colors, brand-light-green-400),
  surface-default-faded-red: map-get($pkt-colors, brand-red-400),
  surface-default-gray: map-get($pkt-colors, brand-neutrals-100),
  surface-default-light-beige: map-get($pkt-colors, brand-light-beige-1000),
  surface-default-light-blue: map-get($pkt-colors, brand-blue-300),
  surface-default-light-green: map-get($pkt-colors, brand-green-400),
  surface-default-red: map-get($pkt-colors, brand-red-600),
  surface-default-yellow: map-get($pkt-colors, brand-yellow-500),
  surface-strong-beige: map-get($pkt-colors, brand-dark-beige-1000),
  surface-strong-blue: map-get($pkt-colors, brand-blue-1000),
  surface-strong-dark-blue: map-get($pkt-colors, brand-dark-blue-1000),
  surface-strong-dark-green: map-get($pkt-colors, brand-dark-green-1000),
  surface-strong-gray: map-get($pkt-colors, brand-neutrals-200),
  surface-strong-green: map-get($pkt-colors, brand-green-1000),
  surface-strong-light-green: map-get($pkt-colors, brand-light-green-1000),
  surface-strong-red: map-get($pkt-colors, brand-red-1000),
  surface-strong-yellow: map-get($pkt-colors, brand-yellow-1000),
  surface-subtle-light-blue: map-get($pkt-colors, brand-blue-200),
  surface-subtle-light-red: map-get($pkt-colors, brand-red-100),
  surface-subtle-pale-blue: map-get($pkt-colors, brand-blue-100),
  surface-subtle-white: map-get($pkt-colors, brand-neutrals-white),
  // Text
  text-body-dark: map-get($pkt-colors, brand-dark-blue-1000),
  text-body-default: map-get($pkt-colors, brand-dark-blue-1000),
  text-body-light: map-get($pkt-colors, brand-neutrals-white),
  text-placeholder: map-get($pkt-colors, grays-gray-600),
  text-action-disabled: map-get($pkt-colors, grays-gray-600),
  text-action-active: map-get($pkt-colors, brand-warm-blue-1000),
  text-action-hover: map-get($pkt-colors, brand-warm-blue-1000),
  text-action-normal: map-get($pkt-colors, brand-dark-blue-1000)
) !default;

Eksempel bruk:

/* Brukes enkelt der du ønsker */
.eksempel-bakgrunn {
  background: var(--pkt-color-background-default);
}

SCSS funksjon

Du kan også ta i bruk farge-stilene slik:

@use "sass:map";
@use "@oslokommune/punkt-css/scss/abstracts/variables";

.wrapper {
  background-color: map.get(variables.$pkt-colors, "brand-red-1000");
}