Implemented rapidez/blade-components and v3 colors (#39)

composer.json

@@ -20,7 +20,7 @@
         "illuminate/database": "^10.0|^11.0",
         "illuminate/support": "^10.0|^11.0",
         "illuminate/view": "^10.0|^11.0",
-        "rapidez/core": "^2.8|^3.0",
+        "rapidez/core": "^3.0",
         "blade-ui-kit/blade-heroicons": "^2.0"
     },
     "autoload": {

resources/views/account/listing.blade.php

@@ -10,7 +10,7 @@
             <div v-if="wishlists" class="space-y-0.5 my-5">
                 <div
                     v-for="(wishlist, index) in wishlists"
-                    class="bg-ct-inactive-100 p-6 sm:px-9 sm:pt-6 sm:pb-9 rounded flex flex-col gap-3"
+                    class="bg p-6 sm:px-9 sm:pt-6 sm:pb-9 rounded flex flex-col gap-3"
                     :key="wishlist.id"
                 >
                     <div class="flex flex-col">

resources/views/account/partials/buttons.blade.php

@@ -1,8 +1,8 @@
 <div class="flex flex-wrap w-full justify-between gap-2">
-    <x-rapidez-mw::button.outline href="/account">
+    <x-rapidez::button.outline href="/account">
         @lang('Back to dashboard')
-    </x-rapidez-mw::button.outline>
-    <x-rapidez-mw::button.accent v-on:click="addWishlist('{{ __('New wishlist') }}')">
+    </x-rapidez::button.outline>
+    <x-rapidez::button.secondary v-on:click="addWishlist('{{ __('New wishlist') }}')">
         @lang('Create new wishlist')
-    </x-rapidez-mw::button.accent>
+    </x-rapidez::button.secondary>
 </div>

resources/views/account/partials/details/addtocart.blade.php

@@ -1,3 +1,3 @@
-<x-rapidez-mw::button.accent @click.prevent="addAllToCart" class="max-md:w-full">
+<x-rapidez::button.secondary @click.prevent="addAllToCart" class="max-md:w-full">
     @lang('Add all items to cart')
-</x-rapidez-mw::button.accent>
+</x-rapidez::button.secondary>

resources/views/account/partials/details/back-button.blade.php

@@ -1 +1 @@
-<x-rapidez-mw::button.outline href="{{ route('wishlist.listing') }}" class="mt-5">@lang('Back to wishlists')</x-rapidez-mw::button.outline>
+<x-rapidez::button.outline href="{{ route('wishlist.listing') }}" class="mt-5">@lang('Back to wishlists')</x-rapidez::button.outline>

resources/views/account/partials/details/description.blade.php

@@ -1,3 +1,3 @@
-<div v-if="wishlist.description" class="p-4 text-ct-primary rounded bg-ct-inactive-100 mb-4 whitespace-pre-line">
+<div v-if="wishlist.description" class="p-4 text-primary rounded bg mb-4 whitespace-pre-line">
     <p>@{{ wishlist.description }}</p>
 </div>

resources/views/account/partials/details/edit-button.blade.php

@@ -1,8 +1,8 @@
 @if($editable)
     <toggler v-slot="{ isOpen, toggle, close }" v-cloak>
         <div v-on-click-away="close">
-            <button @click="toggle" class="flex items-center justify-center bg-white border rounded w-9 h-9">
-                <x-heroicon-o-ellipsis-horizontal class="w-5 h-5" />
+            <button @click="toggle" class="flex items-center justify-center bg-white border rounded size-9">
+                <x-heroicon-o-ellipsis-horizontal class="size-5" />
             </button>
             <div v-show="isOpen" v-cloak>
                 @include('rapidez-mw::account.partials.details.edit')

resources/views/account/partials/details/edit.blade.php

@@ -1,11 +1,11 @@
 <x-rapidez-mw::dropdown class="absolute right-0 top-11 w-60 flex flex-col p-4 sm:px-7 sm:py-6">
     <x-rapidez-mw::button.link v-if="wishlist" @click="toggleEdit">
         @lang('Change name')
-        <x-heroicon-o-pencil-square class="w-5 h-5"/>
+        <x-heroicon-o-pencil-square class="size-5"/>
     </x-rapidez-mw::button.link>
     <hr class="border-t my-4" />
     <x-rapidez-mw::button.link v-if="wishlist" @click="removeWishlist(wishlist.id, true)">
         @lang('Delete wishlist')
-        <x-heroicon-o-trash class="w-5 h-5"/>
+        <x-heroicon-o-trash class="size-5"/>
     </x-rapidez-mw::button.link>
 </x-rapidez-mw::dropdown>

resources/views/account/partials/details/product/name.blade.php

@@ -1,7 +1,7 @@
 <td class="max-sm:w-56 sm:flex-1">
     <div class="flex flex-col items-start">
-        <a :href="product.url" class="font-medium text-base">@{{ product.name }}</a>
-        <span v-if="category" class="text-ct-inactive text-sm">@{{ category }}</span>
-        <span v-if="!product.in_stock" class="text-sm text-ct-wishlist">@lang('Not in stock')</span>
+        <a :href="product.url" class="font-medium">@{{ product.name }}</a>
+        <span v-if="category" class="text-muted text-sm">@{{ category }}</span>
+        <span v-if="!product.in_stock" class="text-sm text">@lang('Not in stock')</span>
     </div>
 </td>

resources/views/account/partials/details/product/price.blade.php

@@ -1,3 +1,3 @@
 <td>
-    <span class="text-sm font-bold text-ct-primary">@{{ product.price | price }}</span>
+    <span class="text-sm font-bold text-primary">@{{ product.price | price }}</span>
 </td>

resources/views/account/partials/details/product/quantity.blade.php

@@ -3,7 +3,7 @@
         <button
             @disabled(!$editable)
             v-bind:disabled="self.quantity <= 0"
-            class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
+            class="flex-1 bg transition hover:bg-opacity-80"
             v-on:click="self.quantity--"
         >-</button>
         <input
@@ -18,7 +18,7 @@ class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] fo
         />
         <button
             @disabled(!$editable)
