Design System

Carbon for IBM Products

The `SpectrumElement` base class as created by mixing `SpectrumMixin` onto `LitElement` adopts `dir` values from the `document` at connection time with a fallback to `lrt`. In a TypeScript context, it also enforces the presence of `this.shadowRoot` on ext

Build Design Systems with Knapsack

React USWDS 3 component library

Salesforce Lightning Design System for React

auro-skeleton HTML custom element

A collection of React hooks used across some of the UI-Kit components.

A collection of utilities shared across the other packages.

Core package of the commercetools design system.

Various utilities for token types

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

A Knapsack component that helps build Design Systems

auro-hyperlink HTML custom element

CLI for managing design tokens using the Design Tokens Community Group (DTCG) standard and generating code for any platform via plugins.

Sass helper for importing files only once. Used in the Carbon Design System

Parser/validator for the Design Tokens Community Group (DTCG) standard.

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

Shared mixins, tools, etc. that support developing Spectrum Web Components.

Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-ico

Sima-land design system icons as a React components

Responsive, theme-based style props for Vanilla Extract

React implementation of Neo4j Design System

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

Neo4j base package for the design system

An inline spacing component renders its children horizontally with a consistent spacing between them.

The Text component implements the typography elements such as headings, paragraphs, etc.

This package contains design tokens for the [Cloudscape Design System](https://cloudscape.design/).

All SVG icons are rendered as React components.

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

Containers relating to the :focus-visible polyfill hook in the Garden Design System

A React component that you can use to wrap your buttons in an accessible element.

ReactiveControllers for powering common UI patterns

A collection of design elements in code for the IBM Design Language

Constraints are container elements with a configurable constraint size, like width or height.

Add CHANGELOG.md info to Knapsack

`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different s

Color, spacing, and typography primitives for the Primer Brand Design System

Convert DTCG design tokens JSON into CSS variables for use in any web application or native app with webview.

PatternFly Icons

Babel preset to parse the Salesforce Design System React source code.

A preset of all the UI-Kit spacings components.

An inset spacing component provides a consistent padding to the inner component.

The Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop ServiceTitan products. It contains tools for designers & developers, patterns, reusable components, guidelines, and more

A stack spacing component renders its children vertically with a consistent spacing between them.

Helios Design System Components

An inset squish spacing component provides a consistent padding to the inner component, with horizontal padding being proportionally bigger than the vertical padding.

Decathlon Design System - Vitamin icons library

Helios Design Tokens

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte