@korioinc/next-core 2.0.12 → 2.0.16
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/dist/styles/AGENTS.md +183 -0
- package/dist/styles/globals.css +61 -0
- package/package.json +17 -17
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
# Glass 토큰/유틸 역할 정리 (modal 사용 기준 + globals.css 기반)
|
|
2
|
+
|
|
3
|
+
이 문서는 **모달에서 실제 사용한 조합**과 `packages/core/src/styles/globals.css`의 정의를 확인한 뒤, glass 관련 토큰/유틸리티의 역할과 사용 기준을 정리한 것입니다.
|
|
4
|
+
|
|
5
|
+
## 1) 모달 사용 기준 (참조: `/apps/web/src/app/[locale]/modal/_components/modal.tsx`)
|
|
6
|
+
- **오버레이**: `glass` (배경을 얇게 덮고 유리감만 부여)
|
|
7
|
+
- **모달 패널**: `glass-tinted glass-backdrop border-glass-strong`
|
|
8
|
+
- **모달 내부 컨테이너**: `border-glass-strong` + `bg-white/60`(다크는 `dark:bg-slate-900/80`) + `backdrop-blur` 계열
|
|
9
|
+
- **입력/버튼**: `glass border-glass-strong` + hover 시 `hover:bg-glass-tinted`
|
|
10
|
+
|
|
11
|
+
## 2) globals.css 정의 기반 역할 요약
|
|
12
|
+
|
|
13
|
+
### 2.1 토큰(커스텀 프로퍼티)
|
|
14
|
+
`--glass*` 계열은 라이트/다크 각각 별도 값이 있으며, 공통적으로 다음 역할을 가집니다.
|
|
15
|
+
- `--glass`: 유리 레이어 기본 색 (투명도 포함)
|
|
16
|
+
- `--glass-tinted`: 유리의 색 농도 강화 버전
|
|
17
|
+
- `--glass-glow`: 유리의 발광 느낌을 위한 색
|
|
18
|
+
- `--glass-surface`: 실제 표면 색(배경 그라데이션 밑바탕)
|
|
19
|
+
- `--glass-surface-tinted`: 표면 색의 틴트 버전
|
|
20
|
+
- `--glass-border`: 유리 테두리 강도
|
|
21
|
+
- `--glass-border-subtle`: 유리 테두리 약한 버전
|
|
22
|
+
- `--glass-shine`: 유리 하이라이트
|
|
23
|
+
- `--glass-shine-subtle`: 유리 하이라이트 약한 버전
|
|
24
|
+
- `--glass-shadow-color`: 유리 그림자 컬러
|
|
25
|
+
- `--glass-shadow-ambient`: 유리 앰비언트 그림자
|
|
26
|
+
- `--glass-blur`: 백드롭 블러 강도 (기본 8px)
|
|
27
|
+
|
|
28
|
+
### 2.2 유틸리티(클래스)
|
|
29
|
+
globals.css 내 `@utility` 정의 기준
|
|
30
|
+
|
|
31
|
+
#### `glass`
|
|
32
|
+
- **역할**: 기본 유리 표면. 그라데이션 + 그림자 + 내부 하이라이트 포함.
|
|
33
|
+
- **대상**: 카드, 패널, 버튼, 인풋 등 “표면” 요소.
|
|
34
|
+
|
|
35
|
+
#### `glass-tinted`
|
|
36
|
+
- **역할**: `glass`와 동일 효과 + 틴트된 표면(`--glass-surface-tinted`).
|
|
37
|
+
- **대상**: 모달 패널, 강조 카드.
|
|
38
|
+
|
|
39
|
+
#### `glass-glow`
|
|
40
|
+
- **역할**: `glass`와 동일 효과 + 발광 표면(`--glass-surface-glow`).
|
|
41
|
+
- **대상**: 강조 배지, 강조 카드.
|
|
42
|
+
|
|
43
|
+
#### `glass-backdrop`
|
|
44
|
+
- **역할**: 배경 블러 + 채도 증가.
|
|
45
|
+
- **대상**: 모달 패널, 오버레이 같이 **뒤 배경이 비쳐야 하는 영역**.
|
|
46
|
+
|
|
47
|
+
#### `glass-overlay`
|
|
48
|
+
- **역할**: 기존 `bg-*` 색상을 유지한 채 유리 질감만 얹는다.
|
|
49
|
+
- **대상**: 색상 버튼/배지/태그 같이 `bg-*`가 있는 요소.
|
|
50
|
+
|
|
51
|
+
#### `border-glass-soft`
|
|
52
|
+
- **역할**: 은은한 유리 테두리 + 내부 얕은 하이라이트.
|
|
53
|
+
- **대상**: 보조 카드, 내부 블록.
|
|
54
|
+
|
|
55
|
+
#### `border-glass-strong`
|
|
56
|
+
- **역할**: 더 선명한 유리 테두리 + 내부 하이라이트.
|
|
57
|
+
- **대상**: 모달 패널, 버튼, 입력처럼 **경계가 분명해야 하는 요소**.
|
|
58
|
+
|
|
59
|
+
## 3) 사용 규칙 (짧은 체크리스트)
|
|
60
|
+
- 유리 표면에는 `border-glass-*`를 **필요할 때만** 붙여 경계를 잡는다.
|
|
61
|
+
- 블러가 필요한 곳에만 `glass-backdrop`을 붙인다.
|
|
62
|
+
- 강조 패널에는 `glass-tinted`, 일반 카드에는 `glass`가 기본.
|
|
63
|
+
- 다크 모드에서는 텍스트/placeholder 대비를 추가로 보정한다 (`dark:*`).
|
|
64
|
+
- **색상 버튼/배지**는 `bg-*` + `glass-overlay` 조합을 기본으로 사용한다.
|
|
65
|
+
|
|
66
|
+
## 4) 적용 예시 (모달/입력/버튼)
|
|
67
|
+
|
|
68
|
+
### 4.1 모달 오버레이
|
|
69
|
+
```tsx
|
|
70
|
+
<div className="glass fixed inset-0" />
|
|
71
|
+
```
|
|
72
|
+
- **의도**: 배경을 얇게 덮고 유리감만 부여.
|
|
73
|
+
|
|
74
|
+
### 4.2 모달 패널
|
|
75
|
+
```tsx
|
|
76
|
+
<Dialog.Panel className="glass-tinted glass-backdrop border-glass-strong rounded-2xl border p-8 shadow-2xl">
|
|
77
|
+
...
|
|
78
|
+
</Dialog.Panel>
|
|
79
|
+
```
|
|
80
|
+
- **의도**: 패널 자체는 틴트 유리 + 배경 블러 + 강한 경계.
|
|
81
|
+
|
|
82
|
+
### 4.3 모달 내부 컨테이너(본문 영역)
|
|
83
|
+
```tsx
|
|
84
|
+
<div className="rounded-2xl border border-white/40 bg-white/60 p-6 backdrop-blur-xl dark:border-slate-700/70 dark:bg-slate-900/80">
|
|
85
|
+
...
|
|
86
|
+
</div>
|
|
87
|
+
```
|
|
88
|
+
- **의도**: 내부 콘텐츠는 더 밝게, 다크 모드 대비 보정.
|
|
89
|
+
|
|
90
|
+
### 4.4 입력 필드
|
|
91
|
+
```tsx
|
|
92
|
+
<input
|
|
93
|
+
className="glass border-glass-strong rounded-lg border px-3 py-2 text-sm shadow-sm
|
|
94
|
+
focus-visible:ring-2 focus-visible:ring-slate-900/20
|
|
95
|
+
dark:placeholder:text-slate-400 dark:focus-visible:ring-white/20"
|
|
96
|
+
/>
|
|
97
|
+
```
|
|
98
|
+
- **의도**: 유리 표면 + 강한 경계 + 포커스 링 보정.
|
|
99
|
+
|
|
100
|
+
### 4.5 버튼
|
|
101
|
+
```tsx
|
|
102
|
+
<button className="glass border-glass-strong hover:bg-glass-tinted rounded-lg px-5 py-2 text-sm">
|
|
103
|
+
...
|
|
104
|
+
</button>
|
|
105
|
+
```
|
|
106
|
+
- **의도**: 기본은 glass, hover에서 tinted로 강조.
|
|
107
|
+
|
|
108
|
+
### 4.6 색상 버튼 (glass-overlay)
|
|
109
|
+
```tsx
|
|
110
|
+
<button className="glass-overlay bg-emerald-400 text-slate-900 rounded-lg px-5 py-2 text-sm">
|
|
111
|
+
...
|
|
112
|
+
</button>
|
|
113
|
+
```
|
|
114
|
+
- **의도**: `bg-*`를 유지하면서 glass 질감만 얹는다.
|
|
115
|
+
|
|
116
|
+
### 4.7 탭 선택 상태 (glass-overlay)
|
|
117
|
+
```tsx
|
|
118
|
+
<div className="flex gap-2">
|
|
119
|
+
<button className="glass border-glass-strong text-foreground rounded-full px-4 py-2 text-sm">
|
|
120
|
+
콘텐츠 작성
|
|
121
|
+
</button>
|
|
122
|
+
<button className="glass-overlay bg-slate-900 text-white rounded-full px-4 py-2 text-sm shadow-md">
|
|
123
|
+
렌더링 미리보기 (선택됨)
|
|
124
|
+
</button>
|
|
125
|
+
</div>
|
|
126
|
+
```
|
|
127
|
+
- **의도**: 탭 선택 상태에서 `bg-*`를 유지한 채 glass 질감을 추가한다.
|
|
128
|
+
|
|
129
|
+
### 4.8 기본 Solid 버튼 (non-glass)
|
|
130
|
+
```tsx
|
|
131
|
+
<button className="bg-primary hover:bg-primary text-primary-foreground rounded-lg px-5 py-2 text-sm font-semibold shadow-lg transition">
|
|
132
|
+
...
|
|
133
|
+
</button>
|
|
134
|
+
```
|
|
135
|
+
- **의도**: 가장 기본적인 CTA 버튼. glass가 필요 없을 때 사용.
|
|
136
|
+
|
|
137
|
+
### 4.9 알림/에러 메시지 (glass + 컬러 배경)
|
|
138
|
+
```tsx
|
|
139
|
+
<div className="glass border-glass-strong rounded-2xl border border-rose-200/80 bg-rose-50/70 px-4 py-3 text-sm text-rose-600 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-200">
|
|
140
|
+
...
|
|
141
|
+
</div>
|
|
142
|
+
```
|
|
143
|
+
- **의도**: 유리 표면 위에 컬러 배경을 얹어 메시지 톤을 유지한다.
|
|
144
|
+
|
|
145
|
+
## 5) 적용 순서 가이드
|
|
146
|
+
1. **표면 선택**: `glass` 또는 `glass-tinted`
|
|
147
|
+
2. **경계 부여**: `border-glass-strong` 또는 `border-glass-soft`
|
|
148
|
+
3. **배경 블러 필요 여부**: 필요하면 `glass-backdrop`
|
|
149
|
+
4. **다크 보정**: `dark:*`로 텍스트/placeholder 대비 조정
|
|
150
|
+
|
|
151
|
+
## 6) 추가 예시 (카드/리스트/배지)
|
|
152
|
+
|
|
153
|
+
### 6.1 기본 카드
|
|
154
|
+
```tsx
|
|
155
|
+
<div className="glass border-glass-soft rounded-2xl p-6 shadow-md">
|
|
156
|
+
...
|
|
157
|
+
</div>
|
|
158
|
+
```
|
|
159
|
+
- **의도**: 보조 영역에 은은한 유리감.
|
|
160
|
+
|
|
161
|
+
### 6.2 강조 카드 (CTA)
|
|
162
|
+
```tsx
|
|
163
|
+
<div className="glass-tinted border-glass-strong rounded-2xl p-6 shadow-xl">
|
|
164
|
+
...
|
|
165
|
+
</div>
|
|
166
|
+
```
|
|
167
|
+
- **의도**: 시선이 가야 하는 블록에 강한 대비.
|
|
168
|
+
|
|
169
|
+
### 6.3 리스트 아이템
|
|
170
|
+
```tsx
|
|
171
|
+
<li className="glass border-glass-strong rounded-lg p-3 shadow">
|
|
172
|
+
...
|
|
173
|
+
</li>
|
|
174
|
+
```
|
|
175
|
+
- **의도**: 반복 항목에 동일한 유리 표면 제공.
|
|
176
|
+
|
|
177
|
+
### 6.4 배지/태그
|
|
178
|
+
```tsx
|
|
179
|
+
<span className="glass border-glass-strong rounded-full px-3 py-1 text-xs font-semibold">
|
|
180
|
+
NEW
|
|
181
|
+
</span>
|
|
182
|
+
```
|
|
183
|
+
- **의도**: 작은 요소에도 유리감 유지.
|
package/dist/styles/globals.css
CHANGED
|
@@ -296,6 +296,57 @@
|
|
|
296
296
|
inset 0 1px 0 var(--glass-shine-subtle);
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
+
@utility glass-overlay {
|
|
300
|
+
backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
|
|
301
|
+
background-image:
|
|
302
|
+
linear-gradient(
|
|
303
|
+
135deg,
|
|
304
|
+
color-mix(in oklab, white 30%, transparent) 0%,
|
|
305
|
+
color-mix(in oklab, white 18%, transparent) 30%,
|
|
306
|
+
color-mix(in oklab, white 8%, transparent) 70%,
|
|
307
|
+
color-mix(in oklab, white 22%, transparent) 100%
|
|
308
|
+
),
|
|
309
|
+
radial-gradient(
|
|
310
|
+
120% 120% at 18% 0%,
|
|
311
|
+
color-mix(in oklab, white 26%, transparent) 0%,
|
|
312
|
+
transparent 48%
|
|
313
|
+
);
|
|
314
|
+
box-shadow:
|
|
315
|
+
0 1px 2px color-mix(in oklab, var(--glass-shadow-ambient) 60%, transparent),
|
|
316
|
+
0 6px 12px color-mix(in oklab, var(--glass-shadow-color) 55%, transparent),
|
|
317
|
+
inset 0 1px 0 color-mix(in oklab, white 38%, transparent),
|
|
318
|
+
inset 0 -1px 0 color-mix(in oklab, black 10%, transparent);
|
|
319
|
+
filter: saturate(1.04) brightness(1.03);
|
|
320
|
+
|
|
321
|
+
.dark & {
|
|
322
|
+
background-image:
|
|
323
|
+
linear-gradient(
|
|
324
|
+
180deg,
|
|
325
|
+
color-mix(in oklab, black 22%, transparent) 0%,
|
|
326
|
+
color-mix(in oklab, black 16%, transparent) 100%
|
|
327
|
+
),
|
|
328
|
+
linear-gradient(
|
|
329
|
+
135deg,
|
|
330
|
+
color-mix(in oklab, white 28%, transparent) 0%,
|
|
331
|
+
color-mix(in oklab, white 16%, transparent) 30%,
|
|
332
|
+
color-mix(in oklab, white 7%, transparent) 70%,
|
|
333
|
+
color-mix(in oklab, white 20%, transparent) 100%
|
|
334
|
+
),
|
|
335
|
+
radial-gradient(
|
|
336
|
+
120% 120% at 18% 0%,
|
|
337
|
+
color-mix(in oklab, white 22%, transparent) 0%,
|
|
338
|
+
transparent 44%
|
|
339
|
+
);
|
|
340
|
+
background-blend-mode: multiply, normal, normal;
|
|
341
|
+
box-shadow:
|
|
342
|
+
0 2px 6px color-mix(in oklab, var(--glass-shadow-ambient) 65%, transparent),
|
|
343
|
+
0 10px 18px color-mix(in oklab, var(--glass-shadow-color) 65%, transparent),
|
|
344
|
+
inset 0 1px 0 color-mix(in oklab, white 24%, transparent),
|
|
345
|
+
inset 0 -1px 0 color-mix(in oklab, black 18%, transparent);
|
|
346
|
+
filter: saturate(1.04) brightness(1.03);
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
299
350
|
@utility glass-tinted {
|
|
300
351
|
--glass-surface-slot: var(--glass-surface-tinted);
|
|
301
352
|
@apply glass;
|
|
@@ -325,6 +376,11 @@
|
|
|
325
376
|
border-radius: inherit;
|
|
326
377
|
pointer-events: none;
|
|
327
378
|
box-shadow: inset 0 1px 0 var(--glass-shine-subtle);
|
|
379
|
+
transform: translateY(-0.3px);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.dark &::after {
|
|
383
|
+
transform: translateY(0);
|
|
328
384
|
}
|
|
329
385
|
}
|
|
330
386
|
|
|
@@ -343,6 +399,11 @@
|
|
|
343
399
|
border-radius: inherit;
|
|
344
400
|
pointer-events: none;
|
|
345
401
|
box-shadow: inset 0 1px 0 var(--glass-shine-subtle);
|
|
402
|
+
transform: translateY(-0.3px);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.dark &::after {
|
|
406
|
+
transform: translateY(0);
|
|
346
407
|
}
|
|
347
408
|
}
|
|
348
409
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korioinc/next-core",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./ads": {
|
|
@@ -63,26 +63,26 @@
|
|
|
63
63
|
],
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@headlessui/react": "^2.2.9",
|
|
66
|
-
"@lingui/conf": "^5.
|
|
67
|
-
"@lingui/core": "^5.
|
|
68
|
-
"@lingui/react": "^5.
|
|
66
|
+
"@lingui/conf": "^5.9.0",
|
|
67
|
+
"@lingui/core": "^5.9.0",
|
|
68
|
+
"@lingui/react": "^5.9.0",
|
|
69
69
|
"@tailwindcss/typography": "^0.5.19",
|
|
70
70
|
"@types/negotiator": "^0.6.4",
|
|
71
|
-
"@types/node": "^
|
|
72
|
-
"@types/react": "^19.2.
|
|
71
|
+
"@types/node": "^25.2.1",
|
|
72
|
+
"@types/react": "^19.2.13",
|
|
73
73
|
"@types/react-dom": "^19.2.3",
|
|
74
74
|
"eslint": "^9.39.2",
|
|
75
75
|
"next-themes": "^0.4.6",
|
|
76
|
-
"react": "^19.2.
|
|
77
|
-
"react-dom": "^19.2.
|
|
76
|
+
"react": "^19.2.4",
|
|
77
|
+
"react-dom": "^19.2.4",
|
|
78
78
|
"tailwindcss": "^4.1.18",
|
|
79
79
|
"tsc-alias": "^1.8.16",
|
|
80
80
|
"tw-animate-css": "^1.4.0",
|
|
81
81
|
"typescript": "^5.9.3",
|
|
82
|
-
"@korioinc/next-configs": "2.0.
|
|
82
|
+
"@korioinc/next-configs": "2.0.16"
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@floating-ui/react": "^0.27.
|
|
85
|
+
"@floating-ui/react": "^0.27.17",
|
|
86
86
|
"@formatjs/intl-localematcher": "^0.7.5",
|
|
87
87
|
"clsx": "^2.1.1",
|
|
88
88
|
"cookies-next": "^6.1.1",
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"pretendard": "^1.3.9",
|
|
94
94
|
"schema-dts": "^1.1.5",
|
|
95
95
|
"tailwind-merge": "^3.4.0",
|
|
96
|
-
"valtio": "^2.
|
|
97
|
-
"@korioinc/next-conf": "2.0.
|
|
96
|
+
"valtio": "^2.3.0",
|
|
97
|
+
"@korioinc/next-conf": "2.0.16"
|
|
98
98
|
},
|
|
99
99
|
"publishConfig": {
|
|
100
100
|
"access": "public",
|
|
@@ -108,12 +108,12 @@
|
|
|
108
108
|
"author": "Korio Inc.",
|
|
109
109
|
"peerDependencies": {
|
|
110
110
|
"@headlessui/react": ">=2.2.0",
|
|
111
|
-
"@lingui/core": ">=5.
|
|
112
|
-
"@lingui/react": ">=5.
|
|
113
|
-
"next": ">=16.1.
|
|
111
|
+
"@lingui/core": ">=5.9.0",
|
|
112
|
+
"@lingui/react": ">=5.9.0",
|
|
113
|
+
"next": ">=16.1.5",
|
|
114
114
|
"next-themes": ">=0.4.6",
|
|
115
|
-
"react": ">=19.2.
|
|
116
|
-
"react-dom": ">=19.2.
|
|
115
|
+
"react": ">=19.2.4",
|
|
116
|
+
"react-dom": ">=19.2.4",
|
|
117
117
|
"tailwindcss": ">=4.0.0"
|
|
118
118
|
},
|
|
119
119
|
"scripts": {
|