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

package/README.md

@@ -2,6 +2,9 @@
 
 This Bundle Contains EmptyState Images.
 
+# 1.0.0-beta.39
+
+- Appearance css moved to assets
 # 1.0.0-beta.38
 
 - bg,shadow,text,border based variables removed and renamed.

package/lib/Provider.js

@@ -19,29 +19,29 @@ require("@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css
 
 require("@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css");
 
-require("./svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("./svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("./svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("./svg/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("./svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("./svg/Appearance/default/mode/defaultEmptyStates.module.css");
+require("../assets/Appearance/default/mode/defaultEmptyStates.module.css");
 
-require("./svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("./svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("./svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("./svg/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("./svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("./svg/Appearance/dark/mode/darkEmptyStates.module.css");
+require("../assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/index.js

@@ -58,7 +58,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _server = require("react-dom/server");
 
-require("@zohodesk/variables/lib/sizeVariables.module.css");
+require("@zohodesk/variables/assets/sizeVariables.module.css");
 
 var _Provider = _interopRequireDefault(require("./Provider"));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/svg",
-  "version": "1.0.0-beta.38",
+  "version": "1.0.0-beta.39",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -35,12 +35,12 @@
     }
   },
   "devDependencies": {
-    "@zohodesk/variables": "1.0.0-beta.25",
+    "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/components": "1.0.0-alpha-190",
     "@svgr/cli": "5.5.0"
   },
   "peerDependencies": {
-    "@zohodesk/variables": "^1.0.0-beta.23",
+    "@zohodesk/variables": "^1.0.0-beta.29",
     "@zohodesk/components": "1.0.0-alpha-190"
   },
   "tags": [

package/preprocess/json/svgAppearanceVariableJson.js

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

@@ -1,85 +1,71 @@
-/* sample color order => 
---zdt_cta_variable_name, 
-[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
-[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']] */
+/* sample => 
+  {
+    "--zdt_variable_name": {
+    'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+    'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+    }
+  }
+*/
 
 const svgThemeVariables = [
-  [
-    'primary_fill',
-    [['default'], ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923']],
-    [['dark'], ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_stroke',
-    [['default'], ['#221f1f', '#010101', '#010101', '#010101', '#010101']],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'secondary_fill',
-    [
-      ['default'],
-      [
-        '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',
-    [['default'], ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923']],
-    [['dark'], ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_dark_fill',
-    [['default'], ['#a6add7', '#26a942', '#e57717', '#de3535', '#e8b923']],
-    [['dark'], ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_dark_stroke',
-    [['default'], ['#fff', '#fff', '#fff', '#fff', '#fff']],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'secondary_dark_fill',
-    [
-      ['default'],
-      [
-        '#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',
-    [['default'], ['#3f70b7', '#26a942', '#e57717', '#de3535', '#e8b923']],
-    [['dark'], ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ]
+  {
+    "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 };