ima-claude 2.9.0

package/plugins/ima-claude/skills/ima-bootstrap/references/bootstrap-patterns.md

@@ -0,0 +1,356 @@
+# Bootstrap 5.3 Patterns Reference
+
+Extended reference for Bootstrap patterns beyond the quick reference in SKILL.md.
+
+---
+
+## Sass Customization
+
+### Variable Override Pattern
+
+Variables must be set **before** Bootstrap's `_variables.scss` is imported. Bootstrap uses `!default` so first-defined wins.
+
+```scss
+// 1. Functions first
+@import "bootstrap5/functions";
+
+// 2. YOUR overrides (before Bootstrap variables)
+$primary: #040C53;
+$font-family-base: 'Open Sans', sans-serif;
+
+// 3. Bootstrap variables (respects your overrides)
+@import "bootstrap5/variables";
+@import "bootstrap5/variables-dark";
+
+// 4. Maps (after variables, before mixins)
+@import "bootstrap5/maps";
+@import "bootstrap5/mixins";
+@import "bootstrap5/root";
+```
+
+### Adding Custom Theme Colors
+
+```scss
+// After @import "variables" but before @import "maps"
+$custom-colors: (
+  "brand-teal": #00B8B8,
+  "brand-sky": #A2CFF0
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+```
+
+This generates `.text-brand-teal`, `.bg-brand-teal`, `.btn-brand-teal` etc.
+
+### Extending the Utility API
+
+Add custom utilities via the `$utilities` map (before `utilities/api` import):
+
+```scss
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-property": (
+      property: custom-property,
+      class: custom,
+      values: (
+        1: value-1,
+        2: value-2,
+      )
+    )
+  )
+);
+```
+
+---
+
+## Grid System Details
+
+### Basic Grid
+```html
+<div class="container">
+  <div class="row">
+    <div class="col-md-8">Main content</div>
+    <div class="col-md-4">Sidebar</div>
+  </div>
+</div>
+```
+
+### Auto-Layout Columns
+```html
+<div class="row">
+  <div class="col">Equal</div>    <!-- auto-size -->
+  <div class="col">Equal</div>
+  <div class="col">Equal</div>
+</div>
+```
+
+### Responsive Breakpoints (VIEWPORT-based)
+
+| Breakpoint | Class infix | Dimensions |
+|-----------|-------------|------------|
+| Extra small | (none) | <576px |
+| Small | `sm` | ≥576px |
+| Medium | `md` | ≥768px |
+| Large | `lg` | ≥992px |
+| Extra large | `xl` | ≥1200px |
+| Extra extra large | `xxl` | ≥1400px |
+
+**Important limitation:** These breakpoints respond to the browser viewport, NOT the
+parent container. A `.col-md-6` in a narrow sidebar on a desktop will NOT stack — the
+viewport is still wide. For container-responsive layouts, use the IMA Container Grid
+(`.ima-row` + `.ima-col-sm-6`) from `ima-brand/sass/_container-grid.scss`.
+
+### Gutters
+- Default: `1.5rem` (24px)
+- Remove: `class="g-0"` on `.row`
+- Custom: `gx-{0-5}` (horizontal), `gy-{0-5}` (vertical), `g-{0-5}` (both)
+
+### Nesting
+```html
+<div class="row">
+  <div class="col-md-8">
+    <div class="row">  <!-- Nested row -->
+      <div class="col-6">Nested left</div>
+      <div class="col-6">Nested right</div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Responsive Patterns
+
+### Hide/Show by Breakpoint
+```html
+<!-- Hidden on mobile, visible from md up -->
+<div class="d-none d-md-block">Desktop only</div>
+
+<!-- Visible on mobile, hidden from md up -->
+<div class="d-block d-md-none">Mobile only</div>
+
+<!-- Visible only on md -->
+<div class="d-none d-md-block d-lg-none">Tablet only</div>
+```
+
+### Responsive Text Alignment
+```html
+<p class="text-center text-md-start">Centered on mobile, left on desktop</p>
+```
+
+### Responsive Flex
+```html
+<div class="d-flex flex-column flex-md-row">
+  <!-- Stacked on mobile, side by side on desktop -->
+</div>
+```
+
+---
+
+## Forms
+
+### Standard Form Layout
+```html
+<form>
+  <div class="mb-3">
+    <label for="email" class="form-label">Email</label>
+    <input type="email" class="form-control" id="email">
+  </div>
+  <div class="mb-3">
+    <label for="msg" class="form-label">Message</label>
+    <textarea class="form-control" id="msg" rows="3"></textarea>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+```
+
+### Inline Form
+```html
+<form class="row row-cols-lg-auto g-3 align-items-center">
+  <div class="col-12">
+    <input type="text" class="form-control" placeholder="Search">
+  </div>
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary">Go</button>
+  </div>
+</form>
+```
+
+### Form Validation
+```html
+<form class="needs-validation" novalidate>
+  <div class="mb-3">
+    <input type="text" class="form-control" required>
+    <div class="valid-feedback">Looks good!</div>
+    <div class="invalid-feedback">Required field.</div>
+  </div>
+</form>
+```
+
+### Select, Checkbox, Radio
+```html
+<select class="form-select">
+  <option selected>Choose...</option>
+  <option value="1">One</option>
+</select>
+
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" id="check1">
+  <label class="form-check-label" for="check1">Check me</label>
+</div>
+
+<div class="form-check">
+  <input class="form-check-input" type="radio" name="radio1" id="radio1">
+  <label class="form-check-label" for="radio1">Option 1</label>
+</div>
+```
+
+### Input Groups
+```html
+<div class="input-group mb-3">
+  <span class="input-group-text">@</span>
+  <input type="text" class="form-control" placeholder="Username">
+</div>
+```
+
+---
+
+## Navbar Patterns
+
+### Standard Responsive Navbar
+```html
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container">
+    <a class="navbar-brand" href="#">Brand</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Service 1</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+```
+
+---
+
+## Common Component Patterns
+
+### Alert with Dismiss
+```html
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Warning!</strong> Something needs attention.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+```
+
+### Badge
+```html
+<span class="badge text-bg-primary">New</span>
+<span class="badge rounded-pill text-bg-danger">4</span>
+```
+
+### List Group
+```html
+<ul class="list-group">
+  <li class="list-group-item active">Active item</li>
+  <li class="list-group-item">Regular item</li>
+  <li class="list-group-item list-group-item-action">Clickable</li>
+</ul>
+```
+
+### Offcanvas
+```html
+<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sidebar">Menu</button>
+<div class="offcanvas offcanvas-start" id="sidebar" tabindex="-1">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">Menu</h5>
+    <button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">Content</div>
+</div>
+```
+
+### Toast
+```html
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <div class="toast" role="alert">
+    <div class="toast-header">
+      <strong class="me-auto">Notification</strong>
+      <button class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">Message here.</div>
+  </div>
+</div>
+```
+
+---
+
+## CSS Custom Properties (Bootstrap 5.3)
+
+Bootstrap 5.3 exposes theme values as CSS custom properties on `:root`:
+
+```css
+:root {
+  --bs-primary: #040C53;          /* IMA mapped */
+  --bs-secondary: #0296A1;        /* IMA mapped */
+  --bs-body-font-family: 'Open Sans', sans-serif;
+  --bs-body-font-size: 1rem;
+  --bs-body-color: #000;
+}
+```
+
+Use in custom CSS when SCSS variables aren't available:
+```css
+.custom-element {
+  color: var(--bs-primary);
+  font-family: var(--bs-body-font-family);
+}
+```
+
+---
+
+## JavaScript Integration
+
+### Data Attributes (preferred, no JS needed)
+```html
+<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
+<button data-bs-toggle="collapse" data-bs-target="#content">Toggle</button>
+<button data-bs-toggle="tooltip" title="Help text">Hover me</button>
+```
+
+### Programmatic API
+```javascript
+// Modal
+const modal = new bootstrap.Modal('#myModal');
+modal.show();
+modal.hide();
+
+// Toast (must be initialized)
+const toast = new bootstrap.Toast(document.getElementById('myToast'));
+toast.show();
+
+// Tooltip (must be initialized)
+const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+tooltipList.forEach(el => new bootstrap.Tooltip(el));
+```
+
+### Events
+```javascript
+document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
+  // Modal is fully visible
+});
+
+document.getElementById('myModal').addEventListener('hidden.bs.modal', () => {
+  // Modal is fully hidden
+});
+```

package/plugins/ima-claude/skills/ima-bootstrap/references/ima-brand.md

@@ -0,0 +1,273 @@
+# IMA Brand System Reference
+
+Based on IMA Brand Book v4.0 (September 2025). Plugin: `ima-brand` v4.0.0.
+
+**Plugin location**: `wp-content/plugins/ima-brand/`
+**Import in SCSS**: `@import "../../../plugins/ima-brand/sass/brand";`
+
+---
+
+## Color Palette
+
+### Primary Colors
+
+| Name | Hex | Variable | Usage |
+|------|-----|----------|-------|
+| Trustworthy Indigo | `#040C53` | `$ima-brand-primary` | Headers, titles, emphasis |
+| Aquatic Pulse | `#0296A1` | `$ima-brand-secondary` | Buttons, CTAs, links |
+| Bright Teal | `#00B8B8` | `$ima-brand-accent-teal` | Highlights, hover states |
+| Guidance Sky | `#A2CFF0` | `$ima-brand-sky` | Light backgrounds, accents |
+
+### Secondary Colors
+
+| Name | Hex | Variable | Usage |
+|------|-----|----------|-------|
+| Vital Gold | `#FFCC00` | `$ima-brand-gold` | Warnings, prescriber tags |
+| Red Ribbon | `#DD153B` | `$ima-brand-red` | Errors, urgent items |
+| Plum Velvet | `#7B024D` | `$ima-brand-plum` | Accent color |
+
+### Grayscale
+
+| Name | Hex | Variable | Usage |
+|------|-----|----------|-------|
+| Calm Stone | `#919396` | `$ima-brand-gray` | Form labels, secondary text |
+| Clarity Wash | `#F2F3F5` | `$ima-brand-gray-light` | Backgrounds, cards |
+| Slate Neutral | `#8A93A5` | `$ima-brand-slate` | Alternative gray |
+| Gravel | `#494949` | `$ima-brand-gray-dark` | Dark gray |
+| White | `#FFFFFF` | `$ima-brand-white` | White text/backgrounds |
+| Black | `#000000` | `$ima-brand-black` | Black text |
+
+### Special
+
+| Name | Value | Variable |
+|------|-------|----------|
+| Accessible Teal | `#007BB4` | `$ima-brand-teal-accessible` |
+| Brand Gradient | `150deg, #00066F → #00B8B8` | `$ima-gradient` |
+
+### Semantic Tag Colors
+
+| Tag | Hex | Variable |
+|-----|-----|----------|
+| Telehealth | `#040C53` | `$ima-tag-telehealth` |
+| Prescriber | `#FFCC00` | `$ima-tag-prescriber` |
+| Family | `#A2CFF0` | `$ima-tag-family` |
+
+---
+
+## Typography
+
+### Font Families
+- **Lato** (`$ima-font-family-primary`): Headings, buttons, labels — Bold/Black weights
+- **Proxima Nova / Open Sans** (`$ima-font-family-secondary`): Body text, forms — Regular/Bold weights
+
+### Font Weights
+| Variable | Value |
+|----------|-------|
+| `$ima-font-weight-light` | 300 |
+| `$ima-font-weight-normal` | 400 |
+| `$ima-font-weight-semibold` | 600 |
+| `$ima-font-weight-bold` | 700 |
+| `$ima-font-weight-black` | 900 |
+
+### Font Size Scale
+| Variable | Size | Usage |
+|----------|------|-------|
+| `$ima-font-size-xs` | 14px | Form labels |
+| `$ima-font-size-sm` | 16px | Body text |
+| `$ima-font-size-base` | 18px | Buttons, links |
+| `$ima-font-size-md` | 20px | Section headers |
+| `$ima-font-size-lg` | 28px | Subsection titles |
+| `$ima-font-size-xl` | 32px | Doctor titles |
+| `$ima-font-size-xxl` | 40px | Page headers |
+
+### Line Heights
+- `$ima-line-height-base`: 1 (headers)
+- `$ima-line-height-comfortable`: 1.5 (body text)
+
+---
+
+## Typography Mixins
+
+```scss
+@include ima-page-header;         // Lato Bold 40px, uppercase, primary color
+@include ima-section-header;      // Lato Bold 20px, primary color
+@include ima-provider-title;      // Lato Semi Bold 32px, primary color
+@include ima-provider-title-bold; // Lato Bold 1.4em
+@include ima-form-label;          // Open Sans 14px, gray
+@include ima-button-text;         // Lato Bold 18px, uppercase
+@include ima-body-text;           // Proxima Nova Regular 16px
+@include ima-h1;                  // Lato Black 40px
+@include ima-h2;                  // Lato Bold 32px
+@include ima-h3;                  // Lato Regular 28px, red
+@include ima-footer-menu;         // Lato Bold 18px, white
+```
+
+---
+
+## Component Mixins
+
+### Buttons
+```scss
+@include ima-button-primary;      // Aquatic Pulse bg, white text, 20px/40px padding, 10px radius
+@include ima-button-primary-wide; // Same, 80px horizontal padding
+@include ima-button-outline;      // Transparent bg, primary border
+```
+- Hover: Bright Teal (#00B8B8) background
+- Font: Lato Bold 18px, uppercase
+
+### Forms
+```scss
+@include ima-form-field;   // 15px radius, 1px gray border, 16px padding, teal focus
+@include ima-form-label;   // Open Sans 14px, gray (#919396)
+```
+
+### Cards
+```scss
+@include ima-card;         // Light gray bg (#F2F3F5), 10px radius, 24px padding, NO shadow
+@include ima-card-white;   // White bg, 1px gray border, 10px radius, 24px padding
+```
+
+### Tags/Badges
+```scss
+@include ima-tag-telehealth;  // Dark blue bg, white text, 5px radius
+@include ima-tag-prescriber;  // Gold bg, black text
+@include ima-tag-family;      // Sky blue bg, black text
+```
+- Padding: 4px 16px, Lato Bold 14px uppercase
+
+### Layout
+```scss
+@include ima-gradient-bg;  // Brand gradient background
+
+// Utility classes (in HTML):
+.ima-section           // 48px vertical, 24px horizontal padding
+.ima-container-sm      // 720px max-width, centered
+.ima-container-md      // 960px max-width, centered
+.ima-container-lg      // 1140px max-width, centered
+```
+
+### Container Query Grid
+
+Container-responsive 12-column grid using CSS Container Queries (`@container`).
+Columns respond to their **parent container's width**, not the viewport — works correctly
+in sidebars, modals, cards, and any narrow context on wide screens.
+
+```html
+<!-- Stacked by default, side-by-side when container ≥ 400px -->
+<div class="ima-row">
+  <div class="ima-col-sm-6">First Name</div>
+  <div class="ima-col-sm-6">Last Name</div>
+</div>
+
+<!-- Three columns when container is wide enough -->
+<div class="ima-row">
+  <div class="ima-col-md-4">Col 1</div>
+  <div class="ima-col-md-4">Col 2</div>
+  <div class="ima-col-md-4">Col 3</div>
+</div>
+
+<!-- Always 50% (no breakpoint) -->
+<div class="ima-row">
+  <div class="ima-col-6">Left</div>
+  <div class="ima-col-6">Right</div>
+</div>
+```
+
+**Container breakpoints** (based on parent width):
+
+| Class prefix | Container width | Use case |
+|-------------|----------------|----------|
+| `ima-col-sm-` | ≥ 400px | Sidebar forms, narrow widgets |
+| `ima-col-md-` | ≥ 600px | Medium columns, cards |
+| `ima-col-lg-` | ≥ 800px | Wide columns, full-width areas |
+| `ima-col-` | Always | Fixed layout (no breakpoint) |
+
+**When to use which grid:**
+- **Bootstrap** `.row` + `.col-md-*` → Page-level layouts (responds to viewport)
+- **IMA** `.ima-row` + `.ima-col-sm-*` → Reusable components (responds to container)
+
+**SCSS variables** (all `!default`, overridable):
+```scss
+$ima-cq-columns: 12;
+$ima-cq-gap: 1rem;
+$ima-cq-breakpoints: (sm: 400px, md: 600px, lg: 800px);
+```
+
+Source: `ima-brand/sass/_container-grid.scss`
+
+---
+
+## Spacing Variables
+
+| Variable | Value |
+|----------|-------|
+| `$ima-spacer` | 1rem (16px) |
+| `$ima-spacing-0` | 0 |
+| `$ima-spacing-1` | 4px |
+| `$ima-spacing-2` | 8px |
+| `$ima-spacing-3` | 16px |
+| `$ima-spacing-4` | 24px |
+| `$ima-spacing-5` | 48px |
+
+## Border Radius
+
+| Variable | Value | Usage |
+|----------|-------|-------|
+| `$ima-border-radius-sm` | 5px | Tags, small badges |
+| `$ima-border-radius-md` | 10px | Buttons, cards |
+| `$ima-border-radius-lg` | 15px | Form fields |
+| `$ima-border-radius-xl` | 20px | Large/digital buttons |
+
+## Component Spacing
+
+| Variable | Value |
+|----------|-------|
+| `$ima-button-padding-x` | 40px |
+| `$ima-button-padding-y` | 20px |
+| `$ima-button-padding-x-alt` | 80px (wide) |
+| `$ima-form-field-padding` | 16px |
+| `$ima-form-field-margin-bottom` | 24px |
+| `$ima-card-padding` | 24px |
+
+---
+
+## Bootstrap Integration
+
+The IMA brand plugin maps to Bootstrap's theme colors:
+
+```scss
+$primary:   $ima-brand-primary;        // #040C53
+$secondary: $ima-brand-secondary;      // #0296A1
+$success:   #28A745;
+$warning:   $ima-brand-gold;           // #FFCC00
+$danger:    $ima-brand-red;            // #DD153B
+$info:      $ima-brand-teal-accessible; // #007BB4
+$light:     $ima-brand-gray-light;     // #F2F3F5
+$dark:      $ima-brand-primary;        // #040C53
+```
+
+This means `.btn-primary`, `.bg-primary`, `.text-primary` etc. all use IMA brand colors automatically.
+
+---
+
+## WCAG Accessibility
+
+| Element | Ratio | Level |
+|---------|-------|-------|
+| Header 1 (Lato Black) | 16.5:1 | AAA |
+| Header 2 (Lato Bold) | 5.04:1 | AA |
+| Header 3 (Lato Regular) | 4.94:1 | AA |
+| Body Text (Proxima Nova) | 9:1 | AAA |
+
+High-contrast teal alternative: `$ima-brand-teal-accessible` (#007BB4)
+
+---
+
+## Design Notes
+
+1. **No drop shadows** on cards (per brand feedback)
+2. **Uppercase buttons** standard (text-transform: uppercase)
+3. **Form radius: 15px**, button radius: 10px-20px (20px for digital/lg)
+4. **Form labels**: Open Sans 14px gray (not Lato)
+5. **Page headers**: uppercase
+6. **Font-weight fixes** included for Chrome/Brave consistency