@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/src/base-var.scss

@@ -0,0 +1,489 @@
+@use './reset.scss';
+@use './pub-class.scss';
+@use './zjhc/fontsize.scss';
+
+// 本文件的目的是为了让不使用组件库的项目样式方面与规范对齐，固将element plus中的css变量和组件库内的变量全部提取至:root
+// reset.scss中已定义过的变量此处不再重复定义
+// 组件内的css变量提取到全局
+html:root {
+  --el-alert-bg-color: var(--el-color-error-light-9);
+  --el-alert-border-radius-base: var(--el-border-radius-base);
+  --el-alert-close-customed-font-size: var(--font-size-base);
+  --el-alert-close-font-size: var(--font-size-xxl);
+  --el-alert-description-font-size: var(--font-size-base);
+  --el-alert-icon-large-size: 28px;
+  --el-alert-icon-size: var(--font-size-xxl);
+  --el-alert-padding: 8px 20px;
+  --el-alert-title-font-size: var(--font-size-base);
+  --el-alert-title-with-description-font-size: var(--font-size-l);
+
+  --el-anchor-active-color: var(--el-color-primary);
+  --el-anchor-bg-color: var(--el-bg-color);
+  --el-anchor-color: var(--el-text-color-secondary);
+  --el-anchor-font-size: var(--el-font-size-base);
+  --el-anchor-line-height: 20px;
+  --el-anchor-marker-bg-color: var(--el-color-primary);
+  --el-anchor-padding-indent: 14px;
+
+  --el-avatar-bg-color: var(--el-text-color-disabled);
+  --el-avatar-border-radius: var(--el-border-radius-base);
+  --el-avatar-icon-size: 18px;
+  --el-avatar-size: 56px;
+  --el-avatar-size-large: 56px;
+  --el-avatar-size-small: 24px;
+  --el-avatar-text-color: var(--el-color-white);
+  --el-avatar-text-size: 14px;
+
+  --el-backtop-bg-color: var(--el-bg-color-overlay);
+  --el-backtop-hover-bg-color: var(--el-color-primary);
+  // 当backtop划过的时候，--el-backtop-text-color值应改为#fff
+  --el-backtop-text-color: var(--el-color-primary);
+
+  --el-badge-bg-color: var(--el-color-danger);
+  --el-badge-font-size: 12px;
+  --el-badge-padding: 6px;
+  --el-badge-radius: 10px;
+  --el-badge-size: 18px;
+
+  // button不同风格的按钮需要自行在对应的class下重写对应的变量值
+  --el-button-font-weight: var(--el-font-weight-primary);
+  --el-button-border-color: var(--el-border-color);
+  --el-button-bg-color: var(--el-fill-color-blank);
+  --el-button-text-color: var(--el-text-color-regular);
+  --el-button-disabled-text-color: var(--el-disabled-text-color);
+  --el-button-disabled-bg-color: var(--el-fill-color-blank);
+  --el-button-disabled-border-color: var(--el-border-color-light);
+  --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
+  --el-button-hover-text-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-light-9);
+  --el-button-hover-border-color: var(--el-color-primary-light-7);
+  --el-button-active-text-color: var(--el-button-hover-text-color);
+  --el-button-active-border-color: var(--el-color-primary);
+  --el-button-active-bg-color: var(--el-button-hover-bg-color);
+  --el-button-outline-color: var(--el-color-primary-light-5);
+  --el-button-hover-link-text-color: var(--el-color-info);
+  --el-button-active-color: var(--el-text-color-primary);
+
+  --el-calendar-border: var(
+    --el-table-border,
+    1px solid var(--el-border-color-lighter)
+  );
+  --el-calendar-cell-width: 85px;
+  --el-calendar-header-border-bottom: var(--el-calendar-border);
+  --el-calendar-selected-bg-color: var(--el-selected-bg-color);
+
+  --el-card-bg-color: var(--el-fill-color-blank);
+  --el-card-border-color: var(--el-border-color-light);
+  --el-card-border-radius: 4px;
+  --el-card-padding: var(--zjhc-padding-space-m);
+
+  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+  --el-carousel-arrow-font-size: 12px;
+  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+  --el-carousel-arrow-size: 36px;
+  --el-carousel-indicator-height: 2px;
+  --el-carousel-indicator-out-color: var(--el-border-color-hover);
+  --el-carousel-indicator-padding-horizontal: 4px;
+  --el-carousel-indicator-padding-vertical: 12px;
+  --el-carousel-indicator-width: 30px;
+
+  --el-cascader-color-empty: var(--el-text-color-placeholder);
+  --el-cascader-menu-border: solid 1px var(--el-border-color-light);
+  --el-cascader-menu-fill: var(--el-bg-color-overlay);
+  --el-cascader-menu-font-size: var(--el-font-size-base);
+  --el-cascader-menu-radius: var(--el-border-radius-base);
+  --el-cascader-menu-selected-text-color: var(--el-color-primary);
+  --el-cascader-menu-shadow: var(--el-box-shadow-light);
+  --el-cascader-menu-text-color: var(--el-text-color-regular);
+  --el-cascader-node-background-hover: var(--el-fill-color-light);
+  --el-cascader-node-color-disabled: var(--el-text-color-placeholder);
+  --el-cascader-tag-background: var(--el-fill-color);
+
+  --el-checkbox-bg-color: var(--el-fill-color-blank);
+  --el-checkbox-border-radius: var(--el-border-radius-small);
+  --el-checkbox-button-checked-bg-color: var(--el-color-primary);
+  --el-checkbox-button-checked-border-color: var(--el-color-primary);
+  --el-checkbox-button-checked-text-color: var(--el-color-white);
+  --el-checkbox-checked-bg-color: var(--el-color-primary);
+  --el-checkbox-checked-icon-color: var(--el-color-white);
+  --el-checkbox-checked-input-border-color: var(--el-color-primary);
+  --el-checkbox-checked-text-color: var(--el-color-primary);
+  --el-checkbox-disabled-border-color: var(--el-border-color);
+  --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
+  --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
+  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
+  --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
+  --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
+  --el-checkbox-font-size: var(--el-font-size-base);
+  --el-checkbox-font-weight: var(--el-font-weight-primary);
+  --el-checkbox-height: var(--el-tree-node-content-height);
+  --el-checkbox-input-border: var(--el-border);
+  --el-checkbox-input-border-color-hover: var(--el-color-primary);
+  --el-checkbox-input-height: 14px;
+  --el-checkbox-input-width: 14px;
+  --el-checkbox-text-color: var(--el-text-color-regular);
+
+  --el-collapse-border-color: var(--el-border-color-lighter);
+  --el-collapse-content-bg-color: var(--el-fill-color-blank);
+  --el-collapse-content-font-size: var(--font-size-s);
+  --el-collapse-content-text-color: var(--el-text-color-primary);
+  --el-collapse-header-bg-color: var(--el-fill-color-blank);
+  --el-collapse-header-font-size: var(--font-size-s);
+  --el-collapse-header-height: 36px;
+  --el-collapse-header-text-color: var(--el-text-color-primary);
+
+  --el-color-picker-alpha-bg-a: #333333;
+  --el-color-picker-alpha-bg-b: transparent;
+
+  --el-date-editor-daterange-width: 350px;
+  --el-date-editor-datetimerange-width: 400px;
+  --el-date-editor-monthrange-width: 300px;
+  --el-date-editor-width: var(--el-date-editor-datetimerange-width);
+
+  --el-datepicker-active-color: var(--el-color-primary);
+  --el-datepicker-border-color: var(--el-disabled-border-color);
+  --el-datepicker-header-text-color: var(--el-text-color-regular);
+  --el-datepicker-hover-text-color: var(--el-color-primary);
+  --el-datepicker-icon-color: var(--el-text-color-primary);
+  --el-datepicker-inner-border-color: var(--el-border-color);
+  --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light);
+  --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
+  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-text-color: var(--el-text-color-regular);
+
+  --el-descriptions-item-bordered-label-background: #f1f2f7;
+  --el-descriptions-table-border: 1px solid var(--el-border-color-lighter);
+
+  --el-dialog-bg-color: var(--el-bg-color);
+  --el-dialog-border-radius: var(--zjhc-border-radius-middle);
+  --el-dialog-box-shadow: var(--el-box-shadow);
+  --el-dialog-content-font-size: var(--font-size-base);
+  --el-dialog-font-line-height: var(--el-font-line-height-primary);
+  --el-dialog-margin-top: 15vh;
+  --el-dialog-padding-primary: 28px;
+  --el-dialog-header-bottom: 15px;
+  --el-dialog-header-top: 20px;
+  --el-dialog-title-font-size: var(--el-font-size-large);
+  --el-dialog-width: 50%;
+
+  --el-drawer-bg-color: var(--el-dialog-bg-color, var(--el-bg-color));
+  --el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
+  --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
+  --el-dropdown-menu-index: 10;
+  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
+  --el-dropdown-menuItem-hover-fill: var(--el-color-primary-light-9);
+
+  --el-empty-bottom-margin-top: 20px;
+  --el-empty-description-margin-top: 20px;
+  --el-empty-fill-color-0: var(--el-color-white);
+  --el-empty-fill-color-1: #fcfcfd;
+  --el-empty-fill-color-2: #f8f9fb;
+  --el-empty-fill-color-3: #f7f8fc;
+  --el-empty-fill-color-4: #eeeff3;
+  --el-empty-fill-color-5: #edeef2;
+  --el-empty-fill-color-6: #e9ebef;
+  --el-empty-fill-color-7: #e5e7e9;
+  --el-empty-fill-color-8: #e0e3e9;
+  --el-empty-fill-color-9: #d5d7de;
+  --el-empty-image-width: 160px;
+  --el-empty-padding: 40px 0;
+
+  --el-footer-padding: 0 20px;
+
+  --el-header-height: 60px;
+  --el-header-padding: 0 20px;
+
+  --el-form-inline-content-width: 220px;
+  --el-form-label-font-size: var(--el-font-size-base);
+
+  --el-icon-size: 12px;
+
+  --el-index-normal: 1;
+  --el-index-popper: 2000;
+  --el-index-top: 1000;
+
+  --el-input-bg-color: var(--el-fill-color-blank);
+  --el-input-border: var(--el-border);
+  --el-input-border-color: var(--el-border-color);
+  --el-input-border-radius: var(--el-border-radius-base);
+  --el-input-clear-hover-color: var(--el-text-color-secondary);
+  --el-input-focus-border: var(--el-color-primary);
+  --el-input-focus-border-color: var(--el-color-primary);
+  --el-input-hover-border: var(--el-border-color-hover);
+  --el-input-hover-border-color: var(--el-border-color-hover);
+  --el-input-icon-color: var(--el-text-color-placeholder);
+  --el-input-inner-height: calc(var(--el-input-height, 24px) - 2px);
+  --el-input-number-controls-height: 11px;
+  --el-input-placeholder-color: var(--el-text-color-placeholder);
+  --el-input-text-color: var(--el-text-color-regular);
+  --el-input-transparent-border: 0 0 0 1px transparent inset;
+  --el-input-width: 100%;
+
+  --el-link-disabled-text-color: var(--el-color-info-light-5);
+  --el-link-font-size: var(--el-font-size-base);
+  --el-link-font-weight: var(--el-font-weight-primary);
+  --el-link-hover-text-color: var(--el-color-info-light-3);
+  --el-link-text-color: var(--el-color-info);
+
+  --el-loading-fullscreen-spinner-size: 50px;
+  --el-loading-spinner-size: 42px;
+
+  --el-main-padding: 0;
+
+  --el-mention-bg-color: var(--el-bg-color-overlay);
+  --el-mention-border: 1px solid var(--el-border-color-light);
+  --el-mention-font-size: var(--el-font-size-base);
+  --el-mention-footer-padding: 10px;
+  --el-mention-header-padding: 10px;
+  --el-mention-max-height: 174px;
+  --el-mention-option-color: var(--el-text-color-regular);
+  --el-mention-option-disabled-color: var(--el-text-color-placeholder);
+  --el-mention-option-height: var(--el-input-height);
+  --el-mention-option-hover-background: var(--el-fill-color-light);
+  --el-mention-option-loading-color: var(--el-text-color-secondary);
+  --el-mention-option-loading-padding: 10px 0;
+  --el-mention-option-min-width: 100px;
+  --el-mention-option-selected-color: var(--el-color-primary);
+  --el-mention-padding: 6px 0;
+  --el-mention-shadow: var(--el-box-shadow-light);
+
+  --el-menu-active-color: var(--el-color-primary);
+  --el-menu-base-level-padding: 20px;
+  --el-menu-bg-color: var(--el-fill-color-blank);
+  --el-menu-border-color: var(--el-border-color);
+  --el-menu-horizontal-height: 60px;
+  --el-menu-horizontal-sub-item-height: 36px;
+  --el-menu-hover-bg-color: var(--el-color-primary-light-9);
+  --el-menu-hover-text-color: var(--el-color-primary);
+  --el-menu-icon-width: 24px;
+  --el-menu-item-font-size: var(--el-font-size-base);
+  --el-menu-item-height: 56px;
+  --el-menu-item-hover-fill: var(--el-color-primary-light-9);
+  --el-menu-level-padding: 20px;
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+  --el-menu-text-color: var(--el-text-color-primary);
+
+  --el-message-bg-color: var(--el-color-primary-light-9);
+  --el-message-border-color: var(--el-color-primary-light-8);
+  --el-message-close-hover-color: var(--el-text-color-secondary);
+  --el-message-close-icon-color: var(--el-text-color-placeholder);
+  --el-message-padding: 8px 15px;
+  --el-message-text-color: var(--el-color-primary);
+
+  --el-messagebox-border-radius: var(--zjhc-border-radius-middle);
+  --el-messagebox-box-shadow: var(--el-box-shadow);
+  --el-messagebox-color: var(--el-color-error);
+  --el-messagebox-content-color: var(--el-text-color-regular);
+  --el-messagebox-content-font-size: var(--el-font-size-base);
+  --el-messagebox-error-font-size: var(--el-font-size-base);
+  --el-messagebox-font-line-height: var(--el-font-line-height-primary);
+  --el-messagebox-font-size: var(--el-font-size-large);
+  --el-messagebox-padding-primary: 28px;
+  --el-messagebox-header-top: var(--zjhc-padding-space-l);
+  --el-messagebox-header-bottom: var(--zjhc-padding-space-m);
+  --el-messagebox-title-color: var(--el-text-color-primary);
+  --el-messagebox-width: 420px;
+
+  --el-notification-border-color: var(--el-border-color-lighter);
+  --el-notification-close-color: var(--el-text-color-secondary);
+  --el-notification-close-font-size: var(--el-message-close-size, 16px);
+  --el-notification-close-hover-color: var(--el-text-color-regular);
+  --el-notification-content-color: var(--el-text-color-regular);
+  --el-notification-content-font-size: var(--el-font-size-base);
+  --el-notification-group-margin-left: 8px;
+  --el-notification-group-margin-right: 8px;
+  --el-notification-icon-color: var(--el-color-info);
+  --el-notification-icon-size: 24px;
+  --el-notification-padding: 14px 26px 14px 13px;
+  --el-notification-radius: 8px;
+  --el-notification-shadow: var(--el-box-shadow-light);
+  --el-notification-title-color: var(--el-text-color-primary);
+  --el-notification-title-font-size: var(--font-size-l);
+  --el-notification-width: 330px;
+  // TODO：优化
+  --el-pagination-font-size: var(--font-size-s);
+  --el-pagination-bg-color: var(--el-fill-color-blank);
+  --el-pagination-text-color: var(--el-text-color-primary);
+  --el-pagination-border-radius: 3px;
+  --el-pagination-button-color: var(--el-text-color-primary);
+  --el-pagination-button-width: 28px;
+  --el-pagination-button-height: 28px;
+  --el-pagination-button-disabled-color: rgba(102, 102, 102, 0.5);
+  --el-pagination-button-disabled-bg-color: rgba(247, 248, 251, 0.5);
+  --el-pagination-button-bg-color: var(--zjhc-light-backgound-color);
+  --el-pagination-button-hover-color: #f1f2f7;
+  --el-pagination-hover-color: var(--el-color-primary);
+  --el-pagination-font-size-small: 12px;
+  --el-pagination-button-width-small: 24px;
+  --el-pagination-button-height-small: 24px;
+  --el-pagination-button-width-large: 32px;
+  --el-pagination-button-height-large: 32px;
+  --el-pagination-item-gap: 10px;
+
+  --el-popover-bg-color: var(--el-text-color-primary);
+  --el-popover-border-color: var(--el-text-color-primary);
+  --el-popover-border-radius: 4px;
+  --el-popover-font-size: var(--el-font-size-base);
+  --el-popover-padding: 15px;
+  --el-popover-padding-large: 18px 20px;
+  --el-popover-title-font-size: var(--font-size-l);
+  --el-popover-title-text-color: var(--el-bg-color);
+
+  --el-popper-border-radius: var(--el-border-radius-base);
+
+  --el-popup-modal-bg-color: var(--el-color-black);
+  --el-popup-modal-opacity: 0.5;
+
+  --el-radio-button-checked-bg-color: var(--el-color-primary);
+  --el-radio-button-checked-border-color: var(--el-color-primary);
+  --el-radio-button-checked-text-color: var(--el-color-white);
+  --el-radio-button-disabled-checked-fill: var(--el-border-color-extra-light);
+  --el-radio-font-size: var(--el-font-size-base);
+  --el-radio-font-weight: var(--el-font-weight-primary);
+  --el-radio-input-bg-color: var(--el-fill-color-blank);
+  --el-radio-input-border: var(--el-border);
+  --el-radio-input-border-color: var(--el-border-color);
+  --el-radio-input-border-color-hover: var(--el-color-primary);
+  --el-radio-input-border-radius: var(--el-border-radius-circle);
+  --el-radio-input-height: 14px;
+  --el-radio-input-width: 14px;
+  --el-radio-text-color: var(--el-text-color-regular);
+
+  --el-rate-disabled-void-color: var(--el-fill-color);
+  --el-rate-fill-color: var(--el-color-warning);
+  --el-rate-font-size: var(--el-font-size-base);
+  --el-rate-height: 20px;
+  --el-rate-icon-margin: 6px;
+  --el-rate-icon-size: 18px;
+  --el-rate-text-color: var(--el-text-color-primary);
+  --el-rate-void-color: var(--el-border-color-darker);
+
+  --el-result-color: var(--el-color-info);
+  --el-result-extra-margin-top: 30px;
+  --el-result-icon-font-size: 64px;
+  --el-result-padding: 40px 30px;
+  --el-result-subtitle-margin-top: 10px;
+  --el-result-title-font-size: 20px;
+  --el-result-title-margin-top: 20px;
+
+  --el-scrollbar-bg-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-opacity: 0.5;
+  --el-scrollbar-opacity: 0.3;
+
+  --el-segmented-bg-color: var(--el-fill-color-light);
+  --el-segmented-color: var(--el-text-color-regular);
+  --el-segmented-item-active-bg-color: var(--el-fill-color-darker);
+  --el-segmented-item-disabled-color: var(--el-text-color-placeholder);
+  --el-segmented-item-hover-bg-color: var(--el-fill-color-dark);
+  --el-segmented-item-hover-color: var(--el-text-color-primary);
+  --el-segmented-item-selected-bg-color: var(--el-color-primary);
+  --el-segmented-item-selected-color: var(--el-color-white);
+  --el-segmented-item-selected-disabled-bg-color: var(
+    --el-color-primary-light-5
+  );
+  --el-segmented-padding: 2px;
+
+  --el-select-border-color-hover: var(--el-border-color-hover);
+  --el-select-close-hover-color: var(--el-text-color-secondary);
+  --el-select-disabled-border: var(--el-disabled-border-color);
+  --el-select-disabled-color: var(--el-disabled-text-color);
+  --el-select-font-size: var(--el-font-size-base);
+  --el-select-input-color: var(--el-text-color-placeholder);
+  --el-select-input-focus-border-color: var(--el-color-primary);
+  --el-select-input-font-size: var(--font-size-base);
+  --el-select-multiple-input-color: var(--el-text-color-regular);
+  --el-select-width: 100%;
+
+  --el-skeleton-circle-size: var(--el-avatar-size);
+  --el-skeleton-color: var(--el-fill-color);
+  --el-skeleton-to-color: var(--el-fill-color-darker);
+
+  --el-slider-main-bg-color: var(--el-color-primary);
+  --el-slider-runway-bg-color: var(--el-border-color-light);
+  --el-slider-stop-bg-color: var(--el-color-white);
+  --el-slider-disabled-color: var(--el-text-color-placeholder);
+  --el-slider-border-radius: 3px;
+  --el-slider-height: 6px;
+  --el-slider-button-size: 20px;
+  --el-slider-button-wrapper-size: 36px;
+  --el-slider-button-wrapper-offset: -15px;
+
+  --el-statistic-content-color: var(--el-text-color-primary);
+  --el-statistic-content-font-size: var(--el-font-size-extra-large);
+  --el-statistic-content-font-weight: 400;
+  --el-statistic-title-color: var(--el-text-color-regular);
+  --el-statistic-title-font-size: var(--el-font-size-extra-small);
+  --el-statistic-title-font-weight: 400;
+
+  --el-switch-off-color: var(--el-border-color);
+  --el-switch-on-color: var(--el-color-primary);
+
+  --el-table-bg-color: var(--el-fill-color-blank);
+  --el-table-border: 1px solid var(--el-table-border-color);
+  --el-table-border-color: var(--el-border-color-lighter);
+  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+  --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
+  --el-table-fixed-box-shadow: var(--el-box-shadow-light);
+  --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  --el-table-header-text-color: var(--el-text-color-regular);
+  --el-table-index: var(--el-index-normal);
+  --el-table-row-hover-bg-color: var(--el-fill-color-light);
+  --el-table-text-color: var(--el-text-color-regular);
+  --el-table-tr-bg-color: var(--el-bg-color);
+
+  --el-tabs-header-height: 40px;
+
+  --el-tag-height: var(--font-size-xxxl);
+  --el-tag-bg-color: var(--el-fill-color-blank);
+  --el-tag-border-color: var(--el-color-info-light-5);
+  --el-tag-border-radius: var(--el-border-radius-base);
+  --el-tag-border-radius-rounded: 9999px;
+  --el-tag-font-size: var(--el-font-size-base);
+  --el-tag-hover-color: var(--el-color-info);
+  --el-tag-text-color: var(--el-color-info);
+
+  --el-text-font-size: var(--el-font-size-extra-small);
+
+  --el-timeline-node-color: var(--el-border-color-light);
+  --el-timeline-node-size-large: 14px;
+  --el-timeline-node-size-normal: 12px;
+
+  --el-tooltip-v2-border-color: transparent;
+  --el-tooltip-v2-border-radius: 4px;
+  --el-tooltip-v2-padding: 5px 10px;
+
+  --el-tour-bg-color: var(--el-color-primary);
+  --el-tour-border-radius: 4px;
+  --el-tour-close-color: #fff;
+  --el-tour-color: var(--el-text-color-primary);
+  --el-tour-font-line-height: var(--el-font-line-height-primary);
+  --el-tour-font-size: var(--font-size-base);
+  --el-tour-padding-primary: 20px;
+  --el-tour-text-color: #fff;
+  --el-tour-title-font-size: var(--font-size-l);
+  --el-tour-title-font-weight: 400;
+  --el-tour-title-text-color: #fff;
+  --el-tour-width: 520px;
+
+  --el-transfer-border-color: var(--el-border-color-lighter);
+  --el-transfer-border-radius: var(--el-border-radius-base);
+  --el-transfer-filter-height: 32px;
+  --el-transfer-item-height: 30px;
+  --el-transfer-panel-body-height: 278px;
+  --el-transfer-panel-footer-height: 40px;
+  --el-transfer-panel-header-bg-color: var(--el-fill-color-light);
+  --el-transfer-panel-header-height: 40px;
+  --el-transfer-panel-width: 200px;
+
+  --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+  --el-tree-node-content-height: var(--el-height-size-base);
+  --el-tree-node-hover-bg-color: var(--el-fill-color-light);
+  --el-tree-text-color: var(--el-text-color-regular);
+
+  --el-upload-dragger-padding-horizontal: 40px;
+  --el-upload-dragger-padding-vertical: 10px;
+  --el-upload-list-picture-card-size: 148px;
+  --el-upload-picture-card-size: 148px;
+}

package/theme-chalk/src/base.scss

@@ -0,0 +1 @@
+@use 'var.scss';

package/theme-chalk/src/black/index.scss

@@ -0,0 +1,4 @@
+// 全局黑白色
+html.zjhc-greymode {
+  filter: grayscale(100%);
+}

package/theme-chalk/src/collapse-container.scss

@@ -0,0 +1,44 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+
+// background-color: var();
+@include b(collapse) {
+  @include e(container) {
+    border: 1px solid var(--el-border-color);
+    border-radius: 5px;
+  }
+  @include e(header) {
+    height: 38px;
+    // line-height: 38px;
+    padding: 0 var(--zjhc-padding-space-l);
+    background-color: var(--el-fill-color-light);
+    font-size: var(--font-size-m);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 5px 5px 0 0;
+    @include m(arrow) {
+      padding: 3px;
+      font-size: var(--font-size-m);
+      cursor: pointer;
+      width: auto;
+      height: auto;
+      &:hover {
+        background-color: rgba(50, 58, 77, 0.1);
+      }
+    }
+  }
+  @include e(arrow) {
+    padding: 3px;
+    font-size: var(--font-size-m);
+    cursor: pointer;
+    width: auto;
+    height: auto;
+    &:hover {
+      background-color: rgba(50, 58, 77, 0.1);
+    }
+  }
+  @include e(content) {
+    padding: var(--zjhc-padding-space-l);
+  }
+}

package/theme-chalk/src/collapse-panel.scss

@@ -0,0 +1,26 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+
+
+// background-color: var();
+@include b(collapse) {
+    @include m(panel) {
+        overflow: hidden;
+        max-height: 0;
+
+    }
+
+    @include m(footer) {
+        position: relative;
+    }
+
+    @include e(toggle) {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        .el-icon{
+            font-size: 16px;
+        }
+    }
+}