@zohodesk/dot 1.9.7 → 1.9.9

package/README.md

@@ -2,6 +2,15 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.9
+
+- PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 
+
+# 1.9.8
+
+- **DotProvider** - Variables package handled and separated the component & variable import files
+- **Dependency**: @zohodesk/variables@1.3.0 , @zohodesk/components@1.6.6
+
 # 1.9.7
 
 - **Upload** => upload_overlay_bg color contrast fixed

package/es/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top: 0 
+  top: 0  
 }
 
 [dir=ltr] .disableLayer {
-  left: 0 
+  left: 0  
 }
 
 [dir=rtl] .disableLayer {
-  right: 0 
+  right: 0  
 }
 
 .attachmentHover {

package/es/DotProvider/hooks/useDotProvider.js

@@ -1,8 +1,8 @@
 import { useLayoutEffect } from 'react';
 import useDownloadAssetsAndSetAttr from "./useDownloadAssetsAndSetAttr";
-import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
-import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
-import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/pureDarkContrastLightness.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/Dark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/dark/mode/globalTokens_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/Light_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/light/mode/globalTokens_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/PureDark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/mode/globalTokens_PureDarkMode.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/utils/constants.js

@@ -1,3 +1,4 @@
+export const LIBRARY_VARIABLES = 'variables';
 export const LIBRARY_COMPONENT = 'component';
 export const LIBRARY_DOT = 'dot';
 export const LIBRARY_SVG = 'svg';
@@ -9,6 +10,6 @@ export const THEME_COLOR_GREEN = 'green';
 export const THEME_COLOR_ORANGE = 'orange';
 export const THEME_COLOR_RED = 'red';
 export const THEME_COLOR_YELLOW = 'yellow';
-export const LIBRARIES = [LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
+export const LIBRARIES = [LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
 export const THEME_APPEARANCES = [THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_DARK, THEME_APPEARANCE_PURE_DARK];
 export const THEME_COLORS = [THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW];

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -1,5 +1,14 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
 export const themeAppearanceImports = {
+  Lib_LightMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Variables' */
+  "../libraryChunks/appearance/variables/Light_Variables"),
+  Lib_DarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Variables' */
+  "../libraryChunks/appearance/variables/Dark_Variables"),
+  Lib_PureDarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Variables' */
+  "../libraryChunks/appearance/variables/PureDark_Variables"),
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
   "../libraryChunks/appearance/component/Light_Component"),
