@hotelfriendag/design-tokens 0.3.0

package/scripts/validate-tokens.cjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/*
+ * validate-tokens.cjs — drift detection for the design-system bundle.
+ *
+ * Runs three checks against pre-built/*.css:
+ *   1. Every `var(--*)` reference resolves to a defined CSS custom property.
+ *   2. No bare hex literals in components.css / status.css (outside comments + var() fallbacks).
+ *   3. Every doc-snippet token reference exists in pre-built/*.css (anti-RFC-0001 §2.2 drift).
+ *
+ * Exits 1 on any failure. Use as a pre-commit hook or CI step.
+ *
+ * Usage:
+ *   node scripts/validate-tokens.cjs           # from portable-design/
+ *   node docs/portable-design/scripts/validate-tokens.cjs   # from repo root
+ *
+ * ESM-safe: `.cjs` extension. No deps.
+ */
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..');
+
+const read = (p) => fs.readFileSync(path.join(ROOT, p), 'utf8');
+const exists = (p) => fs.existsSync(path.join(ROOT, p));
+
+// ── 1. Index of CSS custom-property DEFINITIONS in pre-built/*.css ──
+const preBuiltFiles = ['pre-built/tokens.css', 'pre-built/components.css', 'pre-built/status.css', 'pre-built/tailwind.css'];
+const allDefs = new Set();
+for (const f of preBuiltFiles) {
+  if (!exists(f)) continue;
+  for (const m of read(f).matchAll(/--([a-z0-9-]+):/g)) allDefs.add(m[1]);
+}
+
+// ── 2. Strip CSS comments (so hex literals inside `/* ... */` don't trigger findings) ──
+const stripComments = (src) => src.replace(/\/\*[\s\S]*?\*\//g, '');
+
+// ── 3. Collect findings ──
+const findings = [];
+
+// Check 1: every var(--*) in pre-built/*.css resolves to a def
+for (const f of preBuiltFiles) {
+  if (!exists(f)) continue;
+  const src = read(f);
+  for (const m of src.matchAll(/var\(--([a-z0-9-]+)(?:,[^)]*)?\)/g)) {
+    const name = m[1];
+    if (!allDefs.has(name)) {
+      const line = src.slice(0, m.index).split('\n').length;
+      findings.push({ severity: 'error', file: f, line, msg: `Unresolved var(--${name})` });
+    }
+  }
+}
+
+// Check 2: no bare hex literals in components.css / status.css outside var() fallbacks
+const checkBareHex = (file) => {
+  if (!exists(file)) return;
+  const src = stripComments(read(file));
+  const hexRe = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})\b/g;
+  // Drop anything inside var(...) (the comma fallback)
+  const stripped = src.replace(/var\([^)]*\)/g, 'var(...)');
+  for (const m of stripped.matchAll(hexRe)) {
+    const hex = '#' + m[1];
+    // Allow #fff / #FFFFFF / #000 / #000000 — neutral primitives that don't need tokens
+    if (/^#(fff|FFF|ffffff|FFFFFF|000|000000)$/.test(hex)) continue;
+    const line = stripped.slice(0, m.index).split('\n').length;
+    findings.push({ severity: 'warn', file, line, msg: `Bare hex literal ${hex} — should reference a token (or document why)` });
+  }
+};
+checkBareHex('pre-built/components.css');
+checkBareHex('pre-built/status.css');
+
+// Check 3: doc-snippet token references vs pre-built defs
+const docFiles = ['README.md', 'UI_DESIGN.md', 'ai-rules/CLAUDE.md', 'ai-rules/cursorrules.template', 'ai-rules/github-copilot-instructions.md', 'ai-rules/system-prompt-compact.md'];
+// Refs INSIDE markdown code-fenced blocks are skipped to avoid changelog-history false positives
+// (e.g. "Phase 1A renamed `var(--color-primary)` → `var(--color-hf-accent)`" — both shouldn't trip).
+// We only validate refs in setup snippets (HTML/CSS code blocks) — which start with ``` followed by a non-empty language.
+const collectDocRefs = (src) => {
+  const refs = new Set();
+  // Tokenise: scan code blocks ```html/```css/```jsx... but NOT prose backticks
+  const codeBlockRe = /```(html|css|jsx|tsx|js|ts|scss|vue|svelte)\s*\n([\s\S]*?)```/g;
+  for (const m of src.matchAll(codeBlockRe)) {
+    for (const r of m[2].matchAll(/var\(--([a-z0-9-]+)(?:,[^)]*)?\)/g)) {
+      refs.add(r[1]);
+    }
+  }
+  return refs;
+};
+for (const f of docFiles) {
+  if (!exists(f)) continue;
+  const refs = collectDocRefs(read(f));
+  for (const name of refs) {
+    if (!allDefs.has(name)) {
+      findings.push({ severity: 'error', file: f, line: 0, msg: `Doc snippet references undefined var(--${name})` });
+    }
+  }
+}
+
+// ── 4. Report ──
+const errors = findings.filter(f => f.severity === 'error');
+const warns  = findings.filter(f => f.severity === 'warn');
+
+if (findings.length === 0) {
+  console.log('✓ validate-tokens: all checks passed');
+  console.log(`  ${allDefs.size} CSS variables defined, all var() refs resolve, no bare hex.`);
+  process.exit(0);
+}
+
+console.log(`validate-tokens: ${errors.length} error(s), ${warns.length} warning(s)\n`);
+for (const f of findings) {
+  const loc = f.line ? `${f.file}:${f.line}` : f.file;
+  const tag = f.severity === 'error' ? '✗ ERROR' : '⚠ WARN ';
+  console.log(`  ${tag}  ${loc}  ${f.msg}`);
+}
+process.exit(errors.length > 0 ? 1 : 0);

