@chekinapp/tokens 0.0.15 → 0.0.17

package/package.json

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

package/src/base/colors.css

@@ -7,7 +7,7 @@
   /* ── Brand ─────────────────────────────────────────────────────────── */
   --chekin-color-brand-blue: #385bf8;
   --chekin-color-brand-navy: #161643;
-  --chekin-color-brand-red: #ff2467;
+  --chekin-color-brand-red: #df0044;
   --chekin-color-brand-blue-hover: #5975f5;
   --chekin-color-brand-blue-animation: #294df1;
   --chekin-color-brand-blue-divider: #5f5cf0;

package/src/base/components.css

@@ -85,6 +85,7 @@
   --accordion-item-bg: transparent;
   --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);
 
   --accordion-trigger-gap: 16px;
   --accordion-trigger-font-family: var(--chekin-font-family-primary);
@@ -118,13 +119,13 @@
   --audio-player-button-hover-bg: var(--chekin-color-brand-blue-hover);
   --audio-player-button-radius: 8px;
   --audio-player-icon-color: var(--chekin-color-white);
-  --audio-player-track-bg: var(--chekin-color-gray-3);
+  --audio-player-track-bg: #d1d5db;
   --audio-player-progress-bg: var(--chekin-color-brand-blue);
-  --audio-player-time-color: var(--chekin-color-gray-1);
+  --audio-player-time-color: #4b5563;
 
   /* ── Avatar (dashboard-only, minimal tokens) ─────────────────────────── */
-  --avatar-fallback-bg: var(--chekin-color-gray-3);
-  --avatar-fallback-text: var(--chekin-color-gray-1);
+  --avatar-fallback-bg: #e5e7eb;
+  --avatar-fallback-text: #4b5563;
 
   /* ── BetaBadge (dashboard-only, minimal tokens) ──────────────────────── */
   --beta-badge-bg: color-mix(in srgb, var(--chekin-color-gray-1) 15%, transparent);
@@ -137,25 +138,17 @@
   --beta-badge-readonly-text: var(--chekin-color-brand-blue);
 
   /* ── BoxOptionSelector (dashboard-only, minimal tokens) ──────────────── */
-  --box-option-border: var(--chekin-color-gray-3);
+  --box-option-border: #e5e6ee;
   --box-option-bg: var(--chekin-color-white);
   --box-option-hover-bg: var(--chekin-color-surface-input-empty);
   --box-option-selected-border: var(--chekin-color-brand-blue);
   --box-option-selected-bg: var(--chekin-color-surface-pressed);
 
   /* ── Breadcrumbs (dashboard-only, minimal tokens) ───────────────────── */
-  --breadcrumbs-link-color: var(--chekin-color-gray-1);
+  --breadcrumbs-link-color: var(--chekin-host-sdk-color-brand);
   --breadcrumbs-current-color: var(--chekin-color-brand-navy);
   --breadcrumbs-separator-color: var(--chekin-color-brand-navy);
 
-  /* ── ButtonGroup (dashboard-only, minimal tokens) ───────────────────── */
-  --button-group-text-bg: var(--chekin-color-surface-input-empty);
-  --button-group-text-border: var(--chekin-color-gray-3);
-  --button-group-text-color: var(--chekin-color-brand-navy);
-
-  /* ── ButtonsGroupLabel (dashboard-only, minimal tokens) ─────────────── */
-  --buttons-group-label-color: var(--chekin-color-gray-1);
-
   /* ── Checkbox ──────────────────────────────────────────────────────── */
   --checkbox-border: var(--chekin-color-brand-blue);
   --checkbox-bg: transparent;
@@ -167,8 +160,33 @@
   /* ── CopyIcon (dashboard-only, minimal tokens) ───────────────────────── */
   --copy-icon-success-color: #10b981;
 
