@hotelfriendag/design-tokens 0.3.0

package/pre-built/tailwind.preset.js

@@ -0,0 +1,207 @@
+/**
+ * HotelFriend design tokens — Tailwind v3 preset (legacy)
+ * Generated from docs/tokens.figma.json — do NOT edit by hand.
+ *
+ * For new projects use --target=tailwind-v4 (pre-built/tailwind.css).
+ *
+ * Usage in tailwind.config.js:
+ *   const hfPreset = require("./tailwind.preset.js");
+ *   module.exports = { presets: [hfPreset], content: [...] };
+ */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+            "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"
+            ]
+      },
+      fontSize: {
+            "xs": "11px",
+            "sm": "13px",
+            "base": "14px",
+            "md": "15px",
+            "lg": "16px",
+            "xl": "18px",
+            "2xl": "20px",
+            "h2": "24px",
+            "page": "26px",
+            "hero": "30px"
+      },
+      fontWeight: {
+            "regular": "400",
+            "medium": "500",
+            "semibold": "600"
+      },
+      lineHeight: {
+            "headings": "1.2",
+            "body": "1.5",
+            "tight": "1"
+      },
+      borderRadius: {
+            "sm": "6px",
+            "md": "8px",
+            "lg": "9px",
+            "xl": "12px",
+            "pill": "99px"
+      },
+      spacing: {
+            "0": "0px",
+            "1": "4px",
+            "2": "8px",
+            "3": "12px",
+            "4": "16px",
+            "5": "20px",
+            "6": "24px",
+            "7": "30px",
+            "8": "32px",
+            "sidebarExpanded": "215px",
+            "sidebarCollapsed": "80px",
+            "headerHeight": "60px",
+            "contentMax": "1440px",
+            "btnDefault": "40px",
+            "btnSm": "32px",
+            "btnSearch": "38px",
+            "inputDefault": "39px",
+            "tapTarget": "44px"
+      },
+      boxShadow: {
+            "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)"
+      },
+      zIndex: {
+            "sidebar": "1000",
+            "dropdown": "1001",
+            "datepicker": "3000",
+            "stickyTopbar": "4000",
+            "modalBackdrop": "10050",
+            "modalDialog": "10051",
+            "preloader": "99999",
+            "topmostOverlay": "1000001"
+      },
+      transitionTimingFunction: {
+            "fast": "0.1s",
+            "default": "0.2s ease-in-out",
+            "slow": "0.3s",
+            "bouncy": "0.4s cubic-bezier(0.88, -0.99, 0, 1.81)"
+      },
+    },
+  },
+};

package/pre-built/tokens.css

@@ -0,0 +1,185 @@
+/*
+ * HotelFriend design tokens — CSS custom properties
+ * Generated from docs/tokens.figma.json — do NOT edit by hand.
+ *
+ * Three-tier model per RFC-0002:
+ *   primitive.* → raw palette values (--color-hf-blue-500, --color-hf-gray-300, …)
+ *   semantic.*  → role tokens via var() chain (--color-hf-accent → var(--color-hf-blue-500))
+ *
+ * App code should reference SEMANTIC tokens. Primitives are theming-layer detail.
+ */
+:root {
+  --color-hf-blue-50: #E9F6FC; /* Light tint — active-state bg */
+  --color-hf-blue-100: #EFF6FF; /* Faint tint — reset-filters bg */
+  --color-hf-blue-500: #24AFE8; /* Canonical primary anchor (portal legacy SCSS still uses #26ADE4 — pending consolidation) */
+  --color-hf-blue-600: #149AD1; /* Primary hover */
+  --color-hf-gray-25: #FBFBFC; /* Page background top */
+  --color-hf-gray-50: #F6F7FB; /* Section backgrounds */
+  --color-hf-gray-100: #F1F3F6; /* Inputs bg, hover-bg, header bars */
+  --color-hf-gray-200: #E4E8EF; /* Border-light, dividers */
+  --color-hf-gray-300: #D1D6DD; /* Default border */
+  --color-hf-gray-400: #AEBCCF; /* Placeholder + disabled text — portal $dark__Grey */
+  --color-hf-gray-500: #99A1B7; /* Placeholder legacy / soft helper */
+  --color-hf-gray-550: #7E8EA6; /* Helper text on light bg */
+  --color-hf-gray-600: #50627E; /* Cancel-button text, ink-muted */
+  --color-hf-gray-700: #485B78; /* Steel-blue (tab/nav inactive) — Phase 2 component-tier */
+  --color-hf-gray-800: #4B5675; /* Secondary text */
+  --color-hf-gray-900: #2B2B2B; /* Body text, headings */
+  --color-hf-gray-950: #252F4A; /* Deepest ink (pagination active text) — Phase 2 component-tier */
+  --color-hf-green-500: #59B59D; /* Success / mint */
+  --color-hf-amber-400: #FFBD5A; /* Warning / buttermilk */
+  --color-hf-amber-600: #FFC900; /* Strong yellow — frontdesk OOO */
+  --color-hf-red-400: #EA6565; /* Error / rouge */
+  --color-hf-red-500: #FB5A56; /* Cancel-red, deleted — between rouge and crimson */
+  --color-hf-red-700: #D9534F; /* Deeper red — btn-danger */
+  --color-hf-orange-500: #F87921; /* Coral / peach */
+  --color-hf-orange-700: #A55505; /* Due-out brown */
+  --color-hf-violet-500: #5761D8; /* Offer, inspected */
+  --color-hf-slate-500: #7F8FA4; /* Canceled, deleted, OOS — cloud-gray */
+  --color-hf-olive-700: #5B7A02; /* Check-in (rare dark olive) */
+  --color-hf-white: #FFFFFF;
+  --color-hf-black: #000000;
+  --color-hf-accent: var(--color-hf-blue-500); /* Brand primary — links, primary buttons, focus */
+  --color-hf-accent-hover: var(--color-hf-blue-600); /* Primary button hover */
+  --color-hf-accent-subtle: var(--color-hf-blue-50); /* Accent tint — selected nav, active row */
+  --color-hf-accent-subtler: var(--color-hf-blue-100); /* Even softer accent — reset-filters bg */
+  --color-hf-on-accent: var(--color-hf-white); /* Text/icons ON accent bg (Radix-style foreground pair) */
+  --color-hf-bg-page: var(--color-hf-gray-25); /* Page background (outermost) */
+  --color-hf-bg-section: var(--color-hf-gray-50); /* Section bg, table header */
+  --color-hf-bg-muted: var(--color-hf-gray-100); /* Input bg / hover bg / muted surface */
+  --color-hf-bg-surface: var(--color-hf-white); /* Card / modal / popover surface */
+  --color-hf-fg: var(--color-hf-gray-900); /* Default text / heading color */
+  --color-hf-fg-muted: var(--color-hf-gray-800); /* Secondary text, descriptions */
+  --color-hf-fg-subtle: var(--color-hf-gray-550); /* Helper / hint text */
+  --color-hf-fg-faint: var(--color-hf-gray-400); /* Placeholder + disabled input text */
+  --color-hf-border: var(--color-hf-gray-300); /* Default 1px border (buttons, inputs, chips) */
+  --color-hf-border-subtle: var(--color-hf-gray-200); /* Faint dividers, light borders */
+  --color-hf-border-strong: var(--color-hf-gray-400); /* Hover/focus border */
+  --color-hf-tab-fg-inactive: var(--color-hf-gray-700); /* Tab / nav-item text when NOT selected (.hf-tab, .hf-pill-tab default) */
+  --color-hf-tab-count-fg: var(--color-hf-gray-700); /* Count-badge text inside an inactive tab */
+  --color-hf-pagination-fg-inactive: var(--color-hf-gray-700); /* Pagination item text when not active */
+  --color-hf-pagination-fg-active: var(--color-hf-gray-950); /* Pagination item text on the subtle-gray ACTIVE bg */
+  --color-hf-input-border: #DBDFE9; /* Input + checkbox/radio border — between gray-200 (#E4E8EF) and gray-300 (#D1D6DD); portal-exact, doesn't fit a primitive step */
+  --color-hf-menu-bg-hover: #F5F5F5; /* Dropdown item hover bg — slightly warmer than bg-muted; portal $table__hover */
+  --color-hf-status-success: var(--color-hf-green-500); /* Success, due-in, clean */
+  --color-hf-status-success-bg: rgba(89,181,157,0.15); /* Success @15% — pill bg */
+  --color-hf-status-warning: var(--color-hf-amber-400); /* Warning, waiting, new */
+  --color-hf-status-warning-bg: rgba(255,189,90,0.15);
+  --color-hf-status-warning-strong: var(--color-hf-amber-600); /* Frontdesk out-of-order — more saturated yellow */
+  --color-hf-status-warning-strong-bg: rgba(255,201,0,0.15);
+  --color-hf-status-error: var(--color-hf-red-400); /* Error, no-show, dirty, action-required */
+  --color-hf-status-error-bg: rgba(234,101,101,0.15);
+  --color-hf-status-error-strong: var(--color-hf-red-700); /* btn-danger */
+  --color-hf-status-error-alt: var(--color-hf-red-500); /* btn-cancel-red, deleted variant */
+  --color-hf-status-info: var(--color-hf-accent); /* Info = accent */
+  --color-hf-status-info-bg: rgba(36,175,232,0.15);
+  --color-hf-status-cancel: var(--color-hf-slate-500); /* Cancellations, deleted, out-of-service */
+  --color-hf-status-cancel-bg: rgba(127,143,164,0.15);
+  --color-hf-status-coral: var(--color-hf-orange-500); /* Check-out, in-progress */
+  --color-hf-status-coral-bg: rgba(248,121,33,0.15);
+  --color-hf-status-violet: var(--color-hf-violet-500); /* Offer, inspected */
+  --color-hf-status-violet-bg: rgba(87,97,216,0.15);
+  --color-hf-status-olive: var(--color-hf-olive-700); /* Check-in (rare deep olive) */
+  --color-hf-status-olive-bg: rgba(91,122,2,0.15);
+  --color-hf-status-orange-deep: var(--color-hf-orange-700); /* Due-out brown */
+  --color-hf-status-orange-deep-bg: rgba(165,85,5,0.15);
+  --font-family-hf-primary: Roboto;
+  --font-weight-hf-regular: 400;
+  --font-weight-hf-medium: 500;
+  --font-weight-hf-semibold: 600;
+  --font-size-hf-xs: 11px; /* Tag labels, uppercase captions */
+  --font-size-hf-sm: 13px; /* Grid headers, chips, sm buttons */
+  --font-size-hf-base: 14px; /* Body, labels (most common — 218 occurrences) */
+  --font-size-hf-md: 15px; /* Primary buttons */
+  --font-size-hf-lg: 16px; /* Modal titles, large tabs */
+  --font-size-hf-xl: 18px; /* Info-block titles, modal title */
+  --font-size-hf-2xl: 20px; /* Section heading */
+  --font-size-hf-h2: 24px;
+  --font-size-hf-page: 26px; /* Page title */
+  --font-size-hf-hero: 30px; /* Dashboard stat numbers */
+  --line-height-hf-headings: 1.2;
+  --line-height-hf-body: 1.5;
+  --line-height-hf-tight: 1;
+  --spacing-hf-0: 0px;
+  --spacing-hf-1: 4px;
+  --spacing-hf-2: 8px;
+  --spacing-hf-3: 12px;
+  --spacing-hf-4: 16px;
+  --spacing-hf-5: 20px; /* Default section gap */
+  --spacing-hf-6: 24px;
+  --spacing-hf-7: 30px;
+  --spacing-hf-8: 32px;
+  --radius-hf-sm: 6px; /* Buttons, inputs, status pills, modals (portal-exact) */
+  --radius-hf-md: 8px; /* Pagination items */
+  --radius-hf-lg: 9px; /* Dropdowns, toasts, pill-tabs */
+  --radius-hf-xl: 12px; /* Large elevated cards */
+  --radius-hf-pill: 99px; /* Rounded pill (rare — most status pills are 6px square) */
+  --opacity-hf-disabled: 0.6; /* Disabled state */
+  --opacity-hf-tint: 0.15; /* Status badge bg alpha */
+  --size-hf-sidebar-expanded: 215px;
+  --size-hf-sidebar-collapsed: 80px;
+  --size-hf-header-height: 60px;
+  --size-hf-content-max: 1440px;
+  --size-hf-btn-default: 40px; /* Primary button height */
+  --size-hf-btn-sm: 32px;
+  --size-hf-btn-search: 38px; /* Inline filter/search submit height */
+  --size-hf-input-default: 39px; /* Form-control input height */
+  --size-hf-tap-target: 44px; /* Mobile minimum tap target */
+  --z-index-hf-sidebar: 1000;
+  --z-index-hf-dropdown: 1001;
+  --z-index-hf-datepicker: 3000;
+  --z-index-hf-sticky-topbar: 4000;
+  --z-index-hf-modal-backdrop: 10050;
+  --z-index-hf-modal-dialog: 10051;
+  --z-index-hf-preloader: 99999;
+  --z-index-hf-topmost-overlay: 1000001; /* Above all */
+  --motion-hf-fast: 0.1s;
+  --motion-hf: 0.2s ease-in-out; /* Canonical transition */
+  --motion-hf-slow: 0.3s; /* Most common in legacy CSS — being normalized down to 0.2s */
+  --motion-hf-bouncy: 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
+  --shadow-hf: 0px 1px 8px 0px rgba(0,0,0,0.1); /* Default elevation — buttons, sticky bars */
+  --shadow-hf-subtle: 0px 2px 4px 0px rgba(0,0,0,0.05); /* Portal .dashboard-card — very faint elevation */
+  --shadow-hf-wrapper: 0px 3px 4px 0px rgba(0,0,0,0.03); /* Card frame (legacy) */
+  --shadow-hf-card: 0px 12px 24px 0px rgba(26,26,30,0.06); /* Elevated card / large surface */
+  --shadow-hf-modal: 0px 6px 18px 0px rgba(0,0,0,0.1); /* Modal / dropdown / popover floating UI */
+  --shadow-hf-outline: 0px 1px 2px 0px rgba(72,91,120,0.18); /* Outline button micro-elevation */
+  --shadow-hf-hover: 0px 2px 3px 0px rgba(0,0,0,0.06); /* Hover lift */
+}
+
+/* Composite typography tokens (use as utility classes) */
+.typography-hf-page-title {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-semibold);
+  font-size: var(--font-size-hf-page);
+  line-height: var(--line-height-hf-headings);
+}
+.typography-hf-btn {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-semibold);
+  font-size: var(--font-size-hf-md);
+  line-height: var(--line-height-hf-body);
+}
+.typography-hf-body {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-regular);
+  font-size: var(--font-size-hf-base);
+  line-height: var(--line-height-hf-body);
+}
+.typography-hf-label {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-medium);
+  font-size: var(--font-size-hf-base);
+  line-height: var(--line-height-hf-body);
+}
+.typography-hf-grid-header {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-medium);
+  font-size: var(--font-size-hf-sm);
+  line-height: var(--line-height-hf-body);
+}
+.typography-hf-tag-label {
+  font-family: fontFamily.primary;
+  font-weight: var(--font-weight-hf-medium);
+  font-size: var(--font-size-hf-xs);
+  line-height: var(--line-height-hf-headings);
+}

package/pre-built/tokens.d.ts

@@ -0,0 +1,240 @@
+// HotelFriend design tokens — TypeScript declarations
+// Generated from docs/tokens.figma.json — do NOT edit by hand.
+
+export declare const tokens: {
+  readonly color: {
+    readonly blue: {
+      readonly "50": string;
+      readonly "100": string;
+      readonly "500": string;
+      readonly "600": string;
+    };
+    readonly gray: {
+      readonly "25": string;
+      readonly "50": string;
+      readonly "100": string;
+      readonly "200": string;
+      readonly "300": string;
+      readonly "400": string;
+      readonly "500": string;
+      readonly "550": string;
+      readonly "600": string;
+      readonly "700": string;
+      readonly "800": string;
+      readonly "900": string;
+      readonly "950": string;
+    };
+    readonly green: {
+      readonly "500": string;
+    };
+    readonly amber: {
+      readonly "400": string;
+      readonly "600": string;
+    };
+    readonly red: {
+      readonly "400": string;
+      readonly "500": string;
+      readonly "700": string;
+    };
+    readonly orange: {
+      readonly "500": string;
+      readonly "700": string;
+    };
+    readonly violet: {
+      readonly "500": string;
+    };
+    readonly slate: {
+      readonly "500": string;
+    };
+    readonly olive: {
+      readonly "700": string;
+    };
+    readonly white: string;
+    readonly black: string;
+    readonly accent: {
+      readonly default: string;
+      readonly hover: string;
+      readonly subtle: string;
+      readonly subtler: string;
+    };
+    readonly "on-accent": string;
+    readonly bg: {
+      readonly page: string;
+      readonly section: string;
+      readonly muted: string;
+      readonly surface: string;
+    };
+    readonly fg: {
+      readonly default: string;
+      readonly muted: string;
+      readonly subtle: string;
+      readonly faint: string;
+    };
+    readonly border: {
+      readonly default: string;
+      readonly subtle: string;
+      readonly strong: string;
+    };
+    readonly tab: {
+      readonly "fg-inactive": string;
+      readonly "count-fg": string;
+    };
+    readonly pagination: {
+      readonly "fg-inactive": string;
+      readonly "fg-active": string;
+    };
+    readonly input: {
+      readonly border: string;
+    };
+    readonly menu: {
+      readonly "bg-hover": string;
+    };
+    readonly status: {
+      readonly success: string;
+      readonly "success-bg": string;
+      readonly warning: string;
+      readonly "warning-bg": string;
+      readonly "warning-strong": string;
+      readonly "warning-strong-bg": string;
+      readonly error: string;
+      readonly "error-bg": string;
+      readonly "error-strong": string;
+      readonly "error-alt": string;
+      readonly info: string;
+      readonly "info-bg": string;
+      readonly cancel: string;
+      readonly "cancel-bg": string;
+      readonly coral: string;
+      readonly "coral-bg": string;
+      readonly violet: string;
+      readonly "violet-bg": string;
+      readonly olive: string;
+      readonly "olive-bg": string;
+      readonly "orange-deep": string;
+      readonly "orange-deep-bg": string;
+    };
+  };
+  readonly fontFamily: {
+    readonly primary: string;
+  };
+  readonly fontWeight: {
+    readonly regular: string;
+    readonly medium: string;
+    readonly semibold: string;
+  };
+  readonly fontSize: {
+    readonly xs: string;
+    readonly sm: string;
+    readonly base: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly h2: string;
+    readonly page: string;
+    readonly hero: string;
+  };
+  readonly lineHeight: {
+    readonly headings: string;
+    readonly body: string;
+    readonly tight: string;
+  };
+  readonly typography: {
+    readonly pageTitle: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+    readonly btn: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+    readonly body: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+    readonly label: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+    readonly gridHeader: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+    readonly tagLabel: {
+      readonly fontFamily: string;
+      readonly fontWeight: string;
+      readonly fontSize: string;
+      readonly lineHeight: string;
+    };
+  };
+  readonly spacing: {
+    readonly "0": string;
+    readonly "1": string;
+    readonly "2": string;
+    readonly "3": string;
+    readonly "4": string;
+    readonly "5": string;
+    readonly "6": string;
+    readonly "7": string;
+    readonly "8": string;
+  };
+  readonly radius: {
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly pill: string;
+  };
+  readonly shadow: {
+    readonly default: string;
+    readonly subtle: string;
+    readonly wrapper: string;
+    readonly card: string;
+    readonly modal: string;
+    readonly outline: string;
+    readonly hover: string;
+  };
+  readonly opacity: {
+    readonly disabled: string;
+    readonly tint: string;
+  };
+  readonly size: {
+    readonly sidebarExpanded: string;
+    readonly sidebarCollapsed: string;
+    readonly headerHeight: string;
+    readonly contentMax: string;
+    readonly btnDefault: string;
+    readonly btnSm: string;
+    readonly btnSearch: string;
+    readonly inputDefault: string;
+    readonly tapTarget: string;
+  };
+  readonly zIndex: {
+    readonly sidebar: string;
+    readonly dropdown: string;
+    readonly datepicker: string;
+    readonly stickyTopbar: string;
+    readonly modalBackdrop: string;
+    readonly modalDialog: string;
+    readonly preloader: string;
+    readonly topmostOverlay: string;
+  };
+  readonly motion: {
+    readonly fast: string;
+    readonly default: string;
+    readonly slow: string;
+    readonly bouncy: string;
+  };
+};
+
+export type Tokens = typeof tokens;