@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/element-theme",
-  "version": "51.0.0-rc.7",
+  "version": "51.0.0-rc.8",
   "description": "Element CSS theme.",
   "license": "MIT",
   "repository": {

package/src/styles/_density.scss

@@ -0,0 +1,144 @@
+@use 'selectors';
+@use 'variables/typography';
+
+@mixin define-spacer($spacer, $block-size, $inline-size) {
+  --si-sys-sizing-spacing-y-#{$spacer}: #{$block-size};
+  --si-sys-sizing-spacing-x-#{$spacer}: #{$inline-size};
+}
+
+@mixin define-font($name, $font-size, $line-height) {
+  --si-sys-typography-font-size-#{$name}: #{typography.px-to-rem($font-size)};
+  --si-sys-typography-line-height-#{$name}: #{typography.px-to-ratio($font-size, $line-height)};
+}
+
+@mixin define-sizing($name, $size) {
+  --si-sys-sizing-sizing-#{$name}: #{$size};
+}
+
+@mixin define-icon-size($name, $size) {
+  --si-sys-sizing-icon-#{$name}: #{typography.px-to-rem($size)};
+}
+
+#{selectors.$root} {
+  @include define-spacer(10, 2px, 2px);
+  @include define-spacer(20, 4px, 4px);
+  @include define-spacer(30, 6px, 6px);
+  @include define-spacer(40, 8px, 8px);
+  @include define-spacer(50, 12px, 12px);
+  @include define-spacer(60, 16px, 16px);
+  @include define-spacer(70, 20px, 20px);
+  @include define-spacer(80, 24px, 24px);
+  @include define-spacer(90, 32px, 32px);
+  @include define-spacer(100, 40px, 40px);
+  @include define-spacer(110, 48px, 48px);
+  @include define-spacer(120, 56px, 56px);
+  @include define-spacer(130, 64px, 64px);
+  @include define-spacer(140, 96px, 96px);
+
+  @include define-font(body-sm, 12px, 16px);
+  @include define-font(body, 14px, 16px);
+  @include define-font(body-lg, 16px, 20px);
+  @include define-font(body-paragraph, 14px, 20px);
+  @include define-font(h1, 28px, 36px);
+  @include define-font(h2, 24px, 32px);
+  @include define-font(h3, 20px, 24px);
+  @include define-font(h4, 16px, 20px);
+  @include define-font(h5, 14px, 20px);
+  @include define-font(h6, 12px, 16px);
+  @include define-font(display, 32px, 40px);
+  @include define-font(display-lg, 40px, 52px);
+  @include define-font(display-xl, 48px, 64px);
+  @include define-font(display-xxl, 58px, 72px);
+  @include define-font(code-sm, 12px, 16px);
+  @include define-font(code, 14px, 20px);
+  @include define-font(code-lg, 16px, 20px);
+
+  @include define-sizing(10, 2px);
+  @include define-sizing(20, 4px);
+  @include define-sizing(30, 8px);
+  @include define-sizing(40, 12px);
+  @include define-sizing(50, 16px);
+  @include define-sizing(60, 20px);
+  @include define-sizing(70, 24px);
+  @include define-sizing(80, 32px);
+  @include define-sizing(90, 40px);
+  @include define-sizing(100, 48px);
+  @include define-sizing(110, 64px);
+  @include define-sizing(120, 80px);
+  @include define-sizing(130, 96px);
+  @include define-sizing(140, 120px);
+  @include define-sizing(150, 160px);
+  @include define-sizing(160, 240px);
+  @include define-sizing(170, 320px);
+  @include define-sizing(180, 480px);
+  @include define-sizing(190, 600px);
+  @include define-sizing(200, 720px);
+
+  @include define-icon-size(sm, 16px);
+  @include define-icon-size(md, 20px);
+  @include define-icon-size(lg, 24px);
+  @include define-icon-size(xl, 32px);
+  @include define-icon-size(xxl, 48px);
+}
+
+.density-compact {
+  @include define-spacer(10, 2px, 2px);
+  @include define-spacer(20, 2px, 2px);
+  @include define-spacer(30, 4px, 4px);
+  @include define-spacer(40, 6px, 6px);
+  @include define-spacer(50, 8px, 8px);
+  @include define-spacer(60, 12px, 12px);
+  @include define-spacer(70, 16px, 16px);
+  @include define-spacer(80, 20px, 20px);
+  @include define-spacer(90, 24px, 24px);
+  @include define-spacer(100, 32px, 32px);
+  @include define-spacer(110, 40px, 40px);
+  @include define-spacer(120, 48px, 48px);
+  @include define-spacer(130, 64px, 64px);
+  @include define-spacer(140, 80px, 80px);
+
+  @include define-font(body-sm, 10px, 12px);
+  @include define-font(body, 12px, 14px);
+  @include define-font(body-lg, 14px, 16px);
+  @include define-font(body-paragraph, 12px, 16px);
+  @include define-font(h1, 24px, 28px);
+  @include define-font(h2, 20px, 24px);
+  @include define-font(h3, 16px, 18px);
+  @include define-font(h4, 14px, 16px);
+  @include define-font(h5, 14px, 16px);
+  @include define-font(h6, 12px, 16px);
+  @include define-font(display, 28px, 32px);
+  @include define-font(display-lg, 32px, 40px);
+  @include define-font(display-xl, 40px, 48px);
+  @include define-font(display-xxl, 48px, 56px);
+  @include define-font(code-sm, 12px, 16px);
+  @include define-font(code, 14px, 20px);
+  @include define-font(code-lg, 16px, 20px);
+
+  @include define-sizing(10, 2px);
+  @include define-sizing(20, 2px);
+  @include define-sizing(30, 4px);
+  @include define-sizing(40, 8px);
+  @include define-sizing(50, 12px);
+  @include define-sizing(60, 16px);
+  @include define-sizing(70, 20px);
+  @include define-sizing(80, 24px);
+  @include define-sizing(90, 32px);
+  @include define-sizing(100, 40px);
+  @include define-sizing(110, 48px);
+  @include define-sizing(120, 64px);
+  @include define-sizing(130, 80px);
+  @include define-sizing(140, 96px);
+  @include define-sizing(150, 120px);
+  @include define-sizing(160, 160px);
+  @include define-sizing(170, 240px);
+  @include define-sizing(180, 320px);
+  @include define-sizing(190, 480px);
+  @include define-sizing(200, 600px);
+
+  @include define-icon-size(sm, 12px);
+  @include define-icon-size(md, 16px);
+  @include define-icon-size(lg, 20px);
+  @include define-icon-size(xl, 24px);
+  @include define-icon-size(xxl, 32px);
+}

