@siemens/element-theme 51.0.0-rc.4 → 51.0.0-rc.6

package/src/styles/bootstrap/forms/_form-check.scss

@@ -1,4 +1,5 @@
 @use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
 @use '../functions';
 @use '../variables';
@@ -42,24 +43,22 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 %form-check-base {
   position: relative;
   appearance: none;
-  background-color: semantic-tokens.$element-base-1;
-  border: 1px solid semantic-tokens.$element-ui-1;
+  background-color: system-tokens.$si-sys-background-1;
+  border: 1px solid system-tokens.$si-sys-border-2;
   flex-shrink: 0;
   float: inline-start;
 
   &:is(:hover, .hover) {
-    border-color: semantic-tokens.$element-ui-1;
-    background: semantic-tokens.$element-base-1-hover;
+    background: system-tokens.$si-sys-background-hover;
   }
 
   &:is(:active, .active) {
-    border-color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-primary-active;
+    background: system-tokens.$si-sys-background-selected;
   }
 
   &:is([disabled], .disabled) {
-    border-color: semantic-tokens.$element-ui-3;
-    background-color: semantic-tokens.$element-ui-5;
+    border-color: system-tokens.$si-sys-text-disabled;
+    background-color: transparent;
   }
 }
 
@@ -80,60 +79,40 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     opacity: 0;
   }
 
