Sass-variabler
Alle fargene er tilgjengelige som et Sass map i scss/abstracts/varaiables/_colors.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;
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);
}
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);
}
CSS-hjelpeklasser
Fargene er også tilgjengelige som hjelpeklasser i CSS. Disse kan brukes direkte i HTML. De forskjellige fargene er tilgjengelige som klasser med prefikset pkt-color-bg-, pkt-color-txt- og pkt-color-border- etterfulgt av fargenavnet. Disse klassene kan brukes for både brandfarger og semantiske farger. For de semantiske fargene ser muligens klassene litt rare ut, men dette er et resultat av at alt er automatisk generert ut fra alle tilgjengelige farger.
<div class="pkt-color-bg-surface-default-faded-green">
<p class="pkt-color-txt-text-body-dark">Dette er en tekst</p>
<aside class="pkt-color-border-border-green">Sidetekst</aside>
</div>
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");
}