Merge pull request #1009 from joshhanley/josh/tailwind-v4

Tailwind v4 Support

Author: joshhanley

dist/flux-lite.css

@@ -85,28 +85,28 @@
          default => '',
     })
     ->add(match ($variant) { // Shadows...
-        'primary' => 'shadow-[inset_0px_1px_theme(colors.white/.2)]',
-        'danger' => 'shadow-[inset_0px_1px_theme(colors.red.500),inset_0px_2px_theme(colors.white/.15)] dark:shadow-none',
+        'primary' => 'shadow-[inset_0px_1px_--theme(--color-white/.2)]',
+        'danger' => 'shadow-[inset_0px_1px_var(--color-red-500),inset_0px_2px_--theme(--color-white/.15)] dark:shadow-none',
         'outline' => match ($size) {
-            'base' => 'shadow-sm',
-            'sm' => 'shadow-sm',
+            'base' => 'shadow-xs',
+            'sm' => 'shadow-xs',
             'xs' => 'shadow-none',
         },
         default => '',
     })
     ->add(match ($variant) { // Grouped border treatments...
         'ghost' => '',
         'subtle' => '',
-        'outline' => '[[data-flux-button-group]_&]:border-l-0 [:is([data-flux-button-group]>&:first-child,_[data-flux-button-group]_:first-child>&)]:border-l-[1px]',
-        'filled' => '[[data-flux-button-group]_&]:border-r [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 [[data-flux-button-group]_&]:border-zinc-200/80 [[data-flux-button-group]_&]:dark:border-zinc-900/50',
-        'danger' => '[[data-flux-button-group]_&]:border-r [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 [[data-flux-button-group]_&]:border-red-600 [[data-flux-button-group]_&]:dark:border-red-900/25',
-        'primary' => '[[data-flux-button-group]_&]:border-r-0 [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-[1px] dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-l-[1px] [:is([data-flux-button-group]>&:not(:first-child),_[data-flux-button-group]_:not(:first-child)>&)]:border-l-[color-mix(in_srgb,var(--color-accent-foreground),transparent_85%)]',
+        'outline' => 'in-data-flux-button-group:border-l-0 [:is([data-flux-button-group]>&:first-child,_[data-flux-button-group]_:first-child>&)]:border-l-[1px]',
+        'filled' => 'in-data-flux-button-group:border-r [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 in-data-flux-button-group:border-zinc-200/80 dark:in-data-flux-button-group:border-zinc-900/50',
+        'danger' => 'in-data-flux-button-group:border-r [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 in-data-flux-button-group:border-red-600 dark:in-data-flux-button-group:border-red-900/25',
+        'primary' => 'in-data-flux-button-group:border-r-0 [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-[1px] dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-r-0 dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-l-[1px] [:is([data-flux-button-group]>&:not(:first-child),_[data-flux-button-group]_:not(:first-child)>&)]:border-l-[color-mix(in_srgb,var(--color-accent-foreground),transparent_85%)]',
     })
     ->add($loading ? [ // Loading states...
         '*:transition-opacity',
         $type === 'submit' ? '[&[disabled]>:not([data-flux-loading-indicator])]:opacity-0' : '[&[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0',
         $type === 'submit' ? '[&[disabled]>[data-flux-loading-indicator]]:opacity-100' : '[&[data-flux-loading]>[data-flux-loading-indicator]]:opacity-100',
-        $type === 'submit' ? '[&[disabled]]:pointer-events-none' : '[&[data-flux-loading]]:pointer-events-none',
+        $type === 'submit' ? '[&[disabled]]:pointer-events-none' : 'data-flux-loading:pointer-events-none',
     ] : [])
     ;
 

stubs/resources/views/flux/button/index.blade.php

@@ -1,4 +1,4 @@
 <!-- This file's sole purpose is to get compiled by Tailwind and allow us to detect the -->
 <!-- user's darkMode setting by inspecting the effects of using this selector elsewhere... -->
 
-dark:[&[data-flux-dark-mode-beacon]]:hidden
+dark:data-flux-dark-mode-beacon:hidden

stubs/resources/views/flux/dark-mode-beacon.blade.php

@@ -23,20 +23,20 @@
     ;
 
 $classes = Flux::classes()
-    ->add('group/menu-checkbox flex items-center px-2 py-1.5 w-full focus:outline-none')
+    ->add('group/menu-checkbox flex items-center px-2 py-1.5 w-full focus:outline-hidden')
     ->add('rounded-md')
     ->add('text-left text-sm font-medium')
-    ->add('[[disabled]_&]:opacity-50 [&[disabled]]:opacity-50')
+    ->add('in-[[disabled]]:opacity-50 [&[disabled]]:opacity-50')
     ->add([
-        'text-zinc-800 data-[active]:bg-zinc-50 dark:text-white data-[active]:dark:bg-zinc-600',
-        '[&_[data-flux-menu-item-icon]]:text-zinc-400 dark:[&_[data-flux-menu-item-icon]]:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+        'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+        '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
     ])
     ;
 @endphp
 
 <ui-menu-checkbox {{ $attributes->class($classes) }} data-flux-menu-item-has-icon data-flux-menu-checkbox>
     <div class="w-7">
-        <div class="hidden group-data-[checked]/menu-checkbox:block">
+        <div class="hidden group-data-checked/menu-checkbox:block">
             <flux:icon :variant="$iconVariant" icon="check" :class="$iconClasses" data-flux-menu-item-icon />
         </div>
     </div>

