@zohodesk/components 1.0.0-alpha-221 → 1.0.0-alpha-225

package/preprocess/json/componentThemeVariableJson.js

@@ -0,0 +1,242 @@
+/* sample => 
+  {
+    "comment": "comment name",
+    "data": {
+      "--zdt_variable_name": {
+        'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+        'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+      },
+      {
+      "--zdt_variable_name": {
+        'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+        'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+      }
+    }
+  }
+*/
+
+const componentThemeVariables = [
+  {
+    "comment": "stencil",
+    "data": {
+      "stencil_dark_bg": {
+        'light': [
+            '#383f55',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)'
+          ],
+        'dark': ['#383f55', '#383f55', '#383f55', '#383f55', '#383f55']
+      },
+      "stencil_dark_gradient_bg": {
+        'light': [
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+            'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+            'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+            'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+            'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)'
+          ],
+        'dark': [
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+            'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)'
+          ]
+      }
+    }
+  },
+  {
+    "comment": "dropbox",
+    "data": {
+      "dropbox_dark_bg": {
+        'light': ['var(--dot_unknown2)', '#1d2f33', '#332e24', '#34222d', '#313323'],
+        'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
+      }
+    }
+  },
+  {
+    "comment": "listitem",
+    "data": {
+      "listitem_dark_bg": {
+        'light': ['var(--dot_unknown2)', '#1d2f33', '#332e24', '#34222d', '#313323'],
+        'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
+      },
+      "listitem_dark_text": {
+        'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
+        'dark': ['var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)']
+      },
+      "listitem_dark_effect_bg": {
+        'light': [
+            '#444a61',
+            'rgba(255, 255, 255, 0.12)',
+            'rgba(255, 255, 255, 0.12)',
+            'rgba(255, 255, 255, 0.12)',
+            'rgba(255, 255, 255, 0.12)'
+          ],
+        'dark': ['var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)']
+      },
+      "listitem_dark_active_bg": {
+        'light': ['#3b4d6d', '#2d484e', '#4b4335', '#4d3243', '#494c34'],
+        'dark': ['#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d']
+      },
+      "listitem_dark_tickicon": {
+        'light': ['#6cbbfc', 'var(--dot_darkmint)', '#ff6363', '#e57717', '#e8b923'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#e94f4f', '#ff801f', '#d79835']
+      }
+    }
+  },
+  {
+    "comment": "tag",
+    "data": {
+      "tag_dark_text": {
+        'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
+        'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
+      },
+      "tag_dark_bg": {
+        'light': [
+            '#42485f',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)',
+            'rgba(255, 255, 255, 0.07)'
+          ],
+        'dark': ['#42485f', '#42485f', '#42485f', '#42485f', '#42485f']
+      },
+      "tag_dark_hover_text": {
+        'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
+        'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
+      },
+      "tag_dark_hover_bg": {
+        'light': ['var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)'],
+        'dark': ['var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)']
+      },
+      "tag_dark_close_bg": {
+        'light': ['#864654', '#864654', '#864654', '#864654', '#864654'],
+        'dark': ['#864654', '#864654', '#864654', '#864654', '#864654']
+      },
+      "tag_dark_close_text": {
+        'light': ['var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)'],
+        'dark': ['var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)']
+      }
+    }
+  },
+  {
+    "comment": "multiselect",
+    "data": {
+      "multiselect_dark_border": {
+        'light': [
+            'var(--dot_mulledwine)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)'
+          ],
+        'dark': ['var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)']
+      },
+      "multiselect_darkmsg_bg": {
+        'light': [
+            'var(--dot_unknown2)',
+            'rgba(255, 255, 255, 0.02)',
+            'rgba(255, 255, 255, 0.02)',
+            'rgba(255, 255, 255, 0.02)',
+            'rgba(255, 255, 255, 0.02)'
+          ],
+        'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
+      },
+      "multiselect_darkmsg_text": {
+        'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
+        'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
+      },
+      "multiselect_darkdelete_hover_text": {
+        'light': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ],
+        'dark': ['var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)']
+      }
+    }
+  },
+  {
+    "comment": "avatar",
+    "data": {
+      "avatar_white_border": {
+        'light': [
+            'var(--dot_shuttleGrey)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)',
+            'rgba(255, 255, 255, 0.2)'
+          ],
+        'dark': ['var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)']
+      },
+      "avatar_white_text": {
+        'light': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ],
+        'dark': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ]
+      }
+    }
+  },
+  {
+    "comment": "label",
+    "data": {
+      "label_dark_text": {
+        'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
+        'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
+      }
+    }
+  },
+  {
+    "comment": "textbox",
+    "data": {
+      "textbox_light_text": {
+        'light': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ],
+        'dark': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ]
+      }
+    }
+  },
+  {
+    "comment": "dropdown",
+    "data": {
+      "dropdown_darkheading_text": {
+        'light': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+          ],
+        'dark': ['var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)']
+      }
+    }
+  }
+];
+
+module.exports = { componentThemeVariables: componentThemeVariables };

package/preprocess/json/ctaThemeVariableJson.js