-  /* ── DataTable (dashboard-only, minimal tokens) ──────────────────────── */
-  --data-table-border: var(--chekin-color-gray-3);
+  /* ── CheckList (dashboard-only, migrated from ui-kit-2) ─────────────── */
+  --check-list-icon-color: var(--list-icon-color, currentColor);
+  --check-list-icon-mark-color: var(--list-icon-check-color, var(--chekin-color-white));
+
+  /* ── NumberedList (dashboard-only, migrated from ui-kit-2) ───────────── */
+  --numbered-list-marker-bg: var(--chekin-color-brand-blue);
+  --numbered-list-marker-text: var(--chekin-color-white);
+
+  /* ── RotateArrow (dashboard-only, migrated from ui-kit-2) ───────────── */
+  --rotate-arrow-color: var(--brand-color, var(--chekin-color-brand-blue));
+
+  /* ── SectionGroup (dashboard-only, migrated from ui-kit-2) ──────────── */
+  --section-group-bg: var(--chekin-color-white);
+  --section-group-border: #e5e6ee;
+  --section-group-divider-bg: #e5e6ee;
+  --section-group-title-color: var(--chekin-color-brand-navy);
+  --section-group-muted-text: var(--chekin-color-gray-1);
+
+  /* ── SignatureCanvas (dashboard-only, migrated from ui-kit-2) ───────── */
+  --signature-canvas-border: var(--chekin-color-brand-blue);
+  --signature-canvas-placeholder-bg: #c4e6ff;
+  --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);
 
   /* ── Table (dashboard-only, minimal tokens) ──────────────────────────── */
   --table-border: var(--chekin-color-gray-3);
@@ -180,31 +198,39 @@
   --table-caption-text: var(--chekin-color-gray-1);
   --table-loading-overlay-bg: var(--chekin-color-white);
 
-  /* ── Card (dashboard-only, minimal tokens) ───────────────────────────── */
-  --card-bg: var(--chekin-color-white);
-  --card-text: var(--chekin-color-brand-navy);
-  --card-border: var(--chekin-color-gray-3);
-  --card-radius: var(--chekin-radius-card);
-  --card-shadow: var(--chekin-shadow-card);
-  --card-description-text: var(--chekin-color-gray-1);
-
-  /* ── ChannelSelector (dashboard-only, minimal tokens) ────────────────── */
-  --channel-selector-border: var(--chekin-color-gray-3);
-  --channel-selector-border-hover: color-mix(
-    in srgb,
-    var(--chekin-color-brand-blue) 30%,
-    transparent
-  );
-  --channel-selector-selected-border: var(--chekin-color-brand-blue);
-  --channel-selector-selected-bg: color-mix(
-    in srgb,
-    var(--chekin-color-brand-blue) 10%,
-    transparent
-  );
-  --channel-selector-bg: var(--chekin-color-white);
-  --channel-selector-icon-color: var(--chekin-color-brand-navy);
-  --channel-selector-check-bg: var(--chekin-color-brand-blue);
-  --channel-selector-check-icon: var(--chekin-color-white);
+  /* ── TableFilter (dashboard-only, migrated from ui-kit-2) ───────────── */
+  --table-filter-bg: var(--chekin-color-white);
+  --table-filter-text: var(--chekin-color-brand-navy);
+  --table-filter-remove-bg: #9696b9;
+  --table-filter-remove-color: #f8f8f8;
+  --table-filter-remove-hover-shadow: 0 3px 3px #0f477734;
+
+  /* ── TableLoader (dashboard-only, migrated from ui-kit-2) ───────────── */
+  --table-loader-border: #f0f0f3;
+  --table-loader-color: var(--chekin-color-brand-blue);
+  --table-loader-label-color: #9696b9;
+  --table-loader-row-hover-bg: var(--chekin-color-white);
+
+  /* ── Timeline (dashboard-only, migrated from ui-kit-2) ──────────────── */
+  --timeline-connector-bg: var(--chekin-color-gray-3);
+  --timeline-description-color: var(--chekin-color-gray-1);
+
+  /* ── VerticalTabs (dashboard-only, migrated from ui-kit-2) ──────────── */
+  --vertical-tabs-step-bg: var(--chekin-color-surface-input-empty);
+  --vertical-tabs-step-border: var(--chekin-color-gray-3);
+  --vertical-tabs-active-border: var(--chekin-color-brand-blue);
+  --vertical-tabs-step-label: var(--chekin-color-brand-blue);
+  --vertical-tabs-title: var(--chekin-color-brand-navy);
+  --vertical-tabs-text: var(--chekin-color-gray-1);
+
+  /* ── VideoModal (dashboard-only, migrated from ui-kit-2) ────────────── */
+  --video-modal-overlay-bg: rgb(0 0 0 / 0.7);
+  --video-modal-close-bg: var(--chekin-color-white);
+  --video-modal-close-color: var(--chekin-color-brand-blue);
+
+  /* ── Webcam (dashboard-only, migrated from ui-kit-2) ───────────────── */
+  --webcam-bg: #c4e6ff;
+  --webcam-permission-text: var(--chekin-color-gray-1);
 
   /* ── DefaultSelectTrigger (dashboard-only, minimal tokens) ──────────────── */
   --default-select-trigger-height: 40px;
