feat: ✨ Updata tailwindcss.config.js template

Instead of specifying the theme color using direct color codes, I used `tailwindcss/colors` to define them.
tremorlabs · Jan 11, 2024 · 2dba5c9 · 2dba5c9
1 parent ef10209
commit 2dba5c9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 32 deletions.
diff --git a/src/templates.ts b/src/templates.ts
@@ -76,61 +76,61 @@ export const THEME = `{
         // light mode
         tremor: {
           brand: {
-            faint: "#eff6ff", // blue-50
-            muted: "#bfdbfe", // blue-200
-            subtle: "#60a5fa", // blue-400
-            DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#1d4ed8", // blue-700
-            inverted: "#ffffff", // white
+            faint: colors.blue[50],
+            muted: colors.blue[200],
+            subtle: colors.blue[400],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[700],
+            inverted: colors.white,
           },
           background: {
-            muted: "#f9fafb", // gray-50
-            subtle: "#f3f4f6", // gray-100
-            DEFAULT: "#ffffff", // white
-            emphasis: "#374151", // gray-700
+            muted: colors.gray[50],
+            subtle: colors.gray[100],
+            DEFAULT: colors.white,
+            emphasis: colors.gray[700],
           },
           border: {
-            DEFAULT: "#e5e7eb", // gray-200
+            DEFAULT: colors.gray[200],
           },
           ring: {
-            DEFAULT: "#e5e7eb", // gray-200
+            DEFAULT: colors.gray[200],
           },
           content: {
-            subtle: "#9ca3af", // gray-400
-            DEFAULT: "#6b7280", // gray-500
-            emphasis: "#374151", // gray-700
-            strong: "#111827", // gray-900
-            inverted: "#ffffff", // white
+            subtle: colors.gray[400],
+            DEFAULT: colors.gray[500],
+            emphasis: colors.gray[700],
+            strong: colors.gray[900],
+            inverted: colors.white,
           },
         },
         // dark mode
         "dark-tremor": {
           brand: {
             faint: "#0B1229", // custom
-            muted: "#172554", // blue-950
-            subtle: "#1e40af", // blue-800
-            DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#60a5fa", // blue-400
-            inverted: "#030712", // gray-950
+            muted: colors.blue[950],
+            subtle: colors.blue[800],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[400],
+            inverted: colors.gray[950],
           },
           background: {
             muted: "#131A2B", // custom
-            subtle: "#1f2937", // gray-800
-            DEFAULT: "#111827", // gray-900
-            emphasis: "#d1d5db", // gray-300
+            subtle: colors.gray[800],
+            DEFAULT: colors.gray[900],
+            emphasis: colors.gray[300],
           },
           border: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: colors.gray[800],
           },
           ring: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: colors.gray[800],
           },
           content: {
-            subtle: "#4b5563", // gray-600
-            DEFAULT: "#6b7280", // gray-600
-            emphasis: "#e5e7eb", // gray-200
-            strong: "#f9fafb", // gray-50
-            inverted: "#000000", // black
+            subtle: colors.gray[600],
+            DEFAULT: colors.gray[600],
+            emphasis: colors.gray[200],
+            strong: colors.gray[50],
+            inverted: colors.black,
           },
         },
       },

diff --git a/src/utils/get-tailwind-config.ts b/src/utils/get-tailwind-config.ts
@@ -24,6 +24,7 @@ const tailwindContentConfigs: { [key in FrameworkConfigType]: string } = {
 export const getTailwindConfig = (frameworkConfigType: FrameworkConfigType) => {
   const contentConfig = tailwindContentConfigs[frameworkConfigType];
   return `/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
 /* eslint-disable max-len */
 module.exports = {
   content: ${contentConfig},