@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@actabldesign/bellhop-styles",
-  "version": "0.0.4",
+  "version": "0.0.12",
+  "type": "module",
   "description": "Shared CSS styles for Bellhop design system",
   "main": "index.css",
   "module": "index.css",
   "types": "index.d.ts",
+  "exports": {
+    ".": "./index.css",
+    "./utilities": "./utilities.css"
+  },
   "files": [
     "**/*"
   ],

package/rollup.config.js

@@ -2,28 +2,43 @@ import postcss from 'rollup-plugin-postcss';
 import postcssImport from 'postcss-import';
 import { resolve } from 'path';
 
-export default {
-  input: 'src/index.css',
-  output: {
-    file: 'dist/index.css',
-    format: 'es'
-  },
+const postcssConfig = {
+  extract: true,
   plugins: [
-    postcss({
-      extract: true,
-      plugins: [
-        postcssImport({
-          resolve: (id, basedir) => {
-            // Handle relative imports
-            if (id.startsWith('./')) {
-              return resolve(basedir, id);
-            }
-            return id;
-          }
-        })
-      ],
-      minimize: false,
-      sourceMap: false
-    })
-  ]
-};
+    postcssImport({
+      resolve: (id, basedir) => {
+        // Handle relative imports
+        if (id.startsWith('./')) {
+          return resolve(basedir, id);
+        }
+        return id;
+      },
+    }),
+  ],
+  minimize: false,
+  sourceMap: false,
+  use: {
+    sass: {
+      silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin'],
+    },
+  },
+};
+
+export default [
+  {
+    input: 'src/index.css',
+    output: {
+      file: 'dist/index.css',
+      format: 'es',
+    },
+    plugins: [postcss(postcssConfig)],
+  },
+  {
+    input: 'src/utilities.scss',
+    output: {
+      file: 'dist/utilities.css',
+      format: 'es',
+    },
+    plugins: [postcss(postcssConfig)],
+  },
+];

package/src/bh-tokens/_primitives.scss

