test(tailwind.config): update tests

Author: maiieul

apps/component-tests/tailwind.config.cjs

@@ -3,10 +3,6 @@ const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 
-// RFC maiieul: I have added -base utility modifiers to start to have a good default specific to each utility based in each style.
-// This means using something non-standard that developers would have to learn.
-// Although it's not much and should be intuitive- and not knowing it doesn't break the tailwind design tokens system.
-
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
@@ -85,6 +81,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
       },
       borderRadius: {
         base: 'var(--border-radius)',

apps/website/tailwind.config.cjs

@@ -3,10 +3,6 @@ const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 
-// RFC maiieul: I have added -base utility modifiers to start to have a good default specific to each utility based in each style.
-// This means using something non-standard that developers would have to learn.
-// Although it's not much and should be intuitive- and not knowing it doesn't break the tailwind design tokens system.
-
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),

packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts

@@ -149,6 +149,10 @@ html {
                 DEFAULT: 'hsl(var(--card))',
                 foreground: 'hsl(var(--card-foreground))',
               },
+              popover: {
+                DEFAULT: 'hsl(var(--popover))',
+                foreground: 'hsl(var(--popover-foreground))',
+              },
             },
             borderRadius: {
               base: 'var(--border-radius)',
@@ -263,6 +267,10 @@ html {
                 DEFAULT: 'hsl(var(--card))',
                 foreground: 'hsl(var(--card-foreground))',
               },
+              popover: {
+                DEFAULT: 'hsl(var(--popover))',
+                foreground: 'hsl(var(--popover-foreground))',
+              },
             },
             borderRadius: {
               base: 'var(--border-radius)',
@@ -376,6 +384,10 @@ html {
                 DEFAULT: 'hsl(var(--card))',
                 foreground: 'hsl(var(--card-foreground))',
               },
+              popover: {
+                DEFAULT: 'hsl(var(--popover))',
+                foreground: 'hsl(var(--popover-foreground))',
+              },
             },
             borderRadius: {
               base: 'var(--border-radius)',

packages/kit-styled/src/templates/tailwind.config.cjs

@@ -3,10 +3,6 @@ const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 
-// RFC maiieul: I have added -base utility modifiers to start to have a good default specific to each utility based in each style.
-// This means using something non-standard that developers would have to learn.
-// Although it's not much and should be intuitive- and not knowing it doesn't break the tailwind design tokens system.
-
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
@@ -85,6 +81,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
       },
       borderRadius: {
         base: 'var(--border-radius)',