Skip to content

Commit ef5811c

Browse files
QuentinGabQuentinGab
committed
V2 CSS only
1 parent 500651a commit ef5811c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1368
-883
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,6 @@ phpstan.neon
3131
testbench.yaml
3232
/docs
3333
/coverage
34-
storage
34+
storage
35+
36+
*.hot

‎README.md‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ composer require elegantly/blade-kit
1818
To make it work with tailwindcss v4, you must add the following lines to your `app.css`.
1919

2020
```css
21-
@import "../../vendor/elegantly/blade-kit/theme.css";
21+
@import "../../vendor/elegantly/blade-kit/styles.css";
2222
@source "../../vendor/elegantly/blade-kit/resources/views/**/*.blade.php";
23-
@source "../../vendor/elegantly/blade-kit/src/Ui/**/*.php";
2423
```
2524

2625
You can publish the config file with:
@@ -32,24 +31,8 @@ php artisan vendor:publish --tag="blade-kit-config"
3231
This is the contents of the published config file:
3332

3433
```php
35-
use Elegantly\Kit\Ui\Base;
36-
use Elegantly\Kit\Ui\Button;
37-
use Elegantly\Kit\Ui\Input;
38-
use Elegantly\Kit\Ui\Select;
39-
use Elegantly\Kit\Ui\SwitchUi;
40-
use Elegantly\Kit\Ui\Tag;
41-
4234
return [
43-
44-
'ui' => [
45-
'base' => Base::class,
46-
'button' => Button::class,
47-
'input' => Input::class,
48-
'select' => Select::class,
49-
'tag' => Tag::class,
50-
'switch' => SwitchUi::class,
51-
],
52-
35+
//
5336
];
5437
```
5538

@@ -62,13 +45,11 @@ php artisan vendor:publish --tag="blade-kit-views"
6245
## Usage
6346

6447
```html
65-
<x-kit::button class="rounded-md font-semibold" color="white">
48+
<x-kit::button color="white" class="rounded-md font-semibold">
6649
Button
6750
</x-kit::button>
6851
```
6952

