2024-07-29 22:11:22 +08:00
|
|
|
import { reactive, watch } from 'vue';
|
2024-07-28 17:01:19 +08:00
|
|
|
|
|
|
|
import { preferences } from '@vben/preferences';
|
|
|
|
|
|
|
|
export function useDesignTokens() {
|
|
|
|
const rootStyles = getComputedStyle(document.documentElement);
|
|
|
|
|
2024-07-29 22:11:22 +08:00
|
|
|
const antDesignTokens = reactive({
|
|
|
|
borderRadius: '' as any,
|
|
|
|
colorBgBase: '',
|
|
|
|
colorBgContainer: '',
|
|
|
|
colorBgElevated: '',
|
|
|
|
colorBgLayout: '',
|
|
|
|
colorBgMask: '',
|
|
|
|
colorBorder: '',
|
|
|
|
colorError: '',
|
|
|
|
colorInfo: '',
|
|
|
|
colorPrimary: '',
|
|
|
|
colorSuccess: '',
|
|
|
|
colorTextBase: '',
|
|
|
|
colorWarning: '',
|
|
|
|
});
|
2024-07-28 17:01:19 +08:00
|
|
|
|
|
|
|
const getCssVariableValue = (variable: string, isColor: boolean = true) => {
|
|
|
|
const value = rootStyles.getPropertyValue(variable);
|
|
|
|
return isColor ? `hsl(${value})` : value;
|
|
|
|
};
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => preferences.theme,
|
|
|
|
() => {
|
2024-07-29 22:11:22 +08:00
|
|
|
antDesignTokens.colorPrimary = getCssVariableValue('--primary');
|
|
|
|
antDesignTokens.colorError = getCssVariableValue('--destructive');
|
|
|
|
antDesignTokens.colorWarning = getCssVariableValue('--warning');
|
|
|
|
antDesignTokens.colorSuccess = getCssVariableValue('--success');
|
|
|
|
antDesignTokens.colorBgBase = getCssVariableValue('--background');
|
|
|
|
antDesignTokens.colorBgLayout = getCssVariableValue('--background-deep');
|
|
|
|
antDesignTokens.colorBgMask = getCssVariableValue('--overlay');
|
|
|
|
antDesignTokens.colorBorder = getCssVariableValue('--border');
|
|
|
|
antDesignTokens.colorTextBase = getCssVariableValue('--foreground');
|
|
|
|
antDesignTokens.colorBgElevated = getCssVariableValue('--popover');
|
|
|
|
antDesignTokens.colorBgContainer = getCssVariableValue('--card');
|
|
|
|
antDesignTokens.borderRadius = getCssVariableValue('--radius', false);
|
2024-07-28 17:01:19 +08:00
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
);
|
|
|
|
|
|
|
|
return {
|
|
|
|
antDesignTokens,
|
|
|
|
};
|
|
|
|
}
|