New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details β†’
Socket
Book a DemoSign in
Socket

@webeach/design

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@webeach/design

Design tokens for WebEach ecosystem

latest
Source
npmnpm
Version
1.2.0
Version published
Maintainers
1
Created
Source

@webeach/design

@webeach/design is a unified design tokens package used across the webeach ecosystem, including in @webeach/uikit.

It provides a standardized foundation for building visually consistent user interfaces with full support for both light and dark modes.

πŸ“¦ Installation

yarn add @webeach/design

🎨 Colors

Each color group includes 10 shades adapted for both light and dark modes:

  • Primary β€” main brand accent colors
  • Secondary β€” additional accent colors
  • Neutral β€” neutral grayscale palette
  • Danger β€” used for errors and critical states
  • Warning β€” used for warnings and alerts
  • Success β€” used for success messages and confirmations

Light Mode Colors

The table below shows the color values for the light mode:

ColorNameJSCSS
Neutral 1LightModeColor.neutral1var(--lm-color-neutral-1)
Neutral 2LightModeColor.neutral2var(--lm-color-neutral-2)
Neutral 3LightModeColor.neutral3var(--lm-color-neutral-3)
Neutral 4LightModeColor.neutral4var(--lm-color-neutral-4)
Neutral 5LightModeColor.neutral5var(--lm-color-neutral-5)
Neutral 6LightModeColor.neutral6var(--lm-color-neutral-6)
Neutral 7LightModeColor.neutral7var(--lm-color-neutral-7)
Neutral 8LightModeColor.neutral8var(--lm-color-neutral-8)
Neutral 9LightModeColor.neutral9var(--lm-color-neutral-9)
Neutral 10LightModeColor.neutral10var(--lm-color-neutral-10)
Primary 1LightModeColor.primary1var(--lm-color-primary-1)
Primary 2LightModeColor.primary2var(--lm-color-primary-2)
Primary 3LightModeColor.primary3var(--lm-color-primary-3)
Primary 4LightModeColor.primary4var(--lm-color-primary-4)
Primary 5LightModeColor.primary5var(--lm-color-primary-5)
Primary 6LightModeColor.primary6var(--lm-color-primary-6)
Primary 7LightModeColor.primary7var(--lm-color-primary-7)
Primary 8LightModeColor.primary8var(--lm-color-primary-8)
Primary 9LightModeColor.primary9var(--lm-color-primary-9)
Primary 10LightModeColor.primary10var(--lm-color-primary-10)
Secondary 1LightModeColor.secondary1var(--lm-color-secondary-1)
Secondary 2LightModeColor.secondary2var(--lm-color-secondary-2)
Secondary 3LightModeColor.secondary3var(--lm-color-secondary-3)
Secondary 4LightModeColor.secondary4var(--lm-color-secondary-4)
Secondary 5LightModeColor.secondary5var(--lm-color-secondary-5)
Secondary 6LightModeColor.secondary6var(--lm-color-secondary-6)
Secondary 7LightModeColor.secondary7var(--lm-color-secondary-7)
Secondary 8LightModeColor.secondary8var(--lm-color-secondary-8)
Secondary 9LightModeColor.secondary9var(--lm-color-secondary-9)
Secondary 10LightModeColor.secondary10var(--lm-color-secondary-10)
Danger 1LightModeColor.danger1var(--lm-color-danger-1)
Danger 2LightModeColor.danger2var(--lm-color-danger-2)
Danger 3LightModeColor.danger3var(--lm-color-danger-3)
Danger 4LightModeColor.danger4var(--lm-color-danger-4)
Danger 5LightModeColor.danger5var(--lm-color-danger-5)
Danger 6LightModeColor.danger6var(--lm-color-danger-6)
Danger 7LightModeColor.danger7var(--lm-color-danger-7)
Danger 8LightModeColor.danger8var(--lm-color-danger-8)
Danger 9LightModeColor.danger9var(--lm-color-danger-9)
Danger 10LightModeColor.danger10var(--lm-color-danger-10)
Warning 1LightModeColor.warning1var(--lm-color-warning-1)
Warning 2LightModeColor.warning2var(--lm-color-warning-2)
Warning 3LightModeColor.warning3var(--lm-color-warning-3)
Warning 4LightModeColor.warning4var(--lm-color-warning-4)
Warning 5LightModeColor.warning5var(--lm-color-warning-5)
Warning 6LightModeColor.warning6var(--lm-color-warning-6)
Warning 7LightModeColor.warning7var(--lm-color-warning-7)
Warning 8LightModeColor.warning8var(--lm-color-warning-8)
Warning 9LightModeColor.warning9var(--lm-color-warning-9)
Warning 10LightModeColor.warning10var(--lm-color-warning-10)
Success 1LightModeColor.success1var(--lm-color-success-1)
Success 2LightModeColor.success2var(--lm-color-success-2)
Success 3LightModeColor.success3var(--lm-color-success-3)
Success 4LightModeColor.success4var(--lm-color-success-4)
Success 5LightModeColor.success5var(--lm-color-success-5)
Success 6LightModeColor.success6var(--lm-color-success-6)
Success 7LightModeColor.success7var(--lm-color-success-7)
Success 8LightModeColor.success8var(--lm-color-success-8)
Success 9LightModeColor.success9var(--lm-color-success-9)
Success 10LightModeColor.success10var(--lm-color-success-10)

Dark Mode Colors

The table below shows the color values for the dark mode:

ColorNameJSCSS
Neutral 1DarkModeColor.neutral1var(--dm-color-neutral-1)
Neutral 2DarkModeColor.neutral2var(--dm-color-neutral-2)
Neutral 3DarkModeColor.neutral3var(--dm-color-neutral-3)
Neutral 4DarkModeColor.neutral4var(--dm-color-neutral-4)
Neutral 5DarkModeColor.neutral5var(--dm-color-neutral-5)
Neutral 6DarkModeColor.neutral6var(--dm-color-neutral-6)
Neutral 7DarkModeColor.neutral7var(--dm-color-neutral-7)
Neutral 8DarkModeColor.neutral8var(--dm-color-neutral-8)
Neutral 9DarkModeColor.neutral9var(--dm-color-neutral-9)
Neutral 10DarkModeColor.neutral10var(--dm-color-neutral-10)
Primary 1DarkModeColor.primary1var(--dm-color-primary-1)
Primary 2DarkModeColor.primary2var(--dm-color-primary-2)
Primary 3DarkModeColor.primary3var(--dm-color-primary-3)
Primary 4DarkModeColor.primary4var(--dm-color-primary-4)
Primary 5DarkModeColor.primary5var(--dm-color-primary-5)
Primary 6DarkModeColor.primary6var(--dm-color-primary-6)
Primary 7DarkModeColor.primary7var(--dm-color-primary-7)
Primary 8DarkModeColor.primary8var(--dm-color-primary-8)
Primary 9DarkModeColor.primary9var(--dm-color-primary-9)
Primary 10DarkModeColor.primary10var(--dm-color-primary-10)
Secondary 1DarkModeColor.secondary1var(--dm-color-secondary-1)
Secondary 2DarkModeColor.secondary2var(--dm-color-secondary-2)
Secondary 3DarkModeColor.secondary3var(--dm-color-secondary-3)
Secondary 4DarkModeColor.secondary4var(--dm-color-secondary-4)
Secondary 5DarkModeColor.secondary5var(--dm-color-secondary-5)
Secondary 6DarkModeColor.secondary6var(--dm-color-secondary-6)
Secondary 7DarkModeColor.secondary7var(--dm-color-secondary-7)
Secondary 8DarkModeColor.secondary8var(--dm-color-secondary-8)
Secondary 9DarkModeColor.secondary9var(--dm-color-secondary-9)
Secondary 10DarkModeColor.secondary10var(--dm-color-secondary-10)
Danger 1DarkModeColor.danger1var(--dm-color-danger-1)
Danger 2DarkModeColor.danger2var(--dm-color-danger-2)
Danger 3DarkModeColor.danger3var(--dm-color-danger-3)
Danger 4DarkModeColor.danger4var(--dm-color-danger-4)
Danger 5DarkModeColor.danger5var(--dm-color-danger-5)
Danger 6DarkModeColor.danger6var(--dm-color-danger-6)
Danger 7DarkModeColor.danger7var(--dm-color-danger-7)
Danger 8DarkModeColor.danger8var(--dm-color-danger-8)
Danger 9DarkModeColor.danger9var(--dm-color-danger-9)
Danger 10DarkModeColor.danger10var(--dm-color-danger-10)
Warning 1DarkModeColor.warning1var(--dm-color-warning-1)
Warning 2DarkModeColor.warning2var(--dm-color-warning-2)
Warning 3DarkModeColor.warning3var(--dm-color-warning-3)
Warning 4DarkModeColor.warning4var(--dm-color-warning-4)
Warning 5DarkModeColor.warning5var(--dm-color-warning-5)
Warning 6DarkModeColor.warning6var(--dm-color-warning-6)
Warning 7DarkModeColor.warning7var(--dm-color-warning-7)
Warning 8DarkModeColor.warning8var(--dm-color-warning-8)
Warning 9DarkModeColor.warning9var(--dm-color-warning-9)
Warning 10DarkModeColor.warning10var(--dm-color-warning-10)
Success 1DarkModeColor.success1var(--dm-color-success-1)
Success 2DarkModeColor.success2var(--dm-color-success-2)
Success 3DarkModeColor.success3var(--dm-color-success-3)
Success 4DarkModeColor.success4var(--dm-color-success-4)
Success 5DarkModeColor.success5var(--dm-color-success-5)
Success 6DarkModeColor.success6var(--dm-color-success-6)
Success 7DarkModeColor.success7var(--dm-color-success-7)
Success 8DarkModeColor.success8var(--dm-color-success-8)
Success 9DarkModeColor.success9var(--dm-color-success-9)
Success 10DarkModeColor.success10var(--dm-color-success-10)

