New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@navikt/ds-tokens

Package Overview
Dependencies
Maintainers
1
Versions
382
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@navikt/ds-tokens - npm Package Compare versions

Comparing version 0.6.3 to 0.7.0

240

dist/tokens-cjs.js
/**
* Do not edit directly
* Generated on Wed, 17 Nov 2021 14:24:59 GMT
* Generated on Tue, 07 Dec 2021 15:09:16 GMT
*/
module.exports = {
"NavdsSpacing1": "0.25rem",
"NavdsSpacing2": "0.5rem",
"NavdsSpacing3": "0.75rem",
"NavdsSpacing4": "1rem",
"NavdsSpacing5": "1.25rem",
"NavdsSpacing6": "1.5rem",
"NavdsSpacing7": "1.75rem",
"NavdsSpacing8": "2rem",
"NavdsSpacing9": "2.25rem",
"NavdsSpacing10": "2.5rem",
"NavdsSpacing11": "2.75rem",
"NavdsSpacing12": "3rem",
"NavdsSpacing14": "3.5rem",
"NavdsSpacing16": "4rem",
"NavdsSpacing18": "4.5rem",
"NavdsSpacing20": "5rem",
"NavdsSpacing24": "6rem",
"NavdsSpacing32": "8rem",
"NavdsFontFamily": "\"Source Sans Pro\", Arial, sans-serif",
"NavdsFontLineHeightHeading2xlarge": "3.25rem",
"NavdsFontLineHeightHeadingXlarge": "2.5rem",
"NavdsFontLineHeightHeadingLarge": "2.25rem",
"NavdsFontLineHeightHeadingMedium": "2rem",
"NavdsFontLineHeightHeadingSmall": "1.75rem",
"NavdsFontLineHeightHeadingXsmall": "1.5rem",
"NavdsFontLineHeightXlarge": "1.75rem",
"NavdsFontLineHeightLarge": "1.5rem",
"NavdsFontLineHeightMedium": "1.25rem",
"NavdsFontSizeHeading2xlarge": "2.5rem",
"NavdsFontSizeHeadingXlarge": "2rem",
"NavdsFontSizeHeadingLarge": "1.75rem",
"NavdsFontSizeHeadingMedium": "1.5rem",
"NavdsFontSizeHeadingSmall": "1.25rem",
"NavdsFontSizeHeadingXsmall": "1.125rem",
"NavdsFontSizeXlarge": "1.25rem",
"NavdsFontSizeLarge": "1.125rem",
"NavdsFontSizeMedium": "1rem",
"NavdsFontSizeSmall": "0.875rem",
"NavdsFontWeightBold": "600",
"NavdsFontWeightRegular": "400",
"NavdsShadowFocus": "0 0 0 3px rgba(0, 52, 125, 1)",
"NavdsShadowFocusInverted": "0 0 0 3px rgba(153, 195, 255, 1)",
"NavdsShadowPopover": "0 2px 4px 0 rgba(201, 201, 201, 1)",
"NavdsShadowCard": "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)",
"NavdsZIndexModal": 2000,
"NavdsZIndexPopover": 1000,
"NavdsZIndexFocus": 10,
"NavdsGlobalColorBlue50": "rgba(230, 240, 255, 1)",

@@ -115,7 +126,8 @@ "NavdsGlobalColorBlue100": "rgba(204, 225, 255, 1)",

"NavdsGlobalColorWhite": "rgba(255, 255, 255, 1)",
"NavdsSemanticColorBorderDefault": "rgba(106, 106, 106, 1)",
"NavdsSemanticColorBorderInverted": "rgba(201, 201, 201, 1)",
"NavdsSemanticColorBorderMuted": "rgba(160, 160, 160, 1)",
"NavdsSemanticColorCanvasBackgroundDefault": "rgba(241, 241, 241, 1)",
"NavdsSemanticColorBorder": "rgba(106, 106, 106, 1)",
"NavdsSemanticColorCanvasBackgroundInverted": "rgba(38, 38, 38, 1)",
"NavdsSemanticColorCanvasBackgroundLight": "rgba(255, 255, 255, 1)",
"NavdsSemanticColorCanvasBackground": "rgba(241, 241, 241, 1)",
"NavdsSemanticColorComponentBackgroundAlternate": "rgba(247, 247, 247, 1)",

@@ -138,170 +150,34 @@ "NavdsSemanticColorComponentBackgroundInverted": "rgba(38, 38, 38, 1)",

"NavdsSemanticColorFeedbackWarningIcon": "rgba(255, 145, 0, 1)",
"NavdsSemanticColorFocusInverted": "rgba(153, 195, 255, 1)",
"NavdsSemanticColorFocus": "rgba(0, 52, 125, 1)",
"NavdsSemanticColorInteractionDangerDefault": "rgba(186, 58, 38, 1)",
"NavdsSemanticColorInteractionDangerHover": "rgba(163, 42, 23, 1)",
"NavdsSemanticColorInteractionDangerSelected": "rgba(136, 29, 12, 1)",
"NavdsSemanticColorInteractionPrimaryDefault": "rgba(0, 103, 197, 1)",
"NavdsSemanticColorInteractionDanger": "rgba(186, 58, 38, 1)",
"NavdsSemanticColorInteractionPrimaryHoverSubtle": "rgba(230, 240, 255, 1)",
"NavdsSemanticColorInteractionPrimaryHover": "rgba(0, 86, 180, 1)",
"NavdsSemanticColorInteractionPrimarySelected": "rgba(0, 91, 130, 1)",
"NavdsSemanticColorTextDefault": "rgba(38, 38, 38, 1)",
"NavdsSemanticColorInteractionPrimary": "rgba(0, 103, 197, 1)",
"NavdsSemanticColorLinkVisited": "rgba(99, 70, 137, 1)",
"NavdsSemanticColorLink": "rgba(0, 103, 197, 1)",
"NavdsSemanticColorTextInverted": "rgba(255, 255, 255, 1)",
"NavdsSemanticColorTextLink": "rgba(0, 103, 197, 1)",
"NavdsSemanticColorTextMuted": "rgba(106, 106, 106, 1)",
"NavdsColorWhite": "#ffffff",
"NavdsColorDarkgray": "#262626",
"NavdsColorGray10": "#F1F1F1",
"NavdsColorGray20": "#C9C9C9",
"NavdsColorGray40": "#A0A0A0",
"NavdsColorGray60": "#6A6A6A",
"NavdsColorGray80": "#4F4F4F",
"NavdsColorGray90": "#262626",
"NavdsColorBlue10": "#CCE1FF",
"NavdsColorBlue20": "#99C3FF",
"NavdsColorBlue30": "#66A5F4",
"NavdsColorBlue40": "#3386E0",
"NavdsColorBlue50": "#0067c5",
"NavdsColorBlue60": "#0056B4",
"NavdsColorBlue70": "#00459C",
"NavdsColorBlue80": "#00347D",
"NavdsColorBlue90": "#002252",
"NavdsColorDeepblue10": "#CCE2F0",
"NavdsColorDeepblue20": "#99C4DD",
"NavdsColorDeepblue30": "#66A3C4",
"NavdsColorDeepblue40": "#3380A5",
"NavdsColorDeepblue50": "#005B82",
"NavdsColorDeepblue60": "#005077",
"NavdsColorDeepblue70": "#004367",
"NavdsColorDeepblue80": "#003453",
"NavdsColorDeepblue90": "#00243A",
"NavdsColorLightblue10": "#D8F9FF",
"NavdsColorLightblue20": "#B5F1FF",
"NavdsColorLightblue30": "#97E6FF",
"NavdsColorLightblue40": "#7CDAF8",
"NavdsColorLightblue50": "#66CBEC",
"NavdsColorLightblue60": "#4CADCD",
"NavdsColorLightblue70": "#368DA8",
"NavdsColorLightblue80": "#236B7D",
"NavdsColorLightblue90": "#134852",
"NavdsColorOrange10": "#FFECCC",
"NavdsColorOrange20": "#FFD799",
"NavdsColorOrange30": "#FFC166",
"NavdsColorOrange40": "#FFAA33",
"NavdsColorOrange50": "#FF9100",
"NavdsColorOrange60": "#D47B00",
"NavdsColorOrange70": "#A86400",
"NavdsColorOrange80": "#7D4C00",
"NavdsColorOrange90": "#523300",
"NavdsColorGreen10": "#CCF1D6",
"NavdsColorGreen20": "#99DEAD",
"NavdsColorGreen30": "#66C786",
"NavdsColorGreen40": "#33AA5F",
"NavdsColorGreen50": "#06893A",
"NavdsColorGreen60": "#007C2E",
"NavdsColorGreen70": "#006A23",
"NavdsColorGreen80": "#005519",
"NavdsColorGreen90": "#003B0F",
"NavdsColorRed10": "#F9D2CC",
"NavdsColorRed20": "#EFA89D",
"NavdsColorRed30": "#E18071",
"NavdsColorRed40": "#D05C4A",
"NavdsColorRed50": "#BA3A26",
"NavdsColorRed60": "#A32A17",
"NavdsColorRed70": "#881D0C",
"NavdsColorRed80": "#6A1204",
"NavdsColorRed90": "#480900",
"NavdsColorPurple10": "#E0D8E9",
"NavdsColorPurple20": "#C0B2D2",
"NavdsColorPurple30": "#A18DBB",
"NavdsColorPurple40": "#8269A2",
"NavdsColorPurple50": "#634689",
"NavdsColorPurple60": "#523874",
"NavdsColorPurple70": "#412B5D",
"NavdsColorPurple80": "#301F46",
"NavdsColorPurple90": "#1F142F",
"NavdsColorLimegreen10": "#F9FCCC",
"NavdsColorLimegreen20": "#ECF399",
"NavdsColorLimegreen30": "#D9E366",
"NavdsColorLimegreen40": "#C1CB33",
"NavdsColorLimegreen50": "#a2ad00",
"NavdsColorLimegreen60": "#939E00",
"NavdsColorLimegreen70": "#7F8900",
"NavdsColorLimegreen80": "#666E00",
"NavdsColorLimegreen90": "#474E00",
"NavdsColorDisabled": "#A0A0A0",
"NavdsColorActionDefault": "#0067c5",
"NavdsColorActionHover": "#0056B4",
"NavdsColorActionActive": "#005B82",
"NavdsColorDangerDefault": "#BA3A26",
"NavdsColorDangerHover": "#A32A17",
"NavdsColorDangerActive": "#881D0C",
"NavdsColorErrorBorder": "#BA3A26",
"NavdsColorErrorBackground": "#F9D2CC",
"NavdsColorWarningBorder": "#D47B00",
"NavdsColorWarningBackground": "#FFECCC",
"NavdsColorInfoBorder": "#368DA8",
"NavdsColorInfoBackground": "#D8F9FF",
"NavdsColorSuccessBorder": "#06893A",
"NavdsColorSuccessBackground": "#CCF1D6",
"NavdsColorBorder": "#A0A0A0",
"NavdsColorBackground": "#ffffff",
"NavdsColorTextPrimary": "#262626",
"NavdsColorTextInverse": "#ffffff",
"NavdsColorTextDisabled": "#6A6A6A",
"NavdsColorTextLink": "#0067c5",
"NavdsColorTextError": "#BA3A26",
"NavdsColorHover": "#A0A0A0",
"NavdsColorTagErrorBorder": "#BA3A26",
"NavdsColorTagErrorBackground": "#F9D2CC",
"NavdsColorTagWarningBorder": "#D47B00",
"NavdsColorTagWarningBackground": "#FFECCC",
"NavdsColorTagInfoBorder": "#368DA8",
"NavdsColorTagInfoBackground": "#D8F9FF",
"NavdsColorTagSuccessBorder": "#06893A",
"NavdsColorTagSuccessBackground": "#CCF1D6",
"NavdsColorModalOverlay": "rgba(38, 38, 38, 0.7)",
"NavdsBorderDefault": "1px solid #A0A0A0",
"NavdsBorderRadius": "4px",
"NavdsPanelHover": "1px solid #0067c5",
"NavdsFontFamily": "\"Source Sans Pro\", Arial, sans-serif",
"NavdsFontLineHeightHeading2xlarge": "3.25rem",
"NavdsFontLineHeightHeadingXlarge": "2.5rem",
"NavdsFontLineHeightHeadingLarge": "2.25rem",
"NavdsFontLineHeightHeadingMedium": "2rem",
"NavdsFontLineHeightHeadingSmall": "1.75rem",
"NavdsFontLineHeightHeadingXsmall": "1.5rem",
"NavdsFontLineHeightXlarge": "1.75rem",
"NavdsFontLineHeightLarge": "1.5rem",
"NavdsFontLineHeightMedium": "1.25rem",
"NavdsFontSizeHeading2xlarge": "2.5rem",
"NavdsFontSizeHeadingXlarge": "2rem",
"NavdsFontSizeHeadingLarge": "1.75rem",
"NavdsFontSizeHeadingMedium": "1.5rem",
"NavdsFontSizeHeadingSmall": "1.25rem",
"NavdsFontSizeHeadingXsmall": "1.125rem",
"NavdsFontSizeXlarge": "1.25rem",
"NavdsFontSizeLarge": "1.125rem",
"NavdsFontSizeMedium": "1rem",
"NavdsFontSizeSmall": "0.875rem",
"NavdsFontWeightBold": "600",
"NavdsFontWeightRegular": "400",
"NavdsShadowFocus": "0 0 0 3px #00347D",
"NavdsShadowFocusOnDark": "0 0 0 3px #FFAA33",
"NavdsShadowHover": "#A0A0A0 0 2px 1px 0",
"NavdsTextFocus": "#00347D",
"NavdsTextShadow": "0 0 0 2px #00347D",
"NavdsContentContainerMaxWidth": "79.5rem",
"NavdsContentContainerPaddingSmall": "1rem",
"NavdsContentContainerPaddingMediumAndLarger": "1.5rem",
"NavdsGridGutterSmall": "1rem",
"NavdsGridGutterMediumAndLarger": "1.5rem",
"NavdsLayoutBackgroundWhite": "#ffffff",
"NavdsLayoutBackgroundGray": "#F1F1F1",
"NavdsLayoutPaddingSmall": "1rem",
"NavdsLayoutPaddingMediumAndLarger": "2.5rem",
"NavdsZIndexModal": 2000,
"NavdsZIndexPopover": 1000,
"NavdsZIndexFocus": 10,
"NavdsSidebarStickyOffset": "0",
"NavdsCheckmarkImageWhite": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
"NavdsCheckmarkImageBlue": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)"
"NavdsSemanticColorText": "rgba(38, 38, 38, 1)",
"NavdsSpacing1": "0.25rem",
"NavdsSpacing2": "0.5rem",
"NavdsSpacing3": "0.75rem",
"NavdsSpacing4": "1rem",
"NavdsSpacing5": "1.25rem",
"NavdsSpacing6": "1.5rem",
"NavdsSpacing7": "1.75rem",
"NavdsSpacing8": "2rem",
"NavdsSpacing9": "2.25rem",
"NavdsSpacing10": "2.5rem",
"NavdsSpacing11": "2.75rem",
"NavdsSpacing12": "3rem",
"NavdsSpacing14": "3.5rem",
"NavdsSpacing16": "4rem",
"NavdsSpacing18": "4.5rem",
"NavdsSpacing20": "5rem",
"NavdsSpacing24": "6rem",
"NavdsSpacing32": "8rem"
};
/**
* Do not edit directly
* Generated on Wed, 17 Nov 2021 14:24:59 GMT
* Generated on Tue, 07 Dec 2021 15:09:16 GMT
*/
export const NavdsSpacing1 = "0.25rem";
export const NavdsSpacing2 = "0.5rem";
export const NavdsSpacing3 = "0.75rem";
export const NavdsSpacing4 = "1rem";
export const NavdsSpacing5 = "1.25rem";
export const NavdsSpacing6 = "1.5rem";
export const NavdsSpacing7 = "1.75rem";
export const NavdsSpacing8 = "2rem";
export const NavdsSpacing9 = "2.25rem";
export const NavdsSpacing10 = "2.5rem";
export const NavdsSpacing11 = "2.75rem";
export const NavdsSpacing12 = "3rem";
export const NavdsSpacing14 = "3.5rem";
export const NavdsSpacing16 = "4rem";
export const NavdsSpacing18 = "4.5rem";
export const NavdsSpacing20 = "5rem";
export const NavdsSpacing24 = "6rem";
export const NavdsSpacing32 = "8rem";
export const NavdsFontFamily = "\"Source Sans Pro\", Arial, sans-serif";
export const NavdsFontLineHeightHeading2xlarge = "3.25rem";
export const NavdsFontLineHeightHeadingXlarge = "2.5rem";
export const NavdsFontLineHeightHeadingLarge = "2.25rem";
export const NavdsFontLineHeightHeadingMedium = "2rem";
export const NavdsFontLineHeightHeadingSmall = "1.75rem";
export const NavdsFontLineHeightHeadingXsmall = "1.5rem";
export const NavdsFontLineHeightXlarge = "1.75rem";
export const NavdsFontLineHeightLarge = "1.5rem";
export const NavdsFontLineHeightMedium = "1.25rem";
export const NavdsFontSizeHeading2xlarge = "2.5rem";
export const NavdsFontSizeHeadingXlarge = "2rem";
export const NavdsFontSizeHeadingLarge = "1.75rem";
export const NavdsFontSizeHeadingMedium = "1.5rem";
export const NavdsFontSizeHeadingSmall = "1.25rem";
export const NavdsFontSizeHeadingXsmall = "1.125rem";
export const NavdsFontSizeXlarge = "1.25rem";
export const NavdsFontSizeLarge = "1.125rem";
export const NavdsFontSizeMedium = "1rem";
export const NavdsFontSizeSmall = "0.875rem";
export const NavdsFontWeightBold = "600";
export const NavdsFontWeightRegular = "400";
export const NavdsShadowFocus = "0 0 0 3px rgba(0, 52, 125, 1)";
export const NavdsShadowFocusInverted = "0 0 0 3px rgba(153, 195, 255, 1)";
export const NavdsShadowPopover = "0 2px 4px 0 rgba(201, 201, 201, 1)";
export const NavdsShadowCard = "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)";
export const NavdsZIndexModal = 2000;
export const NavdsZIndexPopover = 1000;
export const NavdsZIndexFocus = 10;
export const NavdsGlobalColorBlue50 = "rgba(230, 240, 255, 1)";

