Canvas Design System
Main Site Tokens

Changelog

A log of additions, improvements, and fixes to the Canvas Design System.

June 2026
v2.7.4 — Planner stylesheet consolidation
  • Fixed Made css/planner/planner-new.css the single canonical planner bundle. The partially-gutted planner-v2.css monolith (1,042 DUPLICATE/EXTRACTED markers) was retired and deleted; every selector it still held was already present in the imported component set, except the .sr-only a11y utility which was migrated into planner-new.css. planner/includes/header.php now loads the one bundle on the modular path (the dead planner.css link and the temporary standalone _modals.css patch are gone), and the kiosk/embedded headers were repointed off the retired monolith. Token values unchanged — drift check passes.
June 2026
v2.7.3 — Global 80% text scale
  • Improved Platform text now renders at 80%. Font sizes are rem and spacing is px, so a root html { font-size: 80% } shrinks all rem text while leaving layout intact. Added to platform-tokens.css and both global headers (unified-header.css, academy/global-header.css) to reach pages outside the token chain; the per-app html bases (mainsite, planner, academy, participant, facilitator) were scaled by the same 0.8 so it stays uniform. No token values changed, so the JSON mirror stays in sync (drift check passes). Inline px font sizes on bespoke landing pages are not covered.
June 2026
v2.7.2 — Invalid negative-margin token syntax
  • Fixed Repaired 8 invalid -var(--space-*) negative margins across css/detail-immersive.css, css/styles.css, css/planner/planner-v2.css, css/planner/live-mode.css, and css/academy/styles.css. -var() is not valid CSS, so browsers dropped the entire declaration — most visibly leaving the library detail-page stats card (.immersive-stats-float) fully left-aligned because its margin: -var(--space-8) auto 0 (and with it the auto centering) was ignored. The correct form for negating a token is calc(-1 * var(--space-8)).
