feat: add theme palette config (#511)

Signed-off-by: Ryan Wang <i@ryanc.cc>
3 years ago · 6858ab3be0
6 changed files with 62 additions and 32 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
-  <body>
+  <body class="themeable-default">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- 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",
--- 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'}
--- a/src/components/base/button/Button.story.vue
+++ b/src/components/base/button/Button.story.vue
@ -1,22 +1,15 @@
 <template>
  <Story title="Button">
-    <Variant :init-state="initState" title="playground">
-      <template #default="{ state }">
-        <VButton :type="state.type"> Hello world </VButton>
+    <Variant title="Type">
+      <template #default>
+        <div class="themeable-default">
+          <VButton type="primary"> Hello world </VButton>
+          <VButton type="secondary"> Hello world </VButton>
+        </div>
      </template>
    </Variant>
-
-    <Variant icon="carbon:star-filled" icon-color="#10B981" title="secondary">
-      <VButton type="secondary"> Hello world </VButton>
-    </Variant>
  </Story>
 </template>
 <script setup>
 import { VButton } from "./index";
-
-function initState() {
-  return {
-    type: "primary",
-  };
-}
 </script>
--- a/src/components/base/button/Button.vue
+++ b/src/components/base/button/Button.vue
@ -1,5 +1,5 @@
 <template>
-  <button :class="[`btn-${size}`, `btn-${type}`]">
+  <button :class="[`btn-${size}`, `btn-${type}`]" class="btn">
    <slot />
  </button>
 </template>
@ -23,8 +23,19 @@ defineProps({
 });
 </script>
 <style>
+.btn {
+  border-radius: 2px;
+  @apply cursor-pointer;
+  @apply border-none;
+}
+
 .btn-secondary {
-  @apply bg-black;
+  @apply bg-themeable-secondary;
  @apply text-white;
 }
+
+.btn-primary {
+  @apply bg-themeable-primary;
+  @apply text-black;
+}
 </style>
--- 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",
+          },
+        },
+      ],
+    }),
+  ],
 };