x

apps/website/src/components/AddToCartSection.tsx

@@ -70,12 +70,12 @@ export default function AddToCartSection({ product }: Props) {
                   onClick={() => setSelectedVariant(index)}
                   className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${
                     selectedVariant === index
-                      ? 'border-brand-primary bg-brand-primary text-white shadow-card'
+                      ? 'border-brand-primary bg-brand-primary text-surface-card shadow-card'
                       : 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
                   }`}
                 >
                   {variant.size}
-                  <span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-muted-text/70'}`}>
+                  <span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-surface-card' : 'text-muted-text/70'}`}>
                     {formatPrice(variant.price)}
                   </span>
                 </button>
@@ -124,7 +124,7 @@ export default function AddToCartSection({ product }: Props) {
                 onClick={() => setSelectedVariant(index)}
                 className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${
                   selectedVariant === index
-                    ? 'border-brand-primary bg-brand-primary text-white'
+                    ? 'border-brand-primary bg-brand-primary text-surface-card'
                     : 'border-line-primary/20 bg-surface-card text-muted-text'
                 }`}
               >

apps/website/src/components/CartDrawer.tsx

@@ -83,7 +83,7 @@ export default function CartDrawer() {
               <span className="text-brand-primary">{formatPrice(getCartTotal())}</span>
             </div>
             <p className="text-center text-xs text-muted-text">{t('cart.shippingNote')}</p>
-            <Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
+            <Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary">
               {t('cart.proceed')}
             </Link>
           </div>

apps/website/src/components/CheckoutClient.tsx

@@ -401,7 +401,7 @@ export default function CheckoutClient() {
         <ShoppingBag className="mx-auto h-14 w-14 text-brand-primary" />
         <h2 className="mt-5 text-3xl font-semibold text-text-main">ตะกร้าสินค้าว่าง</h2>
         <p className="mt-3 text-muted-text">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
-        <Link href="/shop" className="mt-8 inline-flex rounded-full bg-text-main px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
+        <Link href="/shop" className="mt-8 inline-flex rounded-full bg-text-main px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary">
           กลับไปเลือกสินค้า
         </Link>
       </div>
@@ -642,7 +642,7 @@ 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"
+                    className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary disabled:opacity-50"
                   >
                     {couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
                   </button>
@@ -756,7 +756,7 @@ export default function CheckoutClient() {
               type="submit"
               form="checkout-form"
               disabled={submitting || loadingSettings}
-              className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
+              className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
             >
               <span className="flex items-center gap-2">
                 {submitting && <Loader2 className="h-5 w-5 animate-spin" />}

apps/website/src/components/Navbar.tsx

@@ -231,7 +231,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             >
               <Heart className="h-4 w-4 transition-colors" />
               {wishlistCount > 0 && (
-                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
+                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-surface-card">
                   {wishlistCount}
                 </span>
               )}
@@ -247,7 +247,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             >
               <ShoppingBag className="h-4 w-4 transition-colors" />
               {cartCount > 0 && (
-                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
+                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-surface-card">
                   {cartCount}
                 </span>
               )}
@@ -353,7 +353,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                   className="w-full border-none bg-transparent p-4 pl-0 text-lg text-text-main outline-none placeholder:text-text-main/35 md:text-xl"
                   autoFocus
                 />
-                <button type="submit" className="shrink-0 bg-text-main px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary md:px-6">
+                <button type="submit" className="shrink-0 bg-text-main px-4 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary md:px-6">
                   Go
                 </button>
               </div>

apps/website/src/components/ProfileClient.tsx

@@ -294,7 +294,7 @@ export default function ProfileClient() {
         <button
           type="button"
           onClick={handleLineLogin}
-          className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-line-primary px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-line-primary-hover"
+          className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-line-primary px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-line-primary-hover"
         >
           <Award className="h-5 w-5" />
           เข้าสู่ระบบผ่าน LINE
@@ -435,7 +435,7 @@ export default function ProfileClient() {
                   สมุดที่อยู่จัดส่ง
                 </h2>
                 {!showAddressForm && (
-                  <button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
+                  <button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary">
                     <Plus className="h-4 w-4" />
                     เพิ่มที่อยู่ใหม่
                   </button>
@@ -474,7 +474,7 @@ export default function ProfileClient() {
                     <button type="button" onClick={resetAddressForm} className="ui-form-secondary-button">
                       ยกเลิก
                     </button>
-                    <button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-brand-primary px-5 py-2 text-sm font-semibold text-white disabled:opacity-60">
+                    <button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-brand-primary px-5 py-2 text-sm font-semibold text-surface-card disabled:opacity-60">
                       {submittingAddress && <Loader2 className="h-4 w-4 animate-spin" />}
                       บันทึกที่อยู่
                     </button>
@@ -534,7 +534,7 @@ export default function ProfileClient() {
                 )}
                 <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" />
-                <button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-primary px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60">
+                <button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-primary px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-surface-card disabled:opacity-60">
                   {submittingSettings ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
                   บันทึกข้อมูลติดต่อ
                 </button>
@@ -598,7 +598,7 @@ function EmptyPanel({
       <h3 className="text-xl font-semibold text-text-main">{title}</h3>
       <p className="mx-auto mt-2 max-w-md text-sm text-muted-text">{description}</p>
       {actionHref && actionText && (
-        <Link href={actionHref} className="mt-6 inline-flex rounded-full bg-brand-primary px-6 py-3 text-sm font-bold text-white">
+        <Link href={actionHref} className="mt-6 inline-flex rounded-full bg-brand-primary px-6 py-3 text-sm font-bold text-surface-card">
           {actionText}
         </Link>
       )}

apps/website/src/components/TrackOrderClient.tsx

@@ -174,7 +174,7 @@ export default function TrackOrderClient() {
                   <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Order</p>
                   <p className="mt-1 font-mono text-2xl font-bold text-text-main">{orderLabel(id)}</p>
                 </div>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-text-main transition group-hover:bg-brand-primary group-hover:text-white">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-text-main transition group-hover:bg-brand-primary group-hover:text-surface-card">
                   <ChevronRight className="h-5 w-5" />
                 </div>
               </Link>

apps/website/src/components/WishlistClient.tsx

@@ -21,7 +21,7 @@ export default function WishlistClient() {
         </p>
         <Link
           href="/shop"
-          className="mt-8 inline-flex rounded-full bg-brand-primary px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-brand-primary-hover"
+          className="mt-8 inline-flex rounded-full bg-brand-primary px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-surface-card transition hover:bg-brand-primary-hover"
         >
           Browse Shop
         </Link>

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

@@ -80,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
 
   return (
     <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'}`}
