@petnow/ui 5.3.1 → 6.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.
Files changed (42) hide show
  1. package/CHANGELOG.md +66 -0
  2. package/README.md +85 -5
  3. package/dist/Chip-Bu5q0mhe.js +53 -0
  4. package/dist/Chip-Bu5q0mhe.js.map +1 -0
  5. package/dist/chip.js +2 -52
  6. package/dist/combobox.js +166 -152
  7. package/dist/combobox.js.map +1 -1
  8. package/dist/{fieldStyles-DyZu__hI.js → fieldStyles-DXyDrzxD.js} +5 -6
  9. package/dist/fieldStyles-DXyDrzxD.js.map +1 -0
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.es.js +18 -18
  12. package/dist/mergeRefs-CsNeQOZ6.js +39 -0
  13. package/dist/mergeRefs-CsNeQOZ6.js.map +1 -0
  14. package/dist/native/chip.js +134 -0
  15. package/dist/native/chip.js.map +1 -0
  16. package/dist/native/components/chip/Chip.native.d.ts +14 -0
  17. package/dist/native/components/chip/Chip.types.d.ts +11 -0
  18. package/dist/native/components/chip/Chip.variants.d.ts +12 -0
  19. package/dist/native/utils/TailwindUtil.d.ts +2 -0
  20. package/dist/native/utils/mergeRefs.d.ts +2 -0
  21. package/dist/select.js +86 -66
  22. package/dist/select.js.map +1 -1
  23. package/dist/src/components/chip/Chip.d.ts +2 -7
  24. package/dist/src/components/chip/Chip.types.d.ts +11 -0
  25. package/dist/src/components/chip/Chip.variants.d.ts +12 -0
  26. package/dist/src/components/combobox/Combobox.d.ts +1 -0
  27. package/dist/src/components/select/Select.d.ts +13 -6
  28. package/dist/src/components/text-field/TextField.d.ts +1 -20
  29. package/dist/src/components/ui/listbox.d.ts +1 -0
  30. package/dist/src/components/ui/listboxStyles.d.ts +8 -0
  31. package/dist/text-field.js +50 -114
  32. package/dist/text-field.js.map +1 -1
  33. package/dist/v1/text-field.js +1 -1
  34. package/docs/migration/v5-to-v6.md +59 -0
  35. package/package.json +34 -5
  36. package/petnow-design-system-v1.css +2 -0
  37. package/petnow-design-system-v1.uniwind.css +763 -0
  38. package/tailwind.css +2 -0
  39. package/dist/chip.js.map +0 -1
  40. package/dist/fieldStyles-DyZu__hI.js.map +0 -1
  41. package/dist/mergeRefs-BHwdBwNQ.js +0 -27
  42. package/dist/mergeRefs-BHwdBwNQ.js.map +0 -1
package/petnow-design-system-v1.uniwind.css ADDED
@@ -0,0 +1,763 @@
1
+ /*
2
+ @petnow/ui Uniwind (React Native) theme.
3
+
4
+ GENERATED from petnow-design-system-v1.css by scripts/generate-native-theme.mjs.
5
+ Do not edit; change the source and run `pnpm generate:native-theme`.
6
+
7
+ Import it in the app's Uniwind CSS entry after `@import "tailwindcss"` and
8
+ `@import "uniwind"`. Themes: light (Petnow, default), dark (same values as light
9
+ until dark mode exists) and petify; register petify with `extraThemes: ["petify"]`
10
+ in withUniwindConfig (required: Uniwind rejects an unregistered @variant) and switch with `Uniwind.setTheme("petify")`.
11
+ Typography utilities set font-family per weight (Pretendard-Regular, Pretendard-Medium, Pretendard-Bold),
12
+ so the app must load Pretendard under those names.
13
+ */
14
+
15
+ @source "./dist/native";
16
+
17
+ @theme {
18
+ --color-petnow-main-0: #0a0b0c;
19
+ --color-petnow-main-10: #3b1b12;
20
+ --color-petnow-main-20: #6c2a19;
21
+ --color-petnow-main-30: #9d3a1f;
22
+ --color-petnow-main-40: #ce4926;
23
+ --color-petnow-main-50: #ff592c;
24
+ --color-petnow-main-60: #ff7a56;
25
+ --color-petnow-main-70: #ff9b80;
26
+ --color-petnow-main-80: #ffbdab;
27
+ --color-petnow-main-90: #ffded5;
28
+ --color-petnow-main-95: #fff3f1;
29
+ --color-petnow-main-100: #ffffff;
30
+ --color-petnow-sub-0: #0a0b0c;
31
+ --color-petnow-sub-10: #152437;
32
+ --color-petnow-sub-20: #213d63;
33
+ --color-petnow-sub-30: #2c578e;
34
+ --color-petnow-sub-40: #3870ba;
35
+ --color-petnow-sub-50: #4389e5;
36
+ --color-petnow-sub-60: #69a1ea;
37
+ --color-petnow-sub-70: #8eb8ef;
38
+ --color-petnow-sub-80: #b4d0f5;
39
+ --color-petnow-sub-90: #d9e7fa;
40
+ --color-petnow-sub-95: #ecf5ff;
41
+ --color-petnow-sub-100: #ffffff;
42
+ --color-petify-main-0: #0a0b0c;
43
+ --color-petify-main-10: #00154c;
44
+ --color-petify-main-20: #001c64;
45
+ --color-petify-main-30: #002481;
46
+ --color-petify-main-40: #002ea5;
47
+ --color-petify-main-50: #0033b5;
48
+ --color-petify-main-60: #335cc4;
49
+ --color-petify-main-70: #5476cd;
50
+ --color-petify-main-80: #99afe7;
51
+ --color-petify-main-90: #c5d3f8;
52
+ --color-petify-main-95: #e6ebf8;
53
+ --color-petify-main-100: #ffffff;
54
+ --color-petify-brand-0: #0a0b0c;
55
+ --color-petify-brand-10: #6b2500;
56
+ --color-petify-brand-20: #8c3000;
57
+ --color-petify-brand-30: #b53e00;
58
+ --color-petify-brand-40: #e85000;
59
+ --color-petify-brand-50: #ff5800;
60
+ --color-petify-brand-60: #ff7933;
61
+ --color-petify-brand-70: #ff8f54;
62
+ --color-petify-brand-80: #ffb28a;
63
+ --color-petify-brand-90: #ffcbb0;
64
+ --color-petify-brand-95: #fff2eb;
65
+ --color-petify-brand-100: #ffffff;
66
+ --color-neutral-grey-0: #0a0b0c;
67
+ --color-neutral-grey-10: #25272b;
68
+ --color-neutral-grey-20: #303439;
69
+ --color-neutral-grey-30: #3e4349;
70
+ --color-neutral-grey-40: #50565e;
71
+ --color-neutral-grey-50: #585e67;
72
+ --color-neutral-grey-60: #797e85;
73
+ --color-neutral-grey-70: #8f9399;
74
+ --color-neutral-grey-80: #b2b5b9;
75
+ --color-neutral-grey-90: #d8dadc;
76
+ --color-neutral-grey-95: #f3f3f4;
77
+ --color-neutral-grey-100: #ffffff;
78
+ }
79
+
80
+ @theme inline {
81
+ --color-background-base-neutral-1: var(--background-base-neutral-1);
82
+ --color-background-base-neutral-2: var(--background-base-neutral-2);
83
+ --color-surface-base-accent-1: var(--surface-base-accent-1);
84
+ --color-surface-base-accent-1-badge: var(--surface-base-accent-1-badge);
85
+ --color-surface-base-accent-2: var(--surface-base-accent-2);
86
+ --color-surface-base-accent-3: var(--surface-base-accent-3);
87
+ --color-surface-base-accent-3-badge: var(--surface-base-accent-3-badge);
88
+ --color-surface-base-accent-3-alpha: var(--surface-base-accent-3-alpha);
89
+ --color-surface-base-neutral-1: var(--surface-base-neutral-1);
90
+ --color-surface-base-neutral-1-alpha-1: var(--surface-base-neutral-1-alpha-1);
91
+ --color-surface-base-neutral-2: var(--surface-base-neutral-2);
92
+ --color-surface-base-neutral-3: var(--surface-base-neutral-3);
93
+ --color-surface-base-neutral-4: var(--surface-base-neutral-4);
94
+ --color-surface-base-neutral-5: var(--surface-base-neutral-5);
95
+ --color-surface-base-neutral-5-alpha-1: var(--surface-base-neutral-5-alpha-1);
96
+ --color-surface-base-neutral-5-alpha-2: var(--surface-base-neutral-5-alpha-2);
97
+ --color-surface-base-neutral-6: var(--surface-base-neutral-6);
98
+ --color-surface-base-sub-1: var(--surface-base-sub-1);
99
+ --color-surface-base-sub-2: var(--surface-base-sub-2);
100
+ --color-surface-base-sub-3: var(--surface-base-sub-3);
101
+ --color-surface-base-sub-3-pressed: var(--surface-base-sub-3-pressed);
102
+ --color-surface-base-critical-1: var(--surface-base-critical-1);
103
+ --color-surface-base-critical-2: var(--surface-base-critical-2);
104
+ --color-surface-base-critical-2-pressed: var(--surface-base-critical-2-pressed);
105
+ --color-surface-base-error: var(--surface-base-error);
106
+ --color-surface-base-divide-1: var(--surface-base-divide-1);
107
+ --color-surface-base-divide-2: var(--surface-base-divide-2);
108
+ --color-surface-base-divide-2-selected: var(--surface-base-divide-2-selected);
109
+ --color-surface-base-success-1: var(--surface-base-success-1);
110
+ --color-surface-base-success-2: var(--surface-base-success-2);
111
+ --color-surface-primary-accent: var(--surface-primary-accent);
112
+ --color-surface-primary-accent-hover: var(--surface-primary-accent-hover);
113
+ --color-surface-primary-accent-pressed: var(--surface-primary-accent-pressed);
114
+ --color-surface-secondary-accent: var(--surface-secondary-accent);
115
+ --color-surface-secondary-accent-hover: var(--surface-secondary-accent-hover);
116
+ --color-surface-secondary-accent-pressed: var(--surface-secondary-accent-pressed);
117
+ --color-surface-tertiary-accent: var(--surface-tertiary-accent);
118
+ --color-surface-tertiary-accent-hover: var(--surface-tertiary-accent-hover);
119
+ --color-surface-tertiary-accent-pressed: var(--surface-tertiary-accent-pressed);
120
+ --color-container-base-accent-1: var(--container-base-accent-1);
121
+ --color-container-base-accent-2: var(--container-base-accent-2);
122
+ --color-container-base-accent-2-camera-control-bar: var(--container-base-accent-2-camera-control-bar);
123
+ --color-container-base-sub: var(--container-base-sub);
124
+ --color-container-base-neutral-1: var(--container-base-neutral-1);
125
+ --color-container-base-neutral-2: var(--container-base-neutral-2);
126
+ --color-container-base-neutral-3: var(--container-base-neutral-3);
127
+ --color-container-base-neutral-4: var(--container-base-neutral-4);
128
+ --color-container-base-neutral-5: var(--container-base-neutral-5);
129
+ --color-container-base-neutral-6: var(--container-base-neutral-6);
130
+ --color-container-base-error: var(--container-base-error);
131
+ --color-container-base-info: var(--container-base-info);
132
+ --color-container-temporary-overlay-disabled: var(--container-temporary-overlay-disabled);
133
+ --color-icon-prominent-neutral: var(--icon-prominent-neutral);
134
+ --color-icon-prominent-accent-1: var(--icon-prominent-accent-1);
135
+ --color-icon-prominent-accent-1-badge: var(--icon-prominent-accent-1-badge);
136
+ --color-icon-prominent-accent-1-camera-control-bar: var(--icon-prominent-accent-1-camera-control-bar);
137
+ --color-icon-prominent-accent-2: var(--icon-prominent-accent-2);
138
+ --color-icon-prominent-sub: var(--icon-prominent-sub);
139
+ --color-icon-prominent-critical: var(--icon-prominent-critical);
140
+ --color-icon-prominent-error: var(--icon-prominent-error);
141
+ --color-icon-prominent-success: var(--icon-prominent-success);
142
+ --color-icon-base-neutral-1: var(--icon-base-neutral-1);
143
+ --color-icon-base-neutral-2: var(--icon-base-neutral-2);
144
+ --color-icon-base-neutral-3: var(--icon-base-neutral-3);
145
+ --color-icon-base-neutral-4: var(--icon-base-neutral-4);
146
+ --color-border-prominent-accent: var(--border-prominent-accent);
147
+ --color-border-prominent-accent-badge: var(--border-prominent-accent-badge);
148
+ --color-border-prominent-accent-disabled: var(--border-prominent-accent-disabled);
149
+ --color-border-prominent-sub: var(--border-prominent-sub);
150
+ --color-border-prominent-sub-disabled: var(--border-prominent-sub-disabled);
151
+ --color-border-prominent-critical: var(--border-prominent-critical);
152
+ --color-border-prominent-error: var(--border-prominent-error);
153
+ --color-border-prominent-success: var(--border-prominent-success);
154
+ --color-border-base-neutral-1: var(--border-base-neutral-1);
155
+ --color-border-base-neutral-2: var(--border-base-neutral-2);
156
+ --color-border-base-neutral-3: var(--border-base-neutral-3);
157
+ --color-border-base-neutral-4: var(--border-base-neutral-4);
158
+ --color-border-base-neutral-5: var(--border-base-neutral-5);
159
+ --color-border-base-neutral-6: var(--border-base-neutral-6);
160
+ --color-text-prominent-neutral-1: var(--text-prominent-neutral-1);
161
+ --color-text-prominent-neutral-2: var(--text-prominent-neutral-2);
162
+ --color-text-prominent-neutral-3: var(--text-prominent-neutral-3);
163
+ --color-text-prominent-neutral-4: var(--text-prominent-neutral-4);
164
+ --color-text-prominent-accent-1: var(--text-prominent-accent-1);
165
+ --color-text-prominent-accent-1-badge: var(--text-prominent-accent-1-badge);
166
+ --color-text-prominent-accent-1-camera-control-bar: var(--text-prominent-accent-1-camera-control-bar);
167
+ --color-text-prominent-accent-2: var(--text-prominent-accent-2);
168
+ --color-text-prominent-sub: var(--text-prominent-sub);
169
+ --color-text-prominent-critical: var(--text-prominent-critical);
170
+ --color-text-prominent-error: var(--text-prominent-error);
171
+ --color-text-prominent-success: var(--text-prominent-success);
172
+ --color-text-base-neutral-1: var(--text-base-neutral-1);
173
+ --color-text-base-neutral-2: var(--text-base-neutral-2);
174
+ --color-text-base-neutral-3: var(--text-base-neutral-3);
175
+ --color-text-base-neutral-4: var(--text-base-neutral-4);
176
+ --color-text-base-neutral-5: var(--text-base-neutral-5);
177
+ }
178
+
179
+ @layer theme {
180
+ :root {
181
+ @variant light {
182
+ --background-base-neutral-1: #ffffff;
183
+ --background-base-neutral-2: #f3f3f4;
184
+ --surface-base-accent-1: #fff3f1;
185
+ --surface-base-accent-1-badge: #fff3f1;
186
+ --surface-primary-accent: #ff592c;
187
+ --surface-primary-accent-hover: #ce4926;
188
+ --surface-primary-accent-pressed: #9d3a1f;
189
+ --surface-base-accent-2: #ffded5;
190
+ --surface-base-accent-3: #ff592c;
191
+ --surface-base-accent-3-badge: #ff592c;
192
+ --surface-base-accent-3-alpha: #ff580066;
193
+ --surface-base-neutral-1: #ffffff;
194
+ --surface-base-neutral-1-alpha-1: #ffffff99;
195
+ --surface-base-neutral-2: #f3f3f4;
196
+ --surface-secondary-accent: #ffded5;
197
+ --surface-secondary-accent-hover: #ffbdab;
198
+ --surface-secondary-accent-pressed: #ff9b80;
199
+ --surface-base-neutral-3: #d8dadc;
200
+ --surface-base-neutral-4: #b2b5b9;
201
+ --surface-base-neutral-5: #50565e;
202
+ --surface-base-neutral-5-alpha-1: #50565ecc;
203
+ --surface-base-neutral-5-alpha-2: #50565ee5;
204
+ --surface-base-neutral-6: #0a0b0c;
205
+ --surface-base-sub-1: #ecf5ff;
206
+ --surface-base-sub-2: #d9e7fa;
207
+ --surface-base-sub-3: #4389e5;
208
+ --surface-base-sub-3-pressed: #3870ba;
209
+ --surface-base-critical-1: #fff0f2;
210
+ --surface-base-critical-2: #ff323e;
211
+ --surface-base-critical-2-pressed: #ec010f;
212
+ --surface-base-error: #ff323e;
213
+ --surface-base-divide-1: #f3f3f4;
214
+ --surface-base-divide-2: #8f9399;
215
+ --surface-base-divide-2-selected: #3e4349;
216
+ --surface-base-success-1: #e3ffee;
217
+ --surface-base-success-2: #46d87e;
218
+ --surface-tertiary-accent: #ff592c;
219
+ --surface-tertiary-accent-hover: #fff3f1;
220
+ --surface-tertiary-accent-pressed: #ffded5;
221
+ --container-base-accent-1: #ff7a56;
222
+ --container-temporary-overlay-disabled: #ffffff66;
223
+ --container-base-accent-2: #ff592c;
224
+ --container-base-accent-2-camera-control-bar: #ff592c;
225
+ --container-base-sub: #4389e5;
226
+ --container-base-neutral-1: #ffffff;
227
+ --container-base-neutral-2: #f3f3f4;
228
+ --container-base-neutral-3: #d8dadc;
229
+ --container-base-neutral-4: #8f9399;
230
+ --container-base-neutral-5: #50565e;
231
+ --container-base-neutral-6: #0a0b0c;
232
+ --container-base-error: #ff323e;
233
+ --container-base-info: #ffd22d;
234
+ --icon-prominent-neutral: #ffffff;
235
+ --icon-base-neutral-1: #ffffff;
236
+ --icon-base-neutral-2: #b2b5b9;
237
+ --icon-base-neutral-3: #50565e;
238
+ --icon-base-neutral-4: #0a0b0c;
239
+ --icon-prominent-accent-1: #ff592c;
240
+ --icon-prominent-accent-1-badge: #ff592c;
241
+ --icon-prominent-accent-1-camera-control-bar: #ff592c;
242
+ --icon-prominent-accent-2: #6c2a19;
243
+ --icon-prominent-sub: #4389e5;
244
+ --icon-prominent-critical: #ff323e;
245
+ --icon-prominent-error: #ff323e;
246
+ --icon-prominent-success: #2fc869;
247
+ --border-prominent-accent: #ff592c;
248
+ --border-prominent-accent-badge: #ff592c;
249
+ --border-prominent-accent-disabled: #ff592c66;
250
+ --border-base-neutral-1: #ffffff;
251
+ --border-base-neutral-2: #d8dadc;
252
+ --border-base-neutral-3: #b2b5b9;
253
+ --border-base-neutral-4: #8f9399;
254
+ --border-base-neutral-5: #50565e;
255
+ --border-base-neutral-6: #0a0b0c;
256
+ --border-prominent-sub: #4389e5;
257
+ --border-prominent-sub-disabled: #4389e566;
258
+ --border-prominent-critical: #ff323e;
259
+ --border-prominent-error: #ff323e;
260
+ --border-prominent-success: #2fc869;
261
+ --text-prominent-neutral-1: #ffffff;
262
+ --text-prominent-neutral-2: #8f9399;
263
+ --text-prominent-neutral-3: #50565e;
264
+ --text-prominent-neutral-4: #0a0b0c;
265
+ --text-base-neutral-1: #b2b5b9;
266
+ --text-base-neutral-2: #8f9399;
267
+ --text-base-neutral-3: #50565e;
268
+ --text-base-neutral-4: #3e4349;
269
+ --text-base-neutral-5: #0a0b0c;
270
+ --text-prominent-accent-1: #ff592c;
271
+ --text-prominent-accent-1-badge: #ff592c;
272
+ --text-prominent-accent-1-camera-control-bar: #ff592c;
273
+ --text-prominent-accent-2: #6c2a19;
274
+ --text-prominent-sub: #4389e5;
275
+ --text-prominent-critical: #ff323e;
276
+ --text-prominent-error: #ff323e;
277
+ --text-prominent-success: #2fc869;
278
+ }
279
+
280
+ @variant dark {
281
+ --background-base-neutral-1: #ffffff;
282
+ --background-base-neutral-2: #f3f3f4;
283
+ --surface-base-accent-1: #fff3f1;
284
+ --surface-base-accent-1-badge: #fff3f1;
285
+ --surface-primary-accent: #ff592c;
286
+ --surface-primary-accent-hover: #ce4926;
287
+ --surface-primary-accent-pressed: #9d3a1f;
288
+ --surface-base-accent-2: #ffded5;
289
+ --surface-base-accent-3: #ff592c;
290
+ --surface-base-accent-3-badge: #ff592c;
291
+ --surface-base-accent-3-alpha: #ff580066;
292
+ --surface-base-neutral-1: #ffffff;
293
+ --surface-base-neutral-1-alpha-1: #ffffff99;
294
+ --surface-base-neutral-2: #f3f3f4;
295
+ --surface-secondary-accent: #ffded5;
296
+ --surface-secondary-accent-hover: #ffbdab;
297
+ --surface-secondary-accent-pressed: #ff9b80;
298
+ --surface-base-neutral-3: #d8dadc;
299
+ --surface-base-neutral-4: #b2b5b9;
300
+ --surface-base-neutral-5: #50565e;
301
+ --surface-base-neutral-5-alpha-1: #50565ecc;
302
+ --surface-base-neutral-5-alpha-2: #50565ee5;
303
+ --surface-base-neutral-6: #0a0b0c;
304
+ --surface-base-sub-1: #ecf5ff;
305
+ --surface-base-sub-2: #d9e7fa;
306
+ --surface-base-sub-3: #4389e5;
307
+ --surface-base-sub-3-pressed: #3870ba;
308
+ --surface-base-critical-1: #fff0f2;
309
+ --surface-base-critical-2: #ff323e;
310
+ --surface-base-critical-2-pressed: #ec010f;
311
+ --surface-base-error: #ff323e;
312
+ --surface-base-divide-1: #f3f3f4;
313
+ --surface-base-divide-2: #8f9399;
314
+ --surface-base-divide-2-selected: #3e4349;
315
+ --surface-base-success-1: #e3ffee;
316
+ --surface-base-success-2: #46d87e;
317
+ --surface-tertiary-accent: #ff592c;
318
+ --surface-tertiary-accent-hover: #fff3f1;
319
+ --surface-tertiary-accent-pressed: #ffded5;
320
+ --container-base-accent-1: #ff7a56;
321
+ --container-temporary-overlay-disabled: #ffffff66;
322
+ --container-base-accent-2: #ff592c;
323
+ --container-base-accent-2-camera-control-bar: #ff592c;
324
+ --container-base-sub: #4389e5;
325
+ --container-base-neutral-1: #ffffff;
326
+ --container-base-neutral-2: #f3f3f4;
327
+ --container-base-neutral-3: #d8dadc;
328
+ --container-base-neutral-4: #8f9399;
329
+ --container-base-neutral-5: #50565e;
330
+ --container-base-neutral-6: #0a0b0c;
331
+ --container-base-error: #ff323e;
332
+ --container-base-info: #ffd22d;
333
+ --icon-prominent-neutral: #ffffff;
334
+ --icon-base-neutral-1: #ffffff;
335
+ --icon-base-neutral-2: #b2b5b9;
336
+ --icon-base-neutral-3: #50565e;
337
+ --icon-base-neutral-4: #0a0b0c;
338
+ --icon-prominent-accent-1: #ff592c;
339
+ --icon-prominent-accent-1-badge: #ff592c;
340
+ --icon-prominent-accent-1-camera-control-bar: #ff592c;
341
+ --icon-prominent-accent-2: #6c2a19;
342
+ --icon-prominent-sub: #4389e5;
343
+ --icon-prominent-critical: #ff323e;
344
+ --icon-prominent-error: #ff323e;
345
+ --icon-prominent-success: #2fc869;
346
+ --border-prominent-accent: #ff592c;
347
+ --border-prominent-accent-badge: #ff592c;
348
+ --border-prominent-accent-disabled: #ff592c66;
349
+ --border-base-neutral-1: #ffffff;
350
+ --border-base-neutral-2: #d8dadc;
351
+ --border-base-neutral-3: #b2b5b9;
352
+ --border-base-neutral-4: #8f9399;
353
+ --border-base-neutral-5: #50565e;
354
+ --border-base-neutral-6: #0a0b0c;
355
+ --border-prominent-sub: #4389e5;
356
+ --border-prominent-sub-disabled: #4389e566;
357
+ --border-prominent-critical: #ff323e;
358
+ --border-prominent-error: #ff323e;
359
+ --border-prominent-success: #2fc869;
360
+ --text-prominent-neutral-1: #ffffff;
361
+ --text-prominent-neutral-2: #8f9399;
362
+ --text-prominent-neutral-3: #50565e;
363
+ --text-prominent-neutral-4: #0a0b0c;
364
+ --text-base-neutral-1: #b2b5b9;
365
+ --text-base-neutral-2: #8f9399;
366
+ --text-base-neutral-3: #50565e;
367
+ --text-base-neutral-4: #3e4349;
368
+ --text-base-neutral-5: #0a0b0c;
369
+ --text-prominent-accent-1: #ff592c;
370
+ --text-prominent-accent-1-badge: #ff592c;
371
+ --text-prominent-accent-1-camera-control-bar: #ff592c;
372
+ --text-prominent-accent-2: #6c2a19;
373
+ --text-prominent-sub: #4389e5;
374
+ --text-prominent-critical: #ff323e;
375
+ --text-prominent-error: #ff323e;
376
+ --text-prominent-success: #2fc869;
377
+ }
378
+
379
+ @variant petify {
380
+ --background-base-neutral-1: #ffffff;
381
+ --background-base-neutral-2: #f3f3f4;
382
+ --surface-base-accent-1: #e6ebf8;
383
+ --surface-base-accent-1-badge: #fff2eb;
384
+ --surface-primary-accent: #0033b5;
385
+ --surface-primary-accent-hover: #002481;
386
+ --surface-primary-accent-pressed: #001c64;
387
+ --surface-base-accent-2: #c5d3f8;
388
+ --surface-base-accent-3: #0033b5;
389
+ --surface-base-accent-3-badge: #ff5800;
390
+ --surface-base-accent-3-alpha: #0033b566;
391
+ --surface-base-neutral-1: #ffffff;
392
+ --surface-base-neutral-1-alpha-1: #ffffff99;
393
+ --surface-base-neutral-2: #f3f3f4;
394
+ --surface-secondary-accent: #c5d3f8;
395
+ --surface-secondary-accent-hover: #99afe7;
396
+ --surface-secondary-accent-pressed: #5476cd;
397
+ --surface-base-neutral-3: #d8dadc;
398
+ --surface-base-neutral-4: #b2b5b9;
399
+ --surface-base-neutral-5: #50565e;
400
+ --surface-base-neutral-5-alpha-1: #50565ecc;
401
+ --surface-base-neutral-5-alpha-2: #50565ee5;
402
+ --surface-base-neutral-6: #0a0b0c;
403
+ --surface-base-sub-1: #e6ebf8;
404
+ --surface-base-sub-2: #c5d3f8;
405
+ --surface-base-sub-3: #5476cd;
406
+ --surface-base-sub-3-pressed: #335cc4;
407
+ --surface-base-critical-1: #fff0f2;
408
+ --surface-base-critical-2: #ff323e;
409
+ --surface-base-critical-2-pressed: #ec010f;
410
+ --surface-base-error: #ff323e;
411
+ --surface-base-divide-1: #f3f3f4;
412
+ --surface-base-divide-2: #8f9399;
413
+ --surface-base-divide-2-selected: #3e4349;
414
+ --surface-base-success-1: #e3ffee;
415
+ --surface-base-success-2: #46d87e;
416
+ --surface-tertiary-accent: #0033b5;
417
+ --surface-tertiary-accent-hover: #e6ebf8;
418
+ --surface-tertiary-accent-pressed: #c5d3f8;
419
+ --container-base-accent-1: #335cc4;
420
+ --container-temporary-overlay-disabled: #ffffff66;
421
+ --container-base-accent-2: #0033b5;
422
+ --container-base-accent-2-camera-control-bar: #5476cd;
423
+ --container-base-sub: #5476cd;
424
+ --container-base-neutral-1: #ffffff;
425
+ --container-base-neutral-2: #f3f3f4;
426
+ --container-base-neutral-3: #d8dadc;
427
+ --container-base-neutral-4: #8f9399;
428
+ --container-base-neutral-5: #50565e;
429
+ --container-base-neutral-6: #0a0b0c;
430
+ --container-base-error: #ff323e;
431
+ --container-base-info: #ffd22d;
432
+ --icon-prominent-neutral: #ffffff;
433
+ --icon-base-neutral-1: #ffffff;
434
+ --icon-base-neutral-2: #b2b5b9;
435
+ --icon-base-neutral-3: #50565e;
436
+ --icon-base-neutral-4: #0a0b0c;
437
+ --icon-prominent-accent-1: #0033b5;
438
+ --icon-prominent-accent-1-badge: #ff5800;
439
+ --icon-prominent-accent-1-camera-control-bar: #5476cd;
440
+ --icon-prominent-accent-2: #0033b5;
441
+ --icon-prominent-sub: #002ea5;
442
+ --icon-prominent-critical: #ff323e;
443
+ --icon-prominent-error: #ff323e;
444
+ --icon-prominent-success: #2fc869;
445
+ --border-prominent-accent: #0033b5;
446
+ --border-prominent-accent-badge: #ff5800;
447
+ --border-prominent-accent-disabled: #0033b566;
448
+ --border-base-neutral-1: #ffffff;
449
+ --border-base-neutral-2: #d8dadc;
450
+ --border-base-neutral-3: #b2b5b9;
451
+ --border-base-neutral-4: #8f9399;
452
+ --border-base-neutral-5: #50565e;
453
+ --border-base-neutral-6: #0a0b0c;
454
+ --border-prominent-sub: #335cc4;
455
+ --border-prominent-sub-disabled: #335cc466;
456
+ --border-prominent-critical: #ff323e;
457
+ --border-prominent-error: #ff323e;
458
+ --border-prominent-success: #2fc869;
459
+ --text-prominent-neutral-1: #ffffff;
460
+ --text-prominent-neutral-2: #8f9399;
461
+ --text-prominent-neutral-3: #50565e;
462
+ --text-prominent-neutral-4: #0a0b0c;
463
+ --text-base-neutral-1: #b2b5b9;
464
+ --text-base-neutral-2: #8f9399;
465
+ --text-base-neutral-3: #50565e;
466
+ --text-base-neutral-4: #3e4349;
467
+ --text-base-neutral-5: #0a0b0c;
468
+ --text-prominent-accent-1: #0033b5;
469
+ --text-prominent-accent-1-badge: #ff5800;
470
+ --text-prominent-accent-1-camera-control-bar: #99afe7;
471
+ --text-prominent-accent-2: #0033b5;
472
+ --text-prominent-sub: #002ea5;
473
+ --text-prominent-critical: #ff323e;
474
+ --text-prominent-error: #ff323e;
475
+ --text-prominent-success: #2fc869;
476
+ }
477
+ }
478
+ }
479
+
480
+ @utility font-pretendard-regular {
481
+ font-family: Pretendard-Regular;
482
+ }
483
+
484
+ @utility font-pretendard-medium {
485
+ font-family: Pretendard-Medium;
486
+ }
487
+
488
+ @utility font-pretendard-bold {
489
+ font-family: Pretendard-Bold;
490
+ }
491
+
492
+ @utility text-display-96-bold {
493
+ font-size: 96px;
494
+ letter-spacing: 0;
495
+ font-weight: 700;
496
+ font-family: Pretendard-Bold;
497
+ }
498
+
499
+ @utility text-display-96-medium {
500
+ font-size: 96px;
501
+ letter-spacing: 0;
502
+ font-weight: 500;
503
+ font-family: Pretendard-Medium;
504
+ }
505
+
506
+ @utility text-display-72-bold {
507
+ font-size: 72px;
508
+ letter-spacing: 0;
509
+ font-weight: 700;
510
+ font-family: Pretendard-Bold;
511
+ }
512
+
513
+ @utility text-display-72-medium {
514
+ font-size: 72px;
515
+ letter-spacing: 0;
516
+ font-weight: 500;
517
+ font-family: Pretendard-Medium;
518
+ }
519
+
520
+ @utility text-display-60-bold {
521
+ font-size: 60px;
522
+ letter-spacing: 0;
523
+ font-weight: 700;
524
+ font-family: Pretendard-Bold;
525
+ }
526
+
527
+ @utility text-display-60-medium {
528
+ font-size: 60px;
529
+ letter-spacing: 0;
530
+ font-weight: 500;
531
+ font-family: Pretendard-Medium;
532
+ }
533
+
534
+ @utility text-headline-48-bold {
535
+ font-size: 48px;
536
+ letter-spacing: 0;
537
+ font-weight: 700;
538
+ font-family: Pretendard-Bold;
539
+ }
540
+
541
+ @utility text-headline-48-medium {
542
+ font-size: 48px;
543
+ letter-spacing: 0;
544
+ font-weight: 500;
545
+ font-family: Pretendard-Medium;
546
+ }
547
+
548
+ @utility text-headline-48-regular {
549
+ font-size: 48px;
550
+ letter-spacing: 0;
551
+ font-weight: 400;
552
+ font-family: Pretendard-Regular;
553
+ }
554
+
555
+ @utility text-headline-42-bold {
556
+ font-size: 42px;
557
+ letter-spacing: 0;
558
+ font-weight: 700;
559
+ font-family: Pretendard-Bold;
560
+ }
561
+
562
+ @utility text-headline-42-medium {
563
+ font-size: 42px;
564
+ letter-spacing: 0;
565
+ font-weight: 500;
566
+ font-family: Pretendard-Medium;
567
+ }
568
+
569
+ @utility text-headline-42-regular {
570
+ font-size: 42px;
571
+ letter-spacing: 0;
572
+ font-weight: 400;
573
+ font-family: Pretendard-Regular;
574
+ }
575
+
576
+ @utility text-headline-36-bold {
577
+ font-size: 36px;
578
+ letter-spacing: 0;
579
+ font-weight: 700;
580
+ font-family: Pretendard-Bold;
581
+ }
582
+
583
+ @utility text-headline-36-medium {
584
+ font-size: 36px;
585
+ letter-spacing: 0;
586
+ font-weight: 500;
587
+ font-family: Pretendard-Medium;
588
+ }
589
+
590
+ @utility text-headline-36-regular {
591
+ font-size: 36px;
592
+ letter-spacing: 0;
593
+ font-weight: 400;
594
+ font-family: Pretendard-Regular;
595
+ }
596
+
597
+ @utility text-title-28-bold {
598
+ font-size: 28px;
599
+ letter-spacing: 0;
600
+ font-weight: 700;
601
+ font-family: Pretendard-Bold;
602
+ }
603
+
604
+ @utility text-title-28-medium {
605
+ font-size: 28px;
606
+ letter-spacing: 0;
607
+ font-weight: 500;
608
+ font-family: Pretendard-Medium;
609
+ }
610
+
611
+ @utility text-title-28-regular {
612
+ font-size: 28px;
613
+ letter-spacing: 0;
614
+ font-weight: 400;
615
+ font-family: Pretendard-Regular;
616
+ }
617
+
618
+ @utility text-title-24-bold {
619
+ font-size: 24px;
620
+ letter-spacing: 0;
621
+ font-weight: 700;
622
+ font-family: Pretendard-Bold;
623
+ }
624
+
625
+ @utility text-title-24-medium {
626
+ font-size: 24px;
627
+ letter-spacing: 0;
628
+ font-weight: 500;
629
+ font-family: Pretendard-Medium;
630
+ }
631
+
632
+ @utility text-title-24-regular {
633
+ font-size: 24px;
634
+ letter-spacing: 0;
635
+ font-weight: 400;
636
+ font-family: Pretendard-Regular;
637
+ }
638
+
639
+ @utility text-title-20-bold {
640
+ font-size: 20px;
641
+ letter-spacing: 0;
642
+ font-weight: 700;
643
+ font-family: Pretendard-Bold;
644
+ }
645
+
646
+ @utility text-title-20-medium {
647
+ font-size: 20px;
648
+ letter-spacing: 0;
649
+ font-weight: 500;
650
+ font-family: Pretendard-Medium;
651
+ }
652
+
653
+ @utility text-title-20-regular {
654
+ font-size: 20px;
655
+ letter-spacing: 0;
656
+ font-weight: 400;
657
+ font-family: Pretendard-Regular;
658
+ }
659
+
660
+ @utility text-title-18-bold {
661
+ font-size: 18px;
662
+ letter-spacing: 0;
663
+ font-weight: 700;
664
+ font-family: Pretendard-Bold;
665
+ }
666
+
667
+ @utility text-title-18-medium {
668
+ font-size: 18px;
669
+ letter-spacing: 0;
670
+ font-weight: 500;
671
+ font-family: Pretendard-Medium;
672
+ }
673
+
674
+ @utility text-title-18-regular {
675
+ font-size: 18px;
676
+ letter-spacing: 0;
677
+ font-weight: 400;
678
+ font-family: Pretendard-Regular;
679
+ }
680
+
681
+ @utility text-title-16-bold {
682
+ font-size: 16px;
683
+ letter-spacing: 0;
684
+ font-weight: 700;
685
+ font-family: Pretendard-Bold;
686
+ }
687
+
688
+ @utility text-title-14-bold {
689
+ font-size: 14px;
690
+ letter-spacing: 0;
691
+ font-weight: 700;
692
+ font-family: Pretendard-Bold;
693
+ }
694
+
695
+ @utility text-body-16-medium {
696
+ font-size: 16px;
697
+ letter-spacing: 0;
698
+ font-weight: 500;
699
+ font-family: Pretendard-Medium;
700
+ }
701
+
702
+ @utility text-body-16-regular {
703
+ font-size: 16px;
704
+ letter-spacing: 0;
705
+ font-weight: 400;
706
+ font-family: Pretendard-Regular;
707
+ }
708
+
709
+ @utility text-body-14-medium {
710
+ font-size: 14px;
711
+ letter-spacing: 0;
712
+ font-weight: 500;
713
+ font-family: Pretendard-Medium;
714
+ }
715
+
716
+ @utility text-body-14-regular {
717
+ font-size: 14px;
718
+ letter-spacing: 0;
719
+ font-weight: 400;
720
+ font-family: Pretendard-Regular;
721
+ }
722
+
723
+ @utility text-body-12-bold {
724
+ font-size: 12px;
725
+ letter-spacing: 0;
726
+ font-weight: 700;
727
+ font-family: Pretendard-Bold;
728
+ }
729
+
730
+ @utility text-caption-12-bold {
731
+ font-size: 12px;
732
+ letter-spacing: 0;
733
+ font-weight: 700;
734
+ font-family: Pretendard-Bold;
735
+ }
736
+
737
+ @utility text-caption-12-medium {
738
+ font-size: 12px;
739
+ letter-spacing: 0;
740
+ font-weight: 500;
741
+ font-family: Pretendard-Medium;
742
+ }
743
+
744
+ @utility text-caption-12-regular {
745
+ font-size: 12px;
746
+ letter-spacing: 0;
747
+ font-weight: 400;
748
+ font-family: Pretendard-Regular;
749
+ }
750
+
751
+ @utility text-caption-11-medium {
752
+ font-size: 11px;
753
+ letter-spacing: 0;
754
+ font-weight: 500;
755
+ font-family: Pretendard-Medium;
756
+ }
757
+
758
+ @utility text-caption-10-bold {
759
+ font-size: 10px;
760
+ letter-spacing: 0;
761
+ font-weight: 700;
762
+ font-family: Pretendard-Bold;
763
+ }