June 2026
v2.7.1 — Planner phase-color fix
  • Fixed The planner’s component bridge (css/planner/components/_component-bridge.css) never remapped --mainsite-primary, so the global header and ws_* components fell back to mainsite red (#E54D4D) instead of the planner Plan-phase blue (#0284C7). Added a body-scoped remap (body.planner-app-active) that beats :root and survives the late platform-tokens.css @import in assets/css/auth-modal.css. Semantic danger reds use their own tokens and are unaffected.
June 2026
v2.7.0 — Portable component library (PHP + React)
  • New design-system/components/php/ and design-system/components/react/ — portable implementations of every ws_* component (49) and all 6 documented patterns. PHP ships as namespaced Workshopr\DS\* standalone functions (collision-free with the global ws_* helpers); React ships as typed .tsx function components (Ws<Name> + Ws<Name>Props).
  • Improved Both flavors render the existing ws-* class names from components.css (single source of truth) — no duplicated CSS, no hardcoded colors/sizes/fonts. Shared helpers: _icon.php (icon/cx/attrs/e) and Icon.tsx / cx.ts.
  • New Barrels: php/index.php (requires all 50 components, 59 Workshopr\DS functions) and react/index.ts (52 exports), plus a README.md with usage and a patterns-CSS caveat. All PHP verified with php -l + render smoke tests.
June 2026
v2.6.0 — AI-enablement: enforcer fix, enriched catalog, DTCG export
  • Fixed The design-system-enforcer MCP pointed at a stale /sites/newphp dir where the server file doesn’t exist, so it never launched — the AI’s real-time compliance oracle was dead. Repointed to the absolute platform path (now reads 325 tokens + 49 ws_* helpers). Wired “validate before finishing any UI work” (check_snippet / validate_file / suggest_component) into CLAUDE.md, GEMINI.md, and START-HERE.
  • New generate-catalog.php now enriches components.generated.json with a canonical example, whenToUse / whenNotToUse, an a11y note, and a derived antiPattern per ws_* helper — extracted from the components/*.php demos. It’s now the “how do I use this component” reference for AI (example 41/49, whenToUse 20/49, a11y 6/49).
  • New generate-tokens-dtcg.php → tokens.dtcg.json: all tokens in W3C DTCG format with $type inference, $description from CSS comments, and var() → {alias} references. Standard format for Style Dictionary, Figma, Tokens Studio, and AI tooling.
  • New design-system/llms.txt — an llms.txt-convention index pointing AI agents at the canonical files, machine-readable sources, rules, and validators. Both new generators have --check modes wired into npm, the CI ds-drift job, and the pre-commit hook.
June 2026
v2.5.2 — Display + timer tokens (font-size scale complete)
  • New Extended the type scale with five above-base tokens: --text-display-lg (3.5rem/56px), --text-display-xl (4.5rem/72px) for large hero headings, and --text-timer-sm/md/lg (4/5/6rem) for the live & run-mode countdown numerals.
  • Improved Tokenized the final 12 held hero/timer declarations. The platform now has zero bare font-size values — every font-size resolves through a --text-* token. check-drift passes; all apps verified HTTP 200.
June 2026
v2.5.1 — Off-scale font-size normalization
  • Improved Snapped 619 off-scale font-sizes to the nearest type-scale step via ds-tokenize-fontsize.mjs --snap. Each becomes var(--text-*, <token-rem>) so the fallback matches the snapped size. Most deltas are sub-pixel; the visible ones are 28px→24px (62×), 22px→20px (46×), 36px→32px, and 40px→46px.
  • Held 12 hero declarations (56–96px / 3.5–6rem) are above the top scale step (46px); the snapper holds anything whose nearest step is >8px away rather than collapsing hero text. These await dedicated display tokens.
June 2026
v2.5.0 — Type-scale tokenization
  • Improved Tokenized 1,635 hardcoded font-sizes to --text-* across 104 stylesheets. Only exact on-scale values were converted (px and rem, parsed unit-agnostically), each retaining its original value as a standalone fallback — e.g. font-size: 14px → font-size: var(--text-small, 14px). Value-preserving, idempotent, and safe on pages that don't load platform-tokens.css.
  • New scripts/ds-tokenize-fontsize.mjs — exact-match font-size tokenizer. Reports off-scale values rather than snapping them, so no size silently changes.
  • Note ~631 off-scale sizes remain (e.g. 0.8rem, 0.85rem, 17px, 22px, 28px, hero 36–96px). These need a typography decision (snap to the nearest scale step = a visual change) and were deliberately not auto-converted.
June 2026
v2.4.0 — Compliance gate + token cleanup
  • New scripts/ds-lint.mjs — a low-noise compliance gate that fails on three high-signal regressions: cool-gray hex, banned font stacks (Source Sans 3, legacy Bitter/DM Sans), and wrong-phase brand-color leakage. Scopes phase rules carefully (purple is allowed in the blue planner for activity/icebreaker accents; green is never flagged because it doubles as success/complete). Runs via npm run lint:ds, the pre-commit hook on staged files, and a CI job.
  • New scripts/ds-tokenize.mjs — value-preserving hex→token rewriter. Maps grays (warm Stone), ink, semantic status, and brand primaries; resolves #fff by context (color:→--text-inverse, else --bg-surface); and skips hexes already in var() fallback position so it never produces redundant var(--x, var(--x)).
  • Improved components.css — 55 bare hardcoded colors tokenized and all 27 cool-grays removed. Several were dead-token fallbacks (var(--color-border, #e5e7eb), var(--color-text, #111827)) referencing undefined variables, so the cool gray was actually rendering; these now resolve to warm Stone / ink tokens. Component demo page verified rendering with zero PHP errors.
  • Fixed Phase-color leakage — Coach mobile app --primary and note-icons moved off mainsite red / planner blue onto Facilitate purple; Tips footer accents moved off red onto Tips purple. Coach, Tips, and Facilitator pages verified at HTTP 200.
  • Fixed Source Sans 3 → Inter across facilitator, myworkshopr, participant, and prep stylesheets (12 declarations), enforcing the Fraunces/Inter mandate. Microsite --font-* definitions confirmed already on Fraunces/Inter (Bitter/DM Sans only survive in comments).
  • Improved Remaining cool-grays cleared from library-goals.css, the shared _sidebar.css, listing-redesign.css, and the DNA mobile reading sheet, then from the consolidated planner tree — zero cool-grays platform-wide.
  • Fixed Resolved the last 22 wrong-phase lint hits. Investigation found these were all intentional danger/CTA reds caught only by their redundant literal #E54D4D fallbacks (facilitator --fac-red = --color-error; planner --planner-red = documented mainsite-CTA alias; --phase-learn status colors). Tokenized them (drop literal, keep the var) for zero visual change; mapped the live-mode --run-danger token to --color-error; and marked the standalone-capable auth-modal CTA with a documented lint exception. ds-lint now clean across all 112 scanned files.
June 2026
v2.3.0 — Consolidation: single entry point + drift guard
  • New START-HERE.md — one entry point with a stated source-of-truth hierarchy (/DESIGN.md + /motion.md for intent; platform-tokens.css + helpers.php for implementation; JSON as a machine mirror) and audience on-ramps for designers, developers, and Claude.
  • New check-drift.php — guards the JSON mirror against drift: fails if any ws_* helper is undocumented in the JSON, or if phase-color tokens disagree between platform-tokens.css and the JSON. Known source contradictions (tips, training) are allowlisted as visible warnings pending a design decision.
  • Improved JSON meta now references the canonical /DESIGN.md and /motion.md, declares itself a hand-maintained mirror (correcting the earlier “auto-generated” claim), and points to the drift guard.
  • Improved README.md now defers to START-HERE.md and corrects the JSON provenance note.
  • Fixed Phase-color records reconciled to the shipped apps: Tips documented as a deliberate Facilitate-purple exception (Learn content, purple brand), and Academy/Training documented as Learn red (#E54D4D) — the unimplemented “training = green” mapping was retired from the JSON, DESIGN.md, and CLAUDE.md §11. Each app now carries a colorNote in the JSON, and both pass check-drift.php without an allowlist.
  • New Added the --facilitator-primary token family (aliased to --phase-facilitate, #7C4DFF) — facilitator was the only app missing its --{app}-primary token. The JSON facilitator color was corrected from the stray #7C3AED to the phase purple, matching coach/intervention.
  • Improved check-drift.php now resolves one level of CSS var() indirection, so phase-aliased app tokens validate. Wired into governance: npm run lint:ds:drift, a ds-drift PHP job in the Design System Lint GitHub workflow, and a staged-file gate in the pre-commit hook.
  • Improved check-drift.php gained a reverse check — a JSON component with no matching ws_* function (renamed/removed) now fails the build — and reports component counts. Corrected stale counts in README.md (39 demo pages, 49 helpers, not “34”/“40+”), and aligned GEMINI.md with the consolidated DESIGN.md (it still pointed at the deprecated taste/principles/forms files).
  • New generate-catalog.php + components.generated.json — a real generator that derives a ws_* component roster (signature, summary, declared options) straight from the helpers.php docblocks. The curated JSON keeps its rich hand-authored option metadata; the generated file is the can’t-drift companion. --check mode fails on a stale roster or a curated signature that no longer matches source, wired into npm run lint:ds:catalog, the CI ds-drift job, and the pre-commit hook. Also added the canonical-source banner to voice.php/philosophy.php pointing at DESIGN.md.
May 2026
v2.2.0 — Token compliance: extended accent + brand tokens
  • Improved Tokenized recurring hardcoded colors across css/academy/styles.css, css/facilitator/facilitator.css, css/planner-new/*, css/styles.css, and css/unified-header.css — raw hex values replaced with platform tokens. Exact color values preserved.
  • New Teal accent tokens for planner secondary actions: --color-teal, --color-teal-dark.
  • New Extended state shades: --color-warning-darker, --color-error-strong, --color-error-darker, --color-info-strong, --planner-accent-dark, --color-success-surface, --color-success-darker, and the soft warning callout surface (--color-warning-surface + -border / -ink).
  • New Meeting-tool brand tokens mirroring the podcast platform set: --platform-meet, --platform-zoom, --platform-inperson (each with -ink / -bg variants where used).
May 2026
v2.1.1 — Planner sidebar: prototype-matched toolbar + flat suggested list
  • New .sidebar-toolbar component for the planner's activity sidebar — sticky search input + pill-style type tabs. Lives in css/planner/components/_sidebar.css (mirrored at css/components/_sidebar.css).
  • New .side__group / .side__group-title / .side__list / .side__more / .side__group-empty structural classes for the flat "Suggested for X" list and "Browse all activities" footer link.
  • New .library-card--lib variant — full-bleed flat draggable card with .lib-card__top (dot + title), .lib-card__meta (pill + duration), .lib-card__dot--{exercise|icebreaker|break}, and .lib-card__pill--{exercise|icebreaker|break} type modifiers. Scoped under .activity-sidebar so it doesn't affect other surfaces that use .library-card.
  • Improved All new card / pill colors pull from existing planner tokens (--planner-exercise-color, --planner-icebreaker-color, --planner-break-color) via color-mix() for tinted backgrounds — no new hex values introduced.
  • New Utility hide rules: .sidebar-section[hidden], .library-card[hidden], .sidebar-sections[hidden], .sidebar-custom-activity-section[hidden], .side__group[hidden], .side__group-empty[hidden]. Lets the filter module + legacy-section wrapper hide nodes via the native HTML hidden attribute.
May 2026
v2.1.0 — Level Up Grid: phase grouping + button --half
  • New ws_level_up_grid() now supports an optional group_by_phase => true mode that renders Learn / Plan / Facilitate / Reflect as their own sub-sections, each with an italic phase title and a half-paragraph intro in Workshopr voice (overridable via phase_copy).
  • New CSS classes for the grouped layout: .ws-level-up__phase, .ws-level-up__phase-head, .ws-level-up__phase-title, .ws-level-up__phase-desc, plus phase-color modifiers (--learn / --plan / --facilitate / --reflect) on the phase block itself.
  • New .ws-level-up__grid--3 modifier for 3-up phase rows (used by Learn and Plan phases). Existing 4-up grid stays the default.
  • New .ws-btn--half width modifier (50%) — sized for narrow card columns where --full reads as too dominant.
  • Improved Responsive overrides updated so both .ws-level-up__grid and .ws-level-up__grid--3 step down 4 → 3 → 2 → 1 column, and .ws-level-up__phase-head stacks below 1024px.
  • Improved Demo: /design-system/components/demos/level-up-grid.php now showcases the grouped variant. Button demo cheatsheet lists --half.
April 2026
v2.0.0 — Planner ws_* Component Migration (Phase 5)
  • Improved Migrated planner/edit.php buttons and form inputs from raw HTML to ws_button() and ws_input()
  • Improved Migrated remaining raw inputs in planner/includes/modals.php — invite email, role select, search inputs, category filter
  • Improved Replaced raw type badges and duration spans in planner/view.php with ws_badge() and ws_duration()
  • Improved Standardized planner/saved.php buttons with ws_button()
  • Improved Migrated schedule panel in planner/planner.php — date/time inputs, timezone select, footer buttons
  • Improved Tokenized inline checkbox styles in save modal to use var(--space-*) and var(--text-sm)
April 2026
v1.9.1 — Planner Brand Color Tokenization
  • New Added --planner-overlay-light/medium/heavy and --planner-backdrop/backdrop-light tokens to planner variables
  • Improved Tokenized standalone #E54D4D (red), #22C55E (green), #9333EA (purple), #F59E0B (warning) hex values across planner CSS to use var(--planner-*) and var(--color-*) tokens
  • Improved Replaced standalone #2563EB in planner cards and generator modal with var(--planner-exercise-color)
  • Improved Tokenized status/semantic colors (warning, error, success backgrounds) in planner-v2.css, analytics.css, exercise-builder.css, briefing.css, live-mode.css
April 2026
v1.9.0 — Cool Gray Eradication & Structural Adoption
  • Improved Eradicated all 354 hardcoded cool gray hex values across 23 CSS files. Entire platform now uses warm stone grays (--gray-50 through --gray-900) exclusively
  • Improved Added helpers.php to global header.php — all pages now have automatic access to ws_* component helpers without manual includes
  • Improved Migrated /contact/ form from raw HTML to ws_input(), ws_select(), ws_button() components
  • Fixed Replaced 6 hardcoded font-family: 'Bitter' in MyWorkshopr CSS with var(--font-heading)
  • Fixed Cleaned up 2 DM Sans font fallbacks in Academy CSS
  • Improved Coach variables now reference var(--gray-*) tokens for text colors instead of cool gray hex values
  • Improved Landing page, auth modal, content gating, and typography base CSS fallbacks updated from cool to warm stone
  • New Added "Touch It, Fix It" convention to Conventions.md for ongoing adoption enforcement
April 2026
v1.8.4 — Live-Mode Font-Size Normalization
  • Improved Normalized all hardcoded font-size values in live-mode.css to design system tokens: compact type scale variables for UI chrome, rem units for presentation display elements, icon sizes preserved as px
April 2026
v1.8.3 — Planner Font-Weight & Font-Size Normalization
  • Improved Converted 9 hardcoded font-size px values to rem units in run-mode.css and workshop-studio.css
  • Improved Replaced all hardcoded font-weight numeric values (400/500/600/700) with design tokens (--font-normal, --font-medium, --font-semibold, --font-bold) across 7 planner CSS files
April 2026
v1.8.2 — Facilitator CSS Hardening
  • Improved Replaced ~25 instances of transition: all in facilitator.css with specific property transitions using design tokens (--duration-fast, --duration-base)
  • Improved Tokenized ~40 standalone hardcoded hex colors to CSS variables with fallbacks (--color-warning-*, --color-error-*, --color-success-*, --color-info-*, --phase-facilitate-*, --gray-*)
  • New Added :focus-visible outlines to all 45+ interactive elements in the Facilitator app (buttons, tabs, cards, inputs)
  • New Added @media (prefers-reduced-motion: reduce) block scoped to .facilitator-app
March 2026
v1.8.1 — Secondary Button Refinement
  • Improved .ws-btn--secondary hover style updated: now uses a subtle background tint (--phase-learn-very-light) and darker text instead of a full solid color fill, matching the academy pattern for a more refined interaction
  • Improved .ws-btn--secondary default background changed from opaque white (--bg-surface) to transparent for better layering on non-white backgrounds
March 2026
v1.8.0 — Semantic Tokens & Cross-App Polish
  • New 40+ semantic component tokens added to platform-tokens.css — buttons, cards, inputs, modals, badges, tooltips, toasts, links, and dividers now have dedicated token sets
  • New Standard suffix convention documented in style guide: -dark, -light, -very-light, -secondary, -muted, -faint
  • New Semantic component token documentation in tokens.php with full usage tables for each category
  • Improved Google Font imports cleaned across 24 PHP templates — removed unused Bitter and DM Sans font families from <link> tags
  • Improved Coach landing pages updated: inline CSS font references migrated from DM Sans to Inter
  • Improved Token count updated from 180+ to 280+ across documentation and hero stats
  • Improved Changelog CSS now uses design tokens instead of hardcoded hex values
  • Fixed Audit score: 87 → 92/100
March 2026
v1.7.0 — Comprehensive Audit & Migration
  • New 6 overlay/backdrop tokens added: --backdrop-light, --backdrop-medium, --backdrop-heavy, --backdrop-brand, --overlay-white, --overlay-surface
  • New Accessible contrast alternatives: --color-primary-on-white (#C73E3E, 5.02:1) and --color-ink-faint-accessible (#78716C, 4.6:1)
  • New Contrast reference table added to colors.php documentation
  • New Deprecation timeline for legacy v1.x tokens — v2.0 sunset plan with console warning phase
  • New components/components.css — dedicated component stylesheet separated from token file
  • Improved Full ARIA + keyboard navigation documentation added to Tabs, Accordion, Tooltip, and Modal components
  • Improved Font migration complete across all microsites: Bitter → Fraunces, DM Sans → Inter in 9 CSS files
  • Improved Planner hardcoded color sweep: 156 hex → token replacements across 9 CSS files (86% reduction, 361 → 49)
  • Improved Modal component documentation now includes parameters table
  • Improved Breakpoint documentation updated from 4 to 6 breakpoints matching platform-tokens.css
  • Fixed 8 cool gray hex values in overview.php and 4 in changelog.php replaced with warm stone palette
  • Fixed --phase-reflect-light corrected to #A7F3D0; missing -very-light variants added
  • Fixed Hero stats corrected: "15 Components" → "33", "100+ Design Tokens" → "280+"
  • Fixed Missing half-step spacing tokens and typography tokens added to documentation
  • Fixed .app-badge component CSS moved out of platform-tokens.css into components.css
  • Deprecated Legacy token aliases (v1.x names) — scheduled for removal in v2.0
  • Fixed Audit score: 62 → 78 → 87/100
March 2026
v1.6.0 — Specialized Components
  • New ws_chip_input() — Multi-value input with removable chip tokens for email lists and tag inputs
  • New ws_radio_card_group() — Single-select card grid with icon, title, and description per option
  • New ws_checkbox_card_group() — Multi-select card grid for choosing multiple options
  • New ws_suggestion_card() — Action-oriented card for AI suggestions and contextual prompts
  • New ws_modal_footer() — Standardized modal footer with primary/secondary action buttons
  • New ws_activity_badge() — Color-coded activity type badge (exercise/icebreaker/break)
  • New ws_results_overlay() — Full-screen/inline overlay for results, scores, and completion states
  • New .ws-toggle — Reusable toggle switch CSS extracted from planner patterns
  • New .ws-chip — Chip markup pattern with remove button for JS-rendered chips
  • Improved Component library grid updated with all 7 new component entries and demo pages
  • Improved CSS uses platform tokens with hardcoded fallbacks so components work outside the planner
  • Improved CLAUDE.md updated with mandatory design system usage rules and full component list
February 2026
v1.5.0 — Developer Experience
  • New Copy-to-clipboard button on all .ds-code blocks (hover to reveal)
  • New Responsive preview toolbar (Desktop / Tablet / Mobile) on component demos
  • New Live demo for ws_hero() — full, minimal, and accent variants with rendered output
  • New Live demo for ws_listing_card() — workshop, exercise, and icebreaker card examples
  • Improved Code blocks now show copy button on hover with "Copied" confirmation feedback
  • Improved Demo containers auto-wrap with responsive preview controls via shared DS footer
February 2026
v1.4.0 — New Components
  • New ws_section_header() — Page/section titles with subtitle, label, and alignment options
  • New ws_feature_card() — Icon + title + description cards with compact and coming-soon variants
  • New ws_stat() / ws_stats() — Single metric display and grouped stat rows with dividers
  • New ws_checklist() — Icon-prefixed lists with custom icons and compact variant
  • New ws_empty_state() — Placeholder with icon, description, and CTA button
  • New ws_breadcrumb() — Accessible navigation trail with separator icons
  • Improved Added animation/transition tokens to platform-tokens.css
  • Improved Swept index.php and about/index.php to use component library
  • Improved Added storybook-style documentation pages for all new components
  • Improved Updated component library grid and sidebar navigation
January 2026
v1.3.0 — Component Library
  • New ws_badge(), ws_duration(), ws_category(), ws_status() — Badge system
  • New ws_button(), ws_icon_button() — Button with variants, sizes, loading state
  • New ws_input(), ws_select() — Form field components
  • New ws_card_start() / ws_card_end() — Card containers
  • New ws_avatar() — User avatars with initials fallback
  • New ws_modal_start() / ws_modal_end() — Dialogs, drawers, bottom sheets
  • New ws_tabs() — Tab navigation
  • New ws_tooltip() — Contextual hints on hover/focus
  • New ws_accordion() — Collapsible content sections
  • New ws_progress() — Progress bars and indeterminate loading
  • New ws_alert() — Notification banners with actions
  • New ws_skeleton() — Loading placeholder system
  • New Toast notification JS (wsToastSuccess, wsToastError, etc.)
  • New Component documentation pages for each component
December 2025
v1.2.0 — Design System Foundations
  • New Design system microsite with sidebar navigation
  • New Color palette, typography, spacing, and elevation documentation
  • New Platform design tokens (platform-tokens.css)
  • New Philosophy, voice & tone, and design decisions pages
  • New Icons reference and accessibility guidelines