@quadient/design-tokens - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

build/js/variables.js

 /**
  * Do not edit directly
- * Generated on Fri, 30 Apr 2021 10:24:06 GMT
+ * Generated on Thu, 27 May 2021 09:23:40 GMT
  */
@@ -25,2 +25,3 @@
 export const ColorBgUi300 = "#eeeeee";
+export const ColorBgUi300Inverted = "#323232";
 export const ColorBgHeader100 = "#ffffff";
@@ -81,2 +82,4 @@ export const ColorBgInteractive100 = "#994cf2";
 export const ColorTextInteractive300 = "#994cf2";
+export const ColorTextError = "#212121";
+export const ColorTextWarning = "#212121";
 export const ColorIcon100 = "#212121";
@@ -255,2 +258,12 @@ export const ColorIcon200 = "#ffffff";
 export const ColorBaseGrey050 = "#f6f6f6";
+export const Duration100 = "70ms";
+export const Duration150 = "130ms";
+export const Duration200 = "160ms";
+export const Duration250 = "190ms";
+export const Duration300 = "220ms";
+export const Duration350 = "250ms";
+export const Duration400 = "300ms";
+export const EasingStandard = "cubic-bezier(0.45,0,0.40,1)";
+export const EasingDecelerated = "cubic-bezier(0,0,0.40,1)";
+export const EasingAccelerated = "cubic-bezier(0.50,0,1,1)";
 export const BorderWidth100 = 1;
@@ -260,2 +273,5 @@ export const BorderWidth200 = 2;
 export const BorderWidth400 = 8;
+export const BorderWidth500 = 12;
+export const BorderWidth600 = 16;
+export const BorderWidth700 = 24;
 export const BorderWidthNone = 0;
@@ -412,2 +428,3 @@ export const FontBodyFontFamily = "'Rubik', sans-serif";
 export const SizingIcon400 = 40;
+export const SizingIcon500 = 60;
 export const SizingItem100 = 24;
@@ -417,2 +434,3 @@ export const SizingItem200 = 28;
 export const SizingItem400 = 48;
+export const SizingItem450 = 52;
 export const SizingItem500 = 64;
@@ -419,0 +437,0 @@ export const SizingItem000 = 20;

build/js/variablesDarkTheme.js

 /**
  * Do not edit directly
- * Generated on Fri, 30 Apr 2021 10:24:10 GMT
+ * Generated on Thu, 27 May 2021 09:23:44 GMT
  */
@@ -25,2 +25,3 @@
 export const ColorBgUi300 = "#323232";
+export const ColorBgUi300Inverted = "#eeeeee";
 export const ColorBgHeader100 = "#212121";
@@ -72,3 +73,3 @@ export const ColorBgInteractive100 = "#b985f6";
 export const ColorText200 = "#cacaca";
-export const ColorText300 = "#323232";
+export const ColorText300 = "#b8b8b8";
 export const ColorText400 = "#b8b8b8";
@@ -82,2 +83,4 @@ export const ColorTextLink = "#54a8c9";
 export const ColorTextInteractive300 = "#b985f6";
+export const ColorTextError = "#ffffff";
+export const ColorTextWarning = "#ffffff";
 export const ColorIcon100 = "#ffffff";
@@ -256,2 +259,12 @@ export const ColorIcon200 = "#212121";
 export const ColorBaseGrey050 = "#f6f6f6";
+export const Duration100 = "70ms";
+export const Duration150 = "130ms";
+export const Duration200 = "160ms";
+export const Duration250 = "190ms";
+export const Duration300 = "220ms";
+export const Duration350 = "250ms";
+export const Duration400 = "300ms";
+export const EasingStandard = "cubic-bezier(0.45,0,0.40,1)";
+export const EasingDecelerated = "cubic-bezier(0,0,0.40,1)";
+export const EasingAccelerated = "cubic-bezier(0.50,0,1,1)";
 export const BorderWidth100 = 1;
@@ -261,2 +274,5 @@ export const BorderWidth200 = 2;
 export const BorderWidth400 = 8;
+export const BorderWidth500 = 12;
+export const BorderWidth600 = 16;
+export const BorderWidth700 = 24;
 export const BorderWidthNone = 0;
