Skip to content

Commit a1d5235

Browse files
committed
manual migration
1 parent c20c4c0 commit a1d5235

File tree

6 files changed

+44
-33
lines changed

6 files changed

+44
-33
lines changed

resources/views/components/button/base.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
\Elegantly\Kit\Facades\Kit::button()->size($size)->color($color)->font()->background()->outline()->border()->ring()->spacing()->hover(),
1313
'shrink-0 relative align-middle',
1414
'inline-flex items-center',
15-
'outline-2 outline-offset-2',
15+
'outline-offset-2',
1616
'transition-colors',
1717
'cursor-pointer',
1818
'disabled:cursor-not-allowed disabled:opacity-50',
19-
'focus-visible:outline active:outline',
19+
'focus-visible:outline-2 active:outline-2',
2020
]) !!} @disabled($disabled)
2121
@if ($tag === 'button') type="{{ $type }}" @endif
2222
@if ($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif

resources/views/components/input/base.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<input type="{{ $type }}"
1313
{{ $attributes->class([
1414
\Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->font()->spacing()->border()->ring()->background()->outline(),
15-
'inline-block w-full ring-inset focus:outline focus-visible:outline outline-2',
15+
'inline-block w-full ring-inset focus:outline-2 focus-visible:outline-2',
1616
]) }}
1717
@if ($autofocus) autofocus @endif @disabled($disabled) @required($required)
1818
@if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif

resources/views/components/input/parent.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<div
66
{{ $attributes->class([
77
'flex',
8-
'outline-2 outline-offset-2',
9-
'has-focus-visible:outline',
8+
'outline-offset-2',
9+
'has-focus-visible:outline-2',
1010
\Elegantly\Kit\Facades\Kit::input()->color($color)->font()->background()->border()->ring()->outline(),
1111
]) }}>
1212

resources/views/components/switch/base.blade.php

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,19 @@
1313
'focus:ring-transparent dark:focus:ring-transparent',
1414
'focus-within:ring-0 dark:focus-within:ring-0',
1515
'focus:shadow-none dark:focus:shadow-none',
16-
'focus:before:outline before:outline-2 before:outline-offset-2',
16+
'focus:before:outline-2 before:outline-offset-2',
1717
'after:absolute before:absolute',
1818
'after:top-0 before:top-0',
1919
'after:block before:inline-block',
2020
'before:rounded-full after:rounded-full',
21-
"after:content-[''] after:w-5 after:h-5 after:mt-0.5 after:ml-0.5",
21+
'after:w-5 after:h-5 after:mt-0.5 after:ml-0.5',
2222
'after:shadow-md after:duration-100',
23-
"before:content-[''] before:w-10 before:h-full",
23+
'before:w-10 before:h-full',
2424
'before:shadow-[inset_0_0_#000]',
2525
'after:bg-white dark:after:bg-gray-50',
2626
'dark:before:bg-gray-600',
2727
'checked:after:duration-300 checked:after:translate-x-4',
28-
'disabled:after:bg-opacity-75 disabled:cursor-not-allowed',
29-
'disabled:checked:before:bg-opacity-40',
28+
'disabled:cursor-not-allowed disabled:opacity-50',
3029
\Elegantly\Kit\Facades\Kit::switch()->color($color)->background()->outline(),
3130
]) !!} type="checkbox" @disabled($disabled) @checked($checked)
3231
@required($required)>

