mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 07:28:24 +08:00
Merge pull request #121 from Tencent/fix/color
feat(color): remove extra dependencies
This commit is contained in:
PY
GitHub
commit
03970dcbc9
12
.github/workflows/pr-spelling.template.yml
vendored
Normal file
12
.github/workflows/pr-spelling.template.yml
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# force copy from tencent/tdesign
|
||||
name: pr-spell-check
|
||||
on: [pull_request]
|
||||
|
||||
jobs:
|
||||
run:
|
||||
name: Spell Check with Typos
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Check spelling
|
||||
uses: crate-ci/typos@master
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
"axios": "^0.26.0",
|
||||
"dayjs": "^1.10.6",
|
||||
"echarts": "~5.1.2",
|
||||
"hex-to-hsl": "^1.0.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.11",
|
||||
"qrcode.vue": "^3.2.2",
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
"tdesign-vue-next": "~0.11.2",
|
||||
"tvision-color": "^1.3.1",
|
||||
"vue": "^3.2.31",
|
||||
"vue-color-kit": "^1.0.5",
|
||||
"vue-router": "^4.0.11",
|
||||
"vue-clipboard3": "^1.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import hexToHsl from 'hex-to-hsl';
|
||||
/* eslint-disable indent */
|
||||
import { Color } from 'tvision-color';
|
||||
|
||||
export type TColorToken = Record<string, string>;
|
||||
export type TColorSeries = Record<string, TColorToken>;
|
||||
|
||||
|
|
@ -24,59 +25,6 @@ export const defaultDarkColor = [
|
|||
'#ab87d5',
|
||||
];
|
||||
|
||||
export const BACKGROUND_TOKEN: TColorSeries = {
|
||||
BLUE_GREY: {
|
||||
'@gray-color-1': '#F1F2F5',
|
||||
'@gray-color-2': '#EBEDF1',
|
||||
'@gray-color-3': '#E3E6EB',
|
||||
'@gray-color-4': '#D6DBE3',
|
||||
'@gray-color-5': '#BCC4D0',
|
||||
'@gray-color-6': '#97A3B7',
|
||||
'@gray-color-7': '#7787A2',
|
||||
'@gray-color-8': '#5F7292',
|
||||
'@gray-color-9': '#4B5B76',
|
||||
'@gray-color-10': '#3C485C',
|
||||
'@gray-color-11': '#2C3645',
|
||||
'@gray-color-12': '#232A35',
|
||||
'@gray-color-13': '#1C222B',
|
||||
'@gray-color-14': '#13161B',
|
||||
},
|
||||
NEUTRAL_GREY: {
|
||||
'@gray-color-1': '#F3F3F3',
|
||||
'@gray-color-2': '#EEEEEE',
|
||||
'@gray-color-3': '#E7E7E7',
|
||||
'@gray-color-4': '#DCDCDC',
|
||||
'@gray-color-5': '#C5C5C5',
|
||||
'@gray-color-6': '#A6A6A6',
|
||||
'@gray-color-7': '#8B8B8B',
|
||||
'@gray-color-8': '#777777',
|
||||
'@gray-color-9': '#5E5E5E',
|
||||
'@gray-color-10': '#4B4B4B',
|
||||
'@gray-color-11': '#383838',
|
||||
'@gray-color-12': '#2C2C2C',
|
||||
'@gray-color-13': '#242424',
|
||||
'@gray-color-14': '#181818',
|
||||
},
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const NEUTRAL_GREY_TOKEN: TColorToken = {
|
||||
'@gray-color-1': '#F3F3F3',
|
||||
'@gray-color-2': '#EEEEEE',
|
||||
'@gray-color-3': '#E7E7E7',
|
||||
'@gray-color-4': '#DCDCDC',
|
||||
'@gray-color-5': '#C5C5C5',
|
||||
'@gray-color-6': '#A6A6A6',
|
||||
'@gray-color-7': '#8B8B8B',
|
||||
'@gray-color-8': '#777777',
|
||||
'@gray-color-9': '#5E5E5E',
|
||||
'@gray-color-10': '#4B4B4B',
|
||||
'@gray-color-11': '#383838',
|
||||
'@gray-color-12': '#2C2C2C',
|
||||
'@gray-color-13': '#242424',
|
||||
'@gray-color-14': '#181818',
|
||||
};
|
||||
|
||||
export const COLOR_TOKEN: TColorSeries = {
|
||||
DEFAULT: {
|
||||
'@brand-color': '#0052D9',
|
||||
|
|
@ -162,7 +110,7 @@ export const COLOR_TOKEN: TColorSeries = {
|
|||
'@brand-color-1': '#eee6f7',
|
||||
'@brand-color-2': '#ddceee',
|
||||
'@brand-color-3': '#ccb6e6',
|
||||
'@brand-color-4': '#bb9ede',
|
||||
'@brand-color-4': '#bb9edc',
|
||||
'@brand-color-5': '#ab87d5',
|
||||
'@brand-color-6': '#9a6fce',
|
||||
'@brand-color-7': '#9a6fce',
|
||||
|
|
@ -205,11 +153,6 @@ function toUnderline(name: string): string {
|
|||
return name.replace(/([A-Z])/g, '_$1').toUpperCase();
|
||||
}
|
||||
|
||||
export function getGreyColor(type: string): TColorToken {
|
||||
const name = toUnderline(type);
|
||||
return BACKGROUND_TOKEN[name] || {};
|
||||
}
|
||||
|
||||
export function getBrandColor(type: string, colorList: TColorSeries): TColorToken {
|
||||
const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type);
|
||||
return colorList[name || 'DEFAULT'];
|
||||
|
|
@ -221,19 +164,6 @@ export function getColorList(colorArray: Array<TColorToken>): Array<string> {
|
|||
|
||||
return pureColorList;
|
||||
}
|
||||
// inspired by https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex
|
||||
export function hslToHex(h: number, s: number, l: number) {
|
||||
l /= 100;
|
||||
const a = (s * Math.min(l, 1 - l)) / 100;
|
||||
const f = (n: number) => {
|
||||
const k = (n + h / 30) % 12;
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
return Math.round(255 * color)
|
||||
.toString(16)
|
||||
.padStart(2, '0');
|
||||
};
|
||||
return `#${f(0)}${f(8)}${f(4)}`;
|
||||
}
|
||||
|
||||
export function generateColorMap(theme: string, colorPalette: Array<string>, mode: 'light' | 'dark') {
|
||||
const isDarkMode = mode === 'dark';
|
||||
|
|
@ -242,8 +172,8 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
|
|||
if (isDarkMode) {
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
colorPalette.reverse().map((color) => {
|
||||
const [h, s, l] = hexToHsl(color);
|
||||
return hslToHex(h, s - 4, l);
|
||||
const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
|
||||
return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
|
||||
});
|
||||
brandColorIdx = 5;
|
||||
colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</t-radio-group>
|
||||
<div class="setting-group-title">主题色</div>
|
||||
<t-radio-group v-model="formData.brandTheme" default-vaule="default">
|
||||
<t-radio-group v-model="formData.brandTheme">
|
||||
<div
|
||||
v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
|
||||
:key="index"
|
||||
|
|
@ -43,7 +43,12 @@
|
|||
@visible-change="onPopupVisibleChange"
|
||||
>
|
||||
<template #content>
|
||||
<color-picker :theme="mode" @changeColor="changeColor" />
|
||||
<t-color-picker-panel
|
||||
:on-change="changeColor"
|
||||
:color-modes="['monochrome']"
|
||||
format="HEX"
|
||||
:swatch-colors="[]"
|
||||
/>
|
||||
</template>
|
||||
<t-radio-button
|
||||
:value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
|
||||
|
|
@ -56,7 +61,7 @@
|
|||
</t-radio-group>
|
||||
|
||||
<div class="setting-group-title">导航布局</div>
|
||||
<t-radio-group v-model="formData.layout" default-vaule="top">
|
||||
<t-radio-group v-model="formData.layout">
|
||||
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
|
||||
<t-radio-button :key="index" :value="item">
|
||||
<Thumbnail :src="getThumbnailUrl(item)" />
|
||||
|
|
@ -94,17 +99,15 @@
|
|||
</t-drawer>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, watchEffect } from 'vue';
|
||||
import { ColorPicker } from 'vue-color-kit';
|
||||
import { ref, computed, onMounted, watchEffect } from 'vue';
|
||||
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
|
||||
import { Color } from 'tvision-color';
|
||||
import useClipboard from 'vue-clipboard3';
|
||||
|
||||
import { useSettingStore } from '@/store';
|
||||
import Thumbnail from '@/components/thumbnail/index.vue';
|
||||
import ColorContainer from '@/components/color/index.vue';
|
||||
|
||||
import 'vue-color-kit/dist/vue-color-kit.css';
|
||||
|
||||
import STYLE_CONFIG from '@/config/style';
|
||||
import { insertThemeStylesheet, generateColorMap } from '@/config/color';
|
||||
|
||||
|
|
@ -123,7 +126,6 @@ const MODE_OPTIONS = [
|
|||
];
|
||||
|
||||
const formData = ref({ ...STYLE_CONFIG });
|
||||
const colors = ref();
|
||||
const isColoPickerDisplay = ref(false);
|
||||
|
||||
const showSettingPanel = computed({
|
||||
|
|
@ -137,35 +139,7 @@ const showSettingPanel = computed({
|
|||
},
|
||||
});
|
||||
|
||||
const mode = computed(() => {
|
||||
return settingStore.displayMode;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => colors.value,
|
||||
(newColor) => {
|
||||
const { hex } = newColor;
|
||||
|
||||
// hex 主题色
|
||||
const newPalette = Color.getPaletteByGradation({
|
||||
colors: [hex],
|
||||
step: 10,
|
||||
})[0];
|
||||
const { mode } = settingStore;
|
||||
const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
|
||||
|
||||
insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
|
||||
|
||||
settingStore.updateConfig({
|
||||
[hex]: colorMap,
|
||||
});
|
||||
settingStore.changeBrandTheme(hex);
|
||||
},
|
||||
);
|
||||
|
||||
const changeColor = (val) => {
|
||||
const { hex } = val;
|
||||
// hex 主题色
|
||||
const changeColor = (hex: string) => {
|
||||
const newPalette = Color.getPaletteByGradation({
|
||||
colors: [hex],
|
||||
step: 10,
|
||||
|
|
@ -173,13 +147,9 @@ const changeColor = (val) => {
|
|||
const { mode } = settingStore;
|
||||
const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
|
||||
|
||||
settingStore.updateConfig({
|
||||
[hex]: colorMap,
|
||||
});
|
||||
|
||||
settingStore.addColor({ [hex]: colorMap });
|
||||
settingStore.updateConfig({ ...formData.value, brandTheme: hex });
|
||||
insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
|
||||
|
||||
settingStore.changeBrandTheme(hex);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -233,9 +203,7 @@ watchEffect(() => {
|
|||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables';
|
||||
.hu-color-picker {
|
||||
width: 220px !important;
|
||||
}
|
||||
|
||||
.tdesign-setting {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -657,11 +657,11 @@ export function getLineChartDataSet({
|
|||
*
|
||||
* @export
|
||||
* @param {string} productName
|
||||
* @param {number} devideNum
|
||||
* @param {number} divideNum
|
||||
*/
|
||||
export function getSelftItemList(productName: string, devideNum: number): string[] {
|
||||
export function getSelftItemList(productName: string, divideNum: number): string[] {
|
||||
const productArray: string[] = [productName];
|
||||
for (let i = 0; i < devideNum; i++) {
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
productArray.push(getRandomArray(100 * i).toString());
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
<template>
|
||||
<div class="operater-block operater-gap">
|
||||
<div class="operater-content">
|
||||
<div class="operater-title">
|
||||
<t-icon name="cart" class="operater-title-icon" />
|
||||
<div class="operator-block operator-gap">
|
||||
<div class="operator-content">
|
||||
<div class="operator-title">
|
||||
<t-icon name="cart" class="operator-title-icon" />
|
||||
<h1>{{ data.name }}</h1>
|
||||
<div class="operater-title-subtitle">
|
||||
<div class="operator-title-subtitle">
|
||||
{{ data.subtitle }}
|
||||
</div>
|
||||
<div class="operater-title-tags">
|
||||
<t-tag class="operater-title-tag" theme="success" size="small">
|
||||
<div class="operator-title-tags">
|
||||
<t-tag class="operator-title-tag" theme="success" size="small">
|
||||
{{ data.size }}
|
||||
</t-tag>
|
||||
<t-tag class="operater-title-tag" size="small">
|
||||
<t-tag class="operator-title-tag" size="small">
|
||||
{{ data.cpu }}
|
||||
</t-tag>
|
||||
<t-tag class="operater-title-tag" size="small">
|
||||
<t-tag class="operator-title-tag" size="small">
|
||||
{{ data.memory }}
|
||||
</t-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<span class="operater-item-info">{{ data.info }}</span>
|
||||
<t-icon class="operater-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
|
||||
<div class="operator-item">
|
||||
<span class="operator-item-info">{{ data.info }}</span>
|
||||
<t-icon class="operator-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="operater-footer">
|
||||
<span class="operater-footer-percentage">{{ data.use }} / {{ data.stock }}（台）</span>
|
||||
<div class="operator-footer">
|
||||
<span class="operator-footer-percentage">{{ data.use }} / {{ data.stock }}（台）</span>
|
||||
<t-progress
|
||||
class="operater-progress"
|
||||
class="operator-progress"
|
||||
theme="line"
|
||||
:percentage="(data.use / data.stock) * 100"
|
||||
:label="false"
|
||||
|
|
@ -55,21 +55,21 @@ export default defineComponent({
|
|||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
.operater-gap {
|
||||
.operator-gap {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.operater-block {
|
||||
.operator-block {
|
||||
position: relative;
|
||||
background-color: @bg-color-container;
|
||||
border: 1px solid @component-border;
|
||||
border-radius: 3px;
|
||||
|
||||
.operater-content {
|
||||
.operator-content {
|
||||
padding: 20px 32px 24px 32px;
|
||||
height: 256px;
|
||||
|
||||
.operater-title-icon {
|
||||
.operator-title-icon {
|
||||
background: @brand-color-1;
|
||||
color: @brand-color;
|
||||
font-size: 56px;
|
||||
|
|
@ -77,7 +77,7 @@ export default defineComponent({
|
|||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.operater-title {
|
||||
.operator-title {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -120,7 +120,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.operater-item {
|
||||
.operator-item {
|
||||
position: relative;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
|
@ -141,7 +141,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.operater-footer {
|
||||
.operator-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.product-block-container {
|
||||
.t-col-xl-4 + .t-col-xl-4 {
|
||||
@media (max-width: @screen-lg-max) {
|
||||
.operater-gap {
|
||||
.operator-gap {
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -53,4 +53,4 @@
|
|||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
|
||||
import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
|
||||
import STYLE_CONFIG from '@/config/style';
|
||||
import { store } from '@/store';
|
||||
|
||||
|
|
@ -50,6 +50,9 @@ export const useSettingStore = defineStore('setting', {
|
|||
changeBrandTheme(brandTheme: string) {
|
||||
document.documentElement.setAttribute('theme-color', brandTheme);
|
||||
},
|
||||
addColor(payload: TColorSeries) {
|
||||
this.colorList = { ...this.colorList, ...payload };
|
||||
},
|
||||
updateConfig(payload: Partial<TState>) {
|
||||
for (const key in payload) {
|
||||
if (payload[key] !== undefined) {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
max-width: 100%;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
z-index: 100;
|
||||
}
|
||||
&-tabs-nav + .@{prefix}-content-layout {
|
||||
padding-top: @spacer-3;
|
||||
|
|
|
|||
|
|
@ -1,163 +0,0 @@
|
|||
:root[theme-mode='dark'] {
|
||||
--td-brand-color-1: #1b2f51;
|
||||
--td-brand-color-2: #173463;
|
||||
--td-brand-color-3: #143975;
|
||||
--td-brand-color-4: #103d88;
|
||||
--td-brand-color-5: #0d429a;
|
||||
--td-brand-color-6: #054bbe;
|
||||
--td-brand-color-7: #2667d4;
|
||||
--td-brand-color-8: #4582e6;
|
||||
--td-brand-color-9: #699ef5;
|
||||
--td-brand-color-10: #96bbf8;
|
||||
|
||||
--td-warning-color-1: #4f2a1d;
|
||||
--td-warning-color-2: #582f21;
|
||||
--td-warning-color-3: #733c23;
|
||||
--td-warning-color-4: #a75d2b;
|
||||
--td-warning-color-5: #cf6e2d;
|
||||
--td-warning-color-6: #dc7633;
|
||||
--td-warning-color-7: #e8935c;
|
||||
--td-warning-color-8: #ecbf91;
|
||||
--td-warning-color-9: #eed7bf;
|
||||
--td-warning-color-10: #f3e9dc;
|
||||
|
||||
--td-error-color-1: #472324;
|
||||
--td-error-color-2: #5e2a2d;
|
||||
--td-error-color-3: #703439;
|
||||
--td-error-color-4: #83383e;
|
||||
--td-error-color-5: #a03f46;
|
||||
--td-error-color-6: #c64751;
|
||||
--td-error-color-7: #de6670;
|
||||
--td-error-color-8: #ec888e;
|
||||
--td-error-color-9: #edb1b6;
|
||||
--td-error-color-10: #eeced0;
|
||||
|
||||
--td-success-color-1: #193a2a;
|
||||
--td-success-color-2: #1a4230;
|
||||
--td-success-color-3: #17533d;
|
||||
--td-success-color-4: #0d7a55;
|
||||
--td-success-color-5: #059465;
|
||||
--td-success-color-6: #43af8a;
|
||||
--td-success-color-7: #46bf96;
|
||||
--td-success-color-8: #80d2b6;
|
||||
--td-success-color-9: #b4e1d3;
|
||||
--td-success-color-10: #deede8;
|
||||
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eeeeee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
|
||||
// 文字 & 图标 颜色
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
|
||||
// 基础颜色
|
||||
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
|
||||
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
|
||||
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
|
||||
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
|
||||
|
||||
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
|
||||
--td-brand-color-hover: var(--td-brand-color-7); // hover态
|
||||
--td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
|
||||
--td-brand-color-active: var(--td-brand-color-9); // 点击态
|
||||
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
|
||||
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
|
||||
|
||||
// 警告色扩展
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
|
||||
// 失败/错误色扩展
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
|
||||
// 成功色扩展
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
|
||||
// 遮罩
|
||||
--td-mask-active: rgba(0, 0, 0, 0.4); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(0, 0, 0, 0.6); // 遮罩-禁用
|
||||
|
||||
// 背景色
|
||||
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
|
||||
--td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
|
||||
--td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
|
||||
--td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
|
||||
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
|
||||
|
||||
--td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
|
||||
--td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--td-bg-color-specialcomponent: transparent;
|
||||
|
||||
// 文本颜色
|
||||
--td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
|
||||
--td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
|
||||
--td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
|
||||
--td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
|
||||
--td-text-color-anti: #fff; // 色彩-文字-反色
|
||||
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
|
||||
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
|
||||
|
||||
// 分割线
|
||||
--td-border-level-1-color: var(--td-gray-color-11);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
// 边框
|
||||
--td-border-level-2-color: var(--td-gray-color-9);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0px 4px 6px rgba(0, 0, 0, 0.06), 0px 1px 10px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.12);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0px 8px 10px rgba(0, 0, 0, 0.12), 0px 3px 14px rgba(0, 0, 0, 0.1), 0px 5px 5px rgba(0, 0, 0, 0.16);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2);
|
||||
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||
|
||||
--td-shadow-inset-top: inset 0px 0.5px 0px #5e5e5e;
|
||||
--td-shadow-inset-right: inset 0.5px 0px 0px #5e5e5e;
|
||||
--td-shadow-inset-bottom: inset 0px -0.5px 0px #5e5e5e;
|
||||
--td-shadow-inset-left: inset -0.5px 0px 0px #5e5e5e;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 0.55);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
26
src/style/theme/default.less
Normal file
26
src/style/theme/default.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
:root,
|
||||
:root[theme-mode='light'] {
|
||||
--td-brand-color-1: #e0ebff;
|
||||
--td-brand-color-2: #c0d8ff;
|
||||
--td-brand-color-3: #a1c4ff;
|
||||
--td-brand-color-4: #81b1ff;
|
||||
--td-brand-color-5: #5f9bff;
|
||||
--td-brand-color-6: #3d87ff;
|
||||
--td-brand-color-7: #176eff;
|
||||
--td-brand-color-8: #0052d9;
|
||||
--td-brand-color-9: #0048cd;
|
||||
--td-brand-color-10: #0035b5;
|
||||
}
|
||||
|
||||
:root[theme-mode='dark'] {
|
||||
--td-brand-color-1: #1b2f51;
|
||||
--td-brand-color-2: #173463;
|
||||
--td-brand-color-3: #143975;
|
||||
--td-brand-color-4: #103d88;
|
||||
--td-brand-color-5: #0d429a;
|
||||
--td-brand-color-6: #054bbe;
|
||||
--td-brand-color-7: #2667d4;
|
||||
--td-brand-color-8: #4582e6;
|
||||
--td-brand-color-9: #699ef5;
|
||||
--td-brand-color-10: #96bbf8;
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
@import './default.less';
|
||||
|
||||
@import './cyan.less';
|
||||
|
||||
@import './green.less';
|
||||
|
||||
@import './light.less';
|
||||
|
||||
@import './orange.less';
|
||||
|
||||
@import './pink.less';
|
||||
|
|
@ -13,5 +13,3 @@
|
|||
@import './red.less';
|
||||
|
||||
@import './yellow.less';
|
||||
|
||||
@import './dark.less';
|
||||
|
|
|
|||
|
|
@ -1,169 +0,0 @@
|
|||
:root,
|
||||
:root[theme-mode='light'] {
|
||||
--td-brand-color-1: #e0ebff;
|
||||
--td-brand-color-2: #c0d8ff;
|
||||
--td-brand-color-3: #a1c4ff;
|
||||
--td-brand-color-4: #81b1ff;
|
||||
--td-brand-color-5: #5f9bff;
|
||||
--td-brand-color-6: #3d87ff;
|
||||
--td-brand-color-7: #176eff;
|
||||
--td-brand-color-8: #0052d9;
|
||||
--td-brand-color-9: #0048cd;
|
||||
--td-brand-color-10: #0035b5;
|
||||
|
||||
--td-warning-color-1: #fef3e6;
|
||||
--td-warning-color-2: #f9e0c7;
|
||||
--td-warning-color-3: #f7c797;
|
||||
--td-warning-color-4: #f2995f;
|
||||
--td-warning-color-5: #ed7b2f;
|
||||
--td-warning-color-6: #d35a21;
|
||||
--td-warning-color-7: #ba431b;
|
||||
--td-warning-color-8: #9e3610;
|
||||
--td-warning-color-9: #842b0b;
|
||||
--td-warning-color-10: #5a1907;
|
||||
|
||||
--td-error-color-1: #fdecee;
|
||||
--td-error-color-2: #f9d7d9;
|
||||
--td-error-color-3: #f8b9be;
|
||||
--td-error-color-4: #f78d94;
|
||||
--td-error-color-5: #f36d78;
|
||||
--td-error-color-6: #e34d59;
|
||||
--td-error-color-7: #c9353f;
|
||||
--td-error-color-8: #b11f26;
|
||||
--td-error-color-9: #951114;
|
||||
--td-error-color-10: #680506;
|
||||
|
||||
--td-success-color-1: #e8f8f2;
|
||||
--td-success-color-2: #bcebdc;
|
||||
--td-success-color-3: #85dbbe;
|
||||
--td-success-color-4: #48c79c;
|
||||
--td-success-color-5: #00a870;
|
||||
--td-success-color-6: #078d5c;
|
||||
--td-success-color-7: #067945;
|
||||
--td-success-color-8: #056334;
|
||||
--td-success-color-9: #044f2a;
|
||||
--td-success-color-10: #033017;
|
||||
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eeeeee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
|
||||
// 文字 & 图标 颜色
|
||||
--td-font-white-1: rgba(255, 255, 255, 1);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
|
||||
// 基础颜色
|
||||
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
|
||||
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
|
||||
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
|
||||
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
|
||||
|
||||
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
|
||||
--td-brand-color-hover: var(--td-brand-color-7); // hover态
|
||||
--td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
|
||||
--td-brand-color-active: var(--td-brand-color-9); // 点击态
|
||||
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
|
||||
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
|
||||
|
||||
// 警告色扩展
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
|
||||
// 失败/错误色扩展
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
|
||||
// 成功色扩展
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
|
||||
// 遮罩
|
||||
--td-mask-active: rgba(0, 0, 0, 0.6); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(255, 255, 255, 0.6); // 遮罩-禁用
|
||||
|
||||
// 背景色
|
||||
--td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
|
||||
--td-bg-color-container: #fff; // 色彩 - 容器
|
||||
--td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
|
||||
--td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
|
||||
--td-bg-color-container-select: #fff; // 色彩 - 容器 - select
|
||||
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
|
||||
|
||||
--td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
|
||||
--td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
|
||||
--td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
|
||||
// 文本颜色
|
||||
--td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
|
||||
--td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
|
||||
--td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明
|
||||
--td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
|
||||
--td-text-color-anti: #fff; // 色彩-文字-反色
|
||||
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
|
||||
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
|
||||
|
||||
// 分割线
|
||||
--td-border-level-1-color: var(--td-gray-color-3);
|
||||
--td-component-stroke: var(--td-gray-color-3);
|
||||
// 边框
|
||||
--td-border-level-2-color: var(--td-gray-color-4);
|
||||
--td-component-border: var(--td-gray-color-4);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0px 1px 10px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
|
||||
0px 5px 5px -3px rgba(0, 0, 0, 0.1);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04),
|
||||
0px 8px 10px -5px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||
--td-shadow-inset-top: inset 0px 0.5px 0px #dcdcdc;
|
||||
--td-shadow-inset-right: inset 0.5px 0px 0px #dcdcdc;
|
||||
--td-shadow-inset-bottom: inset 0px -0.5px 0px #dcdcdc;
|
||||
--td-shadow-inset-left: inset -0.5px 0px 0px #dcdcdc;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 0.08);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
--td-brand-color-1: #eee6f7;
|
||||
--td-brand-color-2: #ddceee;
|
||||
--td-brand-color-3: #ccb6e6;
|
||||
--td-brand-color-4: #bb9ede;
|
||||
--td-brand-color-4: #bb9edc;
|
||||
--td-brand-color-5: #ab87d5;
|
||||
--td-brand-color-6: #9a6fce;
|
||||
--td-brand-color-7: #9a6fce;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user