package/src/styles/_utilities.scss

@@ -0,0 +1,5 @@
+@use 'mixins/utilities';
+
+@include utilities.background-utilities();
+@include utilities.text-utilities();
+@include utilities.border-utilities();

package/src/styles/_variables.scss

@@ -6,6 +6,7 @@
 @forward './variables/elevation';
 @forward './variables/focus';
 @forward './variables/spacers';
+@forward './variables/sizing';
 @forward './variables/zindex';
 @forward './variables/layout';
 @forward './variables/si-vars';

package/src/styles/bootstrap/_badges.scss

@@ -19,7 +19,7 @@
   padding-block: variables.$badge-padding-y;
   padding-inline: variables.$badge-padding-x;
   margin-block: 0;
-  margin-inline: map.get(spacers.$spacers, 4);
+  margin-inline: map.get(spacers.$spacers-inline, 4);
   line-height: variables.$badge-line-height;
   flex-shrink: 0;
   font-size: typography.$si-font-size-body;
@@ -130,8 +130,8 @@
   &:has(> .icon) {
     display: inline-flex;
     align-items: center;
-    gap: map.get(spacers.$spacers, 1);
-    padding-inline: map.get(spacers.$spacers, 2) variables.$badge-padding-x;
+    gap: map.get(spacers.$spacers-block, 1) map.get(spacers.$spacers-inline, 1);
+    padding-inline: map.get(spacers.$spacers-inline, 2) variables.$badge-padding-x;
   }
 }
 

