@hotelcard/ui 0.0.7 → 0.0.8

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 (2) hide show
  1. package/dist/tokens.css +380 -0
  2. package/package.json +10 -10
package/dist/tokens.css ADDED
@@ -0,0 +1,380 @@
1
+ /* HotelCard Design Tokens
2
+ * Plain CSS variables for use with @hotelcard/ui components.
3
+ * Import: import '@hotelcard/ui/dist/tokens.css'
4
+ */
5
+
6
+ :root {
7
+ /* Core palette */
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
+ --brand-main: #d04343;
68
+
69
+ /* Semantic colors - Content */
70
+ --content-general-primary: var(--color-gray-800);
71
+ --content-general-secondary: var(--color-gray-600);
72
+ --content-general-tertiary: var(--color-gray-500);
73
+ --content-general-inverse-primary: var(--color-ink-absolute-white);
74
+ --content-general-inverse-secondary: var(--color-gray-400);
75
+ --content-general-inverse-tertiary: var(--color-gray-500);
76
+ --content-general-inverse-divider: var(--color-gray-600);
77
+ --content-action-primary-inverse-idle: var(--color-ink-base-white);
78
+ --content-action-primary-inverse-hover: var(--color-ink-base-white);
79
+ --content-action-primary-inverse-active: var(--color-ink-base-white);
80
+ --content-action-primary-idle: var(--color-red-500);
81
+ --content-action-primary-hover: var(--color-red-600);
82
+ --content-action-primary-active: var(--color-red-700);
83
+ --content-action-secondary-idle: var(--color-gray-800);
84
+ --content-action-secondary-hover: var(--color-gray-900);
85
+ --content-action-secondary-active: var(--color-gray-950);
86
+ --content-action-highlight-inverse-idle: var(--color-ink-base-white);
87
+ --content-action-highlight-inverse-hover: var(--color-ink-base-white);
88
+ --content-action-highlight-inverse-active: var(--color-ink-base-white);
89
+ --content-action-highlight-idle: var(--color-blue-500);
90
+ --content-action-highlight-hover: var(--color-blue-600);
91
+ --content-action-highlight-active: var(--color-blue-700);
92
+ --content-status-success-idle: var(--color-green-800);
93
+ --content-status-success-hover: var(--color-green-900);
94
+ --content-status-success-active: var(--color-green-950);
95
+ --content-status-success-idle-light: var(--color-green-600);
96
+ --content-status-warning-idle: var(--color-yellow-800);
97
+ --content-status-warning-hover: var(--color-yellow-900);
98
+ --content-status-warning-active: var(--color-yellow-950);
99
+ --content-status-warning-idle-light: var(--color-yellow-600);
100
+ --content-status-info-idle: var(--color-blue-800);
101
+ --content-status-info-hover: var(--color-blue-900);
102
+ --content-status-info-active: var(--color-blue-950);
103
+ --content-status-info-idle-light: var(--color-blue-600);
104
+ --content-status-error-idle: var(--color-red-800);
105
+ --content-status-error-hover: var(--color-red-900);
106
+ --content-status-error-active: var(--color-red-950);
107
+ --content-status-error-idle-light: var(--color-red-500);
108
+ --content-action-disabled-idle: var(--color-gray-500);
109
+ --content-action-link-idle: var(--color-blue-800);
110
+ --content-action-link-hover: var(--color-blue-900);
111
+ --content-action-link-active: var(--color-blue-950);
112
+
113
+ /* Semantic colors - Background */
114
+ --background-general-primary: var(--color-ink-base-white);
115
+ --background-general-secondary: var(--color-gray-200);
116
+ --background-general-tertiary: var(--color-blue-100);
117
+ --background-general-inverse-primary: var(--color-gray-800);
118
+ --background-general-inverse-secondary: var(--color-gray-900);
119
+ --background-general-inverse-tertiary: var(--color-gray-950);
120
+ --background-general-secondary-light: var(--color-gray-100);
121
+ --background-action-primary-idle: var(--color-red-500);
122
+ --background-action-primary-hover: var(--color-red-600);
123
+ --background-action-primary-active: var(--color-red-700);
124
+ --background-action-secondary-idle: var(--color-ink-base-white);
125
+ --background-action-secondary-hover: var(--color-gray-200);
126
+ --background-action-secondary-active: var(--color-gray-300);
127
+ --background-action-highlight-idle: var(--color-blue-500);
128
+ --background-action-highlight-hover: var(--color-blue-600);
129
+ --background-action-highlight-active: var(--color-blue-700);
130
+ --background-action-highlight-idle-light: var(--color-ink-base-white);
131
+ --background-action-highlight-hover-light: var(--color-blue-100);
132
+ --background-action-highlight-active-light: var(--color-blue-200);
133
+ --background-status-success-idle: var(--color-green-200);
134
+ --background-status-success-hover: var(--color-green-300);
135
+ --background-status-success-active: var(--color-green-400);
136
+ --background-status-success-idle-light: var(--color-green-100);
137
+ --background-status-success-hover-light: var(--color-green-200);
138
+ --background-status-success-active-light: var(--color-green-300);
139
+ --background-status-warning-idle: var(--color-yellow-200);
140
+ --background-status-warning-hover: var(--color-yellow-300);
141
+ --background-status-warning-active: var(--color-yellow-400);
142
+ --background-status-warning-idle-light: var(--color-yellow-100);
143
+ --background-status-warning-hover-light: var(--color-yellow-200);
144
+ --background-status-warning-active-light: var(--color-yellow-300);
145
+ --background-status-info-idle: var(--color-blue-200);
146
+ --background-status-info-hover: var(--color-blue-300);
147
+ --background-status-info-active: var(--color-blue-400);
148
+ --background-status-info-idle-light: var(--color-blue-100);
149
+ --background-status-info-hover-light: var(--color-blue-200);
150
+ --background-status-info-active-light: var(--color-blue-300);
151
+ --background-status-error-idle: var(--color-red-200);
152
+ --background-status-error-hover: var(--color-red-300);
153
+ --background-status-error-active: var(--color-red-400);
154
+ --background-status-error-idle-light: var(--color-red-100);
155
+ --background-status-error-hover-light: var(--color-red-200);
156
+ --background-status-error-active-light: var(--color-red-300);
157
+ --background-action-disabled-idle: var(--color-gray-300);
158
+
159
+ /* Semantic colors - Border */
160
+ --border-general-divider: var(--color-gray-300);
161
+ --border-general-primary: var(--color-gray-800);
162
+ --border-general-secondary: var(--color-gray-600);
163
+ --border-general-tertiary: var(--color-gray-500);
164
+ --border-general-inverse-primary: var(--color-ink-absolute-white);
165
+ --border-general-inverse-secondary: var(--color-gray-400);
166
+ --border-general-inverse-tertiary: var(--color-gray-500);
167
+ --border-general-inverse-divider: var(--color-gray-700);
168
+ --border-action-primary-idle: var(--color-red-400);
169
+ --border-action-primary-hover: var(--color-red-500);
170
+ --border-action-primary-active: var(--color-red-600);
171
+ --border-action-secondary-idle: var(--color-gray-400);
172
+ --border-action-secondary-hover: var(--color-gray-500);
173
+ --border-action-secondary-active: var(--color-gray-600);
174
+ --border-action-highlight-idle: var(--color-blue-400);
175
+ --border-action-highlight-hover: var(--color-blue-500);
176
+ --border-action-highlight-active: var(--color-blue-600);
177
+ --border-action-disabled-idle: var(--color-gray-500);
178
+ --border-status-success-idle: var(--color-green-400);
179
+ --border-status-success-hover: var(--color-green-500);
180
+ --border-status-success-active: var(--color-green-600);
181
+ --border-status-warning-idle: var(--color-yellow-400);
182
+ --border-status-warning-hover: var(--color-yellow-500);
183
+ --border-status-warning-active: var(--color-yellow-600);
184
+ --border-status-info-idle: var(--color-blue-400);
185
+ --border-status-info-hover: var(--color-blue-500);
186
+ --border-status-info-active: var(--color-blue-600);
187
+ --border-status-error-idle: var(--color-red-400);
188
+ --border-status-error-hover: var(--color-red-500);
189
+ --border-status-error-active: var(--color-red-600);
190
+
191
+ /* Misc */
192
+ --misc-focus: var(--color-blue-500);
193
+ --misc-logo-background: var(--brand-main);
194
+ --misc-logo-icon: var(--color-ink-absolute-white);
195
+ --misc-logo-text: var(--color-gray-800);
196
+ --misc-notification: var(--color-red-500);
197
+ --misc-scrollbar-idle: var(--color-gray-300);
198
+ --misc-scrollbar-active: var(--color-gray-500);
199
+
200
+ /* Dimensions */
201
+ --size-rem-0: 0rem;
202
+ --size-rem-0-125: 0.125rem;
203
+ --size-rem-0-25: 0.25rem;
204
+ --size-rem-0-375: 0.375rem;
205
+ --size-rem-0-5: 0.5rem;
206
+ --size-rem-0-625: 0.625rem;
207
+ --size-rem-0-75: 0.75rem;
208
+ --size-rem-0-875: 0.875rem;
209
+ --size-rem-1: 1rem;
210
+ --size-rem-1-125: 1.125rem;
211
+ --size-rem-1-25: 1.25rem;
212
+ --size-rem-1-5: 1.5rem;
213
+ --size-rem-1-75: 1.75rem;
214
+ --size-rem-2: 2rem;
215
+ --size-rem-2-25: 2.25rem;
216
+ --size-rem-2-5: 2.5rem;
217
+ --size-rem-2-75: 2.75rem;
218
+ --size-rem-3: 3rem;
219
+ --size-rem-3-25: 3.25rem;
220
+ --size-rem-3-5: 3.5rem;
221
+ --size-rem-3-75: 3.75rem;
222
+ --size-rem-4: 4rem;
223
+ --size-rem-4-5: 4.5rem;
224
+ --size-rem-5: 5rem;
225
+ --size-rem-5-5: 5.5rem;
226
+ --size-rem-6: 6rem;
227
+ --size-rem-7: 7rem;
228
+ --size-rem-8: 8rem;
229
+ --size-rem-9: 9rem;
230
+ --size-rem-10: 10rem;
231
+ --size-rem-11: 11rem;
232
+ --size-rem-12: 12rem;
233
+
234
+ /* Border radius */
235
+ --radius-none: var(--size-rem-0);
236
+ --radius-sm: var(--size-rem-0-125);
237
+ --radius-md: var(--size-rem-0-25);
238
+ --radius-base: var(--size-rem-0-375);
239
+ --radius-lg: var(--size-rem-0-5);
240
+ --radius-xl: var(--size-rem-0-75);
241
+ --radius-2xl: var(--size-rem-1);
242
+ --radius-3xl: var(--size-rem-1-5);
243
+ --radius-full: 9999px;
244
+
245
+ /* Grid */
246
+ --grid-desktop-plus-device-width: 120rem;
247
+ --grid-desktop-plus-col-width: 7rem;
248
+ --grid-desktop-plus-col-gutter: 0.5rem;
249
+ --grid-desktop-device-width: 90rem;
250
+ --grid-desktop-col-margin: 6rem;
251
+ --grid-desktop-col-gutter: 0.5rem;
252
+ --grid-tablet-device-width: 60rem;
253
+ --grid-tablet-col-margin: 3rem;
254
+ --grid-tablet-col-gutter: 0.5rem;
255
+ --grid-mobile-device-width: 22.5rem;
256
+ --grid-mobile-col-margin: 1rem;
257
+ --grid-mobile-col-gutter: 0.5rem;
258
+ --grid-mobile-plus-device-width: 24.375rem;
259
+ --grid-mobile-plus-col-margin: 1rem;
260
+ --grid-mobile-plus-col-gutter: 0.5rem;
261
+
262
+ /* Layout - Desktop defaults */
263
+ --layout-section-padding-horizontal: var(--size-rem-6);
264
+ --layout-section-padding-vertical: var(--size-rem-4);
265
+ --layout-section-gap: var(--size-rem-3);
266
+ --layout-comp-1-padding-horizontal: var(--size-rem-3);
267
+ --layout-comp-1-padding-vertical: var(--size-rem-3);
268
+ --layout-comp-1-gap: var(--size-rem-2);
269
+ --layout-comp-2-padding-horizontal: var(--size-rem-1-5);
270
+ --layout-comp-2-padding-vertical: var(--size-rem-1);
271
+ --layout-comp-2-gap: var(--size-rem-1);
272
+
273
+ /* Typography */
274
+ --font-primary: "GT Walsheim", "Inter", system-ui, sans-serif;
275
+ --font-secondary: "Inter", system-ui, sans-serif;
276
+ --font-weight-regular: 400;
277
+ --font-weight-medium: 600;
278
+
279
+ /* Display typography */
280
+ --text-display-extra-large-font-family: var(--font-primary);
281
+ --text-display-extra-large-font-size: var(--size-rem-8);
282
+ --text-display-extra-large-line-height: var(--size-rem-9);
283
+ --text-display-extra-large-font-weight: var(--font-weight-medium);
284
+ --text-display-large-font-family: var(--font-primary);
285
+ --text-display-large-font-weight: var(--font-weight-medium);
286
+ --text-display-large-font-size: var(--size-rem-6);
287
+ --text-display-large-line-height: var(--size-rem-7);
288
+ --text-display-medium-font-family: var(--font-primary);
289
+ --text-display-medium-font-weight: var(--font-weight-medium);
290
+ --text-display-medium-font-size: var(--size-rem-4-5);
291
+ --text-display-medium-line-height: var(--size-rem-5);
292
+ --text-display-small-font-family: var(--font-primary);
293
+ --text-display-small-font-weight: var(--font-weight-medium);
294
+ --text-display-small-font-size: var(--size-rem-3-75);
295
+ --text-display-small-line-height: var(--size-rem-4);
296
+ --text-display-tiny-font-family: var(--font-primary);
297
+ --text-display-tiny-font-weight: var(--font-weight-medium);
298
+ --text-display-tiny-font-size: var(--size-rem-3);
299
+ --text-display-tiny-line-height: var(--size-rem-3-25);
300
+
301
+ /* Heading typography */
302
+ --text-heading-large-font-family: var(--font-primary);
303
+ --text-heading-large-font-weight: var(--font-weight-medium);
304
+ --text-heading-large-font-size: var(--size-rem-2-25);
305
+ --text-heading-large-line-height: var(--size-rem-2-5);
306
+ --text-heading-medium-font-family: var(--font-primary);
307
+ --text-heading-medium-font-weight: var(--font-weight-medium);
308
+ --text-heading-medium-font-size: var(--size-rem-2);
309
+ --text-heading-medium-line-height: var(--size-rem-2-25);
310
+ --text-heading-small-font-family: var(--font-primary);
311
+ --text-heading-small-font-weight: var(--font-weight-medium);
312
+ --text-heading-small-font-size: var(--size-rem-1-5);
313
+ --text-heading-small-line-height: var(--size-rem-2);
314
+ --text-heading-tiny-font-family: var(--font-primary);
315
+ --text-heading-tiny-font-weight: var(--font-weight-medium);
316
+ --text-heading-tiny-font-size: var(--size-rem-1-25);
317
+ --text-heading-tiny-line-height: var(--size-rem-1-75);
318
+
319
+ /* Label typography */
320
+ --text-label-large-font-family: var(--font-primary);
321
+ --text-label-large-font-weight: var(--font-weight-medium);
322
+ --text-label-large-font-size: var(--size-rem-1-125);
323
+ --text-label-large-line-height: var(--size-rem-1-75);
324
+ --text-label-medium-font-family: var(--font-primary);
325
+ --text-label-medium-font-weight: var(--font-weight-medium);
326
+ --text-label-medium-font-size: var(--size-rem-1);
327
+ --text-label-medium-line-height: var(--size-rem-1-5);
328
+ --text-label-small-font-family: var(--font-primary);
329
+ --text-label-small-font-weight: var(--font-weight-medium);
330
+ --text-label-small-font-size: var(--size-rem-0-875);
331
+ --text-label-small-line-height: var(--size-rem-1-25);
332
+ --text-label-tiny-font-family: var(--font-primary);
333
+ --text-label-tiny-font-weight: var(--font-weight-medium);
334
+ --text-label-tiny-font-size: var(--size-rem-0-75);
335
+ --text-label-tiny-line-height: var(--size-rem-1);
336
+
337
+ /* Paragraph typography */
338
+ --text-paragraph-large-font-family: var(--font-primary);
339
+ --text-paragraph-large-font-weight: var(--font-weight-regular);
340
+ --text-paragraph-large-font-size: var(--size-rem-1-125);
341
+ --text-paragraph-large-line-height: var(--size-rem-1-75);
342
+ --text-paragraph-base-font-family: var(--font-primary);
343
+ --text-paragraph-base-font-weight: var(--font-weight-regular);
344
+ --text-paragraph-base-font-size: var(--size-rem-1);
345
+ --text-paragraph-base-line-height: var(--size-rem-1-5);
346
+ --text-paragraph-small-font-family: var(--font-primary);
347
+ --text-paragraph-small-font-weight: var(--font-weight-regular);
348
+ --text-paragraph-small-font-size: var(--size-rem-0-875);
349
+ --text-paragraph-small-line-height: var(--size-rem-1-125);
350
+ --text-paragraph-tiny-font-family: var(--font-primary);
351
+ --text-paragraph-tiny-font-weight: var(--font-weight-regular);
352
+ --text-paragraph-tiny-font-size: var(--size-rem-0-75);
353
+ --text-paragraph-tiny-line-height: var(--size-rem-1);
354
+ }
355
+
356
+ /* Mobile overrides */
357
+ @media (max-width: 767px) {
358
+ :root {
359
+ /* Mobile layout */
360
+ --layout-section-padding-horizontal: var(--size-rem-1);
361
+ --layout-section-padding-vertical: var(--size-rem-3);
362
+ --layout-section-gap: var(--size-rem-2);
363
+ --layout-comp-1-padding-horizontal: var(--size-rem-1);
364
+ --layout-comp-1-padding-vertical: var(--size-rem-1-5);
365
+ --layout-comp-1-gap: var(--size-rem-1);
366
+ --layout-comp-2-padding-horizontal: var(--size-rem-1);
367
+ --layout-comp-2-padding-vertical: var(--size-rem-1);
368
+ --layout-comp-2-gap: var(--size-rem-1);
369
+
370
+ /* Mobile typography */
371
+ --text-display-large-font-size: var(--size-rem-3-5);
372
+ --text-display-large-line-height: var(--size-rem-4);
373
+ --text-display-medium-font-size: var(--size-rem-3-25);
374
+ --text-display-medium-line-height: var(--size-rem-3-5);
375
+ --text-display-small-font-size: var(--size-rem-2-5);
376
+ --text-display-small-line-height: var(--size-rem-2-75);
377
+ --text-display-tiny-font-size: var(--size-rem-2-25);
378
+ --text-display-tiny-line-height: var(--size-rem-2-5);
379
+ }
380
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hotelcard/ui",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "description": "HotelCard shared UI components",
6
6
  "main": "dist/index.cjs",
@@ -17,7 +17,8 @@
17
17
  "default": "./dist/index.cjs"
18
18
  }
19
19
  },
20
- "./dist/index.css": "./dist/index.css"
20
+ "./dist/index.css": "./dist/index.css",
21
+ "./dist/tokens.css": "./dist/tokens.css"
21
22
  },
22
23
  "files": [
23
24
  "dist"
@@ -25,12 +26,6 @@
25
26
  "sideEffects": [
26
27
  "**/*.css"
27
28
  ],
28
- "scripts": {
29
- "build": "tsup src/index.ts --format cjs,esm --dts --external react",
30
- "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
31
- "clean": "rm -rf dist",
32
- "prepublishOnly": "pnpm build"
33
- },
34
29
  "dependencies": {
35
30
  "date-fns": "^3.0.0"
36
31
  },
@@ -61,5 +56,10 @@
61
56
  "ui",
62
57
  "react",
63
58
  "components"
64
- ]
65
- }
59
+ ],
60
+ "scripts": {
61
+ "build": "tsup src/index.ts --format cjs,esm --dts --external react && cp src/styles/tokens.css dist/tokens.css",
62
+ "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
63
+ "clean": "rm -rf dist"
64
+ }
65
+ }