sh-ui-cli 0.58.1 → 0.58.3

package/data/changelog/versions.json

@@ -2,6 +2,36 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.58.3",
+      "date": "2026-05-06",
+      "title": "디자인 디폴트 개편 2라운드 — `--ring` 토큰 도입 + 모든 focus ring 통일",
+      "type": "patch",
+      "highlights": [
+        "**`--ring` 토큰 신규 — `color-mix(in srgb, var(--primary) 50%, transparent)`** — primary 의 50% 투명도로 부드러운 focus ring. solid primary 는 다크에서 너무 시끄러웠고, foreground 는 너무 stark 했음. 50% 투명도가 둘의 절충 — 키보드 사용자에게는 식별 가능, 시각적으로는 부드러움. shadcn/ui · Radix · Linear 의 ring 패턴과 일관.",
+        "**`--color-ring: var(--ring)` @theme inline 매핑 추가** — Tailwind v4 에서 `outline-ring` 유틸로 사용 가능. 템플릿 + apps/docs + ui-app-template 모두 동기화.",
+        "**27개 컴포넌트의 focus ring 을 `--ring` 으로 일괄 변경** — accordion / badge / breadcrumb / button / calendar / carousel / card / checkbox / code-editor / code-panel / color-picker / combobox / dialog / dropdown-menu / file-upload / header / input / menubar / page-toc / pagination / popover / radio / rich-text-editor / select / sidebar / slider / switch / tabs / toast / toggle. 모든 컴포넌트가 같은 ring 톤 사용 — 디자인 일관성 확보.",
+        "**4가지 variant + 듀얼 카피본 + 템플릿 모두 동기화** — Tailwind / plain CSS / CSS Modules / vanilla-extract + apps/docs + cli/templates. sed 일괄 패치로 110+ 파일 갱신.",
+        "**철학 — focus ring 은 별도 token 으로 분리** — 사용자가 brand color 를 바꿔도 focus ring 의 \"부드러움\" 은 유지됨 (color-mix 로 primary 의 투명도 형태 유지). 매번 컴포넌트마다 결정하지 않도록 디자인 시스템이 책임.",
+        "**FYI — `outline-primary` 단독 솔리드 (이번 PR 초기 커밋) 는 squash 머지로 사용자에게 도달하지 않음.** 최종 머지 결과는 `outline-ring` (반투명 primary) 로 통일."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.3"
+    },
+    {
+      "version": "0.58.2",
+      "date": "2026-05-06",
+      "title": "디자인 디폴트 개편 1라운드 — Sidebar / Button / Card",
+      "type": "patch",
+      "highlights": [
+        "**`SidebarMenu` 기본 `gap` 0 → 2px** — 한글/긴 라벨에서 항목이 너무 촘촘하게 붙어 시각적으로 압축돼 보이던 문제. shadcn 의 `gap-0` 컨벤션과 살짝 갈리지만 sh-ui 의 한글 우선 + Linear 톤 정체성에 더 자연스러움.",
+        "**`Button` 의 `active:` 더블펌프 제거** — 기존 `active:scale-[0.97] + active:brightness-90` 두 효과 동시 적용으로 클릭이 cheap 한 느낌이었음. `brightness` 만 빼고 `scale` 유지 — Linear/Vercel/Radix 톤과 일관.",
+        "**`Button` focus ring 색 `foreground` → `primary`** — 다크모드에서 순백 outline 이 과해 사용자가 매번 override 하던 패턴. 브랜드 톤 + 자연스러움.",
+        "**`Card` 기본 `box-shadow: var(--shadow-sm)` 추가** — flat border-only 박스에서 미세 elevation 으로. 라이트 모드에서 임팩트 있고 다크에서도 무해함 (`0 1px 2px rgba(0,0,0,0.08)`). 모던 카드는 기본적으로 약간의 깊이를 가지는 게 자연스러움.",
+        "**4가지 variant + 듀얼 카피본 모두 동기화** — Tailwind / plain CSS / CSS Modules / vanilla-extract + apps/docs 카피본 + 템플릿. 사용자가 어떤 cssFramework 로 쓰든 동일한 톤.",
+        "**철학: 디자인 시스템 디폴트가 \"바로 보기 좋은\" 답을 줘야 함** — 사용자가 매번 같은 override 를 반복하면 그건 디폴트 책임. 이번 라운드는 sh-ui 사용 빈도 1·2·3 위 컴포넌트(Sidebar/Button/Card) 에 집중."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.2"
+    },
     {
       "version": "0.58.1",
       "date": "2026-05-06",

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

@@ -45,7 +45,7 @@ export const AccordionTrigger = React.forwardRef<
     <BaseAccordion.Trigger
       ref={ref}
       className={cn(
-        "flex items-center justify-between gap-[var(--space-4)] w-full px-[var(--space-1)] py-[var(--space-4)] bg-transparent border-none text-foreground text-[0.9375rem] font-medium leading-snug text-left cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:not-disabled:not-data-[disabled]:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)] disabled:cursor-not-allowed disabled:text-foreground-muted data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-muted [[data-size=sm]_&]:py-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.2] motion-reduce:transition-none",
+        "flex items-center justify-between gap-[var(--space-4)] w-full px-[var(--space-1)] py-[var(--space-4)] bg-transparent border-none text-foreground text-[0.9375rem] font-medium leading-snug text-left cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:not-disabled:not-data-[disabled]:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)] disabled:cursor-not-allowed disabled:text-foreground-muted data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-muted [[data-size=sm]_&]:py-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.2] motion-reduce:transition-none",
         className,
       )}
       {...props}

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

@@ -42,7 +42,7 @@
 }
 
 .sh-ui-accordion__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: calc(var(--radius) - 2px);
 }

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

