Tailwind 4 update + refactor using Vite and moved to colors

.env

@@ -0,0 +1 @@
+APP_URL=http://127.0.0.1:8000

.github/workflows/demo.yaml

@@ -15,6 +15,10 @@ jobs:
           ref: ${{ github.event.release.target_commitish }}
           token: ${{ secrets.RAPIDEZ_ACTIONS_ACCOUNT_PAT }}
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
@@ -26,6 +30,15 @@ jobs:
       - name: Fix permissions
         run: sudo chmod -R 0777 vendor/orchestra/testbench-core/laravel/
 
+      - name: Install Yarn dependencies
+        run: npm install -g yarn && yarn
+
+      - name: Frontend Build
+        run: yarn build
+
+      - name: Generate demo
+        run: composer symlink-public
+
       - name: Generate demo
         run: composer generate-demo
 

.gitignore

@@ -1,3 +1,5 @@
 /composer.lock
+/public
 /node_modules
 /vendor
+/yarn.lock

README.md

@@ -42,75 +42,19 @@ The base button doesn't have any styling; here, we only use the `x-rapidez::tag`
 composer require rapidez/blade-components
 ```
 
-Make sure these colors and z-indexes are present in your `tailwind.config.js` file:
-```js
-colors: {
-    colors: {
-        primary: {
-            DEFAULT: color('--primary', '#2FBC85'),
-            text: color('--primary-text', colors.white),
-        },
-        secondary: {
-            DEFAULT: color('--secondary', '#202F60'),
-            text: color('--secondary-text', colors.white),
-        },
-        conversion: {
-            DEFAULT: color('--conversion', colors.green[700]),
-            text: color('--conversion-text', colors.white),
-        },
-        foreground: {
-            emphasis: color('--foreground-emphasis', colors.slate[900]),
-            DEFAULT: color('--foreground', colors.slate[800]),
-            muted: color('--foreground-muted', colors.slate[600]),
-        },
-        border: {
-            emphasis: color('--border-emphasis', colors.slate[400]),
-            DEFAULT: color('--border', colors.slate[300]),
-            muted: color('--border-muted', colors.slate[100]),
-        },
-        background: {
-            emphasis: color('--background-emphasis', colors.slate[200]),
-            DEFAULT: color('--background', colors.slate[100]),
-            muted: color('--background-muted', colors.slate[50]),
-        },
-        backdrop: color('--backdrop', 'rgba(0, 0, 0, 0.4)'),
-    },
-    zIndex: {
-        'slideover': '120',
-        'slideover-overlay': '10',
-        'slideover-sidebar': '20',
-    },
-    textColor: (theme) => ({
-        default: theme('colors.foreground'),
-        ...theme('colors.foreground'),
-    }),
-    borderColor: (theme) => ({
-        default: theme('colors.border'),
-        ...theme('colors.border'),
-    }),
-    backgroundColor: (theme) => ({
-        default: theme('colors.background'),
-        ...theme('colors.background'),
-    }),
-    ringColor: (theme) => ({
-        default: theme('colors.border'),
-        ...theme('colors.border'),
-    }),
-    outlineColor: (theme) => ({
-        default: theme('colors.border'),
-        ...theme('colors.border'),
-    }),
-}
-```
-
-And make sure you add this in your `tailwind.config.js` file:
-```js
-import colors from 'tailwindcss/colors'
-
-function color(variable, fallback) {
-    return 'color-mix(in srgb, var(' + variable + ', ' + fallback + ') calc(100% * <alpha-value>), transparent)'
-}
+And include the CSS file in your `resources/css/app.css`:
 ```
+@import '../../vendor/rapidez/blade-components/resources/css/package.css';
+```
+
+If you're not using Tailwind yet, you've to make sure you've setup Tailwind 4 with these plugins:
+
+- [Forms](https://github.com/tailwindlabs/tailwindcss-forms)
+- [Typography](https://github.com/tailwindlabs/tailwindcss-typography)
+
+A minimal setup can be found in this repos `app.css`, `package.json` and `vite.config.js`.
+
+More information about the usage and variables can be found in the Rapidez docs: https://docs.rapidez.io/5.x/theming.html#css
 
 ### Views
 
@@ -119,14 +63,6 @@ If you like to change the components you can publish the views with:
 php artisan vendor:publish --tag=rapidez-blade-components-views
 ```
 
-### Prose component
-
-If you're going to use the Prose component and you're not using Rapidez; you've to import the CSS file manually:
-```
-@import '../../vendor/rapidez/blade-components/resources/css/package.css';
-```
-With Rapidez this is already imported from the [app.js](https://github.com/rapidez/rapidez/blob/master/resources/js/app.js).
-
 ### Read more component
 
 The [readmore component](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php) includes some Javascript, we're using a [Blade Stack](https://laravel.com/docs/master/blade#stacks) named `foot` for that. Make sure you've an `@stack('foot')` before your closing `</body>` tag. Within Rapidez this is already present within the [`layouts/app.blade.php`](https://github.com/rapidez/core/blob/master/resources/views/layouts/app.blade.php).
@@ -225,7 +161,7 @@ Route::view('components', 'rapidez::components-preview');
 
 ## Development
 
-When you're working on this package you can use `composer preview-demo` to get a preview in the browser. There is also another script: `generate-demo` which runs automatically on push.
+When you're working on this package you should first install the frontend dependencies with `yarn`, create an initial build with `yarn build`, symlink the public build with `yarn symlink-public` and to show a preview in the browser use `yarn preview`.
 
 ## License
 

composer.json

@@ -42,6 +42,7 @@
         }
     },
     "scripts": {
+        "symlink-public": "@php vendor/bin/testbench workbench:sync-skeleton --ansi",
         "preview-demo": ["Composer\\Config::disableProcessTimeout", "@php vendor/bin/testbench serve --ansi"],
         "generate-demo": "@php vendor/bin/testbench generate-demo --ansi"
     }

package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@rapidez/blade-components",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "prod": "vite build",
+        "symlink-public": "composer symlink-public",
+        "preview-demo": "composer preview-demo",
+        "generate-demo": "composer generate-demo",
+        "preview": "concurrently 'yarn preview-demo' 'yarn dev'"
+    },
+    "devDependencies": {
+        "@tailwindcss/forms": "^0.5.3",
+        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/vite": "^4.2.1",
+        "concurrently": "^9.2.1",
+        "laravel-vite-plugin": "^2.0.0",
+        "tailwindcss": "^4.2.1",
+        "vite": "^7.0"
+    },
+    "dependencies": {}
+}

resources/css/app.css

@@ -0,0 +1,8 @@
+@import 'tailwindcss' source(none);
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@source '../**/*.blade.php';
+
+@import './package.css';

resources/css/components/prose.css

@@ -2,4 +2,4 @@
     @apply prose font-sans text text-pretty max-w-none
     prose-headings:text prose-a:text-primary prose-strong:text prose-blockquote:text
     prose-a:prose-headings:no-underline prose-a:prose-headings:text prose-th:text-left;
-}
+}

resources/css/components/rapidez.css

@@ -0,0 +1,110 @@
+@theme {
+    /*
+    Rapidez colors
+    See: https://docs.rapidez.io/5.x/theming.html#colors
+    */
+
+    --primary: #2fbc85;
+    --primary-text: var(--color-white);
+
+    --secondary: #202f60;
+    --secondary-text: var(--color-white);
+
+    --conversion: var(--color-green-700);
+    --conversion-text: var(--color-white);
+
+    --foreground-emphasis: var(--color-slate-900);
+    --foreground: var(--color-slate-800);
+    --foreground-muted: var(--color-slate-600);
+
+    --border-active: var(--color-slate-800);
+    --border-emphasis: var(--color-slate-400);
+    --border: var(--color-slate-300);
+    --border-muted: var(--color-slate-100);
+
+    --background-active: var(--color-slate-800);
+    --background-emphasis: var(--color-slate-200);
+    --background: var(--color-slate-100);
+    --background-muted: var(--color-slate-50);
+
+    /* Utilities where the Rapidez colors are used */
+
+    --color-primary: var(--primary);
+    --color-primary-text: var(--primary-text);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-text: var(--secondary-text);
+
+    --color-conversion: var(--conversion);
+    --color-conversion-text: var(--conversion-text);
+
+    --text-color-emphasis: var(--foreground-emphasis);
+    --text-color-default: var(--foreground);
+    --text-color-muted: var(--foreground-muted);
+
+    --border-color-active: var(--border-active);
+    --border-color-emphasis: var(--border-emphasis);
+    --border-color-default: var(--border);
+    --border-color-muted: var(--border-muted);
+
+    --ring-color-active: var(--border-active);
+    --ring-color-emphasis: var(--border-emphasis);
+    --ring-color-default: var(--border);
+    --ring-color-muted: var(--border-muted);
+
+    --outline-color-active: var(--border-active);
+    --outline-color-emphasis: var(--border-emphasis);
+    --outline-color-default: var(--border);
+    --outline-color-muted: var(--border-muted);
+
+    --background-color-active: var(--background-active);
+    --background-color-emphasis: var(--background-emphasis);
+    --background-color-default: var(--background);
+    --background-color-muted: var(--background-muted);
+
+    --color-backdrop: rgba(0, 0, 0, 0.4);
+
+    --z-index-slideover: 120;
+    --z-index-slideover-overlay: 10;
+    --z-index-slideover-sidebar: 20;
+}
+
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--border, currentColor);
+    }
+
+    button:not(:disabled),
+    [role='button']:not(:disabled) {
+        cursor: pointer;
+    }
+}
+
+@utility text {
+    color: var(--text-color-default);
+}
+
+@utility bg {
+    background-color: var(--background-color-default);
+}
+
+/* Remove default browser arrows for input type="number" */
+.arrows-hidden[type='number']::-webkit-inner-spin-button,
+.arrows-hidden[type='number']::-webkit-outer-spin-button {
+    @apply appearance-none m-0;
+}
+
+/* Firefox */
+.arrows-hidden[type='number'] {
+    -moz-appearance: textfield;
+}
+
+@supports (interpolate-size: allow-keywords) {
+    :root {
+        interpolate-size: allow-keywords;
+    }
+}

resources/css/package.css

@@ -1,2 +1,2 @@
-@import './components/prose.css';
-@import './components/detail-summary.css';
+@import './components/rapidez.css';
+@import './components/prose.css';