@@ -114,7 +125,8 @@ export const NavdsGlobalColorBlue100 = "rgba(204, 225, 255, 1)";

export const NavdsGlobalColorWhite = "rgba(255, 255, 255, 1)";
export const NavdsSemanticColorBorderDefault = "rgba(106, 106, 106, 1)";
export const NavdsSemanticColorBorderInverted = "rgba(201, 201, 201, 1)";
export const NavdsSemanticColorBorderMuted = "rgba(160, 160, 160, 1)";
export const NavdsSemanticColorCanvasBackgroundDefault = "rgba(241, 241, 241, 1)";
export const NavdsSemanticColorBorder = "rgba(106, 106, 106, 1)";
export const NavdsSemanticColorCanvasBackgroundInverted = "rgba(38, 38, 38, 1)";
export const NavdsSemanticColorCanvasBackgroundLight = "rgba(255, 255, 255, 1)";
export const NavdsSemanticColorCanvasBackground = "rgba(241, 241, 241, 1)";
export const NavdsSemanticColorComponentBackgroundAlternate = "rgba(247, 247, 247, 1)";

@@ -137,169 +149,33 @@ export const NavdsSemanticColorComponentBackgroundInverted = "rgba(38, 38, 38, 1)";

export const NavdsSemanticColorFeedbackWarningIcon = "rgba(255, 145, 0, 1)";
export const NavdsSemanticColorFocusInverted = "rgba(153, 195, 255, 1)";
export const NavdsSemanticColorFocus = "rgba(0, 52, 125, 1)";
export const NavdsSemanticColorInteractionDangerDefault = "rgba(186, 58, 38, 1)";
export const NavdsSemanticColorInteractionDangerHover = "rgba(163, 42, 23, 1)";
export const NavdsSemanticColorInteractionDangerSelected = "rgba(136, 29, 12, 1)";
export const NavdsSemanticColorInteractionPrimaryDefault = "rgba(0, 103, 197, 1)";
export const NavdsSemanticColorInteractionDanger = "rgba(186, 58, 38, 1)";
export const NavdsSemanticColorInteractionPrimaryHoverSubtle = "rgba(230, 240, 255, 1)";
export const NavdsSemanticColorInteractionPrimaryHover = "rgba(0, 86, 180, 1)";
export const NavdsSemanticColorInteractionPrimarySelected = "rgba(0, 91, 130, 1)";
export const NavdsSemanticColorTextDefault = "rgba(38, 38, 38, 1)";
export const NavdsSemanticColorInteractionPrimary = "rgba(0, 103, 197, 1)";
export const NavdsSemanticColorLinkVisited = "rgba(99, 70, 137, 1)";
export const NavdsSemanticColorLink = "rgba(0, 103, 197, 1)";
export const NavdsSemanticColorTextInverted = "rgba(255, 255, 255, 1)";
export const NavdsSemanticColorTextLink = "rgba(0, 103, 197, 1)";
export const NavdsSemanticColorTextMuted = "rgba(106, 106, 106, 1)";
export const NavdsColorWhite = "#ffffff";
export const NavdsColorDarkgray = "#262626";
export const NavdsColorGray10 = "#F1F1F1";
export const NavdsColorGray20 = "#C9C9C9";
export const NavdsColorGray40 = "#A0A0A0";
export const NavdsColorGray60 = "#6A6A6A";
export const NavdsColorGray80 = "#4F4F4F";
export const NavdsColorGray90 = "#262626";
export const NavdsColorBlue10 = "#CCE1FF";
export const NavdsColorBlue20 = "#99C3FF";
export const NavdsColorBlue30 = "#66A5F4";
export const NavdsColorBlue40 = "#3386E0";
export const NavdsColorBlue50 = "#0067c5";
export const NavdsColorBlue60 = "#0056B4";
export const NavdsColorBlue70 = "#00459C";
export const NavdsColorBlue80 = "#00347D";
export const NavdsColorBlue90 = "#002252";
export const NavdsColorDeepblue10 = "#CCE2F0";
export const NavdsColorDeepblue20 = "#99C4DD";
export const NavdsColorDeepblue30 = "#66A3C4";
export const NavdsColorDeepblue40 = "#3380A5";
export const NavdsColorDeepblue50 = "#005B82";
export const NavdsColorDeepblue60 = "#005077";
export const NavdsColorDeepblue70 = "#004367";
export const NavdsColorDeepblue80 = "#003453";
export const NavdsColorDeepblue90 = "#00243A";
export const NavdsColorLightblue10 = "#D8F9FF";
export const NavdsColorLightblue20 = "#B5F1FF";
export const NavdsColorLightblue30 = "#97E6FF";
export const NavdsColorLightblue40 = "#7CDAF8";
export const NavdsColorLightblue50 = "#66CBEC";
export const NavdsColorLightblue60 = "#4CADCD";
export const NavdsColorLightblue70 = "#368DA8";
export const NavdsColorLightblue80 = "#236B7D";
export const NavdsColorLightblue90 = "#134852";
export const NavdsColorOrange10 = "#FFECCC";
export const NavdsColorOrange20 = "#FFD799";
export const NavdsColorOrange30 = "#FFC166";
export const NavdsColorOrange40 = "#FFAA33";
export const NavdsColorOrange50 = "#FF9100";
export const NavdsColorOrange60 = "#D47B00";
export const NavdsColorOrange70 = "#A86400";
export const NavdsColorOrange80 = "#7D4C00";
export const NavdsColorOrange90 = "#523300";
export const NavdsColorGreen10 = "#CCF1D6";
export const NavdsColorGreen20 = "#99DEAD";
export const NavdsColorGreen30 = "#66C786";
export const NavdsColorGreen40 = "#33AA5F";
export const NavdsColorGreen50 = "#06893A";
export const NavdsColorGreen60 = "#007C2E";
export const NavdsColorGreen70 = "#006A23";
export const NavdsColorGreen80 = "#005519";
export const NavdsColorGreen90 = "#003B0F";
export const NavdsColorRed10 = "#F9D2CC";
export const NavdsColorRed20 = "#EFA89D";
export const NavdsColorRed30 = "#E18071";
export const NavdsColorRed40 = "#D05C4A";
export const NavdsColorRed50 = "#BA3A26";
export const NavdsColorRed60 = "#A32A17";
export const NavdsColorRed70 = "#881D0C";
export const NavdsColorRed80 = "#6A1204";
export const NavdsColorRed90 = "#480900";
export const NavdsColorPurple10 = "#E0D8E9";
export const NavdsColorPurple20 = "#C0B2D2";
export const NavdsColorPurple30 = "#A18DBB";
export const NavdsColorPurple40 = "#8269A2";
export const NavdsColorPurple50 = "#634689";
export const NavdsColorPurple60 = "#523874";
export const NavdsColorPurple70 = "#412B5D";
export const NavdsColorPurple80 = "#301F46";
export const NavdsColorPurple90 = "#1F142F";
export const NavdsColorLimegreen10 = "#F9FCCC";
export const NavdsColorLimegreen20 = "#ECF399";
export const NavdsColorLimegreen30 = "#D9E366";
export const NavdsColorLimegreen40 = "#C1CB33";
export const NavdsColorLimegreen50 = "#a2ad00";
export const NavdsColorLimegreen60 = "#939E00";
export const NavdsColorLimegreen70 = "#7F8900";
export const NavdsColorLimegreen80 = "#666E00";
export const NavdsColorLimegreen90 = "#474E00";
export const NavdsColorDisabled = "#A0A0A0";
export const NavdsColorActionDefault = "#0067c5";
export const NavdsColorActionHover = "#0056B4";
export const NavdsColorActionActive = "#005B82";
export const NavdsColorDangerDefault = "#BA3A26";
export const NavdsColorDangerHover = "#A32A17";
export const NavdsColorDangerActive = "#881D0C";
export const NavdsColorErrorBorder = "#BA3A26";
export const NavdsColorErrorBackground = "#F9D2CC";
export const NavdsColorWarningBorder = "#D47B00";
export const NavdsColorWarningBackground = "#FFECCC";
export const NavdsColorInfoBorder = "#368DA8";
export const NavdsColorInfoBackground = "#D8F9FF";
export const NavdsColorSuccessBorder = "#06893A";
export const NavdsColorSuccessBackground = "#CCF1D6";
export const NavdsColorBorder = "#A0A0A0";
export const NavdsColorBackground = "#ffffff";
export const NavdsColorTextPrimary = "#262626";
export const NavdsColorTextInverse = "#ffffff";
export const NavdsColorTextDisabled = "#6A6A6A";
export const NavdsColorTextLink = "#0067c5";
export const NavdsColorTextError = "#BA3A26";
export const NavdsColorHover = "#A0A0A0";
export const NavdsColorTagErrorBorder = "#BA3A26";
export const NavdsColorTagErrorBackground = "#F9D2CC";
export const NavdsColorTagWarningBorder = "#D47B00";
export const NavdsColorTagWarningBackground = "#FFECCC";
export const NavdsColorTagInfoBorder = "#368DA8";
export const NavdsColorTagInfoBackground = "#D8F9FF";
export const NavdsColorTagSuccessBorder = "#06893A";
export const NavdsColorTagSuccessBackground = "#CCF1D6";
export const NavdsColorModalOverlay = "rgba(38, 38, 38, 0.7)";
export const NavdsBorderDefault = "1px solid #A0A0A0";
export const NavdsBorderRadius = "4px";
export const NavdsPanelHover = "1px solid #0067c5";
export const NavdsFontFamily = "\"Source Sans Pro\", Arial, sans-serif";
export const NavdsFontLineHeightHeading2xlarge = "3.25rem";
export const NavdsFontLineHeightHeadingXlarge = "2.5rem";
export const NavdsFontLineHeightHeadingLarge = "2.25rem";
export const NavdsFontLineHeightHeadingMedium = "2rem";
export const NavdsFontLineHeightHeadingSmall = "1.75rem";
export const NavdsFontLineHeightHeadingXsmall = "1.5rem";
export const NavdsFontLineHeightXlarge = "1.75rem";
export const NavdsFontLineHeightLarge = "1.5rem";
export const NavdsFontLineHeightMedium = "1.25rem";
export const NavdsFontSizeHeading2xlarge = "2.5rem";
export const NavdsFontSizeHeadingXlarge = "2rem";
export const NavdsFontSizeHeadingLarge = "1.75rem";
export const NavdsFontSizeHeadingMedium = "1.5rem";
export const NavdsFontSizeHeadingSmall = "1.25rem";
export const NavdsFontSizeHeadingXsmall = "1.125rem";
export const NavdsFontSizeXlarge = "1.25rem";
export const NavdsFontSizeLarge = "1.125rem";
export const NavdsFontSizeMedium = "1rem";
export const NavdsFontSizeSmall = "0.875rem";
export const NavdsFontWeightBold = "600";
export const NavdsFontWeightRegular = "400";
export const NavdsShadowFocus = "0 0 0 3px #00347D";
export const NavdsShadowFocusOnDark = "0 0 0 3px #FFAA33";
export const NavdsShadowHover = "#A0A0A0 0 2px 1px 0";
export const NavdsTextFocus = "#00347D";
export const NavdsTextShadow = "0 0 0 2px #00347D";
export const NavdsContentContainerMaxWidth = "79.5rem";
export const NavdsContentContainerPaddingSmall = "1rem";
export const NavdsContentContainerPaddingMediumAndLarger = "1.5rem";
export const NavdsGridGutterSmall = "1rem";
export const NavdsGridGutterMediumAndLarger = "1.5rem";
export const NavdsLayoutBackgroundWhite = "#ffffff";
export const NavdsLayoutBackgroundGray = "#F1F1F1";
export const NavdsLayoutPaddingSmall = "1rem";
export const NavdsLayoutPaddingMediumAndLarger = "2.5rem";
export const NavdsZIndexModal = 2000;
export const NavdsZIndexPopover = 1000;
export const NavdsZIndexFocus = 10;
export const NavdsSidebarStickyOffset = "0";
export const NavdsCheckmarkImageWhite = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)";
export const NavdsCheckmarkImageBlue = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)";
export const NavdsSemanticColorText = "rgba(38, 38, 38, 1)";
export const NavdsSpacing1 = "0.25rem";
export const NavdsSpacing2 = "0.5rem";
export const NavdsSpacing3 = "0.75rem";
export const NavdsSpacing4 = "1rem";
export const NavdsSpacing5 = "1.25rem";
export const NavdsSpacing6 = "1.5rem";
export const NavdsSpacing7 = "1.75rem";
export const NavdsSpacing8 = "2rem";
export const NavdsSpacing9 = "2.25rem";
export const NavdsSpacing10 = "2.5rem";
export const NavdsSpacing11 = "2.75rem";
export const NavdsSpacing12 = "3rem";
export const NavdsSpacing14 = "3.5rem";
export const NavdsSpacing16 = "4rem";
export const NavdsSpacing18 = "4.5rem";
export const NavdsSpacing20 = "5rem";
export const NavdsSpacing24 = "6rem";
export const NavdsSpacing32 = "8rem";
{
"name": "@navikt/ds-tokens",
"version": "0.6.3",
"version": "0.7.0",
"private": false,

@@ -33,3 +33,2 @@ "description": "Auto-generated design-tokens for NAV design-systems framework",

"@types/jest": "^27.0.1",
"color": "^4.0.1",
"dotenv": "^10.0.0",

@@ -44,3 +43,3 @@ "figma-api": "^1.7.0",

},
"gitHead": "46f97b006f1ebd015a502a859d5d775cc4def74e"
"gitHead": "36d98e1d190652c21d78a259cf3d8942d271c167"
}

