@chekinapp/tokens 0.2.12 → 1.0.0-beta.0

package/package.json

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

package/src/base/colors.css

@@ -26,8 +26,11 @@
   --chekin-blue-400: #5f5cf0;
   --chekin-blue-500: #385bf8; /* brand DEFAULT */
   --chekin-blue-600: #294df1;
+  --chekin-blue-650: #2e46c8; /* saturated mid (hero gradient stop) */
   --chekin-blue-700: #23235d;
   --chekin-blue-900: #161643; /* navy ink */
+  --chekin-blue-950: #15153f; /* deepest navy (hero gradient start) */
+  --chekin-blue-light: #8ca5ff; /* soft brand (gradient endpoint / accent) */
 
   /* Blue surface tints (near-white, hue-leaning) */
   --chekin-blue-surface-50: #f4f4fd; /* promo lavender */
@@ -88,6 +91,10 @@
   --chekin-red-soft: #f84b7a; /* inline validation error */
   --chekin-red-500: #df0044; /* brand red / danger DEFAULT */
 
+  /* ── Orange (weather / decorative gradients) ───────────────────────── */
+  --chekin-orange-light: #ffb872;
+  --chekin-orange: #ff7a58;
+
   /* ── Rating gradient (data viz, 7-step worst→best) ─────────────────── */
   --chekin-rating-0: var(--chekin-red-500);
   --chekin-rating-1: #ff673c;
@@ -132,6 +139,7 @@
   --chekin-color-brand: var(--chekin-blue-500);
   --chekin-color-brand-hover: var(--chekin-blue-300);
   --chekin-color-brand-navy: var(--chekin-blue-900);
+  --chekin-color-brand-light: var(--chekin-blue-light);
   --chekin-color-brand-red: var(--chekin-red-500);
   --primary: var(--chekin-color-brand);
 
@@ -180,6 +188,24 @@
   --chekin-info: var(--chekin-blue-500);
   --chekin-info-surface: var(--chekin-blue-50);
 
+  /* ── Gradients (composed from primitives) ──────────────────────────── */
+  --chekin-gradient-hero: linear-gradient(
+    135deg,
+    var(--chekin-blue-950) 0%,
+    var(--chekin-blue-700) 44%,
+    var(--chekin-blue-650) 100%
+  );
+  --chekin-gradient-brand: linear-gradient(
+    135deg,
+    var(--chekin-blue-500),
+    var(--chekin-blue-light)
+  );
+  --chekin-gradient-weather: linear-gradient(
+    135deg,
+    var(--chekin-orange-light),
+    var(--chekin-orange)
+  );
+
   --background-main: var(--chekin-surface-page);
   --empty-field-background: var(--chekin-surface-input-empty);
 

package/src/base/components.css

@@ -66,6 +66,72 @@
   --button-link-bg: transparent;
   --button-link-font-weight: var(--chekin-font-weight-semibold);
 
