@horon-ai/tokens 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.
- package/README.md +24 -2
- package/package.json +33 -5
- package/src/color.ts +242 -0
- package/src/css.ts +117 -0
- package/src/glass.ts +70 -0
- package/src/index.ts +5 -0
- package/src/scale.ts +38 -0
- package/src/typography.ts +131 -0
- package/theme.css +396 -0
package/README.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @horon-ai/tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Horon 디자인 토큰입니다. 모든 값은 Figma `Horon` 파일(fileKey `JinNQfldIXR0eYcjZuL3ey`)에서
|
|
4
|
+
읽었고, `theme.css`는 이 값에서 생성됩니다.
|
|
5
|
+
|
|
6
|
+
| 파일 | 내용 | Figma 출처 |
|
|
7
|
+
| --- | --- | --- |
|
|
8
|
+
| `src/color.ts` | 시맨틱 색 라이트·다크, 직접 쓰는 sky·red 단계 | Components `54:81`, Components / Dark `166:1107` |
|
|
9
|
+
| `src/typography.ts` | 글꼴, 네 가지 굵기, 13개 글자 스타일의 Web / Desktop / Mobile 크기 | Typography `26:2` |
|
|
10
|
+
| `src/scale.ts` | 반경, 간격, 그림자 | Scale 컬렉션, Menus `88:495`, Command palette `110:676` |
|
|
11
|
+
| `src/glass.ts` | 유리 레이어 값과 높이 비례 규칙 | Button `55:339` 외 유리 컴포넌트 |
|
|
12
|
+
| `src/css.ts` | `theme.css` 생성기 | |
|
|
13
|
+
|
|
14
|
+
CSS 변수 이름은 Figma 변수의 WEB 코드 문법과 같습니다. Figma Dev Mode에서
|
|
15
|
+
`var(--color-text-primary)`로 보이는 값이 여기서도 `--color-text-primary`이고, Tailwind에서는
|
|
16
|
+
`text-text-primary`, `bg-bg-default`처럼 씁니다. Tailwind 기본 팔레트와 반경, 글자 크기는 비웠습니다.
|
|
17
|
+
|
|
18
|
+
## theme.css 재생성
|
|
19
|
+
|
|
20
|
+
`theme.css`는 손으로 고치지 않습니다.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
bun run build # packages/tokens 안에서
|
|
24
|
+
bun test packages/tokens # 저장소 루트에서, 생성기 출력과 커밋된 파일이 같은지 확인
|
|
25
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,34 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
"name": "@horon-ai/tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "git+https://github.com/horon-ai/design.git",
|
|
7
|
+
"directory": "packages/tokens"
|
|
8
|
+
},
|
|
9
|
+
"type": "module",
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"files": [
|
|
12
|
+
"src",
|
|
13
|
+
"theme.css",
|
|
14
|
+
"README.md"
|
|
15
|
+
],
|
|
16
|
+
"publishConfig": {
|
|
17
|
+
"access": "public"
|
|
18
|
+
},
|
|
19
|
+
"exports": {
|
|
20
|
+
".": "./src/index.ts",
|
|
21
|
+
"./theme.css": "./theme.css",
|
|
22
|
+
"./package.json": "./package.json"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "bun run scripts/build.ts",
|
|
26
|
+
"dev": "bun --watch scripts/build.ts",
|
|
27
|
+
"prepublishOnly": "bun run build",
|
|
28
|
+
"typecheck": "tsc --noEmit"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/node": "^24",
|
|
32
|
+
"typescript": "~6.0.3"
|
|
33
|
+
}
|
|
34
|
+
}
|
package/src/color.ts
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Semantic color tokens, read from the Horon Figma file (fileKey
|
|
3
|
+
* JinNQfldIXR0eYcjZuL3ey) on 2026-10-26: the light values from the Components
|
|
4
|
+
* board `54:81`, the dark values from the Components / Dark board `166:1107`.
|
|
5
|
+
*
|
|
6
|
+
* Keys are the Figma variable WEB code syntax without the `--color-` prefix, so
|
|
7
|
+
* `text-primary` is `var(--color-text-primary)` in Figma Dev Mode and here.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export const lightColors = {
|
|
11
|
+
"bg-brand": "#f3f7fa",
|
|
12
|
+
"bg-danger": "#fff4f2",
|
|
13
|
+
"bg-default": "#ffffff",
|
|
14
|
+
"bg-scrim": "#0b0c0e",
|
|
15
|
+
"bg-subtle": "#f3f4f5",
|
|
16
|
+
"bg-surface": "#ffffff",
|
|
17
|
+
"bg-surface-6": "#ffffff0f",
|
|
18
|
+
"bg-surface-70": "#ffffffb2",
|
|
19
|
+
"bg-surface-75": "#ffffffbf",
|
|
20
|
+
"bg-surface-80": "#ffffffcc",
|
|
21
|
+
"bg-surface-85": "#ffffffd9",
|
|
22
|
+
"bg-surface-90": "#ffffffe5",
|
|
23
|
+
"bg-surface-95": "#fffffff2",
|
|
24
|
+
"surface-ink": "#17181a",
|
|
25
|
+
"text-brand": "#3b617b",
|
|
26
|
+
"text-danger": "#993a33",
|
|
27
|
+
"text-disabled": "#b0b1b3",
|
|
28
|
+
"text-inverse": "#f9fafb",
|
|
29
|
+
"text-on-ink": "#ffffff",
|
|
30
|
+
"text-placeholder": "#7e8082",
|
|
31
|
+
"text-placeholder-12": "#7e80821f",
|
|
32
|
+
"text-placeholder-18": "#7e80822e",
|
|
33
|
+
"text-placeholder-90": "#7e8082e5",
|
|
34
|
+
"text-primary": "#17181a",
|
|
35
|
+
"text-secondary": "#5f6163",
|
|
36
|
+
"border-brand": "#b7cedf",
|
|
37
|
+
"border-danger": "#e39289",
|
|
38
|
+
"border-default": "#e5e6e7",
|
|
39
|
+
"border-strong": "#d3d4d6",
|
|
40
|
+
"interactive-danger": "#b84e45",
|
|
41
|
+
"interactive-danger-hover": "#993a33",
|
|
42
|
+
"interactive-on-danger": "#ffffff",
|
|
43
|
+
"interactive-on-primary": "#ffffff",
|
|
44
|
+
"interactive-primary": "#17181a",
|
|
45
|
+
"interactive-primary-12": "#17181a1f",
|
|
46
|
+
"interactive-primary-75": "#17181abf",
|
|
47
|
+
"interactive-primary-90": "#17181ae5",
|
|
48
|
+
"interactive-primary-hover": "#2a2b2d",
|
|
49
|
+
"interactive-primary-pressed": "#434547",
|
|
50
|
+
"interactive-secondary-hover": "#e5e6e7",
|
|
51
|
+
"status-live": "#7199b6",
|
|
52
|
+
"glass-clear": "#ffffff33",
|
|
53
|
+
"glass-clear-hover": "#ffffff4d",
|
|
54
|
+
"glass-clear-pressed": "#ffffff66",
|
|
55
|
+
"glass-fill-frost": "#ffffffe5",
|
|
56
|
+
"glass-fill-solid": "#ffffff",
|
|
57
|
+
"glass-regular": "#ffffff8c",
|
|
58
|
+
"glass-rim": "#ffffff52",
|
|
59
|
+
"glass-rim-strong": "#ffffff66",
|
|
60
|
+
"glass-thick": "#ffffffcc",
|
|
61
|
+
"overlay-ink-10": "#0000001a",
|
|
62
|
+
"overlay-ink-12": "#0000001f",
|
|
63
|
+
"overlay-ink-14": "#00000024",
|
|
64
|
+
"overlay-ink-16": "#00000029",
|
|
65
|
+
"overlay-ink-18": "#0000002e",
|
|
66
|
+
"overlay-ink-20": "#00000033",
|
|
67
|
+
"overlay-ink-3": "#00000008",
|
|
68
|
+
"overlay-ink-30": "#0000004d",
|
|
69
|
+
"overlay-ink-35": "#00000059",
|
|
70
|
+
"overlay-ink-4": "#0000000a",
|
|
71
|
+
"overlay-ink-5": "#0000000d",
|
|
72
|
+
"overlay-ink-55": "#0000008c",
|
|
73
|
+
"overlay-ink-6": "#0000000f",
|
|
74
|
+
"overlay-ink-7": "#00000012",
|
|
75
|
+
"overlay-ink-8": "#00000014",
|
|
76
|
+
"overlay-ink-80": "#000000cc",
|
|
77
|
+
"accent-red-500-14": "#d36d6324",
|
|
78
|
+
"accent-red-500-90": "#d36d63e5",
|
|
79
|
+
"accent-sky-500-10": "#7199b61a",
|
|
80
|
+
"accent-sky-500-12": "#7199b61f",
|
|
81
|
+
"accent-sky-500-16": "#7199b629",
|
|
82
|
+
"accent-sky-500-18": "#7199b62e",
|
|
83
|
+
"accent-sky-500-20": "#7199b633",
|
|
84
|
+
"accent-sky-500-60": "#7199b699",
|
|
85
|
+
"accent-sky-500-90": "#7199b6e5",
|
|
86
|
+
"accent-sky-700-12": "#3b617b1f",
|
|
87
|
+
"accent-sky-700-18": "#3b617b2e",
|
|
88
|
+
"accent-sky-700-90": "#3b617be5",
|
|
89
|
+
"syntax-key": "#3b617b",
|
|
90
|
+
"syntax-number": "#527b98",
|
|
91
|
+
"syntax-punctuation": "#b0b1b3",
|
|
92
|
+
"syntax-string": "#17181a",
|
|
93
|
+
// Paper "--color-glass-tint" (a color); distinct from the layer variable --glass-tint.
|
|
94
|
+
"border-focus": "#527b98",
|
|
95
|
+
"interactive-secondary": "#f3f4f5",
|
|
96
|
+
"glass-fill": "#ffffff52",
|
|
97
|
+
"glass-fill-strong": "#ffffff8c",
|
|
98
|
+
"glass-border": "#ffffff99",
|
|
99
|
+
"glass-tint": "#0b0c0e0a",
|
|
100
|
+
"glass-rim-frost": "#ffffffb3",
|
|
101
|
+
"bg-inset": "#fcfcfd",
|
|
102
|
+
"border-dashed": "#c9cbcd",
|
|
103
|
+
} as const;
|
|
104
|
+
|
|
105
|
+
export type ColorToken = keyof typeof lightColors;
|
|
106
|
+
|
|
107
|
+
export const darkColors: Record<ColorToken, string> = {
|
|
108
|
+
"bg-brand": "#0f202c",
|
|
109
|
+
"bg-danger": "#3d110e",
|
|
110
|
+
"bg-default": "#0b0c0e",
|
|
111
|
+
"bg-scrim": "#0b0c0e",
|
|
112
|
+
"bg-subtle": "#2a2b2d",
|
|
113
|
+
"bg-surface": "#17181a",
|
|
114
|
+
"bg-surface-6": "#17181a0f",
|
|
115
|
+
"bg-surface-70": "#17181ab2",
|
|
116
|
+
"bg-surface-75": "#17181abf",
|
|
117
|
+
"bg-surface-80": "#17181acc",
|
|
118
|
+
"bg-surface-85": "#17181ad9",
|
|
119
|
+
"bg-surface-90": "#17181ae5",
|
|
120
|
+
"bg-surface-95": "#17181af2",
|
|
121
|
+
"surface-ink": "#2a2b2d",
|
|
122
|
+
"text-brand": "#b7cedf",
|
|
123
|
+
"text-danger": "#f2b7af",
|
|
124
|
+
"text-disabled": "#5f6163",
|
|
125
|
+
"text-inverse": "#17181a",
|
|
126
|
+
"text-on-ink": "#f9fafb",
|
|
127
|
+
"text-placeholder": "#7e8082",
|
|
128
|
+
"text-placeholder-12": "#7e80821f",
|
|
129
|
+
"text-placeholder-18": "#7e80822e",
|
|
130
|
+
"text-placeholder-90": "#7e8082e5",
|
|
131
|
+
"text-primary": "#f9fafb",
|
|
132
|
+
"text-secondary": "#b0b1b3",
|
|
133
|
+
"border-brand": "#3b617b",
|
|
134
|
+
"border-danger": "#d36d63",
|
|
135
|
+
"border-default": "#2a2b2d",
|
|
136
|
+
"border-strong": "#434547",
|
|
137
|
+
"interactive-danger": "#d36d63",
|
|
138
|
+
"interactive-danger-hover": "#e39289",
|
|
139
|
+
"interactive-on-danger": "#0b0c0e",
|
|
140
|
+
"interactive-on-primary": "#0b0c0e",
|
|
141
|
+
"interactive-primary": "#f9fafb",
|
|
142
|
+
"interactive-primary-12": "#f9fafb1f",
|
|
143
|
+
"interactive-primary-75": "#f9fafbbf",
|
|
144
|
+
"interactive-primary-90": "#f9fafbe5",
|
|
145
|
+
"interactive-primary-hover": "#e5e6e7",
|
|
146
|
+
"interactive-primary-pressed": "#d3d4d6",
|
|
147
|
+
"interactive-secondary-hover": "#434547",
|
|
148
|
+
"status-live": "#95b6ce",
|
|
149
|
+
"glass-clear": "#ffffff1a",
|
|
150
|
+
"glass-clear-hover": "#ffffff24",
|
|
151
|
+
"glass-clear-pressed": "#ffffff2e",
|
|
152
|
+
"glass-fill-frost": "#17181ae5",
|
|
153
|
+
"glass-fill-solid": "#17181a",
|
|
154
|
+
"glass-regular": "#ffffff24",
|
|
155
|
+
"glass-rim": "#ffffff14",
|
|
156
|
+
"glass-rim-strong": "#ffffff24",
|
|
157
|
+
"glass-thick": "#ffffff33",
|
|
158
|
+
"overlay-ink-10": "#ffffff1a",
|
|
159
|
+
"overlay-ink-12": "#ffffff1f",
|
|
160
|
+
"overlay-ink-14": "#ffffff24",
|
|
161
|
+
"overlay-ink-16": "#ffffff29",
|
|
162
|
+
"overlay-ink-18": "#ffffff2e",
|
|
163
|
+
"overlay-ink-20": "#ffffff33",
|
|
164
|
+
"overlay-ink-3": "#ffffff08",
|
|
165
|
+
"overlay-ink-30": "#ffffff4d",
|
|
166
|
+
"overlay-ink-35": "#ffffff59",
|
|
167
|
+
"overlay-ink-4": "#ffffff0a",
|
|
168
|
+
"overlay-ink-5": "#ffffff0d",
|
|
169
|
+
"overlay-ink-55": "#ffffff8c",
|
|
170
|
+
"overlay-ink-6": "#ffffff0f",
|
|
171
|
+
"overlay-ink-7": "#ffffff12",
|
|
172
|
+
"overlay-ink-8": "#ffffff14",
|
|
173
|
+
"overlay-ink-80": "#ffffffcc",
|
|
174
|
+
"accent-red-500-14": "#d36d6324",
|
|
175
|
+
"accent-red-500-90": "#d36d63e5",
|
|
176
|
+
"accent-sky-500-10": "#7199b61a",
|
|
177
|
+
"accent-sky-500-12": "#7199b61f",
|
|
178
|
+
"accent-sky-500-16": "#7199b629",
|
|
179
|
+
"accent-sky-500-18": "#7199b62e",
|
|
180
|
+
"accent-sky-500-20": "#7199b633",
|
|
181
|
+
"accent-sky-500-60": "#7199b699",
|
|
182
|
+
"accent-sky-500-90": "#7199b6e5",
|
|
183
|
+
"accent-sky-700-12": "#3b617b1f",
|
|
184
|
+
"accent-sky-700-18": "#3b617b2e",
|
|
185
|
+
"accent-sky-700-90": "#3b617be5",
|
|
186
|
+
"syntax-key": "#b7cedf",
|
|
187
|
+
"syntax-number": "#95b6ce",
|
|
188
|
+
"syntax-punctuation": "#7e8082",
|
|
189
|
+
"syntax-string": "#f9fafb",
|
|
190
|
+
// Paper "--color-glass-tint" (a color); distinct from the layer variable --glass-tint.
|
|
191
|
+
"border-focus": "#95b6ce",
|
|
192
|
+
"interactive-secondary": "#2a2b2d",
|
|
193
|
+
"glass-fill": "#17181a8c",
|
|
194
|
+
"glass-fill-strong": "#17181ab8",
|
|
195
|
+
"glass-border": "#ffffff1f",
|
|
196
|
+
"glass-tint": "#ffffff0f",
|
|
197
|
+
"glass-rim-frost": "#ffffff1f",
|
|
198
|
+
"bg-inset": "#141518",
|
|
199
|
+
"border-dashed": "#4a4c4f",
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
/** Primitive steps that the Components board references directly. */
|
|
203
|
+
export const primitives = {
|
|
204
|
+
"red-500": "#d36d63",
|
|
205
|
+
"sky-100": "#e7eff5",
|
|
206
|
+
"sky-200": "#d2e0eb",
|
|
207
|
+
"sky-400": "#95b6ce",
|
|
208
|
+
"sky-500": "#7199b6",
|
|
209
|
+
"sky-600": "#527b98",
|
|
210
|
+
"sky-700": "#3b617b",
|
|
211
|
+
"sky-800": "#2a495e",
|
|
212
|
+
"neutral-50": "#f9fafb",
|
|
213
|
+
"neutral-100": "#f3f4f5",
|
|
214
|
+
"neutral-200": "#e5e6e7",
|
|
215
|
+
"neutral-300": "#d3d4d6",
|
|
216
|
+
"neutral-400": "#b0b1b3",
|
|
217
|
+
"neutral-500": "#7e8082",
|
|
218
|
+
"neutral-600": "#5f6163",
|
|
219
|
+
"neutral-700": "#434547",
|
|
220
|
+
"neutral-800": "#2a2b2d",
|
|
221
|
+
"neutral-900": "#17181a",
|
|
222
|
+
"neutral-950": "#0b0c0e",
|
|
223
|
+
"red-50": "#fff4f2",
|
|
224
|
+
"red-100": "#fde7e4",
|
|
225
|
+
"red-200": "#f9d2cc",
|
|
226
|
+
"red-300": "#f2b7af",
|
|
227
|
+
"red-400": "#e39289",
|
|
228
|
+
"red-600": "#b84e45",
|
|
229
|
+
"red-700": "#993a33",
|
|
230
|
+
"red-800": "#782a25",
|
|
231
|
+
"red-900": "#5a1d19",
|
|
232
|
+
"red-950": "#3d110e",
|
|
233
|
+
"sky-50": "#f3f7fa",
|
|
234
|
+
"sky-300": "#b7cedf",
|
|
235
|
+
"sky-900": "#1b3343",
|
|
236
|
+
"sky-950": "#0f202c",
|
|
237
|
+
"base-white": "#ffffff",
|
|
238
|
+
"base-black": "#000000",
|
|
239
|
+
"mascot-ink": "#1c1a17",
|
|
240
|
+
"mascot-cream": "#fbf7f0",
|
|
241
|
+
"mascot-gold": "#e0921f",
|
|
242
|
+
} as const;
|
package/src/css.ts
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { darkColors, lightColors, primitives } from "./color";
|
|
2
|
+
import { glass, veil } from "./glass";
|
|
3
|
+
import { radius, shadow } from "./scale";
|
|
4
|
+
import { fontFamily, fontWeight, textStyles, type Platform } from "./typography";
|
|
5
|
+
|
|
6
|
+
const px = (value: number) => (value === 0 ? "0" : `${Number(value.toFixed(4))}px`);
|
|
7
|
+
|
|
8
|
+
const ratio = (value: number) => Number(value.toFixed(6));
|
|
9
|
+
|
|
10
|
+
const family = (stack: readonly string[]) => stack.map((name) => (name.includes(" ") ? `"${name}"` : name)).join(", ");
|
|
11
|
+
|
|
12
|
+
const em = (value: number) => (value === 0 ? "0" : `${value}em`);
|
|
13
|
+
|
|
14
|
+
/** Font size, line height, tracking and weight of every text style for one platform. */
|
|
15
|
+
function textLines(platform: Platform): string[] {
|
|
16
|
+
const lines: string[] = [];
|
|
17
|
+
for (const [name, style] of Object.entries(textStyles)) {
|
|
18
|
+
lines.push(` --text-${name}: ${px(style.size[platform])};`);
|
|
19
|
+
lines.push(` --text-${name}--line-height: ${px(style.lineHeight[platform])};`);
|
|
20
|
+
if (platform === "web") {
|
|
21
|
+
lines.push(` --text-${name}--letter-spacing: ${em(style.tracking)};`);
|
|
22
|
+
lines.push(` --text-${name}--font-weight: ${fontWeight[style.weight]};`);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return lines;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function themeBlock(): string[] {
|
|
29
|
+
const lines = [
|
|
30
|
+
" --color-*: initial;",
|
|
31
|
+
" --radius-*: initial;",
|
|
32
|
+
" --text-*: initial;",
|
|
33
|
+
" --font-*: initial;",
|
|
34
|
+
" --font-weight-*: initial;",
|
|
35
|
+
" --shadow-*: initial;",
|
|
36
|
+
"",
|
|
37
|
+
];
|
|
38
|
+
for (const [name, value] of Object.entries(lightColors)) lines.push(` --color-${name}: ${value};`);
|
|
39
|
+
for (const [name, value] of Object.entries(primitives)) lines.push(` --color-${name}: ${value};`);
|
|
40
|
+
lines.push("");
|
|
41
|
+
for (const [name, value] of Object.entries(radius)) lines.push(` --radius-${name}: ${px(value)};`);
|
|
42
|
+
lines.push("");
|
|
43
|
+
for (const [name, value] of Object.entries(shadow)) lines.push(` --shadow-${name}: ${value};`);
|
|
44
|
+
lines.push("");
|
|
45
|
+
for (const [name, stack] of Object.entries(fontFamily)) lines.push(` --font-${name}: ${family(stack)};`);
|
|
46
|
+
for (const [name, value] of Object.entries(fontWeight)) lines.push(` --font-weight-${name}: ${value};`);
|
|
47
|
+
lines.push("");
|
|
48
|
+
lines.push(...textLines("web"));
|
|
49
|
+
return lines;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/** The rim gradient for one scheme; `.dark` repeats it with the dark colours. */
|
|
53
|
+
const rimLines = (scheme: keyof typeof glass.rim) => [
|
|
54
|
+
` --glass-rim-top: ${glass.rim[scheme].top};`,
|
|
55
|
+
` --glass-rim-mid: ${glass.rim[scheme].mid};`,
|
|
56
|
+
` --glass-rim-bottom: ${glass.rim[scheme].bottom};`,
|
|
57
|
+
];
|
|
58
|
+
|
|
59
|
+
/** The veil, the light glass of fields and overlays; `.dark` repeats it with the dark colours. */
|
|
60
|
+
const veilLines = (scheme: keyof typeof veil.scheme) => [
|
|
61
|
+
` --veil-ring: ${veil.scheme[scheme].ring};`,
|
|
62
|
+
` --veil-field: ${veil.scheme[scheme].field};`,
|
|
63
|
+
` --veil-field-focus: ${veil.scheme[scheme].fieldFocus};`,
|
|
64
|
+
` --veil-field-shadow: ${veil.scheme[scheme].fieldShadow};`,
|
|
65
|
+
` --veil-overlay: ${veil.scheme[scheme].overlay};`,
|
|
66
|
+
` --veil-overlay-shadow: ${veil.scheme[scheme].overlayShadow};`,
|
|
67
|
+
];
|
|
68
|
+
|
|
69
|
+
function rootBlock(): string[] {
|
|
70
|
+
const lines = [
|
|
71
|
+
` --glass-blur: ${px(glass.blur)};`,
|
|
72
|
+
` --glass-saturate: ${glass.saturate};`,
|
|
73
|
+
` --glass-rim-width: ${px(glass.rimWidth)};`,
|
|
74
|
+
` --glass-rim-mid-stop: ${ratio(glass.rimMidStop * 100)}%;`,
|
|
75
|
+
...rimLines("light"),
|
|
76
|
+
` --veil-blur: ${px(veil.blur)};`,
|
|
77
|
+
` --veil-saturate: ${veil.saturate};`,
|
|
78
|
+
` --veil-ring-width: ${px(veil.ringWidth)};`,
|
|
79
|
+
...veilLines("light"),
|
|
80
|
+
];
|
|
81
|
+
for (const [name, style] of Object.entries(textStyles)) {
|
|
82
|
+
if ("paragraph" in style) lines.push(` --paragraph-${name}: ${style.paragraph}em;`);
|
|
83
|
+
}
|
|
84
|
+
return lines;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/** The full `theme.css`: Tailwind v4 `@theme` with the light values, `.dark` overrides, and raw `:root` values. */
|
|
88
|
+
export function buildThemeCss(): string {
|
|
89
|
+
const dark = Object.entries(darkColors).map(([name, value]) => ` --color-${name}: ${value};`);
|
|
90
|
+
return [
|
|
91
|
+
"/* Generated by packages/tokens/scripts/build.ts from src/*.ts. Do not edit. */",
|
|
92
|
+
"",
|
|
93
|
+
"@theme static {",
|
|
94
|
+
...themeBlock(),
|
|
95
|
+
"}",
|
|
96
|
+
"",
|
|
97
|
+
":root {",
|
|
98
|
+
...rootBlock(),
|
|
99
|
+
"}",
|
|
100
|
+
"",
|
|
101
|
+
'[data-platform="desktop"] {',
|
|
102
|
+
...textLines("desktop"),
|
|
103
|
+
"}",
|
|
104
|
+
"",
|
|
105
|
+
'[data-platform="mobile"] {',
|
|
106
|
+
...textLines("mobile"),
|
|
107
|
+
"}",
|
|
108
|
+
"",
|
|
109
|
+
".dark {",
|
|
110
|
+
" color-scheme: dark;",
|
|
111
|
+
...dark,
|
|
112
|
+
...rimLines("dark"),
|
|
113
|
+
...veilLines("dark"),
|
|
114
|
+
"}",
|
|
115
|
+
"",
|
|
116
|
+
].join("\n");
|
|
117
|
+
}
|
package/src/glass.ts
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The one glass material every platform draws: web (Chromium, Safari, Firefox),
|
|
3
|
+
* desktop (WebView2, WKWebView) and Flutter (iOS, Android).
|
|
4
|
+
*
|
|
5
|
+
* It is limited to what all of them render the same way, so there is no
|
|
6
|
+
* refraction, no blend mode and no height-dependent blur. Bottom to top:
|
|
7
|
+
*
|
|
8
|
+
* 1. Backdrop: the content behind is blurred by `blur` and saturated by
|
|
9
|
+
* `saturate`. CSS `blur(r)` and Flutter `ImageFilter.blur(sigma)` both take
|
|
10
|
+
* the Gaussian standard deviation, so the same number is passed to both, and
|
|
11
|
+
* both apply the Filter Effects saturate matrix.
|
|
12
|
+
* 2. Fill: the tier colour `glass-clear` / `glass-regular` / `glass-thick` from
|
|
13
|
+
* `color.ts`. Saturation is linear and keeps white, so filling over the
|
|
14
|
+
* saturated backdrop (Flutter) equals saturating backdrop plus fill (CSS).
|
|
15
|
+
* 3. Rim: a `rimWidth` ring inside the edge, a top-to-bottom gradient that is
|
|
16
|
+
* bright at the top, faint at `rimMidStop` and picks up again at the bottom.
|
|
17
|
+
*
|
|
18
|
+
* Elevation is not part of the material: a floating surface adds its own
|
|
19
|
+
* `shadow` from `scale.ts`. Where the backdrop cannot be filtered (no
|
|
20
|
+
* backdrop-filter support, reduced transparency), the fill becomes
|
|
21
|
+
* `glass-fill-frost` and the rim stays.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
export const glass = {
|
|
25
|
+
blur: 20,
|
|
26
|
+
saturate: 1.8,
|
|
27
|
+
rimWidth: 1,
|
|
28
|
+
rimMidStop: 0.5,
|
|
29
|
+
rim: {
|
|
30
|
+
light: { top: "rgba(255, 255, 255, 0.7)", mid: "rgba(255, 255, 255, 0.12)", bottom: "rgba(255, 255, 255, 0.3)" },
|
|
31
|
+
dark: { top: "rgba(255, 255, 255, 0.22)", mid: "rgba(255, 255, 255, 0.04)", bottom: "rgba(255, 255, 255, 0.1)" },
|
|
32
|
+
},
|
|
33
|
+
} as const;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* The veil: a lighter glass for fields and overlays, drawn the same on every
|
|
37
|
+
* platform. The backdrop is blurred by `blur` and saturated by `saturate`, then
|
|
38
|
+
* filled, then a `ringWidth` ring and a soft drop shadow, with no rim gradient.
|
|
39
|
+
*
|
|
40
|
+
* - `field` is a faint wash for inputs that sit on imagery; `fieldFocus` while
|
|
41
|
+
* typing. `fieldShadow` is `0 2px 10px`.
|
|
42
|
+
* - `overlay` is the elevated surface at 74% so menus, popups and dialogs stay
|
|
43
|
+
* readable over any content. `overlayShadow` is `0 6px 24px`.
|
|
44
|
+
*
|
|
45
|
+
* Where the backdrop cannot be filtered (reduced transparency, no
|
|
46
|
+
* backdrop-filter), fields and overlays fall back to `glass-fill-frost`.
|
|
47
|
+
*/
|
|
48
|
+
export const veil = {
|
|
49
|
+
blur: 8,
|
|
50
|
+
saturate: 1.6,
|
|
51
|
+
ringWidth: 1,
|
|
52
|
+
scheme: {
|
|
53
|
+
light: {
|
|
54
|
+
ring: "rgba(23, 24, 26, 0.06)",
|
|
55
|
+
field: "rgba(23, 24, 26, 0.06)",
|
|
56
|
+
fieldFocus: "rgba(23, 24, 26, 0.09)",
|
|
57
|
+
fieldShadow: "rgba(23, 24, 26, 0.06)",
|
|
58
|
+
overlay: "rgba(255, 255, 255, 0.74)",
|
|
59
|
+
overlayShadow: "rgba(23, 24, 26, 0.1)",
|
|
60
|
+
},
|
|
61
|
+
dark: {
|
|
62
|
+
ring: "rgba(255, 255, 255, 0.06)",
|
|
63
|
+
field: "rgba(255, 255, 255, 0.09)",
|
|
64
|
+
fieldFocus: "rgba(255, 255, 255, 0.12)",
|
|
65
|
+
fieldShadow: "rgba(0, 0, 0, 0.06)",
|
|
66
|
+
overlay: "rgba(23, 24, 26, 0.74)",
|
|
67
|
+
overlayShadow: "rgba(0, 0, 0, 0.3)",
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
} as const;
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { darkColors, lightColors, primitives, type ColorToken } from "./color";
|
|
2
|
+
export { buildThemeCss } from "./css";
|
|
3
|
+
export { glass, veil } from "./glass";
|
|
4
|
+
export { radius, shadow, spacing } from "./scale";
|
|
5
|
+
export { fontFamily, fontWeight, platforms, textStyles, type Platform, type TextStyle } from "./typography";
|
package/src/scale.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Spacing and corner radius, read from the Horon Figma file (Scale collection)
|
|
3
|
+
* as the Components board `54:81` resolves them. Values are pixels.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const spacing = {
|
|
7
|
+
"0.5": 2,
|
|
8
|
+
"1": 4,
|
|
9
|
+
"1.5": 6,
|
|
10
|
+
"2": 8,
|
|
11
|
+
"2.5": 10,
|
|
12
|
+
"3": 12,
|
|
13
|
+
"3.5": 14,
|
|
14
|
+
"4": 16,
|
|
15
|
+
"5": 20,
|
|
16
|
+
"6": 24,
|
|
17
|
+
"8": 32,
|
|
18
|
+
} as const;
|
|
19
|
+
|
|
20
|
+
export const radius = {
|
|
21
|
+
none: 0,
|
|
22
|
+
xs: 6,
|
|
23
|
+
sm: 8,
|
|
24
|
+
md: 12,
|
|
25
|
+
lg: 14,
|
|
26
|
+
xl: 20,
|
|
27
|
+
"2xl": 16,
|
|
28
|
+
full: 9999,
|
|
29
|
+
} as const;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Drop shadows read from Figma effects: `popover` on the solid Account and
|
|
33
|
+
* Workspace menus (88:495), `palette` on the Command palette (110:676).
|
|
34
|
+
*/
|
|
35
|
+
export const shadow = {
|
|
36
|
+
popover: "0 8px 24px 0 rgba(10, 13, 15, 0.1)",
|
|
37
|
+
palette: "0 16px 40px 0 rgba(10, 13, 15, 0.12)",
|
|
38
|
+
} as const;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type tokens from the Figma Typography board (`26:2`, Type collection with
|
|
3
|
+
* Web / Desktop / Mobile modes). Sizes and line heights are pixels per
|
|
4
|
+
* platform; tracking and paragraph spacing are em, as the board states them
|
|
5
|
+
* ("Bigger text, tighter tracking"; body paragraphs get 0.75em after them).
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const fontFamily = {
|
|
9
|
+
sans: ["Pretendard Variable", "Pretendard", "system-ui", "sans-serif"],
|
|
10
|
+
mono: ["Geist Mono Variable", "Geist Mono", "ui-monospace", "monospace"],
|
|
11
|
+
} as const;
|
|
12
|
+
|
|
13
|
+
/** The four product weights: "Regular, Medium, SemiBold, Bold. No Thin or Light in the product." */
|
|
14
|
+
export const fontWeight = {
|
|
15
|
+
regular: 400,
|
|
16
|
+
medium: 500,
|
|
17
|
+
semibold: 600,
|
|
18
|
+
bold: 700,
|
|
19
|
+
} as const;
|
|
20
|
+
|
|
21
|
+
export const platforms = ["web", "desktop", "mobile"] as const;
|
|
22
|
+
export type Platform = (typeof platforms)[number];
|
|
23
|
+
|
|
24
|
+
export type TextStyle = {
|
|
25
|
+
family: keyof typeof fontFamily;
|
|
26
|
+
weight: keyof typeof fontWeight;
|
|
27
|
+
/** Letter spacing in em. */
|
|
28
|
+
tracking: number;
|
|
29
|
+
/** Space after a paragraph in em, body styles only. */
|
|
30
|
+
paragraph?: number;
|
|
31
|
+
size: Record<Platform, number>;
|
|
32
|
+
lineHeight: Record<Platform, number>;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/** The thirteen styles. "No one-off sizes. If a size is missing, add a token for every platform at once." */
|
|
36
|
+
export const textStyles = {
|
|
37
|
+
"display-lg": {
|
|
38
|
+
family: "sans",
|
|
39
|
+
weight: "bold",
|
|
40
|
+
tracking: -0.03,
|
|
41
|
+
size: { web: 56, desktop: 48, mobile: 36 },
|
|
42
|
+
lineHeight: { web: 68, desktop: 58, mobile: 44 },
|
|
43
|
+
},
|
|
44
|
+
"display-md": {
|
|
45
|
+
family: "sans",
|
|
46
|
+
weight: "bold",
|
|
47
|
+
tracking: -0.025,
|
|
48
|
+
size: { web: 44, desktop: 40, mobile: 30 },
|
|
49
|
+
lineHeight: { web: 52, desktop: 48, mobile: 36 },
|
|
50
|
+
},
|
|
51
|
+
"title-lg": {
|
|
52
|
+
family: "sans",
|
|
53
|
+
weight: "semibold",
|
|
54
|
+
tracking: -0.02,
|
|
55
|
+
size: { web: 32, desktop: 28, mobile: 24 },
|
|
56
|
+
lineHeight: { web: 40, desktop: 36, mobile: 32 },
|
|
57
|
+
},
|
|
58
|
+
"title-md": {
|
|
59
|
+
family: "sans",
|
|
60
|
+
weight: "semibold",
|
|
61
|
+
tracking: -0.015,
|
|
62
|
+
size: { web: 24, desktop: 22, mobile: 20 },
|
|
63
|
+
lineHeight: { web: 32, desktop: 28, mobile: 28 },
|
|
64
|
+
},
|
|
65
|
+
"title-sm": {
|
|
66
|
+
family: "sans",
|
|
67
|
+
weight: "semibold",
|
|
68
|
+
tracking: -0.01,
|
|
69
|
+
size: { web: 20, desktop: 18, mobile: 18 },
|
|
70
|
+
lineHeight: { web: 28, desktop: 26, mobile: 26 },
|
|
71
|
+
},
|
|
72
|
+
"body-lg": {
|
|
73
|
+
family: "sans",
|
|
74
|
+
weight: "regular",
|
|
75
|
+
tracking: -0.008,
|
|
76
|
+
paragraph: 0.75,
|
|
77
|
+
size: { web: 18, desktop: 16, mobile: 17 },
|
|
78
|
+
lineHeight: { web: 30, desktop: 26, mobile: 28 },
|
|
79
|
+
},
|
|
80
|
+
"body-md": {
|
|
81
|
+
family: "sans",
|
|
82
|
+
weight: "regular",
|
|
83
|
+
tracking: -0.005,
|
|
84
|
+
paragraph: 0.75,
|
|
85
|
+
size: { web: 16, desktop: 14, mobile: 16 },
|
|
86
|
+
lineHeight: { web: 26, desktop: 22, mobile: 26 },
|
|
87
|
+
},
|
|
88
|
+
"body-sm": {
|
|
89
|
+
family: "sans",
|
|
90
|
+
weight: "regular",
|
|
91
|
+
tracking: -0.002,
|
|
92
|
+
paragraph: 0.75,
|
|
93
|
+
size: { web: 14, desktop: 13, mobile: 14 },
|
|
94
|
+
lineHeight: { web: 22, desktop: 20, mobile: 22 },
|
|
95
|
+
},
|
|
96
|
+
"label-lg": {
|
|
97
|
+
family: "sans",
|
|
98
|
+
weight: "medium",
|
|
99
|
+
tracking: -0.005,
|
|
100
|
+
size: { web: 16, desktop: 14, mobile: 16 },
|
|
101
|
+
lineHeight: { web: 22, desktop: 20, mobile: 22 },
|
|
102
|
+
},
|
|
103
|
+
"label-md": {
|
|
104
|
+
family: "sans",
|
|
105
|
+
weight: "medium",
|
|
106
|
+
tracking: -0.003,
|
|
107
|
+
size: { web: 14, desktop: 13, mobile: 14 },
|
|
108
|
+
lineHeight: { web: 20, desktop: 18, mobile: 20 },
|
|
109
|
+
},
|
|
110
|
+
"label-sm": {
|
|
111
|
+
family: "sans",
|
|
112
|
+
weight: "medium",
|
|
113
|
+
tracking: 0.0,
|
|
114
|
+
size: { web: 12, desktop: 11, mobile: 12 },
|
|
115
|
+
lineHeight: { web: 16, desktop: 16, mobile: 16 },
|
|
116
|
+
},
|
|
117
|
+
caption: {
|
|
118
|
+
family: "sans",
|
|
119
|
+
weight: "regular",
|
|
120
|
+
tracking: 0.005,
|
|
121
|
+
size: { web: 12, desktop: 11, mobile: 12 },
|
|
122
|
+
lineHeight: { web: 18, desktop: 18, mobile: 18 },
|
|
123
|
+
},
|
|
124
|
+
code: {
|
|
125
|
+
family: "mono",
|
|
126
|
+
weight: "regular",
|
|
127
|
+
tracking: 0.0,
|
|
128
|
+
size: { web: 14, desktop: 13, mobile: 13 },
|
|
129
|
+
lineHeight: { web: 22, desktop: 20, mobile: 20 },
|
|
130
|
+
},
|
|
131
|
+
} as const satisfies Record<string, TextStyle>;
|
package/theme.css
ADDED
|
@@ -0,0 +1,396 @@
|
|
|
1
|
+
/* Generated by packages/tokens/scripts/build.ts from src/*.ts. Do not edit. */
|
|
2
|
+
|
|
3
|
+
@theme static {
|
|
4
|
+
--color-*: initial;
|
|
5
|
+
--radius-*: initial;
|
|
6
|
+
--text-*: initial;
|
|
7
|
+
--font-*: initial;
|
|
8
|
+
--font-weight-*: initial;
|
|
9
|
+
--shadow-*: initial;
|
|
10
|
+
|
|
11
|
+
--color-bg-brand: #f3f7fa;
|
|
12
|
+
--color-bg-danger: #fff4f2;
|
|
13
|
+
--color-bg-default: #ffffff;
|
|
14
|
+
--color-bg-scrim: #0b0c0e;
|
|
15
|
+
--color-bg-subtle: #f3f4f5;
|
|
16
|
+
--color-bg-surface: #ffffff;
|
|
17
|
+
--color-bg-surface-6: #ffffff0f;
|
|
18
|
+
--color-bg-surface-70: #ffffffb2;
|
|
19
|
+
--color-bg-surface-75: #ffffffbf;
|
|
20
|
+
--color-bg-surface-80: #ffffffcc;
|
|
21
|
+
--color-bg-surface-85: #ffffffd9;
|
|
22
|
+
--color-bg-surface-90: #ffffffe5;
|
|
23
|
+
--color-bg-surface-95: #fffffff2;
|
|
24
|
+
--color-surface-ink: #17181a;
|
|
25
|
+
--color-text-brand: #3b617b;
|
|
26
|
+
--color-text-danger: #993a33;
|
|
27
|
+
--color-text-disabled: #b0b1b3;
|
|
28
|
+
--color-text-inverse: #f9fafb;
|
|
29
|
+
--color-text-on-ink: #ffffff;
|
|
30
|
+
--color-text-placeholder: #7e8082;
|
|
31
|
+
--color-text-placeholder-12: #7e80821f;
|
|
32
|
+
--color-text-placeholder-18: #7e80822e;
|
|
33
|
+
--color-text-placeholder-90: #7e8082e5;
|
|
34
|
+
--color-text-primary: #17181a;
|
|
35
|
+
--color-text-secondary: #5f6163;
|
|
36
|
+
--color-border-brand: #b7cedf;
|
|
37
|
+
--color-border-danger: #e39289;
|
|
38
|
+
--color-border-default: #e5e6e7;
|
|
39
|
+
--color-border-strong: #d3d4d6;
|
|
40
|
+
--color-interactive-danger: #b84e45;
|
|
41
|
+
--color-interactive-danger-hover: #993a33;
|
|
42
|
+
--color-interactive-on-danger: #ffffff;
|
|
43
|
+
--color-interactive-on-primary: #ffffff;
|
|
44
|
+
--color-interactive-primary: #17181a;
|
|
45
|
+
--color-interactive-primary-12: #17181a1f;
|
|
46
|
+
--color-interactive-primary-75: #17181abf;
|
|
47
|
+
--color-interactive-primary-90: #17181ae5;
|
|
48
|
+
--color-interactive-primary-hover: #2a2b2d;
|
|
49
|
+
--color-interactive-primary-pressed: #434547;
|
|
50
|
+
--color-interactive-secondary-hover: #e5e6e7;
|
|
51
|
+
--color-status-live: #7199b6;
|
|
52
|
+
--color-glass-clear: #ffffff33;
|
|
53
|
+
--color-glass-clear-hover: #ffffff4d;
|
|
54
|
+
--color-glass-clear-pressed: #ffffff66;
|
|
55
|
+
--color-glass-fill-frost: #ffffffe5;
|
|
56
|
+
--color-glass-fill-solid: #ffffff;
|
|
57
|
+
--color-glass-regular: #ffffff8c;
|
|
58
|
+
--color-glass-rim: #ffffff52;
|
|
59
|
+
--color-glass-rim-strong: #ffffff66;
|
|
60
|
+
--color-glass-thick: #ffffffcc;
|
|
61
|
+
--color-overlay-ink-10: #0000001a;
|
|
62
|
+
--color-overlay-ink-12: #0000001f;
|
|
63
|
+
--color-overlay-ink-14: #00000024;
|
|
64
|
+
--color-overlay-ink-16: #00000029;
|
|
65
|
+
--color-overlay-ink-18: #0000002e;
|
|
66
|
+
--color-overlay-ink-20: #00000033;
|
|
67
|
+
--color-overlay-ink-3: #00000008;
|
|
68
|
+
--color-overlay-ink-30: #0000004d;
|
|
69
|
+
--color-overlay-ink-35: #00000059;
|
|
70
|
+
--color-overlay-ink-4: #0000000a;
|
|
71
|
+
--color-overlay-ink-5: #0000000d;
|
|
72
|
+
--color-overlay-ink-55: #0000008c;
|
|
73
|
+
--color-overlay-ink-6: #0000000f;
|
|
74
|
+
--color-overlay-ink-7: #00000012;
|
|
75
|
+
--color-overlay-ink-8: #00000014;
|
|
76
|
+
--color-overlay-ink-80: #000000cc;
|
|
77
|
+
--color-accent-red-500-14: #d36d6324;
|
|
78
|
+
--color-accent-red-500-90: #d36d63e5;
|
|
79
|
+
--color-accent-sky-500-10: #7199b61a;
|
|
80
|
+
--color-accent-sky-500-12: #7199b61f;
|
|
81
|
+
--color-accent-sky-500-16: #7199b629;
|
|
82
|
+
--color-accent-sky-500-18: #7199b62e;
|
|
83
|
+
--color-accent-sky-500-20: #7199b633;
|
|
84
|
+
--color-accent-sky-500-60: #7199b699;
|
|
85
|
+
--color-accent-sky-500-90: #7199b6e5;
|
|
86
|
+
--color-accent-sky-700-12: #3b617b1f;
|
|
87
|
+
--color-accent-sky-700-18: #3b617b2e;
|
|
88
|
+
--color-accent-sky-700-90: #3b617be5;
|
|
89
|
+
--color-syntax-key: #3b617b;
|
|
90
|
+
--color-syntax-number: #527b98;
|
|
91
|
+
--color-syntax-punctuation: #b0b1b3;
|
|
92
|
+
--color-syntax-string: #17181a;
|
|
93
|
+
--color-border-focus: #527b98;
|
|
94
|
+
--color-interactive-secondary: #f3f4f5;
|
|
95
|
+
--color-glass-fill: #ffffff52;
|
|
96
|
+
--color-glass-fill-strong: #ffffff8c;
|
|
97
|
+
--color-glass-border: #ffffff99;
|
|
98
|
+
--color-glass-tint: #0b0c0e0a;
|
|
99
|
+
--color-glass-rim-frost: #ffffffb3;
|
|
100
|
+
--color-bg-inset: #fcfcfd;
|
|
101
|
+
--color-border-dashed: #c9cbcd;
|
|
102
|
+
--color-red-500: #d36d63;
|
|
103
|
+
--color-sky-100: #e7eff5;
|
|
104
|
+
--color-sky-200: #d2e0eb;
|
|
105
|
+
--color-sky-400: #95b6ce;
|
|
106
|
+
--color-sky-500: #7199b6;
|
|
107
|
+
--color-sky-600: #527b98;
|
|
108
|
+
--color-sky-700: #3b617b;
|
|
109
|
+
--color-sky-800: #2a495e;
|
|
110
|
+
--color-neutral-50: #f9fafb;
|
|
111
|
+
--color-neutral-100: #f3f4f5;
|
|
112
|
+
--color-neutral-200: #e5e6e7;
|
|
113
|
+
--color-neutral-300: #d3d4d6;
|
|
114
|
+
--color-neutral-400: #b0b1b3;
|
|
115
|
+
--color-neutral-500: #7e8082;
|
|
116
|
+
--color-neutral-600: #5f6163;
|
|
117
|
+
--color-neutral-700: #434547;
|
|
118
|
+
--color-neutral-800: #2a2b2d;
|
|
119
|
+
--color-neutral-900: #17181a;
|
|
120
|
+
--color-neutral-950: #0b0c0e;
|
|
121
|
+
--color-red-50: #fff4f2;
|
|
122
|
+
--color-red-100: #fde7e4;
|
|
123
|
+
--color-red-200: #f9d2cc;
|
|
124
|
+
--color-red-300: #f2b7af;
|
|
125
|
+
--color-red-400: #e39289;
|
|
126
|
+
--color-red-600: #b84e45;
|
|
127
|
+
--color-red-700: #993a33;
|
|
128
|
+
--color-red-800: #782a25;
|
|
129
|
+
--color-red-900: #5a1d19;
|
|
130
|
+
--color-red-950: #3d110e;
|
|
131
|
+
--color-sky-50: #f3f7fa;
|
|
132
|
+
--color-sky-300: #b7cedf;
|
|
133
|
+
--color-sky-900: #1b3343;
|
|
134
|
+
--color-sky-950: #0f202c;
|
|
135
|
+
--color-base-white: #ffffff;
|
|
136
|
+
--color-base-black: #000000;
|
|
137
|
+
--color-mascot-ink: #1c1a17;
|
|
138
|
+
--color-mascot-cream: #fbf7f0;
|
|
139
|
+
--color-mascot-gold: #e0921f;
|
|
140
|
+
|
|
141
|
+
--radius-none: 0;
|
|
142
|
+
--radius-xs: 6px;
|
|
143
|
+
--radius-sm: 8px;
|
|
144
|
+
--radius-md: 12px;
|
|
145
|
+
--radius-lg: 14px;
|
|
146
|
+
--radius-xl: 20px;
|
|
147
|
+
--radius-2xl: 16px;
|
|
148
|
+
--radius-full: 9999px;
|
|
149
|
+
|
|
150
|
+
--shadow-popover: 0 8px 24px 0 rgba(10, 13, 15, 0.1);
|
|
151
|
+
--shadow-palette: 0 16px 40px 0 rgba(10, 13, 15, 0.12);
|
|
152
|
+
|
|
153
|
+
--font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
|
|
154
|
+
--font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
|
|
155
|
+
--font-weight-regular: 400;
|
|
156
|
+
--font-weight-medium: 500;
|
|
157
|
+
--font-weight-semibold: 600;
|
|
158
|
+
--font-weight-bold: 700;
|
|
159
|
+
|
|
160
|
+
--text-display-lg: 56px;
|
|
161
|
+
--text-display-lg--line-height: 68px;
|
|
162
|
+
--text-display-lg--letter-spacing: -0.03em;
|
|
163
|
+
--text-display-lg--font-weight: 700;
|
|
164
|
+
--text-display-md: 44px;
|
|
165
|
+
--text-display-md--line-height: 52px;
|
|
166
|
+
--text-display-md--letter-spacing: -0.025em;
|
|
167
|
+
--text-display-md--font-weight: 700;
|
|
168
|
+
--text-title-lg: 32px;
|
|
169
|
+
--text-title-lg--line-height: 40px;
|
|
170
|
+
--text-title-lg--letter-spacing: -0.02em;
|
|
171
|
+
--text-title-lg--font-weight: 600;
|
|
172
|
+
--text-title-md: 24px;
|
|
173
|
+
--text-title-md--line-height: 32px;
|
|
174
|
+
--text-title-md--letter-spacing: -0.015em;
|
|
175
|
+
--text-title-md--font-weight: 600;
|
|
176
|
+
--text-title-sm: 20px;
|
|
177
|
+
--text-title-sm--line-height: 28px;
|
|
178
|
+
--text-title-sm--letter-spacing: -0.01em;
|
|
179
|
+
--text-title-sm--font-weight: 600;
|
|
180
|
+
--text-body-lg: 18px;
|
|
181
|
+
--text-body-lg--line-height: 30px;
|
|
182
|
+
--text-body-lg--letter-spacing: -0.008em;
|
|
183
|
+
--text-body-lg--font-weight: 400;
|
|
184
|
+
--text-body-md: 16px;
|
|
185
|
+
--text-body-md--line-height: 26px;
|
|
186
|
+
--text-body-md--letter-spacing: -0.005em;
|
|
187
|
+
--text-body-md--font-weight: 400;
|
|
188
|
+
--text-body-sm: 14px;
|
|
189
|
+
--text-body-sm--line-height: 22px;
|
|
190
|
+
--text-body-sm--letter-spacing: -0.002em;
|
|
191
|
+
--text-body-sm--font-weight: 400;
|
|
192
|
+
--text-label-lg: 16px;
|
|
193
|
+
--text-label-lg--line-height: 22px;
|
|
194
|
+
--text-label-lg--letter-spacing: -0.005em;
|
|
195
|
+
--text-label-lg--font-weight: 500;
|
|
196
|
+
--text-label-md: 14px;
|
|
197
|
+
--text-label-md--line-height: 20px;
|
|
198
|
+
--text-label-md--letter-spacing: -0.003em;
|
|
199
|
+
--text-label-md--font-weight: 500;
|
|
200
|
+
--text-label-sm: 12px;
|
|
201
|
+
--text-label-sm--line-height: 16px;
|
|
202
|
+
--text-label-sm--letter-spacing: 0;
|
|
203
|
+
--text-label-sm--font-weight: 500;
|
|
204
|
+
--text-caption: 12px;
|
|
205
|
+
--text-caption--line-height: 18px;
|
|
206
|
+
--text-caption--letter-spacing: 0.005em;
|
|
207
|
+
--text-caption--font-weight: 400;
|
|
208
|
+
--text-code: 14px;
|
|
209
|
+
--text-code--line-height: 22px;
|
|
210
|
+
--text-code--letter-spacing: 0;
|
|
211
|
+
--text-code--font-weight: 400;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:root {
|
|
215
|
+
--glass-blur: 20px;
|
|
216
|
+
--glass-saturate: 1.8;
|
|
217
|
+
--glass-rim-width: 1px;
|
|
218
|
+
--glass-rim-mid-stop: 50%;
|
|
219
|
+
--glass-rim-top: rgba(255, 255, 255, 0.7);
|
|
220
|
+
--glass-rim-mid: rgba(255, 255, 255, 0.12);
|
|
221
|
+
--glass-rim-bottom: rgba(255, 255, 255, 0.3);
|
|
222
|
+
--veil-blur: 8px;
|
|
223
|
+
--veil-saturate: 1.6;
|
|
224
|
+
--veil-ring-width: 1px;
|
|
225
|
+
--veil-ring: rgba(23, 24, 26, 0.06);
|
|
226
|
+
--veil-field: rgba(23, 24, 26, 0.06);
|
|
227
|
+
--veil-field-focus: rgba(23, 24, 26, 0.09);
|
|
228
|
+
--veil-field-shadow: rgba(23, 24, 26, 0.06);
|
|
229
|
+
--veil-overlay: rgba(255, 255, 255, 0.74);
|
|
230
|
+
--veil-overlay-shadow: rgba(23, 24, 26, 0.1);
|
|
231
|
+
--paragraph-body-lg: 0.75em;
|
|
232
|
+
--paragraph-body-md: 0.75em;
|
|
233
|
+
--paragraph-body-sm: 0.75em;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
[data-platform="desktop"] {
|
|
237
|
+
--text-display-lg: 48px;
|
|
238
|
+
--text-display-lg--line-height: 58px;
|
|
239
|
+
--text-display-md: 40px;
|
|
240
|
+
--text-display-md--line-height: 48px;
|
|
241
|
+
--text-title-lg: 28px;
|
|
242
|
+
--text-title-lg--line-height: 36px;
|
|
243
|
+
--text-title-md: 22px;
|
|
244
|
+
--text-title-md--line-height: 28px;
|
|
245
|
+
--text-title-sm: 18px;
|
|
246
|
+
--text-title-sm--line-height: 26px;
|
|
247
|
+
--text-body-lg: 16px;
|
|
248
|
+
--text-body-lg--line-height: 26px;
|
|
249
|
+
--text-body-md: 14px;
|
|
250
|
+
--text-body-md--line-height: 22px;
|
|
251
|
+
--text-body-sm: 13px;
|
|
252
|
+
--text-body-sm--line-height: 20px;
|
|
253
|
+
--text-label-lg: 14px;
|
|
254
|
+
--text-label-lg--line-height: 20px;
|
|
255
|
+
--text-label-md: 13px;
|
|
256
|
+
--text-label-md--line-height: 18px;
|
|
257
|
+
--text-label-sm: 11px;
|
|
258
|
+
--text-label-sm--line-height: 16px;
|
|
259
|
+
--text-caption: 11px;
|
|
260
|
+
--text-caption--line-height: 18px;
|
|
261
|
+
--text-code: 13px;
|
|
262
|
+
--text-code--line-height: 20px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
[data-platform="mobile"] {
|
|
266
|
+
--text-display-lg: 36px;
|
|
267
|
+
--text-display-lg--line-height: 44px;
|
|
268
|
+
--text-display-md: 30px;
|
|
269
|
+
--text-display-md--line-height: 36px;
|
|
270
|
+
--text-title-lg: 24px;
|
|
271
|
+
--text-title-lg--line-height: 32px;
|
|
272
|
+
--text-title-md: 20px;
|
|
273
|
+
--text-title-md--line-height: 28px;
|
|
274
|
+
--text-title-sm: 18px;
|
|
275
|
+
--text-title-sm--line-height: 26px;
|
|
276
|
+
--text-body-lg: 17px;
|
|
277
|
+
--text-body-lg--line-height: 28px;
|
|
278
|
+
--text-body-md: 16px;
|
|
279
|
+
--text-body-md--line-height: 26px;
|
|
280
|
+
--text-body-sm: 14px;
|
|
281
|
+
--text-body-sm--line-height: 22px;
|
|
282
|
+
--text-label-lg: 16px;
|
|
283
|
+
--text-label-lg--line-height: 22px;
|
|
284
|
+
--text-label-md: 14px;
|
|
285
|
+
--text-label-md--line-height: 20px;
|
|
286
|
+
--text-label-sm: 12px;
|
|
287
|
+
--text-label-sm--line-height: 16px;
|
|
288
|
+
--text-caption: 12px;
|
|
289
|
+
--text-caption--line-height: 18px;
|
|
290
|
+
--text-code: 13px;
|
|
291
|
+
--text-code--line-height: 20px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.dark {
|
|
295
|
+
color-scheme: dark;
|
|
296
|
+
--color-bg-brand: #0f202c;
|
|
297
|
+
--color-bg-danger: #3d110e;
|
|
298
|
+
--color-bg-default: #0b0c0e;
|
|
299
|
+
--color-bg-scrim: #0b0c0e;
|
|
300
|
+
--color-bg-subtle: #2a2b2d;
|
|
301
|
+
--color-bg-surface: #17181a;
|
|
302
|
+
--color-bg-surface-6: #17181a0f;
|
|
303
|
+
--color-bg-surface-70: #17181ab2;
|
|
304
|
+
--color-bg-surface-75: #17181abf;
|
|
305
|
+
--color-bg-surface-80: #17181acc;
|
|
306
|
+
--color-bg-surface-85: #17181ad9;
|
|
307
|
+
--color-bg-surface-90: #17181ae5;
|
|
308
|
+
--color-bg-surface-95: #17181af2;
|
|
309
|
+
--color-surface-ink: #2a2b2d;
|
|
310
|
+
--color-text-brand: #b7cedf;
|
|
311
|
+
--color-text-danger: #f2b7af;
|
|
312
|
+
--color-text-disabled: #5f6163;
|
|
313
|
+
--color-text-inverse: #17181a;
|
|
314
|
+
--color-text-on-ink: #f9fafb;
|
|
315
|
+
--color-text-placeholder: #7e8082;
|
|
316
|
+
--color-text-placeholder-12: #7e80821f;
|
|
317
|
+
--color-text-placeholder-18: #7e80822e;
|
|
318
|
+
--color-text-placeholder-90: #7e8082e5;
|
|
319
|
+
--color-text-primary: #f9fafb;
|
|
320
|
+
--color-text-secondary: #b0b1b3;
|
|
321
|
+
--color-border-brand: #3b617b;
|
|
322
|
+
--color-border-danger: #d36d63;
|
|
323
|
+
--color-border-default: #2a2b2d;
|
|
324
|
+
--color-border-strong: #434547;
|
|
325
|
+
--color-interactive-danger: #d36d63;
|
|
326
|
+
--color-interactive-danger-hover: #e39289;
|
|
327
|
+
--color-interactive-on-danger: #0b0c0e;
|
|
328
|
+
--color-interactive-on-primary: #0b0c0e;
|
|
329
|
+
--color-interactive-primary: #f9fafb;
|
|
330
|
+
--color-interactive-primary-12: #f9fafb1f;
|
|
331
|
+
--color-interactive-primary-75: #f9fafbbf;
|
|
332
|
+
--color-interactive-primary-90: #f9fafbe5;
|
|
333
|
+
--color-interactive-primary-hover: #e5e6e7;
|
|
334
|
+
--color-interactive-primary-pressed: #d3d4d6;
|
|
335
|
+
--color-interactive-secondary-hover: #434547;
|
|
336
|
+
--color-status-live: #95b6ce;
|
|
337
|
+
--color-glass-clear: #ffffff1a;
|
|
338
|
+
--color-glass-clear-hover: #ffffff24;
|
|
339
|
+
--color-glass-clear-pressed: #ffffff2e;
|
|
340
|
+
--color-glass-fill-frost: #17181ae5;
|
|
341
|
+
--color-glass-fill-solid: #17181a;
|
|
342
|
+
--color-glass-regular: #ffffff24;
|
|
343
|
+
--color-glass-rim: #ffffff14;
|
|
344
|
+
--color-glass-rim-strong: #ffffff24;
|
|
345
|
+
--color-glass-thick: #ffffff33;
|
|
346
|
+
--color-overlay-ink-10: #ffffff1a;
|
|
347
|
+
--color-overlay-ink-12: #ffffff1f;
|
|
348
|
+
--color-overlay-ink-14: #ffffff24;
|
|
349
|
+
--color-overlay-ink-16: #ffffff29;
|
|
350
|
+
--color-overlay-ink-18: #ffffff2e;
|
|
351
|
+
--color-overlay-ink-20: #ffffff33;
|
|
352
|
+
--color-overlay-ink-3: #ffffff08;
|
|
353
|
+
--color-overlay-ink-30: #ffffff4d;
|
|
354
|
+
--color-overlay-ink-35: #ffffff59;
|
|
355
|
+
--color-overlay-ink-4: #ffffff0a;
|
|
356
|
+
--color-overlay-ink-5: #ffffff0d;
|
|
357
|
+
--color-overlay-ink-55: #ffffff8c;
|
|
358
|
+
--color-overlay-ink-6: #ffffff0f;
|
|
359
|
+
--color-overlay-ink-7: #ffffff12;
|
|
360
|
+
--color-overlay-ink-8: #ffffff14;
|
|
361
|
+
--color-overlay-ink-80: #ffffffcc;
|
|
362
|
+
--color-accent-red-500-14: #d36d6324;
|
|
363
|
+
--color-accent-red-500-90: #d36d63e5;
|
|
364
|
+
--color-accent-sky-500-10: #7199b61a;
|
|
365
|
+
--color-accent-sky-500-12: #7199b61f;
|
|
366
|
+
--color-accent-sky-500-16: #7199b629;
|
|
367
|
+
--color-accent-sky-500-18: #7199b62e;
|
|
368
|
+
--color-accent-sky-500-20: #7199b633;
|
|
369
|
+
--color-accent-sky-500-60: #7199b699;
|
|
370
|
+
--color-accent-sky-500-90: #7199b6e5;
|
|
371
|
+
--color-accent-sky-700-12: #3b617b1f;
|
|
372
|
+
--color-accent-sky-700-18: #3b617b2e;
|
|
373
|
+
--color-accent-sky-700-90: #3b617be5;
|
|
374
|
+
--color-syntax-key: #b7cedf;
|
|
375
|
+
--color-syntax-number: #95b6ce;
|
|
376
|
+
--color-syntax-punctuation: #7e8082;
|
|
377
|
+
--color-syntax-string: #f9fafb;
|
|
378
|
+
--color-border-focus: #95b6ce;
|
|
379
|
+
--color-interactive-secondary: #2a2b2d;
|
|
380
|
+
--color-glass-fill: #17181a8c;
|
|
381
|
+
--color-glass-fill-strong: #17181ab8;
|
|
382
|
+
--color-glass-border: #ffffff1f;
|
|
383
|
+
--color-glass-tint: #ffffff0f;
|
|
384
|
+
--color-glass-rim-frost: #ffffff1f;
|
|
385
|
+
--color-bg-inset: #141518;
|
|
386
|
+
--color-border-dashed: #4a4c4f;
|
|
387
|
+
--glass-rim-top: rgba(255, 255, 255, 0.22);
|
|
388
|
+
--glass-rim-mid: rgba(255, 255, 255, 0.04);
|
|
389
|
+
--glass-rim-bottom: rgba(255, 255, 255, 0.1);
|
|
390
|
+
--veil-ring: rgba(255, 255, 255, 0.06);
|
|
391
|
+
--veil-field: rgba(255, 255, 255, 0.09);
|
|
392
|
+
--veil-field-focus: rgba(255, 255, 255, 0.12);
|
|
393
|
+
--veil-field-shadow: rgba(0, 0, 0, 0.06);
|
|
394
|
+
--veil-overlay: rgba(23, 24, 26, 0.74);
|
|
395
|
+
--veil-overlay-shadow: rgba(0, 0, 0, 0.3);
|
|
396
|
+
}
|