Color names refactor

royduin · royduin · commit 430ae7b38daa · 2024-10-30T15:58:59.000+01:00
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
@@ -8,7 +8,7 @@
 }
 
 .pagination-button {
-    @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;
+    @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text !shadow;
 }
 
 .pagination-button.active {
diff --git a/resources/css/components/price-slider.css b/resources/css/components/price-slider.css
@@ -4,23 +4,23 @@ div.vue-slider {
 
 div.vue-slider-process,
 div.vue-slider-rail {
-    @apply h-2 bg-neutral !important;
+    @apply h-2 bg !important;
 }
 
 div.vue-slider-rail {
-    @apply bg-highlight !important;
+    @apply bg-emphasis !important;
 }
 
 div.vue-slider .vue-slider-dot {
     @apply size-6 !important;
 }
 
 div.vue-slider-dot-tooltip-inner {
-    @apply bg-white text-neutral border-border border px-1.5 !important;
+    @apply bg-white text border border-default px-1.5 !important;
 }
 
 span.vue-slider-dot-tooltip-text {
-    @apply font-medium font-sans text-neutral;
+    @apply font-medium font-sans text;
 }
 
 div.vue-slider-dot-tooltip::before {
diff --git a/resources/css/theme-variables.css b/resources/css/theme-variables.css
@@ -1,10 +1,16 @@
 :root {
-    --primary: 47 188 133;
-    --primary-text: 255 255 255;
-    --secondary: 249 115 22;
-    --secondary-text: 255 255 255;
-    --neutral: 51 65 85;
-    --inactive: 100 116 139;
-    --highlight: 241 245 249;
-    --border: 231 235 239;
+    --primary: #2fbc85;
+    --primary-text: #ffffff;
+
+    --secondary: #202F60;
+    --secondary-text: #ffffff;
+
+    /*
+    Optionally you could define/overwrite
+    more variables in this file:
+
+    --foreground: #334155;
+    --border: #e7ebef;
+    --background: #f1f5f9;
+    */
 }
diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
@@ -8,7 +8,7 @@
 <x-tag
     is="{{ $tag }}"
     {{ $attributes->merge([
-        'class' => 'flex items-center justify-center font-semibold py-2 px-4 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75 whitespace-nowrap transition',
+        'class' => 'flex items-center justify-center font-semibold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75 whitespace-nowrap transition',
         ':disabled' => $attributes->has('href') || $attributes->has(':href') || !$disableWhenLoading ? null : '$root.loading' ]) }}
 >
     {{ $slot }}
diff --git a/resources/views/components/button/cart.blade.php b/resources/views/components/button/cart.blade.php
@@ -1,7 +1,7 @@
-<x-rapidez::button {{ $attributes->merge([
+<x-rapidez::button.secondary {{ $attributes->merge([
     'type' => 'submit',
     'dusk' => 'add-to-cart',
-])->class('flex items-center') }}>
+]) }}>
     <x-heroicon-o-shopping-cart class="mr-2 h-5 w-5" v-if="!addToCart.adding && !addToCart.added" />
     <x-heroicon-o-arrow-path class="mr-2 h-5 w-5 animate-spin" v-if="addToCart.adding" v-cloak />
     <x-heroicon-o-check class="mr-2 h-5 w-5" v-if="addToCart.added" v-cloak />
diff --git a/resources/views/components/button/index.blade.php b/resources/views/components/button/index.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez::button.base {{ $attributes->class('bg-inactive text-white') }}>
+<x-rapidez::button.base {{ $attributes->class('border') }}>
     {{ $slot }}
 </x-rapidez::button.base>
diff --git a/resources/views/components/button/outline.blade.php b/resources/views/components/button/outline.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez::button.base {{ $attributes->class('bg-transparent hover:bg-neutral text-neutral hover:text-white border-neutral hover:border-transparent') }}>
+<x-rapidez::button.base {{ $attributes->class('bg-transparent hover:bg text hover:text border hover:border-transparent') }}>
     {{ $slot }}
 </x-rapidez::button.base>
diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php
@@ -0,0 +1,3 @@
+<x-rapidez::button.base {{ $attributes->class('bg-secondary text-secondary-text') }}>
+    {{ $slot }}
+</x-rapidez::button.base>
diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
@@ -1,6 +1,6 @@
 <label class="flex items-center">
-    <input type="checkbox" {{ $attributes->merge(['class' => 'focus:ring-neutral h-4 w-4 text-neutral border rounded']) }}>
-    <div class="ml-2 text-neutral">
+    <input type="checkbox" {{ $attributes->merge(['class' => 'focus:ring-current h-4 w-4 text border rounded']) }}>
+    <div class="ml-2 text">
         {{ $slot }}
     </div>
 </label>
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
@@ -13,7 +13,7 @@
             'type' => 'text',
             'placeholder' => __($placeholder ?? ''),
             'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
-            'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
+            'class' => 'w-full py-2 px-3 border border-default rounded !ring-0 focus:border-emphasis sm:text-sm',
         ]) }}
     >
 </div>
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
@@ -1,3 +1,3 @@
-<label {{ $attributes->merge(['class' => 'font-semibold text-inactive text-sm block mb-2']) }}>
+<label {{ $attributes->merge(['class' => 'font-semibold text-muted text-sm block mb-2']) }}>
     {{ $slot }}
 </label>
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
@@ -2,7 +2,7 @@
 
 <div class="{{ $wrapperClass ?? '' }}">
     @if (!isset($label) || (isset($label) && $label))
