Design System Styles

Unofficial Content
This documentation is valid for:

This article explains design styles, the concepts, and their use in GeneXus.

What are Styles?

Styles are a way of representing the design decisions made for a system. Together with tokens, they form a fundamental part of Design Systems.

Within the Design System object, styles are defined in the corresponding 'Design Styles' part.

Format

A style sheet within the design system object has a structure and format very similar to CSS, the main difference is that you can make references to the tokens defined in the other part of the design system object.

Basically it can be divided into 3 writing styles:

CSS

The format is completely compatible with a CSS style sheet. Although it is not the optimal way to use it, it allows you to paste a CSS directly there and use it as the style sheet of the design system, .

Styles My_Style
{
  .HeaderContainer
  {
       background-color: #fafafb;
       border-radius: 0px;
       border-width: 1px;
       font-size: 16px;
  }
}

Pure

There are those who argue that in a design system, all the values of the decisions should be tokens. In this writing style, the property values are completely parameterized with tokens.

Styles My_Style
{ 
   .HeaderContainer 
   { 
      background-color: $color.background; 
      border-radius: $radius.circle; 
      border-width: $border.thin; 
      font-size: $fontSizes.small; 
   }    
}

For this, you first have to define the corresponding tokens.

Hybrid

This way of defining styles takes advantage of both previous possibilities by creating a hybrid sheet, where some properties are parameterized with tokens while others simply have a fixed value.

Styles My_Style
{
   .HeaderContainer
   {
      background-color: #fafafb;
      border-radius: $radius.circle;
      border-width: 1px;
      font-size: $fontSizes.small;
   }
}

Structuring Styles

There are a set of rules that you can use for structuring styles, which let you compose classes, import token or styles from other objects, and more.
More information at Design System Style Rules.

Usage

Each of the classes defined in this part can be added as classes in the object controls (just as Theme Classes of a Theme object) and also be used in other Design System objects.