@pantoia/ui 0.1.0 → 0.2.0

package/select/index.tsx

@@ -8,17 +8,17 @@ import { tv } from '../tv'
 
 export const selectTrigger = tv({
   base: 'flex w-full items-center justify-between gap-tight rounded-r8'
-    + ' text-value text-fg'
+    + ' text-value text-foreground'
     + ' transition-state'
-    + ' invalid:ring-2 invalid:ring-danger'
-    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-    + ' disabled:bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed'
-    + ' unset:text-fg-placeholder',
+    + ' 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',
 
   variants: {
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
-      well: 'bg-well',
+      well: 'bg-background-well',
     },
     size: {
       sm: 'h-8 px-3',
@@ -72,48 +72,56 @@ export function Select({
         <span className="min-w-0 truncate">
           <SelectPrimitive.Value placeholder={placeholder} />
         </span>
-        <SelectPrimitive.Icon className="text-fg-subtle">
+        <SelectPrimitive.Icon className="text-foreground-subtle">
           <ChevronDown className="size-4" />
         </SelectPrimitive.Icon>
       </SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
         <SelectPrimitive.Content
-          className="bg-float text-fg rounded-float shadow-s3 z-overlay
-               min-w-(--radix-select-trigger-width) p-1
+          className="float text-foreground rounded-float 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-fg-subtle flex h-6 cursor-default items-center justify-center">
+          <SelectPrimitive.ScrollUpButton className="text-foreground-subtle flex h-6 cursor-default items-center justify-center">
             <ChevronUp className="size-4" />
           </SelectPrimitive.ScrollUpButton>
 
-          <SelectPrimitive.Viewport className="flex flex-col gap-px">
+          <SelectPrimitive.Viewport className="flex flex-col gap-px px-1">
             {children}
           </SelectPrimitive.Viewport>
 
-          <SelectPrimitive.ScrollDownButton className="text-fg-subtle flex h-6 cursor-default items-center justify-center">
+          <SelectPrimitive.ScrollDownButton className="text-foreground-subtle flex h-6 cursor-default items-center justify-center">
             <ChevronDown className="size-4" />
           </SelectPrimitive.ScrollDownButton>
 
-          {arrow && <SelectPrimitive.Arrow className="fill-float" width={12} height={6} />}
+          {arrow && (
+            <SelectPrimitive.Arrow asChild width={12} height={6}>
+              <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-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>
+          )}
         </SelectPrimitive.Content>
       </SelectPrimitive.Portal>
     </SelectPrimitive.Root>
   )
 }
 
+const selectGroup = tv({ base: 'flex flex-col gap-px' })
+
 export function SelectGroup({ label, className, children }: {
   label?: string
   className?: string
   children?: ReactNode
 }) {
   return (
-    <SelectPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+    <SelectPrimitive.Group className={selectGroup({ className })}>
       {label && (
-        <SelectPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
+        <SelectPrimitive.Label className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
           {label}
         </SelectPrimitive.Label>
       )}
@@ -122,6 +130,13 @@ export function SelectGroup({ label, className, children }: {
   )
 }
 
+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',
+})
+
 export function SelectItem({ value, disabled, className, children }: {
   value: string
   disabled?: boolean
@@ -132,38 +147,41 @@ export function SelectItem({ value, disabled, className, children }: {
     <SelectPrimitive.Item
       value={value}
       disabled={disabled}
-      className={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-hover data-highlighted:outline-none'
-        + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none' })({ className })}
+      className={selectItem({ className })}
     >
       <span className="flex min-w-0 flex-col">
         {children}
       </span>
 
-      <SelectPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
+      <SelectPrimitive.ItemIndicator className="text-foreground-muted flex shrink-0">
         <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
 }
 
+const selectItemText = tv({ base: 'text-label text-foreground' })
+
 export function SelectItemText({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <SelectPrimitive.ItemText className={tv({ base: 'text-label text-fg' })({ className })}>
+    <SelectPrimitive.ItemText className={selectItemText({ className })}>
       {children}
     </SelectPrimitive.ItemText>
   )
 }
 
+const selectItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+
 export function SelectItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <span className={tv({ base: 'text-caption text-fg-subtle' })({ className })}>
+    <span className={selectItemDescription({ className })}>
       {children}
     </span>
   )
 }
 
+const selectSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
+
 export function SelectSeparator({ className }: { className?: string }) {
-  return <SelectPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+  return <SelectPrimitive.Separator className={selectSeparator({ className })} />
 }

package/styles.css

@@ -23,55 +23,118 @@
 @custom-variant menu-gutter (.menu:has(.menu-lead) &:not(:has(.menu-lead)));
 
 :root, .light {
-  --gray-50:#f9fafb;   --gray-100:#f2f4f6; --gray-200:#e5e8eb; --gray-300:#d1d6db;
-  --gray-400:#b0b8c1;  --gray-500:#8b95a1; --gray-600:#6b7684; --gray-700:#4e5968;
-  --gray-800:#333d4b;  --gray-900:#191f28;
+  --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;
 
-  --purple-50:#f5f1fd;  --purple-100:#e4d6ff; --purple-200:#ceb0ff; --purple-300:#bb8ffa;
-  --purple-400:#aa74f2; --purple-500:#9c63e4; --purple-600:#8750c9; --purple-700:#7543b0;
-  --purple-800:#633997; --purple-900:#54317f;
+  --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;
 
-  --blue-50:#e8f3ff;  --blue-100:#c9e2ff; --blue-200:#90c2ff; --blue-300:#64a8ff;
-  --blue-400:#4593fc; --blue-500:#3182f6; --blue-600:#2272eb; --blue-700:#1b64da;
-  --blue-800:#1957c2; --blue-900:#194aa6;
+  --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;
 
-  --green-50:#f0faf6;  --green-100:#aeefd5; --green-200:#76e4b8; --green-300:#3fd599;
-  --green-400:#15c47e; --green-500:#03b26c; --green-600:#02a262; --green-700:#029359;
-  --green-800:#028450; --green-900:#027648;
+  --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;
 
-  --orange-50:#fff3e0;  --orange-100:#ffe0b0; --orange-200:#ffcd80; --orange-300:#ffbd51;
-  --orange-400:#ffa927; --orange-500:#fe9800; --orange-600:#fb8800; --orange-700:#f57800;
-  --orange-800:#ed6700; --orange-900:#e45600;
+  --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;
 
-  --red-50:#ffeeee;  --red-100:#ffd4d6; --red-200:#feafb4; --red-300:#fb8890;
-  --red-400:#f66570; --red-500:#f04452; --red-600:#e42939; --red-700:#d22030;
-  --red-800:#bc1b2a; --red-900:#a51926;
+  --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 {
-  --gray-50:#202027;   --gray-100:#2c2c35; --gray-200:#3c3c47; --gray-300:#4d4d59;
-  --gray-400:#62626d;  --gray-500:#7e7e87; --gray-600:#9e9ea4; --gray-700:#c3c3c6;
-  --gray-800:#e4e4e5;  --gray-900:#ffffff;
+  --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;
 
-  --purple-50:#362949;  --purple-100:#462e66; --purple-200:#583682; --purple-300:#6b3fa0;
-  --purple-400:#8451c4; --purple-500:#9c63e4; --purple-600:#ad75f7; --purple-700:#c094ff;
-  --purple-800:#d6baff; --purple-900:#eadeff;
+  --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;
 
-  --blue-50:#202c4d;  --blue-100:#23386a; --blue-200:#25478c; --blue-300:#265ab3;
-  --blue-400:#2970d9; --blue-500:#3485fa; --blue-600:#449bff; --blue-700:#61b0ff;
-  --blue-800:#8fcdff; --blue-900:#c8e7ff;
+  --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;
 
-  --green-50:#153729;  --green-100:#135338; --green-200:#136d47; --green-300:#138a59;
-  --green-400:#13a065; --green-500:#16bb76; --green-600:#26cf88; --green-700:#4ee4a6;
-  --green-800:#82f6c5; --green-900:#ccffea;
+  --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;
 
-  --orange-50:#3d2500;  --orange-100:#563200; --orange-200:#804600; --orange-300:#a85f00;
-  --orange-400:#cf7200; --orange-500:#f18600; --orange-600:#fd9528; --orange-700:#ffa861;
-  --orange-800:#ffc39e; --orange-900:#ffe4d6;
+  --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;
 
-  --red-50:#3c2020;  --red-100:#562025; --red-200:#7a242d; --red-300:#9e2733;
-  --red-400:#ca2f3d; --red-500:#f04251; --red-600:#fa616d; --red-700:#fe818b;
-  --red-800:#ffa8ad; --red-900:#ffd1d3;
+  --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);
 }
 
 @theme {
@@ -137,8 +200,6 @@
   src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");
   font-weight: 400;
   font-display: swap;
-  /* [TODO] size-adjust 를 지운다 — 시각 기준 이미지가 서고 나서 */
-  size-adjust: 96%;
   unicode-range: U+0000-00FF, U+2000-206F;
 }
 
@@ -147,94 +208,194 @@
   .dark { color-scheme: dark; }
 
   body {
-    background-color: var(--color-canvas);
-    color: var(--color-fg);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
     font-family: var(--font-sans);
   }
 
   code, pre, kbd, samp { font-family: var(--font-mono); }
 }
 
-@theme inline {
-  --color-white:#ffffff;
-  --color-black:#000000;
-
-  --color-canvas: var(--ui-canvas);
-  --color-well: var(--ui-well);
-  --color-panel: var(--ui-panel);
-  --color-float: var(--ui-float);
-  --color-disabled: var(--gray-200);
-
-  --color-hover: var(--ui-hover);
-  --color-selected: var(--ui-selected);
-  --color-selected-hover: var(--ui-selected-hover);
-
-  --color-control-on: var(--gray-900);
-  --color-control-on-hover: var(--gray-800);
-  --color-control-on-disabled: var(--gray-600);
-  --color-fg-on-control: var(--gray-50);
-
-  --color-fg: var(--gray-900);
-  --color-fg-muted: var(--gray-700);
-  --color-fg-subtle: var(--gray-500);
-  --color-fg-placeholder: var(--gray-400);
-  --color-fg-disabled: var(--gray-600);
-  --color-fg-on-solid:#ffffff;
-
-  --color-line: var(--gray-200);
-  --color-line-strong: var(--gray-300);
-  --color-ring: var(--blue-500);
-
-  --color-neutral-solid: var(--gray-900);
-  --color-neutral-solid-hover: var(--gray-800);
-
-  --color-primary-solid: var(--purple-500);
-  --color-primary-solid-hover: var(--purple-600);
-  --color-primary-weak: var(--purple-50);
-  --color-primary-on-weak: var(--purple-700);
-  --color-primary-stroke: var(--purple-200);
-
-  --color-info: var(--blue-500);
-  --color-info-weak: var(--blue-50);
-  --color-info-on-weak: var(--blue-700);
-  --color-info-stroke: var(--blue-200);
-
-  --color-success: var(--green-500);
-  --color-success-weak: var(--green-50);
-  --color-success-on-weak: var(--green-700);
-  --color-success-stroke: var(--green-200);
-
-  --color-warning: var(--orange-500);
-  --color-warning-weak: var(--orange-50);
-  --color-warning-on-weak: var(--orange-700);
-  --color-warning-stroke: var(--orange-200);
-
-  --color-danger: var(--red-500);
-  --color-danger-weak: var(--red-50);
-  --color-danger-on-weak: var(--red-700);
-  --color-danger-stroke: var(--red-200);
-  --color-danger-solid: var(--red-500);
-  --color-danger-solid-hover: var(--red-600);
-}
-
 :root, .light {
-  --ui-canvas:#ffffff;
-  --ui-well:#f2f4f6;
-  --ui-panel:#ffffff;
-  --ui-float:#ffffff;
-  --ui-hover: rgba(0,23,51,0.02);
-  --ui-selected: rgba(2,32,71,0.05);
-  --ui-selected-hover: rgba(0,27,55,0.1);
+  --pds-background:                           #ffffff;
+  --pds-background-overlay:                   rgba(0,0,0,0.2);
+  --pds-background-panel:                     #ffffff;
+  --pds-background-well:                      #f2f4f6;
+
+  --pds-bg-brand-solid:                       var(--pds-brand-500);
+  --pds-bg-brand-solid-hover:                 var(--pds-brand-600);
+  --pds-bg-brand-weak:                        var(--pds-brand-50);
+  --pds-bg-danger-solid:                      var(--pds-red-500);
+  --pds-bg-danger-solid-hover:                var(--pds-red-600);
+  --pds-bg-danger-weak:                       var(--pds-red-50);
+  --pds-bg-info-solid:                        var(--pds-blue-500);
+  --pds-bg-info-weak:                         var(--pds-blue-50);
+  --pds-bg-neutral-disabled:                  var(--pds-gray-200);
+  --pds-bg-neutral-hover:                     rgba(0,23,51,0.02);
+  --pds-bg-neutral-knob:                      #ffffff;
+  --pds-bg-neutral-selected:                  rgba(2,32,71,0.05);
+  --pds-bg-neutral-selected-hover:            rgba(0,27,55,0.1);
+  --pds-bg-neutral-solid:                     var(--pds-gray-900);
+  --pds-bg-neutral-solid-checked-disabled:    var(--pds-gray-600);
+  --pds-bg-neutral-solid-hover:               var(--pds-gray-800);
+  --pds-bg-success-solid:                     var(--pds-green-500);
+  --pds-bg-success-weak:                      var(--pds-green-50);
+  --pds-bg-warning-solid:                     var(--pds-orange-500);
+  --pds-bg-warning-weak:                      var(--pds-orange-50);
+
+  --pds-fg-brand-contrast:                    var(--pds-brand-700);
+  --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-danger:                            var(--pds-red-500);
+  --pds-fg-danger-contrast:                   var(--pds-red-700);
+  --pds-fg-info:                              var(--pds-blue-500);
+  --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
+  --pds-fg-success:                           var(--pds-green-500);
+  --pds-fg-success-contrast:                  var(--pds-green-700);
+  --pds-fg-warning:                           var(--pds-orange-500);
+  --pds-fg-warning-contrast:                  var(--pds-orange-700);
+
+  --pds-line-brand-weak:                      var(--pds-brand-200);
+  --pds-line-danger:                          var(--pds-red-500);
+  --pds-line-danger-weak:                     var(--pds-red-200);
+  --pds-line-focus-ring:                      var(--pds-blue-500);
+  --pds-line-info:                            var(--pds-blue-500);
+  --pds-line-info-weak:                       var(--pds-blue-200);
+  --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-strong:                          var(--pds-gray-300);
+  --pds-line-success:                         var(--pds-green-500);
+  --pds-line-success-weak:                    var(--pds-green-200);
+  --pds-line-warning:                         var(--pds-orange-500);
+  --pds-line-warning-weak:                    var(--pds-orange-200);
+
+  --pds-black:                                #000000;
+  --pds-foreground:                           var(--pds-gray-900);
+  --pds-foreground-disabled:                  var(--pds-gray-600);
+  --pds-foreground-muted:                     var(--pds-gray-700);
+  --pds-foreground-placeholder:               var(--pds-gray-400);
+  --pds-foreground-subtle:                    var(--pds-gray-500);
+  --pds-line:                                 var(--pds-gray-200);
+  --pds-white:                                #ffffff;
 }
 
 .dark {
-  --ui-canvas:#17171c;
-  --ui-well:#101013;
-  --ui-panel:#202027;
-  --ui-float:#2c2c35;
-  --ui-hover: rgba(209,209,253,0.05);
-  --ui-selected: rgba(217,217,255,0.11);
-  --ui-selected-hover: rgba(222,222,255,0.19);
+  --pds-background:                           #17171c;
+  --pds-background-overlay:                   rgba(0,0,0,0.56);
+  --pds-background-panel:                     #202027;
+  --pds-background-well:                      #101013;
+
+  --pds-bg-brand-solid:                       var(--pds-brand-500);
+  --pds-bg-brand-solid-hover:                 var(--pds-brand-600);
+  --pds-bg-brand-weak:                        var(--pds-brand-50);
+  --pds-bg-danger-solid:                      var(--pds-red-500);
+  --pds-bg-danger-solid-hover:                var(--pds-red-600);
+  --pds-bg-danger-weak:                       var(--pds-red-50);
+  --pds-bg-info-solid:                        var(--pds-blue-500);
+  --pds-bg-info-weak:                         var(--pds-blue-50);
+  --pds-bg-neutral-disabled:                  var(--pds-gray-200);
+  --pds-bg-neutral-hover:                     rgba(209,209,253,0.05);
+  --pds-bg-neutral-knob:                      #2c2c35;
+  --pds-bg-neutral-selected:                  rgba(217,217,255,0.11);
+  --pds-bg-neutral-selected-hover:            rgba(222,222,255,0.19);
+  --pds-bg-neutral-solid:                     var(--pds-gray-900);
+  --pds-bg-neutral-solid-checked-disabled:    var(--pds-gray-600);
+  --pds-bg-neutral-solid-hover:               var(--pds-gray-800);
+  --pds-bg-success-solid:                     var(--pds-green-500);
+  --pds-bg-success-weak:                      var(--pds-green-50);
+  --pds-bg-warning-solid:                     var(--pds-orange-500);
+  --pds-bg-warning-weak:                      var(--pds-orange-50);
+
+  --pds-fg-brand-contrast:                    var(--pds-brand-700);
+  --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-danger:                            var(--pds-red-500);
+  --pds-fg-danger-contrast:                   var(--pds-red-700);
+  --pds-fg-info:                              var(--pds-blue-500);
+  --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
+  --pds-fg-success:                           var(--pds-green-500);
+  --pds-fg-success-contrast:                  var(--pds-green-700);
+  --pds-fg-warning:                           var(--pds-orange-500);
+  --pds-fg-warning-contrast:                  var(--pds-orange-700);
+
+  --pds-line-brand-weak:                      var(--pds-brand-200);
+  --pds-line-danger:                          var(--pds-red-500);
+  --pds-line-danger-weak:                     var(--pds-red-200);
+  --pds-line-focus-ring:                      var(--pds-blue-500);
+  --pds-line-info:                            var(--pds-blue-500);
+  --pds-line-info-weak:                       var(--pds-blue-200);
+  --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-strong:                          var(--pds-gray-300);
+  --pds-line-success:                         var(--pds-green-500);
+  --pds-line-success-weak:                    var(--pds-green-200);
+  --pds-line-warning:                         var(--pds-orange-500);
+  --pds-line-warning-weak:                    var(--pds-orange-200);
+
+  --pds-black:                                #000000;
+  --pds-foreground:                           var(--pds-gray-900);
+  --pds-foreground-disabled:                  var(--pds-gray-600);
+  --pds-foreground-muted:                     var(--pds-gray-700);
+  --pds-foreground-placeholder:               var(--pds-gray-400);
+  --pds-foreground-subtle:                    var(--pds-gray-500);
+  --pds-line:                                 var(--pds-gray-200);
+  --pds-white:                                #ffffff;
+}
+
+@theme inline {
+  --color-background:                         var(--pds-background);
+  --color-background-overlay:                 var(--pds-background-overlay);
+  --color-background-panel:                   var(--pds-background-panel);
+  --color-background-well:                    var(--pds-background-well);
+  --color-bg-brand-solid:                     var(--pds-bg-brand-solid);
+  --color-bg-brand-solid-hover:               var(--pds-bg-brand-solid-hover);
+  --color-bg-brand-weak:                      var(--pds-bg-brand-weak);
+  --color-bg-danger-solid:                    var(--pds-bg-danger-solid);
+  --color-bg-danger-solid-hover:              var(--pds-bg-danger-solid-hover);
+  --color-bg-danger-weak:                     var(--pds-bg-danger-weak);
+  --color-bg-info-solid:                      var(--pds-bg-info-solid);
+  --color-bg-info-weak:                       var(--pds-bg-info-weak);
+  --color-bg-neutral-disabled:                var(--pds-bg-neutral-disabled);
+  --color-bg-neutral-hover:                   var(--pds-bg-neutral-hover);
+  --color-bg-neutral-knob:                    var(--pds-bg-neutral-knob);
+  --color-bg-neutral-selected:                var(--pds-bg-neutral-selected);
+  --color-bg-neutral-selected-hover:          var(--pds-bg-neutral-selected-hover);
+  --color-bg-neutral-solid:                   var(--pds-bg-neutral-solid);
+  --color-bg-neutral-solid-checked-disabled:  var(--pds-bg-neutral-solid-checked-disabled);
+  --color-bg-neutral-solid-hover:             var(--pds-bg-neutral-solid-hover);
+  --color-bg-success-solid:                   var(--pds-bg-success-solid);
+  --color-bg-success-weak:                    var(--pds-bg-success-weak);
+  --color-bg-warning-solid:                   var(--pds-bg-warning-solid);
+  --color-bg-warning-weak:                    var(--pds-bg-warning-weak);
+  --color-fg-brand-contrast:                  var(--pds-fg-brand-contrast);
+  --color-fg-brand-solid-contrast:            var(--pds-fg-brand-solid-contrast);
+  --color-fg-danger:                          var(--pds-fg-danger);
+  --color-fg-danger-contrast:                 var(--pds-fg-danger-contrast);
+  --color-fg-info:                            var(--pds-fg-info);
+  --color-fg-info-contrast:                   var(--pds-fg-info-contrast);
+  --color-fg-neutral-solid-contrast:          var(--pds-fg-neutral-solid-contrast);
+  --color-fg-success:                         var(--pds-fg-success);
+  --color-fg-success-contrast:                var(--pds-fg-success-contrast);
+  --color-fg-warning:                         var(--pds-fg-warning);
+  --color-fg-warning-contrast:                var(--pds-fg-warning-contrast);
+  --color-line-brand-weak:                    var(--pds-line-brand-weak);
+  --color-line-danger:                        var(--pds-line-danger);
+  --color-line-danger-weak:                   var(--pds-line-danger-weak);
+  --color-line-focus-ring:                    var(--pds-line-focus-ring);
+  --color-line-info:                          var(--pds-line-info);
+  --color-line-info-weak:                     var(--pds-line-info-weak);
+  --color-line-neutral-solid:                 var(--pds-line-neutral-solid);
+  --color-line-strong:                        var(--pds-line-strong);
+  --color-line-success:                       var(--pds-line-success);
+  --color-line-success-weak:                  var(--pds-line-success-weak);
+  --color-line-warning:                       var(--pds-line-warning);
+  --color-line-warning-weak:                  var(--pds-line-warning-weak);
+  --color-black:                              var(--pds-black);
+  --color-foreground:                         var(--pds-foreground);
+  --color-foreground-disabled:                var(--pds-foreground-disabled);
+  --color-foreground-muted:                   var(--pds-foreground-muted);
+  --color-foreground-placeholder:             var(--pds-foreground-placeholder);
+  --color-foreground-subtle:                  var(--pds-foreground-subtle);
+  --color-line:                               var(--pds-line);
+  --color-white:                              var(--pds-white);
 }
 
 @theme {
@@ -309,39 +470,30 @@
 @theme {
   --shadow-*: initial;
 
-  --shadow-s1: 0 1px  4px 0 var(--shade-1);
-  --shadow-s2: 0 2px 10px 0 var(--shade-2);
-  --shadow-s3: 0 4px 16px 0 var(--shade-3);
+  --shadow-s1: 0 1px  4px 0 var(--pds-shadow-1);
+  --shadow-s2: 0 2px 10px 0 var(--pds-shadow-2);
+  --shadow-s3: 0 4px 16px 0 var(--pds-shadow-3);
 }
 
-:root, .light { --shade-1:#00000014; --shade-2:#0000001a; --shade-3:#0000001f; }
-.dark { --shade-1:#00000080; --shade-2:#000000ad; --shade-3:#000000cc; }
-
-@theme inline {
-  --color-overlay: var(--ui-overlay);
-}
-:root, .light { --ui-overlay: rgba(0,0,0,0.2); }
-.dark { --ui-overlay: rgba(0,0,0,0.56); }
+:root, .light { --pds-shadow-1:#00000014; --pds-shadow-2:#0000001a; --pds-shadow-3:#0000001f; }
+.dark { --pds-shadow-1:#00000080; --pds-shadow-2:#000000ad; --pds-shadow-3:#000000cc; }
 
 @utility z-sticky  { z-index: 10; }
 @utility z-overlay { z-index: 50; }
 @utility z-toast   { z-index: 60; }
 
-:root { --header-h: 56px; }
+@utility frame {
+  @apply bg-background-panel border border-line;
+}
 
-@utility side-rail {
-  position: sticky;
-  top: var(--header-h);
-  max-height: calc(100dvh - var(--header-h));
-  overflow-y: auto;
+@utility card {
+  @apply bg-background-panel shadow-s3;
 }
 
-@utility scroll-slim {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-line-strong) transparent;
+@utility float {
+  @apply bg-background-panel border border-line shadow-s3;
 }
 
-@utility scroll-hidden {
-  scrollbar-width: none;
-  &::-webkit-scrollbar { display: none; }
+@utility sheet {
+  @apply bg-background-panel;
 }