@zohodesk/components 1.0.0-alpha-224 → 1.0.0-alpha-227

package/preprocess/json/componentThemeVariableJson.js

@@ -1,259 +0,0 @@
-/* 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_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ],
-    [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
-  ],
-  [
-    'avatar_white_border',
-    [
-      ['default'],
-      [
-        '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'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
-    ['avatar']
-  ],
-  [
-    'avatar_white_text',
-    [
-      ['default'],
-      [
-        '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)'
-      ]
-    ]
-  ],
-  [
-    'label_dark_text',
-    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
-    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
-    ['label']
-  ],
-  [
-    'textbox_light_text',
-    [
-      ['default'],
-      [
-        '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)'
-      ]
-    ],
-    ['textbox']
-  ],
-  [
-    'dropdown_darkheading_text',
-    [
-      ['default'],
-      [
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ],
-    [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
-    ['dropdown']
-  ]
-];
-
-module.exports = { componentThemeVariables: componentThemeVariables };

package/preprocess/json/ctaThemeVariableJson.js

@@ -1,337 +0,0 @@
-/* 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_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_hover_text',
-    [
-      ['default'],
-      ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800']
-    ],
-    [['dark'], ['#6eb2ff', '#5eba72', '#ffa866', '#ee7c7c', '#e1b36a']]
-  ],
-  [
-    'primary_bg',
-    [
-      ['default'],
-      ['var(--dot_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_hover_bg',
-    [
-      ['default'],
-      ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#b59100']
-    ],
-    [['dark'], ['#1065cc', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
-  ],
-  [
-    'primary_border',
-    [
-      ['default'],
-      ['var(--dot_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'primary_hover_border',
-    [
-      ['default'],
-      ['var(--dot_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_aliceBlue)', '#f2faf5', '#fdf5ef', '#fdf3f3', '#fdf8e9']
-    ],
-    [['dark'], ['#2c3b4d', '#26373b', '#323136', '#312d3a', '#303338']]
-  ],
-  [
-    'primary_light_hover_bg',
-    [
-      ['default'],
-      ['var(--dot_lavender)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd']
-    ],
-    [['dark'], ['#262f3d', '#2d4e42', '#4f3c33', '#4b323d', '#474137']]
-  ],
-  [
-    'primary_light_border',
-    [
-      ['default'],
-      ['var(--zd_primary13)', '#d4eed9', '#fae4d1', '#f8d7d7', '#f8eabd']
-    ],
-    [
-      ['dark'],
-      ['var(--zd_primary13)', '#2d4e42', '#4f3c33', '#4b323d', '#474137']
-    ]
-  ],
-  [
-    'secondary_bg',
-    [
-      ['default'],
-      ['var(--dot_primary)', '#26a942', '#e57717', '#de3535', '#e8b923']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'secondary_text',
-    [
-      ['default'],
-      [
-        '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',
-    [
-      ['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_tropicalBlue)',
-        '#bee5c6',
-        '#f7d6b9',
-        '#f8d7d7',
-        '#f6e3a7'
-      ]
-    ],
-    [['dark'], ['#3f536b', '#2d4e42', '#4f3c33', '#4b323d', '#474137']]
-  ],
-  [
-    'alpha_text',
-    [
-      ['default'],
-      ['var(--dot_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'alpha_hover_text',
-    [
-      ['default'],
-      ['var(--dot_cobalt)', '#0e7526', '#b25900', '#ab1a18', '#826800']
-    ],
-    [['dark'], ['#6eb2ff', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
-  ],
-  [
-    'alpha_border',
-    [
-      ['default'],
-      ['var(--dot_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'alpha_hover_border',
-    [
-      ['default'],
-      ['var(--dot_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_primary)', '#26a942', '#e57717', '#de3535', '#b68c07']
-    ],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'grey_10_bg',
-    [
-      ['default'],
-      [
-        'var(--dot_catskillWhite)',
-        '#f6faf9',
-        '#f9f7f6',
-        '#f9f6f7',
-        '#f8f8f6'
-      ]
-    ],
-    [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
-  ],
-  [
-    'grey_10_border',
-    [
-      ['default'],
-      [
-        'var(--dot_catskillWhite)',
-        '#f6faf9',
-        '#f9f7f6',
-        '#f9f6f7',
-        '#f8f8f6'
-      ]
-    ],
-    [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
-  ],
-  [
-    'grey_15_bg',
-    [
-      ['default'],
-      ['var(--dot_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3']
-    ],
-    [['dark'], ['#2d3748', '#2d3748', '#2d3748', '#2d3748', '#2d3748']]
-  ],
-  [
-    'grey_15_border',
-    [
-      ['default'],
-      ['var(--dot_solitude)', '#eef2ef', '#f2ece8', '#ede8e8', '#edede3']
-    ],
-    [['dark'], ['#2d3748', '#2d3748', '#2d3748', '#2d3748', '#2d3748']]
-  ],
-  [
-    'grey_20_bg',
-    [
-      ['default'],
-      ['var(--dot_hawkesBlue)', '#ebefef', '#f2f0ee', '#eeeced', '#efefec']
-    ],
-    [['dark'], ['#161b23', '#161b23', '#161b23', '#161b23', '#161b23']]
-  ],
-  [
-    'grey_35_bg',
-    [
-      ['default'],
-      ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
-    ],
-    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
-  ],
-  [
-    'grey_35_text',
-    [
-      ['default'],
-      ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
-    ],
-    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
-  ],
-  [
-    'grey_35_border',
-    [
-      ['default'],
-      ['var(--dot_paleBlue)', '#d3dfd7', '#e2ddda', '#ded3d6', '#e0dbcc']
-    ],
-    [['dark'], ['#384157', '#384157', '#384157', '#384157', '#384157']]
-  ],
-  [
-    'grey_40_bg',
-    [
-      ['default'],
-      ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
-    ],
-    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
-  ],
-  [
-    'grey_40_text',
-    [
-      ['default'],
-      ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
-    ],
-    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
-  ],
-  [
-    'grey_40_border',
-    [
-      ['default'],
-      ['var(--dot_paleNavy)', '#c5cdc7', '#d1cbc6', '#b9b2b4', '#ccc2a4']
-    ],
-    [['dark'], ['#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63', '#3e4d63']]
-  ]
-];
-
-module.exports = { ctaThemeVariables: ctaThemeVariables };