@hotelcard/ui 1.0.0-rc.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 (9) hide show
  1. package/README.md +74 -0
  2. package/dist/index.cjs +2 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.css +1 -0
  5. package/dist/index.d.ts +1799 -0
  6. package/dist/index.js +1624 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/tokens.css +543 -0
  9. package/package.json +69 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,543 @@
1
+ @import "tailwindcss";
2
+
3
+ /* Generated from Token Studio by token-studio-to-tailwind */
4
+ /* This file is auto-generated. Do not edit manually. */
5
+
6
+ @theme {
7
+ /* Core palette (light) */
8
+ --color-ink-base-white: #ffffff;
9
+ --color-ink-base-black: #000000;
10
+ --color-ink-absolute-white: #ffffff;
11
+ --color-ink-absolute-black: #000000;
12
+ --color-gray-50: #f9fafb;
13
+ --color-gray-100: #f3f4f6;
14
+ --color-gray-200: #e5e7eb;
15
+ --color-gray-300: #d1d5db;
16
+ --color-gray-400: #9ca3af;
17
+ --color-gray-500: #6b7280;
18
+ --color-gray-600: #4b5563;
19
+ --color-gray-700: #374151;
20
+ --color-gray-800: #1f2937;
21
+ --color-gray-900: #111827;
22
+ --color-gray-950: #030712;
23
+ --color-red-50: #fef6f6;
24
+ --color-red-100: #fbeeee;
25
+ --color-red-200: #feeded;
26
+ --color-red-300: #fea6a6;
27
+ --color-red-400: #fc6868;
28
+ --color-red-500: #d04343;
29
+ --color-red-600: #b43030;
30
+ --color-red-700: #9c2b2b;
31
+ --color-red-800: #861c1c;
32
+ --color-red-900: #551212;
33
+ --color-red-950: #2d0909;
34
+ --color-green-50: #effbfa;
35
+ --color-green-100: #ddf5f4;
36
+ --color-green-200: #b2eae7;
37
+ --color-green-300: #7fdad4;
38
+ --color-green-400: #63cdc6;
39
+ --color-green-500: #00857c;
40
+ --color-green-600: #006962;
41
+ --color-green-700: #035a55;
42
+ --color-green-800: #093f3b;
43
+ --color-green-900: #09312f;
44
+ --color-green-950: #052524;
45
+ --color-yellow-50: #fff8ee;
46
+ --color-yellow-100: #fff3e2;
47
+ --color-yellow-200: #fee1b6;
48
+ --color-yellow-300: #fbc068;
49
+ --color-yellow-400: #fbb041;
50
+ --color-yellow-500: #ad6500;
51
+ --color-yellow-600: #9a5a00;
52
+ --color-yellow-700: #865208;
53
+ --color-yellow-800: #6b4610;
54
+ --color-yellow-900: #4e3105;
55
+ --color-yellow-950: #2d1c02;
56
+ --color-blue-50: #f2f6fd;
57
+ --color-blue-100: #e7f0fe;
58
+ --color-blue-200: #d0e3ff;
59
+ --color-blue-300: #9fc5ff;
60
+ --color-blue-400: #73abff;
61
+ --color-blue-500: #3474da;
62
+ --color-blue-600: #1a69e7;
63
+ --color-blue-700: #0d57c6;
64
+ --color-blue-800: #114799;
65
+ --color-blue-900: #0c326c;
66
+ --color-blue-950: #061f44;
67
+ --override-logo-text: var(--color-gray-800);
68
+ --_system-_background-primary: var(--color-ink-base-white);
69
+ --_system-_content-primary: var(--content-general-primary);
70
+ --_system-_content-secondary: var(--content-general-tertiary);
71
+ --_system-_content-link: var(--content-action-link-idle);
72
+ --_system-_note-positive: var(--color-ink-base-black);
73
+ --_system-_note-negative: var(--color-ink-base-white);
74
+ --_system-_note-hook: var(--color-gray-500);
75
+ --_system-_background-secondary: var(--color-gray-100);
76
+ --brand-main: #d04343;
77
+
78
+ /* Semantic colors */
79
+ --content-general-primary: var(--color-gray-800);
80
+ --content-general-secondary: var(--color-gray-600);
81
+ --content-general-tertiary: var(--color-gray-500);
82
+ --content-general-inverse-primary: var(--color-ink-absolute-white);
83
+ --content-general-inverse-secondary: var(--color-gray-400);
84
+ --content-general-inverse-tertiary: var(--color-gray-500);
85
+ --content-general-inverse-divider: var(--color-gray-600);
86
+ --content-action-primary-inverse-idle: var(--color-ink-base-white);
87
+ --content-action-primary-inverse-hover: var(--color-ink-base-white);
88
+ --content-action-primary-inverse-active: var(--color-ink-base-white);
89
+ --content-action-primary-idle: var(--color-red-500);
90
+ --content-action-primary-hover: var(--color-red-600);
91
+ --content-action-primary-active: var(--color-red-700);
92
+ --content-action-secondary-idle: var(--color-gray-800);
93
+ --content-action-secondary-hover: var(--color-gray-900);
94
+ --content-action-secondary-active: var(--color-gray-950);
95
+ --content-action-highlight-inverse-idle: var(--color-ink-base-white);
96
+ --content-action-highlight-inverse-hover: var(--color-ink-base-white);
97
+ --content-action-highlight-inverse-active: var(--color-ink-base-white);
98
+ --content-action-highlight-idle: var(--color-blue-500);
99
+ --content-action-highlight-hover: var(--color-blue-600);
100
+ --content-action-highlight-active: var(--color-blue-700);
101
+ --content-status-success-idle: var(--color-green-800);
102
+ --content-status-success-hover: var(--color-green-900);
103
+ --content-status-success-active: var(--color-green-950);
104
+ --content-status-success-idle-light: var(--color-green-600);
105
+ --content-status-warning-idle: var(--color-yellow-800);
106
+ --content-status-warning-hover: var(--color-yellow-900);
107
+ --content-status-warning-active: var(--color-yellow-950);
108
+ --content-status-warning-idle-light: var(--color-yellow-600);
109
+ --content-status-info-idle: var(--color-blue-800);
110
+ --content-status-info-hover: var(--color-blue-900);
111
+ --content-status-info-active: var(--color-blue-950);
112
+ --content-status-info-idle-light: var(--color-blue-600);
113
+ --content-status-error-idle: var(--color-red-800);
114
+ --content-status-error-hover: var(--color-red-900);
115
+ --content-status-error-active: var(--color-red-950);
116
+ --content-status-error-idle-light: var(--color-red-500);
117
+ --content-action-disabled-idle: var(--color-gray-500);
118
+ --content-action-link-idle: var(--color-blue-800);
119
+ --content-action-link-hover: var(--color-blue-900);
120
+ --content-action-link-active: var(--color-blue-950);
121
+ --background-general-primary: var(--color-ink-base-white);
122
+ --background-general-secondary: var(--color-gray-200);
123
+ --background-general-tertiary: var(--color-blue-100);
124
+ --background-general-inverse-primary: var(--color-gray-800);
125
+ --background-general-inverse-secondary: var(--color-gray-900);
126
+ --background-general-inverse-tertiary: var(--color-gray-950);
127
+ --background-general-secondary-light: var(--color-gray-100);
128
+ --background-action-primary-idle: var(--color-red-500);
129
+ --background-action-primary-hover: var(--color-red-600);
130
+ --background-action-primary-active: var(--color-red-700);
131
+ --background-action-secondary-idle: var(--color-ink-base-white);
132
+ --background-action-secondary-hover: var(--color-gray-200);
133
+ --background-action-secondary-active: var(--color-gray-300);
134
+ --background-action-highlight-idle: var(--color-blue-500);
135
+ --background-action-highlight-hover: var(--color-blue-600);
136
+ --background-action-highlight-active: var(--color-blue-700);
137
+ --background-action-highlight-idle-light: var(--color-ink-base-white);
138
+ --background-action-highlight-hover-light: var(--color-blue-100);
139
+ --background-action-highlight-active-light: var(--color-blue-200);
140
+ --background-status-success-idle: var(--color-green-200);
141
+ --background-status-success-hover: var(--color-green-300);
142
+ --background-status-success-active: var(--color-green-400);
143
+ --background-status-success-hover-light: var(--color-green-200);
144
+ --background-status-success-active-light: var(--color-green-300);
145
+ --background-status-success-idle-light: var(--color-green-100);
146
+ --background-status-warning-idle: var(--color-yellow-200);
147
+ --background-status-warning-hover: var(--color-yellow-300);
148
+ --background-status-warning-active: var(--color-yellow-400);
149
+ --background-status-warning-idle-light: var(--color-yellow-100);
150
+ --background-status-warning-hover-light: var(--color-yellow-200);
151
+ --background-status-warning-active-light: var(--color-yellow-300);
152
+ --background-status-info-idle: var(--color-blue-200);
153
+ --background-status-info-hover: var(--color-blue-300);
154
+ --background-status-info-active: var(--color-blue-400);
155
+ --background-status-info-active-light: var(--color-blue-300);
156
+ --background-status-info-hover-light: var(--color-blue-200);
157
+ --background-status-info-idle-light: var(--color-blue-100);
158
+ --background-status-error-idle: var(--color-red-200);
159
+ --background-status-error-hover: var(--color-red-300);
160
+ --background-status-error-active: var(--color-red-400);
161
+ --background-status-error-active-light: var(--color-red-300);
162
+ --background-status-error-hover-light: var(--color-red-200);
163
+ --background-status-error-idle-light: var(--color-red-100);
164
+ --background-action-disabled-idle: var(--color-gray-300);
165
+ --misc-focus: var(--color-blue-500);
166
+ --misc-logo-background: var(--brand-main);
167
+ --misc-logo-icon: var(--color-ink-absolute-white);
168
+ --misc-logo-text: var(--override-logo-text);
169
+ --misc-notification: var(--color-red-500);
170
+ --misc-scrollbar-idle: var(--color-gray-300);
171
+ --misc-scrollbar-active: var(--color-gray-500);
172
+ --border-general-divider: var(--color-gray-300);
173
+ --border-general-primary: var(--color-gray-800);
174
+ --border-general-secondary: var(--color-gray-600);
175
+ --border-general-tertiary: var(--color-gray-500);
176
+ --border-general-inverse-primary: var(--color-ink-absolute-white);
177
+ --border-general-inverse-secondary: var(--color-gray-400);
178
+ --border-general-inverse-tertiary: var(--color-gray-500);
179
+ --border-general-inverse-divider: var(--color-gray-700);
180
+ --border-action-primary-idle: var(--color-red-400);
181
+ --border-action-primary-hover: var(--color-red-500);
182
+ --border-action-primary-active: var(--color-red-600);
183
+ --border-action-secondary-idle: var(--color-gray-400);
184
+ --border-action-secondary-hover: var(--color-gray-500);
185
+ --border-action-secondary-active: var(--color-gray-600);
186
+ --border-action-highlight-idle: var(--color-blue-400);
187
+ --border-action-highlight-hover: var(--color-blue-500);
188
+ --border-action-highlight-active: var(--color-blue-600);
189
+ --border-action-disabled-idle: var(--color-gray-500);
190
+ --border-status-success-idle: var(--color-green-400);
191
+ --border-status-success-hover: var(--color-green-500);
192
+ --border-status-success-active: var(--color-green-600);
193
+ --border-status-warning-idle: var(--color-yellow-400);
194
+ --border-status-warning-hover: var(--color-yellow-500);
195
+ --border-status-warning-active: var(--color-yellow-600);
196
+ --border-status-info-idle: var(--color-blue-400);
197
+ --border-status-info-hover: var(--color-blue-500);
198
+ --border-status-info-active: var(--color-blue-600);
199
+ --border-status-error-idle: var(--color-red-400);
200
+ --border-status-error-hover: var(--color-red-500);
201
+ --border-status-error-active: var(--color-red-600);
202
+
203
+ /* Dimensions core */
204
+ --size-rem-0-125: 0.125rem;
205
+ --size-rem-0-25: 0.25rem;
206
+ --size-rem-0-5: 0.5rem;
207
+ --size-rem-1: 1rem;
208
+ --size-rem-1-5: 1.5rem;
209
+ --size-rem-2: 2rem;
210
+ --size-rem-3: 3rem;
211
+ --size-rem-4: 4rem;
212
+ --size-rem-5: 5rem;
213
+ --size-rem-6: 6rem;
214
+ --size-rem-7: 7rem;
215
+ --size-rem-8: 8rem;
216
+ --size-rem-9: 9rem;
217
+ --size-rem-10: 10rem;
218
+ --size-rem-11: 11rem;
219
+ --size-rem-12: 12rem;
220
+ --size-rem-2-25: 2.25rem;
221
+ --size-rem-2-5: 2.5rem;
222
+ --size-rem-0-375: 0.375rem;
223
+ --size-rem-0-625: 0.625rem;
224
+ --size-rem-0-75: 0.75rem;
225
+ --size-rem-0-875: 0.875rem;
226
+ --size-rem-1-25: 1.25rem;
227
+ --size-rem-1-75: 1.75rem;
228
+ --size-rem-2-75: 2.75rem;
229
+ --size-rem-3-5: 3.5rem;
230
+ --size-rem-4-5: 4.5rem;
231
+ --size-rem-5-5: 5.5rem;
232
+ --size-rem-3-75: 3.75rem;
233
+ --size-rem-3-25: 3.25rem;
234
+ --size-rem-1-125: 1.125rem;
235
+ --size-rem-0: 0rem;
236
+ --radius-none: var(--size-rem-0);
237
+ --radius-sm: var(--size-rem-0-125);
238
+ --radius-md: var(--size-rem-0-25);
239
+ --radius-base: var(--size-rem-0-375);
240
+ --radius-lg: var(--size-rem-0-5);
241
+ --radius-xl: var(--size-rem-0-75);
242
+ --radius-2xl: var(--size-rem-1);
243
+ --radius-3xl: var(--size-rem-1-5);
244
+ --radius-full: 9999px;
245
+ --grid-desktop-plus-device-width: 120rem;
246
+ --grid-desktop-plus-col-width: 7rem;
247
+ --grid-desktop-plus-col-gutter: 0.5rem;
248
+ --grid-desktop-device-width: 90rem;
249
+ --grid-desktop-col-margin: 6rem;
250
+ --grid-desktop-col-gutter: 0.5rem;
251
+ --grid-tablet-device-width: 60rem;
252
+ --grid-tablet-col-margin: 3rem;
253
+ --grid-tablet-col-gutter: 0.5rem;
254
+ --grid-mobile-device-width: 22.5rem;
255
+ --grid-mobile-col-margin: 1rem;
256
+ --grid-mobile-col-gutter: 0.5rem;
257
+ --grid-mobile-plus-device-width: 24.375rem;
258
+ --grid-mobile-plus-col-margin: 1rem;
259
+ --grid-mobile-plus-col-gutter: 0.5rem;
260
+
261
+ /* Desktop dimensions */
262
+ --layout-section-padding-horizontal: var(--size-rem-6);
263
+ --layout-section-padding-vertical: var(--size-rem-4);
264
+ --layout-section-gap: var(--size-rem-3);
265
+ --layout-comp-1-padding-horizontal: var(--size-rem-3);
266
+ --layout-comp-1-padding-vertical: var(--size-rem-3);
267
+ --layout-comp-1-gap: var(--size-rem-2);
268
+ --layout-comp-2-padding-horizontal: var(--size-rem-1-5);
269
+ --layout-comp-2-padding-vertical: var(--size-rem-1);
270
+ --layout-comp-2-gap: var(--size-rem-1);
271
+
272
+ /* Desktop typography */
273
+ --font-primary: "GT Walsheim", "Inter", system-ui, sans-serif;
274
+ --font-secondary: "Inter", "Inter", system-ui, sans-serif;
275
+ --text-display-extra-large-font-family: var(--font-primary);
276
+ --text-display-extra-large-font-size: var(--size-rem-8);
277
+ --text-display-extra-large-line-height: var(--size-rem-9);
278
+ --text-display-extra-large-font-weight: var(--font-weight-medium);
279
+ --text-display-large-font-family: var(--font-primary);
280
+ --text-display-large-font-weight: var(--font-weight-medium);
281
+ --text-display-large-font-size: var(--size-rem-6);
282
+ --text-display-large-line-height: var(--size-rem-7);
283
+ --text-display-medium-font-family: var(--font-primary);
284
+ --text-display-medium-font-weight: var(--font-weight-medium);
285
+ --text-display-medium-font-size: var(--size-rem-4-5);
286
+ --text-display-medium-line-height: var(--size-rem-5);
287
+ --text-display-small-font-family: var(--font-primary);
288
+ --text-display-small-font-weight: var(--font-weight-medium);
289
+ --text-display-small-font-size: var(--size-rem-3-75);
290
+ --text-display-small-line-height: var(--size-rem-4);
291
+ --text-display-tiny-font-family: var(--font-primary);
292
+ --text-display-tiny-font-weight: var(--font-weight-medium);
293
+ --text-display-tiny-font-size: var(--size-rem-3);
294
+ --text-display-tiny-line-height: var(--size-rem-3-25);
295
+ --text-heading-large-font-family: var(--font-primary);
296
+ --text-heading-large-font-weight: var(--font-weight-medium);
297
+ --text-heading-large-font-size: var(--size-rem-2-25);
298
+ --text-heading-large-line-height: var(--size-rem-2-5);
299
+ --text-heading-medium-font-family: var(--font-primary);
300
+ --text-heading-medium-font-weight: var(--font-weight-medium);
301
+ --text-heading-medium-font-size: var(--size-rem-2);
302
+ --text-heading-medium-line-height: var(--size-rem-2-25);
303
+ --text-heading-small-font-family: var(--font-primary);
304
+ --text-heading-small-font-weight: var(--font-weight-medium);
305
+ --text-heading-small-font-size: var(--size-rem-1-5);
306
+ --text-heading-small-line-height: var(--size-rem-2);
307
+ --text-heading-tiny-font-family: var(--font-primary);
308
+ --text-heading-tiny-font-weight: var(--font-weight-medium);
309
+ --text-heading-tiny-font-size: var(--size-rem-1-25);
310
+ --text-heading-tiny-line-height: var(--size-rem-1-75);
311
+ --text-label-large-font-family: var(--font-primary);
312
+ --text-label-large-font-weight: var(--font-weight-medium);
313
+ --text-label-large-font-size: var(--size-rem-1-125);
314
+ --text-label-large-line-height: var(--size-rem-1-75);
315
+ --text-label-medium-font-family: var(--font-primary);
316
+ --text-label-medium-font-weight: var(--font-weight-medium);
317
+ --text-label-medium-font-size: var(--size-rem-1);
318
+ --text-label-medium-line-height: var(--size-rem-1-5);
319
+ --text-label-small-font-family: var(--font-primary);
320
+ --text-label-small-font-weight: var(--font-weight-medium);
321
+ --text-label-small-font-size: var(--size-rem-0-875);
322
+ --text-label-small-line-height: var(--size-rem-1-25);
323
+ --text-label-tiny-font-family: var(--font-primary);
324
+ --text-label-tiny-font-weight: var(--font-weight-medium);
325
+ --text-label-tiny-font-size: var(--size-rem-0-75);
326
+ --text-label-tiny-line-height: var(--size-rem-1);
327
+ --text-paragraph-large-font-family: var(--font-primary);
328
+ --text-paragraph-large-font-weight: var(--font-weight-regular);
329
+ --text-paragraph-large-font-size: var(--size-rem-1-125);
330
+ --text-paragraph-large-line-height: var(--size-rem-1-75);
331
+ --text-paragraph-base-font-family: var(--font-primary);
332
+ --text-paragraph-base-font-weight: var(--font-weight-regular);
333
+ --text-paragraph-base-font-size: var(--size-rem-1);
334
+ --text-paragraph-base-line-height: var(--size-rem-1-5);
335
+ --text-paragraph-small-font-family: var(--font-primary);
336
+ --text-paragraph-small-font-weight: var(--font-weight-regular);
337
+ --text-paragraph-small-font-size: var(--size-rem-0-875);
338
+ --text-paragraph-small-line-height: var(--size-rem-1-125);
339
+ --text-paragraph-tiny-font-family: var(--font-primary);
340
+ --text-paragraph-tiny-font-weight: var(--font-weight-regular);
341
+ --text-paragraph-tiny-font-size: var(--size-rem-0-75);
342
+ --text-paragraph-tiny-line-height: var(--size-rem-1);
343
+ --font-weight-regular: 400;
344
+ --font-weight-medium: 600;
345
+
346
+ /* Typography shortcuts */
347
+ --text-display-extra-large: var(--size-rem-8)/var(--size-rem-9);
348
+ --text-display-large: var(--size-rem-6)/var(--size-rem-7);
349
+ --text-display-medium: var(--size-rem-4-5)/var(--size-rem-5);
350
+ --text-display-small: var(--size-rem-3-75)/var(--size-rem-4);
351
+ --text-display-tiny: var(--size-rem-3)/var(--size-rem-3-25);
352
+ --text-heading-large: var(--size-rem-2-25)/var(--size-rem-2-5);
353
+ --text-heading-medium: var(--size-rem-2)/var(--size-rem-2-25);
354
+ --text-heading-small: var(--size-rem-1-5)/var(--size-rem-2);
355
+ --text-heading-tiny: var(--size-rem-1-25)/var(--size-rem-1-75);
356
+ --text-label-large: var(--size-rem-1-125)/var(--size-rem-1-75);
357
+ --text-label-medium: var(--size-rem-1)/var(--size-rem-1-5);
358
+ --text-label-small: var(--size-rem-0-875)/var(--size-rem-1-25);
359
+ --text-label-tiny: var(--size-rem-0-75)/var(--size-rem-1);
360
+ --text-paragraph-large: var(--size-rem-1-125)/var(--size-rem-1-75);
361
+ --text-paragraph-base: var(--size-rem-1)/var(--size-rem-1-5);
362
+ --text-paragraph-small: var(--size-rem-0-875)/var(--size-rem-1-125);
363
+ --text-paragraph-tiny: var(--size-rem-0-75)/var(--size-rem-1);
364
+ }
365
+
366
+ .dark {
367
+ /* Core palette (dark) */
368
+ --color-ink-base-white: #000000;
369
+ --color-ink-base-black: #ffffff;
370
+ --color-ink-absolute-white: #ffffff;
371
+ --color-ink-absolute-black: #000000;
372
+ --color-gray-50: #030712;
373
+ --color-gray-100: #111827;
374
+ --color-gray-200: #1f2937;
375
+ --color-gray-300: #374151;
376
+ --color-gray-400: #4b5563;
377
+ --color-gray-500: #6b7280;
378
+ --color-gray-600: #9ca3af;
379
+ --color-gray-700: #d1d5db;
380
+ --color-gray-800: #e5e7eb;
381
+ --color-gray-900: #f3f4f6;
382
+ --color-gray-950: #f9fafb;
383
+ --color-red-50: #2d0909;
384
+ --color-red-100: #551212;
385
+ --color-red-200: #861c1c;
386
+ --color-red-300: #b32929;
387
+ --color-red-400: #db4444;
388
+ --color-red-500: #f74d4d;
389
+ --color-red-600: #fc6868;
390
+ --color-red-700: #fea6a6;
391
+ --color-red-800: #feeded;
392
+ --color-red-900: #fbeeee;
393
+ --color-red-950: #fef6f6;
394
+ --color-green-50: #052524;
395
+ --color-green-100: #09312f;
396
+ --color-green-200: #093f3b;
397
+ --color-green-300: #035a55;
398
+ --color-green-400: #09857e;
399
+ --color-green-500: #1fafa6;
400
+ --color-green-600: #63cdc6;
401
+ --color-green-700: #7fdad4;
402
+ --color-green-800: #b2eae7;
403
+ --color-green-900: #ddf5f4;
404
+ --color-green-950: #effbfa;
405
+ --color-yellow-50: #2d1c02;
406
+ --color-yellow-100: #4e3105;
407
+ --color-yellow-200: #6b4610;
408
+ --color-yellow-300: #aa7424;
409
+ --color-yellow-400: #dc9328;
410
+ --color-yellow-500: #fbb041;
411
+ --color-yellow-600: #fbc068;
412
+ --color-yellow-700: #ffdba4;
413
+ --color-yellow-800: #ffe6c2;
414
+ --color-yellow-900: #fff3e2;
415
+ --color-yellow-950: #fff8ee;
416
+ --color-blue-50: #061f44;
417
+ --color-blue-100: #0c326c;
418
+ --color-blue-200: #114799;
419
+ --color-blue-300: #0d57c6;
420
+ --color-blue-400: #2b7bf4;
421
+ --color-blue-500: #478efa;
422
+ --color-blue-600: #73abff;
423
+ --color-blue-700: #9fc5ff;
424
+ --color-blue-800: #d0e3ff;
425
+ --color-blue-900: #e7f0fe;
426
+ --color-blue-950: #f2f6fd;
427
+ --override-logo-text: var(--color-ink-absolute-white);
428
+ --_system-_background-primary: var(--color-ink-base-white);
429
+ --_system-_content-primary: var(--content-general-primary);
430
+ --_system-_content-secondary: var(--content-general-tertiary);
431
+ --_system-_content-link: var(--content-action-link-idle);
432
+ --_system-_note-positive: var(--color-ink-base-black);
433
+ --_system-_note-negative: var(--color-ink-base-white);
434
+ --_system-_note-hook: var(--color-gray-500);
435
+ --_system-_background-secondary: var(--color-gray-100);
436
+ --brand-main: #f74d4d;
437
+ }
438
+
439
+ @media (max-width: 767px) {
440
+ @theme {
441
+ /* Mobile dimensions */
442
+ --layout-section-padding-horizontal: var(--size-rem-1);
443
+ --layout-section-padding-vertical: var(--size-rem-3);
444
+ --layout-section-gap: var(--size-rem-2);
445
+ --layout-comp-1-padding-horizontal: var(--size-rem-1);
446
+ --layout-comp-1-padding-vertical: var(--size-rem-1-5);
447
+ --layout-comp-1-gap: var(--size-rem-1);
448
+ --layout-comp-2-padding-horizontal: var(--size-rem-1);
449
+ --layout-comp-2-padding-vertical: var(--size-rem-1);
450
+ --layout-comp-2-gap: var(--size-rem-1);
451
+ /* Mobile typography */
452
+ --font-primary: "GT Walsheim", "Inter", system-ui, sans-serif;
453
+ --font-secondary: "Inter", "Inter", system-ui, sans-serif;
454
+ --text-display-extra-large-font-family: var(--font-primary);
455
+ --text-display-extra-large-font-size: var(--size-rem-8);
456
+ --text-display-extra-large-line-height: var(--size-rem-9);
457
+ --text-display-extra-large-font-weight: var(--font-weight-medium);
458
+ --text-display-large-font-family: var(--font-primary);
459
+ --text-display-large-font-weight: var(--font-weight-medium);
460
+ --text-display-large-font-size: var(--size-rem-3-5);
461
+ --text-display-large-line-height: var(--size-rem-4);
462
+ --text-display-medium-font-family: var(--font-primary);
463
+ --text-display-medium-font-weight: var(--font-weight-medium);
464
+ --text-display-medium-font-size: var(--size-rem-3-25);
465
+ --text-display-medium-line-height: var(--size-rem-3-5);
466
+ --text-display-small-font-family: var(--font-primary);
467
+ --text-display-small-font-weight: var(--font-weight-medium);
468
+ --text-display-small-font-size: var(--size-rem-2-5);
469
+ --text-display-small-line-height: var(--size-rem-2-75);
470
+ --text-display-tiny-font-family: var(--font-primary);
471
+ --text-display-tiny-font-weight: var(--font-weight-medium);
472
+ --text-display-tiny-font-size: var(--size-rem-2-25);
473
+ --text-display-tiny-line-height: var(--size-rem-2-5);
474
+ --text-heading-large-font-family: var(--font-primary);
475
+ --text-heading-large-font-weight: var(--font-weight-medium);
476
+ --text-heading-large-font-size: var(--size-rem-2-25);
477
+ --text-heading-large-line-height: var(--size-rem-2-5);
478
+ --text-heading-medium-font-family: var(--font-primary);
479
+ --text-heading-medium-font-weight: var(--font-weight-medium);
480
+ --text-heading-medium-font-size: var(--size-rem-2);
481
+ --text-heading-medium-line-height: var(--size-rem-2-25);
482
+ --text-heading-small-font-family: var(--font-primary);
483
+ --text-heading-small-font-weight: var(--font-weight-medium);
484
+ --text-heading-small-font-size: var(--size-rem-1-5);
485
+ --text-heading-small-line-height: var(--size-rem-2);
486
+ --text-heading-tiny-font-family: var(--font-primary);
487
+ --text-heading-tiny-font-weight: var(--font-weight-medium);
488
+ --text-heading-tiny-font-size: var(--size-rem-1-25);
489
+ --text-heading-tiny-line-height: var(--size-rem-1-75);
490
+ --text-label-large-font-family: var(--font-primary);
491
+ --text-label-large-font-weight: var(--font-weight-medium);
492
+ --text-label-large-font-size: var(--size-rem-1-125);
493
+ --text-label-large-line-height: var(--size-rem-1-75);
494
+ --text-label-medium-font-family: var(--font-primary);
495
+ --text-label-medium-font-weight: var(--font-weight-medium);
496
+ --text-label-medium-font-size: var(--size-rem-1);
497
+ --text-label-medium-line-height: var(--size-rem-1-5);
498
+ --text-label-small-font-family: var(--font-primary);
499
+ --text-label-small-font-weight: var(--font-weight-medium);
500
+ --text-label-small-font-size: var(--size-rem-0-875);
501
+ --text-label-small-line-height: var(--size-rem-1-25);
502
+ --text-label-tiny-font-family: var(--font-primary);
503
+ --text-label-tiny-font-weight: var(--font-weight-medium);
504
+ --text-label-tiny-font-size: var(--size-rem-0-75);
505
+ --text-label-tiny-line-height: var(--size-rem-1);
506
+ --text-paragraph-large-font-family: var(--font-primary);
507
+ --text-paragraph-large-font-weight: var(--font-weight-regular);
508
+ --text-paragraph-large-font-size: var(--size-rem-1-125);
509
+ --text-paragraph-large-line-height: var(--size-rem-1-75);
510
+ --text-paragraph-base-font-family: var(--font-primary);
511
+ --text-paragraph-base-font-weight: var(--font-weight-regular);
512
+ --text-paragraph-base-font-size: var(--size-rem-1);
513
+ --text-paragraph-base-line-height: var(--size-rem-1-5);
514
+ --text-paragraph-small-font-family: var(--font-primary);
515
+ --text-paragraph-small-font-weight: var(--font-weight-regular);
516
+ --text-paragraph-small-font-size: var(--size-rem-0-875);
517
+ --text-paragraph-small-line-height: var(--size-rem-1-125);
518
+ --text-paragraph-tiny-font-family: var(--font-primary);
519
+ --text-paragraph-tiny-font-weight: var(--font-weight-regular);
520
+ --text-paragraph-tiny-font-size: var(--size-rem-0-75);
521
+ --text-paragraph-tiny-line-height: var(--size-rem-1);
522
+ --font-weight-regular: 400;
523
+ --font-weight-medium: 600;
524
+ /* Mobile text shortcuts */
525
+ --text-display-extra-large: var(--size-rem-8)/var(--size-rem-9);
526
+ --text-display-large: var(--size-rem-3-5)/var(--size-rem-4);
527
+ --text-display-medium: var(--size-rem-3-25)/var(--size-rem-3-5);
528
+ --text-display-small: var(--size-rem-2-5)/var(--size-rem-2-75);
529
+ --text-display-tiny: var(--size-rem-2-25)/var(--size-rem-2-5);
530
+ --text-heading-large: var(--size-rem-2-25)/var(--size-rem-2-5);
531
+ --text-heading-medium: var(--size-rem-2)/var(--size-rem-2-25);
532
+ --text-heading-small: var(--size-rem-1-5)/var(--size-rem-2);
533
+ --text-heading-tiny: var(--size-rem-1-25)/var(--size-rem-1-75);
534
+ --text-label-large: var(--size-rem-1-125)/var(--size-rem-1-75);
535
+ --text-label-medium: var(--size-rem-1)/var(--size-rem-1-5);
536
+ --text-label-small: var(--size-rem-0-875)/var(--size-rem-1-25);
537
+ --text-label-tiny: var(--size-rem-0-75)/var(--size-rem-1);
538
+ --text-paragraph-large: var(--size-rem-1-125)/var(--size-rem-1-75);
539
+ --text-paragraph-base: var(--size-rem-1)/var(--size-rem-1-5);
540
+ --text-paragraph-small: var(--size-rem-0-875)/var(--size-rem-1-125);
541
+ --text-paragraph-tiny: var(--size-rem-0-75)/var(--size-rem-1);
542
+ }
543
+ }
package/package.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "name": "@hotelcard/ui",
3
+ "version": "1.0.0-rc.0",
4
+ "type": "module",
5
+ "description": "Shared UI components for HotelCard website and mobile app",
6
+ "main": "dist/index.cjs",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": {
12
+ "types": "./dist/index.d.ts",
13
+ "default": "./dist/index.js"
14
+ },
15
+ "require": {
16
+ "types": "./dist/index.d.ts",
17
+ "default": "./dist/index.cjs"
18
+ }
19
+ },
20
+ "./styles.css": "./dist/index.css",
21
+ "./tokens.css": "./dist/tokens.css"
22
+ },
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "sideEffects": [
27
+ "**/*.css"
28
+ ],
29
+ "scripts": {
30
+ "build": "vite build && cp src/styles/tokens.css dist/tokens.css",
31
+ "dev": "vite build --watch",
32
+ "clean": "rm -rf dist"
33
+ },
34
+ "dependencies": {
35
+ "date-fns": "^3.0.0"
36
+ },
37
+ "peerDependencies": {
38
+ "react": "^18.0.0",
39
+ "react-dom": "^18.0.0",
40
+ "react-i18next": "^14.0.0 || ^15.0.0 || ^16.0.0"
41
+ },
42
+ "devDependencies": {
43
+ "@types/react": "^18.0.0",
44
+ "@types/react-dom": "^18.0.0",
45
+ "@vitejs/plugin-react": "^4.3.0",
46
+ "react": "^18.0.0",
47
+ "react-dom": "^18.0.0",
48
+ "typescript": "^5.3.0",
49
+ "vite": "^6.0.0",
50
+ "vite-plugin-dts": "^4.0.0"
51
+ },
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "repository": {
56
+ "type": "git",
57
+ "url": "https://bitbucket.org/hotelcardag/hotelcard-ui",
58
+ "directory": "packages/ui"
59
+ },
60
+ "homepage": "https://www.npmjs.com/package/@hotelcard/ui",
61
+ "author": "HotelCard AG",
62
+ "license": "MIT",
63
+ "keywords": [
64
+ "hotelcard",
65
+ "ui",
66
+ "react",
67
+ "components"
68
+ ]
69
+ }