Mode Colors

The table below shows color values that adapt to both light and dark modes:

Light ModeDark ModeNameCSS
Neutral 1var(--color-neutral-1)
Neutral 2var(--color-neutral-2)
Neutral 3var(--color-neutral-3)
Neutral 4var(--color-neutral-4)
Neutral 5var(--color-neutral-5)
Neutral 6var(--color-neutral-6)
Neutral 7var(--color-neutral-7)
Neutral 8var(--color-neutral-8)
Neutral 9var(--color-neutral-9)
Neutral 10var(--color-neutral-10)
Primary 1var(--color-primary-1)
Primary 2var(--color-primary-2)
Primary 3var(--color-primary-3)
Primary 4var(--color-primary-4)
Primary 5var(--color-primary-5)
Primary 6var(--color-primary-6)
Primary 7var(--color-primary-7)
Primary 8var(--color-primary-8)
Primary 9var(--color-primary-9)
Primary 10var(--color-primary-10)
Secondary 1var(--color-secondary-1)
Secondary 2var(--color-secondary-2)
Secondary 3var(--color-secondary-3)
Secondary 4var(--color-secondary-4)
Secondary 5var(--color-secondary-5)
Secondary 6var(--color-secondary-6)
Secondary 7var(--color-secondary-7)
Secondary 8var(--color-secondary-8)
Secondary 9var(--color-secondary-9)
Secondary 10var(--color-secondary-10)
Danger 1var(--color-danger-1)
Danger 2var(--color-danger-2)
Danger 3var(--color-danger-3)
Danger 4var(--color-danger-4)
Danger 5var(--color-danger-5)
Danger 6var(--color-danger-6)
Danger 7var(--color-danger-7)
Danger 8var(--color-danger-8)
Danger 9var(--color-danger-9)
Danger 10var(--color-danger-10)
Warning 1var(--color-warning-1)
Warning 2var(--color-warning-2)
Warning 3var(--color-warning-3)
Warning 4var(--color-warning-4)
Warning 5var(--color-warning-5)
Warning 6var(--color-warning-6)
Warning 7var(--color-warning-7)
Warning 8var(--color-warning-8)
Warning 9var(--color-warning-9)
Warning 10var(--color-warning-10)
Success 1var(--color-success-1)
Success 2var(--color-success-2)
Success 3var(--color-success-3)
Success 4var(--color-success-4)
Success 5var(--color-success-5)
Success 6var(--color-success-6)
Success 7var(--color-success-7)
Success 8var(--color-success-8)
Success 9var(--color-success-9)
Success 10var(--color-success-10)

🌈 Gradients

Currently, there is one gradient variation, available in 10 shades for each mode. Gradients are used for decorative elements and to emphasize visual hierarchy.

Light Mode Gradients

The table below shows the gradients for the light mode:

ColorNameJSCSS
Primary 1LightModeGradient.primary1var(--lm-gradient-primary-1)
Primary 2LightModeGradient.primary2var(--lm-gradient-primary-2)
Primary 3LightModeGradient.primary3var(--lm-gradient-primary-3)
Primary 4LightModeGradient.primary4var(--lm-gradient-primary-4)
Primary 5LightModeGradient.primary5var(--lm-gradient-primary-5)
Primary 6LightModeGradient.primary6var(--lm-gradient-primary-6)
Primary 7LightModeGradient.primary7var(--lm-gradient-primary-7)
Primary 8LightModeGradient.primary8var(--lm-gradient-primary-8)
Primary 9LightModeGradient.primary9var(--lm-gradient-primary-9)
Primary 10LightModeGradient.primary10var(--lm-gradient-primary-10)

Dark Mode Gradients

The table below shows the gradients for the dark mode:

ColorNameJSCSS
Primary 1DarkModeGradient.primary1var(--dm-gradient-primary-1)
Primary 2DarkModeGradient.primary2var(--dm-gradient-primary-2)
Primary 3DarkModeGradient.primary3var(--dm-gradient-primary-3)
Primary 4DarkModeGradient.primary4var(--dm-gradient-primary-4)
Primary 5DarkModeGradient.primary5var(--dm-gradient-primary-5)
Primary 6DarkModeGradient.primary6var(--dm-gradient-primary-6)
Primary 7DarkModeGradient.primary7var(--dm-gradient-primary-7)
Primary 8DarkModeGradient.primary8var(--dm-gradient-primary-8)
Primary 9DarkModeGradient.primary9var(--dm-gradient-primary-9)
Primary 10DarkModeGradient.primary10var(--dm-gradient-primary-10)

Mode Gradients

The table below shows gradients that adapt to both light and dark modes.

Light ModeDark ModeNameCSS
Primary 1var(--gradient-primary-1)
Primary 2var(--gradient-primary-2)
Primary 3var(--gradient-primary-3)
Primary 4var(--gradient-primary-4)
Primary 5var(--gradient-primary-5)
Primary 6var(--gradient-primary-6)
Primary 7var(--gradient-primary-7)
Primary 8var(--gradient-primary-8)
Primary 9var(--gradient-primary-9)
Primary 10var(--gradient-primary-10)

πŸ“ Sizes

The design tokens package also includes size groups, consisting of both base and semantic values.

  • Base Sizes β€” foundational size values (e.g., container width/height)
  • Spacing β€” gaps between elements
  • Rounding β€” border radius values
  • Border Sizes β€” border thickness values

Base Sizes

Below is a table of all available base sizes:

NameValueJSCSS
1x4pxSize['1x']var(--size-1x)
2x8pxSize['2x']var(--size-2x)
3x12pxSize['3x']var(--size-3x)
4x16pxSize['4x']var(--size-4x)
4.5x18pxSize['4.5x']var(--size-4-5x)
5x20pxSize['5x']var(--size-5x)
6x24pxSize['6x']var(--size-6x)
7x28pxSize['7x']var(--size-7x)
8x32pxSize['8x']var(--size-8x)
10x40pxSize['10x']var(--size-10x)
12x48pxSize['12x']var(--size-12x)
16x64pxSize['16x']var(--size-16x)
24x96pxSize['24x']var(--size-24x)
32x128pxSize['32x']var(--size-32x)