+  /* Dark variant (navy solid — redesign sidebar / hero CTAs) */
+  --button-dark-bg: var(--chekin-color-brand-navy);
+  --button-dark-text: var(--chekin-color-white);
+  --button-dark-hover-overlay: rgba(255, 255, 255, 0.12);
+  --button-dark-active-overlay: rgba(0, 0, 0, 0.18);
+
+  /* ── Card ─────────────────────────────────────────────────────────── */
+  --card-bg: var(--chekin-color-white);
+  --card-border: var(--chekin-color-gray-3);
+  --card-text: var(--chekin-color-brand-navy);
+  --card-radius: var(--chekin-radius-lg);
+  --card-shadow: var(--chekin-shadow-card);
+
+  /* ── Sidebar ──────────────────────────────────────────────────────── */
+  /* Base defaults = current light look. Guestapp surface overrides to navy. */
+  --sidebar-bg: transparent;
+  --sidebar-text: var(--chekin-color-brand-navy);
+  --sidebar-text-muted: var(--chekin-color-gray-1);
+  /* Inactive menu-item label. Defaults to muted; surfaces can brighten it. */
+  --sidebar-item-text: var(--sidebar-text-muted);
+  --sidebar-item-hover-bg: var(--chekin-color-surface-input-empty);
+  --sidebar-item-active-bg: var(--chekin-color-surface-pressed);
+  --sidebar-item-active-text: var(--chekin-color-gray-1);
+  --sidebar-item-active-ring: transparent;
+  --sidebar-item-accent-text: var(--chekin-color-brand-blue);
+  --sidebar-border: var(--chekin-color-gray-3);
+  --sidebar-badge-bg: var(--chekin-color-surface-pressed);
+  --sidebar-badge-text: var(--chekin-color-brand-blue);
+
+  /* ── Progress ring (checklist completion) ─────────────────────────── */
+  --progress-ring-track: var(--chekin-border-default);
+  --progress-ring-indicator: var(--chekin-color-brand-blue);
+  /* Indicator gradient stops — default to the solid indicator (no visible
+     gradient) so existing consumers are unchanged; surfaces can diverge. */
+  --progress-ring-indicator-from: var(--progress-ring-indicator);
+  --progress-ring-indicator-to: var(--progress-ring-indicator);
+  --progress-ring-label: var(--chekin-color-brand-blue);
+
+  /* ── Progress bar (linear) ────────────────────────────────────────── */
+  --progress-height: 6px;
+  --progress-track: var(--chekin-border-default);
+  --progress-indicator-from: var(--chekin-color-brand-blue);
+  --progress-indicator-to: var(--chekin-color-brand-blue);
+
+  /* ── Bottom nav (mobile tab bar) ──────────────────────────────────── */
+  --bottom-nav-bg: var(--chekin-color-white);
+  --bottom-nav-border: var(--chekin-border-default);
+  --bottom-nav-item: var(--chekin-color-gray-1);
+  --bottom-nav-item-active: var(--chekin-color-brand-blue);
+
+  /* ── Chat bubble (Vela assistant feed) ────────────────────────────── */
+  --chat-bubble-radius: 15px;
+  --chat-bubble-ai-bg: var(--chekin-color-surface-input-empty);
+  --chat-bubble-ai-text: var(--chekin-color-brand-navy);
+  --chat-bubble-user-bg: var(--chekin-color-brand-blue);
+  --chat-bubble-user-text: var(--chekin-color-white);
+
+  /* ── Chip (composer quick-replies) ────────────────────────────────── */
+  --chip-bg: var(--chekin-color-white);
+  --chip-border: var(--chekin-color-gray-3);
+  --chip-text: var(--chekin-color-brand-navy);
+  --chip-hover-bg: var(--chekin-color-surface-input-empty);
+  --chip-selected-bg: var(--chekin-color-surface-pressed);
+  --chip-selected-border: var(--chekin-color-brand-blue);
+  --chip-selected-text: var(--chekin-color-brand-blue);
+
   /* ── Dialog ───────────────────────────────────────────────────────── */
   --dialog-overlay-bg: rgba(0, 0, 0, 0.5);
   --dialog-content-bg: var(--chekin-color-white);

package/src/base/radii.css

@@ -6,4 +6,10 @@
 :root {
   --chekin-radius-input: 6px;
   --chekin-radius-small: 4px;
+
+  /* Surface radius scale (redesign cards / strips / heroes) */
+  --chekin-radius-sm: 6px;
+  --chekin-radius-md: 10px;
+  --chekin-radius-lg: 14px;
+  --chekin-radius-xl: 20px;
 }

package/src/base/shadows.css

@@ -6,4 +6,12 @@
 :root {
   --chekin-shadow-focus: 0px 0px 0px 3px rgba(56, 91, 248, 0.2);
   --chekin-shadow-subtle-outline: 0px 0px 0px 1px rgba(56, 91, 248, 0.2);
+
+  /* Elevation scale (navy-tinted, redesign cards/overlays) */
+  --chekin-shadow-card:
+    0 1px 3px rgba(22, 22, 67, 0.05), 0 0 0 1px rgba(22, 22, 67, 0.035);
+  --chekin-shadow-elev:
+    0 10px 30px rgba(22, 22, 67, 0.08), 0 2px 6px rgba(22, 22, 67, 0.05);
+  --chekin-shadow-hover:
+    0 16px 36px rgba(56, 92, 248, 0.14), 0 3px 8px rgba(22, 22, 67, 0.06);
 }

