Home

Welcome to the Calcite Design System Wiki

This wiki is a developer resource for component guidance, accessibility, process documentation, design tokens, and repo workflows for he Calcite Design System. It serves as a central reference for implementation details, guidance, and workflows for contributors.

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 calciteCofig global.
• Coding Conventions — Code style and conventions.
• Testing Conventions — Testing and quality practices.
• Patching Packages — Workflows for fixing and updating package dependencies.
• 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.