From f88f0f23d7e58436707021d66b886288bfa019d8 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 10:19:14 +0700
Subject: [PATCH 1/7] migrate: `link` component

---
 .changeset/three-dogs-carry.md                    |  6 ++++++
 .../views/login/login.client.tsx                  |  6 +++---
 .../react/components/compound/collection-card.tsx |  6 +++---
 .../react/components/primitives/breadcrumbs.tsx   |  4 ++--
 .../src/react/components/primitives/link.tsx      | 15 +++++++++++----
 packages/react/src/react/pages/401.tsx            |  6 +++---
 packages/react/src/react/pages/403.tsx            |  6 +++---
 packages/react/src/react/pages/404.tsx            |  6 +++---
 8 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/three-dogs-carry.md

diff --git a/.changeset/three-dogs-carry.md b/.changeset/three-dogs-carry.md
new file mode 100644
index 00000000..2068ef9a
--- /dev/null
+++ b/.changeset/three-dogs-carry.md
@@ -0,0 +1,6 @@
+---
+'@genseki/react': patch
+'@example/erp': patch
+---
+
+- Migrate `link` component
diff --git a/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx b/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
index 0b76e1df..97ae66a2 100644
--- a/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
+++ b/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
@@ -15,7 +15,7 @@ import {
   FormItem,
   FormMessage,
 } from '../../../../../react/components/primitives/form'
-import { Link } from '../../../../../react/components/primitives/link'
+import { AriaLink } from '../../../../../react/components/primitives/link'
 import { AriaTextField } from '../../../../../react/components/primitives/text-field'
 import { useNavigation } from '../../../../../react/providers/navigation'
 import { useServerFunction } from '../../../../../react/providers/root'
@@ -125,9 +125,9 @@ export function LoginClientForm() {
               </FormItem>
             )}
           />
-          <Link href="./forgot-password" intent="primary" className="text-sm ml-auto">
+          <AriaLink href="./forgot-password" intent="primary" className="text-sm ml-auto">
             Forgot Password?
-          </Link>
+          </AriaLink>
           <SubmitButton pending={isLoading}>Login</SubmitButton>
         </form>
       </Form>
diff --git a/packages/react/src/react/components/compound/collection-card.tsx b/packages/react/src/react/components/compound/collection-card.tsx
index 6b964879..9b1c427e 100644
--- a/packages/react/src/react/components/compound/collection-card.tsx
+++ b/packages/react/src/react/components/compound/collection-card.tsx
@@ -2,7 +2,7 @@ import { CaretRightIcon, CubeIcon, FolderIcon } from '@phosphor-icons/react/dist
 
 import { Badge } from '../../icons/badge'
 import { BaseIcon } from '../primitives/base-icon'
