@hotelfriendag/design-tokens 0.3.0

package/pre-built/tokens.js

@@ -0,0 +1,243 @@
+// HotelFriend design tokens — CommonJS module
+// Generated from docs/tokens.figma.json — do NOT edit by hand.
+//
+// Works with both `require("@hotelfriendag/design-tokens").tokens` and
+// ESM `import { tokens } from "@hotelfriendag/design-tokens"` via Node CJS-ESM interop.
+
+const tokens = {
+  "color": {
+    "blue": {
+      "50": "#E9F6FC",
+      "100": "#EFF6FF",
+      "500": "#24AFE8",
+      "600": "#149AD1"
+    },
+    "gray": {
+      "25": "#FBFBFC",
+      "50": "#F6F7FB",
+      "100": "#F1F3F6",
+      "200": "#E4E8EF",
+      "300": "#D1D6DD",
+      "400": "#AEBCCF",
+      "500": "#99A1B7",
+      "550": "#7E8EA6",
+      "600": "#50627E",
+      "700": "#485B78",
+      "800": "#4B5675",
+      "900": "#2B2B2B",
+      "950": "#252F4A"
+    },
+    "green": {
+      "500": "#59B59D"
+    },
+    "amber": {
+      "400": "#FFBD5A",
+      "600": "#FFC900"
+    },
+    "red": {
+      "400": "#EA6565",
+      "500": "#FB5A56",
+      "700": "#D9534F"
+    },
+    "orange": {
+      "500": "#F87921",
+      "700": "#A55505"
+    },
+    "violet": {
+      "500": "#5761D8"
+    },
+    "slate": {
+      "500": "#7F8FA4"
+    },
+    "olive": {
+      "700": "#5B7A02"
+    },
+    "white": "#FFFFFF",
+    "black": "#000000",
+    "accent": {
+      "default": "{primitive.color.blue.500}",
+      "hover": "{primitive.color.blue.600}",
+      "subtle": "{primitive.color.blue.50}",
+      "subtler": "{primitive.color.blue.100}"
+    },
+    "on-accent": "{primitive.color.white}",
+    "bg": {
+      "page": "{primitive.color.gray.25}",
+      "section": "{primitive.color.gray.50}",
+      "muted": "{primitive.color.gray.100}",
+      "surface": "{primitive.color.white}"
+    },
+    "fg": {
+      "default": "{primitive.color.gray.900}",
+      "muted": "{primitive.color.gray.800}",
+      "subtle": "{primitive.color.gray.550}",
+      "faint": "{primitive.color.gray.400}"
+    },
+    "border": {
+      "default": "{primitive.color.gray.300}",
+      "subtle": "{primitive.color.gray.200}",
+      "strong": "{primitive.color.gray.400}"
+    },
+    "tab": {
+      "fg-inactive": "{primitive.color.gray.700}",
+      "count-fg": "{primitive.color.gray.700}"
+    },
+    "pagination": {
+      "fg-inactive": "{primitive.color.gray.700}",
+      "fg-active": "{primitive.color.gray.950}"
+    },
+    "input": {
+      "border": "#DBDFE9"
+    },
+    "menu": {
+      "bg-hover": "#F5F5F5"
+    },
+    "status": {
+      "success": "{primitive.color.green.500}",
+      "success-bg": "rgba(89,181,157,0.15)",
+      "warning": "{primitive.color.amber.400}",
+      "warning-bg": "rgba(255,189,90,0.15)",
+      "warning-strong": "{primitive.color.amber.600}",
+      "warning-strong-bg": "rgba(255,201,0,0.15)",
+      "error": "{primitive.color.red.400}",
+      "error-bg": "rgba(234,101,101,0.15)",
+      "error-strong": "{primitive.color.red.700}",
+      "error-alt": "{primitive.color.red.500}",
+      "info": "{semantic.color.accent.default}",
+      "info-bg": "rgba(36,175,232,0.15)",
+      "cancel": "{primitive.color.slate.500}",
+      "cancel-bg": "rgba(127,143,164,0.15)",
+      "coral": "{primitive.color.orange.500}",
+      "coral-bg": "rgba(248,121,33,0.15)",
+      "violet": "{primitive.color.violet.500}",
+      "violet-bg": "rgba(87,97,216,0.15)",
+      "olive": "{primitive.color.olive.700}",
+      "olive-bg": "rgba(91,122,2,0.15)",
+      "orange-deep": "{primitive.color.orange.700}",
+      "orange-deep-bg": "rgba(165,85,5,0.15)"
+    }
+  },
+  "fontFamily": {
+    "primary": "Roboto"
+  },
+  "fontWeight": {
+    "regular": "400",
+    "medium": "500",
+    "semibold": "600"
+  },
+  "fontSize": {
+    "xs": "11px",
+    "sm": "13px",
+    "base": "14px",
+    "md": "15px",
+    "lg": "16px",
+    "xl": "18px",
+    "2xl": "20px",
+    "h2": "24px",
+    "page": "26px",
+    "hero": "30px"
+  },
+  "lineHeight": {
+    "headings": "1.2",
+    "body": "1.5",
+    "tight": "1"
+  },
+  "typography": {
+    "pageTitle": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.semibold}",
+      "fontSize": "{fontSize.page}",
+      "lineHeight": "{lineHeight.headings}"
+    },
+    "btn": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.semibold}",
+      "fontSize": "{fontSize.md}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "body": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.regular}",
+      "fontSize": "{fontSize.base}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "label": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.base}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "gridHeader": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.sm}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "tagLabel": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.xs}",
+      "lineHeight": "{lineHeight.headings}"
+    }
+  },
+  "spacing": {
+    "0": "0px",
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "30px",
+    "8": "32px"
+  },
+  "radius": {
+    "sm": "6px",
+    "md": "8px",
+    "lg": "9px",
+    "xl": "12px",
+    "pill": "99px"
+  },
+  "shadow": {
+    "default": "0px 1px 8px 0px rgba(0,0,0,0.1)",
+    "subtle": "0px 2px 4px 0px rgba(0,0,0,0.05)",
+    "wrapper": "0px 3px 4px 0px rgba(0,0,0,0.03)",
+    "card": "0px 12px 24px 0px rgba(26,26,30,0.06)",
+    "modal": "0px 6px 18px 0px rgba(0,0,0,0.1)",
+    "outline": "0px 1px 2px 0px rgba(72,91,120,0.18)",
+    "hover": "0px 2px 3px 0px rgba(0,0,0,0.06)"
+  },
+  "opacity": {
+    "disabled": "0.6",
+    "tint": "0.15"
+  },
+  "size": {
+    "sidebarExpanded": "215px",
+    "sidebarCollapsed": "80px",
+    "headerHeight": "60px",
+    "contentMax": "1440px",
+    "btnDefault": "40px",
+    "btnSm": "32px",
+    "btnSearch": "38px",
+    "inputDefault": "39px",
+    "tapTarget": "44px"
+  },
+  "zIndex": {
+    "sidebar": "1000",
+    "dropdown": "1001",
+    "datepicker": "3000",
+    "stickyTopbar": "4000",
+    "modalBackdrop": "10050",
+    "modalDialog": "10051",
+    "preloader": "99999",
+    "topmostOverlay": "1000001"
+  },
+  "motion": {
+    "fast": "0.1s",
+    "default": "0.2s ease-in-out",
+    "slow": "0.3s",
+    "bouncy": "0.4s cubic-bezier(0.88, -0.99, 0, 1.81)"
+  }
+};
+
+module.exports = { tokens };

package/pre-built/tokens.ts

@@ -0,0 +1,240 @@
+// HotelFriend design tokens — TypeScript const
+// Generated from docs/tokens.figma.json — do NOT edit by hand.
+
+export const tokens = {
+  "color": {
+    "blue": {
+      "50": "#E9F6FC",
+      "100": "#EFF6FF",
+      "500": "#24AFE8",
+      "600": "#149AD1"
+    },
+    "gray": {
+      "25": "#FBFBFC",
+      "50": "#F6F7FB",
+      "100": "#F1F3F6",
+      "200": "#E4E8EF",
+      "300": "#D1D6DD",
+      "400": "#AEBCCF",
+      "500": "#99A1B7",
+      "550": "#7E8EA6",
+      "600": "#50627E",
+      "700": "#485B78",
+      "800": "#4B5675",
+      "900": "#2B2B2B",
+      "950": "#252F4A"
+    },
+    "green": {
+      "500": "#59B59D"
+    },
+    "amber": {
+      "400": "#FFBD5A",
+      "600": "#FFC900"
+    },
+    "red": {
+      "400": "#EA6565",
+      "500": "#FB5A56",
+      "700": "#D9534F"
+    },
+    "orange": {
+      "500": "#F87921",
+      "700": "#A55505"
+    },
+    "violet": {
+      "500": "#5761D8"
+    },
+    "slate": {
+      "500": "#7F8FA4"
+    },
+    "olive": {
+      "700": "#5B7A02"
+    },
+    "white": "#FFFFFF",
+    "black": "#000000",
+    "accent": {
+      "default": "{primitive.color.blue.500}",
+      "hover": "{primitive.color.blue.600}",
+      "subtle": "{primitive.color.blue.50}",
+      "subtler": "{primitive.color.blue.100}"
+    },
+    "on-accent": "{primitive.color.white}",
+    "bg": {
+      "page": "{primitive.color.gray.25}",
+      "section": "{primitive.color.gray.50}",
+      "muted": "{primitive.color.gray.100}",
+      "surface": "{primitive.color.white}"
+    },
+    "fg": {
+      "default": "{primitive.color.gray.900}",
+      "muted": "{primitive.color.gray.800}",
+      "subtle": "{primitive.color.gray.550}",
+      "faint": "{primitive.color.gray.400}"
+    },
+    "border": {
+      "default": "{primitive.color.gray.300}",
+      "subtle": "{primitive.color.gray.200}",
+      "strong": "{primitive.color.gray.400}"
+    },
+    "tab": {
+      "fg-inactive": "{primitive.color.gray.700}",
+      "count-fg": "{primitive.color.gray.700}"
+    },
+    "pagination": {
+      "fg-inactive": "{primitive.color.gray.700}",
+      "fg-active": "{primitive.color.gray.950}"
+    },
+    "input": {
+      "border": "#DBDFE9"
+    },
+    "menu": {
+      "bg-hover": "#F5F5F5"
+    },
+    "status": {
+      "success": "{primitive.color.green.500}",
+      "success-bg": "rgba(89,181,157,0.15)",
+      "warning": "{primitive.color.amber.400}",
+      "warning-bg": "rgba(255,189,90,0.15)",
+      "warning-strong": "{primitive.color.amber.600}",
+      "warning-strong-bg": "rgba(255,201,0,0.15)",
+      "error": "{primitive.color.red.400}",
+      "error-bg": "rgba(234,101,101,0.15)",
+      "error-strong": "{primitive.color.red.700}",
+      "error-alt": "{primitive.color.red.500}",
+      "info": "{semantic.color.accent.default}",
+      "info-bg": "rgba(36,175,232,0.15)",
+      "cancel": "{primitive.color.slate.500}",
+      "cancel-bg": "rgba(127,143,164,0.15)",
+      "coral": "{primitive.color.orange.500}",
+      "coral-bg": "rgba(248,121,33,0.15)",
+      "violet": "{primitive.color.violet.500}",
+      "violet-bg": "rgba(87,97,216,0.15)",
+      "olive": "{primitive.color.olive.700}",
+      "olive-bg": "rgba(91,122,2,0.15)",
+      "orange-deep": "{primitive.color.orange.700}",
+      "orange-deep-bg": "rgba(165,85,5,0.15)"
+    }
+  },
+  "fontFamily": {
+    "primary": "Roboto"
+  },
+  "fontWeight": {
+    "regular": "400",
+    "medium": "500",
+    "semibold": "600"
+  },
+  "fontSize": {
+    "xs": "11px",
+    "sm": "13px",
+    "base": "14px",
+    "md": "15px",
+    "lg": "16px",
+    "xl": "18px",
+    "2xl": "20px",
+    "h2": "24px",
+    "page": "26px",
+    "hero": "30px"
+  },
+  "lineHeight": {
+    "headings": "1.2",
+    "body": "1.5",
+    "tight": "1"
+  },
+  "typography": {
+    "pageTitle": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.semibold}",
+      "fontSize": "{fontSize.page}",
+      "lineHeight": "{lineHeight.headings}"
+    },
+    "btn": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.semibold}",
+      "fontSize": "{fontSize.md}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "body": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.regular}",
+      "fontSize": "{fontSize.base}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "label": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.base}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "gridHeader": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.sm}",
+      "lineHeight": "{lineHeight.body}"
+    },
+    "tagLabel": {
+      "fontFamily": "{fontFamily.primary}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.xs}",
+      "lineHeight": "{lineHeight.headings}"
+    }
+  },
+  "spacing": {
+    "0": "0px",
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "30px",
+    "8": "32px"
+  },
+  "radius": {
+    "sm": "6px",
+    "md": "8px",
+    "lg": "9px",
+    "xl": "12px",
+    "pill": "99px"
+  },
+  "shadow": {
+    "default": "0px 1px 8px 0px rgba(0,0,0,0.1)",
+    "subtle": "0px 2px 4px 0px rgba(0,0,0,0.05)",
+    "wrapper": "0px 3px 4px 0px rgba(0,0,0,0.03)",
+    "card": "0px 12px 24px 0px rgba(26,26,30,0.06)",
+    "modal": "0px 6px 18px 0px rgba(0,0,0,0.1)",
+    "outline": "0px 1px 2px 0px rgba(72,91,120,0.18)",
+    "hover": "0px 2px 3px 0px rgba(0,0,0,0.06)"
+  },
+  "opacity": {
+    "disabled": "0.6",
+    "tint": "0.15"
+  },
+  "size": {
+    "sidebarExpanded": "215px",
+    "sidebarCollapsed": "80px",
+    "headerHeight": "60px",
+    "contentMax": "1440px",
+    "btnDefault": "40px",
+    "btnSm": "32px",
+    "btnSearch": "38px",
+    "inputDefault": "39px",
+    "tapTarget": "44px"
+  },
+  "zIndex": {
+    "sidebar": "1000",
+    "dropdown": "1001",
+    "datepicker": "3000",
+    "stickyTopbar": "4000",
+    "modalBackdrop": "10050",
+    "modalDialog": "10051",
+    "preloader": "99999",
+    "topmostOverlay": "1000001"
+  },
+  "motion": {
+    "fast": "0.1s",
+    "default": "0.2s ease-in-out",
+    "slow": "0.3s",
+    "bouncy": "0.4s cubic-bezier(0.88, -0.99, 0, 1.81)"
+  }
+} as const;
+
+export type Tokens = typeof tokens;