@@ -42,7 +42,7 @@
 }
 
 .accordion__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: calc(var(--radius) - 2px);
 }

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

@@ -53,7 +53,7 @@ export const BreadcrumbLink = React.forwardRef<
     <a
       ref={ref}
       className={cn(
-        "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
+        "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
       {...props}

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

@@ -35,7 +35,7 @@
 }
 
 .sh-ui-breadcrumb__link:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -35,7 +35,7 @@
 }
 
 .breadcrumb__link:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -3,7 +3,7 @@ import { cn } from "@SH_UI_UTILS@";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-foreground focus-visible:outline-offset-2 active:scale-[0.97] active:brightness-90",
+  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 active:scale-[0.97]",
   {
     variants: {
       variant: {

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

@@ -20,13 +20,12 @@
 }
 
 .sh-ui-button:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
 .sh-ui-button:active:not(:disabled) {
   transform: scale(0.97);
-  filter: brightness(0.92);
   transition-duration: 40ms;
 }
 

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

@@ -21,12 +21,11 @@ export const button = style({
       pointerEvents: "none",
     },
     "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
+      outline: "var(--border-width-strong) solid var(--ring)",
       outlineOffset: "2px",
     },
     "&:active:not(:disabled)": {
       transform: "scale(0.97)",
-      filter: "brightness(0.92)",
       transitionDuration: "40ms",
     },
   },

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

@@ -20,13 +20,12 @@
 }
 
 .button:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
 .button:active:not(:disabled) {
   transform: scale(0.97);
-  filter: brightness(0.92);
   transition-duration: 40ms;
 }
 

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

@@ -391,7 +391,7 @@ export const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderPro
 );
 
 const navButtonClasses =
-  "inline-flex items-center justify-center w-7 h-7 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted cursor-pointer shrink-0 transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none";
+  "inline-flex items-center justify-center w-7 h-7 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted cursor-pointer shrink-0 transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none";
 
 function CalendarNavPlaceholder() {
   return <span className={cn(navButtonClasses, "invisible pointer-events-none")} aria-hidden />;
@@ -501,7 +501,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
           ))}
         </div>
         <div
-          className="grid grid-cols-7 outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)]"
+          className="grid grid-cols-7 outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)]"
           role="grid"
           tabIndex={0}
           onKeyDown={ctx.onKeyDown}
@@ -526,7 +526,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
                 <button
                   type="button"
                   className={cn(
-                    "flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-30 disabled:cursor-not-allowed motion-reduce:transition-none",
+                    "flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-30 disabled:cursor-not-allowed motion-reduce:transition-none",
                     !current && "text-[var(--foreground-subtle,var(--foreground-muted))] opacity-40",
                     isToday && "font-bold underline underline-offset-[0.125rem]",
                     selected && "bg-primary text-primary-foreground font-semibold hover:not-disabled:bg-primary-hover hover:not-disabled:text-primary-foreground",

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

@@ -56,7 +56,7 @@
 }
 
 .sh-ui-calendar__nav:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -123,7 +123,7 @@
 }
 
 .sh-ui-calendar__grid:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: calc(var(--radius) - 2px);
 }
@@ -181,7 +181,7 @@
 }
 
 .sh-ui-calendar__day:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -56,7 +56,7 @@
 }
 
 .calendar__nav:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -123,7 +123,7 @@
 }
 
 .calendar__grid:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: calc(var(--radius) - 2px);
 }
@@ -181,7 +181,7 @@
 }
 
 .calendar__day:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -9,7 +9,7 @@ export const Card = React.forwardRef<HTMLDivElement, DivProps>(
     <div
       ref={ref}
       className={cn(
-        "flex flex-col gap-[var(--space-6)] py-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] max-sm:gap-[var(--space-4)] max-sm:py-[var(--space-4)]",
+        "flex flex-col gap-[var(--space-6)] py-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-sm)] max-sm:gap-[var(--space-4)] max-sm:py-[var(--space-4)]",
         className,
       )}
       {...props}

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

@@ -7,6 +7,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
 }
 
 /* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */

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

@@ -9,6 +9,7 @@ export const card = style({
   color: "var(--foreground)",
   border: "1px solid var(--border)",
   borderRadius: "var(--radius)",
+  boxShadow: "var(--shadow-sm)",
 
   "@media": {
     "(max-width: 640px)": {

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

@@ -7,6 +7,7 @@
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
 }
 
 /* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */

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

@@ -205,7 +205,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 CarouselItem.displayName = "CarouselItem";
 
 const navClasses =
-  "absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-40 disabled:cursor-not-allowed motion-reduce:transition-none data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:[top:auto]";
+  "absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-40 disabled:cursor-not-allowed motion-reduce:transition-none data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:[top:auto]";
 
 export const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
   ({ className, onClick, disabled, children, ...props }, ref) => {
@@ -295,7 +295,7 @@ export const CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndic
             role="tab"
             aria-selected={i === index}
             aria-label={labelFor ? labelFor(i) : `${i + 1}번 슬라이드`}
-            className="w-2 h-2 p-0 bg-border border-none rounded-full cursor-pointer transition-[background-color,transform] duration-[var(--duration-fast)] hover:bg-border-strong data-[active]:bg-foreground data-[active]:scale-[1.2] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none"
+            className="w-2 h-2 p-0 bg-border border-none rounded-full cursor-pointer transition-[background-color,transform] duration-[var(--duration-fast)] hover:bg-border-strong data-[active]:bg-foreground data-[active]:scale-[1.2] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none"
             data-active={i === index || undefined}
             onClick={() => goTo(i)}
           />

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

@@ -65,7 +65,7 @@
 }
 
 .sh-ui-carousel__nav:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -140,7 +140,7 @@
 }
 
 .sh-ui-carousel__indicator:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -65,7 +65,7 @@
 }
 
 .carousel__nav:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -140,7 +140,7 @@
 }
 
 .carousel__indicator:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -16,7 +16,7 @@ export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
     <BaseCheckbox.Root
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
         className,
       )}
       {...props}

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

@@ -21,7 +21,7 @@
 }
 
 .sh-ui-checkbox:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -21,7 +21,7 @@
 }
 
 .checkbox:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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-foreground 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-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",
         className,
       )}
       data-readonly={readOnly || undefined}

package/data/registry/react/components/code-editor/styles.css

