From 9603871a4075a305fc2e8d69cb82d3c4cdcd8c54 Mon Sep 17 00:00:00 2001 From: aibayanyu Date: Sun, 5 Mar 2023 22:23:19 +0800 Subject: [PATCH] feat: add theme --- components/theme/index.ts | 30 ++++++++++++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 30 ++++++++++++++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 components/theme/index.ts diff --git a/components/theme/index.ts b/components/theme/index.ts new file mode 100644 index 0000000..31b19a0 --- /dev/null +++ b/components/theme/index.ts @@ -0,0 +1,30 @@ +import { createTheme, useCacheToken } from '@antd-tiny-vue/cssinjs' +import { computed } from 'vue' + +export interface ThemeToken { + primaryColor: string +} + +export const defaultTheme: ThemeToken = { + primaryColor: '#1890ff' +} + +function derivative(theme: ThemeToken) { + return { + ...theme + } +} + +const theme = createTheme(derivative) + +export const useToken = () => { + const mergedTheme = computed(() => theme) + const cacheToken = useCacheToken( + mergedTheme, + computed(() => [defaultTheme]), + computed(() => ({ + salt: 'true' + })) + ) + return [mergedTheme, computed(() => cacheToken.value[0]), computed(() => cacheToken.value[1])] +} diff --git a/package.json b/package.json index 00148b7..1611d7f 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "preview": "vitepress preview site" }, "dependencies": { + "@antd-tiny-vue/cssinjs": "^0.0.4", "vue": "^3.2.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4ed3ce..32eb988 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@antd-tiny-vue/cssinjs': ^0.0.4 '@commitlint/cli': ^17.4.3 '@commitlint/config-conventional': ^17.4.3 '@mistjs/eslint-config-vue-jsx': ^0.0.3 @@ -20,6 +21,7 @@ specifiers: vue: ^3.2.0 dependencies: + '@antd-tiny-vue/cssinjs': 0.0.4_vue@3.2.47 vue: 3.2.47 devDependencies: @@ -163,6 +165,18 @@ packages: '@jridgewell/trace-mapping': 0.3.9 dev: true + /@antd-tiny-vue/cssinjs/0.0.4_vue@3.2.47: + resolution: {integrity: sha512-o6eU9IN+nfzaeCLHaQ94FqgvZV7eHeyY/Qw0p7ETMOyEQup13LBb4feOQKHGtBKLRkeoTugpY6EhAuMhn10SYw==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@emotion/hash': 0.9.0 + '@emotion/unitless': 0.8.0 + csstype: 3.1.1 + stylis: 4.1.3 + vue: 3.2.47 + dev: false + /@babel/code-frame/7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -666,6 +680,14 @@ packages: - '@algolia/client-search' dev: true + /@emotion/hash/0.9.0: + resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==} + dev: false + + /@emotion/unitless/0.8.0: + resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==} + dev: false + /@esbuild/android-arm/0.16.17: resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==} engines: {node: '>=12'} @@ -1949,6 +1971,10 @@ packages: /csstype/2.6.21: resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} + /csstype/3.1.1: + resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} + dev: false + /dargs/7.0.0: resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==} engines: {node: '>=8'} @@ -4359,6 +4385,10 @@ packages: acorn: 8.8.2 dev: true + /stylis/4.1.3: + resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==} + dev: false + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'}