package/states-canonical.json

@@ -0,0 +1,240 @@
+{
+  "_meta": {
+    "description": "Canonical interactive states for new HotelFriend sub-products. Derived from the design system spec — use this as the authoritative reference when building new components. For the raw portal extraction see states.json. For visual rendering see components.html (each entry below maps to a section there).",
+    "version": "0.2.0",
+    "lastReconciled": "2026-05-20",
+    "tokens": "tokens.figma.json",
+    "visualReference": "components.html",
+    "focusRingRule": "All focusable elements: outline:none on :focus, apply box-shadow ring on :focus-visible. Universal rule: box-shadow:0 0 0 2px rgba(36,175,232,0.2) — or use the generic 'global-focus-visible' entry below.",
+    "namingConvention": "Component-prefix .hf-* (e.g. .hf-modal, .hf-alert, .hf-pagination). BEM-style child selectors with __ separator (.hf-modal__header, .hf-alert__icon). Variant modifiers with -- (.hf-alert--success). State classes with .is-* prefix (.is-active, .is-disabled).",
+    "portalExactNote": "Entries marked 'portal-exact' replicate the live HotelFriend portal values 1:1 via getComputedStyle() extraction. Entries marked 'adapted' have been modernized — see UI_DESIGN.md §5.1 Component Primitives for decision rationale."
+  },
+  "components": {
+    "btn-primary": {
+      "description": "Primary action button — .btn.btn-primary",
+      "states": {
+        "default":        { "background": "#24AFE8", "color": "#fff", "height": "40px", "border": "none", "border-radius": "6px", "font-size": "15px", "font-weight": "600", "transition": "200ms ease-in-out", "cursor": "pointer" },
+        ":hover":         { "background": "#149AD1" },
+        ":focus":         { "outline": "none" },
+        ":focus-visible": { "background": "#149AD1", "box-shadow": "0 0 0 3px rgba(36,175,232,0.35)" },
+        ":active":        { "background": "#0F87B8" },
+        ":disabled":      { "opacity": "0.6", "cursor": "not-allowed", "pointer-events": "none" },
+        "[data-loading]": { "opacity": "0.7", "cursor": "wait" }
+      }
+    },
+    "btn-hf-outline-primary": {
+      "description": "Outline / secondary action — .btn.btn-hf-outline-primary",
+      "states": {
+        "default":        { "background": "#fff", "color": "#24AFE8", "border": "1px solid #24AFE8", "height": "40px", "border-radius": "6px", "font-size": "15px", "font-weight": "600", "transition": "200ms ease-in-out" },
+        ":hover":         { "background": "#F1F3F6" },
+        ":focus":         { "outline": "none" },
+        ":focus-visible": { "box-shadow": "0 0 0 3px rgba(36,175,232,0.35)" },
+        ":disabled":      { "opacity": "0.6", "cursor": "not-allowed" }
+      }
+    },
+    "btn-cancel": {
+      "description": "Cancel / neutral — .btn.btn-cancel",
+      "states": {
+        "default":        { "background": "#fff", "color": "#4B5675", "border": "1px solid #D1D6DD", "height": "40px", "border-radius": "6px", "font-size": "15px", "font-weight": "600", "transition": "200ms ease-in-out" },
+        ":hover":         { "background": "rgba(190,198,212,0.1)", "color": "#EA6565", "border-color": "#EA6565" },
+        ":focus":         { "outline": "none" },
+        ":focus-visible": { "box-shadow": "0 0 0 3px rgba(234,101,101,0.2)" },
+        ":disabled":      { "opacity": "0.6", "cursor": "not-allowed" }
+      }
+    },
+    "btn-delete": {
+      "description": "Destructive action — .btn.btn-delete",
+      "states": {
+        "default":        { "background": "#fff", "color": "#EA6565", "border": "1px solid #EA6565", "height": "40px", "border-radius": "6px", "font-size": "15px", "font-weight": "600", "transition": "200ms ease-in-out" },
+        ":hover":         { "background": "#EA6565", "color": "#fff" },
+        ":focus":         { "outline": "none" },
+        ":focus-visible": { "background": "#EA6565", "color": "#fff", "box-shadow": "0 0 0 3px rgba(234,101,101,0.35)" },
+        ":disabled":      { "opacity": "0.6", "cursor": "not-allowed" }
+      }
+    },
+    "btn-reset-filters": {
+      "description": "Reset filters / inline clear — .btn-reset-filters",
+      "states": {
+        "default":        { "background": "#EFF6FF", "color": "#24AFE8", "border": "1px solid rgba(27,132,255,0.2)", "height": "38px", "border-radius": "6px", "font-size": "14px", "font-weight": "500", "transition": "200ms ease-in-out" },
+        ":hover":         { "background": "#E9F6FC" },
+        ":disabled":      { "opacity": "0.6", "cursor": "not-allowed" }
+      }
+    },
+    "form-control": {
+      "description": "Text input / textarea — .form-control",
+      "states": {
+        "default":        { "height": "39px", "border": "1px solid #D1D6DD", "border-radius": "6px", "font-size": "14px", "color": "#2B2B2B", "background": "#fff", "transition": "200ms ease-in-out" },
+        ":hover":         { "border-color": "#B2BAC4", "box-shadow": "0 2px 3px rgba(0,0,0,0.06)" },
+        ":focus":         { "border-color": "#24AFE8", "outline": "none", "box-shadow": "0 0 0 2px rgba(36,175,232,0.2)" },
+        ":disabled":      { "background": "#F1F3F6", "opacity": "0.75", "cursor": "not-allowed" },
+        "::placeholder":  { "color": "#99A1B7" }
+      }
+    },
+    "select2": {
+      "description": "Dropdown select — .select2-selection",
+      "states": {
+        "default":        { "height": "39px", "border": "1px solid #D1D6DD", "border-radius": "6px", "transition": "200ms ease-in-out" },
+        ".select2-container--open .select2-selection": { "border-color": "#24AFE8" },
+        ":focus":         { "border-color": "#24AFE8", "outline": "none", "box-shadow": "0 0 0 2px rgba(36,175,232,0.2)" }
+      }
+    },
+    "hf-pill": {
+      "description": "Status badge — .hf-pill .status-{domain}-{state}. Color via --color-badge-{domain}-{state}-color, bg via --color-badge-{domain}-{state}-bg (15% alpha).",
+      "states": {
+        "default": { "border-radius": "99px", "font-size": "12px", "font-weight": "500", "padding": "3px 12px", "display": "inline-flex", "align-items": "center", "white-space": "nowrap" }
+      }
+    },
+    "hf-tab": {
+      "description": "Large underline tab — .hf-tab (page nav). Portal-exact: padding 22px 15px, font 16px/500, ink-steel #50627E inactive, primary #24AFE8 active with 3px bottom border.",
+      "states": {
+        "default":        { "padding": "22px 15px", "font-size": "16px", "font-weight": "500", "color": "#50627E", "border-bottom": "0", "background": "transparent", "transition": "color 200ms", "cursor": "pointer" },
+        ":hover":         { "color": "#2B2B2B" },
+        ".is-active":     { "color": "#24AFE8", "::after": { "content": "''", "position": "absolute", "left": "0", "right": "0", "bottom": "-1px", "height": "3px", "background": "#24AFE8" } },
+        ":disabled":      { "color": "#AEBCCF", "cursor": "not-allowed" },
+        ":focus-visible": { "outline": "2px solid #24AFE8", "outline-offset": "2px" }
+      }
+    },
+    "hf-tab--sm": {
+      "description": "Small sub-filter tab (Today/All style) — .hf-tab.hf-tab--sm. Same as .hf-tab but 10px/15px padding and 15px font.",
+      "states": {
+        "default":        { "padding": "10px 15px", "font-size": "15px", "font-weight": "500", "color": "#50627E" },
+        ":hover":         { "color": "#2B2B2B" },
+        ".is-active":     { "color": "#24AFE8", "border-bottom-accent": "3px solid #24AFE8" },
+        ":disabled":      { "color": "#AEBCCF", "cursor": "not-allowed" }
+      }
+    },
+    "hf-pill-tab": {
+      "description": "Pill tab inside .hf-pill-tabs container — segmented control (e.g. Day/Week/Month).",
+      "states": {
+        "default":        { "padding": "8px 14px", "font-size": "14px", "font-weight": "500", "color": "#50627E", "background": "transparent", "border-radius": "6px", "transition": "background 200ms, color 200ms" },
+        ":hover":         { "color": "#2B2B2B" },
+        ".is-active":     { "background": "#fff", "color": "#24AFE8", "box-shadow": "0 1px 2px rgba(0,0,0,0.05)" }
+      }
+    },
+    "hf-dropdown-item": {
+      "description": "Item inside .hf-dropdown-menu — portal-exact: 14px text, padding 8px 16px, ink color #2B2B2B, hover bg #F5F5F5 (NOT muted #F1F3F6).",
+      "states": {
+        "default":          { "font-size": "14px", "color": "#2B2B2B", "padding": "8px 16px", "gap": "10px", "background": "transparent", "transition": "background 150ms" },
+        ":hover":           { "background": "#F5F5F5" },
+        ".is-active":       { "background": "#EFF6FF", "color": "#24AFE8" },
+        ":focus-visible":   { "background": "#F5F5F5", "outline": "2px solid #24AFE8", "outline-offset": "-2px" },
+        ".danger":          { "color": "#EA6565" },
+        ".danger:hover":    { "background": "rgba(234,101,101,0.08)" },
+        ".is-disabled":     { "color": "#AEBCCF", "cursor": "not-allowed", "pointer-events": "none" }
+      }
+    },
+    "hf-check": {
+      "description": "Custom-styled checkbox — .hf-check. Portal-exact .mt-checkbox-outline: 18×18, 6px radius, 1px #DBDFE9 border, transparent bg, filled #26ADE4 + white tick on check.",
+      "states": {
+        "default":            { "appearance": "none", "width": "18px", "height": "18px", "border-radius": "6px", "border": "1px solid #DBDFE9", "background": "transparent", "transition": "border-color 200ms, background-color 200ms", "cursor": "pointer" },
+        ":hover:not(:disabled)": { "border-color": "#26ADE4" },
+        ":checked":           { "background": "#26ADE4", "border-color": "#26ADE4", "::after": { "content": "''", "position": "absolute", "top": "2px", "left": "5px", "width": "5px", "height": "10px", "border": "solid #fff", "border-width": "0 2px 2px 0", "transform": "rotate(45deg)" } },
+        ":focus-visible":     { "outline": "2px solid #24AFE8", "outline-offset": "2px" },
+        ":disabled":          { "opacity": "0.5", "cursor": "not-allowed" },
+        ":checked:disabled":  { "background": "rgba(38,173,228,0.5)", "border-color": "rgba(38,173,228,0.5)", "opacity": "1" }
+      }
+    },
+    "hf-radio": {
+      "description": "Custom-styled radio — .hf-radio. Same anatomy as .hf-check but border-radius 9999px (circle). After: 6×6 white dot centered.",
+      "states": {
+        "default":            { "appearance": "none", "width": "18px", "height": "18px", "border-radius": "9999px", "border": "1px solid #DBDFE9", "background": "transparent", "cursor": "pointer" },
+        ":hover:not(:disabled)": { "border-color": "#26ADE4" },
+        ":checked":           { "background": "#26ADE4", "border-color": "#26ADE4", "::after": { "content": "''", "position": "absolute", "top": "50%", "left": "50%", "width": "6px", "height": "6px", "background": "#fff", "border-radius": "9999px", "transform": "translate(-50%, -50%)" } },
+        ":focus-visible":     { "outline": "2px solid #24AFE8", "outline-offset": "2px" },
+        ":disabled":          { "opacity": "0.5", "cursor": "not-allowed" },
+        ":checked:disabled":  { "background": "rgba(38,173,228,0.5)", "border-color": "rgba(38,173,228,0.5)", "opacity": "1" }
+      }
+    },
+    "toggle-switch": {
+      "description": "Boolean toggle — replicates portal .bootstrap-switch: 52×28 track, off #DFDFDF / on #24AFE8, thumb 20×20 white with shadow 0 1px 6px rgba(0,0,0,.3), slides 24px on check.",
+      "states": {
+        "default":            { "width": "52px", "height": "28px", "background": "#DFDFDF", "border-radius": "9999px", "transition": "background 200ms" },
+        ".on":                { "background": "#24AFE8" },
+        "thumb":              { "width": "20px", "height": "20px", "background": "#fff", "border-radius": "9999px", "box-shadow": "0 1px 6px rgba(0,0,0,0.3)", "transition": "transform 200ms" },
+        "thumb.on":           { "transform": "translateX(24px)" },
+        ":focus-visible":     { "box-shadow": "0 0 0 2px rgba(36,175,232,0.35)" },
+        ":disabled":          { "opacity": "0.5", "cursor": "not-allowed" }
+      }
+    },
+    "hf-pagination__item": {
+      "description": "Page number / pager button — .hf-pagination__item. Portal-exact: 34×34, 8px radius, ink-steel #485B78. Active is SUBTLE GRAY (#E4E8EF bg + #252F4A text), NOT primary blue — easy to get wrong!",
+      "states": {
+        "default":        { "min-width": "34px", "height": "34px", "padding": "0 12px", "font-size": "14px", "font-weight": "400", "color": "#485B78", "background": "transparent", "border": "1px solid transparent", "border-radius": "8px", "transition": "background 200ms, color 200ms, border-color 200ms" },
+        ":hover":         { "background": "#F1F3F6", "color": "#2B2B2B" },
+        ".is-active":     { "background": "#E4E8EF", "border-color": "#E4E8EF", "color": "#252F4A", "cursor": "default" },
+        ":disabled":      { "color": "#AEBCCF", "cursor": "not-allowed", "pointer-events": "none" },
+        ":focus-visible": { "outline": "2px solid #24AFE8", "outline-offset": "2px" }
+      }
+    },
+    "hf-modal": {
+      "description": "Modal dialog container — .hf-modal. Portal-exact: 6px radius, 1px rgba(72,91,120,.15) border, 0 2px 4px 0 rgba(72,91,120,.18) shadow. Header has bottom border, footer does NOT.",
+      "states": {
+        "default":        { "background": "#fff", "border": "1px solid rgba(72,91,120,0.15)", "border-radius": "6px", "box-shadow": "0 2px 4px 0 rgba(72,91,120,0.18)", "overflow": "hidden" },
+        "__header":       { "padding": "20px", "border-bottom": "1px solid #E4E8EF", "display": "flex", "justify-content": "space-between" },
+        "__title":        { "font-size": "18px", "font-weight": "600", "color": "#2B2B2B" },
+        "__body":         { "padding": "20px" },
+        "__footer":       { "padding": "20px", "border-top": "0", "display": "flex", "justify-content": "flex-end", "gap": "12px" }
+      }
+    },
+    "hf-modal__close": {
+      "description": "Close (×) button in modal header.",
+      "states": {
+        "default":        { "width": "32px", "height": "32px", "background": "transparent", "border": "0", "border-radius": "6px", "color": "#50627E", "cursor": "pointer", "transition": "background 200ms, color 200ms" },
+        ":hover":         { "background": "#F1F3F6", "color": "#2B2B2B" },
+        ":focus-visible": { "outline": "2px solid #24AFE8", "outline-offset": "2px" }
+      }
+    },
+    "hf-alert": {
+      "description": "In-page alert — .hf-alert. Portal-exact: white bg, 1px rgba(72,91,120,.15) border, 0 2px 4px rgba(72,91,120,.07) shadow, 6px radius, ::before 3px top accent bar, __icon 26×26 squared filled accent.",
+      "states": {
+        "default":        { "background": "#fff", "border": "1px solid rgba(72,91,120,0.15)", "border-radius": "6px", "box-shadow": "0 2px 4px 0 rgba(72,91,120,0.07)", "padding": "16px 48px 14px 20px", "position": "relative" },
+        "::before":       { "content": "''", "position": "absolute", "left": "0", "right": "0", "top": "0", "height": "3px", "background": "currentColor" },
+        "__icon":         { "width": "26px", "height": "26px", "border-radius": "5px", "background": "currentColor" },
+        "__icon > svg":   { "width": "16px", "height": "16px", "color": "#fff", "stroke": "#fff", "fill": "none" },
+        "__title":        { "font-size": "18px", "font-weight": "500", "color": "#2B2B2B", "line-height": "1.3" },
+        "__text":         { "font-size": "15px", "color": "#50627E", "line-height": "1.4" },
+        "__close":        { "position": "absolute", "top": "12px", "right": "12px", "width": "24px", "height": "24px", "color": "#99A1B7" },
+        "__close:hover":  { "color": "#2B2B2B", "background": "#F1F3F6" },
+        "--success":      { "color": "#59B59D" },
+        "--info":         { "color": "#24AFE8" },
+        "--warn":         { "color": "#FFBD5A" },
+        "--error":        { "color": "#EA6565" }
+      }
+    },
+    "hf-toast": {
+      "description": "Floating notification — .hf-toast. 9px radius, modal-shadow, single-line.",
+      "states": {
+        "default":        { "padding": "10px 14px", "background": "#fff", "border": "1px solid rgba(72,91,120,0.15)", "border-radius": "9px", "box-shadow": "0 6px 18px rgba(0,0,0,0.10)", "min-width": "280px", "max-width": "420px", "color": "#2B2B2B", "font-size": "14px" },
+        "__icon":         { "width": "20px", "height": "20px" },
+        "__close":        { "width": "20px", "height": "20px", "color": "#99A1B7", "transition": "color 200ms" },
+        "__close:hover":  { "color": "#2B2B2B" }
+      }
+    },
+    "hf-card-bordered": {
+      "description": "Bordered card (portal .portlet.light) — most common card variant. 12px radius, 1px #D1D6DD border, NO shadow.",
+      "states": {
+        "default":  { "background": "#fff", "border": "1px solid #D1D6DD", "border-radius": "12px", "padding": "20px", "box-shadow": "none" }
+      }
+    },
+    "hf-card-elevated": {
+      "description": "Elevated card (portal .dashboard-card) — KPI tiles. 6px radius, 1px rgba(72,91,120,.05) faint border, --shadow-subtle.",
+      "states": {
+        "default":  { "background": "#fff", "border": "1px solid rgba(72,91,120,0.05)", "border-radius": "6px", "padding": "16px", "box-shadow": "0 2px 4px 0 rgba(0,0,0,0.05)" },
+        ":hover":   { "box-shadow": "0 2px 3px rgba(0,0,0,0.06)" }
+      }
+    },
+    "tooltip": {
+      "description": "Tooltip / popover bubble",
+      "states": {
+        "default": { "background": "#2B2B2B", "color": "#fff", "border-radius": "6px", "font-size": "13px", "padding": "6px 10px", "box-shadow": "0 6px 18px rgba(0,0,0,0.1)" }
+      }
+    },
+    "global-focus-visible": {
+      "description": "Universal keyboard-focus rule. Apply to ALL focusable elements not covered above.",
+      "states": {
+        ":focus":         { "outline": "none" },
+        ":focus-visible": { "outline": "2px solid #24AFE8", "outline-offset": "2px" }
+      }
+    }
+  }
+}