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

package/preprocess/json/svgAppearanceVariableJson.js

@@ -0,0 +1,151 @@
+/* sample => 
+  {
+    "comment": "comment name",
+    "data": {
+      "--zdt_variable_name": {
+        'lightMode': ['green'],
+        'nightMode': ['red]
+      }
+    }
+  }
+*/
+
+const svgAppearanceVariables = [
+  {
+    "comment": "default palette",
+    "data": {
+        "default_primary_fill": {
+            'light': ['var(--zdt_cta_primary_fill)'],
+            'dark': ['var(--zdt_cta_primary_fill)']
+        },
+        "default_primary_stroke": {
+            'light': ['var(--zdt_cta_primary_stroke)'],
+            'dark': ['var(--zdt_cta_primary_stroke)']
+        },
+        "default_secondary_fill": {
+            'light': ['var(--zdt_cta_secondary_fill)'],
+            'dark': ['var(--zdt_cta_secondary_fill)']
+        },
+        "default_secondary_plainfill": {
+            'light': ['var(--zdt_cta_secondary_plainfill)'],
+            'dark': ['var(--zdt_cta_secondary_plainfill)']
+        },
+        "default_plus": {
+            'light': ['#3f70b7'],
+            'dark': ['#479dff']
+        },
+        "default_cross": {
+            'light': ['#5cc1a5'],
+            'dark': ['#5cc1a5']
+        },
+        "default_medium_circle": {
+            'light': ['#e56471'],
+            'dark': ['#ff6b6b']
+        },
+        "default_tiny_circle": {
+            'light': ['#5cc1a5'],
+            'dark': ['#4ac064']
+        },
+        "default_small_circle": {
+            'light': ['#010101'],
+            'dark': ['#ff6b6b']
+        },
+        "default_circle_fill": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        }
+    }
+  },
+  {
+    "comment": "dark palette",
+    "data": {
+        "dark_primary_fill": {
+          'light': ['var(--zdt_cta_primary_dark_fill)'],
+          'dark': ['var(--zdt_cta_primary_dark_fill)']
+        },
+        "dark_primary_stroke": {
+          'light': ['var(--zdt_cta_primary_dark_stroke)'],
+          'dark': ['var(--zdt_cta_primary_dark_stroke)']
+        },
+        "dark_secondary_fill": {
+          'light': ['var(--zdt_cta_secondary_dark_fill)'],
+          'dark': ['var(--zdt_cta_secondary_dark_fill)']
+        },
+        "dark_secondary_plainfill": {
+          'light': ['var(--zdt_cta_secondary_dark_plainfill)'],
+          'dark': ['var(--zdt_cta_secondary_dark_plainfill)']
+        },
+        "dark_plus": {
+          'light': ['#479dff'],
+          'dark': ['#479dff']
+        },
+        "dark_cross": {
+          'light': ['#5cc1a5'],
+          'dark': ['#5cc1a5']
+        },
+        "dark_medium_circle": {
+          'light': ['#e56471'],
+          'dark': ['#ff6b6b']
+        },
+        "dark_tiny_circle": {
+          'light': ['#5cc1a5'],
+          'dark': ['#4ac064']
+        },
+        "dark_small_circle": {
+          'light': ['#010101'],
+          'dark': ['#ff6b6b']
+        },
+        "dark_circle_fill": {
+          'light': ['var(--dot_white)'],
+          'dark': ['var(--dot_white)']
+        }
+    }
+  },
+  {
+    "comment": "danger palette",
+    "data": {
+        "danger_primary_fill": {
+          'light': ['#ff6f00'],
+          'dark': ['#ff6f00']
+        },
+        "danger_primary_stroke": {
+          'light': ['#010101'],
+          'dark': ['#479dff']
+        },
+        "danger_secondary_fill": {
+          'light': ['rgba(63, 112, 183, 0.25)'],
+          'dark': ['#334b68']
+        },
+        "danger_secondary_plainfill": {
+          'light': ['#3f70b7'],
+          'dark': ['#334b68']
+        },
+        "danger_plus": {
+          'light': ['#3f70b7'],
+          'dark': ['#479dff']
+        },
+        "danger_cross": {
+          'light': ['#5cc1a5'],
+          'dark': ['#5cc1a5']
+        },
+        "danger_medium_circle": {
+          'light': ['#e56471'],
+          'dark': ['#ff6b6b']
+        },
+        "danger_tiny_circle": {
+          'light': ['#5cc1a5'],
+          'dark': ['#4ac064']
+        },
+        "danger_small_circle": {
+          'light': ['#010101'],
+          'dark': ['#ff6b6b']
+        },
+        "danger_circle_fill": {
+          'light': ['var(--dot_white)'],
+          'dark': ['var(--dot_white)']
+        }
+    }
+  }
+];
+
+module.exports = { svgAppearanceVariables: svgAppearanceVariables };

package/preprocess/json/svgThemeVariableJson.js