@@ -29,6 +38,11 @@ export const themeAppearanceImports = {
   '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
 };
 export const themeAppearanceMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Variables',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Variables',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Variables'
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
     [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',

package/es/DotProvider/utils/themeColorAssetsConfig.js

@@ -1,5 +1,50 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
 export const themeColorImports = {
+  Lib_Blue_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Light_Variables"),
+  Lib_Blue_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Dark_Variables"),
+  Lib_Blue_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_PureDark_Variables"),
+  Lib_Green_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Light_Variables"),
+  Lib_Green_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Dark_Variables"),
+  Lib_Green_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_PureDark_Variables"),
+  Lib_Orange_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Light_Variables"),
+  Lib_Orange_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Dark_Variables"),
+  Lib_Orange_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_PureDark_Variables"),
+  Lib_Red_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Light_Variables"),
+  Lib_Red_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Dark_Variables"),
+  Lib_Red_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_PureDark_Variables"),
+  Lib_Yellow_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Light_Variables"),
+  Lib_Yellow_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Dark_Variables"),
+  Lib_Yellow_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables"),
   Lib_Blue_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Component' */
   "../libraryChunks/themes/component/blue/Blue_Light_Component"),
@@ -137,6 +182,33 @@ export const themeColorImports = {
   "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
 };
 export const themeColorMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Variables'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Variables'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Variables'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Variables'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Variables'
+    }
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_COLOR_BLUE]: {
       [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',

package/es/Image/Image.module.css

@@ -1,10 +1,10 @@
 .imgFullSize{
     height:100% ;
-    width:100% 
+    width:100%  
 }
 .imgMaxFullSize{
     max-height:100% ;
-    max-width:100% 
+    max-width:100%  
 }
 .imgFullSize, .imgMaxFullSize{
   /*  Variable:Ignore  */

package/es/Onboarding/css/Onboarding.module.css

@@ -471,7 +471,7 @@
   transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
-  width: 100% 
+  width: 100%  
 }
 
 

package/es/Separator/Separator.module.css

@@ -1,23 +1,23 @@
 .varClass {
-  --separator_fontSize: 15px;
+  --separator_fontSize: var(--zd_font_size15);
 }
 .separator {
   font-size: var(--separator_fontSize);
   margin: 0 var(--zd_size5) ;
 }
 .dot {
-  --separator_fontSize: 8px;
+  --separator_fontSize: var(--zd_font_size8);
 }
 .slash {
-  --separator_fontSize: 10px;
+  --separator_fontSize: var(--zd_font_size10);
   /* line-height: var(--zd_size10); */
 }
 .arrow {
-  --separator_fontSize: 8px;
+  --separator_fontSize: var(--zd_font_size8);
   /* line-height: var(--zd_size7); */
 }
 .comma {
-  --separator_fontSize: 15px;
+  --separator_fontSize: var(--zd_font_size15);
   /* line-height: var(--zd_size13); */
 }
 .none {

package/es/TagWithIcon/TagWithIcon.module.css

@@ -2,8 +2,8 @@
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: 10px;
-  --tag_large_fontSize: 12px;
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
 }
 
 .wrapper {
@@ -20,7 +20,7 @@
 
 .small, .large {
   border: 1px solid var(--tag_border_color);
-  border-radius: var(--zd_size4);
+  border-radius: 4px;
   padding: 0 var(--zd_size6) ;
 }
 

package/es/Upload/Upload.module.css

@@ -4,40 +4,49 @@
   vertical-align: middle;
   cursor: pointer;
   padding: var(--zd_size5) ;
-  border-radius: var(--zd_size2);
+  border-radius: 2px;
 }
+
 .light {
   background-color: var(--zdt_upload_default_bg);
 }
+
 .night {
   background-color: var(--zdt_upload_night_bg);
 }
+
 .overlay {
   position: absolute;
   top: 0 ;
   bottom: 0 ;
   background-color: var(--zdt_upload_overlay_bg);
 }
+
 [dir=ltr] .overlay {
   left: 0 ;
   right: 0 ;
 }
+
 [dir=rtl] .overlay {
   right: 0 ;
   left: 0 ;
 }
+
 .small {
   width: var(--zd_size50) ;
   height: var(--zd_size40) ;
 }
+
 .medium {
   height: var(--zd_size49) ;
   width: var(--zd_size65) ;
 }
+
 .preview {
   opacity: 0.4;
   cursor: default;
 }
+
 .loader {
   position: absolute;
   bottom: calc( var(--zd_size1) * -1 ) ;
@@ -45,31 +54,40 @@
   width: 0% ;
   transition: width var(--zd_transition6) ease;
 }
+
 [dir=ltr] .loader {
   left: 0 ;
 }
+
 [dir=rtl] .loader {
   right: 0 ;
 }
+
 .light .loader {
   background: var(--zdt_upload_loader_default_bg);
 }
+
 .night .loader {
   background: var(--zdt_upload_loader_night_bg);
 }
+
 .uploadimage {
   width: 100% ;
   height: 100% ;
 }
+
 [dir=ltr] .attachInfo {
   padding: var(--zd_size4) 0 0 var(--zd_size8) ;
 }
+
 [dir=rtl] .attachInfo {
   padding: var(--zd_size4) var(--zd_size8) 0 0 ;
 }
+
 .fileIcon {
   font-size: var(--zd_font_size14) ;
 }
+
 .attachsize {
   font-size: var(--zd_font_size10) ;
   letter-spacing: 1px;
@@ -77,12 +95,15 @@
   text-transform: uppercase;
   padding: var(--zd_size4) 0 var(--zd_size2) ;
 }
+
 .light .attachsize {
   color: var(--zdt_upload_attachsize_default_text);
 }
+
 .night .attachsize {
   color: var(--zdt_upload_attachsize_night_text);
 }
+
 .uploadclose {
   height: var(--zd_size12) ;
   width: var(--zd_size12) ;
@@ -92,34 +113,42 @@
   font-size: var(--zd_font_size12) ;
   text-align: center;
 }
+
 [dir=ltr] .uploadclose {
   right: 0 ;
 }
+
 [dir=rtl] .uploadclose {
   left: 0 ;
 }
+
 .light .uploadclose {
   color: var(--zdt_upload_uploadclose_default_text);
   background-color: var(--zdt_upload_uploadclose_default_bg);
 }
+
 .light .uploadclose:hover {
   background-color: var(--zdt_upload_uploadclose_default_hover_text);
 }
+
 .night .uploadclose {
   color: var(--zdt_upload_uploadclose_night_text);
   background-color: var(--zdt_upload_uploadclose_night_bg);
 }
+
 .night .uploadclose:hover {
   background-color: var(--zdt_upload_uploadclose_night_hover_text);
 }
+
 .uploadclose,
 .overlay {
   opacity: 0;
   visibility: hidden;
   transition: var(--zd_transition3);
 }
+
 .container:hover .uploadclose,
 .container:hover .overlay {
   opacity: 1;
   visibility: visible;
-}
+}