test: ensure default theme colors match default tailwind colors

src/colors/colors.test.ts

@@ -1,41 +1,59 @@
 import { suite } from 'uvu'
 import * as assert from 'uvu/assert'
 
-import type { Instance } from '../types'
-import type { VirtualSheet } from '../sheets/index'
-
 import { virtualSheet } from '../sheets/index'
 
 import { create, strict } from '../index'
 import * as colors from './index'
 
-const test = suite<{
-  sheet: VirtualSheet
-  instance: Instance
-  tw: Instance['tw']
-}>('twind/colors')
+const test = suite('twind/colors')
 
-test.before((context) => {
-  context.sheet = virtualSheet()
-  context.instance = create({
-    sheet: context.sheet,
+test('new colors are available', () => {
+  const sheet = virtualSheet()
+  const { tw } = create({
+    sheet,
     mode: strict,
     preflight: false,
     prefix: false,
     theme: { extend: { colors } },
   })
-  context.tw = context.instance.tw
-})
-
-test.after.each(({ sheet }) => {
-  sheet.reset()
-})
 
-test('new colors are available', ({ tw, sheet }) => {
   assert.is(tw('text-rose-200'), 'text-rose-200')
   assert.equal(sheet.target, [
     '.text-rose-200{--tw-text-opacity:1;color:#fecdd3;color:rgba(254,205,211,var(--tw-text-opacity))}',
   ])
 })
 
+test('default theme colors match tailwind v2 config', () => {
+  const { theme } = create({ mode: strict, prefix: false })
+
+  assert.equal(
+    {
+      // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L19
+      black: colors.black,
+      white: colors.white,
+      gray: colors.coolGray,
+      red: colors.red,
+      yellow: colors.amber,
+      green: colors.emerald,
+      blue: colors.blue,
+      indigo: colors.indigo,
+      purple: colors.violet,
+      pink: colors.pink,
+    },
+    {
+      black: theme('colors', 'black'),
+      white: theme('colors', 'white'),
+      gray: theme('colors', 'gray'),
+      red: theme('colors', 'red'),
+      yellow: theme('colors', 'yellow'),
+      green: theme('colors', 'green'),
+      blue: theme('colors', 'blue'),
+      indigo: theme('colors', 'indigo'),
+      purple: theme('colors', 'purple'),
+      pink: theme('colors', 'pink'),
+    },
+  )
+})
+
 test.run()

src/twind/theme.ts

@@ -93,9 +93,13 @@ export const defaultTheme: Theme = {
     transparent: 'transparent',
     current: 'currentColor',
 
+    // black: colors.black,
     black: '#000',
+
+    // white: colors.white,
     white: '#fff',
 
+    // gray: colors.coolGray,
     gray: {
       50: '#f9fafb',
       100: '#f3f4f6',
@@ -109,6 +113,7 @@ export const defaultTheme: Theme = {
       900: '#111827',
     },
 
+    // red: colors.red,
     red: {
       50: '#fef2f2',
       100: '#fee2e2',
@@ -122,6 +127,7 @@ export const defaultTheme: Theme = {
       900: '#7f1d1d',
     },
 
+    // yellow: colors.amber,
     yellow: {
       50: '#fffbeb',
       100: '#fef3c7',
@@ -135,6 +141,7 @@ export const defaultTheme: Theme = {
       900: '#78350f',
     },
 
+    // green: colors.emerald,
     green: {
       50: '#ecfdf5',
       100: '#d1fae5',
@@ -148,6 +155,7 @@ export const defaultTheme: Theme = {
       900: '#064e3b',
     },
 
+    // blue: colors.blue,
     blue: {
       50: '#eff6ff',
       100: '#dbeafe',
@@ -161,6 +169,7 @@ export const defaultTheme: Theme = {
       900: '#1e3a8a',
     },
 
+    // indigo: colors.indigo,
     indigo: {
       50: '#eef2ff',
       100: '#e0e7ff',
@@ -174,6 +183,7 @@ export const defaultTheme: Theme = {
       900: '#312e81',
     },
 
+    // purple: colors.violet,
     purple: {
       50: '#f5f3ff',
       100: '#ede9fe',
@@ -187,6 +197,7 @@ export const defaultTheme: Theme = {
       900: '#4c1d95',
     },
 
+    // pink: colors.pink,
     pink: {
       50: '#fdf2f8',
       100: '#fce7f3',