Canvas Design System
Main Site Tokens

Changelog

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

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