DOCSEARCHbyAlgolia
Submit Docs

Clarity Design System

repository·main·Indexed 41 days ago

https://github.com/vmware-clarity/core

An open source design system providing UX guidelines and Web Component implementations. It includes framework-agnostic core components (@cds/core), as well as specialized packages for Angular (@cds/angular) and React (@cds/react). The system also provides the @clr/eslint-plugin-clarity-adoption to assist with migration and the @cds/city typeface.

Tokens
114.4K
Snippets
398
Records
581
Agent score
50%

What's inside Clarity

  1. Overview of Clarity Core packages

    main

    Clarity is an open source design system providing UX guidelines, design resources, and Web Component implementations. It is distributed via several npm packages depending on your development environment:

    • @cds/core: The base Web Components that are framework-agnostic and work in any JavaScript environment.
    • @cds/angular: Shims and modules specifically for using Clarity components within an Angular environment.
    • @cds/react: Shims and wrappers for using Clarity components within a React environment.
    • @cds/city: The official Clarity open source sans-serif typeface.

    Note: Clarity Core is no longer supported. It is recommended to explore updated tools and resources for new features and continued support.

  2. Available Layout Patterns in Clarity

    main

    Clarity provides several pre-defined layout patterns for building complex page-level structures. These patterns can be used to build application-focused interfaces or content-focused sites.

    Available patterns include:

    Application Layouts

    • Application Vertical Layout: A standard vertical layout for application interfaces.
    • Application Vertical Layout with Subnav: A vertical layout that includes a sub-navigation component.
    • Application Layout with Vertical Icon Layout: A layout utilizing a vertical icon-based navigation.
    • Application Layout with Vertical Icon Layout Hybrid: A hybrid approach combining different vertical navigation styles.

    Content Site Layouts

    • Content Site Three Columns: A layout designed for content-heavy sites using three columns.
    • Content Site Single Rail: A content-focused layout using a single rail.

    Other Patterns

    • Responsive Image Gallery: A layout pattern specifically for displaying images responsively.

  3. Clarity Core package distribution and format

    main

    The @cds/core package is distributed via NPM as modern ESM2020+ JavaScript.

    Key characteristics of the distribution:

    • No Bundling: The package is not bundled or compiled down to ES5. This allows for performant, build-less usage via CDNs like unpkg.com or skypack.dev.
    • Tree-shaking: It is highly recommended that consumers use a build step (e.g., Webpack, Rollup, Vite) to tree-shake and optimize their application. This ensures dependencies are deduped and peer dependencies are correctly managed.

  4. Identify the public Clarity packages

    main

    The Clarity Core repository provides several public packages depending on your framework of choice:

    • @cds/core: The foundation containing Clarity Web Components and common utilities.
    • @cds/angular: Optimized package for consuming Clarity Core within Angular applications.
    • @cds/react: Optimized package for consuming Clarity Core within React applications.
    • @clr/eslint-plugin-clarity-adoption: ESLint rules designed to assist with the migration to Clarity Core.

  8. What is the Range component and when to use it

    main
    The Range input control is an imprecise input control designed for scenarios where the user does not need to know or care about the exact numerical value. It is best used when the user is more concerned with the relative position (percent distance) between a minimum and maximum value rather than the specific number.

  10. Add shift + click bulk selection to cds-grid

    main
    The cds-grid does not natively handle shift + click range selection for multi-select. To implement this functionality, you must manually listen to the change events on the cds-checkbox elements within your rows. When a user performs a shift-click, calculate the range between the previously selected checkbox and the current one, then update the selected attribute on all cds-grid-row elements within that range.

  11. Understand Clarity color token types

    main

    Clarity uses three distinct types of color tokens to help build applications:

    1. Status Colors: A semantic palette used to convey information states, specifically info (default), warning, danger, and success.
    2. Global Palette: A comprehensive spectrum of bold hues and neutrals used for general design needs and branding.
    3. Viz Palette: Specialized palettes designed for data visualization, consisting of:
      • Categorical palette: For distinguishing between different categories.
      • Sequential palette: For representing ordered data.
      • Diverging palette: For representing data that deviates from a central point.

  12. How Clarity Typography works

    main
    The Clarity Core Typography System provides a flexible API to apply styles explicitly to elements, decoupling visual styling from HTML semantics. Instead of relying strictly on heading tags (like h1-h6), Clarity encourages using semantic and use-based classes such as display or section. This approach allows developers to maintain semantically correct HTML while meeting specific design requirements and ensures a consistent, limited set of textual variations across the application.