@@ -215,22 +241,6 @@
   --default-select-trigger-empty-text: var(--chekin-color-gray-1);
   --default-select-trigger-width: 100%;
 
-  /* ── DropdownMenu (dashboard-only, migrated from ui-kit-2) ─────────────── */
-  --dropdown-menu-content-bg: var(--chekin-color-white);
-  --dropdown-menu-content-text: var(--chekin-color-brand-navy);
-  --dropdown-menu-content-border: #e5e7eb;
-  --dropdown-menu-content-radius: 8px;
-  --dropdown-menu-content-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --dropdown-menu-item-focus-bg: #f9fafb;
-  --dropdown-menu-item-focus-text: var(--chekin-color-brand-navy);
-  --dropdown-menu-item-active-bg: #f9fafb;
-  --dropdown-menu-item-hover-bg: #f9fafb;
-  --dropdown-menu-label-text: #9ca3af;
-  --dropdown-menu-separator-bg: #f3f4f6;
-  --dropdown-menu-item-content-icon: #acacd5;
-  --dropdown-menu-item-content-description: #666;
-
   /* ── ErrorMessage ───────────────────────────────────────────────────── */
   --error-message-color: var(--chekin-color-brand-red);
 }

package/src/surfaces/dashboard.css

@@ -16,6 +16,7 @@
 :root {
   /* Dashboard overrides (currently matches base defaults) */
   --primary: var(--chekin-color-brand-blue);
+  --brand-color: var(--chekin-color-brand-blue);
   --background-main: var(--chekin-color-white);
 
   /* Typography: Montserrat (already default) */
@@ -23,15 +24,9 @@
     ProximaNova, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
-  /* Radii: tighter radius for dashboard density */
-  --button-radius: var(--chekin-radius-input); /* 6px for dashboard */
-
-  /* Button sizing: compact for dashboard */
-  --button-min-width-default: auto;
-  --button-min-width-m: 160px;
-  --button-height-default: 40px;
-  --button-height-sm: 36px;
-  --button-height-m: 48px;
-
   --circular-loader-color: var(--chekin-color-brand-blue);
+  --check-list-icon-color: var(--list-icon-color, currentColor);
+  --check-list-icon-mark-color: var(--list-icon-check-color, var(--chekin-color-white));
+  --numbered-list-marker-bg: var(--brand-color, var(--chekin-color-brand-blue));
+  --numbered-list-marker-text: var(--chekin-color-white);
 }

package/src/surfaces/host-sdk.css

@@ -16,6 +16,7 @@
 :root {
   /* Dashboard overrides (currently matches base defaults) */
   --primary: var(--chekin-host-sdk-color-brand);
+  --brand-color: var(--chekin-host-sdk-color-brand);
   --background-main: #fdfdff;
   --button-primary-bg: var(--chekin-host-sdk-color-brand);
 
@@ -24,15 +25,7 @@
     ProximaNova, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
-  /* Radii: tighter radius for dashboard density */
-  --button-radius: var(--chekin-radius-input);
-
-  /* Button sizing: compact for dashboard */
-  --button-min-width-default: auto;
-  --button-min-width-m: 160px;
-  --button-height-default: 40px;
-  --button-height-sm: 36px;
-  --button-height-m: 48px;
+  --numbered-list-marker-bg: var(--chekin-host-sdk-color-brand);
 
   --circular-loader-color: var(--chekin-host-sdk-color-brand);
 }