@zohodesk/svg 1.0.0-beta.38 → 1.0.0-beta.39

package/preprocess/svgAppearanceColors.js

@@ -1,12 +1,14 @@
 var { svgAppearanceVariables } = require('./json/svgAppearanceVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
 let fs = require('fs');
 let path = require('path');
 let baseFolder = 'Appearance';
 let mode = ['default', 'dark'];
 let modeFiles = [];
+let prefix=`\n\t--zdt_svg_`;
 mode.forEach(mode => {
-    let modeFilesString = `../src/svg/${baseFolder}/${mode}/mode/${mode}EmptyStates.module.css`;
-    modeFiles.push(path.join(__dirname, modeFilesString));
+  let modeFilesString = `../assets/${baseFolder}/${mode}/mode/${mode}EmptyStates.module.css`;
+  modeFiles.push(path.join(__dirname, modeFilesString));
 });
 let files = modeFiles;
 
@@ -14,47 +16,48 @@ function generate(mode) {
   let exportVariables = [];
   let counter = 0;
   let newLine = '';
-  svgAppearanceVariables.map(svgVariable => {
-    let commentName = svgVariable[3];
+
+  svgAppearanceVariables.forEach((element) => {
+    let commentName = element.comment;
     counting = counter++;
     if (counting != 0) {
       newLine = `\n\t`;
     }
-    if (mode == 'default') {
-      let svgDefaultColors = svgVariable[1][1];
 
-      colorsResult = [
-        `\n\t--zdt_svg_${svgVariable[0]}: ${svgDefaultColors};`
-      ];
-      exportVariables.push(
-        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
-        colorsResult
-      );
-    } else if (mode == 'dark') {
-      let svgDarkColors = svgVariable[2][1];
+    exportVariables.push(commentName ? `${newLine}\n\t/* ${commentName} */` : '');
 
-      colorsResult = [
-        `\n\t--zdt_svg_${svgVariable[0]}: ${svgDarkColors};`
-      ];
-      exportVariables.push(
-        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
-        colorsResult
-      );
-    }
+    Object.entries(element.data).map(([key, value]) => {
+      if (mode == 'default') {
+        let svgDefaultColors = value.light[0];
+
+        colorsResult = [
+          `${prefix}${key}: ${svgDefaultColors};`
+        ];
+        exportVariables.push(colorsResult);
+      } else if (mode == 'dark') {
+        let svgDarkColors = value.dark[0];
+
+        colorsResult = [
+          `${prefix}${key}: ${svgDarkColors};`
+        ];
+        exportVariables.push(colorsResult);
+      }
+    })
   });
   return exportVariables.join('');
 }
 
 let arrayIndexCounter = 0;
 mode.forEach(mode => {
-    let fileString = files[arrayIndexCounter];
-    // let splitPath = fileString.split(/\\/g);
-    let getMode = mode;
-    fs.writeFileSync(
-      fileString,
-      `[data-mode='${getMode}'] {${generate(
-        getMode
-      )}\n}`
-    );
-    arrayIndexCounter++;
+  let fileString = files[arrayIndexCounter];
+  // let splitPath = fileString.split(/\\/g);
+  let getMode = mode;
+  ensureDirectoryExistence(fileString);
+  fs.writeFileSync(
+    fileString,
+    `[data-mode='${getMode}'] {${generate(
+      getMode
+    )}\n}`
+  );
+  arrayIndexCounter++;
 });

package/preprocess/svgThemeColors.js

@@ -1,13 +1,15 @@
 var { svgThemeVariables } = require('./json/svgThemeVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
 let fs = require('fs');
 let path = require('path');
 let baseFolder = 'Appearance';
 let mode = ['default', 'dark'];
 let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
 let themeFiles = [];
+let prefix=`\n\t--zdt_cta_`;
 mode.forEach(mode => {
   themes.forEach(theme => {
-    let themeFilesString = `../src/svg/${baseFolder}/${mode}/themes/${theme}/${
+    let themeFilesString = `../assets/${baseFolder}/${mode}/themes/${theme}/${
       theme + capitalizeFirstLetter(mode)
     }CTATheme.module.css`;
     themeFiles.push(path.join(__dirname, themeFilesString));
@@ -21,48 +23,51 @@ function capitalizeFirstLetter(string) {
 
 function generate(mode, theme) {
   let exportVariables = [];
-  svgThemeVariables.map(svgVariable => {
-    if (mode == 'default') {
-      let svgDefaultColors = svgVariable[1][1];
-      let colorsResult = '';
-      if (theme == 'blue') {
-        colorsResult = [
-          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[0]}`
-        ];
-      } else if (theme == 'green') {
-        colorsResult = [
-          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[1]}`
-        ];
-      } else if (theme == 'orange') {
-        colorsResult = [
-          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[2]}`
-        ];
-      } else if (theme == 'red') {
-        colorsResult = [
-          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[3]}`
-        ];
-      } else if (theme == 'yellow') {
-        colorsResult = [
-          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[4]}`
-        ];
-      }
-      exportVariables.push(colorsResult);
-    } else if (mode == 'dark') {
-      let svgDarkColors = svgVariable[2][1];
-      let colorsResult = '';
-      if (theme == 'blue') {
-        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[0]}`];
-      } else if (theme == 'green') {
-        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[1]}`];
-      } else if (theme == 'orange') {
-        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[2]}`];
-      } else if (theme == 'red') {
-        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[3]}`];
-      } else if (theme == 'yellow') {
-        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[4]}`];
-      }
-      exportVariables.push(colorsResult);
-    }
+
+  svgThemeVariables.forEach((element) => {
+    Object.entries(element).map(([key, value]) => {
+        if (mode == 'default') {
+          let svgDefaultColors = value.light;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[0]}`
+            ];
+          } else if (theme == 'green') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[1]}`
+            ];
+          } else if (theme == 'orange') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[2]}`
+            ];
+          } else if (theme == 'red') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[3]}`
+            ];
+          } else if (theme == 'yellow') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[4]}`
+            ];
+          }
+          exportVariables.push(colorsResult);
+        } else if (mode == 'dark') {
+          let svgDarkColors = value.dark;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[0]}`];
+          } else if (theme == 'green') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[1]}`];
+          } else if (theme == 'orange') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[2]}`];
+          } else if (theme == 'red') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[3]}`];
+          } else if (theme == 'yellow') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[4]}`];
+          }
+          exportVariables.push(colorsResult);
+        }
+    })
   });
   return exportVariables.join(';');
 }
@@ -74,6 +79,7 @@ mode.forEach(mode => {
     // let splitPath = fileString.split(/\\/g);
     let getMode = mode;
     let getTheme = theme;
+    ensureDirectoryExistence(fileString);
     fs.writeFileSync(
       fileString,
       `[data-mode='${getMode}'][data-theme='${getTheme}'] {${generate(
@@ -83,8 +89,4 @@ mode.forEach(mode => {
     );
     arrayIndexCounter++;
   });
-});
-
-// files.forEach(file => {
-
-// })
+});

