feat: use default colors from tailwind by default (#4)

* feat: use default colors from tailwind by default

* docs: update

Author: hyoban

README.md

@@ -23,6 +23,8 @@ import { createVariableColors, variableColorsPlugin } from 'tailwindcss-variable
 const config: Config = {
   content: ['./src/**/*.tsx'],
   theme: {
+    // You can also not pass the colors parameter,
+    // it will use the colors from tailwindcss by default.
     colors: createVariableColors(colors),
   },
   plugins: [variableColorsPlugin(colors)],

packages/core/src/index.test.ts

@@ -388,4 +388,12 @@ describe('should', () => {
       }
     `)
   })
+
+  const defaultVariableColors = createVariableColors()
+  it('should ignore deprecated colors by default', () => {
+    expect(defaultVariableColors['amber']['100']).toMatchInlineSnapshot(
+      '"rgb(var(--tw-color-amber-100) / <alpha-value>)"',
+    )
+    expect(defaultVariableColors['blueGray']).toBeUndefined()
+  })
 })

packages/core/src/index.ts

@@ -1,3 +1,5 @@
+import defaultColors from 'tailwindcss/colors'
+
 import { Colors } from './type'
 
 export { variableColorsPlugin } from './plugin'
@@ -17,10 +19,29 @@ type VariableColors = {
       }
 }
 
-export function createVariableColors<T extends Colors>(colors: T) {
+const deprecatedColors = [
+  'lightBlue',
+  'warmGray',
+  'trueGray',
+  'coolGray',
+  'blueGray',
+] as const
+
+export function getDefaultColors() {
+  if (deprecatedColors.some((color) => color in defaultColors)) {
+    deprecatedColors.forEach((color) => {
+      if (color in defaultColors) {
+        delete defaultColors[color]
+      }
+    })
+  }
+  return defaultColors
+}
+
+export function createVariableColors<T extends Colors>(colors?: T) {
   const variableColors = {} as any
 
-  for (const [key, value] of Object.entries(colors)) {
+  for (const [key, value] of Object.entries(colors ?? getDefaultColors())) {
     if (typeof value === 'string') {
       if (!value.startsWith('#')) {
         // color keyword

packages/core/src/plugin.ts

@@ -1,16 +1,17 @@
 import plugin from 'tailwindcss/plugin'
 import { Colors } from './type'
+import { getDefaultColors } from '.'
 
 interface Options {
   mode?: 'invert'
 }
 export function variableColorsPlugin<T extends Colors>(
-  colors: T,
+  colors?: T,
   options: Options = {},
 ) {
   return plugin(({ addBase }) => {
     addBase({
-      ':root': generateColorVariables(colors),
+      ':root': generateColorVariables(colors ?? getDefaultColors()),
     })
   })
 }

packages/core/tailwind.config.ts

@@ -1,13 +1,12 @@
 import { Config } from 'tailwindcss'
-import colors from 'tailwindcss/colors'
 import { createVariableColors, variableColorsPlugin } from './src'
 
 const config: Config = {
   content: ['./src/**/*.tsx'],
   theme: {
-    colors: createVariableColors(colors),
+    colors: createVariableColors(),
   },
-  plugins: [variableColorsPlugin(colors)],
+  plugins: [variableColorsPlugin()],
 }
 
 export default config

playground/tailwind.config.ts

@@ -1,5 +1,4 @@
 import { Config } from 'tailwindcss'
-import colors from 'tailwindcss/colors'
 import {
   createVariableColors,
   variableColorsPlugin,
@@ -12,7 +11,7 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    colors: createVariableColors(colors),
+    colors: createVariableColors(),
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
@@ -25,7 +24,7 @@ const config: Config = {
       padding: '1rem',
     },
   },
-  plugins: [variableColorsPlugin(colors)],
+  plugins: [variableColorsPlugin()],
 }
 
 export default config