@chekinapp/tokens 1.0.0-beta.0 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chekinapp/tokens",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "Chekin design tokens — CSS variables, JSON, and Tailwind preset",
   "private": false,
   "license": "UNLICENSED",

package/src/base/colors.css

@@ -63,6 +63,8 @@
   --chekin-gray-400: #9ca3af;
   --chekin-gray-500: #6b7280;
   --chekin-gray-600: #4b5563;
+  --chekin-gray-700: #353945; /* dark slate (links / strong body text) */
+  --chekin-gray-900: #101828; /* near-black ink (widget / darkest text) */
 
   /* ── Green (success) ───────────────────────────────────────────────── */
   --chekin-green-50: #e8fcf7;
@@ -129,6 +131,14 @@
   --chekin-airbnb-pink-surface: #ffe8ef;
   --chekin-airbnb-pink-surface-soft: #fff5f3;
 
+  /* ── Alpha overlays (translucent tints over content) ───────────────── */
+  --chekin-blue-900-a05: rgba(22, 22, 67, 0.05); /* navy 5% — subtle dividers / hover */
+  --chekin-blue-500-a15: rgba(56, 91, 248, 0.15); /* brand 15% — soft fill */
+  --chekin-blue-600-a10: rgba(41, 77, 241, 0.1); /* brand glow — box-shadow color */
+
+  /* ── HSL channels (for hsl(var(--…)) consumers) ────────────────────── */
+  --chekin-neutral-150-hsl: 233, 21%, 92%; /* = neutral-150 (#e5e6ee) */
+
   --chekin-white: var(--chekin-neutral-0);
 
   /* ════════════════════════════════════════════════════════════════════

package/src/base/components.css

@@ -90,10 +90,22 @@
   --sidebar-item-active-bg: var(--chekin-color-surface-pressed);
   --sidebar-item-active-text: var(--chekin-color-gray-1);
   --sidebar-item-active-ring: transparent;
+  /* Active-item elevation. Defaults to the inset ring above; surfaces can swap
+     it for an outer glow. */
+  --sidebar-item-active-shadow: inset 0 0 0 1px var(--sidebar-item-active-ring);
   --sidebar-item-accent-text: var(--chekin-color-brand-blue);
+  /* Inactive label text on hover. Defaults to no change. */
+  --sidebar-item-hover-text: var(--sidebar-item-text);
   --sidebar-border: var(--chekin-color-gray-3);
+  /* Group label. Defaults to the muted tone; surfaces can dim it further. */
+  --sidebar-label-text: var(--sidebar-text-muted);
   --sidebar-badge-bg: var(--chekin-color-surface-pressed);
   --sidebar-badge-text: var(--chekin-color-brand-blue);
+  /* Badge variants. Default to the neutral badge above. */
+  --sidebar-badge-warning-bg: var(--sidebar-badge-bg);
+  --sidebar-badge-warning-text: var(--sidebar-badge-text);
+  --sidebar-badge-teal-bg: var(--sidebar-badge-bg);
+  --sidebar-badge-teal-text: var(--sidebar-badge-text);
 
   /* ── Progress ring (checklist completion) ─────────────────────────── */
   --progress-ring-track: var(--chekin-border-default);
@@ -163,6 +175,8 @@
   --accordion-item-open-bg: transparent;
   --accordion-item-hover-bg: rgba(245, 245, 245, 0.5);
   --accordion-item-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
+  /* Shadow while open. Defaults to the resting shadow (no change). */
+  --accordion-item-open-shadow: var(--accordion-item-shadow);
 
   --accordion-trigger-gap: 16px;
   --accordion-trigger-font-family: var(--chekin-font-family-primary);
@@ -175,6 +189,15 @@
   --accordion-icon-color-closed: var(--chekin-color-gray-1);
   --accordion-icon-color-open: var(--chekin-color-brand-blue);
 
+  /* Chevron-circle icon variant (iconVariant="chevron"). Defaults mirror the
+     plain icon so unstyled surfaces stay neutral. */
+  --accordion-chevron-size: 16px;
+  --accordion-chevron-icon-size: 16px;
+  --accordion-chevron-bg: transparent;
+  --accordion-chevron-bg-open: transparent;
+  --accordion-chevron-color: var(--accordion-icon-color-closed);
+  --accordion-chevron-color-open: var(--accordion-icon-color-open);
+
   --accordion-content-font-size: 14px;
   --accordion-content-line-height: 22px;
   --accordion-content-color: var(--chekin-color-gray-1);
@@ -255,8 +278,8 @@
   --link-text-decoration: none;
 
   /* ── Checkbox ──────────────────────────────────────────────────────── */
-  --checkbox-border: var(--chekin-color-brand-blue);
-  --checkbox-bg: transparent;
+  --checkbox-border: var(--chekin-border-strong);
+  --checkbox-bg: var(--chekin-color-white);
   --checkbox-checked-border: var(--chekin-color-brand-blue);
   --checkbox-checked-bg: var(--chekin-color-brand-blue);
   --checkbox-check-color: var(--chekin-color-white);
