sh-ui-cli 0.58.4 → 0.58.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/data/changelog/versions.json +27 -0
  2. package/data/registry/react/components/button/index.tailwind.tsx +1 -1
  3. package/data/registry/react/components/button/styles.css +1 -0
  4. package/data/registry/react/components/button/styles.css.ts +3 -0
  5. package/data/registry/react/components/button/styles.module.css +1 -0
  6. package/data/registry/react/components/color-picker/index.tailwind.tsx +1 -1
  7. package/data/registry/react/components/color-picker/styles.css +1 -1
  8. package/data/registry/react/components/color-picker/styles.module.css +1 -1
  9. package/data/registry/react/components/tabs/index.tailwind.tsx +1 -1
  10. package/data/registry/react/components/tabs/styles.css +2 -2
  11. package/data/registry/react/components/tabs/styles.module.css +2 -2
  12. package/package.json +1 -1
  13. package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css +3 -0
  14. package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css +3 -0
  15. package/templates/nextjs-standalone/app/globals.css +1 -0
  16. package/templates/ui-app-template/src/styles/globals.css +1 -0
  17. package/templates/ui-app-template/src/styles/tokens.css +3 -0
package/data/changelog/versions.json CHANGED
@@ -2,6 +2,33 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
4
4
  "versions": [
5
+ {
6
+ "version": "0.58.6",
7
+ "date": "2026-05-06",
8
+ "title": "디자인 디폴트 개편 5라운드 — `--danger-hover` 토큰 + Button danger hover 일관화",
9
+ "type": "patch",
10
+ "highlights": [
11
+ "**`--danger-hover` 토큰 신규** — `color-mix(in srgb, var(--danger) 90%, black)` (10% 어둡게). primary 가 `--primary-hover` 가지듯 danger 도 일관된 hover 토큰. 향후 컴포넌트가 `danger` 색을 hover 시 어떻게 바꿀지 한 곳에서 결정.",
12
+ "**`--color-danger-hover: var(--danger-hover)` @theme inline 매핑** — Tailwind `bg-danger-hover` 유틸 활성화.",
13
+ "**Button danger 의 `hover:brightness-95` 제거 → `hover:bg-danger-hover`** — Tailwind variant 의 \"더블펌프 후 잔존 brightness\" 정리. primary/secondary/ghost 와 같은 token-기반 hover 패턴으로 정렬.",
14
+ "**plain CSS / module / vanilla-extract 의 누락된 danger:hover 추가** — 기존엔 Tailwind variant 만 hover 효과 있었고 다른 3개 variant 는 hover 시 색이 그대로였음 (히든 버그). 이제 4개 variant 모두 동일한 hover 동작.",
15
+ "**일관성 — 5라운드까지의 누적 효과**: focus(ring 50% primary) / inline focus(1px primary) / active indicator(primary) / hover(token-driven) — 모든 인터랙션 상태가 brand 토큰으로 정렬. \"매번 사용자가 결정\" 패턴 제거."
16
+ ],
17
+ "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.6"
18
+ },
19
+ {
20
+ "version": "0.58.5",
21
+ "date": "2026-05-06",
22
+ "title": "디자인 디폴트 개편 4라운드 — Tabs/Color-picker 의 active·selected 표시를 primary 로",
23
+ "type": "patch",
24
+ "highlights": [
25
+ "**Tabs underline variant 의 active 표시선** — 가로(`inset 0 -2px 0 var(--foreground)`) / 세로(`inset -2px 0 0 var(--foreground)`) 모두 `var(--primary)` 로 변경. 활성 탭이 브랜드 톤으로 강조 — 다크에서 순백 라인이 stark 했던 문제 해소.",
26
+ "**Color-picker 의 selected 색상 ring** — `0 0 0 3.5px var(--foreground)` (선택된 색 둘레) → `var(--primary)`. 선택 상태가 brand 톤으로 명확.",
27
+ "**v0.58.3·4 ring/focus 와 일관** — 활성/선택/focus 모두 primary 또는 ring (50% primary). 다음 라운드에서 Avatar/Badge/Progress 톤 점검 예정.",
28
+ "**4 variant + 듀얼 카피본 + pactrack 동기화** — 8개 파일 sed."
29
+ ],
30
+ "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.5"
31
+ },
5
32
  {
6
33
  "version": "0.58.4",
7
34
  "date": "2026-05-06",
package/data/registry/react/components/button/index.tailwind.tsx CHANGED
@@ -14,7 +14,7 @@ const buttonVariants = cva(
14
14
  ghost:
15
15
  "bg-transparent text-foreground hover:bg-background-muted",
16
16
  danger:
17
- "bg-danger text-danger-foreground hover:brightness-95",
17
+ "bg-danger text-danger-foreground hover:bg-danger-hover",
18
18
  link:
19
19
  "bg-transparent text-primary underline-offset-4 hover:underline",
20
20
  },
package/data/registry/react/components/button/styles.css CHANGED
@@ -64,6 +64,7 @@
64
64
  background-color: var(--danger);
65
65
  color: var(--danger-foreground);
66
66
  }
67
+ .sh-ui-button--danger:hover { background-color: var(--danger-hover); }
67
68
 
68
69
  /* link — 배경/테두리 없이 밑줄. size는 font-size만 유지, height/padding 제거 */
69
70
  .sh-ui-button--link {
package/data/registry/react/components/button/styles.css.ts CHANGED
@@ -97,6 +97,9 @@ export const variants = styleVariants({
97
97
  danger: {
98
98
  backgroundColor: "var(--danger)",
99
99
  color: "var(--danger-foreground)",
100
+ selectors: {
101
+ "&:hover": { backgroundColor: "var(--danger-hover)" },
102
+ },
100
103
  },
101
104
  link: {
102
105
  backgroundColor: "transparent",
package/data/registry/react/components/button/styles.module.css CHANGED
@@ -64,6 +64,7 @@
64
64
  background-color: var(--danger);
65
65
  color: var(--danger-foreground);
66
66
  }
67
+ .danger:hover { background-color: var(--danger-hover); }
67
68
 
68
69
  .link {
69
70
  background-color: transparent;
package/data/registry/react/components/color-picker/index.tailwind.tsx CHANGED
@@ -296,7 +296,7 @@ export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerS
296
296
  <button
297
297
  key={c}
298
298
  type="button"
299
- 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)]"
299
+ className="w-5 h-5 p-0 border border-border rounded-[calc(var(--radius)-4px)] cursor-pointer transition-[transform,box-shadow] duration-[var(--duration-fast)] hover:scale-110 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:shadow-[0_0_0_2px_var(--background),0_0_0_3.5px_var(--primary)]"
300
300
  aria-label={c}
301
301
  aria-pressed={selected}
302
302
  data-selected={selected || undefined}
package/data/registry/react/components/color-picker/styles.css CHANGED
@@ -162,5 +162,5 @@
162
162
  outline-offset: 2px;
163
163
  }
164
164
  .sh-ui-color-picker__swatch-btn[data-selected] {
165
- box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground);
165
+ box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--primary);
166
166
  }
