@zohodesk/svg 1.0.0-temp.44 → 1.0.0-temp.45

package/README.md

@@ -2,6 +2,14 @@
 
 This Bundle Contains EmptyState Images.
 
+# 1.0.0-beta.48,49
+
+- errorstate, emptystate files separated , EmptyCrm dataId changed to EmptyCrm from EmptyFeed
+
+# 1.0.0-beta.47
+
+- PureDark mode implemented via preprocess
+
 # 1.0.0-beta.46
 
 - CustomModule SVG added

package/assets/Appearance/dark/mode/contrast/darkContrastEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-mode='dark']:global(.contrast) {
+	/* 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: #1482ff;
+	--zdt_svg_default_cross: #41aa8c;
+	--zdt_svg_default_medium_circle: #ff3838;
+	--zdt_svg_default_tiny_circle: #389f4e;
+	--zdt_svg_default_small_circle: #ff3838;
+	--zdt_svg_default_circle_fill: #e6e6e6;
+	
+	/* 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: #1482ff;
+	--zdt_svg_dark_cross: #41aa8c;
+	--zdt_svg_dark_medium_circle: #ff3838;
+	--zdt_svg_dark_tiny_circle: #389f4e;
+	--zdt_svg_dark_small_circle: #ff3838;
+	--zdt_svg_dark_circle_fill: #e6e6e6;
+	
+	/* danger palette */
+	--zdt_svg_danger_primary_fill: #cc5800;
+	--zdt_svg_danger_primary_stroke: #1482ff;
+	--zdt_svg_danger_secondary_fill: #223144;
+	--zdt_svg_danger_secondary_plainfill: #223144;
+	--zdt_svg_danger_plus: #1482ff;
+	--zdt_svg_danger_cross: #41aa8c;
+	--zdt_svg_danger_medium_circle: #ff3838;
+	--zdt_svg_danger_tiny_circle: #389f4e;
+	--zdt_svg_danger_small_circle: #ff3838;
+	--zdt_svg_danger_circle_fill: #e6e6e6;
+}

package/assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='blue']:global(.contrast) {
+	--zdt_cta_primary_fill: #6a717c;
+	--zdt_cta_primary_stroke: #1482ff;
+	--zdt_cta_secondary_fill: #NaNNaNNaN;
+	--zdt_cta_secondary_plainfill: #223144;
+	--zdt_cta_primary_dark_fill: #6a717c;
+	--zdt_cta_primary_dark_stroke: #1482ff;
+	--zdt_cta_secondary_dark_fill: #223144;
+	--zdt_cta_secondary_dark_plainfill: #223144
+}

package/assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='green']:global(.contrast) {
+	--zdt_cta_primary_fill: #367d45;
+	--zdt_cta_primary_stroke: #367d45;
+	--zdt_cta_secondary_fill: #367d45;
+	--zdt_cta_secondary_plainfill: #367d45;
+	--zdt_cta_primary_dark_fill: #367d45;
+	--zdt_cta_primary_dark_stroke: #367d45;
+	--zdt_cta_secondary_dark_fill: #367d45;
+	--zdt_cta_secondary_dark_plainfill: #367d45
+}

package/assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='orange']:global(.contrast) {
+	--zdt_cta_primary_fill: #eb6600;
+	--zdt_cta_primary_stroke: #eb6600;
+	--zdt_cta_secondary_fill: #eb6600;
+	--zdt_cta_secondary_plainfill: #eb6600;
+	--zdt_cta_primary_dark_fill: #eb6600;
+	--zdt_cta_primary_dark_stroke: #eb6600;
+	--zdt_cta_secondary_dark_fill: #eb6600;
+	--zdt_cta_secondary_dark_plainfill: #eb6600
+}

package/assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='red']:global(.contrast) {
+	--zdt_cta_primary_fill: #e42121;
+	--zdt_cta_primary_stroke: #e42121;
+	--zdt_cta_secondary_fill: #e42121;
+	--zdt_cta_secondary_plainfill: #e42121;
+	--zdt_cta_primary_dark_fill: #e42121;
+	--zdt_cta_primary_dark_stroke: #e42121;
+	--zdt_cta_secondary_dark_fill: #e42121;
+	--zdt_cta_secondary_dark_plainfill: #e42121
+}

package/assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='yellow']:global(.contrast) {
+	--zdt_cta_primary_fill: #b77f24;
+	--zdt_cta_primary_stroke: #b77f24;
+	--zdt_cta_secondary_fill: #b77f24;
+	--zdt_cta_secondary_plainfill: #b77f24;
+	--zdt_cta_primary_dark_fill: #b77f24;
+	--zdt_cta_primary_dark_stroke: #b77f24;
+	--zdt_cta_secondary_dark_fill: #b77f24;
+	--zdt_cta_secondary_dark_plainfill: #b77f24
+}

