@hotelfriendag/design-tokens 0.3.0

package/status-map.json

@@ -0,0 +1,47 @@
+{
+  "$schema-version": 1,
+  "$description": "Domain → semantic mapping for .status-{domain}-{state} CSS classes. Read by generate-tokens.cjs --target=status-css. Each entry: '{domain}.{state}' → semantic status slot name (matches tokens.figma.json semantic.color.status.*).",
+  "$note": "Phase 2A externalization of the hardcoded block previously in pre-built/components.css per RFC-0002 §Q7. Keeping this file authoritative ensures: (1) one source of truth, (2) AI agents reading the bundle see the mapping in JSON not buried in CSS, (3) tests can validate completeness vs the status pill spec.",
+
+  "booking": {
+    "new":               "warning",
+    "offer":             "violet",
+    "confirmed":         "info",
+    "check-in":          "olive",
+    "check-out":         "coral",
+    "no-show":           "error",
+    "due-in":            "success",
+    "due-out":           "orange-deep",
+    "canceled":          "cancel",
+    "canceled-by-hotel": "cancel",
+    "canceled-by-guest": "cancel",
+    "canceled-by-hf":    "cancel"
+  },
+  "order": {
+    "waiting":           "warning",
+    "confirmed":         "info",
+    "completed":         "success",
+    "in-progress":       "coral",
+    "action-required":   "error",
+    "canceled":          "cancel",
+    "canceled-by-hotel": "cancel",
+    "canceled-by-guest": "cancel",
+    "canceled-by-pos":   "cancel"
+  },
+  "front-desk": {
+    "quota-free":        "success",
+    "quota-busy":        "error",
+    "out-of-order":      "warning-strong"
+  },
+  "room-item-cleaning": {
+    "clean":             "success",
+    "cleaning":          "info",
+    "dirty":             "error",
+    "inspected":         "violet",
+    "out-of-service":    "cancel"
+  },
+  "_orphan": {
+    "$description": "Standalone classes that are not per-domain — emitted as .status-{key} (no domain prefix).",
+    "deleted":           "cancel"
+  }
+}

package/tokens.figma.json