src/Ui/SwitchUi.php

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ class SwitchUi extends Base
1010
public function background(): static
1111
{
1212
return $this->append(match ($this->color) {
13-
'white' => 'before:bg-gray-300 before:checked:bg-white dark:before:bg-gray-600 dark:before:checked:bg-black',
14-
'black' => 'before:bg-gray-300 before:checked:bg-black dark:before:bg-gray-600 dark:before:checked:bg-white',
15-
'gray' => 'before:bg-gray-300 before:checked:bg-gray-500 dark:before:bg-gray-600 dark:before:checked:bg-white',
16-
'emerald' => 'before:bg-gray-300 before:checked:bg-emerald-500 dark:before:bg-gray-600 dark:before:checked:bg-emerald-700',
17-
'sky' => 'before:bg-gray-300 before:checked:bg-sky-500 dark:before:bg-gray-600 dark:before:checked:bg-sky-700',
18-
'rose' => 'before:bg-gray-300 before:checked:bg-rose-500 dark:before:bg-gray-600 dark:before:checked:bg-rose-700',
19-
'purple' => 'before:bg-gray-300 before:checked:bg-purple-500 dark:before:bg-gray-600 dark:before:checked:bg-purple-700',
20-
'yellow' => 'before:bg-gray-300 before:checked:bg-yellow-500 dark:before:bg-gray-600 dark:before:checked:bg-yellow-700',
21-
'amber' => 'before:bg-gray-300 before:checked:bg-amber-500 dark:before:bg-gray-600 dark:before:checked:bg-amber-700',
13+
'white' => 'before:bg-gray-300 checked:before:bg-white dark:before:bg-gray-600 dark:checked:before:bg-black',
14+
'black' => 'before:bg-gray-300 checked:before:bg-black dark:before:bg-gray-600 dark:checked:before:bg-white',
15+
'gray' => 'before:bg-gray-300 checked:before:bg-gray-500 dark:before:bg-gray-600 dark:checked:before:bg-white',
16+
'emerald' => 'before:bg-gray-300 checked:before:bg-emerald-500 dark:before:bg-gray-600 dark:checked:before:bg-emerald-700',
17+
'sky' => 'before:bg-gray-300 checked:before:bg-sky-500 dark:before:bg-gray-600 dark:checked:before:bg-sky-700',
18+
'rose' => 'before:bg-gray-300 checked:before:bg-rose-500 dark:before:bg-gray-600 dark:checked:before:bg-rose-700',
19+
'purple' => 'before:bg-gray-300 checked:before:bg-purple-500 dark:before:bg-gray-600 dark:checked:before:bg-purple-700',
20+
'yellow' => 'before:bg-gray-300 checked:before:bg-yellow-500 dark:before:bg-gray-600 dark:checked:before:bg-yellow-700',
21+
'amber' => 'before:bg-gray-300 checked:before:bg-amber-500 dark:before:bg-gray-600 dark:checked:before:bg-amber-700',
2222
default => ''
2323
});
2424
}

workbench/resources/views/demo.blade.php

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<script src="https://cdn.tailwindcss.com"></script>
7+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
88

99
<script defer src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.min.css" />
@@ -26,13 +26,13 @@
2626

2727
<body class="">
2828

29-
<div class="grid grid-cols-1 divide-x md:grid-cols-3 *:h-60">
29+
<div class="grid grid-cols-1 divide-x divide-gray-200 *:h-60 md:grid-cols-3">
3030

3131
<div class="isolate flex flex-col">
3232
<div class="p-3">
3333
<h1 class="font-semibold">Button</h1>
3434
</div>
35-
<div class="flex grow items-center justify-center border-b">
35+
<div class="flex grow items-center justify-center border-b border-gray-200">
3636
<x-kit::button color="white" class="rounded-md ring-1 ring-inset">
3737
Button
3838
</x-kit::button>
@@ -43,7 +43,7 @@
4343
<div class="p-3">
4444
<h1 class="font-semibold">Button File</h1>
4545
</div>
46-
<div class="flex grow items-center justify-center border-b">
46+
<div class="flex grow items-center justify-center border-b border-gray-200">
4747
<x-kit::button.file name="upload" color="white" class="rounded-md ring-1 ring-inset">
4848
<x-slot:icon>
4949
<iconify-icon icon="heroicons:arrow-up-tray"></iconify-icon>
@@ -57,7 +57,7 @@
5757
<div class="p-3">
5858
<h1 class="font-semibold">Button Copy</h1>
5959
</div>
60-
<div class="flex grow items-center justify-center border-b">
60+
<div class="flex grow items-center justify-center border-b border-gray-200">
6161
<x-kit::button.copy tooltip="Copy" tooltip-checked="Copied" copy="Foo" color="white"
6262
class="rounded-md ring-1 ring-inset">
6363
<x-slot:icon>
@@ -75,7 +75,7 @@ class="rounded-md ring-1 ring-inset">
7575
<div class="p-3">
7676
<h1 class="font-semibold">Tag</h1>
7777
</div>
78-
<div class="flex grow items-center justify-center border-b">
78+
<div class="flex grow items-center justify-center border-b border-gray-200">
7979
<x-kit::tag color="white" class="rounded-full ring-1 ring-inset">
8080
Tag
8181
<x-slot:button>
@@ -93,7 +93,7 @@ class="rounded-md ring-1 ring-inset">
9393
<div class="p-3">
9494
<h1 class="font-semibold">Popover</h1>
9595
</div>
96-
<div class="flex grow items-center justify-center border-b">
96+
<div class="flex grow items-center justify-center border-b border-gray-200">
9797
<x-kit::popover class="">
9898
<x-kit::button class="rounded-md ring-1 ring-inset" color="white" x-ref="trigger"
9999
x-on:click.stop="open = !open">
@@ -105,10 +105,11 @@ class="rounded-md ring-1 ring-inset">
105105

