npm - @rhavenside/baseline - Versions diffs - 2.0.0 - Mend

@rhavenside/baseline 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/README.md +472 -0
package/dist/base-line.css +5 -0
package/dist/base-line.css.map +1 -0
package/dist/fonts/GoogleSansCode-Bold.ttf +0 -0
package/dist/fonts/GoogleSansCode-BoldItalic.ttf +0 -0
package/dist/fonts/GoogleSansCode-ExtraBold.ttf +0 -0
package/dist/fonts/GoogleSansCode-ExtraBoldItalic.ttf +0 -0
package/dist/fonts/GoogleSansCode-Italic-VariableFont_wght.ttf +0 -0
package/dist/fonts/GoogleSansCode-Italic.ttf +0 -0
package/dist/fonts/GoogleSansCode-Light.ttf +0 -0
package/dist/fonts/GoogleSansCode-LightItalic.ttf +0 -0
package/dist/fonts/GoogleSansCode-Medium.ttf +0 -0
package/dist/fonts/GoogleSansCode-MediumItalic.ttf +0 -0
package/dist/fonts/GoogleSansCode-Regular.ttf +0 -0
package/dist/fonts/GoogleSansCode-SemiBold.ttf +0 -0
package/dist/fonts/GoogleSansCode-SemiBoldItalic.ttf +0 -0
package/dist/fonts/GoogleSansCode-VariableFont_wght.ttf +0 -0
package/dist/fonts/RobotoCondensed-Black.ttf +0 -0
package/dist/fonts/RobotoCondensed-BlackItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Bold.ttf +0 -0
package/dist/fonts/RobotoCondensed-BoldItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-ExtraBold.ttf +0 -0
package/dist/fonts/RobotoCondensed-ExtraBoldItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-ExtraLight.ttf +0 -0
package/dist/fonts/RobotoCondensed-ExtraLightItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Italic-VariableFont_wght.ttf +0 -0
package/dist/fonts/RobotoCondensed-Italic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Light.ttf +0 -0
package/dist/fonts/RobotoCondensed-LightItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Medium.ttf +0 -0
package/dist/fonts/RobotoCondensed-MediumItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Regular.ttf +0 -0
package/dist/fonts/RobotoCondensed-SemiBold.ttf +0 -0
package/dist/fonts/RobotoCondensed-SemiBoldItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-Thin.ttf +0 -0
package/dist/fonts/RobotoCondensed-ThinItalic.ttf +0 -0
package/dist/fonts/RobotoCondensed-VariableFont_wght.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Black.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-BlackItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Bold.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-BoldItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-ExtraBold.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-ExtraBoldItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-ExtraLight.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-ExtraLightItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Italic-VariableFont_wght.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Italic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Light.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-LightItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Medium.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-MediumItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-Regular.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-SemiBold.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-SemiBoldItalic.ttf +0 -0
package/dist/fonts/ZalandoSansExpanded-VariableFont_wght.ttf +0 -0
package/dist/fonts/baseline-icons.woff +0 -0
package/dist/fonts/baseline-icons.woff2 +0 -0
package/dist/js/accordion.js +103 -0
package/dist/js/alert.js +91 -0
package/dist/js/base.js +146 -0
package/dist/js/button.js +80 -0
package/dist/js/carousel.js +427 -0
package/dist/js/collapse.js +233 -0
package/dist/js/color-modes.js +70 -0
package/dist/js/component.js +114 -0
package/dist/js/dropdown.js +348 -0
package/dist/js/index.js +108 -0
package/dist/js/modal.js +440 -0
package/dist/js/offcanvas.js +356 -0
package/dist/js/popover.js +241 -0
package/dist/js/swipe.js +143 -0
package/dist/js/tab.js +285 -0
package/dist/js/toast.js +228 -0
package/dist/js/tooltip.js +716 -0
package/dist/js/util/backdrop.js +133 -0
package/dist/js/util/component-functions.js +111 -0
package/dist/js/util/focustrap.js +101 -0
package/dist/js/util/scrollbar.js +111 -0
package/dist/js/util.js +564 -0
package/package.json +47 -0

package/README.md ADDED Viewed