@@ -0,0 +1,230 @@
+{
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": ["global"],
+    "version": "0.2.0",
+    "note": "Three-tier architecture per RFC-0002. `primitive` = raw values (palette ramps), `semantic` = role tokens (used by app code), non-color tokens stay flat at root. App code should reference SEMANTIC tokens; primitives are an implementation detail (themable layer)."
+  },
+  "global": {
+    "primitive": {
+      "color": {
+        "blue": {
+          "50":  { "value": "#E9F6FC", "type": "color", "description": "Light tint — active-state bg" },
+          "100": { "value": "#EFF6FF", "type": "color", "description": "Faint tint — reset-filters bg" },
+          "500": { "value": "#24AFE8", "type": "color", "description": "Canonical primary anchor (portal legacy SCSS still uses #26ADE4 — pending consolidation)" },
+          "600": { "value": "#149AD1", "type": "color", "description": "Primary hover" }
+        },
+        "gray": {
+          "25":  { "value": "#FBFBFC", "type": "color", "description": "Page background top" },
+          "50":  { "value": "#F6F7FB", "type": "color", "description": "Section backgrounds" },
+          "100": { "value": "#F1F3F6", "type": "color", "description": "Inputs bg, hover-bg, header bars" },
+          "200": { "value": "#E4E8EF", "type": "color", "description": "Border-light, dividers" },
+          "300": { "value": "#D1D6DD", "type": "color", "description": "Default border" },
+          "400": { "value": "#AEBCCF", "type": "color", "description": "Placeholder + disabled text — portal $dark__Grey" },
+          "500": { "value": "#99A1B7", "type": "color", "description": "Placeholder legacy / soft helper" },
+          "550": { "value": "#7E8EA6", "type": "color", "description": "Helper text on light bg" },
+          "600": { "value": "#50627E", "type": "color", "description": "Cancel-button text, ink-muted" },
+          "700": { "value": "#485B78", "type": "color", "description": "Steel-blue (tab/nav inactive) — Phase 2 component-tier" },
+          "800": { "value": "#4B5675", "type": "color", "description": "Secondary text" },
+          "900": { "value": "#2B2B2B", "type": "color", "description": "Body text, headings" },
+          "950": { "value": "#252F4A", "type": "color", "description": "Deepest ink (pagination active text) — Phase 2 component-tier" }
+        },
+        "green": {
+          "500": { "value": "#59B59D", "type": "color", "description": "Success / mint" }
+        },
+        "amber": {
+          "400": { "value": "#FFBD5A", "type": "color", "description": "Warning / buttermilk" },
+          "600": { "value": "#FFC900", "type": "color", "description": "Strong yellow — frontdesk OOO" }
+        },
+        "red": {
+          "400": { "value": "#EA6565", "type": "color", "description": "Error / rouge" },
+          "500": { "value": "#FB5A56", "type": "color", "description": "Cancel-red, deleted — between rouge and crimson" },
+          "700": { "value": "#D9534F", "type": "color", "description": "Deeper red — btn-danger" }
+        },
+        "orange": {
+          "500": { "value": "#F87921", "type": "color", "description": "Coral / peach" },
+          "700": { "value": "#A55505", "type": "color", "description": "Due-out brown" }
+        },
+        "violet": {
+          "500": { "value": "#5761D8", "type": "color", "description": "Offer, inspected" }
+        },
+        "slate": {
+          "500": { "value": "#7F8FA4", "type": "color", "description": "Canceled, deleted, OOS — cloud-gray" }
+        },
+        "olive": {
+          "700": { "value": "#5B7A02", "type": "color", "description": "Check-in (rare dark olive)" }
+        },
+        "white": { "value": "#FFFFFF", "type": "color" },
+        "black": { "value": "#000000", "type": "color" }
+      }
+    },
+    "semantic": {
+      "color": {
+        "accent": {
+          "default": { "value": "{primitive.color.blue.500}", "type": "color", "description": "Brand primary — links, primary buttons, focus" },
+          "hover":   { "value": "{primitive.color.blue.600}", "type": "color", "description": "Primary button hover" },
+          "subtle":  { "value": "{primitive.color.blue.50}",  "type": "color", "description": "Accent tint — selected nav, active row" },
+          "subtler": { "value": "{primitive.color.blue.100}", "type": "color", "description": "Even softer accent — reset-filters bg" }
+        },
+        "on-accent": { "value": "{primitive.color.white}",    "type": "color", "description": "Text/icons ON accent bg (Radix-style foreground pair)" },
+        "bg": {
+          "page":    { "value": "{primitive.color.gray.25}",  "type": "color", "description": "Page background (outermost)" },
+          "section": { "value": "{primitive.color.gray.50}",  "type": "color", "description": "Section bg, table header" },
+          "muted":   { "value": "{primitive.color.gray.100}", "type": "color", "description": "Input bg / hover bg / muted surface" },
+          "surface": { "value": "{primitive.color.white}",    "type": "color", "description": "Card / modal / popover surface" }
+        },
+        "fg": {
+          "default": { "value": "{primitive.color.gray.900}", "type": "color", "description": "Default text / heading color" },
+          "muted":   { "value": "{primitive.color.gray.800}", "type": "color", "description": "Secondary text, descriptions" },
+          "subtle":  { "value": "{primitive.color.gray.550}", "type": "color", "description": "Helper / hint text" },
+          "faint":   { "value": "{primitive.color.gray.400}", "type": "color", "description": "Placeholder + disabled input text" }
+        },
+        "border": {
+          "default": { "value": "{primitive.color.gray.300}", "type": "color", "description": "Default 1px border (buttons, inputs, chips)" },
+          "subtle":  { "value": "{primitive.color.gray.200}", "type": "color", "description": "Faint dividers, light borders" },
+          "strong":  { "value": "{primitive.color.gray.400}", "type": "color", "description": "Hover/focus border" }
+        },
+        "_component-tier-comment": {
+          "$description": "Component-tier tokens (RFC-0002 §3.3) — used when a single component needs a value that doesn't fit a generic semantic slot. Phase 2B promotes 4 portal-specific values out of components.css bare hex into addressable tokens. Naming: `{component}.{slot}` under semantic.color so Tailwind utilities work (text-hf-tab-fg-inactive etc.)."
+        },
+        "tab": {
+          "fg-inactive": { "value": "{primitive.color.gray.700}", "type": "color", "description": "Tab / nav-item text when NOT selected (.hf-tab, .hf-pill-tab default)" },
+          "count-fg":    { "value": "{primitive.color.gray.700}", "type": "color", "description": "Count-badge text inside an inactive tab" }
+        },
+        "pagination": {
+          "fg-inactive": { "value": "{primitive.color.gray.700}", "type": "color", "description": "Pagination item text when not active" },
+          "fg-active":   { "value": "{primitive.color.gray.950}", "type": "color", "description": "Pagination item text on the subtle-gray ACTIVE bg" }
+        },
+        "input": {
+          "border": { "value": "#DBDFE9", "type": "color", "description": "Input + checkbox/radio border — between gray-200 (#E4E8EF) and gray-300 (#D1D6DD); portal-exact, doesn't fit a primitive step" }
+        },
+        "menu": {
+          "bg-hover": { "value": "#F5F5F5", "type": "color", "description": "Dropdown item hover bg — slightly warmer than bg-muted; portal $table__hover" }
+        },
+        "status": {
+          "success":        { "value": "{primitive.color.green.500}",  "type": "color", "description": "Success, due-in, clean" },
+          "success-bg":     { "value": "rgba(89,181,157,0.15)",         "type": "color", "description": "Success @15% — pill bg" },
+          "warning":        { "value": "{primitive.color.amber.400}",  "type": "color", "description": "Warning, waiting, new" },
+          "warning-bg":     { "value": "rgba(255,189,90,0.15)",         "type": "color" },
+          "warning-strong":    { "value": "{primitive.color.amber.600}",  "type": "color", "description": "Frontdesk out-of-order — more saturated yellow" },
+          "warning-strong-bg": { "value": "rgba(255,201,0,0.15)",          "type": "color" },
+          "error":          { "value": "{primitive.color.red.400}",    "type": "color", "description": "Error, no-show, dirty, action-required" },
+          "error-bg":       { "value": "rgba(234,101,101,0.15)",        "type": "color" },
+          "error-strong":   { "value": "{primitive.color.red.700}",    "type": "color", "description": "btn-danger" },
+          "error-alt":      { "value": "{primitive.color.red.500}",    "type": "color", "description": "btn-cancel-red, deleted variant" },
+          "info":           { "value": "{semantic.color.accent.default}", "type": "color", "description": "Info = accent" },
+          "info-bg":        { "value": "rgba(36,175,232,0.15)",         "type": "color" },
+          "cancel":         { "value": "{primitive.color.slate.500}",  "type": "color", "description": "Cancellations, deleted, out-of-service" },
+          "cancel-bg":      { "value": "rgba(127,143,164,0.15)",        "type": "color" },
+          "coral":          { "value": "{primitive.color.orange.500}", "type": "color", "description": "Check-out, in-progress" },
+          "coral-bg":       { "value": "rgba(248,121,33,0.15)",         "type": "color" },
+          "violet":         { "value": "{primitive.color.violet.500}", "type": "color", "description": "Offer, inspected" },
+          "violet-bg":      { "value": "rgba(87,97,216,0.15)",          "type": "color" },
+          "olive":          { "value": "{primitive.color.olive.700}",  "type": "color", "description": "Check-in (rare deep olive)" },
+          "olive-bg":       { "value": "rgba(91,122,2,0.15)",           "type": "color" },
+          "orange-deep":    { "value": "{primitive.color.orange.700}", "type": "color", "description": "Due-out brown" },
+          "orange-deep-bg": { "value": "rgba(165,85,5,0.15)",           "type": "color" }
+        }
+      }
+    },
+
+    "fontFamily": {
+      "primary": { "value": "Roboto", "type": "fontFamilies" }
+    },
+    "fontWeight": {
+      "regular":  { "value": "400", "type": "fontWeights" },
+      "medium":   { "value": "500", "type": "fontWeights" },
+      "semibold": { "value": "600", "type": "fontWeights" }
+    },
+    "fontSize": {
+      "xs":     { "value": "11px", "type": "fontSizes", "description": "Tag labels, uppercase captions" },
+      "sm":     { "value": "13px", "type": "fontSizes", "description": "Grid headers, chips, sm buttons" },
+      "base":   { "value": "14px", "type": "fontSizes", "description": "Body, labels (most common — 218 occurrences)" },
+      "md":     { "value": "15px", "type": "fontSizes", "description": "Primary buttons" },
+      "lg":     { "value": "16px", "type": "fontSizes", "description": "Modal titles, large tabs" },
+      "xl":     { "value": "18px", "type": "fontSizes", "description": "Info-block titles, modal title" },
+      "2xl":    { "value": "20px", "type": "fontSizes", "description": "Section heading" },
+      "h2":     { "value": "24px", "type": "fontSizes" },
+      "page":   { "value": "26px", "type": "fontSizes", "description": "Page title" },
+      "hero":   { "value": "30px", "type": "fontSizes", "description": "Dashboard stat numbers" }
+    },
+    "lineHeight": {
+      "headings": { "value": "1.2", "type": "lineHeights" },
+      "body":     { "value": "1.5", "type": "lineHeights" },
+      "tight":    { "value": "1",   "type": "lineHeights" }
+    },
+    "typography": {
+      "pageTitle":  { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.semibold}", "fontSize": "{fontSize.page}", "lineHeight": "{lineHeight.headings}" }, "type": "typography" },
+      "btn":        { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.semibold}", "fontSize": "{fontSize.md}",   "lineHeight": "{lineHeight.body}"     }, "type": "typography" },
+      "body":       { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.regular}",  "fontSize": "{fontSize.base}", "lineHeight": "{lineHeight.body}"     }, "type": "typography" },
+      "label":      { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.medium}",   "fontSize": "{fontSize.base}", "lineHeight": "{lineHeight.body}"     }, "type": "typography" },
+      "gridHeader": { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.medium}",   "fontSize": "{fontSize.sm}",   "lineHeight": "{lineHeight.body}"     }, "type": "typography" },
+      "tagLabel":   { "value": { "fontFamily": "{fontFamily.primary}", "fontWeight": "{fontWeight.medium}",   "fontSize": "{fontSize.xs}",   "lineHeight": "{lineHeight.headings}" }, "type": "typography", "description": "Uppercase, letter-spacing 0.05em" }
+    },
+
+    "spacing": {
+      "0":   { "value": "0px",  "type": "spacing" },
+      "1":   { "value": "4px",  "type": "spacing" },
+      "2":   { "value": "8px",  "type": "spacing" },
+      "3":   { "value": "12px", "type": "spacing" },
+      "4":   { "value": "16px", "type": "spacing" },
+      "5":   { "value": "20px", "type": "spacing", "description": "Default section gap" },
+      "6":   { "value": "24px", "type": "spacing" },
+      "7":   { "value": "30px", "type": "spacing" },
+      "8":   { "value": "32px", "type": "spacing" }
+    },
+
+    "radius": {
+      "sm":   { "value": "6px",  "type": "borderRadius", "description": "Buttons, inputs, status pills, modals (portal-exact)" },
+      "md":   { "value": "8px",  "type": "borderRadius", "description": "Pagination items" },
+      "lg":   { "value": "9px",  "type": "borderRadius", "description": "Dropdowns, toasts, pill-tabs" },
+      "xl":   { "value": "12px", "type": "borderRadius", "description": "Large elevated cards" },
+      "pill": { "value": "99px", "type": "borderRadius", "description": "Rounded pill (rare — most status pills are 6px square)" }
+    },
+
+    "shadow": {
+      "default": { "value": { "x": "0", "y": "1", "blur": "8",  "spread": "0", "color": "rgba(0,0,0,0.1)",   "type": "dropShadow" }, "type": "boxShadow", "description": "Default elevation — buttons, sticky bars" },
+      "subtle":  { "value": { "x": "0", "y": "2", "blur": "4",  "spread": "0", "color": "rgba(0,0,0,0.05)",  "type": "dropShadow" }, "type": "boxShadow", "description": "Portal .dashboard-card — very faint elevation" },
+      "wrapper": { "value": { "x": "0", "y": "3", "blur": "4",  "spread": "0", "color": "rgba(0,0,0,0.03)",  "type": "dropShadow" }, "type": "boxShadow", "description": "Card frame (legacy)" },
+      "card":    { "value": { "x": "0", "y": "12","blur": "24", "spread": "0", "color": "rgba(26,26,30,0.06)","type": "dropShadow" }, "type": "boxShadow", "description": "Elevated card / large surface" },
+      "modal":   { "value": { "x": "0", "y": "6", "blur": "18", "spread": "0", "color": "rgba(0,0,0,0.1)",   "type": "dropShadow" }, "type": "boxShadow", "description": "Modal / dropdown / popover floating UI" },
+      "outline": { "value": { "x": "0", "y": "1", "blur": "2",  "spread": "0", "color": "rgba(72,91,120,0.18)","type": "dropShadow" }, "type": "boxShadow", "description": "Outline button micro-elevation" },
+      "hover":   { "value": { "x": "0", "y": "2", "blur": "3",  "spread": "0", "color": "rgba(0,0,0,0.06)",  "type": "dropShadow" }, "type": "boxShadow", "description": "Hover lift" }
+    },
+
+    "opacity": {
+      "disabled": { "value": "0.6", "type": "opacity", "description": "Disabled state" },
+      "tint":     { "value": "0.15", "type": "opacity", "description": "Status badge bg alpha" }
+    },
+
+    "size": {
+      "sidebarExpanded":  { "value": "215px", "type": "sizing" },
+      "sidebarCollapsed": { "value": "80px",  "type": "sizing" },
+      "headerHeight":     { "value": "60px",  "type": "sizing" },
+      "contentMax":       { "value": "1440px","type": "sizing" },
+      "btnDefault":       { "value": "40px",  "type": "sizing", "description": "Primary button height" },
+      "btnSm":            { "value": "32px",  "type": "sizing" },
+      "btnSearch":        { "value": "38px",  "type": "sizing", "description": "Inline filter/search submit height" },
+      "inputDefault":     { "value": "39px",  "type": "sizing", "description": "Form-control input height" },
+      "tapTarget":        { "value": "44px",  "type": "sizing", "description": "Mobile minimum tap target" }
+    },
+
+    "zIndex": {
+      "sidebar":         { "value": "1000",   "type": "other" },
+      "dropdown":        { "value": "1001",   "type": "other" },
+      "datepicker":      { "value": "3000",   "type": "other" },
+      "stickyTopbar":    { "value": "4000",   "type": "other" },
+      "modalBackdrop":   { "value": "10050",  "type": "other" },
+      "modalDialog":     { "value": "10051",  "type": "other" },
+      "preloader":       { "value": "99999",  "type": "other" },
+      "topmostOverlay":  { "value": "1000001","type": "other", "description": "Above all" }
+    },
+
+    "motion": {
+      "fast":     { "value": "0.1s", "type": "other" },
+      "default":  { "value": "0.2s ease-in-out", "type": "other", "description": "Canonical transition" },
+      "slow":     { "value": "0.3s", "type": "other", "description": "Most common in legacy CSS — being normalized down to 0.2s" },
+      "bouncy":   { "value": "0.4s cubic-bezier(0.88, -0.99, 0, 1.81)", "type": "other" }
+    }
+  }
+}