Design System

Read this blog post to know more: https://dyte.io/blog/new-dyte-video-sdk-design-system/

provideDyteDesignSystem() utility

This is a very handy utility to configure the design system of UI Kit components programmatically, with very lines of code.

<div id="app"></div>

<script>
  provideDyteDesignSystem(document.getElementById('app'), {
    googleFont: 'Lobster',
    // sets light background colors
    theme: 'light',
    colors: {
      danger: '#ffac00',
      brand: {
        300: '#00FFE1',
        400: '#00FFFF',
        500: '#00E1D4',
        600: '#007B74',
        700: '#00655F',
      },
      text: '#071428',
      'text-on-brand': '#ffffff',
      'video-bg': '#E5E7EB',
    },
    borderRadius: 'extra-rounded',
  });
</script>

Read on to learn more about each token in detail.

Design Tokens

UI Kit uses design tokens for it's design system.

Design tokens are the design related values which are used to maintain a design system, which provides flexibility in customizing the overall design of a system with values such as: typography, spacing, colors etc.

These design tokens are stored and shared among components with the help of CSS variables.

Typography

--dyte-font-family: Inter;

You can tweak the font family used in your UI Kit components easily with this token.

You can edit this value in two ways with the provideDyteDesignSystem utility.

Usage

const designTokens = {
  fontFamily: 'Custom Font',
  // or
  googleFont: 'A Google Font',
}

Set either of these values in your design tokens.

1. With fontFamily 🪡 - Use a custom font family, you'll have to load the font manually.
2. With googleFont ✨ - Use a google font, the font is loaded automatically.

Colors

--dyte-colors-brand-500: 33 96 253;
--dyte-colors-background-1000: 8 8 8;
/* ... rest of the shades */

CSS Variables are set in the format: R G B.

Here are all the color tokens, along with their default values.

Brand

300

#497CFD

400

#356EFD

500

#2160FD

600

#0D51FD

700

#0246FD

Background

1000

#080808

900

#1A1A1A

800

#1E1E1E

700

#2C2C2C

600

#3C3C3C

Text

1000

rgb(255 255 255)

900

rgb(255 255 255 / 0.88)

800

rgb(255 255 255 / 0.76)

700

rgb(255 255 255 / 0.64)

600

rgb(255 255 255 / 0.52)

Text On Brand

1000

rgb(255 255 255)

900

rgb(255 255 255 / 0.88)

800

rgb(255 255 255 / 0.76)

700

rgb(255 255 255 / 0.64)

600

rgb(255 255 255 / 0.52)

Singular Colors

video-bg

#181818

success

#83D017

warning

#FFCD07

danger

#FF2D2D

Usage

info

Note the exception of text and text-on-brand colors, you only specify a single color even though there are the following shades: 1000 - 600.

This is because the provideDyteDesignSystem() utility sets the color you pass to text-1000 and calculates lighter shades and sets them as well.

Only pass objects for brand and background colors.

A set of commonly used background shades are available by default with the theme property.

Theme values are: light, dark, darkest.

Edit color tokens like this. Only the colors you specify will be set.

const designTokens = {
  theme: 'darkest',
  colors: {
    brand: { 500: '#0D51FD' },
    background: { 1000: '#080808' },
    text: '#ffffff',
    'text-on-primary': '#ffffff',
    'video-bg': '#181818',
  },
};

Spacing

--dyte-space-1: 4px;
/* ... rest of the spacing scale */

The spacing scale is used for setting width, height, margins, paddings, positions etc. throughout the components.

• The default value for the spacing scale base is 4px.
• Rest of the values are calculated with this base, set to --dyte-space-1.
• Current spacing scale ranges from 0 to 96.

Usage

Set the base of the spacing scale with spacingBase property.

const designTokens = {
  spacingBase: 4, // value in px
};

Border Width & Border Radius

Border Width and Border Radius properties can also be customized with design tokens!

Token Name	Values
borderWidth	none, thin, fat
borderRadius	sharp, rounded, extra-rounded, circular

Usage

const designTokens = {
  borderWidth: 'thin',
  borderRadius: 'rounded',
};