@quadient/design-tokens - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

build/js/variables.js

 /**
  * Do not edit directly
- * Generated on Fri, 04 Jun 2021 13:23:36 GMT
+ * Generated on Tue, 22 Jun 2021 08:13:24 GMT
  */
@@ -62,5 +62,5 @@
 export const ColorBgInputWarning = "#ffffff";
-export const ColorBgSwitchPositive = "#994cf2";
-export const ColorBgSwitchNegative = "#909090";
-export const ColorBgSwitchHandlePositive = "#ffffff";
+export const ColorBgSwitchPositive = "rgba(153, 76, 242, 0.16)";
+export const ColorBgSwitchNegative = "rgba(33, 33, 33, 0.16)";
+export const ColorBgSwitchHandlePositive = "#994cf2";
 export const ColorBgSwitchHandleNegative = "#ffffff";
@@ -91,2 +91,4 @@ export const ColorError = "#dc3838";
 export const ColorIcon100Pressed = "#212121";
+export const ColorIconInfo = "#037fb0";
+export const ColorIconSuccess = "#168936";
 export const ColorIconError = "#dc3838";
@@ -291,2 +293,9 @@ export const ColorIconWarning = "#ea7400";
 export const FontLabelTextTransform = "none";
+export const FontNoteFontFamily = "'Rubik', sans-serif";
+export const FontNoteSize = 12;
+export const FontNoteLineHeight = "16px";
+export const FontNoteWeight = 400;
+export const FontNoteFontStyle = "normal";
+export const FontNoteLetterSpacing = 0;
+export const FontNoteTextTransform = "none";
 export const FontCodeFontFamily = "'Droid Sans Mono', sans-serif";
@@ -443,3 +452,7 @@ export const FontCodeSize = 12;
 export const SizingItem500 = 64;
-export const SizingItem000 = 20;
+export const SizingItem020 = 4;
+export const SizingItem030 = 8;
+export const SizingItem040 = 12;
+export const SizingItem050 = 16;
+export const SizingItem075 = 20;
 export const Shadow100 = "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)";
@@ -446,0 +459,0 @@ export const Shadow200 = "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)";

build/js/variablesDarkTheme.js

 /**
  * Do not edit directly
- * Generated on Fri, 04 Jun 2021 13:23:41 GMT
+ * Generated on Tue, 22 Jun 2021 08:13:28 GMT
  */
@@ -62,5 +62,5 @@
 export const ColorBgInputWarning = "#212121";
-export const ColorBgSwitchPositive = "#b985f6";
-export const ColorBgSwitchNegative = "#909090";
-export const ColorBgSwitchHandlePositive = "#212121";
+export const ColorBgSwitchPositive = "rgba(185, 133, 246, 0.16)";
+export const ColorBgSwitchNegative = "rgba(255, 255, 255, 0.16)";
+export const ColorBgSwitchHandlePositive = "#b985f6";
 export const ColorBgSwitchHandleNegative = "#212121";
@@ -91,2 +91,4 @@ export const ColorError = "#e77878";
 export const ColorIcon100Pressed = "#ffffff";
+export const ColorIconInfo = "#54a8c9";
+export const ColorIconSuccess = "#61af77";
 export const ColorIconError = "#e77878";
@@ -291,2 +293,9 @@ export const ColorIconWarning = "#f1a052";
 export const FontLabelTextTransform = "none";
+export const FontNoteFontFamily = "'Rubik', sans-serif";
+export const FontNoteSize = 12;
+export const FontNoteLineHeight = "16px";
+export const FontNoteWeight = 400;
+export const FontNoteFontStyle = "normal";
+export const FontNoteLetterSpacing = 0;
+export const FontNoteTextTransform = "none";
 export const FontCodeFontFamily = "'Droid Sans Mono', sans-serif";
@@ -443,3 +452,7 @@ export const FontCodeSize = 12;
 export const SizingItem500 = 64;