package/assets/Appearance/default/mode/contrast/defaultContrastEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-mode='default']:global(.contrast) {
+	/* 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: #315790;
+	--zdt_svg_default_cross: #41aa8c;
+	--zdt_svg_default_medium_circle: #de3b4b;
+	--zdt_svg_default_tiny_circle: #41aa8c;
+	--zdt_svg_default_small_circle: #000000;
+	--zdt_svg_default_circle_fill: #e6e6e6;
+	
+	/* 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: #1482ff;
+	--zdt_svg_dark_cross: #41aa8c;
+	--zdt_svg_dark_medium_circle: #de3b4b;
+	--zdt_svg_dark_tiny_circle: #41aa8c;
+	--zdt_svg_dark_small_circle: #000000;
+	--zdt_svg_dark_circle_fill: #e6e6e6;
+	
+	/* danger palette */
+	--zdt_svg_danger_primary_fill: #cc5800;
+	--zdt_svg_danger_primary_stroke: #000000;
+	--zdt_svg_danger_secondary_fill: #315790;
+	--zdt_svg_danger_secondary_plainfill: #315790;
+	--zdt_svg_danger_plus: #315790;
+	--zdt_svg_danger_cross: #41aa8c;
+	--zdt_svg_danger_medium_circle: #de3b4b;
+	--zdt_svg_danger_tiny_circle: #41aa8c;
+	--zdt_svg_danger_small_circle: #000000;
+	--zdt_svg_danger_circle_fill: #e6e6e6;
+}

package/assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='blue']:global(.contrast) {
+	--zdt_cta_primary_fill: #085bba;
+	--zdt_cta_primary_stroke: #080707;
+	--zdt_cta_secondary_fill: #085bba;
+	--zdt_cta_secondary_plainfill: #085bba;
+	--zdt_cta_primary_dark_fill: #848ec8;
+	--zdt_cta_primary_dark_stroke: #e6e6e6;
+	--zdt_cta_secondary_dark_fill: #315790;
+	--zdt_cta_secondary_dark_plainfill: #315790
+}

package/assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='green']:global(.contrast) {
+	--zdt_cta_primary_fill: #1d8133;
+	--zdt_cta_primary_stroke: #000000;
+	--zdt_cta_secondary_fill: #1d8133;
+	--zdt_cta_secondary_plainfill: #1d8133;
+	--zdt_cta_primary_dark_fill: #1d8133;
+	--zdt_cta_primary_dark_stroke: #e6e6e6;
+	--zdt_cta_secondary_dark_fill: #1d8133;
+	--zdt_cta_secondary_dark_plainfill: #1d8133
+}

package/assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='orange']:global(.contrast) {
+	--zdt_cta_primary_fill: #b55e12;
+	--zdt_cta_primary_stroke: #000000;
+	--zdt_cta_secondary_fill: #b55e12;
+	--zdt_cta_secondary_plainfill: #b55e12;
+	--zdt_cta_primary_dark_fill: #b55e12;
+	--zdt_cta_primary_dark_stroke: #e6e6e6;
+	--zdt_cta_secondary_dark_fill: #b55e12;
+	--zdt_cta_secondary_dark_plainfill: #b55e12
+}

package/assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='red']:global(.contrast) {
+	--zdt_cta_primary_fill: #c11f1f;
+	--zdt_cta_primary_stroke: #000000;
+	--zdt_cta_secondary_fill: #c11f1f;
+	--zdt_cta_secondary_plainfill: #c11f1f;
+	--zdt_cta_primary_dark_fill: #c11f1f;
+	--zdt_cta_primary_dark_stroke: #e6e6e6;
+	--zdt_cta_secondary_dark_fill: #c11f1f;
+	--zdt_cta_secondary_dark_plainfill: #c11f1f
+}

package/assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='yellow']:global(.contrast) {
+	--zdt_cta_primary_fill: #c29914;
+	--zdt_cta_primary_stroke: #000000;
+	--zdt_cta_secondary_fill: #c29914;
+	--zdt_cta_secondary_plainfill: #c29914;
+	--zdt_cta_primary_dark_fill: #c29914;
+	--zdt_cta_primary_dark_stroke: #e6e6e6;
+	--zdt_cta_secondary_dark_fill: #c29914;
+	--zdt_cta_secondary_dark_plainfill: #c29914
+}

