@chekinapp/tokens 0.0.20 → 0.0.22

package/package.json

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

package/src/base/components.css

@@ -72,11 +72,15 @@
   --dialog-content-border: var(--chekin-color-gray-3);
   --dialog-content-radius: 16px;
   --dialog-content-text: var(--chekin-color-brand-navy);
+  --dialog-title-font-size: 18px;
+  --dialog-title-font-weight: var(--chekin-font-weight-semibold);
   --dialog-description-text: var(--chekin-color-gray-1);
   --dialog-close-radius: var(--chekin-radius-small);
+  --dialog-footer-gap: 16px;
 
   /* ── Circular Loader ──────────────────────────────────────────────── */
   --circular-loader-color: var(--chekin-color-brand-blue);
+  --circular-loader-label-color: var(--chekin-color-gray-1);
 
   /* ── Accordion ────────────────────────────────────────────────────── */
   --accordion-item-radius: 8px;
@@ -184,9 +188,16 @@
   --signature-canvas-placeholder-text: var(--chekin-color-brand-blue);
   --signature-canvas-shadow: 0 16px 16px #2699fb12;
 
-  /* ── Slider (dashboard-only, migrated from ui-kit-2) ───────────────── */
-  --slider-control-bg: #e9f5ff;
-  --slider-control-color: var(--chekin-color-brand-blue);
+  /* ── Carousel (image carousel controls) ─────────────────────────────── */
+  --carousel-control-bg: #e9f5ff;
+  --carousel-control-color: var(--chekin-color-brand-blue);
+
+  /* ── Slider (range input) ─────────────────────────────────────────── */
+  --slider-track-bg: color-mix(in srgb, var(--chekin-color-brand-blue) 20%, transparent);
+  --slider-range-bg: var(--chekin-color-brand-blue);
+  --slider-thumb-bg: #e5e7eb;
+  --slider-thumb-border: var(--chekin-color-brand-blue);
+  --slider-focus-ring: var(--chekin-color-brand-blue);
 
   /* ── Table (dashboard-only, minimal tokens) ──────────────────────────── */
   --table-border: #e5e6ee;
@@ -245,4 +256,44 @@
   --error-message-color: var(--chekin-color-brand-red);
 
   --modal-background: var(--chekin-color-white);
+
+  /* ── Tabs (dashboard-only, minimal tokens) ─────────────────────────────── */
+  --tabs-list-border: var(--chekin-color-gray-3);
+  --tabs-list-bg: var(--chekin-color-surface-input-empty);
+  --tabs-list-separator: var(--chekin-color-gray-3);
+  --tabs-trigger-text: var(--chekin-color-gray-1);
+  --tabs-trigger-active-bg: var(--chekin-color-brand-blue);
+  --tabs-trigger-active-text: var(--chekin-color-white);
+  --tabs-trigger-hover-bg: var(--chekin-color-brand-blue);
+  --tabs-trigger-hover-text: var(--chekin-color-white);
+  --tabs-trigger-active-border: var(--chekin-color-brand-blue);
+  --tabs-trigger-hover-border-opacity: 0.3;
+
+  /* ── Switch (dashboard-only, minimal tokens) ─────────────────────────────── */
+  --switch-checked-bg: var(--chekin-color-brand-blue);
+  --switch-unchecked-bg: var(--chekin-color-gray-2);
+  --switch-thumb-bg: var(--chekin-color-white);
+
+  /* ── ToggleGroup (dashboard-only, minimal tokens) ──────────────────────────── */
+  --toggle-group-border: var(--chekin-color-gray-3);
+  --toggle-group-bg: var(--chekin-color-surface-input-empty);
+  --toggle-focus-ring: var(--chekin-color-brand-blue);
+  --toggle-border: var(--chekin-color-gray-3);
+  --toggle-bg: var(--chekin-color-surface-input-empty);
+  --toggle-text: var(--chekin-color-gray-1);
+  --toggle-hover-border: var(--chekin-color-brand-blue);
+  --toggle-hover-bg: var(--chekin-color-brand-blue);
+  --toggle-hover-text: var(--chekin-color-white);
+  --toggle-active-border: var(--chekin-color-brand-blue);
+  --toggle-active-bg: var(--chekin-color-white);
+  --toggle-active-text: var(--chekin-color-brand-blue);
+  --toggle-tab-active-bg: var(--chekin-color-brand-blue);
+  --toggle-tab-active-text: var(--chekin-color-white);
+  --toggle-sky-blue-active-bg: var(--chekin-color-surface-autocomplete);
+  --toggle-sky-blue-hover-bg: var(--chekin-color-surface-input-empty);
+  --toggles-label-text: var(--chekin-color-brand-navy);
+
+  /* ── Radio (dashboard-only, minimal tokens) ────────────────────────────────── */
+  --radio-border: var(--chekin-color-brand-blue);
+  --radio-indicator: var(--chekin-color-brand-blue);
 }

package/src/surfaces/guest.css

@@ -45,4 +45,9 @@
   --button-outline-hover-bg: rgba(0, 0, 0, 0.04);
   --circular-loader-color: var(--chekin-color-brand-blue);
   --error-message-color: #f84b7a;
+
+  /* Dialog: rounder corners and tighter footer for guest */
+  --dialog-content-radius: 20px;
+
+  --alert-box-info-bg: #e3efff;
 }

package/src/surfaces/host-sdk.css

@@ -28,4 +28,24 @@
   --numbered-list-marker-bg: var(--chekin-host-sdk-color-brand);
 
   --circular-loader-color: var(--chekin-host-sdk-color-brand);
+
+  /* ── Tabs (dashboard-only, minimal tokens) ─────────────────────────────── */
+  --tabs-trigger-active-bg: var(--chekin-host-sdk-color-brand);
+  --tabs-trigger-hover-bg: var(--chekin-host-sdk-color-brand);
+  --tabs-trigger-active-border: var(--chekin-host-sdk-color-brand);
+
+  /* ── Switch (dashboard-only, minimal tokens) ─────────────────────────────── */
+  --switch-checked-bg: var(--chekin-host-sdk-color-brand);
+
+  /* ── ToggleGroup (dashboard-only, minimal tokens) ──────────────────────────── */
+  --toggle-focus-ring: var(--chekin-host-sdk-color-brand);
+  --toggle-hover-border: var(--chekin-host-sdk-color-brand);
+  --toggle-hover-bg: var(--chekin-host-sdk-color-brand);
+  --toggle-active-border: var(--chekin-host-sdk-color-brand);
+  --toggle-active-text: var(--chekin-host-sdk-color-brand);
+  --toggle-tab-active-bg: var(--chekin-host-sdk-color-brand);
+
+  /* ── Radio (dashboard-only, minimal tokens) ────────────────────────────────── */
+  --radio-border: var(--chekin-host-sdk-color-brand);
+  --radio-indicator: var(--chekin-host-sdk-color-brand);
 }