stubs/resources/views/flux/menu/checkbox/index.blade.php

@@ -1,10 +1,10 @@
 @php
 $classes = Flux::classes()
     ->add('[:where(&)]:min-w-48 p-[.3125rem]')
-    ->add('rounded-lg shadow-sm')
+    ->add('rounded-lg shadow-xs')
     ->add('border border-zinc-200 dark:border-zinc-600')
     ->add('bg-white dark:bg-zinc-700')
-    ->add('focus:outline-none')
+    ->add('focus:outline-hidden')
     ;
 @endphp
 

stubs/resources/views/flux/menu/index.blade.php

@@ -24,18 +24,18 @@
     ;
 
 $classes = Flux::classes()
-    ->add('flex items-center px-2 py-1.5 w-full focus:outline-none')
+    ->add('flex items-center px-2 py-1.5 w-full focus:outline-hidden')
     ->add('rounded-md')
     ->add('text-left text-sm font-medium')
     ->add('[&[disabled]]:opacity-50')
     ->add(match ($variant) {
         'danger' => [
-            'text-zinc-800 data-[active]:text-red-600 data-[active]:bg-red-50 dark:text-white dark:data-[active]:bg-red-400/20 dark:data-[active]:text-red-400',
-            '[&_[data-flux-menu-item-icon]]:text-zinc-400 dark:[&_[data-flux-menu-item-icon]]:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+            'text-zinc-800 data-active:text-red-600 data-active:bg-red-50 dark:text-white dark:data-active:bg-red-400/20 dark:data-active:text-red-400',
+            '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
         ],
         'default' => [
-            'text-zinc-800 data-[active]:bg-zinc-50 dark:text-white data-[active]:dark:bg-zinc-600',
-            '[&_[data-flux-menu-item-icon]]:text-zinc-400 dark:[&_[data-flux-menu-item-icon]]:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+            'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+            '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
         ]
     })
     ;

stubs/resources/views/flux/menu/item.blade.php

@@ -23,20 +23,20 @@
     ;
 
 $classes = Flux::classes()
-    ->add('group/menu-radio flex items-center px-2 py-1.5 w-full focus:outline-none')
+    ->add('group/menu-radio flex items-center px-2 py-1.5 w-full focus:outline-hidden')
     ->add('rounded-md')
     ->add('text-left text-sm font-medium')
-    ->add('[[disabled]_&]:opacity-50 [&[disabled]]:opacity-50')
+    ->add('in-[[disabled]]:opacity-50 [&[disabled]]:opacity-50')
     ->add([
-        'text-zinc-800 data-[active]:bg-zinc-50 dark:text-white data-[active]:dark:bg-zinc-600',
-        '[&_[data-flux-menu-item-icon]]:text-zinc-400 dark:[&_[data-flux-menu-item-icon]]:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+        'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+        '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
     ])
     ;
 @endphp
 
 <ui-menu-radio {{ $attributes->class($classes) }} data-flux-menu-item-has-icon data-flux-menu-radio>
     <div class="w-7">
-        <div class="hidden group-data-[checked]/menu-radio:block">
+        <div class="hidden group-data-checked/menu-radio:block">
             <flux:icon :variant="$iconVariant" icon="check" :class="$iconClasses" data-flux-menu-item-icon />
         </div>
     </div>

stubs/resources/views/flux/menu/radio/index.blade.php

@@ -1,4 +1,4 @@
 
 <div class="-mx-[.3125rem] my-[.3125rem] h-px" {{ $attributes }} data-flux-menu-separator>
-    <flux:separator class="dark:!bg-zinc-600" />
+    <flux:separator class="dark:bg-zinc-600!" />
 </div>

stubs/resources/views/flux/menu/separator.blade.php

@@ -1,7 +1,7 @@
 @php
 $classes = Flux::classes()
     ->add('[:where(&)]:min-w-48 p-[.3125rem]')
-    ->add('rounded-lg shadow-sm')
+    ->add('rounded-lg shadow-xs')
     ->add('border border-zinc-200 dark:border-zinc-600')
     ->add('bg-white dark:bg-zinc-700')
     ;

stubs/resources/views/flux/navmenu/index.blade.php

@@ -32,11 +32,11 @@
     ->add(match ($variant) {
         'danger' => [
             'text-zinc-800 hover:text-red-600 hover:bg-red-50 dark:text-white dark:hover:bg-red-400/20 dark:hover:text-red-400',
-            '[&_[data-navmenu-icon]]:text-zinc-400 dark:[&_[data-navmenu-icon]]:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+            '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
         ],
         'default' => [
-            'text-zinc-800 hover:bg-zinc-50 dark:text-white hover:dark:bg-zinc-600',
-            '[&_[data-navmenu-icon]]:text-zinc-400 dark:[&_[data-navmenu-icon]]:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+            'text-zinc-800 hover:bg-zinc-50 dark:text-white dark:hover:bg-zinc-600',
+            '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
         ]
     })
     ->add($disabled ? 'text-zinc-400' : '')

stubs/resources/views/flux/navmenu/item.blade.php

@@ -1,4 +1,4 @@
 
 <div class="-mx-[.3125rem] my-[.3125rem] h-px" {{ $attributes }} data-flux-navmenu-separator>
-    <flux:separator class="dark:!bg-zinc-600" />
+    <flux:separator class="dark:bg-zinc-600!" />
 </div>