@@ -300,7 +300,10 @@ {

"border": {
"default": {
"value": "{navds.global.color.gray.600.value}"
"inverted": {
"value": "{navds.global.color.gray.200.value}"
},
"muted": {
"value": "{navds.global.color.gray.400.value}"
},
"@": {
"value": "{navds.global.color.gray.600.value}"
}

@@ -310,5 +313,2 @@ },

"background": {
"default": {
"value": "{navds.global.color.gray.100.value}"
},
"inverted": {

@@ -319,2 +319,5 @@ "value": "{navds.global.color.gray.900.value}"

"value": "{navds.global.color.white.value}"
},
"@": {
"value": "{navds.global.color.gray.100.value}"
}

@@ -389,5 +392,7 @@ }

"focus": {
"value": "{navds.global.color.blue.800.value}",
"inverted": {
"value": "{navds.global.color.blue.200.value}"
},
"@": {
"value": "{navds.global.color.blue.800.value}"
}

@@ -397,5 +402,2 @@ },

"danger": {
"default": {
"value": "{navds.global.color.red.500.value}"
},
"hover": {

@@ -406,31 +408,43 @@ "value": "{navds.global.color.red.600.value}"

"value": "{navds.global.color.red.700.value}"
},
"@": {
"value": "{navds.global.color.red.500.value}"
}
},
"primary": {
"default": {
"value": "{navds.global.color.blue.500.value}"
},
"hover": {
"value": "{navds.global.color.blue.600.value}"
"subtle": {
"value": "{navds.global.color.blue.50.value}"
},
"@": {
"value": "{navds.global.color.blue.600.value}"
}
},
"selected": {
"value": "{navds.global.color.deepblue.500.value}"
},
"@": {
"@": {
"value": "{navds.global.color.blue.500.value}"
}
}
}
},
"link": {
"visited": {
"value": "{navds.global.color.purple.500.value}"
},
"@": {
"value": "{navds.global.color.blue.500.value}"
}
},
"text": {
"default": {
"value": "{navds.global.color.gray.900.value}"
},
"inverted": {
"value": "{navds.global.color.white.value}"
},
"link": {
"value": "{navds.global.color.blue.500.value}",
"visited": {
"value": "{navds.global.color.purple.500.value}"
}
},
"muted": {
"value": "{navds.global.color.gray.600.value}"
},
"@": {
"value": "{navds.global.color.gray.900.value}"
}

@@ -437,0 +451,0 @@ }

@@ -1,142 +0,6 @@

const Color = require("color");
const newColors = require("./colors.json");
const newSpacing = require("./spacing.json");
const baseFontSize = 16;
const getFontSize = (size) => `${size / baseFontSize}rem`;
// https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
const mixColors = (color, step, amount, mixColor) => {
const saturation = Math.round(Color(color).hsl().color[1]);
// Setting directly to hex returns different result...
return Color(
Color(color)
.saturate(((step + 1) / 5) * (saturation / 100))
.mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
.string()
).hex();
};
const lightColor = (color, step) => mixColors(color, step, 100, "white");
const darkColor = (color, step) => mixColors(color, step, 85, "black");
const baseColors = {
blue: "#0067c5",
deepblue: "#005B82",
lightblue: "#66CBEC",
orange: "#FF9100",
green: "#06893A",
red: "#BA3A26",
purple: "#634689",
limegreen: "#a2ad00",
};
const white = "#ffffff";
const darkgray = "#262626";
const lightgray = "#F1F1F1";
const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
module.exports = {
navds: {
...(newSpacing?.navds ?? {}),
...(newColors?.navds ?? {}),
color: {
white: { value: white },
darkgray: { value: darkgray },
gray: {
90: { value: gray(1) },
80: { value: gray(0.8) },
60: { value: gray(0.6667) },
40: { value: gray(0.4) },
20: { value: gray(0.196) },
10: { value: gray(0) },
},
...Object.entries(baseColors).reduce(
(colors, [name, color]) => ({
...colors,
[name]: {
90: { value: darkColor(color, 3) },
80: { value: darkColor(color, 2) },
70: { value: darkColor(color, 1) },
60: { value: darkColor(color, 0) },
50: { value: color },
40: { value: lightColor(color, 0) },
30: { value: lightColor(color, 1) },
20: { value: lightColor(color, 2) },
10: { value: lightColor(color, 3) },
},
}),
{}
),
disabled: { value: "{navds.color.gray.40.value}" },
action: {
default: { value: "{navds.color.blue.50.value}" },
hover: { value: "{navds.color.blue.60.value}" },
active: { value: "{navds.color.deepblue.50.value}" },
},
danger: {
default: { value: "{navds.color.red.50.value}" },
hover: { value: "{navds.color.red.60.value}" },
active: { value: "{navds.color.red.70.value}" },
},
error: {
border: { value: "{navds.color.red.50.value}" },
background: { value: "{navds.color.red.10.value}" },
},
warning: {
border: { value: "{navds.color.orange.60.value}" },
background: { value: "{navds.color.orange.10.value}" },
},
info: {
border: { value: "{navds.color.lightblue.70.value}" },
background: { value: "{navds.color.lightblue.10.value}" },
},
success: {
border: { value: "{navds.color.green.50.value}" },
background: { value: "{navds.color.green.10.value}" },
},
border: { value: "{navds.color.gray.40.value}" },
background: { value: "{navds.color.white.value}" },
text: {
primary: { value: "{navds.color.gray.90.value}" },
inverse: { value: "{navds.color.white.value}" },
disabled: { value: "{navds.color.gray.60.value}" },
link: { value: "{navds.color.blue.50.value}" },
error: { value: "{navds.color.red.50.value}" },
},
hover: { value: "{navds.color.gray.40.value}" },
tag: {
error: {
border: { value: "{navds.color.red.50.value}" },
background: { value: "{navds.color.red.10.value}" },
},
warning: {
border: { value: "{navds.color.orange.60.value}" },
background: { value: "{navds.color.orange.10.value}" },
},
info: {
border: { value: "{navds.color.lightblue.70.value}" },
background: { value: "{navds.color.lightblue.10.value}" },
},
success: {
border: { value: "{navds.color.green.50.value}" },
background: { value: "{navds.color.green.10.value}" },
},
},
modal: {
overlay: {
value: "rgba(38, 38, 38, 0.7)",
},
},
},
border: {
default: {
value: "1px solid {navds.color.border.value}",
},
radius: { value: "4px" },
},
panel: {
hover: { value: "1px solid {navds.color.blue.50.value}" },
},
font: {

@@ -179,32 +43,13 @@ family: { value: '"Source Sans Pro", Arial, sans-serif' },

shadow: {
focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
"focus-on-dark": { value: "0 0 0 3px {navds.color.orange.40.value}" },
hover: { value: "{navds.color.hover.value} 0 2px 1px 0" },
},
text: {
focus: { value: "{navds.color.blue.80.value}" },
shadow: { value: "0 0 0 2px {navds.color.blue.80.value}" },
},
contentContainer: {
maxWidth: { value: "79.5rem" },
padding: {
small: { value: "{navds.spacing.4.value}" },
mediumAndLarger: { value: "{navds.spacing.6.value}" },
focus: { value: "0 0 0 3px {navds.semantic.color.focus.@.value}" },
"focus-inverted": {
value: "0 0 0 3px {navds.semantic.color.focus.inverted.value}",
},
},
grid: {
gutter: {
small: { value: "{navds.spacing.4.value}" },
mediumAndLarger: { value: "{navds.spacing.6.value}" },
popover: {
value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
},
},
layout: {
background: {
white: { value: white },
gray: { value: "{navds.color.gray.10.value}" },
card: {
value:
"0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)",
},
padding: {
small: { value: "{navds.spacing.4.value}" },
mediumAndLarger: { value: "{navds.spacing.10.value}" },
},
},

@@ -216,20 +61,3 @@ "z-index": {

},
sidebar: {
sticky: {
offset: { value: "0" },
},
},
checkmark: {
image: {
white: {
value:
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
},
blue: {
value:
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
},
},
},
},
};

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc