foucui 1.0.1

package/styles/var.scss

@@ -0,0 +1,382 @@
+@use './variables' as *;
+
+:root {
+  //背景色
+  --qiu-background-color: #f3f6f5;
+  // 技术主题背景（与 plain 区分）
+  --qiu-background-technology: var(--qiu-background-color);
+  // 标签栏高度别名
+  --qiu-tags-height: var(--qiu-tabs-height);
+  // info 浅色阶 9
+  --qiu-color-info-light-9: #{$qiu-color-info-light-9};
+  //菜单背景色
+  --qiu-menu-background-color: #0b1f1c;
+  //分栏布局右侧菜单背景色
+  --qiu-menu-background-color-second: #ffffff;
+  //菜单文字颜色
+  --qiu-menu-color-text: #ffffff;
+  //分栏右侧次导航文字色（浅底深字）
+  --qiu-menu-color-text-second: #303133;
+  //菜单item高度
+  --qiu-menu-item-height: 48px;
+  //横向菜单sub-item高度
+  --qiu-menu-horizontal-sub-item-height: calc(var(--qiu-menu-item-height) - 8px);
+  // 浅黑色
+  --qiu-color-grey: rgba(0, 0, 0, 0.65);
+  //黑色
+  --qiu-color-black: rgba(0, 0, 0, 0.75);
+  // primary颜色
+  --qiu-color-primary: #0f766e;
+  --qiu-color-primary-light-1: #{$qiu-color-primary-light-1};
+  --qiu-color-primary-light-2: #{$qiu-color-primary-light-2};
+  --qiu-color-primary-light-3: #{$qiu-color-primary-light-3};
+  --qiu-color-primary-light-4: #{$qiu-color-primary-light-4};
+  --qiu-color-primary-light-5: #{$qiu-color-primary-light-5};
+  --qiu-color-primary-light-6: #{$qiu-color-primary-light-6};
+  --qiu-color-primary-light-7: #{$qiu-color-primary-light-7};
+  --qiu-color-primary-light-8: #{$qiu-color-primary-light-8};
+  --qiu-color-primary-light-9: #{$qiu-color-primary-light-9};
+  --qiu-color-primary-dark-2: #{$qiu-color-primary};
+  // success颜色
+  --qiu-color-success: #{$qiu-color-success};
+  --qiu-color-success-light: #{$qiu-color-success-light};
+  --qiu-color-success-lighter: #{$qiu-color-success-lighter};
+  --qiu-color-success-light-1: #{$qiu-color-success-light-1};
+  --qiu-color-success-light-2: #{$qiu-color-success-light-2};
+  --qiu-color-success-light-3: #{$qiu-color-success-light-3};
+  --qiu-color-success-light-4: #{$qiu-color-success-light-4};
+  --qiu-color-success-light-5: #{$qiu-color-success-light-5};
+  --qiu-color-success-light-6: #{$qiu-color-success-light-6};
+  --qiu-color-success-light-7: #{$qiu-color-success-light-7};
+  --qiu-color-success-light-8: #{$qiu-color-success-light-8};
+  --qiu-color-success-light-9: #{$qiu-color-success-light-9};
+  --qiu-color-success-dark-2: #{$qiu-color-success};
+  //warning颜色
+  --qiu-color-warning: #{$qiu-color-warning};
+  --qiu-color-warning-light: #{$qiu-color-warning-light};
+  --qiu-color-warning-lighter: #{$qiu-color-warning-lighter};
+  --qiu-color-warning-light-1: #{$qiu-color-warning-light-1};
+  --qiu-color-warning-light-2: #{$qiu-color-warning-light-2};
+  --qiu-color-warning-light-3: #{$qiu-color-warning-light-3};
+  --qiu-color-warning-light-4: #{$qiu-color-warning-light-4};
+  --qiu-color-warning-light-5: #{$qiu-color-warning-light-5};
+  --qiu-color-warning-light-6: #{$qiu-color-warning-light-6};
+  --qiu-color-warning-light-7: #{$qiu-color-warning-light-7};
+  --qiu-color-warning-light-8: #{$qiu-color-warning-light-8};
+  --qiu-color-warning-light-9: #{$qiu-color-warning-light-9};
+  --qiu-color-warning-dark-2: #{$qiu-color-warning};
+  //danger颜色
+  --qiu-color-danger: #{$qiu-color-danger};
+  --qiu-color-danger-light: #{$qiu-color-danger-light};
+  --qiu-color-danger-lighter: #{$qiu-color-danger-lighter};
+  --qiu-color-danger-light-1: #{$qiu-color-danger-light-1};
+  --qiu-color-danger-light-2: #{$qiu-color-danger-light-2};
+  --qiu-color-danger-light-3: #{$qiu-color-danger-light-3};
+  --qiu-color-danger-light-4: #{$qiu-color-danger-light-4};
+  --qiu-color-danger-light-5: #{$qiu-color-danger-light-5};
+  --qiu-color-danger-light-6: #{$qiu-color-danger-light-6};
+  --qiu-color-danger-light-7: #{$qiu-color-danger-light-7};
+  --qiu-color-danger-light-8: #{$qiu-color-danger-light-8};
+  --qiu-color-danger-light-9: #{$qiu-color-danger-light-9};
+  --qiu-color-danger-dark-2: #{$qiu-color-danger};
+  //error颜色
+  --qiu-color-error: #{$qiu-color-error};
+  --qiu-color-error-light: #{$qiu-color-error-light};
+  --qiu-color-error-lighter: #{$qiu-color-error-lighter};
+  --qiu-color-error-light-1: #{$qiu-color-error-light-1};
+  --qiu-color-error-light-2: #{$qiu-color-error-light-2};
+  --qiu-color-error-light-3: #{$qiu-color-error-light-3};
+  --qiu-color-error-light-4: #{$qiu-color-error-light-4};
+  --qiu-color-error-light-5: #{$qiu-color-error-light-5};
+  --qiu-color-error-light-6: #{$qiu-color-error-light-6};
+  --qiu-color-error-light-7: #{$qiu-color-error-light-7};
+  --qiu-color-error-light-8: #{$qiu-color-error-light-8};
+  --qiu-color-error-light-9: #{$qiu-color-error-light-9};
+  --qiu-color-error-dark-2: #{$qiu-color-error};
+  //info颜色
+  --qiu-color-info: #{$qiu-color-info};
+  --qiu-color-info-light: #{$qiu-color-info-light};
+  --qiu-color-info-lighter: #{$qiu-color-info-lighter};
+  --qiu-color-info-dark-2: #{$qiu-color-info};
+  /**
+    * @description: 全局字体大小
+    */
+  --qiu-font-size-base: 14px;
+  --qiu-font-size-small: calc(var(--qiu-font-size-base) - 1px);
+  --qiu-font-size-extra-small: calc(var(--qiu-font-size-base) - 2px);
+  --qiu-font-size-medium: calc(var(--qiu-font-size-base) + 2px);
+  --qiu-font-size-large: calc(var(--qiu-font-size-base) + 4px);
+  --qiu-font-size-extra-large: calc(var(--qiu-font-size-base) + 6px);
+
+  --ti-common-font-size-base: calc(var(--qiu-font-size-base) - 2px) !important;
+  --ti-common-font-size-1: var(--qiu-font-size-base) !important;
+  --ti-common-font-size-2: calc(var(--qiu-font-size-base) + 2px) !important;
+  --ti-common-font-size-3: calc(var(--qiu-font-size-base) + 4px) !important;
+  --ti-common-font-size-4: calc(var(--qiu-font-size-base) + 6px) !important;
+  --ti-common-font-size-5: calc(var(--qiu-font-size-base) + 10px) !important;
+  --ti-common-font-size-6: calc(var(--qiu-font-size-base) + 18px) !important;
+  --ti-common-font-size-7: calc(var(--qiu-font-size-base) + 22px) !important;
+  //默认动画
+  // --qiu-transition-duration: 0.3s;
+  // --qiu-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --qiu-transition-duration: 0.25s;
+  --qiu-transition-function-ease-in-out-bezier: cubic-bezier(0.42, 0, 0.58, 1);
+  --qiu-transition: all var(--qiu-transition-duration) var(--qiu-transition-function-ease-in-out-bezier), border 0s, color 0.05s, font-size 0s;
+  //纵向、分栏左侧一级图标栏 / 折叠宽度
+  --qiu-left-menu-width-min: 75px;
+  //纵向左侧导航已折叠右侧内容的宽度
+  --qiu-right-content-width-min: calc(100% - var(--qiu-left-menu-width-min));
+  //纵向左侧导航未折叠的宽度
+  --qiu-left-menu-width: 266px;
+  //默认padding
+  --qiu-padding: 20px;
+  //默认margin
+  --qiu-margin: 20px;
+  //顶部nav的高度（分栏 Logo / 标题 / 面包屑统一以此为准）
+  --qiu-nav-height: 60px;
+  //顶部标签页tabs的高度
+  --qiu-tabs-height: 50px;
+  //顶部标签页tabs中每一个item的高度
+  --qiu-tab-item-height: 34px;
+  //底部footer的高度
+  --qiu-footer-height: 50px;
+  //遮罩层颜色
+  --qiu-mask-color: rgba(255, 255, 255, 0.8);
+  //z-index
+  --qiu-z-index: 1999;
+  //横向top-bar、logo、一级菜单的高度
+  --qiu-header-height: var(--qiu-nav-height);
+  //纵向、综合、分栏logo的高度（与 nav 同步，避免底边错位）
+  --qiu-logo-height: var(--qiu-nav-height);
+  //标题颜色
+  --qiu-title-color: #ffffff;
+  //输入框高度
+  --qiu-input-height: 32px;
+  //圆角
+  --qiu-border-radius-base: 5px;
+  //容器高度
+  --qiu-container-height: calc(
+    var(--vh, 1vh) * 100 - var(--qiu-nav-height) - var(--qiu-tabs-height) - var(--qiu-padding) * 3 - var(--qiu-footer-height)
+  );
+
+  // ===== Element Plus 语义变量的 qiu 真源（B类，原由 element-plus 注入，此处自管） =====
+  --qiu-color-white: #ffffff;
+  --qiu-bg-color-page: #f2f3f5;
+  --qiu-bg-color: #ffffff;
+  --qiu-bg-color-overlay: #ffffff;
+  --qiu-text-color-primary: #303133;
+  --qiu-text-color-regular: #606266;
+  --qiu-text-color-secondary: #909399;
+  --qiu-text-color-placeholder: #a8abb2;
+  --qiu-text-color-disabled: #c0c4cc;
+  --qiu-border-color-darker: #c4c4c4;
+  --qiu-border-color-dark: #d4d7de;
+  --qiu-border-color: #dcdfe6;
+  --qiu-border-color-light: #e4e7ed;
+  --qiu-border-color-lighter: #ebeef5;
+  --qiu-border-color-extra-light: #f2f6fc;
+  --qiu-border-color-hover: #c0c4cc;
+  --qiu-fill-color-darker: #ebeef5;
+  --qiu-fill-color-dark: #f0f2f5;
+  --qiu-fill-color: #f0f2f5;
+  --qiu-fill-color-light: #f5f7fa;
+  --qiu-fill-color-lighter: #fafafa;
+  --qiu-fill-color-extra-light: #fafcff;
+  --qiu-fill-color-blank: #ffffff;
+  --qiu-overlay-color-lighter: rgba(0, 0, 0, 0.3);
+  --qiu-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
+  --qiu-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.12);
+  --qiu-box-shadow-lighter: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --qiu-border-radius-circle: 100%;
+  --qiu-border-radius-round: 20px;
+  --qiu-menu-bg-color: var(--qiu-menu-background-color, #0b1f1c);
+  --qiu-menu-text-color: var(--qiu-menu-color-text, #ffffff);
+  --qiu-menu-border-color: var(--qiu-border-color);
+  --qiu-menu-hover-bg-color: var(--qiu-color-primary-light-9, #e6f4f2);
+  --qiu-menu-active-color: var(--qiu-color-primary, #0f766e);
+  --qiu-disabled-bg-color: #f5f7fa;
+  --qiu-disabled-text-color: #c0c4cc;
+  --qiu-card-padding: 20px;
+  --qiu-tag-font-size: 12px;
+  --qiu-pagination-border-radius: 2px;
+  --qiu-pagination-button-bg-color: var(--qiu-fill-color-blank, #fff);
+  --qiu-date-editor-daterange-width: 220px;
+  --qiu-dialog-bg-color: var(--qiu-bg-color, #fff);
+  --qiu-dialog-title-font-size: 18px;
+  --qiu-messagebox-font-size: 16px;
+  --qiu-collapse-header-font-size: 18px;
+  --qiu-collapse-content-font-size: 13px;
+  --qiu-alert-title-font-size: 13px;
+  --qiu-alert-title-with-description-font-size: 16px;
+  --qiu-alert-description-font-size: 12px;
+  --qiu-alert-close-font-size: 16px;
+  --qiu-alert-close-customed-font-size: 14px;
+  --qiu-alert-icon-size: 16px;
+  --qiu-alert-icon-large-size: 28px;
+  --qiu-tour-title-font-size: 16px;
+  --qiu-font-size-big: 18px;
+
+  // ===== 桥接：把第三方组件库运行时注入的变量指向 qiu 真源，使底层组件也读 qiu 体系 =====
+  --el-color-white: var(--qiu-color-white);
+  --el-background-color: var(--qiu-background-color);
+  --el-background-technology: var(--qiu-background-color);
+  --el-bg-color: var(--qiu-bg-color);
+  --el-bg-color-page: var(--qiu-bg-color-page);
+  --el-bg-color-overlay: var(--qiu-bg-color-overlay);
+  --el-text-color-primary: var(--qiu-text-color-primary);
+  --el-text-color-regular: var(--qiu-text-color-regular);
+  --el-text-color-secondary: var(--qiu-text-color-secondary);
+  --el-text-color-placeholder: var(--qiu-text-color-placeholder);
+  --el-text-color-disabled: var(--qiu-text-color-disabled);
+  --el-border: var(--qiu-border-color);
+  --el-border-color: var(--qiu-border-color);
+  --el-border-color-darker: var(--qiu-border-color-darker);
+  --el-border-color-dark: var(--qiu-border-color-dark);
+  --el-border-color-light: var(--qiu-border-color-light);
+  --el-border-color-lighter: var(--qiu-border-color-lighter);
+  --el-border-color-extra-light: var(--qiu-border-color-extra-light);
+  --el-border-color-hover: var(--qiu-border-color-hover);
+  --el-fill-color: var(--qiu-fill-color);
+  --el-fill-color-dark: var(--qiu-fill-color-dark);
+  --el-fill-color-darker: var(--qiu-fill-color-darker);
+  --el-fill-color-light: var(--qiu-fill-color-light);
+  --el-fill-color-lighter: var(--qiu-fill-color-lighter);
+  --el-fill-color-extra-light: var(--qiu-fill-color-extra-light);
+  --el-fill-color-blank: var(--qiu-fill-color-blank);
+  --el-overlay-color-lighter: var(--qiu-overlay-color-lighter);
+  --el-box-shadow: var(--qiu-box-shadow);
+  --el-box-shadow-light: var(--qiu-box-shadow-light);
+  --el-box-shadow-lighter: var(--qiu-box-shadow-lighter);
+  --el-border-radius-base: var(--qiu-border-radius-base);
+  --el-border-radius-circle: var(--qiu-border-radius-circle);
+  --el-border-radius-round: var(--qiu-border-radius-round);
+  --el-font-size-base: var(--qiu-font-size-base);
+  --el-font-size-big: var(--qiu-font-size-big);
+  --el-font-size-small: var(--qiu-font-size-small);
+  --el-font-size-extra-small: var(--qiu-font-size-extra-small);
+  --el-font-size-medium: var(--qiu-font-size-medium);
+  --el-font-size-large: var(--qiu-font-size-large);
+  --el-font-size-extra-large: var(--qiu-font-size-extra-large);
+  --el-menu-bg-color: var(--qiu-menu-bg-color);
+  --el-menu-text-color: var(--qiu-menu-text-color);
+  --el-menu-border-color: var(--qiu-menu-border-color);
+  --el-menu-hover-bg-color: var(--qiu-menu-hover-bg-color);
+  --el-menu-active-color: var(--qiu-menu-active-color);
+  --el-disabled-bg-color: var(--qiu-disabled-bg-color);
+  --el-disabled-text-color: var(--qiu-disabled-text-color);
+  --el-card-padding: var(--qiu-card-padding);
+  --el-tag-font-size: var(--qiu-tag-font-size);
+  --el-pagination-border-radius: var(--qiu-pagination-border-radius);
+  --el-pagination-button-bg-color: var(--qiu-pagination-button-bg-color);
+  --el-date-editor-daterange-width: var(--qiu-date-editor-daterange-width);
+  --el-dialog-bg-color: var(--qiu-dialog-bg-color);
+  --el-dialog-title-font-size: var(--qiu-dialog-title-font-size);
+  --el-messagebox-font-size: var(--qiu-messagebox-font-size);
+  --el-collapse-header-font-size: var(--qiu-collapse-header-font-size);
+  --el-collapse-content-font-size: var(--qiu-collapse-content-font-size);
+  --el-alert-title-font-size: var(--qiu-alert-title-font-size);
+  --el-alert-title-with-description-font-size: var(--qiu-alert-title-with-description-font-size);
+  --el-alert-description-font-size: var(--qiu-alert-description-font-size);
+  --el-alert-close-font-size: var(--qiu-alert-close-font-size);
+  --el-alert-close-customed-font-size: var(--qiu-alert-close-customed-font-size);
+  --el-alert-icon-size: var(--qiu-alert-icon-size);
+  --el-alert-icon-large-size: var(--qiu-alert-icon-large-size);
+  --el-tour-title-font-size: var(--qiu-tour-title-font-size);
+  --el-padding-base: var(--qiu-padding);
+  --el-color-grey: var(--qiu-color-grey);
+  --el-color-black: var(--qiu-color-black);
+  --el-color-primary: var(--qiu-color-primary);
+  --el-color-primary-light-1: var(--qiu-color-primary-light-1);
+  --el-color-primary-light-2: var(--qiu-color-primary-light-2);
+  --el-color-primary-light-3: var(--qiu-color-primary-light-3);
+  --el-color-primary-light-4: var(--qiu-color-primary-light-4);
+  --el-color-primary-light-5: var(--qiu-color-primary-light-5);
+  --el-color-primary-light-6: var(--qiu-color-primary-light-6);
+  --el-color-primary-light-7: var(--qiu-color-primary-light-7);
+  --el-color-primary-light-8: var(--qiu-color-primary-light-8);
+  --el-color-primary-light-9: var(--qiu-color-primary-light-9);
+  --el-color-primary-dark-2: var(--qiu-color-primary-dark-2);
+  --el-color-success: var(--qiu-color-success);
+  --el-color-success-light: var(--qiu-color-success-light);
+  --el-color-success-lighter: var(--qiu-color-success-lighter);
+  --el-color-success-light-1: var(--qiu-color-success-light-1);
+  --el-color-success-light-2: var(--qiu-color-success-light-2);
+  --el-color-success-light-3: var(--qiu-color-success-light-3);
+  --el-color-success-light-4: var(--qiu-color-success-light-4);
+  --el-color-success-light-5: var(--qiu-color-success-light-5);
+  --el-color-success-light-6: var(--qiu-color-success-light-6);
+  --el-color-success-light-7: var(--qiu-color-success-light-7);
+  --el-color-success-light-8: var(--qiu-color-success-light-8);
+  --el-color-success-light-9: var(--qiu-color-success-light-9);
+  --el-color-success-dark-2: var(--qiu-color-success-dark-2);
+  --el-color-warning: var(--qiu-color-warning);
+  --el-color-warning-light: var(--qiu-color-warning-light);
+  --el-color-warning-lighter: var(--qiu-color-warning-lighter);
+  --el-color-warning-light-1: var(--qiu-color-warning-light-1);
+  --el-color-warning-light-2: var(--qiu-color-warning-light-2);
+  --el-color-warning-light-3: var(--qiu-color-warning-light-3);
+  --el-color-warning-light-4: var(--qiu-color-warning-light-4);
+  --el-color-warning-light-5: var(--qiu-color-warning-light-5);
+  --el-color-warning-light-6: var(--qiu-color-warning-light-6);
+  --el-color-warning-light-7: var(--qiu-color-warning-light-7);
+  --el-color-warning-light-8: var(--qiu-color-warning-light-8);
+  --el-color-warning-light-9: var(--qiu-color-warning-light-9);
+  --el-color-warning-dark-2: var(--qiu-color-warning-dark-2);
+  --el-color-danger: var(--qiu-color-danger);
+  --el-color-danger-light: var(--qiu-color-danger-light);
+  --el-color-danger-lighter: var(--qiu-color-danger-lighter);
+  --el-color-danger-light-1: var(--qiu-color-danger-light-1);
+  --el-color-danger-light-2: var(--qiu-color-danger-light-2);
+  --el-color-danger-light-3: var(--qiu-color-danger-light-3);
+  --el-color-danger-light-4: var(--qiu-color-danger-light-4);
+  --el-color-danger-light-5: var(--qiu-color-danger-light-5);
+  --el-color-danger-light-6: var(--qiu-color-danger-light-6);
+  --el-color-danger-light-7: var(--qiu-color-danger-light-7);
+  --el-color-danger-light-8: var(--qiu-color-danger-light-8);
+  --el-color-danger-light-9: var(--qiu-color-danger-light-9);
+  --el-color-danger-dark-2: var(--qiu-color-danger-dark-2);
+  --el-color-error: var(--qiu-color-error);
+  --el-color-error-light: var(--qiu-color-error-light);
+  --el-color-error-lighter: var(--qiu-color-error-lighter);
+  --el-color-error-light-1: var(--qiu-color-error-light-1);
+  --el-color-error-light-2: var(--qiu-color-error-light-2);
+  --el-color-error-light-3: var(--qiu-color-error-light-3);
+  --el-color-error-light-4: var(--qiu-color-error-light-4);
+  --el-color-error-light-5: var(--qiu-color-error-light-5);
+  --el-color-error-light-6: var(--qiu-color-error-light-6);
+  --el-color-error-light-7: var(--qiu-color-error-light-7);
+  --el-color-error-light-8: var(--qiu-color-error-light-8);
+  --el-color-error-light-9: var(--qiu-color-error-light-9);
+  --el-color-error-dark-2: var(--qiu-color-error-dark-2);
+  --el-color-info: var(--qiu-color-info);
+  --el-color-info-light: var(--qiu-color-info-light);
+  --el-color-info-lighter: var(--qiu-color-info-lighter);
+  --el-color-info-light-9: var(--qiu-color-info-light-9);
+  --el-color-info-dark-2: var(--qiu-color-info-dark-2);
+  --el-transition-duration: var(--qiu-transition-duration);
+  --el-transition-function-ease-in-out-bezier: var(--qiu-transition-function-ease-in-out-bezier);
+  --el-transition: var(--qiu-transition);
+  --el-mask-color: var(--qiu-mask-color);
+  --el-z-index: var(--qiu-z-index);
+  --el-left-menu-width-min: var(--qiu-left-menu-width-min);
+  --el-right-content-width-min: var(--qiu-right-content-width-min);
+  --el-left-menu-width: var(--qiu-left-menu-width);
+  --el-padding: var(--qiu-padding);
+  --el-margin: var(--qiu-margin);
+  --el-nav-height: var(--qiu-nav-height);
+  --el-tabs-height: var(--qiu-tabs-height);
+  --el-tab-item-height: var(--qiu-tab-item-height);
+  --el-footer-height: var(--qiu-footer-height);
+  --el-header-height: var(--qiu-header-height);
+  --el-logo-height: var(--qiu-logo-height);
+  --el-title-color: var(--qiu-title-color);
+  --el-input-height: var(--qiu-input-height);
+  --el-container-height: var(--qiu-container-height);
+  --el-menu-background-color: var(--qiu-menu-background-color);
+  --el-menu-background-color-second: var(--qiu-menu-background-color-second);
+  --el-menu-color-text: var(--qiu-menu-color-text);
+  --el-menu-color-text-second: var(--qiu-menu-color-text-second);
+  --el-menu-item-height: var(--qiu-menu-item-height);
+  --el-menu-horizontal-sub-item-height: var(--qiu-menu-horizontal-sub-item-height);
+  --el-tags-height: var(--qiu-tabs-height);
+}

package/styles/variables.scss

@@ -0,0 +1,77 @@
+/**
+ * @description 全局主题变量配置
+ */
+
+$base-color-primary: #0f766e;
+$base-color-success: #13ce66;
+$base-color-warning: #e6a23c;
+$base-color-danger: #fd4e4e;
+$base-color-error: #fd4e4e;
+$base-color-text: #909399;
+
+$qiu-color-primary: $base-color-primary;
+$qiu-color-primary-light-1: rgba($base-color-primary, 0.9);
+$qiu-color-primary-light-2: rgba($base-color-primary, 0.8);
+$qiu-color-primary-light-3: rgba($base-color-primary, 0.7);
+$qiu-color-primary-light-4: rgba($base-color-primary, 0.6);
+$qiu-color-primary-light-5: rgba($base-color-primary, 0.5);
+$qiu-color-primary-light-6: rgba($base-color-primary, 0.4);
+$qiu-color-primary-light-7: rgba($base-color-primary, 0.3);
+$qiu-color-primary-light-8: rgba($base-color-primary, 0.2);
+$qiu-color-primary-light-9: rgba($base-color-primary, 0.1);
+
+$qiu-color-success: $base-color-success;
+$qiu-color-success-light: rgba($base-color-success, 0.2);
+$qiu-color-success-lighter: rgba($base-color-success, 0.1);
+$qiu-color-success-light-1: rgba($base-color-success, 0.9);
+$qiu-color-success-light-2: rgba($base-color-success, 0.8);
+$qiu-color-success-light-3: rgba($base-color-success, 0.7);
+$qiu-color-success-light-4: rgba($base-color-success, 0.6);
+$qiu-color-success-light-5: rgba($base-color-success, 0.5);
+$qiu-color-success-light-6: rgba($base-color-success, 0.4);
+$qiu-color-success-light-7: rgba($base-color-success, 0.3);
+$qiu-color-success-light-8: rgba($base-color-success, 0.2);
+$qiu-color-success-light-9: rgba($base-color-success, 0.1);
+
+$qiu-color-warning: $base-color-warning;
+$qiu-color-warning-light: rgba($base-color-warning, 0.2);
+$qiu-color-warning-lighter: rgba($base-color-warning, 0.1);
+$qiu-color-warning-light-1: rgba($base-color-warning, 0.9);
+$qiu-color-warning-light-2: rgba($base-color-warning, 0.8);
+$qiu-color-warning-light-3: rgba($base-color-warning, 0.7);
+$qiu-color-warning-light-4: rgba($base-color-warning, 0.6);
+$qiu-color-warning-light-5: rgba($base-color-warning, 0.5);
+$qiu-color-warning-light-6: rgba($base-color-warning, 0.4);
+$qiu-color-warning-light-7: rgba($base-color-warning, 0.3);
+$qiu-color-warning-light-8: rgba($base-color-warning, 0.2);
+$qiu-color-warning-light-9: rgba($base-color-warning, 0.1);
+
+$qiu-color-danger: $base-color-danger;
+$qiu-color-danger-light: rgba($base-color-danger, 0.2);
+$qiu-color-danger-lighter: rgba($base-color-danger, 0.1);
+$qiu-color-danger-light-1: rgba($base-color-danger, 0.9);
+$qiu-color-danger-light-2: rgba($base-color-danger, 0.8);
+$qiu-color-danger-light-3: rgba($base-color-danger, 0.7);
+$qiu-color-danger-light-4: rgba($base-color-danger, 0.6);
+$qiu-color-danger-light-5: rgba($base-color-danger, 0.5);
+$qiu-color-danger-light-6: rgba($base-color-danger, 0.4);
+$qiu-color-danger-light-7: rgba($base-color-danger, 0.3);
+$qiu-color-danger-light-8: rgba($base-color-danger, 0.2);
+$qiu-color-danger-light-9: rgba($base-color-danger, 0.1);
+
+$qiu-color-error: $base-color-error;
+$qiu-color-error-light: rgba($base-color-error, 0.2);
+$qiu-color-error-lighter: rgba($base-color-error, 0.1);
+$qiu-color-error-light-1: rgba($base-color-error, 0.9);
+$qiu-color-error-light-2: rgba($base-color-error, 0.8);
+$qiu-color-error-light-3: rgba($base-color-error, 0.7);
+$qiu-color-error-light-4: rgba($base-color-error, 0.6);
+$qiu-color-error-light-5: rgba($base-color-error, 0.5);
+$qiu-color-error-light-6: rgba($base-color-error, 0.4);
+$qiu-color-error-light-7: rgba($base-color-error, 0.3);
+$qiu-color-error-light-8: rgba($base-color-error, 0.2);
+$qiu-color-error-light-9: rgba($base-color-error, 0.1);
+
+$qiu-color-info: $base-color-text;
+$qiu-color-info-light: rgba($base-color-text, 0.2);
+$qiu-color-info-lighter: rgba($base-color-text, 0.1);