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

package/preprocess/json/componentThemeVariableJson.js

@@ -0,0 +1,259 @@
+/* sample color order => 
+--zdt_cta_variable_name, 
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
+[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']], ['css comment name'] */
+
+const componentThemeVariables = [
+  [
+    'stencil_dark_bg',
+    [
+      ['default'],
+      [
+        '#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']
+  ],
+  [
+    'stencil_dark_gradient_bg',
+    [
+      ['default'],
+      [
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(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(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(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(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(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)'
+      ]
+    ]
+  ],
+  [
+    'dropbox_dark_bg',
+    [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
+    [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
+    ['dropbox']
+  ],
+  [
+    'listitem_dark_bg',
+    [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
+    [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
+    ['listitem']
+  ],
+  [
+    'listitem_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
+  ],
+  [
+    'listitem_dark_effect_bg',
+    [
+      ['default'],
+      [
+        '#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'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
+  ],
+  [
+    'listitem_dark_active_bg',
+    [['default'], ['#3b4d6d', '#2d484e', '#4b4335', '#4d3243', '#494c34']],
+    [['dark'], ['#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d']]
+  ],
+  [
+    'listitem_dark_tickicon',
+    [['default'], ['#6cbbfc', '#4ac064', '#ff6363', '#e57717', '#e8b923']],
+    [['dark'], ['#479dff', '#45a159', '#e94f4f', '#ff801f', '#d79835']]
+  ],
+  [
+    'tag_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    ['tag']
+  ],
+  [
+    'tag_dark_bg',
+    [
+      ['default'],
+      [
+        '#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',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
+  ],
+  [
+    'tag_dark_hover_bg',
+    [['default'], ['#503348', '#503348', '#503348', '#503348', '#503348']],
+    [['dark'], ['#503348', '#503348', '#503348', '#503348', '#503348']]
+  ],
+  [
+    'tag_dark_close_bg',
+    [['default'], ['#864654', '#864654', '#864654', '#864654', '#864654']],
+    [['dark'], ['#864654', '#864654', '#864654', '#864654', '#864654']]
+  ],
+  [
+    'tag_dark_close_text',
+    [['default'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']],
+    [['dark'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']]
+  ],
+  [
+    'multiselect_dark_border',
+    [
+      ['default'],
+      [
+        '#4b5168',
+        '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'], ['#4b5168', '#4b5168', '#4b5168', '#4b5168', '#4b5168']],
+    ['multiselect']
+  ],
+  [
+    'multiselect_darkmsg_bg',
+    [
+      ['default'],
+      [
+        '#383f57',
+        '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'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']]
+  ],
+  [
+    'multiselect_darkmsg_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
+  ],
+  [
+    'multiselect_darkdelete_hover_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
+  ],
+  [
+    'avatar_white_border',
+    [
+      ['default'],
+      [
+        'var(--dot_border_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'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
+    ['avatar']
+  ],
+  [
+    'avatar_white_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ]
+  ],
+  [
+    'label_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    ['label']
+  ],
+  [
+    'textbox_light_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    ['textbox']
+  ],
+  [
+    'dropdown_darkheading_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
+    ['dropdown']
+  ]
+];
+
+module.exports = { componentThemeVariables: componentThemeVariables };

package/preprocess/json/ctaThemeVariableJson.js

@@ -0,0 +1,337 @@
+/* sample color order => 
+--zdt_cta_variable_name, 
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
+[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']] */
+
+const ctaThemeVariables = [
+  [
+    'primary_text',
+    [
+      ['default'],
+      ['var(--dot_text_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'primary_hover_text',
+    [
+      ['default'],
+      ['var(--dot_text_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800']
+    ],
+    [['dark'], ['#6eb2ff', '#5eba72', '#ffa866', '#ee7c7c', '#e1b36a']]
+  ],
+  [
+    'primary_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'primary_hover_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#b59100']
+    ],
+    [['dark'], ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
+  ],
+  [
+    'primary_border',
+    [
+      ['default'],
+      ['var(--dot_border_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'primary_hover_border',
+    [
+      ['default'],
+      ['var(--dot_border_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#b59100']
+    ],
+    [['dark'], ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
+  ],
+  [
+    'primary_box_shadow',
+    [
+      ['default'],
+      [
+        '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',
+    [
+      ['default'],
+      [
+        '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',
+    [
+      ['default'],
+      ['var(--dot_bg_aliceBlue)', '#f2faf5', '#fdf5ef', '#fdf3f3', '#fdf8e9']
+    ],
+    [['dark'], ['#2c3b4d', '#26373b', '#323136', '#312d3a', '#303338']]
+  ],
+  [
+    'primary_light_hover_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_lavender)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd']
+    ],
+    [['dark'], ['#262f3d', '#2d4e42', '#4f3c33', '#4b323d', '#474137']]
+  ],
+  [
+    'primary_light_border',
+    [
+      ['default'],
+      ['var(--zd_border_primary13)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd']
+    ],
+    [
+      ['dark'],
+      ['var(--zd_border_primary13)', '#2d4e42', '#4f3c33', '#4b323d', '#474137']
+    ]
+  ],
+  [
+    'secondary_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'secondary_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_black)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ]
+  ],
+  [
+    'secondary_border',
+    [
+      ['default'],
+      ['#2381ed', '#4ac064', '#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',
+    [
+      ['default'],
+      [
+        'var(--dot_border_tropicalBlue)',
+        '#bee5c6',
+        '#f7d6b9',
+        '#f8d7d7',
+        '#f6e3a7'
+      ]
+    ],
+    [['dark'], ['#3f536b', '#2d4e42', '#4f3c33', '#4b323d', '#474137']]
+  ],
+  [
+    'alpha_text',
+    [
+      ['default'],
+      ['var(--dot_text_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'alpha_hover_text',
+    [
+      ['default'],
+      ['var(--dot_text_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800']
+    ],
+    [['dark'], ['#6eb2ff', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
+  ],
+  [
+    'alpha_border',
+    [
+      ['default'],
+      ['var(--dot_border_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'alpha_hover_border',
+    [
+      ['default'],
+      ['var(--dot_border_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800']
+    ],
+    [['dark'], ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
+  ],
+  [
+    'alpha_bg',
+    [['default'], ['#e7f1fd', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd']],
+    [['dark'], ['#253142', '#2a433f', '#393335', '#372f3a', '#353638']]
+  ],
+  [
+    'beta_border',
+    [
+      ['default'],
+      ['var(--dot_text_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
+    ],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'grey_10_bg',
+    [
+      ['default'],
+      [
+        'var(--dot_bg_catskillWhite)',
+        '#f6faf9',
+        '#f9f7f6',
+        '#f9f6f7',
+        '#f8f8f6'
+      ]
+    ],
+    [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
+  ],
+  [
+    'grey_10_border',
+    [
+      ['default'],
+      [
+        'var(--dot_border_catskillWhite)',
+        '#f6faf9',
+        '#f9f7f6',
+        '#f9f6f7',
+        '#f8f8f6'
+      ]
+    ],
+    [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
+  ],
+  [
+    'grey_15_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3']
+    ],
+    [['dark'], ['#2d3748', '#2d3748', '#2d3748', '#2d3748', '#2d3748']]
+  ],
+  [
+    'grey_15_border',
+    [
+      ['default'],
+      ['var(--dot_border_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3']
+    ],
+    [['dark'], ['#2d3748', '#2d3748', '#2d3748', '#2d3748', '#2d3748']]
+  ],
+  [
+    'grey_20_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_hawkesBlue)', '#ebefef', '#f2f0ee', '#eeeced', '#efefec']
+    ],
+    [['dark'], ['#161b23', '#161b23', '#161b23', '#161b23', '#161b23']]
+  ],
+  [
+    'grey_35_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
+    ],
+    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
+  ],
+  [
+    'grey_35_text',
+    [
+      ['default'],
+      ['var(--dot_text_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
+    ],
+    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
+  ],
+  [
+    'grey_35_border',
+    [
+      ['default'],
+      ['var(--dot_border_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
+    ],
+    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
+  ],
+  [
+    'grey_40_bg',
+    [
+      ['default'],
+      ['var(--dot_bg_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
+    ],
+    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
+  ],
+  [
+    'grey_40_text',
+    [
+      ['default'],
+      ['var(--dot_text_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
+    ],
+    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
+  ],
+  [
+    'grey_40_border',
+    [
+      ['default'],
+      ['var(--dot_border_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
+    ],
+    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
+  ]
+];
+
+module.exports = { ctaThemeVariables: ctaThemeVariables };