package/src/surfaces/guestapp.css

@@ -16,8 +16,9 @@
 :root {
   /* Guest overrides */
   --primary: var(--chekin-color-brand-blue);
-  --background-main: #f4f6f9;
-  --empty-field-background: var(--background-main);
+  /* Redesign page background (desktop). Mobile override below. */
+  --background-main: #f6f7fc;
+  --empty-field-background: var(--chekin-surface-input-empty);
 
   /* Typography: Poppins for guest-facing */
   --chekin-font-family-primary:
@@ -47,6 +48,31 @@
   --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-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);
+  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
+  --sidebar-item-active-bg: rgba(56, 92, 248, 0.3);
+  --sidebar-item-active-text: #ffffff;
+  --sidebar-item-active-ring: rgba(140, 165, 255, 0.18);
+  --sidebar-item-accent-text: var(--chekin-color-brand-light);
+  --sidebar-border: rgba(255, 255, 255, 0.06);
+  --sidebar-badge-bg: rgba(140, 165, 255, 0.18);
+  --sidebar-badge-text: #c4d2ff;
+
+  /* Progress ring (check-in completion): cool track + blue gradient arc. */
+  --progress-ring-track: #f0f0f8;
+  --progress-ring-indicator-from: var(--chekin-color-brand-blue);
+  --progress-ring-indicator-to: #6b8cff;
+
+  /* Progress bar (linear): same cool track + blue gradient as the ring. */
+  --progress-track: #f0f0f8;
+  --progress-indicator-from: var(--chekin-color-brand-blue);
+  --progress-indicator-to: #6b8cff;
+
   /* Dialog: rounder corners and tighter footer for guest */
   --dialog-content-radius: 20px;
 
@@ -62,3 +88,42 @@
   --field-placeholder-font-size: 14px;
   --field-placeholder-font-weight: var(--chekin-font-weight-regular);
 }
+
+/* Redesign: cooler page background on mobile viewports */
+@media (max-width: 768px) {
+  :root {
+    --background-main: #eef1fb;
+  }
+}
+
+/**
+ * Redesign surface variant.
+ *
+ * The guest redesign (Home + new sub-pages) uses compact, lightly-rounded
+ * buttons rendered through the kit <Button>. The legacy guest surface above
+ * tunes --button-* for the old full-width 50px pills, so we re-scope the
+ * button tokens here — applied via the `guestapp-redesign` class on the page
+ * roots — without disturbing legacy pages.
+ */
+.guestapp-redesign {
+  --button-radius: 10px;
+  --button-min-width-default: auto;
+  --button-min-width-m: auto;
+  --button-height-default: 40px;
+  --button-height-m: 40px;
+  --button-height-sm: 36px;
+  --button-height-s: 32px;
+  --button-font-size: 13px;
+  --button-font-weight: var(--chekin-font-weight-semibold);
+  --button-icon-size: 16px;
+
+  /* Outline = neutral card button: white bg, hairline border, navy label. */
+  --button-outline-border: var(--chekin-border-default);
+  --button-outline-bg: var(--chekin-color-white);
+  --button-outline-text: var(--chekin-color-brand-navy);
+  --button-outline-hover-bg: var(--chekin-color-surface-input-empty);
+
+  /* Secondary = soft tinted button (used for subtle CTAs). */
+  --button-secondary-bg: var(--chekin-color-surface-pressed);
+  --button-secondary-text: var(--chekin-color-brand-blue);
+}

package/src/tokens.json

@@ -9,8 +9,15 @@
       "400": {"value": "#5F5CF0", "type": "color", "description": "Divider"},
       "500": {"value": "#385BF8", "type": "color", "description": "Brand DEFAULT"},
       "600": {"value": "#294DF1", "type": "color", "description": "Animation"},