@@ -0,0 +1,296 @@
+/* ==========================================================================
+   BELLHOP PRIMITIVES
+   Consolidated from all Bellhop primitives tokens.
+   ========================================================================== */
+
+:root {
+  /* --- BASE COLORS --- */
+  --bh-white: hsl(0, 0%, 100%);
+  --bh-black: hsl(0, 0%, 0%);
+  --bh-transparent: hsla(0, 0%, 100%, 0);
+
+  /* --- NEUTRAL SCALE --- */
+  --bh-neutral-25: hsl(210, 20%, 99%);
+  --bh-neutral-50: hsl(225, 40%, 98%);
+  --bh-neutral-100: hsl(225, 40%, 96%);
+  --bh-neutral-200: hsl(223, 32%, 91%);
+  --bh-neutral-300: hsl(223, 29%, 84%);
+  --bh-neutral-400: hsl(224, 23%, 65%);
+  --bh-neutral-500: hsl(226, 16%, 47%);
+  --bh-neutral-600: hsl(225, 22%, 37%);
+  --bh-neutral-700: hsl(224, 25%, 27%);
+  --bh-neutral-800: hsl(226, 25%, 20%);
+  --bh-neutral-900: hsl(227, 31%, 11%);
+  --bh-neutral-950: hsl(228, 38%, 5%);
+
+  /* --- BRAND SCALE (Indigo) --- */
+  --bh-brand-25: hsl(220, 82%, 98%);
+  --bh-brand-50: hsl(226, 100%, 97%);
+  --bh-brand-100: hsl(223, 88%, 94%);
+  --bh-brand-200: hsl(226, 71%, 86%);
+  --bh-brand-300: hsl(227, 75%, 78%);
+  --bh-brand-400: hsl(228, 73%, 67%);
+  --bh-brand-500: hsl(230, 69%, 59%);
+  --bh-brand-600: hsl(230, 69%, 48%);
+  --bh-brand-700: hsl(230, 69%, 41%);
+  --bh-brand-800: hsl(230, 69%, 31%);
+  --bh-brand-900: hsl(230, 68%, 21%);
+  --bh-brand-950: hsl(229, 70%, 8%);
+
+  /* --- ACCENT (GUAVA) SCALE --- */
+  --bh-accent-25: hsl(7, 60%, 97%);
+  --bh-accent-50: hsl(355, 60%, 96%);
+  --bh-accent-100: hsl(353, 57%, 91%);
+  --bh-accent-200: hsl(353, 58%, 85%);
+  --bh-accent-300: hsl(353, 59%, 81%);
+  --bh-accent-400: hsl(353, 58%, 69%);
+  --bh-accent-500: hsl(353, 58%, 62%);
+  --bh-accent-600: hsl(354, 58%, 56%);
+  --bh-accent-700: hsl(354, 58%, 44%);
+  --bh-accent-800: hsl(354, 58%, 37%);
+  --bh-accent-900: hsl(353, 58%, 31%);
+  --bh-accent-950: hsl(353, 59%, 17%);
+
+  /* --- ERROR SCALE --- */
+  --bh-error-25: hsl(6, 100%, 99%);
+  --bh-error-50: hsl(6, 100%, 98%);
+  --bh-error-100: hsl(10, 100%, 93%);
+  --bh-error-200: hsl(8, 100%, 88%);
+  --bh-error-300: hsl(8, 100%, 79%);
+  --bh-error-400: hsl(10, 94%, 65%);
+  --bh-error-500: hsl(16, 100%, 48%);
+  --bh-error-600: hsl(12, 100%, 44%);
+  --bh-error-700: hsl(11, 100%, 37%);
+  --bh-error-800: hsl(10, 100%, 30%);
+  --bh-error-900: hsl(14, 100%, 25%);
+  --bh-error-950: hsl(7, 100%, 14%);
+
+  /* --- WARNING SCALE --- */
+  --bh-warning-25: hsl(47, 92%, 98%);
+  --bh-warning-50: hsl(47, 100%, 96%);
+  --bh-warning-100: hsl(48, 93%, 89%);
+  --bh-warning-200: hsl(48, 95%, 78%);
+  --bh-warning-300: hsl(46, 96%, 65%);
+  --bh-warning-400: hsl(40, 95%, 60%);
+  --bh-warning-500: hsl(33, 92%, 58%);
+  --bh-warning-600: hsl(26, 71%, 51%);
+  --bh-warning-700: hsl(21, 72%, 41%);
+  --bh-warning-800: hsl(21, 75%, 33%);
+  --bh-warning-900: hsl(21, 71%, 27%);
+  --bh-warning-950: hsl(21, 84%, 14%);
+
+  /* --- SUCCESS SCALE --- */
+  --bh-success-25: hsl(144, 78%, 98%);
+  --bh-success-50: hsl(138, 76%, 97%);
+  --bh-success-100: hsl(141, 78%, 93%);
+  --bh-success-200: hsl(140, 76%, 85%);
+  --bh-success-300: hsl(142, 75%, 73%);
+  --bh-success-400: hsl(143, 68%, 55%);
+  --bh-success-500: hsl(136, 57%, 49%);
+  --bh-success-600: hsl(134, 58%, 41%);
+  --bh-success-700: hsl(139, 61%, 31%);
+  --bh-success-800: hsl(143, 63%, 24%);
+  --bh-success-900: hsl(142, 54%, 19%);
+  --bh-success-950: hsl(143, 67%, 11%);
+
+  /* --- GENERAL UTILITY COLORS SCALE --- */
+  --bh-lime-25: hsl(80, 91%, 98%);
+  --bh-lime-50: hsl(80, 87%, 95%);
+  --bh-lime-100: hsl(79, 79%, 91%);
+  --bh-lime-200: hsl(81, 80%, 81%);
+  --bh-lime-300: hsl(83, 77%, 70%);
+  --bh-lime-400: hsl(87, 67%, 61%);
+  --bh-lime-500: hsl(92, 51%, 54%);
+  --bh-lime-600: hsl(93, 40%, 45%);
+  --bh-lime-700: hsl(92, 42%, 34%);
+  --bh-lime-800: hsl(89, 43%, 26%);
+  --bh-lime-900: hsl(91, 38%, 20%);
+  --bh-lime-950: hsl(92, 47%, 12%);
+
+  --bh-teal-25: hsl(166, 76%, 99%);
+  --bh-teal-50: hsl(166, 76%, 97%);
+  --bh-teal-100: hsl(167, 81%, 90%);
+  --bh-teal-200: hsl(168, 81%, 79%);
+  --bh-teal-300: hsl(171, 76%, 64%);
+  --bh-teal-400: hsl(172, 63%, 53%);
+  --bh-teal-500: hsl(171, 56%, 46%);
+  --bh-teal-600: hsl(173, 57%, 37%);
+  --bh-teal-700: hsl(174, 60%, 29%);
+  --bh-teal-800: hsl(176, 62%, 23%);
+  --bh-teal-900: hsl(175, 54%, 20%);
+  --bh-teal-950: hsl(178, 70%, 11%);
+
+  --bh-blue-25: hsl(210, 100%, 98%);
+  --bh-blue-50: hsl(206, 100%, 97%);
+  --bh-blue-100: hsl(209, 100%, 91%);
+  --bh-blue-200: hsl(206, 100%, 85%);
+  --bh-blue-300: hsl(206, 100%, 76%);
+  --bh-blue-400: hsl(207, 98%, 66%);
+  --bh-blue-500: hsl(211, 95%, 58%);
+  --bh-blue-600: hsl(215, 87%, 51%);
+  --bh-blue-700: hsl(218, 80%, 46%);
+  --bh-blue-800: hsl(220, 75%, 38%);
+  --bh-blue-900: hsl(218, 68%, 31%);
+  --bh-blue-950: hsl(218, 68%, 20%);
+
+  --bh-lavender-25: hsl(291, 33%, 98%);
+  --bh-lavender-50: hsl(291, 33%, 96%);
+  --bh-lavender-100: hsl(289, 35%, 91%);
+  --bh-lavender-200: hsl(291, 34%, 88%);
+  --bh-lavender-300: hsl(291, 34%, 84%);
+  --bh-lavender-400: hsl(290, 35%, 73%);
+  --bh-lavender-500: hsl(291, 35%, 64%);
+  --bh-lavender-600: hsl(290, 35%, 55%);
+  --bh-lavender-700: hsl(290, 35%, 45%);
+  --bh-lavender-800: hsl(290, 35%, 39%);
+  --bh-lavender-900: hsl(290, 35%, 31%);
+  --bh-lavender-950: hsl(291, 35%, 18%);
+
+  --bh-purple-25: hsl(270, 100%, 99%);
+  --bh-purple-50: hsl(268, 100%, 97%);
+  --bh-purple-100: hsl(264, 83%, 94%);
+  --bh-purple-200: hsl(267, 87%, 90%);
+  --bh-purple-300: hsl(267, 85%, 84%);
+  --bh-purple-400: hsl(267, 87%, 73%);
+  --bh-purple-500: hsl(267, 87%, 68%);
+  --bh-purple-600: hsl(272, 84%, 57%);
+  --bh-purple-700: hsl(272, 71%, 44%);
+  --bh-purple-800: hsl(273, 66%, 37%);
+  --bh-purple-900: hsl(273, 61%, 30%);
+  --bh-purple-950: hsl(273, 76%, 21%);
+
+  --bh-pink-25: hsl(327, 73%, 99%);
+  --bh-pink-50: hsl(327, 73%, 97%);
+  --bh-pink-100: hsl(328, 70%, 95%);
+  --bh-pink-200: hsl(326, 77%, 90%);
+  --bh-pink-300: hsl(328, 85%, 82%);
+  --bh-pink-400: hsl(328, 86%, 69%);
+  --bh-pink-500: hsl(330, 83%, 60%);
+  --bh-pink-600: hsl(331, 71%, 46%);
+  --bh-pink-700: hsl(331, 71%, 42%);
+  --bh-pink-800: hsl(331, 71%, 37%);
+  --bh-pink-900: hsl(331, 72%, 25%);
+  --bh-pink-950: hsl(331, 72%, 17%);
+
+  --bh-orange-25: hsl(29, 90%, 98%);
+  --bh-orange-50: hsl(29, 90%, 96%);
+  --bh-orange-100: hsl(30, 90%, 92%);
+  --bh-orange-200: hsl(36, 86%, 83%);
+  --bh-orange-300: hsl(27, 89%, 72%);
+  --bh-orange-400: hsl(23, 88%, 61%);
+  --bh-orange-500: hsl(21, 87%, 53%);
+  --bh-orange-600: hsl(17, 82%, 48%);
+  --bh-orange-700: hsl(13, 80%, 40%);
+  --bh-orange-800: hsl(11, 71%, 34%);
+  --bh-orange-900: hsl(11, 67%, 28%);
+  --bh-orange-950: hsl(11, 67%, 19%);
+
+  /* --- UTILITY CHART COLORS --- */
+  --bh-chart-01: var(--bh-brand-500);
+  --bh-chart-02: var(--bh-lavender-500);
+  --bh-chart-04: var(--bh-accent-500);
+  --bh-chart-03: var(--bh-neutral-500);
+  --bh-chart-07: var(--bh-neutral-400);
+  --bh-chart-08: var(--bh-accent-400);
+  --bh-chart-09: var(--bh-brand-300);
+  --bh-chart-06: var(--bh-lavender-400);
+  --bh-chart-05: var(--bh-brand-400);
+  --bh-chart-11: var(--bh-neutral-300);
+  --bh-chart-10: var(--bh-lavender-300);
+
+  /* --- SPACING SCALE (Unit: 0.25rem / 4px) --- */
+  --bh-scale-0: 0px;
+  --bh-scale-0_5: 1px;
+  --bh-scale-1: 2px;
+  --bh-scale-2: 4px;
+  --bh-scale-2_5: 6px;
+  --bh-scale-3: 8px;
+  --bh-scale-4: 12px;
+  --bh-scale-5: 16px;
+  --bh-scale-5_5: 20px;
+  --bh-scale-6: 24px;
+  --bh-scale-7: 32px;
+  --bh-scale-8: 40px;
+  --bh-scale-9: 48px;
+  --bh-scale-10: 56px;
+  --bh-scale-11: 64px;
+  --bh-scale-11_5: 72px;
+  --bh-scale-12: 80px;
+  --bh-scale-13: 96px;
+  --bh-scale-15: 120px;
+  --bh-scale-20: 160px;
+  --bh-scale-48: 192px;
+  --bh-scale-56: 224px;
+  --bh-scale-64: 256px;
+  --bh-scale-80: 320px;
+  --bh-scale-96: 384px;
+  --bh-scale-120: 480px;
+  --bh-scale-140: 560px;
+  --bh-scale-160: 640px;
+  --bh-scale-180: 720px;
+  --bh-scale-192: 768px;
+  --bh-scale-256: 1024px;
+  --bh-scale-320: 1280px;
+  --bh-scale-360: 1440px;
+  --bh-scale-400: 1600px;
+  --bh-scale-480: 1920px;
+
+  /* --- TYPOGRAPHY SCALE --- */
+  /* Font Families */
+  --bh-font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --bh-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono',
+    'Courier New', monospace;
+
+  /* Font Weights */
+  --bh-font-weight-400: 400;
+  --bh-font-weight-500: 500;
+  --bh-font-weight-600: 600;
+  --bh-font-weight-700: 700;
+
+  /* Font Sizes */
+  --bh-font-size-10: 10px;
+  --bh-font-size-12: 12px;
+  --bh-font-size-14: 14px;
+  --bh-font-size-16: 16px;
+  --bh-font-size-18: 18px;
+  --bh-font-size-20: 20px;
+  --bh-font-size-22: 22px;
+  --bh-font-size-26: 26px;
+  --bh-font-size-28: 28px;
+  --bh-font-size-32: 32px;
+  --bh-font-size-36: 36px;
+  --bh-font-size-40: 40px;
+
+  /* Line Heights */
+  --bh-leading-tight: 1.25;
+  --bh-leading-normal: 1.5;
+  --bh-leading-relaxed: 1.75;
+
+  /* --- RADIUS SCALE --- */
+  --bh-radii-none: 0rem;
+  --bh-radii-xxs: 0.125rem;
+  --bh-radii-xs: 0.25rem;
+  --bh-radii-sm: 0.375rem;
+  --bh-radii-md: 0.5rem;
+  --bh-radii-lg: 0.625rem;
+  --bh-radii-xl: 0.75rem;
+  --bh-radii-2xl: 1rem;
+  --bh-radii-3xl: 1.25rem;
+  --bh-radii-4xl: 1.5rem;
+  --bh-radii-full: 9999px;
+
+  /* --- BORDER WIDTH SCALE --- */
+  --bh-border-0: 0;
+  --bh-border-1: 1px;
+  --bh-border-2: 2px;
+
+  /* --- OPACITY PRIMITIVES --- */
+  --bh-opacity-0: 0;
+  --bh-opacity-10: 0.01;
+  --bh-opacity-20: 0.02;
+  --bh-opacity-40: 0.04;
+  --bh-opacity-60: 0.06;
+  --bh-opacity-80: 0.08;
+  --bh-opacity-100: 1;
+}

