@navikt/ds-tokens - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/tokens.js

 /**
  * Do not edit directly
- * Generated on Wed, 19 May 2021 13:07:44 GMT
+ * Generated on Thu, 20 May 2021 07:17:09 GMT
  */
 
 export const NavdsColorWhite = "#ffffff";
-export const NavdsColorDarkgray = "#3e3832";
+export const NavdsColorDarkgray = "#262626";
 export const NavdsColorGray10 = "#F1F1F1";
@@ -14,74 +14,92 @@ export const NavdsColorGray20 = "#C9C9C9";
 export const NavdsColorGray90 = "#262626";
-export const NavdsColorBlue10 = "#CCE1F3";
-export const NavdsColorBlue20 = "#99C2E8";
-export const NavdsColorBlue30 = "#66A4DC";
-export const NavdsColorBlue40 = "#3385D1";
+export const NavdsColorBlue10 = "#CCE1FF";
+export const NavdsColorBlue20 = "#99C3FF";
+export const NavdsColorBlue30 = "#66A5F4";
+export const NavdsColorBlue40 = "#3386E0";
 export const NavdsColorBlue50 = "#0067c5";
-export const NavdsColorBlue60 = "#0C5EA8";
-export const NavdsColorBlue70 = "#19548A";
-export const NavdsColorBlue80 = "#254B6D";
-export const NavdsColorBlue90 = "#32414F";
-export const NavdsColorDeepblue10 = "#CCDEE6";
-export const NavdsColorDeepblue20 = "#99BDCD";
-export const NavdsColorDeepblue30 = "#669DB4";
-export const NavdsColorDeepblue40 = "#337C9B";
+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 = "#0C5472";
-export const NavdsColorDeepblue70 = "#194D62";
-export const NavdsColorDeepblue80 = "#254652";
-export const NavdsColorDeepblue90 = "#323F42";
-export const NavdsColorLightblue10 = "#E0F5FB";
-export const NavdsColorLightblue20 = "#C2EAF7";
-export const NavdsColorLightblue30 = "#A3E0F4";
-export const NavdsColorLightblue40 = "#85D5F0";
+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 = "#5EAEC7";
-export const NavdsColorLightblue70 = "#5690A2";
-export const NavdsColorLightblue80 = "#4E737C";
-export const NavdsColorLightblue90 = "#465557";
-export const NavdsColorOrange10 = "#FFE9CC";
-export const NavdsColorOrange20 = "#FFD399";
-export const NavdsColorOrange30 = "#FFBD66";
-export const NavdsColorOrange40 = "#FFA733";
+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 = "#D87F0A";
-export const NavdsColorOrange70 = "#B26D14";
-export const NavdsColorOrange80 = "#8B5C1E";
-export const NavdsColorOrange90 = "#654A28";
-export const NavdsColorGreen10 = "#CDE7D8";
-export const NavdsColorGreen20 = "#9BD0B0";
-export const NavdsColorGreen30 = "#6AB889";
-export const NavdsColorGreen40 = "#38A161";
+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 = "#117938";
-export const NavdsColorGreen70 = "#1C6937";
-export const NavdsColorGreen80 = "#285835";
-export const NavdsColorGreen90 = "#334834";
-export const NavdsColorRed10 = "#F1D8D4";
-export const NavdsColorRed20 = "#E3B0A8";
-export const NavdsColorRed30 = "#D6897D";
-export const NavdsColorRed40 = "#C86151";
+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 = "#A13A28";
-export const NavdsColorRed70 = "#88392B";
-export const NavdsColorRed80 = "#70392D";
-export const NavdsColorRed90 = "#573830";
+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 = "#0D6FC8";
+export const NavdsColorActionHover = {"model":"hsl","color":[208.62944162436543,100,42.49019607843138],"valpha":1};
 export const NavdsColorActionActive = "#005B82";
 export const NavdsColorDangerDefault = "#BA3A26";
-export const NavdsColorDangerHover = "#BD4431";
-export const NavdsColorDangerActive = "#88392B";
+export const NavdsColorDangerHover = {"model":"hsl","color":[8.108108108108127,66.07142857142857,48.31372549019608],"valpha":1};
+export const NavdsColorDangerActive = "#881D0C";
 export const NavdsColorErrorBorder = "#BA3A26";
-export const NavdsColorErrorBackground = "#F1D8D4";
-export const NavdsColorWarningBorder = "#D87F0A";
-export const NavdsColorWarningBackground = "#FFE9CC";
-export const NavdsColorInfoBorder = "#5690A2";
-export const NavdsColorInfoBackground = "#E0F5FB";
+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 = "#CDE7D8";
+export const NavdsColorSuccessBackground = "#CCF1D6";
 export const NavdsColorBorder = "#A0A0A0";
 export const NavdsColorBackground = "#ffffff";
-export const NavdsColorTextPrimary = "#3e3832";
+export const NavdsColorTextPrimary = "#262626";
 export const NavdsColorTextInverse = "#ffffff";
@@ -93,10 +111,10 @@ export const NavdsColorTextDisabled = "#6A6A6A";
 export const NavdsColorTagErrorBorder = "#BA3A26";
