Design Tokens in gluestack-ui pro

Design tokens are the foundational elements of gluestack-ui pro's design system. They represent the smallest units of design decisions, such as colors, typography, spacing, and other visual properties. These tokens ensure consistency across all screens and make it easier to customize and maintain your application's look and feel.

What are Design Tokens?

Design tokens are variables that store design decisions. They act as a single source of truth for your application’s visual style, enabling you to:

Maintain consistency across different platforms (iOS, Android, and web)
Easily update the look and feel of your entire application by modifying a few token values
Ensure accessibility by defining appropriate color contrasts and font sizes
Facilitate collaboration between designers and developers by providing a shared language for design elements

In gluestack-ui pro, design tokens are implemented using a combination of CSS variables (tailwind config) and JavaScript objects (gluestack-ui provider), allowing for seamless integration in both style sheets and component logic.

Key Categories of Design Tokens in gluestack-ui pro

Colors: Define your brand colors, UI element colors, and semantic color tokens.
Typography: Specify font families, sizes, weights, and line heights.
Spacing: Set consistent margins, paddings, and gaps throughout your layout.
Breakpoints: Define responsive design breakpoints for various screen sizes.
Shadows: Create depth and hierarchy with consistent shadow styles.
Border Radii: Maintain consistent corner rounding across UI elements.

By leveraging these design tokens, you can easily customize the look and feel of your AppLaunchKit-based application while maintaining a cohesive and professional design across all platforms.

Add/Edit Design Tokens

To customize the design tokens in AppLaunchKit, you’ll need to update values in two key files:

The tailwind.config.js file
The gluestack-ui provider configuration file

Both of these files are used for both web and native applications, ensuring consistency across platforms.

Updating Tailwind Config

To update a token in the tailwind.config.js file:

Open the tailwind.config.js file in your project root.
Locate the relevant section (e.g., colors, fontSize, spacing).
Modify the value of the token you wish to change.

For example, to change the primary-500 color token, you would update the colors object in the tailwind.config.js file:

colors: {
  primary: {
    500:'rgb(var(--color-primary-500)/<alpha-value>)', // we will update the value of the css-variable depending on the theme (light or dark or ....)
  },
}

and the value of the css-variable will be updated depending on the theme (light or dark or …) in the gluestack-ui-provider/config.ts file:

const config = {
  light: vars({
    ...,
    '--color-primary-500': '51 51 51',
    ...
  }),
  dark: vars({
    ...,
    '--color-primary-500': '240 240 240',
    ...
  }),
};

Updating gluestack-ui Provider

To update a token in the gluestack-ui provider configuration file:

Open the gluestack-ui.config.js file in your project root.
Locate the relevant section (e.g., colors, fontSize, spacing).
Modify the value of the token you wish to change.