package/src/bh-tokens/_semantic.scss

@@ -0,0 +1,158 @@
+/* ==========================================================================
+   BELLHOP SEMANTIC TOKENS
+   Functional mapping of primitives to UI intent.
+   ========================================================================== */
+
+@use './_primitives.scss';
+
+:root {
+  /* --- SURFACE TOKENS --- */
+  --bh-surface-canvas: var(--bh-neutral-25);
+  --bh-surface-default: var(--bh-white);
+  --bh-surface-elevated: var(--bh-white);
+  --bh-surface-inverse: var(--bh-neutral-900);
+
+  /* --- BACKGROUND TOKENS --- */
+  --bh-bg-base: var(--bh-white);
+  --bh-bg-subtle: var(--bh-neutral-50);
+  --bh-bg-muted: var(--bh-neutral-100);
+  --bh-bg-disabled: var(--bh-neutral-100);
+  --bh-bg-overlay: rgba(var(--bh-neutral-100), 60%);
+  --bh-bg-inverse: var(--bh-neutral-900);
+
+  /* --- BORDER TOKENS --- */
+  --bh-border-default: var(--bh-neutral-200);
+  --bh-border-subtle: var(--bh-neutral-300);
+  --bh-border-focus: var(--bh-brand-500);
+  --bh-border-selected: var(--bh-brand-600);
+
+  /* --- TEXT TOKENS --- */
+  --bh-text-primary: var(--bh-neutral-900);
+  --bh-text-secondary: var(--bh-neutral-800);
+  --bh-text-tertiary: var(--bh-neutral-600);
+  --bh-text-brand: var(--bh-brand-600);
+  --bh-text-disabled: var(--bh-neutral-400);
+  --bh-text-inverse: var(--bh-white);
+  --bh-text-error: var(--bh-error-600);
+  --bh-text-warning: var(--bh-warning-700);
+  --bh-text-success: var(--bh-success-700);
+  --bh-text-highlight: var(--bh-purple-700);
+
+  /* --- ACTION TOKENS --- */
+  --bh-action-primary: var(--bh-brand-600);
+  --bh-action-primary_hover: var(--bh-brand-700);
+  --bh-action-primary_active: var(--bh-brand-800);
+  --bh-action-primary-subtle: var(--bh-brand-50);
+  --bh-action-primary-subtle_hover: var(--bh-brand-100);
+  --bh-action-primary-subtle_active: var(--bh-brand-200);
+  --bh-action-secondary: var(--bh-neutral-100);
+  --bh-action-secondary_hover: var(--bh-neutral-200);
+  --bh-action-secondary_active: var(--bh-neutral-300);
+  --bh-action-tertiary: var(--bh-transparent);
+  --bh-action-tertiary-hover: var(--bh-neutral-50);
+  --bh-action-tertiary-active: var(--bh-neutral-100);
+  --bh-action-success: var(--bh-succes-600);
+  --bh-action-success_hover: var(--bh-succes-600);
+  --bh-action-error: var(--bh-error-600);
+  --bh-action-error_hover: var(--bh-error-700);
+  --bh-action-warning: var(--bh-warning-600);
+  --bh-action-warning_hover: var(--bh-warning-700);
+  --bh-action-highlight: var(--bh-purple-600);
+  --bh-action-highlight_hover: var(--bh-purple-600);
+  --bh-action-disabled: var(--bh-neutral-200);
+
+  /* --- SPACING SEMANTICS (can be used to any dimesion such as padding, width, height --- */
+  --bh-spacing-none: var(--bh-scale-0); /* 0px */
+  --bh-spacing-xxs: var(--bh-scale-1); /* 2px */
+  --bh-spacing-xs: var(--bh-scale-2); /* 4px */
+  --bh-spacing-sm: var(--bh-scale-3); /* 8px */
+  --bh-spacing-md: var(--bh-scale-5); /* 16px */
+  --bh-spacing-lg: var(--bh-scale-6); /* 24px */
+  --bh-spacing-xl: var(--bh-scale-7); /* 32px */
+  --bh-spacing-2xl: var(--bh-scale-9); /* 48px */
+  --bh-spacing-3xl: var(--bh-scale-11); /* 64px */
+  --bh-spacing-4xl: var(--bh-scale-13); /* 80px */
+  --bh-spacing-5xl: var(--bh-scale-15); /* 96px */
+  --bh-spacing-6xl: var(--bh-scale-20); /* 160px */
+
+  /* --- RADIUS SEMANTICS --- */
+  --bh-radius-none: var(--bh-radii-none);
+  --bh-radius-xs: var(--bh-radii-xs);
+  --bh-radius-sm: var(--bh-radii-sm);
+  --bh-radius-md: var(--bh-radii-md);
+  --bh-radius-lg: var(--bh-radii-lg);
+  --bh-radius-full: var(--bh-radii-full);
+
+  --bh-opacity-base: var(--bh-opacity-100);
+  --bh-opacity-medium: var(--bh-opacity-60);
+  --bh-opacity-low: var(--bh-opacity-20);
+  --bh-opacity-transparent: var(--bh-opacity-0);
+
+  --bh-border-stroke-none: var(--bh-border-0);
+  --bh-border-stroke-thin: var(--bh-border-1);
+  --bh-border-stroke-medium: calc(var(--bh-border-1) * 1.5);
+  --bh-border-stroke-thick: var(--bh-border-2);
+
+  /* --- SHADOW SEMANTICS --- */
+  /* Logic: color-mix(in srgb, [base_color] [opacity_percentage], transparent) */
+  --bh-shadow-color-base: var(--bh-neutral-600);
+
+  --bh-shadow-xs: 0px 0px 2px 1px
+    color-mix(in srgb, var(--bh-shadow-color-base) 6%, transparent);
+  --bh-shadow-sm: 0px 3px 4px 0px
+      color-mix(in srgb, var(--bh-shadow-color-base) 10%, transparent),
+    0px 0px 1px 1px
+      color-mix(in srgb, var(--bh-shadow-color-base) 10%, transparent);
+  --bh-shadow-md: 0px 4px 8px 0px
+      color-mix(in srgb, var(--bh-shadow-color-base) 10%, transparent),
+    0px 0px 4px 0px
+      color-mix(in srgb, var(--bh-shadow-color-base) 10%, transparent);
+
+  --bh-shadow-card: var(--bh-shadow-sm);
+  --bh-shadow-dropdown: var(--bh-shadow-md);
+  --bh-shadow-modal: var(--bh-shadow-lg);
+
+  /* --- ICON SEMANTICS --- */
+  --bh-icon-size-xxs: var(--bh-scale-4);
+  --bh-icon-size-xs: var(--bh-scale-5);
+  --bh-icon-size-sm: var(--bh-scale-5_5);
+  --bh-icon-size-md: var(--bh-scale-6);
+  --bh-icon-size-lg: var(--bh-scale-7);
+  --bh-icon-size-xl: var(--bh-scale-8);
+
+  /* --- FOCUS SEMANTICS --- */
+  --bh-focus-outline: var(--bh-brand-500);
+  --bh-focus-offset: 2px;
+
+  /* --- BREAKPOINT SEMANTICS --- */
+  --min-width-breakpoint-mobile: var(--bh-scale-80);
+  --min-width-breakpoint-tablet: var(--bh-scale-160);
+  --min-width-breakpoint-desktop: 1120px;
+  --min-width-breakpoint-wide: 1680px;
+
+  /* --- TYPOGRAPHY SEMANTICS --- */
+  --bh-font-heading: Inter;
+  --bh-font-body: Inter;
+
+  --bh-font-weight-regular: var(--bh-font-weight-400);
+  --bh-font-weight-medium: var(--bh-font-weight-500);
+  --bh-font-weight-semibold: var(--bh-font-weight-600);
+  --bh-font-weight-bold: var(--bh-font-weight-700);
+
+  --bh-font-heading-xs: var(--bh-font-size-20);
+  --bh-font-heading-sm: var(--bh-font-size-22);
+  --bh-font-heading-md: var(--bh-font-size-26);
+  --bh-font-heading-lg: var(--bh-font-size-28);
+  --bh-font-heading-xl: 60px;
+  --bh-font-heading-2xl: 72px;
+
+  --bh-font-body-xxs: var(--bh-font-size-10);
+  --bh-font-body-xs: var(--bh-font-size-12);
+  --bh-font-body-sm: var(--bh-font-size-14);
+  --bh-font-body-md: var(--bh-font-size-16);
+  --bh-font-body-lg: var(--bh-font-size-18);
+  --bh-font-body-xl: var(--bh-font-size-20);
+
+  --bh-line-height-heading: var(--bh-leading-tight);
+  --bh-line-height-body: var(--bh-leading-normal);
+}

package/src/bh-tokens/components/_avatar.tokens.scss

@@ -0,0 +1,64 @@
+/* ==========================================================================
+   BELLHOP AVATAR COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- AVATAR CONTAINER --- */
+  --bh-avatar-bg: var(--bh-neutral-100);
+  --bh-avatar-border-radius: 50%;
+
+  /* --- AVATAR SIZES --- */
+  --bh-avatar-size-xs: 24px;
+  --bh-avatar-size-sm: 32px;
+  --bh-avatar-size-md: 40px;
+  --bh-avatar-size-lg: 48px;
+  --bh-avatar-size-xl: 56px;
+  --bh-avatar-size-2xl: 64px;
+
+  /* --- AVATAR BORDER --- */
+  --bh-avatar-border-color: var(--bh-border-default);
+  --bh-avatar-border-width-small: var(--bh-border-stroke-thin);
+  --bh-avatar-border-width-large: var(--bh-border-stroke-thin);
+
+  /* --- AVATAR TEXT --- */
+  --bh-avatar-text-color: var(--bh-neutral-500);
+  --bh-avatar-text-font-weight: var(--bh-font-weight-semibold);
+
+  /* --- AVATAR TEXT SIZES --- */
+  --bh-avatar-text-size-xxs: 10px;
+  --bh-avatar-text-size-xs: 12px;
+  --bh-avatar-text-size-sm: var(--bh-font-body-sm);
+  --bh-avatar-text-size-md: var(--bh-font-body-md);
+  --bh-avatar-text-size-lg: 18px;
+  --bh-avatar-text-size-xl: 20px;
+  --bh-avatar-text-size-2xl: 24px;
+
+  /* --- AVATAR ICON --- */
+  --bh-avatar-icon-color: var(--bh-neutral-500);
+
+  /* --- AVATAR ICON SIZES --- */
+  --bh-avatar-icon-size-sm: 16px;
+  --bh-avatar-icon-size-md: 20px;
+  --bh-avatar-icon-size-lg: 24px;
+  --bh-avatar-icon-size-xl: 28px;
+  --bh-avatar-icon-size-2xl: 32px;
+  --bh-avatar-icon-size-3xl: 36px;
+  --bh-avatar-icon-size-4xl: 40px;
+
+  /* --- STATUS INDICATOR --- */
+  --bh-avatar-status-border-width: 1.5px;
+  --bh-avatar-status-border-color: var(--bh-white);
+  --bh-avatar-status-online-bg: var(--bh-success-500);
+  --bh-avatar-status-offline-bg: var(--bh-neutral-400);
+
+  /* --- STATUS INDICATOR SIZES --- */
+  --bh-avatar-status-size-xs: 6px;
+  --bh-avatar-status-size-sm: 8px;
+  --bh-avatar-status-size-md: 10px;
+  --bh-avatar-status-size-lg: 12px;
+  --bh-avatar-status-size-xl: 14px;
+  --bh-avatar-status-size-2xl: 16px;
+}