106106
<x-kit::popover.content class="z-20 p-3 md:p-0" x-anchor.bottom-end.offset.5="$refs.trigger"
107107
x-transition.origin.top="">
108-
<div class="mt-auto flex w-full flex-col rounded-lg border bg-white shadow-lg md:max-w-72">
108+
<div
109+
class="mt-auto flex w-full flex-col rounded-lg border border-gray-200 bg-white shadow-lg md:max-w-72">
109110

110111
<div class="p-1">
111-
<x-kit::input.parent color="gray" class="rounded-md outline-0! ring-1 ring-inset">
112+
<x-kit::input.parent color="gray" class="outline-0! rounded-md ring-1 ring-inset">
112113
<x-kit::input size="sm" color="transparent" placeholder="Search">
113114
<x-slot:icon>
114115
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
@@ -141,7 +142,7 @@ class="rounded-md ring-1 ring-inset">
141142
<p class="px-2.5 py-0.5 text-sm font-semibold">
142143
Recent
143144
</p>
144-
<span class="grow border-b"></span>
145+
<span class="grow border-b border-gray-200"></span>
145146
</div>
146147

147148
<div class="flex max-h-full flex-col gap-0.5 overflow-auto p-1 md:max-h-56">
@@ -179,7 +180,7 @@ class="rounded-md ring-1 ring-inset">
179180
<div class="p-3">
180181
<h1 class="font-semibold">Select</h1>
181182
</div>
182-
<div class="flex grow items-center justify-center border-b">
183+
<div class="flex grow items-center justify-center border-b border-gray-200">
183184
<x-kit::select color="white" class="rounded ring-1 ring-inset">
184185
<option>
185186
Option 1
@@ -192,8 +193,19 @@ class="rounded-md ring-1 ring-inset">
192193
<div class="p-3">
193194
<h1 class="font-semibold">Switch</h1>
194195
</div>
195-
<div class="flex grow items-center justify-center border-b">
196-
<x-kit::switch color="white">
196+
<div class="flex grow items-center justify-center border-b border-gray-200">
197+
<x-kit::switch>
198+
Switch
199+
</x-kit::switch>
200+
</div>
201+
</div>
202+
203+
<div class="isolate flex flex-col">
204+
<div class="p-3">
205+
<h1 class="font-semibold">Disabled Switch</h1>
206+
</div>
207+
<div class="flex grow items-center justify-center border-b border-gray-200">
208+
<x-kit::switch disabled checked>
197209
Switch
198210
</x-kit::switch>
199211
</div>
@@ -203,7 +215,7 @@ class="rounded-md ring-1 ring-inset">
203215
<div class="p-3">
204216
<h1 class="font-semibold">Input</h1>
205217
</div>
206-
<div class="flex grow items-center justify-center border-b">
218+
<div class="flex grow items-center justify-center border-b border-gray-200">
207219
<x-kit::input.parent color="gray" class="rounded-md ring-1 ring-inset">
208220
<x-kit::input color="transparent" placeholder="Search">
209221
<x-slot:icon>

0 commit comments

Comments
 (0)