@@ -0,0 +1,203 @@
+/* sample => 
+  {
+    "--zdt_cta_variable_name": {
+    'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+    'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+    }
+  }
+*/
+
+const ctaThemeVariables = [
+  {
+    "primary_text": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#b68c07'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "primary_hover_text": {
+        'light': ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800'],
+        'dark': ['#6eb2ff', '#5eba72', '#ffa866', '#ee7c7c', '#e1b36a']
+     },
+    "primary_bg": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#e8b923'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "primary_hover_bg": {
+        'light': ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#b59100'],
+        'dark': ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']
+     },
+    "primary_border": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#e8b923'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "primary_hover_border": {
+        'light': ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#b59100'],
+        'dark': ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']
+     },
+    "primary_box_shadow": {
+        'light': [
+            'rgba(10, 115, 235, 0.2)',
+            'rgba(38, 169, 66, 0.2)',
+            'rgba(229, 119, 23, 0.2)',
+            'rgba(222, 53, 53, 0.2)',
+            'rgba(232, 185, 35, 0.2)'
+        ],
+        'dark': [
+            'rgba(10, 115, 235, 0.2)',
+            'rgba(38, 169, 66, 0.2)',
+            'rgba(229, 119, 23, 0.2)',
+            'rgba(222, 53, 53, 0.2)',
+            'rgba(232, 185, 35, 0.2)'
+        ]
+    },
+    "primary_hover_box_shadow": {
+        'light': [
+            'rgba(0, 83, 184, 0.25)',
+            'rgba(14, 117, 38, 0.25)',
+            'rgba(178, 89, 0, 0.25)',
+            'rgba(171, 26, 24, 0.25)',
+            'rgba(181, 145, 0, 0.25)'
+        ],
+        'dark': [
+            'rgba(0, 83, 184, 0.25)',
+            'rgba(14, 117, 38, 0.25)',
+            'rgba(178, 89, 0, 0.25)',
+            'rgba(171, 26, 24, 0.25)',
+            'rgba(181, 145, 0, 0.25)'
+        ]  
+    },
+    "primary_light_bg": {
+        'light': ['var(--dot_aliceBlue)', 'var(--dot_blacksqueeze)', '#fdf5ef', '#fdf3f3', '#fdf8e9'],
+        'dark': ['var(--dot_darkbluegrey)', '#26373b', '#323136', '#312d3a', '#303338']
+     },
+    "primary_light_hover_bg": {
+        'light': ['var(--dot_lavender)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd'],
+        'dark': ['var(--dot_unknown1)', '#2d4e42', '#4f3c33', '#4b323d', '#474137']
+     },
+    "primary_light_border": {
+        'light': ['var(--zd_primary13)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd'],
+        'dark': ['var(--zd_primary13)', '#2d4e42', '#4f3c33', '#4b323d', '#474137']
+    },
+    "secondary_bg": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#e8b923'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "secondary_text": {
+        'light': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_black)'
+        ],
+        'dark': [
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)',
+            'var(--dot_white)'
+        ]  
+    },
+    "secondary_border": {
+        'light': ['#2381ed', 'var(--dot_darkmint)', '#ea9245', '#e55d5d', 'rgba(255, 255, 255, 0.2)'],
+        'dark': [
+            'rgba(255, 255, 255, 0.15)',
+            'rgba(255, 255, 255, 0.15)',
+            'rgba(255, 255, 255, 0.15)',
+            'rgba(255, 255, 255, 0.15)',
+            'rgba(255, 255, 255, 0.15)'
+        ]  
+    },
+    "secondary_light_border": {
+        'light': [
+            'var(--dot_tropicalBlue)',
+            '#bee5c6',
+            '#f7d6b9',
+            '#f8d7d7',
+            '#f6e3a7'
+        ],
+        'dark': ['#3f536b', '#2d4e42', '#4f3c33', '#4b323d', '#474137']
+     },
+    "alpha_text": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#b68c07'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "alpha_hover_text": {
+        'light': ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800'],
+        'dark': ['#6eb2ff', '#0e7c1c', '#a85100', '#a81111', '#9b6808']
+     },
+    "alpha_border": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#b68c07'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "alpha_hover_border": {
+        'light': ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800'],
+        'dark': ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']
+     },
+    "alpha_bg": {
+        'light': ['#e7f1fd', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd'],
+        'dark': ['#253142', '#2a433f', '#393335', '#372f3a', '#353638']
+     },
+    "beta_border": {
+        'light': ['var(--dot_primary)', '#26a942', '#e57717', 'var(--dot_brightRed)', '#b68c07'],
+        'dark': ['var(--dot_butterflyblue)', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "grey_10_bg": {
+        'light': [
+            'var(--dot_catskillWhite)',
+            '#f6faf9',
+            '#f9f7f6',
+            '#f9f6f7',
+            '#f8f8f6'
+        ],
+        'dark': ['var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)']
+     },
+    "grey_10_border": {
+        'light': [
+            'var(--dot_catskillWhite)',
+            '#f6faf9',
+            '#f9f7f6',
+            '#f9f6f7',
+            '#f8f8f6'
+        ],
+        'dark': ['var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)']
+     },
+    "grey_15_bg": {
+        'light': ['var(--dot_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3'],
+        'dark': ['var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)']
+     },
+    "grey_15_border": {
+        'light': ['var(--dot_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3'],
+        'dark': ['var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)', 'var(--dot_tuna)']
+     },
+    "grey_20_bg": {
+        'light': ['var(--dot_hawkesBlue)', '#ebefef', '#f2f0ee', '#eeeced', '#efefec'],
+        'dark': ['#161b23', '#161b23', '#161b23', '#161b23', '#161b23']
+     },
+    "grey_35_bg": {
+        'light': ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc'],
+        'dark': ['var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)']
+     },
+    "grey_35_text": {
+        'light': ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc'],
+        'dark': ['var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)']
+     },
+    "grey_35_border": {
+        'light': ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc'],
+        'dark': ['var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)', 'var(--dot_brightgrey)']
+     },
+    "grey_40_bg": {
+        'light': ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4'],
+        'dark': ['var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)']
+     },
+    "grey_40_text": {
+        'light': ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4'],
+        'dark': ['var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)']
+     },
+    "grey_40_border": {
+        'light': ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4'],
+        'dark': ['var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)', 'var(--dot_riverbed)']
+     }
+  }
+];
+
+module.exports = { ctaThemeVariables: ctaThemeVariables };