package/src/bh-tokens/components/_badge-dot.tokens.scss

@@ -0,0 +1,33 @@
+/* ==========================================================================
+   BELLHOP BADGE-DOT COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BADGE DOT BASE --- */
+  --bh-badge-dot-border-radius: 9999px;
+
+  /* --- SIZES --- */
+  --bh-badge-dot-size-sm: 6px;
+  --bh-badge-dot-size-md: 8px;
+  --bh-badge-dot-size-lg: 10px;
+
+  /* --- COLORS --- */
+  --bh-badge-dot-bg-success: var(--bh-success-500);
+  --bh-badge-dot-bg-blue: var(--bh-blue-500);
+  --bh-badge-dot-bg-error: var(--bh-error-500);
+  --bh-badge-dot-bg-warning: var(--bh-warning-500);
+
+  /* --- OUTLINE WIDTHS --- */
+  --bh-badge-dot-outline-width-sm: 3px;
+  --bh-badge-dot-outline-width-md: 4px;
+  --bh-badge-dot-outline-width-lg: 5px;
+
+  /* --- OUTLINE COLORS --- */
+  --bh-badge-dot-outline-success: var(--bh-success-100);
+  --bh-badge-dot-outline-blue: var(--bh-blue-200);
+  --bh-badge-dot-outline-error: var(--bh-error-200);
+  --bh-badge-dot-outline-warning: var(--bh-warning-200);
+}