-  &:is(:checked, .checked) {
-    background-color: semantic-tokens.$element-action-primary;
-    border-color: semantic-tokens.$element-action-primary;
+  &:is(:checked, .checked, :indeterminate) {
+    background-color: system-tokens.$si-sys-background-accent;
+    border-color: transparent;
 
     &:hover {
-      background-color: semantic-tokens.$element-action-primary-hover;
-      border-color: semantic-tokens.$element-action-primary-hover;
+      background-color: system-tokens.$si-sys-background-accent-hover;
+      border-color: transparent;
     }
 
     &:active {
-      background-color: semantic-tokens.$element-action-primary-active;
-      border-color: semantic-tokens.$element-action-primary-active;
+      background-color: system-tokens.$si-sys-background-accent-active;
+      border-color: transparent;
     }
 
     &::after {
-      background-color: semantic-tokens.$element-text-inverse;
+      background-color: system-tokens.$si-sys-text-on-accent;
       opacity: 1;
     }
 
     &[disabled] {
-      background-color: semantic-tokens.$element-ui-3;
-      border-color: semantic-tokens.$element-ui-3;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 
   &:indeterminate {
-    background-color: semantic-tokens.$element-base-1;
-    border-color: semantic-tokens.$element-action-primary;
-
     &::after {
       mask-image: none;
-      background-color: semantic-tokens.$element-action-primary;
       inline-size: 0.625rem;
       block-size: 0.125rem;
       opacity: 1;
       inset-inline-start: 0.125rem;
       inset-block-start: 0.375rem;
     }
-
-    &:hover {
-      border-color: semantic-tokens.$element-action-primary-hover;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-hover;
-      }
-    }
-
-    &:disabled {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
-    }
   }
 }
 
@@ -155,36 +134,27 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &:checked {
-    border-color: semantic-tokens.$element-action-primary;
-    background-color: semantic-tokens.$element-action-primary;
+    border-color: transparent;
+    background-color: system-tokens.$si-sys-background-accent;
 
     &::after {
-      background-color: semantic-tokens.$element-action-primary-text;
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-on-accent;
     }
 
     &:hover {
-      background-color: semantic-tokens.$element-action-primary-hover;
-      border-color: semantic-tokens.$element-action-primary-hover;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-background-accent-hover;
     }
 
     &:active {
-      border-color: semantic-tokens.$element-action-primary-active;
-
-      &::after {
-        background-color: semantic-tokens.$element-action-primary-text;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-border-accent-active;
     }
 
     &[disabled] {
-      border-color: semantic-tokens.$element-ui-3;
-
-      &::after {
-        background-color: semantic-tokens.$element-ui-3;
-      }
+      border-color: transparent;
+      background-color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -193,7 +163,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   display: inline-block;
   position: relative;
   padding-inline-end: $form-check-padding-x;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
 }
 
 .form-check-input {
@@ -204,7 +174,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
   }
 
   &[disabled] ~ .form-check-label {
-    color: semantic-tokens.$element-text-disabled;
+    color: system-tokens.$si-sys-text-disabled;
   }
 
   &:is([type='checkbox'], .si-form-checkbox) {
@@ -239,7 +209,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
     + .btn {
       pointer-events: none;
       filter: none;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -271,7 +241,7 @@ formly-field-multicheckbox {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }
@@ -286,7 +256,7 @@ formly-field-radio {
     }
 
     &[disabled] ~ label {
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
   }
 }

package/src/styles/bootstrap/forms/_form-control.scss

@@ -1,5 +1,5 @@
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../../variables/spacers';
 @use '../../variables/utilities';
 @use '../../variables/si-vars';
@@ -8,8 +8,8 @@
 @use 'sass:map';
 
 :is(.form-control, .form-select) {
-  --border-color: #{semantic-tokens.$element-ui-2};
-  --si-textarea-mask: #{semantic-tokens.$element-base-1};
+  --border-color: #{system-tokens.$si-sys-border-2};
+  --si-textarea-mask: #{system-tokens.$si-sys-background-1};
   // Formula:
   // (1.25rem / 0px) (feedback icon size)
   // + (action-size / 0px) (action-offset includes a padding)
@@ -27,8 +27,8 @@
   font-size: variables.$input-font-size;
   font-weight: variables.$input-font-weight;
   line-height: variables.$input-line-height;
-  color: semantic-tokens.$element-text-primary;
-  background-color: semantic-tokens.$element-base-1;
+  color: system-tokens.$si-sys-text-primary;
+  background-color: system-tokens.$si-sys-background-1;
   background-clip: padding-box;
   border: variables.$input-border-width solid var(--border-color);
   border-radius: variables.$input-border-radius;
@@ -65,32 +65,32 @@
   }
 
   &:autofill {
-    background: semantic-tokens.$element-base-information;
+    background: system-tokens.$si-sys-background-information-subtle;
   }
 
   &:is(:focus, :hover, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-    --border-color: #{semantic-tokens.$element-ui-1};
-    --si-textarea-mask: #{semantic-tokens.$element-base-input-experimental};
-    background-color: semantic-tokens.$element-base-input-experimental;
+    --border-color: #{system-tokens.$si-sys-border-1};
+    --si-textarea-mask: #{system-tokens.$si-sys-background-4};
+    background-color: system-tokens.$si-sys-background-4;
   }
 
   &:is(.readonly, [readonly]) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-primary;
+      color: system-tokens.$si-sys-text-primary;
     }
   }
 
   &:is(.disabled, :disabled) {
     &,
     &:is(:hover, :focus, :has(+ .form-control-actions:is(:hover, :focus-within))) {
-      --border-color: #{semantic-tokens.$element-ui-4};
+      --border-color: #{system-tokens.$si-sys-border-4};
       --si-textarea-mask: transparent;
       background-color: transparent;
-      color: semantic-tokens.$element-text-disabled;
+      color: system-tokens.$si-sys-text-disabled;
     }
 
     &::placeholder {
@@ -216,7 +216,7 @@ select:is(.form-control, .form-select)[multiple] {
 
   option:checked,
   &:not(:disabled) option:not(:disabled):hover {
-    background: semantic-tokens.$element-base-0;
-    color: semantic-tokens.$element-text-active;
+    background: system-tokens.$si-sys-background-0;
+    color: system-tokens.$si-sys-text-accent;
   }
 }

package/src/styles/bootstrap/forms/_form-file.scss

@@ -1,4 +1,4 @@
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 @use '../variables';
 
 .form-control {
@@ -11,8 +11,8 @@
   }
 
   &::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text;
-    background: semantic-tokens.$element-action-secondary;
+    color: system-tokens.$si-sys-text-on-accent-secondary;
+    background: system-tokens.$si-sys-background-accent-secondary;
     border-color: inherit;
     border-block-width: 0;
     border-inline-width: 0 1px;
@@ -23,12 +23,12 @@
   }
 
   &:hover::file-selector-button {
-    color: semantic-tokens.$element-action-secondary-text-hover;
-    background: semantic-tokens.$element-action-secondary-hover;
+    color: system-tokens.$si-sys-text-on-accent-secondary-hover;
+    background: system-tokens.$si-sys-background-accent-secondary-hover;
   }
 
   &:active::file-selector-button {
-    color: semantic-tokens.$element-action-primary-active;
-    background: semantic-tokens.$element-action-secondary-active;
+    color: system-tokens.$si-sys-text-on-accent-secondary-active;
+    background: system-tokens.$si-sys-background-accent-secondary-active;
   }
 }

package/src/styles/bootstrap/forms/_form-range.scss

@@ -1,8 +1,8 @@
 @use '../../variables/elevation';
 @use '../../variables/focus';
-@use '../../variables/semantic-tokens';
+@use '../../variables/system-tokens';
 
-$track-color: semantic-tokens.$element-ui-4 !default;
+$track-color: system-tokens.$si-sys-border-4 !default;
 $track-height: 4px !default;
 $thumb-size: 24px !default;
 
@@ -15,36 +15,36 @@ $thumb-size: 24px !default;
 
 @mixin range-thumb {
   box-shadow: var(--thumb-shadow);
-  border: 1px solid semantic-tokens.$element-action-secondary-border;
+  border: 1px solid system-tokens.$si-sys-border-accent;
   block-size: $thumb-size;
   inline-size: $thumb-size;
   border-radius: 50%;
-  background: semantic-tokens.$element-base-1;
+  background: system-tokens.$si-sys-background-1;
   cursor: pointer;
 
   &:hover {
-    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    border-color: system-tokens.$si-sys-border-accent-hover;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-secondary-text-hover 0%,
-      semantic-tokens.$element-action-secondary-text-hover 35%,
-      semantic-tokens.$element-action-secondary-hover 36%
+      system-tokens.$si-sys-text-accent-hover 0%,
+      system-tokens.$si-sys-text-accent-hover 35%,
+      system-tokens.$si-sys-background-accent-secondary-hover 36%
     );
   }
 
   &:active {
-    border-color: semantic-tokens.$element-action-primary-active;
+    border-color: system-tokens.$si-sys-border-accent-active;
     background: radial-gradient(
       circle,
-      semantic-tokens.$element-action-primary-active 0%,
-      semantic-tokens.$element-action-primary-active 35%,
-      semantic-tokens.$element-action-secondary-active 36%
+      system-tokens.$si-sys-background-accent-active 0%,
+      system-tokens.$si-sys-background-accent-active 35%,
+      system-tokens.$si-sys-background-accent-secondary-active 36%
     );
   }
 }
 
 .form-range {
-  --thumb-shadow: #{elevation.$element-elevation-1};
+  --thumb-shadow: #{system-tokens.$si-sys-effects-shadow-2};
   -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   background: transparent;
   inline-size: 100%;

package/src/styles/components/_application-header.scss

@@ -1,7 +1,8 @@
 @use '../bootstrap/mixins/breakpoints';
 @use '../bootstrap/variables' as bootstrap-variables;
-@use '../variables';
+@use '../variables/si-vars';
 @use '../variables/elevation';
+@use '../variables/system-tokens';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
@@ -12,8 +13,8 @@
 .has-application-header,
 .has-navbar-fixed-top {
   padding-block-start: calc(
-    variables.$si-application-header-height + variables.$si-titlebar-spacing +
-      variables.$si-system-banner-spacing
+    si-vars.$si-application-header-height + si-vars.$si-titlebar-spacing +
+      si-vars.$si-system-banner-spacing
   );
 }
 
@@ -26,10 +27,10 @@
     var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)
   );
   z-index: zindex.$zindex-application-header;
