@dgraph-io/typhoon-ui
TypeScript icon, indicating that this package has built-in type declarations

0.2.7 • Public • Published

🌀 typhoon-ui

License node npm version

View Component Library

[Note: This is a work in progress, API is subject to change]

Installation

npm i @dgraph-io/typhoon-ui

Design System Concepts

Theme

Theme is just a map of tokens & components

{ tokens: { ... }, components: { ... }}

Theme can be accessed from useTheme hook, which gets access to theme object from the ThemeContext. You only need this while creating atoms or molecules.

Tokens

Tokens is a map of values which allow us to build a contraint based design. There is a mapping of CSS properties with the tokens, which can be found in helpers/constants. Every component in the design system is able to resolve the styles against these tokens. Lets see some examples -

Example -

  1. marginTop: 1

    Since marginTop is mapped to tokens.space

    This will resolve to marginTop: tokens.space[1] => marginTop: 8px

  2. background : "pink.light"

    Since background is mapped to tokens.colors

    This will resolve to background: tokens.colors.pink.light => background: #ffc0d6

Every component in the design system is able to resolve the styles

Shortcuts

There are shortcuts configured as well which are defined in helpers/constants

Example -

marginX: ...

will be resolved to -

marginLeft: ... ,
marginRight: ...

Advanced

We can resolve tokens within a string as well like -

Example-

border: {{lineThickness.1}} solid {{colors.pink.light}}

This resolves to

border: {{lineThickness.1}} solid {{colors.pink.light}}

Any valid key between {{ }} will be resolved against token values.


Readme

Keywords

none

Package Sidebar

Install

npm i @dgraph-io/typhoon-ui

Weekly Downloads

226

Version

0.2.7

License

ISC

Unpacked Size

193 kB

Total Files

165

Last publish

Collaborators

  • kevinmingtarja
  • dgraphlabs