vben
2 months ago
15 changed files with 124 additions and 44 deletions
-
4apps/web-antd/src/app.vue
-
5apps/web-antd/src/views/demos/nested/menu-1.vue
-
5apps/web-antd/src/views/demos/nested/menu-2-1.vue
-
5apps/web-antd/src/views/demos/nested/menu-3-1.vue
-
5apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
-
2internal/tailwind-config/src/index.ts
-
7packages/@core/shared/design/src/design-tokens/default/index.css
-
1packages/effects/hooks/src/index.ts
-
78packages/effects/hooks/src/use-design-tokens.ts
-
7packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
-
18pnpm-lock.yaml
-
13website/.vitepress/config.mts
-
2website/package.json
-
14website/src/guide/in-depth/theme.md
-
2website/src/guide/introduction/quick-start.md
@ -1,6 +1,7 @@ |
|||
export * from './unmount-global-loading'; |
|||
export * from './use-app-config'; |
|||
export * from './use-content-maximize'; |
|||
export * from './use-design-tokens'; |
|||
export * from './use-refresh'; |
|||
export * from './use-tabs'; |
|||
export * from './use-watermark'; |
|||
|
@ -0,0 +1,78 @@ |
|||
import { computed, ref, 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 getCssVariableValue = (variable: string, isColor: boolean = true) => { |
|||
const value = rootStyles.getPropertyValue(variable); |
|||
return isColor ? `hsl(${value})` : value; |
|||
}; |
|||
|
|||
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); |
|||
}, |
|||
{ 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, |
|||
}; |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue