@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.
Files changed (25) hide show
  1. package/LICENSE +21 -0
  2. package/dist/color.d.ts +95 -0
  3. package/dist/color.js +96 -0
  4. package/dist/contrast.d.ts +25 -0
  5. package/dist/contrast.js +90 -0
  6. package/dist/index.d.ts +8 -0
  7. package/dist/index.js +9 -0
  8. package/dist/internal.d.ts +12 -0
  9. package/dist/internal.js +7 -0
  10. package/dist/motion.d.ts +20 -0
  11. package/dist/motion.js +17 -0
  12. package/dist/semantic.d.ts +328 -0
  13. package/dist/semantic.js +318 -0
  14. package/dist/shape.d.ts +89 -0
  15. package/dist/shape.js +93 -0
  16. package/dist/stacking.d.ts +17 -0
  17. package/dist/stacking.js +18 -0
  18. package/dist/tailwind-merge.d.ts +5 -0
  19. package/dist/tailwind-merge.js +387 -0
  20. package/dist/tailwind.css +234 -0
  21. package/dist/tokens.css +281 -0
  22. package/dist/typography.d.ts +132 -0
  23. package/dist/typography.js +145 -0
  24. package/package.json +53 -3
  25. package/README.md +0 -3
package/dist/tailwind.css ADDED
@@ -0,0 +1,234 @@
1
+ /* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
2
+
3
+ @import "./tokens.css";
4
+
5
+ @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
6
+
7
+ @theme inline {
8
+ --color-*: initial;
9
+ --text-*: initial;
10
+ --font-*: initial;
11
+ --font-weight-*: initial;
12
+ --radius-*: initial;
13
+ --shadow-*: initial;
14
+ --inset-shadow-*: initial;
15
+ --drop-shadow-*: initial;
16
+ --text-shadow-*: initial;
17
+ --color-white: var(--tide-color-white);
18
+ --color-black: var(--tide-color-black);
19
+ --color-blue-50: var(--tide-color-blue-50);
20
+ --color-blue-100: var(--tide-color-blue-100);
21
+ --color-blue-200: var(--tide-color-blue-200);
22
+ --color-blue-300: var(--tide-color-blue-300);
23
+ --color-blue-400: var(--tide-color-blue-400);
24
+ --color-blue-500: var(--tide-color-blue-500);
25
+ --color-blue-600: var(--tide-color-blue-600);
26
+ --color-blue-700: var(--tide-color-blue-700);
27
+ --color-blue-800: var(--tide-color-blue-800);
28
+ --color-blue-900: var(--tide-color-blue-900);
29
+ --color-blue-950: var(--tide-color-blue-950);
30
+ --color-gray-50: var(--tide-color-gray-50);
31
+ --color-gray-100: var(--tide-color-gray-100);
32
+ --color-gray-200: var(--tide-color-gray-200);
33
+ --color-gray-300: var(--tide-color-gray-300);
34
+ --color-gray-400: var(--tide-color-gray-400);
35
+ --color-gray-500: var(--tide-color-gray-500);
36
+ --color-gray-600: var(--tide-color-gray-600);
37
+ --color-gray-700: var(--tide-color-gray-700);
38
+ --color-gray-800: var(--tide-color-gray-800);
39
+ --color-gray-900: var(--tide-color-gray-900);
40
+ --color-gray-950: var(--tide-color-gray-950);
41
+ --color-green-50: var(--tide-color-green-50);
42
+ --color-green-100: var(--tide-color-green-100);
43
+ --color-green-200: var(--tide-color-green-200);
44
+ --color-green-300: var(--tide-color-green-300);
45
+ --color-green-400: var(--tide-color-green-400);
46
+ --color-green-500: var(--tide-color-green-500);
47
+ --color-green-600: var(--tide-color-green-600);
48
+ --color-green-700: var(--tide-color-green-700);
49
+ --color-green-800: var(--tide-color-green-800);
50
+ --color-green-900: var(--tide-color-green-900);
51
+ --color-green-950: var(--tide-color-green-950);
52
+ --color-amber-50: var(--tide-color-amber-50);
53
+ --color-amber-100: var(--tide-color-amber-100);
54
+ --color-amber-200: var(--tide-color-amber-200);
55
+ --color-amber-300: var(--tide-color-amber-300);
56
+ --color-amber-400: var(--tide-color-amber-400);
57
+ --color-amber-500: var(--tide-color-amber-500);
58
+ --color-amber-600: var(--tide-color-amber-600);
59
+ --color-amber-700: var(--tide-color-amber-700);
60
+ --color-amber-800: var(--tide-color-amber-800);
61
+ --color-amber-900: var(--tide-color-amber-900);
62
+ --color-amber-950: var(--tide-color-amber-950);
63
+ --color-red-50: var(--tide-color-red-50);
64
+ --color-red-100: var(--tide-color-red-100);
65
+ --color-red-200: var(--tide-color-red-200);
66
+ --color-red-300: var(--tide-color-red-300);
67
+ --color-red-400: var(--tide-color-red-400);
68
+ --color-red-500: var(--tide-color-red-500);
69
+ --color-red-600: var(--tide-color-red-600);
70
+ --color-red-700: var(--tide-color-red-700);
71
+ --color-red-800: var(--tide-color-red-800);
72
+ --color-red-900: var(--tide-color-red-900);
73
+ --color-red-950: var(--tide-color-red-950);
74
+ --color-cyan-50: var(--tide-color-cyan-50);
75
+ --color-cyan-100: var(--tide-color-cyan-100);
76
+ --color-cyan-200: var(--tide-color-cyan-200);
77
+ --color-cyan-300: var(--tide-color-cyan-300);
78
+ --color-cyan-400: var(--tide-color-cyan-400);
79
+ --color-cyan-500: var(--tide-color-cyan-500);
80
+ --color-cyan-600: var(--tide-color-cyan-600);
81
+ --color-cyan-700: var(--tide-color-cyan-700);
82
+ --color-cyan-800: var(--tide-color-cyan-800);
83
+ --color-cyan-900: var(--tide-color-cyan-900);
84
+ --color-cyan-950: var(--tide-color-cyan-950);
85
+ --background-color-canvas: var(--tide-bg-canvas);
86
+ --background-color-surface: var(--tide-bg-surface);
87
+ --background-color-raised: var(--tide-bg-raised);
88
+ --background-color-disabled: var(--tide-bg-disabled);
89
+ --background-color-overlay: var(--tide-bg-overlay);
90
+ --background-color-neutral-solid: var(--tide-bg-neutral-solid);
91
+ --background-color-neutral-solid-hover: var(--tide-bg-neutral-solid-hover);
92
+ --background-color-neutral-solid-active: var(--tide-bg-neutral-solid-active);
93
+ --background-color-neutral-subtle: var(--tide-bg-neutral-subtle);
94
+ --background-color-neutral-subtle-hover: var(--tide-bg-neutral-subtle-hover);
95
+ --background-color-neutral-subtle-active: var(--tide-bg-neutral-subtle-active);
96
+ --background-color-primary-solid: var(--tide-bg-primary-solid);
97
+ --background-color-primary-solid-hover: var(--tide-bg-primary-solid-hover);
98
+ --background-color-primary-solid-active: var(--tide-bg-primary-solid-active);
99
+ --background-color-primary-subtle: var(--tide-bg-primary-subtle);
100
+ --background-color-primary-subtle-hover: var(--tide-bg-primary-subtle-hover);
101
+ --background-color-primary-subtle-active: var(--tide-bg-primary-subtle-active);
102
+ --background-color-success-solid: var(--tide-bg-success-solid);
103
+ --background-color-success-solid-hover: var(--tide-bg-success-solid-hover);
104
+ --background-color-success-solid-active: var(--tide-bg-success-solid-active);
105
+ --background-color-success-subtle: var(--tide-bg-success-subtle);
106
+ --background-color-success-subtle-hover: var(--tide-bg-success-subtle-hover);
107
+ --background-color-success-subtle-active: var(--tide-bg-success-subtle-active);
108
+ --background-color-warning-solid: var(--tide-bg-warning-solid);
109
+ --background-color-warning-solid-hover: var(--tide-bg-warning-solid-hover);
110
+ --background-color-warning-solid-active: var(--tide-bg-warning-solid-active);
111
+ --background-color-warning-subtle: var(--tide-bg-warning-subtle);
112
+ --background-color-warning-subtle-hover: var(--tide-bg-warning-subtle-hover);
113
+ --background-color-warning-subtle-active: var(--tide-bg-warning-subtle-active);
114
+ --background-color-danger-solid: var(--tide-bg-danger-solid);
115
+ --background-color-danger-solid-hover: var(--tide-bg-danger-solid-hover);
116
+ --background-color-danger-solid-active: var(--tide-bg-danger-solid-active);
117
+ --background-color-danger-subtle: var(--tide-bg-danger-subtle);
118
+ --background-color-danger-subtle-hover: var(--tide-bg-danger-subtle-hover);
119
+ --background-color-danger-subtle-active: var(--tide-bg-danger-subtle-active);
120
+ --background-color-info-solid: var(--tide-bg-info-solid);
121
+ --background-color-info-solid-hover: var(--tide-bg-info-solid-hover);
122
+ --background-color-info-solid-active: var(--tide-bg-info-solid-active);
123
+ --background-color-info-subtle: var(--tide-bg-info-subtle);
124
+ --background-color-info-subtle-hover: var(--tide-bg-info-subtle-hover);
125
+ --background-color-info-subtle-active: var(--tide-bg-info-subtle-active);
126
+ --text-color-default: var(--tide-text-default);
127
+ --text-color-muted: var(--tide-text-muted);
128
+ --text-color-disabled: var(--tide-text-disabled);
129
+ --text-color-on-solid: var(--tide-text-on-solid);
130
+ --text-color-primary: var(--tide-text-primary);
131
+ --text-color-success: var(--tide-text-success);
132
+ --text-color-warning: var(--tide-text-warning);
133
+ --text-color-danger: var(--tide-text-danger);
134
+ --text-color-info: var(--tide-text-info);
135
+ --border-color-default: var(--tide-border-default);
136
+ --border-color-strong: var(--tide-border-strong);
137
+ --border-color-raised: var(--tide-border-raised);
138
+ --border-color-primary: var(--tide-border-primary);
139
+ --border-color-success: var(--tide-border-success);
140
+ --border-color-warning: var(--tide-border-warning);
141
+ --border-color-danger: var(--tide-border-danger);
142
+ --border-color-info: var(--tide-border-info);
143
+ --outline-color-focus: var(--tide-outline-focus);
144
+ --font-sans: var(--tide-font-sans);
145
+ --font-mono: var(--tide-font-mono);
146
+ --font-weight-light: var(--tide-font-light);
147
+ --font-weight-normal: var(--tide-font-normal);
148
+ --font-weight-medium: var(--tide-font-medium);
149
+ --font-weight-semibold: var(--tide-font-semibold);
150
+ --font-weight-bold: var(--tide-font-bold);
151
+ --text-display-lg: var(--tide-text-display-lg);
152
+ --text-display-lg--line-height: var(--tide-text-display-lg--line-height);
153
+ --text-display-lg--font-weight: var(--tide-text-display-lg--font-weight);
154
+ --text-display-md: var(--tide-text-display-md);
155
+ --text-display-md--line-height: var(--tide-text-display-md--line-height);
156
+ --text-display-md--font-weight: var(--tide-text-display-md--font-weight);
157
+ --text-heading-xl: var(--tide-text-heading-xl);
158
+ --text-heading-xl--line-height: var(--tide-text-heading-xl--line-height);
159
+ --text-heading-xl--font-weight: var(--tide-text-heading-xl--font-weight);
160
+ --text-heading-lg: var(--tide-text-heading-lg);
161
+ --text-heading-lg--line-height: var(--tide-text-heading-lg--line-height);
162
+ --text-heading-lg--font-weight: var(--tide-text-heading-lg--font-weight);
163
+ --text-heading-md: var(--tide-text-heading-md);
164
+ --text-heading-md--line-height: var(--tide-text-heading-md--line-height);
165
+ --text-heading-md--font-weight: var(--tide-text-heading-md--font-weight);
166
+ --text-heading-sm: var(--tide-text-heading-sm);
167
+ --text-heading-sm--line-height: var(--tide-text-heading-sm--line-height);
168
+ --text-heading-sm--font-weight: var(--tide-text-heading-sm--font-weight);
169
+ --text-heading-xs: var(--tide-text-heading-xs);
170
+ --text-heading-xs--line-height: var(--tide-text-heading-xs--line-height);
171
+ --text-heading-xs--font-weight: var(--tide-text-heading-xs--font-weight);
172
+ --text-body-lg: var(--tide-text-body-lg);
173
+ --text-body-lg--line-height: var(--tide-text-body-lg--line-height);
174
+ --text-body-lg--font-weight: var(--tide-text-body-lg--font-weight);
175
+ --text-body-md: var(--tide-text-body-md);
176
+ --text-body-md--line-height: var(--tide-text-body-md--line-height);
177
+ --text-body-md--font-weight: var(--tide-text-body-md--font-weight);
178
+ --text-body-sm: var(--tide-text-body-sm);
179
+ --text-body-sm--line-height: var(--tide-text-body-sm--line-height);
180
+ --text-body-sm--font-weight: var(--tide-text-body-sm--font-weight);
181
+ --text-label-lg: var(--tide-text-label-lg);
182
+ --text-label-lg--line-height: var(--tide-text-label-lg--line-height);
183
+ --text-label-lg--font-weight: var(--tide-text-label-lg--font-weight);
184
+ --text-label-md: var(--tide-text-label-md);
185
+ --text-label-md--line-height: var(--tide-text-label-md--line-height);
186
+ --text-label-md--font-weight: var(--tide-text-label-md--font-weight);
187
+ --text-label-sm: var(--tide-text-label-sm);
188
+ --text-label-sm--line-height: var(--tide-text-label-sm--line-height);
189
+ --text-label-sm--font-weight: var(--tide-text-label-sm--font-weight);
190
+ --text-caption: var(--tide-text-caption);
191
+ --text-caption--line-height: var(--tide-text-caption--line-height);
192
+ --text-caption--font-weight: var(--tide-text-caption--font-weight);
193
+ --radius-sm: var(--tide-rounded-sm);
194
+ --radius-md: var(--tide-rounded-md);
195
+ --radius-lg: var(--tide-rounded-lg);
196
+ --radius-xl: var(--tide-rounded-xl);
197
+ --radius-full: var(--tide-rounded-full);
198
+ --shadow-sm: var(--tide-shadow-sm);
199
+ --shadow-md: var(--tide-shadow-md);
200
+ --shadow-lg: var(--tide-shadow-lg);
201
+ --transition-duration-fast: var(--tide-duration-fast);
202
+ --transition-duration-normal: var(--tide-duration-normal);
203
+ --ease-out: var(--tide-ease-out);
204
+ --default-transition-duration: var(--tide-duration-fast);
205
+ --default-transition-timing-function: var(--tide-ease-out);
206
+ --z-index-sticky: var(--tide-z-sticky);
207
+ --z-index-modal: var(--tide-z-modal);
208
+ --z-index-popover: var(--tide-z-popover);
209
+ --z-index-toast: var(--tide-z-toast);
210
+ --z-index-tooltip: var(--tide-z-tooltip);
211
+ }
212
+
213
+ @utility focus-ring {
214
+ outline: var(--tide-focus-ring-width) solid var(--tide-outline-focus);
215
+ outline-offset: var(--tide-focus-ring-offset);
216
+ }
217
+
218
+ @utility focus-field {
219
+ border-color: var(--tide-outline-focus);
220
+ box-shadow: inset 0 0 0 1px var(--tide-outline-focus);
221
+ outline: var(--tide-focus-ring-width) solid transparent;
222
+ &[aria-invalid="true"] {
223
+ border-color: var(--tide-outline-focus);
224
+ box-shadow: inset 0 0 0 1px var(--tide-outline-focus);
225
+ }
226
+ }
227
+
228
+ @layer base {
229
+ html,
230
+ :host {
231
+ word-break: keep-all;
232
+ overflow-wrap: break-word;
233
+ }
234
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,281 @@
1
+ /* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
2
+
3
+ :root {
4
+ --tide-color-white: #ffffff;
5
+ --tide-color-black: #000000;
6
+ --tide-color-blue-50: #f0f6fe;
7
+ --tide-color-blue-100: #ddeafc;
8
+ --tide-color-blue-200: #c3dafb;
9
+ --tide-color-blue-300: #9bc3fd;
10
+ --tide-color-blue-400: #65a1f9;
11
+ --tide-color-blue-500: #3183f5;
12
+ --tide-color-blue-600: #006ae2;
13
+ --tide-color-blue-700: #005ac2;
14
+ --tide-color-blue-800: #0049a1;
15
+ --tide-color-blue-900: #093f85;
16
+ --tide-color-blue-950: #0d2850;
17
+ --tide-color-gray-50: #f5f5f6;
18
+ --tide-color-gray-100: #e8e8ea;
19
+ --tide-color-gray-200: #d7d8da;
20
+ --tide-color-gray-300: #bec1c4;
21
+ --tide-color-gray-400: #9da1a6;
22
+ --tide-color-gray-500: #82878e;
23
+ --tide-color-gray-600: #6b7179;
24
+ --tide-color-gray-700: #5b6068;
25
+ --tide-color-gray-800: #4a4e54;
26
+ --tide-color-gray-900: #3f4247;
27
+ --tide-color-gray-950: #28292c;
28
+ --tide-color-green-50: #f0f7f1;
29
+ --tide-color-green-100: #deeee0;
30
+ --tide-color-green-200: #c4e1c9;
31
+ --tide-color-green-300: #9bd0a5;
32
+ --tide-color-green-400: #60b775;
33
+ --tide-color-green-500: #15a14c;
34
+ --tide-color-green-600: #00873d;
35
+ --tide-color-green-700: #007433;
36
+ --tide-color-green-800: #005f28;
37
+ --tide-color-green-900: #005121;
38
+ --tide-color-green-950: #073315;
39
+ --tide-color-amber-50: #faf4ed;
40
+ --tide-color-amber-100: #f3e7d7;
41
+ --tide-color-amber-200: #ead5b8;
42
+ --tide-color-amber-300: #e0ba85;
43
+ --tide-color-amber-400: #ce9437;
44
+ --tide-color-amber-500: #b47900;
45
+ --tide-color-amber-600: #976500;
46
+ --tide-color-amber-700: #815600;
47
+ --tide-color-amber-800: #6a4600;
48
+ --tide-color-amber-900: #5b3b00;
49
+ --tide-color-amber-950: #3a2400;
50
+ --tide-color-red-50: #fff2f0;
51
+ --tide-color-red-100: #fde1dd;
52
+ --tide-color-red-200: #fccac4;
53
+ --tide-color-red-300: #fca79d;
54
+ --tide-color-red-400: #f47368;
55
+ --tide-color-red-500: #ea3e39;
56
+ --tide-color-red-600: #d30016;
57
+ --tide-color-red-700: #b60011;
58
+ --tide-color-red-800: #96000c;
59
+ --tide-color-red-900: #7d0e10;
60
+ --tide-color-red-950: #4c120f;
61
+ --tide-color-cyan-50: #eff7fa;
62
+ --tide-color-cyan-100: #dcecf2;
63
+ --tide-color-cyan-200: #c0deea;
64
+ --tide-color-cyan-300: #93cae0;
65
+ --tide-color-cyan-400: #51aed0;
66
+ --tide-color-cyan-500: #0094bc;
67
+ --tide-color-cyan-600: #007c9e;
68
+ --tide-color-cyan-700: #006a87;
69
+ --tide-color-cyan-800: #00576f;
70
+ --tide-color-cyan-900: #004a5f;
71
+ --tide-color-cyan-950: #002f3d;
72
+ --tide-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
73
+ --tide-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
74
+ --tide-font-size-12: 0.75rem;
75
+ --tide-font-size-14: 0.875rem;
76
+ --tide-font-size-16: 1rem;
77
+ --tide-font-size-18: 1.125rem;
78
+ --tide-font-size-20: 1.25rem;
79
+ --tide-font-size-24: 1.5rem;
80
+ --tide-font-size-32: 2rem;
81
+ --tide-font-size-40: 2.5rem;
82
+ --tide-font-size-48: 3rem;
83
+ --tide-font-size-56: 3.5rem;
84
+ --tide-font-light: 300;
85
+ --tide-font-normal: 400;
86
+ --tide-font-medium: 500;
87
+ --tide-font-semibold: 600;
88
+ --tide-font-bold: 700;
89
+ --tide-text-display-lg: var(--tide-font-size-56);
90
+ --tide-text-display-lg--line-height: 4rem;
91
+ --tide-text-display-lg--font-weight: var(--tide-font-bold);
92
+ --tide-text-display-md: var(--tide-font-size-48);
93
+ --tide-text-display-md--line-height: 3.5rem;
94
+ --tide-text-display-md--font-weight: var(--tide-font-bold);
95
+ --tide-text-heading-xl: var(--tide-font-size-40);
96
+ --tide-text-heading-xl--line-height: 3rem;
97
+ --tide-text-heading-xl--font-weight: var(--tide-font-bold);
98
+ --tide-text-heading-lg: var(--tide-font-size-32);
99
+ --tide-text-heading-lg--line-height: 2.5rem;
100
+ --tide-text-heading-lg--font-weight: var(--tide-font-bold);
101
+ --tide-text-heading-md: var(--tide-font-size-24);
102
+ --tide-text-heading-md--line-height: 2rem;
103
+ --tide-text-heading-md--font-weight: var(--tide-font-bold);
104
+ --tide-text-heading-sm: var(--tide-font-size-20);
105
+ --tide-text-heading-sm--line-height: 1.75rem;
106
+ --tide-text-heading-sm--font-weight: var(--tide-font-semibold);
107
+ --tide-text-heading-xs: var(--tide-font-size-18);
108
+ --tide-text-heading-xs--line-height: 1.75rem;
109
+ --tide-text-heading-xs--font-weight: var(--tide-font-semibold);
110
+ --tide-text-body-lg: var(--tide-font-size-18);
111
+ --tide-text-body-lg--line-height: 1.75rem;
112
+ --tide-text-body-lg--font-weight: var(--tide-font-normal);
113
+ --tide-text-body-md: var(--tide-font-size-16);
114
+ --tide-text-body-md--line-height: 1.5rem;
115
+ --tide-text-body-md--font-weight: var(--tide-font-normal);
116
+ --tide-text-body-sm: var(--tide-font-size-14);
117
+ --tide-text-body-sm--line-height: 1.25rem;
118
+ --tide-text-body-sm--font-weight: var(--tide-font-normal);
119
+ --tide-text-label-lg: var(--tide-font-size-16);
120
+ --tide-text-label-lg--line-height: 1.25rem;
121
+ --tide-text-label-lg--font-weight: var(--tide-font-medium);
122
+ --tide-text-label-md: var(--tide-font-size-14);
123
+ --tide-text-label-md--line-height: 1.25rem;
124
+ --tide-text-label-md--font-weight: var(--tide-font-medium);
125
+ --tide-text-label-sm: var(--tide-font-size-12);
126
+ --tide-text-label-sm--line-height: 1rem;
127
+ --tide-text-label-sm--font-weight: var(--tide-font-medium);
128
+ --tide-text-caption: var(--tide-font-size-12);
129
+ --tide-text-caption--line-height: 1rem;
130
+ --tide-text-caption--font-weight: var(--tide-font-normal);
131
+ --tide-rounded-sm: 0.25rem;
132
+ --tide-rounded-md: 0.375rem;
133
+ --tide-rounded-lg: 0.5rem;
134
+ --tide-rounded-xl: 0.75rem;
135
+ --tide-rounded-full: 9999px;
136
+ --tide-focus-ring-width: 2px;
137
+ --tide-focus-ring-offset: 2px;
138
+ --tide-duration-fast: 150ms;
139
+ --tide-duration-normal: 300ms;
140
+ --tide-ease-out: cubic-bezier(0, 0, 0.2, 1);
141
+ --tide-z-sticky: 100;
142
+ --tide-z-modal: 200;
143
+ --tide-z-popover: 300;
144
+ --tide-z-toast: 400;
145
+ --tide-z-tooltip: 500;
146
+ }
147
+
148
+ :root,
149
+ [data-theme="light"] {
150
+ color-scheme: light;
151
+ --tide-bg-canvas: var(--tide-color-white);
152
+ --tide-bg-surface: var(--tide-color-white);
153
+ --tide-bg-raised: var(--tide-color-white);
154
+ --tide-bg-disabled: var(--tide-color-gray-100);
155
+ --tide-bg-overlay: #28292c80;
156
+ --tide-bg-neutral-solid: var(--tide-color-gray-600);
157
+ --tide-bg-neutral-solid-hover: var(--tide-color-gray-700);
158
+ --tide-bg-neutral-solid-active: var(--tide-color-gray-800);
159
+ --tide-bg-neutral-subtle: var(--tide-color-gray-50);
160
+ --tide-bg-neutral-subtle-hover: var(--tide-color-gray-100);
161
+ --tide-bg-neutral-subtle-active: var(--tide-color-gray-200);
162
+ --tide-bg-primary-solid: var(--tide-color-blue-600);
163
+ --tide-bg-primary-solid-hover: var(--tide-color-blue-700);
164
+ --tide-bg-primary-solid-active: var(--tide-color-blue-800);
165
+ --tide-bg-primary-subtle: var(--tide-color-blue-50);
166
+ --tide-bg-primary-subtle-hover: var(--tide-color-blue-100);
167
+ --tide-bg-primary-subtle-active: var(--tide-color-blue-200);
168
+ --tide-bg-success-solid: var(--tide-color-green-600);
169
+ --tide-bg-success-solid-hover: var(--tide-color-green-700);
170
+ --tide-bg-success-solid-active: var(--tide-color-green-800);
171
+ --tide-bg-success-subtle: var(--tide-color-green-50);
172
+ --tide-bg-success-subtle-hover: var(--tide-color-green-100);
173
+ --tide-bg-success-subtle-active: var(--tide-color-green-200);
174
+ --tide-bg-warning-solid: var(--tide-color-amber-600);
175
+ --tide-bg-warning-solid-hover: var(--tide-color-amber-700);
176
+ --tide-bg-warning-solid-active: var(--tide-color-amber-800);
177
+ --tide-bg-warning-subtle: var(--tide-color-amber-50);
178
+ --tide-bg-warning-subtle-hover: var(--tide-color-amber-100);
179
+ --tide-bg-warning-subtle-active: var(--tide-color-amber-200);
180
+ --tide-bg-danger-solid: var(--tide-color-red-600);
181
+ --tide-bg-danger-solid-hover: var(--tide-color-red-700);
182
+ --tide-bg-danger-solid-active: var(--tide-color-red-800);
183
+ --tide-bg-danger-subtle: var(--tide-color-red-50);
184
+ --tide-bg-danger-subtle-hover: var(--tide-color-red-100);
185
+ --tide-bg-danger-subtle-active: var(--tide-color-red-200);
186
+ --tide-bg-info-solid: var(--tide-color-cyan-600);
187
+ --tide-bg-info-solid-hover: var(--tide-color-cyan-700);
188
+ --tide-bg-info-solid-active: var(--tide-color-cyan-800);
189
+ --tide-bg-info-subtle: var(--tide-color-cyan-50);
190
+ --tide-bg-info-subtle-hover: var(--tide-color-cyan-100);
191
+ --tide-bg-info-subtle-active: var(--tide-color-cyan-200);
192
+ --tide-text-default: var(--tide-color-gray-900);
193
+ --tide-text-muted: var(--tide-color-gray-600);
194
+ --tide-text-disabled: var(--tide-color-gray-400);
195
+ --tide-text-on-solid: var(--tide-color-white);
196
+ --tide-text-primary: var(--tide-color-blue-800);
197
+ --tide-text-success: var(--tide-color-green-800);
198
+ --tide-text-warning: var(--tide-color-amber-800);
199
+ --tide-text-danger: var(--tide-color-red-800);
200
+ --tide-text-info: var(--tide-color-cyan-800);
201
+ --tide-border-default: var(--tide-color-gray-200);
202
+ --tide-border-strong: var(--tide-color-gray-500);
203
+ --tide-border-raised: transparent;
204
+ --tide-border-primary: var(--tide-color-blue-600);
205
+ --tide-border-success: var(--tide-color-green-600);
206
+ --tide-border-warning: var(--tide-color-amber-600);
207
+ --tide-border-danger: var(--tide-color-red-600);
208
+ --tide-border-info: var(--tide-color-cyan-600);
209
+ --tide-outline-focus: var(--tide-color-blue-600);
210
+ --tide-shadow-color: #28292c14;
211
+ --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
212
+ --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
213
+ --tide-shadow-lg: 0 2px 6px -1px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
214
+ }
215
+
216
+ [data-theme="dark"] {
217
+ color-scheme: dark;
218
+ --tide-bg-canvas: var(--tide-color-gray-950);
219
+ --tide-bg-surface: var(--tide-color-gray-950);
220
+ --tide-bg-raised: var(--tide-color-gray-900);
221
+ --tide-bg-disabled: var(--tide-color-gray-900);
222
+ --tide-bg-overlay: #28292cb3;
223
+ --tide-bg-neutral-solid: var(--tide-color-gray-600);
224
+ --tide-bg-neutral-solid-hover: var(--tide-color-gray-700);
225
+ --tide-bg-neutral-solid-active: var(--tide-color-gray-800);
226
+ --tide-bg-neutral-subtle: var(--tide-color-gray-900);
227
+ --tide-bg-neutral-subtle-hover: var(--tide-color-gray-800);
228
+ --tide-bg-neutral-subtle-active: var(--tide-color-gray-700);
229
+ --tide-bg-primary-solid: var(--tide-color-blue-600);
230
+ --tide-bg-primary-solid-hover: var(--tide-color-blue-700);
231
+ --tide-bg-primary-solid-active: var(--tide-color-blue-800);
232
+ --tide-bg-primary-subtle: var(--tide-color-blue-950);
233
+ --tide-bg-primary-subtle-hover: var(--tide-color-blue-900);
234
+ --tide-bg-primary-subtle-active: var(--tide-color-blue-800);
235
+ --tide-bg-success-solid: var(--tide-color-green-600);
236
+ --tide-bg-success-solid-hover: var(--tide-color-green-700);
237
+ --tide-bg-success-solid-active: var(--tide-color-green-800);
238
+ --tide-bg-success-subtle: var(--tide-color-green-950);
239
+ --tide-bg-success-subtle-hover: var(--tide-color-green-900);
240
+ --tide-bg-success-subtle-active: var(--tide-color-green-800);
241
+ --tide-bg-warning-solid: var(--tide-color-amber-600);
242
+ --tide-bg-warning-solid-hover: var(--tide-color-amber-700);
243
+ --tide-bg-warning-solid-active: var(--tide-color-amber-800);
244
+ --tide-bg-warning-subtle: var(--tide-color-amber-950);
245
+ --tide-bg-warning-subtle-hover: var(--tide-color-amber-900);
246
+ --tide-bg-warning-subtle-active: var(--tide-color-amber-800);
247
+ --tide-bg-danger-solid: var(--tide-color-red-600);
248
+ --tide-bg-danger-solid-hover: var(--tide-color-red-700);
249
+ --tide-bg-danger-solid-active: var(--tide-color-red-800);
250
+ --tide-bg-danger-subtle: var(--tide-color-red-950);
251
+ --tide-bg-danger-subtle-hover: var(--tide-color-red-900);
252
+ --tide-bg-danger-subtle-active: var(--tide-color-red-800);
253
+ --tide-bg-info-solid: var(--tide-color-cyan-600);
254
+ --tide-bg-info-solid-hover: var(--tide-color-cyan-700);
255
+ --tide-bg-info-solid-active: var(--tide-color-cyan-800);
256
+ --tide-bg-info-subtle: var(--tide-color-cyan-950);
257
+ --tide-bg-info-subtle-hover: var(--tide-color-cyan-900);
258
+ --tide-bg-info-subtle-active: var(--tide-color-cyan-800);
259
+ --tide-text-default: var(--tide-color-gray-50);
260
+ --tide-text-muted: var(--tide-color-gray-300);
261
+ --tide-text-disabled: var(--tide-color-gray-600);
262
+ --tide-text-on-solid: var(--tide-color-white);
263
+ --tide-text-primary: var(--tide-color-blue-200);
264
+ --tide-text-success: var(--tide-color-green-200);
265
+ --tide-text-warning: var(--tide-color-amber-200);
266
+ --tide-text-danger: var(--tide-color-red-200);
267
+ --tide-text-info: var(--tide-color-cyan-200);
268
+ --tide-border-default: var(--tide-color-gray-800);
269
+ --tide-border-strong: var(--tide-color-gray-400);
270
+ --tide-border-raised: var(--tide-color-gray-800);
271
+ --tide-border-primary: var(--tide-color-blue-400);
272
+ --tide-border-success: var(--tide-color-green-400);
273
+ --tide-border-warning: var(--tide-color-amber-400);
274
+ --tide-border-danger: var(--tide-color-red-400);
275
+ --tide-border-info: var(--tide-color-cyan-400);
276
+ --tide-outline-focus: var(--tide-color-blue-400);
277
+ --tide-shadow-color: #0000004d;
278
+ --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
279
+ --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
280
+ --tide-shadow-lg: 0 2px 6px -1px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
281
+ }
package/dist/typography.d.ts ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * font-family 스택. 공개 계약은 `--tide-font-<이름>`이고 `font-<이름>` class와 기본 글꼴이 쓴다.
3
+ * - sans: Pretendard README의 「어디서든 동일한 환경」 스택. 가변판 이름(`Pretendard Variable`)을 맨 앞에 둔다.
4
+ * - mono: 시스템 고정폭 글꼴만 쓴다(tailwindcss 4.3.5 기본 `--font-mono`와 같은 순서).
5
+ */
6
+ export declare const fontFamily: {
7
+ readonly sans: readonly ["Pretendard Variable", "Pretendard", "-apple-system", "BlinkMacSystemFont", "system-ui", "Roboto", "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "sans-serif"];
8
+ readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
9
+ };
10
+ /** font-family Token 이름 */
11
+ export type FontFamilyName = keyof typeof fontFamily;
12
+ /**
13
+ * Primitive 크기. 키는 px, 값은 rem이다. class로 노출하지 않고 공개 계약 `--tide-font-size-<px>`만 둔다.
14
+ * 텍스트 스타일이 이 값을 참조한다.
15
+ */
16
+ export declare const fontSize: {
17
+ readonly 12: "0.75rem";
18
+ readonly 14: "0.875rem";
19
+ readonly 16: "1rem";
20
+ readonly 18: "1.125rem";
21
+ readonly 20: "1.25rem";
22
+ readonly 24: "1.5rem";
23
+ readonly 32: "2rem";
24
+ readonly 40: "2.5rem";
25
+ readonly 48: "3rem";
26
+ readonly 56: "3.5rem";
27
+ };
28
+ /** Primitive 크기 단계(px) */
29
+ export type FontSizeStep = keyof typeof fontSize;
30
+ /** 굵기 Token. Tailwind 기본 굵기는 지우고 이 다섯 개만 `font-<이름>` class로 둔다. */
31
+ export declare const fontWeight: {
32
+ readonly light: 300;
33
+ readonly normal: 400;
34
+ readonly medium: 500;
35
+ readonly semibold: 600;
36
+ readonly bold: 700;
37
+ };
38
+ /** 굵기 Token 이름 */
39
+ export type FontWeightName = keyof typeof fontWeight;
40
+ /** 텍스트 스타일 하나의 값 */
41
+ export interface TextStyleValue {
42
+ /** Primitive 크기 단계(px) */
43
+ readonly fontSize: FontSizeStep;
44
+ /** 행간(rem). 4px 격자를 따른다. */
45
+ readonly lineHeight: string;
46
+ /** 굵기 Token 이름. 텍스트 스타일은 light를 쓰지 않는다. */
47
+ readonly fontWeight: Exclude<FontWeightName, "light">;
48
+ }
49
+ /**
50
+ * 텍스트 스타일 14개. `text-<이름>` class 하나가 크기, 행간, 굵기를 함께 정한다.
51
+ * 공개 계약은 `--tide-text-<이름>`과 그 `--line-height`, `--font-weight` 하위 변수다.
52
+ * 값은 spec 표를 그대로 옮겼다(크기/행간 px → rem).
53
+ */
54
+ export declare const textStyle: {
55
+ readonly "display-lg": {
56
+ readonly fontSize: 56;
57
+ readonly lineHeight: "4rem";
58
+ readonly fontWeight: "bold";
59
+ };
60
+ readonly "display-md": {
61
+ readonly fontSize: 48;
62
+ readonly lineHeight: "3.5rem";
63
+ readonly fontWeight: "bold";
64
+ };
65
+ readonly "heading-xl": {
66
+ readonly fontSize: 40;
67
+ readonly lineHeight: "3rem";
68
+ readonly fontWeight: "bold";
69
+ };
70
+ readonly "heading-lg": {
71
+ readonly fontSize: 32;
72
+ readonly lineHeight: "2.5rem";
73
+ readonly fontWeight: "bold";
74
+ };
75
+ readonly "heading-md": {
76
+ readonly fontSize: 24;
77
+ readonly lineHeight: "2rem";
78
+ readonly fontWeight: "bold";
79
+ };
80
+ readonly "heading-sm": {
81
+ readonly fontSize: 20;
82
+ readonly lineHeight: "1.75rem";
83
+ readonly fontWeight: "semibold";
84
+ };
85
+ readonly "heading-xs": {
86
+ readonly fontSize: 18;
87
+ readonly lineHeight: "1.75rem";
88
+ readonly fontWeight: "semibold";
89
+ };
90
+ readonly "body-lg": {
91
+ readonly fontSize: 18;
92
+ readonly lineHeight: "1.75rem";
93
+ readonly fontWeight: "normal";
94
+ };
95
+ readonly "body-md": {
96
+ readonly fontSize: 16;
97
+ readonly lineHeight: "1.5rem";
98
+ readonly fontWeight: "normal";
99
+ };
100
+ readonly "body-sm": {
101
+ readonly fontSize: 14;
102
+ readonly lineHeight: "1.25rem";
103
+ readonly fontWeight: "normal";
104
+ };
105
+ readonly "label-lg": {
106
+ readonly fontSize: 16;
107
+ readonly lineHeight: "1.25rem";
108
+ readonly fontWeight: "medium";
109
+ };
110
+ readonly "label-md": {
111
+ readonly fontSize: 14;
112
+ readonly lineHeight: "1.25rem";
113
+ readonly fontWeight: "medium";
114
+ };
115
+ readonly "label-sm": {
116
+ readonly fontSize: 12;
117
+ readonly lineHeight: "1rem";
118
+ readonly fontWeight: "medium";
119
+ };
120
+ readonly caption: {
121
+ readonly fontSize: 12;
122
+ readonly lineHeight: "1rem";
123
+ readonly fontWeight: "normal";
124
+ };
125
+ };
126
+ /** 텍스트 스타일 이름. Typography의 `variant` 값이다. */
127
+ export type TextStyleName = keyof typeof textStyle;
128
+ /**
129
+ * font-family 스택을 CSS 값으로 만든다. 영문과 하이픈만으로 된 이름은 그대로 두고, 나머지(공백이 있는 이름)는 따옴표로 감싼다.
130
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
131
+ */
132
+ export declare function fontFamilyCss(name: FontFamilyName): string;