@@ -301,11 +324,27 @@
   --section-tooltip-color: var(--chekin-color-gray-1);
   --section-link-color: var(--chekin-color-brand-blue);
 
-  /* ── SignatureCanvas (dashboard-only, migrated from ui-kit-2) ───────── */
-  --signature-canvas-border: var(--chekin-color-brand-blue);
-  --signature-canvas-placeholder-bg: var(--chekin-blue-tint-bright);
-  --signature-canvas-placeholder-text: var(--chekin-color-brand-blue);
-  --signature-canvas-shadow: 0 16px 16px #2699fb12;
+  /* ── FormSection (card with icon/title header + optional divided rows) ─ */
+  --form-section-bg: var(--chekin-color-white);
+  --form-section-border: var(--chekin-border-default);
+  --form-section-radius: 18px;
+  --form-section-shadow: var(--chekin-shadow-card);
+  --form-section-px: 20px;
+  --form-section-header-py: 14px;
+  --form-section-row-py: 12px;
+  --form-section-icon-color: var(--chekin-color-brand-blue);
+  --form-section-title-color: var(--chekin-color-gray-1);
+  --form-section-title-size: 12px;
+  --form-section-title-weight: 700;
+  --form-section-title-tracking: 0.1em;
+
+  /* ── SignatureCanvas ───────────────────────────────────────────────── */
+  /* Soft, neutral pad shared across surfaces: dashed hairline + muted fill. */
+  --signature-canvas-border: var(--chekin-border-strong);
+  --signature-canvas-bg: var(--chekin-surface-input-empty);
+  --signature-canvas-placeholder-bg: transparent;
+  --signature-canvas-placeholder-text: var(--chekin-color-gray-1);
+  --signature-canvas-shadow: none;
 
   /* ── Carousel (image carousel controls) ─────────────────────────────── */
   --carousel-control-bg: var(--chekin-blue-tint-soft);
@@ -435,4 +474,50 @@
   --field-label-raised-top: -10px;
   --field-placeholder-font-size: 16px;
   --field-placeholder-font-weight: var(--chekin-font-weight-medium);