-            class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
+            class="flex-1 bg transition hover:bg-opacity-80"
             v-on:click="self.quantity++"
         >+</button>
     </div>

resources/views/account/partials/details/product/remove.blade.php

@@ -1,7 +1,7 @@
 @if($editable)
     <td>
         <button @click="remove" class="hover:opacity-75 max-md:ml-auto">
-            <x-heroicon-s-heart class="w-5 h-5 text-ct-wishlist" />
+            <x-heroicon-s-heart class="size-5 text" />
         </button>
     </td>
 @endif

resources/views/account/partials/details/title.blade.php

@@ -1,10 +1,10 @@
 <div class="flex flex-col">
     <template v-if="!editing">
         <x-rapidez-ct::title href="/account/wishlists">@{{ wishlist.title }}</x-rapidez-ct::title>
-        <div v-if="wishlist.shared" class="text-sm text-ct-inactive flex flex-col mt-2 gap-y-2">
-            <span>@lang('Sharing link'): <a :href="shareUrl" class="text-ct-primary underline">@{{ shareUrl }}</a></span>
+        <div v-if="wishlist.shared" class="text-sm text-muted flex flex-col mt-2 gap-y-2">
+            <span>@lang('Sharing link'): <a :href="shareUrl" class="text-primary underline">@{{ shareUrl }}</a></span>
             <template v-if="isSupported">
-                <x-rapidez-mw::button.accent v-on:click="share">@lang('Share')</x-rapidez-mw::button.accent>
+                <x-rapidez::button.secondary v-on:click="share">@lang('Share')</x-rapidez::button.secondary>
             </template>
         </div>
     </template>
@@ -16,13 +16,13 @@
                     <x-rapidez-ct::title href="/account/wishlists"></x-rapidez-ct::title>
                     <div class="relative border rounded">
                         <x-rapidez::input class="w-80 border-0 pr-12" name="Edit title" type="text" v-model="editing.title" />
-                        <x-rapidez-mw::button.accent class="!absolute -translate-y-1/2 top-1/2 right-1  ml-4 flex items-center justify-center !p-0 w-9 h-9">
-                            <x-heroicon-o-pencil-square class="w-4 h-4 text-white" />
-                        </x-rapidez-mw::button.accent>
+                        <x-rapidez::button.secondary class="!absolute -translate-y-1/2 top-1/2 right-1  ml-4 flex items-center justify-center !p-0 size-9">
+                            <x-heroicon-o-pencil-square class="size-5 text-white" />
+                        </x-rapidez::button.secondary>
                     </div>
                 </div>
                 <x-rapidez::textarea class="mt-2.5" label="" name="Description" v-model="editing.description"></x-rapidez::textarea>
-                <x-rapidez-ct::input.checkbox class="mt-2.5" v-model="editing.shared">@lang('Share this wishlist')</x-rapidez::checkbox>
+                <x-rapidez::input.checkbox class="mt-2.5" v-model="editing.shared">@lang('Share this wishlist')</x-rapidez::checkbox>
             </form>
         </template>
     @endif

resources/views/account/partials/details/wishlist.blade.php

@@ -61,7 +61,7 @@ class="border-b flex flex-wrap items-center gap-y-5 py-5 *:px-2 last:border-none
                                     </template>
                                 </tbody>
                             </table>
-                            <div class="flex rounded bg-ct-inactive-100 p-3 md:justify-end">
+                            <div class="flex rounded bg p-3 md:justify-end">
                                 @include('rapidez-mw::account.partials.details.addtocart')
                             </div>
                         </template>

