@chekinapp/tokens 0.0.10 → 0.0.11

package/package.json

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

package/src/base/components.css

@@ -162,4 +162,75 @@
   --checkbox-checked-border: var(--chekin-color-brand-blue);
   --checkbox-checked-bg: var(--chekin-color-brand-blue);
   --checkbox-check-color: var(--chekin-color-white);
+  --checkbox-label-color: var(--chekin-color-brand-navy);
+
+  /* ── CopyIcon (dashboard-only, minimal tokens) ───────────────────────── */
+  --copy-icon-success-color: #10b981;
+
+  /* ── DataTable (dashboard-only, minimal tokens) ──────────────────────── */
+  --data-table-border: var(--chekin-color-gray-3);
+
+  /* ── Table (dashboard-only, minimal tokens) ──────────────────────────── */
+  --table-border: var(--chekin-color-gray-3);
+  --table-head-bg: var(--chekin-color-surface-input-empty);
+  --table-head-text: var(--chekin-color-gray-1);
+  --table-footer-bg: var(--chekin-color-surface-input-empty);
+  --table-row-selected-bg: var(--chekin-color-surface-input-empty);
+  --table-row-hover-bg: var(--chekin-color-surface-input-empty);
+  --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);
+
+  /* ── DefaultSelectTrigger (dashboard-only, minimal tokens) ──────────────── */
+  --default-select-trigger-height: 40px;
+  --default-select-trigger-radius: var(--chekin-radius-input);
+  --default-select-trigger-bg: var(--chekin-color-white);
+  --default-select-trigger-disabled-opacity: 0.5;
+  --default-select-trigger-empty-bg: var(--chekin-color-surface-input-empty);
+  --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/guest.css

@@ -44,28 +44,5 @@
   --button-link-text: var(--chekin-color-brand-blue);
 
   --circular-loader-color: var(--chekin-color-brand-blue);
-
-  /* Guest checkbox mirrors the legacy Guest App visual box. */
-  --checkbox-border: #b1b5c4;
-  --checkbox-bg: #f4f6f9;
-  --checkbox-checked-border: var(--chekin-color-brand-navy);
-  --checkbox-checked-bg: var(--chekin-color-white);
-  --checkbox-check-color: var(--chekin-color-brand-navy);
-}
-
-.checkbox__control {
-  width: 24px;
-  height: 24px;
-  border-width: 2px;
-  border-radius: 6px;
-}
-
-.checkbox__control:disabled,
-.checkbox__control[aria-busy='true'] {
-  opacity: 0.4;
-}
-
-.checkbox__icon {
-  width: 24px;
-  height: 24px;
+  --error-message-color: #f84b7a;
 }