hyperzod-ui-ordering-design-token

Design tokens generated by Tokener.

Installation

npm install hyperzod-ui-ordering-design-token

Usage

JavaScript/TypeScript:

import tokens from 'hyperzod-ui-ordering-design-token';

CSS:

@import 'hyperzod-ui-ordering-design-token/css';

Updating

To get the latest version of the design tokens:

npm update hyperzod-ui-ordering-design-token

A new version is published automatically whenever changes are merged to main.

Tokens

1. Color Mode

| Token | Value | Type | |-------|-------|------| | bg-light | #FFFFFF | color | | test-bg-light | #C53E3E | color | | bg-dark-strong | #1A1A1A | color | | bg-dark-medium | #212121 | color | | bg-dark-subtle | #282929 | color | | bg-secondary | #F2F2F2 | color | | bg-modal | #FFFFFF | color | | bg-overlay | #000000 | color | | bg-elevated | #FAFAFA | color | | border-subtle | #EDEDED | color | | border-medium | #DEDEDE | color | | border-strong | #3A3A3B | color | | border-default | #B8B8B8 | color | | border-error | #F04438 | color | | border-tp-subtle | #1A1A1A | color | | border-tp-medium | #1A1A1A | color | | border-tp-default | #1A1A1A | color | | text-primary (900) | #212121 | color | | text-primary-light(0) | #FFFFFF | color | | text-secondary (700) | #6A6B6C | color | | text-tertiary (500) | #8E8E8E | color | | text-disabled (350) | #B8B8B8 | color | | btn-text-primary | #FFFFFF | color | | btn-text-primary-disabled | #9C9C9C | color | | btn-text-secondary | #3A3A3B | color | | btn-text-secondary-disbaled | #D2D2D2 | color | | text-primary_on-brand | #FFFFFF | color | | text-error-primary (600) | #F04438 | color | | text-error-on-surface (700) | #B42318 | color | | text-warning-primary (600) | #DC6803 | color | | text-warning-on-surface (700) | #B54708 | color | | text-success-primary (600) | #079455 | color | | text-success-on-surface (700) | #067647 | color | | text-secondary_hover | #182230 | color | | text-secondary_on-brand | #E9D7FE | color | | text-tertiary_hover | #344054 | color | | text-tertiary_on-brand | #E9D7FE | color | | text-quaternary (500) | #667085 | color | | text-quaternary_on-brand | #D6BBFB | color | | text-white | #FFFFFF | color | | text-disabled | #667085 | color | | text-placeholder | #667085 | color | | text-placeholder_subtle | #D0D5DD | color | | text-brand-primary (900) | #42307D | color | | text-brand-secondary (700) | #6941C6 | color | | text-brand-tertiary (600) | #7F56D9 | color | | text-brand-tertiary_alt | #7F56D9 | color | | badge-bg | #1A1A1A | color | | radio-selected | #1A1A1A | color | | radio-unselected | #9C9C9C | color | | divider-bg | #D2D2D2 | color | | button-primary-bg | #1A1A1A | color | | button-primary-disabled-bg | #8E8E8E | color | | button-primary-bg-pressed | #282929 | color | | button-secondary-bg | #F2F2F2 | color | | icon-close-bg | #E5E5E5 | color | | icon-close-bg-pressed | #D2D2D2 | color | | icon-fill-active | #1A1A1A | color | | icon-fill-active-light | #FFFFFF | color | | icon-fill-hovered | #282929 | color | | icon-fill-inactive | #6A6B6C | color | | icon-fill-disabled | #B8B8B8 | color | | icon-stroke-active | #1A1A1A | color | | icon-stroke-active-light | #FFFFFF | color | | icon-stroke-hovered | #282929 | color | | icon-stroke-inactive | #8E8E8E | color | | icon-stroke-disabled | #B8B8B8 | color |

2. Radius

| Token | Value | Type | |-------|-------|------| | radius-none | 0 | number | | radius-xxs | 2 | number | | radius-xs | 4 | number | | radius-sm | 6 | number | | radius-md | 8 | number | | radius-lg | 10 | number | | radius-xl | 12 | number | | radius-2xl | 16 | number | | radius-3xl | 20 | number | | radius-4xl | 24 | number | | radius-full | 9999 | number |

3. Spacing

| Token | Value | Type | |-------|-------|------| | spacing-none | 0 | number | | spacing-xxs | 2 | number | | spacing-xs | 4 | number | | spacing-sm | 6 | number | | spacing-md | 8 | number | | spacing-lg | 12 | number | | spacing-xl | 16 | number | | spacing-2xl | 20 | number | | spacing-3xl | 24 | number | | spacing-4xl | 32 | number | | spacing-5xl | 40 | number | | spacing-6xl | 48 | number | | spacing-7xl | 64 | number | | spacing-8xl | 80 | number | | spacing-9xl | 96 | number | | spacing-10xl | 128 | number | | spacing-11xl | 160 | number |

4. Width

| Token | Value | Type | |-------|-------|------| | width-xxs | 320 | number | | width-xs | 384 | number | | width-sm | 480 | number | | width-md | 560 | number | | width-lg | 640 | number | | width-xl | 768 | number | | width-2xl | 1024 | number | | width-3xl | 1280 | number | | width-4xl | 1440 | number | | width-5xl | 1600 | number | | width-6xl | 1920 | number | | paragraph-max-width | 720 | number |

5. Containers

| Token | Value | Type | |-------|-------|------| | mob-min-width | 320 | number | | mob-deafault-width | 393 | number | | mob-max-width | 960 | number | | desktop-min-width | 961 | number | | desktop-default-width | 1440 | number | | desktop-max-width | 1920 | number |

6. Typography

| Token | Value | Type | |-------|-------|------| | font-family-heading | Inter Variable | string | | font-family-body | Inter Variable | string | | regular | Regular | string | | heading-2xl | 72 | number | | heading-xl | 60 | number | | heading-lg | 48 | number | | heading-md | 36 | number | | heading-sm | 30 | number | | heading-xs | 24 | number | | text-xl | 20 | number | | text-lg | 18 | number | | text-md | 16 | number | | text-sm | 14 | number | | text-xs | 12 | number | | text-2xs | 10 | number | | text-3xs | 9 | number | | heading-2xl | 90 | number | | heading-xl | 72 | number | | heading-lg | 60 | number | | heading-md | 44 | number | | heading-sm | 38 | number | | heading-xs | 32 | number | | text-xl | 28 | number | | text-xl-tight | 20 | number | | text-lg | 25.200000762939453 | number | | text-lg-tight | 18 | number | | text-md | 22.399999618530273 | number | | text-md-tight | 16 | number | | text-sm | 21 | number | | text-sm-tight | 14 | number | | text-xs | 18 | number | | text-xs-tight | 12 | number | | text-2xs | 15 | number | | text-2xs-tight | 10 | number | | text-3xs | 13.5 | number | | text-3xs-tight | 9 | number | | regular-italic | Regular italic | string | | medium | Medium | string | | medium-italic | Medium italic | string | | semibold | Semibold | string | | semibold-italic | Semibold italic | string | | bold | Bold | string | | bold-italic | Bold italic | string |