Spacing Sizes

The table below shows all available spacing sizes.

NameValueJSCSS
0.5x2pxSpacing['0.5x']var(--spacing-0-5x)
1x4pxSpacing['1x']var(--spacing-1x)
2x8pxSpacing['2x']var(--spacing-2x)
3x12pxSpacing['3x']var(--spacing-3x)
4x16pxSpacing['4x']var(--spacing-4x)
5x20pxSpacing['5x']var(--spacing-5x)
6x24pxSpacing['6x']var(--spacing-6x)
7x28pxSpacing['7x']var(--spacing-7x)
8x32pxSpacing['8x']var(--spacing-8x)
10x40pxSpacing['10x']var(--spacing-10x)
12x48pxSpacing['12x']var(--spacing-12x)

Roundings

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Π° с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ сгруглСний

NameValueJSCSS
1x4pxRounding['1x']var(--rounding-1x)
1.5x6pxRounding['1.6x']var(--rounding-1-5x)
2x8pxRounding['2x']var(--rounding-2x)
4x16pxRounding['4x']var(--rounding-4x)

Border Sizes

The table below shows all available border thickness values.

NameValueJSCSS
Thin1pxBorderSize.thinvar(--border-size-thin)
Regular2pxBorderSize.regularvar(--border-size-regilar)
Medium4pxBorderSize.mediumvar(--border-size-medium)
Bold6pxBorderSize.boldvar(--border-size-bold)
Extra Bold8pxBorderSize.extraBoldvar(--border-size-extra-bold)

✍️ Typography

The typography system includes styles for various levels of headings, body text, and code blocks.

Available groups:

  • Headings β€” 5 levels with different weight variations
  • Body text β€” multiple sizes and weights
  • Monospaced style β€” for displaying code

⚠️ Note: Font files are not included in this package. You are responsible for importing fonts manually in your project, for example via Google Fonts.

Below is a table of all available typography styles:

NameFont FamilyFont SizeFont WeightLine HeightJSCSS
H1 / mediumRoboto32px50040pxTypography.H1.mediumvar(--typography-h1-medium)
H2 / mediumRoboto24px50030pxTypography.H2.mediumvar(--typography-h2-medium)
H3 / regularRoboto20px40024pxTypography.H3.regularvar(--typography-h3-regular)
H3 / mediumRoboto20px50024pxTypography.H3.mediumvar(--typography-h3-medium)
H4 / regularRoboto18px40024pxTypography.H4.regularvar(--typography-h4-regular)
H4 / mediumRoboto18px50024pxTypography.H4.mediumvar(--typography-h4-medium)
H5 / regularRoboto16px40024pxTypography.H5.regularvar(--typography-h5-regular)
H5 / mediumRoboto16px50024pxTypography.H5.mediumvar(--typography-h5-medium)
H5 / boldRoboto16px70024pxTypography.H5.boldvar(--typography-h5-bold)
Body / extraSmall / regularRoboto12px40016pxTypography.Body.extraSmall.regularvar(--typography-body-extra-small-regular)
Body / extraSmall / mediumRoboto12px50016pxTypography.Body.extraSmall.mediumvar(--typography-body-extra-small-medium)
Body / small / regularRoboto14px40022pxTypography.Body.small.regularvar(--typography-body-small-regular)
Body / small / mediumRoboto14px50022pxTypography.Body.small.mediumvar(--typography-body-small-medium)
Body / small / boldRoboto14px70022pxTypography.Body.small.boldvar(--typography-body-small-bold)
Body / medium / regularRoboto16px40024pxTypography.Body.medium.regularvar(--typography-body-medium-regular)
Body / medium / mediumRoboto16px50024pxTypography.Body.medium.mediumvar(--typography-body-medium-medium)
Body / medium / boldRoboto16px70024pxTypography.Body.medium.boldvar(--typography-body-medium-bold)
Code / regularRoboto Mono14px40020pxTypography.Code.regularvar(--typography-code-regular)

πŸŽ›οΈ Mode Switching

