@use './config.scss';
|
|
$colors: (
|
primary: #409eff,
|
success: #67c23a,
|
warning: #e6a23c,
|
danger: #f56c6c,
|
info: #909399,
|
);
|
|
:root {
|
// 生产主题色和不同亮度的颜色
|
// eg: --alloy-color-primary: #409eff; --alloy-color-primary-light-3: #b3d8ff;
|
@each $val, $color in $colors {
|
--#{config.$namespace}-color-#{$val}: #{$color};
|
|
@for $i from 1 through 4 {
|
// 混合百分之30 50 70 90白色
|
--#{config.$namespace}-color-#{$val}-light-#{2 * $i + 1}: #{mix(#fff, $color, (2 * $i + 1) * 10 * 1%)};
|
}
|
// 混合百分之80白色
|
--#{config.$namespace}-color-#{$val}-light-8: #{mix(#fff, $color, 80 * 1%)};
|
|
// 混合百分之20黑色
|
--#{config.$namespace}-color-#{$val}-dark-2: #{mix(#000, $color, 20 * 1%)};
|
}
|
|
// 中性色
|
--#{config.$namespace}-color-white: #ffffff;
|
--#{config.$namespace}-color-black: #000000;
|
--#{config.$namespace}-bg-color: #ffffff;
|
--#{config.$namespace}-bg-color-page: #f2f3f5;
|
--#{config.$namespace}-bg-color-overlay: #ffffff;
|
--#{config.$namespace}-text-color-primary: #303133;
|
--#{config.$namespace}-text-color-regular: #606266;
|
--#{config.$namespace}-text-color-secondary: #909399;
|
--#{config.$namespace}-text-color-placeholder: #a8abb2;
|
--#{config.$namespace}-text-color-disabled: #c0c4cc;
|
--#{config.$namespace}-border-color: #dcdfe6;
|
--#{config.$namespace}-border-color-light: #e4e7ed;
|
--#{config.$namespace}-border-color-lighter: #ebeef5;
|
--#{config.$namespace}-border-color-extra-light: #f2f6fc;
|
--#{config.$namespace}-border-color-dark: #d4d7de;
|
--#{config.$namespace}-border-color-darker: #cdd0d6;
|
--#{config.$namespace}-fill-color: #f0f2f5;
|
--#{config.$namespace}-fill-color-light: #f5f7fa;
|
--#{config.$namespace}-fill-color-lighter: #fafafa;
|
--#{config.$namespace}-fill-color-extra-light: #fafcff;
|
--#{config.$namespace}-fill-color-dark: #ebedf0;
|
--#{config.$namespace}-fill-color-darker: #e6e8eb;
|
--#{config.$namespace}-fill-color-blank: #ffffff;
|
|
// 和 border 相关变量
|
--#{config.$namespace}-border-width: 1px;
|
--#{config.$namespace}-border-style: solid;
|
--#{config.$namespace}-border-color-hover: var(--#{config.$namespace}-text-color-disabled);
|
--#{config.$namespace}-border: var(--#{config.$namespace}-border-width) var(--#{config.$namespace}-border-style) var(--#{config.$namespace}-border-color);
|
--#{config.$namespace}-border-radius-base: 4px;
|
--#{config.$namespace}-border-radius-small: 2px;
|
--#{config.$namespace}-border-radius-round: 20px;
|
--#{config.$namespace}-border-radius-circle: 100%;
|
|
// 和 font 相关的变量
|
--#{config.$namespace}-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
--#{config.$namespace}-font-weight-primary: 500;
|
--#{config.$namespace}-font-line-height-primary: 24px;
|
--#{config.$namespace}-font-size-extra-small: 12px;
|
--#{config.$namespace}-font-size-small: 13px;
|
--#{config.$namespace}-font-size-base: 14px;
|
--#{config.$namespace}-font-size-medium: 16px;
|
--#{config.$namespace}-font-size-large: 18px;
|
--#{config.$namespace}-font-size-extra-large: 20px;
|
// 和 disabled 相关的变量
|
--#{config.$namespace}-disabled-bg-color: var(--#{config.$namespace}-fill-color-light);
|
--#{config.$namespace}-disabled-text-color: var(--#{config.$namespace}-text-color-placeholder);
|
--#{config.$namespace}-disabled-border-color: var(--#{config.$namespace}-border-color-light);
|
|
// 和过渡相关的变量
|
--#{config.$namespace}-transition-duration: 0.3s;
|
--#{config.$namespace}-transition-duration-fast: 0.2s;
|
}
|
