sh-ui-cli 0.98.1 → 0.109.1

package/src/mcp.mjs

@@ -93,6 +93,34 @@ const INIT_DESCRIPTIONS = {
     tailwind: "Tailwind v4 utility class — class-variance-authority 기반",
     "css-modules": "CSS Modules — .module.css + styles.X 참조, 빌드 타임 hash 격리",
   },
+  // theme 프리셋 — sh_ui_create_project 의 theme 인자에 그대로 전달 가능.
+  // 사용자가 "다크 모던" / "따뜻한 종이" 같이 자연어로 의도를 표현하면 아래 keywordHints 로 매핑.
+  theme: {
+    neutral: "뉴트럴 — 흑백 강조 (sh-ui 기본). 어떤 브랜드에도 무난.",
+    slate: "슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도). 대시보드/관리자 인상.",
+    rose: "로즈 — 핑크 강조 + 둥근 모서리 (친근·여유). 소비자 앱·캐주얼.",
+    emerald: "에메랄드 — 그린 강조. 자연·금융·헬스 인상.",
+    violet: "바이올렛 — 퍼플 강조 + 살짝 라운드 (모던·또렷). 크리에이티브/디자인 도구.",
+  },
+  // 자연어 의도 → enum/preset 매핑 힌트 (한국어 표현 위주).
+  // 사용자가 "다크 모던" / "따뜻한 종이" / "한국 핀테크 스타일" 같이 의도만 던지면 AI 가
+  // 이 사전을 보고 platform/base/radius/mode/theme 조합으로 매핑한다.
+  keywordHints: {
+    "다크 모던 / dark modern / 검정 모던": "base=zinc · mode=dark · radius=sm · theme=neutral",
+    "라이트 모던 / 밝은 모던 / clean": "base=zinc · mode=light · radius=sm · theme=neutral",
+    "따뜻한 / 따뜻한 종이 / warm paper / 종이": "theme=rose 또는 neutral · radius=md · mode=light-dark",
+    "친근한 / 캐주얼 / 부드러운 / 동글동글 / soft": "theme=rose · radius=lg · mode=light-dark",
+    "한국 핀테크 / 핀테크 / fintech / 금융": "theme=slate (indigo) 또는 violet · radius=sm · mode=light-dark",
+    "기업 관리자 / 관리자 / 어드민 / admin / MES / ERP / 백오피스": "theme=slate · arch=mes · radius=sm",
+    "차분한 / 프로페셔널 / 푸른빛 / 정보 밀도": "base=slate 또는 theme=slate · radius=sm",
+    "그린 강조 / 자연 / 헬스 / 환경": "theme=emerald · radius=md",
+    "퍼플 강조 / 크리에이티브 / 디자인 도구": "theme=violet · radius=lg · borders=두꺼움",
+    "쇼핑몰 / 커머스 / 소비자 앱": "theme=rose 또는 emerald · radius=lg · mode=light-dark",
+    "데이터 대시보드 / 차트 / 분석 도구": "theme=slate · base=slate · radius=sm · 정보 밀도 ↑",
+    "AI / 챗봇 / 생성형": "theme=violet 또는 neutral · radius=md · mode=light-dark",
+    "스타트업 / 모던 / 트렌디": "theme=violet 또는 rose · radius=md",
+    "교육 / 학습 / 친근": "theme=rose 또는 emerald · radius=lg",
+  },
 };
 
 /** stdout 으로 출력되는 console.* 호출을 버퍼에 캡처해 텍스트로 반환. */
@@ -419,8 +447,10 @@ export async function startMcpServer() {
     "sh_ui_describe_init",
     {
       description:
-        "sh-ui init 의 4개 축(platform/base/radius/mode) 선택지와 한글 설명 반환. " +
-        "사용자의 자연어 의도(\"다크 모던\", \"따뜻한 느낌\")를 enum 값으로 매핑할 때 먼저 호출.",
+        "sh-ui init 의 선택지 사전 — platform/base/radius/mode/cssFramework/theme 의 enum + 한글 설명, " +
+        "그리고 사용자 자연어 의도 (\"다크 모던\" / \"따뜻한 종이\" / \"한국 핀테크 스타일\" 등) 를 " +
+        "enum/preset 조합으로 매핑하는 keywordHints 사전을 함께 반환. " +
+        "사용자가 톤을 자연어로 던지면 이 툴을 먼저 호출해 매핑 후 sh_ui_create_project 의 theme/base/radius 인자에 반영. v0.106.0+ 에서 theme + keywordHints 키 추가.",
       inputSchema: {},
     },
     async () => jsonResult(INIT_DESCRIPTIONS),
@@ -478,6 +508,17 @@ export async function startMcpServer() {
           ),
         port: z.string().optional()
           .describe("monorepo 첫 앱의 dev 포트. 기본 '3000'. structure=monorepo 일 때만 의미."),
+        gitInit: z.boolean().optional()
+          .describe(
+            "git init 실행 여부. 기본 auto — parent 가 이미 git tree 안이면 자동 스킵 (nested .git 충돌 방지), 밖이면 init. " +
+            "true 로 nested 강제, false 로 명시 스킵. v0.102.0+ 신규.",
+          ),
+        locale: z.enum(["default", "ko"]).optional()
+          .describe(
+            "사용자 지역 디폴트 가정. 'ko' 선택 시 globals.css 에 Pretendard 폰트가 자동 적용 (CDN @import + body font-family). " +
+            "한국어 사용자가 init 직후 거의 100% 첫 작업이라 한 옵션으로 자동화. " +
+            "locales (복수) 와 다름 — locales 는 i18n 활성화 시 생성할 locale 코드 목록. v0.103.0+ 신규.",
+          ),
       },
     },
     async (input) => {
@@ -537,6 +578,8 @@ export async function startMcpServer() {
             locales: input.locales,
             appName: input.appName,
             port: input.port,
+            gitInit: input.gitInit,
+            locale: input.locale,
             yes: true, // 사전 검사를 마쳤으니 generator 의 confirm 프롬프트 우회
           }),
         );