+
+  /* ── RadioCard (selectable option row) ─────────────────────────────── */
+  --radio-card-bg: var(--chekin-color-white);
+  --radio-card-border: var(--chekin-border-default);
+  --radio-card-hover-bg: var(--chekin-neutral-50);
+  --radio-card-radius: 14px;
+  --radio-card-selected-bg: var(--chekin-blue-tint-info);
+  --radio-card-selected-border: var(--chekin-color-brand-blue);
+  --radio-card-accent: var(--chekin-color-brand-blue);
+  --radio-card-title: var(--chekin-color-brand-navy);
+  --radio-card-description: var(--chekin-color-gray-1);
+  --radio-card-icon: var(--chekin-color-brand-blue);
+  --radio-card-icon-bg: var(--chekin-blue-tint-info);
+  --radio-card-radio-border: var(--chekin-color-gray-2);
+  --radio-card-radio-checked: var(--chekin-color-brand-blue);
+
+  /* ── InstructionList (icon + title + desc rows; card chrome from FormSection) ─ */
+  --instruction-list-divider: var(--chekin-border-default);
+  --instruction-list-icon: var(--chekin-color-brand-blue);
+  --instruction-list-icon-bg: var(--chekin-blue-tint-info);
+  --instruction-list-title: var(--chekin-color-brand-navy);
+  --instruction-list-description: var(--chekin-color-gray-1);
+  --instruction-list-badge-bg: var(--chekin-neutral-75);
+  --instruction-list-badge-text: var(--chekin-color-gray-1);
+
+  /* ── CaptureFrame (document / face capture chrome) ─────────────────── */
+  --capture-frame-bg: var(--chekin-color-white);
+  --capture-frame-border: var(--chekin-color-white);
+  --capture-frame-radius: 18px;
+  --capture-frame-shadow: var(--chekin-shadow-elev);
+  --capture-bracket: var(--chekin-color-brand-blue);
+  --capture-bracket-success: var(--chekin-green-700);
+  --capture-bracket-error: var(--chekin-red-soft);
+  --capture-scanline: var(--chekin-color-brand-blue);
+  --capture-view-gradient: linear-gradient(150deg, #0f1b3d, #1c2c57);
+  --capture-view-gradient-face: linear-gradient(150deg, #8b8fa6, #9ea2b6);
+  --capture-status-bg: var(--chekin-color-white);
+  --capture-status-text: var(--chekin-color-brand-navy);
+  --capture-status-shadow: var(--chekin-shadow-elev);
+  --capture-dot-idle: var(--chekin-green-700);
+  --capture-dot-error: var(--chekin-red-soft);
+  --capture-overlay-success-bg: rgba(15, 159, 128, 0.34);
+  --capture-overlay-success-badge: var(--chekin-green-700);
+  --capture-overlay-error-bg: rgba(248, 75, 122, 0.34);
+  --capture-overlay-error-badge: var(--chekin-red-soft);
+  --capture-overlay-text: var(--chekin-color-white);
 }

package/src/surfaces/guestapp.css

@@ -19,14 +19,18 @@
   /* Redesign page background (desktop). Mobile override below. */
   --background-main: #f6f7fc;
   --empty-field-background: var(--chekin-surface-input-empty);
+  /* Cards: faint hairline border to match the V3 design (≈ #E8E9F1). */
+  --card-border: var(--chekin-border-default);
+  /* Mobile bottom-nav: lighter inactive tab label (V3 mobile design). */
+  --bottom-nav-item: var(--chekin-color-gray-2);
 
   /* Typography: Poppins for guest-facing */
   --chekin-font-family-primary:
     Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
 
-  /* Radii: rounder for friendlier guest experience */
-  --button-radius: 50px;
+  /* Radii: square (non-pill) buttons across the guest app */
+  --button-radius: 10px;
   --chekin-radius-input: 10px;
 
   /* Button sizing: larger touch targets for guest */
@@ -48,20 +52,53 @@
   --circular-loader-color: var(--chekin-color-brand-blue);
   --error-message-color: var(--chekin-red-soft);
 
-  /* Sidebar: navy / dark surface for the redesign desktop shell */
+  /* Sidebar: solid navy shell for the V3 desktop journey design (#161643). */
   --sidebar-bg: var(--chekin-color-brand-navy);
   --sidebar-text: rgba(255, 255, 255, 0.92);
-  --sidebar-text-muted: rgba(255, 255, 255, 0.55);
-  /* Inactive nav labels stay readable (not dimmed to the muted group-label tone). */
-  --sidebar-item-text: rgba(255, 255, 255, 0.92);
+  /* Muted tone: booking reference + footer email. */
+  --sidebar-text-muted: rgba(255, 255, 255, 0.5);
+  /* Inactive nav labels; brighten to white on hover. */
+  --sidebar-item-text: rgba(255, 255, 255, 0.78);
+  --sidebar-item-hover-text: #ffffff;
   --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
-  --sidebar-item-active-bg: rgba(56, 92, 248, 0.3);
+  /* Active item: diagonal blue wash + soft inset ring (design highlight). */
+  --sidebar-item-active-bg: linear-gradient(
+    135deg,
+    rgba(56, 92, 248, 0.34),
+    rgba(56, 92, 248, 0.16)
+  );
   --sidebar-item-active-text: #ffffff;
   --sidebar-item-active-ring: rgba(140, 165, 255, 0.18);
+  --sidebar-item-active-shadow: inset 0 0 0 1px rgba(140, 165, 255, 0.18);
   --sidebar-item-accent-text: var(--chekin-color-brand-light);
   --sidebar-border: rgba(255, 255, 255, 0.06);
+  /* Group labels are dimmer than muted body text. */
+  --sidebar-label-text: rgba(255, 255, 255, 0.4);
   --sidebar-badge-bg: rgba(140, 165, 255, 0.18);
   --sidebar-badge-text: #c4d2ff;
+  --sidebar-badge-warning-bg: rgba(255, 183, 0, 0.2);
+  --sidebar-badge-warning-text: #ffcf5a;
+  --sidebar-badge-teal-bg: rgba(107, 224, 168, 0.22);
+  --sidebar-badge-teal-text: #7be3b0;
+
+  --accordion-item-radius: 16px;
+  --accordion-item-border: var(--chekin-neutral-200);
+  --accordion-item-bg: var(--chekin-color-white);
+  --accordion-item-open-bg: var(--chekin-color-white);
+  --accordion-item-hover-bg: var(--chekin-color-white);
+  --accordion-item-shadow: none;
+  --accordion-item-open-shadow: 0 4px 16px rgba(26, 148, 255, 0.1);
+  --accordion-trigger-color: var(--chekin-color-brand-navy);
+  --accordion-trigger-font-weight: var(--chekin-font-weight-semibold);
+  --accordion-content-color: var(--chekin-neutral-600);
+  --accordion-content-font-size: 15px;
+  --accordion-content-line-height: 24px;
+  --accordion-chevron-size: 28px;
+  --accordion-chevron-icon-size: 17px;
+  --accordion-chevron-bg: var(--chekin-neutral-50);
+  --accordion-chevron-bg-open: var(--chekin-color-brand-blue);
+  --accordion-chevron-color: var(--chekin-neutral-500);
+  --accordion-chevron-color-open: var(--chekin-color-white);
 
   /* Progress ring (check-in completion): cool track + blue gradient arc. */
   --progress-ring-track: #f0f0f8;

package/src/tokens.json

@@ -44,7 +44,17 @@
       "300": {"value": "#D1D5DB", "type": "color"},
       "400": {"value": "#9CA3AF", "type": "color"},
       "500": {"value": "#6B7280", "type": "color"},
-      "600": {"value": "#4B5563", "type": "color"}
+      "600": {"value": "#4B5563", "type": "color"},
+      "700": {
+        "value": "#353945",
+        "type": "color",
+        "description": "Dark slate (links / strong body text)"
+      },
+      "900": {
+        "value": "#101828",
+        "type": "color",
+        "description": "Near-black ink (widget / darkest text)"
+      }
     },
     "green": {
       "50": {"value": "#E8FCF7", "type": "color"},