nav-styled-component-theme v1.0.8

NAV styled components theme

This package exports NAV's core themes from LESS files to JSON objects.

To be used together with styled-component's theme as shown below.

It returns:

• variabler - Raw nav-frontend-core/less/_variabler.less in JSON format
• theme - variabler plus NAV theme colors
• themeHighContrast - variabler plus NAV theme colors in high contrast

Theme color:

• @main-font-color: @navMorkGra;
• @main-background-color: @white;
• @main-disabled-color: @navGra40;
• @main-interactive-color: @navBla;
• @main-focus-color: @fokusFarge;
• @main-success-color: @navGronn;
• @main-error-color: @redError;
• @main-warning-color: @navOransje;
• @main-hover-color: @navLysBla;

High contrast theme colors are:

• @main-font-color: @white;
• @main-background-color: @black;
• @main-disabled-color: @navMorkGra;
• @main-interactive-color: @navOransje;
• @main-focus-color: @orangeFocus;
• @main-success-color: @navGronn;
• @main-error-color: #BA3A26;
• @main-warning-color: @navOransje;
• @main-hover-color: @navLysBla;

sample of theme:

    "navRod": "#C30000",
    "navOransje": "#FF9100",
    "navLimeGronn": "#A2AD00",
    "navGronn": "#06893A",
    "navLilla": "#634689",
    "navDypBla": "#005B82",
    "navBla": "#0067C5",
    "navLysBla": "#66CBEC",
    "navMorkGra": "#3E3832",
    "navGra80": "#59514B",
    "navGra60": "#78706A",
    "navGra40": "#B7B1A9",
    "navGra20": "#C6C2BF",
    "navLysGra": "#E9E7E7",
    "fokusFarge": "#254a6c",
    "orangeFocus": "#FFBD66",
    "redError": "#BA3A26",
    "white": "#FFFFFF",
    "grayBackground": "#E9E7E7",
    "grayIcon": "#B7B1A9",
    "grayModia": "#333333",
    "grayInactive": "#78706A",
    "pinkErrorBg": "#F3E3E3",
    "navGronnLighten20": "#37a061",
    "navGronnLighten40": "#69b888",
    "navGronnLighten60": "#9bcfb0",
    "navGronnLighten80": "#cde7d7",
    "navGronnDarken20": "#117838",
    "navGronnDarken40": "#1c6836",
    "navGronnDarken60": "#275835",
    "navGronnDarken80": "#324833",
    "navLimeGronnLighten20": "#b4bd33",
    "navLimeGronnLighten40": "#c7cd66",
    "navLimeGronnLighten60": "#d9de99",
    "navLimeGronnLighten80": "#eceecc",
    "navLimeGronnDarken20": "#8e950a",
    "navLimeGronnDarken40": "#7a7e14",
    "navLimeGronnDarken60": "#66661e",
    "navLimeGronnDarken80": "#524f28",
    "navLysBlaLighten20": "#84d5ef",
    "navLysBlaLighten40": "#a3dff3",
    "navLysBlaLighten60": "#c1eaf7",
    "navLysBlaLighten80": "#e0f4fb",
    "navLysBlaDarken20": "#5eadc6",
    "navLysBlaDarken40": "#5690a1",
    "navLysBlaDarken60": "#4e727c",
    "navLysBlaDarken80": "#465557",
    "navBlaLighten20": "#3385d0",
    "navBlaLighten40": "#66a3dc",
    "navBlaLighten60": "#99c2e7",
    "navBlaLighten80": "#cce0f3",
    "navBlaDarken20": "#0c5da7",
    "navBlaDarken40": "#18548a",
    "navBlaDarken60": "#254a6c",
    "navBlaDarken80": "#31414f",
    "navDypBlaLighten20": "#337b9b",
    "navDypBlaLighten40": "#669cb4",
    "navDypBlaLighten60": "#99bdcd",
    "navDypBlaLighten80": "#ccdee6",
    "navDypBlaDarken20": "#0c5472",
    "navDypBlaDarken40": "#184d62",
    "navDypBlaDarken60": "#254652",
    "navDypBlaDarken80": "#313f42",
    "navLillaLighten20": "#826ba0",
    "navLillaLighten40": "#a190b8",
    "navLillaLighten60": "#c0b5cf",
    "navLillaLighten80": "#dfdae7",
    "navLillaDarken20": "#5b4377",
    "navLillaDarken40": "#544066",
    "navLillaDarken60": "#4c3d54",
    "navLillaDarken80": "#453a43",
    "navRodLighten20": "#cf3333",
    "navRodLighten40": "#db6666",
    "navRodLighten60": "#e79999",
    "navRodLighten80": "#f3cccc",
    "navRodDarken20": "#a80b0a",
    "navRodDarken40": "#8d1614",
    "navRodDarken60": "#73211e",
    "navRodDarken80": "#582c28",
    "navOransjeLighten20": "#ffa733",
    "navOransjeLighten40": "#ffbd66",
    "navOransjeLighten60": "#ffd399",
    "navOransjeLighten80": "#ffe9cc",
    "navOransjeDarken20": "#d87f0a",
    "navOransjeDarken40": "#b16d14",
    "navOransjeDarken60": "#8b5b1e",
    "navOransjeDarken80": "#644928",
    "orangeFocusLighten20": "#ffca84",
    "orangeFocusLighten40": "#ffd7a3",
    "orangeFocusLighten60": "#ffe4c1",
    "orangeFocusLighten80": "#fff1e0",
    "orangeFocusDarken20": "#d8a25b",
    "orangeFocusDarken40": "#b18751",
    "orangeFocusDarken60": "#8b6d46",
    "orangeFocusDarken80": "#64523c",
    "redErrorLighten20": "#c76151",
    "redErrorLighten40": "#d5887c",
    "redErrorLighten60": "#e3b0a8",
    "redErrorLighten80": "#f1d7d3",
    "redErrorDarken20": "#a13928",
    "redErrorDarken40": "#88392a",
    "redErrorDarken60": "#6f382d",
    "redErrorDarken80": "#56382f",
    "screen-sm": "768px",
    "screen-sm-min": "768px",
    "screen-tablet": "768px",
    "screen-md": "992px",
    "screen-md-min": "992px",
    "screen-desktop": "992px",
    "screen-lg": "1200px",
    "screen-lg-min": "1200px",
    "screen-lg-desktop": "1200px",
    "screen-xs-max": "(@screen-sm-min - 1)",
    "screen-sm-max": "(@screen-md-min - 1)",
    "screen-md-max": "(@screen-lg-min - 1)",
    "container-tablet": "(720px + @grid-gutter-width)",
    "container-sm": "(720px + @grid-gutter-width)",
    "container-desktop": "(940px + @grid-gutter-width)",
    "container-md": "(940px + @grid-gutter-width)",
    "container-large-desktop": "(1140px + @grid-gutter-width)",
    "container-lg": "(1140px + @grid-gutter-width)",
    "grid-columns": "12",
    "grid-gutter-width": "16px",
    "grid-float-breakpoint": "768px",
    "grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)",
    "padding-base-vertical": "6px",
    "padding-base-horizontal": "12px",
    "padding-large-vertical": "10px",
    "padding-large-horizontal": "16px",
    "padding-small-vertical": "5px",
    "padding-small-horizontal": "10px",
    "padding-xs-vertical": "1px",
    "padding-xs-horizontal": "5px",
    "line-height-large": "1.3333333",
    "line-height-small": "1.5",
    "border-radius-small": "2px",
    "border-radius-base": "4px",
    "border-radius-large": "6px",
    "black": "#000000",
    "pension-orange": "rgb(255, 167, 51)",
    "pension-orange-alpha": "rgba(255, 167, 51, 0.5)",
    "pension-orange-alpha-80": "rgba(255, 167, 51, 0.8)",
    "main-font-color": "#3E3832",
    "main-background-color": "#FFFFFF",
    "main-background-other-color": "#E9E7E7",
    "main-disabled-color": "#B7B1A9",
    "main-interactive-color": "#0067C5",
    "main-focus-color": "#254a6c",
    "main-success-color": "#06893A",
    "main-error-color": "#BA3A26",
    "main-warning-color": "#FF9100",
    "main-hover-color": "#66CBEC",
    "type": "theme"

How to use it

import { variabler, theme, themeHighContrast } from 'nav-styled-component-theme'
import styled, { ThemeProvider } from 'styled-components'

const highContrast : boolean = true

const CustomDiv = styled.div`
  color: ${({theme}: any) => theme['main-font-color']};
  background-color: ${({theme}: any) => theme['main-background-color']};
`

<ThemeProvider theme={highContrast ? themeHighContrast : theme}>
  <CustomDiv>
    {your component goes here}
  </CustomDiv>
</ThemeProvider>