Home

Welcome to the Calcite Design System Wiki

This wiki serves as a developer resource for component guidance, accessibility, process documentation, design tokens, and repo workflows for the Calcite Design System.

Below you can find links to all the pages in the wiki grouped by category.

🛠️ Engineering Workflow & Tooling

Core repo structure, configuration, package handling, CI, and troubleshooting guidance for developers.

• Monorepo — How the repository is organized and how packages fit together.
• Global Config — Details on calciteConfig global.
• Coding Conventions — Code style and conventions.
• Testing Conventions — Testing and quality practices.
• Patching Packages — Workflows for fixing and updating package dependencies.
• Deprecation Guidance - Documenting deprecations and appropriate removal targets.
• Continuous Integration — CI practices and automation for Calcite.
• GitHub Secrets — Secure secret management and GitHub Actions guidance.
• Troubleshoot Build Errors — Common build failures and how to fix them.
• Tips and Tricks — General tips and tricks for development and testing.
• NPM FAQ — Common package manager questions.
• Wiki Conventions — Working with the wiki locally in VS Code.

🖌️ Styling & Pattern Guidance

Design and CSS patterns, interaction guidance, and component behavior notes.

• Styling Conventions — CSS patterns and styling guidance.
• CSS Transitions — Best practices for animation and transitions.
• Restricting User Input — Input validation and UX restrictions.
• ItemHidden Property — Details on the itemHidden property.
• What Happens When You Scale Vector-Based Icons — Icon scaling guidance.
• Internationalization — Localization and internationalization considerations.

🎨 Design Tokens

Token naming, build tooling, and contribution guidance for styling consistency.

• Introduction — The token system and why it matters for Calcite.
• Getting Started — How to begin using Calcite tokens.
• Naming Schema — Naming best practices and standards.
• Semantic Tokens — Semantic token organization and usage.
• Component Tokens — Component token development guidance.
• Web Platform — Web platform specific token guidelines.
• Build — Token build process and tooling.
• Documentation — Documenting token usage.
• Testing — Testing strategy for tokens.
• Contributing — Contributing updates and fixes to tokens.

♿ Accessibility & UX Guidance

Accessibility rules, ARIA usage, and UX considerations to ensure inclusive components.

• Accessibility Conventions — General accessibility principles.
• Accessibility Design Conventions — Design-focused accessibility decisions.
• Accessibility Developer Conventions — Developer-level accessibility guidance.
• Accessibility Roles Conventions — ARIA roles and semantics.
• Keyboard Navigation — Keyboard and focus interaction guidance.
• Spelling Warnings — Content quality and spelling checks.

📚 Documentation & Content Standards

Standards for writing, reviewing, and organizing docs and wiki content.

• Documentation Conventions — How Calcite docs should be written.
• General Resources — General documentation resources.
• PR Review Guidelines — Review expectations and processes.
• Verification — Release validation and repo verification workflows.

🚀 Release, Planning & Quality

Release and planning guidance, with notes on estimation and common pitfalls.

• Releasing — Release process and best practices.
• Milestone Estimate Tracking — Planning and tracking milestones.
• Epics — Large-scope tracking and planning.
• Gotchas — Known issues and pitfalls.

🧩 Integrations

Component usage notes, integrations, and platform-specific considerations.

• Calcite Components React — React integration and usage notes.