-  background: semantic-tokens.$element-base-1;
-  min-block-size: variables.$si-application-header-height;
+  background: system-tokens.$si-sys-background-1;
+  min-block-size: si-vars.$si-application-header-height;
   align-items: stretch;
-  border-block-end: 1px solid semantic-tokens.$element-ui-4;
+  border-block-end: 1px solid system-tokens.$si-sys-border-4;
 
   // hide border when mobile styles are applied and either the dropdown-menu is shown or navigation is expanded
   &:has(.dropdown-menu.show),
@@ -42,7 +43,7 @@
     order: 2;
     flex-basis: 100%;
     box-shadow: none;
-    border-block-start: 1px solid semantic-tokens.$element-ui-4;
+    border-block-start: 1px solid system-tokens.$si-sys-border-4;
     margin-block: 0;
     border-radius: 0;
   }
@@ -94,7 +95,7 @@
   display: flex;
   flex-flow: column;
   padding-block: map.get(spacers.$spacers, 4);
-  border-block-start: 1px solid semantic-tokens.$element-ui-4;
+  border-block-start: 1px solid system-tokens.$si-sys-border-4;
 }
 
 .header-navigation {
@@ -106,13 +107,13 @@
 
   .header-item {
     &.active {
-      --si-header-item-border: #{semantic-tokens.$element-action-primary};
-      color: semantic-tokens.$element-action-primary;
+      --si-header-item-border: #{system-tokens.$si-sys-border-accent};
+      color: system-tokens.$si-sys-text-accent;
     }
 
     &:hover {
-      --si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
-      color: semantic-tokens.$element-action-primary-hover;
+      --si-header-item-border: #{system-tokens.$si-sys-border-accent-hover};
+      color: system-tokens.$si-sys-text-accent-hover;
     }
   }
 }
