diff --git a/package.json b/package.json index a556c625..9ea36e91 100644 --- a/package.json +++ b/package.json @@ -11,23 +11,20 @@ "@babel/core": "^7.23.9", "@hotwired/turbo": "^8.0.2", "@tailwindcss/forms": "^0.5.3", - "@tailwindcss/typography": "^0.5.9", + "@tailwindcss/typography": "^0.5.16", + "@tailwindcss/vite": "^4.0.8", "@vitejs/plugin-vue2": "^2.2.0", "@vueuse/core": "^11.1.0", "@vueuse/integrations": "^10.11.0", - "autoprefixer": "^10.4.15", "cross-env": "^7.0.3", "graphql": "^16.8.1", "graphql-combine-query": "indykoning/graphql-combine-query#feature/add-allowed-duplicates", "graphql-tag": "^2.12.6", "laravel-vite-plugin": "^1.0.5", - "postcss": "^8.4.29", - "postcss-import": "^16.1.0", - "postcss-nested": "^6.0.0", "rollup": "^4.24.0", "rollup-plugin-visualizer": "^5.9.0", "tailwind-scrollbar-hide": "^1.1.7", - "tailwindcss": "^3.3.3", + "tailwindcss": "^4.0.7", "universal-cookie": "^7.1.4", "vite": "^5.0", "vue": "^2.7", diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index d41ad635..00000000 --- a/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/resources/css/app.css b/resources/css/app.css index 0c0cd17d..e7089d53 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,18 +1,130 @@ -@import 'components/vue-slider'; -@import 'components/price-slider'; -@import 'components/pagination'; -@import 'components/autocomplete'; +@import 'tailwindcss'; -@tailwind base; -@tailwind components; -@tailwind utilities; +@import './components/vue-slider.css' layer(base); +@import './components/price-slider.css' layer(base); +@import './components/pagination.css' layer(base); +@import './components/autocomplete.css' layer(base); + +@config "../../tailwind.config.js"; + +@plugin '@tailwindcss/forms'; +@plugin '@tailwindcss/typography'; +@plugin 'tailwind-scrollbar-hide'; + +@theme { + /* Our variables used by different utilities */ + --primary: #2fbc85; + --primary-text: var(--color-white); + + --secondary: #202f60; + --secondary-text: var(--color-white); + + --conversion: var(--color-green-500); + --conversion-text: var(--color-white); + + --foreground-emphasis: var(--color-slate-900); + --foreground: var(--color-slate-800); + --foreground-muted: var(--color-slate-600); + + --border-emphasis: var(--color-slate-400); + --border: var(--color-slate-300); + --border-muted: var(--color-slate-100); + + --background-emphasis: var(--color-slate-200); + --background: var(--color-slate-100); + --background-muted: var(--color-slate-50); + + /* Utility colors linked to our variables */ + --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-emphasis: var(--border-emphasis); + --border-color-default: var(--border); + --border-color-muted: var(--border-muted); + + --ring-color-emphasis: var(--border-emphasis); + --ring-color-default: var(--border); + --ring-color-muted: var(--border-muted); + + --outline-color-emphasis: var(--border-emphasis); + --outline-color-default: var(--border); + --outline-color-muted: var(--border-muted); + + --background-color-emphasis: var(--background-emphasis); + --background-color-default: var(--background); + --background-color-muted: var(--background-muted); + + --z-index-header: 100; + --z-index-header-autocomplete-overlay: 10; + --z-index-header-autocomplete: 20; + --z-index-header-dropdown: 30; + --z-index-header-minicart: 30; + --z-index-header-autocomplete-button: 30; + + --z-index-notifications: 110; + + --z-index-slideover: 120; + --z-index-slideover-overlay: 10; + --z-index-slideover-sidebar: 20; + + --z-index-popup: 130; + --z-index-popup-actions: 10; + + --z-index-cookie: 140; +} + +@utility container { + margin-inline: auto; + padding-inline: 1.25rem; +} + +@utility text { + color: var(--text-color-default); +} + +@utility bg { + background-color: var(--background-color-default); +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--border); + } + + button:not(:disabled), + [role='button']:not(:disabled) { + cursor: pointer; + } +} [v-cloak] { display: none; } [v-blur] { - @apply animate-pulse blur; + @apply animate-pulse blur-sm; } * { diff --git a/resources/css/components/autocomplete.css b/resources/css/components/autocomplete.css index 1ce3ace8..28298473 100644 --- a/resources/css/components/autocomplete.css +++ b/resources/css/components/autocomplete.css @@ -1,5 +1,5 @@ .search-input + div div[groupposition='right'] { - @apply size-6 right-16 cursor-pointer z-50 !-translate-y-1/2 !top-1/2 !absolute; + @apply size-6! right-16! cursor-pointer z-50 top-1/2! absolute!; .cancel-icon { @apply hidden; diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css index 1027377b..5d2eb24b 100644 --- a/resources/css/components/pagination.css +++ b/resources/css/components/pagination.css @@ -4,32 +4,32 @@ } .pagination { - @apply flex flex-wrap justify-center gap-x-2 !m-0 !my-6 max-md:gap-y-4; + @apply flex flex-wrap justify-center gap-x-2 m-0! my-6! max-md:gap-y-4; } .pagination-button { - @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text !shadow; + @apply font-semibold! font-sans! border! border-default! rounded-sm! bg-white! text! shadow-sm!; } .pagination-button.active { - @apply !border !border-none !bg-primary !text-white !shadow-none; + @apply border! border-none! bg-primary! text-white! shadow-none!; } .pagination-button:first-child { - @apply !mr-auto max-md:w-full max-md:order-last; + @apply mr-auto! max-md:w-full max-md:order-last; } .pagination-button:last-child { - @apply !ml-auto max-md:w-full max-md:-order-1; + @apply ml-auto! max-md:w-full max-md:-order-1; } .pagination-button:not(:first-child):not(:last-child) { - @apply !m-0 !size-14 max-md:flex-1 max-md:w-auto; + @apply m-0! size-14! max-md:flex-1 max-md:w-auto; } .pagination-button:first-child, .pagination-button:last-child { - @apply h-14 px-6 max-md:!m-0; + @apply h-14 px-6 max-md:m-0!; } .pagination-button[disabled] { diff --git a/resources/css/components/price-slider.css b/resources/css/components/price-slider.css index 1452735b..181e570f 100644 --- a/resources/css/components/price-slider.css +++ b/resources/css/components/price-slider.css @@ -4,19 +4,19 @@ div.vue-slider { div.vue-slider-process, div.vue-slider-rail { - @apply h-2 bg-primary !important; + @apply h-2! bg-primary!; } div.vue-slider-rail { - @apply bg-emphasis !important; + @apply bg-emphasis!; } div.vue-slider .vue-slider-dot { - @apply size-6 !important; + @apply size-6!; } div.vue-slider-dot-tooltip-inner { - @apply bg-white text border border-default px-1.5 !important; + @apply bg-white! text! border! border-default! px-1.5!; } span.vue-slider-dot-tooltip-text { @@ -28,7 +28,7 @@ div.vue-slider-dot-tooltip::before { } div.vue-slider-dot .vue-slider-dot-handle { - @apply border border-border shadow; + @apply border border-default shadow-sm; } div.vue-slider-tooltip-wrap.vue-slider-tooltip-top { diff --git a/resources/css/components/vue-slider.css b/resources/css/components/vue-slider.css index 53a7b0ac..aca7762b 100644 --- a/resources/css/components/vue-slider.css +++ b/resources/css/components/vue-slider.css @@ -3,9 +3,9 @@ } .vue-slider-dot-tooltip-inner { - @apply border-primary bg-primary !important; + @apply border-primary! bg-primary!; } .vue-slider-process { - @apply bg-primary !important; + @apply bg-primary!; } diff --git a/resources/views/cart/sidebar.blade.php b/resources/views/cart/sidebar.blade.php index 8eb87eb0..d362e6bc 100644 --- a/resources/views/cart/sidebar.blade.php +++ b/resources/views/cart/sidebar.blade.php @@ -1,4 +1,4 @@ -
+
@lang('Subtotal')
@{{ cart.prices.subtotal_including_tax.value | price }}
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php index 22819ce9..45f7de73 100644 --- a/resources/views/checkout/pages/credentials.blade.php +++ b/resources/views/checkout/pages/credentials.blade.php @@ -9,7 +9,7 @@ @include('rapidez::checkout.partials.progressbar')
-
+
-
+
- @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep) -
+
@if (!$loop->last)
@endif diff --git a/resources/views/checkout/partials/sidebar.blade.php b/resources/views/checkout/partials/sidebar.blade.php index 09d3ddf9..399927da 100644 --- a/resources/views/checkout/partials/sidebar.blade.php +++ b/resources/views/checkout/partials/sidebar.blade.php @@ -1,5 +1,5 @@
-
+
@{{ item.product.name }}
@@ -9,7 +9,7 @@
-
+
@lang('Subtotal')
@{{ cart.prices.subtotal_including_tax.value | price }}
@@ -35,7 +35,7 @@
-
+

diff --git a/resources/views/checkout/steps/payment_method.blade.php b/resources/views/checkout/steps/payment_method.blade.php index 93149a10..7db57cd5 100644 --- a/resources/views/checkout/steps/payment_method.blade.php +++ b/resources/views/checkout/steps/payment_method.blade.php @@ -12,10 +12,10 @@ v-slot="{ mutate, variables }" >

-