by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Regular monitoring page update [deploy]

Browse Source
This commit is contained in:
vben
2024-07-29 22:11:22 +08:00
parent 66fd052709
commit cd10eb9471
37 changed files with 491 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/effects/hooks/src/use-design-tokens.ts
View File

@@ -1,23 +1,25 @@
import { computed, ref, watch } from 'vue';
import { reactive, watch } from 'vue';
import { preferences } from '@vben/preferences';
export function useDesignTokens() {
const rootStyles = getComputedStyle(document.documentElement);
const colorPrimary = ref('');
const colorError = ref('');
const colorSuccess = ref('');
const colorWarning = ref('');
const colorInfo = ref('');
const colorBgBase = ref('');
const colorTextBase = ref('');
const colorBgContainer = ref('');
const colorBgElevated = ref('');
const colorBgLayout = ref('');
const colorBgMask = ref('');
const colorBorder = ref('');
const borderRadius = ref<any>('');
const antDesignTokens = reactive({
borderRadius: '' as any,
colorBgBase: '',
colorBgContainer: '',
colorBgElevated: '',
colorBgLayout: '',
colorBgMask: '',
colorBorder: '',
colorError: '',
colorInfo: '',
colorPrimary: '',
colorSuccess: '',
colorTextBase: '',
colorWarning: '',
});
const getCssVariableValue = (variable: string, isColor: boolean = true) => {
const value = rootStyles.getPropertyValue(variable);
@@ -27,52 +29,23 @@ export function useDesignTokens() {
watch(
() => preferences.theme,
() => {
colorInfo.value = colorPrimary.value = getCssVariableValue('--primary');
colorError.value = getCssVariableValue('--destructive');
colorWarning.value = getCssVariableValue('--warning');
colorSuccess.value = getCssVariableValue('--success');
colorBgBase.value = getCssVariableValue('--background');
colorBgLayout.value = getCssVariableValue('--background-deep');
colorBgMask.value = getCssVariableValue('--overlay');
colorBorder.value = getCssVariableValue('--border');
colorTextBase.value = getCssVariableValue('--foreground');
colorBgElevated.value = getCssVariableValue('--popover');
colorBgContainer.value = getCssVariableValue('--card');
borderRadius.value = getCssVariableValue('--radius', false);
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);
},
{ immediate: true },
);
const antDesignTokens = computed(() => {
return {
borderRadius: borderRadius.value,
colorBgBase: colorBgBase.value,
colorBgContainer: colorBgContainer.value,
colorBgElevated: colorBgElevated.value,
colorBgLayout: colorBgLayout.value,
colorBgMask: colorBgMask.value,
colorBorder: colorBorder.value,
colorError: colorError.value,
colorInfo: colorInfo.value,
colorPrimary: colorPrimary.value,
colorSuccess: colorSuccess.value,
colorTextBase: colorTextBase.value,
colorWarning: colorWarning.value,
};
});
return {
antDesignTokens,
borderRadius,
colorBgBase,
colorBgContainer,
colorBgElevated,
colorBorder,
colorError,
colorInfo,
colorPrimary,
colorSuccess,
colorTextBase,
colorWarning,
};
}