package/data/registry/react/components/color-picker/styles.module.css CHANGED
@@ -162,5 +162,5 @@
162
162
  outline-offset: 2px;
163
163
  }
164
164
  .color-picker__swatch-btn[data-selected] {
165
- box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground);
165
+ box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--primary);
166
166
  }
package/data/registry/react/components/tabs/index.tailwind.tsx CHANGED
@@ -75,7 +75,7 @@ export const TabsTrigger = React.forwardRef<
75
75
  TabsTrigger.displayName = "TabsTrigger";
76
76
 
77
77
  const indicatorVariantClasses =
78
- "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--foreground)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--foreground)]";
78
+ "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--primary)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--primary)]";
79
79
 
80
80
  export const TabsIndicator = React.forwardRef<
81
81
  HTMLSpanElement,
package/data/registry/react/components/tabs/styles.css CHANGED
@@ -98,7 +98,7 @@
98
98
  left: var(--active-tab-left);
99
99
  width: var(--active-tab-width);
100
100
  height: var(--active-tab-height);
101
- box-shadow: inset 0 -2px 0 var(--foreground);
101
+ box-shadow: inset 0 -2px 0 var(--primary);
102
102
  }
103
103
 
104
104
  .sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] > .sh-ui-tabs__list {
@@ -107,7 +107,7 @@
107
107
  }
108
108
 
109
109
  .sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] .sh-ui-tabs__indicator {
110
- box-shadow: inset -2px 0 0 var(--foreground);
110
+ box-shadow: inset -2px 0 0 var(--primary);
111
111
  }
112
112
 
113
113
  /* ─────────────── variant: pill (세그먼트) ─────────────── */
package/data/registry/react/components/tabs/styles.module.css CHANGED
@@ -98,7 +98,7 @@
98
98
  left: var(--active-tab-left);