package/src/styles/bootstrap/_button-group.scss

@@ -69,7 +69,7 @@
   .btn.dropdown-toggle {
     aspect-ratio: 0;
     padding-block: 0;
-    padding-inline: calc(map.get(spacers.$spacers, 1) - var(--btn-border-width, 0px));
+    padding-inline: calc(map.get(spacers.$spacers-inline, 1) - var(--btn-border-width, 0px));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 
@@ -97,14 +97,14 @@
 
     &.btn-icon {
       inline-size: auto;
-      padding-inline: map.get(spacers.$spacers, 5) - 1px;
+      padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px);
     }
 
     // @deprecated Will be removed in a future major version, use .btn-icon instead.
     &.icon-only {
       inline-size: auto;
       min-inline-size: unset;
-      padding-inline: map.get(spacers.$spacers, 5) - 1px;
+      padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px);
 
       .icon {
         margin-inline: 0;

package/src/styles/bootstrap/_buttons.scss

@@ -19,7 +19,7 @@ button {
 :is(.btn, .btn-close) {
   --btn-icon-size: #{$btn-icon-font-size};
   --btn-font-size: #{bootstrap-variables.$btn-font-size};
-  --btn-font-weight: #{typography.$si-font-weight-semibold};
+  --btn-font-weight: #{typography.$si-font-weight-sbold};
   --btn-line-height: #{bootstrap-variables.$btn-line-height};
   --btn-padding-y: #{bootstrap-variables.$btn-padding-y};
   line-height: var(--btn-line-height);
@@ -65,7 +65,7 @@ button {
   .icon {
     font-size: var(--btn-icon-size);
     margin-block: calc((var(--btn-icon-size) - var(--btn-font-size)) / -2);
-    margin-inline-end: #{map.get(spacers.$spacers, 2)};
+    margin-inline-end: #{map.get(spacers.$spacers-inline, 2)};
   }
 }
 
@@ -270,7 +270,6 @@ button {
   );
   padding-block: bootstrap-variables.$input-padding-y;
   padding-inline: bootstrap-variables.$input-padding-x;
-
   border-radius: bootstrap-variables.$input-border-radius;
   justify-content: flex-start;
 

package/src/styles/bootstrap/_card.scss

@@ -43,35 +43,42 @@
   }
 
   &.accent-primary {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-accent;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-accent;
   }
 
   &.accent-inactive {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-4;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid system-tokens.$si-sys-border-4;
   }
 
   &.accent-info {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-information;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-information;
   }
 
   &.accent-success {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-success;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-success;
   }
 
   &.accent-warning {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-warning;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-warning;
   }
 
   &.accent-caution {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-caution;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-caution;
   }
 
   &.accent-danger {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-danger;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-danger;
   }
 
   &.accent-critical {
-    border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-critical;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-critical;
   }
 
   &.action-card:not(:disabled) {
@@ -133,8 +140,8 @@ button.card {
 
   + * .card-body, // for action cards, where we wrap the content
   + .card-body {
-    margin-block-start: map.get(spacers.$spacers, 2) * -1;
-    padding-block-start: map.get(spacers.$spacers, 2);
+    margin-block-start: map.get(spacers.$negative-spacers-block, 2);
+    padding-block-start: map.get(spacers.$spacers-block, 2);
   }
 
   + .list-group {
@@ -167,7 +174,7 @@ button.card {
 }
 
 .card-subtitle {
-  margin-block: (-(variables.$card-title-spacer-y) * 0.5) 0;
+  margin-block: calc(variables.$card-title-spacer-y * -0.5) 0;
 }
 
 .card-text:last-child {

package/src/styles/bootstrap/_dropdowns.scss

@@ -19,7 +19,7 @@
   z-index: zindex.$zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-inline-size: bootstrap-variables.$dropdown-min-width;
-  max-block-size: calc(100vb - #{map.get(spacers.$spacers, 1) * 2});
+  max-block-size: calc(100vb - map.get(spacers.$spacers-block, 1) * 2);
   overflow-y: auto;
   padding-block: bootstrap-variables.$dropdown-padding-y;
   padding-inline: bootstrap-variables.$dropdown-padding-x;
@@ -29,7 +29,7 @@
   background-clip: padding-box;
   border-radius: bootstrap-variables.$dropdown-border-radius;
   box-shadow: bootstrap-variables.$dropdown-box-shadow;
-  margin-block: map.get(spacers.$spacers, 1);
+  margin-block: map.get(spacers.$spacers-block, 1);
   margin-inline: 0;
   text-align: start;
 
@@ -45,8 +45,8 @@
     100vb,
     calc(
       (
-          bootstrap-variables.$dropdown-line-height + #{2 *
-            bootstrap-variables.$dropdown-item-padding-y}
+          bootstrap-variables.$dropdown-line-height + 2 *
+            bootstrap-variables.$dropdown-item-padding-y
         ) *
         8.3125
     )
@@ -55,7 +55,7 @@
 
 :is(.dropdown-menu, .dropdown-item) {
   .icon + .item-title {
-    padding-inline-start: map.get(spacers.$spacers, 4);
+    padding-inline-start: map.get(spacers.$spacers-inline, 4);
   }
 }
 
@@ -64,13 +64,13 @@
   text-align: start;
 
   .dropdown-caret {
-    padding-inline-start: map.get(spacers.$spacers, 2);
-    margin-block: -#{map.get(spacers.$spacers, 2)};
-    margin-inline: auto -#{map.get(spacers.$spacers, 2)};
+    padding-inline-start: map.get(spacers.$spacers-inline, 2);
+    margin-block: map.get(spacers.$negative-spacers-block, 2);
+    margin-inline: auto map.get(spacers.$negative-spacers-inline, 2);
     font-size: variables.$si-icon-font-size !important; // stylelint-disable-line declaration-no-important
     transform: rotate(var(--caret-rotate));
     // adjust the origin to account for the negative margin. Otherwise the element would visually not rotate around the center.
-    transform-origin: calc(50% + #{map.get(spacers.$spacers, 1)}) 50%;
+    transform-origin: calc(50% + map.get(spacers.$spacers-inline, 1)) 50%;
     transition: transform variables.$si-caret-transition-duration;
   }
 
@@ -145,11 +145,11 @@
   }
 
   .menu-end-icon {
-    margin-inline-end: -1 * map.get(spacers.$spacers, 3);
+    margin-inline-end: map.get(spacers.$negative-spacers-inline, 3);
 
     &.element-record-filled {
       font-size: 1rem;
-      margin-inline-end: -1 * map.get(spacers.$spacers, 1);
+      margin-inline-end: map.get(spacers.$negative-spacers-inline, 1);
     }
   }
 }
@@ -181,7 +181,7 @@
 .dropdown-divider {
   block-size: 0;
   margin-block: bootstrap-variables.$dropdown-divider-margin-y;
-  margin-inline: map.get(spacers.$spacers, 5);
+  margin-inline: map.get(spacers.$spacers-inline, 5);
   overflow: hidden;
   border-block-start: 1px solid bootstrap-variables.$dropdown-divider-bg;
 }

package/src/styles/bootstrap/_images.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../variables/spacers';
 @use './mixins/image';
 @use './variables';
@@ -35,7 +36,7 @@
 }
 
 .figure-img {
-  margin-block-end: spacers.$spacer * 0.5;
+  margin-block-end: map.get(spacers.$spacers-block, 4);
   line-height: 1;
 }
 

package/src/styles/bootstrap/_modals.scss

@@ -67,7 +67,7 @@
 }
 
 .modal-dialog-scrollable {
-  block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+  block-size: calc(100% - (variables.$modal-dialog-margin * 2));
 
   .modal-content {
     max-block-size: 100%;
@@ -82,7 +82,7 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  min-block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+  min-block-size: calc(100% - (variables.$modal-dialog-margin * 2));
 }
 
 .modal-header {
@@ -97,7 +97,7 @@
 
   .icon {
     font-size: si-vars.$si-icon-font-size-lg;
-    margin-inline-end: map.get(spacers.$spacers, 4);
+    margin-inline-end: map.get(spacers.$spacers-inline, 4);
   }
 
   .modal-title {
@@ -141,7 +141,7 @@
   // Enable `flex-grow: 1` so that the body take up as much space as possible
   // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
-  padding-block: map.get(spacers.$spacers, 5) variables.$modal-inner-padding;
+  padding-block: map.get(spacers.$spacers-block, 5) variables.$modal-inner-padding;
   // use margin instead of padding so that the scrollbar isn't on the edge of the dialog
   margin-inline: variables.$modal-inner-padding;
   padding-inline: 0;
@@ -157,7 +157,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: (variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5);
+  padding: calc(variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5);
   border-end-start-radius: variables.$modal-content-inner-border-radius;
   border-end-end-radius: variables.$modal-content-inner-border-radius;
 
@@ -165,7 +165,7 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: (variables.$modal-footer-margin-between * 0.5);
+    margin: calc(variables.$modal-footer-margin-between * 0.5);
   }
 }
 
@@ -186,11 +186,11 @@
   }
 
   .modal-dialog-scrollable {
-    block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+    block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2));
   }
 
   .modal-dialog-centered {
-    min-block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+    min-block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2));
   }
 
   .modal-content {

package/src/styles/bootstrap/_pagination.scss

@@ -11,7 +11,7 @@ $page-button-size: 1.5rem;
 .pagination {
   display: flex;
   margin: 0;
-  padding-block: map.get(spacers.$spacers, 4);
+  padding-block: map.get(spacers.$spacers-block, 4);
   @include lists.list-unstyled();
 }
 
@@ -23,8 +23,8 @@ $page-button-size: 1.5rem;
   min-inline-size: $page-button-size;
   block-size: $page-button-size;
   padding-block: 0;
-  padding-inline: map.get(spacers.$spacers, 2);
-  margin-inline: map.get(spacers.$spacers, 1);
+  padding-inline: map.get(spacers.$spacers-inline, 2);
+  margin-inline: map.get(spacers.$spacers-inline, 1);
   background: transparent;
   font-size: typography.$si-font-size-h5;
   font-weight: typography.$si-font-weight-h5;

package/src/styles/bootstrap/_popovers.scss

@@ -74,7 +74,7 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg);
   }
 
   + .popover-body {
-    padding-block-start: map.get(spacers.$spacers, 4);
+    padding-block-start: map.get(spacers.$spacers-block, 4);
   }
 
   &:has(> .icon) {

package/src/styles/bootstrap/_reboot.scss

@@ -414,7 +414,7 @@ textarea {
 input,
 textarea {
   &:disabled {
-    color: variables.$text-muted;
+    color: variables.$text-disabled;
 
     &::placeholder {
       color: variables.$input-placeholder-disabled-color;

package/src/styles/bootstrap/_tables.scss

@@ -18,7 +18,7 @@
   --#{variables.$variable-prefix}table-hover-bg: #{variables.$table-hover-bg};
 
   inline-size: 100%;
-  margin-block-end: spacers.$spacer;
+  margin-block-end: map.get(spacers.$spacers-block, 6);
   color: variables.$table-color;
   vertical-align: variables.$table-cell-vertical-align;
   border-color: variables.$table-border-color;
@@ -55,17 +55,17 @@
     vertical-align: middle;
 
     &:first-child {
-      padding-inline-start: map.get(spacers.$spacers, 6);
+      padding-inline-start: map.get(spacers.$spacers-inline, 6);
     }
 
     &:last-child {
-      padding-inline-end: map.get(spacers.$spacers, 6);
+      padding-inline-end: map.get(spacers.$spacers-inline, 6);
     }
   }
 
   thead {
     border-width: 0;
-    border-block-end: map.get(spacers.$spacers, 2) solid variables.$table-border-color;
+    border-block-end: map.get(spacers.$spacers-block, 2) solid variables.$table-border-color;
 
     th {
       vertical-align: baseline;
@@ -96,7 +96,9 @@
     }
 
     :is(th, td) {
-      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 2) + 2 * map.get(spacers.$spacers, 5));
+      block-size: calc(
+        2lh + 2 * map.get(spacers.$spacers-block, 2) + 2 * map.get(spacers.$spacers-block, 5)
+      );
     }
   }
 }
@@ -118,7 +120,7 @@
 
   tbody {
     :is(th, td) {
-      block-size: calc(2lh + 2 * map.get(spacers.$spacers, 4));
+      block-size: calc(2lh + 2 * map.get(spacers.$spacers-block, 4));
     }
   }
 }

