@pantoia/ui 0.2.0 → 0.3.0

package/palette.css

@@ -0,0 +1,114 @@
+:root, .light {
+  --pds-gray-50:#f9fafb;   --pds-gray-100:#f2f4f6; --pds-gray-200:#e5e8eb; --pds-gray-300:#d1d6db;
+  --pds-gray-400:#b0b8c1;  --pds-gray-500:#8b95a1; --pds-gray-600:#6b7684; --pds-gray-700:#4e5968;
+  --pds-gray-800:#333d4b;  --pds-gray-900:#191f28;
+
+  --pds-brand-50:#f5f1fd;  --pds-brand-100:#e4d6ff; --pds-brand-200:#ceb0ff; --pds-brand-300:#bb8ffa;
+  --pds-brand-400:#aa74f2; --pds-brand-500:#9c63e4; --pds-brand-600:#8750c9; --pds-brand-700:#7543b0;
+  --pds-brand-800:#633997; --pds-brand-900:#54317f;
+
+  --pds-blue-50:#e8f3ff;  --pds-blue-100:#c9e2ff; --pds-blue-200:#90c2ff; --pds-blue-300:#64a8ff;
+  --pds-blue-400:#4593fc; --pds-blue-500:#3182f6; --pds-blue-600:#2272eb; --pds-blue-700:#1b64da;
+  --pds-blue-800:#1957c2; --pds-blue-900:#194aa6;
+
+  --pds-green-50:#f0faf6;  --pds-green-100:#aeefd5; --pds-green-200:#76e4b8; --pds-green-300:#3fd599;
+  --pds-green-400:#15c47e; --pds-green-500:#03b26c; --pds-green-600:#02a262; --pds-green-700:#029359;
+  --pds-green-800:#028450; --pds-green-900:#027648;
+
+  --pds-orange-50:#fff3e0;  --pds-orange-100:#ffe0b0; --pds-orange-200:#ffcd80; --pds-orange-300:#ffbd51;
+  --pds-orange-400:#ffa927; --pds-orange-500:#fe9800; --pds-orange-600:#fb8800; --pds-orange-700:#f57800;
+  --pds-orange-800:#ed6700; --pds-orange-900:#e45600;
+
+  --pds-red-50:#ffeeee;  --pds-red-100:#ffd4d6; --pds-red-200:#feafb4; --pds-red-300:#fb8890;
+  --pds-red-400:#f66570; --pds-red-500:#f04452; --pds-red-600:#e42939; --pds-red-700:#d22030;
+  --pds-red-800:#bc1b2a; --pds-red-900:#a51926;
+}
+
+.dark {
+  --pds-gray-50:#202027;   --pds-gray-100:#2c2c35; --pds-gray-200:#3c3c47; --pds-gray-300:#4d4d59;
+  --pds-gray-400:#62626d;  --pds-gray-500:#7e7e87; --pds-gray-600:#9e9ea4; --pds-gray-700:#c3c3c6;
+  --pds-gray-800:#e4e4e5;  --pds-gray-900:#ffffff;
+
+  --pds-brand-50:#362949;  --pds-brand-100:#462e66; --pds-brand-200:#583682; --pds-brand-300:#6b3fa0;
+  --pds-brand-400:#8451c4; --pds-brand-500:#9c63e4; --pds-brand-600:#ad75f7; --pds-brand-700:#c094ff;
+  --pds-brand-800:#d6baff; --pds-brand-900:#eadeff;
+
+  --pds-blue-50:#202c4d;  --pds-blue-100:#23386a; --pds-blue-200:#25478c; --pds-blue-300:#265ab3;
+  --pds-blue-400:#2970d9; --pds-blue-500:#3485fa; --pds-blue-600:#449bff; --pds-blue-700:#61b0ff;
+  --pds-blue-800:#8fcdff; --pds-blue-900:#c8e7ff;
+
+  --pds-green-50:#153729;  --pds-green-100:#135338; --pds-green-200:#136d47; --pds-green-300:#138a59;
+  --pds-green-400:#13a065; --pds-green-500:#16bb76; --pds-green-600:#26cf88; --pds-green-700:#4ee4a6;
+  --pds-green-800:#82f6c5; --pds-green-900:#ccffea;
+
+  --pds-orange-50:#3d2500;  --pds-orange-100:#563200; --pds-orange-200:#804600; --pds-orange-300:#a85f00;
+  --pds-orange-400:#cf7200; --pds-orange-500:#f18600; --pds-orange-600:#fd9528; --pds-orange-700:#ffa861;
+  --pds-orange-800:#ffc39e; --pds-orange-900:#ffe4d6;
+
+  --pds-red-50:#3c2020;  --pds-red-100:#562025; --pds-red-200:#7a242d; --pds-red-300:#9e2733;
+  --pds-red-400:#ca2f3d; --pds-red-500:#f04251; --pds-red-600:#fa616d; --pds-red-700:#fe818b;
+  --pds-red-800:#ffa8ad; --pds-red-900:#ffd1d3;
+}
+
+@theme inline {
+  --color-pds-gray-50:                          var(--pds-gray-50);
+  --color-pds-gray-100:                         var(--pds-gray-100);
+  --color-pds-gray-200:                         var(--pds-gray-200);
+  --color-pds-gray-300:                         var(--pds-gray-300);
+  --color-pds-gray-400:                         var(--pds-gray-400);
+  --color-pds-gray-500:                         var(--pds-gray-500);
+  --color-pds-gray-600:                         var(--pds-gray-600);
+  --color-pds-gray-700:                         var(--pds-gray-700);
+  --color-pds-gray-800:                         var(--pds-gray-800);
+  --color-pds-gray-900:                         var(--pds-gray-900);
+  --color-pds-brand-50:                         var(--pds-brand-50);
+  --color-pds-brand-100:                        var(--pds-brand-100);
+  --color-pds-brand-200:                        var(--pds-brand-200);
+  --color-pds-brand-300:                        var(--pds-brand-300);
+  --color-pds-brand-400:                        var(--pds-brand-400);
+  --color-pds-brand-500:                        var(--pds-brand-500);
+  --color-pds-brand-600:                        var(--pds-brand-600);
+  --color-pds-brand-700:                        var(--pds-brand-700);
+  --color-pds-brand-800:                        var(--pds-brand-800);
+  --color-pds-brand-900:                        var(--pds-brand-900);
+  --color-pds-blue-50:                          var(--pds-blue-50);
+  --color-pds-blue-100:                         var(--pds-blue-100);
+  --color-pds-blue-200:                         var(--pds-blue-200);
+  --color-pds-blue-300:                         var(--pds-blue-300);
+  --color-pds-blue-400:                         var(--pds-blue-400);
+  --color-pds-blue-500:                         var(--pds-blue-500);
+  --color-pds-blue-600:                         var(--pds-blue-600);
+  --color-pds-blue-700:                         var(--pds-blue-700);
+  --color-pds-blue-800:                         var(--pds-blue-800);
+  --color-pds-blue-900:                         var(--pds-blue-900);
+  --color-pds-green-50:                         var(--pds-green-50);
+  --color-pds-green-100:                        var(--pds-green-100);
+  --color-pds-green-200:                        var(--pds-green-200);
+  --color-pds-green-300:                        var(--pds-green-300);
+  --color-pds-green-400:                        var(--pds-green-400);
+  --color-pds-green-500:                        var(--pds-green-500);
+  --color-pds-green-600:                        var(--pds-green-600);
+  --color-pds-green-700:                        var(--pds-green-700);
+  --color-pds-green-800:                        var(--pds-green-800);
+  --color-pds-green-900:                        var(--pds-green-900);
+  --color-pds-orange-50:                        var(--pds-orange-50);
+  --color-pds-orange-100:                       var(--pds-orange-100);
+  --color-pds-orange-200:                       var(--pds-orange-200);
+  --color-pds-orange-300:                       var(--pds-orange-300);
+  --color-pds-orange-400:                       var(--pds-orange-400);
+  --color-pds-orange-500:                       var(--pds-orange-500);
+  --color-pds-orange-600:                       var(--pds-orange-600);
+  --color-pds-orange-700:                       var(--pds-orange-700);
+  --color-pds-orange-800:                       var(--pds-orange-800);
+  --color-pds-orange-900:                       var(--pds-orange-900);
+  --color-pds-red-50:                           var(--pds-red-50);
+  --color-pds-red-100:                          var(--pds-red-100);
+  --color-pds-red-200:                          var(--pds-red-200);
+  --color-pds-red-300:                          var(--pds-red-300);
+  --color-pds-red-400:                          var(--pds-red-400);
+  --color-pds-red-500:                          var(--pds-red-500);
+  --color-pds-red-600:                          var(--pds-red-600);
+  --color-pds-red-700:                          var(--pds-red-700);
+  --color-pds-red-800:                          var(--pds-red-800);
+  --color-pds-red-900:                          var(--pds-red-900);
+}

package/popover/index.tsx

@@ -39,7 +39,7 @@ export interface PopoverContentProps extends Omit<ComponentProps<typeof PopoverP
 }
 
 const popoverContent = tv({
-  base: 'float text-foreground rounded-float z-overlay p-4'
+  base: 'float text-fg rounded-r16 z-overlay p-4'
     + ' open:animate-enter closed:animate-exit'
     + ' focus-visible:outline-none',
 })
@@ -65,7 +65,7 @@ export function PopoverContent({
         {children}
         {arrow && (
           <PopoverPrimitive.Arrow asChild width={12} height={6}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-panel -translate-y-px">
+            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
               <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
             </svg>
           </PopoverPrimitive.Arrow>

package/radio-group/index.tsx

@@ -126,7 +126,7 @@ export function RadioGroupItemLabel({ className, children }: { className?: strin
   )
 }
 
-const radioGroupItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+const radioGroupItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function RadioGroupItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(ItemContext)

package/registry.json

@@ -37,7 +37,6 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
@@ -133,9 +132,6 @@
           "target": "callout/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "tv"
       ],
@@ -159,7 +155,6 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
@@ -185,14 +180,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {
@@ -210,9 +205,6 @@
           "target": "command-palette/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "combobox",
         "dialog",
@@ -293,14 +285,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {
@@ -318,9 +310,6 @@
           "target": "field/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "label",
         "tv"
@@ -413,9 +402,6 @@
           "target": "number-field/AGENTS.md"
         }
       ],
-      "dependencies": [
-        "lucide-react"
-      ],
       "registryDependencies": [
         "tv"
       ],
@@ -490,14 +476,14 @@
         }
       ],
       "dependencies": [
-        "lucide-react",
         "radix-ui"
       ],
       "registryDependencies": [
         "tv"
       ],
       "meta": {
-        "layer": "ui"
+        "layer": "ui",
+        "radius": "rounded-r12"
       }
     },
     {

package/select/AGENTS.md

@@ -87,4 +87,4 @@
 
 ## npm 의존
 
-`lucide-react`, `radix-ui`
+`radix-ui`

package/select/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import { Select as SelectPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 
@@ -8,17 +7,17 @@ import { tv } from '../tv'
 
 export const selectTrigger = tv({
   base: 'flex w-full items-center justify-between gap-tight rounded-r8'
-    + ' text-value text-foreground'
+    + ' text-value text-fg'
     + ' transition-state'
     + ' invalid:ring-2 invalid:ring-line-danger'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:bg-bg-neutral-disabled disabled:text-foreground-disabled disabled:cursor-not-allowed'
-    + ' unset:text-foreground-placeholder',
+    + ' disabled:bg-bg-neutral-disabled disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' unset:text-fg-placeholder',
 
   variants: {
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
-      well: 'bg-background-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'h-8 px-3',
@@ -72,35 +71,41 @@ export function Select({
         <span className="min-w-0 truncate">
           <SelectPrimitive.Value placeholder={placeholder} />
         </span>
-        <SelectPrimitive.Icon className="text-foreground-subtle">
-          <ChevronDown className="size-4" />
+        <SelectPrimitive.Icon className="text-fg-subtle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
         </SelectPrimitive.Icon>
       </SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
         <SelectPrimitive.Content
-          className="float text-foreground rounded-float z-overlay
+          className="float text-fg rounded-r12 z-overlay
                min-w-(--radix-select-trigger-width) py-1
                open:animate-enter closed:animate-exit"
           position="popper"
           sideOffset={8}
           arrowPadding={16}
         >
-          <SelectPrimitive.ScrollUpButton className="text-foreground-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronUp className="size-4" />
+          <SelectPrimitive.ScrollUpButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+              <path d="m18 15-6-6-6 6" />
+            </svg>
           </SelectPrimitive.ScrollUpButton>
 
           <SelectPrimitive.Viewport className="flex flex-col gap-px px-1">
             {children}
           </SelectPrimitive.Viewport>
 
-          <SelectPrimitive.ScrollDownButton className="text-foreground-subtle flex h-6 cursor-default items-center justify-center">
-            <ChevronDown className="size-4" />
+          <SelectPrimitive.ScrollDownButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+              <path d="m6 9 6 6 6-6" />
+            </svg>
           </SelectPrimitive.ScrollDownButton>
 
           {arrow && (
             <SelectPrimitive.Arrow asChild width={12} height={6}>
-              <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-panel -translate-y-px">
+              <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
                 <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
               </svg>
             </SelectPrimitive.Arrow>
@@ -121,7 +126,7 @@ export function SelectGroup({ label, className, children }: {
   return (
     <SelectPrimitive.Group className={selectGroup({ className })}>
       {label && (
-        <SelectPrimitive.Label className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
+        <SelectPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
         </SelectPrimitive.Label>
       )}
@@ -134,7 +139,7 @@ const selectItem = tv({
   base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
     + ' rounded-r8 px-2 py-1 transition-state'
     + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
-    + ' data-disabled:text-foreground-disabled data-disabled:pointer-events-none',
+    + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
 })
 
 export function SelectItem({ value, disabled, className, children }: {
@@ -153,14 +158,16 @@ export function SelectItem({ value, disabled, className, children }: {
         {children}
       </span>
 
-      <SelectPrimitive.ItemIndicator className="text-foreground-muted flex shrink-0">
-        <Check className="size-4" />
+      <SelectPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
 }
 
-const selectItemText = tv({ base: 'text-label text-foreground' })
+const selectItemText = tv({ base: 'text-label text-fg' })
 
 export function SelectItemText({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -170,7 +177,7 @@ export function SelectItemText({ className, children }: { className?: string, ch
   )
 }
 
-const selectItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+const selectItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function SelectItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (

package/switch/index.tsx

@@ -7,7 +7,7 @@ import { tv } from '../tv'
 
 export const uiSwitch = tv({
   base: 'h-6 w-10 shrink-0 rounded-full p-0.5 transition-state press press-shrink'
-    + ' bg-background-well ring-1 ring-inset ring-line-strong'
+    + ' bg-bg-well ring-1 ring-inset ring-line-strong'
     + ' invalid:ring-2 invalid:ring-line-danger'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
     + ' disabled:bg-bg-neutral-disabled disabled:cursor-not-allowed'

package/table/index.tsx

@@ -20,7 +20,7 @@ export interface TableProps {
   children?: ReactNode
 }
 
-const tableFrame = tv({ base: 'frame rounded-panel overflow-hidden' })
+const tableFrame = tv({ base: 'frame rounded-r12 overflow-hidden' })
 
 export function Table({ label, fixed = false, className, children }: TableProps) {
   const [box, setBox] = useState<HTMLDivElement | null>(null)
@@ -59,7 +59,7 @@ export function Table({ label, fixed = false, className, children }: TableProps)
   )
 }
 
-const tableHeader = tv({ base: 'bg-background-well border-b border-line' })
+const tableHeader = tv({ base: 'bg-bg-well border-b border-line' })
 
 export function TableHeader({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -71,7 +71,7 @@ export function TableHeader({ className, children }: { className?: string, child
   )
 }
 
-const tableHeadCell = tv({ base: 'text-caption text-foreground-muted h-9 px-4 text-left whitespace-nowrap' })
+const tableHeadCell = tv({ base: 'text-caption text-fg-muted h-9 px-4 text-left whitespace-nowrap' })
 
 export function TableHeadCell({ className, children }: { className?: string, children?: ReactNode }) {
   return (
@@ -104,7 +104,7 @@ export function TableRow({ className, children }: { className?: string, children
 }
 
 export const tableCell = tv({
-  base: 'text-label text-foreground h-11 px-4',
+  base: 'text-label text-fg h-11 px-4',
 
   variants: {
     mono: { true: 'font-mono', false: '' },

package/tabs/AGENTS.md

@@ -36,6 +36,7 @@
 | 이름 | 타입 | 필수 |
 |---|---|---|
 | `value` | `string` | 예 |
+| `forceMount` | `boolean` |  |
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 

package/tabs/index.module.css

@@ -2,13 +2,15 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background: var(--color-foreground);
+  background: var(--color-fg);
   width: var(--tabs-indicator-size);
   translate: var(--tabs-indicator-position) 0;
   transition: translate var(--dur-state) var(--ease-state),
               width var(--dur-state) var(--ease-state);
 }
 
+.content[data-state="inactive"] { display: none; }
+
 @media (prefers-reduced-motion: reduce) {
   .underline { transition: none; }
 }

package/tabs/index.tsx

@@ -74,11 +74,11 @@ export function TabsList({ className, children }: { className?: string, children
 }
 
 const tabsTrigger = tv({
-  base: 'text-label text-foreground-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
+  base: 'text-label text-fg-muted inline-flex h-9 items-center gap-tight px-3 transition-state'
     + ' [&_svg]:size-4'
-    + ' press-shrink enabled:hover:text-foreground'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed'
-    + ' aria-selected:text-foreground'
+    + ' press-shrink enabled:hover:text-fg'
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed'
+    + ' aria-selected:text-fg'
     + ' focus-visible:outline-2 focus-visible:-outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
@@ -100,13 +100,16 @@ export function TabsTrigger({ value, disabled, className, children }: {
   )
 }
 
-export function TabsContent({ value, className, children }: {
+const tabsContent = tv({ base: s.content })
+
+export function TabsContent({ value, forceMount, className, children }: {
   value: string
+  forceMount?: boolean
   className?: string
   children?: ReactNode
 }) {
   return (
-    <TabsPrimitive.Content value={value} className={className}>
+    <TabsPrimitive.Content value={value} forceMount={forceMount || undefined} className={tabsContent({ className })}>
       {children}
     </TabsPrimitive.Content>
   )

package/tailwind.css

@@ -0,0 +1,3 @@
+@import "./palette.css";
+@import "./tokens.css";
+@import "./utilities.css";

package/textarea/index.tsx

@@ -3,19 +3,19 @@ import type { TextareaHTMLAttributes } from 'react'
 import { tv } from '../tv'
 
 export const textarea = tv({
-  base: 'w-full rounded-r8 text-value text-foreground'
-    + ' placeholder:text-foreground-placeholder'
+  base: 'w-full rounded-r8 text-value text-fg'
+    + ' placeholder:text-fg-placeholder'
     + ' invalid:ring-2 invalid:ring-line-danger'
-    + ' read-only:text-foreground-muted'
+    + ' read-only:text-fg-muted'
     + ' resize-y'
     + ' transition-state'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:bg-bg-neutral-disabled disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:bg-bg-neutral-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',
 
   variants: {
     surface: {
-      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-background-well',
-      well: 'bg-background-well',
+      bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
+      well: 'bg-bg-well',
     },
     size: {
       sm: 'p-2',

package/toast/index.tsx

@@ -46,13 +46,13 @@ export function Toast({
           toast: 'float rounded-r8'
             + ' flex w-full items-center gap-stack p-4',
           content: 'min-w-0 flex-1',
-          title: 'text-label text-foreground',
-          description: 'text-caption text-foreground-muted',
+          title: 'text-label text-fg',
+          description: 'text-caption text-fg-muted',
           icon: 'shrink-0',
-          actionButton: 'text-label text-foreground shrink-0 rounded-r8 px-3 h-8'
-            + ' bg-background-well transition-state press press-shrink enabled:hover:bg-bg-neutral-solid/10'
+          actionButton: 'text-label text-fg shrink-0 rounded-r8 px-3 h-8'
+            + ' bg-bg-well transition-state press press-shrink enabled:hover:bg-bg-neutral-solid/10'
             + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-            + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
+            + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
           success: 'text-fg-success',
           error: 'text-fg-danger',
           warning: 'text-fg-warning',

package/toggle/index.tsx

@@ -9,19 +9,19 @@ export const toggle = tv({
   base: 'text-label rounded-full inline-flex h-8 items-center gap-tight px-3'
     + ' [&_svg]:size-4'
     + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
-    + ' text-foreground-muted'
+    + ' text-fg-muted'
     + ' enabled:hover:bg-bg-neutral-hover'
     + ' on:bg-bg-neutral-solid on:ring-line-neutral-solid on:enabled:text-fg-neutral-solid-contrast'
     + ' on:enabled:hover:bg-bg-neutral-solid-hover'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:text-foreground-disabled disabled:ring-line disabled:cursor-not-allowed'
+    + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed'
     + ' on:disabled:bg-bg-neutral-solid-checked-disabled on:disabled:ring-transparent on:disabled:text-fg-neutral-solid-contrast',
 
   variants: {
     surface: {
       bare: '',
-      well: 'bg-background-well',
-      panel: 'bg-background-panel',
+      well: 'bg-bg-well',
+      panel: 'bg-bg-panel',
     },
   },