@actabldesign/bellhop-styles 0.0.3 → 0.0.4

package/llms.txt

@@ -0,0 +1,206 @@
+# Bellhop Styles - AI Documentation
+
+Shared CSS styles and design tokens documentation for AI assistants.
+
+## 📦 This Package
+
+**@actabldesign/bellhopos-styles** - Framework-agnostic CSS styles and design tokens
+
+- **Full Documentation**: `/llms/styles.txt` (223K, 62K tokens, 68 files)
+- **Version**: 0.0.1
+- **Framework**: None (works with Angular, React, Vue, etc.)
+
+## 🎯 Quick Access
+
+### Primary Documentation
+
+For complete codebase context, use:
+- **Root repository**: `/llms/styles.txt`
+- **This location**: `libs/bellhopos-styles/llms.txt` (this file)
+
+Both point to the same comprehensive documentation.
+
+### Related Documentation
+
+- **Angular Components**: `/llms/angular.txt`
+- **React Components**: `/llms/react.txt`
+- **Assets & Icons**: `/llms/assets.txt`
+
+## 📚 What's Included
+
+### Design Tokens
+
+**Colors**:
+- Primary colors: `--color-primary-50` to `--color-primary-900`
+- Neutral colors: `--color-neutral-50` to `--color-neutral-900`
+- Semantic colors: Success, Warning, Error, Info (50-900 scale)
+- Special: `--color-white`, `--color-black`
+
+**Typography**:
+- Font families: `--font-inter`
+- Font sizes: `--text-xs-size` to `--text-9xl-size`
+- Font weights: `--font-light` to `--font-bold`
+- Line heights: Corresponding to each size
+
+**Spacing**:
+- Scale: `--spacing-0-5` (0.125rem) to `--spacing-96` (24rem)
+- Based on 0.25rem (4px) increments
+- Consistent across all components
+
+**Shadows**:
+- Variants: `--shadow-xs`, `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
+- Consistent elevation system
+
+**Border Radius**:
+- Tokens: `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-full`
+- Range: 0.125rem to 9999px (full circle)
+
+**Animations**:
+- Transitions: `--transition-fast`, `--transition-base`, `--transition-slow`
+- Easing: `--ease-in`, `--ease-out`, `--ease-in-out`
+
+### Component Styles
+
+Complete CSS for 40+ components:
+- Layout: Appbar, Sidebar, PageNavigation, Container
+- Forms: Input, Textarea, Checkbox, RadioButton, Toggle, Dropdown
+- Data Display: Badge, Avatar, Notification, EmptyState
+- Data Visualization: Charts, tooltips, legends
+- Pickers: Date, Month, Range pickers
+- Interactive: Buttons, Popovers, Tooltips
+
+### Base Styles
+
+- **normalize.css**: CSS reset and normalization
+- **Global styles**: Body, typography, links
+- **Layout utilities**: Flexbox, grid helpers
+
+## 🚀 Usage
+
+### Installation
+
+```bash
+npm install @actabldesign/bellhopos-styles
+```
+
+### Import All Styles
+
+```css
+/* Import everything */
+@import '@actabldesign/bellhopos-styles';
+```
+
+Or in JavaScript/TypeScript:
+
+```tsx
+import '@actabldesign/bellhopos-styles';
+```
+
+### Import Specific Modules
+
+```css
+/* Import only what you need */
+@import '@actabldesign/bellhopos-styles/base/colors.css';
+@import '@actabldesign/bellhopos-styles/base/typography.css';
+@import '@actabldesign/bellhopos-styles/base/spacing.css';
+@import '@actabldesign/bellhopos-styles/components/button.css';
+```
+
+### Use Design Tokens
+
+```css
+.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);
+
+  /* Animations */
+  transition: all var(--transition-base) var(--ease-in-out);
+}
+```
+
+## 📖 For AI Assistants
+
+When working with styles:
+
+1. **Load the full documentation**: `/llms/styles.txt` contains all CSS source
+2. **Use design tokens**: Always reference CSS custom properties
+3. **Follow BEM-like naming**: `.component-name__element--modifier`
+4. **Match existing patterns**: Check component styles for consistency
+5. **Responsive design**: Use mobile-first approach
+
+### Naming Conventions
+
+**Components**:
+```css
+.component-name { }
+.component-name__element { }
+.component-name--variant { }
+.component-name__element--state { }
+```
+
+**Utilities**:
+```css
+.u-margin-top-4 { }
+.u-flex { }
+.u-text-center { }
+```
+
+### Token Usage
+
+Always prefer tokens over hard-coded values:
+
+❌ **Don't**:
+```css
+.button {
+  background: #0ea5e9;
+  padding: 16px;
+  font-size: 14px;
+}
+```
+
+✅ **Do**:
+```css
+.button {
+  background: var(--color-primary-500);
+  padding: var(--spacing-4);
+  font-size: var(--text-sm-size);
+}
+```
+
+### Color Scales
+
+All colors follow a 50-900 scale:
+- **50**: Lightest (backgrounds, hover states)
+- **500**: Base color (primary action color)
+- **900**: Darkest (text, emphasis)
+
+Use:
+- `50-200` for backgrounds
+- `300-600` for borders and subtle elements
+- `700-900` for text and high contrast
+
+## 🔗 Resources
+
+- **Full Documentation**: See README.md in this directory
+- **Repository**: https://github.com/actabldesign/bellhopos
+- **NPM**: https://www.npmjs.com/package/@actabldesign/bellhopos-styles
+
+---
+
+**Note**: This file is a pointer to the main documentation. For complete CSS source code and design token details, use `/llms/styles.txt`.

package/package.json

@@ -1,32 +1,36 @@
 {
   "name": "@actabldesign/bellhop-styles",
-  "version": "0.0.3+9324769",
-  "description": "BellhopOS styles and CSS",
-  "type": "module",
-  "main": "./index.css",
-  "style": "./index.css",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.css",
-      "require": "./index.css",
-      "default": "./index.css"
-    },
-    "./css": "./index.css"
-  },
+  "version": "0.0.4",
+  "description": "Shared CSS styles for Bellhop design system",
+  "main": "index.css",
+  "module": "index.css",
+  "types": "index.d.ts",
   "files": [
-    "index.css",
-    "index.d.ts",
-    "base/",
-    "components/"
+    "**/*"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "styles",
+    "bellhop",
+    "actabl"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/actabldesign/bellhop-dist.git",
-    "directory": "styles"
+  "author": "Actabl Design Team",
+  "license": "MIT",
+  "devDependencies": {
+    "rollup": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "postcss-import": "^16.0.0",
+    "postcss": "^8.4.5",
+    "rimraf": "^5.0.5"
   },
   "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
     "access": "public"
   }
 }

package/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "bellhop-styles",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "packages/bellhop-styles/src",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/bellhop-styles"],
+      "options": {
+        "commands": [
+          "mkdir -p dist/bellhop-styles",
+          "cd packages/bellhop-styles && npm run build",
+          "cp packages/bellhop-styles/dist/* dist/bellhop-styles/",
+          "cp packages/bellhop-styles/package.json dist/bellhop-styles/",
+          "cp packages/bellhop-styles/README.md dist/bellhop-styles/ || true"
+        ],
+        "parallel": false
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "echo 'No linting configured for styles library'"
+      }
+    }
+  },
+  "tags": ["type:styles", "framework:agnostic"]
+}

package/rollup.config.js

@@ -0,0 +1,29 @@
+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'
+  },
+  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
+    })
+  ]
+};

package/{base → src/base}/normalize.css

@@ -36,6 +36,10 @@ dd {
 }
 
 /* Set core root defaults */
+html {
+  font-size: 16px; /* Explicit base font size for consistent rem calculations */
+}
+
 html:focus-within {
   scroll-behavior: smooth;
 }

package/src/index.css

@@ -0,0 +1,22 @@
+/* Bellhop Shared Styles - Design Tokens & Utilities */
+
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* Base normalization - import first */
+@import './base/normalize.css';
+
+/* Design Tokens - Foundation */
+@import './tokens/index.css';
+
+/*
+ * Note: Component styles are no longer included here.
+ * All component styles are bundled with their respective Stencil components
+ * in the @actabldesign/bellhop-core package using Shadow DOM encapsulation.
+ *
+ * This package now provides only:
+ * - Design tokens (colors, typography, spacing, shadows, radius, etc.)
+ * - Base normalization
+ * - Layout utilities
+ * - Animations
+ */