@inubekit/foundations v5.11.3

Inubekit-foundations is a library that defines and exports structured tokens to be used across all components of the Inubekit project. This library ensures an organized structure in accordance with the design token model.

Table of contents

• 📋 Documentation
• 📦 Installation
• 💻 Usage

Documentation

The tokens are designed to follow a specific method for fulfilling the color requirements of a component, as outlined below: 1. ### Tokens Structure

• A. Business Unit: Defines which unit the token belongs to.
• B. Component: Specifies the component to modify.
• C. Appearance: Indicates the state the component should take.
• D. Block: Defines the characteristic the token should receive.
• E. Element: Specifies the design attribute.
• F. Modifier: Defines how the component should look.

2. Conditions

   • 1. Content: Applies to border, background, text, and icon components.
   • 2. Contrast: Applies to texts, icons, and spinners when the background is filled.

   • 3. Hover: When filled, texts and icons do not support hover effects.

• Palette: Color palette that is used within the design system.

Therefore, the tokens for the various components utilize the palette tokens, for example:

inube.button.primary.content.color.regular

For more information about the tokens available for the components and how they are used, please follow this link: 👉 Inubekit-tokens

For more information about what are design tokens and how to use them please follow this link: 👉 What-are-design-tokens

Installation

To use inubekit tokens, all you need to do is run the following command:

# with npm
$ npm install @inubekit/foundations

Usage

To use an Inubekit tokens in your project, import it from the package and include it in your code. Here’s an example using the button component:

To start using the tokens, please follow these steps:

1. Make sure that the component is listed in package.json with the latest available version.

  "dependencies": {
    "@inubekit/foundations": "^5.5.0"
    ...
    }

2. Use it on your component:

import styled from "styled-components";
import { inube } from "@inubekit/foundations";

const StyledLabel = styled.label`
  font-family: ${({ theme }) =>
      theme?.typography?.label?.[$size]?.font || "Roboto"},
    sans-serif;
  font-size: ${({ $size }) => inube.typography.label[$size].size};
  font-weight: ${({ $size }) => inube.typography.label[$size].weight};
  letter-spacing: ${({ $size }) => inube.typography.label[$size].tracking};
  line-height: ${({ $size }) => inube.typography.label[$size].lineHeight};
  margin: ${({ $margin }) => $margin};
  padding: ${({ $padding }) => $padding};
  color: ${({ theme, $disabled, $focused, $invalid }) => {
    if ($disabled) {
      return (
        theme?.label?.content?.color?.disabled ||
        inube.label.content.color.disabled
      );
    }

    if ($invalid) {
      return (
        theme?.label?.content?.color?.invalid ||
        inube.label.content.color.invalid
      );
    }

    if ($focused) {
      return (
        theme?.label?.content?.color?.focus || inube.label.content.color.focus
      );
    }

    return (
      theme?.label?.content?.color?.regular || inube.label.content.color.regular
    );
  }};
`;

export { StyledLabel };

3. Example

At this point, you are probably wondering why we use the structure theme?.label?.content?.color?.regular || inube.label.content.color.regular. The reason is simple: by default, our components will use the Inube theme. However, since the components can be customized using the same token structure but with a different palette, you can achieve results like this:

We are going to use <Button/> in order to explain

• customized theme: Your-Customized-Theme.button.primary.content.color.regular

There are also typography tokens, which are used in specific contexts where a particular type of text or alignment for inputs is required, such as in <Text/>, <TextField/>, and similar components.