@tide-tds/foundation 0.1.0 → 0.2.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/dist/cli.js +699 -0
- package/dist/color-css.d.ts +46 -0
- package/dist/color-css.js +105 -0
- package/dist/color-family.d.ts +54 -0
- package/dist/color-family.js +112 -0
- package/dist/color-name.d.ts +40 -0
- package/dist/color-name.js +61 -0
- package/dist/color-slot.d.ts +80 -0
- package/dist/color-slot.js +90 -0
- package/dist/color.d.ts +4 -4
- package/dist/contrast.d.ts +28 -2
- package/dist/contrast.js +40 -1
- package/dist/index.d.ts +3 -2
- package/dist/internal.d.ts +6 -3
- package/dist/internal.js +6 -3
- package/dist/semantic.d.ts +148 -246
- package/dist/semantic.js +102 -243
- package/dist/tailwind-merge.js +34 -14
- package/dist/tailwind.css +9 -0
- package/dist/tokens.css +359 -89
- package/package.json +8 -1
package/dist/semantic.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { primitiveHex } from "./color.js";
|
|
2
|
+
import { colorSlots, familyOverrides, resolveSlotSteps, slotPrimitive } from "./color-slot.js";
|
|
2
3
|
|
|
3
4
|
// src/semantic.ts
|
|
4
5
|
/**
|
|
@@ -13,255 +14,113 @@ const roleFamily = {
|
|
|
13
14
|
danger: "red",
|
|
14
15
|
info: "cyan"
|
|
15
16
|
};
|
|
17
|
+
/**
|
|
18
|
+
* Role별로 계열 규칙에서 덮어쓸 값.
|
|
19
|
+
* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
|
|
20
|
+
*/
|
|
21
|
+
const roleOverrides = { neutral: {
|
|
22
|
+
subtle: { dark: 900 },
|
|
23
|
+
"subtle-hover": { dark: 800 },
|
|
24
|
+
"subtle-active": { dark: 700 }
|
|
25
|
+
} };
|
|
26
|
+
/**
|
|
27
|
+
* 역할 Token 대신 공통 Semantic Token을 쓰는 Role 슬롯. on-solid는 모든 Role이 `text-on-solid`를 쓴다.
|
|
28
|
+
* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
|
|
29
|
+
*/
|
|
30
|
+
const roleSharedSlots = { neutral: {
|
|
31
|
+
text: "text-default",
|
|
32
|
+
border: "border-strong"
|
|
33
|
+
} };
|
|
34
|
+
const roles = Object.keys(roleFamily);
|
|
35
|
+
const backgroundSlots = colorSlots.filter((slot) => slot !== "text" && slot !== "border" && slot !== "on-solid");
|
|
36
|
+
const accentRoles = roles.filter((role) => !(role in roleSharedSlots));
|
|
37
|
+
/** Role 슬롯이 가리키는 Primitive. 계열 규칙 → 계열 덮어쓸 값 → Role 덮어쓸 값 순서로 얹는다. */
|
|
38
|
+
function roleSlotColor(role, slot) {
|
|
39
|
+
const family = roleFamily[role];
|
|
40
|
+
const steps = resolveSlotSteps(familyOverrides[family], roleOverrides[role])[slot];
|
|
41
|
+
return {
|
|
42
|
+
light: slotPrimitive(family, steps.light),
|
|
43
|
+
dark: slotPrimitive(family, steps.dark)
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
const commonBackground = {
|
|
47
|
+
canvas: {
|
|
48
|
+
light: "white",
|
|
49
|
+
dark: "gray-950"
|
|
50
|
+
},
|
|
51
|
+
surface: {
|
|
52
|
+
light: "white",
|
|
53
|
+
dark: "gray-950"
|
|
54
|
+
},
|
|
55
|
+
raised: {
|
|
56
|
+
light: "white",
|
|
57
|
+
dark: "gray-900"
|
|
58
|
+
},
|
|
59
|
+
disabled: {
|
|
60
|
+
light: "gray-100",
|
|
61
|
+
dark: "gray-900"
|
|
62
|
+
},
|
|
63
|
+
overlay: {
|
|
64
|
+
light: {
|
|
65
|
+
primitive: "gray-950",
|
|
66
|
+
alpha: .5
|
|
67
|
+
},
|
|
68
|
+
dark: {
|
|
69
|
+
primitive: "gray-950",
|
|
70
|
+
alpha: .7
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const commonText = {
|
|
75
|
+
default: {
|
|
76
|
+
light: "gray-900",
|
|
77
|
+
dark: "gray-50"
|
|
78
|
+
},
|
|
79
|
+
muted: {
|
|
80
|
+
light: "gray-600",
|
|
81
|
+
dark: "gray-300"
|
|
82
|
+
},
|
|
83
|
+
disabled: {
|
|
84
|
+
light: "gray-400",
|
|
85
|
+
dark: "gray-600"
|
|
86
|
+
},
|
|
87
|
+
"on-solid": {
|
|
88
|
+
light: "white",
|
|
89
|
+
dark: "white"
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const commonBorder = {
|
|
93
|
+
default: {
|
|
94
|
+
light: "gray-200",
|
|
95
|
+
dark: "gray-800"
|
|
96
|
+
},
|
|
97
|
+
strong: {
|
|
98
|
+
light: "gray-500",
|
|
99
|
+
dark: "gray-400"
|
|
100
|
+
},
|
|
101
|
+
raised: {
|
|
102
|
+
light: "transparent",
|
|
103
|
+
dark: "gray-800"
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
const commonOutline = { focus: {
|
|
107
|
+
light: "blue-600",
|
|
108
|
+
dark: "blue-400"
|
|
109
|
+
} };
|
|
16
110
|
const semantic = {
|
|
17
111
|
background: {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
dark: "gray-950"
|
|
21
|
-
},
|
|
22
|
-
surface: {
|
|
23
|
-
light: "white",
|
|
24
|
-
dark: "gray-950"
|
|
25
|
-
},
|
|
26
|
-
raised: {
|
|
27
|
-
light: "white",
|
|
28
|
-
dark: "gray-900"
|
|
29
|
-
},
|
|
30
|
-
disabled: {
|
|
31
|
-
light: "gray-100",
|
|
32
|
-
dark: "gray-900"
|
|
33
|
-
},
|
|
34
|
-
overlay: {
|
|
35
|
-
light: {
|
|
36
|
-
primitive: "gray-950",
|
|
37
|
-
alpha: .5
|
|
38
|
-
},
|
|
39
|
-
dark: {
|
|
40
|
-
primitive: "gray-950",
|
|
41
|
-
alpha: .7
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
"neutral-solid": {
|
|
45
|
-
light: "gray-600",
|
|
46
|
-
dark: "gray-600"
|
|
47
|
-
},
|
|
48
|
-
"neutral-solid-hover": {
|
|
49
|
-
light: "gray-700",
|
|
50
|
-
dark: "gray-700"
|
|
51
|
-
},
|
|
52
|
-
"neutral-solid-active": {
|
|
53
|
-
light: "gray-800",
|
|
54
|
-
dark: "gray-800"
|
|
55
|
-
},
|
|
56
|
-
"neutral-subtle": {
|
|
57
|
-
light: "gray-50",
|
|
58
|
-
dark: "gray-900"
|
|
59
|
-
},
|
|
60
|
-
"neutral-subtle-hover": {
|
|
61
|
-
light: "gray-100",
|
|
62
|
-
dark: "gray-800"
|
|
63
|
-
},
|
|
64
|
-
"neutral-subtle-active": {
|
|
65
|
-
light: "gray-200",
|
|
66
|
-
dark: "gray-700"
|
|
67
|
-
},
|
|
68
|
-
"primary-solid": {
|
|
69
|
-
light: "blue-600",
|
|
70
|
-
dark: "blue-600"
|
|
71
|
-
},
|
|
72
|
-
"primary-solid-hover": {
|
|
73
|
-
light: "blue-700",
|
|
74
|
-
dark: "blue-700"
|
|
75
|
-
},
|
|
76
|
-
"primary-solid-active": {
|
|
77
|
-
light: "blue-800",
|
|
78
|
-
dark: "blue-800"
|
|
79
|
-
},
|
|
80
|
-
"primary-subtle": {
|
|
81
|
-
light: "blue-50",
|
|
82
|
-
dark: "blue-950"
|
|
83
|
-
},
|
|
84
|
-
"primary-subtle-hover": {
|
|
85
|
-
light: "blue-100",
|
|
86
|
-
dark: "blue-900"
|
|
87
|
-
},
|
|
88
|
-
"primary-subtle-active": {
|
|
89
|
-
light: "blue-200",
|
|
90
|
-
dark: "blue-800"
|
|
91
|
-
},
|
|
92
|
-
"success-solid": {
|
|
93
|
-
light: "green-600",
|
|
94
|
-
dark: "green-600"
|
|
95
|
-
},
|
|
96
|
-
"success-solid-hover": {
|
|
97
|
-
light: "green-700",
|
|
98
|
-
dark: "green-700"
|
|
99
|
-
},
|
|
100
|
-
"success-solid-active": {
|
|
101
|
-
light: "green-800",
|
|
102
|
-
dark: "green-800"
|
|
103
|
-
},
|
|
104
|
-
"success-subtle": {
|
|
105
|
-
light: "green-50",
|
|
106
|
-
dark: "green-950"
|
|
107
|
-
},
|
|
108
|
-
"success-subtle-hover": {
|
|
109
|
-
light: "green-100",
|
|
110
|
-
dark: "green-900"
|
|
111
|
-
},
|
|
112
|
-
"success-subtle-active": {
|
|
113
|
-
light: "green-200",
|
|
114
|
-
dark: "green-800"
|
|
115
|
-
},
|
|
116
|
-
"warning-solid": {
|
|
117
|
-
light: "amber-600",
|
|
118
|
-
dark: "amber-600"
|
|
119
|
-
},
|
|
120
|
-
"warning-solid-hover": {
|
|
121
|
-
light: "amber-700",
|
|
122
|
-
dark: "amber-700"
|
|
123
|
-
},
|
|
124
|
-
"warning-solid-active": {
|
|
125
|
-
light: "amber-800",
|
|
126
|
-
dark: "amber-800"
|
|
127
|
-
},
|
|
128
|
-
"warning-subtle": {
|
|
129
|
-
light: "amber-50",
|
|
130
|
-
dark: "amber-950"
|
|
131
|
-
},
|
|
132
|
-
"warning-subtle-hover": {
|
|
133
|
-
light: "amber-100",
|
|
134
|
-
dark: "amber-900"
|
|
135
|
-
},
|
|
136
|
-
"warning-subtle-active": {
|
|
137
|
-
light: "amber-200",
|
|
138
|
-
dark: "amber-800"
|
|
139
|
-
},
|
|
140
|
-
"danger-solid": {
|
|
141
|
-
light: "red-600",
|
|
142
|
-
dark: "red-600"
|
|
143
|
-
},
|
|
144
|
-
"danger-solid-hover": {
|
|
145
|
-
light: "red-700",
|
|
146
|
-
dark: "red-700"
|
|
147
|
-
},
|
|
148
|
-
"danger-solid-active": {
|
|
149
|
-
light: "red-800",
|
|
150
|
-
dark: "red-800"
|
|
151
|
-
},
|
|
152
|
-
"danger-subtle": {
|
|
153
|
-
light: "red-50",
|
|
154
|
-
dark: "red-950"
|
|
155
|
-
},
|
|
156
|
-
"danger-subtle-hover": {
|
|
157
|
-
light: "red-100",
|
|
158
|
-
dark: "red-900"
|
|
159
|
-
},
|
|
160
|
-
"danger-subtle-active": {
|
|
161
|
-
light: "red-200",
|
|
162
|
-
dark: "red-800"
|
|
163
|
-
},
|
|
164
|
-
"info-solid": {
|
|
165
|
-
light: "cyan-600",
|
|
166
|
-
dark: "cyan-600"
|
|
167
|
-
},
|
|
168
|
-
"info-solid-hover": {
|
|
169
|
-
light: "cyan-700",
|
|
170
|
-
dark: "cyan-700"
|
|
171
|
-
},
|
|
172
|
-
"info-solid-active": {
|
|
173
|
-
light: "cyan-800",
|
|
174
|
-
dark: "cyan-800"
|
|
175
|
-
},
|
|
176
|
-
"info-subtle": {
|
|
177
|
-
light: "cyan-50",
|
|
178
|
-
dark: "cyan-950"
|
|
179
|
-
},
|
|
180
|
-
"info-subtle-hover": {
|
|
181
|
-
light: "cyan-100",
|
|
182
|
-
dark: "cyan-900"
|
|
183
|
-
},
|
|
184
|
-
"info-subtle-active": {
|
|
185
|
-
light: "cyan-200",
|
|
186
|
-
dark: "cyan-800"
|
|
187
|
-
}
|
|
112
|
+
...commonBackground,
|
|
113
|
+
...Object.fromEntries(roles.flatMap((role) => backgroundSlots.map((slot) => [`${role}-${slot}`, roleSlotColor(role, slot)])))
|
|
188
114
|
},
|
|
189
115
|
text: {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
dark: "gray-50"
|
|
193
|
-
},
|
|
194
|
-
muted: {
|
|
195
|
-
light: "gray-600",
|
|
196
|
-
dark: "gray-300"
|
|
197
|
-
},
|
|
198
|
-
disabled: {
|
|
199
|
-
light: "gray-400",
|
|
200
|
-
dark: "gray-600"
|
|
201
|
-
},
|
|
202
|
-
"on-solid": {
|
|
203
|
-
light: "white",
|
|
204
|
-
dark: "white"
|
|
205
|
-
},
|
|
206
|
-
primary: {
|
|
207
|
-
light: "blue-800",
|
|
208
|
-
dark: "blue-200"
|
|
209
|
-
},
|
|
210
|
-
success: {
|
|
211
|
-
light: "green-800",
|
|
212
|
-
dark: "green-200"
|
|
213
|
-
},
|
|
214
|
-
warning: {
|
|
215
|
-
light: "amber-800",
|
|
216
|
-
dark: "amber-200"
|
|
217
|
-
},
|
|
218
|
-
danger: {
|
|
219
|
-
light: "red-800",
|
|
220
|
-
dark: "red-200"
|
|
221
|
-
},
|
|
222
|
-
info: {
|
|
223
|
-
light: "cyan-800",
|
|
224
|
-
dark: "cyan-200"
|
|
225
|
-
}
|
|
116
|
+
...commonText,
|
|
117
|
+
...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "text")]))
|
|
226
118
|
},
|
|
227
119
|
border: {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
dark: "gray-800"
|
|
231
|
-
},
|
|
232
|
-
strong: {
|
|
233
|
-
light: "gray-500",
|
|
234
|
-
dark: "gray-400"
|
|
235
|
-
},
|
|
236
|
-
raised: {
|
|
237
|
-
light: "transparent",
|
|
238
|
-
dark: "gray-800"
|
|
239
|
-
},
|
|
240
|
-
primary: {
|
|
241
|
-
light: "blue-600",
|
|
242
|
-
dark: "blue-400"
|
|
243
|
-
},
|
|
244
|
-
success: {
|
|
245
|
-
light: "green-600",
|
|
246
|
-
dark: "green-400"
|
|
247
|
-
},
|
|
248
|
-
warning: {
|
|
249
|
-
light: "amber-600",
|
|
250
|
-
dark: "amber-400"
|
|
251
|
-
},
|
|
252
|
-
danger: {
|
|
253
|
-
light: "red-600",
|
|
254
|
-
dark: "red-400"
|
|
255
|
-
},
|
|
256
|
-
info: {
|
|
257
|
-
light: "cyan-600",
|
|
258
|
-
dark: "cyan-400"
|
|
259
|
-
}
|
|
120
|
+
...commonBorder,
|
|
121
|
+
...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "border")]))
|
|
260
122
|
},
|
|
261
|
-
outline:
|
|
262
|
-
light: "blue-600",
|
|
263
|
-
dark: "blue-400"
|
|
264
|
-
} }
|
|
123
|
+
outline: commonOutline
|
|
265
124
|
};
|
|
266
125
|
const semanticPrefix = {
|
|
267
126
|
background: "bg",
|
|
@@ -315,4 +174,4 @@ function semanticHex(name, theme) {
|
|
|
315
174
|
return colorValueHex(entry.value[theme]);
|
|
316
175
|
}
|
|
317
176
|
|
|
318
|
-
export { colorValueHex, roleFamily, semantic, semanticEntries, semanticHex, semanticPrefix, shadowColor };
|
|
177
|
+
export { colorValueHex, roleFamily, roleOverrides, roleSharedSlots, semantic, semanticEntries, semanticHex, semanticPrefix, shadowColor };
|
package/dist/tailwind-merge.js
CHANGED
|
@@ -169,7 +169,13 @@ export const tailwindMergeConfig = {
|
|
|
169
169
|
"info-solid-active",
|
|
170
170
|
"info-subtle",
|
|
171
171
|
"info-subtle-hover",
|
|
172
|
-
"info-subtle-active"
|
|
172
|
+
"info-subtle-active",
|
|
173
|
+
"accent-solid",
|
|
174
|
+
"accent-solid-hover",
|
|
175
|
+
"accent-solid-active",
|
|
176
|
+
"accent-subtle",
|
|
177
|
+
"accent-subtle-hover",
|
|
178
|
+
"accent-subtle-active"
|
|
173
179
|
]
|
|
174
180
|
}
|
|
175
181
|
],
|
|
@@ -184,7 +190,9 @@ export const tailwindMergeConfig = {
|
|
|
184
190
|
"success",
|
|
185
191
|
"warning",
|
|
186
192
|
"danger",
|
|
187
|
-
"info"
|
|
193
|
+
"info",
|
|
194
|
+
"accent",
|
|
195
|
+
"accent-on-solid"
|
|
188
196
|
]
|
|
189
197
|
}
|
|
190
198
|
],
|
|
@@ -198,7 +206,8 @@ export const tailwindMergeConfig = {
|
|
|
198
206
|
"success",
|
|
199
207
|
"warning",
|
|
200
208
|
"danger",
|
|
201
|
-
"info"
|
|
209
|
+
"info",
|
|
210
|
+
"accent"
|
|
202
211
|
]
|
|
203
212
|
}
|
|
204
213
|
],
|
|
@@ -212,7 +221,8 @@ export const tailwindMergeConfig = {
|
|
|
212
221
|
"success",
|
|
213
222
|
"warning",
|
|
214
223
|
"danger",
|
|
215
|
-
"info"
|
|
224
|
+
"info",
|
|
225
|
+
"accent"
|
|
216
226
|
]
|
|
217
227
|
}
|
|
218
228
|
],
|
|
@@ -226,7 +236,8 @@ export const tailwindMergeConfig = {
|
|
|
226
236
|
"success",
|
|
227
237
|
"warning",
|
|
228
238
|
"danger",
|
|
229
|
-
"info"
|
|
239
|
+
"info",
|
|
240
|
+
"accent"
|
|
230
241
|
]
|
|
231
242
|
}
|
|
232
243
|
],
|
|
@@ -240,7 +251,8 @@ export const tailwindMergeConfig = {
|
|
|
240
251
|
"success",
|
|
241
252
|
"warning",
|
|
242
253
|
"danger",
|
|
243
|
-
"info"
|
|
254
|
+
"info",
|
|
255
|
+
"accent"
|
|
244
256
|
]
|
|
245
257
|
}
|
|
246
258
|
],
|
|
@@ -254,7 +266,8 @@ export const tailwindMergeConfig = {
|
|
|
254
266
|
"success",
|
|
255
267
|
"warning",
|
|
256
268
|
"danger",
|
|
257
|
-
"info"
|
|
269
|
+
"info",
|
|
270
|
+
"accent"
|
|
258
271
|
]
|
|
259
272
|
}
|
|
260
273
|
],
|
|
@@ -268,7 +281,8 @@ export const tailwindMergeConfig = {
|
|
|
268
281
|
"success",
|
|
269
282
|
"warning",
|
|
270
283
|
"danger",
|
|
271
|
-
"info"
|
|
284
|
+
"info",
|
|
285
|
+
"accent"
|
|
272
286
|
]
|
|
273
287
|
}
|
|
274
288
|
],
|
|
@@ -282,7 +296,8 @@ export const tailwindMergeConfig = {
|
|
|
282
296
|
"success",
|
|
283
297
|
"warning",
|
|
284
298
|
"danger",
|
|
285
|
-
"info"
|
|
299
|
+
"info",
|
|
300
|
+
"accent"
|
|
286
301
|
]
|
|
287
302
|
}
|
|
288
303
|
],
|
|
@@ -296,7 +311,8 @@ export const tailwindMergeConfig = {
|
|
|
296
311
|
"success",
|
|
297
312
|
"warning",
|
|
298
313
|
"danger",
|
|
299
|
-
"info"
|
|
314
|
+
"info",
|
|
315
|
+
"accent"
|
|
300
316
|
]
|
|
301
317
|
}
|
|
302
318
|
],
|
|
@@ -310,7 +326,8 @@ export const tailwindMergeConfig = {
|
|
|
310
326
|
"success",
|
|
311
327
|
"warning",
|
|
312
328
|
"danger",
|
|
313
|
-
"info"
|
|
329
|
+
"info",
|
|
330
|
+
"accent"
|
|
314
331
|
]
|
|
315
332
|
}
|
|
316
333
|
],
|
|
@@ -324,7 +341,8 @@ export const tailwindMergeConfig = {
|
|
|
324
341
|
"success",
|
|
325
342
|
"warning",
|
|
326
343
|
"danger",
|
|
327
|
-
"info"
|
|
344
|
+
"info",
|
|
345
|
+
"accent"
|
|
328
346
|
]
|
|
329
347
|
}
|
|
330
348
|
],
|
|
@@ -338,7 +356,8 @@ export const tailwindMergeConfig = {
|
|
|
338
356
|
"success",
|
|
339
357
|
"warning",
|
|
340
358
|
"danger",
|
|
341
|
-
"info"
|
|
359
|
+
"info",
|
|
360
|
+
"accent"
|
|
342
361
|
]
|
|
343
362
|
}
|
|
344
363
|
],
|
|
@@ -352,7 +371,8 @@ export const tailwindMergeConfig = {
|
|
|
352
371
|
"success",
|
|
353
372
|
"warning",
|
|
354
373
|
"danger",
|
|
355
|
-
"info"
|
|
374
|
+
"info",
|
|
375
|
+
"accent"
|
|
356
376
|
]
|
|
357
377
|
}
|
|
358
378
|
],
|
package/dist/tailwind.css
CHANGED
|
@@ -141,6 +141,15 @@
|
|
|
141
141
|
--border-color-danger: var(--tide-border-danger);
|
|
142
142
|
--border-color-info: var(--tide-border-info);
|
|
143
143
|
--outline-color-focus: var(--tide-outline-focus);
|
|
144
|
+
--background-color-accent-solid: var(--tide-accent-solid);
|
|
145
|
+
--background-color-accent-solid-hover: var(--tide-accent-solid-hover);
|
|
146
|
+
--background-color-accent-solid-active: var(--tide-accent-solid-active);
|
|
147
|
+
--background-color-accent-subtle: var(--tide-accent-subtle);
|
|
148
|
+
--background-color-accent-subtle-hover: var(--tide-accent-subtle-hover);
|
|
149
|
+
--background-color-accent-subtle-active: var(--tide-accent-subtle-active);
|
|
150
|
+
--text-color-accent: var(--tide-accent-text);
|
|
151
|
+
--text-color-accent-on-solid: var(--tide-accent-on-solid);
|
|
152
|
+
--border-color-accent: var(--tide-accent-border);
|
|
144
153
|
--font-sans: var(--tide-font-sans);
|
|
145
154
|
--font-mono: var(--tide-font-mono);
|
|
146
155
|
--font-weight-light: var(--tide-font-light);
|