@@ -10,7 +10,7 @@
 }
 .sh-ui-code-editor:focus-within {
   border-color: var(--foreground);
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-code-editor[data-readonly] {

package/data/registry/react/components/code-editor/styles.module.css

@@ -10,7 +10,7 @@
 }
 .code-editor:focus-within {
   border-color: var(--foreground);
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .code-editor[data-readonly] {

package/data/registry/react/components/code-panel/styles.css

@@ -64,7 +64,7 @@
   border-color: var(--border-strong);
 }
 .sh-ui-code__copy:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-code__copy-label {

package/data/registry/react/components/code-panel/styles.module.css

@@ -64,7 +64,7 @@
   border-color: var(--border-strong);
 }
 .code__copy:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .code__copy-label {

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

@@ -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-foreground 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(--foreground)]"
             aria-label={c}
             aria-pressed={selected}
             data-selected={selected || undefined}

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

@@ -158,7 +158,7 @@
   transform: scale(1.08);
 }
 .sh-ui-color-picker__swatch-btn:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-color-picker__swatch-btn[data-selected] {

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

@@ -158,7 +158,7 @@
   transform: scale(1.08);
 }
 .color-picker__swatch-btn:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .color-picker__swatch-btn[data-selected] {

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

@@ -23,7 +23,7 @@ export const ComboboxInput = React.forwardRef<
     <BaseCombobox.Input
       ref={ref}
       className={cn(
-        "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+        "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
         className,
       )}
       {...props}

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

@@ -21,7 +21,7 @@
   border-color: var(--border-strong);
 }
 .sh-ui-combobox__input:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-combobox__input:disabled {

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

@@ -21,7 +21,7 @@
   border-color: var(--border-strong);
 }
 .combobox__input:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .combobox__input:disabled {

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

@@ -13,7 +13,7 @@ export function DialogCloseX({ className, children, ...props }: React.ButtonHTML
   return (
     <BaseDialog.Close
       className={cn(
-        "absolute top-[var(--space-3)] right-[var(--space-3)] inline-flex items-center justify-center w-8 h-8 border-0 rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-lg)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
+        "absolute top-[var(--space-3)] right-[var(--space-3)] inline-flex items-center justify-center w-8 h-8 border-0 rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-lg)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
       aria-label="닫기"
@@ -49,7 +49,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
         <BaseDialog.Popup
           ref={ref}
           className={cn(
-            "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[var(--z-modal)] flex flex-col w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-4rem)] p-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-xl)] outline-none overflow-y-auto transition-[opacity,transform] duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:translate-y-[calc(-50%+0.5rem)] data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:translate-y-[calc(-50%+0.25rem)] data-[ending-style]:scale-[0.98] motion-reduce:data-[starting-style]:translate-y-[-50%] motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:translate-y-[-50%] motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
+            "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[var(--z-modal)] flex flex-col w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-4rem)] p-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-xl)] outline-none overflow-y-auto transition-[opacity,transform] duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:translate-y-[calc(-50%+0.5rem)] data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:translate-y-[calc(-50%+0.25rem)] data-[ending-style]:scale-[0.98] motion-reduce:data-[starting-style]:translate-y-[-50%] motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:translate-y-[-50%] motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2",
             className,
           )}
           {...props}

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

@@ -51,7 +51,7 @@
 }
 
 .sh-ui-dialog__content:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -110,7 +110,7 @@
   color: var(--foreground);
 }
 .sh-ui-dialog__close:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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

@@ -51,7 +51,7 @@
 }
 
 .dialog__content:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -110,7 +110,7 @@
   color: var(--foreground);
 }
 .dialog__close:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/dropdown-menu/index.tailwind.tsx

@@ -21,7 +21,7 @@ export const DropdownMenuTrigger = React.forwardRef<
     <BaseMenu.Trigger
       ref={ref}
       className={cn(
-        "font-[inherit] cursor-pointer focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
+        "font-[inherit] cursor-pointer focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2",
         className,
       )}
       {...props}

package/data/registry/react/components/dropdown-menu/styles.css

@@ -9,7 +9,7 @@
 }
 
 .sh-ui-dm__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/dropdown-menu/styles.module.css

@@ -9,7 +9,7 @@
 }
 
 .dm__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

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-foreground 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-foreground motion-reduce:transition-none",
           dragging && "border-foreground bg-background-muted text-foreground",
           disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed pointer-events-none",
           className,
@@ -189,7 +189,7 @@ export const FileUploadTrigger = React.forwardRef<HTMLButtonElement, FileUploadT
         type={type ?? "button"}
         disabled={disabled || rest.disabled}
         className={cn(
-          "inline-flex items-center justify-center gap-[var(--space-2)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground bg-background border border-border rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+          "inline-flex items-center justify-center gap-[var(--space-2)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground bg-background border border-border rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
           className,
         )}
         onClick={(e) => {
@@ -250,7 +250,7 @@ export const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProp
             <span className="text-[length:var(--text-xs)] text-foreground-muted shrink-0">{formatBytes(file.size)}</span>
             <button
               type="button"
-              className="inline-flex items-center justify-center w-6 h-6 p-0 bg-transparent border-none rounded-[calc(var(--radius)-4px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] shrink-0 hover:not-disabled:text-foreground hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none"
+              className="inline-flex items-center justify-center w-6 h-6 p-0 bg-transparent border-none rounded-[calc(var(--radius)-4px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] shrink-0 hover:not-disabled:text-foreground hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none"
               onClick={() => remove(index)}
               disabled={disabled}
               aria-label={`${file.name} 제거`}