@pantoia/ui 0.1.0 → 0.2.0

package/accordion/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add accordion
 층     ui
-파일   accordion/index.tsx · accordion/index.module.css · accordion/AGENTS.md
+파일   accordion/index.tsx, accordion/index.module.css, accordion/AGENTS.md
 ```
 
 ## 부위
@@ -11,9 +11,9 @@
 | 이름 | props |
 |---|---|
 | `Accordion` | `AccordionProps` |
-| `AccordionItem` | — |
-| `AccordionTrigger` | — |
-| `AccordionContent` | — |
+| `AccordionItem` | - |
+| `AccordionTrigger` | - |
+| `AccordionContent` | - |
 
 ### `AccordionItem`
 
@@ -57,4 +57,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`lucide-react`, `radix-ui`

package/accordion/index.tsx

@@ -17,9 +17,11 @@ export interface AccordionProps {
   children?: ReactNode
 }
 
+const accordion = tv({ base: 'frame rounded-panel overflow-hidden divide-y divide-line' })
+
 export function Accordion({ value, defaultValue, onValueChange, multiple, className, children }: AccordionProps) {
   const shared = {
-    className: tv({ base: 'rounded-panel border border-line overflow-hidden divide-y divide-line' })({ className }),
+    className: accordion({ className }),
     children,
   }
 
@@ -58,21 +60,25 @@ export function AccordionItem({ value, disabled, className, children }: {
   )
 }
 
+const accordionTrigger = tv({
+  base: 'text-label text-foreground flex h-11 w-full items-center'
+    + ' gap-stack border-b border-transparent px-4 transition-state'
+    + ' press open:border-line enabled:hover:bg-bg-neutral-hover'
+    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
+    + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
+    + ' focus-visible:outline-line-focus-ring',
+})
+
 export function AccordionTrigger({ className, children }: { className?: string, children?: ReactNode }) {
   return (
     <AccordionPrimitive.Header>
       <AccordionPrimitive.Trigger
-        className={tv({ base: 'text-label text-fg flex h-11 w-full items-center'
-          + ' gap-stack border-b border-transparent px-4 transition-state'
-          + ' press open:border-line enabled:hover:bg-hover'
-          + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
-          + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
-          + ' focus-visible:outline-ring' })({ className })}
+        className={accordionTrigger({ className })}
       >
         <span className="flex min-w-0 grow items-center gap-tight">{children}</span>
 
         <ChevronDown
-          className="text-fg-subtle size-4 shrink-0 transition-transform open:rotate-180
+          className="text-foreground-subtle size-4 shrink-0 transition-transform open:rotate-180
                motion-reduce:transition-none"
         />
       </AccordionPrimitive.Trigger>
@@ -80,10 +86,12 @@ export function AccordionTrigger({ className, children }: { className?: string,
   )
 }
 
+const accordionContent = tv({ base: 'bg-background-well text-caption text-foreground-muted px-4 py-3' })
+
 export function AccordionContent({ className, children }: { className?: string, children?: ReactNode }) {
   return (
     <AccordionPrimitive.Content className={s.panel}>
-      <div className={tv({ base: 'bg-well text-caption text-fg-muted px-4 py-3' })({ className })}>
+      <div className={accordionContent({ className })}>
         {children}
       </div>
     </AccordionPrimitive.Content>

package/alert-dialog/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add alert-dialog
 층     ui
-파일   alert-dialog/index.tsx · alert-dialog/AGENTS.md
+파일   alert-dialog/index.tsx, alert-dialog/AGENTS.md
 ```
 
 ## 부위
@@ -11,14 +11,14 @@
 | 이름 | props |
 |---|---|
 | `AlertDialog` | `AlertDialogProps` |
-| `AlertDialogTrigger` | — |
+| `AlertDialogTrigger` | - |
 | `AlertDialogContent` | `ComponentProps<typeof AlertDialogPrimitive.Content>` |
 | `AlertDialogTitle` | `ComponentProps<typeof AlertDialogPrimitive.Title>` |
 | `AlertDialogDescription` | `ComponentProps<typeof AlertDialogPrimitive.Description>` |
 | `AlertDialogHeader` | `AlertDialogHeaderProps` |
-| `AlertDialogFooter` | — |
-| `AlertDialogAction` | — |
-| `AlertDialogCancel` | — |
+| `AlertDialogFooter` | - |
+| `AlertDialogAction` | - |
+| `AlertDialogCancel` | - |
 
 ### `AlertDialogTrigger`
 
@@ -37,7 +37,7 @@
 
 | 이름 | 타입 | 필수 |
 |---|---|---|
-| `color` | `'neutral' \| 'primary' \| 'danger'` |  |
+| `color` | `'neutral' \| 'brand' \| 'danger'` |  |
 | `onClick` | `() => void` |  |
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
@@ -71,7 +71,7 @@
 
 ## 함께 받는 것
 
-`button` · `tv`
+`button`, `tv`
 
 ## npm 의존
 

package/alert-dialog/index.tsx

@@ -25,18 +25,22 @@ export function AlertDialogTrigger({ children }: { children: ReactNode }) {
   return <AlertDialogPrimitive.Trigger asChild>{children}</AlertDialogPrimitive.Trigger>
 }
 
+const alertDialogContent = tv({
+  base: 'sheet text-foreground z-overlay fixed left-1/2 top-1/2'
+    + ' w-full max-w-112 -translate-x-1/2 -translate-y-1/2'
+    + ' rounded-r20 p-6 flex flex-col gap-stack overflow-y-auto'
+    + ' open:animate-fade-in closed:animate-fade-out'
+    + ' focus-visible:outline-none',
+})
+
 export function AlertDialogContent({ className, children, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Content>) {
   return (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <AlertDialogPrimitive.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <AlertDialogPrimitive.Content
         {...rest}
-        className={tv({ base: 'bg-float text-fg z-overlay fixed left-1/2 top-1/2'
-          + ' w-full max-w-112 -translate-x-1/2 -translate-y-1/2'
-          + ' rounded-r20 p-6 flex flex-col gap-stack overflow-y-auto'
-          + ' open:animate-fade-in closed:animate-fade-out'
-          + ' focus-visible:outline-none' })({ className })}
+        className={alertDialogContent({ className })}
       >
         {children}
       </AlertDialogPrimitive.Content>
@@ -44,15 +48,19 @@ export function AlertDialogContent({ className, children, ...rest }: ComponentPr
   )
 }
 
+const alertDialogTitle = tv({ base: 'text-section' })
+
 export function AlertDialogTitle({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return <AlertDialogPrimitive.Title {...rest} className={tv({ base: 'text-section' })({ className })} />
+  return <AlertDialogPrimitive.Title {...rest} className={alertDialogTitle({ className })} />
 }
 
+const alertDialogDescription = tv({ base: 'text-prose text-foreground-muted' })
+
 export function AlertDialogDescription({ className, ...rest }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
   return (
     <AlertDialogPrimitive.Description
       {...rest}
-      className={tv({ base: 'text-prose text-fg-muted' })({ className })}
+      className={alertDialogDescription({ className })}
     />
   )
 }
@@ -85,16 +93,18 @@ export function AlertDialogHeader({ lead, trail, className, children }: AlertDia
   )
 }
 
+const alertDialogFooter = tv({ base: 'flex justify-end gap-2' })
+
 export function AlertDialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <div className={tv({ base: 'flex justify-end gap-2' })({ className })}>
+    <div className={alertDialogFooter({ className })}>
       {children}
     </div>
   )
 }
 
 export function AlertDialogAction({ color = 'neutral', onClick, className, children }: {
-  color?: 'neutral' | 'primary' | 'danger'
+  color?: 'neutral' | 'brand' | 'danger'
   onClick?: () => void
   className?: string
   children?: ReactNode

package/badge/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add badge
 층     ui
-파일   badge/index.tsx · badge/AGENTS.md
+파일   badge/index.tsx, badge/AGENTS.md
 ```
 
 ## 부위
@@ -20,15 +20,15 @@
 
 | 이름 | 타입 | 필수 |
 |---|---|---|
-| `color` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+| `color` | `'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
 | `shape` | `'square' \| 'pill'` |  |
 
-## 변형 — `badge`
+## 변형 - `badge`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `neutral` · `primary` · `info` · `success` · `warning` · `danger` | `neutral` |
-| `shape` | `square` · `pill` | `square` |
+| `color` | `neutral`, `brand`, `info`, `success`, `warning`, `danger` | `neutral` |
+| `shape` | `square`, `pill` | `square` |
 
 ## 함께 받는 것
 

package/badge/index.tsx

@@ -8,12 +8,12 @@ export const badge = tv({
 
   variants: {
     color: {
-      neutral: 'bg-well text-fg-muted',
-      primary: 'bg-primary-weak text-primary-on-weak',
-      info: 'bg-info-weak text-info-on-weak',
-      success: 'bg-success-weak text-success-on-weak',
-      warning: 'bg-warning-weak text-warning-on-weak',
-      danger: 'bg-danger-weak text-danger-on-weak',
+      neutral: 'bg-background-well text-foreground-muted',
+      brand: 'bg-bg-brand-weak text-fg-brand-contrast',
+      info: 'bg-bg-info-weak text-fg-info-contrast',
+      success: 'bg-bg-success-weak text-fg-success-contrast',
+      warning: 'bg-bg-warning-weak text-fg-warning-contrast',
+      danger: 'bg-bg-danger-weak text-fg-danger-contrast',
     },
     shape: {
       square: 'rounded-mark',
@@ -25,7 +25,7 @@ export const badge = tv({
 })
 
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
-  color?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  color?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
   shape?: 'square' | 'pill'
 }
 

package/button/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add button
 층     ui
-파일   button/index.tsx · button/AGENTS.md
+파일   button/index.tsx, button/AGENTS.md
 ```
 
 ## 부위
@@ -20,19 +20,19 @@
 
 | 이름 | 타입 | 필수 |
 |---|---|---|
-| `color` | `'primary' \| 'neutral' \| 'danger'` | 예 |
+| `color` | `'brand' \| 'neutral' \| 'danger'` | 예 |
 | `emphasis` | `'solid' \| 'weak' \| 'outline' \| 'ghost'` | 예 |
 | `size` | `'sm' \| 'md' \| 'lg'` |  |
 | `shape` | `'rect' \| 'square' \| 'pill' \| 'circle'` |  |
 
-## 변형 — `button`
+## 변형 - `button`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `primary` · `neutral` · `danger` | — |
-| `emphasis` | `solid` · `weak` · `outline` · `ghost` | — |
-| `size` | `sm` · `md` · `lg` | `md` |
-| `shape` | `rect` · `square` · `pill` · `circle` | `rect` |
+| `color` | `brand`, `neutral`, `danger` | - |
+| `emphasis` | `solid`, `weak`, `outline`, `ghost` | - |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `shape` | `rect`, `square`, `pill`, `circle` | `rect` |
 
 ## 함께 받는 것
 

package/button/index.tsx

@@ -6,11 +6,11 @@ export const button = tv({
   base: 'inline-flex shrink-0 items-center justify-center gap-tight whitespace-nowrap'
     + ' rounded-r8 text-label'
     + ' transition-state press press-shrink'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
 
   variants: {
-    color: { primary: '', neutral: '', danger: '' },
+    color: { brand: '', neutral: '', danger: '' },
     emphasis: { solid: '', weak: '', outline: '', ghost: '' },
     size: {
       sm: 'h-8 [&_svg]:size-4',
@@ -26,48 +26,48 @@ export const button = tv({
   },
 
   compoundVariants: [
-    { color: 'primary', emphasis: 'solid',
-      class: 'bg-primary-solid text-fg-on-solid'
-        + ' enabled:hover:bg-primary-solid-hover'
-        + ' disabled:bg-primary-solid/20' },
-    { color: 'primary', emphasis: 'weak',
-      class: 'bg-primary-weak text-primary-on-weak disabled:text-primary-on-weak/40'
-        + ' enabled:hover:bg-primary-solid/10' },
-    { color: 'primary', emphasis: 'outline',
-      class: 'text-primary-on-weak disabled:text-primary-on-weak/40'
-        + ' ring-1 ring-inset ring-primary-stroke disabled:ring-line'
-        + ' enabled:hover:bg-primary-solid/10' },
-    { color: 'primary', emphasis: 'ghost',
-      class: 'text-primary-on-weak disabled:text-primary-on-weak/40'
-        + ' enabled:hover:bg-primary-solid/10' },
+    { color: 'brand', emphasis: 'solid',
+      class: 'bg-bg-brand-solid text-fg-brand-solid-contrast'
+        + ' enabled:hover:bg-bg-brand-solid-hover'
+        + ' disabled:bg-bg-brand-solid/20' },
+    { color: 'brand', emphasis: 'weak',
+      class: 'bg-bg-brand-weak text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
+        + ' enabled:hover:bg-bg-brand-solid/10' },
+    { color: 'brand', emphasis: 'outline',
+      class: 'text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
+        + ' ring-1 ring-inset ring-line-brand-weak disabled:ring-line'
+        + ' enabled:hover:bg-bg-brand-solid/10' },
+    { color: 'brand', emphasis: 'ghost',
+      class: 'text-fg-brand-contrast disabled:text-fg-brand-contrast/40'
+        + ' enabled:hover:bg-bg-brand-solid/10' },
 
     { color: 'neutral', emphasis: 'solid',
-      class: 'bg-neutral-solid text-fg-on-control'
-        + ' enabled:hover:bg-neutral-solid-hover'
-        + ' disabled:bg-neutral-solid/20' },
+      class: 'bg-bg-neutral-solid text-fg-neutral-solid-contrast'
+        + ' enabled:hover:bg-bg-neutral-solid-hover'
+        + ' disabled:bg-bg-neutral-solid/20' },
     { color: 'neutral', emphasis: 'weak',
-      class: 'bg-well text-fg'
-        + ' enabled:hover:bg-fg-muted/10' },
+      class: 'bg-background-well text-foreground'
+        + ' enabled:hover:bg-bg-neutral-solid/10' },
     { color: 'neutral', emphasis: 'outline',
-      class: 'text-fg ring-1 ring-inset ring-line-strong disabled:ring-line'
-        + ' enabled:hover:bg-hover' },
+      class: 'text-foreground ring-1 ring-inset ring-line-strong disabled:ring-line'
+        + ' enabled:hover:bg-bg-neutral-hover' },
     { color: 'neutral', emphasis: 'ghost',
-      class: 'text-fg enabled:hover:bg-hover' },
+      class: 'text-foreground enabled:hover:bg-bg-neutral-hover' },
 
     { color: 'danger', emphasis: 'solid',
-      class: 'bg-danger-solid text-fg-on-solid'
-        + ' enabled:hover:bg-danger-solid-hover'
-        + ' disabled:bg-danger-solid/20' },
+      class: 'bg-bg-danger-solid text-white'
+        + ' enabled:hover:bg-bg-danger-solid-hover'
+        + ' disabled:bg-bg-danger-solid/20' },
     { color: 'danger', emphasis: 'weak',
-      class: 'bg-danger-weak text-danger-on-weak disabled:text-danger-on-weak/40'
-        + ' enabled:hover:bg-danger/10' },
+      class: 'bg-bg-danger-weak text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
+        + ' enabled:hover:bg-bg-danger-solid/10' },
     { color: 'danger', emphasis: 'outline',
-      class: 'text-danger-on-weak disabled:text-danger-on-weak/40'
-        + ' ring-1 ring-inset ring-danger-stroke disabled:ring-line'
-        + ' enabled:hover:bg-danger/10' },
+      class: 'text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
+        + ' ring-1 ring-inset ring-line-danger-weak disabled:ring-line'
+        + ' enabled:hover:bg-bg-danger-solid/10' },
     { color: 'danger', emphasis: 'ghost',
-      class: 'text-danger-on-weak disabled:text-danger-on-weak/40'
-        + ' enabled:hover:bg-danger/10' },
+      class: 'text-fg-danger-contrast disabled:text-fg-danger-contrast/40'
+        + ' enabled:hover:bg-bg-danger-solid/10' },
 
     { shape: ['rect', 'pill'], size: 'sm', class: 'px-3' },
     { shape: ['rect', 'pill'], size: 'md', class: 'px-3.5' },
@@ -81,7 +81,7 @@ export const button = tv({
 })
 
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-  color: 'primary' | 'neutral' | 'danger'
+  color: 'brand' | 'neutral' | 'danger'
   emphasis: 'solid' | 'weak' | 'outline' | 'ghost'
   size?: 'sm' | 'md' | 'lg'
   shape?: 'rect' | 'square' | 'pill' | 'circle'

package/callout/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add callout
 층     ui
-파일   callout/index.tsx · callout/AGENTS.md
+파일   callout/index.tsx, callout/AGENTS.md
 ```
 
 ## 부위
@@ -19,19 +19,18 @@
 | 이름 | 타입 | 필수 |
 |---|---|---|
 | `color` | `'info' \| 'success' \| 'warning' \| 'danger'` |  |
-| `live` | `boolean` |  |
 | `icon` | `ReactNode` |  |
 | `title` | `ReactNode` |  |
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `callout`
+## 변형 - `callout`
 
-슬롯 `root` · `icon` · `title` · `body` · `text`
+슬롯 `root`, `icon`, `title`, `body`, `text`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `info` · `success` · `warning` · `danger` | `info` |
+| `color` | `info`, `success`, `warning`, `danger` | `info` |
 
 ## 함께 받는 것
 

package/callout/index.tsx

@@ -8,27 +8,27 @@ export const callout = tv({
     root: 'flex gap-stack rounded-panel border p-4 text-prose',
     icon: 'flex shrink-0 mt-0.5 [&_svg]:size-5',
     title: 'font-bold',
-    body: 'flex min-w-0 flex-col gap-tight',
-    text: 'flex flex-col gap-2',
+    body: 'flex min-w-0 flex-1 flex-col gap-tight',
+    text: 'flex flex-col items-start gap-2',
   },
 
   variants: {
     color: {
       info: {
-        root: 'bg-info-weak text-info-on-weak border-info-stroke',
-        icon: 'text-info',
+        root: 'bg-bg-info-weak text-fg-info-contrast border-line-info-weak',
+        icon: 'text-fg-info',
       },
       success: {
-        root: 'bg-success-weak text-success-on-weak border-success-stroke',
-        icon: 'text-success',
+        root: 'bg-bg-success-weak text-fg-success-contrast border-line-success-weak',
+        icon: 'text-fg-success',
       },
       warning: {
-        root: 'bg-warning-weak text-warning-on-weak border-warning-stroke',
-        icon: 'text-warning',
+        root: 'bg-bg-warning-weak text-fg-warning-contrast border-line-warning-weak',
+        icon: 'text-fg-warning',
       },
       danger: {
-        root: 'bg-danger-weak text-danger-on-weak border-danger-stroke',
-        icon: 'text-danger',
+        root: 'bg-bg-danger-weak text-fg-danger-contrast border-line-danger-weak',
+        icon: 'text-fg-danger',
       },
     },
   },
@@ -45,25 +45,24 @@ const ICONS = {
 
 export interface CalloutProps {
   color?: 'info' | 'success' | 'warning' | 'danger'
-  live?: boolean
   icon?: ReactNode
   title?: ReactNode
   className?: string
   children?: ReactNode
 }
 
-export function Callout({ color, live, icon, title, className, children }: CalloutProps) {
+export function Callout({ color, icon, title, className, children }: CalloutProps) {
   const ui = callout({ color })
   const Fallback = ICONS[color ?? 'info']
 
   return (
-    <div className={ui.root({ className })} role={live ? 'alert' : 'note'}>
+    <div className={ui.root({ className })} role="alert">
       <span className={ui.icon()}>
         {icon ?? <Fallback />}
       </span>
       <div className={ui.body()}>
         {title && <span className={ui.title()}>{title}</span>}
-        <div className={ui.text()}>{children}</div>
+        {children && <div className={ui.text()}>{children}</div>}
       </div>
     </div>
   )

package/checkbox/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add checkbox
 층     ui
-파일   checkbox/index.tsx · checkbox/AGENTS.md
+파일   checkbox/index.tsx, checkbox/AGENTS.md
 ```
 
 ## 부위
@@ -37,13 +37,13 @@
 | `onCheckedChange` | `(checked: boolean) => void` |  |
 | `indeterminate` | `boolean` |  |
 | `onIndeterminateChange` | `(indeterminate: boolean) => void` |  |
-| `color` | `'control' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
+| `color` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  |
 
-## 변형 — `checkbox`
+## 변형 - `checkbox`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+| `color` | `neutral`, `info`, `success`, `warning`, `danger` | `neutral` |
 
 ## 함께 받는 것
 
@@ -51,4 +51,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`lucide-react`, `radix-ui`

package/checkbox/index.tsx

@@ -19,22 +19,22 @@ export const checkbox = tv({
     + ' bg-transparent ring-1 ring-inset ring-line-strong'
     + ' transition-state press press-shrink'
     + ' checked:ring-2'
-    + ' invalid:ring-2 invalid:ring-danger'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:ring-line disabled:bg-disabled disabled:cursor-not-allowed'
-    + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+    + ' invalid:ring-2 invalid:ring-line-danger'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
+    + ' disabled:ring-line disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'
+    + ' checked:disabled:bg-bg-neutral-solid-checked-disabled checked:disabled:ring-transparent',
 
   variants: {
     color: {
-      control: 'checked:bg-control-on checked:ring-control-on',
-      info: 'checked:bg-info checked:ring-info',
-      success: 'checked:bg-success checked:ring-success',
-      warning: 'checked:bg-warning checked:ring-warning',
-      danger: 'checked:bg-danger checked:ring-danger',
+      neutral: 'checked:bg-bg-neutral-solid checked:ring-line-neutral-solid',
+      info: 'checked:bg-bg-info-solid checked:ring-line-info',
+      success: 'checked:bg-bg-success-solid checked:ring-line-success',
+      warning: 'checked:bg-bg-warning-solid checked:ring-line-warning',
+      danger: 'checked:bg-bg-danger-solid checked:ring-line-danger',
     },
   },
 
-  defaultVariants: { color: 'control' },
+  defaultVariants: { color: 'neutral' },
 })
 
 interface GroupContext {
@@ -56,6 +56,8 @@ export interface CheckboxGroupProps {
   children?: ReactNode
 }
 
+const checkboxGroup = tv({ base: 'flex flex-col gap-3' })
+
 export function CheckboxGroup({
   value,
   defaultValue,
@@ -94,7 +96,7 @@ export function CheckboxGroup({
         ref={root}
         role="group"
         onKeyDown={onKeyDown}
-        className={tv({ base: 'flex flex-col gap-3' })({ className })}
+        className={checkboxGroup({ className })}
       >
         {children}
       </div>
@@ -108,7 +110,7 @@ export interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimit
   onCheckedChange?: (checked: boolean) => void
   indeterminate?: boolean
   onIndeterminateChange?: (indeterminate: boolean) => void
-  color?: 'control' | 'info' | 'success' | 'warning' | 'danger'
+  color?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 }
 
 export function Checkbox({
@@ -143,7 +145,7 @@ export function Checkbox({
       onCheckedChange={change}
       className={checkbox({ color, className })}
     >
-      <CheckboxPrimitive.Indicator className="text-fg-on-control flex">
+      <CheckboxPrimitive.Indicator className="text-fg-neutral-solid-contrast flex">
         {indeterminate ? <Minus className="size-4" /> : <Check className="size-4" />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>