package/assets/Appearance/pureDark/mode/contrast/pureDarkContrastEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-mode='pureDark']:global(.contrast) {
+	/* 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: #1482ff;
+	--zdt_svg_default_cross: #41aa8c;
+	--zdt_svg_default_medium_circle: #ff3838;
+	--zdt_svg_default_tiny_circle: #389f4e;
+	--zdt_svg_default_small_circle: #ff3838;
+	--zdt_svg_default_circle_fill: #e6e6e6;
+	
+	/* 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: #1482ff;
+	--zdt_svg_dark_cross: #41aa8c;
+	--zdt_svg_dark_medium_circle: #ff3838;
+	--zdt_svg_dark_tiny_circle: #389f4e;
+	--zdt_svg_dark_small_circle: #ff3838;
+	--zdt_svg_dark_circle_fill: #e6e6e6;
+	
+	/* danger palette */
+	--zdt_svg_danger_primary_fill: #cc5800;
+	--zdt_svg_danger_primary_stroke: #1482ff;
+	--zdt_svg_danger_secondary_fill: #223144;
+	--zdt_svg_danger_secondary_plainfill: #223144;
+	--zdt_svg_danger_plus: #1482ff;
+	--zdt_svg_danger_cross: #41aa8c;
+	--zdt_svg_danger_medium_circle: #ff3838;
+	--zdt_svg_danger_tiny_circle: #389f4e;
+	--zdt_svg_danger_small_circle: #ff3838;
+	--zdt_svg_danger_circle_fill: #e6e6e6;
+}

package/assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='blue']:global(.contrast) {
+	--zdt_cta_primary_fill: #6a717c;
+	--zdt_cta_primary_stroke: #1482ff;
+	--zdt_cta_secondary_fill: #223144;
+	--zdt_cta_secondary_plainfill: #223144;
+	--zdt_cta_primary_dark_fill: #6a717c;
+	--zdt_cta_primary_dark_stroke: #1482ff;
+	--zdt_cta_secondary_dark_fill: #223144;
+	--zdt_cta_secondary_dark_plainfill: #223144
+}

package/assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='green']:global(.contrast) {
+	--zdt_cta_primary_fill: #367d45;
+	--zdt_cta_primary_stroke: #094e12;
+	--zdt_cta_secondary_fill: #367d45;
+	--zdt_cta_secondary_plainfill: #367d45;
+	--zdt_cta_primary_dark_fill: #367d45;
+	--zdt_cta_primary_dark_stroke: #094918;
+	--zdt_cta_secondary_dark_fill: #367d45;
+	--zdt_cta_secondary_dark_plainfill: #367d45
+}

package/assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='orange']:global(.contrast) {
+	--zdt_cta_primary_fill: #eb6600;
+	--zdt_cta_primary_stroke: #753900;
+	--zdt_cta_secondary_fill: #eb6600;
+	--zdt_cta_secondary_plainfill: #eb6600;
+	--zdt_cta_primary_dark_fill: #eb6600;
+	--zdt_cta_primary_dark_stroke: #753900;
+	--zdt_cta_secondary_dark_fill: #eb6600;
+	--zdt_cta_secondary_dark_plainfill: #eb6600
+}

package/assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='red']:global(.contrast) {
+	--zdt_cta_primary_fill: #790c0c;
+	--zdt_cta_primary_stroke: #e42121;
+	--zdt_cta_secondary_fill: #e42121;
+	--zdt_cta_secondary_plainfill: #e42121;
+	--zdt_cta_primary_dark_fill: #e42121;
+	--zdt_cta_primary_dark_stroke: #790c0c;
+	--zdt_cta_secondary_dark_fill: #e42121;
+	--zdt_cta_secondary_dark_plainfill: #e42121
+}

package/assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='yellow']:global(.contrast) {
+	--zdt_cta_primary_fill: #b77f24;
+	--zdt_cta_primary_stroke: #6b4706;
+	--zdt_cta_secondary_fill: #b77f24;
+	--zdt_cta_secondary_plainfill: #b77f24;
+	--zdt_cta_primary_dark_fill: #b77f24;
+	--zdt_cta_primary_dark_stroke: #6b4706;
+	--zdt_cta_secondary_dark_fill: #b77f24;
+	--zdt_cta_secondary_dark_plainfill: #b77f24
+}

package/es/{svg → Loader}/Loader.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import SVG from './SVG';
-import cssStyle from './SVG.module.css';
+import { LoaderDefaultProps } from './props/defaultProps';
+import { LoaderProps } from './props/propTypes';
+import SVG from './../SVG/SVG';
+import cssStyle from './../SVG/SVG.module.css';
 export default class Loader extends React.PureComponent {
   constructor(props) {
     super(props);
     this.viewBoxStyle = {
-      animation: "loaderone 2s linear infinite"
+      animation: 'loaderone 2s linear infinite'
     };
     this.defsStyle = {
-      animation: "circleAnimation_1 1.5s linear infinite",
-      transformOrigin: "center"
+      animation: 'circleAnimation_1 1.5s linear infinite',
+      transformOrigin: 'center'
     };
     this.circleStyle = {
-      animation: "circleAnimation_2 1.2s linear infinite",
-      transformOrigin: "center"
+      animation: 'circleAnimation_2 1.2s linear infinite',
+      transformOrigin: 'center'
     };
   }
 
@@ -30,7 +31,7 @@ export default class Loader extends React.PureComponent {
       className: `${cssStyle.loaderWrapper}`,
       dataId: dataId,
       styleName: this.viewBoxStyle
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, "@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}")), /*#__PURE__*/React.createElement("title", null, "loader"), /*#__PURE__*/React.createElement("circle", {
+    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, '@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}')), /*#__PURE__*/React.createElement("title", null, 'loader'), /*#__PURE__*/React.createElement("circle", {
       fill: "none",
       stroke: "#089949",
       strokeWidth: 2,
@@ -57,12 +58,8 @@ export default class Loader extends React.PureComponent {
   }
 
 }
-Loader.propTypes = {
-  dataId: PropTypes.string
-};
-Loader.defaultProps = {
-  dataId: 'loader'
-};
+Loader.propTypes = LoaderProps;
+Loader.defaultProps = LoaderDefaultProps;
 
 if (false) {
   Loader.docs = {

package/es/Loader/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const LoaderDefaultProps = {
+  dataId: 'loader'
+};

package/es/Loader/props/propTypes.js

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const LoaderProps = {
+  dataId: PropTypes.string
+};

package/es/Provider.js

@@ -1,40 +1,78 @@
 import React from 'react';
 import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
 import { Container } from '@zohodesk/components/lib/Layout';
+import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
 /* default mode & themes */
 
 import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/mode/defaultEmptyStates.module.css';
+import '../assets/Appearance/default/mode/contrast/defaultContrastEmptyStates.module.css';
 /* dark mode & themes */
 
 import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/mode/darkEmptyStates.module.css';
+import '../assets/Appearance/dark/mode/contrast/darkContrastEmptyStates.module.css';
 /* pure dark mode & themes */
 
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
+import '../assets/Appearance/pureDark/mode/contrast/pureDarkContrastEmptyStates.module.css';
 export default class Provider extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       appearanceName: 'default',
-      themeName: 'blue'
+      themeName: 'blue',
+      isContrastChecked: false
     };
     this.setTheme = this.setTheme.bind(this);
+    this.setAppearance = this.setAppearance.bind(this);
+    this.setContrast = this.setContrast.bind(this);
   }
 
   setAppearance(mode) {
@@ -49,124 +87,34 @@ export default class Provider extends React.Component {
     });
   }
 
+  setContrast() {
+    this.setState(prevState => ({
+      isContrastChecked: !prevState.isContrastChecked
+    }));
+  }
+
   render() {
     let {
       appearanceName,
-      themeName
+      themeName,
+      isContrastChecked
     } = 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'
-    };
-    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: {
           'data-mode': appearanceName,
           'data-theme': themeName
         }
-      }
+      },
+      className: isContrastChecked ? 'contrast' : ''
     }, /*#__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: {
-        color: '#fff'
-      }
-    }, "Themes:"), /*#__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')
-    }))));
+    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
+      onThemeChange: this.setTheme,
+      onAppearanceChange: this.setAppearance,
+      onContrastChange: this.setContrast,
+      isChecked: isContrastChecked
+    }));
   }
 
 }

package/es/docs/Emptystate__version1.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import EmptyCustomDomain from '../emptystate/version1/EmptyCustomDomain';
+import style from './SVGdocstyle.module.css';
+export default class Emptystate__version1 extends React.Component {
+  render() {
+    let allSvg = {
+      EmptyCustomDomain: /*#__PURE__*/React.createElement(EmptyCustomDomain, null)
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.parent
+    }, Object.keys(allSvg).map(item => {
+      let filterDarkPalettes = item.endsWith('DarkPalette');
+      return /*#__PURE__*/React.createElement("div", {
+        className: filterDarkPalettes ? style.darkPalette : style.defaultPalette
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.box
+      }, allSvg[item]), /*#__PURE__*/React.createElement("div", {
+        className: style.textStyle
+      }, item));
+    }));
+  }
+
+}
+
+if (false) {
+  Emptystate__version1.docs = {
+    componentGroup: 'Emptystate'
+  };
+}