@bridger-kr/tokens 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.
- package/README.md +54 -0
- package/assets/fonts/PretendardVariable.woff2 +0 -0
- package/css/base.css +147 -0
- package/css/colors.css +1 -0
- package/css/contract.css +191 -0
- package/css/fonts.css +15 -0
- package/css/index.css +4 -0
- package/css/spacing.css +1 -0
- package/css/typography.css +1 -0
- package/dist/index.cjs +278 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +504 -0
- package/dist/index.d.ts +504 -0
- package/dist/index.mjs +270 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +41 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,504 @@
|
|
|
1
|
+
declare const colors: Readonly<{
|
|
2
|
+
readonly light: Readonly<{
|
|
3
|
+
readonly paper: "#cfecd8";
|
|
4
|
+
readonly surface: "#ecfff2";
|
|
5
|
+
readonly surfaceRaised: "#ffffff";
|
|
6
|
+
readonly surfaceSunken: "#f4f3ef";
|
|
7
|
+
readonly surfaceMuted: "#f8f7f4";
|
|
8
|
+
readonly ink: "#1b1a16";
|
|
9
|
+
readonly inkStrong: "#0c0b08";
|
|
10
|
+
readonly muted: "#79766e";
|
|
11
|
+
readonly mutedStrong: "#423f38";
|
|
12
|
+
readonly border: "#d8d5ca";
|
|
13
|
+
readonly borderStrong: "#ddd9cf";
|
|
14
|
+
readonly divider: "color-mix(in srgb, var(--dt-border) 50%, transparent)";
|
|
15
|
+
readonly accent: "#ec5e1f";
|
|
16
|
+
readonly accentStrong: "#ec5e1f";
|
|
17
|
+
readonly accentBright: "#ec5e1f";
|
|
18
|
+
readonly accentInk: "#ffffff";
|
|
19
|
+
readonly accentSoft: "color-mix(in srgb, var(--dt-accent) 10%, transparent)";
|
|
20
|
+
readonly cobalt: "#256b5a";
|
|
21
|
+
readonly lime: "#dce95b";
|
|
22
|
+
readonly success: "#16a34a";
|
|
23
|
+
readonly warning: "#d97706";
|
|
24
|
+
readonly danger: "#dc2626";
|
|
25
|
+
readonly info: "var(--dt-cobalt)";
|
|
26
|
+
readonly statusCobalt: "#2f6bff";
|
|
27
|
+
readonly statusSuccess: "#00b04e";
|
|
28
|
+
readonly statusWarning: "#ffa71a";
|
|
29
|
+
readonly statusDanger: "#dc3a34";
|
|
30
|
+
readonly alertInk: "#ecfff2";
|
|
31
|
+
readonly tintAccent: "color-mix(in srgb, var(--dt-accent) 12%, transparent)";
|
|
32
|
+
readonly tintCobalt: "color-mix(in srgb, var(--dt-cobalt) 10%, transparent)";
|
|
33
|
+
readonly tintSuccess: "color-mix(in srgb, var(--dt-success) 12%, transparent)";
|
|
34
|
+
readonly tintWarning: "color-mix(in srgb, var(--dt-warning) 14%, transparent)";
|
|
35
|
+
readonly tintDanger: "color-mix(in srgb, var(--dt-danger) 12%, transparent)";
|
|
36
|
+
readonly tintMuted: "color-mix(in srgb, var(--dt-ink) 5%, transparent)";
|
|
37
|
+
readonly codeBg: "#14161d";
|
|
38
|
+
readonly codeInk: "#e8e6df";
|
|
39
|
+
readonly codeBorder: "#262a35";
|
|
40
|
+
readonly brandGradient: "linear-gradient(120deg, #ec5e1f 0%, #ec5e1f 100%)";
|
|
41
|
+
}>;
|
|
42
|
+
readonly dark: Readonly<{
|
|
43
|
+
readonly paper: "#0b0c10";
|
|
44
|
+
readonly surface: "#14151b";
|
|
45
|
+
readonly surfaceRaised: "#1b1d25";
|
|
46
|
+
readonly surfaceSunken: "#08090c";
|
|
47
|
+
readonly surfaceMuted: "#16181f";
|
|
48
|
+
readonly ink: "#f4f3ee";
|
|
49
|
+
readonly inkStrong: "#ffffff";
|
|
50
|
+
readonly muted: "#9a9ba6";
|
|
51
|
+
readonly mutedStrong: "#c4c5ce";
|
|
52
|
+
readonly border: "#23252e";
|
|
53
|
+
readonly borderStrong: "#31343f";
|
|
54
|
+
readonly divider: "color-mix(in srgb, var(--dt-border) 55%, transparent)";
|
|
55
|
+
readonly accent: "#ec5e1f";
|
|
56
|
+
readonly accentStrong: "#ec5e1f";
|
|
57
|
+
readonly accentBright: "#ec5e1f";
|
|
58
|
+
readonly accentInk: "#1a1206";
|
|
59
|
+
readonly accentSoft: "color-mix(in srgb, var(--dt-accent) 14%, transparent)";
|
|
60
|
+
readonly cobalt: "#7aa2ff";
|
|
61
|
+
readonly lime: "#d8f24a";
|
|
62
|
+
readonly success: "#34d399";
|
|
63
|
+
readonly warning: "#fbbf24";
|
|
64
|
+
readonly danger: "#f87171";
|
|
65
|
+
readonly info: "var(--dt-cobalt)";
|
|
66
|
+
readonly statusCobalt: "#2f6bff";
|
|
67
|
+
readonly statusSuccess: "#00b04e";
|
|
68
|
+
readonly statusWarning: "#ffa71a";
|
|
69
|
+
readonly statusDanger: "#dc3a34";
|
|
70
|
+
readonly alertInk: "#ecfff2";
|
|
71
|
+
readonly tintAccent: "color-mix(in srgb, var(--dt-accent) 16%, transparent)";
|
|
72
|
+
readonly tintCobalt: "color-mix(in srgb, var(--dt-cobalt) 16%, transparent)";
|
|
73
|
+
readonly tintSuccess: "color-mix(in srgb, var(--dt-success) 18%, transparent)";
|
|
74
|
+
readonly tintWarning: "color-mix(in srgb, var(--dt-warning) 18%, transparent)";
|
|
75
|
+
readonly tintDanger: "color-mix(in srgb, var(--dt-danger) 18%, transparent)";
|
|
76
|
+
readonly tintMuted: "color-mix(in srgb, var(--dt-ink) 8%, transparent)";
|
|
77
|
+
readonly codeBg: "#0a0b0f";
|
|
78
|
+
readonly codeInk: "#f4f3ee";
|
|
79
|
+
readonly codeBorder: "#23252e";
|
|
80
|
+
}>;
|
|
81
|
+
}>;
|
|
82
|
+
declare const spacing: Readonly<{
|
|
83
|
+
readonly 1: "4px";
|
|
84
|
+
readonly 2: "8px";
|
|
85
|
+
readonly 3: "16px";
|
|
86
|
+
readonly 4: "24px";
|
|
87
|
+
readonly 5: "40px";
|
|
88
|
+
readonly 6: "64px";
|
|
89
|
+
readonly 7: "96px";
|
|
90
|
+
readonly 8: "128px";
|
|
91
|
+
}>;
|
|
92
|
+
declare const radius: Readonly<{
|
|
93
|
+
readonly sm: "6px";
|
|
94
|
+
readonly md: "12px";
|
|
95
|
+
readonly lg: "40px";
|
|
96
|
+
readonly xl: "40px";
|
|
97
|
+
readonly button: "18px";
|
|
98
|
+
readonly full: "9999px";
|
|
99
|
+
}>;
|
|
100
|
+
declare const shadows: Readonly<{
|
|
101
|
+
readonly light: Readonly<{
|
|
102
|
+
readonly ring: "0 0 0 1px var(--dt-border)";
|
|
103
|
+
readonly ringStrong: "0 0 0 1px var(--dt-border-strong)";
|
|
104
|
+
readonly xs: "none";
|
|
105
|
+
readonly sm: "0 1px 2px rgba(24, 22, 18, 0.05)";
|
|
106
|
+
readonly md: "0 2px 6px rgba(24, 22, 18, 0.07)";
|
|
107
|
+
readonly lg: "0 6px 16px rgba(24, 22, 18, 0.10)";
|
|
108
|
+
readonly xl: "0 12px 30px rgba(24, 22, 18, 0.14)";
|
|
109
|
+
readonly focus: "0 0 0 3px color-mix(in srgb, var(--dt-accent) 22%, transparent)";
|
|
110
|
+
readonly cardRest: "var(--dt-ring)";
|
|
111
|
+
readonly cardHover: "var(--dt-ring-strong), var(--dt-shadow-sm)";
|
|
112
|
+
readonly cardFloat: "var(--dt-ring-strong), var(--dt-shadow-md)";
|
|
113
|
+
readonly subtle: "var(--dt-shadow-sm)";
|
|
114
|
+
readonly elevated: "var(--dt-shadow-lg)";
|
|
115
|
+
}>;
|
|
116
|
+
readonly dark: Readonly<{
|
|
117
|
+
readonly ring: "0 0 0 1px rgba(255, 255, 255, 0.04)";
|
|
118
|
+
readonly xs: "0 1px 2px rgba(0, 0, 0, 0.4)";
|
|
119
|
+
readonly sm: "0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4)";
|
|
120
|
+
readonly md: "0 4px 10px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.45)";
|
|
121
|
+
readonly lg: "0 8px 20px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.5)";
|
|
122
|
+
readonly xl: "0 16px 32px rgba(0, 0, 0, 0.6), 0 40px 72px rgba(0, 0, 0, 0.55)";
|
|
123
|
+
}>;
|
|
124
|
+
}>;
|
|
125
|
+
declare const typography: Readonly<{
|
|
126
|
+
readonly fontFamilies: Readonly<{
|
|
127
|
+
readonly sans: "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif";
|
|
128
|
+
readonly mono: "'JetBrains Mono', 'Geist Mono', SFMono-Regular, ui-monospace, Menlo, monospace";
|
|
129
|
+
}>;
|
|
130
|
+
readonly fontSizes: Readonly<{
|
|
131
|
+
readonly h1: "clamp(40px, 6vw, 72px)";
|
|
132
|
+
readonly h2: "clamp(28px, 3.5vw, 40px)";
|
|
133
|
+
readonly h3: "18px";
|
|
134
|
+
readonly body: "16px";
|
|
135
|
+
readonly small: "13px";
|
|
136
|
+
readonly mono: "13px";
|
|
137
|
+
}>;
|
|
138
|
+
readonly fontWeights: Readonly<{
|
|
139
|
+
readonly h1: 560;
|
|
140
|
+
readonly h2: 540;
|
|
141
|
+
readonly h3: 600;
|
|
142
|
+
readonly body: 400;
|
|
143
|
+
}>;
|
|
144
|
+
readonly lineHeights: Readonly<{
|
|
145
|
+
readonly h1: "1.08";
|
|
146
|
+
readonly h2: "1.15";
|
|
147
|
+
readonly h3: "1.3";
|
|
148
|
+
readonly body: "1.6";
|
|
149
|
+
readonly small: "1.55";
|
|
150
|
+
readonly mono: "1.55";
|
|
151
|
+
}>;
|
|
152
|
+
readonly letterSpacing: Readonly<{
|
|
153
|
+
readonly h1: "0";
|
|
154
|
+
readonly h2: "0";
|
|
155
|
+
readonly h3: "0";
|
|
156
|
+
}>;
|
|
157
|
+
}>;
|
|
158
|
+
declare const cssVarName: Readonly<{
|
|
159
|
+
readonly colors: Readonly<{
|
|
160
|
+
readonly paper: "--dt-paper";
|
|
161
|
+
readonly surface: "--dt-surface";
|
|
162
|
+
readonly surfaceRaised: "--dt-surface-raised";
|
|
163
|
+
readonly surfaceSunken: "--dt-surface-sunken";
|
|
164
|
+
readonly surfaceMuted: "--dt-surface-muted";
|
|
165
|
+
readonly ink: "--dt-ink";
|
|
166
|
+
readonly inkStrong: "--dt-ink-strong";
|
|
167
|
+
readonly muted: "--dt-muted";
|
|
168
|
+
readonly mutedStrong: "--dt-muted-strong";
|
|
169
|
+
readonly border: "--dt-border";
|
|
170
|
+
readonly borderStrong: "--dt-border-strong";
|
|
171
|
+
readonly divider: "--dt-divider";
|
|
172
|
+
readonly accent: "--dt-accent";
|
|
173
|
+
readonly accentStrong: "--dt-accent-strong";
|
|
174
|
+
readonly accentBright: "--dt-accent-bright";
|
|
175
|
+
readonly accentInk: "--dt-accent-ink";
|
|
176
|
+
readonly accentSoft: "--dt-accent-soft";
|
|
177
|
+
readonly cobalt: "--dt-cobalt";
|
|
178
|
+
readonly lime: "--dt-lime";
|
|
179
|
+
readonly success: "--dt-success";
|
|
180
|
+
readonly warning: "--dt-warning";
|
|
181
|
+
readonly danger: "--dt-danger";
|
|
182
|
+
readonly info: "--dt-info";
|
|
183
|
+
readonly statusCobalt: "--dt-status-cobalt";
|
|
184
|
+
readonly statusSuccess: "--dt-status-success";
|
|
185
|
+
readonly statusWarning: "--dt-status-warning";
|
|
186
|
+
readonly statusDanger: "--dt-status-danger";
|
|
187
|
+
readonly alertInk: "--dt-alert-ink";
|
|
188
|
+
readonly codeBg: "--dt-code-bg";
|
|
189
|
+
readonly codeInk: "--dt-code-ink";
|
|
190
|
+
readonly codeBorder: "--dt-code-border";
|
|
191
|
+
readonly brandGradient: "--dt-brand-gradient";
|
|
192
|
+
}>;
|
|
193
|
+
readonly spacing: Readonly<{
|
|
194
|
+
readonly 1: "--dt-space-1";
|
|
195
|
+
readonly 2: "--dt-space-2";
|
|
196
|
+
readonly 3: "--dt-space-3";
|
|
197
|
+
readonly 4: "--dt-space-4";
|
|
198
|
+
readonly 5: "--dt-space-5";
|
|
199
|
+
readonly 6: "--dt-space-6";
|
|
200
|
+
readonly 7: "--dt-space-7";
|
|
201
|
+
readonly 8: "--dt-space-8";
|
|
202
|
+
}>;
|
|
203
|
+
readonly radius: Readonly<{
|
|
204
|
+
readonly sm: "--dt-radius-sm";
|
|
205
|
+
readonly md: "--dt-radius-md";
|
|
206
|
+
readonly lg: "--dt-radius-lg";
|
|
207
|
+
readonly xl: "--dt-radius-xl";
|
|
208
|
+
readonly button: "--dt-radius-button";
|
|
209
|
+
readonly full: "--dt-radius-full";
|
|
210
|
+
}>;
|
|
211
|
+
readonly shadows: Readonly<{
|
|
212
|
+
readonly ring: "--dt-ring";
|
|
213
|
+
readonly ringStrong: "--dt-ring-strong";
|
|
214
|
+
readonly xs: "--dt-shadow-xs";
|
|
215
|
+
readonly sm: "--dt-shadow-sm";
|
|
216
|
+
readonly md: "--dt-shadow-md";
|
|
217
|
+
readonly lg: "--dt-shadow-lg";
|
|
218
|
+
readonly xl: "--dt-shadow-xl";
|
|
219
|
+
readonly focus: "--dt-shadow-focus";
|
|
220
|
+
readonly cardRest: "--dt-card-rest";
|
|
221
|
+
readonly cardHover: "--dt-card-hover";
|
|
222
|
+
readonly cardFloat: "--dt-card-float";
|
|
223
|
+
}>;
|
|
224
|
+
readonly typography: Readonly<{
|
|
225
|
+
readonly fontSans: "--dt-font-sans";
|
|
226
|
+
readonly fontMono: "--dt-font-mono";
|
|
227
|
+
readonly h1Size: "--dt-h1-size";
|
|
228
|
+
readonly h1Leading: "--dt-h1-leading";
|
|
229
|
+
readonly h1Tracking: "--dt-h1-tracking";
|
|
230
|
+
readonly h1Weight: "--dt-h1-weight";
|
|
231
|
+
readonly h2Size: "--dt-h2-size";
|
|
232
|
+
readonly h2Leading: "--dt-h2-leading";
|
|
233
|
+
readonly h2Tracking: "--dt-h2-tracking";
|
|
234
|
+
readonly h2Weight: "--dt-h2-weight";
|
|
235
|
+
readonly h3Size: "--dt-h3-size";
|
|
236
|
+
readonly h3Leading: "--dt-h3-leading";
|
|
237
|
+
readonly h3Tracking: "--dt-h3-tracking";
|
|
238
|
+
readonly h3Weight: "--dt-h3-weight";
|
|
239
|
+
readonly bodySize: "--dt-body-size";
|
|
240
|
+
readonly bodyLeading: "--dt-body-leading";
|
|
241
|
+
readonly bodyWeight: "--dt-body-weight";
|
|
242
|
+
readonly smallSize: "--dt-small-size";
|
|
243
|
+
readonly smallLeading: "--dt-small-leading";
|
|
244
|
+
readonly monoSize: "--dt-mono-size";
|
|
245
|
+
readonly monoLeading: "--dt-mono-leading";
|
|
246
|
+
}>;
|
|
247
|
+
}>;
|
|
248
|
+
declare const tokens: Readonly<{
|
|
249
|
+
readonly colors: Readonly<{
|
|
250
|
+
readonly light: Readonly<{
|
|
251
|
+
readonly paper: "#cfecd8";
|
|
252
|
+
readonly surface: "#ecfff2";
|
|
253
|
+
readonly surfaceRaised: "#ffffff";
|
|
254
|
+
readonly surfaceSunken: "#f4f3ef";
|
|
255
|
+
readonly surfaceMuted: "#f8f7f4";
|
|
256
|
+
readonly ink: "#1b1a16";
|
|
257
|
+
readonly inkStrong: "#0c0b08";
|
|
258
|
+
readonly muted: "#79766e";
|
|
259
|
+
readonly mutedStrong: "#423f38";
|
|
260
|
+
readonly border: "#d8d5ca";
|
|
261
|
+
readonly borderStrong: "#ddd9cf";
|
|
262
|
+
readonly divider: "color-mix(in srgb, var(--dt-border) 50%, transparent)";
|
|
263
|
+
readonly accent: "#ec5e1f";
|
|
264
|
+
readonly accentStrong: "#ec5e1f";
|
|
265
|
+
readonly accentBright: "#ec5e1f";
|
|
266
|
+
readonly accentInk: "#ffffff";
|
|
267
|
+
readonly accentSoft: "color-mix(in srgb, var(--dt-accent) 10%, transparent)";
|
|
268
|
+
readonly cobalt: "#256b5a";
|
|
269
|
+
readonly lime: "#dce95b";
|
|
270
|
+
readonly success: "#16a34a";
|
|
271
|
+
readonly warning: "#d97706";
|
|
272
|
+
readonly danger: "#dc2626";
|
|
273
|
+
readonly info: "var(--dt-cobalt)";
|
|
274
|
+
readonly statusCobalt: "#2f6bff";
|
|
275
|
+
readonly statusSuccess: "#00b04e";
|
|
276
|
+
readonly statusWarning: "#ffa71a";
|
|
277
|
+
readonly statusDanger: "#dc3a34";
|
|
278
|
+
readonly alertInk: "#ecfff2";
|
|
279
|
+
readonly tintAccent: "color-mix(in srgb, var(--dt-accent) 12%, transparent)";
|
|
280
|
+
readonly tintCobalt: "color-mix(in srgb, var(--dt-cobalt) 10%, transparent)";
|
|
281
|
+
readonly tintSuccess: "color-mix(in srgb, var(--dt-success) 12%, transparent)";
|
|
282
|
+
readonly tintWarning: "color-mix(in srgb, var(--dt-warning) 14%, transparent)";
|
|
283
|
+
readonly tintDanger: "color-mix(in srgb, var(--dt-danger) 12%, transparent)";
|
|
284
|
+
readonly tintMuted: "color-mix(in srgb, var(--dt-ink) 5%, transparent)";
|
|
285
|
+
readonly codeBg: "#14161d";
|
|
286
|
+
readonly codeInk: "#e8e6df";
|
|
287
|
+
readonly codeBorder: "#262a35";
|
|
288
|
+
readonly brandGradient: "linear-gradient(120deg, #ec5e1f 0%, #ec5e1f 100%)";
|
|
289
|
+
}>;
|
|
290
|
+
readonly dark: Readonly<{
|
|
291
|
+
readonly paper: "#0b0c10";
|
|
292
|
+
readonly surface: "#14151b";
|
|
293
|
+
readonly surfaceRaised: "#1b1d25";
|
|
294
|
+
readonly surfaceSunken: "#08090c";
|
|
295
|
+
readonly surfaceMuted: "#16181f";
|
|
296
|
+
readonly ink: "#f4f3ee";
|
|
297
|
+
readonly inkStrong: "#ffffff";
|
|
298
|
+
readonly muted: "#9a9ba6";
|
|
299
|
+
readonly mutedStrong: "#c4c5ce";
|
|
300
|
+
readonly border: "#23252e";
|
|
301
|
+
readonly borderStrong: "#31343f";
|
|
302
|
+
readonly divider: "color-mix(in srgb, var(--dt-border) 55%, transparent)";
|
|
303
|
+
readonly accent: "#ec5e1f";
|
|
304
|
+
readonly accentStrong: "#ec5e1f";
|
|
305
|
+
readonly accentBright: "#ec5e1f";
|
|
306
|
+
readonly accentInk: "#1a1206";
|
|
307
|
+
readonly accentSoft: "color-mix(in srgb, var(--dt-accent) 14%, transparent)";
|
|
308
|
+
readonly cobalt: "#7aa2ff";
|
|
309
|
+
readonly lime: "#d8f24a";
|
|
310
|
+
readonly success: "#34d399";
|
|
311
|
+
readonly warning: "#fbbf24";
|
|
312
|
+
readonly danger: "#f87171";
|
|
313
|
+
readonly info: "var(--dt-cobalt)";
|
|
314
|
+
readonly statusCobalt: "#2f6bff";
|
|
315
|
+
readonly statusSuccess: "#00b04e";
|
|
316
|
+
readonly statusWarning: "#ffa71a";
|
|
317
|
+
readonly statusDanger: "#dc3a34";
|
|
318
|
+
readonly alertInk: "#ecfff2";
|
|
319
|
+
readonly tintAccent: "color-mix(in srgb, var(--dt-accent) 16%, transparent)";
|
|
320
|
+
readonly tintCobalt: "color-mix(in srgb, var(--dt-cobalt) 16%, transparent)";
|
|
321
|
+
readonly tintSuccess: "color-mix(in srgb, var(--dt-success) 18%, transparent)";
|
|
322
|
+
readonly tintWarning: "color-mix(in srgb, var(--dt-warning) 18%, transparent)";
|
|
323
|
+
readonly tintDanger: "color-mix(in srgb, var(--dt-danger) 18%, transparent)";
|
|
324
|
+
readonly tintMuted: "color-mix(in srgb, var(--dt-ink) 8%, transparent)";
|
|
325
|
+
readonly codeBg: "#0a0b0f";
|
|
326
|
+
readonly codeInk: "#f4f3ee";
|
|
327
|
+
readonly codeBorder: "#23252e";
|
|
328
|
+
}>;
|
|
329
|
+
}>;
|
|
330
|
+
readonly spacing: Readonly<{
|
|
331
|
+
readonly 1: "4px";
|
|
332
|
+
readonly 2: "8px";
|
|
333
|
+
readonly 3: "16px";
|
|
334
|
+
readonly 4: "24px";
|
|
335
|
+
readonly 5: "40px";
|
|
336
|
+
readonly 6: "64px";
|
|
337
|
+
readonly 7: "96px";
|
|
338
|
+
readonly 8: "128px";
|
|
339
|
+
}>;
|
|
340
|
+
readonly radius: Readonly<{
|
|
341
|
+
readonly sm: "6px";
|
|
342
|
+
readonly md: "12px";
|
|
343
|
+
readonly lg: "40px";
|
|
344
|
+
readonly xl: "40px";
|
|
345
|
+
readonly button: "18px";
|
|
346
|
+
readonly full: "9999px";
|
|
347
|
+
}>;
|
|
348
|
+
readonly shadows: Readonly<{
|
|
349
|
+
readonly light: Readonly<{
|
|
350
|
+
readonly ring: "0 0 0 1px var(--dt-border)";
|
|
351
|
+
readonly ringStrong: "0 0 0 1px var(--dt-border-strong)";
|
|
352
|
+
readonly xs: "none";
|
|
353
|
+
readonly sm: "0 1px 2px rgba(24, 22, 18, 0.05)";
|
|
354
|
+
readonly md: "0 2px 6px rgba(24, 22, 18, 0.07)";
|
|
355
|
+
readonly lg: "0 6px 16px rgba(24, 22, 18, 0.10)";
|
|
356
|
+
readonly xl: "0 12px 30px rgba(24, 22, 18, 0.14)";
|
|
357
|
+
readonly focus: "0 0 0 3px color-mix(in srgb, var(--dt-accent) 22%, transparent)";
|
|
358
|
+
readonly cardRest: "var(--dt-ring)";
|
|
359
|
+
readonly cardHover: "var(--dt-ring-strong), var(--dt-shadow-sm)";
|
|
360
|
+
readonly cardFloat: "var(--dt-ring-strong), var(--dt-shadow-md)";
|
|
361
|
+
readonly subtle: "var(--dt-shadow-sm)";
|
|
362
|
+
readonly elevated: "var(--dt-shadow-lg)";
|
|
363
|
+
}>;
|
|
364
|
+
readonly dark: Readonly<{
|
|
365
|
+
readonly ring: "0 0 0 1px rgba(255, 255, 255, 0.04)";
|
|
366
|
+
readonly xs: "0 1px 2px rgba(0, 0, 0, 0.4)";
|
|
367
|
+
readonly sm: "0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4)";
|
|
368
|
+
readonly md: "0 4px 10px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.45)";
|
|
369
|
+
readonly lg: "0 8px 20px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.5)";
|
|
370
|
+
readonly xl: "0 16px 32px rgba(0, 0, 0, 0.6), 0 40px 72px rgba(0, 0, 0, 0.55)";
|
|
371
|
+
}>;
|
|
372
|
+
}>;
|
|
373
|
+
readonly typography: Readonly<{
|
|
374
|
+
readonly fontFamilies: Readonly<{
|
|
375
|
+
readonly sans: "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif";
|
|
376
|
+
readonly mono: "'JetBrains Mono', 'Geist Mono', SFMono-Regular, ui-monospace, Menlo, monospace";
|
|
377
|
+
}>;
|
|
378
|
+
readonly fontSizes: Readonly<{
|
|
379
|
+
readonly h1: "clamp(40px, 6vw, 72px)";
|
|
380
|
+
readonly h2: "clamp(28px, 3.5vw, 40px)";
|
|
381
|
+
readonly h3: "18px";
|
|
382
|
+
readonly body: "16px";
|
|
383
|
+
readonly small: "13px";
|
|
384
|
+
readonly mono: "13px";
|
|
385
|
+
}>;
|
|
386
|
+
readonly fontWeights: Readonly<{
|
|
387
|
+
readonly h1: 560;
|
|
388
|
+
readonly h2: 540;
|
|
389
|
+
readonly h3: 600;
|
|
390
|
+
readonly body: 400;
|
|
391
|
+
}>;
|
|
392
|
+
readonly lineHeights: Readonly<{
|
|
393
|
+
readonly h1: "1.08";
|
|
394
|
+
readonly h2: "1.15";
|
|
395
|
+
readonly h3: "1.3";
|
|
396
|
+
readonly body: "1.6";
|
|
397
|
+
readonly small: "1.55";
|
|
398
|
+
readonly mono: "1.55";
|
|
399
|
+
}>;
|
|
400
|
+
readonly letterSpacing: Readonly<{
|
|
401
|
+
readonly h1: "0";
|
|
402
|
+
readonly h2: "0";
|
|
403
|
+
readonly h3: "0";
|
|
404
|
+
}>;
|
|
405
|
+
}>;
|
|
406
|
+
readonly cssVarName: Readonly<{
|
|
407
|
+
readonly colors: Readonly<{
|
|
408
|
+
readonly paper: "--dt-paper";
|
|
409
|
+
readonly surface: "--dt-surface";
|
|
410
|
+
readonly surfaceRaised: "--dt-surface-raised";
|
|
411
|
+
readonly surfaceSunken: "--dt-surface-sunken";
|
|
412
|
+
readonly surfaceMuted: "--dt-surface-muted";
|
|
413
|
+
readonly ink: "--dt-ink";
|
|
414
|
+
readonly inkStrong: "--dt-ink-strong";
|
|
415
|
+
readonly muted: "--dt-muted";
|
|
416
|
+
readonly mutedStrong: "--dt-muted-strong";
|
|
417
|
+
readonly border: "--dt-border";
|
|
418
|
+
readonly borderStrong: "--dt-border-strong";
|
|
419
|
+
readonly divider: "--dt-divider";
|
|
420
|
+
readonly accent: "--dt-accent";
|
|
421
|
+
readonly accentStrong: "--dt-accent-strong";
|
|
422
|
+
readonly accentBright: "--dt-accent-bright";
|
|
423
|
+
readonly accentInk: "--dt-accent-ink";
|
|
424
|
+
readonly accentSoft: "--dt-accent-soft";
|
|
425
|
+
readonly cobalt: "--dt-cobalt";
|
|
426
|
+
readonly lime: "--dt-lime";
|
|
427
|
+
readonly success: "--dt-success";
|
|
428
|
+
readonly warning: "--dt-warning";
|
|
429
|
+
readonly danger: "--dt-danger";
|
|
430
|
+
readonly info: "--dt-info";
|
|
431
|
+
readonly statusCobalt: "--dt-status-cobalt";
|
|
432
|
+
readonly statusSuccess: "--dt-status-success";
|
|
433
|
+
readonly statusWarning: "--dt-status-warning";
|
|
434
|
+
readonly statusDanger: "--dt-status-danger";
|
|
435
|
+
readonly alertInk: "--dt-alert-ink";
|
|
436
|
+
readonly codeBg: "--dt-code-bg";
|
|
437
|
+
readonly codeInk: "--dt-code-ink";
|
|
438
|
+
readonly codeBorder: "--dt-code-border";
|
|
439
|
+
readonly brandGradient: "--dt-brand-gradient";
|
|
440
|
+
}>;
|
|
441
|
+
readonly spacing: Readonly<{
|
|
442
|
+
readonly 1: "--dt-space-1";
|
|
443
|
+
readonly 2: "--dt-space-2";
|
|
444
|
+
readonly 3: "--dt-space-3";
|
|
445
|
+
readonly 4: "--dt-space-4";
|
|
446
|
+
readonly 5: "--dt-space-5";
|
|
447
|
+
readonly 6: "--dt-space-6";
|
|
448
|
+
readonly 7: "--dt-space-7";
|
|
449
|
+
readonly 8: "--dt-space-8";
|
|
450
|
+
}>;
|
|
451
|
+
readonly radius: Readonly<{
|
|
452
|
+
readonly sm: "--dt-radius-sm";
|
|
453
|
+
readonly md: "--dt-radius-md";
|
|
454
|
+
readonly lg: "--dt-radius-lg";
|
|
455
|
+
readonly xl: "--dt-radius-xl";
|
|
456
|
+
readonly button: "--dt-radius-button";
|
|
457
|
+
readonly full: "--dt-radius-full";
|
|
458
|
+
}>;
|
|
459
|
+
readonly shadows: Readonly<{
|
|
460
|
+
readonly ring: "--dt-ring";
|
|
461
|
+
readonly ringStrong: "--dt-ring-strong";
|
|
462
|
+
readonly xs: "--dt-shadow-xs";
|
|
463
|
+
readonly sm: "--dt-shadow-sm";
|
|
464
|
+
readonly md: "--dt-shadow-md";
|
|
465
|
+
readonly lg: "--dt-shadow-lg";
|
|
466
|
+
readonly xl: "--dt-shadow-xl";
|
|
467
|
+
readonly focus: "--dt-shadow-focus";
|
|
468
|
+
readonly cardRest: "--dt-card-rest";
|
|
469
|
+
readonly cardHover: "--dt-card-hover";
|
|
470
|
+
readonly cardFloat: "--dt-card-float";
|
|
471
|
+
}>;
|
|
472
|
+
readonly typography: Readonly<{
|
|
473
|
+
readonly fontSans: "--dt-font-sans";
|
|
474
|
+
readonly fontMono: "--dt-font-mono";
|
|
475
|
+
readonly h1Size: "--dt-h1-size";
|
|
476
|
+
readonly h1Leading: "--dt-h1-leading";
|
|
477
|
+
readonly h1Tracking: "--dt-h1-tracking";
|
|
478
|
+
readonly h1Weight: "--dt-h1-weight";
|
|
479
|
+
readonly h2Size: "--dt-h2-size";
|
|
480
|
+
readonly h2Leading: "--dt-h2-leading";
|
|
481
|
+
readonly h2Tracking: "--dt-h2-tracking";
|
|
482
|
+
readonly h2Weight: "--dt-h2-weight";
|
|
483
|
+
readonly h3Size: "--dt-h3-size";
|
|
484
|
+
readonly h3Leading: "--dt-h3-leading";
|
|
485
|
+
readonly h3Tracking: "--dt-h3-tracking";
|
|
486
|
+
readonly h3Weight: "--dt-h3-weight";
|
|
487
|
+
readonly bodySize: "--dt-body-size";
|
|
488
|
+
readonly bodyLeading: "--dt-body-leading";
|
|
489
|
+
readonly bodyWeight: "--dt-body-weight";
|
|
490
|
+
readonly smallSize: "--dt-small-size";
|
|
491
|
+
readonly smallLeading: "--dt-small-leading";
|
|
492
|
+
readonly monoSize: "--dt-mono-size";
|
|
493
|
+
readonly monoLeading: "--dt-mono-leading";
|
|
494
|
+
}>;
|
|
495
|
+
}>;
|
|
496
|
+
}>;
|
|
497
|
+
type Tokens = typeof tokens;
|
|
498
|
+
type Colors = typeof colors;
|
|
499
|
+
type Spacing = typeof spacing;
|
|
500
|
+
type Radius = typeof radius;
|
|
501
|
+
type Shadows = typeof shadows;
|
|
502
|
+
type Typography = typeof typography;
|
|
503
|
+
|
|
504
|
+
export { type Colors, type Radius, type Shadows, type Spacing, type Tokens, type Typography, colors, cssVarName, radius, shadows, spacing, tokens, typography };
|