-export const SizingItem000 = 20;
+export const SizingItem020 = 4;
+export const SizingItem030 = 8;
+export const SizingItem040 = 12;
+export const SizingItem050 = 16;
+export const SizingItem075 = 20;
 export const Shadow100 = "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)";
@@ -446,0 +459,0 @@ export const Shadow200 = "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)";

build/js/variablesLegacyTheme.js

 /**
  * Do not edit directly
- * Generated on Fri, 04 Jun 2021 13:23:45 GMT
+ * Generated on Tue, 22 Jun 2021 08:13:32 GMT
  */
@@ -62,5 +62,5 @@
 export const ColorBgInputWarning = "#ffffff";
-export const ColorBgSwitchPositive = "#994cf2";
-export const ColorBgSwitchNegative = "#909090";
-export const ColorBgSwitchHandlePositive = "#ffffff";
+export const ColorBgSwitchPositive = "rgba(153, 76, 242, 0.16)";
+export const ColorBgSwitchNegative = "rgba(33, 33, 33, 0.16)";
+export const ColorBgSwitchHandlePositive = "#994cf2";
 export const ColorBgSwitchHandleNegative = "#ffffff";
@@ -91,2 +91,4 @@ export const ColorError = "#dc3838";
 export const ColorIcon100Pressed = "#2a76d7";
+export const ColorIconInfo = "#037fb0";
+export const ColorIconSuccess = "#168936";
 export const ColorIconError = "#dc3838";
@@ -291,2 +293,9 @@ export const ColorIconWarning = "#ea7400";
 export const FontLabelTextTransform = "none";
+export const FontNoteFontFamily = "'Rubik', sans-serif";
+export const FontNoteSize = 12;
+export const FontNoteLineHeight = "16px";
+export const FontNoteWeight = 400;
+export const FontNoteFontStyle = "normal";
+export const FontNoteLetterSpacing = 0;
+export const FontNoteTextTransform = "none";
 export const FontCodeFontFamily = "'Droid Sans Mono', sans-serif";
@@ -443,3 +452,7 @@ export const FontCodeSize = 12;
 export const SizingItem500 = 64;
-export const SizingItem000 = 20;
+export const SizingItem020 = 4;
+export const SizingItem030 = 8;
+export const SizingItem040 = 12;
+export const SizingItem050 = 16;
+export const SizingItem075 = 20;
 export const Shadow100 = "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)";
@@ -446,0 +459,0 @@ export const Shadow200 = "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)";

build/json/variables.json

