Design Library
The Design Library includes themeable user interface components, design tokens, and styling utilities. It is written in Sass and TypeScript with React.
Website: https://design.tangible.one
Repository: https://github.com/tangibleinc/design
Status: Draft - Currently in research phase
Getting started
Install as dev dependency.
npm install -D @tangible/design
Sass
@import "@tangible/design";
TypeScript
import * as design from '@tangible/design'
Goals
Generic
Provide building blocks for design systems and themes.
HTML elements and React components are styled using a shared set of tokens, which can have variants and themes. Multiple themes can be combined on the same page.
Accessible by default: keyboard navigation, screen reader support.
- ARIA Authoring Practices Guide: Patterns
- Open UI: Research on common components across popular design systems
- React Aria Components, Radix UI Primitives, Shadcn UI
- React Icons: A collection of popular icon libraries to import only the ones you're using.
Modular
Load only the features you use. Ideally the library core defines token collections in TypeScript, which generates JSON and Sass variables, functions, mixins, placeholders; then produce only the CSS variables and rules as needed.
CSS classes and custom properties are prefixed to support embedded context such as WordPress frontend and admin.
- Atomic CSS and style engines: Tailwind, Uno
- Classless CSS frameworks: Pico and many others
Portable
Embrace the Design Tokens standard format (JSON) being developed by the W3C Community Group. This way shared values can be created and used across platforms, languages, and design tools.
- Design token parsers and compilers: Style Dictionary, Diez
- Standardized Design Tokens and CSS for a consistent, customizable, and interoperable WordPress future