Design System Style Rules

Unofficial Content
This documentation is valid for:

This article describes the rules that can be applied on Design System Styles to structure styles.

Import

This rule allows to import and use definitions made in any of the following entities:

Syntax

@import <DSO_Name>;                                            //Import a complete Design System Object
| @import <DSO_Name>.tokens;                                   //Import only tokens of a Design System Object
| @import <DSO_Name>.styles;                                   //Import only styles of a Design System Object
| @import "./path/miCSS.css" (<other_file>)*;                  //Import an external CSS
| @import gx-file(FileName);                                    //Import a KB File, it should be a CSS file.

All these options can be combined in one line: @import myDSO otherDSO.tokens thirdDSO forthDSO.styles;

Restrictions

  • The files that can be imported are only .css format files
  • It is not possible to combine the import of files with that of DSO in the same line
  • This rule can only be written at the beginning of the definition of a styles set

Considerations

  • Always in the styles of a design system, there is an implicit import of the tokens of that same DSO. This implicit import takes precedence over all other imports that are made and cannot be removed
  • Due to the previous point and because there is a direct dependency between the part styles and the part tokens of the same DSO, importing styles from an external DSO is equivalent to importing the complete DSO with its tokens
  • The precedence of imports follows the following rules
    • All classes and tokens of the DSO itself take precedence over classes and tokens that are imported from others
    • If you have more than one import rule, the second written rule takes precedence over the previous ones

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyles
{
    @import DesignSystem1;
    @import DesignSystem2.tokens;
    @import "../my_file.css";

    .class1
    {
        //Properties...
    }
}

DsoExample.css (generated css - Java, .NET, .NET Core)

@import "DesignSystem1.css";
@import "DesignSystem2_Tokens.css";
@import "../my_file.css";
@import "DsoExample_Tokens.css";

.class1
{
    //Properties...
}

Include

The include rule allows from a class or css selector, to include another defined class.

Sintaxis

@include <class_name> [ <class_name_i >] *;

Restrictions

  • This rule cannot be used within an @Media rule
  • This rule does not support for generation, classes defined in another DSO or css imported through the @import rule

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyle
{
    .class1
    {
        background-color: red;
    }
    .newClass
    {
        @include class1;
        position: fixed;
    }
}

DsoExample.css (generated css - Java, .NET, .NET Core)

.class1
{
    background-color: red;
}
.newClass
{
    background-color: red;
    position: fixed;
}

 

Media

This rule allows you to create media in your DSO to achieve responsive displays.

A Media rule encapsulates a set of classes which take that value if the conditions specified in the media header are met.

Syntax

There are two ways to create the media header in a style:

As in CSS:

@media [ not|only]  <media_type> and <media_feature> [and|or|not <media_feature>]* 

Using token:

@media $mediaQueries.SmallSize

Assuming a token header is used, the syntax for the entire rule is as follows:

@media $mediaQueries.SmallSize
{
    .class1
    {
        //Properties...
    }
    //More classes....
}

Restrictions

  • The heads cannot be combined, that is, either you have one made up of a single token, or you have one made up of the rule as in css.

Sample

styles myStyles
{
   .class1
   {
        //Properties...
   }

   @media $mediaQueries.SmallSize 
   { 
       .class1 
       { 
           //Properties... 
       } 
       .class2
       {
           //Properties...
       }
       //More classes.... 
   }
   @media print and (min-width: 30em) and (orientation: landscape)
   {
        .class1
        {
           //Properties...
        }
        .class3
        {
           //Properties...
        }
        //More classes....
   }
   //More classes.... 
}

 

Gx-Image()

Gx-Image is a rule that can be used in any property of a class or selector of styles.

With this rule, an Image object is accessed and placed in a property.

Sintaxis

gx-image(<my-image>);

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyle
{
    .class1
    {
        background-image: gx-image(myImage);
    }
}

Gx-File()

Gx-File is a rule that can be used in any property of a class or selector of styles.

With this rule, a File object is accessed and placed in a property.

Syntax

gx-file(<my-file>);

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyle
{
    .class1
    {
        background-image: gx-file(myImageAsFile);
    }
    @font-face
    {
        font-family: TestFont;
        src: gx-file(MyFont);
    }
}

Token reference

A token reference is an indirection to a token defined in the same design system or in an imported one.

Syntax

$<token-group>.<token-name>;

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyle
{
    .class1
    {
        background-image: $colors.primary;
    }
}

Font face

The font face rule is used in css to define fonts in a custom way. With this rule you can define a new font family and then use it both in the tokens and in the styles of the DSO.

Syntax

@font-face   
{ 
    font-family: <name>;         //Required - Indicates the name of the font you are defining
    src: <origen> (,<origin>)*;    //Required - Indicates the origin of the font, which can be a URL or a gx-file()
    (font-weight: <weight>);         //Optional - Defines how bold is the font 
                                   //(Options: normal, bold, 100, 200, ... , 900)
    (font-style: <style>);        //Optional - Defines the style font. (Options: normal, italic, oblique)
    (font-stretch: <separation>)   //Optional - Defines separation of the font 
                                   //(Options: normal, condensed, ultra-condensed, extra-condensed, 
                                   // semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded)
}

Sample

DsoExample - Styles (object design system -> part Styles)

styles myStyle
{
    @font-face
    {
        font-family: TestFont;
        src: gx-file(MyFont);
    }

    .class1
    {
        font-family: TestFont;
    }
}