+      "650": {"value": "#2E46C8", "type": "color", "description": "Hero gradient stop"},
       "700": {"value": "#23235D", "type": "color", "description": "Dark accent"},
-      "900": {"value": "#161643", "type": "color", "description": "Navy ink"}
+      "900": {"value": "#161643", "type": "color", "description": "Navy ink"},
+      "950": {"value": "#15153F", "type": "color", "description": "Hero gradient start"},
+      "light": {
+        "value": "#8CA5FF",
+        "type": "color",
+        "description": "Soft brand / gradient endpoint"
+      }
     },
     "neutral": {
       "0": {"value": "#FFFFFF", "type": "color"},
@@ -74,6 +81,18 @@
         "description": "Brand red / danger DEFAULT"
       }
     },
+    "orange": {
+      "light": {
+        "value": "#FFB872",
+        "type": "color",
+        "description": "Weather gradient start"
+      },
+      "DEFAULT": {
+        "value": "#FF7A58",
+        "type": "color",
+        "description": "Weather gradient end"
+      }
+    },
     "avatar": {
       "1": {"value": "#E0E9FB", "type": "color"},
       "2": {"value": "#E0FBF3", "type": "color"},
@@ -100,6 +119,7 @@
       "main-blue": {"value": "{color.blue.500}", "type": "color"},
       "navy-blue": {"value": "{color.blue.900}", "type": "color"},
       "dark-blue": {"value": "{color.blue.700}", "type": "color"},
+      "light-blue": {"value": "{color.blue.light}", "type": "color"},
       "red": {"value": "{color.red.500}", "type": "color"}
     },
     "surface": {
@@ -178,10 +198,14 @@
   "radius": {
     "micro": {"value": "2px", "type": "borderRadius"},
     "small": {"value": "4px", "type": "borderRadius"},
+    "sm": {"value": "6px", "type": "borderRadius", "description": "Surface scale sm"},
     "input": {"value": "6px", "type": "borderRadius"},
     "standard": {"value": "8px", "type": "borderRadius"},
+    "md": {"value": "10px", "type": "borderRadius", "description": "Surface scale md"},
     "button": {"value": "12px", "type": "borderRadius"},
+    "lg": {"value": "14px", "type": "borderRadius", "description": "Surface scale lg"},
     "card": {"value": "14px", "type": "borderRadius"},
+    "xl": {"value": "20px", "type": "borderRadius", "description": "Surface scale xl"},
     "circle": {"value": "25px", "type": "borderRadius"},
     "pill": {"value": "51px", "type": "borderRadius"},
     "full": {"value": "200px", "type": "borderRadius"}
@@ -219,6 +243,38 @@
     "promo-pill": {
       "value": "0px 2px 7.5px rgba(0,0,0,0.1)",
       "type": "boxShadow"
+    },
+    "card-elevation": {
+      "value": "0 1px 3px rgba(22,22,67,0.05), 0 0 0 1px rgba(22,22,67,0.035)",
+      "type": "boxShadow",
+      "description": "Redesign resting card"
+    },
+    "elevation": {
+      "value": "0 10px 30px rgba(22,22,67,0.08), 0 2px 6px rgba(22,22,67,0.05)",
+      "type": "boxShadow",
+      "description": "Redesign raised surface"
+    },
+    "elevation-hover": {
+      "value": "0 16px 36px rgba(56,92,248,0.14), 0 3px 8px rgba(22,22,67,0.06)",
+      "type": "boxShadow",
+      "description": "Redesign hover lift"
+    }
+  },
+  "gradient": {
+    "hero": {
+      "value": "linear-gradient(135deg, #15153F 0%, #23235D 44%, #2E46C8 100%)",
+      "type": "other",
+      "description": "Check-in hero strip"
+    },
+    "brand": {
+      "value": "linear-gradient(135deg, #385BF8, #8CA5FF)",
+      "type": "other",
+      "description": "Vela / brand accent"
+    },
+    "weather": {
+      "value": "linear-gradient(135deg, #FFB872, #FF7A58)",
+      "type": "other",
+      "description": "Weather card"
     }
   },
   "breakpoint": {