-        <x-rapidez::label for="{{ $name }}" class="{{ $labelClass ?? '' }} mb-2 block text-inactive">
+        <x-rapidez::label for="{{ $name }}" class="{{ $labelClass ?? '' }}">
             @lang($label ?? ucfirst($name))
         </x-rapidez::label>
     @endif
@@ -11,6 +11,6 @@
         'name' => $name,
         'placeholder' => __($placeholder ?? ucfirst($name)),
         'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
-        'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
+        'class' => 'w-full py-2 px-3 border border-default rounded !ring-0 focus:!border-emphasis sm:text-sm text-neutral',
     ]) }}></textarea>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -25,7 +25,7 @@
     @stack('head')
     @config('design/head/includes')
 </head>
-<body class="text-neutral antialiased">
+<body class="text antialiased">
     <div id="app" class="flex flex-col min-h-dvh">
         @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.header')
         @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.header')
diff --git a/resources/views/layouts/partials/footer/social.blade.php b/resources/views/layouts/partials/footer/social.blade.php
@@ -1,17 +1,17 @@
 <div class="flex space-x-6 md:order-2">
-    <a href="https://github.com/rapidez" target="_blank" class="text-inactive hover:text-text-neutral">
+    <a href="https://github.com/rapidez" target="_blank" class="text-muted hover:text">
         <span class="sr-only">@lang('GitHub')</span>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
             <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
         </svg>
     </a>
-    <a href="https://twitter.com/rapidez_io" target="_blank" class="text-inactive hover:text-text-neutral">
+    <a href="https://twitter.com/rapidez_io" target="_blank" class="text-muted hover:text">
         <span class="sr-only">@lang('Twitter')</span>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
             <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
         </svg>
     </a>
-    <a href="https://rapidez.io/slack" target="_blank" class="text-inactive hover:text-text-neutral">
+    <a href="https://rapidez.io/slack" target="_blank" class="text-muted hover:text">
         <span class="sr-only">@lang('Slack')</span>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
             <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
diff --git a/resources/views/layouts/partials/header/minicart.blade.php b/resources/views/layouts/partials/header/minicart.blade.php
@@ -2,7 +2,7 @@
     <div class="relative" v-if="hasCart" v-on-click-away="close" slot-scope="{ toggle, close, isOpen }" v-cloak>
         <button class="flex my-1 focus:outline-none" v-on:click="toggle">
             <x-heroicon-o-shopping-cart class="h-6 w-6"/>
-            <span class="bg-neutral rounded-full w-6 h-6 text-white text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
+            <span class="bg-secondary text-secondary-text rounded-full w-6 h-6 text-white" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
         </button>
         <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
             <table class="w-full mb-3">
