feat: テーマカラーを新しいものにした

tuqulore · Aug 26, 2021 · 0198c3e · 0198c3e
1 parent 6c344f3
commit 0198c3e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 18 deletions.
diff --git a/packages/tailwindcss/btn.js → packages/tailwindcss/button.js b/packages/tailwindcss/btn.js → packages/tailwindcss/button.js
@@ -7,9 +7,9 @@ module.exports = plugin.withOptions(
     return ({ addComponents, theme }) => {
       addComponents([
         {
-          ".btn": {
+          ".button": {
             backgroundColor: theme("colors.primary.500"),
-            borderRadius: theme("tuqulore.btn.radius"),
+            borderRadius: theme("borderRadius.md"),
             color: "#fff",
             display: "inline-block",
             fontWeight: 700,

diff --git a/packages/tailwindcss/index.js b/packages/tailwindcss/index.js
@@ -1,4 +1,4 @@
-const btn = require("./btn");
+const btn = require("./button");
 const form = require("./form");
 const typography = require("./typography");
 

diff --git a/packages/tailwindcss/stories/Button.stories.js b/packages/tailwindcss/stories/Button.stories.js
@@ -3,7 +3,7 @@ import clsx from "clsx";
 export default {
   title: "Button",
   argTypes: {
-    label: {control: 'text'},
+    label: { control: 'text' },
     text: { control: 'boolean' },
     rounded: { control: 'boolean' },
     stretched: { control: 'boolean' },
@@ -12,7 +12,7 @@ export default {
 
 const Template = ({ label, text, rounded, stretched, ...args }) => {
   return `<button type="button" class="${clsx(
-    "btn",
+    "button",
     { "is-text": text },
     { "is-rounded": rounded },
     { "is-stretched": stretched },

diff --git a/packages/tailwindcss/theme.js b/packages/tailwindcss/theme.js
@@ -1,8 +1,5 @@
 module.exports = {
   tuqulore: {
-    btn: {
-      radius: "3px",
-    },
     input: {
       radius: "8px",
     },
@@ -21,16 +18,16 @@ module.exports = {
       900: "#0c0c0c",
     },
     primary: {
-      50: "#f8e9e9",
-      100: "#f1d2d3",
-      200: "#e3a4a7",
-      300: "#d4777a",
-      400: "#c6494e",
-      500: "#b81c22",
-      600: "#8a151a",
-      700: "#5c0e11",
-      800: "#2e0709",
-      900: "#120303",
+      50: "#FFE6EB",
+      100: "#FFCCD5",
+      200: "#FF99AB",
+      300: "#FF6682",
+      400: "#FF3358",
+      500: "#FF002E",
+      600: "#BF0023",
+      700: "#800017",
+      800: "#40000C",
+      900: "#1A0005",
     },
   },
 };