feat: Primary ColorをTailwind CSSのBlueに指定

tuqulore · Oct 20, 2021 · ab3656b · ab3656b
1 parent 3b4b973
commit ab3656b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/packages/tailwindcss/stories/Colors.stories.js b/packages/tailwindcss/stories/Colors.stories.js
@@ -0,0 +1,42 @@
+export default {
+  title: "Systems/Colors",
+};
+
+const Template = () => {
+  return `
+    <div class="grid grid-cols-10 gap-2 text-center mb-8">
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-50">
+            <div class="text-gray-700">50</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-100">
+            <div class="text-gray-700">100</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-200">
+            <div class="text-gray-700">200</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-300">
+            <div class="text-gray-700">300</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-400">
+            <div class="text-gray-100">400</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-500">
+            <div class="text-gray-100">500</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-600">
+            <div class="text-gray-100">600</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-700">
+            <div class="text-gray-100">700</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-800">
+            <div class="text-gray-100">800</div>
+        </div>
+        <div class="rounded-full flex items-center justify-center w-16 h-16 bg-primary-900">
+            <div class="text-gray-100">900</div>
+        </div>
+        
+    </div>
+    `;
+};
+export const Primary = Template.bind({});
diff --git a/packages/tailwindcss/theme.js b/packages/tailwindcss/theme.js
@@ -9,16 +9,7 @@ module.exports = {
   extend: {
     colors: {
       primary: {
-        50: "#E9F1F9",
-        100: "#C7DAEF",
-        200: "#91B6E1",
-        300: "#5990D1",
-        400: "#60A5FA",
-        500: "#0950C3",
-        600: "#2563EB",
-        700: "#113661",
-        800: "#081B30",
-        900: "#030B13",
+        ...colors.blue,
       },
       tq: {
         50: "#FFE6EB",