Design System Style Rules

There’s a set of rules (beginning with the @ sign) that you can use for structuring Styles. They let you: 

• Compose classes  

For example, declare that the H1 class consists of the style of the H1_Negative and Margin-Sides classes, in addition to the specific properties defined for it (only color here):

.H1
      {
          @include H1_Negative Margin-Sides;
          color: $colors.Black;
      }

See Include style rule.

• Import Tokens or styles (or both) from other Design System Objects.

For example, declare that you are going to import both Tokens and Styles from the DSO named TravelAgency into the current one:

styles TravelAgencyFrontendExtended
{
    @import TravelAgency;
}

See Import style rule.

• Vary the style of a class according to the screen size. 

For example, when the screen width is less than 768px, the H1_Negative class has a font-size of 26px: 

@media screen and (max-width:767px)
{
    .H1_Negative {
        font-size: 26px;
    }
}

Note that this relates precisely to CSS Media Queries. 

See Media style rule.

• Apply styles based on browser feature support

The Supports rule is a CSS grouping rule that applies styles only if the browser supports a specific CSS feature.

For example, apply styles to the H1_Negative class only if CSS Grid is supported:

@supports (display: grid)
{
    .H1_Negative {
        display: grid;
    }
}

See @supports for more information.

• Apply styles based on container size or properties

The Container rule is a CSS grouping rule that applies styles based on the size or properties of a container.

For example, when the container width is less than 600px, the H1_Negative class uses a smaller font size:

@container (max-width: 600px)
{
    .H1_Negative {
        font-size: 14px;
    }
}

For more information, see @container.

• Limit the scope where styles apply

The Scope rule is a CSS grouping rule that limits where styles apply.

For example, apply styles to the H1_Negative class only inside elements that match the .Panel selector:

@scope (.Panel)
{
    .H1_Negative {
        font-weight: bold;
    }
}

For more information, see @scope.

• Control the priority of styles

The Layer rule is a CSS grouping rule that allows controlling the priority of styles.

For example, define styles for the H1_Negative class inside a specific layer:

@layer components
{
    .H1_Negative {
        padding: 8px;
    }
}

For more information, see @layer.

• Incorporate a non-default source

For example, to use the AbhayaLibre-bold family, which is not a default font, in some token or class.

@font-face
{
    font-family: AbhayaLibre-Bold; 
    src: gx-file(AbhayaLibre-Bold_ttf);
}
.H1_Negative
{
    color: #FFFFFF;
    font-size: $fontSizes.H1;
    font-family: AbhayaLibre-Bold;
}

See Font-face style rule.