@gov-components/design-tokens 1.0.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 +435 -0
- package/dist/globals.css +3 -0
- package/dist/tokens-core.css +1 -0
- package/dist/tokens-foundations.css +1 -0
- package/dist/tokens.css +1 -0
- package/dist/typography.css +3 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,435 @@
|
|
|
1
|
+
# Gov UI Components Design Tokens
|
|
2
|
+
|
|
3
|
+
Design token reference for government e-services.
|
|
4
|
+
|
|
5
|
+
## 🚀 Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @kt-components/design-tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## ⚡️ Usage (Optimized - Recommended)
|
|
12
|
+
|
|
13
|
+
To improve initial page load performance, import only the core tokens (Tier 1) in your root layout, and lazy load foundations if needed.
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
/* In your global CSS or root styles */
|
|
17
|
+
@import "@kt-components/design-tokens/dist/tokens-core.css"; /* Critical only (Fast) */
|
|
18
|
+
@import "@kt-components/design-tokens/dist/typography.css";
|
|
19
|
+
/* map your tailwind classes here */
|
|
20
|
+
@tailwind base;
|
|
21
|
+
@tailwind components;
|
|
22
|
+
@tailwind utilities;
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 📦 Usage (Full Bundle - Backward Compatible)
|
|
26
|
+
|
|
27
|
+
If you need every single color palette immediately:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "@kt-components/design-tokens/dist/globals.css";
|
|
31
|
+
@import "@kt-components/design-tokens/tokens.css";
|
|
32
|
+
@import "@kt-components/design-tokens/typography.css";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
You can also configure Tailwind CSS to use these tokens (see main project documentation).
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Table of Contents
|
|
40
|
+
|
|
41
|
+
- [Colors](#colors)
|
|
42
|
+
- [Typography](#typography)
|
|
43
|
+
- [Spacing](#spacing)
|
|
44
|
+
- [Border Radius](#border-radius)
|
|
45
|
+
- [Shadows](#shadows)
|
|
46
|
+
- [Motion](#motion)
|
|
47
|
+
- [Dark Mode](#dark-mode)
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Colors
|
|
52
|
+
|
|
53
|
+
## 🎨 Brand Colors
|
|
54
|
+
|
|
55
|
+
| Token | Tailwind Class | Value |
|
|
56
|
+
| ------------------------- | -------------------------------------------- | --------- |
|
|
57
|
+
| `--color-brand-primary` | `bg-brand-primary`, `text-brand-primary` | `#1e7d55` |
|
|
58
|
+
| `--color-brand-secondary` | `bg-brand-secondary`, `text-brand-secondary` | `#80d897` |
|
|
59
|
+
| `--color-brand-surface` | `bg-brand-surface` | `#faf9e5` |
|
|
60
|
+
| `--color-brand-text-dark` | `text-brand-text-dark` | `#05010e` |
|
|
61
|
+
|
|
62
|
+
**Usage:**
|
|
63
|
+
|
|
64
|
+
```jsx
|
|
65
|
+
<button className="bg-brand-primary text-white hover:bg-brand-secondary">
|
|
66
|
+
Primary Button
|
|
67
|
+
</button>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## ⚠️ Semantic Colors
|
|
73
|
+
|
|
74
|
+
| Token | Tailwind Class | Value | Use Case |
|
|
75
|
+
| --------------------------------- | ------------------------------------------------ | --------- | --------------- |
|
|
76
|
+
| `--color-semantic-critical` | `bg-semantic-critical`, `text-semantic-critical` | `#f21515` | Errors |
|
|
77
|
+
| `--color-semantic-critical-hover` | `hover:bg-semantic-critical-hover` | `#c71b1b` | Error hover |
|
|
78
|
+
| `--color-semantic-success` | `bg-semantic-success`, `text-semantic-success` | `#95c135` | Success states |
|
|
79
|
+
| `--color-semantic-success-hover` | `hover:bg-semantic-success-hover` | `#7aa125` | Success hover |
|
|
80
|
+
| `--color-semantic-warning` | `bg-semantic-warning`, `text-semantic-warning` | `#f1be25` | Warnings |
|
|
81
|
+
| `--color-semantic-warning-hover` | `hover:bg-semantic-warning-hover` | `#ad8306` | Warning hover |
|
|
82
|
+
| `--color-semantic-neutral` | `bg-semantic-neutral`, `text-semantic-neutral` | `#707993` | Neutral/muted |
|
|
83
|
+
| `--color-semantic-verified` | `bg-semantic-verified`, `text-semantic-verified` | `#6982e1` | Verified badges |
|
|
84
|
+
|
|
85
|
+
**Usage:**
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
<span className="text-semantic-critical">Error: Invalid input</span>
|
|
89
|
+
<span className="text-semantic-success">Success!</span>
|
|
90
|
+
<span className="bg-semantic-warning text-black px-2 rounded">Warning</span>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## 📊 Status Colors
|
|
96
|
+
|
|
97
|
+
| Token | Tailwind Class | Value | Use Case |
|
|
98
|
+
| ------------------------ | ------------------- | --------- | --------------- |
|
|
99
|
+
| `--color-status-default` | `bg-status-default` | `#8df0ff` | Default state |
|
|
100
|
+
| `--color-status-stable` | `bg-status-stable` | `#95c135` | Stable/active |
|
|
101
|
+
| `--color-status-warning` | `bg-status-warning` | `#f8842d` | Warning state |
|
|
102
|
+
| `--color-status-danger` | `bg-status-danger` | `#991d1d` | Danger/critical |
|
|
103
|
+
|
|
104
|
+
**Usage:**
|
|
105
|
+
|
|
106
|
+
```jsx
|
|
107
|
+
<span className="bg-status-stable text-white px-2 py-1 rounded-full text-xs">
|
|
108
|
+
Active
|
|
109
|
+
</span>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## ✍️ Text Colors
|
|
115
|
+
|
|
116
|
+
| Token | Tailwind Class | Light Mode | Dark Mode |
|
|
117
|
+
| -------------------------- | ----------------------- | ---------- | --------- |
|
|
118
|
+
| `--color-text-primary` | `text-text-primary` | `#060d26` | `#fcfcff` |
|
|
119
|
+
| `--color-text-secondary` | `text-text-secondary` | `#1e7d55` | `#80d897` |
|
|
120
|
+
| `--color-text-tertiary` | `text-text-tertiary` | `#475272` | `#c8cedd` |
|
|
121
|
+
| `--color-text-placeholder` | `text-text-placeholder` | `#707993` | - |
|
|
122
|
+
| `--color-text-disable` | `text-text-disable` | `#c8cedd` | - |
|
|
123
|
+
| `--color-text-critical` | `text-text-critical` | `#f21515` | `#ffa9a9` |
|
|
124
|
+
| `--color-text-tags` | `text-text-tags` | `#a9edb9` | - |
|
|
125
|
+
|
|
126
|
+
**Usage:**
|
|
127
|
+
|
|
128
|
+
```jsx
|
|
129
|
+
<h1 className="text-text-primary">Main Title</h1>
|
|
130
|
+
<p className="text-text-secondary">Subtitle</p>
|
|
131
|
+
<span className="text-text-placeholder">Hint text...</span>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## 🔲 Border Colors
|
|
137
|
+
|
|
138
|
+
| Token | Tailwind Class | Value |
|
|
139
|
+
| ------------------------- | ------------------------ | --------- |
|
|
140
|
+
| `--color-border-default` | `border-border-default` | `#a9edb9` |
|
|
141
|
+
| `--color-border-hover` | `border-border-hover` | `#80d897` |
|
|
142
|
+
| `--color-border-neutral` | `border-border-neutral` | `#c8cedd` |
|
|
143
|
+
| `--color-border-critical` | `border-border-critical` | `#f21515` |
|
|
144
|
+
| `--color-border-disable` | `border-border-disable` | `#c8cedd` |
|
|
145
|
+
| `--color-border-tags` | `border-border-tags` | `#a9edb9` |
|
|
146
|
+
|
|
147
|
+
**Usage:**
|
|
148
|
+
|
|
149
|
+
```jsx
|
|
150
|
+
<input className="border border-border-neutral focus:border-border-default" />
|
|
151
|
+
<div className="border-2 border-border-critical">Error state</div>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## 🔘 Button Colors
|
|
157
|
+
|
|
158
|
+
| Token | Tailwind Class | Value |
|
|
159
|
+
| --------------------- | -------------------- | --------- |
|
|
160
|
+
| `--color-btn-primary` | `bg-btn-primary` | `#1e7d55` |
|
|
161
|
+
| `--color-btn-hover` | `hover:bg-btn-hover` | `#80d897` |
|
|
162
|
+
| `--color-btn-default` | `bg-btn-default` | `#fcfcff` |
|
|
163
|
+
|
|
164
|
+
**Usage:**
|
|
165
|
+
|
|
166
|
+
```jsx
|
|
167
|
+
<button className="bg-btn-primary hover:bg-btn-hover text-white">Submit</button>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## 🎯 Icon Colors
|
|
173
|
+
|
|
174
|
+
| Token | Tailwind Class | Value | Use Case |
|
|
175
|
+
| ----------------------------- | -------------------------- | --------- | --------------- |
|
|
176
|
+
| `--color-icon-default` | `text-icon-default` | `#05010e` | Default icons |
|
|
177
|
+
| `--color-icon-hover` | `text-icon-hover` | `#1e7d55` | Hover state |
|
|
178
|
+
| `--color-icon-water` | `text-icon-water` | `#13a8bf` | Water module |
|
|
179
|
+
| `--color-icon-water-hover` | `text-icon-water-hover` | `#008296` | Water hover |
|
|
180
|
+
| `--color-icon-tax` | `text-icon-tax` | `#475272` | Tax module |
|
|
181
|
+
| `--color-icon-tax-hover` | `text-icon-tax-hover` | `#182342` | Tax hover |
|
|
182
|
+
| `--color-icon-security` | `text-icon-security` | `#b37abb` | Security module |
|
|
183
|
+
| `--color-icon-security-hover` | `text-icon-security-hover` | `#502f55` | Security hover |
|
|
184
|
+
| `--color-icon-success` | `text-icon-success` | `#95c135` | Success |
|
|
185
|
+
| `--color-icon-warning` | `text-icon-warning` | `#f1be25` | Warning |
|
|
186
|
+
| `--color-icon-critical` | `text-icon-critical` | `#f21515` | Critical/error |
|
|
187
|
+
|
|
188
|
+
**Usage:**
|
|
189
|
+
|
|
190
|
+
```jsx
|
|
191
|
+
<WaterIcon className="text-icon-water hover:text-icon-water-hover" />
|
|
192
|
+
<TaxIcon className="text-icon-tax hover:text-icon-tax-hover" />
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## 📝 Text Field Colors
|
|
198
|
+
|
|
199
|
+
| Token | Tailwind Class | Value |
|
|
200
|
+
| ---------------------------- | ----------------------- | --------- |
|
|
201
|
+
| `--color-field-default` | `bg-field-default` | `#fcfcff` |
|
|
202
|
+
| `--color-field-default-dark` | `bg-field-default-dark` | `#060d26` |
|
|
203
|
+
| `--color-field-disable` | `bg-field-disable` | `#ebedf5` |
|
|
204
|
+
|
|
205
|
+
**Usage:**
|
|
206
|
+
|
|
207
|
+
```jsx
|
|
208
|
+
<input className="bg-field-default disabled:bg-field-disable" />
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
## 🍎 Foundation Palettes
|
|
214
|
+
|
|
215
|
+
### Apple Pallet (Green)
|
|
216
|
+
|
|
217
|
+
| Shade | Class | Value |
|
|
218
|
+
| ------ | ----------------- | --------- |
|
|
219
|
+
| dark | `bg-apple-dark` | `#1e7d55` |
|
|
220
|
+
| darker | `bg-apple-darker` | `#05010e` |
|
|
221
|
+
| light | `bg-apple-light` | `#faf9e5` |
|
|
222
|
+
| medium | `bg-apple-medium` | `#80d897` |
|
|
223
|
+
| soft | `bg-apple-soft` | `#a9edb9` |
|
|
224
|
+
|
|
225
|
+
### Sky Blue Pallet
|
|
226
|
+
|
|
227
|
+
| Shade | Class | Value |
|
|
228
|
+
| ----------- | -------------------- | --------- |
|
|
229
|
+
| bright | `bg-sky-bright` | `#edfcff` |
|
|
230
|
+
| light | `bg-sky-light` | `#cdf8ff` |
|
|
231
|
+
| light-soft | `bg-sky-light-soft` | `#adf4ff` |
|
|
232
|
+
| soft | `bg-sky-soft` | `#8df0ff` |
|
|
233
|
+
| soft-medium | `bg-sky-soft-medium` | `#6debff` |
|
|
234
|
+
| medium | `bg-sky-medium` | `#4de7ff` |
|
|
235
|
+
| medium-dark | `bg-sky-medium-dark` | `#2fcfe8` |
|
|
236
|
+
| dark | `bg-sky-dark` | `#13a8bf` |
|
|
237
|
+
| dark-darker | `bg-sky-dark-darker` | `#008296` |
|
|
238
|
+
| darker | `bg-sky-darker` | `#005f6d` |
|
|
239
|
+
|
|
240
|
+
### Fuji Pallet (Gray)
|
|
241
|
+
|
|
242
|
+
| Shade | Class | Value |
|
|
243
|
+
| ----------- | --------------------- | --------- |
|
|
244
|
+
| bright | `bg-fuji-bright` | `#fcfcff` |
|
|
245
|
+
| light | `bg-fuji-light` | `#ebedf5` |
|
|
246
|
+
| soft | `bg-fuji-soft` | `#c8cedd` |
|
|
247
|
+
| soft-medium | `bg-fuji-soft-medium` | `#707993` |
|
|
248
|
+
| medium | `bg-fuji-medium` | `#475272` |
|
|
249
|
+
| medium-dark | `bg-fuji-medium-dark` | `#252f4a` |
|
|
250
|
+
| dark | `bg-fuji-dark` | `#182342` |
|
|
251
|
+
| darker | `bg-fuji-darker` | `#060d26` |
|
|
252
|
+
|
|
253
|
+
### Fuan Pallet (Red)
|
|
254
|
+
|
|
255
|
+
| Shade | Class | Value |
|
|
256
|
+
| ----------- | --------------------- | --------- |
|
|
257
|
+
| light | `bg-fuan-light` | `#ffd2d2` |
|
|
258
|
+
| soft | `bg-fuan-soft` | `#ffa9a9` |
|
|
259
|
+
| soft-medium | `bg-fuan-soft-medium` | `#ff6060` |
|
|
260
|
+
| medium | `bg-fuan-medium` | `#f21515` |
|
|
261
|
+
| medium-dark | `bg-fuan-medium-dark` | `#c71b1b` |
|
|
262
|
+
| dark | `bg-fuan-dark` | `#991d1d` |
|
|
263
|
+
| darker | `bg-fuan-darker` | `#540d0d` |
|
|
264
|
+
|
|
265
|
+
### Take Pallet (Green)
|
|
266
|
+
|
|
267
|
+
| Shade | Class | Value |
|
|
268
|
+
| ----------- | --------------------- | --------- |
|
|
269
|
+
| light | `bg-take-light` | `#f1ffd3` |
|
|
270
|
+
| soft | `bg-take-soft` | `#d4eca1` |
|
|
271
|
+
| soft-medium | `bg-take-soft-medium` | `#afd461` |
|
|
272
|
+
| medium | `bg-take-medium` | `#95c135` |
|
|
273
|
+
| medium-dark | `bg-take-medium-dark` | `#7aa125` |
|
|
274
|
+
| dark | `bg-take-dark` | `#557909` |
|
|
275
|
+
| darker | `bg-take-darker` | `#314604` |
|
|
276
|
+
|
|
277
|
+
### Saffron Pallet (Yellow)
|
|
278
|
+
|
|
279
|
+
| Shade | Class | Value |
|
|
280
|
+
| ----------- | ------------------------ | --------- |
|
|
281
|
+
| light | `bg-saffron-light` | `#fff9e9` |
|
|
282
|
+
| light-soft | `bg-saffron-light-soft` | `#ffe9a8` |
|
|
283
|
+
| soft | `bg-saffron-soft` | `#ffd968` |
|
|
284
|
+
| medium | `bg-saffron-medium` | `#f1be25` |
|
|
285
|
+
| medium-dark | `bg-saffron-medium-dark` | `#ad8306` |
|
|
286
|
+
| dark | `bg-saffron-dark` | `#694f00` |
|
|
287
|
+
|
|
288
|
+
### Moody Blue Pallet
|
|
289
|
+
|
|
290
|
+
| Shade | Class | Value |
|
|
291
|
+
| ----------- | ---------------------- | --------- |
|
|
292
|
+
| bright | `bg-moody-bright` | `#f3f5ff` |
|
|
293
|
+
| light | `bg-moody-light` | `#d7dfff` |
|
|
294
|
+
| light-soft | `bg-moody-light-soft` | `#bccaff` |
|
|
295
|
+
| soft | `bg-moody-soft` | `#a0b4ff` |
|
|
296
|
+
| soft-medium | `bg-moody-soft-medium` | `#859eff` |
|
|
297
|
+
| medium | `bg-moody-medium` | `#6982e1` |
|
|
298
|
+
| medium-dark | `bg-moody-medium-dark` | `#4f67bf` |
|
|
299
|
+
| dark | `bg-moody-dark` | `#26387b` |
|
|
300
|
+
| dark-darker | `bg-moody-dark-darker` | `#172559` |
|
|
301
|
+
| darker | `bg-moody-darker` | `#182342` |
|
|
302
|
+
|
|
303
|
+
### Other Palettes
|
|
304
|
+
|
|
305
|
+
- **Orange**: `bg-orange-light`, `bg-orange-medium`, `bg-orange-soft`, `bg-orange-pink`, `bg-orange-red`
|
|
306
|
+
- **Purple**: `bg-purple-dark`, `bg-purple-medium`, `bg-purple-soft`
|
|
307
|
+
- **Wisteria**: `bg-wisteria-dark`, `bg-wisteria-light`, `bg-wisteria-medium`, `bg-wisteria-soft`
|
|
308
|
+
- **Yellow**: `bg-yellow-light`, `bg-yellow-medium`, `bg-yellow-soft`
|
|
309
|
+
- **Glacier**: `bg-glacier-bright`, `bg-glacier-light`, `bg-glacier-dark`, etc.
|
|
310
|
+
- **Crustae**: `bg-crustae-dark`, `bg-crustae-light`, `bg-crustae-medium`, etc.
|
|
311
|
+
- **Blue**: `bg-blue-dark`, `bg-blue-medium`, `bg-blue-soft`, etc.
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
315
|
+
## 📏 Spacing
|
|
316
|
+
|
|
317
|
+
| Token | Tailwind Class | Value |
|
|
318
|
+
| -------------- | ------------------------ | ------ |
|
|
319
|
+
| `--spacing-1x` | `p-1x`, `m-1x`, `gap-1x` | `8px` |
|
|
320
|
+
| `--spacing-2x` | `p-2x`, `m-2x`, `gap-2x` | `16px` |
|
|
321
|
+
| `--spacing-3x` | `p-3x`, `m-3x`, `gap-3x` | `24px` |
|
|
322
|
+
| `--spacing-4x` | `p-4x`, `m-4x`, `gap-4x` | `32px` |
|
|
323
|
+
|
|
324
|
+
**Usage:**
|
|
325
|
+
|
|
326
|
+
```jsx
|
|
327
|
+
<div className="p-3x gap-2x flex">
|
|
328
|
+
<div className="m-1x">Item</div>
|
|
329
|
+
</div>
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
## 🔵 Border Radius
|
|
335
|
+
|
|
336
|
+
| Token | Tailwind Class | Value |
|
|
337
|
+
| ---------------------- | --------------------- | ------- |
|
|
338
|
+
| `--radius-circle` | `rounded-circle` | `100px` |
|
|
339
|
+
| `--radius-square` | `rounded-square` | `8px` |
|
|
340
|
+
| `--radius-square-hard` | `rounded-square-hard` | `16px` |
|
|
341
|
+
|
|
342
|
+
**Usage:**
|
|
343
|
+
|
|
344
|
+
```jsx
|
|
345
|
+
<div className="rounded-square bg-brand-primary">Card</div>
|
|
346
|
+
<span className="rounded-circle bg-status-stable">Badge</span>
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
## 🌓 Shadows
|
|
352
|
+
|
|
353
|
+
| Token | Tailwind Class | Description |
|
|
354
|
+
| ------------------------ | ---------------------- | ----------------- |
|
|
355
|
+
| `--shadow-smooth-low` | `shadow-smooth-low` | Subtle elevation |
|
|
356
|
+
| `--shadow-smooth-medium` | `shadow-smooth-medium` | Standard cards |
|
|
357
|
+
| `--shadow-smooth-high` | `shadow-smooth-high` | Modals, dropdowns |
|
|
358
|
+
|
|
359
|
+
**Usage:**
|
|
360
|
+
|
|
361
|
+
```jsx
|
|
362
|
+
<div className="shadow-smooth-low bg-white rounded-square p-3x">
|
|
363
|
+
Low elevation card
|
|
364
|
+
</div>
|
|
365
|
+
<div className="shadow-smooth-medium bg-white rounded-square-hard p-3x">
|
|
366
|
+
Medium elevation card
|
|
367
|
+
</div>
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
---
|
|
371
|
+
|
|
372
|
+
## 🌙 Dark Mode
|
|
373
|
+
|
|
374
|
+
Dark mode is automatically handled when `.dark` class is on a parent element:
|
|
375
|
+
|
|
376
|
+
```jsx
|
|
377
|
+
// In your layout or root component
|
|
378
|
+
<html className={isDark ? "dark" : ""}>...</html>
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
These tokens automatically switch in dark mode:
|
|
382
|
+
|
|
383
|
+
- `text-text-primary` → uses `--color-alias-text-colors-primary-dark`
|
|
384
|
+
- `text-text-secondary` → uses `--color-alias-text-colors-secondary-dark`
|
|
385
|
+
- `border-border-default` → uses `--color-border-colors-default-dark`
|
|
386
|
+
- `text-icon-default` → uses `--color-icon-color-default-dark`
|
|
387
|
+
- Shadows → use darker variants with increased opacity
|
|
388
|
+
|
|
389
|
+
---
|
|
390
|
+
|
|
391
|
+
## 📚 Typography Classes
|
|
392
|
+
|
|
393
|
+
Typography classes are defined in `styles/typography.css`:
|
|
394
|
+
|
|
395
|
+
| Class | Description |
|
|
396
|
+
| ------------------------ | ---------------------- |
|
|
397
|
+
| `.typo-h1` | Heading 1 (responsive) |
|
|
398
|
+
| `.typo-h2` | Heading 2 (responsive) |
|
|
399
|
+
| `.typo-h3` | Heading 3 (responsive) |
|
|
400
|
+
| `.typo-body` | Body text (responsive) |
|
|
401
|
+
| `.typo-sub` | Subtitle (responsive) |
|
|
402
|
+
| `.typo-button` | Button text |
|
|
403
|
+
| `.typo-button-sm` | Small button text |
|
|
404
|
+
| `.typo-menu` | Menu/nav text |
|
|
405
|
+
| `.typo-tags` | Tags/labels |
|
|
406
|
+
| `.typo-logo` | Logo text |
|
|
407
|
+
| `.typo-text-button` | Text button/link |
|
|
408
|
+
| `.typo-text-button-line` | Underlined link |
|
|
409
|
+
| `.typo-discount` | Discount badge |
|
|
410
|
+
|
|
411
|
+
**Usage:**
|
|
412
|
+
|
|
413
|
+
```jsx
|
|
414
|
+
<h1 className="typo-h1 text-text-primary">Page Title</h1>
|
|
415
|
+
<p className="typo-body text-text-tertiary">Description text</p>
|
|
416
|
+
<button className="typo-button-sm bg-btn-primary">Click</button>
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
---
|
|
420
|
+
|
|
421
|
+
## 🎬 Motion / Easing
|
|
422
|
+
|
|
423
|
+
| Token | Tailwind Class | Description |
|
|
424
|
+
| ---------------------- | -------------------- | ----------------- |
|
|
425
|
+
| `--ease-spring-snappy` | `ease-spring-snappy` | Quick, responsive |
|
|
426
|
+
| `--ease-spring` | `ease-spring` | Natural spring |
|
|
427
|
+
| `--ease-spring-soft` | `ease-spring-soft` | Gentle spring |
|
|
428
|
+
|
|
429
|
+
**Usage:**
|
|
430
|
+
|
|
431
|
+
```jsx
|
|
432
|
+
<div className="transition-transform duration-300 ease-spring hover:scale-105">
|
|
433
|
+
Animated element
|
|
434
|
+
</div>
|
|
435
|
+
```
|
package/dist/globals.css
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
:root{--border-radius-circle:100px;--border-radius-square:8px;--border-radius-square-hard:16px;--spacing-space1x:8px;--spacing-space2x:16px;--spacing-space3x:24px;--spacing-space4x:32px;--layout-component-card-padding:var(--spacing-space3x);--layout-component-hitbox-min:48px;--layout-layout-grid-gutter:var(--spacing-space3x);--layout-layout-page-margin:var(--spacing-space4x);--color-alias-color-brand-primary:#1e7d55;--color-alias-color-brand-secondary:#80d897;--color-alias-color-brand-surface:#faf9e5;--color-alias-color-brand-text-dark:#05010e;--color-alias-semantic-critical:#f21515;--color-alias-semantic-critical-dark:#ffd2d2;--color-alias-semantic-critical-dark-hover:#ffa9a9;--color-alias-semantic-critical-hover:#c71b1b;--color-alias-semantic-neutral:#707993;--color-alias-semantic-success:#95c135;--color-alias-semantic-success-hover:#7aa125;--color-alias-semantic-verifed:#6982e1;--color-alias-semantic-warning:#f1be25;--color-alias-semantic-warning-hover:#ad8306;--color-alias-status-danger:#991d1d;--color-alias-status-default:#8df0ff;--color-alias-status-stable:#95c135;--color-alias-status-warning:#f8842d;--color-alias-text-colors-critical:#f21515;--color-alias-text-colors-critical-dark:#ffa9a9;--color-alias-text-colors-disable:#c8cedd;--color-alias-text-colors-disable-dark:#c8cedd;--color-alias-text-colors-placeholder:#707993;--color-alias-text-colors-primary:#060d26;--color-alias-text-colors-primary-dark:#fcfcff;--color-alias-text-colors-secondary:#1e7d55;--color-alias-text-colors-secondary-dark:#80d897;--color-alias-text-colors-tags:#a9edb9;--color-alias-text-colors-tertiary-dark:#c8cedd;--color-alias-text-colors-tertirary:#475272;--color-border-colors-border-color-disable:#c8cedd;--color-border-colors-border-color-disable-dark:#c8cedd;--color-border-colors-critical:#f21515;--color-border-colors-default:#a9edb9;--color-border-colors-default-dark:#80d897;--color-border-colors-hover:#80d897;--color-border-colors-neutral:#c8cedd;--color-border-colors-tags:#a9edb9;--color-border-colors-tags-dark:#1e7d55;--color-btn-default:#fcfcff;--color-btn-hover:#80d897;--color-btn-primary:#1e7d55;--color-icon-color-critical:#f21515;--color-icon-color-critical-hover:#c71b1b;--color-icon-color-default:#05010e;--color-icon-color-default-dark:#fcfcff;--color-icon-color-hover-active:#1e7d55;--color-icon-color-security:#b37abb;--color-icon-color-security-hover-active:#502f55;--color-icon-color-success:#95c135;--color-icon-color-success-hover:#7aa125;--color-icon-color-tax:#475272;--color-icon-color-tax-hover-active:#182342;--color-icon-color-warning:#f1be25;--color-icon-color-warning-hover:#ad8306;--color-icon-color-water:#13a8bf;--color-icon-color-water-hover-active:#008296;--color-text-field-default:#fcfcff;--color-text-field-default-dark:#060d26;--color-text-field-disable:#ebedf5;--effect-shadow-smooth-high-0-color:#060d26;--effect-shadow-smooth-high-0-offsetx:0px;--effect-shadow-smooth-high-0-offsety:8px;--effect-shadow-smooth-high-0-radius:15px;--effect-shadow-smooth-high-0-shadowtype:dropShadow;--effect-shadow-smooth-high-0-spread:2px;--effect-shadow-smooth-high-1-color:#060d26;--effect-shadow-smooth-high-1-offsetx:0px;--effect-shadow-smooth-high-1-offsety:0px;--effect-shadow-smooth-high-1-radius:4px;--effect-shadow-smooth-high-1-shadowtype:dropShadow;--effect-shadow-smooth-high-1-spread:0px;--effect-shadow-smooth-high-dark-0-color:#060d26;--effect-shadow-smooth-high-dark-0-offsetx:0px;--effect-shadow-smooth-high-dark-0-offsety:8px;--effect-shadow-smooth-high-dark-0-radius:15px;--effect-shadow-smooth-high-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-0-spread:2px;--effect-shadow-smooth-high-dark-1-color:#060d26;--effect-shadow-smooth-high-dark-1-offsetx:0px;--effect-shadow-smooth-high-dark-1-offsety:0px;--effect-shadow-smooth-high-dark-1-radius:4px;--effect-shadow-smooth-high-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-1-spread:0px;--effect-shadow-smooth-low-0-color:#000209;--effect-shadow-smooth-low-0-offsetx:0px;--effect-shadow-smooth-low-0-offsety:0px;--effect-shadow-smooth-low-0-radius:4px;--effect-shadow-smooth-low-0-shadowtype:dropShadow;--effect-shadow-smooth-low-0-spread:0px;--effect-shadow-smooth-low-1-color:#000209;--effect-shadow-smooth-low-1-offsetx:0px;--effect-shadow-smooth-low-1-offsety:2px;--effect-shadow-smooth-low-1-radius:2px;--effect-shadow-smooth-low-1-shadowtype:dropShadow;--effect-shadow-smooth-low-1-spread:0px;--effect-shadow-smooth-low-dark-0-color:#060d26;--effect-shadow-smooth-low-dark-0-offsetx:0px;--effect-shadow-smooth-low-dark-0-offsety:0px;--effect-shadow-smooth-low-dark-0-radius:4px;--effect-shadow-smooth-low-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-0-spread:0px;--effect-shadow-smooth-low-dark-1-color:#060d26;--effect-shadow-smooth-low-dark-1-offsetx:0px;--effect-shadow-smooth-low-dark-1-offsety:2px;--effect-shadow-smooth-low-dark-1-radius:2px;--effect-shadow-smooth-low-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-1-spread:0px;--effect-shadow-smooth-medium-0-color:#060d26;--effect-shadow-smooth-medium-0-offsetx:0px;--effect-shadow-smooth-medium-0-offsety:4px;--effect-shadow-smooth-medium-0-radius:10px;--effect-shadow-smooth-medium-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-0-spread:0px;--effect-shadow-smooth-medium-1-color:#060d26;--effect-shadow-smooth-medium-1-offsetx:0px;--effect-shadow-smooth-medium-1-offsety:2px;--effect-shadow-smooth-medium-1-radius:2px;--effect-shadow-smooth-medium-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-1-spread:0px;--effect-shadow-smooth-medium-dark-0-color:#060d26;--effect-shadow-smooth-medium-dark-0-offsetx:0px;--effect-shadow-smooth-medium-dark-0-offsety:4px;--effect-shadow-smooth-medium-dark-0-radius:10px;--effect-shadow-smooth-medium-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-0-spread:0px;--effect-shadow-smooth-medium-dark-1-color:#060d26;--effect-shadow-smooth-medium-dark-1-offsetx:0px;--effect-shadow-smooth-medium-dark-1-offsety:2px;--effect-shadow-smooth-medium-dark-1-radius:2px;--effect-shadow-smooth-medium-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-1-spread:0px;--color-foundations-apple-pallet-dark:#1e7d55;--color-foundations-apple-pallet-darker:#05010e;--color-foundations-apple-pallet-light:#faf9e5;--color-foundations-apple-pallet-medium:#80d897;--color-foundations-apple-pallet-soft:#a9edb9;--color-foundations-blue-pallet-dark:#042d8b;--color-foundations-blue-pallet-darker:#010006;--color-foundations-blue-pallet-medium:#008296;--color-foundations-blue-pallet-medium-dark:#394e9d;--color-foundations-blue-pallet-soft:#98bcd5;--color-foundations-blue-pallet-soft-medium:#71c9d5;--color-foundations-crustae-pallet-dark:#703000;--color-foundations-crustae-pallet-light:#fff3ea;--color-foundations-crustae-pallet-light-soft:#ffcfab;--color-foundations-crustae-pallet-medium:#f8842d;--color-foundations-crustae-pallet-medium-dark:#b4540d;--color-foundations-crustae-pallet-soft:#ffab6d;--color-foundations-fuan-pallet-dark:#991d1d;--color-foundations-fuan-pallet-darker:#540d0d;--color-foundations-fuan-pallet-light:#ffd2d2;--color-foundations-fuan-pallet-medium:#f21515;--color-foundations-fuan-pallet-medium-dark:#c71b1b;--color-foundations-fuan-pallet-soft:#ffa9a9;--color-foundations-fuan-pallet-soft-medium:#ff6060;--color-foundations-fuji-pallet-bright:#fcfcff;--color-foundations-fuji-pallet-dark:#182342;--color-foundations-fuji-pallet-darker:#060d26;--color-foundations-fuji-pallet-light:#ebedf5;--color-foundations-fuji-pallet-medium:#475272;--color-foundations-fuji-pallet-medium-dark:#252f4a;--color-foundations-fuji-pallet-soft:#c8cedd;--color-foundations-fuji-pallet-soft-medium:#707993;--color-foundations-galcier-pallet-bright:#f8fcff;--color-foundations-galcier-pallet-dark:#597588;--color-foundations-galcier-pallet-dark-darker:#465e6f;--color-foundations-galcier-pallet-darker:#344856;--color-foundations-galcier-pallet-light:#dcf1ff;--color-foundations-galcier-pallet-light-soft:#c0e5ff;--color-foundations-galcier-pallet-medium:#82a4bb;--color-foundations-galcier-pallet-medium-dark:#6d8ca2;--color-foundations-galcier-pallet-soft:#afd4ef;--color-foundations-galcier-pallet-soft-medium:#98bcd5;--color-foundations-moody-blue-pallet-bright:#f3f5ff;--color-foundations-moody-blue-pallet-dark:#26387b;--color-foundations-moody-blue-pallet-dark-darker:#172559;--color-foundations-moody-blue-pallet-darker:#182342;--color-foundations-moody-blue-pallet-light:#d7dfff;--color-foundations-moody-blue-pallet-light-soft:#bccaff;--color-foundations-moody-blue-pallet-medium:#6982e1;--color-foundations-moody-blue-pallet-medium-dark:#4f67bf;--color-foundations-moody-blue-pallet-soft:#a0b4ff;--color-foundations-moody-blue-pallet-soft-medium:#859eff;--color-foundations-orange-pallet-light:#ffb381;--color-foundations-orange-pallet-medium:#f8842d;--color-foundations-orange-pallet-pink:#ff5558;--color-foundations-orange-pallet-red:#fe4d01;--color-foundations-orange-pallet-soft:#fb8b07;--color-foundations-purple-pallet-dark:#390f37;--color-foundations-purple-pallet-medium:#815288;--color-foundations-purple-pallet-soft:#bd9fd1;--color-foundations-saffron-pallet-dark:#694f00;--color-foundations-saffron-pallet-light:#fff9e9;--color-foundations-saffron-pallet-light-soft:#ffe9a8;--color-foundations-saffron-pallet-medium:#f1be25;--color-foundations-saffron-pallet-medium-dark:#ad8306;--color-foundations-saffron-pallet-soft:#ffd968;--color-foundations-sky-blue-pallet-bright:#edfcff;--color-foundations-sky-blue-pallet-dark:#13a8bf;--color-foundations-sky-blue-pallet-dark-darker:#008296;--color-foundations-sky-blue-pallet-darker:#005f6d;--color-foundations-sky-blue-pallet-light:#cdf8ff;--color-foundations-sky-blue-pallet-light-soft:#adf4ff;--color-foundations-sky-blue-pallet-medium:#4de7ff;--color-foundations-sky-blue-pallet-medium-dark:#2fcfe8;--color-foundations-sky-blue-pallet-soft:#8df0ff;--color-foundations-sky-blue-pallet-soft-medium:#6debff;--color-foundations-take-pallet-dark:#557909;--color-foundations-take-pallet-darker:#314604;--color-foundations-take-pallet-light:#f1ffd3;--color-foundations-take-pallet-medium:#95c135;--color-foundations-take-pallet-medium-dark:#7aa125;--color-foundations-take-pallet-soft:#d4eca1;--color-foundations-take-pallet-soft-medium:#afd461;--color-foundations-wisteria-pallet-dark:#502f55;--color-foundations-wisteria-pallet-light:#fef7ff;--color-foundations-wisteria-pallet-light-soft:#f2cff7;--color-foundations-wisteria-pallet-medium:#b37abb;--color-foundations-wisteria-pallet-medium-dark:#815288;--color-foundations-wisteria-pallet-soft:#e5a8ee;--color-foundations-yellow-pallet-light:#ede9da;--color-foundations-yellow-pallet-medium:#f1be25;--color-foundations-yellow-pallet-medium-dark:#eabf23;--color-foundations-yellow-pallet-soft:#f1dca7;--color-foundations-yellow-pallet-soft-medium:#dbbd7e;--font-alias-desktop-body-fontfamily:var(--font-inter);--font-alias-desktop-body-fontsize:16px}@layer base{p{font-family:var(--font-alias-mobile-body-fontfamily);font-size:var(--font-alias-mobile-body-fontsize);font-weight:var(--font-alias-mobile-body-fontweight);letter-spacing:var(--font-alias-mobile-body-letterspacing);line-height:var(--font-alias-mobile-body-lineheight);text-decoration:var(--font-alias-mobile-body-textdecoration);text-transform:var(--font-alias-mobile-body-textcase)}@media (min-width:768px){p{font-family:var(--font-alias-tablet-body-fontfamily);font-size:var(--font-alias-tablet-body-fontsize);font-weight:var(--font-alias-tablet-body-fontweight);letter-spacing:var(--font-alias-tablet-body-letterspacing);line-height:var(--font-alias-tablet-body-lineheight);text-decoration:var(--font-alias-tablet-body-textdecoration);text-transform:var(--font-alias-tablet-body-textcase)}}@media (min-width:1024px){p{font-family:var(--font-alias-desktop-body-fontfamily);font-size:var(--font-alias-desktop-body-fontsize);font-weight:var(--font-alias-desktop-body-fontweight);letter-spacing:var(--font-alias-desktop-body-letterspacing);line-height:var(--font-alias-desktop-body-lineheight);text-decoration:var(--font-alias-desktop-body-textdecoration);text-transform:var(--font-alias-desktop-body-textcase)}}h1{font-family:var(--font-alias-mobile-h1-fontfamily);font-size:var(--font-alias-mobile-h1-fontsize);font-weight:var(--font-alias-mobile-h1-fontweight);letter-spacing:var(--font-alias-mobile-h1-letterspacing);line-height:var(--font-alias-mobile-h1-lineheight);text-decoration:var(--font-alias-mobile-h1-textdecoration);text-transform:var(--font-alias-mobile-h1-textcase)}@media (min-width:768px){h1{font-family:var(--font-alias-tablet-h1-fontfamily);font-size:var(--font-alias-tablet-h1-fontsize);font-weight:var(--font-alias-tablet-h1-fontweight);letter-spacing:var(--font-alias-tablet-h1-letterspacing);line-height:var(--font-alias-tablet-h1-lineheight);text-decoration:var(--font-alias-tablet-h1-textdecoration);text-transform:var(--font-alias-tablet-h1-textcase)}}@media (min-width:1024px){h1{font-family:var(--font-alias-desktop-h1-fontfamily);font-size:var(--font-alias-desktop-h1-fontsize);font-weight:var(--font-alias-desktop-h1-fontweight);letter-spacing:var(--font-alias-desktop-h1-letterspacing);line-height:var(--font-alias-desktop-h1-lineheight);text-decoration:var(--font-alias-desktop-h1-textdecoration);text-transform:var(--font-alias-desktop-h1-textcase)}}h2{font-family:var(--font-alias-mobile-h2-fontfamily);font-size:var(--font-alias-mobile-h2-fontsize);font-weight:var(--font-alias-mobile-h2-fontweight);letter-spacing:var(--font-alias-mobile-h2-letterspacing);line-height:var(--font-alias-mobile-h2-lineheight);text-decoration:var(--font-alias-mobile-h2-textdecoration);text-transform:var(--font-alias-mobile-h2-textcase)}@media (min-width:768px){h2{font-family:var(--font-alias-tablet-h2-fontfamily);font-size:var(--font-alias-tablet-h2-fontsize);font-weight:var(--font-alias-tablet-h2-fontweight);letter-spacing:var(--font-alias-tablet-h2-letterspacing);line-height:var(--font-alias-tablet-h2-lineheight);text-decoration:var(--font-alias-tablet-h2-textdecoration);text-transform:var(--font-alias-tablet-h2-textcase)}}@media (min-width:1024px){h2{font-family:var(--font-alias-desktop-h2-fontfamily);font-size:var(--font-alias-desktop-h2-fontsize);font-weight:var(--font-alias-desktop-h2-fontweight);letter-spacing:var(--font-alias-desktop-h2-letterspacing);line-height:var(--font-alias-desktop-h2-lineheight);text-decoration:var(--font-alias-desktop-h2-textdecoration);text-transform:var(--font-alias-desktop-h2-textcase)}}h3{font-family:var(--font-alias-mobile-h3-fontfamily);font-size:var(--font-alias-mobile-h3-fontsize);font-weight:var(--font-alias-mobile-h3-fontweight);letter-spacing:var(--font-alias-mobile-h3-letterspacing);line-height:var(--font-alias-mobile-h3-lineheight);text-decoration:var(--font-alias-mobile-h3-textdecoration);text-transform:var(--font-alias-mobile-h3-textcase)}@media (min-width:768px){h3{font-family:var(--font-alias-tablet-h3-fontfamily);font-size:var(--font-alias-tablet-h3-fontsize);font-weight:var(--font-alias-tablet-h3-fontweight);letter-spacing:var(--font-alias-tablet-h3-letterspacing);line-height:var(--font-alias-tablet-h3-lineheight);text-decoration:var(--font-alias-tablet-h3-textdecoration);text-transform:var(--font-alias-tablet-h3-textcase)}}@media (min-width:1024px){h3{font-family:var(--font-alias-desktop-h3-fontfamily);font-size:var(--font-alias-desktop-h3-fontsize);font-weight:var(--font-alias-desktop-h3-fontweight);letter-spacing:var(--font-alias-desktop-h3-letterspacing);line-height:var(--font-alias-desktop-h3-lineheight);text-decoration:var(--font-alias-desktop-h3-textdecoration);text-transform:var(--font-alias-desktop-h3-textcase)}}small{font-family:var(--font-alias-mobile-sub-fontfamily);font-size:var(--font-alias-mobile-sub-fontsize);font-weight:var(--font-alias-mobile-sub-fontweight);letter-spacing:var(--font-alias-mobile-sub-letterspacing);line-height:var(--font-alias-mobile-sub-lineheight);text-decoration:var(--font-alias-mobile-sub-textdecoration);text-transform:var(--font-alias-mobile-sub-textcase)}@media (min-width:768px){small{font-family:var(--font-alias-tablet-sub-fontfamily);font-size:var(--font-alias-tablet-sub-fontsize);font-weight:var(--font-alias-tablet-sub-fontweight);letter-spacing:var(--font-alias-tablet-sub-letterspacing);line-height:var(--font-alias-tablet-sub-lineheight);text-decoration:var(--font-alias-tablet-sub-textdecoration);text-transform:var(--font-alias-tablet-sub-textcase)}}@media (min-width:1024px){small{font-family:var(--font-alias-desktop-sub-fontfamily);font-size:var(--font-alias-desktop-sub-fontsize);font-weight:var(--font-alias-desktop-sub-fontweight);letter-spacing:var(--font-alias-desktop-sub-letterspacing);line-height:var(--font-alias-desktop-sub-lineheight);text-decoration:var(--font-alias-desktop-sub-textdecoration);text-transform:var(--font-alias-desktop-sub-textcase)}}button{font-family:var(--font-alias-mobile-button-fontfamily);font-size:var(--font-alias-mobile-button-fontsize);font-weight:var(--font-alias-mobile-button-fontweight);letter-spacing:var(--font-alias-mobile-button-letterspacing);line-height:var(--font-alias-mobile-button-lineheight);text-decoration:var(--font-alias-mobile-button-textdecoration);text-transform:var(--font-alias-mobile-button-textcase)}@media (min-width:768px){button{font-family:var(--font-alias-tablet-button-fontfamily);font-size:var(--font-alias-tablet-button-fontsize);font-weight:var(--font-alias-tablet-button-fontweight);letter-spacing:var(--font-alias-tablet-button-letterspacing);line-height:var(--font-alias-tablet-button-lineheight);text-decoration:var(--font-alias-tablet-button-textdecoration);text-transform:var(--font-alias-tablet-button-textcase)}}@media (min-width:1024px){button{font-family:var(--font-alias-desktop-button-fontfamily);font-size:var(--font-alias-desktop-button-fontsize);font-weight:var(--font-alias-desktop-button-fontweight);letter-spacing:var(--font-alias-desktop-button-letterspacing);line-height:var(--font-alias-desktop-button-lineheight);text-decoration:var(--font-alias-desktop-button-textdecoration);text-transform:var(--font-alias-desktop-button-textcase)}}}@layer components{.typo-body{font-family:var(--font-alias-mobile-body-fontfamily);font-size:var(--font-alias-mobile-body-fontsize);font-weight:var(--font-alias-mobile-body-fontweight);letter-spacing:var(--font-alias-mobile-body-letterspacing);line-height:var(--font-alias-mobile-body-lineheight);text-decoration:var(--font-alias-mobile-body-textdecoration);text-transform:var(--font-alias-mobile-body-textcase)}@media (min-width:768px){.typo-body{font-family:var(--font-alias-tablet-body-fontfamily);font-size:var(--font-alias-tablet-body-fontsize);font-weight:var(--font-alias-tablet-body-fontweight);letter-spacing:var(--font-alias-tablet-body-letterspacing);line-height:var(--font-alias-tablet-body-lineheight);text-decoration:var(--font-alias-tablet-body-textdecoration);text-transform:var(--font-alias-tablet-body-textcase)}}@media (min-width:1024px){.typo-body{font-family:var(--font-alias-desktop-body-fontfamily);font-size:var(--font-alias-desktop-body-fontsize);font-weight:var(--font-alias-desktop-body-fontweight);letter-spacing:var(--font-alias-desktop-body-letterspacing);line-height:var(--font-alias-desktop-body-lineheight);text-decoration:var(--font-alias-desktop-body-textdecoration);text-transform:var(--font-alias-desktop-body-textcase)}}.typo-h1{font-family:var(--font-alias-mobile-h1-fontfamily);font-size:var(--font-alias-mobile-h1-fontsize);font-weight:var(--font-alias-mobile-h1-fontweight);letter-spacing:var(--font-alias-mobile-h1-letterspacing);line-height:var(--font-alias-mobile-h1-lineheight);text-decoration:var(--font-alias-mobile-h1-textdecoration);text-transform:var(--font-alias-mobile-h1-textcase)}@media (min-width:768px){.typo-h1{font-family:var(--font-alias-tablet-h1-fontfamily);font-size:var(--font-alias-tablet-h1-fontsize);font-weight:var(--font-alias-tablet-h1-fontweight);letter-spacing:var(--font-alias-tablet-h1-letterspacing);line-height:var(--font-alias-tablet-h1-lineheight);text-decoration:var(--font-alias-tablet-h1-textdecoration);text-transform:var(--font-alias-tablet-h1-textcase)}}@media (min-width:1024px){.typo-h1{font-family:var(--font-alias-desktop-h1-fontfamily);font-size:var(--font-alias-desktop-h1-fontsize);font-weight:var(--font-alias-desktop-h1-fontweight);letter-spacing:var(--font-alias-desktop-h1-letterspacing);line-height:var(--font-alias-desktop-h1-lineheight);text-decoration:var(--font-alias-desktop-h1-textdecoration);text-transform:var(--font-alias-desktop-h1-textcase)}}.typo-h2{font-family:var(--font-alias-mobile-h2-fontfamily);font-size:var(--font-alias-mobile-h2-fontsize);font-weight:var(--font-alias-mobile-h2-fontweight);letter-spacing:var(--font-alias-mobile-h2-letterspacing);line-height:var(--font-alias-mobile-h2-lineheight);text-decoration:var(--font-alias-mobile-h2-textdecoration);text-transform:var(--font-alias-mobile-h2-textcase)}@media (min-width:768px){.typo-h2{font-family:var(--font-alias-tablet-h2-fontfamily);font-size:var(--font-alias-tablet-h2-fontsize);font-weight:var(--font-alias-tablet-h2-fontweight);letter-spacing:var(--font-alias-tablet-h2-letterspacing);line-height:var(--font-alias-tablet-h2-lineheight);text-decoration:var(--font-alias-tablet-h2-textdecoration);text-transform:var(--font-alias-tablet-h2-textcase)}}@media (min-width:1024px){.typo-h2{font-family:var(--font-alias-desktop-h2-fontfamily);font-size:var(--font-alias-desktop-h2-fontsize);font-weight:var(--font-alias-desktop-h2-fontweight);letter-spacing:var(--font-alias-desktop-h2-letterspacing);line-height:var(--font-alias-desktop-h2-lineheight);text-decoration:var(--font-alias-desktop-h2-textdecoration);text-transform:var(--font-alias-desktop-h2-textcase)}}.typo-h3{font-family:var(--font-alias-mobile-h3-fontfamily);font-size:var(--font-alias-mobile-h3-fontsize);font-weight:var(--font-alias-mobile-h3-fontweight);letter-spacing:var(--font-alias-mobile-h3-letterspacing);line-height:var(--font-alias-mobile-h3-lineheight);text-decoration:var(--font-alias-mobile-h3-textdecoration);text-transform:var(--font-alias-mobile-h3-textcase)}@media (min-width:768px){.typo-h3{font-family:var(--font-alias-tablet-h3-fontfamily);font-size:var(--font-alias-tablet-h3-fontsize);font-weight:var(--font-alias-tablet-h3-fontweight);letter-spacing:var(--font-alias-tablet-h3-letterspacing);line-height:var(--font-alias-tablet-h3-lineheight);text-decoration:var(--font-alias-tablet-h3-textdecoration);text-transform:var(--font-alias-tablet-h3-textcase)}}@media (min-width:1024px){.typo-h3{font-family:var(--font-alias-desktop-h3-fontfamily);font-size:var(--font-alias-desktop-h3-fontsize);font-weight:var(--font-alias-desktop-h3-fontweight);letter-spacing:var(--font-alias-desktop-h3-letterspacing);line-height:var(--font-alias-desktop-h3-lineheight);text-decoration:var(--font-alias-desktop-h3-textdecoration);text-transform:var(--font-alias-desktop-h3-textcase)}}.typo-sub{font-family:var(--font-alias-mobile-sub-fontfamily);font-size:var(--font-alias-mobile-sub-fontsize);font-weight:var(--font-alias-mobile-sub-fontweight);letter-spacing:var(--font-alias-mobile-sub-letterspacing);line-height:var(--font-alias-mobile-sub-lineheight);text-decoration:var(--font-alias-mobile-sub-textdecoration);text-transform:var(--font-alias-mobile-sub-textcase)}@media (min-width:768px){.typo-sub{font-family:var(--font-alias-tablet-sub-fontfamily);font-size:var(--font-alias-tablet-sub-fontsize);font-weight:var(--font-alias-tablet-sub-fontweight);letter-spacing:var(--font-alias-tablet-sub-letterspacing);line-height:var(--font-alias-tablet-sub-lineheight);text-decoration:var(--font-alias-tablet-sub-textdecoration);text-transform:var(--font-alias-tablet-sub-textcase)}}@media (min-width:1024px){.typo-sub{font-family:var(--font-alias-desktop-sub-fontfamily);font-size:var(--font-alias-desktop-sub-fontsize);font-weight:var(--font-alias-desktop-sub-fontweight);letter-spacing:var(--font-alias-desktop-sub-letterspacing);line-height:var(--font-alias-desktop-sub-lineheight);text-decoration:var(--font-alias-desktop-sub-textdecoration);text-transform:var(--font-alias-desktop-sub-textcase)}}.typo-discount{font-family:var(--font-alias-mobile-discount-fontfamily);font-size:var(--font-alias-mobile-discount-fontsize);font-weight:var(--font-alias-mobile-discount-fontweight);letter-spacing:var(--font-alias-mobile-discount-letterspacing);line-height:var(--font-alias-mobile-discount-lineheight);text-decoration:var(--font-alias-mobile-discount-textdecoration);text-transform:var(--font-alias-mobile-discount-textcase)}@media (min-width:768px){.typo-discount{font-family:var(--font-alias-tablet-discount-fontfamily);font-size:var(--font-alias-tablet-discount-fontsize);font-weight:var(--font-alias-tablet-discount-fontweight);letter-spacing:var(--font-alias-tablet-discount-letterspacing);line-height:var(--font-alias-tablet-discount-lineheight);text-decoration:var(--font-alias-tablet-discount-textdecoration);text-transform:var(--font-alias-tablet-discount-textcase)}}@media (min-width:1024px){.typo-discount{font-family:var(--font-alias-desktop-discount-fontfamily);font-size:var(--font-alias-desktop-discount-fontsize);font-weight:var(--font-alias-desktop-discount-fontweight);letter-spacing:var(--font-alias-desktop-discount-letterspacing);line-height:var(--font-alias-desktop-discount-lineheight);text-decoration:var(--font-alias-desktop-discount-textdecoration);text-transform:var(--font-alias-desktop-discount-textcase)}}.typo-tags{font-family:var(--font-alias-mobile-tags-fontfamily);font-size:var(--font-alias-mobile-tags-fontsize);font-weight:var(--font-alias-mobile-tags-fontweight);letter-spacing:var(--font-alias-mobile-tags-letterspacing);line-height:var(--font-alias-mobile-tags-lineheight);text-decoration:var(--font-alias-mobile-tags-textdecoration);text-transform:var(--font-alias-mobile-tags-textcase)}@media (min-width:768px){.typo-tags{font-family:var(--font-alias-tablet-tags-fontfamily);font-size:var(--font-alias-tablet-tags-fontsize);font-weight:var(--font-alias-tablet-tags-fontweight);letter-spacing:var(--font-alias-tablet-tags-letterspacing);line-height:var(--font-alias-tablet-tags-lineheight);text-decoration:var(--font-alias-tablet-tags-textdecoration);text-transform:var(--font-alias-tablet-tags-textcase)}}@media (min-width:1024px){.typo-tags{font-family:var(--font-alias-desktop-tags-fontfamily);font-size:var(--font-alias-desktop-tags-fontsize);font-weight:var(--font-alias-desktop-tags-fontweight);letter-spacing:var(--font-alias-desktop-tags-letterspacing);line-height:var(--font-alias-desktop-tags-lineheight);text-decoration:var(--font-alias-desktop-tags-textdecoration);text-transform:var(--font-alias-desktop-tags-textcase)}}.typo-menu{font-family:var(--font-alias-mobile-menu-fontfamily);font-size:var(--font-alias-mobile-menu-fontsize);font-weight:var(--font-alias-mobile-menu-fontweight);letter-spacing:var(--font-alias-mobile-menu-letterspacing);line-height:var(--font-alias-mobile-menu-lineheight);text-decoration:var(--font-alias-mobile-menu-textdecoration);text-transform:var(--font-alias-mobile-menu-textcase)}@media (min-width:768px){.typo-menu{font-family:var(--font-alias-tablet-menu-fontfamily);font-size:var(--font-alias-tablet-menu-fontsize);font-weight:var(--font-alias-tablet-menu-fontweight);letter-spacing:var(--font-alias-tablet-menu-letterspacing);line-height:var(--font-alias-tablet-menu-lineheight);text-decoration:var(--font-alias-tablet-menu-textdecoration);text-transform:var(--font-alias-tablet-menu-textcase)}}@media (min-width:1024px){.typo-menu{font-family:var(--font-alias-desktop-menu-fontfamily);font-size:var(--font-alias-desktop-menu-fontsize);font-weight:var(--font-alias-desktop-menu-fontweight);letter-spacing:var(--font-alias-desktop-menu-letterspacing);line-height:var(--font-alias-desktop-menu-lineheight);text-decoration:var(--font-alias-desktop-menu-textdecoration);text-transform:var(--font-alias-desktop-menu-textcase)}}.typo-text-button{font-family:var(--font-alias-mobile-text-button-fontfamily);font-size:var(--font-alias-mobile-text-button-fontsize);font-weight:var(--font-alias-mobile-text-button-fontweight);letter-spacing:var(--font-alias-mobile-text-button-letterspacing);line-height:var(--font-alias-mobile-text-button-lineheight);text-decoration:var(--font-alias-mobile-text-button-textdecoration);text-transform:var(--font-alias-mobile-text-button-textcase)}@media (min-width:768px){.typo-text-button{font-family:var(--font-alias-tablet-text-button-fontfamily);font-size:var(--font-alias-tablet-text-button-fontsize);font-weight:var(--font-alias-tablet-text-button-fontweight);letter-spacing:var(--font-alias-tablet-text-button-letterspacing);line-height:var(--font-alias-tablet-text-button-lineheight);text-decoration:var(--font-alias-tablet-text-button-textdecoration);text-transform:var(--font-alias-tablet-text-button-textcase)}}@media (min-width:1024px){.typo-text-button{font-family:var(--font-alias-desktop-text-button-fontfamily);font-size:var(--font-alias-desktop-text-button-fontsize);font-weight:var(--font-alias-desktop-text-button-fontweight);letter-spacing:var(--font-alias-desktop-text-button-letterspacing);line-height:var(--font-alias-desktop-text-button-lineheight);text-decoration:var(--font-alias-desktop-text-button-textdecoration);text-transform:var(--font-alias-desktop-text-button-textcase)}}.typo-text-button-line{font-family:var(--font-alias-mobile-text-button-line-fontfamily);font-size:var(--font-alias-mobile-text-button-line-fontsize);font-weight:var(--font-alias-mobile-text-button-line-fontweight);letter-spacing:var(--font-alias-mobile-text-button-line-letterspacing);line-height:var(--font-alias-mobile-text-button-line-lineheight);text-decoration:var(--font-alias-mobile-text-button-line-textdecoration);text-transform:var(--font-alias-mobile-text-button-line-textcase)}@media (min-width:768px){.typo-text-button-line{font-family:var(--font-alias-tablet-text-button-line-fontfamily);font-size:var(--font-alias-tablet-text-button-line-fontsize);font-weight:var(--font-alias-tablet-text-button-line-fontweight);letter-spacing:var(--font-alias-tablet-text-button-line-letterspacing);line-height:var(--font-alias-tablet-text-button-line-lineheight);text-decoration:var(--font-alias-tablet-text-button-line-textdecoration);text-transform:var(--font-alias-tablet-text-button-line-textcase)}}@media (min-width:1024px){.typo-text-button-line{font-family:var(--font-alias-desktop-text-button-line-fontfamily);font-size:var(--font-alias-desktop-text-button-line-fontsize);font-weight:var(--font-alias-desktop-text-button-line-fontweight);letter-spacing:var(--font-alias-desktop-text-button-line-letterspacing);line-height:var(--font-alias-desktop-text-button-line-lineheight);text-decoration:var(
|
|
2
|
+
--font-alias-desktop-text-button-line-textdecoration
|
|
3
|
+
);text-transform:var(--font-alias-desktop-text-button-line-textcase)}}.typo-button{font-family:var(--font-alias-mobile-button-fontfamily);font-size:var(--font-alias-mobile-button-fontsize);font-weight:var(--font-alias-mobile-button-fontweight);letter-spacing:var(--font-alias-mobile-button-letterspacing);line-height:var(--font-alias-mobile-button-lineheight);text-decoration:var(--font-alias-mobile-button-textdecoration);text-transform:var(--font-alias-mobile-button-textcase)}@media (min-width:768px){.typo-button{font-family:var(--font-alias-tablet-button-fontfamily);font-size:var(--font-alias-tablet-button-fontsize);font-weight:var(--font-alias-tablet-button-fontweight);letter-spacing:var(--font-alias-tablet-button-letterspacing);line-height:var(--font-alias-tablet-button-lineheight);text-decoration:var(--font-alias-tablet-button-textdecoration);text-transform:var(--font-alias-tablet-button-textcase)}}@media (min-width:1024px){.typo-button{font-family:var(--font-alias-desktop-button-fontfamily);font-size:var(--font-alias-desktop-button-fontsize);font-weight:var(--font-alias-desktop-button-fontweight);letter-spacing:var(--font-alias-desktop-button-letterspacing);line-height:var(--font-alias-desktop-button-lineheight);text-decoration:var(--font-alias-desktop-button-textdecoration);text-transform:var(--font-alias-desktop-button-textcase)}}.typo-button-sm{font-family:var(--font-alias-tablet-button-sm-fontfamily);font-size:var(--font-alias-tablet-button-sm-fontsize);font-weight:var(--font-alias-tablet-button-sm-fontweight);letter-spacing:var(--font-alias-tablet-button-sm-letterspacing);line-height:var(--font-alias-tablet-button-sm-lineheight);text-decoration:var(--font-alias-tablet-button-sm-textdecoration);text-transform:var(--font-alias-tablet-button-sm-textcase)}@media (min-width:1024px){.typo-button-sm{font-family:var(--font-alias-desktop-button-sm-fontfamily);font-size:var(--font-alias-desktop-button-sm-fontsize);font-weight:var(--font-alias-desktop-button-sm-fontweight);letter-spacing:var(--font-alias-desktop-button-sm-letterspacing);line-height:var(--font-alias-desktop-button-sm-lineheight);text-decoration:var(--font-alias-desktop-button-sm-textdecoration);text-transform:var(--font-alias-desktop-button-sm-textcase)}}.typo-logo{font-family:var(--font-alias-mobile-logo-fontfamily);font-size:var(--font-alias-mobile-logo-fontsize);font-weight:var(--font-alias-mobile-logo-fontweight);letter-spacing:var(--font-alias-mobile-logo-letterspacing);line-height:var(--font-alias-mobile-logo-lineheight);text-decoration:var(--font-alias-mobile-logo-textdecoration);text-transform:var(--font-alias-mobile-logo-textcase)}@media (min-width:768px){.typo-logo{font-family:var(--font-alias-tablet-logo-fontfamily);font-size:var(--font-alias-tablet-logo-fontsize);font-weight:var(--font-alias-tablet-logo-fontweight);letter-spacing:var(--font-alias-tablet-logo-letterspacing);line-height:var(--font-alias-tablet-logo-lineheight);text-decoration:var(--font-alias-tablet-logo-textdecoration);text-transform:var(--font-alias-tablet-logo-textcase)}}@media (min-width:1024px){.typo-logo{font-family:var(--font-alias-desktop-logo-fontfamily);font-size:var(--font-alias-desktop-logo-fontsize);font-weight:var(--font-alias-desktop-logo-fontweight);letter-spacing:var(--font-alias-desktop-logo-letterspacing);line-height:var(--font-alias-desktop-logo-lineheight);text-decoration:var(--font-alias-desktop-logo-textdecoration);text-transform:var(--font-alias-desktop-logo-textcase)}}}:root{--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--radius:0.625rem;--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}[role=button]:not(:disabled),button:not(:disabled){cursor:pointer}body{background-color:var(--background);font-family:var(--font-inter),"Kanit","sans-serif"}:root{--color-background:var(--background);--color-foreground:var(--foreground);--font-sans:var(--font-inter);--font-mono:var(--font-kanit);--color-sidebar-ring:var(--sidebar-ring);--color-sidebar-border:var(--sidebar-border);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar:var(--sidebar);--color-chart-5:var(--chart-5);--color-chart-4:var(--chart-4);--color-chart-3:var(--chart-3);--color-chart-2:var(--chart-2);--color-chart-1:var(--chart-1);--color-ring:var(--ring);--color-input:var(--input);--color-border:var(--border);--color-destructive:var(--destructive);--color-accent-foreground:var(--accent-foreground);--color-accent:var(--accent);--color-muted-foreground:var(--muted-foreground);--color-muted:var(--muted);--color-secondary-foreground:var(--secondary-foreground);--color-secondary:var(--secondary);--color-primary-foreground:var(--primary-foreground);--color-primary:var(--primary);--color-popover-foreground:var(--popover-foreground);--color-popover:var(--popover);--color-card-foreground:var(--card-foreground);--color-card:var(--card);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--radius-circle:var(--border-radius-circle);--radius-square:var(--border-radius-square);--radius-square-hard:var(--border-radius-square-hard);--spacing-1x:var(--spacing-space1x);--spacing-2x:var(--spacing-space2x);--spacing-3x:var(--spacing-space3x);--spacing-4x:var(--spacing-space4x);--color-brand-primary:var(--color-alias-color-brand-primary);--color-brand-secondary:var(--color-alias-color-brand-secondary);--color-brand-surface:var(--color-alias-color-brand-surface);--color-brand-text-dark:var(--color-alias-color-brand-text-dark);--color-semantic-critical:var(--color-alias-semantic-critical);--color-semantic-critical-dark:var(--color-alias-semantic-critical-dark);--color-semantic-critical-dark-hover:var(--color-alias-semantic-critical-dark-hover);--color-semantic-critical-hover:var(--color-alias-semantic-critical-hover);--color-semantic-neutral:var(--color-alias-semantic-neutral);--color-semantic-success:var(--color-alias-semantic-success);--color-semantic-success-hover:var(--color-alias-semantic-success-hover);--color-semantic-verified:var(--color-alias-semantic-verifed);--color-semantic-warning:var(--color-alias-semantic-warning);--color-semantic-warning-hover:var(--color-alias-semantic-warning-hover);--color-status-danger:var(--color-alias-status-danger);--color-status-default:var(--color-alias-status-default);--color-status-stable:var(--color-alias-status-stable);--color-status-warning:var(--color-alias-status-warning);--color-text-critical:var(--color-alias-text-colors-critical);--color-text-critical-dark:var(--color-alias-text-colors-critical-dark);--color-text-disable:var(--color-alias-text-colors-disable);--color-text-disable-dark:var(--color-alias-text-colors-disable-dark);--color-text-placeholder:var(--color-alias-text-colors-placeholder);--color-text-primary:var(--color-alias-text-colors-primary);--color-text-primary-dark:var(--color-alias-text-colors-primary-dark);--color-text-secondary:var(--color-alias-text-colors-secondary);--color-text-secondary-dark:var(--color-alias-text-colors-secondary-dark);--color-text-tags:var(--color-alias-text-colors-tags);--color-text-tertiary:var(--color-alias-text-colors-tertirary);--color-text-tertiary-dark:var(--color-alias-text-colors-tertiary-dark);--color-border-disable:var(--color-border-colors-border-color-disable);--color-border-disable-dark:var(--color-border-colors-border-color-disable-dark);--color-border-critical:var(--color-border-colors-critical);--color-border-default:var(--color-border-colors-default);--color-border-default-dark:var(--color-border-colors-default-dark);--color-border-hover:var(--color-border-colors-hover);--color-border-neutral:var(--color-border-colors-neutral);--color-border-tags:var(--color-border-colors-tags);--color-border-tags-dark:var(--color-border-colors-tags-dark);--color-btn-default:var(--color-btn-default);--color-btn-hover:var(--color-btn-hover);--color-btn-primary:var(--color-btn-primary);--color-field-default:var(--color-text-field-default);--color-field-default-dark:var(--color-text-field-default-dark);--color-field-disable:var(--color-text-field-disable);--color-icon-default:var(--color-icon-color-default);--color-icon-default-dark:var(--color-icon-color-default-dark);--color-icon-hover:var(--color-icon-color-hover-active);--color-icon-security:var(--color-icon-color-security);--color-icon-security-hover:var(--color-icon-color-security-hover-active);--color-icon-success:var(--color-icon-color-success);--color-icon-success-hover:var(--color-icon-color-success-hover);--color-icon-tax:var(--color-icon-color-tax);--color-icon-tax-hover:var(--color-icon-color-tax-hover-active);--color-icon-warning:var(--color-icon-color-warning);--color-icon-warning-hover:var(--color-icon-color-warning-hover);--color-icon-water:var(--color-icon-color-water);--color-icon-water-hover:var(--color-icon-color-water-hover-active);--color-icon-critical:var(--color-icon-color-critical);--color-icon-critical-hover:var(--color-icon-color-critical-hover);--color-apple-dark:var(--color-foundations-apple-pallet-dark);--color-apple-darker:var(--color-foundations-apple-pallet-darker);--color-apple-light:var(--color-foundations-apple-pallet-light);--color-apple-medium:var(--color-foundations-apple-pallet-medium);--color-apple-soft:var(--color-foundations-apple-pallet-soft);--color-blue-dark:var(--color-foundations-blue-pallet-dark);--color-blue-darker:var(--color-foundations-blue-pallet-darker);--color-blue-medium:var(--color-foundations-blue-pallet-medium);--color-blue-medium-dark:var(--color-foundations-blue-pallet-medium-dark);--color-blue-soft:var(--color-foundations-blue-pallet-soft);--color-blue-soft-medium:var(--color-foundations-blue-pallet-soft-medium);--color-crustae-dark:var(--color-foundations-crustae-pallet-dark);--color-crustae-light:var(--color-foundations-crustae-pallet-light);--color-crustae-light-soft:var(--color-foundations-crustae-pallet-light-soft);--color-crustae-medium:var(--color-foundations-crustae-pallet-medium);--color-crustae-medium-dark:var(--color-foundations-crustae-pallet-medium-dark);--color-crustae-soft:var(--color-foundations-crustae-pallet-soft);--color-fuan-dark:var(--color-foundations-fuan-pallet-dark);--color-fuan-darker:var(--color-foundations-fuan-pallet-darker);--color-fuan-light:var(--color-foundations-fuan-pallet-light);--color-fuan-medium:var(--color-foundations-fuan-pallet-medium);--color-fuan-medium-dark:var(--color-foundations-fuan-pallet-medium-dark);--color-fuan-soft:var(--color-foundations-fuan-pallet-soft);--color-fuan-soft-medium:var(--color-foundations-fuan-pallet-soft-medium);--color-fuji-bright:var(--color-foundations-fuji-pallet-bright);--color-fuji-dark:var(--color-foundations-fuji-pallet-dark);--color-fuji-darker:var(--color-foundations-fuji-pallet-darker);--color-fuji-light:var(--color-foundations-fuji-pallet-light);--color-fuji-medium:var(--color-foundations-fuji-pallet-medium);--color-fuji-medium-dark:var(--color-foundations-fuji-pallet-medium-dark);--color-fuji-soft:var(--color-foundations-fuji-pallet-soft);--color-fuji-soft-medium:var(--color-foundations-fuji-pallet-soft-medium);--color-glacier-bright:var(--color-foundations-galcier-pallet-bright);--color-glacier-dark:var(--color-foundations-galcier-pallet-dark);--color-glacier-dark-darker:var(--color-foundations-galcier-pallet-dark-darker);--color-glacier-darker:var(--color-foundations-galcier-pallet-darker);--color-glacier-light:var(--color-foundations-galcier-pallet-light);--color-glacier-light-soft:var(--color-foundations-galcier-pallet-light-soft);--color-glacier-medium:var(--color-foundations-galcier-pallet-medium);--color-glacier-medium-dark:var(--color-foundations-galcier-pallet-medium-dark);--color-glacier-soft:var(--color-foundations-galcier-pallet-soft);--color-glacier-soft-medium:var(--color-foundations-galcier-pallet-soft-medium);--color-moody-bright:var(--color-foundations-moody-blue-pallet-bright);--color-moody-dark:var(--color-foundations-moody-blue-pallet-dark);--color-moody-dark-darker:var(--color-foundations-moody-blue-pallet-dark-darker);--color-moody-darker:var(--color-foundations-moody-blue-pallet-darker);--color-moody-light:var(--color-foundations-moody-blue-pallet-light);--color-moody-light-soft:var(--color-foundations-moody-blue-pallet-light-soft);--color-moody-medium:var(--color-foundations-moody-blue-pallet-medium);--color-moody-medium-dark:var(--color-foundations-moody-blue-pallet-medium-dark);--color-moody-soft:var(--color-foundations-moody-blue-pallet-soft);--color-moody-soft-medium:var(--color-foundations-moody-blue-pallet-soft-medium);--color-orange-light:var(--color-foundations-orange-pallet-light);--color-orange-medium:var(--color-foundations-orange-pallet-medium);--color-orange-pink:var(--color-foundations-orange-pallet-pink);--color-orange-red:var(--color-foundations-orange-pallet-red);--color-orange-soft:var(--color-foundations-orange-pallet-soft);--color-purple-dark:var(--color-foundations-purple-pallet-dark);--color-purple-medium:var(--color-foundations-purple-pallet-medium);--color-purple-soft:var(--color-foundations-purple-pallet-soft);--color-saffron-dark:var(--color-foundations-saffron-pallet-dark);--color-saffron-light:var(--color-foundations-saffron-pallet-light);--color-saffron-light-soft:var(--color-foundations-saffron-pallet-light-soft);--color-saffron-medium:var(--color-foundations-saffron-pallet-medium);--color-saffron-medium-dark:var(--color-foundations-saffron-pallet-medium-dark);--color-saffron-soft:var(--color-foundations-saffron-pallet-soft);--color-sky-bright:var(--color-foundations-sky-blue-pallet-bright);--color-sky-dark:var(--color-foundations-sky-blue-pallet-dark);--color-sky-dark-darker:var(--color-foundations-sky-blue-pallet-dark-darker);--color-sky-darker:var(--color-foundations-sky-blue-pallet-darker);--color-sky-light:var(--color-foundations-sky-blue-pallet-light);--color-sky-light-soft:var(--color-foundations-sky-blue-pallet-light-soft);--color-sky-medium:var(--color-foundations-sky-blue-pallet-medium);--color-sky-medium-dark:var(--color-foundations-sky-blue-pallet-medium-dark);--color-sky-soft:var(--color-foundations-sky-blue-pallet-soft);--color-sky-soft-medium:var(--color-foundations-sky-blue-pallet-soft-medium);--color-take-dark:var(--color-foundations-take-pallet-dark);--color-take-darker:var(--color-foundations-take-pallet-darker);--color-take-light:var(--color-foundations-take-pallet-light);--color-take-medium:var(--color-foundations-take-pallet-medium);--color-take-medium-dark:var(--color-foundations-take-pallet-medium-dark);--color-take-soft:var(--color-foundations-take-pallet-soft);--color-take-soft-medium:var(--color-foundations-take-pallet-soft-medium);--color-wisteria-dark:var(--color-foundations-wisteria-pallet-dark);--color-wisteria-light:var(--color-foundations-wisteria-pallet-light);--color-wisteria-light-soft:var(--color-foundations-wisteria-pallet-light-soft);--color-wisteria-medium:var(--color-foundations-wisteria-pallet-medium);--color-wisteria-medium-dark:var(--color-foundations-wisteria-pallet-medium-dark);--color-wisteria-soft:var(--color-foundations-wisteria-pallet-soft);--color-yellow-light:var(--color-foundations-yellow-pallet-light);--color-yellow-medium:var(--color-foundations-yellow-pallet-medium);--color-yellow-medium-dark:var(--color-foundations-yellow-pallet-medium-dark);--color-yellow-soft:var(--color-foundations-yellow-pallet-soft);--color-yellow-soft-medium:var(--color-foundations-yellow-pallet-soft-medium);--shadow-smooth-low:var(--effect-shadow-smooth-low-0-offsetx) var(--effect-shadow-smooth-low-0-offsety) var(--effect-shadow-smooth-low-0-radius) var(--effect-shadow-smooth-low-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-low-0-color) 10%,transparent),var(--effect-shadow-smooth-low-1-offsetx) var(--effect-shadow-smooth-low-1-offsety) var(--effect-shadow-smooth-low-1-radius) var(--effect-shadow-smooth-low-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-low-1-color) 8%,transparent);--shadow-smooth-medium:var(--effect-shadow-smooth-medium-0-offsetx) var(--effect-shadow-smooth-medium-0-offsety) var(--effect-shadow-smooth-medium-0-radius) var(--effect-shadow-smooth-medium-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-medium-0-color) 12%,transparent),var(--effect-shadow-smooth-medium-1-offsetx) var(--effect-shadow-smooth-medium-1-offsety) var(--effect-shadow-smooth-medium-1-radius) var(--effect-shadow-smooth-medium-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-medium-1-color) 8%,transparent);--shadow-smooth-high:var(--effect-shadow-smooth-high-0-offsetx) var(--effect-shadow-smooth-high-0-offsety) var(--effect-shadow-smooth-high-0-radius) var(--effect-shadow-smooth-high-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-high-0-color) 15%,transparent),var(--effect-shadow-smooth-high-1-offsetx) var(--effect-shadow-smooth-high-1-offsety) var(--effect-shadow-smooth-high-1-radius) var(--effect-shadow-smooth-high-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-high-1-color) 8%,transparent);--ease-spring-snappy:linear(0,0.2375,0.5904,0.8358,0.9599,1.0061,1.0152,1.0116,1.0062,1.0025,1.0006,0.9999,1);--ease-spring:linear(0,0.0942,0.2989,0.5275,0.73,0.8839,0.9858,1.0425,1.0655,1.0666,1.0558,1.0405,1.0255,1.0131,1.0043,0.9989,0.9962,1);--ease-spring-soft:linear(0,0.0332,0.1241,0.2583,0.4207,0.5967,0.7729,0.9379,1.0826,1.2006,1.2883,1.3445,1.3701,1.3679,1.3423,1.2983,1.2415,1.1774,1.1113,1.0477,0.9904,0.9421,0.9047,0.8789,0.8648,0.8615,0.8677,0.8815,0.9009,0.9239,0.9485,0.9727,0.9952,1.0146,1.0303,1.0417,1.0487,1.0515,1.0506,1.0465,1.0401,1.032,1.023,1.0138,1.0051,0.9974,0.9909,0.986,0.9828,0.9811,0.9809,0.9819,0.984,0.9868,0.99,0.9935,0.9968,0.9998,1.0025,1.0045,1.006,1.0069,1.0072,1.0069,1.0063,1.0054,1.0042,1.003,1.0017,1.0005,0.9995,0.9986,0.998,0.9976,1)}body{color:var(--foreground)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0);--color-text-primary:var(--color-alias-text-colors-primary-dark);--color-text-secondary:var(--color-alias-text-colors-secondary-dark);--color-text-tertiary:var(--color-alias-text-colors-tertiary-dark);--color-text-critical:var(--color-alias-text-colors-critical-dark);--color-border-default:var(--color-border-colors-default-dark);--color-border-tags:var(--color-border-colors-tags-dark);--color-icon-default:var(--color-icon-color-default-dark);--color-field-default:var(--color-text-field-default-dark);--shadow-smooth-low:var(--effect-shadow-smooth-low-dark-0-offsetx) var(--effect-shadow-smooth-low-dark-0-offsety) var(--effect-shadow-smooth-low-dark-0-radius) var(--effect-shadow-smooth-low-dark-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-low-dark-0-color) 25%,transparent),var(--effect-shadow-smooth-low-dark-1-offsetx) var(--effect-shadow-smooth-low-dark-1-offsety) var(--effect-shadow-smooth-low-dark-1-radius) var(--effect-shadow-smooth-low-dark-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-low-dark-1-color) 20%,transparent);--shadow-smooth-medium:var(--effect-shadow-smooth-medium-dark-0-offsetx) var(--effect-shadow-smooth-medium-dark-0-offsety) var(--effect-shadow-smooth-medium-dark-0-radius) var(--effect-shadow-smooth-medium-dark-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-medium-dark-0-color) 30%,transparent),var(--effect-shadow-smooth-medium-dark-1-offsetx) var(--effect-shadow-smooth-medium-dark-1-offsety) var(--effect-shadow-smooth-medium-dark-1-radius) var(--effect-shadow-smooth-medium-dark-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-medium-dark-1-color) 20%,transparent);--shadow-smooth-high:var(--effect-shadow-smooth-high-dark-0-offsetx) var(--effect-shadow-smooth-high-dark-0-offsety) var(--effect-shadow-smooth-high-dark-0-radius) var(--effect-shadow-smooth-high-dark-0-spread) color-mix(in srgb,var(--effect-shadow-smooth-high-dark-0-color) 35%,transparent),var(--effect-shadow-smooth-high-dark-1-offsetx) var(--effect-shadow-smooth-high-dark-1-offsety) var(--effect-shadow-smooth-high-dark-1-radius) var(--effect-shadow-smooth-high-dark-1-spread) color-mix(in srgb,var(--effect-shadow-smooth-high-dark-1-color) 20%,transparent)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--border-radius-circle:100px;--border-radius-square:8px;--border-radius-square-hard:16px;--spacing-space1x:8px;--spacing-space2x:16px;--spacing-space3x:24px;--spacing-space4x:32px;--layout-component-card-padding:var(--spacing-space3x);--layout-component-hitbox-min:48px;--layout-layout-grid-gutter:var(--spacing-space3x);--layout-layout-page-margin:var(--spacing-space4x);--color-alias-color-brand-primary:#1e7d55;--color-alias-color-brand-secondary:#80d897;--color-alias-color-brand-surface:#faf9e5;--color-alias-color-brand-text-dark:#05010e;--color-alias-semantic-critical:#f21515;--color-alias-semantic-critical-dark:#ffd2d2;--color-alias-semantic-critical-dark-hover:#ffa9a9;--color-alias-semantic-critical-hover:#c71b1b;--color-alias-semantic-neutral:#707993;--color-alias-semantic-success:#95c135;--color-alias-semantic-success-hover:#7aa125;--color-alias-semantic-verifed:#6982e1;--color-alias-semantic-warning:#f1be25;--color-alias-semantic-warning-hover:#ad8306;--color-alias-status-danger:#991d1d;--color-alias-status-default:#8df0ff;--color-alias-status-stable:#95c135;--color-alias-status-warning:#f8842d;--color-alias-text-colors-critical:#f21515;--color-alias-text-colors-critical-dark:#ffa9a9;--color-alias-text-colors-disable:#c8cedd;--color-alias-text-colors-disable-dark:#c8cedd;--color-alias-text-colors-placeholder:#707993;--color-alias-text-colors-primary:#060d26;--color-alias-text-colors-primary-dark:#fcfcff;--color-alias-text-colors-secondary:#1e7d55;--color-alias-text-colors-secondary-dark:#80d897;--color-alias-text-colors-tags:#a9edb9;--color-alias-text-colors-tertiary-dark:#c8cedd;--color-alias-text-colors-tertirary:#475272;--color-border-colors-border-color-disable:#c8cedd;--color-border-colors-border-color-disable-dark:#c8cedd;--color-border-colors-critical:#f21515;--color-border-colors-default:#a9edb9;--color-border-colors-default-dark:#80d897;--color-border-colors-hover:#80d897;--color-border-colors-neutral:#c8cedd;--color-border-colors-tags:#a9edb9;--color-border-colors-tags-dark:#1e7d55;--color-btn-default:#fcfcff;--color-btn-hover:#80d897;--color-btn-primary:#1e7d55;--color-icon-color-critical:#f21515;--color-icon-color-critical-hover:#c71b1b;--color-icon-color-default:#05010e;--color-icon-color-default-dark:#fcfcff;--color-icon-color-hover-active:#1e7d55;--color-icon-color-security:#b37abb;--color-icon-color-security-hover-active:#502f55;--color-icon-color-success:#95c135;--color-icon-color-success-hover:#7aa125;--color-icon-color-tax:#475272;--color-icon-color-tax-hover-active:#182342;--color-icon-color-warning:#f1be25;--color-icon-color-warning-hover:#ad8306;--color-icon-color-water:#13a8bf;--color-icon-color-water-hover-active:#008296;--color-text-field-default:#fcfcff;--color-text-field-default-dark:#060d26;--color-text-field-disable:#ebedf5;--effect-shadow-smooth-high-0-color:#060d26;--effect-shadow-smooth-high-0-offsetx:0px;--effect-shadow-smooth-high-0-offsety:8px;--effect-shadow-smooth-high-0-radius:15px;--effect-shadow-smooth-high-0-shadowtype:dropShadow;--effect-shadow-smooth-high-0-spread:2px;--effect-shadow-smooth-high-1-color:#060d26;--effect-shadow-smooth-high-1-offsetx:0px;--effect-shadow-smooth-high-1-offsety:0px;--effect-shadow-smooth-high-1-radius:4px;--effect-shadow-smooth-high-1-shadowtype:dropShadow;--effect-shadow-smooth-high-1-spread:0px;--effect-shadow-smooth-high-dark-0-color:#060d26;--effect-shadow-smooth-high-dark-0-offsetx:0px;--effect-shadow-smooth-high-dark-0-offsety:8px;--effect-shadow-smooth-high-dark-0-radius:15px;--effect-shadow-smooth-high-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-0-spread:2px;--effect-shadow-smooth-high-dark-1-color:#060d26;--effect-shadow-smooth-high-dark-1-offsetx:0px;--effect-shadow-smooth-high-dark-1-offsety:0px;--effect-shadow-smooth-high-dark-1-radius:4px;--effect-shadow-smooth-high-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-1-spread:0px;--effect-shadow-smooth-low-0-color:#000209;--effect-shadow-smooth-low-0-offsetx:0px;--effect-shadow-smooth-low-0-offsety:0px;--effect-shadow-smooth-low-0-radius:4px;--effect-shadow-smooth-low-0-shadowtype:dropShadow;--effect-shadow-smooth-low-0-spread:0px;--effect-shadow-smooth-low-1-color:#000209;--effect-shadow-smooth-low-1-offsetx:0px;--effect-shadow-smooth-low-1-offsety:2px;--effect-shadow-smooth-low-1-radius:2px;--effect-shadow-smooth-low-1-shadowtype:dropShadow;--effect-shadow-smooth-low-1-spread:0px;--effect-shadow-smooth-low-dark-0-color:#060d26;--effect-shadow-smooth-low-dark-0-offsetx:0px;--effect-shadow-smooth-low-dark-0-offsety:0px;--effect-shadow-smooth-low-dark-0-radius:4px;--effect-shadow-smooth-low-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-0-spread:0px;--effect-shadow-smooth-low-dark-1-color:#060d26;--effect-shadow-smooth-low-dark-1-offsetx:0px;--effect-shadow-smooth-low-dark-1-offsety:2px;--effect-shadow-smooth-low-dark-1-radius:2px;--effect-shadow-smooth-low-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-1-spread:0px;--effect-shadow-smooth-medium-0-color:#060d26;--effect-shadow-smooth-medium-0-offsetx:0px;--effect-shadow-smooth-medium-0-offsety:4px;--effect-shadow-smooth-medium-0-radius:10px;--effect-shadow-smooth-medium-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-0-spread:0px;--effect-shadow-smooth-medium-1-color:#060d26;--effect-shadow-smooth-medium-1-offsetx:0px;--effect-shadow-smooth-medium-1-offsety:2px;--effect-shadow-smooth-medium-1-radius:2px;--effect-shadow-smooth-medium-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-1-spread:0px;--effect-shadow-smooth-medium-dark-0-color:#060d26;--effect-shadow-smooth-medium-dark-0-offsetx:0px;--effect-shadow-smooth-medium-dark-0-offsety:4px;--effect-shadow-smooth-medium-dark-0-radius:10px;--effect-shadow-smooth-medium-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-0-spread:0px;--effect-shadow-smooth-medium-dark-1-color:#060d26;--effect-shadow-smooth-medium-dark-1-offsetx:0px;--effect-shadow-smooth-medium-dark-1-offsety:2px;--effect-shadow-smooth-medium-dark-1-radius:2px;--effect-shadow-smooth-medium-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-1-spread:0px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--color-foundations-apple-pallet-dark:#1e7d55;--color-foundations-apple-pallet-darker:#05010e;--color-foundations-apple-pallet-light:#faf9e5;--color-foundations-apple-pallet-medium:#80d897;--color-foundations-apple-pallet-soft:#a9edb9;--color-foundations-blue-pallet-dark:#042d8b;--color-foundations-blue-pallet-darker:#010006;--color-foundations-blue-pallet-medium:#008296;--color-foundations-blue-pallet-medium-dark:#394e9d;--color-foundations-blue-pallet-soft:#98bcd5;--color-foundations-blue-pallet-soft-medium:#71c9d5;--color-foundations-crustae-pallet-dark:#703000;--color-foundations-crustae-pallet-light:#fff3ea;--color-foundations-crustae-pallet-light-soft:#ffcfab;--color-foundations-crustae-pallet-medium:#f8842d;--color-foundations-crustae-pallet-medium-dark:#b4540d;--color-foundations-crustae-pallet-soft:#ffab6d;--color-foundations-fuan-pallet-dark:#991d1d;--color-foundations-fuan-pallet-darker:#540d0d;--color-foundations-fuan-pallet-light:#ffd2d2;--color-foundations-fuan-pallet-medium:#f21515;--color-foundations-fuan-pallet-medium-dark:#c71b1b;--color-foundations-fuan-pallet-soft:#ffa9a9;--color-foundations-fuan-pallet-soft-medium:#ff6060;--color-foundations-fuji-pallet-bright:#fcfcff;--color-foundations-fuji-pallet-dark:#182342;--color-foundations-fuji-pallet-darker:#060d26;--color-foundations-fuji-pallet-light:#ebedf5;--color-foundations-fuji-pallet-medium:#475272;--color-foundations-fuji-pallet-medium-dark:#252f4a;--color-foundations-fuji-pallet-soft:#c8cedd;--color-foundations-fuji-pallet-soft-medium:#707993;--color-foundations-galcier-pallet-bright:#f8fcff;--color-foundations-galcier-pallet-dark:#597588;--color-foundations-galcier-pallet-dark-darker:#465e6f;--color-foundations-galcier-pallet-darker:#344856;--color-foundations-galcier-pallet-light:#dcf1ff;--color-foundations-galcier-pallet-light-soft:#c0e5ff;--color-foundations-galcier-pallet-medium:#82a4bb;--color-foundations-galcier-pallet-medium-dark:#6d8ca2;--color-foundations-galcier-pallet-soft:#afd4ef;--color-foundations-galcier-pallet-soft-medium:#98bcd5;--color-foundations-moody-blue-pallet-bright:#f3f5ff;--color-foundations-moody-blue-pallet-dark:#26387b;--color-foundations-moody-blue-pallet-dark-darker:#172559;--color-foundations-moody-blue-pallet-darker:#182342;--color-foundations-moody-blue-pallet-light:#d7dfff;--color-foundations-moody-blue-pallet-light-soft:#bccaff;--color-foundations-moody-blue-pallet-medium:#6982e1;--color-foundations-moody-blue-pallet-medium-dark:#4f67bf;--color-foundations-moody-blue-pallet-soft:#a0b4ff;--color-foundations-moody-blue-pallet-soft-medium:#859eff;--color-foundations-orange-pallet-light:#ffb381;--color-foundations-orange-pallet-medium:#f8842d;--color-foundations-orange-pallet-pink:#ff5558;--color-foundations-orange-pallet-red:#fe4d01;--color-foundations-orange-pallet-soft:#fb8b07;--color-foundations-purple-pallet-dark:#390f37;--color-foundations-purple-pallet-medium:#815288;--color-foundations-purple-pallet-soft:#bd9fd1;--color-foundations-saffron-pallet-dark:#694f00;--color-foundations-saffron-pallet-light:#fff9e9;--color-foundations-saffron-pallet-light-soft:#ffe9a8;--color-foundations-saffron-pallet-medium:#f1be25;--color-foundations-saffron-pallet-medium-dark:#ad8306;--color-foundations-saffron-pallet-soft:#ffd968;--color-foundations-sky-blue-pallet-bright:#edfcff;--color-foundations-sky-blue-pallet-dark:#13a8bf;--color-foundations-sky-blue-pallet-dark-darker:#008296;--color-foundations-sky-blue-pallet-darker:#005f6d;--color-foundations-sky-blue-pallet-light:#cdf8ff;--color-foundations-sky-blue-pallet-light-soft:#adf4ff;--color-foundations-sky-blue-pallet-medium:#4de7ff;--color-foundations-sky-blue-pallet-medium-dark:#2fcfe8;--color-foundations-sky-blue-pallet-soft:#8df0ff;--color-foundations-sky-blue-pallet-soft-medium:#6debff;--color-foundations-take-pallet-dark:#557909;--color-foundations-take-pallet-darker:#314604;--color-foundations-take-pallet-light:#f1ffd3;--color-foundations-take-pallet-medium:#95c135;--color-foundations-take-pallet-medium-dark:#7aa125;--color-foundations-take-pallet-soft:#d4eca1;--color-foundations-take-pallet-soft-medium:#afd461;--color-foundations-wisteria-pallet-dark:#502f55;--color-foundations-wisteria-pallet-light:#fef7ff;--color-foundations-wisteria-pallet-light-soft:#f2cff7;--color-foundations-wisteria-pallet-medium:#b37abb;--color-foundations-wisteria-pallet-medium-dark:#815288;--color-foundations-wisteria-pallet-soft:#e5a8ee;--color-foundations-yellow-pallet-light:#ede9da;--color-foundations-yellow-pallet-medium:#f1be25;--color-foundations-yellow-pallet-medium-dark:#eabf23;--color-foundations-yellow-pallet-soft:#f1dca7;--color-foundations-yellow-pallet-soft-medium:#dbbd7e;--font-alias-desktop-body-fontfamily:var(--font-inter);--font-alias-desktop-body-fontsize:16px}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--border-radius-circle:100px;--border-radius-square:8px;--border-radius-square-hard:16px;--spacing-space1x:8px;--spacing-space2x:16px;--spacing-space3x:24px;--spacing-space4x:32px;--layout-component-card-padding:var(--spacing-space3x);--layout-component-hitbox-min:48px;--layout-layout-grid-gutter:var(--spacing-space3x);--layout-layout-page-margin:var(--spacing-space4x);--color-alias-color-brand-primary:#1e7d55;--color-alias-color-brand-secondary:#80d897;--color-alias-color-brand-surface:#faf9e5;--color-alias-color-brand-text-dark:#05010e;--color-alias-semantic-critical:#f21515;--color-alias-semantic-critical-dark:#ffd2d2;--color-alias-semantic-critical-dark-hover:#ffa9a9;--color-alias-semantic-critical-hover:#c71b1b;--color-alias-semantic-neutral:#707993;--color-alias-semantic-success:#95c135;--color-alias-semantic-success-hover:#7aa125;--color-alias-semantic-verifed:#6982e1;--color-alias-semantic-warning:#f1be25;--color-alias-semantic-warning-hover:#ad8306;--color-alias-status-danger:#991d1d;--color-alias-status-default:#8df0ff;--color-alias-status-stable:#95c135;--color-alias-status-warning:#f8842d;--color-alias-text-colors-critical:#f21515;--color-alias-text-colors-critical-dark:#ffa9a9;--color-alias-text-colors-disable:#c8cedd;--color-alias-text-colors-disable-dark:#c8cedd;--color-alias-text-colors-placeholder:#707993;--color-alias-text-colors-primary:#060d26;--color-alias-text-colors-primary-dark:#fcfcff;--color-alias-text-colors-secondary:#1e7d55;--color-alias-text-colors-secondary-dark:#80d897;--color-alias-text-colors-tags:#a9edb9;--color-alias-text-colors-tertiary-dark:#c8cedd;--color-alias-text-colors-tertirary:#475272;--color-border-colors-border-color-disable:#c8cedd;--color-border-colors-border-color-disable-dark:#c8cedd;--color-border-colors-critical:#f21515;--color-border-colors-default:#a9edb9;--color-border-colors-default-dark:#80d897;--color-border-colors-hover:#80d897;--color-border-colors-neutral:#c8cedd;--color-border-colors-tags:#a9edb9;--color-border-colors-tags-dark:#1e7d55;--color-btn-default:#fcfcff;--color-btn-hover:#80d897;--color-btn-primary:#1e7d55;--color-icon-color-critical:#f21515;--color-icon-color-critical-hover:#c71b1b;--color-icon-color-default:#05010e;--color-icon-color-default-dark:#fcfcff;--color-icon-color-hover-active:#1e7d55;--color-icon-color-security:#b37abb;--color-icon-color-security-hover-active:#502f55;--color-icon-color-success:#95c135;--color-icon-color-success-hover:#7aa125;--color-icon-color-tax:#475272;--color-icon-color-tax-hover-active:#182342;--color-icon-color-warning:#f1be25;--color-icon-color-warning-hover:#ad8306;--color-icon-color-water:#13a8bf;--color-icon-color-water-hover-active:#008296;--color-text-field-default:#fcfcff;--color-text-field-default-dark:#060d26;--color-text-field-disable:#ebedf5;--effect-shadow-smooth-high-0-color:#060d26;--effect-shadow-smooth-high-0-offsetx:0px;--effect-shadow-smooth-high-0-offsety:8px;--effect-shadow-smooth-high-0-radius:15px;--effect-shadow-smooth-high-0-shadowtype:dropShadow;--effect-shadow-smooth-high-0-spread:2px;--effect-shadow-smooth-high-1-color:#060d26;--effect-shadow-smooth-high-1-offsetx:0px;--effect-shadow-smooth-high-1-offsety:0px;--effect-shadow-smooth-high-1-radius:4px;--effect-shadow-smooth-high-1-shadowtype:dropShadow;--effect-shadow-smooth-high-1-spread:0px;--effect-shadow-smooth-high-dark-0-color:#060d26;--effect-shadow-smooth-high-dark-0-offsetx:0px;--effect-shadow-smooth-high-dark-0-offsety:8px;--effect-shadow-smooth-high-dark-0-radius:15px;--effect-shadow-smooth-high-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-0-spread:2px;--effect-shadow-smooth-high-dark-1-color:#060d26;--effect-shadow-smooth-high-dark-1-offsetx:0px;--effect-shadow-smooth-high-dark-1-offsety:0px;--effect-shadow-smooth-high-dark-1-radius:4px;--effect-shadow-smooth-high-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-high-dark-1-spread:0px;--effect-shadow-smooth-low-0-color:#000209;--effect-shadow-smooth-low-0-offsetx:0px;--effect-shadow-smooth-low-0-offsety:0px;--effect-shadow-smooth-low-0-radius:4px;--effect-shadow-smooth-low-0-shadowtype:dropShadow;--effect-shadow-smooth-low-0-spread:0px;--effect-shadow-smooth-low-1-color:#000209;--effect-shadow-smooth-low-1-offsetx:0px;--effect-shadow-smooth-low-1-offsety:2px;--effect-shadow-smooth-low-1-radius:2px;--effect-shadow-smooth-low-1-shadowtype:dropShadow;--effect-shadow-smooth-low-1-spread:0px;--effect-shadow-smooth-low-dark-0-color:#060d26;--effect-shadow-smooth-low-dark-0-offsetx:0px;--effect-shadow-smooth-low-dark-0-offsety:0px;--effect-shadow-smooth-low-dark-0-radius:4px;--effect-shadow-smooth-low-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-0-spread:0px;--effect-shadow-smooth-low-dark-1-color:#060d26;--effect-shadow-smooth-low-dark-1-offsetx:0px;--effect-shadow-smooth-low-dark-1-offsety:2px;--effect-shadow-smooth-low-dark-1-radius:2px;--effect-shadow-smooth-low-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-low-dark-1-spread:0px;--effect-shadow-smooth-medium-0-color:#060d26;--effect-shadow-smooth-medium-0-offsetx:0px;--effect-shadow-smooth-medium-0-offsety:4px;--effect-shadow-smooth-medium-0-radius:10px;--effect-shadow-smooth-medium-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-0-spread:0px;--effect-shadow-smooth-medium-1-color:#060d26;--effect-shadow-smooth-medium-1-offsetx:0px;--effect-shadow-smooth-medium-1-offsety:2px;--effect-shadow-smooth-medium-1-radius:2px;--effect-shadow-smooth-medium-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-1-spread:0px;--effect-shadow-smooth-medium-dark-0-color:#060d26;--effect-shadow-smooth-medium-dark-0-offsetx:0px;--effect-shadow-smooth-medium-dark-0-offsety:4px;--effect-shadow-smooth-medium-dark-0-radius:10px;--effect-shadow-smooth-medium-dark-0-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-0-spread:0px;--effect-shadow-smooth-medium-dark-1-color:#060d26;--effect-shadow-smooth-medium-dark-1-offsetx:0px;--effect-shadow-smooth-medium-dark-1-offsety:2px;--effect-shadow-smooth-medium-dark-1-radius:2px;--effect-shadow-smooth-medium-dark-1-shadowtype:dropShadow;--effect-shadow-smooth-medium-dark-1-spread:0px;--color-foundations-apple-pallet-dark:#1e7d55;--color-foundations-apple-pallet-darker:#05010e;--color-foundations-apple-pallet-light:#faf9e5;--color-foundations-apple-pallet-medium:#80d897;--color-foundations-apple-pallet-soft:#a9edb9;--color-foundations-blue-pallet-dark:#042d8b;--color-foundations-blue-pallet-darker:#010006;--color-foundations-blue-pallet-medium:#008296;--color-foundations-blue-pallet-medium-dark:#394e9d;--color-foundations-blue-pallet-soft:#98bcd5;--color-foundations-blue-pallet-soft-medium:#71c9d5;--color-foundations-crustae-pallet-dark:#703000;--color-foundations-crustae-pallet-light:#fff3ea;--color-foundations-crustae-pallet-light-soft:#ffcfab;--color-foundations-crustae-pallet-medium:#f8842d;--color-foundations-crustae-pallet-medium-dark:#b4540d;--color-foundations-crustae-pallet-soft:#ffab6d;--color-foundations-fuan-pallet-dark:#991d1d;--color-foundations-fuan-pallet-darker:#540d0d;--color-foundations-fuan-pallet-light:#ffd2d2;--color-foundations-fuan-pallet-medium:#f21515;--color-foundations-fuan-pallet-medium-dark:#c71b1b;--color-foundations-fuan-pallet-soft:#ffa9a9;--color-foundations-fuan-pallet-soft-medium:#ff6060;--color-foundations-fuji-pallet-bright:#fcfcff;--color-foundations-fuji-pallet-dark:#182342;--color-foundations-fuji-pallet-darker:#060d26;--color-foundations-fuji-pallet-light:#ebedf5;--color-foundations-fuji-pallet-medium:#475272;--color-foundations-fuji-pallet-medium-dark:#252f4a;--color-foundations-fuji-pallet-soft:#c8cedd;--color-foundations-fuji-pallet-soft-medium:#707993;--color-foundations-galcier-pallet-bright:#f8fcff;--color-foundations-galcier-pallet-dark:#597588;--color-foundations-galcier-pallet-dark-darker:#465e6f;--color-foundations-galcier-pallet-darker:#344856;--color-foundations-galcier-pallet-light:#dcf1ff;--color-foundations-galcier-pallet-light-soft:#c0e5ff;--color-foundations-galcier-pallet-medium:#82a4bb;--color-foundations-galcier-pallet-medium-dark:#6d8ca2;--color-foundations-galcier-pallet-soft:#afd4ef;--color-foundations-galcier-pallet-soft-medium:#98bcd5;--color-foundations-moody-blue-pallet-bright:#f3f5ff;--color-foundations-moody-blue-pallet-dark:#26387b;--color-foundations-moody-blue-pallet-dark-darker:#172559;--color-foundations-moody-blue-pallet-darker:#182342;--color-foundations-moody-blue-pallet-light:#d7dfff;--color-foundations-moody-blue-pallet-light-soft:#bccaff;--color-foundations-moody-blue-pallet-medium:#6982e1;--color-foundations-moody-blue-pallet-medium-dark:#4f67bf;--color-foundations-moody-blue-pallet-soft:#a0b4ff;--color-foundations-moody-blue-pallet-soft-medium:#859eff;--color-foundations-orange-pallet-light:#ffb381;--color-foundations-orange-pallet-medium:#f8842d;--color-foundations-orange-pallet-pink:#ff5558;--color-foundations-orange-pallet-red:#fe4d01;--color-foundations-orange-pallet-soft:#fb8b07;--color-foundations-purple-pallet-dark:#390f37;--color-foundations-purple-pallet-medium:#815288;--color-foundations-purple-pallet-soft:#bd9fd1;--color-foundations-saffron-pallet-dark:#694f00;--color-foundations-saffron-pallet-light:#fff9e9;--color-foundations-saffron-pallet-light-soft:#ffe9a8;--color-foundations-saffron-pallet-medium:#f1be25;--color-foundations-saffron-pallet-medium-dark:#ad8306;--color-foundations-saffron-pallet-soft:#ffd968;--color-foundations-sky-blue-pallet-bright:#edfcff;--color-foundations-sky-blue-pallet-dark:#13a8bf;--color-foundations-sky-blue-pallet-dark-darker:#008296;--color-foundations-sky-blue-pallet-darker:#005f6d;--color-foundations-sky-blue-pallet-light:#cdf8ff;--color-foundations-sky-blue-pallet-light-soft:#adf4ff;--color-foundations-sky-blue-pallet-medium:#4de7ff;--color-foundations-sky-blue-pallet-medium-dark:#2fcfe8;--color-foundations-sky-blue-pallet-soft:#8df0ff;--color-foundations-sky-blue-pallet-soft-medium:#6debff;--color-foundations-take-pallet-dark:#557909;--color-foundations-take-pallet-darker:#314604;--color-foundations-take-pallet-light:#f1ffd3;--color-foundations-take-pallet-medium:#95c135;--color-foundations-take-pallet-medium-dark:#7aa125;--color-foundations-take-pallet-soft:#d4eca1;--color-foundations-take-pallet-soft-medium:#afd461;--color-foundations-wisteria-pallet-dark:#502f55;--color-foundations-wisteria-pallet-light:#fef7ff;--color-foundations-wisteria-pallet-light-soft:#f2cff7;--color-foundations-wisteria-pallet-medium:#b37abb;--color-foundations-wisteria-pallet-medium-dark:#815288;--color-foundations-wisteria-pallet-soft:#e5a8ee;--color-foundations-yellow-pallet-light:#ede9da;--color-foundations-yellow-pallet-medium:#f1be25;--color-foundations-yellow-pallet-medium-dark:#eabf23;--color-foundations-yellow-pallet-soft:#f1dca7;--color-foundations-yellow-pallet-soft-medium:#dbbd7e;--font-alias-desktop-body-fontfamily:var(--font-inter);--font-alias-desktop-body-fontsize:16px}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
@layer base{p{font-family:var(--font-alias-mobile-body-fontfamily);font-size:var(--font-alias-mobile-body-fontsize);font-weight:var(--font-alias-mobile-body-fontweight);letter-spacing:var(--font-alias-mobile-body-letterspacing);line-height:var(--font-alias-mobile-body-lineheight);text-decoration:var(--font-alias-mobile-body-textdecoration);text-transform:var(--font-alias-mobile-body-textcase)}@media (min-width:768px){p{font-family:var(--font-alias-tablet-body-fontfamily);font-size:var(--font-alias-tablet-body-fontsize);font-weight:var(--font-alias-tablet-body-fontweight);letter-spacing:var(--font-alias-tablet-body-letterspacing);line-height:var(--font-alias-tablet-body-lineheight);text-decoration:var(--font-alias-tablet-body-textdecoration);text-transform:var(--font-alias-tablet-body-textcase)}}@media (min-width:1024px){p{font-family:var(--font-alias-desktop-body-fontfamily);font-size:var(--font-alias-desktop-body-fontsize);font-weight:var(--font-alias-desktop-body-fontweight);letter-spacing:var(--font-alias-desktop-body-letterspacing);line-height:var(--font-alias-desktop-body-lineheight);text-decoration:var(--font-alias-desktop-body-textdecoration);text-transform:var(--font-alias-desktop-body-textcase)}}h1{font-family:var(--font-alias-mobile-h1-fontfamily);font-size:var(--font-alias-mobile-h1-fontsize);font-weight:var(--font-alias-mobile-h1-fontweight);letter-spacing:var(--font-alias-mobile-h1-letterspacing);line-height:var(--font-alias-mobile-h1-lineheight);text-decoration:var(--font-alias-mobile-h1-textdecoration);text-transform:var(--font-alias-mobile-h1-textcase)}@media (min-width:768px){h1{font-family:var(--font-alias-tablet-h1-fontfamily);font-size:var(--font-alias-tablet-h1-fontsize);font-weight:var(--font-alias-tablet-h1-fontweight);letter-spacing:var(--font-alias-tablet-h1-letterspacing);line-height:var(--font-alias-tablet-h1-lineheight);text-decoration:var(--font-alias-tablet-h1-textdecoration);text-transform:var(--font-alias-tablet-h1-textcase)}}@media (min-width:1024px){h1{font-family:var(--font-alias-desktop-h1-fontfamily);font-size:var(--font-alias-desktop-h1-fontsize);font-weight:var(--font-alias-desktop-h1-fontweight);letter-spacing:var(--font-alias-desktop-h1-letterspacing);line-height:var(--font-alias-desktop-h1-lineheight);text-decoration:var(--font-alias-desktop-h1-textdecoration);text-transform:var(--font-alias-desktop-h1-textcase)}}h2{font-family:var(--font-alias-mobile-h2-fontfamily);font-size:var(--font-alias-mobile-h2-fontsize);font-weight:var(--font-alias-mobile-h2-fontweight);letter-spacing:var(--font-alias-mobile-h2-letterspacing);line-height:var(--font-alias-mobile-h2-lineheight);text-decoration:var(--font-alias-mobile-h2-textdecoration);text-transform:var(--font-alias-mobile-h2-textcase)}@media (min-width:768px){h2{font-family:var(--font-alias-tablet-h2-fontfamily);font-size:var(--font-alias-tablet-h2-fontsize);font-weight:var(--font-alias-tablet-h2-fontweight);letter-spacing:var(--font-alias-tablet-h2-letterspacing);line-height:var(--font-alias-tablet-h2-lineheight);text-decoration:var(--font-alias-tablet-h2-textdecoration);text-transform:var(--font-alias-tablet-h2-textcase)}}@media (min-width:1024px){h2{font-family:var(--font-alias-desktop-h2-fontfamily);font-size:var(--font-alias-desktop-h2-fontsize);font-weight:var(--font-alias-desktop-h2-fontweight);letter-spacing:var(--font-alias-desktop-h2-letterspacing);line-height:var(--font-alias-desktop-h2-lineheight);text-decoration:var(--font-alias-desktop-h2-textdecoration);text-transform:var(--font-alias-desktop-h2-textcase)}}h3{font-family:var(--font-alias-mobile-h3-fontfamily);font-size:var(--font-alias-mobile-h3-fontsize);font-weight:var(--font-alias-mobile-h3-fontweight);letter-spacing:var(--font-alias-mobile-h3-letterspacing);line-height:var(--font-alias-mobile-h3-lineheight);text-decoration:var(--font-alias-mobile-h3-textdecoration);text-transform:var(--font-alias-mobile-h3-textcase)}@media (min-width:768px){h3{font-family:var(--font-alias-tablet-h3-fontfamily);font-size:var(--font-alias-tablet-h3-fontsize);font-weight:var(--font-alias-tablet-h3-fontweight);letter-spacing:var(--font-alias-tablet-h3-letterspacing);line-height:var(--font-alias-tablet-h3-lineheight);text-decoration:var(--font-alias-tablet-h3-textdecoration);text-transform:var(--font-alias-tablet-h3-textcase)}}@media (min-width:1024px){h3{font-family:var(--font-alias-desktop-h3-fontfamily);font-size:var(--font-alias-desktop-h3-fontsize);font-weight:var(--font-alias-desktop-h3-fontweight);letter-spacing:var(--font-alias-desktop-h3-letterspacing);line-height:var(--font-alias-desktop-h3-lineheight);text-decoration:var(--font-alias-desktop-h3-textdecoration);text-transform:var(--font-alias-desktop-h3-textcase)}}small{font-family:var(--font-alias-mobile-sub-fontfamily);font-size:var(--font-alias-mobile-sub-fontsize);font-weight:var(--font-alias-mobile-sub-fontweight);letter-spacing:var(--font-alias-mobile-sub-letterspacing);line-height:var(--font-alias-mobile-sub-lineheight);text-decoration:var(--font-alias-mobile-sub-textdecoration);text-transform:var(--font-alias-mobile-sub-textcase)}@media (min-width:768px){small{font-family:var(--font-alias-tablet-sub-fontfamily);font-size:var(--font-alias-tablet-sub-fontsize);font-weight:var(--font-alias-tablet-sub-fontweight);letter-spacing:var(--font-alias-tablet-sub-letterspacing);line-height:var(--font-alias-tablet-sub-lineheight);text-decoration:var(--font-alias-tablet-sub-textdecoration);text-transform:var(--font-alias-tablet-sub-textcase)}}@media (min-width:1024px){small{font-family:var(--font-alias-desktop-sub-fontfamily);font-size:var(--font-alias-desktop-sub-fontsize);font-weight:var(--font-alias-desktop-sub-fontweight);letter-spacing:var(--font-alias-desktop-sub-letterspacing);line-height:var(--font-alias-desktop-sub-lineheight);text-decoration:var(--font-alias-desktop-sub-textdecoration);text-transform:var(--font-alias-desktop-sub-textcase)}}button{font-family:var(--font-alias-mobile-button-fontfamily);font-size:var(--font-alias-mobile-button-fontsize);font-weight:var(--font-alias-mobile-button-fontweight);letter-spacing:var(--font-alias-mobile-button-letterspacing);line-height:var(--font-alias-mobile-button-lineheight);text-decoration:var(--font-alias-mobile-button-textdecoration);text-transform:var(--font-alias-mobile-button-textcase)}@media (min-width:768px){button{font-family:var(--font-alias-tablet-button-fontfamily);font-size:var(--font-alias-tablet-button-fontsize);font-weight:var(--font-alias-tablet-button-fontweight);letter-spacing:var(--font-alias-tablet-button-letterspacing);line-height:var(--font-alias-tablet-button-lineheight);text-decoration:var(--font-alias-tablet-button-textdecoration);text-transform:var(--font-alias-tablet-button-textcase)}}@media (min-width:1024px){button{font-family:var(--font-alias-desktop-button-fontfamily);font-size:var(--font-alias-desktop-button-fontsize);font-weight:var(--font-alias-desktop-button-fontweight);letter-spacing:var(--font-alias-desktop-button-letterspacing);line-height:var(--font-alias-desktop-button-lineheight);text-decoration:var(--font-alias-desktop-button-textdecoration);text-transform:var(--font-alias-desktop-button-textcase)}}}@layer components{.typo-body{font-family:var(--font-alias-mobile-body-fontfamily);font-size:var(--font-alias-mobile-body-fontsize);font-weight:var(--font-alias-mobile-body-fontweight);letter-spacing:var(--font-alias-mobile-body-letterspacing);line-height:var(--font-alias-mobile-body-lineheight);text-decoration:var(--font-alias-mobile-body-textdecoration);text-transform:var(--font-alias-mobile-body-textcase)}@media (min-width:768px){.typo-body{font-family:var(--font-alias-tablet-body-fontfamily);font-size:var(--font-alias-tablet-body-fontsize);font-weight:var(--font-alias-tablet-body-fontweight);letter-spacing:var(--font-alias-tablet-body-letterspacing);line-height:var(--font-alias-tablet-body-lineheight);text-decoration:var(--font-alias-tablet-body-textdecoration);text-transform:var(--font-alias-tablet-body-textcase)}}@media (min-width:1024px){.typo-body{font-family:var(--font-alias-desktop-body-fontfamily);font-size:var(--font-alias-desktop-body-fontsize);font-weight:var(--font-alias-desktop-body-fontweight);letter-spacing:var(--font-alias-desktop-body-letterspacing);line-height:var(--font-alias-desktop-body-lineheight);text-decoration:var(--font-alias-desktop-body-textdecoration);text-transform:var(--font-alias-desktop-body-textcase)}}.typo-h1{font-family:var(--font-alias-mobile-h1-fontfamily);font-size:var(--font-alias-mobile-h1-fontsize);font-weight:var(--font-alias-mobile-h1-fontweight);letter-spacing:var(--font-alias-mobile-h1-letterspacing);line-height:var(--font-alias-mobile-h1-lineheight);text-decoration:var(--font-alias-mobile-h1-textdecoration);text-transform:var(--font-alias-mobile-h1-textcase)}@media (min-width:768px){.typo-h1{font-family:var(--font-alias-tablet-h1-fontfamily);font-size:var(--font-alias-tablet-h1-fontsize);font-weight:var(--font-alias-tablet-h1-fontweight);letter-spacing:var(--font-alias-tablet-h1-letterspacing);line-height:var(--font-alias-tablet-h1-lineheight);text-decoration:var(--font-alias-tablet-h1-textdecoration);text-transform:var(--font-alias-tablet-h1-textcase)}}@media (min-width:1024px){.typo-h1{font-family:var(--font-alias-desktop-h1-fontfamily);font-size:var(--font-alias-desktop-h1-fontsize);font-weight:var(--font-alias-desktop-h1-fontweight);letter-spacing:var(--font-alias-desktop-h1-letterspacing);line-height:var(--font-alias-desktop-h1-lineheight);text-decoration:var(--font-alias-desktop-h1-textdecoration);text-transform:var(--font-alias-desktop-h1-textcase)}}.typo-h2{font-family:var(--font-alias-mobile-h2-fontfamily);font-size:var(--font-alias-mobile-h2-fontsize);font-weight:var(--font-alias-mobile-h2-fontweight);letter-spacing:var(--font-alias-mobile-h2-letterspacing);line-height:var(--font-alias-mobile-h2-lineheight);text-decoration:var(--font-alias-mobile-h2-textdecoration);text-transform:var(--font-alias-mobile-h2-textcase)}@media (min-width:768px){.typo-h2{font-family:var(--font-alias-tablet-h2-fontfamily);font-size:var(--font-alias-tablet-h2-fontsize);font-weight:var(--font-alias-tablet-h2-fontweight);letter-spacing:var(--font-alias-tablet-h2-letterspacing);line-height:var(--font-alias-tablet-h2-lineheight);text-decoration:var(--font-alias-tablet-h2-textdecoration);text-transform:var(--font-alias-tablet-h2-textcase)}}@media (min-width:1024px){.typo-h2{font-family:var(--font-alias-desktop-h2-fontfamily);font-size:var(--font-alias-desktop-h2-fontsize);font-weight:var(--font-alias-desktop-h2-fontweight);letter-spacing:var(--font-alias-desktop-h2-letterspacing);line-height:var(--font-alias-desktop-h2-lineheight);text-decoration:var(--font-alias-desktop-h2-textdecoration);text-transform:var(--font-alias-desktop-h2-textcase)}}.typo-h3{font-family:var(--font-alias-mobile-h3-fontfamily);font-size:var(--font-alias-mobile-h3-fontsize);font-weight:var(--font-alias-mobile-h3-fontweight);letter-spacing:var(--font-alias-mobile-h3-letterspacing);line-height:var(--font-alias-mobile-h3-lineheight);text-decoration:var(--font-alias-mobile-h3-textdecoration);text-transform:var(--font-alias-mobile-h3-textcase)}@media (min-width:768px){.typo-h3{font-family:var(--font-alias-tablet-h3-fontfamily);font-size:var(--font-alias-tablet-h3-fontsize);font-weight:var(--font-alias-tablet-h3-fontweight);letter-spacing:var(--font-alias-tablet-h3-letterspacing);line-height:var(--font-alias-tablet-h3-lineheight);text-decoration:var(--font-alias-tablet-h3-textdecoration);text-transform:var(--font-alias-tablet-h3-textcase)}}@media (min-width:1024px){.typo-h3{font-family:var(--font-alias-desktop-h3-fontfamily);font-size:var(--font-alias-desktop-h3-fontsize);font-weight:var(--font-alias-desktop-h3-fontweight);letter-spacing:var(--font-alias-desktop-h3-letterspacing);line-height:var(--font-alias-desktop-h3-lineheight);text-decoration:var(--font-alias-desktop-h3-textdecoration);text-transform:var(--font-alias-desktop-h3-textcase)}}.typo-sub{font-family:var(--font-alias-mobile-sub-fontfamily);font-size:var(--font-alias-mobile-sub-fontsize);font-weight:var(--font-alias-mobile-sub-fontweight);letter-spacing:var(--font-alias-mobile-sub-letterspacing);line-height:var(--font-alias-mobile-sub-lineheight);text-decoration:var(--font-alias-mobile-sub-textdecoration);text-transform:var(--font-alias-mobile-sub-textcase)}@media (min-width:768px){.typo-sub{font-family:var(--font-alias-tablet-sub-fontfamily);font-size:var(--font-alias-tablet-sub-fontsize);font-weight:var(--font-alias-tablet-sub-fontweight);letter-spacing:var(--font-alias-tablet-sub-letterspacing);line-height:var(--font-alias-tablet-sub-lineheight);text-decoration:var(--font-alias-tablet-sub-textdecoration);text-transform:var(--font-alias-tablet-sub-textcase)}}@media (min-width:1024px){.typo-sub{font-family:var(--font-alias-desktop-sub-fontfamily);font-size:var(--font-alias-desktop-sub-fontsize);font-weight:var(--font-alias-desktop-sub-fontweight);letter-spacing:var(--font-alias-desktop-sub-letterspacing);line-height:var(--font-alias-desktop-sub-lineheight);text-decoration:var(--font-alias-desktop-sub-textdecoration);text-transform:var(--font-alias-desktop-sub-textcase)}}.typo-discount{font-family:var(--font-alias-mobile-discount-fontfamily);font-size:var(--font-alias-mobile-discount-fontsize);font-weight:var(--font-alias-mobile-discount-fontweight);letter-spacing:var(--font-alias-mobile-discount-letterspacing);line-height:var(--font-alias-mobile-discount-lineheight);text-decoration:var(--font-alias-mobile-discount-textdecoration);text-transform:var(--font-alias-mobile-discount-textcase)}@media (min-width:768px){.typo-discount{font-family:var(--font-alias-tablet-discount-fontfamily);font-size:var(--font-alias-tablet-discount-fontsize);font-weight:var(--font-alias-tablet-discount-fontweight);letter-spacing:var(--font-alias-tablet-discount-letterspacing);line-height:var(--font-alias-tablet-discount-lineheight);text-decoration:var(--font-alias-tablet-discount-textdecoration);text-transform:var(--font-alias-tablet-discount-textcase)}}@media (min-width:1024px){.typo-discount{font-family:var(--font-alias-desktop-discount-fontfamily);font-size:var(--font-alias-desktop-discount-fontsize);font-weight:var(--font-alias-desktop-discount-fontweight);letter-spacing:var(--font-alias-desktop-discount-letterspacing);line-height:var(--font-alias-desktop-discount-lineheight);text-decoration:var(--font-alias-desktop-discount-textdecoration);text-transform:var(--font-alias-desktop-discount-textcase)}}.typo-tags{font-family:var(--font-alias-mobile-tags-fontfamily);font-size:var(--font-alias-mobile-tags-fontsize);font-weight:var(--font-alias-mobile-tags-fontweight);letter-spacing:var(--font-alias-mobile-tags-letterspacing);line-height:var(--font-alias-mobile-tags-lineheight);text-decoration:var(--font-alias-mobile-tags-textdecoration);text-transform:var(--font-alias-mobile-tags-textcase)}@media (min-width:768px){.typo-tags{font-family:var(--font-alias-tablet-tags-fontfamily);font-size:var(--font-alias-tablet-tags-fontsize);font-weight:var(--font-alias-tablet-tags-fontweight);letter-spacing:var(--font-alias-tablet-tags-letterspacing);line-height:var(--font-alias-tablet-tags-lineheight);text-decoration:var(--font-alias-tablet-tags-textdecoration);text-transform:var(--font-alias-tablet-tags-textcase)}}@media (min-width:1024px){.typo-tags{font-family:var(--font-alias-desktop-tags-fontfamily);font-size:var(--font-alias-desktop-tags-fontsize);font-weight:var(--font-alias-desktop-tags-fontweight);letter-spacing:var(--font-alias-desktop-tags-letterspacing);line-height:var(--font-alias-desktop-tags-lineheight);text-decoration:var(--font-alias-desktop-tags-textdecoration);text-transform:var(--font-alias-desktop-tags-textcase)}}.typo-menu{font-family:var(--font-alias-mobile-menu-fontfamily);font-size:var(--font-alias-mobile-menu-fontsize);font-weight:var(--font-alias-mobile-menu-fontweight);letter-spacing:var(--font-alias-mobile-menu-letterspacing);line-height:var(--font-alias-mobile-menu-lineheight);text-decoration:var(--font-alias-mobile-menu-textdecoration);text-transform:var(--font-alias-mobile-menu-textcase)}@media (min-width:768px){.typo-menu{font-family:var(--font-alias-tablet-menu-fontfamily);font-size:var(--font-alias-tablet-menu-fontsize);font-weight:var(--font-alias-tablet-menu-fontweight);letter-spacing:var(--font-alias-tablet-menu-letterspacing);line-height:var(--font-alias-tablet-menu-lineheight);text-decoration:var(--font-alias-tablet-menu-textdecoration);text-transform:var(--font-alias-tablet-menu-textcase)}}@media (min-width:1024px){.typo-menu{font-family:var(--font-alias-desktop-menu-fontfamily);font-size:var(--font-alias-desktop-menu-fontsize);font-weight:var(--font-alias-desktop-menu-fontweight);letter-spacing:var(--font-alias-desktop-menu-letterspacing);line-height:var(--font-alias-desktop-menu-lineheight);text-decoration:var(--font-alias-desktop-menu-textdecoration);text-transform:var(--font-alias-desktop-menu-textcase)}}.typo-text-button{font-family:var(--font-alias-mobile-text-button-fontfamily);font-size:var(--font-alias-mobile-text-button-fontsize);font-weight:var(--font-alias-mobile-text-button-fontweight);letter-spacing:var(--font-alias-mobile-text-button-letterspacing);line-height:var(--font-alias-mobile-text-button-lineheight);text-decoration:var(--font-alias-mobile-text-button-textdecoration);text-transform:var(--font-alias-mobile-text-button-textcase)}@media (min-width:768px){.typo-text-button{font-family:var(--font-alias-tablet-text-button-fontfamily);font-size:var(--font-alias-tablet-text-button-fontsize);font-weight:var(--font-alias-tablet-text-button-fontweight);letter-spacing:var(--font-alias-tablet-text-button-letterspacing);line-height:var(--font-alias-tablet-text-button-lineheight);text-decoration:var(--font-alias-tablet-text-button-textdecoration);text-transform:var(--font-alias-tablet-text-button-textcase)}}@media (min-width:1024px){.typo-text-button{font-family:var(--font-alias-desktop-text-button-fontfamily);font-size:var(--font-alias-desktop-text-button-fontsize);font-weight:var(--font-alias-desktop-text-button-fontweight);letter-spacing:var(--font-alias-desktop-text-button-letterspacing);line-height:var(--font-alias-desktop-text-button-lineheight);text-decoration:var(--font-alias-desktop-text-button-textdecoration);text-transform:var(--font-alias-desktop-text-button-textcase)}}.typo-text-button-line{font-family:var(--font-alias-mobile-text-button-line-fontfamily);font-size:var(--font-alias-mobile-text-button-line-fontsize);font-weight:var(--font-alias-mobile-text-button-line-fontweight);letter-spacing:var(--font-alias-mobile-text-button-line-letterspacing);line-height:var(--font-alias-mobile-text-button-line-lineheight);text-decoration:var(--font-alias-mobile-text-button-line-textdecoration);text-transform:var(--font-alias-mobile-text-button-line-textcase)}@media (min-width:768px){.typo-text-button-line{font-family:var(--font-alias-tablet-text-button-line-fontfamily);font-size:var(--font-alias-tablet-text-button-line-fontsize);font-weight:var(--font-alias-tablet-text-button-line-fontweight);letter-spacing:var(--font-alias-tablet-text-button-line-letterspacing);line-height:var(--font-alias-tablet-text-button-line-lineheight);text-decoration:var(--font-alias-tablet-text-button-line-textdecoration);text-transform:var(--font-alias-tablet-text-button-line-textcase)}}@media (min-width:1024px){.typo-text-button-line{font-family:var(--font-alias-desktop-text-button-line-fontfamily);font-size:var(--font-alias-desktop-text-button-line-fontsize);font-weight:var(--font-alias-desktop-text-button-line-fontweight);letter-spacing:var(--font-alias-desktop-text-button-line-letterspacing);line-height:var(--font-alias-desktop-text-button-line-lineheight);text-decoration:var(
|
|
2
|
+
--font-alias-desktop-text-button-line-textdecoration
|
|
3
|
+
);text-transform:var(--font-alias-desktop-text-button-line-textcase)}}.typo-button{font-family:var(--font-alias-mobile-button-fontfamily);font-size:var(--font-alias-mobile-button-fontsize);font-weight:var(--font-alias-mobile-button-fontweight);letter-spacing:var(--font-alias-mobile-button-letterspacing);line-height:var(--font-alias-mobile-button-lineheight);text-decoration:var(--font-alias-mobile-button-textdecoration);text-transform:var(--font-alias-mobile-button-textcase)}@media (min-width:768px){.typo-button{font-family:var(--font-alias-tablet-button-fontfamily);font-size:var(--font-alias-tablet-button-fontsize);font-weight:var(--font-alias-tablet-button-fontweight);letter-spacing:var(--font-alias-tablet-button-letterspacing);line-height:var(--font-alias-tablet-button-lineheight);text-decoration:var(--font-alias-tablet-button-textdecoration);text-transform:var(--font-alias-tablet-button-textcase)}}@media (min-width:1024px){.typo-button{font-family:var(--font-alias-desktop-button-fontfamily);font-size:var(--font-alias-desktop-button-fontsize);font-weight:var(--font-alias-desktop-button-fontweight);letter-spacing:var(--font-alias-desktop-button-letterspacing);line-height:var(--font-alias-desktop-button-lineheight);text-decoration:var(--font-alias-desktop-button-textdecoration);text-transform:var(--font-alias-desktop-button-textcase)}}.typo-button-sm{font-family:var(--font-alias-tablet-button-sm-fontfamily);font-size:var(--font-alias-tablet-button-sm-fontsize);font-weight:var(--font-alias-tablet-button-sm-fontweight);letter-spacing:var(--font-alias-tablet-button-sm-letterspacing);line-height:var(--font-alias-tablet-button-sm-lineheight);text-decoration:var(--font-alias-tablet-button-sm-textdecoration);text-transform:var(--font-alias-tablet-button-sm-textcase)}@media (min-width:1024px){.typo-button-sm{font-family:var(--font-alias-desktop-button-sm-fontfamily);font-size:var(--font-alias-desktop-button-sm-fontsize);font-weight:var(--font-alias-desktop-button-sm-fontweight);letter-spacing:var(--font-alias-desktop-button-sm-letterspacing);line-height:var(--font-alias-desktop-button-sm-lineheight);text-decoration:var(--font-alias-desktop-button-sm-textdecoration);text-transform:var(--font-alias-desktop-button-sm-textcase)}}.typo-logo{font-family:var(--font-alias-mobile-logo-fontfamily);font-size:var(--font-alias-mobile-logo-fontsize);font-weight:var(--font-alias-mobile-logo-fontweight);letter-spacing:var(--font-alias-mobile-logo-letterspacing);line-height:var(--font-alias-mobile-logo-lineheight);text-decoration:var(--font-alias-mobile-logo-textdecoration);text-transform:var(--font-alias-mobile-logo-textcase)}@media (min-width:768px){.typo-logo{font-family:var(--font-alias-tablet-logo-fontfamily);font-size:var(--font-alias-tablet-logo-fontsize);font-weight:var(--font-alias-tablet-logo-fontweight);letter-spacing:var(--font-alias-tablet-logo-letterspacing);line-height:var(--font-alias-tablet-logo-lineheight);text-decoration:var(--font-alias-tablet-logo-textdecoration);text-transform:var(--font-alias-tablet-logo-textcase)}}@media (min-width:1024px){.typo-logo{font-family:var(--font-alias-desktop-logo-fontfamily);font-size:var(--font-alias-desktop-logo-fontsize);font-weight:var(--font-alias-desktop-logo-fontweight);letter-spacing:var(--font-alias-desktop-logo-letterspacing);line-height:var(--font-alias-desktop-logo-lineheight);text-decoration:var(--font-alias-desktop-logo-textdecoration);text-transform:var(--font-alias-desktop-logo-textcase)}}}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gov-components/design-tokens",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Design tokens (Colors, Typography, Spacing) for KT Components",
|
|
5
|
+
"main": "dist/globals.css",
|
|
6
|
+
"style": "dist/globals.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"exports": {
|
|
11
|
+
".": "./dist/globals.css",
|
|
12
|
+
"./tokens.css": "./dist/tokens.css",
|
|
13
|
+
"./tokens-core.css": "./dist/tokens-core.css",
|
|
14
|
+
"./tokens-foundations.css": "./dist/tokens-foundations.css",
|
|
15
|
+
"./typography.css": "./dist/typography.css",
|
|
16
|
+
"./globals.css": "./dist/globals.css",
|
|
17
|
+
"./tailwind.css": "./tailwind.css"
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "if exist dist rmdir /s /q dist && mkdir dist && postcss globals.css -o dist/globals.css && postcss tokens.css -o dist/tokens.css && postcss tokens-core.css -o dist/tokens-core.css && postcss tokens-foundations.css -o dist/tokens-foundations.css && postcss typography.css -o dist/typography.css",
|
|
21
|
+
"prepublishOnly": "npm run build"
|
|
22
|
+
},
|
|
23
|
+
"keywords": [
|
|
24
|
+
"design-systems",
|
|
25
|
+
"css",
|
|
26
|
+
"tokens",
|
|
27
|
+
"theme"
|
|
28
|
+
],
|
|
29
|
+
"author": "Jakprim",
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"cssnano": "^7.1.2",
|
|
36
|
+
"postcss-cli": "^11.0.1",
|
|
37
|
+
"postcss-import": "^16.1.1"
|
|
38
|
+
}
|
|
39
|
+
}
|