bitwrench 2.0.22 → 2.0.24

package/docs/taco-format.md

@@ -0,0 +1,373 @@
+# The TACO Format
+
+Every UI element in bitwrench is a plain JavaScript object with up to four keys:
+
+```javascript
+{
+  t: 'div',                          // Tag — HTML element name
+  a: { class: 'card', id: 'main' }, // Attributes — HTML attributes
+  c: 'Hello World',                  // Content — text, TACO, or array
+  o: { state: { count: 0 } }        // Options — state, lifecycle, behavior
+}
+```
+
+That's it. **T**ag, **A**ttributes, **C**ontent, **O**ptions — TACO.
+
+## Why plain objects?
+
+TACO objects are regular JavaScript. You can store them in variables, pass them to functions, put them in arrays, serialize them to JSON, send them over the network, and generate them on a server. No special syntax, no compiler, no toolchain.
+
+```javascript
+// It's just data — compose with standard JavaScript
+const header = { t: 'h1', c: 'Welcome' };
+const items = data.map(d => ({ t: 'li', c: d.name }));
+const page = { t: 'div', c: [header, { t: 'ul', c: items }] };
+```
+
+> **Coming from React?** A TACO object is analogous to what `React.createElement()` returns — a description of UI, not the UI itself. The difference is that TACO is plain data you write directly, while JSX requires a compiler to produce React elements.
+
+> **Coming from Vue?** TACO is similar to Vue's render function `h('div', { class: 'card' }, children)`, but as a data literal rather than a function call. Vue's `<template>` blocks compile down to something similar internally.
+
+## The four keys
+
+### `t` — Tag
+
+The HTML element name. Required for rendering.
+
+```javascript
+{ t: 'div' }       // <div></div>
+{ t: 'button' }    // <button></button>
+{ t: 'input' }     // <input>
+{ t: 'h1' }        // <h1></h1>
+```
+
+### `a` — Attributes
+
+An object of HTML attributes. All standard attributes work, including event handlers.
+
+```javascript
+{
+  t: 'button',
+  a: {
+    class: 'bw-btn bw-btn-primary',
+    id: 'save-btn',
+    disabled: true,
+    onclick: function() { console.log('clicked'); },
+    'data-action': 'save',
+    style: 'margin-top: 1rem'
+  }
+}
+```
+
+Style can also be an object:
+
+```javascript
+a: { style: { marginTop: '1rem', color: '#333' } }
+```
+
+For composable styles, use `bw.s()` to merge multiple style objects:
+
+```javascript
+a: { style: bw.s({ display: 'flex' }, { alignItems: 'center' }, { gap: '1rem' }, { marginTop: '1rem' }) }
+```
+
+`bw.s()` merges style objects into a style string — it's `Object.assign` for CSS with a string output. See [Thinking in Bitwrench](thinking-in-bitwrench.md) for full coverage.
+
+> **Coming from React?** Attribute names use standard HTML casing (`class`, `onclick`, `tabindex`), not React's camelCase (`className`, `onClick`, `tabIndex`).
+
+### `c` — Content
+
+The element's content. This can be:
+
+- **A string** — rendered as text content (HTML-escaped by default)
+- **A TACO object** — rendered as a child element
+- **An array** — each item rendered in order (strings, TACOs, or nested arrays)
+
+```javascript
+// String content
+{ t: 'p', c: 'Hello World' }
+
+// Child TACO
+{ t: 'div', c: { t: 'span', c: 'nested' } }
+
+// Array of children
+{ t: 'ul', c: [
+  { t: 'li', c: 'First' },
+  { t: 'li', c: 'Second' },
+  { t: 'li', c: 'Third' }
+]}
+
+// Mixed content
+{ t: 'div', c: [
+  { t: 'h2', c: 'Title' },
+  'Some paragraph text',
+  { t: 'button', c: 'Click me' }
+]}
+```
+
+#### Content escaping
+
+Content is HTML-escaped by default. The text `<script>alert('xss')</script>` renders as literal text, not as a script tag.
+
+To include raw HTML, use `bw.raw()` or set `o: { raw: true }`:
+
+```javascript
+// Escaped (safe, default)
+{ t: 'div', c: '<b>bold</b>' }
+// Renders: &lt;b&gt;bold&lt;/b&gt;
+
+// Raw HTML (opt-in)
+{ t: 'div', c: bw.raw('<b>bold</b>') }
+// Renders: <b>bold</b>
+
+// Or via options
+{ t: 'div', c: '<b>bold</b>', o: { raw: true } }
+```
+
+### `o` — Options
+
+The options key carries state, lifecycle hooks, and component behavior. This is where TACO goes beyond simple HTML description.
+
+```javascript
+{
+  t: 'div',
+  o: {
+    // Component state
+    state: { count: 0, items: [] },
+
+    // Render function (called by bw.update)
+    render: function(el) {
+      bw.DOM(el, { t: 'span', c: 'Count: ' + el._bw_state.count });
+    },
+
+    // Lifecycle hooks
+    mounted: function(el) { console.log('in the DOM'); },
+    unmount: function(el) { console.log('being removed'); },
+
+    // Skip content escaping
+    raw: true,
+
+    // Component handle -- methods exposed on el.bw (v2.0.19+)
+    handle: {
+      increment: function(el) { el._bw_state.count++; bw.update(el); }
+    },
+
+    // Content slots -- auto-generates el.bw.setX()/getX() (v2.0.19+)
+    slots: {
+      title: '.my_title',
+      content: '.my_body'
+    }
+  }
+}
+```
+
+See [State Management](state-management.md) for detailed coverage of `o.state`, `o.render`, lifecycle hooks, `o.handle`, and `o.slots`.
+
+## Rendering TACO objects
+
+TACO objects are data. To produce actual output, pass them to a rendering function:
+
+```javascript
+// Render to HTML string (works in Node.js and browsers)
+const html = bw.html({ t: 'div', c: 'Hello' });
+// '<div>Hello</div>'
+
+// Create a live DOM element (browser only)
+const el = bw.createDOM({ t: 'div', c: 'Hello' });
+// HTMLDivElement
+
+// Mount into an existing DOM element (browser only)
+bw.DOM('#app', { t: 'div', c: 'Hello' });
+// Replaces contents of #app
+```
+
+`bw.DOM()` cleans up any previous content (running unmount hooks, clearing state) before mounting new content. This prevents memory leaks when re-rendering.
+
+## bw.h() — concise TACO constructor
+
+`bw.h()` is a helper that produces TACO objects from positional arguments. It's a convenience — the return value is a plain `{t, a, c, o}` object, identical to what you'd write by hand.
+
+```javascript
+bw.h('div')                                  // { t: 'div' }
+bw.h('p', { class: 'intro' }, 'Hello')       // { t: 'p', a: { class: 'intro' }, c: 'Hello' }
+bw.h('span', null, 'text')                   // { t: 'span', c: 'text' }  (null attrs omitted)
+bw.h('div', null, [                          // { t: 'div', c: [...] }
+  bw.h('li', null, 'one'),
+  bw.h('li', null, 'two')
+])
+```
+
+A common pattern is to alias `bw.h` for compact code:
+
+```javascript
+var h = bw.h;
+
+var footer = h('footer', { class: 'bw_bg_dark bw_text_light bw_py_4' }, [
+  h('p', null, 'Built with bitwrench.'),
+  h('p', null, h('a', { href: '/about' }, 'About'))
+]);
+```
+
+The output is serializable (assuming no function values), works with `bw.html()`, `bw.DOM()`, `bw.createDOM()`, bwserve, and everywhere else TACO is accepted. Mix `bw.h()` calls freely with `make*()` returns and hand-written TACO — they all produce the same thing.
+
+> **When to use `bw.h()` vs. hand-written TACO**: Use `bw.h()` for structural glue — wrapper divs, footers, headings — where the `{t:, a:, c:}` key syntax feels heavy. For complex nodes with `o:` (state, lifecycle), write full TACO — the named keys are clearer.
+
+## Composition patterns
+
+Because TACO is just JavaScript, you compose UI with standard language features:
+
+### Variables
+
+```javascript
+const title = { t: 'h1', c: 'Dashboard' };
+const sidebar = { t: 'aside', c: 'Menu' };
+const main = { t: 'main', c: [title, { t: 'p', c: 'Content' }] };
+```
+
+### Functions
+
+```javascript
+function userCard(user) {
+  return {
+    t: 'div', a: { class: 'card' },
+    c: [
+      { t: 'h3', c: user.name },
+      { t: 'p', c: user.email }
+    ]
+  };
+}
+
+const cards = users.map(userCard);
+bw.DOM('#list', { t: 'div', c: cards });
+```
+
+### Conditionals
+
+```javascript
+const content = isLoggedIn
+  ? { t: 'div', c: 'Welcome back' }
+  : { t: 'div', c: 'Please log in' };
+```
+
+### Loops
+
+```javascript
+const rows = data.map(item => ({
+  t: 'tr', c: [
+    { t: 'td', c: item.name },
+    { t: 'td', c: String(item.value) }
+  ]
+}));
+```
+
+## TACO and the component library
+
+The `make*()` functions in bitwrench's component library return TACO objects:
+
+```javascript
+const card = bw.makeCard({ title: 'Users', content: '1,234' });
+// Returns a TACO object — not HTML, not DOM
+
+bw.DOM('#app', card);        // Mount it
+const html = bw.html(card);  // Or render to string
+```
+
+This means you can compose library components the same way you compose raw TACOs:
+
+```javascript
+bw.DOM('#app', {
+  t: 'div', c: [
+    bw.makeNavbar({ brand: 'My App', items: [...] }),
+    bw.makeContainer({ children: [
+      bw.makeCard({ title: 'Stats', content: '42' }),
+      bw.makeTable({ data: rows, sortable: true })
+    ]})
+  ]
+});
+```
+
+See [Component Library](component-library.md) for all available components.
+
+## Custom components without BCCL
+
+The `make*()` component library (BCCL) is a convenience, not a requirement. You can write your own component factories that return TACO objects — bitwrench doesn't care where the TACO comes from.
+
+```javascript
+// Your own component factory — no BCCL needed
+function myStatusBadge(status) {
+  var colors = { ok: '#4caf50', warn: '#ff9800', error: '#f44336' };
+  return {
+    t: 'span',
+    a: {
+      class: 'status-badge',
+      style: 'background: ' + (colors[status] || '#999')
+        + '; color: #fff; padding: 0.25rem 0.75rem;'
+        + ' border-radius: 999px; font-size: 0.8rem;'
+    },
+    c: status.toUpperCase()
+  };
+}
+
+bw.DOM('#app', myStatusBadge('ok'));
+```
+
+You can also wrap existing CSS frameworks (Bootstrap, Tailwind, etc.) in TACO objects:
+
+```javascript
+// Bootstrap button as a TACO
+{ t: 'button', a: { class: 'btn btn-primary' }, c: 'Save' }
+
+// Tailwind card as a TACO
+{
+  t: 'div',
+  a: { class: 'bg-white rounded-lg shadow-md p-6' },
+  c: [
+    { t: 'h3', a: { class: 'text-lg font-semibold' }, c: 'Title' },
+    { t: 'p', a: { class: 'text-gray-600 mt-2' }, c: 'Content' }
+  ]
+}
+```
+
+Bitwrench doesn't care where your CSS classes come from — it just renders the TACO to HTML/DOM. The `make*()` functions use bitwrench's built-in CSS classes (`bw_card`, `bw_btn`, etc.), but that's a choice, not a constraint.
+
+To make a custom component reactive, add `o.state` and `o.render`:
+
+```javascript
+bw.DOM('#app', {
+  t: 'span',
+  o: {
+    state: { label: 'OK', color: '#4caf50' },
+    render: function(el) {
+      var s = el._bw_state;
+      bw.DOM(el, {
+        t: 'span',
+        a: { class: 'status-badge',
+             style: 'background:' + s.color + '; color:#fff; padding:0.25rem 0.75rem; border-radius:999px;' },
+        c: s.label
+      });
+    }
+  }
+});
+
+// Later, update state from outside:
+var el = bw.$('.status-badge')[0].parentElement;
+el._bw_state.label = 'ERROR';
+el._bw_state.color = '#f44336';
+bw.update(el);
+```
+
+## TACO beyond the browser
+
+Because TACO objects are plain data, they work in contexts beyond browser rendering:
+
+- **Server-side rendering**: `bw.html(taco)` produces HTML strings in Node.js
+- **Static site generation**: The `bwcli` command converts files to styled HTML pages
+- **Server-driven UI**: A server can push TACO objects to the browser via SSE, and the client renders them with `bw.DOM()`
+- **Serialization**: TACO objects (without function values) can be JSON-serialized and sent over the network
+- **Testing**: TACO objects can be inspected and compared as data without needing a DOM
+
+This is a deliberate design choice. The separation between "what to render" (TACO) and "how to render it" (bw.DOM, bw.html) means the same component definition works across all these contexts.
+
+---
+
+For a deeper exploration of bitwrench's design philosophy, see [Thinking in Bitwrench](thinking-in-bitwrench.md).

