@actabldesign/bellhop-styles

Shared CSS styles and design tokens for the Bellhop design system. Framework-agnostic styles that work with Angular, React, or any other framework.

Installation

npm install @actabldesign/bellhop-styles

Usage

ESM / CDN (Recommended)

The easiest way to use Bellhop styles is via ESM CDN links. No build step required:

<!-- All styles -->
<link rel="stylesheet" href="https://esm.sh/@actabldesign/bellhop-styles" />

<!-- Utility classes only -->
<link
  rel="stylesheet"
  href="https://esm.sh/@actabldesign/bellhop-styles/utilities"
/>

Alternative CDN options:

<!-- unpkg -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@actabldesign/bellhop-styles/index.css"
/>

<!-- jsdelivr -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@actabldesign/bellhop-styles/index.css"
/>

Import in CSS

Import the complete style package in your main CSS file:

@import '@actabldesign/bellhop-styles';

Or in TypeScript/JavaScript:

import '@actabldesign/bellhop-styles';

Import Utility Classes

For layout and utility classes:

@import '@actabldesign/bellhop-styles/utilities';

Import Individual Token Files

For granular control, import specific token files from src/tokens/:

@import '@actabldesign/bellhop-styles/src/tokens/bellhop-primary-colors.css';
@import '@actabldesign/bellhop-styles/src/tokens/bellhop-typography.css';
@import '@actabldesign/bellhop-styles/src/tokens/bellhop-spacing.css';
@import '@actabldesign/bellhop-styles/src/tokens/bellhop-shadows.css';
@import '@actabldesign/bellhop-styles/src/tokens/bellhop-radius.css';

Design Token Files

Located in src/tokens/:

| File | Description | | ------------------------------ | --------------------------------- | | bellhop-primary-colors.css | Brand and primary colors | | bellhop-secondary-colors.css | Extended color palette | | bellhop-typography.css | Font families, sizes, weights | | bellhop-spacing.css | Spacing scale | | bellhop-radius.css | Border radius values | | bellhop-shadows.css | Shadow definitions | | bellhop-animations.css | Animation keyframes and durations | | bellhop-layout.css | Layout-related tokens | | bellhop-icons.css | Icon sizing and styling | | bellhop-global.css | Global style utilities | | bellhop-styles.css | Combined component styles | | colors.json | Programmatic color definitions |

Using Design Tokens

All design tokens are available as CSS custom properties:

.my-component {
  /* Colors */
  background-color: var(--color-primary-500);
  color: var(--color-neutral-800);

  /* Spacing */
  padding: var(--spacing-4);
  margin: var(--spacing-2);

  /* Typography */
  font-family: var(--font-inter);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);

  /* Shadows */
  box-shadow: var(--shadow-md);

  /* Border Radius */
  border-radius: var(--radius-md);
}

Token Reference

Colors

Primary Colors: --color-primary-50 to --color-primary-900

Neutral Colors: --color-neutral-50 to --color-neutral-900, --color-white, --color-black

Semantic Colors:

• Success: --color-success-50 to --color-success-900
• Warning: --color-warning-50 to --color-warning-900
• Error: --color-error-50 to --color-error-900
• Info: --color-info-50 to --color-info-900

Typography

Font Family: --font-inter

Font Sizes: --text-xs-size (0.75rem) to --text-6xl-size

Font Weights: --font-light (300), --font-normal (400), --font-medium (500), --font-semibold (600), --font-bold (700)

Spacing

Scale from --spacing-0-5 (0.125rem) to --spacing-96:

• --spacing-1 (0.25rem)
• --spacing-2 (0.5rem)
• --spacing-4 (1rem)
• --spacing-8 (2rem)

Shadows

• --shadow-xs - Extra small
• --shadow-sm - Small
• --shadow-md - Medium
• --shadow-lg - Large
• --shadow-xl - Extra large

Border Radius

• --radius-sm (0.125rem)
• --radius-md (0.25rem)
• --radius-lg (0.5rem)
• --radius-xl (1rem)
• --radius-full (9999px)

Utility Classes

Bellhop provides utility classes prefixed with bh- for layout, spacing, and typography.

Layout Utilities

<!-- Flexbox -->
<div class="bh-flex bh-justify_between bh-align_center bh-gap_md">

<!-- Grid -->
<div class="bh-grid bh-grid-cols_3 bh-gap_lg">

Spacing Utilities

<!-- Margin: .bh-m_{size}, .bh-m-{side}_{size}, .bh-m-x_{size}, .bh-m-y_{size} -->
<div class="bh-m-bottom_lg bh-m-x_auto">

<!-- Padding: .bh-p_{size}, .bh-p-{side}_{size}, .bh-p-x_{size}, .bh-p-y_{size} -->
<div class="bh-p_xl bh-p-x_2xl">

<!-- Gap: .bh-gap_{size}, .bh-gap-x_{size}, .bh-gap-y_{size} -->
<div class="bh-flex bh-gap_md">

Spacing scale: none, xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl

Typography Utilities

<!-- Size: .bh-text-{xs|sm|md|lg|xl} -->
<span class="bh-text-lg bh-weight-semibold">

<!-- Color: .bh-text-{primary|secondary|tertiary|error|success|warning} -->
<span class="bh-text-secondary">

Responsive Variants

Add @tablet, @desktop, or @wide suffix for responsive breakpoints:

<div class="bh-p_sm bh-p_lg@tablet bh-p_xl@desktop">
<div class="bh-grid-cols_1 bh-grid-cols_2@tablet bh-grid-cols_4@desktop">

See the Storybook documentation for a complete utility class reference.

Framework Integration

React

import '@actabldesign/bellhop-styles';

function App() {
  return <div className="app-layout">{/* Your components */}</div>;
}

Angular

In src/styles.css:

@import '@actabldesign/bellhop-styles';

Vanilla JavaScript/HTML

<link
  rel="stylesheet"
  href="node_modules/@actabldesign/bellhop-styles/index.css"
/>

Development

Building

npm run build:lib:styles

The build process uses Rollup and PostCSS to bundle and optimize the CSS.

Related Packages

• @actabldesign/bellhop-core - Web Components (StencilJS)
• @actabldesign/bellhop-react - React component library
• @actabldesign/bellhop-angular - Angular component library
• @actabldesign/bellhop-assets - SVG icons, illustrations, logos

License

MIT