sh-ui-cli 0.58.4 → 0.58.5
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.
- package/data/changelog/versions.json +13 -0
- package/data/registry/react/components/color-picker/index.tailwind.tsx +1 -1
- package/data/registry/react/components/color-picker/styles.css +1 -1
- package/data/registry/react/components/color-picker/styles.module.css +1 -1
- package/data/registry/react/components/tabs/index.tailwind.tsx +1 -1
- package/data/registry/react/components/tabs/styles.css +2 -2
- package/data/registry/react/components/tabs/styles.module.css +2 -2
- package/package.json +1 -1
|
@@ -2,6 +2,19 @@
|
|
|
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.5",
|
|
7
|
+
"date": "2026-05-06",
|
|
8
|
+
"title": "디자인 디폴트 개편 4라운드 — Tabs/Color-picker 의 active·selected 표시를 primary 로",
|
|
9
|
+
"type": "patch",
|
|
10
|
+
"highlights": [
|
|
11
|
+
"**Tabs underline variant 의 active 표시선** — 가로(`inset 0 -2px 0 var(--foreground)`) / 세로(`inset -2px 0 0 var(--foreground)`) 모두 `var(--primary)` 로 변경. 활성 탭이 브랜드 톤으로 강조 — 다크에서 순백 라인이 stark 했던 문제 해소.",
|
|
12
|
+
"**Color-picker 의 selected 색상 ring** — `0 0 0 3.5px var(--foreground)` (선택된 색 둘레) → `var(--primary)`. 선택 상태가 brand 톤으로 명확.",
|
|
13
|
+
"**v0.58.3·4 ring/focus 와 일관** — 활성/선택/focus 모두 primary 또는 ring (50% primary). 다음 라운드에서 Avatar/Badge/Progress 톤 점검 예정.",
|
|
14
|
+
"**4 variant + 듀얼 카피본 + pactrack 동기화** — 8개 파일 sed."
|
|
15
|
+
],
|
|
16
|
+
"url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.5"
|
|
17
|
+
},
|
|
5
18
|
{
|
|
6
19
|
"version": "0.58.4",
|
|
7
20
|
"date": "2026-05-06",
|
|
@@ -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(--
|
|
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}
|
|
@@ -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(--
|
|
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,
|
|
@@ -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(--
|
|
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(--
|
|
110
|
+
box-shadow: inset -2px 0 0 var(--primary);
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
/* ─────────────── variant: pill (세그먼트) ─────────────── */
|
|
@@ -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(--
|
|
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(--
|
|
110
|
+
box-shadow: inset -2px 0 0 var(--primary);
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
/* ─────────────── variant: pill (세그먼트) ─────────────── */
|