@zohodesk/svg 1.0.0-temp.40 → 1.0.0-temp.41

package/README.md

@@ -1,160 +1,160 @@
-# DOT SVG
-
-This Bundle Contains EmptyState Images.
-
-# 1.0.0-beta.39 , # 1.0.0-beta.40
-
-- Appearance css moved to assets
-# 1.0.0-beta.38
-
-- bg,shadow,text,border based variables removed and renamed.
-
-# 1.0.0-beta.37
-
-- Loader =>  Converted to Pure Component 
-
-# 1.0.0-beta.36
-
-- Night mode SVG CTA primary stroke color value changed
-
-# 1.0.0-beta.35
-
-- EmptyError added
-
-# 1.0.0-beta.34
-
-- Import, ErrorInconvenience, ErrorOopsSomethingMiss, ErrorUnableToProcessRequest, ErrorUnauthorizedLogin, ErrorUrlNotFound, ErrorWillBeRightBack Svg added
-- Docs Ui Fix
-- Theme Files Import Separated
-- Theme color values updated
-- EmptyInconvenience => Svg Image Changed as Old Svg
-- Inconvenience removed
-- EmptyPageNotFound, EmptyUnableToProcess, EmptyUrlFound, InvalidUrl moved to deprecated
-
-# 1.0.0-beta.33
-
-- Palette Based Folder Structure  Changed.
-- data-theme changed to data-mode
-- data-palette changed to data-theme
-# 1.0.0-beta.32
-
-- Palette Based Color System Implemented
-# 1.0.0-beta.31
-
-- EmptyDeparment Added
-- Predictor, ZiaAnamoly, Extractor added
-# 1.0.0-beta.30
-
-- EmptySkills Image Updated
-# 1.0.0-beta.29
-
-- EmptyWillBeRightBack,EmptyUnauthorizedLogin,EmptyUrlNotFound,EmptyInconvenience,EmptyPageNotFound,EmptyUnableToProcess  added
-# 1.0.0-beta.28
-
-- EmptyAgentQueue added
-# 1.0.0-beta.27
-
-- EmptySla,EmptyContract,EmptyReply Added
-# 1.0.0-beta.26
-
-- Loader => Layout issue Fixed
-# 1.0.0-beta.25
-
-- TemplateIcon SVG fix
-# 1.0.0-beta.24
-
-- Loader Svg converted to js
-# 1.0.0-beta.23
-
-- EmptyState.module.css file name changed as EmptyStateVariables.module.css to avoid dup file name
-
-# 1.0.0-beta.22
-
-- Theme changes added in EmptyBlueprint,EmptyTemplate
-- EmptyCloud,EmptyCloudDanger,EmptyEdition Deleted
-- danger palatte added in EmptyFrame
-
-# 1.0.0-beta.21
-
-- Dark Mode Variable Introduced
-
-# 1.0.0-beta.19
-
-- Cli Update
-
-# 1.0.0-beta.18
-
-- EmptyCollision, EmptyCrmNotes, EmptyCrmPotential, EmptyTimeline
-
-# 1.0.0-beta.17
-
-- EmptyApproval Added
-- EmptyHistory Updated
-
-# 1.0.0-beta.16
-
-- EmptySchedule , EmptyColumn added
-
-# 1.0.0-beta.15
-
-- DefaultProps Fix
-
-# 1.0.0-beta.14
-
-- EmptyFrame Added
-
-# 1.0.0-beta.13
-
-- svgLoader Removed
-
-# 1.0.0-beta.12
-
-- Loads both dark mode image and ordinary image in the component.
-
-# 1.0.0-beta.11
-
-- SvgLoader function - replaced dynamic variable with static path. This is check version.
-
-# 1.0.0-beta.10
-
-- SvgLoader function fix - previous fix not worked - removing promises and using synchronous loading.
-
-# 1.0.0-beta.9
-
-- SvgLoader Function fix - replacing "import" with "require"
-
-# 1.0.0-beta.8
-
-- emptyDashboard issue fix
-
-# 1.0.0-beta.7
-
--EmptyCrm,EmptyFollower,EmptyFeed, EmptyCustomDomain and Night Mode Svgs Added, Dynamic Loader Added
-
-# 1.0.0-beta.6
-
-- wasted
-
-# 1.0.0-beta.5
-
-- dataId Added, EmtyDanger SVG updated
-
-# 1.0.0-beta.5
-
-- SVG Loader Middle Fix
-
-# 1.0.0-beta.4
-
-- EmptySnippet, EmptySkills Added
-
-# 1.0.0-beta.3
-
-- ErrorStates isFluid Prop Included
-
-# 1.0.0-beta.2
-
-- Empty History SVG Added
-
-# 1.0.0-beta.0
-
-- First Publish
+# DOT SVG
+
+This Bundle Contains EmptyState Images.
+
+# 1.0.0-beta.39 , # 1.0.0-beta.40, # 1.0.0-beta.41
+
+- Appearance css moved to assets
+# 1.0.0-beta.38
+
+- bg,shadow,text,border based variables removed and renamed.
+
+# 1.0.0-beta.37
+
+- Loader =>  Converted to Pure Component 
+
+# 1.0.0-beta.36
+
+- Night mode SVG CTA primary stroke color value changed
+
+# 1.0.0-beta.35
+
+- EmptyError added
+
+# 1.0.0-beta.34
+
+- Import, ErrorInconvenience, ErrorOopsSomethingMiss, ErrorUnableToProcessRequest, ErrorUnauthorizedLogin, ErrorUrlNotFound, ErrorWillBeRightBack Svg added
+- Docs Ui Fix
+- Theme Files Import Separated
+- Theme color values updated
+- EmptyInconvenience => Svg Image Changed as Old Svg
+- Inconvenience removed
+- EmptyPageNotFound, EmptyUnableToProcess, EmptyUrlFound, InvalidUrl moved to deprecated
+
+# 1.0.0-beta.33
+
+- Palette Based Folder Structure  Changed.
+- data-theme changed to data-mode
+- data-palette changed to data-theme
+# 1.0.0-beta.32
+
+- Palette Based Color System Implemented
+# 1.0.0-beta.31
+
+- EmptyDeparment Added
+- Predictor, ZiaAnamoly, Extractor added
+# 1.0.0-beta.30
+
+- EmptySkills Image Updated
+# 1.0.0-beta.29
+
+- EmptyWillBeRightBack,EmptyUnauthorizedLogin,EmptyUrlNotFound,EmptyInconvenience,EmptyPageNotFound,EmptyUnableToProcess  added
+# 1.0.0-beta.28
+
+- EmptyAgentQueue added
+# 1.0.0-beta.27
+
+- EmptySla,EmptyContract,EmptyReply Added
+# 1.0.0-beta.26
+
+- Loader => Layout issue Fixed
+# 1.0.0-beta.25
+
+- TemplateIcon SVG fix
+# 1.0.0-beta.24
+
+- Loader Svg converted to js
+# 1.0.0-beta.23
+
+- EmptyState.module.css file name changed as EmptyStateVariables.module.css to avoid dup file name
+
+# 1.0.0-beta.22
+
+- Theme changes added in EmptyBlueprint,EmptyTemplate
+- EmptyCloud,EmptyCloudDanger,EmptyEdition Deleted
+- danger palatte added in EmptyFrame
+
+# 1.0.0-beta.21
+
+- Dark Mode Variable Introduced
+
+# 1.0.0-beta.19
+
+- Cli Update
+
+# 1.0.0-beta.18
+
+- EmptyCollision, EmptyCrmNotes, EmptyCrmPotential, EmptyTimeline
+
+# 1.0.0-beta.17
+
+- EmptyApproval Added
+- EmptyHistory Updated
+
+# 1.0.0-beta.16
+
+- EmptySchedule , EmptyColumn added
+
+# 1.0.0-beta.15
+
+- DefaultProps Fix
+
+# 1.0.0-beta.14
+
+- EmptyFrame Added
+
+# 1.0.0-beta.13
+
+- svgLoader Removed
+
+# 1.0.0-beta.12
+
+- Loads both dark mode image and ordinary image in the component.
+
+# 1.0.0-beta.11
+
+- SvgLoader function - replaced dynamic variable with static path. This is check version.
+
+# 1.0.0-beta.10
+
+- SvgLoader function fix - previous fix not worked - removing promises and using synchronous loading.
+
+# 1.0.0-beta.9
+
+- SvgLoader Function fix - replacing "import" with "require"
+
+# 1.0.0-beta.8
+
+- emptyDashboard issue fix
+
+# 1.0.0-beta.7
+
+-EmptyCrm,EmptyFollower,EmptyFeed, EmptyCustomDomain and Night Mode Svgs Added, Dynamic Loader Added
+
+# 1.0.0-beta.6
+
+- wasted
+
+# 1.0.0-beta.5
+
+- dataId Added, EmtyDanger SVG updated
+
+# 1.0.0-beta.5
+
+- SVG Loader Middle Fix
+
+# 1.0.0-beta.4
+
+- EmptySnippet, EmptySkills Added
+
+# 1.0.0-beta.3
+
+- ErrorStates isFluid Prop Included
+
+# 1.0.0-beta.2
+
+- Empty History SVG Added
+
+# 1.0.0-beta.0
+
+- First Publish