resources/views/account/partials/edit-wishlist.blade.php

@@ -1,11 +1,11 @@
 <x-rapidez-mw::dropdown class="absolute right-0 top-6 w-60 flex flex-col p-4 sm:px-7 sm:py-6">
     <x-rapidez-mw::button.link v-if="wishlist" v-bind:href="'{{ route('wishlist.show', '') }}/'+wishlist.id">
         @lang('Edit')
-        <x-heroicon-o-pencil-square class="w-5 h-5"/>
+        <x-heroicon-o-pencil-square class="size-5"/>
     </x-rapidez-mw::button.link>
     <hr class="border-t my-4" />
     <x-rapidez-mw::button.link v-if="wishlist" @click="removeWishlist(wishlist.id)">
         @lang('Delete wishlist')
-        <x-heroicon-o-trash class="w-5 h-5"/>
+        <x-heroicon-o-trash class="size-5"/>
     </x-rapidez-mw::button.link>
 </x-rapidez-mw::dropdown>

resources/views/account/partials/list-item-title.blade.php

@@ -1,12 +1,12 @@
-<div class="flex items-center justfiy-between w-full font-medium text-ct-neutral text-base mb-2.5 relative">
+<div class="flex items-center justfiy-between w-full font-medium text mb-2.5 relative">
     <div class="w-full flex items-center gap-2">
         <span>@{{ wishlist.title }}</span>
         @include('rapidez-mw::account.partials.shared-wishlist')
     </div>
     <toggler v-slot="{ isOpen, toggle, close}" v-cloak>
         <div v-on-click-away="close">
             <button @click="toggle">
-                <x-heroicon-o-ellipsis-horizontal class="w-5 h-5" />
+                <x-heroicon-o-ellipsis-horizontal class="size-5" />
             </button>
             <div v-show="isOpen" v-cloak>
                 @include('rapidez-mw::account.partials.edit-wishlist')

resources/views/account/partials/list-item.blade.php

@@ -1,8 +1,8 @@
 <a class="flex items-center gap-x-7 bg-white rounded border pb-5 pt-4 px-7 hover:opacity-75" :href="'{{ route('wishlist.show', '') }}/'+wishlist.id">
-    <x-heroicon-s-heart class="w-5 h-5 text-ct-wishlist mt-1.5" />
+    <x-heroicon-s-heart class="size-5 text mt-1.5" />
     <div class="flex flex-col">
-        <div class="w-full text-base font-medium text-ct-neutral">@lang('Number of articles (:count)', ['count' => '@{{ wishlist.items.length }}'])</div>
-        <div class="w-full text-sm text-ct-inactive">@lang('Latest update: :date', ['date' => '@{{ wishlist.updated_at.substring(0,10) }}']) </div>
-        <div class="w-full text-sm text-ct-inactive max-w-48 max-md:truncate md:max-w-3xl">@{{ wishlist.description }}</div>
+        <div class="w-full font-medium text">@lang('Number of articles (:count)', ['count' => '@{{ wishlist.items.length }}'])</div>
+        <div class="w-full text-sm text-muted">@lang('Latest update: :date', ['date' => '@{{ wishlist.updated_at.substring(0,10) }}']) </div>
+        <div class="w-full text-sm text-muted max-w-48 max-md:truncate md:max-w-3xl">@{{ wishlist.description }}</div>
     </div>
 </a>

resources/views/account/partials/shared-wishlist.blade.php

@@ -1,3 +1,3 @@
-<a v-if="wishlist.shared" :href="'{{ route('wishlist.shared', '') }}/' + wishlist.sharing_token" class="text-ct-inactive text-sm hover:underline">
+<a v-if="wishlist.shared" :href="'{{ route('wishlist.shared', '') }}/' + wishlist.sharing_token" class="text-muted text-sm hover:underline">
     (@lang('shared'))
 </a>

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

@@ -1,3 +1,3 @@
-<x-rapidez-mw::button {{ $attributes->merge(['class' => 'w-full flex items-center justify-between text-base font-medium text-ct-primary !p-0 hover:opacity-75']) }}>
+<x-rapidez-mw::button {{ $attributes->merge(['class' => 'w-full flex items-center justify-between font-medium text-primary !p-0 hover:opacity-75']) }}>
     {{ $slot }}
 </x-rapidez-mw::button>

resources/views/components/dropdown.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->merge(['class' => 'z-10 bg-white border text-base drop-shadow-sm rounded']) }}>
+<div {{ $attributes->merge(['class' => 'z-10 bg-white border drop-shadow-sm rounded']) }}>
     {{ $slot }}
 </div>

resources/views/components/table/header.blade.php