@@ -20,9 +20,9 @@
                 <x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5">
                     @lang('Show cart')
                 </x-rapidez::button.outline>
-                <x-rapidez::button href="{{ route('checkout') }}">
+                <x-rapidez::button.primary href="{{ route('checkout') }}">
                     @lang('Checkout')
-                </x-rapidez::button>
+                </x-rapidez::button.primary>
             </div>
         </div>
     </div>
diff --git a/resources/views/listing/partials/filter/select.blade.php b/resources/views/listing/partials/filter/select.blade.php
@@ -27,7 +27,10 @@ class="flex justify-between text-base text-inactive"
                                 v-bind:checked="value[item.key]"
                                 v-on:change="handleChange(item.key)"
                             >
-                                <div class="font-sans font-medium text-inactive items-center text-sm flex" :class="{'text-neutral': value[item.key] == true}">
+                                <div
+                                    class="font-sans font-medium items-center text-sm flex"
+                                    :class="value[item.key] ? 'text' : 'text-muted'"
+                                >
                                     @{{ item.key }}
                                     <span class="block ml-0.5 text-xs">(@{{ item.doc_count }})</span>
                                 </div>
diff --git a/resources/views/product/overview.blade.php b/resources/views/product/overview.blade.php
@@ -54,7 +54,7 @@
         </div>
     </div>
     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
-        <div class="my-5 py-8 bg-highlight min-h-[515px]">
+        <div class="my-5 py-8 bg min-h-[515px]">
             <div class="container grid w-full grid-cols-1 gap-5 p-5 md:grid-cols-3">
                 @include('rapidez-reviews::form', ['sku' => $product->sku])
                 <div class="md:col-span-2">
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
@@ -54,7 +54,7 @@ class="max-h-full max-w-full"
                 <button
                     v-for="(image, imageId) in images"
                     class="flex items-center justify-center bg-white border rounded p-2 mr-3 mb-3 h-[100px] w-[100px]"