package/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-mode='pureDark'] {
+	/* 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/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][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/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='green'] {
+	--zdt_cta_primary_fill: #45a159;
+	--zdt_cta_primary_stroke: #0e7c1c;
+	--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: #0e7526;
+	--zdt_cta_secondary_dark_fill: rgba(69, 161, 89, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #45a159
+}

package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='orange'] {
+	--zdt_cta_primary_fill: #ff801f;
+	--zdt_cta_primary_stroke: #a85100;
+	--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: #a85100;
+	--zdt_cta_secondary_dark_fill: rgba(255, 128, 31, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #ff801f
+}

package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='red'] {
+	--zdt_cta_primary_fill: #a81111;
+	--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: #a81111;
+	--zdt_cta_secondary_dark_fill: rgba(233, 79, 79, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #e94f4f
+}

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='yellow'] {
+	--zdt_cta_primary_fill: #d79835;
+	--zdt_cta_primary_stroke: #9b6808;
+	--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: #9b6808;
+	--zdt_cta_secondary_dark_fill: rgba(215, 152, 53, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #d79835
+}

package/es/Provider.js

@@ -1,7 +1,6 @@
 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/assets/Appearance/default/mode/defaultMode.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
 /* default mode & themes */
@@ -20,6 +19,14 @@ 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';
+/* pure dark mode & themes */
+
+import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
 export default class Provider extends React.Component {
   constructor(props) {
     super(props);
@@ -27,22 +34,13 @@ export default class Provider extends React.Component {
       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'
-      });
-    }
+  setAppearance(mode) {
+    this.setState({
+      appearanceName: mode
+    });
   }
 
   setTheme(theme) {
@@ -78,6 +76,29 @@ export default class Provider extends React.Component {
     let yellow = {
       backgroundColor: '#e8b923'
     };
+    let light = {
+      backgroundColor: '#fff'
+    };
+    let night = {
+      backgroundColor: '#232b38'
+    };
+    let dark = {
+      backgroundColor: '#212121'
+    };
+    let fixedPosition = {
+      position: 'fixed',
+      bottom: '0',
+      backgroundColor: '#272727',
+      padding: '10px',
+      borderRadius: '15px 15px 0 0',
+      minWidth: '100px',
+      textAlign: 'center',
+      boxShadow: '0 0 3px #000',
+      fontSize: '12px',
+      zIndex: '3',
+      display: 'flex',
+      alignItems: 'center'
+    };
     return /*#__PURE__*/React.createElement(AppContainer, {
       customProps: {
         ExtraProps: {
@@ -88,29 +109,40 @@ export default class Provider extends React.Component {
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement("div", {
+      style: Object.assign({}, fixedPosition, {
+        left: '20%',
+        transform: 'translate(-20%)'
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: '#fff'
+      }
+    }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      title: "Light Mode",
+      style: Object.assign({}, themeClass, light),
+      onClick: () => this.setAppearance('default')
+    }), /*#__PURE__*/React.createElement("span", {
+      title: "Night Mode",
+      style: Object.assign({}, themeClass, night),
+      onClick: () => this.setAppearance('dark')
+    }), /*#__PURE__*/React.createElement("span", {
+      title: "Dark Mode",
+      style: Object.assign({}, themeClass, dark),
+      onClick: () => this.setAppearance('pureDark')
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: Object.assign({}, fixedPosition, {
+        left: '80%',
+        transform: 'translate(-80%)'
+      })
+    }, /*#__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'
+        color: '#fff'
       }
-    }, /*#__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", {
+    }, "Themes:"), /*#__PURE__*/React.createElement("div", {
       style: {
         display: 'flex'
       }

package/es/svg/EmptyStateVariables.module.css

@@ -1,39 +1,39 @@
-.default {
-  /* empty svg default palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_default_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_default_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_default_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_default_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_default_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_default_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_default_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_default_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_default_circle_fill);
-}
-.dark {
-  /* empty svg dark palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_dark_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_dark_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_dark_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_dark_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_dark_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_dark_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_dark_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_dark_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_dark_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_dark_circle_fill);
-}
-.danger {
-  /* empty svg danger palette variables */
-  --zd_emptysvg_primary_fill: var(--zdt_svg_danger_primary_fill);
-  --zd_emptysvg_primary_stroke: var(--zdt_svg_danger_primary_stroke);
-  --zd_emptysvg_secondary_fill: var(--zdt_svg_danger_secondary_fill);
-  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_danger_secondary_plainfill);
-  --zd_emptysvg_plus: var(--zdt_svg_danger_plus);
-  --zd_emptysvg_cross: var(--zdt_svg_danger_cross);
-  --zd_emptysvg_medium_circle: var(--zdt_svg_danger_medium_circle);
-  --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
-  --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
-  --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
+.default {
+  /* empty svg default palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_default_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_default_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_default_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_default_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_default_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_default_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_default_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_default_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_default_circle_fill);
+}
+.dark {
+  /* empty svg dark palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_dark_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_dark_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_dark_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_dark_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_dark_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_dark_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_dark_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_dark_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_dark_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_dark_circle_fill);
+}
+.danger {
+  /* empty svg danger palette variables */
+  --zd_emptysvg_primary_fill: var(--zdt_svg_danger_primary_fill);
+  --zd_emptysvg_primary_stroke: var(--zdt_svg_danger_primary_stroke);
+  --zd_emptysvg_secondary_fill: var(--zdt_svg_danger_secondary_fill);
+  --zd_emptysvg_secondary_plainfill: var(--zdt_svg_danger_secondary_plainfill);
+  --zd_emptysvg_plus: var(--zdt_svg_danger_plus);
+  --zd_emptysvg_cross: var(--zdt_svg_danger_cross);
+  --zd_emptysvg_medium_circle: var(--zdt_svg_danger_medium_circle);
+  --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
+  --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
+  --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
 }