coloring scheme

assets/views/shop/_card.html

@@ -19,7 +19,7 @@
     <div class="relative overflow-hidden bg-surface-alt dark:bg-surface-dark"
       :class="view === 'list' ? 'w-28 shrink-0 self-stretch min-h-36 sm:w-48' : 'aspect-[5/4]'">
       {% if product.on_sale and product.percent_off > 0 %}
-      <span class="absolute left-2 top-2 z-10 rounded-full bg-danger px-2 py-0.5 text-[11px] font-bold text-on-danger shadow-sm">−{{ product.percent_off }} %</span>
+      <span class="absolute left-2 top-2 z-10 rounded-full bg-orange-700 px-2 py-0.5 text-[11px] font-bold text-white shadow-sm">−{{ product.percent_off }} %</span>
       {% endif %}
       {% if product.image %}
       <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition duration-700 ease-out group-hover:scale-105">
@@ -41,7 +41,7 @@
       {% endif %}
       {% if product.on_sale %}
       <div class="flex flex-wrap items-baseline gap-x-2 leading-tight">
-        <span class="text-xl font-semibold text-danger"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
+        <span class="text-xl font-semibold text-orange-700 dark:text-orange-400"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
         <span class="text-sm text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ currency_symbol }}</span>
       </div>
       {% else %}
@@ -50,13 +50,9 @@
       <!-- stock pill (Kompress design): green "in stock" / red "sold out" -->
       <div class="mt-0.5">
         {% if product.in_stock %}
-        <span class="inline-flex items-center gap-1.5 rounded-full bg-success/10 px-2 py-0.5 text-xs font-semibold text-success">
+        <span class="inline-flex items-center rounded-full bg-green-500/10 px-2.5 py-0.5 text-xs font-semibold text-green-800 ring-1 ring-inset ring-green-600/15 dark:bg-green-500/10 dark:text-green-300 dark:ring-green-400/20">{{ t(key="in-stock", lang=lang | default(value='sk')) }}</span>
-          <span class="size-1.5 rounded-full bg-success" aria-hidden="true"></span>{{ t(key="in-stock", lang=lang | default(value='sk')) }}
-        </span>
         {% else %}
-        <span class="inline-flex items-center gap-1.5 rounded-full bg-danger/10 px-2 py-0.5 text-xs font-semibold text-danger">
+        <span class="inline-flex items-center rounded-full bg-orange-500/10 px-2.5 py-0.5 text-xs font-semibold text-orange-800 ring-1 ring-inset ring-orange-600/15 dark:bg-orange-500/10 dark:text-orange-300 dark:ring-orange-400/20">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</span>
-          <span class="size-1.5 rounded-full bg-danger" aria-hidden="true"></span>{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}
-        </span>
         {% endif %}
       </div>
     </div>
@@ -76,7 +72,7 @@
       {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", extra="w-full", nowrap=false, icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5 shrink-0"><path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" /></svg>') }}
     </form>
     {% else %}
-    <p class="inline-flex justify-center rounded-radius bg-danger/10 px-3 py-2 text-xs font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
+    <p class="inline-flex justify-center rounded-radius bg-orange-500/10 px-3 py-2 text-xs font-semibold text-orange-800 ring-1 ring-inset ring-orange-600/15 dark:bg-orange-500/10 dark:text-orange-300 dark:ring-orange-400/20">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
     {% endif %}
   </div>
 </article>

assets/views/shop/show.html

@@ -95,7 +95,7 @@
         </template>
 
         <div class="flex items-baseline gap-3">
-          <p class="text-2xl font-semibold" :class="current.on_sale ? 'text-danger' : 'text-primary dark:text-primary-dark'">
+          <p class="text-2xl font-semibold" :class="current.on_sale ? 'text-orange-700 dark:text-orange-400' : 'text-primary dark:text-primary-dark'">
             <span x-text="current.price"></span> {{ currency_symbol }}
           </p>
           <template x-if="current.on_sale">
@@ -126,7 +126,7 @@
           </div>
         </template>
         <template x-if="!current.in_stock">
-          <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
+          <p class="inline-flex rounded-radius bg-orange-50 px-3 py-2 text-sm font-semibold text-orange-700 ring-1 ring-inset ring-orange-600/20 dark:bg-orange-500/10 dark:text-orange-400 dark:ring-orange-400/25">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
         </template>
       </div>
     </template>