@@ -0,0 +1,472 @@
+# Base-Line Design System
+A strict, layer-based design system with semantic tokens. Built on Bootstrap 5.3 architecture with a custom naming convention and token-based theming system.
+[![npm version](https://img.shields.io/npm/v/@rhavenside/baseline.svg)](https://www.npmjs.com/package/@rhavenside/baseline)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+## Installation
+Install Base-Line via npm:
+```bash
+npm install @rhavenside/baseline
+```
+Or via CDN:
+```html
+<link rel="stylesheet" href="https://unpkg.com/@rhavenside/baseline/dist/base-line.css">
+```
+## Quick Start
+### CSS Only
+Include the CSS file in your HTML:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="node_modules/@rhavenside/baseline/dist/base-line.css">
+  <title>Base-Line Example</title>
+</head>
+<body>
+  <div class="l-container">
+    <div class="l-stack l-stack--lg">
+      <h1>Hello Base-Line</h1>
+      <p>Welcome to the Base-Line Design System</p>
+      <button class="c-button c-button--primary">Get Started</button>
+    </div>
+  </div>
+</body>
+</html>
+```
+### With JavaScript
+For interactive components (modals, dropdowns, tooltips, etc.), include the JavaScript:
+```html
+<script type="module">
+  import '@rhavenside/baseline/js'
+</script>
+```
+Or using CommonJS:
+```javascript
+require('@rhavenside/baseline/js')
+```
+### In Your Build System
+#### Webpack / Vite / Rollup
+```javascript
+// Import CSS
+import '@rhavenside/baseline/css'
+// Import JavaScript
+import { Modal, Dropdown, Tooltip } from '@rhavenside/baseline/js'
+```
+#### Sass/SCSS
+```scss
+// Import the full system
+@import '~@rhavenside/baseline/dist/base-line.css';
+// Or import SCSS source (if available)
+@import '~@rhavenside/baseline/src/base.scss';
+```
+## Package Contents
+After installation, the package includes:
+```
+node_modules/@rhavenside/baseline/
+├── dist/
+│   ├── base-line.css          # Compiled CSS (compressed)
+│   ├── base-line.css.map      # Source map
+│   ├── js/
+│   │   ├── index.js           # Main JavaScript entry point
+│   │   ├── alert.js
+│   │   ├── button.js
+│   │   ├── modal.js
+│   │   └── ...                # All component files
+│   └── fonts/
+│       ├── baseline-icons.woff
+│       ├── baseline-icons.woff2
+│       └── *.ttf              # Custom fonts
+```
+## Architecture
+The system is divided into 4 clear layers:
+### Layer 1: Design Tokens (Foundation)
+All design values are defined via CSS Custom Properties:
+- **Colors**: Surface, Text, Accent, Border, State colors
+- **Typography**: Font families, sizes, line-height, weight
+- **Spacing**: Consistent step scale (4px base)
+- **Radius**: Border-radius values
+- **Shadow**: Shadow definitions
+- **Z-Index**: Z-index scale
+- **Motion**: Duration + easing functions
+**Rule:** No value without token. Exception: `0` and `auto`.
+### Layer 2: Layout System
+Layout classes for standard layouts without custom CSS:
+- `l-container` - Container with max-width + responsive padding
+- `l-stack` - Vertical layouts
+- `l-cluster` - Horizontal groups
+- `l-grid` - Flexible grid layouts (auto-fit / auto-fill)
+**Rule:** No colors, no typography in layout classes.
+### Layer 3: Components
+Fully functional components with JavaScript support:
+- **Buttons**: Primary, Secondary, Outline, Link variants
+- **Forms**: Input, Select, Textarea, Checkbox, Radio, Switch, Range
+- **Cards**: Standard, Elevated, Bordered variants
+- **Modals**: Dialogs with backdrop and animations
+- **Dropdowns**: Menus with positioning
+- **Tooltips & Popovers**: Contextual information
+- **Alerts**: Dismissible notifications
+- **Badges**: Status indicators and shields
+- **Tables**: Responsive tables with variants
+- **Navigation**: Navbar, Nav, Tabs
+- **Accordion**: Collapsible content sections
+- **Carousel**: Image/content sliders
+- **Pagination**: Page navigation
+- **Progress**: Progress bars
+- **Spinners**: Loading indicators
+- **Toasts**: Toast notifications
+- **Offcanvas**: Slide-out panels
+- **Breadcrumbs**: Navigation breadcrumbs
+- **List Groups**: Structured lists
+- **Input Groups**: Combined form inputs
+**Rule:** Components are state-driven and use tokens exclusively.
+### Layer 4: Utilities
+Intentionally limited utilities:
+- Visibility (`u-hidden`, `u-visually-hidden`)
+- Text alignment (`u-text-center`, `u-text-start`, etc.)
+- Font size (`u-fs-1` to `u-fs-6`)
+- Font weight (`u-fw-normal`, `u-fw-bold`, etc.)
+- Overflow (`u-overflow-hidden`, etc.)
+- Alignment (`u-flex`, `u-justify-between`, etc.)
+- Spacing (`u-m-*`, `u-p-*`, `u-gap-*`)
+**Forbidden:** Padding utilities for design, color utilities, shadow utilities.
+## Naming Convention
+### Tokens
+Format: `--<category>-<meaning>[-<level>]`
+```css
+--color-surface
+--color-surface-muted
+--color-accent
+--space-1 to --space-n
+--radius-sm, --radius-md
+--shadow-1, --shadow-2
+--duration-fast, --duration-normal
+--ease-standard, --ease-emphasized
+```
+### Layout Classes
+Format: `l-<role>`
+```html
+<div class="l-container">
+<div class="l-stack l-stack--lg">
+<div class="l-cluster l-cluster--center">
+<div class="l-grid l-grid--auto-fit">
+```
+### Components
+Format: `c-<component>`
+```html
+<button class="c-button c-button--primary">Button</button>
+<input class="c-input" type="text">
+<div class="c-card">
+```
+**Variants:**
+- `c-button--primary`, `c-button--secondary`
+- `c-alert--danger`, `c-alert--success`
+**Global States:**
+- `is-hovered`, `is-active`, `is-disabled`
+- `is-loading`, `is-open`, `has-error`
+### Utilities
+Format: `u-<function>`
+```html
+<div class="u-hidden">
+<div class="u-text-center">
+<div class="u-flex u-justify-between">
+```
+## JavaScript API
+### Data API (Automatic Initialization)
+Components can be initialized automatically via data attributes:
+```html
+<!-- Modal -->
+<button
+  type="button"
+  class="c-button"
+  data-c-toggle="modal"
+  data-c-target="#myModal">
+  Open Modal
+</button>
+<!-- Tooltip -->
+<button
+  type="button"
+  class="c-button"
+  data-c-toggle="tooltip"
+  data-c-placement="top"
+  title="Tooltip text">
+  Hover me
+</button>
+<!-- Popover -->
+<button
+  type="button"
+  class="c-button"
+  data-c-toggle="popover"
+  data-c-title="Popover title"
+  data-c-content="Popover content">
+  Click me
+</button>
+```
+### Programmatic API
+Import and use components programmatically:
+```javascript
+import { Modal, Dropdown, Tooltip } from '@rhavenside/baseline/js'
+// Create a modal instance
+const modalElement = document.querySelector('#myModal')
+const modal = Modal.getOrCreateInstance(modalElement, {
+  backdrop: true,
+  keyboard: true
+})
+// Show the modal
+modal.show()
+// Create a tooltip
+const tooltipElement = document.querySelector('[data-c-toggle="tooltip"]')
+const tooltip = Tooltip.getOrCreateInstance(tooltipElement, {
+  title: 'Custom tooltip text',
+  placement: 'top'
+})
+// Show the tooltip
+tooltip.show()
+```
+### Global Access
+When loaded via script tag, components are available globally:
+```javascript
+// Access via window.BaseLine
+const modal = window.BaseLine.Modal.getOrCreateInstance(element)
+const tooltip = window.BaseLine.Tooltip.getOrCreateInstance(element)
+```
+## Available Components
+| Component | CSS Class | JavaScript | Description |
+|-----------|-----------|------------|-------------|
+| Alert | `.c-alert` | `Alert` | Contextual feedback messages |
+| Badge | `.c-badge` | - | Status indicators |
+| Breadcrumb | `.c-breadcrumb` | - | Navigation breadcrumbs |
+| Button | `.c-button` | `Button` | Interactive buttons |
+| Card | `.c-card` | - | Content containers |
+| Carousel | `.c-carousel` | `Carousel` | Image/content sliders |
+| Dropdown | `.c-dropdown` | `Dropdown` | Dropdown menus |
+| Modal | `.c-modal` | `Modal` | Modal dialogs |
+| Nav | `.c-nav` | `Tab` | Navigation and tabs |
+| Navbar | `.c-navbar` | - | Navigation bars |
+| Offcanvas | `.c-offcanvas` | `Offcanvas` | Slide-out panels |
+| Pagination | `.c-pagination` | - | Page navigation |
+| Popover | `.c-popover` | `Popover` | Popovers |
+| Progress | `.c-progress` | - | Progress bars |
+| Spinner | `.c-spinner` | - | Loading spinners |
+| Toast | `.c-toast` | `Toast` | Toast notifications |
+| Tooltip | `.c-tooltip` | `Tooltip` | Tooltips |
+| Accordion | `.c-accordion` | `Accordion` | Collapsible sections |
+| Forms | `.c-input`, `.c-form-control` | - | Form inputs |
+| Table | `.c-table` | - | Data tables |
+| List Group | `.c-list-group` | - | Structured lists |
+## Examples
+### Button
+```html
+<button class="c-button c-button--primary">Primary</button>
+<button class="c-button c-button--secondary">Secondary</button>
+<button class="c-button c-button--outline-primary">Outline</button>
+```
+### Card
+```html
+<div class="c-card">
+  <div class="c-card__header">
+    <h5 class="c-card__title">Card Title</h5>
+  </div>
+  <div class="c-card__body">
+    <p>Card content goes here.</p>
+  </div>
+</div>
+```
+### Modal
+```html
+<!-- Trigger Button -->
+<button
+  type="button"
+  class="c-button c-button--primary"
+  data-c-toggle="modal"
+  data-c-target="#exampleModal">
+  Launch Modal
+</button>
+<!-- Modal -->
+<div class="c-modal c-fade" id="exampleModal" tabindex="-1">
+  <div class="c-modal-dialog">
+    <div class="c-modal-content">
+      <div class="c-modal-header">
+        <h5 class="c-modal-title">Modal Title</h5>
+        <button type="button" class="c-close" data-c-dismiss="modal"></button>
+      </div>
+      <div class="c-modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="c-modal-footer">
+        <button type="button" class="c-button c-button--secondary" data-c-dismiss="modal">Close</button>
+        <button type="button" class="c-button c-button--primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+### Form
+```html
+<div class="l-stack l-stack--sm">
+  <label class="c-form-label" for="email">Email</label>
+  <input type="email" class="c-form-control" id="email" placeholder="name@example.com">
+</div>
+<div class="l-stack l-stack--sm">
+  <label class="c-form-label" for="password">Password</label>
+  <input type="password" class="c-form-control" id="password">
+</div>
+<button type="submit" class="c-button c-button--primary">Submit</button>
+```
+## Dark Mode
+Dark mode is automatically activated via `prefers-color-scheme`. Additionally, the `.theme-dark` class can be set manually:
+```html
+<html class="theme-dark">
+```
+Or via data attribute:
+```html
+<html data-bs-theme="dark">
+```
+## Theming
+The system can be extended project-specifically without changing the core:
+```css
+:root {
+  --color-accent: #0066cc;
+  --color-primary: #0066cc;
+  --space-4: 1.5rem;
+  --radius-md: 0.5rem;
+}
+.theme-dark,
+[data-bs-theme="dark"] {
+  --color-surface: #1a1a1a;
+  --color-text: #ffffff;
+}
+```
+## Responsive Font Sizing (RFS)
+Base-Line includes [RFS (Responsive Font Size)](https://github.com/twbs/rfs) for automatic responsive font sizing. All font sizes, paddings, and margins above 1.25rem automatically scale down on smaller screens.
+## Browser Support
+Base-Line supports all modern browsers:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+## Dependencies
+- **@popperjs/core**: ^2.11.8 (for positioning tooltips, popovers, dropdowns)
+## License
+MIT License - see [LICENSE](LICENSE) file for details.
+## Links
+- [Documentation](https://github.com/rhavenside/base-line)
+- [Issues](https://github.com/rhavenside/base-line/issues)
+- [npm Package](https://www.npmjs.com/package/@rhavenside/baseline)
+## Contributing
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the strict contribution rules.
+---
+Built with ❤️ using Bootstrap 5.3 architecture and RFS for responsive typography.