Changelog

UpdatedToken Package Migration

• •Replaced: @cohere-ai/design-token-resolver → @cohere-ai/waypoint-tokens (drop-in API: tokens, colors, spacing, tailwindPreset, shadcnPreset)
• •Type renames: Colors → ColorTokens, Spacing → SpacingTokens
• •CSS entrypoint: @import "@cohere-ai/waypoint-tokens/theme.css" in app/globals.css

NewWaypoint UI & Icons

• •Components: Added @cohere-ai/waypoint-ui; docs styling uses the existing Waypoint tokens setup (theme.css and fonts.css) rather than importing prebuilt component CSS
• •Icons: Added @cohere-ai/waypoint-icons for unified Icon / AnimatedIcon components
• •Versioning: All three packages pinned to the latest dist-tag in package.json with concrete versions captured in the lockfile

TechnicalBuild Tool

• •Switched to webpack: next dev and next build now use the --webpack flag — Turbopack's CSS parser rejects certain escaped attribute selectors emitted by Tailwind v4 inside the prebuilt waypoint-ui styles

NewDesign Token Resolver Package

• •Package Integration: Migrated from fetching design tokens via GitHub API to using the official @cohere-ai/design-token-resolver npm package
• •Local Token Access: Design tokens are now read directly from node_modules/@cohere-ai/design-token-resolver/dist/theme.css for faster, more reliable access
• •Improved Parsing: Enhanced CSS variable parsing with better regex patterns to handle whitespace and edge cases
• •Simplified Colors Page: Removed async data fetching and "Last synced" timestamp since tokens are now local

TechnicalGitHub Packages Authentication

• •Automated Setup Script: New scripts/setup-npmrc.js automatically generates .npmrc from GITHUB_TOKEN environment variable
• •Preinstall Hook: Added preinstall script to package.json to automatically configure authentication before npm/pnpm install
• •Vercel Integration: Configured vercel.json to run setup script during build and install commands
• •Security: .npmrc is now gitignored to prevent token exposure
• •Troubleshooting Guide: Added comprehensive VERCEL_TROUBLESHOOTING.md with step-by-step instructions for resolving deployment issues

NewNew Documentation Pages

• •Elevations Page: New comprehensive elevations documentation page at /elevations showcasing shadow and elevation tokens with visual examples
• •Navigation Update: Added "Elevations" link to Foundations section in sidebar navigation

ComponentsNew Visualization Components

• •BlurCanvas: New component for visualizing blur effects with configurable size and blur values
• •ShadowCanvas: New component for visualizing shadow effects supporting box shadows, drop shadows, and inner shadows with accurate CSS rendering

ImprovedEnhancements

• •Typography Page: Enhanced typography documentation with improved layout and additional examples
• •CodeBlock Component: Improved code block component with better syntax highlighting and formatting
• •Colors Display: Updated ColorDisplay component to work with local package instead of fetched data
• •ThemeProvider: Minor formatting improvements and code cleanup

UpdatedDependencies

• •Package Manager: Added pnpm-lock.yaml for consistent dependency resolution
• •New Dependency: Added @cohere-ai/design-token-resolver@^0.2.5 as a project dependency

NewGeneral Feedback System

• •Navigation Feedback Button: New "Feedback" button in the top navigation accessible from every page
• •Feedback Modal: Dedicated modal for submitting general feedback or feature requests with a clean, intuitive interface
• •Type Selection: Toggle between "General Feedback" and "Feature Request" with visual indicators
• •Automatic Context: Page URL is automatically included with feedback for better context
• •Direct Linear Integration: All feedback is automatically created as Linear issues on the DET team board

EnhancedPage Feedback Widget

• •Linear Integration: "Was this page helpful?" widget now submits feedback directly to Linear
• •Positive Feedback Tracking: Thumbs up feedback is automatically logged to help us understand what's working well
• •Detailed Negative Feedback: Users can provide specific comments when something isn't helpful

ImprovementAPI Enhancements

• •Multi-Format Support: Linear API route now accepts both JSON and FormData for maximum flexibility
• •Smart Context Building: API automatically formats issue descriptions based on available context (component info, page URL, etc.)
• •Polling Mode: Added WATCHPACK_POLLING=true to dev script to prevent "too many open files" errors on macOS

ComponentsNew Components

• •GeneralFeedbackModal: Full-featured modal for collecting general feedback and feature requests

NewWhitelabeling Playground