@@ -0,0 +1,71 @@
+/* sample => 
+  {
+    "--zdt_variable_name": {
+    'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+    'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+    }
+  }
+*/
+
+const svgThemeVariables = [
+  {
+    "primary_fill": {
+        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "primary_stroke": {
+        'light': ['#221f1f', '#010101', '#010101', '#010101', '#010101'],
+        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+     "secondary_fill": {
+        'light': [
+            'rgba(10, 115, 235, 0.25)',
+            'rgba(38, 169, 66, 0.25)',
+            'rgba(229, 119, 23, 0.25)',
+            'rgba(222, 53, 53, 0.25)',
+            'rgba(232, 185, 35, 0.25)'
+        ],
+        'dark': [
+            '#334b68',
+            'rgba(69, 161, 89, 0.25)',
+            'rgba(255, 128, 31, 0.25)',
+            'rgba(233, 79, 79, 0.25)',
+            'rgba(215, 152, 53, 0.25)'
+        ]
+    },
+    "secondary_plainfill": {
+        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "primary_dark_fill": {
+        'light': ['#a6add7', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "primary_dark_stroke": {
+        'light': ['#fff', '#fff', '#fff', '#fff', '#fff'],
+        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "secondary_dark_fill": {
+        'light': [
+            '#3f70b7',
+            'rgba(38, 169, 66, 0.25)',
+            'rgba(229, 119, 23, 0.25)',
+            'rgba(222, 53, 53, 0.25)',
+            'rgba(232, 185, 35, 0.25)'
+        ],
+        'dark': [
+            '#334b68',
+            'rgba(69, 161, 89, 0.25)',
+            'rgba(255, 128, 31, 0.25)',
+            'rgba(233, 79, 79, 0.25)',
+            'rgba(215, 152, 53, 0.25)'
+        ]
+    },
+    "secondary_dark_plainfill": {
+        'light': ['#3f70b7', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    }
+  }
+];
+
+module.exports = { svgThemeVariables: svgThemeVariables };

package/preprocess/svgAppearanceColors.js

@@ -0,0 +1,63 @@
+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 = `../assets/${baseFolder}/${mode}/mode/${mode}EmptyStates.module.css`;
+  modeFiles.push(path.join(__dirname, modeFilesString));
+});
+let files = modeFiles;
+
+function generate(mode) {
+  let exportVariables = [];
+  let counter = 0;
+  let newLine = '';
+
+  svgAppearanceVariables.forEach((element) => {
+    let commentName = element.comment;
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+
+    exportVariables.push(commentName ? `${newLine}\n\t/* ${commentName} */` : '');
+
+    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;
+  ensureDirectoryExistence(fileString);
+  fs.writeFileSync(
+    fileString,
+    `[data-mode='${getMode}'] {${generate(
+      getMode
+    )}\n}`
+  );
+  arrayIndexCounter++;
+});

package/preprocess/svgThemeColors.js

@@ -0,0 +1,92 @@
+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 = `../assets/${baseFolder}/${mode}/themes/${theme}/${
+      theme + capitalizeFirstLetter(mode)
+    }CTATheme.module.css`;
+    themeFiles.push(path.join(__dirname, themeFilesString));
+  });
+});
+let files = themeFiles;
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function generate(mode, theme) {
+  let exportVariables = [];
+
+  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(';');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let fileString = files[arrayIndexCounter];
+    // let splitPath = fileString.split(/\\/g);
+    let getMode = mode;
+    let getTheme = theme;
+    ensureDirectoryExistence(fileString);
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}'][data-theme='${getTheme}'] {${generate(
+        getMode,
+        getTheme
+      )}\n}`
+    );
+    arrayIndexCounter++;
+  });
+});

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/src/svg/Loader.js

@@ -3,7 +3,21 @@ import PropTypes from 'prop-types';
 import SVG from './SVG';
 import cssStyle from './SVG.module.css';
 
-export default class Loader extends React.Component {
+export default class Loader extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.viewBoxStyle = {
+      animation: "loaderone 2s linear infinite"
+    };
+    this.defsStyle = {
+      animation: "circleAnimation_1 1.5s linear infinite",
+      transformOrigin: "center"
+    };
+    this.circleStyle = {
+      animation: "circleAnimation_2 1.2s linear infinite",
+      transformOrigin: "center"
+    };
+  }
   render() {
     let { dataId } = this.props;
     return (
@@ -13,7 +27,7 @@ export default class Loader extends React.Component {
           name='Loader'
           className={`${cssStyle.loaderWrapper}`}
           dataId={dataId}
-          styleName={{animation: "loaderone 2s linear infinite"}}
+          styleName={this.viewBoxStyle}
         >
           <defs>
             <style>
@@ -32,10 +46,7 @@ export default class Loader extends React.Component {
             cx={20}
             cy={20}
             r={13}
-            style={{
-              animation: "circleAnimation_1 1.5s linear infinite",
-              transformOrigin: "center",
-            }}
+            style={this.defsStyle}
             strokeDasharray={82}
             strokeDashoffset={82}
           />
@@ -47,10 +58,7 @@ export default class Loader extends React.Component {
             cx={20}
             cy={20}
             r={8}
-            style={{
-              animation: "circleAnimation_2 1.2s linear infinite",
-              transformOrigin: "center",
-            }}
+            style={this.circleStyle}
             strokeDasharray={50}
             strokeDashoffset={50}
           />

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: #fff;
-
-  /* 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: #fff;
-
-  /* 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: #fff;
-}

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;
-}