@tide-tds/foundation 0.0.0-stage → 0.1.0

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.
@@ -0,0 +1,89 @@
1
+ /**
2
+ * radius 5단계. `rounded-<이름>` class와 공개 계약 `--tide-rounded-<이름>`이 쓴다.
3
+ * - sm: 작은 표시 요소, 목록 안 항목
4
+ * - md: 조작 요소(모든 size)
5
+ * - lg: 담는 요소(Card, Alert, Popover, 목록, Toast, Accordion)
6
+ * - xl: Dialog류
7
+ * - full: 원·알약형
8
+ */
9
+ export declare const radius: {
10
+ readonly sm: "0.25rem";
11
+ readonly md: "0.375rem";
12
+ readonly lg: "0.5rem";
13
+ readonly xl: "0.75rem";
14
+ readonly full: "9999px";
15
+ };
16
+ /** radius 단계 이름 */
17
+ export type RadiusName = keyof typeof radius;
18
+ /** 그림자 레이어 하나. 길이는 px, `mix`는 `--tide-shadow-color`를 남기는 비율(%)이다. */
19
+ export interface ShadowLayer {
20
+ readonly x: number;
21
+ readonly y: number;
22
+ readonly blur: number;
23
+ readonly spread: number;
24
+ readonly mix: number;
25
+ }
26
+ /**
27
+ * Elevation 3단계. 각 단계는 [가까운 레이어, 먼 레이어]다. 값은 spec 표를 그대로 옮겼다.
28
+ * `shadow-<이름>` class와 공개 계약 `--tide-shadow-<이름>`이 쓴다. Theme에 따라 `--tide-shadow-color`만 바뀐다.
29
+ * - sm: Switch thumb
30
+ * - md: Popover, 목록, Tooltip, Toast
31
+ * - lg: Dialog류
32
+ */
33
+ export declare const shadow: {
34
+ readonly sm: readonly [{
35
+ readonly x: 0;
36
+ readonly y: 1;
37
+ readonly blur: 1;
38
+ readonly spread: 0;
39
+ readonly mix: 60;
40
+ }, {
41
+ readonly x: 0;
42
+ readonly y: 1;
43
+ readonly blur: 2;
44
+ readonly spread: 0;
45
+ readonly mix: 100;
46
+ }];
47
+ readonly md: readonly [{
48
+ readonly x: 0;
49
+ readonly y: 1;
50
+ readonly blur: 3;
51
+ readonly spread: 0;
52
+ readonly mix: 50;
53
+ }, {
54
+ readonly x: 0;
55
+ readonly y: 4;
56
+ readonly blur: 12;
57
+ readonly spread: -2;
58
+ readonly mix: 100;
59
+ }];
60
+ readonly lg: readonly [{
61
+ readonly x: 0;
62
+ readonly y: 2;
63
+ readonly blur: 6;
64
+ readonly spread: -1;
65
+ readonly mix: 50;
66
+ }, {
67
+ readonly x: 0;
68
+ readonly y: 12;
69
+ readonly blur: 24;
70
+ readonly spread: -6;
71
+ readonly mix: 100;
72
+ }];
73
+ };
74
+ /** Elevation 단계 이름 */
75
+ export type ShadowName = keyof typeof shadow;
76
+ /**
77
+ * 포커스 표시 ring의 두께와 offset. 공개 계약은 `--tide-focus-ring-width`, `--tide-focus-ring-offset`이다.
78
+ * `focus-ring` utility가 쓰고, `focus-field`의 투명 outline 두께도 같은 값을 쓴다.
79
+ */
80
+ export declare const focusRing: {
81
+ readonly width: "2px";
82
+ readonly offset: "2px";
83
+ };
84
+ /**
85
+ * Elevation 단계를 CSS `box-shadow` 값으로 만든다. 두 레이어 모두
86
+ * `color-mix(in srgb, var(--tide-shadow-color) N%, transparent)`로 색을 낮춘다(100%도 같은 형태로 쓴다).
87
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
88
+ */
89
+ export declare function shadowCss(name: ShadowName): string;
package/dist/shape.js ADDED
@@ -0,0 +1,93 @@
1
+ // src/shape.ts
2
+ /**
3
+ * radius 5단계. `rounded-<이름>` class와 공개 계약 `--tide-rounded-<이름>`이 쓴다.
4
+ * - sm: 작은 표시 요소, 목록 안 항목
5
+ * - md: 조작 요소(모든 size)
6
+ * - lg: 담는 요소(Card, Alert, Popover, 목록, Toast, Accordion)
7
+ * - xl: Dialog류
8
+ * - full: 원·알약형
9
+ */
10
+ const radius = {
11
+ sm: "0.25rem",
12
+ md: "0.375rem",
13
+ lg: "0.5rem",
14
+ xl: "0.75rem",
15
+ full: "9999px"
16
+ };
17
+ /**
18
+ * Elevation 3단계. 각 단계는 [가까운 레이어, 먼 레이어]다. 값은 spec 표를 그대로 옮겼다.
19
+ * `shadow-<이름>` class와 공개 계약 `--tide-shadow-<이름>`이 쓴다. Theme에 따라 `--tide-shadow-color`만 바뀐다.
20
+ * - sm: Switch thumb
21
+ * - md: Popover, 목록, Tooltip, Toast
22
+ * - lg: Dialog류
23
+ */
24
+ const shadow = {
25
+ sm: [{
26
+ x: 0,
27
+ y: 1,
28
+ blur: 1,
29
+ spread: 0,
30
+ mix: 60
31
+ }, {
32
+ x: 0,
33
+ y: 1,
34
+ blur: 2,
35
+ spread: 0,
36
+ mix: 100
37
+ }],
38
+ md: [{
39
+ x: 0,
40
+ y: 1,
41
+ blur: 3,
42
+ spread: 0,
43
+ mix: 50
44
+ }, {
45
+ x: 0,
46
+ y: 4,
47
+ blur: 12,
48
+ spread: -2,
49
+ mix: 100
50
+ }],
51
+ lg: [{
52
+ x: 0,
53
+ y: 2,
54
+ blur: 6,
55
+ spread: -1,
56
+ mix: 50
57
+ }, {
58
+ x: 0,
59
+ y: 12,
60
+ blur: 24,
61
+ spread: -6,
62
+ mix: 100
63
+ }]
64
+ };
65
+ /**
66
+ * 포커스 표시 ring의 두께와 offset. 공개 계약은 `--tide-focus-ring-width`, `--tide-focus-ring-offset`이다.
67
+ * `focus-ring` utility가 쓰고, `focus-field`의 투명 outline 두께도 같은 값을 쓴다.
68
+ */
69
+ const focusRing = {
70
+ width: "2px",
71
+ offset: "2px"
72
+ };
73
+ /** 길이 하나를 CSS로 쓴다. 0은 단위 없이 쓴다. */
74
+ const length = (px) => px === 0 ? "0" : `${px}px`;
75
+ /**
76
+ * Elevation 단계를 CSS `box-shadow` 값으로 만든다. 두 레이어 모두
77
+ * `color-mix(in srgb, var(--tide-shadow-color) N%, transparent)`로 색을 낮춘다(100%도 같은 형태로 쓴다).
78
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
79
+ */
80
+ function shadowCss(name) {
81
+ return shadow[name].map((layer) => {
82
+ const lengths = [
83
+ layer.x,
84
+ layer.y,
85
+ layer.blur,
86
+ ...layer.spread === 0 ? [] : [layer.spread]
87
+ ];
88
+ const color = `color-mix(in srgb, var(--tide-shadow-color) ${layer.mix}%, transparent)`;
89
+ return `${lengths.map(length).join(" ")} ${color}`;
90
+ }).join(", ");
91
+ }
92
+
93
+ export { focusRing, radius, shadow, shadowCss };
@@ -0,0 +1,17 @@
1
+ /**
2
+ * 쌓임 단계 5개. 뒤에서부터 앞 순서다. `z-<이름>` class와 공개 계약 `--tide-z-<이름>`이 쓴다.
3
+ * - sticky: 앱의 sticky 헤더·사이드바(v0 Tide Component는 쓰지 않음)
4
+ * - modal: Dialog·AlertDialog와 그 backdrop
5
+ * - popover: Popover, Menu, Select·Combobox 목록
6
+ * - toast: Toast 영역
7
+ * - tooltip: Tooltip
8
+ */
9
+ export declare const zIndex: {
10
+ readonly sticky: 100;
11
+ readonly modal: 200;
12
+ readonly popover: 300;
13
+ readonly toast: 400;
14
+ readonly tooltip: 500;
15
+ };
16
+ /** 쌓임 단계 이름 */
17
+ export type ZIndexName = keyof typeof zIndex;
@@ -0,0 +1,18 @@
1
+ // src/stacking.ts
2
+ /**
3
+ * 쌓임 단계 5개. 뒤에서부터 앞 순서다. `z-<이름>` class와 공개 계약 `--tide-z-<이름>`이 쓴다.
4
+ * - sticky: 앱의 sticky 헤더·사이드바(v0 Tide Component는 쓰지 않음)
5
+ * - modal: Dialog·AlertDialog와 그 backdrop
6
+ * - popover: Popover, Menu, Select·Combobox 목록
7
+ * - toast: Toast 영역
8
+ * - tooltip: Tooltip
9
+ */
10
+ const zIndex = {
11
+ sticky: 100,
12
+ modal: 200,
13
+ popover: 300,
14
+ toast: 400,
15
+ tooltip: 500
16
+ };
17
+
18
+ export { zIndex };
@@ -0,0 +1,5 @@
1
+ /* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
2
+ import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from "tailwind-merge";
3
+
4
+ /** `extendTailwindMerge`에 넘기는 Tide 설정 */
5
+ export declare const tailwindMergeConfig: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>;
@@ -0,0 +1,387 @@
1
+ /* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
2
+ export const tailwindMergeConfig = {
3
+ "override": {
4
+ "theme": {
5
+ "color": [
6
+ "inherit",
7
+ "current",
8
+ "transparent",
9
+ "white",
10
+ "black",
11
+ "blue-50",
12
+ "blue-100",
13
+ "blue-200",
14
+ "blue-300",
15
+ "blue-400",
16
+ "blue-500",
17
+ "blue-600",
18
+ "blue-700",
19
+ "blue-800",
20
+ "blue-900",
21
+ "blue-950",
22
+ "gray-50",
23
+ "gray-100",
24
+ "gray-200",
25
+ "gray-300",
26
+ "gray-400",
27
+ "gray-500",
28
+ "gray-600",
29
+ "gray-700",
30
+ "gray-800",
31
+ "gray-900",
32
+ "gray-950",
33
+ "green-50",
34
+ "green-100",
35
+ "green-200",
36
+ "green-300",
37
+ "green-400",
38
+ "green-500",
39
+ "green-600",
40
+ "green-700",
41
+ "green-800",
42
+ "green-900",
43
+ "green-950",
44
+ "amber-50",
45
+ "amber-100",
46
+ "amber-200",
47
+ "amber-300",
48
+ "amber-400",
49
+ "amber-500",
50
+ "amber-600",
51
+ "amber-700",
52
+ "amber-800",
53
+ "amber-900",
54
+ "amber-950",
55
+ "red-50",
56
+ "red-100",
57
+ "red-200",
58
+ "red-300",
59
+ "red-400",
60
+ "red-500",
61
+ "red-600",
62
+ "red-700",
63
+ "red-800",
64
+ "red-900",
65
+ "red-950",
66
+ "cyan-50",
67
+ "cyan-100",
68
+ "cyan-200",
69
+ "cyan-300",
70
+ "cyan-400",
71
+ "cyan-500",
72
+ "cyan-600",
73
+ "cyan-700",
74
+ "cyan-800",
75
+ "cyan-900",
76
+ "cyan-950"
77
+ ],
78
+ "text": [
79
+ "display-lg",
80
+ "display-md",
81
+ "heading-xl",
82
+ "heading-lg",
83
+ "heading-md",
84
+ "heading-sm",
85
+ "heading-xs",
86
+ "body-lg",
87
+ "body-md",
88
+ "body-sm",
89
+ "label-lg",
90
+ "label-md",
91
+ "label-sm",
92
+ "caption"
93
+ ],
94
+ "font-weight": [
95
+ "light",
96
+ "normal",
97
+ "medium",
98
+ "semibold",
99
+ "bold"
100
+ ],
101
+ "font": [
102
+ "sans",
103
+ "mono"
104
+ ],
105
+ "radius": [
106
+ "sm",
107
+ "md",
108
+ "lg",
109
+ "xl",
110
+ "full"
111
+ ],
112
+ "shadow": [
113
+ "sm",
114
+ "md",
115
+ "lg"
116
+ ],
117
+ "inset-shadow": [],
118
+ "drop-shadow": [],
119
+ "text-shadow": []
120
+ }
121
+ },
122
+ "extend": {
123
+ "conflictingClassGroups": {
124
+ "font-size": [
125
+ "font-weight"
126
+ ]
127
+ },
128
+ "classGroups": {
129
+ "bg-color": [
130
+ {
131
+ "bg": [
132
+ "canvas",
133
+ "surface",
134
+ "raised",
135
+ "disabled",
136
+ "overlay",
137
+ "neutral-solid",
138
+ "neutral-solid-hover",
139
+ "neutral-solid-active",
140
+ "neutral-subtle",
141
+ "neutral-subtle-hover",
142
+ "neutral-subtle-active",
143
+ "primary-solid",
144
+ "primary-solid-hover",
145
+ "primary-solid-active",
146
+ "primary-subtle",
147
+ "primary-subtle-hover",
148
+ "primary-subtle-active",
149
+ "success-solid",
150
+ "success-solid-hover",
151
+ "success-solid-active",
152
+ "success-subtle",
153
+ "success-subtle-hover",
154
+ "success-subtle-active",
155
+ "warning-solid",
156
+ "warning-solid-hover",
157
+ "warning-solid-active",
158
+ "warning-subtle",
159
+ "warning-subtle-hover",
160
+ "warning-subtle-active",
161
+ "danger-solid",
162
+ "danger-solid-hover",
163
+ "danger-solid-active",
164
+ "danger-subtle",
165
+ "danger-subtle-hover",
166
+ "danger-subtle-active",
167
+ "info-solid",
168
+ "info-solid-hover",
169
+ "info-solid-active",
170
+ "info-subtle",
171
+ "info-subtle-hover",
172
+ "info-subtle-active"
173
+ ]
174
+ }
175
+ ],
176
+ "text-color": [
177
+ {
178
+ "text": [
179
+ "default",
180
+ "muted",
181
+ "disabled",
182
+ "on-solid",
183
+ "primary",
184
+ "success",
185
+ "warning",
186
+ "danger",
187
+ "info"
188
+ ]
189
+ }
190
+ ],
191
+ "border-color": [
192
+ {
193
+ "border": [
194
+ "default",
195
+ "strong",
196
+ "raised",
197
+ "primary",
198
+ "success",
199
+ "warning",
200
+ "danger",
201
+ "info"
202
+ ]
203
+ }
204
+ ],
205
+ "border-color-x": [
206
+ {
207
+ "border-x": [
208
+ "default",
209
+ "strong",
210
+ "raised",
211
+ "primary",
212
+ "success",
213
+ "warning",
214
+ "danger",
215
+ "info"
216
+ ]
217
+ }
218
+ ],
219
+ "border-color-y": [
220
+ {
221
+ "border-y": [
222
+ "default",
223
+ "strong",
224
+ "raised",
225
+ "primary",
226
+ "success",
227
+ "warning",
228
+ "danger",
229
+ "info"
230
+ ]
231
+ }
232
+ ],
233
+ "border-color-s": [
234
+ {
235
+ "border-s": [
236
+ "default",
237
+ "strong",
238
+ "raised",
239
+ "primary",
240
+ "success",
241
+ "warning",
242
+ "danger",
243
+ "info"
244
+ ]
245
+ }
246
+ ],
247
+ "border-color-e": [
248
+ {
249
+ "border-e": [
250
+ "default",
251
+ "strong",
252
+ "raised",
253
+ "primary",
254
+ "success",
255
+ "warning",
256
+ "danger",
257
+ "info"
258
+ ]
259
+ }
260
+ ],
261
+ "border-color-bs": [
262
+ {
263
+ "border-bs": [
264
+ "default",
265
+ "strong",
266
+ "raised",
267
+ "primary",
268
+ "success",
269
+ "warning",
270
+ "danger",
271
+ "info"
272
+ ]
273
+ }
274
+ ],
275
+ "border-color-be": [
276
+ {
277
+ "border-be": [
278
+ "default",
279
+ "strong",
280
+ "raised",
281
+ "primary",
282
+ "success",
283
+ "warning",
284
+ "danger",
285
+ "info"
286
+ ]
287
+ }
288
+ ],
289
+ "border-color-t": [
290
+ {
291
+ "border-t": [
292
+ "default",
293
+ "strong",
294
+ "raised",
295
+ "primary",
296
+ "success",
297
+ "warning",
298
+ "danger",
299
+ "info"
300
+ ]
301
+ }
302
+ ],
303
+ "border-color-r": [
304
+ {
305
+ "border-r": [
306
+ "default",
307
+ "strong",
308
+ "raised",
309
+ "primary",
310
+ "success",
311
+ "warning",
312
+ "danger",
313
+ "info"
314
+ ]
315
+ }
316
+ ],
317
+ "border-color-b": [
318
+ {
319
+ "border-b": [
320
+ "default",
321
+ "strong",
322
+ "raised",
323
+ "primary",
324
+ "success",
325
+ "warning",
326
+ "danger",
327
+ "info"
328
+ ]
329
+ }
330
+ ],
331
+ "border-color-l": [
332
+ {
333
+ "border-l": [
334
+ "default",
335
+ "strong",
336
+ "raised",
337
+ "primary",
338
+ "success",
339
+ "warning",
340
+ "danger",
341
+ "info"
342
+ ]
343
+ }
344
+ ],
345
+ "divide-color": [
346
+ {
347
+ "divide": [
348
+ "default",
349
+ "strong",
350
+ "raised",
351
+ "primary",
352
+ "success",
353
+ "warning",
354
+ "danger",
355
+ "info"
356
+ ]
357
+ }
358
+ ],
359
+ "outline-color": [
360
+ {
361
+ "outline": [
362
+ "focus"
363
+ ]
364
+ }
365
+ ],
366
+ "duration": [
367
+ {
368
+ "duration": [
369
+ "fast",
370
+ "normal"
371
+ ]
372
+ }
373
+ ],
374
+ "z": [
375
+ {
376
+ "z": [
377
+ "sticky",
378
+ "modal",
379
+ "popover",
380
+ "toast",
381
+ "tooltip"
382
+ ]
383
+ }
384
+ ]
385
+ }
386
+ }
387
+ };