• •Live Color Customization: Visual color pickers and hex input for 6 core design tokens (Primary, Background, Surface, Border, Text Primary, Text Secondary)
• •Searchable Component Selector: Dropdown with search functionality showing all stable components from the design system (68+ components), with smart filtering by name or category
• •Real-Time Preview: Instant visual feedback as you adjust colors, with components rendered using your custom palette
• •WCAG Accessibility Checker: Comprehensive contrast ratio analysis showing AA and AAA compliance for normal and large text
• •Compliance Dashboard: Visual indicators (Pass/Fail) for 4 key contrast pairs with detailed ratio calculations
• •Multi-Format Export: Export modal with 6 format options (CSS Variables, Tailwind Config, SCSS, LESS, JavaScript/TypeScript, JSON) with checkbox selection for multiple simultaneous exports
• •Educational Info: Built-in WCAG standards guide explaining AA and AAA requirements for different text sizes

TechnicalUnder the Hood

• •Contrast Checker Library: Implemented WCAG 2.1 contrast calculation algorithms with support for hex to RGB conversion and relative luminance calculation
• •Dynamic Component Generation: Automatically pulls all stable components from componentData and generates appropriate preview templates based on component category
• •Real-Time Calculations: useMemo hooks for performance-optimized contrast ratio calculations on every color change
• •SearchableSelect Component: Custom dropdown with live search, keyboard navigation, click-outside-to-close, and visual selection indicators
• •Dynamic Rendering: Template-based component rendering system with inline styles for instant color application
• •Accessibility Standards: Full WCAG 2.1 Level AA and AAA compliance checking for normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1)

AddedTheme Export Modal

• •6 Export Formats: CSS Variables, Tailwind Config, SCSS, LESS, JavaScript/TypeScript, and JSON
• •Checkbox Selection: Choose one or multiple formats for simultaneous export
• •Format Descriptions: Each format includes usage examples and file extension preview
• •Batch Download: Exports each selected format as a separate file automatically
• •Production Ready: All exports include usage comments and examples for immediate integration

AddedNew Files

• •lib/contrastChecker.ts: WCAG contrast utilities including hexToRgb, getLuminance, getContrastRatio, checkWCAGCompliance, and getComplianceLevel functions
• •components/ThemeExportModal.tsx: Comprehensive export modal with 6 format generators and batch download functionality
• •components/SearchableSelect.tsx: Reusable searchable dropdown component with live filtering, keyboard navigation, and accessible controls
• •app/playground/page.tsx: Complete rewrite with whitelabeling features, replacing simple code editor with comprehensive theming tool

ImprovedUser Experience

• •Visual Color Pickers: Native HTML5 color input for intuitive color selection alongside hex text input
• •Color Swatch Previews: Side-by-side foreground/background color swatches in accessibility checker for quick visual reference
• •Smart Default Colors: Waypoint brand colors pre-configured as starting point for customization
• •Reset Functionality: One-click restoration of default Waypoint color scheme
• •Toggle Accessibility Panel: Show/hide accessibility checker to focus on preview when needed

ImpactUse Cases

• •White-label Products: Quickly customize Waypoint for client projects while ensuring accessibility
• •Brand Exploration: Test different color schemes and validate them against WCAG standards before committing
• •Accessibility Testing: Educate designers and developers about contrast requirements with real-time feedback
• •Design Handoff: Export validated color schemes as CSS for immediate implementation

UpdatedNavigation & Search

• •Renamed Feature: "Playground" → "Whitelabeling Playground" in sidebar navigation
• •Search Index: Updated search description to reflect new whitelabeling and accessibility features

NewIssue Reporting System

• •In-Site Issue Modal: Beautiful modal form that opens on component pages for seamless bug reporting without leaving the documentation
• •Pre-filled Context: Component name, Storybook ID, and documentation URL are automatically included in every issue
• •File Attachments: Users can upload screenshots and videos (PNG, JPG, GIF, MP4, WebM) to better illustrate issues
• •Public & Internal Access: Works for all users regardless of Linear access - no authentication required to report issues
• •Linear API Integration: Issues are automatically created in Linear via secure API route with proper team routing
• •Development Mode: Gracefully degrades when Linear API key is not configured, logging issues to console for local development

AddedNew Components

• •ReportIssueModal: Full-featured modal with form validation, file upload, loading states, success/error feedback, and accessible keyboard navigation
• •ReportIssue (Updated): Simplified trigger component that opens the modal instead of copying templates to clipboard

TechnicalNew API Routes

• •/api/create-linear-issue: Server-side route that handles Linear GraphQL API communication, keeping API keys secure and enabling public access
• •FormData Support: Handles multipart form data for file uploads with proper validation and error handling

UpdatedDocumentation

• •For Developers: Added "Contributing & Bug Reports" section with Linear integration setup instructions and workflow documentation
• •Environment Variables: Created .env.example file documenting required LINEAR_API_KEY and LINEAR_TEAM_ID variables
• •Setup Guide: Complete instructions for obtaining Linear API keys and configuring the integration