70-
See full documentation [here](https://elegantly.dev/blade-kit#buttons).
71-
7253
## Testing
7354

7455
```bash

‎bun.lock‎

Lines changed: 242 additions & 0 deletions
Large diffs are not rendered by default.

‎config/blade-kit.php‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,5 @@
11
<?php
22

3-
use Elegantly\Kit\Ui\Base;
4-
use Elegantly\Kit\Ui\Button;
5-
use Elegantly\Kit\Ui\Input;
6-
use Elegantly\Kit\Ui\Select;
7-
use Elegantly\Kit\Ui\SwitchUi;
8-
use Elegantly\Kit\Ui\Tag;
9-
103
return [
11-
12-
'ui' => [
13-
'base' => Base::class,
14-
'button' => Button::class,
15-
'input' => Input::class,
16-
'select' => Select::class,
17-
'tag' => Tag::class,
18-
'switch' => SwitchUi::class,
19-
],
20-
4+
//
215
];

‎package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "blade-kit",
3+
"type": "module",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"@tailwindcss/vite": "^4.1.13",
11+
"laravel-vite-plugin": "^2.0.1",
12+
"tailwindcss": "^4.1.13"
13+
}
14+
}

‎resources/css/components/badge.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@layer components {
2+
.el-badge {
3+
@apply flex items-center justify-center rounded-full border-2 border-white text-[0.5rem] font-bold leading-none;
4+
}
5+
}

‎resources/css/components/button.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@layer components {
2+
.el-button {
3+
@apply shrink-0 relative align-middle inline-flex items-center outline-offset-2 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 active:outline-2;
4+
5+
& input {
6+
@apply pointer-events-none absolute left-0 top-0 size-full appearance-none opacity-0;
7+
}
8+
9+
.el-button-icon {
10+
@apply relative shrink-0 leading-none;
11+
}
12+
13+
&[data-size="2xs"] .el-button-icon {
14+
@apply size-4 p-px text-sm;
15+
}
16+
17+
&[data-size="xs"] .el-button-icon {
18+
@apply size-4 text-base;
19+
}
20+
21+
&[data-size="sm"] .el-button-icon,
22+
&[data-size="base"] .el-button-icon,
23+
&[data-size="md"] .el-button-icon {
24+
@apply size-5 p-0.5 text-base;
25+
}
26+
27+
&[data-size="lg"] .el-button-icon {
28+
@apply size-6 p-0.5 text-xl;
29+
}
30+
31+
&[data-size="xl"] .el-button-icon {
32+
@apply size-7 p-0.5;
33+
}
34+
35+
&[data-color="black"] {
36+
@apply hover:bg-gray-700 hover:text-white dark:hover:bg-zinc-300 dark:hover:text-black has-checked:bg-black has-checked:text-white;
37+
}
38+
&[data-color="white"] {
39+
@apply hover:bg-gray-100 hover:text-black dark:hover:bg-zinc-900 dark:hover:text-white has-checked:bg-white has-checked:text-black;
40+
}
41+
&[data-color="gray"] {
42+
@apply hover:bg-gray-200 hover:text-gray-900;
43+
}
44+
&[data-color="sky"] {
45+
@apply hover:bg-sky-600 hover:text-white has-checked:bg-sky-500 has-checked:text-white;
46+
}
47+
&[data-color="sky-light"] {
48+
@apply hover:bg-sky-400/40 hover:text-sky-800;
49+
}
50+
&[data-color="emerald"] {
51+
@apply hover:bg-emerald-600 hover:text-white has-checked:bg-emerald-500 has-checked:text-white;
52+
}
53+
&[data-color="emerald-light"] {
54+
@apply hover:bg-emerald-400/40 hover:text-emerald-800;
55+
}
56+
&[data-color="rose"] {
57+
@apply hover:bg-rose-600 hover:text-white has-checked:bg-rose-500 has-checked:text-white;
58+
}
59+
&[data-color="rose-light"] {
60+
@apply hover:bg-rose-400/40 hover:text-rose-800;
61+
}
62+
&[data-color="purple"] {
63+
@apply hover:bg-purple-600 hover:text-white has-checked:bg-purple-500 has-checked:text-white;
64+
}
65+
&[data-color="purple-light"] {
66+
@apply hover:bg-purple-400/40 hover:text-purple-800;
67+
}
68+
&[data-color="amber"] {
69+
@apply hover:bg-amber-600 hover:text-white has-checked:bg-amber-500 has-checked:text-white;
70+
}
71+
&[data-color="amber-light"] {
72+
@apply hover:bg-amber-400/40 hover:text-amber-800;
73+
}
74+
75+
&[data-color-checked="black"] {
76+
@apply has-checked:bg-black has-checked:text-white;
77+
}
78+
&[data-color-checked="white"] {
79+
@apply has-checked:bg-white has-checked:text-black;
80+
}
81+
&[data-color-checked="sky"] {
82+
@apply has-checked:bg-sky-500 has-checked:text-white;
83+
}
84+
&[data-color-checked="rose"] {
85+
@apply has-checked:bg-rose-500 has-checked:text-white;
86+
}
87+
&[data-color-checked="amber"] {
88+
@apply has-checked:bg-amber-500 has-checked:text-white;
89+
}
90+
&[data-color-checked="emerald"] {
91+
@apply has-checked:bg-emerald-500 has-checked:text-white;
92+
}
93+
}
94+
}

‎resources/css/components/checkbox.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@layer components {
2+
.el-checkbox {
3+
@apply appearance-none p-0 inline-block align-middle box-border shrink-0 text-black size-4 rounded border-1 shadow-sm border-black/20 transition-all
4+
focus:ring-1
5+
checked:border-transparent checked:bg-current checked:bg-cover checked:bg-center checked:bg-no-repeat;
6+
7+
&[type="radio"] {
8+
@apply checked:bg-radio;
9+
}
10+
11+
&[type="checkbox"] {
12+
@apply checked:bg-checkbox;
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)