package/src/bh-tokens/components/_badge.tokens.scss

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   BELLHOP BADGE COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BADGE TYPOGRAPHY --- */
+  --bh-badge-font-family: var(--bh-font-family-base);
+  --bh-badge-font-weight: var(--bh-font-weight-medium);
+
+  /* --- BADGE SIZING --- */
+  --bh-badge-font-size-sm: var(--bh-font-body-sm);
+  --bh-badge-line-height-sm: var(--bh-line-height-body);
+  --bh-badge-height-sm: calc(var(--bh-spacing-md) * 1.25);
+  --bh-badge-padding-y-sm: var(--bh-spacing-xxs);
+  --bh-badge-padding-x-sm: var(--bh-spacing-sm);
+
+  --bh-badge-font-size-md: var(--bh-font-body-sm);
+  --bh-badge-line-height-md: var(--bh-line-height-body);
+  --bh-badge-height-md: var(--bh-spacing-lg);
+  --bh-badge-padding-y-md: var(--bh-spacing-xs);
+  --bh-badge-padding-x-md: calc(var(--bh-spacing-md) * 0.625);
+
+  --bh-badge-font-size-lg: var(--bh-font-body-md);
+  --bh-badge-line-height-lg: var(--bh-line-height-body);
+  --bh-badge-height-lg: calc(var(--bh-spacing-md) * 1.75);
+  --bh-badge-padding-y-lg: var(--bh-spacing-sm);
+  --bh-badge-padding-x-lg: calc(var(--bh-spacing-md) * 0.75);
+
+  /* --- BADGE BORDER --- */
+  --bh-badge-border-high: var(--bh-border-stroke-none) solid;
+  --bh-badge-border-medium: var(--bh-border-stroke-none) solid;
+  --bh-badge-border-low: var(--bh-border-stroke-thin) solid;
+
+  /* --- BADGE GAP --- */
+  --bh-badge-gap: var(--bh-spacing-sm);
+
+  /* --- BADGE RADIUS --- */
+  --bh-badge-radius: var(--bh-radius-full);
+
+  /* --- BADGE TRANSITION --- */
+  --bh-badge-transition: all 0.2s ease;
+
+  /* --- BADGE ICON SIZES --- */
+  --bh-badge-icon-dot-size-sm: var(--bh-icon-size-xxs);
+  --bh-badge-icon-dot-size-md: var(--bh-icon-size-xxs);
+  --bh-badge-icon-dot-size-lg: var(--bh-icon-size-xxs);
+
+  --bh-badge-icon-custom-size-sm: var(--bh-icon-size-xs);
+  --bh-badge-icon-custom-size-md: var(--bh-icon-size-xs);
+  --bh-badge-icon-custom-size-lg: var(--bh-icon-size-sm);
+
+  /* --- BADGE DISMISS BUTTON --- */
+  --bh-badge-dismiss-size-sm: var(--bh-icon-size-xs);
+  --bh-badge-dismiss-size-md: var(--bh-icon-size-xs);
+  --bh-badge-dismiss-size-lg: var(--bh-icon-size-xs);
+
+  --bh-badge-dismiss-hover: var(--bh-neutral-200);
+}