-                    :class="active == imageId ? 'border-neutral' : ''"
+                    :class="{ 'border-emphasis': active == imageId }"
                     @click="change(imageId)"
                 >
                     <img
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,11 @@
-import tailwindForms from '@tailwindcss/forms'
-import tailwindTypography from '@tailwindcss/typography'
-import tailwindScrollbarHide from 'tailwind-scrollbar-hide'
+import colors from 'tailwindcss/colors'
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
+import scrollbarHide from 'tailwind-scrollbar-hide'
+
+function color(variable, fallback) {
+    return 'color-mix(in srgb, var('+variable+', '+fallback+') calc(100% * <alpha-value>), transparent)'
+}
 
 export default {
     content: [
@@ -22,26 +27,53 @@ export default {
         extend: {
             colors: {
                 primary: {
-                    DEFAULT: 'rgb(var(--primary) / <alpha-value>)', // Theme color
-                    text: 'rgb(var(--primary-text) / <alpha-value>)', // Text color that goes onto primary color
+                    DEFAULT: color('--primary', '#2fbc85'),
+                    text: color('--primary-text', colors.white),
                 },
+
                 secondary: {
-                    DEFAULT: 'rgb(var(--secondary) / <alpha-value>)', // Conversion color
-                    text: 'rgb(var(--secondary-text) / <alpha-value>)', // Text color that goes onto secondary color
+                    DEFAULT: color('--secondary', '#202F60'),
+                    text: color('--secondary-text', colors.white),
                 },
-                neutral: 'rgb(var(--neutral) / <alpha-value>)', // Default text color
-                inactive: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
-                highlight: 'rgb(var(--highlight) / <alpha-value>)', // Background highlight color
-                border: 'rgb(var(--border) / <alpha-value>)', // Border color
-            },
-            borderColor: {
-                DEFAULT: 'rgb(var(--border) / <alpha-value>)', // Border color default so it gets used when only using border
+
+                foreground: {
+                    emphasis: color('--foreground-emphasis', colors.gray[800]),
+                    DEFAULT: color('--foreground', colors.gray[700]),
+                    muted: color('--foreground-muted', colors.gray[500]),
+                },
+
+                border: {
+                    emphasis: color('--border-emphasis', colors.gray[500]),
+                    DEFAULT: color('--border', colors.gray[200]),
+                    muted: color('--border-muted', colors.gray[100]),
+                },
+
+                background: {
+                    emphasis: color('--background-emphasis', colors.gray[200]),
+                    DEFAULT: color('--background', colors.gray[100]),
+                    muted: color('--background-muted', colors.gray[50]),
+                },
+
+
+                // TODO: check all these colors within the templates and replace
+                // neutral: 'rgb(var(--neutral) / <alpha-value>)', // Text
+                // inactive: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text
+                // highlight: 'rgb(var(--highlight) / <alpha-value>)', // Background highlight
+                // enhanced: 'rgb(var(--enhanced) / <alpha-value>)', // Enhanced
+                // disabled: 'rgb(var(--disabled) / <alpha-value>)', // Disabled
+                // base: 'rgb(var(--base) / <alpha-value>)', // Background
             },
+            textColor: theme => theme('colors.foreground'),
+            borderColor: theme => ({
+                default: theme('colors.border'),
+                ...theme('colors.border'),
+            }),
+            backgroundColor: theme => theme('colors.background'),
         },
         container: {
             center: true,
             padding: '1.25rem',
         },
     },
-    plugins: [tailwindForms, tailwindTypography, tailwindScrollbarHide],
+    plugins: [forms, typography, scrollbarHide],
 }

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.pagination-button {`
`11`		`- @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;`
	`11`	`+ @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text !shadow;`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.pagination-button.active {`
Original file line number	Diff line number	Diff line change
`@@ -4,23 +4,23 @@ div.vue-slider {`
`4`	`4`
`5`	`5`	`div.vue-slider-process,`
`6`	`6`	`div.vue-slider-rail {`
`7`		`- @apply h-2 bg-neutral !important;`
	`7`	`+ @apply h-2 bg !important;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`div.vue-slider-rail {`
`11`		`- @apply bg-highlight !important;`
	`11`	`+ @apply bg-emphasis !important;`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`div.vue-slider .vue-slider-dot {`
`15`	`15`	`@apply size-6 !important;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`div.vue-slider-dot-tooltip-inner {`
`19`		`- @apply bg-white text-neutral border-border border px-1.5 !important;`
	`19`	`+ @apply bg-white text border border-default px-1.5 !important;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`span.vue-slider-dot-tooltip-text {`
`23`		`- @apply font-medium font-sans text-neutral;`
	`23`	`+ @apply font-medium font-sans text;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`div.vue-slider-dot-tooltip::before {`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`<x-tag`
`9`	`9`	`is="{{ $tag }}"`
`10`	`10`	`{{ $attributes->merge([`
`11`		`- 'class' => 'flex items-center justify-center font-semibold py-2 px-4 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75 whitespace-nowrap transition',`
	`11`	`+ 'class' => 'flex items-center justify-center font-semibold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75 whitespace-nowrap transition',`
`12`	`12`	`':disabled' => $attributes->has('href') \|\| $attributes->has(':href') \|\| !$disableWhenLoading ? null : '$root.loading' ]) }}`
`13`	`13`	`>`
`14`	`14`	`{{ $slot }}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<x-rapidez::button.base {{ $attributes->class('bg-secondary text-secondary-text') }}>`
	`2`	`+ {{ $slot }}`
	`3`	`+</x-rapidez::button.base>`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`'type' => 'text',`
`14`	`14`	`'placeholder' => __($placeholder ?? ''),`
`15`	`15`	`'dusk' => $attributes->get('v-bind:dusk') ? null : $name,`
`16`		`- 'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',`
	`16`	`+ 'class' => 'w-full py-2 px-3 border border-default rounded !ring-0 focus:border-emphasis sm:text-sm',`
`17`	`17`	`]) }}`
`18`	`18`	`>`
`19`	`19`	`</div>`