rapidez · royduin · Jan 29, 2025 · Dec 17, 2024 · Dec 17, 2024 · Dec 19, 2024
diff --git a/README.md b/README.md
@@ -34,6 +34,8 @@ The base button doesn't have any styling; here, we only use the `x-rapidez::tag`
 - [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)
 - [Conversion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/conversion.blade.php)
 - [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)
+- [Muted](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/muted.blade.php)
+
 
 ## Installation
 
@@ -63,8 +65,8 @@ colors: {
             muted: color('--foreground-muted', colors.slate[600]),
         },
         border: {
-            emphasis: color('--border-emphasis', colors.slate[500]),
-            DEFAULT: color('--border', colors.slate[200]),
+            emphasis: color('--border-emphasis', colors.slate[400]),
+            DEFAULT: color('--border', colors.slate[300]),
             muted: color('--border-muted', colors.slate[100]),
         },
         background: {
@@ -160,7 +162,7 @@ Just like any other Blade component, check out the [Laravel Blade docs](https://
 Make sure to add this class to your body tag to prevent scrolling when the slideover is open:
 
 ```html
-<body class="has-[.slideover-checkbox:checked]:overflow-hidden">
+<body class="has-[.prevent-scroll:checked]:overflow-clip">
 ```
 
 #### Tag

diff --git a/demo/components.html b/demo/components.html
diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php
@@ -180,7 +180,7 @@ function color(variable, fallback) {
 
             <h2 class="font-bold text-lg">Button components</h2>
             <div class="grid grid-cols-5 gap-5">
-                <x-rapidez::button>Button</x-rapidez::button>
+                <x-rapidez::button.muted>Muted</x-rapidez::button.muted>
                 <x-rapidez::button.primary>Primary</x-rapidez::button.primary>
                 <x-rapidez::button.secondary>Secondary</x-rapidez::button.secondary>
                 <x-rapidez::button.outline>Outline</x-rapidez::button.outline>

diff --git a/resources/views/components/button/button.blade.php b/resources/views/components/button/button.blade.php
@@ -7,6 +7,6 @@
 <x-rapidez::button>Something</x-rapidez::button>
 ```
 --}}
-<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
     {{ $slot }}
 </x-rapidez::button.base>
diff --git a/resources/views/components/button/conversion.blade.php b/resources/views/components/button/conversion.blade.php
@@ -7,6 +7,6 @@
 <x-rapidez::button.conversion>Something</x-rapidez::button.conversion>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-conversion text-conversion-text') }}>
+<x-rapidez::button {{ $attributes->twMerge('bg-conversion hover:bg-opacity-80 text-conversion-text border-b border-b-black/20') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button>
diff --git a/resources/views/components/button/muted.blade.php b/resources/views/components/button/muted.blade.php
@@ -0,0 +1,10 @@
+{{--
+The muted button is a variant used for basic use cases.
+Example:
+```
+<x-rapidez::button.muted>Something</x-rapidez::button.muted>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('bg text-muted hover:text hover:bg-emphasis border-b border-b-black/10') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/button/outline.blade.php b/resources/views/components/button/outline.blade.php
@@ -8,4 +8,4 @@
 --}}
 <x-rapidez::button {{ $attributes->twMerge('bg-transparent border text-default hover:border-emphasis') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button>
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.primary>Something</x-rapidez::button.primary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text') }}>
+<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
 </x-rapidez::button>
diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.secondary>Something</x-rapidez::button.secondary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text') }}>
+<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
 </x-rapidez::button>
diff --git a/resources/views/components/button/slider.blade.php b/resources/views/components/button/slider.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.slider>Icon</x-rapidez::button.slider>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border') }}>
+<x-rapidez::button {{ $attributes->twMerge('bg-white p-0 rounded-full size-12 border hover:border-emphasis') }}>
     {{ $slot }}
 </x-rapidez::button>
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
+<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
diff --git a/resources/views/components/input/select/select.blade.php b/resources/views/components/input/select/select.blade.php
@@ -18,6 +18,6 @@
 </label>
 ```
 --}}
-<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>
+<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>
     {{ $slot }}
 </select>
diff --git a/resources/views/components/input/textarea/textarea.blade.php b/resources/views/components/input/textarea/textarea.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>{{ $slot }}</textarea>
+<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>{{ $slot }}</textarea>
diff --git a/resources/views/components/slideover/slideover.blade.php b/resources/views/components/slideover/slideover.blade.php
@@ -17,7 +17,7 @@
 ## Body Class
 Add this class to prevent scrolling when slideover is open:
 ```html
-<body class="has-[.slideover-checkbox:checked]:overflow-hidden">
+<body class="has-[.prevent-scroll:checked]:overflow-clip">
 ```
 
 ## Nesting Slideovers
@@ -77,7 +77,7 @@
 <x-rapidez::tag :is="$tag">
     <input id="{{ 'close-' . $id }}" class="hidden" type="reset">
     @if (!$hasParent)
-        <input @checked($open) id="{{ $id }}" class="peer hidden slideover-checkbox" type="checkbox">
+        <input @checked($open) id="{{ $id }}" class="peer hidden prevent-scroll" type="checkbox">
         <label
             for="{{ $closeId }}"
             class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"