refactor(projects): combine theme tokens
and theme settings
. close #379
This commit is contained in:
parent
958d0baf3f
commit
1d1b148c8f
@ -9,7 +9,7 @@ defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-container text-base_text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
|
||||
<div class="bg-container text-base-text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -14,7 +14,7 @@ defineProps<Props>();
|
||||
<template>
|
||||
<div class="w-full flex-y-center justify-between">
|
||||
<div>
|
||||
<span class="pr-8px text-base_text">{{ label }}</span>
|
||||
<span class="pr-8px text-base-text">{{ label }}</span>
|
||||
<slot name="suffix"></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
|
@ -125,7 +125,11 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
|
||||
/** Setup theme vars to html */
|
||||
function setupThemeVarsToHtml() {
|
||||
const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
|
||||
const { themeTokens, darkThemeTokens } = createThemeToken(
|
||||
themeColors.value,
|
||||
settings.value.tokens,
|
||||
settings.value.recommendColor
|
||||
);
|
||||
addThemeVarsToHtml(themeTokens, darkThemeTokens);
|
||||
}
|
||||
|
||||
|
@ -30,39 +30,40 @@ export function initThemeSettings() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Create theme token
|
||||
* create theme token css vars value by theme settings
|
||||
*
|
||||
* @param colors Theme colors
|
||||
* @param tokens Theme setting tokens
|
||||
* @param [recommended=false] Use recommended color. Default is `false`
|
||||
*/
|
||||
export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
|
||||
export function createThemeToken(
|
||||
colors: App.Theme.ThemeColor,
|
||||
tokens?: App.Theme.ThemeSetting['tokens'],
|
||||
recommended = false
|
||||
) {
|
||||
const paletteColors = createThemePaletteColors(colors, recommended);
|
||||
|
||||
const themeTokens: App.Theme.ThemeToken = {
|
||||
const { light, dark } = tokens || themeSettings.tokens;
|
||||
|
||||
const themeTokens: App.Theme.ThemeTokenCSSVars = {
|
||||
colors: {
|
||||
...paletteColors,
|
||||
nprogress: paletteColors.primary,
|
||||
container: 'rgb(255, 255, 255)',
|
||||
layout: 'rgb(247, 250, 252)',
|
||||
inverted: 'rgb(0, 20, 40)',
|
||||
base_text: 'rgb(31, 31, 31)'
|
||||
...light.colors
|
||||
},
|
||||
boxShadow: {
|
||||
header: '0 1px 2px rgb(0, 21, 41, 0.08)',
|
||||
sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
|
||||
tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
|
||||
...light.boxShadow
|
||||
}
|
||||
};
|
||||
|
||||
const darkThemeTokens: App.Theme.ThemeToken = {
|
||||
const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
|
||||
colors: {
|
||||
...themeTokens.colors,
|
||||
container: 'rgb(28, 28, 28)',
|
||||
layout: 'rgb(18, 18, 18)',
|
||||
base_text: 'rgb(224, 224, 224)'
|
||||
...dark?.colors
|
||||
},
|
||||
boxShadow: {
|
||||
...themeTokens.boxShadow
|
||||
...themeTokens.boxShadow,
|
||||
...dark?.boxShadow
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -46,6 +46,28 @@ export const themeSettings: App.Theme.ThemeSetting = {
|
||||
fixed: false,
|
||||
height: 48,
|
||||
right: true
|
||||
},
|
||||
tokens: {
|
||||
light: {
|
||||
colors: {
|
||||
container: 'rgb(255, 255, 255)',
|
||||
layout: 'rgb(247, 250, 252)',
|
||||
inverted: 'rgb(0, 20, 40)',
|
||||
'base-text': 'rgb(31, 31, 31)'
|
||||
},
|
||||
boxShadow: {
|
||||
header: '0 1px 2px rgb(0, 21, 41, 0.08)',
|
||||
sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
|
||||
tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
colors: {
|
||||
container: 'rgb(28, 28, 28)',
|
||||
layout: 'rgb(18, 18, 18)',
|
||||
'base-text': 'rgb(224, 224, 224)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -18,14 +18,14 @@ function createColorPaletteVars() {
|
||||
const colorPaletteVars = createColorPaletteVars();
|
||||
|
||||
/** Theme vars */
|
||||
export const themeVars: App.Theme.ThemeToken = {
|
||||
export const themeVars: App.Theme.ThemeTokenCSSVars = {
|
||||
colors: {
|
||||
...colorPaletteVars,
|
||||
nprogress: 'rgb(var(--nprogress-color))',
|
||||
container: 'rgb(var(--container-bg-color))',
|
||||
layout: 'rgb(var(--layout-bg-color))',
|
||||
inverted: 'rgb(var(--inverted-bg-color))',
|
||||
base_text: 'rgb(var(--base-text-color))'
|
||||
'base-text': 'rgb(var(--base-text-color))'
|
||||
},
|
||||
boxShadow: {
|
||||
header: 'var(--header-box-shadow)',
|
||||
|
44
src/typings/app.d.ts
vendored
44
src/typings/app.d.ts
vendored
@ -4,16 +4,6 @@ declare namespace App {
|
||||
namespace Theme {
|
||||
type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
|
||||
|
||||
/** Theme token */
|
||||
type ThemeToken = {
|
||||
colors: ThemeTokenColor;
|
||||
boxShadow: {
|
||||
header: string;
|
||||
sider: string;
|
||||
tab: string;
|
||||
};
|
||||
};
|
||||
|
||||
/** Theme setting */
|
||||
interface ThemeSetting {
|
||||
/** Theme scheme */
|
||||
@ -97,6 +87,13 @@ declare namespace App {
|
||||
/** Whether float the footer to the right when the layout is 'horizontal-mix' */
|
||||
right: boolean;
|
||||
};
|
||||
/** define some theme settings tokens, will transform to css variables */
|
||||
tokens: {
|
||||
light: ThemeSettingToken;
|
||||
dark?: {
|
||||
[K in keyof ThemeSettingToken]?: Partial<ThemeSettingToken[K]>;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
interface OtherColor {
|
||||
@ -118,14 +115,33 @@ declare namespace App {
|
||||
|
||||
type BaseToken = Record<string, Record<string, string>>;
|
||||
|
||||
interface ThemeTokenColor extends ThemePaletteColor {
|
||||
nprogress: string;
|
||||
interface ThemeSettingTokenColor {
|
||||
/** the progress bar color, if not set, will use the primary color */
|
||||
nprogress?: string;
|
||||
container: string;
|
||||
layout: string;
|
||||
inverted: string;
|
||||
base_text: string;
|
||||
[key: string]: string;
|
||||
'base-text': string;
|
||||
}
|
||||
|
||||
interface ThemeSettingTokenBoxShadow {
|
||||
header: string;
|
||||
sider: string;
|
||||
tab: string;
|
||||
}
|
||||
|
||||
interface ThemeSettingToken {
|
||||
colors: ThemeSettingTokenColor;
|
||||
boxShadow: ThemeSettingTokenBoxShadow;
|
||||
}
|
||||
|
||||
type ThemeTokenColor = ThemePaletteColor & ThemeSettingTokenColor;
|
||||
|
||||
/** Theme token CSS variables */
|
||||
type ThemeTokenCSSVars = {
|
||||
colors: ThemeTokenColor & { [key: string]: string };
|
||||
boxShadow: ThemeSettingTokenBoxShadow & { [key: string]: string };
|
||||
};
|
||||
}
|
||||
|
||||
/** Global namespace */
|
||||
|
Loading…
Reference in New Issue
Block a user