package/src/Provider.js

@@ -5,19 +5,19 @@ import Switch from '@zohodesk/components/lib/Switch/Switch';
 import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
 import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
 /* default mode & themes */
-import './svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './svg/Appearance/default/mode/defaultEmptyStates.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/mode/defaultEmptyStates.module.css';
 /* dark mode & themes */
-import './svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './svg/Appearance/dark/mode/darkEmptyStates.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/mode/darkEmptyStates.module.css';
 
 export default class Provider extends React.Component {
   constructor(props) {

package/src/index.js

@@ -1,7 +1,7 @@
 export { default as React } from 'react';
 export { default as ReactDOM } from 'react-dom';
 export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
 
 export { default as _provider } from './Provider';
 export { default as SVG } from './svg/SVG';

package/build/Unusedfiles.json

@@ -1 +0,0 @@
-["/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/SvgLoader.js","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/images/EmptyContactInfo.svg","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/images/EmptyFilter.svg","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/utils.js"]

package/es/Provider.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
-import { Container } from '@zohodesk/components/lib/Layout';
-import Switch from '@zohodesk/components/lib/Switch/Switch';
-import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
-/* default mode & themes */
-
-import './svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './svg/Appearance/default/mode/defaultEmptyStates.module.css';
-/* dark mode & themes */
-
-import './svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './svg/Appearance/dark/mode/darkEmptyStates.module.css';
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-    this.switchMode = this.switchMode.bind(this);
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let {
-      appearanceName,
-      themeName
-    } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-    return /*#__PURE__*/React.createElement(AppContainer, {
-      customProps: {
-        ExtraProps: {
-          'data-mode': appearanceName,
-          'data-theme': themeName
-        }
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        left: '50%',
-        transform: 'translate(-50%)',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '3',
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Switch, {
-      id: "switchMode",
-      text: "Light/Night Mode",
-      labelSize: "small",
-      onChange: this.switchMode,
-      checked: appearanceName == 'dark'
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))));
-  }
-
-}

package/es/index.js

@@ -1,9 +0,0 @@
-export { default as React } from 'react';
-export { default as ReactDOM } from 'react-dom';
-export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-export { default as _provider } from './Provider';
-export { default as SVG } from './svg/SVG';
-export { default as SVG__emptystate } from './svg/docs/SVG__default.docs';
-export { default as SVG__common } from './svg/docs/SVG__common.docs';
-export { default as SVG__errorstate } from './svg/docs/SVG__errorstate.docs';

package/es/svg/Appearance/dark/mode/darkEmptyStates.module.css