package/src/styles/bootstrap/_type.scss

@@ -93,7 +93,7 @@
 }
 
 .blockquote-footer {
-  margin-block: -(variables.$blockquote-margin-y) variables.$blockquote-margin-y;
+  margin-block: calc(variables.$blockquote-margin-y * -1) variables.$blockquote-margin-y;
   font-size: variables.$blockquote-footer-font-size;
   color: variables.$blockquote-footer-color;
 
@@ -194,6 +194,14 @@ h6,
   );
 }
 
+.si-body-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-lg-sbold,
+    typography.$si-line-height-body-lg-sbold,
+    typography.$si-font-weight-body-lg-sbold
+  );
+}
+
 .si-body {
   @include typography.si-font(
     typography.$si-font-size-body,
@@ -202,6 +210,14 @@ h6,
   );
 }
 
+.si-body-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sbold,
+    typography.$si-line-height-body-sbold,
+    typography.$si-font-weight-body-sbold
+  );
+}
+
 .si-body-paragraph {
   @include typography.si-font(
     typography.$si-font-size-body-paragraph,
@@ -210,6 +226,14 @@ h6,
   );
 }
 
+.si-body-paragraph-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-paragraph-sbold,
+    typography.$si-line-height-body-paragraph-sbold,
+    typography.$si-font-weight-body-paragraph-sbold
+  );
+}
+
 .si-body-sm {
   @include typography.si-font(
     typography.$si-font-size-body-sm,
@@ -218,6 +242,14 @@ h6,
   );
 }
 