@@ -58,5 +58,5 @@ {
   "ColorBgInputWarning": "#ffffff",
-  "ColorBgSwitchPositive": "#994cf2",
-  "ColorBgSwitchNegative": "#909090",
-  "ColorBgSwitchHandlePositive": "#ffffff",
+  "ColorBgSwitchPositive": "rgba(153, 76, 242, 0.16)",
+  "ColorBgSwitchNegative": "rgba(33, 33, 33, 0.16)",
+  "ColorBgSwitchHandlePositive": "#994cf2",
   "ColorBgSwitchHandleNegative": "#ffffff",
@@ -87,2 +87,4 @@ "ColorError": "#dc3838",
   "ColorIcon100Pressed": "#212121",
+  "ColorIconInfo": "#037fb0",
+  "ColorIconSuccess": "#168936",
   "ColorIconError": "#dc3838",
@@ -287,2 +289,9 @@ "ColorIconWarning": "#ea7400",
   "FontLabelTextTransform": "none",
+  "FontNoteFontFamily": "'Rubik', sans-serif",
+  "FontNoteSize": 12,
+  "FontNoteLineHeight": "16px",
+  "FontNoteWeight": 400,
+  "FontNoteFontStyle": "normal",
+  "FontNoteLetterSpacing": 0,
+  "FontNoteTextTransform": "none",
   "FontCodeFontFamily": "'Droid Sans Mono', sans-serif",
@@ -439,3 +448,7 @@ "FontCodeSize": 12,
   "SizingItem500": 64,
-  "SizingItem000": 20,
+  "SizingItem020": 4,
+  "SizingItem030": 8,
+  "SizingItem040": 12,
+  "SizingItem050": 16,
+  "SizingItem075": 20,
   "Shadow100": "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)",
@@ -442,0 +455,0 @@ "Shadow200": "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)",

build/json/variablesDarkTheme.json

@@ -58,5 +58,5 @@ {
   "ColorBgInputWarning": "#212121",
-  "ColorBgSwitchPositive": "#b985f6",
-  "ColorBgSwitchNegative": "#909090",
-  "ColorBgSwitchHandlePositive": "#212121",
+  "ColorBgSwitchPositive": "rgba(185, 133, 246, 0.16)",
+  "ColorBgSwitchNegative": "rgba(255, 255, 255, 0.16)",
+  "ColorBgSwitchHandlePositive": "#b985f6",
   "ColorBgSwitchHandleNegative": "#212121",
@@ -87,2 +87,4 @@ "ColorError": "#e77878",
   "ColorIcon100Pressed": "#ffffff",
+  "ColorIconInfo": "#54a8c9",
+  "ColorIconSuccess": "#61af77",
   "ColorIconError": "#e77878",
@@ -287,2 +289,9 @@ "ColorIconWarning": "#f1a052",
   "FontLabelTextTransform": "none",
+  "FontNoteFontFamily": "'Rubik', sans-serif",
+  "FontNoteSize": 12,
+  "FontNoteLineHeight": "16px",
+  "FontNoteWeight": 400,
+  "FontNoteFontStyle": "normal",
+  "FontNoteLetterSpacing": 0,
+  "FontNoteTextTransform": "none",
   "FontCodeFontFamily": "'Droid Sans Mono', sans-serif",
@@ -439,3 +448,7 @@ "FontCodeSize": 12,
   "SizingItem500": 64,
-  "SizingItem000": 20,
+  "SizingItem020": 4,
+  "SizingItem030": 8,
+  "SizingItem040": 12,
+  "SizingItem050": 16,
+  "SizingItem075": 20,
   "Shadow100": "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)",
@@ -442,0 +455,0 @@ "Shadow200": "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)",

build/json/variablesLegacyTheme.json

@@ -58,5 +58,5 @@ {
   "ColorBgInputWarning": "#ffffff",
-  "ColorBgSwitchPositive": "#994cf2",
-  "ColorBgSwitchNegative": "#909090",
-  "ColorBgSwitchHandlePositive": "#ffffff",
+  "ColorBgSwitchPositive": "rgba(153, 76, 242, 0.16)",
+  "ColorBgSwitchNegative": "rgba(33, 33, 33, 0.16)",
+  "ColorBgSwitchHandlePositive": "#994cf2",
   "ColorBgSwitchHandleNegative": "#ffffff",
@@ -87,2 +87,4 @@ "ColorError": "#dc3838",
   "ColorIcon100Pressed": "#2a76d7",
+  "ColorIconInfo": "#037fb0",
+  "ColorIconSuccess": "#168936",
   "ColorIconError": "#dc3838",
@@ -287,2 +289,9 @@ "ColorIconWarning": "#ea7400",
   "FontLabelTextTransform": "none",
+  "FontNoteFontFamily": "'Rubik', sans-serif",
+  "FontNoteSize": 12,
+  "FontNoteLineHeight": "16px",
+  "FontNoteWeight": 400,
+  "FontNoteFontStyle": "normal",
+  "FontNoteLetterSpacing": 0,
+  "FontNoteTextTransform": "none",
   "FontCodeFontFamily": "'Droid Sans Mono', sans-serif",
@@ -439,3 +448,7 @@ "FontCodeSize": 12,
   "SizingItem500": 64,
-  "SizingItem000": 20,
+  "SizingItem020": 4,
+  "SizingItem030": 8,
+  "SizingItem040": 12,
+  "SizingItem050": 16,
+  "SizingItem075": 20,
   "Shadow100": "0 2px 3px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(0,0,0,0.16)",
@@ -442,0 +455,0 @@ "Shadow200": "0 4px 6px 0 rgba(0,0,0,0.24), 0 2px 6px 0 rgba(0,0,0,0.16)",

changelog.md

@@ -0,1 +1,23 @@
+# 0.0.9
+## Changed
+- removed token `sizing-item-000` use `sizing-item-075` instead
+
+## Fixed
+- value of 
+  `color-bg-switch-handle-positive`
+  `color-bg-switch-positive`
+  `color-bg-switch-negative`
+
+## Added
+- new tokens:
+  `sizing-item-020`
+  `sizing-item-030`
+  `sizing-item-040`
+  `sizing-item-050`
+  `sizing-item-075`
+  `sizing-item-100`
+  `color-icon-info`
+  `color-icon-success`
+  `font-note`
+
 # 0.0.8
@@ -2,0 +24,0 @@ ## Added

package.json

 {
   "name": "@quadient/design-tokens",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Quadient design tokens generator tool. As an output, various types of formats are generated based on configuration in json input files.",
@@ -5,0 +5,0 @@ "main": "config.js",

src/color.json

@@ -178,9 +178,13 @@ {
         "positive": {
-          "value": "{color.primary.value}"
+          "value": 1,
+          "color": "{color.primary.value}",
+          "opacity": "{opacity.base.200.value}"
         },
         "negative": {
-          "value": "{color.base.grey.500.value}"
+          "value": 1,
+          "color": "{color.base.grey1000.value}",
+          "opacity": "{opacity.base.200.value}"
         },
         "handle-positive": {
-          "value": "{color.base.white.value}"
+          "value": "{color.primary.value}"
         },
@@ -267,2 +271,8 @@ "handle-negative": {
       },
+      "info": {
+        "value": "{color.base.ocean-blue.500.value}"
+      },
+      "success": {
+        "value": "{color.base.emerald-green.500.value}"
+      },
       "error": {
@@ -269,0 +279,0 @@ "value": "{color.base.red.500.value}"

src/darkTheme/color.json

@@ -167,11 +167,7 @@ {
       "switch": {
-        "positive": {
-          "value": "{color.primary.value}"
-        },
         "negative": {
-          "value": "{color.base.grey.500.value}"
+          "value": 1,
+          "color": "{color.base.white.value}",
+          "opacity": "{opacity.base.200.value}"
         },
-        "handle-positive": {
-          "value": "{color.base.grey1000.value}"
-        },
         "handle-negative": {
@@ -257,2 +253,8 @@ "value": "{color.base.grey1000.value}"
       },
+      "info": {
+        "value": "{color.base.ocean-blue.300.value}"
+      },
+      "success": {
+        "value": "{color.base.emerald-green.300.value}"
+      },
       "error": {
@@ -259,0 +261,0 @@ "value": "{color.base.red.300.value}"

src/font.json

@@ -21,2 +21,11 @@ {
     },
+    "note": {
+      "fontFamily": { "value": "'Rubik', sans-serif" },
+      "size": { "value": 12, "unit": "px" },
+      "lineHeight": { "value": "16px" },
+      "weight": { "value": 400 },
+      "font-style": { "value": "normal" },
+      "letterSpacing": { "value": 0, "unit": "px" },
+      "textTransform": { "value": "none" }
+    },
     "code": {
@@ -23,0 +32,0 @@ "fontFamily": { "value": "'Droid Sans Mono', sans-serif" },

src/sizing.json

@@ -11,3 +11,7 @@ {
     "item": {
-      "000": { "value": 20, "unit": "px" },
+      "020": { "value": 4, "unit": "px" },
+      "030": { "value": 8, "unit": "px" },
+      "040": { "value": 12, "unit": "px" },
+      "050": { "value": 16, "unit": "px" },
+      "075": { "value": 20, "unit": "px" },
       "100": { "value": 24, "unit": "px" },
@@ -14,0 +18,0 @@ "200": { "value": 28, "unit": "px" },

No alert changes

Improved metrics

Total package byte prevSize

334416

increased by2.41%

Lines of code

5723

increased by2.54%

No dependency changes