99
99
  width: var(--active-tab-width);
100
100
  height: var(--active-tab-height);
101
- box-shadow: inset 0 -2px 0 var(--foreground);
101
+ box-shadow: inset 0 -2px 0 var(--primary);
102
102
  }
103
103
 
104
104
  .tabs[data-variant="underline"][data-orientation="vertical"] > .tabs__list {
@@ -107,7 +107,7 @@
107
107
  }
108
108
 
109
109
  .tabs[data-variant="underline"][data-orientation="vertical"] .tabs__indicator {
110
- box-shadow: inset -2px 0 0 var(--foreground);
110
+ box-shadow: inset -2px 0 0 var(--primary);
111
111
  }
112
112
 
113
113
  /* ─────────────── variant: pill (세그먼트) ─────────────── */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sh-ui-cli",
3
- "version": "0.58.4",
3
+ "version": "0.58.6",
4
4
  "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
5
5
  "license": "MIT",
6
6
  "repository": {
package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --primary-hover: #262626;
19
19
  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
20
20
  --danger: #DC2626;
21
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
21
22
  --danger-foreground: #FFFFFF;
22
23
  }
23
24
  @media (prefers-color-scheme: dark) {
@@ -36,6 +37,7 @@
36
37
  --primary-foreground: #171717;
37
38
  --primary-hover: #E5E5E5;
38
39
  --danger: #DC2626;
40
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
39
41
  --danger-foreground: #FFFFFF;
40
42
  }
41
43
  }
@@ -54,6 +56,7 @@
54
56
  --primary-foreground: #171717;
55
57
  --primary-hover: #E5E5E5;
56
58
  --danger: #DC2626;
59
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
57
60
  --danger-foreground: #FFFFFF;
58
61
  }
59
62
  /* sh-ui:theme-colors-end */
package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --primary-hover: #262626;
19
19
  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
20
20
  --danger: #DC2626;
21
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
21
22
  --danger-foreground: #FFFFFF;
22
23
  }
23
24
  @media (prefers-color-scheme: dark) {
@@ -36,6 +37,7 @@
36
37
  --primary-foreground: #171717;
37
38
  --primary-hover: #E5E5E5;
38
39
  --danger: #DC2626;
40
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
39
41
  --danger-foreground: #FFFFFF;
40
42
  }
41
43
  }
@@ -54,6 +56,7 @@
54
56
  --primary-foreground: #171717;
55
57
  --primary-hover: #E5E5E5;
56
58
  --danger: #DC2626;
59
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
57
60
  --danger-foreground: #FFFFFF;
58
61
  }
59
62
  /* sh-ui:theme-colors-end */
package/templates/nextjs-standalone/app/globals.css CHANGED
@@ -23,6 +23,7 @@
23
23
  --color-primary-hover: var(--primary-hover);
24
24
  --color-ring: var(--ring);
25
25
  --color-danger: var(--danger);
26
+ --color-danger-hover: var(--danger-hover);
26
27
  --color-danger-foreground: var(--danger-foreground);
27
28
  --color-success: var(--success);
28
29
  --color-success-foreground: var(--success-foreground);
package/templates/ui-app-template/src/styles/globals.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --color-primary-hover: var(--primary-hover);
28
28
  --color-ring: var(--ring);
29
29
  --color-danger: var(--danger);
30
+ --color-danger-hover: var(--danger-hover);
30
31
  --color-danger-foreground: var(--danger-foreground);
31
32
  --color-success: var(--success);
32
33
  --color-success-foreground: var(--success-foreground);
package/templates/ui-app-template/src/styles/tokens.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --primary-hover: #262626;
19
19
  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
20
20
  --danger: #DC2626;
21
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
21
22
  --danger-foreground: #FFFFFF;
22
23
  }
23
24
  @media (prefers-color-scheme: dark) {
@@ -36,6 +37,7 @@
36
37
  --primary-foreground: #171717;
37
38
  --primary-hover: #E5E5E5;
38
39
  --danger: #DC2626;
40
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
39
41
  --danger-foreground: #FFFFFF;
40
42
  }
41
43
  }
@@ -54,6 +56,7 @@
54
56
  --primary-foreground: #171717;
55
57
  --primary-hover: #E5E5E5;
56
58
  --danger: #DC2626;
59
+ --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
57
60
  --danger-foreground: #FFFFFF;
58
61
  }
59
62
  /* sh-ui:theme-colors-end */