ImpactUser Benefits

• •Frictionless Reporting: Users can report issues in seconds without needing Linear accounts or switching contexts
• •Better Bug Reports: Pre-filled context ensures all necessary information is captured, reducing back-and-forth
• •Visual Evidence: File uploads enable users to show issues rather than just describe them
• •Faster Resolution: Direct Linear integration means the team sees issues immediately with full context

NewNew Pages & Features

• •Getting Started Guide: Comprehensive quick start page with prerequisites, installation steps, configuration examples, and common usage patterns to onboard new users
• •Component Status Dashboard: Interactive dashboard showing all 68 components with filterable status tracking (Stable, Beta, Experimental, Deprecated), category filters, and live statistics
• •Design Principles Page: Core philosophy documentation with 7 guiding principles, design values, and a decision-making framework
• •Writing Guidelines Page: Complete content style guide covering voice, tone, button text, error messages, formatting standards, and a writing checklist
• •Password Protection: Added authentication gate for internal resources (Internal Docs, Design Token Manager, Design Token Package) with session-based access and beautiful UI
• •v0 Integration: "Open in v0" button on all component pages for AI-powered component customization and exploration, replacing CodeSandbox integration

ImprovedImprovements

• •Fully Responsive Design: Complete mobile, tablet, and desktop optimization with hamburger menu, collapsible sidebar, responsive typography, and touch-optimized interactions
• •Navigation Improvements: Reorganized sidebar with "Getting Started" section, reordered Resources section (For Developers now before Changelog), mobile search button, and hamburger menu for small screens
• •Link Audit: Comprehensive review and update of all internal links ensuring proper navigation flow, added links to new pages, and removed placeholder links
• •Enhanced Guidelines Page: Added Design Principles and Writing Guidelines to related resources section for better discoverability
• •Homepage Updates: Brand Assets quick link now correctly points to Downloads page, added both Getting Started and Developer Docs links
• •Mobile Logo Scaling: Responsive header logo that scales appropriately from 280px (mobile) to 800px (desktop)
• •Table Responsiveness: Added horizontal scrolling to all props tables for mobile devices

ChangedTheme & Styling

• •Dark Mode Locked: Site now permanently uses dark mode and no longer follows system color preferences for consistent brand experience
• •Removed Light Mode: Simplified theme system by removing light mode CSS variables and theme switching logic
• •Responsive Typography: All main headings now scale from text-3xl (mobile) to text-5xl (desktop) for optimal readability across devices

UpdatedContent & Documentation

• •Search Indexing: Added Getting Started, Design Principles, Writing Guidelines, and Component Status Dashboard to search
• •Support Links: Replaced placeholder buttons with functional Slack channel and email links across all pages
• •Navigation Order: Moved "For Developers" before "Changelog" in Resources section for better user flow

RemovedDeprecated Features

• •Discord References: Removed all Discord mentions and links (no active Discord community)
• •System Theme Detection: Removed automatic light/dark mode switching based on OS preferences
• •CodeSandbox Integration: Replaced with v0 integration for better AI-assisted development workflow

TechnicalTechnical Changes

• •Added mobile menu state management to DocLayout component
• •Sidebar now accepts isOpen and onClose props for mobile functionality
• •Navigation component now handles hamburger menu with onMenuClick callback
• •Added v0Query prop to StorybookEmbed component for v0 integration
• •New PasswordGate component with session storage for internal resource protection
• •Tailwind breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px) consistently applied

New UI Components

New Routes

• •/getting-started
• •/component-status
• •/design-principles
• •/writing-guidelines

NewMajor Features

• •Complete Component Library: Added 52 new components from Storybook for a total of 68 components including Dialog, Switch, Slider, Command, Popover, Sheet, Drawer, Combobox, and more
• •Code Snippet Copy Buttons: One-click copy functionality for all code examples with visual feedback and syntax highlighting
• •Asset Download Center: New downloads page with logos, icons, design tokens, and brand assets available in multiple formats (SVG, PNG, JSON, CSS, SCSS)
• •Interactive Component Playground: Live code editor with real-time preview, multiple templates, and instant feedback for experimenting with components
• •Component Status Badges: Visual indicators showing component maturity (Stable, Beta, Experimental, Deprecated) with version numbers
• •Accessibility Documentation: Comprehensive a11y guides for each component including keyboard navigation, ARIA attributes, screen reader support, and WCAG compliance levels
• •Design Guidelines: Do's and don'ts for each component with visual examples and best practices in a two-column layout
• •Related Components: Smart component suggestions showing related and complementary components with quick navigation
• •Real-World Examples: Production-ready code examples showing common use cases and implementation patterns
• •Performance Metrics: Bundle size, render time, and Lighthouse scores displayed for each component
• •Feedback System: User feedback widget on every page allowing thumbs up/down with optional comments
• •Advanced Search Filters: Category-based filtering in search modal with result counts and visual indicators