-import { Link } from '../primitives/link'
+import { AriaLink } from '../primitives/link'
 import { Typography } from '../primitives/typography'
 
 interface CollectionCardProps {
@@ -51,7 +51,7 @@ export const CollectionCard = ({
           {description}
         </Typography>
       </div>
-      <Link
+      <AriaLink
         href={url}
         className="[&>*]:text-primary group flex w-full justify-end rounded-[calc(var(--spacing)*4)] p-5 text-end transition-all [background-image:linear-gradient(120deg,_--alpha(var(--color-primary)/5%)_35%,--alpha(var(--color-primary)/10%)_40%,--alpha(var(--color-primary)/0%)_80%,--alpha(var(--color-primary)/5%))] hover:[background-position:40px_0]"
       >
@@ -64,7 +64,7 @@ export const CollectionCard = ({
           weight="regular"
           className="transition-transform group-hover:translate-x-2"
         />
-      </Link>
+      </AriaLink>
     </div>
   )
 }
diff --git a/packages/react/src/react/components/primitives/breadcrumbs.tsx b/packages/react/src/react/components/primitives/breadcrumbs.tsx
index 50b5a425..4ff25216 100644
--- a/packages/react/src/react/components/primitives/breadcrumbs.tsx
+++ b/packages/react/src/react/components/primitives/breadcrumbs.tsx
@@ -6,7 +6,7 @@ import { Breadcrumb, Breadcrumbs as BreadcrumbsPrimitive } from 'react-aria-comp
 import { IconChevronLgRight } from '@intentui/icons'
 import { twMerge } from 'tailwind-merge'
 
-import { Link } from './link'
+import { AriaLink } from './link'
 import { composeTailwindRenderProps } from './primitive'
 
 interface BreadcrumbsContextProps {
@@ -54,7 +54,7 @@ const BreadcrumbsItem = ({
     >
       {({ isCurrent }) => (
         <>
-          <Link href={href} {...props} />
+          <AriaLink href={href} {...props} />
           {trailing}
           {!isCurrent && separator !== false && <Separator separator={separatorValue} />}
         </>
diff --git a/packages/react/src/react/components/primitives/link.tsx b/packages/react/src/react/components/primitives/link.tsx
index 2012b709..ec29eae5 100644
--- a/packages/react/src/react/components/primitives/link.tsx
+++ b/packages/react/src/react/components/primitives/link.tsx
@@ -6,12 +6,19 @@ import { twJoin } from 'tailwind-merge'
 
 import { composeTailwindRenderProps } from './primitive'
 
-interface LinkProps extends LinkPrimitiveProps {
+/**
+ * @deprecated
+ */
+interface AriaLinkProps extends LinkPrimitiveProps {
   intent?: 'primary' | 'secondary' | 'unstyled'
   ref?: React.RefObject<HTMLAnchorElement>
 }
 
-const Link = ({ className, ref, intent = 'unstyled', ...props }: LinkProps) => {
+/**
+ * @deprecated
+ * Use anchor tag instead
+ */
+const AriaLink = ({ className, ref, intent = 'unstyled', ...props }: AriaLinkProps) => {
   return (
     <LinkPrimitive
       ref={ref}
@@ -34,5 +41,5 @@ const Link = ({ className, ref, intent = 'unstyled', ...props }: LinkProps) => {
   )
 }
 
-export type { LinkProps }
-export { Link }
+export type { AriaLinkProps }
+export { AriaLink }
diff --git a/packages/react/src/react/pages/401.tsx b/packages/react/src/react/pages/401.tsx
index e1ed848a..d20c4c8f 100644
--- a/packages/react/src/react/pages/401.tsx
+++ b/packages/react/src/react/pages/401.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotAuthorizedPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </Link>
+      </AriaLink>
     </div>
   )
 }
diff --git a/packages/react/src/react/pages/403.tsx b/packages/react/src/react/pages/403.tsx
index cb9f1b09..ba0de1a3 100644
--- a/packages/react/src/react/pages/403.tsx
+++ b/packages/react/src/react/pages/403.tsx
@@ -1,6 +1,6 @@
 import { ArrowRightIcon, LockKeyIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -22,10 +22,10 @@ export const UnauthorizedPage = () => {
         You are not authorized to access this page. Please check your permission and try again.
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
         Back to home
         <BaseIcon size="sm" icon={ArrowRightIcon} className="text-text-brand" weight="bold" />
-      </Link>
+      </AriaLink>
     </div>
   )
 }
diff --git a/packages/react/src/react/pages/404.tsx b/packages/react/src/react/pages/404.tsx
index c5450b5e..f1d57c24 100644
--- a/packages/react/src/react/pages/404.tsx
+++ b/packages/react/src/react/pages/404.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotfoundPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </Link>
+      </AriaLink>
     </div>
   )
 }

From c9db707123350c64d75c22a7c67bc12343d0ecfd Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 10:27:43 +0700
Subject: [PATCH 2/7] fix: incorrect imported component

---
 examples/ui-playground/src/app/playground/page.tsx        | 6 +++---
 examples/ui-playground/src/app/playground/shadcn/page.tsx | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/page.tsx b/examples/ui-playground/src/app/playground/page.tsx
index 1b2cd894..699b0740 100644
--- a/examples/ui-playground/src/app/playground/page.tsx
+++ b/examples/ui-playground/src/app/playground/page.tsx
@@ -27,6 +27,7 @@ import {
   AriaButton,
   AriaButtonGroup,
   AriaButtonGroupItem,
+  AriaLink,
   AriaModal,
   AriaModalBody,
   AriaModalClose,
@@ -50,7 +51,6 @@ import {
   Breadcrumbs,
   BreadcrumbsItem,
   Card,
-  Link,
   PageSizeSelect,
   Pagination,
   ProgressBar,
@@ -772,9 +772,9 @@ export default function UIPlayground() {
                       />
                       <div className="my-4 flex items-center justify-between">
                         <Checkbox name="remember-me">Remember me</Checkbox>
-                        <Link className="text-sm" href="#">
+                        <AriaLink className="text-sm" href="#">
                           Forgot password?
-                        </Link>
+                        </AriaLink>
                       </div>
                       <div>
                         <CheckboxGroup
diff --git a/examples/ui-playground/src/app/playground/shadcn/page.tsx b/examples/ui-playground/src/app/playground/shadcn/page.tsx
index 2e80338b..c819144c 100644
--- a/examples/ui-playground/src/app/playground/shadcn/page.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/page.tsx
@@ -1,7 +1,9 @@
 'use client'
 import * as React from 'react'
 
-import { Link, Typography } from '@genseki/react'
+import Link from 'next/link'
+
+import { Typography } from '@genseki/react'
 
 import { ButtonSection } from './button-section'
 import { ComboboxSection } from './combobox-section'

From 617b4093bb72cd6b77df688ceb6d0ab9be849662 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 14:25:02 +0700
Subject: [PATCH 3/7] fix: `color-tokens`, `button` variants

---
 .../app/playground/shadcn/button-section.tsx  |  52 +++++++--
 .../playground/shadcn/combobox-section.tsx    |   2 +-
 .../app/playground/shadcn/input-section.tsx   |   2 +-
 .../react/components/primitives/button.tsx    |  21 ++--
 .../react/components/primitives/combobox.tsx  |   5 +-
 packages/react/src/react/styles/tailwind.css  | 110 ++++++++----------
 6 files changed, 108 insertions(+), 84 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
index 30ed4ed0..79b7957a 100644
--- a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
@@ -28,13 +28,43 @@ import { PlaygroundCard } from '~/src/components/card'
 // Basic Button Variants
 function ButtonVariants() {
   return (
-    <div className="flex flex-wrap gap-4">
-      <Button variant="default">Default</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-4">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+        <Button variant="naked">Naked</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap gap-4">
+        <Button disabled variant="primary">
+          Primary
+        </Button>
+        <Button disabled variant="secondary">
+          Secondary
+        </Button>
+        <Button disabled variant="tertiary">
+          Tertiary
+        </Button>
+        <Button disabled variant="naked">
+          Naked
+        </Button>
+        <Button disabled variant="outline">
+          Outline
+        </Button>
+        <Button disabled variant="ghost">
+          Ghost
+        </Button>
+        <Button disabled variant="destructive">
+          Destructive
+        </Button>
+        <Button disabled variant="link">
+          Link
+        </Button>
+      </div>
     </div>
   )
 }
@@ -137,7 +167,9 @@ function ButtonGroupBasic() {
   return (
     <ButtonGroup>
       <Button variant="outline">One</Button>
+      <ButtonGroupSeparator />
       <Button variant="outline">Two</Button>
+      <ButtonGroupSeparator />
       <Button variant="outline">Three</Button>
     </ButtonGroup>
   )
@@ -229,12 +261,10 @@ function ButtonGroupVariants() {
   return (
     <div className="space-y-4">
       <ButtonGroup>
-        <Button variant="default">Primary</Button>
+        <Button variant="primary">Primary</Button>
         <Button variant="secondary">Secondary</Button>
+        <Button variant="naked">Naked</Button>
         <Button variant="outline">Outline</Button>
-      </ButtonGroup>
-
-      <ButtonGroup>
         <Button variant="ghost">Ghost</Button>
         <Button variant="destructive">Destructive</Button>
       </ButtonGroup>
diff --git a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
index ee2a6aca..ea1b3175 100644
--- a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
@@ -256,7 +256,7 @@ function CustomTriggerComboboxSingle() {
     <ComboboxProvider items={frameworks}>
       <ComboboxTrigger>
         {(selectedItem) => (
-          <Button variant="secondary" className="w-[250px] justify-between">
+          <Button variant="outline" className="w-[250px] justify-between">
             {selectedItem ? (
               <span>🚀 {selectedItem.label}</span>
             ) : (
diff --git a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
index d66d789f..07a16931 100644
--- a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
@@ -246,7 +246,7 @@ function InputGroupWithButtons() {
           <Input placeholder="Enter your message" />
         </InputGroupControl>
         <InputGroupAddon align="inline-end">
-          <InputGroupButton size="xs" variant="default">
+          <InputGroupButton size="xs" variant="primary">
             <PaperPlaneRightIcon />
             Send
           </InputGroupButton>
diff --git a/packages/react/src/react/components/primitives/button.tsx b/packages/react/src/react/components/primitives/button.tsx
index 47effb67..33047904 100644
--- a/packages/react/src/react/components/primitives/button.tsx
+++ b/packages/react/src/react/components/primitives/button.tsx
@@ -202,19 +202,26 @@ export { AriaButton, AriaButtonLink, type AriaButtonLinkProps, type AriaButtonPr
 
 const buttonVariants = cva(
   [
-    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring/50 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     'disabled:opacity-80 cursor-pointer',
   ],
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary',
+        primary:
+          ' bg-surface-button-primary shadow-[inset_0px_-12px_12px_-6px_var(--color-surface-button-primary-hover)] text-text-inverse hover:bg-surface-button-primary-hover active:bg-surface-button-primary disabled:bg-surface-button-primary-disabled disabled:shadow-none disabled:text-text-disabled disabled:border disabled:border-border-button-primary-disabled',
+        secondary:
+          ' bg-surface-button-secondary ring-offset-0 text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:shadow-none disabled:text-text-disabled',
+        tertiary:
+          ' bg-surface-button-tertiary border border-border-button-tertiary text-text-brand hover:bg-surface-button-tertiary-hover active:bg-surface-button-tertiary hover:border-border-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled disabled:border-border-button-tertiary-disabled disabled:text-text-disabled',
+        naked:
+          'shadow-sm ring-offset-0 text-text-secondary hover:bg-surface-button-naked-hover active:bg-transparent disabled:bg-surface-button-naked-disabled  disabled:text-text-disabled',
+        outline:
+          ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        ghost:
+          ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline hover:border-0',
       },
       size: {
@@ -227,7 +234,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
       size: 'default',
     },
   }
diff --git a/packages/react/src/react/components/primitives/combobox.tsx b/packages/react/src/react/components/primitives/combobox.tsx
index 5e90a3c6..677e1e4d 100644
--- a/packages/react/src/react/components/primitives/combobox.tsx
+++ b/packages/react/src/react/components/primitives/combobox.tsx
@@ -614,7 +614,10 @@ function ComboboxContent({
 >) {
   return (
     <Command loop className="w-fit">
-      <PopoverContent className={cn('w-(--radix-popover-trigger-width) p-0', className)} {...props}>
+      <PopoverContent
+        className={cn('w-(--radix-popover-trigger-width) bg-background p-0', className)}
+        {...props}
+      >
         {children}
       </PopoverContent>
     </Command>
diff --git a/packages/react/src/react/styles/tailwind.css b/packages/react/src/react/styles/tailwind.css
index 7631bfd4..3c0057e9 100644
--- a/packages/react/src/react/styles/tailwind.css
+++ b/packages/react/src/react/styles/tailwind.css
@@ -13,18 +13,6 @@
   /* Override default spacing */
   --spacing: 2px;
 
-  --radius: initial;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-3xl: 20px;
-  --radius-4xl: 24px;
-
-  --color-base-white: #ffffff;
-  --color-base-black: #000000;
-
   --color-pumpkin-50: #fffaf8;
   --color-pumpkin-100: #feeadd;
   --color-pumpkin-200: #ffc8ab;
@@ -147,8 +135,8 @@
   --color-text-secondary: var(--color-bluegray-600);
   --color-text-tertiary: var(--color-bluegray-400);
 
-  --color-text-inverse: var(--color-base-white);
-  --color-text-disabled: var(--color-bluegray-100);
+  --color-text-disabled: var(--color-bluegray-300);
+  --color-text-inverse: var(--color-white);
 
   --color-text-brand: var(--color-pumpkin-500);
   --color-text-brand-bold: var(--color-pumpkin-600);
@@ -159,8 +147,8 @@
   --color-text-correct: var(--color-palm-500);
   --color-text-correct-bold: var(--color-palm-600);
 
-  --color-text-incorrect: var(--color-red-600);
-  --color-text-incorrect-bold: var(--color-red-700);
+  --color-text-incorrect: var(--color-red-500);
+  --color-text-incorrect-bold: var(--color-red-600);
 
   --color-text-accent: var(--color-yellow-500);
   --color-text-accent-bold: var(--color-yellow-600);
@@ -173,7 +161,6 @@
   --color-icon-secondary: var(--color-bluegray-600);
   --color-icon-tertiary: var(--color-bluegray-400);
 
-  --color-icon-inverse: var(--color-base-white);
   --color-icon-disabled: var(--color-bluegray-100);
 
   --color-icon-brand: var(--color-pumpkin-500);
@@ -194,20 +181,10 @@
   --color-icon-chowder: var(--color-purple-500);
   --color-icon-chowder-bold: var(--color-purple-600);
 
-  /* border */
-  --color-border-primary: var(--color-bluegray-500);
-  --color-border-secondary: var(--color-bluegray-400);
-  --color-border-tertiary: var(--color-bluegray-300);
-  --color-border-very-trival: var(--color-gray-200);
-  --color-border-correct: var(--color-palm-400);
-  --color-border-incorrect: var(--color-red-500);
-  --color-border-accent: var(--color-yellow-400);
-  --color-border-brand: var(--color-pumpkin-500);
-
   /* Surface */
-  --color-surface-primary: var(--color-base-white);
+
   --color-surface-primary-hover: var(--color-bluegray-100);
-  --color-surface-primary-active: var(--color-bluegray-300);
+  --color-surface-primary-active: var(--color-bluegray-100);
   --color-surface-primary-disabled: var(--color-bluegray-50);
   --color-surface-secondary: var(--color-bluegray-400);
   --color-surface-tertiary: var(--color-bluegray-50);
@@ -218,14 +195,6 @@
   --color-surface-correct-hover: var(--color-palm-500);
   --color-surface-incorrect: var(--color-red-50);
   --color-surface-incorrect-hover: var(--color-red-500);
-  --color-surface-incorrect: var(--color-valencia-50);
-  --color-surface-incorrect-hover: var(--color-red-500);
-  --color-surface-primary: var(--color-white);
-  --color-surface-primary-hover: var(--color-bluegray-100);
-  --color-surface-primary-active: var(--color-bluegray-100);
-  --color-surface-primary-disabled: var(--color-bluegray-50);
-  --color-surface-secondary: var(--color-bluegray-400);
-  --color-surface-tertiary: var(--color-bluegray-50);
   --color-surface-accent: var(--color-yellow-50);
   --color-surface-accent-hover: var(--color-yellow-500);
   --color-surface-info: var(--color-ocean-50);
@@ -233,6 +202,21 @@
   --color-surface-chowder: var(--color-purple-50);
   --color-surface-chowder-hover: var(--color-purple-500);
 
+  /* border */
+  --color-border-primary: var(--color-bluegray-300);
+  --color-border-secondary: var(--color-bluegray-400);
+  --color-border-tertiary: var(--color-bluegray-500);
+  --color-border-inverse: var(--color-white);
+  --color-border-brand: var(--color-pumpkin-400);
+  --color-border-brand-bold: var(--color-pumpkin-500);
+  --color-border-focus: var(--color-pumpkin-400);
+  --color-border-correct: var(--color-palm-400);
+  --color-border-incorrect: var(--color-red-500);
+  --color-border-accent: var(--color-yellow-400);
+  --color-border-info: var(--color-ocean-400);
+  --color-border-chowder: var(--color-purple-400);
+
+  /* Font */
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
@@ -241,49 +225,50 @@
     '"Liberation Mono"', '"Courier New"', 'monospace';
 
   /* Genseki | Contextual token (Component token)*/
-  --color-border-button-primary-disabled: var(--color-gray-200);
-
-  --color-border-button-tertiary: var(--color-pumpkin-400);
-  --color-border-button-tertiary-hover: var(--color-pumpkin-400);
-  --color-border-button-tertiary-disabled: var(--color-gray-200);
-
-  --color-border-button-outline: var(--color-bluegray-300);
-  --color-border-button-outline-hover: var(--color-bluegray-300);
-  --color-border-button-outline-disabled: var(--color-bluegray-300);
-
-  --background-image-surface-button-primary: linear-gradient(
-    180deg,
-    var(--color-pumpkin-500) 35%,
-    var(--color-pumpkin-600) 105%
-  );
+  /* Primary */
+  --color-surface-button-primary: var(--color-pumpkin-400);
   --color-surface-button-primary-hover: var(--color-pumpkin-500);
   --color-surface-button-primary-disabled: var(--color-bluegray-50);
+  --color-border-button-primary-disabled: var(--color-gray-200);
 
+  /* Secondary */
   --color-surface-button-secondary: var(--color-pumpkin-50);
   --color-surface-button-secondary-hover: var(--color-pumpkin-100);
   --color-surface-button-secondary-disabled: var(--color-bluegray-50);
+  --color-shadow-button-secondary: var(--color-pumpkin-200);
 
+  /* Tertiary */
   --color-surface-button-tertiary: var(--color-pumpkin-50);
   --color-surface-button-tertiary-hover: var(--color-pumpkin-100);
   --color-surface-button-tertiary-disabled: var(--color-bluegray-50);
+  --color-border-button-tertiary: var(--color-pumpkin-400);
+  --color-border-button-tertiary-hover: var(--color-pumpkin-400);
+  --color-border-button-tertiary-disabled: var(--color-bluegray-200);
 
-  --color-surface-button-naked: var(--color-base-white);
+  /* Naked */
   --color-surface-button-naked-hover: var(--color-bluegray-100);
   --color-surface-button-naked-disabled: var(--color-bluegray-50);
 
-  --color-surface-button-outline: var(--color-base-white);
+  /* Outline */
+  --color-surface-button-outline: var(--color-white);
   --color-surface-button-outline-hover: var(--color-bluegray-50);
   --color-surface-button-outline-disabled: var(--color-bluegray-50);
+  --color-border-button-outline: var(--color-bluegray-300);
+  --color-border-button-outline-hover: var(--color-bluegray-300);
+  --color-border-button-outline-disabled: var(--color-bluegray-300);
 
-  --color-surface-button-ghost: var(--color-bluegray-50);
+  /* Ghost */
+  --color-surface-button-ghost: transparent;
+  --color-surface-button-ghost-hover: var(--color-bluegray-100);
 
-  --color-surface-button-destruction: var(--color-red-500);
+  /* Destruction */
+  --color-surface-button-destruction: var(--color-red-600);
   --color-surface-button-destruction-hover: var(--color-red-700);
   --color-surface-button-destruction-disabled: var(--color-bluegray-50);
 
   /* Intent UI | semantics (Deprecated soon) */
-  --color-bg: var(--color-base-white);
-  --color-fg: var(--color-base-black);
+  --color-bg: var(--color-white);
+  --color-fg: var(--color-black);
 
   --color-primary: var(--color-pumpkin-500);
   --color-primary-fg: var(--color-pumpkin-50);
@@ -297,7 +282,6 @@
   --color-accent: var(--color-bluegray-50);
   --color-accent-fg: var(--color-bluegray-900);
 
-  --color-overlay: var(--color-base-white);
   --color-overlay-fg: var(--color-bluegray-900);
 
   --color-muted: var(--color-bluegray-100);
@@ -324,8 +308,8 @@
   --color-danger-subtle: oklch(0.637 0.237 25.331 / 0.15);
   --color-danger-subtle-fg: oklch(0.505 0.213 27.518);
 
-  --color-border: var(--color-border-very-trival);
-  --color-input: var(--color-border-tertiary);
+  --color-border: var(--color-border-primary);
+  --color-input: var(--color-border-primary); /* Hold fore designer change */
   --color-ring: var(--color-pumpkin-500);
 
   --color-navbar: var(--color-bluegray-50);
@@ -424,7 +408,7 @@
   background-color: var(--color-pumpkin-500);
   background-image: linear-gradient(
     to bottom,
-    --alpha(var(--color-base-white) / --value(percentage)),
+
     --alpha(var(--color-pumpkin-600) / --value(percentage))
   );
 }
@@ -433,7 +417,7 @@
   background-color: var(--color-pumpkin-100);
   background-image: linear-gradient(
     to bottom,
-    --alpha(var(--color-base-white) / --value(percentage)),
+
     --alpha(var(--color-pumpkin-600) / --value(percentage))
   );
 }

From 839feda214b9c002e6d8f4fe5688e72ff76a2288 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 14:33:42 +0700
Subject: [PATCH 4/7] add `link` example, and remove button `link` variant.

---
 .changeset/three-dogs-carry.md                |  6 ++++-
 .../app/playground/shadcn/button-section.tsx  |  4 ---
 .../app/playground/shadcn/link-section.tsx    | 27 +++++++++++++++++++
 .../src/app/playground/shadcn/page.tsx        |  8 ++++++
 .../react/components/primitives/button.tsx    |  1 -
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 examples/ui-playground/src/app/playground/shadcn/link-section.tsx

diff --git a/.changeset/three-dogs-carry.md b/.changeset/three-dogs-carry.md
index 2068ef9a..ff14ff02 100644
--- a/.changeset/three-dogs-carry.md
+++ b/.changeset/three-dogs-carry.md
@@ -3,4 +3,8 @@
 '@example/erp': patch
 ---
 
-- Migrate `link` component
+- Deprecated `link` component
+- Remove button `link` variant
+- Add example for `link` usage
+- Update button variants
+- update design tokens
diff --git a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
index 79b7957a..84aeafb3 100644
--- a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
@@ -37,7 +37,6 @@ function ButtonVariants() {
         <Button variant="outline">Outline</Button>
         <Button variant="ghost">Ghost</Button>
         <Button variant="destructive">Destructive</Button>
-        <Button variant="link">Link</Button>
       </div>
       <div className="flex flex-wrap gap-4">
         <Button disabled variant="primary">
@@ -61,9 +60,6 @@ function ButtonVariants() {
         <Button disabled variant="destructive">
           Destructive
         </Button>
-        <Button disabled variant="link">
-          Link
-        </Button>
       </div>
     </div>
   )
diff --git a/examples/ui-playground/src/app/playground/shadcn/link-section.tsx b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
new file mode 100644
index 00000000..0614c4d6
--- /dev/null
+++ b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Link from 'next/link'
+
+import { Typography } from '@genseki/react'
+
+import { PlaygroundCard } from '../../../components/card'
+
+export const LinkSection = () => {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Basic Link" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A simple Link component examples
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <Link
+            className="text-sm font-medium text-primary underline-offset-4 hover:underline hover:border-0"
+            href="."
+          >
+            Link
+          </Link>
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}
diff --git a/examples/ui-playground/src/app/playground/shadcn/page.tsx b/examples/ui-playground/src/app/playground/shadcn/page.tsx
index c819144c..27dcfeb3 100644
--- a/examples/ui-playground/src/app/playground/shadcn/page.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/page.tsx
@@ -8,6 +8,7 @@ import { Typography } from '@genseki/react'
 import { ButtonSection } from './button-section'
 import { ComboboxSection } from './combobox-section'
 import { InputSection } from './input-section'
+import { LinkSection } from './link-section'
 
 export default function ComboboxPage() {
   return (
@@ -31,6 +32,11 @@ export default function ComboboxPage() {
           Input
         </Typography>
         <InputSection />
+
+        <Typography type="h2" weight="bold" id="link">
+          Link
+        </Typography>
+        <LinkSection />
       </div>
       <div className="relative bg-card border-l border-border w-[200px]">
         <div className="sticky inset-0 max-h-screen [overscroll-behavior:none] p-4">
@@ -40,6 +46,8 @@ export default function ComboboxPage() {
             <Link href="#combobox">{'>'} Combobox</Link>
             <hr />
             <Link href="#input">{'>'} Input</Link>
+            <hr />
+            <Link href="#link">{'>'} Link</Link>
           </div>
         </div>
       </div>
diff --git a/packages/react/src/react/components/primitives/button.tsx b/packages/react/src/react/components/primitives/button.tsx
index 33047904..c60192c5 100644
--- a/packages/react/src/react/components/primitives/button.tsx
+++ b/packages/react/src/react/components/primitives/button.tsx
@@ -222,7 +222,6 @@ const buttonVariants = cva(
           ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        link: 'text-primary underline-offset-4 hover:underline hover:border-0',
       },
       size: {
         default: 'h-18 px-8 py-4 has-[>svg]:px-6',

From cdd7d0534f6e3fdea944c10429ebde9d08068464 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 14:59:22 +0700
Subject: [PATCH 5/7] fix: move `link` to `cva` variant

---
 .../app/playground/shadcn/link-section.tsx    | 12 ++++++------
 .../ui-playground/src/components/card.tsx     |  5 ++---
 .../src/react/components/primitives/link.tsx  | 19 +++++++++++++++++++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/shadcn/link-section.tsx b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
index 0614c4d6..ade3be8d 100644
--- a/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import Link from 'next/link'
 
-import { Typography } from '@genseki/react'
+import { linkVariants, Typography } from '@genseki/react'
 
 import { PlaygroundCard } from '../../../components/card'
 
@@ -13,11 +13,11 @@ export const LinkSection = () => {
         <Typography type="body" className="text-muted-foreground mb-4">
           A simple Link component examples
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
-          <Link
-            className="text-sm font-medium text-primary underline-offset-4 hover:underline hover:border-0"
-            href="."
-          >
+        <div className="p-4 bg-background w-full rounded-lg flex gap-x-2">
+          <Link className={linkVariants({ variant: 'underline', size: 'sm' })} href=".">
+            Link
+          </Link>
+          <Link className={linkVariants({ variant: 'plain', size: 'sm' })} href=".">
             Link
           </Link>
         </div>
diff --git a/examples/ui-playground/src/components/card.tsx b/examples/ui-playground/src/components/card.tsx
index 2a8c6f41..72fc9fd3 100644
--- a/examples/ui-playground/src/components/card.tsx
+++ b/examples/ui-playground/src/components/card.tsx
@@ -1,6 +1,5 @@
 import { StarIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { BaseIcon } from '@genseki/react'
 import { Typography } from '@genseki/react'
 
 type PlaygroundCardProps = React.PropsWithChildren<{
@@ -14,11 +13,11 @@ export const PlaygroundCard = ({
   children,
 }: PlaygroundCardProps) => {
   return (
-    <div className="border-border inline-flex min-w-[260px] flex-col rounded-lg border">
+    <div className="border-border inline-flex min-w-[260px] flex-col rounded-lg border bg-background">
       <div className="border-border flex w-full flex-col gap-y-4 border-b px-4 py-6">
         <div className="flex items-center gap-x-2">
           <div className="rounded-md bg-blue-500 p-2">
-            <BaseIcon icon={StarIcon} size="sm" weight="duotone" className="text-text-inverse" />
+            <StarIcon className="text-text-inverse" />
           </div>
           <Typography type="caption" weight="medium" className="text-blue-500">
             {categoryTitle}
diff --git a/packages/react/src/react/components/primitives/link.tsx b/packages/react/src/react/components/primitives/link.tsx
index ec29eae5..7422599e 100644
--- a/packages/react/src/react/components/primitives/link.tsx
+++ b/packages/react/src/react/components/primitives/link.tsx
@@ -2,6 +2,7 @@
 
 import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'
 
+import { cva } from 'class-variance-authority'
 import { twJoin } from 'tailwind-merge'
 
 import { composeTailwindRenderProps } from './primitive'
@@ -43,3 +44,21 @@ const AriaLink = ({ className, ref, intent = 'unstyled', ...props }: AriaLinkPro
 
 export type { AriaLinkProps }
 export { AriaLink }
+
+export const linkVariants = cva('text-sm font-medium text-primary', {
+  variants: {
+    variant: {
+      plain: null,
+      underline: 'underline-offset-4 hover:underline hover:border-0',
+    },
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    variant: 'underline',
+    size: 'sm',
+  },
+})

From ed6e8038ec2928f166fa4af373d9a7c096e2a9b5 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 15:10:27 +0700
Subject: [PATCH 6/7] feat: make multi value combobox item removable from chip
 press

---
 .../app/playground/shadcn/combobox-section.tsx    |  2 +-
 .../src/react/components/primitives/combobox.tsx  | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
index ea1b3175..8e33f641 100644
--- a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
@@ -292,7 +292,7 @@ export function ComboboxSection() {
     <div className="grid gap-8">
       <PlaygroundCard title="Basic Combobox (Multiple selection)" categoryTitle="Component">
         <Typography type="body" className="text-muted-foreground mb-4">
-          A simple combobox with default styling and behavior.
+          A simple combobox with default styling and mbehavior.
         </Typography>
         <div className="p-4 bg-background w-full rounded-lg">
           <BasicComboboxMultiple />
diff --git a/packages/react/src/react/components/primitives/combobox.tsx b/packages/react/src/react/components/primitives/combobox.tsx
index 677e1e4d..24840f9e 100644
--- a/packages/react/src/react/components/primitives/combobox.tsx
+++ b/packages/react/src/react/components/primitives/combobox.tsx
@@ -9,6 +9,7 @@ import {
   MagnifyingGlassIcon,
   SpinnerIcon,
   XCircleIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import { tv } from 'tailwind-variants'
@@ -533,8 +534,20 @@ function ComboboxTriggerMultiValue(props: {
     return (
       <span className="flex flex-wrap flex-1 gap-2 pr-8">
         {selectedItems.map((selectedItem) => (
-          <Badge shape="square" intent="gray" key={selectedItem.value}>
+          <Badge
+            onClick={(e) => {
+              e.stopPropagation()
+              ctx.onValueChange((prevItems) =>
+                prevItems.filter((prevItem) => prevItem !== selectedItem.value)
+              )
+            }}
+            shape="square"
+            intent="gray"
+            key={selectedItem.value}
+            className="flex "
+          >
             {selectedItem.label}
+            <XIcon className="size-5 ml-1" />
           </Badge>
         ))}
       </span>

From 01605e10086b3813540a4660ac12c37f99e33fad Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Wed, 15 Oct 2025 15:21:29 +0700
Subject: [PATCH 7/7] fix: remove  `secondary` button variant shadow

---
 packages/react/src/react/components/primitives/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/react/components/primitives/button.tsx b/packages/react/src/react/components/primitives/button.tsx
index c60192c5..43f2a1ba 100644
--- a/packages/react/src/react/components/primitives/button.tsx
+++ b/packages/react/src/react/components/primitives/button.tsx
@@ -211,7 +211,7 @@ const buttonVariants = cva(
         primary:
           ' bg-surface-button-primary shadow-[inset_0px_-12px_12px_-6px_var(--color-surface-button-primary-hover)] text-text-inverse hover:bg-surface-button-primary-hover active:bg-surface-button-primary disabled:bg-surface-button-primary-disabled disabled:shadow-none disabled:text-text-disabled disabled:border disabled:border-border-button-primary-disabled',
         secondary:
-          ' bg-surface-button-secondary ring-offset-0 text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:shadow-none disabled:text-text-disabled',
+          ' bg-surface-button-secondary text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:shadow-none disabled:text-text-disabled',
         tertiary:
           ' bg-surface-button-tertiary border border-border-button-tertiary text-text-brand hover:bg-surface-button-tertiary-hover active:bg-surface-button-tertiary hover:border-border-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled disabled:border-border-button-tertiary-disabled disabled:text-text-disabled',
         naked: