feat: add theme palette config (#511)

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Mar 18, 2022 · 6858ab3 · 6858ab3
1 parent 0b1acce
commit 6858ab3
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 32 deletions.
diff --git 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>

diff --git a/package.json b/package.json
@@ -34,14 +34,15 @@
     "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",
     "prettier": "^2.5.1",
     "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
diff --git 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>
diff --git 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>
diff --git 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",
+          },
+        },
+      ],
+    }),
+  ],
 };