@zohodesk/components 1.6.6 → 1.6.7

package/lib/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: 34px;
-  --avatar_height: 34px;
+  --avatar_width: var(--zd_size34);
+  --avatar_height: var(--zd_size34);
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: 22px;
-  --avatar_width: 22px;
+  --avatar_height: var(--zd_size22);
+  --avatar_width: var(--zd_size22);
 }
 .xxsmall {
-  --avatar_height: 18px;
-  --avatar_width: 18px;
+  --avatar_height: var(--zd_size18);
+  --avatar_width: var(--zd_size18);
 }
 .xsmall {
-  --avatar_height: 30px;
-  --avatar_width: 30px;
+  --avatar_height: var(--zd_size30);
+  --avatar_width: var(--zd_size30);
 }
 
 .medium {
-  --avatar_height: 34px;
-  --avatar_width: 34px;
+  --avatar_height: var(--zd_size34);
+  --avatar_width: var(--zd_size34);
 }
 
 .xmedium {
-  --avatar_height: 40px;
-  --avatar_width: 40px;
+  --avatar_height: var(--zd_size40);
+  --avatar_width: var(--zd_size40);
 }
 
 .large {
-  --avatar_height: 60px;
-  --avatar_width: 60px;
+  --avatar_height: var(--zd_size60);
+  --avatar_width: var(--zd_size60);
 }
 
 .xlarge {
-  --avatar_height: 80px;
-  --avatar_width: 80px;
+  --avatar_height: var(--zd_size80);
+  --avatar_width: var(--zd_size80);
 }

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -59,12 +59,12 @@
 
 .padding_small,
 .padding_xmedium {
-    --local_padding: 3px;
+    --local_padding: var(--zd_size3);
 }
 
 .padding_medium,
 .padding_large {
-    --local_padding: 8px;
+    --local_padding: var(--zd_size8);
 }
 
 .xmedium {

package/lib/v1/Switch/css/Switch_v1.module.css

@@ -4,47 +4,47 @@
     gap: var(--zd_size6) ;
 }
 .small {
-    --local-switch-track-width: 22px;
-    --local-switch-track-height: 12px;
+    --local-switch-track-width: var(--zd_size22);
+    --local-switch-track-height: var(--zd_size12);
     --local-switch-track-border-radius: 8px;
-    --local-switch-thumb-size: 10px;
-    --local-switch-onLabel-height: 6px;
-    --local-switch-onLabel-left: 5px;
-    --local-switch-offLabel-size: 7px;
-    --local-switch-offLabel-right: 2px;
+    --local-switch-thumb-size: var(--zd_size10);
+    --local-switch-onLabel-height: var(--zd_size6);
+    --local-switch-onLabel-left: var(--zd_size5);
+    --local-switch-offLabel-size: var(--zd_size7);
+    --local-switch-offLabel-right: var(--zd_size2);
     --local-switch-onLabel-scaleX: 1.2;
 }
 .medium {
-    --local-switch-track-width: 28px;
-    --local-switch-track-height: 16px;
+    --local-switch-track-width: var(--zd_size28);
+    --local-switch-track-height: var(--zd_size16);
     --local-switch-track-border-radius: 16px;
-    --local-switch-thumb-size: 14px;
-    --local-switch-onLabel-height: 8px;
-    --local-switch-onLabel-left: 6px;
-    --local-switch-offLabel-size: 8px;
-    --local-switch-offLabel-right: 3px;
+    --local-switch-thumb-size: var(--zd_size14);
+    --local-switch-onLabel-height: var(--zd_size8);
+    --local-switch-onLabel-left: var(--zd_size6);
+    --local-switch-offLabel-size: var(--zd_size8);
+    --local-switch-offLabel-right: var(--zd_size3);
     --local-switch-onLabel-scaleX: 1.4;
 }
 .large {
-    --local-switch-track-width: 34px;
-    --local-switch-track-height: 20px;
+    --local-switch-track-width: var(--zd_size34);
+    --local-switch-track-height: var(--zd_size20);
     --local-switch-track-border-radius: 10px;
-    --local-switch-thumb-size: 18px;
-    --local-switch-onLabel-height: 10px;
-    --local-switch-onLabel-left: 7px;
-    --local-switch-offLabel-size: 9px;
-    --local-switch-offLabel-right: 4px;
+    --local-switch-thumb-size: var(--zd_size18);
+    --local-switch-onLabel-height: var(--zd_size10);
+    --local-switch-onLabel-left: var(--zd_size7);
+    --local-switch-offLabel-size: var(--zd_size9);
+    --local-switch-offLabel-right: var(--zd_size4);
     --local-switch-onLabel-scaleX: 1.6;
 }
 .xlarge {
-    --local-switch-track-width: 40px;
-    --local-switch-track-height: 24px;
+    --local-switch-track-width: var(--zd_size40);
+    --local-switch-track-height: var(--zd_size24);
     --local-switch-track-border-radius: 12px;
-    --local-switch-thumb-size: 22px;
-    --local-switch-onLabel-height: 12px;
-    --local-switch-onLabel-left: 8px;
-    --local-switch-offLabel-size: 10px;
-    --local-switch-offLabel-right: 5px;
+    --local-switch-thumb-size: var(--zd_size22);
+    --local-switch-onLabel-height: var(--zd_size12);
+    --local-switch-onLabel-left: var(--zd_size8);
+    --local-switch-offLabel-size: var(--zd_size10);
+    --local-switch-offLabel-right: var(--zd_size5);
     --local-switch-onLabel-scaleX: 1.8;
 }
 .disabled, .readonly {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -28,13 +28,13 @@
     "build:lib": "cbt build:lib src,assets lib,assets",
     "build:es": "cbt build:es src,assets es,assets",
     "build:es:watch": "cbt build:es src es",
-    "build": "npm run theme:validate && npm run build:lib && npm run build:es",
+    "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
-    "postpublish": "node postPublish.js",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "postpublish": "node ../postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
     "customTest": "node ./__testUtils__/runTest.js",
@@ -61,7 +61,10 @@
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
     "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
     "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
-    "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report "
+    "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report ",
+    "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
+    "publish": "node ../publish.js",
+    "check_package": "node ../check_dependencies.js"
   },
   "devDependencies": {
     "postcss-discard-comments": "^7.0.5",

package/_react-cli.config.js

@@ -1,24 +0,0 @@
-exports.config = {
-  "preprocess": {
-    "runner": "./preprocess/index.js"
-  },
-  "css": {
-    "plugins": {
-      "hasRTL": true,
-      "cssVariableReplacement": true
-    },
-    "patterns": {
-      "cssVariableReplacement": [
-        "**/src/**",
-        "**/lib/**",
-        "**/es/**",
-        "!**/node_modules/**"
-      ],
-      "hasRTL": [
-        "**/src/**",
-        "!**/node_modules/**"
-      ]
-    },
-    "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
-  }
-}