diff --git a/index.html b/index.html
index 11603f878..acd81f109 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
Vite App
-
+
diff --git a/package.json b/package.json
index b76dc55ae..a8227b435 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
"eslint": "^8.10.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-vue": "^8.5.0",
- "histoire": "^0.1.1",
+ "histoire": "^0.1.3",
"husky": "^7.0.4",
"jsdom": "^19.0.0",
"postcss": "^8.4.8",
@@ -42,6 +42,7 @@
"sass": "^1.49.9",
"start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.23",
+ "tailwindcss-themeable": "^1.3.0",
"typescript": "~4.5.5",
"vite": "^2.8.6",
"vitest": "^0.5.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c57b5bac..61cebd09d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,7 +15,7 @@ specifiers:
eslint: ^8.10.0
eslint-plugin-cypress: ^2.12.1
eslint-plugin-vue: ^8.5.0
- histoire: ^0.1.1
+ histoire: ^0.1.3
husky: ^7.0.4
jsdom: ^19.0.0
pinia: ^2.0.11
@@ -24,6 +24,7 @@ specifiers:
sass: ^1.49.9
start-server-and-test: ^1.14.0
tailwindcss: ^3.0.23
+ tailwindcss-themeable: ^1.3.0
typescript: ~4.5.5
vite: ^2.8.6
vitest: ^0.5.9
@@ -51,7 +52,7 @@ devDependencies:
eslint: 8.10.0
eslint-plugin-cypress: 2.12.1_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
jsdom: 19.0.0
postcss: 8.4.8
@@ -59,6 +60,7 @@ devDependencies:
sass: 1.49.9
start-server-and-test: 1.14.0
tailwindcss: 3.0.23_autoprefixer@10.4.2
+ tailwindcss-themeable: 1.3.0
typescript: 4.5.5
vite: 2.8.6_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
dev: true
- /@histoire/controls/0.1.1:
- resolution: {integrity: sha512-e84lJFsP/VcCxFM6YaMk9uBwBvpkuprPBevn1Q/sRJ72t5hcT49BSH4MVeKVmN52p6jQLF+G6NvS7sLDZl+DZA==}
+ /@histoire/controls/0.1.3:
+ resolution: {integrity: sha512-yCoNHfVInr9KzdSCkgfQR0CNuuAznr3pY9kWsAsDqUYN90AU0g4URKyPkxN/F3kykqZiS1oSq49LC+ekDjS+jw==}
dev: true
/@humanwhocodes/config-array/0.9.5:
@@ -1007,8 +1009,8 @@ packages:
'@types/node': 16.11.26
dev: true
- /@vueuse/core/7.7.1_vue@3.2.31:
- resolution: {integrity: sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==}
+ /@vueuse/core/8.1.1_vue@3.2.31:
+ resolution: {integrity: sha512-NmpizOcQXW0OHV0qa6YwFtw5hQBe0RxMuxQoIIbCa6jRT16MTweFPecIM6VgA1e5vZJtAO7p//TgLSpzi3joZQ==}
peerDependencies:
'@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0
@@ -1018,13 +1020,18 @@ packages:
vue:
optional: true
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-demi: 0.12.1_vue@3.2.31
dev: true
- /@vueuse/shared/7.7.1_vue@3.2.31:
- resolution: {integrity: sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==}
+ /@vueuse/metadata/8.1.1:
+ 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:
'@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0
@@ -2676,18 +2683,17 @@ packages:
hasBin: true
dev: true
- /histoire/0.1.1_cd0dd645aa5dde4c3c337175f134c2cd:
- resolution: {integrity: sha512-BeskOejR5c2XaYLFAU9XETOLsLqRuY7nmSH0iEsuCKiVj8HHezRtp5Y50yVFZ+/T1X6Fqo7dLdD2E5glCi8R5A==}
+ /histoire/0.1.3_cd0dd645aa5dde4c3c337175f134c2cd:
+ resolution: {integrity: sha512-5/92wzzpUpXIiobiMJ0vUpCeMpgHo3YfzObkz7l28HNmHZYQ6cNMnmoX4KG9GIPmYEs25jygKN0N4NYHYZwVyw==}
hasBin: true
peerDependencies:
- '@vue/runtime-core': ^3.2.31
vite: ^2.8.3
vue: ^3.2.31
dependencies:
- '@histoire/controls': 0.1.1
+ '@histoire/controls': 0.1.3
'@iconify/vue': 3.1.4_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
chokidar: 3.5.3
defu: 5.0.1
@@ -4104,6 +4110,10 @@ packages:
get-port: 3.2.0
dev: true
+ /tailwindcss-themeable/1.3.0:
+ resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}
+ dev: true
+
/tailwindcss/3.0.23_autoprefixer@10.4.2:
resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
engines: {node: '>=12.13.0'}
diff --git a/src/components/base/button/Button.story.vue b/src/components/base/button/Button.story.vue
index 189fdec57..56e3dee65 100644
--- a/src/components/base/button/Button.story.vue
+++ b/src/components/base/button/Button.story.vue
@@ -1,22 +1,15 @@
-
-
- Hello world
+
+
+
+ Hello world
+ Hello world
+
-
-
- Hello world
-
diff --git a/src/components/base/button/Button.vue b/src/components/base/button/Button.vue
index 1c9f8e1f5..6f50049ba 100644
--- a/src/components/base/button/Button.vue
+++ b/src/components/base/button/Button.vue
@@ -1,5 +1,5 @@
-
@@ -23,8 +23,19 @@ defineProps({
});
diff --git a/tailwind.config.js b/tailwind.config.js
index f521631db..480d8dc5e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,22 @@
+const { themeable } = require("tailwindcss-themeable");
+
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
- plugins: [],
+ plugins: [
+ themeable({
+ defaultTheme: "default",
+ themes: [
+ {
+ name: "default",
+ palette: {
+ primary: "#4CCBA0",
+ secondary: "#0E1731",
+ },
+ },
+ ],
+ }),
+ ],
};