ImprovedStorybook Integration

• •Enhanced Storybook embeds with advanced loading states, automatic retry on failure, and better error handling
• •New StorybookEmbed component with configurable height, loading indicators, and sandbox security
• •Direct links to Storybook stories and documentation from every component page
• •Component overview page now organized by category with quick access cards

ImprovedSearch & Navigation

• •Enhanced search algorithm with fuzzy matching, multi-word queries, and improved relevance scoring
• •Added 100+ new searchable entries including all component features, variants, and props
• •Sidebar navigation now dynamically generated from component data with alphabetical sorting
• •Search results now show top 12 matches (up from 10) with better tie-breaking

ImprovedDeveloper Experience

• •New CodeBlock component with copy button, filename header, and optional line numbers
• •All code examples now use the enhanced CodeBlock with proper syntax highlighting
• •Quick import snippets at the top of every component page for faster development
• •Props tables with TypeScript types, default values, and required indicators
• •Component playground supports multiple templates (Button, Card, Alert, Form, Grid) with reset functionality

ImprovedComponent Documentation

• •Comprehensive documentation for Button, Input, and Dialog components with full metadata
• •Each component page now shows up to 8 sections: Preview, Props, Examples, Performance, Accessibility, Guidelines, Real-World Examples, and Related Components
• •Component categories expanded to include Utility components (Hitbox, ScrollSpy, Sortable, etc.)
• •Updated component page layout with better information hierarchy and visual flow

New52 New Components Added

NewNew Pages & UI Components

• •Downloads Page: Centralized asset download center at /downloads
• •Playground Page: Interactive component editor at /playground
• •New Reusable Components: CodeBlock, InlineCode, StorybookEmbed, StatusBadge, AccessibilitySection, GuidelinesSection, RelatedComponents, PerformanceMetrics, FeedbackWidget, RealWorldExamplesSection
• •Individual documentation pages for all 68 components accessible via /components/[slug]

FixedBug Fixes

• •Fixed infinite re-render loop in playground component
• •Resolved icon import error in StatusBadge (Flask → FlaskRound)
• •Fixed header text color inconsistency on icons page (text-black → text-white)

NewFeatures

• •Added new AlertDialog component with customizable actions
• •Introduced dark mode support for all components with automatic theme detection
• •Added 50+ new icons to the icon library including communication and file type categories
• •New design token exports for Figma plugin integration

ImprovedImprovements

• •Enhanced TypeScript types for better autocomplete and type safety
• •Improved accessibility for Dropdown and Select components with better keyboard navigation
• •Optimized bundle size by 15% through better tree-shaking
• •Updated color contrast ratios to exceed WCAG AAA standards

FixedBug Fixes

• •Fixed focus trap issue in Modal component
• •Resolved z-index conflicts in overlapping dropdown menus
• •Fixed tooltip positioning on mobile devices

NewFeatures

• •Added Tabs component with multiple variants
• •Introduced Badge component with status indicators
• •New animation utilities for micro-interactions

ImprovedImprovements

• •Enhanced documentation with more code examples and use cases
• •Improved responsive behavior for Table component
• •Updated button hover states for better visual feedback

FixedBug Fixes

• •Fixed input validation error messages not displaying correctly
• •Resolved SSR hydration issues with certain components

NewFeatures

• •Added Accordion component with controlled and uncontrolled modes
• •New Avatar component with fallback support
• •Introduced spacing utilities based on 8-point grid system

ImprovedImprovements

• •Improved color system documentation with usage examples
• •Enhanced component props documentation with default values

FixedBug Fixes

• •Fixed card component border radius inconsistencies
• •Resolved icon alignment issues in buttons

NewCore Features

• •Core Component Library: Button, Card, Input, Select, Checkbox, RadioGroup, and 10+ foundational components
• •Design Token System: Complete token system for colors, typography, spacing, and shadows with CSS variables
• •OKLCH Color System: Perceptually uniform colors with consistent lightness across the entire palette
• •Icon Library: Comprehensive icon library with 200+ icons tailored for developer tools
• •TypeScript Support: Full type definitions and IntelliSense support for all components
• •Accessibility Foundation: WCAG 2.1 AA compliance with keyboard navigation and screen reader support
• •Documentation Site: Interactive documentation with live examples and comprehensive guides
• •React 18+ Ready: Built with React 18 hooks and concurrent features