-export const NavdsColorTagErrorBackground = "#F1D8D4";
-export const NavdsColorTagWarningBorder = "#D87F0A";
-export const NavdsColorTagWarningBackground = "#FFE9CC";
-export const NavdsColorTagInfoBorder = "#5690A2";
-export const NavdsColorTagInfoBackground = "#E0F5FB";
+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 = "#CDE7D8";
-export const NavdsColorModalOverlay = "rgba(61, 56, 49, 0.7)";
+export const NavdsColorTagSuccessBackground = "#CCF1D6";
+export const NavdsColorModalOverlay = "rgba(38, 38, 38, 0.7)";
 export const NavdsBorderDefault = "1px solid #A0A0A0";
@@ -123,7 +141,7 @@ export const NavdsBorderRadius = "4px";
 export const NavdsFontLineHeightXs = "1.25rem";
-export const NavdsShadowFocus = "0 0 0 3px #254B6D";
-export const NavdsShadowFocusOnDark = "0 0 0 3px #FFA733";
+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 = "#254B6D";
-export const NavdsTextShadow = "0 0 0 2px #254B6D";
+export const NavdsTextFocus = "#00347D";
+export const NavdsTextShadow = "0 0 0 2px #00347D";
 export const NavdsContentContainerMaxWidth = "79.5rem";
@@ -134,3 +152,3 @@ export const NavdsContentContainerPaddingSmall = "1rem";
 export const NavdsGridGutterMediumAndLarger = "1.5rem";
-export const NavdsLayoutBackgroundWhite = "#FFFFFF";
+export const NavdsLayoutBackgroundWhite = "#ffffff";
 export const NavdsLayoutBackgroundGray = "#F1F1F1";
@@ -137,0 +155,0 @@ export const NavdsLayoutPaddingSmall = "1rem";

package.json

 {
   "name": "@navikt/ds-tokens",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "private": false,
@@ -34,3 +34,3 @@ "description": "Auto-generated design-tokens for NAV design-systems framework",
   },
-  "gitHead": "c4f279accd1d5d2f9d6a11cd1388db42ef298523"
+  "gitHead": "acb754a6e229429cb77894621ebdcaaab253c129"
 }

src/index.js

 const Color = require("color");
 
+// 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 = {
@@ -10,14 +25,12 @@ blue: "#0067c5",
   red: "#BA3A26",
+  purple: "#634689",
+  limegreen: "#a2ad00",
 };
+
 const white = "#ffffff";
-const darkgray = "#3e3832";
+const darkgray = "#262626";
+const lightgray = "#F1F1F1";
 
-const mix = (a, b, percentage) =>
-  Color(a)
-    .mix(Color(b), percentage / 100)
-    .hex();
+const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
 
-const darken = (color, percentage) => mix(color, darkgray, percentage);
-const lighten = (color, percentage) => mix(color, white, percentage);
-
 module.exports = {
@@ -29,8 +42,8 @@ navds: {
       gray: {
-        90: { value: "#262626" },
-        80: { value: "#4F4F4F" },
-        60: { value: "#6A6A6A" },
-        40: { value: "#A0A0A0" },
-        20: { value: "#C9C9C9" },
-        10: { value: "#F1F1F1" },
+        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) },
       },
@@ -41,11 +54,11 @@ ...Object.entries(baseColors).reduce(
           [name]: {
-            90: { value: darken(color, 80) },
-            80: { value: darken(color, 60) },
-            70: { value: darken(color, 40) },
-            60: { value: darken(color, 20) },
+            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: lighten(color, 20) },
-            30: { value: lighten(color, 40) },
-            20: { value: lighten(color, 60) },
-            10: { value: lighten(color, 80) },
+            40: { value: lightColor(color, 0) },
+            30: { value: lightColor(color, 1) },
+            20: { value: lightColor(color, 2) },
+            10: { value: lightColor(color, 3) },
           },
@@ -58,3 +71,3 @@ }),
         default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: lighten(baseColors.blue, 5) },
+        hover: { value: Color(baseColors.blue).lighten(0.1) },
         active: { value: "{navds.color.deepblue.50.value}" },
@@ -64,3 +77,3 @@ },
         default: { value: "{navds.color.red.50.value}" },
-        hover: { value: lighten(baseColors.red, 5) },
+        hover: { value: Color(baseColors.red).lighten(0.1) },
         active: { value: "{navds.color.red.70.value}" },
@@ -114,3 +127,3 @@ },
         overlay: {
-          value: "rgba(61, 56, 49, 0.7)",
+          value: "rgba(38, 38, 38, 0.7)",
         },
@@ -184,4 +197,4 @@ },
       background: {
-        white: { value: "#FFFFFF" },
-        gray: { value: "#F1F1F1" },
+        white: { value: white },
+        gray: { value: "{navds.color.gray.10.value}" },
       },
@@ -188,0 +201,0 @@ padding: {

No alert changes

Improved metrics

Total package byte prevSize

105291

increased by13.38%

Lines of code

3559

increased by13.56%

No dependency changes