package/scripts/integration-smoke.sh

@@ -0,0 +1,91 @@
+#!/usr/bin/env bash
+# integration-smoke.sh — sanity checks for design-system as a consumed submodule/package.
+#
+# Runs:
+#   1. `npm run build` is byte-stable (no drift in pre-built/ after rebuild)
+#   2. `npm run validate` passes
+#   3. Critical hf-prefixed tokens exist in pre-built/tailwind.css
+#   4. Critical .hf-* primitives exist in pre-built/components.css
+#   5. Every path in package.json `exports` resolves to an existing file
+#
+# Exits non-zero on any failure. Suitable for CI in this repo AND for running
+# from a consumer project (e.g. `cd design-system && ./scripts/integration-smoke.sh`)
+# right after `git submodule update --remote` to confirm the bumped pin is healthy.
+
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+fail() { printf '✗ %s\n' "$*" >&2; exit 1; }
+ok()   { printf '✓ %s\n'   "$*"; }
+
+# --- 1. Build is reproducible ----------------------------------------------
+echo "→ rebuild + drift check"
+npm run --silent build >/dev/null
+if ! git diff --quiet -- pre-built/; then
+  git --no-pager diff --stat -- pre-built/
+  fail "pre-built/ drifts after rebuild — sources and outputs are out of sync"
+fi
+ok "pre-built/ is byte-stable"
+
+# --- 2. Validator passes ---------------------------------------------------
+echo "→ validate-tokens"
+npm run --silent validate >/dev/null
+ok "validate-tokens: all checks passed"
+
+# --- 3. Tailwind v4 @theme has the canonical hf-prefixed tokens ------------
+echo "→ tailwind.css canonical tokens"
+required_tw=(
+  "--color-hf-accent"
+  "--color-hf-accent-hover"
+  "--color-hf-fg"
+  "--color-hf-border"
+  "--text-hf-base"
+  "--radius-hf-sm"
+  "--spacing-hf-7"
+  "--font-hf-sans"
+  "--shadow-hf-modal"
+)
+for name in "${required_tw[@]}"; do
+  grep -qF -- "$name" pre-built/tailwind.css \
+    || fail "missing token in pre-built/tailwind.css: $name (Phase 1A regression?)"
+done
+ok "tailwind.css carries all canonical hf-prefixed tokens"
+
+# --- 4. components.css has the headline .hf-* primitives -------------------
+echo "→ components.css primitives"
+required_hf=(
+  ".hf-modal"
+  ".hf-pill"
+  ".hf-tab"
+  ".hf-pagination"
+  ".hf-alert"
+  ".hf-check"
+  ".hf-radio"
+  ".hf-dropdown-menu"
+)
+for cls in "${required_hf[@]}"; do
+  grep -qF -- "$cls" pre-built/components.css \
+    || fail "missing primitive in pre-built/components.css: $cls"
+done
+ok "components.css contains all headline .hf-* primitives"
+
+# --- 5. Every exports path resolves ----------------------------------------
+echo "→ package.json exports resolution"
+node --input-type=module -e '
+  import("node:fs").then(({readFileSync, existsSync}) => {
+    const pkg = JSON.parse(readFileSync("package.json", "utf8"));
+    const flatten = (v) => typeof v === "string"
+      ? [v]
+      : Object.values(v).flatMap(flatten);
+    const targets = Object.values(pkg.exports || {}).flatMap(flatten);
+    const missing = targets.filter(p => !existsSync(p.replace(/^\.\//, "")));
+    if (missing.length) {
+      console.error("missing exports targets:\n  - " + missing.join("\n  - "));
+      process.exit(1);
+    }
+  });
+' || fail "package.json exports references files that do not exist"
+ok "all package.json exports resolve to existing files"
+
+printf '\n✓ integration smoke OK — design-system is ready to consume.\n'

package/scripts/pre-commit.sh

@@ -0,0 +1,55 @@
+#!/bin/sh
+# Pre-commit hook — runs validate-tokens.cjs to catch design-system drift
+# before commit. Drop into .husky/pre-commit (with husky) or .git/hooks/pre-commit.
+#
+# Phase 3C (RFC-0001 §4.6) — drift detection enforcement.
+#
+# Setup:
+#
+#   With husky (recommended):
+#     pnpm add -D husky
+#     pnpm husky init
+#     cp docs/portable-design/scripts/pre-commit.sh .husky/pre-commit
+#     chmod +x .husky/pre-commit
+#
+#   Without husky (raw git hook):
+#     cp docs/portable-design/scripts/pre-commit.sh .git/hooks/pre-commit
+#     chmod +x .git/hooks/pre-commit
+#
+# The hook is silent on success and prints a clear error list on failure.
+
+set -e
+
+# Resolve the bundle path. Adjust if your bundle lives elsewhere.
+BUNDLE_DIR="docs/portable-design"
+
+if [ ! -d "$BUNDLE_DIR" ]; then
+  # If bundle moved, try common alternatives
+  for alt in "design-system" "packages/design-tokens" "."; do
+    if [ -f "$alt/scripts/validate-tokens.cjs" ]; then
+      BUNDLE_DIR="$alt"
+      break
+    fi
+  done
+fi
+
+if [ ! -f "$BUNDLE_DIR/scripts/validate-tokens.cjs" ]; then
+  echo "⚠ pre-commit: validate-tokens.cjs not found at $BUNDLE_DIR/scripts/"
+  echo "  Skipping design-system drift check. Update BUNDLE_DIR in this hook."
+  exit 0
+fi
+
+# Only run if any token-related file is staged
+STAGED=$(git diff --cached --name-only)
+if echo "$STAGED" | grep -qE "$BUNDLE_DIR/(tokens\.figma\.json|status-map\.json|pre-built/.*\.(css|js|ts|cjs|scss)|.*\.md|components\.html|generate-tokens\.cjs)"; then
+  echo "→ Running design-system validator (changes detected in bundle)…"
+  cd "$BUNDLE_DIR"
+  if ! node scripts/validate-tokens.cjs; then
+    echo ""
+    echo "✗ pre-commit: design-system drift detected. Fix the issues above and re-commit."
+    echo "  To bypass (NOT recommended), use: git commit --no-verify"
+    exit 1
+  fi
+fi
+
+exit 0