@chekinapp/tokens 0.2.15 → 1.0.0-beta.1
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/package.json +1 -1
- package/src/base/colors.css +26 -0
- package/src/base/components.css +158 -7
- package/src/base/radii.css +6 -0
- package/src/base/shadows.css +8 -0
- package/src/surfaces/guestapp.css +106 -4
- package/src/tokens.json +57 -1
package/package.json
CHANGED
package/src/base/colors.css
CHANGED
|
@@ -26,8 +26,11 @@
|
|
|
26
26
|
--chekin-blue-400: #5f5cf0;
|
|
27
27
|
--chekin-blue-500: #385bf8; /* brand DEFAULT */
|
|
28
28
|
--chekin-blue-600: #294df1;
|
|
29
|
+
--chekin-blue-650: #2e46c8; /* saturated mid (hero gradient stop) */
|
|
29
30
|
--chekin-blue-700: #23235d;
|
|
30
31
|
--chekin-blue-900: #161643; /* navy ink */
|
|
32
|
+
--chekin-blue-950: #15153f; /* deepest navy (hero gradient start) */
|
|
33
|
+
--chekin-blue-light: #8ca5ff; /* soft brand (gradient endpoint / accent) */
|
|
31
34
|
|
|
32
35
|
/* Blue surface tints (near-white, hue-leaning) */
|
|
33
36
|
--chekin-blue-surface-50: #f4f4fd; /* promo lavender */
|
|
@@ -90,6 +93,10 @@
|
|
|
90
93
|
--chekin-red-soft: #f84b7a; /* inline validation error */
|
|
91
94
|
--chekin-red-500: #df0044; /* brand red / danger DEFAULT */
|
|
92
95
|
|
|
96
|
+
/* ── Orange (weather / decorative gradients) ───────────────────────── */
|
|
97
|
+
--chekin-orange-light: #ffb872;
|
|
98
|
+
--chekin-orange: #ff7a58;
|
|
99
|
+
|
|
93
100
|
/* ── Rating gradient (data viz, 7-step worst→best) ─────────────────── */
|
|
94
101
|
--chekin-rating-0: var(--chekin-red-500);
|
|
95
102
|
--chekin-rating-1: #ff673c;
|
|
@@ -142,6 +149,7 @@
|
|
|
142
149
|
--chekin-color-brand: var(--chekin-blue-500);
|
|
143
150
|
--chekin-color-brand-hover: var(--chekin-blue-300);
|
|
144
151
|
--chekin-color-brand-navy: var(--chekin-blue-900);
|
|
152
|
+
--chekin-color-brand-light: var(--chekin-blue-light);
|
|
145
153
|
--chekin-color-brand-red: var(--chekin-red-500);
|
|
146
154
|
--primary: var(--chekin-color-brand);
|
|
147
155
|
|
|
@@ -190,6 +198,24 @@
|
|
|
190
198
|
--chekin-info: var(--chekin-blue-500);
|
|
191
199
|
--chekin-info-surface: var(--chekin-blue-50);
|
|
192
200
|
|
|
201
|
+
/* ── Gradients (composed from primitives) ──────────────────────────── */
|
|
202
|
+
--chekin-gradient-hero: linear-gradient(
|
|
203
|
+
135deg,
|
|
204
|
+
var(--chekin-blue-950) 0%,
|
|
205
|
+
var(--chekin-blue-700) 44%,
|
|
206
|
+
var(--chekin-blue-650) 100%
|
|
207
|
+
);
|
|
208
|
+
--chekin-gradient-brand: linear-gradient(
|
|
209
|
+
135deg,
|
|
210
|
+
var(--chekin-blue-500),
|
|
211
|
+
var(--chekin-blue-light)
|
|
212
|
+
);
|
|
213
|
+
--chekin-gradient-weather: linear-gradient(
|
|
214
|
+
135deg,
|
|
215
|
+
var(--chekin-orange-light),
|
|
216
|
+
var(--chekin-orange)
|
|
217
|
+
);
|
|
218
|
+
|
|
193
219
|
--background-main: var(--chekin-surface-page);
|
|
194
220
|
--empty-field-background: var(--chekin-surface-input-empty);
|
|
195
221
|
|
package/src/base/components.css
CHANGED
|
@@ -66,6 +66,84 @@
|
|
|
66
66
|
--button-link-bg: transparent;
|
|
67
67
|
--button-link-font-weight: var(--chekin-font-weight-semibold);
|
|
68
68
|
|
|
69
|
+
/* Dark variant (navy solid — redesign sidebar / hero CTAs) */
|
|
70
|
+
--button-dark-bg: var(--chekin-color-brand-navy);
|
|
71
|
+
--button-dark-text: var(--chekin-color-white);
|
|
72
|
+
--button-dark-hover-overlay: rgba(255, 255, 255, 0.12);
|
|
73
|
+
--button-dark-active-overlay: rgba(0, 0, 0, 0.18);
|
|
74
|
+
|
|
75
|
+
/* ── Card ─────────────────────────────────────────────────────────── */
|
|
76
|
+
--card-bg: var(--chekin-color-white);
|
|
77
|
+
--card-border: var(--chekin-color-gray-3);
|
|
78
|
+
--card-text: var(--chekin-color-brand-navy);
|
|
79
|
+
--card-radius: var(--chekin-radius-lg);
|
|
80
|
+
--card-shadow: var(--chekin-shadow-card);
|
|
81
|
+
|
|
82
|
+
/* ── Sidebar ──────────────────────────────────────────────────────── */
|
|
83
|
+
/* Base defaults = current light look. Guestapp surface overrides to navy. */
|
|
84
|
+
--sidebar-bg: transparent;
|
|
85
|
+
--sidebar-text: var(--chekin-color-brand-navy);
|
|
86
|
+
--sidebar-text-muted: var(--chekin-color-gray-1);
|
|
87
|
+
/* Inactive menu-item label. Defaults to muted; surfaces can brighten it. */
|
|
88
|
+
--sidebar-item-text: var(--sidebar-text-muted);
|
|
89
|
+
--sidebar-item-hover-bg: var(--chekin-color-surface-input-empty);
|
|
90
|
+
--sidebar-item-active-bg: var(--chekin-color-surface-pressed);
|
|
91
|
+
--sidebar-item-active-text: var(--chekin-color-gray-1);
|
|
92
|
+
--sidebar-item-active-ring: transparent;
|
|
93
|
+
/* Active-item elevation. Defaults to the inset ring above; surfaces can swap
|
|
94
|
+
it for an outer glow. */
|
|
95
|
+
--sidebar-item-active-shadow: inset 0 0 0 1px var(--sidebar-item-active-ring);
|
|
96
|
+
--sidebar-item-accent-text: var(--chekin-color-brand-blue);
|
|
97
|
+
/* Inactive label text on hover. Defaults to no change. */
|
|
98
|
+
--sidebar-item-hover-text: var(--sidebar-item-text);
|
|
99
|
+
--sidebar-border: var(--chekin-color-gray-3);
|
|
100
|
+
/* Group label. Defaults to the muted tone; surfaces can dim it further. */
|
|
101
|
+
--sidebar-label-text: var(--sidebar-text-muted);
|
|
102
|
+
--sidebar-badge-bg: var(--chekin-color-surface-pressed);
|
|
103
|
+
--sidebar-badge-text: var(--chekin-color-brand-blue);
|
|
104
|
+
/* Badge variants. Default to the neutral badge above. */
|
|
105
|
+
--sidebar-badge-warning-bg: var(--sidebar-badge-bg);
|
|
106
|
+
--sidebar-badge-warning-text: var(--sidebar-badge-text);
|
|
107
|
+
--sidebar-badge-teal-bg: var(--sidebar-badge-bg);
|
|
108
|
+
--sidebar-badge-teal-text: var(--sidebar-badge-text);
|
|
109
|
+
|
|
110
|
+
/* ── Progress ring (checklist completion) ─────────────────────────── */
|
|
111
|
+
--progress-ring-track: var(--chekin-border-default);
|
|
112
|
+
--progress-ring-indicator: var(--chekin-color-brand-blue);
|
|
113
|
+
/* Indicator gradient stops — default to the solid indicator (no visible
|
|
114
|
+
gradient) so existing consumers are unchanged; surfaces can diverge. */
|
|
115
|
+
--progress-ring-indicator-from: var(--progress-ring-indicator);
|
|
116
|
+
--progress-ring-indicator-to: var(--progress-ring-indicator);
|
|
117
|
+
--progress-ring-label: var(--chekin-color-brand-blue);
|
|
118
|
+
|
|
119
|
+
/* ── Progress bar (linear) ────────────────────────────────────────── */
|
|
120
|
+
--progress-height: 6px;
|
|
121
|
+
--progress-track: var(--chekin-border-default);
|
|
122
|
+
--progress-indicator-from: var(--chekin-color-brand-blue);
|
|
123
|
+
--progress-indicator-to: var(--chekin-color-brand-blue);
|
|
124
|
+
|
|
125
|
+
/* ── Bottom nav (mobile tab bar) ──────────────────────────────────── */
|
|
126
|
+
--bottom-nav-bg: var(--chekin-color-white);
|
|
127
|
+
--bottom-nav-border: var(--chekin-border-default);
|
|
128
|
+
--bottom-nav-item: var(--chekin-color-gray-1);
|
|
129
|
+
--bottom-nav-item-active: var(--chekin-color-brand-blue);
|
|
130
|
+
|
|
131
|
+
/* ── Chat bubble (Vela assistant feed) ────────────────────────────── */
|
|
132
|
+
--chat-bubble-radius: 15px;
|
|
133
|
+
--chat-bubble-ai-bg: var(--chekin-color-surface-input-empty);
|
|
134
|
+
--chat-bubble-ai-text: var(--chekin-color-brand-navy);
|
|
135
|
+
--chat-bubble-user-bg: var(--chekin-color-brand-blue);
|
|
136
|
+
--chat-bubble-user-text: var(--chekin-color-white);
|
|
137
|
+
|
|
138
|
+
/* ── Chip (composer quick-replies) ────────────────────────────────── */
|
|
139
|
+
--chip-bg: var(--chekin-color-white);
|
|
140
|
+
--chip-border: var(--chekin-color-gray-3);
|
|
141
|
+
--chip-text: var(--chekin-color-brand-navy);
|
|
142
|
+
--chip-hover-bg: var(--chekin-color-surface-input-empty);
|
|
143
|
+
--chip-selected-bg: var(--chekin-color-surface-pressed);
|
|
144
|
+
--chip-selected-border: var(--chekin-color-brand-blue);
|
|
145
|
+
--chip-selected-text: var(--chekin-color-brand-blue);
|
|
146
|
+
|
|
69
147
|
/* ── Dialog ───────────────────────────────────────────────────────── */
|
|
70
148
|
--dialog-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
71
149
|
--dialog-content-bg: var(--chekin-color-white);
|
|
@@ -97,6 +175,8 @@
|
|
|
97
175
|
--accordion-item-open-bg: transparent;
|
|
98
176
|
--accordion-item-hover-bg: rgba(245, 245, 245, 0.5);
|
|
99
177
|
--accordion-item-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
|
|
178
|
+
/* Shadow while open. Defaults to the resting shadow (no change). */
|
|
179
|
+
--accordion-item-open-shadow: var(--accordion-item-shadow);
|
|
100
180
|
|
|
101
181
|
--accordion-trigger-gap: 16px;
|
|
102
182
|
--accordion-trigger-font-family: var(--chekin-font-family-primary);
|
|
@@ -109,6 +189,15 @@
|
|
|
109
189
|
--accordion-icon-color-closed: var(--chekin-color-gray-1);
|
|
110
190
|
--accordion-icon-color-open: var(--chekin-color-brand-blue);
|
|
111
191
|
|
|
192
|
+
/* Chevron-circle icon variant (iconVariant="chevron"). Defaults mirror the
|
|
193
|
+
plain icon so unstyled surfaces stay neutral. */
|
|
194
|
+
--accordion-chevron-size: 16px;
|
|
195
|
+
--accordion-chevron-icon-size: 16px;
|
|
196
|
+
--accordion-chevron-bg: transparent;
|
|
197
|
+
--accordion-chevron-bg-open: transparent;
|
|
198
|
+
--accordion-chevron-color: var(--accordion-icon-color-closed);
|
|
199
|
+
--accordion-chevron-color-open: var(--accordion-icon-color-open);
|
|
200
|
+
|
|
112
201
|
--accordion-content-font-size: 14px;
|
|
113
202
|
--accordion-content-line-height: 22px;
|
|
114
203
|
--accordion-content-color: var(--chekin-color-gray-1);
|
|
@@ -189,8 +278,8 @@
|
|
|
189
278
|
--link-text-decoration: none;
|
|
190
279
|
|
|
191
280
|
/* ── Checkbox ──────────────────────────────────────────────────────── */
|
|
192
|
-
--checkbox-border: var(--chekin-
|
|
193
|
-
--checkbox-bg:
|
|
281
|
+
--checkbox-border: var(--chekin-border-strong);
|
|
282
|
+
--checkbox-bg: var(--chekin-color-white);
|
|
194
283
|
--checkbox-checked-border: var(--chekin-color-brand-blue);
|
|
195
284
|
--checkbox-checked-bg: var(--chekin-color-brand-blue);
|
|
196
285
|
--checkbox-check-color: var(--chekin-color-white);
|
|
@@ -235,11 +324,27 @@
|
|
|
235
324
|
--section-tooltip-color: var(--chekin-color-gray-1);
|
|
236
325
|
--section-link-color: var(--chekin-color-brand-blue);
|
|
237
326
|
|
|
238
|
-
/* ──
|
|
239
|
-
--
|
|
240
|
-
--
|
|
241
|
-
--
|
|
242
|
-
--
|
|
327
|
+
/* ── FormSection (card with icon/title header + optional divided rows) ─ */
|
|
328
|
+
--form-section-bg: var(--chekin-color-white);
|
|
329
|
+
--form-section-border: var(--chekin-border-default);
|
|
330
|
+
--form-section-radius: 18px;
|
|
331
|
+
--form-section-shadow: var(--chekin-shadow-card);
|
|
332
|
+
--form-section-px: 20px;
|
|
333
|
+
--form-section-header-py: 14px;
|
|
334
|
+
--form-section-row-py: 12px;
|
|
335
|
+
--form-section-icon-color: var(--chekin-color-brand-blue);
|
|
336
|
+
--form-section-title-color: var(--chekin-color-gray-1);
|
|
337
|
+
--form-section-title-size: 12px;
|
|
338
|
+
--form-section-title-weight: 700;
|
|
339
|
+
--form-section-title-tracking: 0.1em;
|
|
340
|
+
|
|
341
|
+
/* ── SignatureCanvas ───────────────────────────────────────────────── */
|
|
342
|
+
/* Soft, neutral pad shared across surfaces: dashed hairline + muted fill. */
|
|
343
|
+
--signature-canvas-border: var(--chekin-border-strong);
|
|
344
|
+
--signature-canvas-bg: var(--chekin-surface-input-empty);
|
|
345
|
+
--signature-canvas-placeholder-bg: transparent;
|
|
346
|
+
--signature-canvas-placeholder-text: var(--chekin-color-gray-1);
|
|
347
|
+
--signature-canvas-shadow: none;
|
|
243
348
|
|
|
244
349
|
/* ── Carousel (image carousel controls) ─────────────────────────────── */
|
|
245
350
|
--carousel-control-bg: var(--chekin-blue-tint-soft);
|
|
@@ -369,4 +474,50 @@
|
|
|
369
474
|
--field-label-raised-top: -10px;
|
|
370
475
|
--field-placeholder-font-size: 16px;
|
|
371
476
|
--field-placeholder-font-weight: var(--chekin-font-weight-medium);
|
|
477
|
+
|
|
478
|
+
/* ── RadioCard (selectable option row) ─────────────────────────────── */
|
|
479
|
+
--radio-card-bg: var(--chekin-color-white);
|
|
480
|
+
--radio-card-border: var(--chekin-border-default);
|
|
481
|
+
--radio-card-hover-bg: var(--chekin-neutral-50);
|
|
482
|
+
--radio-card-radius: 14px;
|
|
483
|
+
--radio-card-selected-bg: var(--chekin-blue-tint-info);
|
|
484
|
+
--radio-card-selected-border: var(--chekin-color-brand-blue);
|
|
485
|
+
--radio-card-accent: var(--chekin-color-brand-blue);
|
|
486
|
+
--radio-card-title: var(--chekin-color-brand-navy);
|
|
487
|
+
--radio-card-description: var(--chekin-color-gray-1);
|
|
488
|
+
--radio-card-icon: var(--chekin-color-brand-blue);
|
|
489
|
+
--radio-card-icon-bg: var(--chekin-blue-tint-info);
|
|
490
|
+
--radio-card-radio-border: var(--chekin-color-gray-2);
|
|
491
|
+
--radio-card-radio-checked: var(--chekin-color-brand-blue);
|
|
492
|
+
|
|
493
|
+
/* ── InstructionList (icon + title + desc rows; card chrome from FormSection) ─ */
|
|
494
|
+
--instruction-list-divider: var(--chekin-border-default);
|
|
495
|
+
--instruction-list-icon: var(--chekin-color-brand-blue);
|
|
496
|
+
--instruction-list-icon-bg: var(--chekin-blue-tint-info);
|
|
497
|
+
--instruction-list-title: var(--chekin-color-brand-navy);
|
|
498
|
+
--instruction-list-description: var(--chekin-color-gray-1);
|
|
499
|
+
--instruction-list-badge-bg: var(--chekin-neutral-75);
|
|
500
|
+
--instruction-list-badge-text: var(--chekin-color-gray-1);
|
|
501
|
+
|
|
502
|
+
/* ── CaptureFrame (document / face capture chrome) ─────────────────── */
|
|
503
|
+
--capture-frame-bg: var(--chekin-color-white);
|
|
504
|
+
--capture-frame-border: var(--chekin-color-white);
|
|
505
|
+
--capture-frame-radius: 18px;
|
|
506
|
+
--capture-frame-shadow: var(--chekin-shadow-elev);
|
|
507
|
+
--capture-bracket: var(--chekin-color-brand-blue);
|
|
508
|
+
--capture-bracket-success: var(--chekin-green-700);
|
|
509
|
+
--capture-bracket-error: var(--chekin-red-soft);
|
|
510
|
+
--capture-scanline: var(--chekin-color-brand-blue);
|
|
511
|
+
--capture-view-gradient: linear-gradient(150deg, #0f1b3d, #1c2c57);
|
|
512
|
+
--capture-view-gradient-face: linear-gradient(150deg, #8b8fa6, #9ea2b6);
|
|
513
|
+
--capture-status-bg: var(--chekin-color-white);
|
|
514
|
+
--capture-status-text: var(--chekin-color-brand-navy);
|
|
515
|
+
--capture-status-shadow: var(--chekin-shadow-elev);
|
|
516
|
+
--capture-dot-idle: var(--chekin-green-700);
|
|
517
|
+
--capture-dot-error: var(--chekin-red-soft);
|
|
518
|
+
--capture-overlay-success-bg: rgba(15, 159, 128, 0.34);
|
|
519
|
+
--capture-overlay-success-badge: var(--chekin-green-700);
|
|
520
|
+
--capture-overlay-error-bg: rgba(248, 75, 122, 0.34);
|
|
521
|
+
--capture-overlay-error-badge: var(--chekin-red-soft);
|
|
522
|
+
--capture-overlay-text: var(--chekin-color-white);
|
|
372
523
|
}
|
package/src/base/radii.css
CHANGED
package/src/base/shadows.css
CHANGED
|
@@ -6,4 +6,12 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--chekin-shadow-focus: 0px 0px 0px 3px rgba(56, 91, 248, 0.2);
|
|
8
8
|
--chekin-shadow-subtle-outline: 0px 0px 0px 1px rgba(56, 91, 248, 0.2);
|
|
9
|
+
|
|
10
|
+
/* Elevation scale (navy-tinted, redesign cards/overlays) */
|
|
11
|
+
--chekin-shadow-card:
|
|
12
|
+
0 1px 3px rgba(22, 22, 67, 0.05), 0 0 0 1px rgba(22, 22, 67, 0.035);
|
|
13
|
+
--chekin-shadow-elev:
|
|
14
|
+
0 10px 30px rgba(22, 22, 67, 0.08), 0 2px 6px rgba(22, 22, 67, 0.05);
|
|
15
|
+
--chekin-shadow-hover:
|
|
16
|
+
0 16px 36px rgba(56, 92, 248, 0.14), 0 3px 8px rgba(22, 22, 67, 0.06);
|
|
9
17
|
}
|
|
@@ -16,16 +16,21 @@
|
|
|
16
16
|
:root {
|
|
17
17
|
/* Guest overrides */
|
|
18
18
|
--primary: var(--chekin-color-brand-blue);
|
|
19
|
-
|
|
20
|
-
--
|
|
19
|
+
/* Redesign page background (desktop). Mobile override below. */
|
|
20
|
+
--background-main: #f6f7fc;
|
|
21
|
+
--empty-field-background: var(--chekin-surface-input-empty);
|
|
22
|
+
/* Cards: faint hairline border to match the V3 design (≈ #E8E9F1). */
|
|
23
|
+
--card-border: var(--chekin-border-default);
|
|
24
|
+
/* Mobile bottom-nav: lighter inactive tab label (V3 mobile design). */
|
|
25
|
+
--bottom-nav-item: var(--chekin-color-gray-2);
|
|
21
26
|
|
|
22
27
|
/* Typography: Poppins for guest-facing */
|
|
23
28
|
--chekin-font-family-primary:
|
|
24
29
|
Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
25
30
|
Arial, sans-serif;
|
|
26
31
|
|
|
27
|
-
/* Radii:
|
|
28
|
-
--button-radius:
|
|
32
|
+
/* Radii: square (non-pill) buttons across the guest app */
|
|
33
|
+
--button-radius: 10px;
|
|
29
34
|
--chekin-radius-input: 10px;
|
|
30
35
|
|
|
31
36
|
/* Button sizing: larger touch targets for guest */
|
|
@@ -47,6 +52,64 @@
|
|
|
47
52
|
--circular-loader-color: var(--chekin-color-brand-blue);
|
|
48
53
|
--error-message-color: var(--chekin-red-soft);
|
|
49
54
|
|
|
55
|
+
/* Sidebar: solid navy shell for the V3 desktop journey design (#161643). */
|
|
56
|
+
--sidebar-bg: var(--chekin-color-brand-navy);
|
|
57
|
+
--sidebar-text: rgba(255, 255, 255, 0.92);
|
|
58
|
+
/* Muted tone: booking reference + footer email. */
|
|
59
|
+
--sidebar-text-muted: rgba(255, 255, 255, 0.5);
|
|
60
|
+
/* Inactive nav labels; brighten to white on hover. */
|
|
61
|
+
--sidebar-item-text: rgba(255, 255, 255, 0.78);
|
|
62
|
+
--sidebar-item-hover-text: #ffffff;
|
|
63
|
+
--sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
|
|
64
|
+
/* Active item: diagonal blue wash + soft inset ring (design highlight). */
|
|
65
|
+
--sidebar-item-active-bg: linear-gradient(
|
|
66
|
+
135deg,
|
|
67
|
+
rgba(56, 92, 248, 0.34),
|
|
68
|
+
rgba(56, 92, 248, 0.16)
|
|
69
|
+
);
|
|
70
|
+
--sidebar-item-active-text: #ffffff;
|
|
71
|
+
--sidebar-item-active-ring: rgba(140, 165, 255, 0.18);
|
|
72
|
+
--sidebar-item-active-shadow: inset 0 0 0 1px rgba(140, 165, 255, 0.18);
|
|
73
|
+
--sidebar-item-accent-text: var(--chekin-color-brand-light);
|
|
74
|
+
--sidebar-border: rgba(255, 255, 255, 0.06);
|
|
75
|
+
/* Group labels are dimmer than muted body text. */
|
|
76
|
+
--sidebar-label-text: rgba(255, 255, 255, 0.4);
|
|
77
|
+
--sidebar-badge-bg: rgba(140, 165, 255, 0.18);
|
|
78
|
+
--sidebar-badge-text: #c4d2ff;
|
|
79
|
+
--sidebar-badge-warning-bg: rgba(255, 183, 0, 0.2);
|
|
80
|
+
--sidebar-badge-warning-text: #ffcf5a;
|
|
81
|
+
--sidebar-badge-teal-bg: rgba(107, 224, 168, 0.22);
|
|
82
|
+
--sidebar-badge-teal-text: #7be3b0;
|
|
83
|
+
|
|
84
|
+
--accordion-item-radius: 16px;
|
|
85
|
+
--accordion-item-border: var(--chekin-neutral-200);
|
|
86
|
+
--accordion-item-bg: var(--chekin-color-white);
|
|
87
|
+
--accordion-item-open-bg: var(--chekin-color-white);
|
|
88
|
+
--accordion-item-hover-bg: var(--chekin-color-white);
|
|
89
|
+
--accordion-item-shadow: none;
|
|
90
|
+
--accordion-item-open-shadow: 0 4px 16px rgba(26, 148, 255, 0.1);
|
|
91
|
+
--accordion-trigger-color: var(--chekin-color-brand-navy);
|
|
92
|
+
--accordion-trigger-font-weight: var(--chekin-font-weight-semibold);
|
|
93
|
+
--accordion-content-color: var(--chekin-neutral-600);
|
|
94
|
+
--accordion-content-font-size: 15px;
|
|
95
|
+
--accordion-content-line-height: 24px;
|
|
96
|
+
--accordion-chevron-size: 28px;
|
|
97
|
+
--accordion-chevron-icon-size: 17px;
|
|
98
|
+
--accordion-chevron-bg: var(--chekin-neutral-50);
|
|
99
|
+
--accordion-chevron-bg-open: var(--chekin-color-brand-blue);
|
|
100
|
+
--accordion-chevron-color: var(--chekin-neutral-500);
|
|
101
|
+
--accordion-chevron-color-open: var(--chekin-color-white);
|
|
102
|
+
|
|
103
|
+
/* Progress ring (check-in completion): cool track + blue gradient arc. */
|
|
104
|
+
--progress-ring-track: #f0f0f8;
|
|
105
|
+
--progress-ring-indicator-from: var(--chekin-color-brand-blue);
|
|
106
|
+
--progress-ring-indicator-to: #6b8cff;
|
|
107
|
+
|
|
108
|
+
/* Progress bar (linear): same cool track + blue gradient as the ring. */
|
|
109
|
+
--progress-track: #f0f0f8;
|
|
110
|
+
--progress-indicator-from: var(--chekin-color-brand-blue);
|
|
111
|
+
--progress-indicator-to: #6b8cff;
|
|
112
|
+
|
|
50
113
|
/* Dialog: rounder corners and tighter footer for guest */
|
|
51
114
|
--dialog-content-radius: 20px;
|
|
52
115
|
|
|
@@ -62,3 +125,42 @@
|
|
|
62
125
|
--field-placeholder-font-size: 14px;
|
|
63
126
|
--field-placeholder-font-weight: var(--chekin-font-weight-regular);
|
|
64
127
|
}
|
|
128
|
+
|
|
129
|
+
/* Redesign: cooler page background on mobile viewports */
|
|
130
|
+
@media (max-width: 768px) {
|
|
131
|
+
:root {
|
|
132
|
+
--background-main: #eef1fb;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Redesign surface variant.
|
|
138
|
+
*
|
|
139
|
+
* The guest redesign (Home + new sub-pages) uses compact, lightly-rounded
|
|
140
|
+
* buttons rendered through the kit <Button>. The legacy guest surface above
|
|
141
|
+
* tunes --button-* for the old full-width 50px pills, so we re-scope the
|
|
142
|
+
* button tokens here — applied via the `guestapp-redesign` class on the page
|
|
143
|
+
* roots — without disturbing legacy pages.
|
|
144
|
+
*/
|
|
145
|
+
.guestapp-redesign {
|
|
146
|
+
--button-radius: 10px;
|
|
147
|
+
--button-min-width-default: auto;
|
|
148
|
+
--button-min-width-m: auto;
|
|
149
|
+
--button-height-default: 40px;
|
|
150
|
+
--button-height-m: 40px;
|
|
151
|
+
--button-height-sm: 36px;
|
|
152
|
+
--button-height-s: 32px;
|
|
153
|
+
--button-font-size: 13px;
|
|
154
|
+
--button-font-weight: var(--chekin-font-weight-semibold);
|
|
155
|
+
--button-icon-size: 16px;
|
|
156
|
+
|
|
157
|
+
/* Outline = neutral card button: white bg, hairline border, navy label. */
|
|
158
|
+
--button-outline-border: var(--chekin-border-default);
|
|
159
|
+
--button-outline-bg: var(--chekin-color-white);
|
|
160
|
+
--button-outline-text: var(--chekin-color-brand-navy);
|
|
161
|
+
--button-outline-hover-bg: var(--chekin-color-surface-input-empty);
|
|
162
|
+
|
|
163
|
+
/* Secondary = soft tinted button (used for subtle CTAs). */
|
|
164
|
+
--button-secondary-bg: var(--chekin-color-surface-pressed);
|
|
165
|
+
--button-secondary-text: var(--chekin-color-brand-blue);
|
|
166
|
+
}
|
package/src/tokens.json
CHANGED
|
@@ -9,8 +9,15 @@
|
|
|
9
9
|
"400": {"value": "#5F5CF0", "type": "color", "description": "Divider"},
|
|
10
10
|
"500": {"value": "#385BF8", "type": "color", "description": "Brand DEFAULT"},
|
|
11
11
|
"600": {"value": "#294DF1", "type": "color", "description": "Animation"},
|
|
12
|
+
"650": {"value": "#2E46C8", "type": "color", "description": "Hero gradient stop"},
|
|
12
13
|
"700": {"value": "#23235D", "type": "color", "description": "Dark accent"},
|
|
13
|
-
"900": {"value": "#161643", "type": "color", "description": "Navy ink"}
|
|
14
|
+
"900": {"value": "#161643", "type": "color", "description": "Navy ink"},
|
|
15
|
+
"950": {"value": "#15153F", "type": "color", "description": "Hero gradient start"},
|
|
16
|
+
"light": {
|
|
17
|
+
"value": "#8CA5FF",
|
|
18
|
+
"type": "color",
|
|
19
|
+
"description": "Soft brand / gradient endpoint"
|
|
20
|
+
}
|
|
14
21
|
},
|
|
15
22
|
"neutral": {
|
|
16
23
|
"0": {"value": "#FFFFFF", "type": "color"},
|
|
@@ -84,6 +91,18 @@
|
|
|
84
91
|
"description": "Brand red / danger DEFAULT"
|
|
85
92
|
}
|
|
86
93
|
},
|
|
94
|
+
"orange": {
|
|
95
|
+
"light": {
|
|
96
|
+
"value": "#FFB872",
|
|
97
|
+
"type": "color",
|
|
98
|
+
"description": "Weather gradient start"
|
|
99
|
+
},
|
|
100
|
+
"DEFAULT": {
|
|
101
|
+
"value": "#FF7A58",
|
|
102
|
+
"type": "color",
|
|
103
|
+
"description": "Weather gradient end"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
87
106
|
"avatar": {
|
|
88
107
|
"1": {"value": "#E0E9FB", "type": "color"},
|
|
89
108
|
"2": {"value": "#E0FBF3", "type": "color"},
|
|
@@ -110,6 +129,7 @@
|
|
|
110
129
|
"main-blue": {"value": "{color.blue.500}", "type": "color"},
|
|
111
130
|
"navy-blue": {"value": "{color.blue.900}", "type": "color"},
|
|
112
131
|
"dark-blue": {"value": "{color.blue.700}", "type": "color"},
|
|
132
|
+
"light-blue": {"value": "{color.blue.light}", "type": "color"},
|
|
113
133
|
"red": {"value": "{color.red.500}", "type": "color"}
|
|
114
134
|
},
|
|
115
135
|
"surface": {
|
|
@@ -188,10 +208,14 @@
|
|
|
188
208
|
"radius": {
|
|
189
209
|
"micro": {"value": "2px", "type": "borderRadius"},
|
|
190
210
|
"small": {"value": "4px", "type": "borderRadius"},
|
|
211
|
+
"sm": {"value": "6px", "type": "borderRadius", "description": "Surface scale sm"},
|
|
191
212
|
"input": {"value": "6px", "type": "borderRadius"},
|
|
192
213
|
"standard": {"value": "8px", "type": "borderRadius"},
|
|
214
|
+
"md": {"value": "10px", "type": "borderRadius", "description": "Surface scale md"},
|
|
193
215
|
"button": {"value": "12px", "type": "borderRadius"},
|
|
216
|
+
"lg": {"value": "14px", "type": "borderRadius", "description": "Surface scale lg"},
|
|
194
217
|
"card": {"value": "14px", "type": "borderRadius"},
|
|
218
|
+
"xl": {"value": "20px", "type": "borderRadius", "description": "Surface scale xl"},
|
|
195
219
|
"circle": {"value": "25px", "type": "borderRadius"},
|
|
196
220
|
"pill": {"value": "51px", "type": "borderRadius"},
|
|
197
221
|
"full": {"value": "200px", "type": "borderRadius"}
|
|
@@ -229,6 +253,38 @@
|
|
|
229
253
|
"promo-pill": {
|
|
230
254
|
"value": "0px 2px 7.5px rgba(0,0,0,0.1)",
|
|
231
255
|
"type": "boxShadow"
|
|
256
|
+
},
|
|
257
|
+
"card-elevation": {
|
|
258
|
+
"value": "0 1px 3px rgba(22,22,67,0.05), 0 0 0 1px rgba(22,22,67,0.035)",
|
|
259
|
+
"type": "boxShadow",
|
|
260
|
+
"description": "Redesign resting card"
|
|
261
|
+
},
|
|
262
|
+
"elevation": {
|
|
263
|
+
"value": "0 10px 30px rgba(22,22,67,0.08), 0 2px 6px rgba(22,22,67,0.05)",
|
|
264
|
+
"type": "boxShadow",
|
|
265
|
+
"description": "Redesign raised surface"
|
|
266
|
+
},
|
|
267
|
+
"elevation-hover": {
|
|
268
|
+
"value": "0 16px 36px rgba(56,92,248,0.14), 0 3px 8px rgba(22,22,67,0.06)",
|
|
269
|
+
"type": "boxShadow",
|
|
270
|
+
"description": "Redesign hover lift"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
"gradient": {
|
|
274
|
+
"hero": {
|
|
275
|
+
"value": "linear-gradient(135deg, #15153F 0%, #23235D 44%, #2E46C8 100%)",
|
|
276
|
+
"type": "other",
|
|
277
|
+
"description": "Check-in hero strip"
|
|
278
|
+
},
|
|
279
|
+
"brand": {
|
|
280
|
+
"value": "linear-gradient(135deg, #385BF8, #8CA5FF)",
|
|
281
|
+
"type": "other",
|
|
282
|
+
"description": "Vela / brand accent"
|
|
283
|
+
},
|
|
284
|
+
"weather": {
|
|
285
|
+
"value": "linear-gradient(135deg, #FFB872, #FF7A58)",
|
|
286
|
+
"type": "other",
|
|
287
|
+
"description": "Weather card"
|
|
232
288
|
}
|
|
233
289
|
},
|
|
234
290
|
"breakpoint": {
|