To enable automatic mode-based styling, make sure to include the generated CSS tokens file:

import '@webeach/design/tokens.css';

The current mode is controlled via the data-ui-mode attribute on the any HTML element. You should define a default value:

<html data-ui-mode="light">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
<div data-ui-mode="dark">
  ...
</div>

You can also manually retrieve mode color and gradient maps in JavaScript:

import { getModeColor, getModeGradient } from '@wrs/design';

const Color = getModeColor('light');
const Gradient = getModeGradient('light');

console.log(Color.primary6); // "hsl(301 53% 55%)"
console.log(Gradient.primary6); // ["hsl(201 84% 55%)", "hsl(301 53% 55%)"]

πŸ’‘ Examples

Colors

.button {
  background-color: var(--color-primary-5);
  color: var(--color-neutral-1);
}

Gradients

.button {
  background-image: var(--gradient-primary-6);
}

Sizes

.box {
  block-size: var(--size-10x);
  inline-size: var(--size-12x);
  
  padding-block: var(--size-2x);
  padding-inline: var(--size-3x);
}
.box {
  display: flex;
  gap: var(--spacing-1x);
}
.button {
  background-color: var(--color-neutral-1);
  border-color: var(--color-secondary-6);
  color: var(--color-neutral-10);
  
  border-style: solid;
  border-width: var(--border-size-regular);
  border-radius: var(--rounding-2x);
}

Typography

.heading-1 {
  font: var(--typography-h1-medium);
}

.paragraph {
  font: var(--typography-body-medium-regular);
}

.small-text {
  font: var(--typography-body-small-regular);
}

.code {
  font: var(--typography-code-regular);
}

🧩 TypeScript Types

This package also provides full TypeScript typings for all design token objects.

import type {
  BorderSizeKey,
  BorderSizeType,
  BorderSizeValue,
  ColorKey,
  GradientKey,
  ModeKey,
  RoundingKey,
  RoundingType,
  RoundingValue,
  SizeKey,
  SizeType,
  SizeValue,
  SpacingKey,
  SpacingType,
  SpacingValue,
  TypographyType
} from '@wrs/design';

These types help you maintain type safety when working with token keys or token maps in your own components, utilities, or design tooling.

βš™οΈ Development

Build the library

Compiles the codebase and generates the production-ready output in the lib directory.

yarn run build

Watch mode

Watches for file changes and rebuilds automatically.

yarn run build:watch

Generate assets

Generates color and gradient preview images for use in the README.md.

yarn run generate:assets

⚠️ Note: you need to run this manually whenever you update the color or gradient token sets.

βœ… Design Token Requirements

All tokens are validated during the build process. Below are the basic format requirements:

  • Key names (key) must be in camelCase format
    • Example: primary1, secondary10, extraRelaxed
  • Colors must use the HSL format
    • Example: hsl(301 53% 55%)
    • hex, rgb, rgba, and other formats are not allowed
  • Sizes (e.g., Size, Spacing, Rounding) must be in px units
    • Example: 16px, 24px
    • em, rem, %, auto, inherit, and other units are not allowed
  • All values must be explicitly defined β€” empty strings are not allowed

If any token does not meet these requirements, the build will fail with a console error.

πŸ”– Releasing a New Version

Releases are handled automatically using semantic-release.

Before publishing a new version, make sure to:

  • Commit and push all changes to the main branch.
  • Use commit messages that follow the Conventional Commits format:
  • feat: ... β€” for new features
  • fix: ... β€” for bug fixes
  • chore: ..., refactor: ..., etc.
  • Versioning is determined automatically based on the type of commits (patch, minor, major).
  • Update the README.md:
  • All tables should be updated if any tokens related to colors, sizes, or typography were changed.
  • If color or gradient tokens were changed, also run yarn run generate:assets to regenerate the color preview images.

πŸ‘¨β€πŸ’» Author

Developed and maintained by Ruslan Martynov

If you have any suggestions or find a bug, feel free to open an issue or pull request.

πŸ“„ License

This package is licensed under the MIT License.

FAQs

Package last updated on 24 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts