sh-ui-cli 0.58.3 → 0.58.5

package/data/changelog/versions.json

@@ -2,6 +2,32 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.58.5",
+      "date": "2026-05-06",
+      "title": "디자인 디폴트 개편 4라운드 — Tabs/Color-picker 의 active·selected 표시를 primary 로",
+      "type": "patch",
+      "highlights": [
+        "**Tabs underline variant 의 active 표시선** — 가로(`inset 0 -2px 0 var(--foreground)`) / 세로(`inset -2px 0 0 var(--foreground)`) 모두 `var(--primary)` 로 변경. 활성 탭이 브랜드 톤으로 강조 — 다크에서 순백 라인이 stark 했던 문제 해소.",
+        "**Color-picker 의 selected 색상 ring** — `0 0 0 3.5px var(--foreground)` (선택된 색 둘레) → `var(--primary)`. 선택 상태가 brand 톤으로 명확.",
+        "**v0.58.3·4 ring/focus 와 일관** — 활성/선택/focus 모두 primary 또는 ring (50% primary). 다음 라운드에서 Avatar/Badge/Progress 톤 점검 예정.",
+        "**4 variant + 듀얼 카피본 + pactrack 동기화** — 8개 파일 sed."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.5"
+    },
+    {
+      "version": "0.58.4",
+      "date": "2026-05-06",
+      "title": "디자인 디폴트 개편 3라운드 — 폼 필드의 focus·hover 색을 primary 로",
+      "type": "patch",
+      "highlights": [
+        "**input / textarea / numeric-input / date-picker / color-picker / checkbox / radio 의 focus·hover 색 통일** — 기존 `border-color: var(--foreground)` + `box-shadow: 0 0 0 1px var(--foreground)` 는 다크에서 순백 강조라 stark. `--primary` 로 변경 — 폼 필드의 활성 시 브랜드 톤으로 자연스럽게 표시.",
+        "**v0.58.3 의 ring 패턴과 정렬** — 버튼 / 컴포넌트 focus ring 은 `--ring` (primary 50%), 폼 필드 inline focus 는 `--primary` solid (1px 이라 풀 포화). 두 layer 가 brand 톤으로 일관.",
+        "**4 variant + 듀얼 카피본 + 템플릿 모두 동기화** — Tailwind / plain CSS / CSS Modules / vanilla-extract.",
+        "**Button danger 의 `hover:brightness-95` 는 다음 라운드** — `--danger-hover` 토큰 추가 필요해서 별도 검토 후 진행."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.4"
+    },
     {
       "version": "0.58.3",
       "date": "2026-05-06",

package/data/registry/react/components/checkbox/styles.css

@@ -17,7 +17,7 @@
 }
 
 .sh-ui-checkbox:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .sh-ui-checkbox:focus-visible {

package/data/registry/react/components/checkbox/styles.module.css

@@ -17,7 +17,7 @@
 }
 
 .checkbox:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .checkbox:focus-visible {

package/data/registry/react/components/code-editor/index.tailwind.tsx

@@ -135,7 +135,7 @@ export function CodeEditor({
     <div
       ref={hostRef}
       className={cn(
-        "sh-ui-code-editor relative border border-border rounded-[var(--radius)] bg-background text-[0.8125rem] leading-relaxed overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-ring focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
+        "sh-ui-code-editor relative border border-border rounded-[var(--radius)] bg-background text-[0.8125rem] leading-relaxed overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-primary focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-ring focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
         className,
       )}
       data-readonly={readOnly || undefined}

package/data/registry/react/components/color-picker/index.tailwind.tsx

@@ -262,7 +262,7 @@ export function ColorPickerHex({ className, showSwatch = true, ...rest }: ColorP
       <input
         ref={inputRef}
         type="text"
-        className="flex-1 min-w-0 h-7 px-[var(--space-2)] border border-border rounded-[calc(var(--radius)-2px)] bg-background text-foreground font-mono text-[0.8125rem] uppercase focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)]"
+        className="flex-1 min-w-0 h-7 px-[var(--space-2)] border border-border rounded-[calc(var(--radius)-2px)] bg-background text-foreground font-mono text-[0.8125rem] uppercase focus:outline-none focus:border-primary focus:shadow-[0_0_0_1px_var(--primary)]"
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={onCommit}
@@ -296,7 +296,7 @@ export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerS
           <button
             key={c}
             type="button"
-            className="w-5 h-5 p-0 border border-border rounded-[calc(var(--radius)-4px)] cursor-pointer transition-[transform,box-shadow] duration-[var(--duration-fast)] hover:scale-110 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:shadow-[0_0_0_2px_var(--background),0_0_0_3.5px_var(--foreground)]"
+            className="w-5 h-5 p-0 border border-border rounded-[calc(var(--radius)-4px)] cursor-pointer transition-[transform,box-shadow] duration-[var(--duration-fast)] hover:scale-110 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:shadow-[0_0_0_2px_var(--background),0_0_0_3.5px_var(--primary)]"
             aria-label={c}
             aria-pressed={selected}
             data-selected={selected || undefined}

package/data/registry/react/components/color-picker/styles.css

@@ -134,8 +134,8 @@
 }
 .sh-ui-color-picker__hex:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 /* ───────────── Swatches ───────────── */
@@ -162,5 +162,5 @@
   outline-offset: 2px;
 }
 .sh-ui-color-picker__swatch-btn[data-selected] {
-  box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--primary);
 }

package/data/registry/react/components/color-picker/styles.module.css

@@ -134,8 +134,8 @@
 }
 .color-picker__hex:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 /* ───────────── Swatches ───────────── */
@@ -162,5 +162,5 @@
   outline-offset: 2px;
 }
 .color-picker__swatch-btn[data-selected] {
-  box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--primary);
 }