@@ -1,37 +0,0 @@
-[data-mode='dark'] {
-	/* default palette */
-	--zdt_svg_default_primary_fill: var(--zdt_cta_primary_fill);
-	--zdt_svg_default_primary_stroke: var(--zdt_cta_primary_stroke);
-	--zdt_svg_default_secondary_fill: var(--zdt_cta_secondary_fill);
-	--zdt_svg_default_secondary_plainfill: var(--zdt_cta_secondary_plainfill);
-	--zdt_svg_default_plus: #479dff;
-	--zdt_svg_default_cross: #5cc1a5;
-	--zdt_svg_default_medium_circle: #ff6b6b;
-	--zdt_svg_default_tiny_circle: #4ac064;
-	--zdt_svg_default_small_circle: #ff6b6b;
-	--zdt_svg_default_circle_fill: var(--dot_white);
-	
-	/* dark palette */
-	--zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
-	--zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
-	--zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
-	--zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
-	--zdt_svg_dark_plus: #479dff;
-	--zdt_svg_dark_cross: #5cc1a5;
-	--zdt_svg_dark_medium_circle: #ff6b6b;
-	--zdt_svg_dark_tiny_circle: #4ac064;
-	--zdt_svg_dark_small_circle: #ff6b6b;
-	--zdt_svg_dark_circle_fill: var(--dot_white);
-	
-	/* danger palette */
-	--zdt_svg_danger_primary_fill: #ff6f00;
-	--zdt_svg_danger_primary_stroke: #479dff;
-	--zdt_svg_danger_secondary_fill: #334b68;
-	--zdt_svg_danger_secondary_plainfill: #334b68;
-	--zdt_svg_danger_plus: #479dff;
-	--zdt_svg_danger_cross: #5cc1a5;
-	--zdt_svg_danger_medium_circle: #ff6b6b;
-	--zdt_svg_danger_tiny_circle: #4ac064;
-	--zdt_svg_danger_small_circle: #ff6b6b;
-	--zdt_svg_danger_circle_fill: var(--dot_white);
-}

package/es/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='blue'] {
-	--zdt_cta_primary_fill: #828994;
-	--zdt_cta_primary_stroke: #479dff;
-	--zdt_cta_secondary_fill: #334b68;
-	--zdt_cta_secondary_plainfill: #334b68;
-	--zdt_cta_primary_dark_fill: #828994;
-	--zdt_cta_primary_dark_stroke: #479dff;
-	--zdt_cta_secondary_dark_fill: #334b68;
-	--zdt_cta_secondary_dark_plainfill: #334b68
-}

package/es/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='green'] {
-	--zdt_cta_primary_fill: #45a159;
-	--zdt_cta_primary_stroke: #45a159;
-	--zdt_cta_secondary_fill: rgba(69, 161, 89, 0.25);
-	--zdt_cta_secondary_plainfill: #45a159;
-	--zdt_cta_primary_dark_fill: #45a159;
-	--zdt_cta_primary_dark_stroke: #45a159;
-	--zdt_cta_secondary_dark_fill: rgba(69, 161, 89, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #45a159
-}

package/es/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='orange'] {
-	--zdt_cta_primary_fill: #ff801f;
-	--zdt_cta_primary_stroke: #ff801f;
-	--zdt_cta_secondary_fill: rgba(255, 128, 31, 0.25);
-	--zdt_cta_secondary_plainfill: #ff801f;
-	--zdt_cta_primary_dark_fill: #ff801f;
-	--zdt_cta_primary_dark_stroke: #ff801f;
-	--zdt_cta_secondary_dark_fill: rgba(255, 128, 31, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #ff801f
-}

package/es/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='red'] {
-	--zdt_cta_primary_fill: #e94f4f;
-	--zdt_cta_primary_stroke: #e94f4f;
-	--zdt_cta_secondary_fill: rgba(233, 79, 79, 0.25);
-	--zdt_cta_secondary_plainfill: #e94f4f;
-	--zdt_cta_primary_dark_fill: #e94f4f;
-	--zdt_cta_primary_dark_stroke: #e94f4f;
-	--zdt_cta_secondary_dark_fill: rgba(233, 79, 79, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #e94f4f
-}

package/es/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='yellow'] {
-	--zdt_cta_primary_fill: #d79835;
-	--zdt_cta_primary_stroke: #d79835;
-	--zdt_cta_secondary_fill: rgba(215, 152, 53, 0.25);
-	--zdt_cta_secondary_plainfill: #d79835;
-	--zdt_cta_primary_dark_fill: #d79835;
-	--zdt_cta_primary_dark_stroke: #d79835;
-	--zdt_cta_secondary_dark_fill: rgba(215, 152, 53, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #d79835
-}

package/es/svg/Appearance/default/mode/defaultEmptyStates.module.css

@@ -1,37 +0,0 @@
-[data-mode='default'] {
-	/* default palette */
-	--zdt_svg_default_primary_fill: var(--zdt_cta_primary_fill);
-	--zdt_svg_default_primary_stroke: var(--zdt_cta_primary_stroke);
-	--zdt_svg_default_secondary_fill: var(--zdt_cta_secondary_fill);
-	--zdt_svg_default_secondary_plainfill: var(--zdt_cta_secondary_plainfill);
-	--zdt_svg_default_plus: #3f70b7;
-	--zdt_svg_default_cross: #5cc1a5;
-	--zdt_svg_default_medium_circle: #e56471;
-	--zdt_svg_default_tiny_circle: #5cc1a5;
-	--zdt_svg_default_small_circle: #010101;
-	--zdt_svg_default_circle_fill: var(--dot_white);
-	
-	/* dark palette */
-	--zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
-	--zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
-	--zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
-	--zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
-	--zdt_svg_dark_plus: #479dff;
-	--zdt_svg_dark_cross: #5cc1a5;
-	--zdt_svg_dark_medium_circle: #e56471;
-	--zdt_svg_dark_tiny_circle: #5cc1a5;
-	--zdt_svg_dark_small_circle: #010101;
-	--zdt_svg_dark_circle_fill: var(--dot_white);
-	
-	/* danger palette */
-	--zdt_svg_danger_primary_fill: #ff6f00;
-	--zdt_svg_danger_primary_stroke: #010101;
-	--zdt_svg_danger_secondary_fill: rgba(63, 112, 183, 0.25);
-	--zdt_svg_danger_secondary_plainfill: #3f70b7;
-	--zdt_svg_danger_plus: #3f70b7;
-	--zdt_svg_danger_cross: #5cc1a5;
-	--zdt_svg_danger_medium_circle: #e56471;
-	--zdt_svg_danger_tiny_circle: #5cc1a5;
-	--zdt_svg_danger_small_circle: #010101;
-	--zdt_svg_danger_circle_fill: var(--dot_white);
-}

package/es/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='blue'] {
-	--zdt_cta_primary_fill: #0a73eb;
-	--zdt_cta_primary_stroke: #221f1f;
-	--zdt_cta_secondary_fill: rgba(10, 115, 235, 0.25);
-	--zdt_cta_secondary_plainfill: #0a73eb;
-	--zdt_cta_primary_dark_fill: #a6add7;
-	--zdt_cta_primary_dark_stroke: #fff;
-	--zdt_cta_secondary_dark_fill: #3f70b7;
-	--zdt_cta_secondary_dark_plainfill: #3f70b7
-}

package/es/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='green'] {
-	--zdt_cta_primary_fill: #26a942;
-	--zdt_cta_primary_stroke: #010101;
-	--zdt_cta_secondary_fill: rgba(38, 169, 66, 0.25);
-	--zdt_cta_secondary_plainfill: #26a942;
-	--zdt_cta_primary_dark_fill: #26a942;
-	--zdt_cta_primary_dark_stroke: #fff;
-	--zdt_cta_secondary_dark_fill: rgba(38, 169, 66, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #26a942
-}

package/es/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='orange'] {
-	--zdt_cta_primary_fill: #e57717;
-	--zdt_cta_primary_stroke: #010101;
-	--zdt_cta_secondary_fill: rgba(229, 119, 23, 0.25);
-	--zdt_cta_secondary_plainfill: #e57717;
-	--zdt_cta_primary_dark_fill: #e57717;
-	--zdt_cta_primary_dark_stroke: #fff;
-	--zdt_cta_secondary_dark_fill: rgba(229, 119, 23, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #e57717
-}

package/es/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='red'] {
-	--zdt_cta_primary_fill: #de3535;
-	--zdt_cta_primary_stroke: #010101;
-	--zdt_cta_secondary_fill: rgba(222, 53, 53, 0.25);
-	--zdt_cta_secondary_plainfill: #de3535;
-	--zdt_cta_primary_dark_fill: #de3535;
-	--zdt_cta_primary_dark_stroke: #fff;
-	--zdt_cta_secondary_dark_fill: rgba(222, 53, 53, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #de3535
-}

package/es/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='yellow'] {
-	--zdt_cta_primary_fill: #e8b923;
-	--zdt_cta_primary_stroke: #010101;
-	--zdt_cta_secondary_fill: rgba(232, 185, 35, 0.25);
-	--zdt_cta_secondary_plainfill: #e8b923;
-	--zdt_cta_primary_dark_fill: #e8b923;
-	--zdt_cta_primary_dark_stroke: #fff;
-	--zdt_cta_secondary_dark_fill: rgba(232, 185, 35, 0.25);
-	--zdt_cta_secondary_dark_plainfill: #e8b923
-}