packages-theme/console-base-theme/doc/css/xconsole.less

// 提取自 https://github.com/aliyun/cloud-design/blob/master/base-components/fusion-theme/xconsole/variables.css
// 删掉了一些狗屎 💩 和没用到的
:root {
  // color
  --color-black: #000;
  --color-white: #fff;
  --color-brand-1: #f7f9fa;
  --color-brand-2: #eff3f8;
  --color-brand-3: #fbfcfd;
  --color-brand-4: #bfd2e6;
  --color-brand-5: #7aa9d7;
  --color-brand-6: #0064c8;
  --color-brand-7: #0050a0;
  --color-brand-8: #003c78;
  --color-brand-9: #002850;
  --color-brand-10: #001428;
  --color-brand2-1: #f8f8f9;
  --color-brand2-2: #e3e4e6;
  --color-brand2-3: #d1d5d9;
  --color-brand2-4: #c0c6cc;
  --color-brand2-5: #92a3b3;
  --color-brand2-6: #577899;
  --color-brand2-7: #004080;
  --color-brand2-8: #003366;
  --color-brand2-9: #00264d;
  --color-brand2-10: #001a33;
  --color-error-1: #fdfbfb;
  --color-error-2: #faf7f7;
  --color-error-3: #f8efef;
  --color-error-4: #f5e6e6;
  --color-error-5: #e6bfbf;
  --color-error-6: #d77a7a;
  --color-error-7: #c80000;
  --color-error-8: #a00000;
  --color-error-9: #780000;
  --color-error-10: #500000;
  --color-fill-1: #f8f8f9;
  --color-fill-2: #f7f9fa;
  --color-fill-3: #eff3f8;
  --color-fill-4: #004080;
  --color-fill-5: #0064c8;
  --color-fill-6: #0050a0;
  --color-fill-7: #003c78;
  --color-fill-8: #d1d5d9;
  --color-fill-9: #1c1c1c;
  --color-help-1: #f5f5f5;
  --color-help-2: #c9c9c9;
  --color-help-3: #888;
  --color-help-4: #333;
  --color-line-1: #e3e4e6;
  --color-line-2: #c0c6cc;
  --color-line-3: #577899;
  --color-line-4: #d1d5d9;
  --color-line-5: #ebebeb;
  --color-link-1: #0064c8;
  --color-link-2: #0064c8;
  --color-link-3: #0064c8;
  --color-notice-1: #e5f3ff;
  --color-notice-2: #a0cded;
  --color-notice-3: #0070cc;
  --color-notice-4: #005aa5;
  --color-success-1: #ebfaeb;
  --color-success-2: #d8f5d8;
  --color-success-3: #c1f0c2;
  --color-success-4: #abebac;
  --color-success-5: #7bda7b;
  --color-success-6: #32c832;
  --color-success-7: #00a700;
  --color-success-8: #008501;
  --color-success-9: #006401;
  --color-success-10: #004301;
  --color-text-1: #c1c1c1;
  --color-text-2: #888;
  --color-text-3: #555;
  --color-text-4: #111;
  --color-text-5: #ccc;
  --color-text-6: #808080;
  --color-text-7: #666;
  --color-text-8: #4d4d4d;
  --color-text-9: #333;
  --color-text-10: #1a1a1a;
  --color-warning-1: #fffae8;
  --color-warning-2: #fff7d1;
  --color-warning-3: #fff3b4;
  --color-warning-4: #fff097;
  --color-warning-5: #ffde5c;
  --color-warning-6: #fac800;
  --color-warning-7: #dda200;
  --color-warning-8: #a77e00;
  --color-warning-9: #7d5c00;
  --color-warning-10: #533b00;
  // corner
  --corner-0: 0;
  --corner-1: 2px;
  --corner-2: 4px;
  --corner-3: 12px;
  --corner-4: 14px;
  --corner-circle: 50%;
  --corner-semicircle: 500px;
  // font
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-line-height-1: 1;
  --font-line-height-2: 1.5;
  --font-line-height-3: 1.6;
  --font-line-height-4: 1.8;
  --font-line-height-5: 2;
  --font-size-display-3: 48px;
  --font-size-display-2: 36px;
  --font-size-display-1: 24px;
  --font-size-headline: 20px;
  --font-size-body-1: 12px;
  --font-size-body-2: 14px;
  --font-size-title: 16px;
  --font-size-subhead: 14px;
  --font-size-caption: 12px;
  --font-weight-1: lighter;
  --font-weight-2: normal;
  --font-weight-3: bold;
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-extra-bold: 800;
  --font-weight-ultra-bold: 900;
  // shadow
  --shadow-distance-sd1: 0;
  --shadow-distance-sd2: 0;
  --shadow-distance-sd3: 0;
  --shadow-distance-sd1y: 2;
  --shadow-distance-sd2y: 4;
  --shadow-distance-sd3y: 8;
  --shadow-opacity-sd1: 0.16;
  --shadow-opacity-sd2: 0.16;
  --shadow-opacity-sd3: 0.2;
  --shadow-blur-sd1: 4;
  --shadow-blur-sd2: 8;
  --shadow-blur-sd3: 16;
  --shadow-spread-sd1: 0;
  --shadow-spread-sd2: 0;
  --shadow-spread-sd3: 0;
  --shadow-zero: none;
  --shadow-1: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-1-up: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-1-right: 0 0 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-1-down: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-1-left: 0 0 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-2-up: 0 -4px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-2-right: 0 0 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-2-down: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-2-left: 0 0 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-3: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  --shadow-3-up: 0 -8px 16px 0 rgba(0, 0, 0, 0.2);
  --shadow-3-right: 0 0 16px 0 rgba(0, 0, 0, 0.2);
  --shadow-3-down: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  --shadow-3-left: 0 0 16px 0 rgba(0, 0, 0, 0.2);
  // size
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-11: 44px;
  --s-12: 48px;
  --s-13: 52px;
  --s-14: 56px;
  --s-15: 60px;
  --s-16: 64px;
  --s-17: 68px;
  --s-18: 72px;
  --s-19: 76px;
  --s-20: 80px;
  --s-21: 84px;
  --s-22: 88px;
  --s-23: 92px;
  --s-24: 96px;
  --s-25: 100px;
  --s-26: 104px;
  --s-27: 108px;
  --s-28: 112px;
  --s-29: 116px;
  --s-30: 120px;
  --s-31: 124px;
  --s-32: 128px;
  --s-33: 132px;
  --s-34: 136px;
  --s-35: 140px;
  --s-36: 144px;
  --s-37: 148px;
  --s-38: 152px;
  --s-39: 156px;
  --s-40: 160px;
  --s-41: 164px;
  --s-42: 168px;
  --s-43: 172px;
  --s-44: 176px;
  --s-45: 180px;
  --s-46: 184px;
  --s-47: 188px;
  --s-48: 192px;
  --s-49: 196px;
  --s-50: 200px;
  // checkbox
  --checkbox-size: var(--s-4, 16px);
  --checkbox-border-radius: var(--corner-1, 2px);
  --checkbox-border-width: var(--line-1, 1px);
  --checkbox-shadow: var(--shadow-zero, none);
  --checkbox-border-color: var(--color-line-3, #577899);
  --checkbox-hovered-border-color: var(--color-fill-4, #004080);
  --checkbox-checked-border-color: var(--color-fill-4, #004080);
  --checkbox-disabled-border-color: var(--color-line-2, #c0c6cc);
  --checkbox-checked-hovered-border-color: var(--color-fill-4, #004080);
  --checkbox-checked-circle-color: var(--color-white, #fff);
  --checkbox-label-color: var(--color-text-9, #333);
  --checkbox-disabled-label-color: var(--color-text-5, #ccc);
  --checkbox-disabled-circle-color: var(--color-text-3, #555);
  --checkbox-checked-hovered-circle-color: var(--color-white, #fff);
  --checkbox-bg-color: var(--color-white, #fff);
  --checkbox-checked-bg-color: var(--color-fill-5, #0064c8);
  --checkbox-hovered-bg-color: transparent;
  --checkbox-checked-hovered-bg-color: var(--color-fill-5, #0064c8);
  --checkbox-disabled-bg-color: var(--color-fill-2, #f7f9fa);
  --checkbox-font-size: var(--font-size-body-1, 12px);
  --checkbox-margin-left: var(--s-2, 8px);
  // search
  --search-normal-corner: var(--corner-1, 2px);
  --search-normal-primary-color: var(--color-line-2, #c0c6cc);
  --search-normal-primary-hover-color: var(--color-line-2, #c0c6cc);
  --search-normal-primary-split-color: var(--color-line-2, #c0c6cc);
  --search-normal-primary-shadow: var(--shadow-zero, none);
  --search-normal-primary-btn-text-color: var(--color-text-9, #333);
  --search-normal-primary-btn-hover-bg-color: var(--color-line-2, #c0c6cc);
  --search-normal-primary-btn-hover-text-color: var(--color-text-9, #333);
  --search-normal-primary-border-width: var(--line-1, 1px);
  --search-normal-primary-btn-text-padding-left: var(--s-0, 0);
  --search-normal-primary-l-height: var(--s-9, 36px);
  --search-normal-primary-l-btn-text-size: var(--font-size-subhead, 14px);
  --search-normal-primary-m-height: var(--s-8, 32px);
  --search-normal-primary-m-btn-text-size: var(--font-size-body-1, 12px);
  --search-normal-secondary-color: var(--color-line-2, #c0c6cc);
  --search-normal-secondary-split-color: var(--color-line-2, #c0c6cc);
  --search-normal-secondary-hover-color: var(--color-line-2, #c0c6cc);
  --search-normal-secondary-shadow: var(--shadow-zero, none);
  --search-normal-secondary-btn-bg-color: var(--color-line-2, #c0c6cc);
  --search-normal-secondary-btn-text-color: var(--color-text-9, #333);
  --search-normal-secondary-btn-hover-bg-color: var(--color-line-2, #c0c6cc);
  --search-normal-secondary-btn-hover-text-color: var(--color-text-9, #333);
  --search-normal-secondary-border-width: var(--line-1, 1px);
  --search-normal-secondary-btn-text-padding-left: var(--s-0, 0);
  --search-normal-secondary-l-height: var(--s-9, 36px);
  --search-normal-secondary-l-btn-text-size: var(--font-size-subhead, 14px);
  --search-normal-secondary-m-height: var(--s-8, 32px);
  --search-normal-secondary-m-btn-text-size: var(--font-size-body-1, 12px);
  --search-normal-normal-color: var(--color-line-1, #e3e4e6);
  --search-normal-normal-split-color: var(--color-line-1, #e3e4e6);
  --search-normal-normal-hover-color: var(--color-line-4, #d1d5d9);
  --search-normal-normal-shadow: var(--shadow-zero, none);
  --search-normal-normal-btn-bg-color: var(--color-fill-1, #f8f8f9);
  --search-normal-normal-btn-text-color: var(--color-text-9, #333);
  --search-normal-normal-btn-hover-bg-color: var(--color-fill-1, #f8f8f9);
  --search-normal-normal-btn-hover-text-color: var(--color-text-9, #333);
  --search-normal-normal-border-width: var(--line-1, 1px);
  --search-normal-normal-btn-text-padding-left: var(--s-0, 0);
  --search-normal-normal-l-height: var(--s-9, 36px);
  --search-normal-normal-l-btn-text-size: var(--font-size-subhead, 14px);
  --search-normal-normal-m-height: var(--s-8, 32px);
  --search-normal-normal-m-btn-text-size: var(--font-size-subhead, 14px);
  --search-normal-dark-color: var(--color-brand-6, #0064c8);
  --search-normal-dark-hover-color: var(--color-brand-7, #0050a0);
  --search-normal-dark-text-color: var(--color-white, #fff);
  --search-normal-dark-bg-color: var(--color-white, #fff);
  --search-normal-dark-bg-opacity: 0;
  --search-normal-dark-shadow: var(--shadow-zero, none);
  --search-normal-dark-btn-text-color: var(--color-white, #fff);
  --search-normal-dark-btn-hover-bg-color: var(--color-brand-7, #0050a0);
  --search-normal-dark-btn-hover-text-color: var(--color-white, #fff);
  --search-normal-dark-border-width: var(--line-1, 1px);
  --search-normal-dark-btn-text-padding-left: var(--s-0, 0);
  --search-normal-dark-l-height: var(--s-9, 36px);
  --search-normal-dark-l-btn-text-size: var(--font-size-subhead, 14px);
  --search-normal-dark-m-height: var(--s-8, 32px);
  --search-normal-dark-m-btn-text-size: var(--font-size-subhead, 14px);
  --search-simple-corner: var(--corner-1, 2px);
  --search-simple-l-icon-margin-right: var(--s-3, 12px);
  --search-simple-m-icon-margin-right: var(--s-2, 8px);
  --search-simple-normal-color: var(--color-line-1, #e3e4e6);
  --search-simple-normal-hover-color: var(--color-line-4, #d1d5d9);
  --search-simple-normal-split-color: var(--color-line-1, #e3e4e6);
  --search-simple-normal-shadow: var(--shadow-zero, none);
  --search-simple-normal-icon-text-color: var(--color-text-2, #888);
  --search-simple-normal-icon-hover-text-color: var(--color-text-3, #555);
  --search-simple-normal-border-width: var(--line-1, 1px);
  --search-simple-normal-btn-text-padding-left: var(--s-0, 0);
  --search-simple-dark-color: var(--color-line-3, #577899);
  --search-simple-dark-hover-color: var(--color-line-3, #577899);
  --search-simple-dark-bg-color: var(--color-white, #fff);
  --search-simple-dark-bg-opacity: 0;
  --search-simple-dark-text-color: var(--color-white, #fff);
  --search-simple-dark-shadow: var(--shadow-zero, none);
  --search-simple-dark-icon-text-color: var(--color-text-2, #888);
  --search-simple-dark-icon-hover-text-color: var(--color-text-3, #555);
  --search-simple-dark-btn-text-padding-left: var(--s-0, 0);
  --search-simple-dark-split-color: var(--color-line-3, #577899);
  --search-simple-dark-border-width: var(--line-1, 1px);
  // tree
  --tree-node-padding: var(--s-1, 4px);
  --tree-node-title-margin: var(--s-1, 4px);
  --tree-node-title-padding: var(--s-1, 4px);
  --tree-node-title-font-size: var(--font-size-body-1, 12px);
  --tree-switch-size: var(--s-4, 16px);
  --tree-switch-border-width: var(--line-1, 1px);
  --tree-switch-margin-right: var(--s-1, 4px);
  --tree-line-width: var(--line-1, 1px);
  --tree-node-normal-color: var(--color-text-9, #333);
  --tree-node-normal-background: var(--color-white, #fff);
  --tree-node-title-border-radius: var(--corner-1, 2px);
  --tree-switch-arrow-color: var(--color-line-2, #c0c6cc);
  --tree-switch-icon-color: var(--color-text-3, #555);
  --tree-switch-bg-color: var(--color-white, #fff);
  --tree-switch-border-color: var(--color-fill-7, #003c78);
  --tree-switch-corner: var(--corner-1, 2px);
  --tree-line-color: var(--color-line-1, #e3e4e6);
  --tree-line-style: var(--line-solid, solid);
  --tree-node-hover-color: var(--color-text-9, #333);
  --tree-node-hover-bg-color: var(--color-fill-2, #f7f9fa);
  --tree-switch-hover-arrow-color: var(--color-fill-5, #0064c8);
  --tree-switch-hover-icon-color: var(--color-text-3, #555);
  --tree-switch-hover-bg-color: var(--color-white, #fff);
  --tree-switch-hover-border-color: var(--color-text-3, #555);
  --tree-node-selected-color: var(--color-brand-6, #0064c8);
  --tree-node-selected-background: transparent;
  --tree-node-disabled-color: var(--color-text-3, #555);
  --tree-node-disabled-background: transparent;
  // range
  --range-size-m-track-height: var(--s-1, 4px);
  --range-size-m-scale-height: var(--s-3, 12px);
  --range-size-m-scale-item-border-width: var(--line-1, 1px);
  --range-size-m-slider-hw: var(--s-4, 16px);
  --range-size-slider-border-style: var(--line-solid, solid);
  --range-size-slider-border-width: var(--line-1, 1px);
  --range-size-m-mark-top: 30px;
  --range-size-m-mark-font-size: var(--font-size-body-1, 12px);
  --range-size-m-mark-font-weight: var(--font-weight-2, normal);
  --range-size-m-mark-font-line-height: 20px;
  --range-size-m-track-radius: var(--corner-0, 0);
  --range-size-m-scale-radius: var(--corner-0, 0);
  --range-size-m-slider-shadow-moving: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --range-normal-unselected-color: var(--color-line-1, #e3e4e6);
  --range-normal-selected-color: var(--color-brand-6, #0064c8);
  --range-normal-slider-bg-color: var(--color-white, #fff);
  --range-normal-mark-color: var(--color-text-9, #333);
  --range-normal-mark-selected-color: var(--color-text-9, #333);
  --range-normal-unselected-color-hover: var(--color-line-1, #e3e4e6);
  --range-normal-selected-color-hover: var(--color-brand-6, #0064c8);
  --range-normal-slider-bg-color-hover: var(--color-white, #fff);
  --range-size-m-slider-shadow: var(--shadow-1, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --range-size-m-slider-shadow-hover: var(--shadow-1, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --range-normal-mark-color-hover: var(--color-text-2, #888);
  --range-normal-mark-selected-color-hover: var(--color-text-4, #111);
  --range-normal-slider-border-color-hover: transparent;
  --range-normal-unselected-color-disabled: var(--color-line-1, #e3e4e6);
  --range-normal-selected-color-disabled: var(--color-text-5, #ccc);
  --range-normal-slider-bg-color-disabled: var(--color-white, #fff);
  --range-normal-slider-border-color: var(--color-line-3, #577899);
  --range-normal-slider-border-color-disabled: var(--color-line-2, #c0c6cc);
  --range-normal-mark-color-disabled: var(--color-text-5, #ccc);
  --range-normal-mark-selected-color-disabled: var(--color-text-5, #ccc);
  // card
  --card-corner: var(--corner-1, 2px);
  --card-padding-lr: var(--s-4, 16px);
  --card-border-width: var(--line-1, 1px);
  --card-head-padding-bottom: var(--s-3, 12px);
  --card-head-bottom-border-width: var(--line-1, 1px);
  --card-head-main-height: var(--s-12, 48px);
  --card-head-main-margin-top: var(--s-1, 4px);
  --card-head-main-margin-bottom: var(--s-1, 4px);
  --card-title-font-size: var(--font-size-subhead, 14px);
  --card-title-font-weight: var(--font-weight-2, normal);
  --card-sub-title-font-size: var(--font-size-caption, 12px);
  --card-title-extra-font-size: var(--font-size-body-1, 12px);
  --card-title-bullet-width: var(--line-3, 3px);
  --card-title-bullet-height: var(--s-4, 16px);
  --card-title-padding-left: var(--s-2, 8px);
  --card-sub-title-padding-left: var(--s-2, 8px);
  --card-body-show-divider-padding-top: var(--s-4, 16px);
  --card-body-hide-divider-padding-top: var(--s-0, 0);
  --card-content-font-size: var(--font-size-body-1, 12px);
  --card-content-line-height: var(--font-line-height-2, 1.5);
  --card-body-padding-bottom: var(--s-4, 16px);
  --card-more-btn-height: var(--s-4, 16px);
  --card-more-btn-padding-top: var(--s-2, 8px);
  --card-more-btn-font-size: var(--font-size-body-1, 12px);
  --card-shadow: var(--shadow-zero, none);
  --card-border-style: var(--line-solid, solid);
  --card-border-color: var(--color-line-1, #e3e4e6);
  --card-background: var(--color-white, #fff);
  --card-header-background: var(--color-white, #fff);
  --card-title-color: var(--color-text-9, #333);
  --card-sub-title-color: var(--color-text-3, #555);
  --card-title-extra-color: var(--color-link-1, #0064c8);
  --card-title-bullet-color: var(--color-brand-6, #0064c8);
  --card-content-color: var(--color-text-3, #555);
  --card-head-bottom-border-color: transparent;
  --card-more-btn-color: var(--color-link-1, #0064c8);
  --card-more-btn-background: var(--color-white, #fff);
  // typography
  --typography-text-color: var(--color-text-9, #333);
  --typography-text-strong-font-weight: var(--font-weight-semi-bold, 600);
  --typography-text-code-corner: var(--corner-1, 2px);
  --typography-text-mark-color: var(--color-text-9, #333);
  --typography-text-mark-background: var(--color-warning-6, #fac800);
  --typography-text-code-color: var(--color-text-9, #333);
  --typography-text-code-background: var(--color-fill-3, #eff3f8);
  --typography-text-code-border-color: var(--color-line-2, #c0c6cc);
  --typography-paragraph-font-size: var(--font-size-body-1, 12px);
  --typography-paragraph-line-height: var(--font-line-height-2, 1.5);
  --typography-title-h1-font-size: var(--font-size-display-3, 48px);
  --typography-title-h2-font-size: var(--font-size-display-2, 36px);
  --typography-title-h3-font-size: var(--font-size-display-1, 24px);
  --typography-title-h4-font-size: var(--font-size-headline, 20px);
  --typography-title-h5-font-size: var(--font-size-title, 16px);
  --typography-title-h6-font-size: var(--font-size-subhead, 14px);
  --typography-title-font-weight: var(--font-weight-semi-bold, 600);
  // switch
  --switch-size-m-width: var(--s-12, 48px);
  --switch-size-m-radius-container: var(--corner-3, 12px);
  --switch-size-m-trigger: var(--s-5, 20px);
  --switch-size-m-radius-trigger: var(--corner-circle, 50%);
  --switch-size-s-width: var(--s-10, 40px);
  --switch-size-s-radius-container: var(--corner-3, 12px);
  --switch-size-s-trigger: var(--s-4, 16px);
  --switch-size-s-radius-trigger: var(--corner-circle, 50%);
  --switch-border-width-container: var(--line-2, 2px);
  --switch-text-on-left: var(--s-2, 8px);
  --switch-size-s-text-on-left: var(--s-1, 4px);
  --switch-text-off-right: var(--s-2, 8px);
  --switch-size-s-text-off-right: var(--s-1, 4px);
  --switch-border-width-trigger: var(--line-1, 1px);
  --switch-normal-on-bg-color: var(--color-success-7, #00a700);
  --switch-hover-on-bg-color: var(--color-success-7, #00a700);
  --switch-disabled-on-bg-color: var(--color-fill-8, #d1d5d9);
  --switch-normal-on-trigger-bg-color: var(--color-white, #fff);
  --switch-hover-on-trigger-bg-color: var(--color-white, #fff);
  --switch-disabled-on-trigger-bg-color: var(--color-white, #fff);
  --switch-normal-on-color-font: var(--color-white, #fff);
  --switch-disabled-on-color-font: var(--color-text-5, #ccc);
  --switch-disabled-on-border-color: var(--color-line-3, #577899);
  --switch-handle-on-border-color: transparent;
  --switch-on-shadow: var(--shadow-zero, none);
  --switch-normal-off-bg-color: var(--color-brand2-6, #577899);
  --switch-hover-off-bg-color: var(--color-brand2-6, #577899);
  --switch-disabled-off-bg-color: var(--color-fill-8, #d1d5d9);
  --switch-normal-off-trigger-bg-color: var(--color-white, #fff);
  --switch-hover-off-trigger-bg-color: var(--color-white, #fff);
  --switch-disabled-off-trigger-bg-color: var(--color-fill-1, #f8f8f9);
  --switch-handle-disabled-border-color: transparent;
  --switch-normal-off-color-font: var(--color-fill-1, #f8f8f9);
  --switch-disabled-off-color-font: var(--color-text-3, #555);
  --switch-handle-off-border-color: transparent;
  --switch-normal-off-border-color: transparent;
  --switch-hover-off-border-color: transparent;
  --switch-off-shadow: var(--shadow-1, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --switch-rtl-on-shadow: var(--shadow-1-left, 0 0 4px 0 rgba(0, 0, 0, 0.16));
  // paragraph
  --paragraph-text-color: var(--color-text-4, #111);
  --paragraph-s-font-size: var(--font-size-body-1, 12px);
  --paragraph-m-font-size: var(--font-size-body-2, 14px);
  --paragraph-s-line-height: var(--font-line-height-2, 1.5);
  --paragraph-l-line-height: var(--font-line-height-3, 1.6);
  // menu
  --menu-padding-vertical: var(--s-2, 8px);
  --menu-padding-horizontal: var(--s-4, 16px);
  --menu-line-height: var(--s-8, 32px);
  --menu-font-size: var(--font-size-body-1, 12px);
  --menu-submenu-title-size: var(--font-size-body-1, 12px);
  --menu-padding-title-horizontal: var(--s-3, 12px);
  --menu-divider-width: var(--line-1, 1px);
  --menu-divider-margin-ver: var(--s-2, 8px);
  --menu-divider-margin-hoz: var(--s-3, 12px);
  --menu-icon-selected-right: var(--s-1, 4px);
  --menu-icon-margin: var(--s-1, 4px);
  --menu-shadow: var(--shadow-1-down, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --menu-color: var(--color-text-9, #333);
  --menu-divider-style: var(--line-solid, solid);
  --menu-divider-color: var(--color-line-1, #e3e4e6);
  --menu-background: var(--color-white, #fff);
  --menu-arrow-color: var(--color-text-9, #333);
  --menu-background-selected: transparent;
  --menu-color-selected: var(--color-text-4, #111);
  --menu-icon-selected-color: var(--color-text-9, #333);
  --menu-background-hover: var(--color-fill-2, #f7f9fa);
  --menu-color-hover: var(--color-text-9, #333);
  --menu-arrow-color-hover: var(--color-text-9, #333);
  --menu-icon-selected-hover-color: var(--color-text-9, #333);
  --menu-color-disabled: var(--color-text-3, #555);
  // upload
  --upload-disable-text-color: var(--color-text-3, #555);
  --upload-disable-border-color: var(--color-line-4, #d1d5d9);
  --upload-text-list-height: var(--s-11, 44px);
  --upload-text-list-padding-left-right: var(--s-4, 16px);
  --upload-text-list-font-size: var(--font-size-body-1, 12px);
  --upload-text-list-close-icon-right: var(--s-3, 12px);
  --upload-text-list-corner: var(--corner-0, 0);
  --upload-text-list-bg-color: transparent;
  --upload-text-list-bg-color-hover: transparent;
  --upload-text-list-bg-color-error: transparent;
  --upload-text-list-error-text-color: var(--color-error-7, #c80000);
  --upload-text-list-close-icon-color: var(--color-text-9, #333);
  --upload-text-list-close-icon-color-hover: var(--color-fill-5, #0064c8);
  --upload-text-list-name-font-color: var(--color-text-9, #333);
  --upload-text-list-name-font-color-hover: var(--color-brand-6, #0064c8);
  --upload-text-list-size-font-color: var(--color-text-7, #666);
  --upload-text-list-size-font-color-hover: var(--color-brand-6, #0064c8);
  --upload-text-list-progress-height: var(--s-1, 4px);
  --upload-image-list-item-padding: var(--s-2, 8px);
  --upload-image-list-item-picture-size: var(--s-12, 48px);
  --upload-image-list-item-picture-border-width: var(--line-1, 1px);
  --upload-image-list-item-picture-corner: var(--corner-0, 0);
  --upload-image-list-item-thumbnail-font-color: var(--color-text-1, #c1c1c1);
  --upload-image-list-item-font-size: var(--font-size-body-1, 12px);
  --upload-image-list-close-icon-right: var(--s-1, 4px);
  --upload-image-list-item-border-width: var(--line-1, 1px);
  --upload-image-list-item-bg-color: var(--color-fill-1, #f8f8f9);
  --upload-image-list-item-uploading-bg-color: var(--color-fill-1, #f8f8f9);
  --upload-image-list-item-error-bg-color: var(--color-error-1, #fdfbfb);
  --upload-image-list-close-icon-color: var(--color-text-9, #333);
  --upload-image-list-close-icon-color-hover: var(--color-text-9, #333);
  --upload-image-list-item-border-color: transparent;
  --upload-image-list-item-border-color-error: transparent;
  --upload-image-list-item-border-color-hover: transparent;
  --upload-image-list-item-picture-border-color: var(--color-line-1, #e3e4e6);
  --upload-image-list-item-picture-background-color: var(--color-fill-1, #f8f8f9);
  --upload-image-list-progress-height: var(--s-1, 4px);
  --upload-card-size: var(--s-22, 88px);
  --upload-card-margin-bottom: var(--s-4, 16px);
  --upload-card-add-text-size: var(--font-size-body-1, 12px);
  --upload-card-add-text-margin-top: var(--s-2, 8px);
  --upload-card-bg-color: var(--color-white, #fff);
  --upload-card-border-style: var(--line-dashed, dashed);
  --upload-card-border-color: var(--color-line-2, #c0c6cc);
  --upload-card-hover-border-color: var(--color-fill-5, #0064c8);
  --upload-card-font-color: var(--color-text-9, #333);
  --upload-card-icon-color: var(--color-text-9, #333);
  --upload-card-hover-font-color: var(--color-fill-5, #0064c8);
  --upload-card-list-bg-color: transparent;
  --upload-card-list-uploading-bg-color: var(--color-white, #fff);
  --upload-card-list-bg-color-error: var(--color-fill-1, #f8f8f9);
  --upload-card-list-margin-right: var(--s-3, 12px);
  --upload-card-list-padding: var(--s-0, 0);
  --upload-card-list-corner: var(--corner-0, 0);
  --upload-card-list-border-color: var(--color-line-1, #e3e4e6);
  --upload-card-list-border-color-error: var(--color-error-7, #c80000);
  --upload-card-list-thumbnail-font-color: var(--color-fill-5, #0064c8);
  --upload-card-list-thumbnail-font-size: var(--font-size-body-1, 12px);
  --upload-card-list-name-margin-top: var(--s-1, 4px);
  --upload-card-list-name-font-size: var(--font-size-body-1, 12px);
  --upload-card-list-name-font-color: var(--color-text-9, #333);
  --upload-card-list-progress-height: var(--s-1, 4px);
  --upload-select-card-tool-bg-color: var(--color-black, #000);
  --upload-select-card-tool-bg-opacity: .7;
  --upload-drag-zone-border-color: var(--color-line-4, #d1d5d9);
  --upload-drag-zone-over-border-color: var(--color-line-4, #d1d5d9);
  --upload-drag-zone-corner: var(--corner-1, 2px);
  --upload-drag-zone-font-size: var(--font-size-body-1, 12px);
  --upload-drag-zone-icon-size: var(--s-4, 16px);
  --upload-drag-zone-hint-font-size: var(--font-size-body-1, 12px);
  --upload-drag-zone-bg-color: transparent;
  --upload-drag-zone-upload-icon-color: var(--color-fill-5, #0064c8);
  --upload-drag-zone-upload-normal-title-color: var(--color-text-9, #333);
  --upload-drag-zone-upload-normal-hint-color: var(--color-text-9, #333);
  // form
  --form-label-padding-r: var(--s-3, 12px);
  --form-item-m-margin-b: var(--s-4, 16px);
  --form-item-l-margin-b: var(--s-4, 16px);
  --form-item-s-margin-b: var(--s-4, 16px);
  --form-inline-l-item-margin-r: var(--s-6, 24px);
  --form-inline-m-item-margin-r: var(--s-5, 20px);
  --form-inline-s-item-margin-r: var(--s-4, 16px);
  --form-help-margin-top: var(--s-1, 4px);
  --form-help-font-size: var(--font-size-caption, 12px);
  --form-help-color: var(--color-text-2, #888);
  --form-error-color: var(--color-error-7, #c80000);
  --form-warning-color: var(--color-warning-3, #fff3b4);
  --form-top-label-margin-b: 2px;
  --form-label-color: var(--color-text-3, #555);
  // tag
  --tag-size-l-height: var(--s-7, 28px);
  --tag-size-m-height: var(--s-6, 24px);
  --tag-size-s-height: var(--s-5, 20px);
  --tag-size-l-padding-lr: var(--s-4, 16px);
  --tag-size-m-padding-lr: var(--s-2, 8px);
  --tag-size-s-padding-lr: var(--s-2, 8px);
  --tag-corner-radius: var(--corner-3, 12px);
  --tag-checkable-corner-radius: var(--corner-1, 2px);
  --tag-border-width: var(--line-1, 1px);
  --tag-shadow: var(--shadow-zero, none);
  --tag-size-l-text-size: var(--font-size-subhead, 14px);
  --tag-size-m-text-size: var(--font-size-body-1, 12px);
  --tag-size-s-text-size: var(--font-size-body-1, 12px);
  --tag-size-s-content-min-width: var(--s-7, 28px);
  --tag-size-m-content-min-width: var(--s-10, 40px);
  --tag-size-l-content-min-width: var(--s-12, 48px);
  --tag-size-l-tick-icon-bg-size: var(--s-9, 36px);
  --tag-size-m-tick-icon-bg-size: var(--s-0, 0);
  --tag-size-s-tick-icon-bg-size: var(--s-0, 0);
  --tag-normal-text-color: var(--color-text-4, #111);
  --tag-fill-text-color: var(--color-text-3, #555);
  --tag-closable-normal-icon-color: var(--color-white, #fff);
  --tag-closable-normal-icon-color-hover: var(--color-text-9, #333);
  --tag-closable-normal-icon-color-disabled: var(--color-white, #fff);
  --tag-closable-normal-bg: var(--color-line-3, #577899);
  --tag-closable-normal-bg-hover: var(--color-fill-2, #f7f9fa);
  --tag-closable-normal-bg-disabled: var(--color-line-1, #e3e4e6);
  --tag-closable-bordered-text-color: var(--color-text-9, #333);
  --tag-closable-bordered-border-color: var(--color-line-2, #c0c6cc);
  --tag-closable-bordered-bg: var(--color-white, #fff);
  --tag-closable-bordered-text-color-hover: var(--color-brand-6, #0064c8);
  --tag-closable-bordered-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-closable-bordered-bg-hover: var(--color-fill-2, #f7f9fa);
  --tag-closable-bordered-tail-color: var(--color-text-9, #333);
  --tag-closable-bordered-tail-color-hover: var(--color-text-9, #333);
  --tag-closable-bordered-tail-color-disabled: var(--color-text-1, #c1c1c1);
  --tag-closable-bordered-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-closable-bordered-text-color-disabled: var(--color-text-5, #ccc);
  --tag-closable-bordered-bg-disabled: transparent;
  --tag-fill-tail-color: var(--color-text-9, #333);
  --tag-fill-border-color: var(--color-line-2, #c0c6cc);
  --tag-fill-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-fill-text-color-disabled: var(--color-text-5, #ccc);
  --tag-fill-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-fill-bg-color-disabled: var(--color-white, #fff);
  --tag-fill-tail-color-disabled: var(--color-text-5, #ccc);
  --tag-bordered-text-color: var(--color-text-9, #333);
  --tag-bordered-tail-color: var(--color-text-3, #555);
  --tag-secondary-text-color: var(--color-brand-6, #0064c8);
  --tag-normal-text-color-hover: var(--color-brand-6, #0064c8);
  --tag-fill-text-color-hover: var(--color-text-9, #333);
  --tag-fill-tail-color-hover: var(--color-text-9, #333);
  --tag-bordered-text-color-hover: var(--color-text-9, #333);
  --tag-bordered-tail-color-hover: var(--color-text-4, #111);
  --tag-bordered-tail-color-disabled: var(--color-text-1, #c1c1c1);
  --tag-bordered-text-color-disabled: var(--color-text-5, #ccc);
  --tag-bordered-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-bordered-bg-disabled: var(--color-white, #fff);
  --tag-secondary-text-color-hover: var(--color-brand-6, #0064c8);
  --tag-bordered-border-color: var(--color-line-2, #c0c6cc);
  --tag-secondary-border-color: var(--color-brand-6, #0064c8);
  --tag-checkable-normal-bg-selected: var(--color-white, #fff);
  --tag-checkable-secondary-bg-selected: var(--color-brand-6, #0064c8);
  --tag-bordered-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-secondary-border-color-hover: var(--color-brand-6, #0064c8);
  --tag-checkable-normal-bg-selected-hover: transparent;
  --tag-checkable-secondary-bg-selected-hover: var(--color-brand-9, #002850);
  --tag-fill-bg-color: var(--color-white, #fff);
  --tag-primary-background-color: var(--color-brand-6, #0064c8);
  --tag-bordered-bg: var(--color-white, #fff);
  --tag-secondary-bg: transparent;
  --tag-fill-bg-color-hover: var(--color-white, #fff);
  --tag-bordered-bg-hover: var(--color-white, #fff);
  --tag-secondary-bg-hover: var(--color-fill-2, #f7f9fa);
  --tag-text-color-disabled: var(--color-text-1, #c1c1c1);
  --tag-border-color-disabled: var(--color-line-1, #e3e4e6);
  --tag-checkable-fill-text-color: var(--color-text-9, #333);
  --tag-checkable-fill-bg-color: var(--color-white, #fff);
  --tag-checkable-fill-border-color: var(--color-line-2, #c0c6cc);
  --tag-checkable-fill-text-color-hover: var(--color-fill-5, #0064c8);
  --tag-checkable-fill-bg-color-hover: var(--color-fill-2, #f7f9fa);
  --tag-checkable-fill-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-checkable-fill-tail-color: var(--color-text-3, #555);
  --tag-checkable-fill-tail-color-hover: var(--color-text-4, #111);
  --tag-checkable-fill-tail-color-disabled: var(--color-text-1, #c1c1c1);
  --tag-checkable-fill-text-color-disabled: var(--color-text-5, #ccc);
  --tag-checkable-fill-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-checkable-fill-bg-color-disabled: var(--color-white, #fff);
  --tag-checkable-normal-text-color: var(--color-text-9, #333);
  --tag-checkable-normal-border-color: var(--color-line-2, #c0c6cc);
  --tag-checkable-normal-bg: var(--color-white, #fff);
  --tag-checkable-normal-text-color-hover: var(--color-fill-5, #0064c8);
  --tag-checkable-normal-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-checkable-normal-bg-hover: var(--color-fill-2, #f7f9fa);
  --tag-checkable-normal-text-selected-disabled: var(--color-text-5, #ccc);
  --tag-checkable-normal-border-selected-disabled: var(--color-line-4, #d1d5d9);
  --tag-checkable-normal-bg-selected-disabled: var(--color-white, #fff);
  --tag-checkable-normal-tick-bg-selected-disabled: var(--color-line-1, #e3e4e6);
  --tag-checkable-primary-text-color: var(--color-brand-6, #0064c8);
  --tag-checkable-primary-bg-color: var(--color-white, #fff);
  --tag-checkable-primary-border-color: var(--color-brand-6, #0064c8);
  --tag-checkable-primary-text-color-disabled: var(--color-text-5, #ccc);
  --tag-checkable-primary-text-color-hover: var(--color-brand-6, #0064c8);
  --tag-checkable-primary-bg-color-hover: var(--color-fill-2, #f7f9fa);
  --tag-checkable-primary-border-color-hover: var(--color-fill-5, #0064c8);
  --tag-checkable-primary-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-checkable-primary-bg-color-disabled: var(--color-white, #fff);
  --tag-checkable-primary-tail-color: var(--color-white, #fff);
  --tag-checkable-primary-tail-color-hover: var(--color-white, #fff);
  --tag-checkable-secondary-bg-selected-disabled: var(--color-line-1, #e3e4e6);
  --tag-checkable-normal-icon-color-selected: transparent;
  --tag-checkable-normal-icon-color-selected-hover: transparent;
  --tag-checkable-normal-icon-color-selected-disabled: var(--color-white, #fff);
  --tag-checkable-secondary-icon-color-selected: var(--color-white, #fff);
  --tag-checkable-secondary-icon-color-selected-hover: var(--color-white, #fff);
  --tag-checkable-secondary-icon-color-selected-disabled: var(--color-white, #fff);
  --tag-closable-primary-fill-text-color: var(--color-text-9, #333);
  --tag-closable-primary-fill-border-color: var(--color-line-2, #c0c6cc);
  --tag-closable-primary-fill-bg-color: var(--color-white, #fff);
  --tag-closable-primary-fill-text-color-hover: var(--color-brand-6, #0064c8);
  --tag-closable-primary-fill-border-color-hover: var(--color-line-2, #c0c6cc);
  --tag-closable-primary-fill-bg-color-hover: var(--color-fill-2, #f7f9fa);
  --tag-closable-primary-fill-text-color-disabled: var(--color-text-5, #ccc);
  --tag-closable-primary-fill-border-color-disabled: var(--color-line-4, #d1d5d9);
  --tag-closable-primary-fill-bg-color-disabled: var(--color-white, #fff);
  // table
  --table-normal-border-width: var(--line-1, 1px);
  --table-th-font-size: var(--font-size-body-1, 12px);
  --table-th-font-weight: var(--font-weight-2, normal);
  --table-body-font-size: var(--font-size-body-1, 12px);
  --table-empty-padding: var(--s-8, 32px);
  --table-cell-padding-top: var(--s-2, 8px);
  --table-cell-padding-left: var(--s-2, 8px);
  --table-header-padding-top: var(--s-3, 12px);
  --table-header-padding-left: var(--s-2, 8px);
  --table-header-icon-margin-left: var(--s-2, 8px);
  --table-size-s-cell-padding-top: var(--s-2, 8px);
  --table-size-s-cell-padding-left: var(--s-2, 8px);
  --table-size-s-header-padding-top: var(--s-2, 8px);
  --table-size-s-header-padding-left: var(--s-2, 8px);
  --table-group-split: var(--s-2, 8px);
  --table-normal-border-color: var(--color-line-1, #e3e4e6);
  --table-normal-border-style: var(--line-solid, solid);
  --table-th-bg: var(--color-brand-3, #fbfcfd);
  --table-th-color: var(--color-text-9, #333);
  --table-sort-color: var(--color-text-4, #111);
  --table-group-th-bg: var(--color-fill-2, #f7f9fa);
  --table-group-th-color: var(--color-text-4, #111);
  --table-row-bg: var(--color-white, #fff);
  --table-row-color: var(--color-text-9, #333);
  --table-td-gray: var(--color-fill-1, #f8f8f9);
  --table-td-normal: var(--color-white, #fff);
  --table-empty-color: var(--color-text-5, #ccc);
  --table-group-footer-bg: var(--color-fill-2, #f7f9fa);
  --table-group-footer-color: var(--color-text-4, #111);
  --table-row-hover-bg: var(--color-fill-2, #f7f9fa);
  --table-row-hover-color: var(--color-text-9, #333);
  --table-row-selected-bg: var(--color-fill-3, #eff3f8);
  --table-row-selected-color: var(--color-text-9, #333);
  --table-sort-color-current: var(--color-brand-6, #0064c8);
  --table-expanded-ctrl-disabled-color: var(--color-text-2, #888);
  // button
  --btn-shadow: var(--shadow-zero, none);
  --btn-shadow-hover: var(--shadow-1, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --btn-size-s-height: var(--s-6, 24px);
  --btn-size-s-padding: var(--s-2, 8px);
  --btn-size-s-border-width: var(--line-1, 1px);
  --btn-size-s-font: var(--font-size-body-1, 12px);
  --btn-size-s-icon-margin: var(--s-2, 8px);
  --btn-size-s-corner: var(--corner-1, 2px);
  --btn-size-m-height: var(--s-8, 32px);
  --btn-size-m-padding: var(--s-4, 16px);
  --btn-size-m-border-width: var(--line-1, 1px);
  --btn-size-m-font: var(--font-size-body-1, 12px);
  --btn-size-m-icon-margin: var(--s-2, 8px);
  --btn-size-m-corner: var(--corner-1, 2px);
  --btn-size-l-height: var(--s-9, 36px);
  --btn-size-l-padding: var(--s-4, 16px);
  --btn-size-l-border-width: var(--line-1, 1px);
  --btn-size-l-font: var(--font-size-body-2, 14px);
  --btn-size-l-icon-margin: var(--s-2, 8px);
  --btn-size-l-corner: var(--corner-1, 2px);
  --btn-pure-color-disabled: var(--color-text-5, #ccc);
  --btn-pure-bg-disabled: var(--color-white, #fff);
  --btn-pure-border-color-disabled: var(--color-line-2, #c0c6cc);
  --btn-pure-normal-color-disabled: var(--color-text-5, #ccc);
  --btn-pure-normal-bg-disabled: var(--color-white, #fff);
  --btn-pure-normal-border-color-disabled: var(--color-line-4, #d1d5d9);
  --btn-pure-normal-color: var(--color-text-9, #333);
  --btn-pure-normal-color-hover: var(--color-text-9, #333);
  --btn-pure-normal-color-active: var(--color-text-9, #333);
  --btn-pure-normal-bg: var(--color-white, #fff);
  --btn-pure-normal-bg-hover: var(--color-brand-1, #f7f9fa);
  --btn-pure-normal-bg-active: var(--color-fill-3, #eff3f8);
  --btn-pure-normal-border-color: var(--color-line-2, #c0c6cc);
  --btn-pure-normal-border-color-hover: var(--color-line-2, #c0c6cc);
  --btn-pure-normal-border-color-active: var(--color-line-2, #c0c6cc);
  --btn-pure-normal-border-style: var(--line-solid, solid);
  --btn-pure-secondary-color-disabled: var(--color-text-5, #ccc);
  --btn-pure-secondary-bg-disabled: var(--color-white, #fff);
  --btn-pure-secondary-border-color-disabled: transparent;
  --btn-pure-secondary-color: var(--color-text-9, #333);
  --btn-pure-secondary-color-hover: var(--color-text-9, #333);
  --btn-pure-secondary-color-active: var(--color-text-9, #333);
  --btn-pure-secondary-bg: transparent;
  --btn-pure-secondary-bg-hover: var(--color-fill-2, #f7f9fa);
  --btn-pure-secondary-bg-active: var(--color-fill-3, #eff3f8);
  --btn-pure-secondary-border-color: transparent;
  --btn-pure-secondary-border-color-hover: transparent;
  --btn-pure-secondary-border-color-active: transparent;
  --btn-pure-secondary-border-style: var(--line-solid, solid);
  --btn-pure-primary-color-disabled: var(--color-white, #fff);
  --btn-pure-primary-bg-disabled: var(--color-fill-8, #d1d5d9);
  --btn-pure-primary-border-color-disabled: transparent;
  --btn-pure-primary-color: var(--color-white, #fff);
  --btn-pure-primary-color-hover: var(--color-white, #fff);
  --btn-pure-primary-color-active: var(--color-white, #fff);
  --btn-pure-primary-bg: var(--color-fill-5, #0064c8);
  --btn-pure-primary-bg-hover: var(--color-fill-5, #0064c8);
  --btn-pure-primary-bg-active: var(--color-fill-7, #003c78);
  --btn-pure-primary-border-color: transparent;
  --btn-pure-primary-border-color-hover: transparent;
  --btn-pure-primary-border-color-active: transparent;
  --btn-pure-primary-border-style: var(--line-solid, solid);
  --btn-ghost-border-style: var(--line-solid, solid);
  --btn-ghost-dark-color: var(--color-white, #fff);
  --btn-ghost-dark-border-color: var(--color-white, #fff);
  --btn-ghost-dark-color-hover: var(--color-white, #fff);
  --btn-ghost-dark-bg: transparent;
  --btn-ghost-dark-bg-opacity: 0;
  --btn-ghost-dark-bg-hover-rgb: var(--color-white, #fff);
  --btn-ghost-dark-bg-hover-opacity: 0.29;
  --btn-ghost-dark-border-color-hover: var(--color-white, #fff);
  --btn-ghost-dark-color-disabled-rgb: var(--color-white, #fff);
  --btn-ghost-dark-color-disabled-opacity: 0.25;
  --btn-ghost-dark-bg-disabled: transparent;
  --btn-ghost-dark-border-color-disabled-rgb: var(--color-white, #fff);
  --btn-ghost-dark-border-color-disabled-opacity: 0.15;
  --btn-ghost-light-color: var(--color-brand-6, #0064c8);
  --btn-ghost-light-border-color: var(--color-brand-6, #0064c8);
  --btn-ghost-light-bg: var(--color-white, #fff);
  --btn-ghost-light-bg-opacity: 1;
  --btn-ghost-light-color-hover: var(--color-white, #fff);
  --btn-ghost-light-border-color-hover: transparent;
  --btn-ghost-light-bg-hover-rgb: var(--color-brand-7, #0050a0);
  --btn-ghost-light-bg-hover-opacity: 1;
  --btn-ghost-light-color-disabled-rgb: var(--color-text-1, #c1c1c1);
  --btn-ghost-light-color-disabled-opacity: 1;
  --btn-ghost-light-bg-disabled: var(--color-fill-2, #f7f9fa);
  --btn-ghost-light-border-color-disabled-rgb: var(--color-white, #fff);
  --btn-ghost-light-border-color-disabled-opacity: 1;
  --btn-warning-border-style: var(--line-solid, solid);
  --btn-warning-primary-color: var(--color-white, #fff);
  --btn-warning-primary-color-hover: var(--color-white, #fff);
  --btn-warning-primary-color-active: var(--color-white, #fff);
  --btn-warning-primary-border-color: var(--color-error-3, #f8efef);
  --btn-warning-primary-border-color-hover: var(--color-error-4, #f5e6e6);
  --btn-warning-primary-border-color-active: var(--color-error-4, #f5e6e6);
  --btn-warning-primary-bg: var(--color-error-7, #c80000);
  --btn-warning-primary-bg-hover: var(--color-error-7, #c80000);
  --btn-warning-primary-bg-active: var(--color-error-7, #c80000);
  --btn-warning-primary-color-disabled: var(--color-white, #fff);
  --btn-warning-primary-border-color-disabled: var(--color-white, #fff);
  --btn-warning-primary-bg-disabled: var(--color-fill-8, #d1d5d9);
  --btn-warning-normal-color: var(--color-error-7, #c80000);
  --btn-warning-normal-color-hover: var(--color-error-7, #c80000);
  --btn-warning-normal-color-active: var(--color-error-7, #c80000);
  --btn-warning-normal-border-color: var(--color-error-7, #c80000);
  --btn-warning-normal-border-color-hover: var(--color-error-7, #c80000);
  --btn-warning-normal-border-color-active: var(--color-error-7, #c80000);
  --btn-warning-normal-bg: var(--color-white, #fff);
  --btn-warning-normal-bg-hover: var(--color-error-2, #faf7f7);
  --btn-warning-normal-bg-active: var(--color-error-2, #faf7f7);
  --btn-warning-normal-color-disabled: var(--color-text-5, #ccc);
  --btn-warning-normal-border-color-disabled: var(--color-line-4, #d1d5d9);
  --btn-warning-normal-bg-disabled: var(--color-white, #fff);
  --btn-text-primary-color: var(--color-link-1, #0064c8);
  --btn-text-primary-color-hover: var(--color-link-3, #0064c8);
  --btn-text-disabled-color: var(--color-text-5, #ccc);
  --btn-text-loading-color: var(--color-text-4, #111);
  --btn-text-secondary-color: var(--color-text-9, #333);
  --btn-text-secondary-color-hover: var(--color-brand-6, #0064c8);
  --btn-text-normal-color: var(--color-text-9, #333);
  --btn-text-normal-color-hover: var(--color-fill-5, #0064c8);
  --btn-text-size-s-height: var(--s-7, 28px);
  --btn-text-size-s-font: var(--font-size-body-1, 12px);
  --btn-text-icon-s-margin: var(--s-1, 4px);
  --btn-text-size-m-height: var(--s-8, 32px);
  --btn-text-size-m-font: var(--font-size-body-1, 12px);
  --btn-text-icon-m-margin: var(--s-1, 4px);
  --btn-text-size-l-height: var(--s-9, 36px);
  --btn-text-size-l-font: var(--font-size-body-2, 14px);
  --btn-text-icon-l-margin: var(--s-1, 4px);
  // input
  --input-text-color: var(--color-text-9, #333);
  --input-border-color: var(--color-line-2, #c0c6cc);
  --input-label-color: var(--color-text-3, #555);
  --input-hover-border-color: var(--color-line-2, #c0c6cc);
  --input-hover-bg-color: var(--color-white, #fff);
  --input-focus-border-color: var(--color-brand-6, #0064c8);
  --input-focus-bg-color: var(--color-white, #fff);
  --input-focus-shadow-spread: var(--line-zero, 0);
  --input-border-width: var(--line-1, 1px);
  --input-bg-color: var(--color-white, #fff);
  --input-placeholder-color: var(--color-text-7, #666);
  --input-disabled-color: var(--color-text-5, #ccc);
  --input-disabled-border-color: var(--color-line-2, #c0c6cc);
  --input-disabled-bg-color: var(--color-fill-2, #f7f9fa);
  --input-multiple-padding-lr: var(--s-4, 16px);
  --input-multiple-padding-tb: var(--s-3, 12px);
  --input-multiple-font-size: var(--font-size-body-1, 12px);
  --input-multiple-corner: var(--corner-1, 2px);
  --input-addon-bg-color: var(--color-fill-1, #f8f8f9);
  --input-addon-text-color: var(--color-text-2, #888);
  --input-addon-padding: var(--s-2, 8px);
  --input-l-padding: var(--s-3, 12px);
  --input-l-label-padding-left: var(--s-4, 16px);
  --input-l-icon-padding-right: var(--s-3, 12px);
  --input-m-padding: var(--s-3, 12px);
  --input-m-label-padding-left: var(--s-4, 16px);
  --input-m-icon-padding-right: var(--s-2, 8px);
  --input-s-padding: var(--s-3, 12px);
  --input-s-label-padding-left: var(--s-2, 8px);
  --input-s-icon-padding-right: var(--s-1, 4px);
  --input-feedback-warning-border-color: var(--color-warning-3, #fff3b4);
  --input-feedback-warning-bg-color: var(--color-white, #fff);
  --input-feedback-warning-color: var(--color-warning-3, #fff3b4);
  --input-feedback-success-color: var(--color-success-3, #c1f0c2);
  --input-feedback-loading-color: var(--color-text-2, #888);
  --input-feedback-error-border-color: var(--color-error-7, #c80000);
  --input-feedback-error-bg-color: var(--color-white, #fff);
  --input-max-len-error-color: var(--color-error-3, #f8efef);
  --input-max-len-warning-color: var(--color-warning-3, #fff3b4);
  --input-max-len-color: var(--color-text-2, #888);
  --input-max-len-font-size: var(--font-size-caption, 12px);
  --input-hint-color: var(--color-text-2, #888);
  --input-hint-hover-color: var(--color-text-3, #555);
  // loading
  --loading-dot-color: var(--color-brand-6, #0064c8);
  --loading-large-size: var(--s-12, 48px);
  --loading-medium-size: var(--s-8, 32px);
  // badge
  --badge-size-dot-width: 8px;
  --badge-size-list-margin: var(--s-0, 0);
  --badge-size-count-config-height: 18px;
  --badge-size-count-padding-lr: var(--s-1, 4px);
  --badge-size-custom-padding-lr: var(--s-1, 4px);
  --badge-size-count-font: var(--font-size-body-1, 12px);
  --badge-color-bg: var(--color-error-7, #c80000);
  --badge-size-count-border-radius: var(--s-4, 16px);
  --badge-dot-color-bg: var(--color-error-7, #c80000);
  --badge-size-dot-border-radius: var(--s-2, 8px);
  --badge-size-custom-border-radius: var(--corner-1, 2px);
  // dialog
  --dialog-border-width: var(--line-1, 1px);
  --dialog-title-font-size: var(--font-size-subhead, 14px);
  --dialog-title-padding-top: var(--s-6, 24px);
  --dialog-title-padding-bottom: var(--s-3, 12px);
  --dialog-title-padding-left-right: var(--s-6, 24px);
  --dialog-title-border-width: var(--line-zero, 0);
  --dialog-message-content-padding-top: var(--s-6, 24px);
  --dialog-message-content-padding-bottom: var(--s-3, 12px);
  --dialog-message-content-padding-left-right: var(--s-6, 24px);
  --dialog-content-font-size: var(--font-size-body-1, 12px);
  --dialog-content-padding-top: var(--s-3, 12px);
  --dialog-content-padding-bottom: var(--s-6, 24px);
  --dialog-content-padding-left-right: var(--s-6, 24px);
  --dialog-footer-border-width: var(--line-zero, 0);
  --dialog-footer-padding-top: var(--s-6, 24px);
  --dialog-footer-padding-bottom: var(--s-6, 24px);
  --dialog-footer-padding-left-right: var(--s-6, 24px);
  --dialog-footer-button-spacing: var(--s-1, 4px);
  --dialog-close-top: var(--s-6, 24px);
  --dialog-close-right: var(--s-6, 24px);
  --dialog-close-width: var(--s-4, 16px);
  --dialog-bg: var(--color-white, #fff);
  --dialog-border-color: var(--color-line-2, #c0c6cc);
  --dialog-border-style: var(--line-solid, solid);
  --dialog-corner: var(--corner-2, 4px);
  --dialog-shadow: var(--shadow-3, 0 8px 16px 0 rgba(0, 0, 0, 0.2));
  --dialog-title-color: var(--color-text-9, #333);
  --dialog-title-bg-color: var(--color-white, #fff);
  --dialog-title-border-color: var(--color-white, #fff);
  --dialog-content-color: var(--color-text-9, #333);
  --dialog-footer-bg-color: var(--color-white, #fff);
  --dialog-footer-border-color: var(--color-white, #fff);
  --dialog-close-color: var(--color-text-9, #333);
  --dialog-close-color-hovered: var(--color-text-9, #333);
  --dialog-close-bg-hovered: var(--color-white, #fff);
  --dialog-message-title-padding-top: var(--s-4, 16px);
  --dialog-message-title-padding-bottom: var(--s-4, 16px);
  --dialog-message-title-padding-left-right: var(--s-6, 24px);
  // number-picker
  --number-picker-normal-s-button-width: var(--s-5, 20px);
  --number-picker-normal-m-button-width: var(--s-10, 40px);
  --number-picker-normal-l-button-width: var(--s-5, 20px);
  --number-picker-normal-m-input-width: var(--s-35, 140px);
  --number-picker-normal-l-input-width: var(--s-20, 80px);
  --number-picker-inline-s-button-margin: 2px;
  --number-picker-inline-s-button-corner: var(--corner-1, 2px);
  --number-picker-inline-m-button-margin: var(--s-0, 0);
  --number-picker-inline-m-button-corner: var(--corner-1, 2px);
  --number-picker-inline-m-input-width: var(--s-35, 140px);
  --number-picker-inline-l-button-margin: 2px;
  --number-picker-inline-l-button-corner: var(--corner-1, 2px);
  --number-picker-inline-l-input-width: var(--s-32, 128px);
  // drawer
  --drawer-title-font-size: var(--font-size-subhead, 14px);
  --drawer-title-padding-top: var(--s-6, 24px);
  --drawer-title-padding-bottom: var(--s-4, 16px);
  --drawer-title-padding-left-right: var(--s-6, 24px);
  --drawer-title-border-width: var(--line-1, 1px);
  --drawer-content-font-size: var(--font-size-body-1, 12px);
  --drawer-content-padding-top: var(--s-4, 16px);
  --drawer-content-padding-bottom: var(--s-4, 16px);
  --drawer-content-padding-left-right: var(--s-6, 24px);
  --drawer-close-top: var(--s-6, 24px);
  --drawer-close-right: var(--s-6, 24px);
  --drawer-bg: var(--color-white, #fff);
  --drawer-border-width: var(--line-1, 1px);
  --drawer-border-color: var(--color-line-2, #c0c6cc);
  --drawer-border-style: var(--line-solid, solid);
  --drawer-corner: var(--corner-1, 2px);
  --drawer-shadow: var(--shadow-3, 0 8px 16px 0 rgba(0, 0, 0, 0.2));
  --drawer-title-color: var(--color-text-9, #333);
  --drawer-title-bg-color: var(--color-white, #fff);
  --drawer-title-border-color: transparent;
  --drawer-content-color: var(--color-text-9, #333);
  --drawer-close-color: var(--color-text-9, #333);
  --drawer-close-color-hovered: var(--color-text-9, #333);
  --drawer-close-bg-hovered: transparent;
  // balloon
  --balloon-size-max-width: 400px;
  --balloon-size-padding-top: var(--s-3, 12px);
  --balloon-size-padding-right: var(--s-3, 12px);
  --balloon-size-padding-closable-right: var(--s-8, 32px);
  --balloon-content-font-size: var(--font-size-body-1, 12px);
  --balloon-content-font-weight: var(--font-weight-2, normal);
  --balloon-normal-border-width: var(--line-1, 1px);
  --balloon-primary-border-width: var(--line-1, 1px);
  --balloon-tooltip-border-width: var(--line-1, 1px);
  --balloon-tooltip-content-font-size: var(--font-size-body-1, 12px);
  --balloon-tooltip-content-font-weight: var(--font-weight-2, normal);
  --balloon-size-close-margin-top: var(--s-3, 12px);
  --balloon-size-close-margin-right: var(--s-3, 12px);
  --balloon-size-arrow-size: var(--s-2, 8px);
  --balloon-size-arrow-margin: var(--s-3, 12px);
  --balloon-tooltip-size-padding-top: var(--s-3, 12px);
  --balloon-tooltip-size-padding-right: var(--s-3, 12px);
  --balloon-tooltip-size-padding-bottom: var(--s-3, 12px);
  --balloon-tooltip-size-padding-left: var(--s-3, 12px);
  --balloon-border-style: var(--line-solid, solid);
  --balloon-corner: var(--corner-1, 2px);
  --balloon-normal-color-bg: var(--color-white, #fff);
  --balloon-normal-color-border: var(--color-line-2, #c0c6cc);
  --balloon-normal-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --balloon-normal-color: var(--color-text-9, #333);
  --balloon-normal-color-close: var(--color-text-9, #333);
  --balloon-normal-color-close-hover: var(--color-text-9, #333);
  --balloon-primary-color-bg: var(--color-white, #fff);
  --balloon-primary-color-border: var(--color-line-2, #c0c6cc);
  --balloon-primary-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --balloon-primary-color: var(--color-text-9, #333);
  --balloon-primary-color-close: var(--color-text-9, #333);
  --balloon-primary-color-close-hover: var(--color-text-9, #333);
  --balloon-tooltip-color-bg: var(--color-white, #fff);
  --balloon-tooltip-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --balloon-tooltip-color-border: var(--color-line-2, #c0c6cc);
  --balloon-tooltip-border-style: var(--line-solid, solid);
  --balloon-tooltip-color: var(--color-text-9, #333);
  // message
  --message-size-l-padding: var(--s-4, 16px);
  --message-size-l-border-width: var(--line-1, 1px);
  --message-size-l-title-content-padding-left: var(--s-2, 8px);
  --message-size-l-title-content-padding-right: var(--s-4, 16px);
  --message-size-l-title-font: var(--font-size-body-2, 14px);
  --message-size-l-content-margin-top: var(--s-2, 8px);
  --message-size-l-content-font: var(--font-size-body-1, 12px);
  --message-size-l-close-top: var(--s-4, 16px);
  --message-size-l-close-right: var(--s-4, 16px);
  --message-size-m-padding: var(--s-2, 8px);
  --message-size-m-border-width: var(--line-1, 1px);
  --message-size-m-title-content-padding-left: var(--s-2, 8px);
  --message-size-m-title-content-padding-right: var(--s-5, 20px);
  --message-size-m-title-font: var(--font-size-body-1, 12px);
  --message-size-m-content-margin-top: var(--s-2, 8px);
  --message-size-m-content-font: var(--font-size-body-1, 12px);
  --message-size-m-close-top: var(--s-3, 12px);
  --message-size-m-close-right: var(--s-3, 12px);
  --message-size-l-border-radius: var(--corner-1, 2px);
  --message-size-m-border-radius: var(--corner-1, 2px);
  --message-size-l-border-radius-toast: var(--corner-1, 2px);
  --message-size-m-border-radius-toast: var(--corner-1, 2px);
  --message-border-style: var(--line-solid, solid);
  --message-border-style-toast: var(--line-solid, solid);
  --message-shadow-toast: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --message-success-color-bg-inline: var(--color-success-2, #d8f5d8);
  --message-success-color-bg-addon: transparent;
  --message-success-color-bg-toast: var(--color-white, #fff);
  --message-success-color-border-inline: transparent;
  --message-success-color-border-toast: var(--color-line-2, #c0c6cc);
  --message-success-color-title-inline: var(--color-text-9, #333);
  --message-success-color-title-addon: var(--color-text-4, #111);
  --message-success-color-title-toast: var(--color-text-9, #333);
  --message-success-color-content-inline: var(--color-text-9, #333);
  --message-success-color-content-addon: var(--color-text-3, #555);
  --message-success-color-content-toast: var(--color-text-9, #333);
  --message-success-color-icon-inline: var(--color-success-7, #00a700);
  --message-success-color-icon-addon: var(--color-success-6, #32c832);
  --message-success-color-icon-toast: var(--color-success-7, #00a700);
  --message-error-color-bg-inline: var(--color-error-3, #f8efef);
  --message-error-color-bg-addon: transparent;
  --message-error-color-bg-toast: var(--color-white, #fff);
  --message-error-color-border-inline: transparent;
  --message-error-color-border-toast: var(--color-line-2, #c0c6cc);
  --message-error-color-title-inline: var(--color-text-9, #333);
  --message-error-color-title-addon: var(--color-text-4, #111);
  --message-error-color-title-toast: var(--color-text-9, #333);
  --message-error-color-content-inline: var(--color-text-9, #333);
  --message-error-color-content-addon: var(--color-text-3, #555);
  --message-error-color-content-toast: var(--color-text-9, #333);
  --message-error-color-icon-inline: var(--color-error-7, #c80000);
  --message-error-color-icon-addon: var(--color-error-7, #c80000);
  --message-error-color-icon-toast: var(--color-error-7, #c80000);
  --message-warning-color-bg-inline: var(--color-warning-2, #fff7d1);
  --message-warning-color-bg-addon: transparent;
  --message-warning-color-bg-toast: var(--color-white, #fff);
  --message-warning-color-border-inline: transparent;
  --message-warning-color-border-toast: var(--color-line-2, #c0c6cc);
  --message-warning-color-title-inline: var(--color-text-9, #333);
  --message-warning-color-title-addon: var(--color-text-4, #111);
  --message-warning-color-title-toast: var(--color-text-9, #333);
  --message-warning-color-content-inline: var(--color-text-9, #333);
  --message-warning-color-content-addon: var(--color-text-3, #555);
  --message-warning-color-content-toast: var(--color-text-9, #333);
  --message-warning-color-icon-inline: var(--color-warning-6, #fac800);
  --message-warning-color-icon-addon: var(--color-warning-5, #ffde5c);
  --message-warning-color-icon-toast: var(--color-warning-6, #fac800);
  --message-notice-color-bg-inline: var(--color-fill-3, #eff3f8);
  --message-notice-color-bg-addon: transparent;
  --message-notice-color-bg-toast: var(--color-white, #fff);
  --message-notice-color-border-inline: transparent;
  --message-notice-color-border-toast: var(--color-white, #fff);
  --message-notice-color-title-inline: var(--color-text-9, #333);
  --message-notice-color-title-addon: var(--color-text-4, #111);
  --message-notice-color-title-toast: var(--color-text-9, #333);
  --message-notice-color-content-inline: var(--color-text-9, #333);
  --message-notice-color-content-addon: var(--color-text-3, #555);
  --message-notice-color-content-toast: var(--color-text-7, #666);
  --message-notice-color-icon-inline: var(--color-fill-5, #0064c8);
  --message-notice-color-icon-addon: var(--color-notice-3, #0070cc);
  --message-notice-color-icon-toast: var(--color-notice-3, #0070cc);
  --message-help-color-bg-inline: var(--color-fill-1, #f8f8f9);
  --message-help-color-bg-addon: transparent;
  --message-help-color-bg-toast: var(--color-white, #fff);
  --message-help-color-border-inline: transparent;
  --message-help-color-border-toast: var(--color-white, #fff);
  --message-help-color-title-inline: var(--color-text-9, #333);
  --message-help-color-title-addon: var(--color-text-4, #111);
  --message-help-color-title-toast: var(--color-text-9, #333);
  --message-help-color-content-inline: var(--color-text-9, #333);
  --message-help-color-content-addon: var(--color-text-3, #555);
  --message-help-color-content-toast: var(--color-text-3, #555);
  --message-help-color-icon-inline: var(--color-text-9, #333);
  --message-help-color-icon-addon: var(--color-help-4, #333);
  --message-help-color-icon-toast: var(--color-help-3, #888);
  --message-loading-color-bg-inline: var(--color-white, #fff);
  --message-loading-color-bg-addon: transparent;
  --message-loading-color-bg-toast: var(--color-white, #fff);
  --message-loading-color-border-inline: var(--color-line-1, #e3e4e6);
  --message-loading-color-border-toast: var(--color-white, #fff);
  --message-loading-color-title-inline: var(--color-text-9, #333);
  --message-loading-color-title-addon: var(--color-text-4, #111);
  --message-loading-color-title-toast: var(--color-text-9, #333);
  --message-loading-color-content-inline: var(--color-text-9, #333);
  --message-loading-color-content-addon: var(--color-text-3, #555);
  --message-loading-color-content-toast: var(--color-text-3, #555);
  --message-loading-color-icon-inline: var(--color-text-9, #333);
  --message-loading-color-icon-addon: var(--color-fill-9, #1c1c1c);
  --message-loading-color-icon-toast: var(--color-text-2, #888);
  --message-close-icon-color: var(--color-text-9, #333);
  --message-hover-close-icon-color: var(--color-text-9, #333);
  // select
  --select-color: var(--color-text-9, #333);
  --select-hint-color: var(--color-text-2, #888);
  --select-highlight-color: var(--color-brand-6, #0064c8);
  --select-highlight-font: var(--font-size-body-1, 12px);
  --select-l-line-height: 22px;
  --select-m-line-height: 22px;
  --select-s-line-height: 18px;
  // progress
  --progress-line-height-size-l: var(--s-2, 8px);
  --progress-line-height-size-m: var(--s-1, 4px);
  --progress-line-height-size-s: var(--s-1, 4px);
  --progress-line-underlay-border-width: var(--line-1, 1px);
  --progress-line-font-l: var(--font-size-body-1, 12px);
  --progress-line-font-m: var(--font-size-body-1, 12px);
  --progress-line-font-s: var(--font-size-caption, 12px);
  --progress-line-underlay-color: var(--color-line-1, #e3e4e6);
  --progress-line-underlay-border-color: var(--color-line-2, #c0c6cc);
  --progress-line-radius-l: var(--corner-1, 2px);
  --progress-line-radius-m: var(--corner-1, 2px);
  --progress-line-radius-s: var(--corner-1, 2px);
  --progress-line-font-color: var(--color-text-9, #333);
  --progress-line-normal-color: var(--color-brand-6, #0064c8);
  --progress-line-error-color: var(--color-error-7, #c80000);
  --progress-line-success-color: var(--color-success-7, #00a700);
  --progress-line-started-color: var(--color-brand-6, #0064c8);
  --progress-line-middle-color: var(--color-brand-6, #0064c8);
  --progress-line-finishing-color: var(--color-brand-6, #0064c8);
  --progress-circle-size-l: var(--s-33, 132px);
  --progress-circle-size-m: var(--s-29, 116px);
  --progress-circle-size-s: var(--s-25, 100px);
  --progress-circle-underlay-width: var(--s-1, 4px);
  --progress-circle-overlay-width: var(--s-1, 4px);
  --progress-circle-font-l: var(--font-size-headline, 20px);
  --progress-circle-font-m: var(--font-size-body-2, 14px);
  --progress-circle-font-s: var(--font-size-body-2, 14px);
  --progress-circle-underlay-color: var(--color-line-1, #e3e4e6);
  --progress-circle-text-color: var(--color-text-7, #666);
  --progress-circle-corner: round;
  --progress-circle-normal-color: var(--color-brand-6, #0064c8);
  --progress-circle-error-color: var(--color-error-7, #c80000);
  --progress-circle-success-color: var(--color-success-7, #00a700);
  --progress-circle-started-color: var(--color-brand-6, #0064c8);
  --progress-circle-middle-color: var(--color-brand-6, #0064c8);
  --progress-circle-finishing-color: var(--color-brand-6, #0064c8);
  // transfer
  --transfer-operation-margin-left-right: var(--s-2, 8px);
  --transfer-operation-margin-gutter: var(--s-1, 4px);
  --transfer-panel-border-width: var(--line-1, 1px);
  --transfer-panel-header-padding-top-bottom: var(--s-2, 8px);
  --transfer-panel-header-padding-left-right: var(--s-4, 16px);
  --transfer-panel-header-text-size: var(--font-size-body-1, 12px);
  --transfer-panel-search-margin-top: var(--s-2, 8px);
  --transfer-panel-search-margin-left-right: var(--s-2, 8px);
  --transfer-panel-search-margin-bottom: var(--s-2, 8px);
  --transfer-panel-list-width: var(--s-45, 180px);
  --transfer-panel-list-height: var(--s-40, 160px);
  --transfer-panel-footer-padding-top-bottom: var(--s-2, 8px);
  --transfer-panel-footer-padding-left-right: var(--s-4, 16px);
  --transfer-simple-move-icon-color: var(--color-text-9, #333);
  --transfer-panel-border-color: var(--color-line-2, #c0c6cc);
  --transfer-panel-border-corner: var(--corner-1, 2px);
  --transfer-panel-background-color: var(--color-white, #fff);
  --transfer-panel-header-text-color: var(--color-text-9, #333);
  --transfer-panel-header-background-color: var(--color-white, #fff);
  --transfer-panel-search-icon-color: var(--color-text-2, #888);
  --transfer-panel-footer-text-color: var(--color-text-9, #333);
  --transfer-panel-footer-background-color: var(--color-white, #fff);
  --transfer-simple-panel-footer-text-color: var(--color-text-9, #333);
  --transfer-simple-panel-item-hover-text-color: var(--color-link-1, #0064c8);
  --transfer-panel-footer-shadow: var(--shadow-zero, none);
  // pagination
  --pagination-item-split: var(--s-2, 8px);
  --pagination-item-border-style: var(--line-solid, solid);
  --pagination-item-border-width: var(--line-1, 1px);
  --pagination-item-corner: var(--corner-1, 2px);
  --pagination-ellipsis-margin: var(--s-2, 8px);
  --pagination-current-font-size: var(--font-size-body-1, 12px);
  --pagination-total-font-size: var(--font-size-body-1, 12px);
  --pagination-jump-font-size: var(--font-size-body-1, 12px);
  --pagination-input-width: var(--s-10, 40px);
  --pagination-input-margin: var(--s-1, 4px);
  --pagination-size-selector-title-margin-right: var(--s-1, 4px);
  --pagination-size-selector-number-padding: var(--s-3, 12px);
  --pagination-large-item-split: var(--s-2, 8px);
  --pagination-large-item-border-width: var(--line-1, 1px);
  --pagination-large-item-corner: var(--corner-1, 2px);
  --pagination-large-current-font-size: var(--font-size-subhead, 14px);
  --pagination-large-total-font-size: var(--font-size-subhead, 14px);
  --pagination-large-input-width: var(--s-12, 48px);
  --pagination-large-jump-font-size: var(--font-size-subhead, 14px);
  --pagination-large-size-selector-number-padding: var(--s-4, 16px);
  --pagination-small-item-split: var(--s-1, 4px);
  --pagination-small-item-border-width: var(--line-1, 1px);
  --pagination-small-item-corner: var(--corner-1, 2px);
  --pagination-small-current-font-size: var(--font-size-caption, 12px);
  --pagination-small-total-font-size: var(--font-size-caption, 12px);
  --pagination-small-input-width: var(--s-7, 28px);
  --pagination-small-jump-font-size: var(--font-size-caption, 12px);
  --pagination-small-size-selector-number-padding: var(--s-2, 8px);
  --pagination-ellipsis-color: var(--color-text-9, #333);
  --pagination-current-color: var(--color-brand-6, #0064c8);
  --pagination-total-color: var(--color-text-9, #333);
  --pagination-jump-color: var(--color-text-9, #333);
  --pagination-size-selector-title-color: var(--color-text-2, #888);
  --pagination-size-selector-filter-color: var(--color-text-3, #555);
  --pagination-size-selector-filter-current-color: var(--color-brand-6, #0064c8);
  --pagination-item-border-color: transparent;
  --pagination-item-shadow: var(--shadow-zero, none);
  --pagination-item-color: var(--color-text-9, #333);
  --pagination-item-bg: transparent;
  --pagination-item-current-border-color: var(--color-brand-6, #0064c8);
  --pagination-item-current-shadow: var(--shadow-zero, none);
  --pagination-item-current-color: var(--color-brand-6, #0064c8);
  --pagination-item-current-bg: var(--color-white, #fff);
  --pagination-item-hover-border-color: var(--color-line-4, #d1d5d9);
  --pagination-item-hover-shadow: var(--shadow-zero, none);
  --pagination-item-hover-color: var(--color-text-5, #ccc);
  --pagination-item-hover-bg: var(--color-white, #fff);
  --pagination-arrow-color: var(--color-text-9, #333);
  --pagination-item-current-hover-border-color: var(--color-brand-6, #0064c8);
  --pagination-item-current-hover-shadow: var(--shadow-zero, none);
  --pagination-item-current-hover-color: var(--color-text-9, #333);
  --pagination-item-current-hover-bg: var(--color-white, #fff);
  --pagination-arrow-hover-color: var(--color-text-3, #555);
  --pagination-arrow-hover-color-no-border: var(--color-brand-6, #0064c8);
  // tree-select
  --tree-select-padding-vertical: var(--s-2, 8px);
  --tree-select-padding-horizontal: var(--s-5, 20px);
  --tree-select-background: var(--color-white, #fff);
  // collapse
  --collapse-border-width: var(--line-zero, 0);
  --collapse-border-corner: var(--corner-1, 2px);
  --collapse-border-color: var(--color-white, #fff);
  --collapse-panel-border-color: var(--color-white, #fff);
  --collapse-disabled-border-color: var(--color-white, #fff);
  --collapse-title-border-width: var(--line-2, 2px);
  --collapse-title-height: var(--s-6, 24px);
  --collapse-title-bg-color: var(--color-fill-2, #f7f9fa);
  --collapse-title-hover-bg-color: var(--color-fill-4, #004080);
  --collapse-title-disabled-bg-color: var(--color-fill-2, #f7f9fa);
  --collapse-title-font-color: var(--color-text-5, #ccc);
  --collapse-title-font-disabled-color: var(--color-text-1, #c1c1c1);
  --collapse-title-hover-font-color: var(--color-text-5, #ccc);
  --collapse-title-font-size: var(--font-size-body-1, 12px);
  --collapse-title-font-weight: var(--font-weight-2, normal);
  --collapse-title-hover-font-weight: var(--font-weight-2, normal);
  --collapse-title-padding-tb: var(--s-2, 8px);
  --collapse-icon-color: var(--color-text-2, #888);
  --collapse-icon-hover-color: var(--color-text-2, #888);
  --collapse-icon-margin-r: var(--s-2, 8px);
  --collapse-icon-margin-l: var(--s-4, 16px);
  --collapse-content-bg-color: var(--color-white, #fff);
  --collapse-content-padding-x: var(--s-4, 16px);
  --collapse-content-padding-y: var(--s-2, 8px);
  --collapse-content-font-size: var(--font-size-body-1, 12px);
  --collapse-content-color: var(--color-text-5, #ccc);
  // divider
  --divider-hoz-size: var(--line-1, 1px);
  --divider-hoz-color: var(--color-line-2, #c0c6cc);
  --divider-hoz-text-center-padding-left: var(--s-4, 16px);
  --divider-hoz-text-left-padding-left: var(--s-4, 16px);
  --divider-hoz-text-margin-top: var(--s-4, 16px);
  --divider-hoz-margin-top: var(--s-4, 16px);
  --divider-hoz-text-size: var(--font-size-subhead, 14px);
  --divider-hoz-text-weight: var(--font-weight-2, normal);
  --divider-hoz-text-color: var(--color-text-4, #111);
  --divider-ver-size: var(--line-1, 1px);
  --divider-ver-color: var(--color-line-2, #c0c6cc);
  --divider-ver-margin-left: var(--s-2, 8px);
  // step
  --step-arrow-item-height: var(--s-8, 32px);
  --step-arrow-item-title-size: var(--font-size-body-2, 14px);
  --step-arrow-item-title-weight: var(--font-weight-2, normal);
  --step-arrow-item-wait-background: var(--color-fill-2, #f7f9fa);
  --step-arrow-item-title-wait-color: var(--color-text-2, #888);
  --step-arrow-item-process-background: var(--color-brand-6, #0064c8);
  --step-arrow-item-title-process-color: var(--color-white, #fff);
  --step-arrow-item-finish-background: var(--color-brand-6, #0064c8);
  --step-arrow-item-title-finish-color: var(--color-white, #fff);
  --step-arrow-item-disabled-background: var(--color-fill-1, #f8f8f9);
  --step-arrow-item-title-disabled-color: var(--color-text-1, #c1c1c1);
  --step-circle-item-node-padding: var(--s-3, 12px);
  --step-circle-item-node-border-width: var(--line-1, 1px);
  --step-circle-item-node-font-size: var(--font-size-body-1, 12px);
  --step-circle-item-node-corner: var(--corner-circle, 50%);
  --step-circle-item-tail-size: var(--line-1, 1px);
  --step-circle-item-title-margin-top: var(--s-2, 8px);
  --step-circle-item-content-margin-top: var(--s-2, 8px);
  --step-circle-item-content-font-size: var(--font-size-body-1, 12px);
  --step-circle-item-body-width: var(--s-24, 96px);
  --step-circle-item-title-size: var(--font-size-body-2, 14px);
  --step-circle-item-title-weight: var(--font-weight-semi-bold, 600);
  --step-circle-item-node-wait-size: var(--s-8, 32px);
  --step-circle-item-node-process-size: var(--s-7, 28px);
  --step-circle-item-node-finish-size: var(--s-8, 32px);
  --step-circle-item-node-disabled-size: var(--s-8, 32px);
  --step-circle-item-tail-wait-color: var(--color-line-2, #c0c6cc);
  --step-circle-item-tail-process-color: var(--color-line-2, #c0c6cc);
  --step-circle-item-tail-finish-color: var(--color-brand-6, #0064c8);
  --step-circle-item-tail-disabled-color: var(--color-line-1, #e3e4e6);
  --step-circle-item-node-wait-font-weight: var(--font-weight-2, normal);
  --step-circle-item-node-process-font-weight: var(--font-weight-2, normal);
  --step-circle-item-node-disabled-font-weight: var(--font-weight-2, normal);
  --step-circle-item-node-finish-font-weight: var(--font-weight-2, normal);
  --step-circle-item-title-wait-color: var(--color-text-9, #333);
  --step-circle-item-title-process-color: var(--color-text-9, #333);
  --step-circle-item-title-finish-color: var(--color-text-9, #333);
  --step-circle-item-title-disabled-color: var(--color-text-5, #ccc);
  --step-circle-item-node-wait-border-color: var(--color-line-2, #c0c6cc);
  --step-circle-item-node-wait-background: var(--color-white, #fff);
  --step-circle-item-node-wait-color: var(--color-text-9, #333);
  --step-circle-item-node-process-border-color: var(--color-brand-6, #0064c8);
  --step-circle-item-node-process-background: var(--color-brand-6, #0064c8);
  --step-circle-item-node-process-color: var(--color-white, #fff);
  --step-circle-item-node-process-percent-color: var(--color-brand-6, #0064c8);
  --step-circle-item-node-process-percent-size: var(--font-size-body-1, 12px);
  --step-circle-item-node-finish-border-color: var(--color-brand-6, #0064c8);
  --step-circle-item-node-finish-background: var(--color-white, #fff);
  --step-circle-item-node-finish-color: var(--color-brand-6, #0064c8);
  --step-circle-item-node-disabled-border-color: var(--color-line-1, #e3e4e6);
  --step-circle-item-node-disabled-background: var(--color-white, #fff);
  --step-circle-item-node-disabled-color: var(--color-text-5, #ccc);
  --step-circle-vertical-item-node-padding: var(--s-2, 8px);
  --step-circle-vertical-item-body-margin-left: var(--s-4, 16px);
  --step-circle-vertical-item-title-margin-top: var(--s-2, 8px);
  --step-circle-vertical-item-content-margin-top: var(--s-1, 4px);
  --step-circle-item-content-color: var(--color-text-3, #555);
  --step-circle-item-tail-bg-color: var(--color-white, #fff);
  --step-circle-vertical-item-tail-size: var(--line-1, 1px);
  --step-dot-item-dot-padding: var(--s-2, 8px);
  --step-dot-item-dot-border-width: var(--line-1, 1px);
  --step-dot-item-body-width: var(--s-24, 96px);
  --step-dot-item-content-margin-top: var(--s-1, 4px);
  --step-dot-item-dot-corner: var(--corner-circle, 50%);
  --step-dot-item-title-size: var(--font-size-body-1, 12px);
  --step-dot-item-title-weight: var(--font-weight-3, bold);
  --step-dot-item-title-margin-top: var(--s-2, 8px);
  --step-dot-item-tail-size: var(--line-1, 1px);
  --step-dot-item-dot-wait-size: var(--s-3, 12px);
  --step-dot-item-dot-process-size: var(--s-3, 12px);
  --step-dot-item-dot-finish-size: var(--s-3, 12px);
  --step-dot-item-dot-disabled-size: var(--s-3, 12px);
  --step-dot-item-tail-wait-color: var(--color-line-1, #e3e4e6);
  --step-dot-item-tail-process-color: var(--color-line-1, #e3e4e6);
  --step-dot-item-tail-finish-color: var(--color-brand-6, #0064c8);
  --step-dot-item-tail-disabled-color: var(--color-line-1, #e3e4e6);
  --step-dot-item-title-wait-color: var(--color-text-2, #888);
  --step-dot-item-title-process-color: var(--color-text-5, #ccc);
  --step-dot-item-title-finish-color: var(--color-text-5, #ccc);
  --step-dot-item-title-disabled-color: var(--color-text-1, #c1c1c1);
  --step-dot-item-node-wait-border-color: var(--color-line-1, #e3e4e6);
  --step-dot-item-node-wait-background: var(--color-white, #fff);
  --step-dot-item-node-wait-color: var(--color-text-2, #888);
  --step-dot-item-node-process-border-color: var(--color-brand-6, #0064c8);
  --step-dot-item-node-process-background: var(--color-brand-6, #0064c8);
  --step-dot-item-node-process-color: var(--color-brand-6, #0064c8);
  --step-dot-item-node-finish-border-color: var(--color-brand-6, #0064c8);
  --step-dot-item-node-finish-background: var(--color-white, #fff);
  --step-dot-item-node-finish-color: var(--color-brand-6, #0064c8);
  --step-dot-item-node-disabled-border-color: var(--color-line-2, #c0c6cc);
  --step-dot-item-node-disabled-background: var(--color-white, #fff);
  --step-dot-item-node-disabled-color: var(--color-line-1, #e3e4e6);
  --step-dot-vertical-item-node-padding: var(--s-2, 8px);
  --step-dot-vertical-item-body-margin-left: var(--s-4, 16px);
  --step-dot-vertical-item-title-margin-top: var(--s-0, 0);
  --step-dot-vertical-item-content-margin-top: var(--s-2, 8px);
  --step-dot-item-content-font-size: var(--font-size-caption, 12px);
  --step-dot-item-content-color: var(--color-text-3, #555);
  --step-dot-item-tail-bg-color: var(--color-fill-1, #f8f8f9);
  --step-dot-vertical-item-tail-size: var(--line-1, 1px);
  // time-picker
  --time-picker-panel-width: var(--s-50, 200px);
  --time-picker-panel-background: var(--color-white, #fff);
  --time-picker-menu-border-width: var(--line-1, 1px);
  --time-picker-menu-title-font-size: var(--font-size-body-1, 12px);
  --time-picker-menu-item-font-size: var(--font-size-body-1, 12px);
  --time-picker-menu-title-height: var(--s-9, 36px);
  --time-picker-menu-item-height: var(--s-8, 32px);
  --time-picker-menu-border-color: var(--color-line-2, #c0c6cc);
  --time-picker-menu-title-color: var(--color-text-9, #333);
  --time-picker-menu-title-background: var(--color-white, #fff);
  --time-picker-menu-title-font-weight: var(--font-weight-2, normal);
  --time-picker-menu-item-color: var(--color-text-9, #333);
  --time-picker-menu-item-color-hover: var(--color-text-9, #333);
  --time-picker-menu-item-color-selected: var(--color-white, #fff);
  --time-picker-menu-item-color-disabled: var(--color-text-3, #555);
  --time-picker-menu-item-background: var(--color-white, #fff);
  --time-picker-menu-item-background-hover: var(--color-fill-2, #f7f9fa);
  --time-picker-menu-item-background-selected: var(--color-fill-5, #0064c8);
  --time-picker-menu-item-background-disabled: var(--color-white, #fff);
  --time-picker-menu-item-font-weight-selected: var(--font-weight-2, normal);
  // radio
  --radio-width: var(--s-4, 16px);
  --radio-circle-border-width: var(--line-1, 1px);
  --radio-circle-size: var(--s-2, 8px);
  --radio-font-margin-left: var(--s-2, 8px);
  --radio-font-size: var(--font-size-body-1, 12px);
  --radio-shadow: var(--shadow-zero, none);
  --radio-radius-size: var(--corner-circle, 50%);
  --radio-bg-color: var(--color-white, #fff);
  --radio-hovered-bg-color: transparent;
  --radio-checked-bg-color: var(--color-white, #fff);
  --radio-disabled-bg-color: var(--color-fill-2, #f7f9fa);
  --radio-checked-hovered-bg-color: var(--color-white, #fff);
  --radio-checked-disabled-bg-color: var(--color-fill-2, #f7f9fa);
  --radio-border-color: var(--color-line-3, #577899);
  --radio-hovered-border-color: var(--color-fill-4, #004080);
  --radio-checked-border-color: var(--color-fill-4, #004080);
  --radio-disabled-border-color: var(--color-line-2, #c0c6cc);
  --radio-checked-disabled-border-color: var(--color-line-2, #c0c6cc);
  --radio-checked-hovered-border-color: var(--color-fill-4, #004080);
  --radio-checked-circle-color: var(--color-fill-5, #0064c8);
  --radio-disabled-circle-color: var(--color-text-5, #ccc);
  --radio-checked-hovered-circle-color: var(--color-fill-5, #0064c8);
  --radio-checked-disabled-circle-color: var(--color-text-5, #ccc);
  --radio-normal-font-color: var(--color-text-9, #333);
  --radio-normal-font-color-disabled: var(--color-text-5, #ccc);
  --radio-button-height-large: var(--s-9, 36px);
  --radio-button-height-medium: var(--s-8, 32px);
  --radio-button-height-small: var(--s-6, 24px);
  --radio-button-padding-large: var(--s-2, 8px);
  --radio-button-padding-medium: var(--s-2, 8px);
  --radio-button-padding-small: var(--s-2, 8px);
  --radio-button-corner-large: var(--corner-1, 2px);
  --radio-button-corner-medium: var(--corner-1, 2px);
  --radio-button-corner-small: var(--corner-1, 2px);
  --radio-button-font-size-large: var(--font-size-body-2, 14px);
  --radio-button-font-size-medium: var(--font-size-body-1, 12px);
  --radio-button-font-size-small: var(--font-size-caption, 12px);
  --radio-button-bg-color: var(--color-white, #fff);
  --radio-button-bg-color-hovered: var(--color-white, #fff);
  --radio-button-bg-color-checked: var(--color-white, #fff);
  --radio-button-bg-color-disabled: var(--color-fill-1, #f8f8f9);
  --radio-button-bg-color-checked-disabled: var(--color-fill-4, #004080);
  --radio-button-border-color: var(--color-line-2, #c0c6cc);
  --radio-button-border-color-hovered: var(--color-line-4, #d1d5d9);
  --radio-button-border-color-checked: var(--color-brand-6, #0064c8);
  --radio-button-border-color-disabled: var(--color-line-1, #e3e4e6);
  --radio-button-border-color-checked-disabled: var(--color-line-1, #e3e4e6);
  --radio-button-font-color: var(--color-text-3, #555);
  --radio-button-font-color-hovered: var(--color-text-4, #111);
  --radio-button-font-color-checked: var(--color-brand-6, #0064c8);
  --radio-button-font-color-disabled: var(--color-text-1, #c1c1c1);
  --radio-button-font-color-checked-disabled: var(--color-text-1, #c1c1c1);
  // nav
  --nav-hoz-height: var(--s-11, 44px);
  --nav-hoz-font-size: var(--font-size-body-1, 12px);
  --nav-hoz-item-margin-tb: var(--s-0, 0);
  --nav-hoz-item-margin-lr: var(--s-0, 0);
  --nav-hoz-item-padding-lr: var(--s-5, 20px);
  --nav-hoz-item-corner: var(--corner-0, 0);
  --nav-hoz-item-selected-active-line: var(--line-2, 2px);
  --nav-hoz-item-hover-active-line: var(--line-zero, 0);
  --nav-ver-height: var(--s-10, 40px);
  --nav-ver-font-size: var(--font-size-body-1, 12px);
  --nav-ver-item-margin-tb: var(--s-0, 0);
  --nav-ver-item-margin-lr: var(--s-0, 0);
  --nav-ver-item-padding-lr: var(--s-5, 20px);
  --nav-ver-item-corner: var(--corner-0, 0);
  --nav-ver-item-selected-active-line: var(--line-2, 2px);
  --nav-ver-item-hover-active-line: var(--line-zero, 0);
  --nav-ver-sub-nav-height: var(--s-10, 40px);
  --nav-ver-sub-nav-font-size: var(--font-size-caption, 12px);
  --nav-group-height: var(--s-10, 40px);
  --nav-group-font-size: var(--font-size-subhead, 14px);
  --nav-icon-self-margin: var(--s-1, 4px);
  --nav-primary-bg-color: var(--color-text-4, #111);
  --nav-primary-border-width: var(--line-zero, 0);
  --nav-primary-border-color: var(--color-text-4, #111);
  --nav-primary-text-color: var(--color-white, #fff);
  --nav-primary-text-style: var(--font-weight-2, normal);
  --nav-primary-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --nav-primary-sub-nav-bg-color: var(--color-text-4, #111);
  --nav-primary-sub-nav-text-color: var(--color-white, #fff);
  --nav-primary-sub-nav-text-style: var(--font-weight-2, normal);
  --nav-primary-group-text-color: var(--color-text-2, #888);
  --nav-primary-group-text-style: var(--font-weight-2, normal);
  --nav-primary-item-hover-bg-color: var(--color-black, #000);
  --nav-primary-item-hover-text-color: var(--color-white, #fff);
  --nav-primary-item-hover-text-style: var(--font-weight-2, normal);
  --nav-primary-item-hover-active-color: var(--color-brand-6, #0064c8);
  --nav-primary-sub-nav-hover-bg-color: var(--color-black, #000);
  --nav-primary-sub-nav-hover-text-color: var(--color-white, #fff);
  --nav-primary-item-selected-bg-color: var(--color-black, #000);
  --nav-primary-item-selected-text-color: var(--color-white, #fff);
  --nav-primary-item-selected-text-style: var(--font-weight-3, bold);
  --nav-primary-item-selected-active-color: var(--color-brand-6, #0064c8);
  --nav-primary-sub-nav-selected-bg-color: var(--color-black, #000);
  --nav-primary-sub-nav-selected-text-color: var(--color-white, #fff);
  --nav-primary-sub-nav-active-color: var(--color-brand-6, #0064c8);
  --nav-primary-item-opened-bg-color: var(--color-black, #000);
  --nav-primary-item-opened-text-color: var(--color-white, #fff);
  --nav-secondary-bg-color: var(--color-brand-6, #0064c8);
  --nav-secondary-border-width: var(--line-zero, 0);
  --nav-secondary-border-color: var(--color-brand-6, #0064c8);
  --nav-secondary-text-color: var(--color-white, #fff);
  --nav-secondary-text-style: var(--font-weight-2, normal);
  --nav-secondary-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --nav-secondary-sub-nav-bg-color: var(--color-brand-6, #0064c8);
  --nav-secondary-sub-nav-text-color: var(--color-white, #fff);
  --nav-secondary-sub-nav-text-style: var(--font-weight-2, normal);
  --nav-secondary-group-text-color: var(--color-white, #fff);
  --nav-secondary-group-text-style: var(--font-weight-2, normal);
  --nav-secondary-item-hover-bg-color: var(--color-brand-9, #002850);
  --nav-secondary-item-hover-text-color: var(--color-white, #fff);
  --nav-secondary-item-hover-text-style: var(--font-weight-2, normal);
  --nav-secondary-item-hover-active-color: var(--color-brand-9, #002850);
  --nav-secondary-sub-nav-hover-bg-color: var(--color-brand-9, #002850);
  --nav-secondary-sub-nav-hover-text-color: var(--color-white, #fff);
  --nav-secondary-item-selected-bg-color: var(--color-brand-9, #002850);
  --nav-secondary-item-selected-text-color: var(--color-white, #fff);
  --nav-secondary-item-selected-text-style: var(--font-weight-3, bold);
  --nav-secondary-item-selected-active-color: var(--color-brand-9, #002850);
  --nav-secondary-sub-nav-selected-bg-color: var(--color-brand-9, #002850);
  --nav-secondary-sub-nav-selected-text-color: var(--color-white, #fff);
  --nav-secondary-sub-nav-active-color: var(--color-brand-6, #0064c8);
  --nav-secondary-item-opened-bg-color: var(--color-brand-9, #002850);
  --nav-secondary-item-opened-text-color: var(--color-white, #fff);
  --nav-normal-bg-color: var(--color-white, #fff);
  --nav-normal-border-color: var(--color-line-1, #e3e4e6);
  --nav-normal-text-color: var(--color-text-4, #111);
  --nav-normal-text-style: var(--font-weight-2, normal);
  --nav-normal-border-line: var(--line-1, 1px);
  --nav-normal-shadow: var(--shadow-2, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  --nav-normal-sub-nav-bg-color: var(--color-white, #fff);
  --nav-normal-sub-nav-text-color: var(--color-text-4, #111);
  --nav-normal-sub-nav-text-style: var(--font-weight-2, normal);
  --nav-normal-group-text-color: var(--color-text-2, #888);
  --nav-normal-group-text-style: var(--font-weight-2, normal);
  --nav-normal-item-hover-bg-color: var(--color-white, #fff);
  --nav-normal-item-hover-text-color: var(--color-brand-6, #0064c8);
  --nav-normal-item-hover-text-style: var(--font-weight-2, normal);
  --nav-normal-item-hover-active-color: var(--color-brand-6, #0064c8);
  --nav-normal-sub-nav-hover-bg-color: var(--color-fill-2, #f7f9fa);
  --nav-normal-sub-nav-hover-text-color: var(--color-brand-6, #0064c8);
  --nav-normal-item-selected-bg-color: var(--color-fill-2, #f7f9fa);
  --nav-normal-item-selected-text-color: var(--color-brand-6, #0064c8);
  --nav-normal-item-selected-text-style: var(--font-weight-3, bold);
  --nav-normal-item-selected-active-color: var(--color-brand-6, #0064c8);
  --nav-normal-sub-nav-selected-bg-color: var(--color-fill-2, #f7f9fa);
  --nav-normal-sub-nav-selected-text-color: var(--color-brand-6, #0064c8);
  --nav-normal-sub-nav-active-color: var(--color-brand-6, #0064c8);
  --nav-normal-item-opened-bg-color: var(--color-fill-2, #f7f9fa);
  --nav-normal-item-opened-text-color: var(--color-brand-6, #0064c8);
  --nav-line-bg-color: transparent;
  --nav-line-border-color: var(--color-line-2, #c0c6cc);
  --nav-line-text-color: var(--color-text-4, #111);
  --nav-line-text-style: var(--font-weight-2, normal);
  --nav-line-border-line: var(--line-1, 1px);
  --nav-line-sub-nav-bg-color: transparent;
  --nav-line-sub-nav-text-color: var(--color-text-4, #111);
  --nav-line-sub-nav-text-style: var(--font-weight-2, normal);
  --nav-line-item-hover-bg-color: transparent;
  --nav-line-item-hover-text-color: var(--color-brand-6, #0064c8);
  --nav-line-item-hover-text-style: var(--font-weight-2, normal);
  --nav-line-item-hover-active-color: var(--color-brand-6, #0064c8);
  --nav-line-sub-nav-hover-bg-color: transparent;
  --nav-line-sub-nav-hover-text-color: var(--color-brand-6, #0064c8);
  --nav-line-item-selected-bg-color: transparent;
  --nav-line-item-selected-text-color: var(--color-brand-6, #0064c8);
  --nav-line-item-selected-text-style: var(--font-weight-3, bold);
  --nav-line-item-selected-active-color: var(--color-brand-6, #0064c8);
  --nav-line-sub-nav-selected-bg-color: transparent;
  --nav-line-sub-nav-selected-text-color: var(--color-brand-6, #0064c8);
  --nav-line-sub-nav-active-color: var(--color-brand-6, #0064c8);
  --nav-line-item-opened-bg-color: transparent;
  --nav-line-item-opened-text-color: var(--color-brand-6, #0064c8);
  --nav-line-group-text-color: var(--color-text-2, #888);
  --nav-line-group-text-style: var(--font-weight-2, normal);
  // avatar
  --avatar-size-large: var(--s-13, 52px);
  --avatar-size-medium: var(--s-10, 40px);
  --avatar-size-small: var(--s-7, 28px);
  --avatar-border-radius: var(--corner-1, 2px);
  // tab
  --tab-nav-scroll-padding-right-m: var(--s-15, 60px);
  --tab-nav-scroll-padding-right-s: var(--s-14, 56px);
  --tab-nav-close-icon-padding-l-size-m: var(--s-2, 8px);
  --tab-nav-close-icon-padding-l-size-s: var(--s-2, 8px);
  --tab-nav-arrow-left-position-right: var(--s-8, 32px);
  --tab-nav-arrow-right-position-right: var(--s-3, 12px);
  --tab-nav-arrow-down-position-right: var(--s-2, 8px);
  --tab-item-padding-tb-size-m: var(--s-3, 12px);
  --tab-item-padding-tb-size-s: var(--s-2, 8px);
  --tab-item-padding-lr-size-m: var(--s-4, 16px);
  --tab-item-padding-lr-size-s: var(--s-4, 16px);
  --tab-item-text-size-m: var(--font-size-body-2, 14px);
  --tab-item-text-size-s: var(--font-size-body-1, 12px);
  --tab-close-icon-color: var(--color-text-3, #555);
  --tab-close-icon-color-hover: var(--color-text-4, #111);
  --tab-close-icon-color-selected: var(--color-brand-6, #0064c8);
  --tab-close-icon-color-disabled: var(--color-line-2, #c0c6cc);
  --tab-item-font-weight-selected: var(--font-weight-semi-bold, 600);
  --tab-nav-arrow-color-normal: var(--color-text-9, #333);
  --tab-nav-arrow-color-hover: var(--color-fill-5, #0064c8);
  --tab-nav-arrow-color-disabled: var(--color-text-3, #555);
  --tab-pure-divider-line-width: var(--line-1, 1px);
  --tab-pure-ink-bar-width: var(--line-2, 2px);
  --tab-pure-text-color-normal: var(--color-text-9, #333);
  --tab-pure-bg-color: transparent;
  --tab-pure-text-color-hover: var(--color-brand-6, #0064c8);
  --tab-pure-text-color-selected: var(--color-brand-6, #0064c8);
  --tab-pure-text-color-disabled: var(--color-line-2, #c0c6cc);
  --tab-pure-ink-bar-color: var(--color-brand-6, #0064c8);
  --tab-pure-divider-border-color: var(--color-line-1, #e3e4e6);
  --tab-pure-divider-shadow: var(--shadow-zero, none);
  --tab-wrapped-border-line-style: var(--line-solid, solid);
  --tab-wrapped-border-line-width: var(--line-1, 1px);
  --tab-wrapped-border-side-width: var(--line-1, 1px);
  --tab-wrapped-tab-corner-radius: var(--corner-0, 0);
  --tab-wrapped-tab-margin-right: -1px;
  --tab-wrapped-tab-margin-bottom: var(--s-1, 4px);
  --tab-wrapped-ink-bar-width: var(--line-2, 2px);
  --tab-wrapped-bar-bg-color: transparent;
  --tab-wrapped-ink-bar-color: var(--color-brand-6, #0064c8);
  --tab-wrapped-nav-item-border-color-active: var(--color-brand-6, #0064c8);
  --tab-wrapped-border-line-color: var(--color-line-1, #e3e4e6);
  --tab-wrapped-content-border-line-width: var(--line-1, 1px);
  --tab-wrapped-content-border-line-style: var(--line-solid, solid);
  --tab-wrapped-content-border-line-color: var(--color-line-2, #c0c6cc);
  --tab-wrapped-text-color: var(--color-text-9, #333);
  --tab-wrapped-text-color-hover: var(--color-text-9, #333);
  --tab-wrapped-bg-color: var(--color-white, #fff);
  --tab-wrapped-bg-color-hover: var(--color-fill-1, #f8f8f9);
  --tab-wrapped-border-line-color-hover: var(--color-line-1, #e3e4e6);
  --tab-wrapped-text-color-selected: var(--color-brand-6, #0064c8);
  --tab-wrapped-text-color-disabled: var(--color-text-1, #c1c1c1);
  --tab-wrapped-bg-color-selected: var(--color-white, #fff);
  --tab-wrapped-bg-color-disabled: var(--color-fill-1, #f8f8f9);
  --tab-capsule-text-color: var(--color-text-9, #333);
  --tab-capsule-text-color-hover: var(--color-text-9, #333);
  --tab-capsule-text-color-selected: var(--color-brand-6, #0064c8);
  --tab-capsule-text-color-disabled: var(--color-text-1, #c1c1c1);
  --tab-capsule-bg-color: var(--color-white, #fff);
  --tab-capsule-bg-color-hover: var(--color-fill-2, #f7f9fa);
  --tab-capsule-bg-color-selected: var(--color-fill-3, #eff3f8);
  --tab-capsule-bg-color-disabled: var(--color-fill-1, #f8f8f9);
  --tab-capsule-tab-border-line-color: var(--color-line-2, #c0c6cc);
  --tab-capsule-tab-border-line-color-hover: var(--color-line-2, #c0c6cc);
  --tab-capsule-tab-border-line-color-active: var(--color-line-2, #c0c6cc);
  --tab-capsule-tab-border-line-color-disabled: var(--color-line-1, #e3e4e6);
  --tab-capsule-corner-radius: var(--corner-1, 2px);
  --tab-capsule-tab-border-line-width: var(--line-1, 1px);
  --tab-capsule-tab-border-line-style: var(--line-solid, solid);
  --tab-text-item-sep-width: var(--line-1, 1px);
  --tab-text-item-sep-height: var(--s-3, 12px);
  --tab-text-item-sep-color: var(--color-line-2, #c0c6cc);
  --tab-text-text-color-normal: var(--color-text-3, #555);
  --tab-text-text-color-hover: var(--color-brand-6, #0064c8);
  --tab-text-text-color-selected: var(--color-brand-6, #0064c8);
  --tab-text-text-color-disabled: var(--color-text-1, #c1c1c1);
  // list
  --list-size-s-title-font-size: var(--font-size-subhead, 14px);
  --list-size-s-title-font-weight: var(--font-weight-3, bold);
  --list-size-s-item-padding-lr: var(--s-0, 0);
  --list-size-s-item-padding-tb: var(--s-2, 8px);
  --list-size-s-item-media-margin: var(--s-2, 8px);
  --list-size-s-item-content-font-size: var(--font-size-body-1, 12px);
  --list-size-s-item-content-line-height: var(--font-line-height-1, 1);
  --list-size-s-item-title-font-weight: var(--font-weight-2, normal);
  --list-size-s-item-title-font-size: var(--font-size-body-2, 14px);
  --list-size-s-item-title-line-height: var(--font-line-height-2, 1.5);
  --list-size-m-title-font-size: var(--font-size-title, 16px);
  --list-size-m-title-font-weight: var(--font-weight-3, bold);
  --list-size-m-item-padding-lr: var(--s-0, 0);
  --list-size-m-item-padding-tb: var(--s-4, 16px);
  --list-size-m-item-media-margin: var(--s-2, 8px);
  --list-size-m-item-content-font-size: var(--font-size-body-2, 14px);
  --list-size-m-item-content-line-height: var(--font-line-height-2, 1.5);
  --list-size-m-item-title-font-size: var(--font-size-subhead, 14px);
  --list-size-m-item-title-line-height: var(--font-line-height-2, 1.5);
  --list-size-m-item-title-font-weight: var(--font-weight-2, normal);
  --list-divider-color: var(--color-line-2, #c0c6cc);
  --list-title-color: var(--color-text-4, #111);
  --list-content-color: var(--color-text-3, #555);
  --list-extra-color: var(--color-text-2, #888);
  // breadcrumb
  --breadcrumb-size-m-font-size: var(--font-size-body-1, 12px);
  --breadcrumb-size-ellipsis-font-size: var(--font-size-caption, 12px);
  --breadcrumb-size-m-icon-margin: var(--s-2, 8px);
  --breadcrumb-text-color: var(--color-text-7, #666);
  --breadcrumb-text-current-color: var(--color-text-5, #ccc);
  --breadcrumb-text-current-weight: var(--font-weight-2, normal);
  --breadcrumb-text-ellipsis-color: var(--color-text-3, #555);
  --breadcrumb-text-keyword-color: var(--color-link-1, #0064c8);
  --breadcrumb-icon-color: var(--color-brand2-2, #e3e4e6);
  --breadcrumb-text-color-hover: var(--color-text-9, #333);
  --breadcrumb-text-current-color-hover: var(--color-text-5, #ccc);
  --breadcrumb-text-keyword-color-hover: var(--color-brand-6, #0064c8);
  // form-element
  --form-element-small-height: var(--s-7, 28px);
  --form-element-medium-height: var(--s-8, 32px);
  --form-element-large-height: var(--s-9, 36px);
  --form-element-small-font-size: var(--font-size-body-1, 12px);
  --form-element-medium-font-size: var(--font-size-body-1, 12px);
  --form-element-large-font-size: var(--font-size-body-2, 14px);
  --form-element-small-preview-height: var(--s-5, 20px);
  --form-element-medium-preview-height: var(--s-7, 28px);
  --form-element-large-preview-height: var(--s-10, 40px);
  --form-element-small-preview-font-size: var(--font-size-caption, 12px);
  --form-element-medium-preview-font-size: var(--font-size-body-1, 12px);
  --form-element-large-preview-font-size: var(--font-size-subhead, 14px);
  --form-element-small-corner: var(--corner-1, 2px);
  --form-element-medium-corner: var(--corner-1, 2px);
  --form-element-large-corner: var(--corner-1, 2px);
  // popup
  --popup-local-border-width: var(--line-1, 1px);
  --popup-local-border-style: var(--line-solid, solid);
  --popup-local-border-color: var(--color-brand2-4, #c0c6cc);
  --popup-local-corner: var(--corner-1, 2px);
  --popup-local-shadow: var(--shadow-1, 0 2px 4px 0 rgba(0, 0, 0, 0.16));
  --popup-global-border-width: var(--line-zero, 0);
  --popup-global-border-style: var(--line-solid, solid);
  --popup-global-border-color: var(--color-line-2, #c0c6cc);
  --popup-global-corner: var(--corner-1, 2px);
  --popup-global-shadow: var(--shadow-2-down, 0 4px 8px 0 rgba(0, 0, 0, 0.16));
  // line
  --line-zero: 0;
  --line-1: 1px;
  --line-2: 2px;
  --line-3: 3px;
  --line-solid: solid;
  --line-dashed: dashed;
  --line-dotted: dotted;
}