package/docs/theming.md

@@ -0,0 +1,309 @@
+# Theming
+
+Bitwrench generates CSS at runtime from seed colors. You provide two or three hex colors, and the theme engine derives a complete design system — buttons, cards, alerts, tables, and every other component get consistent, coordinated styling.
+
+There is no CSS preprocessor, no build step, and no external stylesheet to manage. The generated CSS is injected into the document as a `<style>` element.
+
+## Quick start
+
+```javascript
+bw.loadStyles({
+  primary: '#0077b6',
+  secondary: '#90e0ef'
+});
+```
+
+This single call:
+
+1. Derives a full color palette from your two seed colors (9 color families, 8 shades each)
+2. Generates scoped CSS for all bitwrench components
+3. Generates an alternate palette (light/dark counterpart)
+4. Injects both stylesheets into the document
+
+Every bitwrench component rendered after this call uses the generated theme.
+
+## Theme presets
+
+Bitwrench ships with 12 built-in presets:
+
+| Preset | Primary | Secondary | Character |
+|--------|---------|-----------|-----------|
+| `teal` | `#006666` | `#6c757d` | Default, neutral |
+| `ocean` | `#0077b6` | `#90e0ef` | Cool, professional |
+| `sunset` | `#e76f51` | `#264653` | Warm, bold |
+| `forest` | `#2d6a4f` | `#95d5b2` | Natural, calm |
+| `slate` | `#343a40` | `#adb5bd` | Minimal, gray |
+| `rose` | `#e11d48` | `#fda4af` | Vibrant, modern |
+| `indigo` | `#4f46e5` | `#a5b4fc` | Deep, technical |
+| `amber` | `#d97706` | `#fbbf24` | Energetic, warm |
+| `emerald` | `#059669` | `#6ee7b7` | Fresh, growth |
+| `nord` | `#5e81ac` | `#88c0d0` | Muted, Scandinavian |
+| `coral` | `#ef6461` | `#4a7c7e` | Friendly, balanced |
+| `midnight` | `#1e3a5f` | `#7c8db5` | Dark, serious |
+
+Use a preset by name:
+
+```javascript
+bw.loadStyles(bw.THEME_PRESETS.ocean);
+```
+
+Or pass the preset colors directly:
+
+```javascript
+bw.loadStyles({
+  primary: '#0077b6',
+  secondary: '#90e0ef',
+  tertiary: '#00b4d8'
+});
+```
+
+## Configuration options
+
+The full config object:
+
+```javascript
+bw.loadStyles({
+  // Seed colors (primary and secondary are required)
+  primary:   '#0077b6',        // Brand color
+  secondary: '#90e0ef',        // Accent color
+  tertiary:  '#00b4d8',        // Third accent (defaults to primary)
+
+  // Semantic colors (optional — sensible defaults derived from seeds)
+  success:   '#198754',
+  danger:    '#dc3545',
+  warning:   '#b38600',
+  info:      '#0891b2',
+  light:     '#f8f9fa',
+  dark:      '#212529',
+
+  // Surface colors (optional)
+  background: '#ffffff',       // Page background
+  surface:    '#f8f9fa',       // Card/panel background
+
+  // Layout tokens
+  spacing:   'normal',         // 'compact' | 'normal' | 'spacious'
+  radius:    'md',             // 'none' | 'sm' | 'md' | 'lg' | 'pill'
+
+  // Typography
+  fontSize:  1.0,              // Base font size scale factor
+  typeRatio: 'normal',         // 'tight' | 'normal' | 'relaxed' | 'dramatic'
+
+  // Visual depth
+  elevation: 'md',             // 'flat' | 'sm' | 'md' | 'lg'
+  motion:    'standard',       // 'reduced' | 'standard' | 'expressive'
+
+  // Color harmonization (0 to 1)
+  harmonize: 0.20,             // Shift semantic colors toward primary hue
+
+  // Injection behavior
+  inject:    true              // Set to false to get CSS without injecting
+});
+```
+
+### Spacing presets
+
+Control padding across all components:
+
+| Preset | Button | Card | Alert | Table cell | Input |
+|--------|--------|------|-------|------------|-------|
+| `compact` | 0.25rem 0.75rem | 0.75rem 1rem | 0.5rem 1rem | 0.5rem 0.75rem | 0.25rem 0.75rem |
+| `normal` | 0.5rem 1rem | 1.5rem 1.5rem | 0.75rem 1.5rem | 0.75rem 1rem | 0.5rem 0.75rem |
+| `spacious` | 0.75rem 1.5rem | 2rem 2rem | 1rem 1.5rem | 1rem 1.5rem | 0.75rem 1rem |
+
+### Radius presets
+
+Control border-radius across all components:
+
+| Preset | Button | Card | Badge | Alert | Input |
+|--------|--------|------|-------|-------|-------|
+| `none` | 0 | 0 | 0 | 0 | 0 |
+| `sm` | 4px | 4px | 0.25rem | 4px | 4px |
+| `md` | 6px | 8px | 0.375rem | 8px | 6px |
+| `lg` | 10px | 12px | 0.5rem | 12px | 10px |
+| `pill` | 50rem | 1rem | 50rem | 1rem | 50rem |
+
+### Type ratio presets
+
+Control the modular scale for heading sizes:
+
+| Preset | Ratio | Effect |
+|--------|-------|--------|
+| `tight` | 1.2 | Subtle size differences between headings |
+| `normal` | 1.33 | Balanced (minor third scale) |
+| `relaxed` | 1.5 | Pronounced heading hierarchy |
+| `dramatic` | 1.618 | Golden ratio — large headings, compact body |
+
+### Elevation presets
+
+Control box-shadow depth:
+
+| Preset | Description |
+|--------|-------------|
+| `flat` | No shadows |
+| `sm` | Subtle shadows |
+| `md` | Standard depth (default) |
+| `lg` | Pronounced shadows |
+
+### Motion presets
+
+Control transition timing:
+
+| Preset | Fast | Normal | Slow | Easing |
+|--------|------|--------|------|--------|
+| `reduced` | 100ms | 150ms | 200ms | ease-out |
+| `standard` | 100ms | 200ms | 300ms | ease-out |
+| `expressive` | 150ms | 300ms | 500ms | cubic-bezier(0.34, 1.56, 0.64, 1) |
+
+## The palette
+
+`bw.makeStyles()` returns an object with the full generated palette:
+
+```javascript
+var theme = bw.makeStyles({
+  primary: '#0077b6',
+  secondary: '#90e0ef'
+});
+bw.applyStyles(theme);
+
+// theme.palette contains 9 color families, each with 8 shades:
+theme.palette.primary.base;      // '#0077b6' — the seed color
+theme.palette.primary.hover;     // darker variant for hover states
+theme.palette.primary.active;    // darker still for active/pressed states
+theme.palette.primary.light;     // very light tint for backgrounds
+theme.palette.primary.darkText;  // dark variant for text
+theme.palette.primary.border;    // medium-light for borders
+theme.palette.primary.focus;     // semi-transparent for focus rings
+theme.palette.primary.textOn;    // '#fff' or '#000' — readable text on base
+
+// Same 8 shades available for:
+// secondary, tertiary, success, danger, warning, info, light, dark
+
+// Surface colors (raw hex strings):
+theme.palette.background;  // '#ffffff'
+theme.palette.surface;     // '#f8f9fa'
+```
+
+### How shade derivation works
+
+From a single seed color, `bw.deriveShades()` produces eight coordinated variants:
+
+| Shade | Derivation | Purpose |
+|-------|-----------|---------|
+| `base` | The seed color itself | Default button/badge/alert fill |
+| `hover` | 10% darker | Hover state |
+| `active` | 15% darker | Active/pressed state |
+| `light` | 85% tinted with white | Light background (alert bg, card highlight) |
+| `darkText` | 40% darker | Text color for dark-on-light layouts |
+| `border` | 60% tinted with white | Border color |
+| `focus` | 25% opacity of seed | Focus ring |
+| `textOn` | `#fff` or `#000` | Readable text on the base color (WCAG contrast) |
+
+### Color harmonization
+
+When `harmonize` is set (default: 0.20), semantic colors (success, danger, warning, info) have their hue shifted slightly toward the primary color. This creates visual cohesion — a forest-themed app's success green will lean toward the forest primary, while an ocean-themed app's success green will lean toward blue.
+
+Set `harmonize: 0` for pure, unmodified semantic colors.
+
+## Primary and alternate palettes
+
+Every theme has two palettes: primary and alternate. The alternate is derived automatically by inverting the luminance of each seed color.
+
+- If your primary palette is light, the alternate will be dark
+- If your primary palette is dark, the alternate will be light
+
+```javascript
+var theme = bw.makeStyles({
+  primary: '#0077b6',
+  secondary: '#90e0ef'
+});
+bw.applyStyles(theme);
+
+theme.isLightPrimary;        // false — ocean primary is a dark blue
+theme.alternate.palette;     // light-inverted version of ocean
+```
+
+### Switching between palettes
+
+```javascript
+// Toggle between primary and alternate palettes
+bw.toggleStyles();
+```
+
+The toggle works by adding or removing the CSS class `.bw_theme_alt` on the `<html>` element. Both primary and alternate stylesheets are injected at theme generation time, so switching is instant -- no re-generation needed.
+
+### Clearing a theme
+
+```javascript
+bw.clearStyles();
+```
+
+This removes the injected `<style>` elements and clears the internal theme cache. Call this before generating a new theme with different colors to prevent CSS accumulation.
+
+## Using themes without injection
+
+Set `inject: false` to get the CSS without adding it to the document:
+
+```javascript
+var theme = bw.makeStyles({
+  primary: '#0077b6',
+  secondary: '#90e0ef',
+  inject: false
+});
+
+// Use the CSS string however you want
+console.log(theme.css);           // primary CSS
+console.log(theme.alternate.css); // alternate CSS
+
+// Write to a file in Node.js
+fs.writeFileSync('theme.css', theme.css + '\n' + theme.alternate.css);
+```
+
+This is useful for:
+
+- Static site generation (write CSS to a file)
+- Server-side rendering (include CSS in the HTML response)
+- Theme export tools (let users download their theme)
+
+## Multiple themes on one page
+
+Themes are scoped by CSS class name. You can have multiple themes active simultaneously:
+
+```javascript
+bw.loadStyles({ primary: '#0077b6', secondary: '#90e0ef' });
+bw.loadStyles({ primary: '#e76f51', secondary: '#264653' });
+```
+
+Apply themes to different sections by adding the theme name as a class:
+
+```javascript
+bw.DOM('#header', {
+  t: 'div', a: { class: 'ocean' },
+  c: bw.makeNavbar({ brand: 'App', dark: true })
+});
+
+bw.DOM('#sidebar', {
+  t: 'div', a: { class: 'sunset' },
+  c: bw.makeCard({ title: 'Sidebar' })
+});
+```
+
+Components inside an `ocean`-classed container use ocean colors; components inside a `sunset`-classed container use sunset colors.
+
+## Color utility functions
+
+These functions are available for custom color work:
+
+| Function | Description |
+|----------|-------------|
+| `bw.hexToHsl(hex)` | Convert hex to `[h, s, l]` array |
+| `bw.hslToHex([h, s, l])` | Convert HSL array to hex |
+| `bw.adjustLightness(hex, amount)` | Shift lightness by percentage points |
+| `bw.mixColor(hex1, hex2, ratio)` | Linear interpolation between two colors |
+| `bw.relativeLuminance(hex)` | WCAG 2.0 relative luminance (0–1) |
+| `bw.textOnColor(hex)` | Returns `'#fff'` or `'#000'` for readable text |
+| `bw.deriveShades(hex)` | Generate 8 shade variants from one color |
+| `bw.derivePalette(config)` | Generate full palette from seed config |
+
+> **Coming from Tailwind?** Bitwrench's shade derivation is similar to Tailwind's color scale (50–900), but generated algorithmically from a single seed rather than hand-tuned. The 8 shades map to specific UI roles (hover, active, focus ring) rather than numeric levels.
+
+> **Coming from Bootstrap?** Bitwrench's theme generation replaces Bootstrap's Sass `$theme-colors` map and `tint-color()`/`shade-color()` functions. Instead of a build step with Sass variables, you call `bw.loadStyles()` at runtime.