fix(app): button theme

Author: Selemondev

packages/nuxt-ui-vue/src/App.vue

@@ -2,5 +2,7 @@
 </script>
 
 <template>
-  <div />
+  <div class="grid place-items-center min-h-screen w-full">
+    <UButton color="black" intent="solid" label="Button" />
+  </div>
 </template>

packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts

@@ -196,13 +196,13 @@ export default {
 
   UButton: {
     base: {
-      root: 'focus:outline-none text-white dark:text-white block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
+      root: 'focus:outline-none block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
       font: 'font-medium',
       rounded: 'rounded-md',
       block: 'w-full flex justify-center items-center',
       normal: 'inline-flex items-center',
       buttonLoading: '!bg-opacity-50 opacity-50 pointer-events-none !cursor-not-allowed !hover:bg-opacity-50 inline-flex items-center',
-      buttonDisabled: '!shadow-none !cursor-not-allowed pointer-events-none opacity-50',
+      buttonDisabled: '!shadow-none !cursor-not-allowed pointer-events-none !bg-opacity-50 opacity-50',
       truncate: 'text-left break-all line-clamp-1',
       size: {
         '2xs': 'text-xs',
@@ -238,8 +238,8 @@ export default {
       },
       color: {
         white: {
-          solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:enabled:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:enabled:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
-          ghost: 'text-gray-900 dark:text-white hover:enabled:bg-white dark:hover:enabled:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
+          solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 !text-gray-900 dark:text-white bg-white hover:enabled:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:enabled:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
+          ghost: '!text-gray-900 dark:text-white hover:enabled:bg-white dark:hover:enabled:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
         },
         gray: {
           solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:enabled:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:enabled:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
@@ -281,11 +281,11 @@ export default {
     variants: {
       default: {
         intent: {
-          solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:enabled:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:enabled:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
-          outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:enabled:bg-{color}-50 disabled:bg-transparent dark:hover:enabled:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-          soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:enabled:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:enabled:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-          ghost: 'text-{color}-500 dark:text-{color}-400 hover:enabled:bg-{color}-50 disabled:bg-transparent dark:hover:enabled:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-          link: 'text-{color}-500 hover:enabled:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:enabled:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:enabled:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+          solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
+          outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+          soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+          ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+          link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
         },
       },
     },

packages/nuxt-ui-vue/tailwind.config.js

@@ -1,13 +1,47 @@
+/* eslint-disable no-unused-expressions */
+import tailwindColors from './node_modules/tailwindcss/colors'
+
+const colorSafeList = []
+
+const deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray']
+
+for (const colorName in tailwindColors) {
+  if (deprecated.includes(colorName))
+    continue
+
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+
+  const pallette = tailwindColors[colorName]
+
+  if (typeof pallette === 'object') {
+    shades.forEach((shade) => {
+      if (shade in pallette) {
+        colorSafeList.push(`text-${colorName}-${shade}`),
+        colorSafeList.push(`accent-${colorName}-${shade}`),
+        colorSafeList.push(`bg-${colorName}-${shade}`),
+        colorSafeList.push(`hover:enabled:bg-${colorName}-${shade}`),
+        colorSafeList.push(`focus:bg-${colorName}-${shade}`),
+        colorSafeList.push(`ring-${colorName}-${shade}`),
+        colorSafeList.push(`focus:ring-${colorName}-${shade}`),
+        colorSafeList.push(`border-${colorName}-${shade}`)
+      }
+    })
+  }
+}
 /** @type {import('tailwindcss').Config} */
-export const content = ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
-export const darkMode = 'class'
-export const theme = {
-  extend: {
-    backgroundColor: ['disabled'],
-    textColor: ['disabled'],
-    fontFamily: {
-      Roboto: 'Roboto',
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  safelist: colorSafeList,
+  theme: {
+    extend: {
+      colors: tailwindColors,
+      backgroundColor: ['disabled'],
+      textColor: ['disabled'],
+      fontFamily: {
+        Roboto: 'Roboto',
+      },
     },
   },
+  plugins: [require('@tailwindcss/forms')],
 }
-export const plugins = [require('@tailwindcss/forms')]