+.si-body-sm-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm-sbold,
+    typography.$si-line-height-body-sm-sbold,
+    typography.$si-font-weight-body-sm-sbold
+  );
+}
+
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -235,6 +267,14 @@ h6,
   );
 }
 
+.si-display-xl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xl-sbold,
+    typography.$si-line-height-display-xl-sbold,
+    typography.$si-font-weight-display-xl-sbold
+  );
+}
+
 .si-display-xxl {
   @include typography.si-font(
     typography.$si-font-size-display-xxl,
@@ -243,6 +283,14 @@ h6,
   );
 }
 
+.si-display-xxl-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-xxl-sbold,
+    typography.$si-line-height-display-xxl-sbold,
+    typography.$si-font-weight-display-xxl-sbold
+  );
+}
+
 .si-display-lg,
 .display-2 {
   @include typography.si-font(
@@ -252,6 +300,14 @@ h6,
   );
 }
 
+.si-display-lg-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-lg-sbold,
+    typography.$si-line-height-display-lg-sbold,
+    typography.$si-font-weight-display-lg-sbold
+  );
+}
+
 .si-display-bold,
 .display-3 {
   @include typography.si-font(
@@ -261,6 +317,14 @@ h6,
   );
 }
 
+.si-display-sbold {
+  @include typography.si-font(
+    typography.$si-font-size-display-sbold,
+    typography.$si-line-height-display-sbold,
+    typography.$si-font-weight-display-sbold
+  );
+}
+
 .si-display,
 .display-4 {
   @include typography.si-font(