@@ -130,13 +131,13 @@
 }
 
 .header-toggle {
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   border: 0;
   padding: map.get(spacers.$spacers, 5);
   background-color: transparent; // remove default button style
 
   &:is(:hover, .show, :active) {
-    background: semantic-tokens.$element-base-1-hover;
+    background: system-tokens.$si-sys-background-hover;
     text-decoration: none;
   }
 }
@@ -147,20 +148,20 @@
   flex-basis: 0;
   align-items: center;
   position: relative;
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
   inline-size: 100%;
   font-size: typography.$si-font-size-h4;
   line-height: typography.$si-line-height-h4;
   font-weight: typography.$si-font-weight-h4;
-  padding-block: 13px;
+  padding-block: map.get(spacers.$spacers, 5);
   padding-inline: map.get(spacers.$spacers, 5);
   background: none;
   box-shadow: none;
   border: 0;
   white-space: nowrap;
 
-  .icon-lg {
-    margin-block: -3px;
+  .icon {
+    margin-block: -0.125rem;
 
     ~ .item-title {
       padding-inline-start: map.get(spacers.$spacers, 5);
@@ -176,8 +177,8 @@
   }
 
   &:hover {
-    color: semantic-tokens.$element-text-primary;
-    background-color: semantic-tokens.$element-base-1-hover;
+    color: system-tokens.$si-sys-text-primary;
+    background-color: system-tokens.$si-sys-background-hover;
     text-decoration: none;
   }
 
@@ -193,13 +194,13 @@
   }
 
   &.header-selection-item {
-    color: semantic-tokens.$element-action-secondary-text;
+    color: system-tokens.$si-sys-text-accent;
     font-size: typography.$si-font-size-h5;
     font-weight: typography.$si-font-weight-h5;
     line-height: typography.$si-line-height-h5;
 
     &:hover {
-      color: semantic-tokens.$element-action-secondary-text-hover;
+      color: system-tokens.$si-sys-text-accent-hover;
     }
   }
 }

package/src/styles/components/_datatable.scss

@@ -4,6 +4,7 @@
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use '../variables/utilities';
 
@@ -11,10 +12,10 @@
 
 $datatable-header-border-color: variables.$table-border-color !default;
 $datatable-header-background-color: variables.$table-bg !default;
-$datatable-header-color: semantic-tokens.$element-text-primary !default;
+$datatable-header-color: system-tokens.$si-sys-text-primary !default;
 $datatable-footer-background-color: transparent !default;
 
-$datatable-summary-background-color: semantic-tokens.$element-base-4 !default;
+$datatable-summary-background-color: system-tokens.$si-sys-background-2 !default;
 
 $datatable-header-height: 40px !default;
 $datatable-cell-min-width: 40px !default;
@@ -22,12 +23,12 @@ $datatable-body-row-min-height: 48px !default;
 
 $datatable-ghost-cell-container-background: variables.$table-bg !default;
 
-$datatable-ghost-cell-strip-background: semantic-tokens.$element-base-1-hover !default;
+$datatable-ghost-cell-strip-background: system-tokens.$si-sys-background-hover !default;
 $datatable-ghost-cell-strip-background-image: linear-gradient(
   90deg,
-  semantic-tokens.$element-base-1-hover 0%,
-  semantic-tokens.$element-base-1-selected 25%,
-  semantic-tokens.$element-base-1-hover 50%
+  system-tokens.$si-sys-background-hover 0%,
+  system-tokens.$si-sys-background-selected 25%,
+  system-tokens.$si-sys-background-hover 50%
 ) !default;
 $datatable-ghost-cell-strip-radius: 0 !default;
 
