sh-ui-cli 0.58.2 → 0.58.4

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-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,
@@ -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} 제거`}

package/data/registry/react/components/file-upload/styles.css

@@ -29,7 +29,7 @@
 }
 
 .sh-ui-file-upload__dropzone:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-color: var(--foreground);
 }
@@ -93,7 +93,7 @@
   border-color: var(--border-strong);
 }
 .sh-ui-file-upload__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-file-upload__trigger:disabled {
@@ -161,7 +161,7 @@
   background: var(--background-muted);
 }
 .sh-ui-file-upload__remove:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-file-upload__remove:disabled {

package/data/registry/react/components/file-upload/styles.module.css

@@ -29,7 +29,7 @@
 }
 
 .file-upload__dropzone:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-color: var(--foreground);
 }
@@ -93,7 +93,7 @@
   border-color: var(--border-strong);
 }
 .file-upload__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .file-upload__trigger:disabled {
@@ -161,7 +161,7 @@
   background: var(--background-muted);
 }
 .file-upload__remove:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .file-upload__remove:disabled {

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

@@ -197,7 +197,7 @@ export const HeaderTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTM
         ref={setRefs}
         type="button"
         className={cn(
-          "hidden items-center justify-center w-9 h-9 p-0 bg-transparent border-0 text-foreground rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:bg-[var(--sh-ui-header-hover-bg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 max-md:inline-flex max-md:order-[-1]",
+          "hidden items-center justify-center w-9 h-9 p-0 bg-transparent border-0 text-foreground rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:bg-[var(--sh-ui-header-hover-bg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 max-md:inline-flex max-md:order-[-1]",
           className,
         )}
         aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
@@ -292,7 +292,7 @@ export const HeaderItem = React.forwardRef<
       ref={ref}
       href={href}
       className={cn(
-        "inline-flex items-center gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted no-underline bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[active]:text-foreground data-[active]:font-semibold focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none max-md:py-[var(--space-3)] max-md:px-[var(--space-3)]",
+        "inline-flex items-center gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted no-underline bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[active]:text-foreground data-[active]:font-semibold focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none max-md:py-[var(--space-3)] max-md:px-[var(--space-3)]",
         className,
       )}
       data-active={computedActive ? "" : undefined}
@@ -437,7 +437,7 @@ export const HeaderMenuTrigger = React.forwardRef<HTMLButtonElement, React.Butto
         aria-controls={contentId}
         data-open={open ? "" : undefined}
         className={cn(
-          "inline-flex items-center gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[open]:text-foreground data-[open]:bg-[var(--sh-ui-header-hover-bg)] 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 gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[open]:text-foreground data-[open]:bg-[var(--sh-ui-header-hover-bg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
           location === "drawer" && "max-md:justify-between max-md:w-full max-md:py-[var(--space-3)] max-md:px-[var(--space-3)]",
           className,
         )}

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

@@ -91,7 +91,7 @@
   background: var(--sh-ui-header-hover-bg);
 }
 .sh-ui-header__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -135,7 +135,7 @@
   font-weight: var(--weight-semibold);
 }
 .sh-ui-header__item:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -216,7 +216,7 @@
   background: var(--sh-ui-header-hover-bg);
 }
 .sh-ui-header__menu-trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-header__chevron {

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

@@ -91,7 +91,7 @@
   background: var(--sh-ui-header-hover-bg);
 }
 .header__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -135,7 +135,7 @@
   font-weight: var(--weight-semibold);
 }
 .header__item:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -216,7 +216,7 @@
   background: var(--sh-ui-header-hover-bg);
 }
 .header__menu-trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .header__chevron {

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) ───────── */
 
@@ -149,7 +149,7 @@ Input.displayName = "Input";
 /* ───────── PasswordInput ───────── */
 
 const passwordToggleClasses =
-  "inline-flex items-center justify-center w-8 h-8 p-0 bg-transparent border-none rounded-[calc(var(--radius)-2px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2";
+  "inline-flex items-center justify-center w-8 h-8 p-0 bg-transparent border-none rounded-[calc(var(--radius)-2px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2";
 
 function EyeIcon() {
   return (

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 {
@@ -102,7 +102,7 @@
 }
 .sh-ui-input__toggle:hover { color: var(--foreground); background: var(--background-muted); }
 .sh-ui-input__toggle:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -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)",
@@ -137,7 +137,7 @@ export const toggle = style({
       background: "var(--background-muted)",
     },
     "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
+      outline: "var(--border-width-strong) solid var(--ring)",
       outlineOffset: "2px",
     },
   },
@@ -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 {
@@ -100,7 +100,7 @@
 }
 .toggle:hover { color: var(--foreground); background: var(--background-muted); }
 .toggle:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -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/menubar/styles.css

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

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

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

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/page-toc/index.tailwind.tsx

@@ -32,7 +32,7 @@ const cx = (...args: (string | undefined | false | null)[]) =>
   args.filter(Boolean).join(" ");
 
 const linkBase =
-  "block px-2 py-1 rounded-[calc(var(--radius)-4px)] text-foreground-muted no-underline leading-snug transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-subtle focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[active=true]:text-foreground data-[active=true]:font-semibold data-[active=true]:bg-background-subtle motion-reduce:transition-none";
+  "block px-2 py-1 rounded-[calc(var(--radius)-4px)] text-foreground-muted no-underline leading-snug transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-subtle focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[active=true]:text-foreground data-[active=true]:font-semibold data-[active=true]:bg-background-subtle motion-reduce:transition-none";
 
 export function PageTOC({
   containerSelector = "main",

package/data/registry/react/components/page-toc/styles.css

@@ -59,7 +59,7 @@
   background: var(--background-subtle);
 }
 .sh-ui-page-toc__link:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .sh-ui-page-toc__link[data-active="true"] {

package/data/registry/react/components/page-toc/styles.module.css

@@ -59,7 +59,7 @@
   background: var(--background-subtle);
 }
 .page-toc__link:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 .page-toc__link[data-active="true"] {

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

@@ -34,7 +34,7 @@ export const PaginationItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttrib
 );
 
 const linkBase =
-  "inline-flex items-center justify-center gap-1.5 min-w-9 h-9 px-3 rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent text-foreground no-underline transition-[background-color,border-color,color] duration-[var(--duration-fast)] cursor-pointer select-none hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[active]:bg-foreground data-[active]:text-background data-[active]:font-medium data-[active]:hover:opacity-90 aria-disabled:pointer-events-none aria-disabled:opacity-45 data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[size=sm]:min-w-8 data-[size=sm]:h-8 data-[size=sm]:px-2 motion-reduce:transition-none";
+  "inline-flex items-center justify-center gap-1.5 min-w-9 h-9 px-3 rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent text-foreground no-underline transition-[background-color,border-color,color] duration-[var(--duration-fast)] cursor-pointer select-none hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[active]:bg-foreground data-[active]:text-background data-[active]:font-medium data-[active]:hover:opacity-90 aria-disabled:pointer-events-none aria-disabled:opacity-45 data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[size=sm]:min-w-8 data-[size=sm]:h-8 data-[size=sm]:px-2 motion-reduce:transition-none";
 
 export interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   isActive?: boolean;

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

@@ -52,7 +52,7 @@
 }
 
 .sh-ui-pagination__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/pagination/styles.module.css

@@ -52,7 +52,7 @@
 }
 
 .pagination__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/popover/index.tailwind.tsx

@@ -34,7 +34,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentPro
           <BasePopover.Popup
             ref={ref}
             className={cn(
-              "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none text-[length:var(--text-sm)] leading-snug 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 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
+              "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none text-[length:var(--text-sm)] leading-snug 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 motion-reduce:data-[starting-style]:scale-100 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/popover/styles.css

@@ -30,7 +30,7 @@
 }
 
 .sh-ui-popover__content: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/popover/styles.module.css

@@ -30,7 +30,7 @@
 }
 
 .popover__content: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/radio/index.tailwind.tsx

@@ -16,7 +16,7 @@ export const Radio = React.forwardRef<HTMLElement, RadioProps>(
     <BaseRadio.Root
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-full bg-background cursor-pointer shrink-0 transition-[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]: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-full bg-background cursor-pointer shrink-0 transition-[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]: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/radio/styles.css

@@ -16,11 +16,11 @@
 }
 
 .sh-ui-radio:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .sh-ui-radio: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/radio/styles.module.css

@@ -16,11 +16,11 @@
 }
 
 .radio:hover:not([data-disabled]) {
-  border-color: var(--foreground);
+  border-color: var(--primary);
 }
 
 .radio: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/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-foreground 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}
@@ -157,7 +157,7 @@ function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }:
     <button
       type="button"
       className={cn(
-        "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none",
+        "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none",
         isActive && "text-foreground bg-background border-border-strong",
       )}
       aria-label={label}

package/data/registry/react/components/rich-text-editor/styles.css

@@ -9,7 +9,7 @@
 }
 .sh-ui-rte: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-rte[data-readonly] {
@@ -50,7 +50,7 @@
   border-color: var(--border);
 }
 .sh-ui-rte__btn:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 1px;
 }
 .sh-ui-rte__btn.is-active {

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

@@ -9,7 +9,7 @@
 }
 .rte: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;
 }
 .rte[data-readonly] {
@@ -50,7 +50,7 @@
   border-color: var(--border);
 }
 .rte__btn:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 1px;
 }
 .rte__btn.is-active {

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

@@ -30,7 +30,7 @@ export const SelectTrigger = React.forwardRef<
   <BaseSelect.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-between gap-[var(--space-2)] 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 cursor-pointer transition-[border-color,background-color] duration-[var(--duration-fast)] select-none hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[popup-open]:border-border-strong disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+      "inline-flex items-center justify-between gap-[var(--space-2)] 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 cursor-pointer transition-[border-color,background-color] duration-[var(--duration-fast)] select-none hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[popup-open]:border-border-strong disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
       className,
     )}
     {...props}

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

@@ -23,7 +23,7 @@
 }
 
 .sh-ui-select__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -188,6 +188,6 @@
   color: var(--foreground);
 }
 .sh-ui-select__chip-remove:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 1px;
 }

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

@@ -23,7 +23,7 @@
 }
 
 .select__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -188,6 +188,6 @@
   color: var(--foreground);
 }
 .select__chip-remove:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 1px;
 }