@@ -802,8 +845,9 @@ export async function startMcpServer() {
       success: HEX.optional(), "success-foreground": HEX.optional(),
       warning: HEX.optional(), "warning-foreground": HEX.optional(),
       info: HEX.optional(), "info-foreground": HEX.optional(),
+      accent: HEX.optional(), "accent-foreground": HEX.optional(), "accent-hover": HEX.optional(),
     })
-    .describe("15개 필수 색 토큰 + 옵셔널 6개(success/warning/info × -foreground). 각 값은 #RRGGBB hex");
+    .describe("15개 필수 색 토큰 + 옵셔널 9개(success/warning/info × -foreground + accent/accent-foreground/accent-hover). 각 값은 #RRGGBB hex");
 
   server.registerTool(
     "sh_ui_encode_theme",

package/src/theme-extract.mjs

@@ -55,6 +55,7 @@ const TOKEN_KEYS_OPTIONAL = [
   "info", "info-foreground",
   "danger-hover",
   "ring",
+  "accent", "accent-foreground", "accent-hover",
 ];
 
 const HEX_RE = /^#[0-9A-Fa-f]{6}$/;

package/templates/nextjs-standalone/_arch/flat/app/globals.css

@@ -31,6 +31,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -46,10 +49,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {

package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -26,10 +31,10 @@
   --warning-foreground: #FFFFFF;
   --info: #2563EB;
   --info-foreground: #FFFFFF;
-  --sidebar-bg: #FAFAFA;
+  --sidebar-bg: #F5F5F5;
   --sidebar-fg: #0A0A0A;
   --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
+  --sidebar-accent: #E5E5E5;
   --sidebar-accent-fg: #0A0A0A;
 }
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
     --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -77,6 +85,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -97,6 +108,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -133,6 +154,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -142,6 +166,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -26,10 +31,10 @@
   --warning-foreground: #FFFFFF;
   --info: #2563EB;
   --info-foreground: #FFFFFF;
-  --sidebar-bg: #FAFAFA;
+  --sidebar-bg: #F5F5F5;
   --sidebar-fg: #0A0A0A;
   --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
+  --sidebar-accent: #E5E5E5;
   --sidebar-accent-fg: #0A0A0A;
 }
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
     --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -77,6 +85,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -97,6 +108,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -133,6 +154,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -142,6 +166,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/nextjs-standalone/_arch/mes/app/globals.css

@@ -31,6 +31,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -46,10 +49,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {

package/templates/nextjs-standalone/_arch/mes/src/lib/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -36,6 +41,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -55,6 +63,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -64,6 +75,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -100,6 +121,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -109,6 +133,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/nextjs-standalone/app/globals.css

@@ -27,6 +27,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -42,10 +45,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {

package/templates/ui-app-template/src/styles/globals.css

@@ -42,6 +42,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -57,10 +60,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {

package/templates/ui-app-template/src/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -26,10 +31,10 @@
   --warning-foreground: #FFFFFF;
   --info: #2563EB;
   --info-foreground: #FFFFFF;
-  --sidebar-bg: #FAFAFA;
+  --sidebar-bg: #F5F5F5;
   --sidebar-fg: #0A0A0A;
   --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
+  --sidebar-accent: #E5E5E5;
   --sidebar-accent-fg: #0A0A0A;
 }
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
     --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -77,6 +85,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -97,6 +108,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -133,6 +154,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -142,6 +166,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/vite-standalone/_arch/flat/src/lib/styles/globals.css

@@ -21,6 +21,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -32,6 +35,19 @@
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-sidebar-bg: var(--sidebar-bg);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 /* sh-ui:webview-base-start — 모바일 브라우저 / PWA 공통 기본값.