@@ -189,7 +190,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-row-left {
         .datatable-body-cell:last-child,
         .datatable-header-cell:last-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          box-shadow: 0 0 8px system-tokens.$si-sys-effects-shadow-1;
           clip-path: inset(0 -8px 0 0);
         }
       }
@@ -197,7 +198,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
       .datatable-row-right {
         .datatable-body-cell:first-child,
         .datatable-header-cell:first-child {
-          box-shadow: 0 0 8px var(--element-box-shadow-color-1);
+          box-shadow: 0 0 8px system-tokens.$si-sys-effects-shadow-1;
           clip-path: inset(0 0 0 -8px);
         }
       }
@@ -224,7 +225,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     // Resizable handle
     .resizeable:hover {
       .resize-handle {
-        background-color: semantic-tokens.$element-base-0;
+        background-color: system-tokens.$si-sys-background-0;
         inline-size: 2px;
         border-radius: 2px;
         padding-block: 0;
@@ -246,7 +247,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
 
     .datatable-header-cell:focus-visible {
-      @include focus.make-outline-focus();
+      @include focus.make-outline-focus-inside();
     }
   }
 
@@ -322,7 +323,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     align-items: flex-end;
     align-content: flex-end;
     background-color: $datatable-footer-background-color;
-    color: semantic-tokens.$element-text-secondary;
+    color: system-tokens.$si-sys-text-secondary;
     font-size: typography.$si-font-size-caption;
     margin-block-start: -1px;
     position: relative;
@@ -341,7 +342,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         inset-inline-start: 0;
         inline-size: 100%;
         block-size: 1px;
-        background-color: var(--element-base-0);
+        background-color: system-tokens.$si-sys-background-0;
       }
     }
   }

package/src/styles/components/_drag_drop.scss

@@ -22,7 +22,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-preview {
-  background-color: variables.$element-base-3 !important;
+  background-color: variables.$si-sys-background-3 !important;
   box-shadow: variables.$element-elevation-2 !important;
   position: relative !important;
   inset-inline-start: -5px !important;
@@ -36,7 +36,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 }
 
 .cdk-drag-handle {
-  color: variables.$element-ui-2;
+  color: variables.$si-sys-text-secondary;
 }
 
 .cdk-drag-disabled {
@@ -70,7 +70,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 
 .cdk-drop-list:not([cdkDropListHasAnchor]) .cdk-drag-placeholder {
   opacity: 0.3;
-  background-color: variables.$element-base-information !important;
+  background-color: variables.$si-sys-background-information-subtle !important;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   min-block-size: 45px;
   font-size: 0; // hide direct text
@@ -92,7 +92,7 @@ body:has(.cdk-drag-preview, .ui-draggable-dragging) {
 
 .droppable-container {
   &.drop-border {
-    border: 1px dashed variables.$element-ui-2;
+    border: 1px dashed variables.$si-sys-border-2;
   }
 
   .cdk-drag-placeholder {

package/src/styles/components/_layout.scss

@@ -51,6 +51,11 @@
 .si-layout-title {
   grid-area: title;
   margin-block-end: 0;
+  @include variables.si-font(
+    variables.$si-font-size-h3,
+    variables.$si-line-height-h3,
+    variables.$si-font-weight-h3
+  );
 
   &.si-layout-top-element + .si-layout-subtitle {
     margin-inline: var(--si-layout-header-first-element-offset, 0)
@@ -62,7 +67,7 @@
   grid-area: subtitle;
   margin-block-start: map.get(variables.$spacers, 4);
   margin-block-end: 0;
-  color: variables.$element-text-secondary;
+  color: variables.$si-sys-text-secondary;
   @include variables.si-font(
     variables.$si-font-size-body,
     variables.$si-line-height-body,
@@ -82,6 +87,14 @@
       4
     ) !important; // stylelint-disable-line declaration-no-important
   }
+
+  .si-layout-title {
+    @include variables.si-font(
+      variables.$si-font-size-h2,
+      variables.$si-line-height-h2,
+      variables.$si-font-weight-h2
+    );
+  }
 }
 
 @include breakpoints.media-breakpoint-up(md) {