@@ -413,2 +429,3 @@ export const FontBodyFontFamily = "'Rubik', sans-serif";
 export const SizingIcon400 = 40;
+export const SizingIcon500 = 60;
 export const SizingItem100 = 24;
@@ -418,2 +435,3 @@ export const SizingItem200 = 28;
 export const SizingItem400 = 48;
+export const SizingItem450 = 52;
 export const SizingItem500 = 64;
@@ -420,0 +438,0 @@ export const SizingItem000 = 20;

build/js/variablesLegacyTheme.js

 /**
  * Do not edit directly
- * Generated on Mon, 03 May 2021 09:44:13 GMT
+ * Generated on Thu, 27 May 2021 09:23:48 GMT
  */
@@ -25,2 +25,3 @@
 export const ColorBgUi300 = "#eeeeee";
+export const ColorBgUi300Inverted = "#323232";
 export const ColorBgHeader100 = "#ffffff";
@@ -81,2 +82,4 @@ export const ColorBgInteractive100 = "#994cf2";
 export const ColorTextInteractive300 = "#2a76d7";
+export const ColorTextError = "#dc3838";
+export const ColorTextWarning = "#ea7400";
 export const ColorIcon100 = "#454545";
@@ -255,2 +258,12 @@ export const ColorIcon200 = "#ffffff";
 export const ColorBaseGrey050 = "#f6f6f6";
+export const Duration100 = "70ms";
+export const Duration150 = "130ms";
+export const Duration200 = "160ms";
+export const Duration250 = "190ms";
+export const Duration300 = "220ms";
+export const Duration350 = "250ms";
+export const Duration400 = "300ms";
+export const EasingStandard = "cubic-bezier(0.45,0,0.40,1)";
+export const EasingDecelerated = "cubic-bezier(0,0,0.40,1)";
+export const EasingAccelerated = "cubic-bezier(0.50,0,1,1)";
 export const BorderWidth100 = 1;
@@ -260,2 +273,5 @@ export const BorderWidth200 = 2;
 export const BorderWidth400 = 8;
+export const BorderWidth500 = 12;
+export const BorderWidth600 = 16;
+export const BorderWidth700 = 24;
 export const BorderWidthNone = 0;
@@ -412,2 +428,3 @@ export const FontBodyFontFamily = "'Open Sans', sans-serif";
 export const SizingIcon400 = 40;
+export const SizingIcon500 = 60;
 export const SizingItem100 = 24;
@@ -417,2 +434,3 @@ export const SizingItem200 = 28;
 export const SizingItem400 = 48;
+export const SizingItem450 = 52;
 export const SizingItem500 = 64;
@@ -419,0 +437,0 @@ export const SizingItem000 = 20;

build/json/variables.json

@@ -21,2 +21,3 @@ {
   "ColorBgUi300": "#eeeeee",
+  "ColorBgUi300Inverted": "#323232",
   "ColorBgHeader100": "#ffffff",
@@ -77,2 +78,4 @@ "ColorBgInteractive100": "#994cf2",
   "ColorTextInteractive300": "#994cf2",
+  "ColorTextError": "#212121",
+  "ColorTextWarning": "#212121",
   "ColorIcon100": "#212121",
@@ -251,2 +254,12 @@ "ColorIcon200": "#ffffff",
   "ColorBaseGrey050": "#f6f6f6",
+  "Duration100": "70ms",
+  "Duration150": "130ms",
+  "Duration200": "160ms",
+  "Duration250": "190ms",
+  "Duration300": "220ms",
+  "Duration350": "250ms",
+  "Duration400": "300ms",
+  "EasingStandard": "cubic-bezier(0.45,0,0.40,1)",
+  "EasingDecelerated": "cubic-bezier(0,0,0.40,1)",
+  "EasingAccelerated": "cubic-bezier(0.50,0,1,1)",
   "BorderWidth100": 1,
@@ -256,2 +269,5 @@ "BorderWidth200": 2,
   "BorderWidth400": 8,
+  "BorderWidth500": 12,
+  "BorderWidth600": 16,
+  "BorderWidth700": 24,
   "BorderWidthNone": 0,
@@ -408,2 +424,3 @@ "FontBodyFontFamily": "'Rubik', sans-serif",
   "SizingIcon400": 40,
+  "SizingIcon500": 60,
   "SizingItem100": 24,
@@ -413,2 +430,3 @@ "SizingItem200": 28,
   "SizingItem400": 48,
+  "SizingItem450": 52,
   "SizingItem500": 64,
@@ -415,0 +433,0 @@ "SizingItem000": 20,

build/json/variablesDarkTheme.json

@@ -21,2 +21,3 @@ {
   "ColorBgUi300": "#323232",
+  "ColorBgUi300Inverted": "#eeeeee",
   "ColorBgHeader100": "#212121",
@@ -68,3 +69,3 @@ "ColorBgInteractive100": "#b985f6",
   "ColorText200": "#cacaca",
-  "ColorText300": "#323232",
+  "ColorText300": "#b8b8b8",
   "ColorText400": "#b8b8b8",
@@ -78,2 +79,4 @@ "ColorTextLink": "#54a8c9",
   "ColorTextInteractive300": "#b985f6",
+  "ColorTextError": "#ffffff",
+  "ColorTextWarning": "#ffffff",
   "ColorIcon100": "#ffffff",
@@ -252,2 +255,12 @@ "ColorIcon200": "#212121",
   "ColorBaseGrey050": "#f6f6f6",
+  "Duration100": "70ms",
+  "Duration150": "130ms",
+  "Duration200": "160ms",
+  "Duration250": "190ms",
+  "Duration300": "220ms",
+  "Duration350": "250ms",
+  "Duration400": "300ms",
+  "EasingStandard": "cubic-bezier(0.45,0,0.40,1)",
+  "EasingDecelerated": "cubic-bezier(0,0,0.40,1)",
+  "EasingAccelerated": "cubic-bezier(0.50,0,1,1)",
   "BorderWidth100": 1,
@@ -257,2 +270,5 @@ "BorderWidth200": 2,
   "BorderWidth400": 8,
+  "BorderWidth500": 12,
+  "BorderWidth600": 16,
+  "BorderWidth700": 24,
   "BorderWidthNone": 0,
@@ -409,2 +425,3 @@ "FontBodyFontFamily": "'Rubik', sans-serif",
   "SizingIcon400": 40,
+  "SizingIcon500": 60,
   "SizingItem100": 24,
@@ -414,2 +431,3 @@ "SizingItem200": 28,
   "SizingItem400": 48,
+  "SizingItem450": 52,
   "SizingItem500": 64,
@@ -416,0 +434,0 @@ "SizingItem000": 20,

build/json/variablesLegacyTheme.json

@@ -21,2 +21,3 @@ {
   "ColorBgUi300": "#eeeeee",
+  "ColorBgUi300Inverted": "#323232",
   "ColorBgHeader100": "#ffffff",
@@ -77,2 +78,4 @@ "ColorBgInteractive100": "#994cf2",
   "ColorTextInteractive300": "#2a76d7",
+  "ColorTextError": "#dc3838",
+  "ColorTextWarning": "#ea7400",
   "ColorIcon100": "#454545",
@@ -251,2 +254,12 @@ "ColorIcon200": "#ffffff",
   "ColorBaseGrey050": "#f6f6f6",
+  "Duration100": "70ms",
+  "Duration150": "130ms",
+  "Duration200": "160ms",
+  "Duration250": "190ms",
+  "Duration300": "220ms",
+  "Duration350": "250ms",
+  "Duration400": "300ms",
+  "EasingStandard": "cubic-bezier(0.45,0,0.40,1)",
+  "EasingDecelerated": "cubic-bezier(0,0,0.40,1)",
+  "EasingAccelerated": "cubic-bezier(0.50,0,1,1)",
   "BorderWidth100": 1,
@@ -256,2 +269,5 @@ "BorderWidth200": 2,
   "BorderWidth400": 8,
+  "BorderWidth500": 12,
+  "BorderWidth600": 16,
+  "BorderWidth700": 24,
   "BorderWidthNone": 0,
@@ -408,2 +424,3 @@ "FontBodyFontFamily": "'Open Sans', sans-serif",
   "SizingIcon400": 40,
+  "SizingIcon500": 60,
   "SizingItem100": 24,
@@ -413,2 +430,3 @@ "SizingItem200": 28,
   "SizingItem400": 48,
+  "SizingItem450": 52,
   "SizingItem500": 64,
@@ -415,0 +433,0 @@ "SizingItem000": 20,

changelog.md

@@ -0,1 +1,26 @@
+# 0.0.6
+## Added
+- new tokens:
+  `sizing-item-450`
+  `sizing-icon-500`
+  `border-width-500`
+  `border-width-600`
+  `border-width-700`
+  `duration-100`
+  `duration-150`
+  `duration-200`
+  `duration-250`
+  `duration-300`
+  `duration-350`
+  `duration-400`
+  `easing-standard`
+  `easing-decelerated`
+  `easing-accelerated`
+  `color-text-error`
+  `color-text-warning`
+  `color-bg-ui-300-inverted`
+
+## Fixed
+  - `color-text-300` value for dark theme
+  
 # 0.0.5
@@ -2,0 +27,0 @@ ## Fixed

config.js

@@ -46,2 +46,4 @@ const StyleDictionary = require("style-dictionary");
   "src/colorPrimaryVariant.json",
+  "src/duration.json",
+  "src/easing.json",
   "src/color.json",
@@ -48,0 +50,0 @@ "src/colorBase.json",

package.json

 {
   "name": "@quadient/design-tokens",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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/border.json

@@ -8,5 +8,8 @@ {
       "300": { "value": 4, "unit": "px" },
-      "400": { "value": 8, "unit": "px" }
+      "400": { "value": 8, "unit": "px" },
+      "500": { "value": 12, "unit": "px" },
+      "600": { "value": 16, "unit": "px" },
+      "700": { "value": 24, "unit": "px" }
     }
   }
 }

src/color.json

@@ -13,2 +13,5 @@ {
       },
+      "ui300-inverted": {
+        "value": "{color.base.grey.900.value}"
+      },
       "header100": {
@@ -234,2 +237,8 @@ "value": "{color.base.white.value}"
         "value": "{color.primary.value}"
+      },
+      "error": {
+        "value": "{color.base.grey1000.value}"
+      },
+      "warning": {
+        "value": "{color.base.grey1000.value}"
       }
@@ -236,0 +245,0 @@ },

src/darkTheme/color.json

@@ -13,2 +13,5 @@ {
       },
+      "ui300-inverted": {
+        "value": "{color.base.grey.100.value}"
+      },
       "header100": {
@@ -199,3 +202,3 @@ "value": "{color.base.grey1000.value}"
       "300": {
-        "value": "{color.base.grey.900.value}"
+        "value": "{color.base.grey.400.value}"
       },
@@ -225,2 +228,8 @@ "400": {
         "value": "{color.primary.value}"
+      },
+      "error": {
+        "value": "{color.base.white.value}"
+      },
+      "warning": {
+        "value": "{color.base.white.value}"
       }
@@ -227,0 +236,0 @@ },

src/legacyTheme/color.json

@@ -40,3 +40,5 @@ {
         "interactive200-pressed": { "value": "{color.brand.100.value}" },
-        "interactive300": { "value": "{color.brand.100.value}" }
+        "interactive300": { "value": "{color.brand.100.value}" },
+        "error": { "value": "{color.base.red.500.value}" },
+        "warning": { "value": "{color.base.orange.500.value}" }
       },
@@ -43,0 +45,0 @@ "icon": {

src/sizing.json

@@ -7,3 +7,4 @@ {
       "300": { "value": 30, "unit": "px" },
-      "400": { "value": 40, "unit": "px" }
+      "400": { "value": 40, "unit": "px" },
+      "500": { "value": 60, "unit": "px" }
     },
@@ -16,2 +17,3 @@ "item": {
       "400": { "value": 48, "unit": "px" },
+      "450": { "value": 52, "unit": "px" },
       "500": { "value": 64, "unit": "px" }
@@ -18,0 +20,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

321213

increased by3.33%

Number of package files

44

increased by4.76%

Lines of code

5484

increased by3.92%

No dependency changes