@@ -1,5 +1,5 @@
-<thead {{ $attributes->class(['w-full rounded bg-ct-inactive-100']) }}>
-    <tr class="text-xs text-ct-inactive *:py-4 *:font-normal *:px-5">
+<thead {{ $attributes->class(['w-full rounded bg']) }}>
+    <tr class="text-xs text-muted *:py-4 *:font-normal *:px-5">
         {{ $slot }}
     </tr>
 </thead>

resources/views/partials/item/add.blade.php

@@ -3,6 +3,6 @@
     @include('rapidez-mw::partials.item.view')
 </div>
 <button @click="toggleItem(wishlist, {{ $productId }})">
-    <x-heroicon-s-heart v-if="findItem(wishlist, {{ $productId }})" class="w-5 h-5 text-ct-wishlist hover:opacity-80" />
-    <x-heroicon-o-heart v-else class="w-5 h-5 text-ct-border hover:text-ct-primary" />
+    <x-heroicon-s-heart v-if="findItem(wishlist, {{ $productId }})" class="size-5 text hover:opacity-80" />
+    <x-heroicon-o-heart v-else class="size-5 text-muted hover:text-primary" />
 </button>

resources/views/partials/item/button.blade.php

@@ -1,8 +1,8 @@
 <button v-if="$root.loggedIn" class="p-3" @click="toggle">
-    <x-heroicon-s-heart v-if="isWishlisted({{ $productId }})" class="w-5 h-5 text-ct-wishlist hover:opacity-80" />
-    <x-heroicon-o-heart v-else v-bind:class="{ 'text-ct-primary': isOpen, 'text-ct-border hover:text-ct-primary': !isOpen }" class="w-5 h-5 transition" />
+    <x-heroicon-s-heart v-if="isWishlisted({{ $productId }})" class="size-5 text hover:opacity-80" />
+    <x-heroicon-o-heart v-else v-bind:class="{ 'text-primary': isOpen, 'text-muted hover:text-primary': !isOpen }" class="size-5 transition" />
 </button>
 
 <button v-else class="p-3" @click="toggle">
-    <x-heroicon-o-heart v-bind:class="{ 'text-ct-primary': isOpen, 'text-ct-border hover:text-ct-primary': !isOpen }" class="w-5 h-5 transition" />
+    <x-heroicon-o-heart v-bind:class="{ 'text-primary': isOpen, 'text-muted hover:text-primary': !isOpen }" class="size-5 transition" />
 </button>

resources/views/partials/item/login.blade.php

@@ -1,3 +1,3 @@
 <template v-if="!$root.loggedIn">
-    @lang('You must log in to add a product to your order list.') <a href="/login" class="text-ct-accent underline underline-offset-3">@lang('login')</a>
+    @lang('You must log in to add a product to your order list.') <a href="/login" class="text-primary underline underline-offset-3">@lang('login')</a>
 </template>

resources/views/partials/item/new-list.blade.php

@@ -1,6 +1,6 @@
 <div class="border-t">
-    <button class="text-base !font-sans flex justify-between w-full items-center mt-2.5 text-inactive hover:text-ct-primary" @click="addWishlist('New wishlist')">
+    <button class="!font-sans flex justify-between w-full items-center mt-2.5 text-muted hover:text-primary" @click="addWishlist('New wishlist')">
         @lang('New order list')
-        <x-heroicon-o-plus-circle class="w-5 h-5"/>
+        <x-heroicon-o-plus-circle class="size-5"/>
     </button>
 </div>

resources/views/partials/item/title.blade.php

@@ -7,7 +7,7 @@
 }">
     <div class="flex items-center" slot-scope="{ toggle, close, isOpen }">
         <template v-if="!isOpen">
-            <span class="text-base text-ct-primary truncate peer place-self-start -mt-0.5">
+            <span class="text-primary truncate peer place-self-start -mt-0.5">
                 @{{ wishlist.title }}
             </span>
             <x-heroicon-s-pencil-square
@@ -18,7 +18,7 @@ class="pl-2 w-6 h-4 cursor-pointer shrink-0 opacity-0 hover:opacity-100 peer-hov
         <template v-else>
             <input
                 v-bind:ref="'editing_' + wishlist.id"
-                class="!font-[inherit] text-base text-ct-primary -mt-0.5 w-full !outline-none"
+                class="!font-[inherit] text-primary -mt-0.5 w-full !outline-none"
                 v-model.lazy="wishlist.title"
                 v-on-click-away="close"
                 v-on:keyup.enter="close"

resources/views/partials/item/view.blade.php

@@ -1,6 +1,6 @@
 <a
     v-if="findItem(wishlist, {{ $productId }})"
-    class="text-base text-ct-accent mb-1 -mt-0.5 hover:underline"
+    class="text-primary mb-1 -mt-0.5 hover:underline"
     :href="'{{ route('wishlist.show', '') }}/' + wishlist.id"
 >
     @lang('View')