shop-vite/library/styles/variables.scss

/**
 * @description 全局主题变量配置
 */
//颜色配置
$base-color-white: #ffffff;
$base-color-black: rgba(0, 0, 0, 0.75);
$base-color-grey: rgba(0, 0, 0, 0.65);
$base-color-primary: #4e88f3;
$base-color-success: #13ce66;
$base-color-warning: #e6a23c;
$base-color-danger: #fd4e4e;
$base-color-error: #fd4e4e;
$base-background-color: #f6f8f9;

$base-color-text-primary: #303133;
$base-color-text-regular: #606266;
$base-color-text-secondary: #909399;
$base-color-text-placeholder: #c0c4cc;
$base-border-color-base: #dcdfe6;
$base-border-color-light: #e4e7ed;
$base-border-color-lighter: #ebeef5;
$base-border-color-extra-light: #f2f6fc;

//默认层级
$base-z-index: 1999;
//菜单背景色
$base-menu-background: #282c34;
//菜单文字颜色
$base-menu-color: hsla(0, 0%, 100%, 0.95);
//菜单选中文字颜色
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
//菜单选中背景色
$base-menu-active: $base-color-primary;
//标题颜色
$base-title-color: #fff;
//最大宽度
$base-main-width: 1279px;
//圆角
$base-border-radius: 5px;
//边框颜色
$base-border-color: #dcdfe6;
//输入框高度
$base-input-height: 32px;
//默认margin
$base-margin: 20px;
//默认padding
$base-padding: 20px;
//默认阴影
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//横向top-bar、logo、一级菜单的高度
$base-header-height: 60px;
//纵向、综合、分栏logo的高度
$base-logo-height: 60px;
//顶部nav-bar的高度
$base-nav-height: 60px;
//顶部标签页tabs-bar的高度
$base-tabs-height: 50px;
//顶部标签页tabs-bar中每一个item的高度
$base-tab-item-height: 34px;
//菜单li标签的高度
$base-menu-item-height: 50px;
//纵向左侧导航未折叠的宽度
$base-left-menu-width: 266px;
//纵向左侧导航已折叠的宽度
$base-left-menu-width-min: 64px;
//纵向左侧导航已折叠右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
//默认动画
$base-transition:
  all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  border 0s,
  color 0.1s,
  font-size 0s;

//vite不支持export，vab样式重写
$vab-color-primary: $base-color-primary;
$vab-color-primary-light-1: rgba($base-color-primary, 0.9);
$vab-color-primary-light-2: rgba($base-color-primary, 0.8);
$vab-color-primary-light-3: rgba($base-color-primary, 0.7);
$vab-color-primary-light-4: rgba($base-color-primary, 0.6);
$vab-color-primary-light-5: rgba($base-color-primary, 0.5);
$vab-color-primary-light-6: rgba($base-color-primary, 0.4);
$vab-color-primary-light-7: rgba($base-color-primary, 0.3);
$vab-color-primary-light-8: rgba($base-color-primary, 0.2);
$vab-color-primary-light-9: rgba($base-color-primary, 0.1);

$vab-color-success: $base-color-success;
$vab-color-success-light: rgba($base-color-success, 0.2);
$vab-color-success-lighter: rgba($base-color-success, 0.1);
$vab-color-success-light-1: rgba($base-color-success, 0.9);
$vab-color-success-light-2: rgba($base-color-success, 0.8);
$vab-color-success-light-3: rgba($base-color-success, 0.7);
$vab-color-success-light-4: rgba($base-color-success, 0.6);
$vab-color-success-light-5: rgba($base-color-success, 0.5);
$vab-color-success-light-6: rgba($base-color-success, 0.4);
$vab-color-success-light-7: rgba($base-color-success, 0.3);
$vab-color-success-light-8: rgba($base-color-success, 0.2);
$vab-color-success-light-9: rgba($base-color-success, 0.1);

$vab-color-warning: $base-color-warning;
$vab-color-warning-light: rgba($base-color-warning, 0.2);
$vab-color-warning-lighter: rgba($base-color-warning, 0.1);
$vab-color-warning-light-1: rgba($base-color-warning, 0.9);
$vab-color-warning-light-2: rgba($base-color-warning, 0.8);
$vab-color-warning-light-3: rgba($base-color-warning, 0.7);
$vab-color-warning-light-4: rgba($base-color-warning, 0.6);
$vab-color-warning-light-5: rgba($base-color-warning, 0.5);
$vab-color-warning-light-6: rgba($base-color-warning, 0.4);
$vab-color-warning-light-7: rgba($base-color-warning, 0.3);
$vab-color-warning-light-8: rgba($base-color-warning, 0.2);
$vab-color-warning-light-9: rgba($base-color-warning, 0.1);

$vab-color-danger: $base-color-danger;
$vab-color-danger-light: rgba($base-color-danger, 0.2);
$vab-color-danger-lighter: rgba($base-color-danger, 0.1);
$vab-color-danger-light-1: rgba($base-color-danger, 0.9);
$vab-color-danger-light-2: rgba($base-color-danger, 0.8);
$vab-color-danger-light-3: rgba($base-color-danger, 0.7);
$vab-color-danger-light-4: rgba($base-color-danger, 0.6);
$vab-color-danger-light-5: rgba($base-color-danger, 0.5);
$vab-color-danger-light-6: rgba($base-color-danger, 0.4);
$vab-color-danger-light-7: rgba($base-color-danger, 0.3);
$vab-color-danger-light-8: rgba($base-color-danger, 0.2);
$vab-color-danger-light-9: rgba($base-color-danger, 0.1);

$vab-color-error: $base-color-error;
$vab-color-error-light: rgba($base-color-error, 0.2);
$vab-color-error-lighter: rgba($base-color-error, 0.1);
$vab-color-error-light-1: rgba($base-color-error, 0.9);
$vab-color-error-light-2: rgba($base-color-error, 0.8);
$vab-color-error-light-3: rgba($base-color-error, 0.7);
$vab-color-error-light-4: rgba($base-color-error, 0.6);
$vab-color-error-light-5: rgba($base-color-error, 0.5);
$vab-color-error-light-6: rgba($base-color-error, 0.4);
$vab-color-error-light-7: rgba($base-color-error, 0.3);
$vab-color-error-light-8: rgba($base-color-error, 0.2);
$vab-color-error-light-9: rgba($base-color-error, 0.1);

$vab-color-info: $base-color-text-secondary;
$vab-color-info-light: rgba($base-color-text-secondary, 0.2);
$vab-color-info-lighter: rgba($base-color-text-secondary, 0.1);