@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/README.md

@@ -1,6 +1,6 @@
-# Bellhop Styles
+# @actabldesign/bellhop-styles
 
-Shared CSS styles and design tokens for the Bellhop design system. This package provides framework-agnostic styles that can be used with Angular, React, or any other framework.
+Shared CSS styles and design tokens for the Bellhop design system. Framework-agnostic styles that work with Angular, React, or any other framework.
 
 ## Installation
 
@@ -10,33 +10,91 @@ npm install @actabldesign/bellhop-styles
 
 ## Usage
 
-### Import All Styles
+### ESM / CDN (Recommended)
 
-Import the complete style package in your main CSS or TypeScript/JavaScript file:
+The easiest way to use Bellhop styles is via ESM CDN links. No build step required:
+
+```html
+<!-- 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:
+
+```html
+<!-- 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:
 
 ```css
 @import '@actabldesign/bellhop-styles';
 ```
 
-or in TypeScript/JavaScript:
+Or in TypeScript/JavaScript:
 
 ```tsx
 import '@actabldesign/bellhop-styles';
 ```
 
-### Import Individual Style Modules
+### Import Utility Classes
 
-For more granular control, you can import individual style modules:
+For layout and utility classes:
 
 ```css
-@import '@actabldesign/bellhop-styles/base/colors.css';
-@import '@actabldesign/bellhop-styles/base/typography.css';
-@import '@actabldesign/bellhop-styles/base/spacing.css';
-@import '@actabldesign/bellhop-styles/base/shadows.css';
-@import '@actabldesign/bellhop-styles/base/radius.css';
+@import '@actabldesign/bellhop-styles/utilities';
 ```
 
-### Using Design Tokens
+### Import Individual Token Files
+
+For granular control, import specific token files from `src/tokens/`:
+
+```css
+@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:
 
@@ -63,61 +121,45 @@ All design tokens are available as CSS custom properties:
 }
 ```
 
-## Design Tokens Reference
+## Token Reference
 
 ### Colors
 
-#### Primary Colors
-- `--color-primary-50` to `--color-primary-900`
-- `--color-primary-500` (default brand color)
+**Primary Colors**: `--color-primary-50` to `--color-primary-900`
 
-#### Neutral Colors
-- `--color-neutral-50` to `--color-neutral-900`
-- `--color-white`, `--color-black`
+**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`
+**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 Families
-- `--font-inter`: Primary font family
+**Font Family**: `--font-inter`
 
-#### Font Sizes
-- `--text-xs-size` (0.75rem)
-- `--text-sm-size` (0.875rem)
-- `--text-base-size` (1rem)
-- `--text-lg-size` (1.125rem)
-- `--text-xl-size` (1.25rem)
-- And more...
+**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)
+**Font Weights**: `--font-light` (300), `--font-normal` (400), `--font-medium` (500), `--font-semibold` (600), `--font-bold` (700)
 
 ### Spacing
 
-Spacing scale from 0.5 to 96 (in 0.25rem increments):
-- `--spacing-0-5` (0.125rem)
+Scale from `--spacing-0-5` (0.125rem) to `--spacing-96`:
+
 - `--spacing-1` (0.25rem)
 - `--spacing-2` (0.5rem)
 - `--spacing-4` (1rem)
 - `--spacing-8` (2rem)
-- And more...
 
 ### Shadows
 
-- `--shadow-xs`: Extra small shadow
-- `--shadow-sm`: Small shadow
-- `--shadow-md`: Medium shadow
-- `--shadow-lg`: Large shadow
-- `--shadow-xl`: Extra large shadow
+- `--shadow-xs` - Extra small
+- `--shadow-sm` - Small
+- `--shadow-md` - Medium
+- `--shadow-lg` - Large
+- `--shadow-xl` - Extra large
 
 ### Border Radius
 
@@ -127,19 +169,6 @@ Spacing scale from 0.5 to 96 (in 0.25rem increments):
 - `--radius-xl` (1rem)
 - `--radius-full` (9999px)
 
-## Component Styles
-
-The package includes pre-built component styles that follow the Bellhop design system. These are automatically applied when using Bellhop components.
-
-### Layout Classes
-
-```css
-.app-layout { /* Dashboard layout */ }
-.app-sidebar { /* Sidebar container */ }
-.app-main { /* Main content area */ }
-.bellhop-content-container { /* Content wrapper */ }
-```
-
 ## Framework Integration
 
 ### React
@@ -148,17 +177,13 @@ The package includes pre-built component styles that follow the Bellhop design s
 import '@actabldesign/bellhop-styles';
 
 function App() {
-  return (
-    <div className="app-layout">
-      {/* Your components */}
-    </div>
-  );
+  return <div className="app-layout">{/* Your components */}</div>;
 }
 ```
 
 ### Angular
 
-Add to your `src/styles.css`:
+In `src/styles.css`:
 
 ```css
 @import '@actabldesign/bellhop-styles';
@@ -167,19 +192,29 @@ Add to your `src/styles.css`:
 ### Vanilla JavaScript/HTML
 
 ```html
-<link rel="stylesheet" href="node_modules/@actabldesign/bellhop-styles/index.css">
+<link
+  rel="stylesheet"
+  href="node_modules/@actabldesign/bellhop-styles/index.css"
+/>
 ```
 
 ## Development
 
-This package is built using Rollup and PostCSS.
-
 ### Building
 
 ```bash
 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

package/dist/index.css

@@ -461,6 +461,39 @@ select:focus {
   font-variant-numeric: tabular-nums;
   font-family: var(--font-mono);
 }
+/* =========================
+   TEXT COLOR UTILITIES
+   ========================= */
+.text-primary {
+  color: var(--bh-text-primary);
+}
+.text-secondary {
+  color: var(--bh-text-secondary);
+}
+.text-tertiary {
+  color: var(--bh-text-tertiary);
+}
+.text-brand {
+  color: var(--bh-text-brand);
+}
+.text-disabled {
+  color: var(--bh-text-disabled);
+}
+.text-inverse {
+  color: var(--bh-text-inverse);
+}
+.text-error {
+  color: var(--bh-text-error);
+}
+.text-warning {
+  color: var(--bh-text-warning);
+}
+.text-success {
+  color: var(--bh-text-success);
+}
+.text-highlight {
+  color: var(--bh-text-highlight);
+}
 :root {
   /* PRIMITIVES — one unit = 0.25rem (4px) */
   --sp-0: 0rem; /* 0px */