+      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-surface-card'}`}
       style={{ backgroundColor, color: textColor }}
     >
       <Swiper
@@ -125,7 +125,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
       <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 && (
-            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-white drop-shadow-md md:text-sm">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-surface-card drop-shadow-md md:text-sm">
               {tagline}
             </p>
           )}
@@ -209,10 +209,10 @@ function CategoriesSection({
                   className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-text-main/65 to-transparent" />
-                <div className="absolute bottom-5 left-5 right-5 text-white">
+                <div className="absolute bottom-5 left-5 right-5 text-surface-card">
                   <span className="block text-lg font-semibold">{name}</span>
                   {category._count && (
-                    <span className="text-sm text-white/80">
+                    <span className="text-sm text-surface-card">
                       {category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en}
                     </span>
                   )}
@@ -290,7 +290,7 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
       <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>}
+        {description && <p className="text-surface-card">{description}</p>}
         {buttonText && <span className="inline-flex rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main">{buttonText}</span>}
       </div>
     </div>
@@ -332,8 +332,8 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
     <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>}
+          <h2 className="text-3xl font-semibold text-surface-card md:text-4xl">{title}</h2>
+          {description && <p className="max-w-2xl text-surface-card">{description}</p>}
         </div>
         <form className="flex flex-col gap-3 sm:flex-row">
           <input className="ui-form-shell min-w-0 rounded-full" placeholder={placeholder} type="email" />
@@ -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="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">
+            <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-surface-card">
               {buttonText}
             </Link>
           )}
@@ -403,7 +403,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
       <div className="mx-auto max-w-7xl space-y-12">
         {title && (
           <div className="mx-auto max-w-3xl space-y-4 text-center">
-            <h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'ui-accent-text not-italic')}</h2>
+            <h2 className="text-4xl font-semibold text-surface-card md:text-5xl">{renderAccentTitle(title, 'ui-accent-text not-italic')}</h2>
             <div className="mx-auto h-px w-16 bg-brand-accent" />
           </div>
         )}
@@ -485,9 +485,9 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
       <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="ui-hero-title">{title}</h1>
-        {subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
+        {subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
         {(author || date) && (
-          <p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">
+          <p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
             {[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}
           </p>
         )}

apps/website/src/components/navigation/MobileDrawer.tsx

@@ -213,7 +213,7 @@ export function MobileDrawer({
           <Link
             href="/shop"
             onClick={onClose}
-            className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-brand-primary"
+            className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-surface-card shadow-sm transition-colors hover:bg-brand-primary"
           >
             Shop Now
           </Link>