x

apps/website/src/components/CheckoutClient.tsx

@@ -12,6 +12,7 @@ import { useAuthStore, type Customer } from '../store/authStore'
 import { useCartStore } from '../store/cartStore'
 import { useLang } from '../hooks/useLang'
 import { getPathWithLocale } from '../lib/locales'
+import { toneClass } from '../lib/theme'
 
 type StoreSettings = {
   shippingFee?: number
@@ -571,10 +572,10 @@ export default function CheckoutClient() {
         </section>
 
         {submitError && (
-          <div className="flex gap-3 rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm text-rose-700">
-            <AlertCircle className="h-5 w-5 shrink-0" />
-            <p>{submitError}</p>
-          </div>
+        <div className={`flex gap-3 p-4 text-sm ${toneClass('error')}`}>
+          <AlertCircle className="h-5 w-5 shrink-0" />
+          <p>{submitError}</p>
+        </div>
         )}
 
         <button
@@ -641,15 +642,15 @@ export default function CheckoutClient() {
                       type="button"
                       onClick={applyCoupon}
                       disabled={couponLoading || !couponCode.trim()}
-                      className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary disabled:opacity-50"
-                    >
-                      {couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
-                    </button>
+                    className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary disabled:opacity-50"
+                  >
+                    {couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
+                  </button>
                   </div>
                   {couponError && <p className="text-xs font-semibold text-rose-500">{couponError}</p>}
                 </div>
               ) : (
-                <div className="flex items-center justify-between rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
+                <div className={`flex items-center justify-between p-4 ${toneClass('success')}`}>
                   <span className="flex items-center gap-2 text-sm font-bold text-emerald-700">
                     <Ticket className="h-4 w-4" />
                     {appliedCoupon}
@@ -742,7 +743,7 @@ export default function CheckoutClient() {
               </div>
             </div>
 
-            <div className="rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm text-amber-800">
+            <div className={`p-4 text-sm ${toneClass('warning')}`}>
               <div className="flex gap-2">
                 <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
                 <p>

apps/website/src/components/ProfileClient.tsx

@@ -23,6 +23,7 @@ import {
 import { formatPrice, type CustomerAddress, type Order } from '@homaroma/types'
 
 import { API_BASE } from '../lib/api'
+import { orderStatusBadgeClass, toneClass } from '../lib/theme'
 import { useAuthStore, type Customer } from '../store/authStore'
 
 type ProfileTab = 'orders' | 'addresses' | 'settings'
@@ -74,14 +75,6 @@ function statusLabel(status: string) {
   return labels[status] ?? status.replaceAll('_', ' ')
 }
 
-function statusClass(status: string) {
-  if (status === 'PENDING_PAYMENT') return 'border-amber-100 bg-amber-50 text-amber-700'
-  if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700'
-  if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700'
-  if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700'
-  return 'border-line-primary/20 bg-surface-page text-text-main/80'
-}
-
 function formatAddress(address: CustomerAddress) {
   return `${address.addressLine} ต.${address.subdistrict} อ.${address.district} จ.${address.province} ${address.zipcode}`
 }
@@ -294,7 +287,7 @@ export default function ProfileClient() {
           ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
         </p>
         {error && (
-          <p className="mt-5 rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm text-amber-700">
+          <p className={`mt-5 p-4 text-sm ${toneClass('warning')}`}>
             {error}
           </p>
         )}
@@ -323,7 +316,7 @@ export default function ProfileClient() {
   return (
     <section className="space-y-8">
       {error && (
-        <div className="rounded-3xl border border-rose-100 bg-rose-50 p-5 text-sm font-medium text-rose-600">
+        <div className={`p-5 text-sm font-medium ${toneClass('error')}`}>
           {error}
         </div>
       )}
@@ -398,7 +391,7 @@ export default function ProfileClient() {
                         </p>
                       </div>
                       <div className="flex items-center gap-3">
-                        <span className={`ui-status-badge ${statusClass(order.status)}`}>
+                        <span className={orderStatusBadgeClass(order.status)}>
                           {statusLabel(order.status)}
                         </span>
                         <Link href={`/order/${order.id}`} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition hover:text-brand-primary">
@@ -534,10 +527,10 @@ export default function ProfileClient() {
 
               <form onSubmit={handleSettingsSubmit} className="ui-panel max-w-xl space-y-5 p-6">
                 {settingsSuccess && (
-                  <div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
-                    <Check className="h-4 w-4" />
-                    บันทึกข้อมูลติดต่อสำเร็จแล้ว
-                  </div>
+                <div className={`flex items-center justify-center gap-2 p-4 text-sm font-bold ${toneClass('success')}`}>
+                  <Check className="h-4 w-4" />
+                  บันทึกข้อมูลติดต่อสำเร็จแล้ว
+                </div>
                 )}
                 <TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" />
                 <TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" />

apps/website/src/components/TrackOrderClient.tsx

@@ -8,6 +8,7 @@ import { ChevronRight, Loader2, Package, Search } from 'lucide-react'
 import { API_BASE } from '../lib/api'
 import { useLang } from '../hooks/useLang'
 import { getPathWithLocale } from '../lib/locales'
+import { toneClass } from '../lib/theme'
 
 type TrackResponse =
   | { success: true; orderId: number }
@@ -105,7 +106,7 @@ export default function TrackOrderClient() {
 
         <form className="space-y-5" onSubmit={handleSubmit}>
           {error && (
-            <div className="rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm font-medium text-rose-600">
+            <div className={`p-4 text-sm font-medium ${toneClass('error')}`}>
               {error}
             </div>
           )}

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -79,8 +79,8 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
   if (!slides.length) return null
 
   return (
-    <section 
-      className={`announcement-bar absolute top-0 left-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-white'}`}
+    <section
+      className={`announcement-bar absolute left-0 top-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-white'}`}
       style={{ backgroundColor, color: textColor }}
     >
       <Swiper
@@ -112,7 +112,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
 
   return (
-    <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-text-main md:aspect-[21/9] md:min-h-0">
+    <section className="ui-hero-shell">
       <Image
         src={imageUrl}
         alt={title || 'HomAroma'}
@@ -120,8 +120,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
         unoptimized
         className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
       />
-      <div className="absolute inset-0 bg-text-main/40" />
-      <div className="absolute inset-0 bg-gradient-to-t from-text-main/90 via-text-main/10 to-text-main/30" />
+      <div className="ui-hero-overlay" />
+      <div className="ui-hero-overlay-strong" />
       <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
         <div className="space-y-6">
           {tagline && (
@@ -129,24 +129,24 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
               {tagline}
             </p>
           )}
-          <h1 className="font-display text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
+          <h1 className="ui-hero-title">
             {renderAccentTitle(title || 'HomAroma')}
           </h1>
           {description && (
-            <p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
+            <p className="ui-hero-copy">
               {description}
             </p>
           )}
           <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
             <Link
               href={buttonLink}
-              className="rounded-full bg-surface-card px-8 py-4 text-sm font-bold uppercase tracking-widest text-text-main transition-all duration-300 hover:bg-surface-page hover:shadow-xl"
+              className="ui-hero-button"
             >
               {buttonText || 'Explore Collection'}
             </Link>
             <a
               href="#categories"
-              className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-brand-accent"
+              className="ui-hero-link"
             >
               {heroLearnMoreText(resolvedLang)}
               <span className="transition-transform group-hover:translate-x-1">→</span>
@@ -285,10 +285,10 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
   const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
 
   const content = (
-    <div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-card">
+    <div className="ui-banner-shell">
       <Image src={imageUrl} alt={title || 'Banner'} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
-      <div className="absolute inset-0 bg-gradient-to-r from-text-main/75 via-text-main/35 to-transparent" />
-      <div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
+      <div className="ui-banner-overlay" />
+      <div className="ui-banner-content">
         {title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
         {description && <p className="text-white/90">{description}</p>}
         {buttonText && <span className="inline-flex rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main">{buttonText}</span>}
@@ -329,15 +329,15 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
   const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
 
   return (
-    <section className="bg-text-main px-6 py-20 text-white">
+    <section className="ui-section-dark">
       <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
         <div className="space-y-3">
           <h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
           {description && <p className="max-w-2xl text-white/75">{description}</p>}
         </div>
         <form className="flex flex-col gap-3 sm:flex-row">
-          <input className="min-w-0 rounded-full px-5 py-3 text-text-main" placeholder={placeholder} type="email" />
-          <button className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white" type="button">
+          <input className="ui-form-shell min-w-0 rounded-full" placeholder={placeholder} type="email" />
+          <button className="ui-button-brand rounded-full" type="button">
             {buttonText}
           </button>
         </form>
@@ -381,7 +381,7 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
           <div className="h-px w-14 bg-brand-primary" />
           {description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
           {buttonText && buttonLink && (
-            <Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-white">
+            <Link href={buttonLink} className="ui-section-link inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-white">
               {buttonText}
             </Link>
           )}
@@ -399,7 +399,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
   if (!slides.length) return null
 
   return (
-    <section className="bg-text-main px-6 py-20 text-white">
+    <section className="ui-section-dark">
       <div className="mx-auto max-w-7xl space-y-12">
         {title && (
           <div className="mx-auto max-w-3xl space-y-4 text-center">
@@ -417,7 +417,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
             const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
 
             return (
-              <article key={index} className="group overflow-hidden rounded-3xl border border-line-primary/10 bg-surface-card/60">
+              <article key={index} className="ui-section-dark-card group">
                 {imageUrl && (
                   <div className="relative aspect-[4/3] overflow-hidden">
                     <Image
@@ -431,10 +431,10 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
                 )}
                 <div className="space-y-4 p-6">
                   {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent">{category}</p>}
-                  {slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle)}</h3>}
-                  {description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
+                  {slideTitle && <h3 className="ui-section-dark-card-title">{renderAccentTitle(slideTitle)}</h3>}
+                  {description && <p className="ui-section-dark-card-copy">{description}</p>}
                   {buttonText && buttonLink && (
-                    <Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-brand-accent transition hover:text-white">
+                    <Link href={buttonLink} className="ui-section-dark-link">
                       {buttonText} &rarr;
                     </Link>
                   )}
@@ -475,16 +475,16 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
   }
 
   return (
-    <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-text-main px-6 py-24 text-center text-white md:min-h-[76vh]">
+    <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
       {imageUrl && (
         <>
           <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
-          <div className="absolute inset-0 bg-text-main/55" />
+          <div className="ui-hero-overlay" />
         </>
       )}
       <div className="relative z-10 mx-auto max-w-4xl space-y-6">
         {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-accent">{category}</p>}
-        <h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
+        <h1 className="ui-hero-title">{title}</h1>
         {subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
         {(author || date) && (
           <p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">