package/data/registry/react/components/date-picker/index.tailwind.tsx

@@ -22,7 +22,7 @@ function defaultRangePlaceholder(locale: string): string {
 }
 
 const triggerClasses =
-  "inline-flex items-center justify-between w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,box-shadow] duration-[var(--duration-fast)] hover:not-disabled:border-border-strong focus-visible:outline-none focus-visible:border-foreground focus-visible:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:h-11 [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]";
+  "inline-flex items-center justify-between w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,box-shadow] duration-[var(--duration-fast)] hover:not-disabled:border-border-strong focus-visible:outline-none focus-visible:border-primary focus-visible:shadow-[0_0_0_1px_var(--primary)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:h-11 [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]";
 
 const popupClasses =
   "bg-background border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none p-[var(--space-3)] origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95";

package/data/registry/react/components/date-picker/styles.css

@@ -32,8 +32,8 @@
 
 .sh-ui-date-picker__trigger:focus-visible {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .sh-ui-date-picker__trigger:disabled {

package/data/registry/react/components/date-picker/styles.module.css

@@ -32,8 +32,8 @@
 
 .date-picker__trigger:focus-visible {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .date-picker__trigger:disabled {

package/data/registry/react/components/file-upload/index.tailwind.tsx

@@ -153,7 +153,7 @@ export const FileUploadDropzone = React.forwardRef<HTMLDivElement, FileUploadDro
         aria-disabled={disabled || undefined}
         data-dragging={dragging || undefined}
         className={cn(
-          "relative flex flex-col items-center justify-center gap-[var(--space-2)] py-[var(--space-8)] px-[var(--space-6)] min-h-40 bg-background-subtle text-foreground-muted border-[1.5px] border-dashed border-border rounded-[var(--radius)] cursor-pointer text-center transition-[border-color,background-color,color] duration-[var(--duration-fast)] hover:border-border-strong hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:border-foreground motion-reduce:transition-none",
+          "relative flex flex-col items-center justify-center gap-[var(--space-2)] py-[var(--space-8)] px-[var(--space-6)] min-h-40 bg-background-subtle text-foreground-muted border-[1.5px] border-dashed border-border rounded-[var(--radius)] cursor-pointer text-center transition-[border-color,background-color,color] duration-[var(--duration-fast)] hover:border-border-strong hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:border-primary motion-reduce:transition-none",
           dragging && "border-foreground bg-background-muted text-foreground",
           disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed pointer-events-none",
           className,

package/data/registry/react/components/input/index.tailwind.tsx

@@ -14,13 +14,13 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
 /* ───────── Base utility 묶음 (반복 줄이기) ───────── */
 
 const baseInputClasses =
-  "block w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)]";
+  "block w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-primary focus:shadow-[0_0_0_1px_var(--primary)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)]";
 
 const inGroupOverrides =
   "data-[in-group]:flex-1 data-[in-group]:min-w-0 data-[in-group]:h-auto data-[in-group]:p-0 data-[in-group]:bg-transparent data-[in-group]:border-none data-[in-group]:rounded-none data-[in-group]:shadow-none data-[in-group]:hover:border-none data-[in-group]:focus:border-none data-[in-group]:focus:outline-none data-[in-group]:focus:shadow-none data-[in-group]:disabled:bg-transparent";
 
 const baseGroupClasses =
-  "flex items-center w-full min-h-[var(--control-md)] px-[var(--space-2)] gap-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] transition-[border-color,box-shadow] duration-[var(--duration-fast)] cursor-text hover:not-data-[disabled]:not-focus-within:border-border-strong focus-within:border-foreground focus-within:shadow-[0_0_0_1px_var(--foreground)] aria-[invalid=true]:border-danger aria-[invalid=true]:focus-within:shadow-[0_0_0_1px_var(--danger)] data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-background-subtle";
+  "flex items-center w-full min-h-[var(--control-md)] px-[var(--space-2)] gap-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] transition-[border-color,box-shadow] duration-[var(--duration-fast)] cursor-text hover:not-data-[disabled]:not-focus-within:border-border-strong focus-within:border-primary focus-within:shadow-[0_0_0_1px_var(--primary)] aria-[invalid=true]:border-danger aria-[invalid=true]:focus-within:shadow-[0_0_0_1px_var(--danger)] data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-background-subtle";
 
 /* ───────── InputGroup + InputAdornment (compound) ───────── */
 

package/data/registry/react/components/input/styles.css

@@ -32,8 +32,8 @@
 
 .sh-ui-input:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .sh-ui-input:disabled {
@@ -143,8 +143,8 @@
 }
 
 .sh-ui-input-group:focus-within {
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .sh-ui-input-group[aria-invalid="true"] {

package/data/registry/react/components/input/styles.css.ts

@@ -25,7 +25,7 @@ export const input = style({
     "&:focus": {
       outline: "none",
       borderColor: "var(--foreground)",
-      boxShadow: "0 0 0 1px var(--foreground)",
+      boxShadow: "0 0 0 1px var(--primary)",
     },
     "&:disabled": {
       opacity: "var(--opacity-disabled)",
@@ -164,7 +164,7 @@ export const group = style({
     },
     "&:focus-within": {
       borderColor: "var(--foreground)",
-      boxShadow: "0 0 0 1px var(--foreground)",
+      boxShadow: "0 0 0 1px var(--primary)",
     },
     '&[aria-invalid="true"]': {
       borderColor: "var(--danger)",

package/data/registry/react/components/input/styles.module.css

@@ -32,8 +32,8 @@
 
 .input:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .input:disabled {
@@ -141,8 +141,8 @@
 }
 
 .group:focus-within {
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .group[aria-invalid="true"] {

package/data/registry/react/components/numeric-input/index.tailwind.tsx

@@ -19,7 +19,7 @@ export interface NumericInputProps
 }
 
 const inputClasses =
-  "w-10 px-1 py-0.5 font-mono text-[length:var(--text-xs)] leading-tight text-right border border-transparent rounded-[calc(var(--radius)-4px)] bg-transparent text-foreground appearance-none [-moz-appearance:textfield] transition-[border-color,background-color] duration-[var(--duration-fast)] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 hover:not-disabled:not-focus:border-border focus:outline-none focus:border-foreground focus:bg-background focus-visible:outline-none focus-visible:border-foreground disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]";
+  "w-10 px-1 py-0.5 font-mono text-[length:var(--text-xs)] leading-tight text-right border border-transparent rounded-[calc(var(--radius)-4px)] bg-transparent text-foreground appearance-none [-moz-appearance:textfield] transition-[border-color,background-color] duration-[var(--duration-fast)] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 hover:not-disabled:not-focus:border-border focus:outline-none focus:border-primary focus:bg-background focus-visible:outline-none focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]";
 
 export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
   (

package/data/registry/react/components/numeric-input/styles.css

@@ -40,7 +40,7 @@
 .sh-ui-numeric-input__input:focus,
 .sh-ui-numeric-input__input:focus-visible {
   outline: none;
-  border-color: var(--foreground);
+  border-color: var(--primary);
   background: var(--background);
 }
 

package/data/registry/react/components/numeric-input/styles.module.css

@@ -40,7 +40,7 @@
 .numeric-input__input:focus,
 .numeric-input__input:focus-visible {
   outline: none;
-  border-color: var(--foreground);
+  border-color: var(--primary);
   background: var(--background);
 }
 

package/data/registry/react/components/radio/styles.css

@@ -16,7 +16,7 @@
 }
 
 .sh-ui-radio:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .sh-ui-radio:focus-visible {

package/data/registry/react/components/radio/styles.module.css

@@ -16,7 +16,7 @@
 }
 
 .radio:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .radio:focus-visible {

package/data/registry/react/components/rich-text-editor/index.tailwind.tsx

@@ -67,7 +67,7 @@ export function RichTextEditor({
   return (
     <div
       className={cn(
-        "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-ring focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
+        "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-primary focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-ring focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
         className,
       )}
       data-readonly={readOnly || undefined}

package/data/registry/react/components/tabs/index.tailwind.tsx

@@ -75,7 +75,7 @@ export const TabsTrigger = React.forwardRef<
 TabsTrigger.displayName = "TabsTrigger";
 
 const indicatorVariantClasses =
-  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--foreground)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--foreground)]";
+  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--primary)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--primary)]";
 
 export const TabsIndicator = React.forwardRef<
   HTMLSpanElement,

package/data/registry/react/components/tabs/styles.css

@@ -98,7 +98,7 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: var(--active-tab-height);
-  box-shadow: inset 0 -2px 0 var(--foreground);
+  box-shadow: inset 0 -2px 0 var(--primary);
 }
 
 .sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] > .sh-ui-tabs__list {
@@ -107,7 +107,7 @@
 }
 
 .sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] .sh-ui-tabs__indicator {
-  box-shadow: inset -2px 0 0 var(--foreground);
+  box-shadow: inset -2px 0 0 var(--primary);
 }
 
 /* ─────────────── variant: pill (세그먼트) ─────────────── */

package/data/registry/react/components/tabs/styles.module.css

@@ -98,7 +98,7 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: var(--active-tab-height);
-  box-shadow: inset 0 -2px 0 var(--foreground);
+  box-shadow: inset 0 -2px 0 var(--primary);
 }
 
 .tabs[data-variant="underline"][data-orientation="vertical"] > .tabs__list {
@@ -107,7 +107,7 @@
 }
 
 .tabs[data-variant="underline"][data-orientation="vertical"] .tabs__indicator {
-  box-shadow: inset -2px 0 0 var(--foreground);
+  box-shadow: inset -2px 0 0 var(--primary);
 }
 
 /* ─────────────── variant: pill (세그먼트) ─────────────── */

package/data/registry/react/components/textarea/index.tailwind.tsx

@@ -9,7 +9,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     <textarea
       ref={ref}
       className={cn(
-        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
+        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-primary focus:shadow-[0_0_0_1px_var(--primary)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
         className,
       )}
       {...props}

package/data/registry/react/components/textarea/styles.css

@@ -31,8 +31,8 @@
 
 .sh-ui-textarea:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .sh-ui-textarea:disabled {

package/data/registry/react/components/textarea/styles.module.css

@@ -31,8 +31,8 @@
 
 .textarea:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .textarea:disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.58.3",
+  "version": "0.58.5",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {