@hotelfriendag/design-tokens 0.3.0

package/pre-built/shadcn-tokens.css

@@ -0,0 +1,67 @@
+/* HotelFriend design tokens — shadcn/ui v4 contract
+ * Generated from docs/tokens.figma.json — do NOT edit by hand.
+ *
+ * Usage: append to app/globals.css (after @import "tailwindcss")
+ *   @import "./pre-built/shadcn-tokens.css";
+ */
+@theme inline {
+  /* ── Base ── */
+  --color-background:              #FFFFFF;
+  --color-foreground:              #2B2B2B;   /* text-primary */
+
+  /* ── Card ── */
+  --color-card:                    #FFFFFF;
+  --color-card-foreground:         #2B2B2B;
+
+  /* ── Popover ── */
+  --color-popover:                 #FFFFFF;
+  --color-popover-foreground:      #2B2B2B;
+
+  /* ── Primary ── */
+  --color-primary:                 #24AFE8;   /* canonical brand */
+  --color-primary-foreground:      #FFFFFF;
+
+  /* ── Secondary ── */
+  --color-secondary:               #E4E8EF;   /* neutral border */
+  --color-secondary-foreground:    #4B5675;   /* text-secondary */
+
+  /* ── Muted ── */
+  --color-muted:                   #F1F3F6;   /* very-light bg */
+  --color-muted-foreground:        #99A1B7;   /* placeholder */
+
+  /* ── Accent ── */
+  --color-accent:                  #E9F6FC;   /* primary light tint */
+  --color-accent-foreground:       #149AD1;   /* primary-hover */
+
+  /* ── Destructive ── */
+  --color-destructive:             #EA6565;   /* status error */
+  --color-destructive-foreground:  #FFFFFF;
+
+  /* ── Border / Input / Ring ── */
+  --color-border:                  #D1D6DD;
+  --color-input:                   #D1D6DD;
+  --color-ring:                    #24AFE8;   /* focus ring = primary */
+
+  /* ── Chart palette (maps to HF status colors) ── */
+  --color-chart-1:                 #59B59D;   /* success */
+  --color-chart-2:                 #FFBD5A;   /* warning */
+  --color-chart-3:                 #24AFE8;   /* primary */
+  --color-chart-4:                 #F87921;   /* coral */
+  --color-chart-5:                 #EA6565;   /* error */
+
+  /* ── Sidebar ── */
+  --color-sidebar:                 #F6F7FB;   /* bg-accent */
+  --color-sidebar-foreground:      #4B5675;
+  --color-sidebar-primary:         #24AFE8;
+  --color-sidebar-primary-foreground: #FFFFFF;
+  --color-sidebar-accent:          #E9F6FC;
+  --color-sidebar-accent-foreground: #2B2B2B;
+  --color-sidebar-border:          #E4E8EF;
+  --color-sidebar-ring:            #24AFE8;
+
+  /* ── Radius ── */
+  --radius:                        6px;       /* $br-sm */
+
+  /* ── Font ── */
+  --font-sans:                     Roboto, sans-serif;
+}

package/pre-built/status.css

@@ -0,0 +1,51 @@
+/*
+ * HotelFriend status pills — domain → semantic mapping
+ * Generated from docs/status-map.json — do NOT edit by hand.
+ *
+ * Each .status-{domain}-{state} class binds to a semantic status slot
+ * (--color-hf-status-{role}) so adding a new domain status is JSON-only —
+ * no CSS edit needed.
+ *
+ * Pair with .hf-pill from components.css for the visual chrome.
+ */
+
+/* Booking */
+.status-booking-new { color: var(--color-hf-status-warning); background: var(--color-hf-status-warning-bg); }
+.status-booking-offer { color: var(--color-hf-status-violet); background: var(--color-hf-status-violet-bg); }
+.status-booking-confirmed { color: var(--color-hf-status-info); background: var(--color-hf-status-info-bg); }
+.status-booking-check-in { color: var(--color-hf-status-olive); background: var(--color-hf-status-olive-bg); }
+.status-booking-check-out { color: var(--color-hf-status-coral); background: var(--color-hf-status-coral-bg); }
+.status-booking-no-show { color: var(--color-hf-status-error); background: var(--color-hf-status-error-bg); }
+.status-booking-due-in { color: var(--color-hf-status-success); background: var(--color-hf-status-success-bg); }
+.status-booking-due-out { color: var(--color-hf-status-orange-deep); background: var(--color-hf-status-orange-deep-bg); }
+.status-booking-canceled,
+.status-booking-canceled-by-hotel,
+.status-booking-canceled-by-guest,
+.status-booking-canceled-by-hf { color: var(--color-hf-status-cancel); background: var(--color-hf-status-cancel-bg); }
+
+/* Order */
+.status-order-waiting { color: var(--color-hf-status-warning); background: var(--color-hf-status-warning-bg); }
+.status-order-confirmed { color: var(--color-hf-status-info); background: var(--color-hf-status-info-bg); }
+.status-order-completed { color: var(--color-hf-status-success); background: var(--color-hf-status-success-bg); }
+.status-order-in-progress { color: var(--color-hf-status-coral); background: var(--color-hf-status-coral-bg); }
+.status-order-action-required { color: var(--color-hf-status-error); background: var(--color-hf-status-error-bg); }
+.status-order-canceled,
+.status-order-canceled-by-hotel,
+.status-order-canceled-by-guest,
+.status-order-canceled-by-pos { color: var(--color-hf-status-cancel); background: var(--color-hf-status-cancel-bg); }
+
+/* Front Desk */
+.status-front-desk-quota-free { color: var(--color-hf-status-success); background: var(--color-hf-status-success-bg); }
+.status-front-desk-quota-busy { color: var(--color-hf-status-error); background: var(--color-hf-status-error-bg); }
+.status-front-desk-out-of-order { color: var(--color-hf-status-warning-strong); background: var(--color-hf-status-warning-strong-bg); }
+
+/* Room Item Cleaning */
+.status-room-item-cleaning-clean { color: var(--color-hf-status-success); background: var(--color-hf-status-success-bg); }
+.status-room-item-cleaning-cleaning { color: var(--color-hf-status-info); background: var(--color-hf-status-info-bg); }
+.status-room-item-cleaning-dirty { color: var(--color-hf-status-error); background: var(--color-hf-status-error-bg); }
+.status-room-item-cleaning-inspected { color: var(--color-hf-status-violet); background: var(--color-hf-status-violet-bg); }
+.status-room-item-cleaning-out-of-service { color: var(--color-hf-status-cancel); background: var(--color-hf-status-cancel-bg); }
+
+/* Standalone (no domain prefix) */
+.status-deleted { color: var(--color-hf-status-cancel); background: var(--color-hf-status-cancel-bg); }
+

package/pre-built/stylelint-design-system.cjs

@@ -0,0 +1,69 @@
+/**
+ * HotelFriend Design System — Stylelint plugin config
+ *
+ * Drop-in shareable config that enforces RFC-0001 §4.6 rules:
+ *   1. No raw hex colors in app code (use `var(--color-hf-*)` instead).
+ *   2. No Tailwind arbitrary values like `bg-[#26ADE4]` (use `bg-hf-accent`).
+ *   3. No bespoke `box-shadow` declarations (use `var(--shadow-hf-*)`).
+ *
+ * Usage in your project's stylelint config:
+ *
+ *   // .stylelintrc.cjs
+ *   module.exports = {
+ *     extends: [
+ *       'stylelint-config-standard',
+ *       './docs/portable-design/pre-built/stylelint-design-system.cjs'
+ *     ],
+ *     // Override rules per-file if needed:
+ *     overrides: [
+ *       { files: ['**\/pre-built/*.css'], rules: { 'color-no-hex': null } },  // generated files OK
+ *     ],
+ *   };
+ *
+ * Requires: stylelint ^16.0.0
+ *
+ * Phase 3B (RFC-0001 §4.6) — ships shareable config; consumers integrate into their CI.
+ */
+module.exports = {
+  rules: {
+    /* Hex colors — must use design tokens instead.
+     * Exception: --color-hf-white / --color-hf-black (#FFFFFF / #000000) are still OK
+     * via their tokens, but raw #fff / #000 in stylesheets is disallowed too.
+     */
+    'color-no-hex': [true, {
+      message: 'Disallowed hex color. Use a design-system token instead, e.g. `var(--color-hf-accent)`, `var(--color-hf-fg)`, or `var(--color-hf-status-success)`.',
+      severity: 'error',
+    }],
+
+    /* Disallow named CSS colors (red, blue, etc.) — even more error-prone than hex. */
+    'color-named': ['never', {
+      ignore: ['inside-function'],
+      message: 'Disallowed named color. Use a design-system token, e.g. `var(--color-hf-accent)`.',
+    }],
+
+    /* Forbid rolling your own box-shadow declarations — must reference a token. */
+    'declaration-property-value-disallowed-list': [
+      {
+        'box-shadow': ['/^\\s*\\d/'],  // anything starting with a number = literal shadow
+      },
+      {
+        message: 'Disallowed literal `box-shadow`. Use `var(--shadow-hf-default)`, `--shadow-hf-modal`, `--shadow-hf-card`, `--shadow-hf-subtle`, `--shadow-hf-outline`, or `--shadow-hf-hover`.',
+        severity: 'error',
+      },
+    ],
+
+    /* Forbid arbitrary-value Tailwind utilities like `bg-[#26ADE4]` in HTML/JSX.
+     * Stylelint by itself can't lint HTML — this rule scopes to `@apply` directives.
+     * For full Tailwind arbitrary-value linting in HTML/JSX, use ESLint
+     * `eslint-plugin-tailwindcss` with the `no-arbitrary-value` rule. */
+    'declaration-property-value-disallowed-list': [
+      {
+        '/^.*$/': ['/bg-\\[#/', '/text-\\[#/', '/border-\\[#/'],
+      },
+      {
+        message: 'Disallowed Tailwind arbitrary hex (e.g. `bg-[#26ADE4]`). Use a token utility like `bg-hf-accent`.',
+        severity: 'warning',  // warning because @apply usage of arbitrary values is rare
+      },
+    ],
+  },
+};

package/pre-built/tailwind.additive.css

@@ -0,0 +1,158 @@
+/*
+ * HotelFriend design tokens — Tailwind v4 CSS theme
+ * Generated from docs/tokens.figma.json — do NOT edit by hand.
+ *
+ * Usage in your main CSS entry file:
+ *   @import "tailwindcss";
+ *   @import "./pre-built/tailwind.css";
+ *
+ * Tailwind v4 auto-generates utilities from @theme variables:
+ *   --color-*      → bg-*, text-*, border-*, ring-*, …
+ *   --text-*       → text-*
+ *   --font-*       → font-* (family)
+ *   --font-weight-*→ font-* (weight)
+ *   --leading-*    → leading-*
+ *   --radius-*     → rounded-*
+ *   --shadow-*     → shadow-*
+ *   --z-*          → z-*
+ */
+@theme {
+  /* Colors */
+  --color-hf-blue-50: #E9F6FC;
+  --color-hf-blue-100: #EFF6FF;
+  --color-hf-blue-500: #24AFE8;
+  --color-hf-blue-600: #149AD1;
+  --color-hf-gray-25: #FBFBFC;
+  --color-hf-gray-50: #F6F7FB;
+  --color-hf-gray-100: #F1F3F6;
+  --color-hf-gray-200: #E4E8EF;
+  --color-hf-gray-300: #D1D6DD;
+  --color-hf-gray-400: #AEBCCF;
+  --color-hf-gray-500: #99A1B7;
+  --color-hf-gray-550: #7E8EA6;
+  --color-hf-gray-600: #50627E;
+  --color-hf-gray-700: #485B78;
+  --color-hf-gray-800: #4B5675;
+  --color-hf-gray-900: #2B2B2B;
+  --color-hf-gray-950: #252F4A;
+  --color-hf-green-500: #59B59D;
+  --color-hf-amber-400: #FFBD5A;
+  --color-hf-amber-600: #FFC900;
+  --color-hf-red-400: #EA6565;
+  --color-hf-red-500: #FB5A56;
+  --color-hf-red-700: #D9534F;
+  --color-hf-orange-500: #F87921;
+  --color-hf-orange-700: #A55505;
+  --color-hf-violet-500: #5761D8;
+  --color-hf-slate-500: #7F8FA4;
+  --color-hf-olive-700: #5B7A02;
+  --color-hf-white: #FFFFFF;
+  --color-hf-black: #000000;
+  --color-hf-accent: var(--color-hf-blue-500);
+  --color-hf-accent-hover: var(--color-hf-blue-600);
+  --color-hf-accent-subtle: var(--color-hf-blue-50);
+  --color-hf-accent-subtler: var(--color-hf-blue-100);
+  --color-hf-on-accent: var(--color-hf-white);
+  --color-hf-bg-page: var(--color-hf-gray-25);
+  --color-hf-bg-section: var(--color-hf-gray-50);
+  --color-hf-bg-muted: var(--color-hf-gray-100);
+  --color-hf-bg-surface: var(--color-hf-white);
+  --color-hf-fg: var(--color-hf-gray-900);
+  --color-hf-fg-muted: var(--color-hf-gray-800);
+  --color-hf-fg-subtle: var(--color-hf-gray-550);
+  --color-hf-fg-faint: var(--color-hf-gray-400);
+  --color-hf-border: var(--color-hf-gray-300);
+  --color-hf-border-subtle: var(--color-hf-gray-200);
+  --color-hf-border-strong: var(--color-hf-gray-400);
+  --color-hf-tab-fg-inactive: var(--color-hf-gray-700);
+  --color-hf-tab-count-fg: var(--color-hf-gray-700);
+  --color-hf-pagination-fg-inactive: var(--color-hf-gray-700);
+  --color-hf-pagination-fg-active: var(--color-hf-gray-950);
+  --color-hf-input-border: #DBDFE9;
+  --color-hf-menu-bg-hover: #F5F5F5;
+  --color-hf-status-success: var(--color-hf-green-500);
+  --color-hf-status-success-bg: rgba(89,181,157,0.15);
+  --color-hf-status-warning: var(--color-hf-amber-400);
+  --color-hf-status-warning-bg: rgba(255,189,90,0.15);
+  --color-hf-status-warning-strong: var(--color-hf-amber-600);
+  --color-hf-status-warning-strong-bg: rgba(255,201,0,0.15);
+  --color-hf-status-error: var(--color-hf-red-400);
+  --color-hf-status-error-bg: rgba(234,101,101,0.15);
+  --color-hf-status-error-strong: var(--color-hf-red-700);
+  --color-hf-status-error-alt: var(--color-hf-red-500);
+  --color-hf-status-info: var(--color-hf-accent);
+  --color-hf-status-info-bg: rgba(36,175,232,0.15);
+  --color-hf-status-cancel: var(--color-hf-slate-500);
+  --color-hf-status-cancel-bg: rgba(127,143,164,0.15);
+  --color-hf-status-coral: var(--color-hf-orange-500);
+  --color-hf-status-coral-bg: rgba(248,121,33,0.15);
+  --color-hf-status-violet: var(--color-hf-violet-500);
+  --color-hf-status-violet-bg: rgba(87,97,216,0.15);
+  --color-hf-status-olive: var(--color-hf-olive-700);
+  --color-hf-status-olive-bg: rgba(91,122,2,0.15);
+  --color-hf-status-orange-deep: var(--color-hf-orange-700);
+  --color-hf-status-orange-deep-bg: rgba(165,85,5,0.15);
+  /* Typography — font families */
+  --font-hf-sans: Roboto;
+  /* Typography — font weights */
+  --font-weight-hf-regular: 400;
+  --font-weight-hf-medium: 500;
+  --font-weight-hf-semibold: 600;
+  /* Typography — font sizes */
+  --text-hf-xs: 11px;
+  --text-hf-sm: 13px;
+  --text-hf-base: 14px;
+  --text-hf-md: 15px;
+  --text-hf-lg: 16px;
+  --text-hf-xl: 18px;
+  --text-hf-2xl: 20px;
+  --text-hf-h2: 24px;
+  --text-hf-page: 26px;
+  --text-hf-hero: 30px;
+  /* Typography — line heights */
+  --leading-hf-headings: 1.2;
+  --leading-hf-body: 1.5;
+  --leading-hf-tight: 1;
+  /* Border radius */
+  --radius-hf-sm: 6px;
+  --radius-hf-md: 8px;
+  --radius-hf-lg: 9px;
+  --radius-hf-xl: 12px;
+  --radius-hf-pill: 99px;
+  /* Spacing */
+  --spacing-hf-0: 0px;
+  --spacing-hf-1: 4px;
+  --spacing-hf-2: 8px;
+  --spacing-hf-3: 12px;
+  --spacing-hf-4: 16px;
+  --spacing-hf-5: 20px;
+  --spacing-hf-6: 24px;
+  --spacing-hf-7: 30px;
+  --spacing-hf-8: 32px;
+  --spacing-hf-sidebar-expanded: 215px;
+  --spacing-hf-sidebar-collapsed: 80px;
+  --spacing-hf-header-height: 60px;
+  --spacing-hf-content-max: 1440px;
+  --spacing-hf-btn-default: 40px;
+  --spacing-hf-btn-sm: 32px;
+  --spacing-hf-btn-search: 38px;
+  --spacing-hf-input-default: 39px;
+  --spacing-hf-tap-target: 44px;
+  /* Shadows */
+  --shadow-hf: 0px 1px 8px 0px rgba(0,0,0,0.1);
+  --shadow-hf-subtle: 0px 2px 4px 0px rgba(0,0,0,0.05);
+  --shadow-hf-wrapper: 0px 3px 4px 0px rgba(0,0,0,0.03);
+  --shadow-hf-card: 0px 12px 24px 0px rgba(26,26,30,0.06);
+  --shadow-hf-modal: 0px 6px 18px 0px rgba(0,0,0,0.1);
+  --shadow-hf-outline: 0px 1px 2px 0px rgba(72,91,120,0.18);
+  --shadow-hf-hover: 0px 2px 3px 0px rgba(0,0,0,0.06);
+  /* Z-index */
+  --z-hf-sidebar: 1000;
+  --z-hf-dropdown: 1001;
+  --z-hf-datepicker: 3000;
+  --z-hf-sticky-topbar: 4000;
+  --z-hf-modal-backdrop: 10050;
+  --z-hf-modal-dialog: 10051;
+  --z-hf-preloader: 99999;
+  --z-hf-topmost-overlay: 1000001;
+}

package/pre-built/tailwind.css

@@ -0,0 +1,158 @@
+/*
+ * HotelFriend design tokens — Tailwind v4 CSS theme
+ * Generated from docs/tokens.figma.json — do NOT edit by hand.
+ *
+ * Usage in your main CSS entry file:
+ *   @import "tailwindcss";
+ *   @import "./pre-built/tailwind.css";
+ *
+ * Tailwind v4 auto-generates utilities from @theme variables:
+ *   --color-*      → bg-*, text-*, border-*, ring-*, …
+ *   --text-*       → text-*
+ *   --font-*       → font-* (family)
+ *   --font-weight-*→ font-* (weight)
+ *   --leading-*    → leading-*
+ *   --radius-*     → rounded-*
+ *   --shadow-*     → shadow-*
+ *   --z-*          → z-*
+ */
+@theme {
+  /* Colors */
+  --color-hf-blue-50: #E9F6FC;
+  --color-hf-blue-100: #EFF6FF;
+  --color-hf-blue-500: #24AFE8;
+  --color-hf-blue-600: #149AD1;
+  --color-hf-gray-25: #FBFBFC;
+  --color-hf-gray-50: #F6F7FB;
+  --color-hf-gray-100: #F1F3F6;
+  --color-hf-gray-200: #E4E8EF;
+  --color-hf-gray-300: #D1D6DD;
+  --color-hf-gray-400: #AEBCCF;
+  --color-hf-gray-500: #99A1B7;
+  --color-hf-gray-550: #7E8EA6;
+  --color-hf-gray-600: #50627E;
+  --color-hf-gray-700: #485B78;
+  --color-hf-gray-800: #4B5675;
+  --color-hf-gray-900: #2B2B2B;
+  --color-hf-gray-950: #252F4A;
+  --color-hf-green-500: #59B59D;
+  --color-hf-amber-400: #FFBD5A;
+  --color-hf-amber-600: #FFC900;
+  --color-hf-red-400: #EA6565;
+  --color-hf-red-500: #FB5A56;
+  --color-hf-red-700: #D9534F;
+  --color-hf-orange-500: #F87921;
+  --color-hf-orange-700: #A55505;
+  --color-hf-violet-500: #5761D8;
+  --color-hf-slate-500: #7F8FA4;
+  --color-hf-olive-700: #5B7A02;
+  --color-hf-white: #FFFFFF;
+  --color-hf-black: #000000;
+  --color-hf-accent: var(--color-hf-blue-500);
+  --color-hf-accent-hover: var(--color-hf-blue-600);
+  --color-hf-accent-subtle: var(--color-hf-blue-50);
+  --color-hf-accent-subtler: var(--color-hf-blue-100);
+  --color-hf-on-accent: var(--color-hf-white);
+  --color-hf-bg-page: var(--color-hf-gray-25);
+  --color-hf-bg-section: var(--color-hf-gray-50);
+  --color-hf-bg-muted: var(--color-hf-gray-100);
+  --color-hf-bg-surface: var(--color-hf-white);
+  --color-hf-fg: var(--color-hf-gray-900);
+  --color-hf-fg-muted: var(--color-hf-gray-800);
+  --color-hf-fg-subtle: var(--color-hf-gray-550);
+  --color-hf-fg-faint: var(--color-hf-gray-400);
+  --color-hf-border: var(--color-hf-gray-300);
+  --color-hf-border-subtle: var(--color-hf-gray-200);
+  --color-hf-border-strong: var(--color-hf-gray-400);
+  --color-hf-tab-fg-inactive: var(--color-hf-gray-700);
+  --color-hf-tab-count-fg: var(--color-hf-gray-700);
+  --color-hf-pagination-fg-inactive: var(--color-hf-gray-700);
+  --color-hf-pagination-fg-active: var(--color-hf-gray-950);
+  --color-hf-input-border: #DBDFE9;
+  --color-hf-menu-bg-hover: #F5F5F5;
+  --color-hf-status-success: var(--color-hf-green-500);
+  --color-hf-status-success-bg: rgba(89,181,157,0.15);
+  --color-hf-status-warning: var(--color-hf-amber-400);
+  --color-hf-status-warning-bg: rgba(255,189,90,0.15);
+  --color-hf-status-warning-strong: var(--color-hf-amber-600);
+  --color-hf-status-warning-strong-bg: rgba(255,201,0,0.15);
+  --color-hf-status-error: var(--color-hf-red-400);
+  --color-hf-status-error-bg: rgba(234,101,101,0.15);
+  --color-hf-status-error-strong: var(--color-hf-red-700);
+  --color-hf-status-error-alt: var(--color-hf-red-500);
+  --color-hf-status-info: var(--color-hf-accent);
+  --color-hf-status-info-bg: rgba(36,175,232,0.15);
+  --color-hf-status-cancel: var(--color-hf-slate-500);
+  --color-hf-status-cancel-bg: rgba(127,143,164,0.15);
+  --color-hf-status-coral: var(--color-hf-orange-500);
+  --color-hf-status-coral-bg: rgba(248,121,33,0.15);
+  --color-hf-status-violet: var(--color-hf-violet-500);
+  --color-hf-status-violet-bg: rgba(87,97,216,0.15);
+  --color-hf-status-olive: var(--color-hf-olive-700);
+  --color-hf-status-olive-bg: rgba(91,122,2,0.15);
+  --color-hf-status-orange-deep: var(--color-hf-orange-700);
+  --color-hf-status-orange-deep-bg: rgba(165,85,5,0.15);
+  /* Typography — font families */
+  --font-hf-sans: Roboto;
+  /* Typography — font weights */
+  --font-weight-hf-regular: 400;
+  --font-weight-hf-medium: 500;
+  --font-weight-hf-semibold: 600;
+  /* Typography — font sizes */
+  --text-hf-xs: 11px;
+  --text-hf-sm: 13px;
+  --text-hf-base: 14px;
+  --text-hf-md: 15px;
+  --text-hf-lg: 16px;
+  --text-hf-xl: 18px;
+  --text-hf-2xl: 20px;
+  --text-hf-h2: 24px;
+  --text-hf-page: 26px;
+  --text-hf-hero: 30px;
+  /* Typography — line heights */
+  --leading-hf-headings: 1.2;
+  --leading-hf-body: 1.5;
+  --leading-hf-tight: 1;
+  /* Border radius */
+  --radius-hf-sm: 6px;
+  --radius-hf-md: 8px;
+  --radius-hf-lg: 9px;
+  --radius-hf-xl: 12px;
+  --radius-hf-pill: 99px;
+  /* Spacing */
+  --spacing-hf-0: 0px;
+  --spacing-hf-1: 4px;
+  --spacing-hf-2: 8px;
+  --spacing-hf-3: 12px;
+  --spacing-hf-4: 16px;
+  --spacing-hf-5: 20px;
+  --spacing-hf-6: 24px;
+  --spacing-hf-7: 30px;
+  --spacing-hf-8: 32px;
+  --spacing-hf-sidebar-expanded: 215px;
+  --spacing-hf-sidebar-collapsed: 80px;
+  --spacing-hf-header-height: 60px;
+  --spacing-hf-content-max: 1440px;
+  --spacing-hf-btn-default: 40px;
+  --spacing-hf-btn-sm: 32px;
+  --spacing-hf-btn-search: 38px;
+  --spacing-hf-input-default: 39px;
+  --spacing-hf-tap-target: 44px;
+  /* Shadows */
+  --shadow-hf: 0px 1px 8px 0px rgba(0,0,0,0.1);
+  --shadow-hf-subtle: 0px 2px 4px 0px rgba(0,0,0,0.05);
+  --shadow-hf-wrapper: 0px 3px 4px 0px rgba(0,0,0,0.03);
+  --shadow-hf-card: 0px 12px 24px 0px rgba(26,26,30,0.06);
+  --shadow-hf-modal: 0px 6px 18px 0px rgba(0,0,0,0.1);
+  --shadow-hf-outline: 0px 1px 2px 0px rgba(72,91,120,0.18);
+  --shadow-hf-hover: 0px 2px 3px 0px rgba(0,0,0,0.06);
+  /* Z-index */
+  --z-hf-sidebar: 1000;
+  --z-hf-dropdown: 1001;
+  --z-hf-datepicker: 3000;
+  --z-hf-sticky-topbar: 4000;
+  --z-hf-modal-backdrop: 10050;
+  --z-hf-modal-dialog: 10051;
+  --z-hf-preloader: 99999;
+  --z-hf-topmost-overlay: 1000001;
+}