github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add theme palette config (#511) 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/515/head
Ryan Wang 2022-03-18 13:12:26 +08:00 committed by GitHub
parent 0b1acce556
commit 6858ab3be0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body class="themeable-default">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

3
package.json
View File

@ -34,7 +34,7 @@
"eslint": "^8.10.0", "eslint": "^8.10.0",
"eslint-plugin-cypress": "^2.12.1", "eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-vue": "^8.5.0", "eslint-plugin-vue": "^8.5.0",
"histoire": "^0.1.1", "histoire": "^0.1.3",
"husky": "^7.0.4", "husky": "^7.0.4",
"jsdom": "^19.0.0", "jsdom": "^19.0.0",
"postcss": "^8.4.8", "postcss": "^8.4.8",
@ -42,6 +42,7 @@
"sass": "^1.49.9", "sass": "^1.49.9",
"start-server-and-test": "^1.14.0", "start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.23", "tailwindcss": "^3.0.23",
"tailwindcss-themeable": "^1.3.0",
"typescript": "~4.5.5", "typescript": "~4.5.5",
"vite": "^2.8.6", "vite": "^2.8.6",
"vitest": "^0.5.9", "vitest": "^0.5.9",

38
pnpm-lock.yaml
View File

@ -15,7 +15,7 @@ specifiers:
eslint: ^8.10.0 eslint: ^8.10.0
eslint-plugin-cypress: ^2.12.1 eslint-plugin-cypress: ^2.12.1
eslint-plugin-vue: ^8.5.0 eslint-plugin-vue: ^8.5.0
histoire: ^0.1.1 histoire: ^0.1.3
husky: ^7.0.4 husky: ^7.0.4
jsdom: ^19.0.0 jsdom: ^19.0.0
pinia: ^2.0.11 pinia: ^2.0.11
@ -24,6 +24,7 @@ specifiers:
sass: ^1.49.9 sass: ^1.49.9
start-server-and-test: ^1.14.0 start-server-and-test: ^1.14.0
tailwindcss: ^3.0.23 tailwindcss: ^3.0.23
tailwindcss-themeable: ^1.3.0
typescript: ~4.5.5 typescript: ~4.5.5
vite: ^2.8.6 vite: ^2.8.6
vitest: ^0.5.9 vitest: ^0.5.9
@ -51,7 +52,7 @@ devDependencies:
eslint: 8.10.0 eslint: 8.10.0
eslint-plugin-cypress: 2.12.1_eslint@8.10.0 eslint-plugin-cypress: 2.12.1_eslint@8.10.0
eslint-plugin-vue: 8.5.0_eslint@8.10.0 eslint-plugin-vue: 8.5.0_eslint@8.10.0
histoire: 0.1.1_cd0dd645aa5dde4c3c337175f134c2cd histoire: 0.1.3_cd0dd645aa5dde4c3c337175f134c2cd
husky: 7.0.4 husky: 7.0.4
jsdom: 19.0.0 jsdom: 19.0.0
postcss: 8.4.8 postcss: 8.4.8
@ -59,6 +60,7 @@ devDependencies:
sass: 1.49.9 sass: 1.49.9
start-server-and-test: 1.14.0 start-server-and-test: 1.14.0
tailwindcss: 3.0.23_autoprefixer@10.4.2 tailwindcss: 3.0.23_autoprefixer@10.4.2
tailwindcss-themeable: 1.3.0
typescript: 4.5.5 typescript: 4.5.5
vite: 2.8.6_sass@1.49.9 vite: 2.8.6_sass@1.49.9
vitest: 0.5.9_jsdom@19.0.0+sass@1.49.9 vitest: 0.5.9_jsdom@19.0.0+sass@1.49.9
@ -466,8 +468,8 @@ packages:
'@hapi/hoek': 9.2.1 '@hapi/hoek': 9.2.1
dev: true dev: true
/@histoire/controls/0.1.1: /@histoire/controls/0.1.3:
resolution: {integrity: sha512-e84lJFsP/VcCxFM6YaMk9uBwBvpkuprPBevn1Q/sRJ72t5hcT49BSH4MVeKVmN52p6jQLF+G6NvS7sLDZl+DZA==} resolution: {integrity: sha512-yCoNHfVInr9KzdSCkgfQR0CNuuAznr3pY9kWsAsDqUYN90AU0g4URKyPkxN/F3kykqZiS1oSq49LC+ekDjS+jw==}
dev: true dev: true
/@humanwhocodes/config-array/0.9.5: /@humanwhocodes/config-array/0.9.5:
@ -1007,8 +1009,8 @@ packages:
'@types/node': 16.11.26 '@types/node': 16.11.26
dev: true dev: true
/@vueuse/core/7.7.1_vue@3.2.31: /@vueuse/core/8.1.1_vue@3.2.31:
resolution: {integrity: sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==} resolution: {integrity: sha512-NmpizOcQXW0OHV0qa6YwFtw5hQBe0RxMuxQoIIbCa6jRT16MTweFPecIM6VgA1e5vZJtAO7p//TgLSpzi3joZQ==}
peerDependencies: peerDependencies:
'@vue/composition-api': ^1.1.0 '@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0 vue: ^2.6.0 || ^3.2.0
@ -1018,13 +1020,18 @@ packages:
vue: vue:
optional: true optional: true
dependencies: dependencies:
'@vueuse/shared': 7.7.1_vue@3.2.31 '@vueuse/metadata': 8.1.1
'@vueuse/shared': 8.1.1_vue@3.2.31
vue: 3.2.31 vue: 3.2.31
vue-demi: 0.12.1_vue@3.2.31 vue-demi: 0.12.1_vue@3.2.31
dev: true dev: true
/@vueuse/shared/7.7.1_vue@3.2.31: /@vueuse/metadata/8.1.1:
resolution: {integrity: sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==} resolution: {integrity: sha512-TSmA3UaSmBcV8pJ7fnHAL7NjSE1RQZlpJklg6YysFxwxDb0MZlo+Q8j9U1hLBZT1fnAjwZMaoxilanHN8ZwugQ==}
dev: true
/@vueuse/shared/8.1.1_vue@3.2.31:
resolution: {integrity: sha512-lWRcK8W9+q1t1XMxW9JIljXFQLIViInTOEF7wUHcISQNAYwHtHgr0z+U5SRM8tA4eJd/dVs/2BV1/z2DG7aKEg==}
peerDependencies: peerDependencies:
'@vue/composition-api': ^1.1.0 '@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0 vue: ^2.6.0 || ^3.2.0
@ -2676,18 +2683,17 @@ packages:
hasBin: true hasBin: true
dev: true dev: true
/histoire/0.1.1_cd0dd645aa5dde4c3c337175f134c2cd: /histoire/0.1.3_cd0dd645aa5dde4c3c337175f134c2cd:
resolution: {integrity: sha512-BeskOejR5c2XaYLFAU9XETOLsLqRuY7nmSH0iEsuCKiVj8HHezRtp5Y50yVFZ+/T1X6Fqo7dLdD2E5glCi8R5A==} resolution: {integrity: sha512-5/92wzzpUpXIiobiMJ0vUpCeMpgHo3YfzObkz7l28HNmHZYQ6cNMnmoX4KG9GIPmYEs25jygKN0N4NYHYZwVyw==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
'@vue/runtime-core': ^3.2.31
vite: ^2.8.3 vite: ^2.8.3
vue: ^3.2.31 vue: ^3.2.31
dependencies: dependencies:
'@histoire/controls': 0.1.1 '@histoire/controls': 0.1.3
'@iconify/vue': 3.1.4_vue@3.2.31 '@iconify/vue': 3.1.4_vue@3.2.31
'@vitejs/plugin-vue': 2.2.4_vite@2.8.6+vue@3.2.31 '@vitejs/plugin-vue': 2.2.4_vite@2.8.6+vue@3.2.31
'@vueuse/core': 7.7.1_vue@3.2.31 '@vueuse/core': 8.1.1_vue@3.2.31
case: 1.6.3 case: 1.6.3
chokidar: 3.5.3 chokidar: 3.5.3
defu: 5.0.1 defu: 5.0.1
@ -4104,6 +4110,10 @@ packages:
get-port: 3.2.0 get-port: 3.2.0
dev: true dev: true
/tailwindcss-themeable/1.3.0:
resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}
dev: true
/tailwindcss/3.0.23_autoprefixer@10.4.2: /tailwindcss/3.0.23_autoprefixer@10.4.2:
resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==} resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
engines: {node: '>=12.13.0'} engines: {node: '>=12.13.0'}

19
src/components/base/button/Button.story.vue
View File

@ -1,22 +1,15 @@
<template> <template>
<Story title="Button"> <Story title="Button">
<Variant :init-state="initState" title="playground"> <Variant title="Type">
<template #default="{ state }"> <template #default>
<VButton :type="state.type"> Hello world </VButton> <div class="themeable-default">
<VButton type="primary"> Hello world </VButton>
<VButton type="secondary"> Hello world </VButton>
</div>
</template> </template>
</Variant> </Variant>
<Variant icon="carbon:star-filled" icon-color="#10B981" title="secondary">
<VButton type="secondary"> Hello world </VButton>
</Variant>
</Story> </Story>
</template> </template>
<script setup> <script setup>
import { VButton } from "./index"; import { VButton } from "./index";
function initState() {
return {
type: "primary",
};
}
</script> </script>

15
src/components/base/button/Button.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<button :class="[`btn-${size}`, `btn-${type}`]"> <button :class="[`btn-${size}`, `btn-${type}`]" class="btn">
<slot /> <slot />
</button> </button>
</template> </template>
@ -23,8 +23,19 @@ defineProps({
}); });
</script> </script>
<style> <style>
.btn {
border-radius: 2px;
@apply cursor-pointer;
@apply border-none;
}
.btn-secondary { .btn-secondary {
@apply bg-black; @apply bg-themeable-secondary;
@apply text-white; @apply text-white;
} }
.btn-primary {
@apply bg-themeable-primary;
@apply text-black;
}
</style> </style>

17
tailwind.config.js
View File

@ -1,7 +1,22 @@
const { themeable } = require("tailwindcss-themeable");
module.exports = { module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
themeable({
defaultTheme: "default",
themes: [
{
name: "default",
palette: {
primary: "#4CCBA0",
secondary: "#0E1731",
},
},
],
}),
],
}; };