Canvas Design System
Main Site Tokens

Changelog

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

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