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

package/package.json

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

package/src/styles/_accessibility.scss

@@ -1,4 +1,6 @@
-:root {
+@use 'selectors';
+
+#{selectors.$root} {
   --element-animations-enabled: 1;
 }
 
@@ -7,7 +9,7 @@
 }
 
 @media (prefers-reduced-motion) {
-  :root {
+  #{selectors.$root} {
     --element-animations-enabled: 0;
   }
 }

package/src/styles/_reboot-shadow-dom.scss

@@ -0,0 +1,5 @@
+// by default shadow dom inherits certain browser styles from parent DOM.
+// To avoid this, we reset all styles to initial values. This is a reboot for shadow dom.
+:host {
+  all: initial;
+}

package/src/styles/_root-font-size.scss

@@ -1,11 +1,13 @@
+@use 'selectors';
+
 $element-root-font-size: initial !default;
 
-html {
+#{selectors.$document} {
   // defines the default with low specificity, i.e. easy overridable with :root
   --element-root-font-size: #{$element-root-font-size};
 }
 
-:root {
+#{selectors.$root} {
   font-size: var(--element-root-font-size);
 }
 

package/src/styles/_selectors.scss

@@ -0,0 +1,3 @@
+$root: ':root' !default;
+$document: 'html' !default;
+$body: 'body' !default;

package/src/styles/_themes.scss

@@ -2,8 +2,9 @@
 
 $_theme-default: 'element';
 $_themes: () !default;
+$_root-selector: ':root';
 
-@mixin configure($defaultTheme: null, $themes: ()) {
+@mixin configure($defaultTheme: null, $themes: (), $rootSelector: null) {
   @if $defaultTheme {
     $_theme-default: $defaultTheme !global;
   }
@@ -11,11 +12,17 @@ $_themes: () !default;
   @if $themes {
     $_themes: $themes !global;
   }
+
+  @if $rootSelector {
+    $_root-selector: $rootSelector !global;
+  }
 }
 
-@mixin make-theme($vars, $name, $dark: false, $force-generate: false) {
+@mixin make-theme($vars, $name, $dark: false, $force-generate: false, $root-selector: null) {
   $theme-name: '';
   $mode: '';
+  $actual-root-selector: $root-selector or $_root-selector;
+  $selector: '';
 
   @if list.index($_themes, $name) or $name == $_theme-default or $force-generate {
     @if $name != $_theme-default {
@@ -26,7 +33,12 @@ $_themes: () !default;
       $mode: '.app--dark';
     }
 
-    :root#{$theme-name}#{$mode} {
+    $selector: '#{$actual-root-selector}#{$theme-name}#{$mode}';
+    @if $actual-root-selector == ':host' and ($theme-name != '' or $mode != '') {
+      $selector: ':host(#{$theme-name}#{$mode})';
+    }
+
+    #{$selector} {
       @each $token, $val in $vars {
         --#{$token}: #{$val};
       }

package/src/styles/bootstrap/_nav.scss

@@ -1,5 +1,6 @@
 @use '../variables/system-tokens';
 @use '../variables/spacers';
+@use '../variables/typography';
 @use './variables';
 
 @use 'sass:map';
@@ -56,7 +57,7 @@ $nav-tabs-min-width: 100px;
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: variables.$nav-tabs-border-width;
+    block-size: 1px;
     background: system-tokens.$si-sys-border-4;
   }
 
@@ -78,6 +79,7 @@ $nav-tabs-min-width: 100px;
     border-start-start-radius: variables.$btn-border-radius;
     border-start-end-radius: variables.$btn-border-radius;
     cursor: pointer;
+    font-weight: typography.$si-font-weight-body-lg;
 
     .badge {
       margin-inline-end: 0;
@@ -85,12 +87,19 @@ $nav-tabs-min-width: 100px;
 
     &.active {
       border-color: system-tokens.$si-sys-border-accent-hover;
+      font-size: typography.$si-font-size-body-lg-bold;
+      font-weight: typography.$si-font-weight-body-lg-bold;
+      line-height: typography.$si-line-height-body-lg-bold;
     }
 
     &:hover {
       isolation: isolate;
     }
 
+    &:not(.active):hover {
+      color: variables.$nav-link-color;
+    }
+
     &.disabled {
       color: variables.$nav-link-disabled-color;
       background-color: transparent;

package/src/styles/bootstrap/_reboot.scss

@@ -1,4 +1,5 @@
 @use '../variables/typography';
+@use '../selectors';
 @use './variables';
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -25,7 +26,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+#{selectors.$root} {
   @if variables.$enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
@@ -41,7 +42,7 @@
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
 // scss-docs-start reboot-body-rules
-body {
+#{selectors.$body} {
   margin: 0; // 1
   font-family: var(--#{variables.$variable-prefix}body-font-family);
   font-size: var(--#{variables.$variable-prefix}body-font-size);
@@ -341,6 +342,11 @@ table {
 }
 
 caption {
+  @include typography.si-font(
+    typography.$si-font-size-caption,
+    typography.$si-line-height-caption,
+    typography.$si-font-weight-caption
+  );
   padding-block: variables.$table-cell-padding-y;
   color: variables.$table-caption-color;
   text-align: start;

package/src/styles/bootstrap/_root.scss

@@ -1,9 +1,10 @@
 @use './variables';
+@use '../selectors';
 
 @use 'sass:meta';
 
 // this is _root.scss without the automatic `to-rgb` brain damage
-:root {
+#{selectors.$root} {
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};

package/src/styles/bootstrap/_type.scss

@@ -167,9 +167,7 @@ h4,
 }
 
 h5,
-h6,
 .h5,
-.h6,
 .si-h5 {
   @include typography.si-font(
     typography.$si-font-size-h5,
@@ -178,6 +176,16 @@ h6,
   );
 }
 
+h6,
+.h6,
+.si-h6 {
+  @include typography.si-font(
+    typography.$si-font-size-h6,
+    typography.$si-line-height-h6,
+    typography.$si-font-weight-h6
+  );
+}
+
 .si-body-lg {
   @include typography.si-font(
     typography.$si-font-size-body-lg,
@@ -194,6 +202,22 @@ h6,
   );
 }
 
+.si-body-paragraph {
+  @include typography.si-font(
+    typography.$si-font-size-body-paragraph,
+    typography.$si-line-height-body-paragraph,
+    typography.$si-font-weight-body-paragraph
+  );
+}
+
+.si-body-sm {
+  @include typography.si-font(
+    typography.$si-font-size-body-sm,
+    typography.$si-line-height-body-sm,
+    typography.$si-font-weight-body-sm
+  );
+}
+
 .si-caption {
   @include typography.si-font(
     typography.$si-font-size-caption,
@@ -211,6 +235,14 @@ h6,
   );
 }
 
+.si-display-xxl {
+  @include typography.si-font(
+    typography.$si-font-size-display-xxl,
+    typography.$si-line-height-display-xxl,
+    typography.$si-font-weight-display-xxl
+  );
+}
+
 .si-display-lg,
 .display-2 {
   @include typography.si-font(
@@ -238,6 +270,36 @@ h6,
   );
 }
 
+.si-code-sm,
+.si-code,
+.si-code-lg {
+  font-family: typography.$si-font-family-mono;
+}
+
+.si-code-sm {
+  @include typography.si-font(
+    typography.$si-font-size-code-sm,
+    typography.$si-line-height-code-sm,
+    typography.$si-font-weight-code-sm
+  );
+}
+
+.si-code {
+  @include typography.si-font(
+    typography.$si-font-size-code,
+    typography.$si-line-height-code,
+    typography.$si-font-weight-code
+  );
+}
+
+.si-code-lg {
+  @include typography.si-font(
+    typography.$si-font-size-code-lg,
+    typography.$si-line-height-code-lg,
+    typography.$si-font-weight-code-lg
+  );
+}
+
 .text-pre {
   white-space: pre;
 }

package/src/styles/bootstrap/_utilities.scss

@@ -1,4 +1,4 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/utilities' as variables-utilities;
 @use 'mixins/breakpoints';
 @use 'mixins/utilities' as mixins-utilities;
@@ -36,17 +36,17 @@
 }
 
 $text-colors: (
-  'primary': semantic-tokens.$element-text-active,
-  'body': semantic-tokens.$element-text-primary,
-  'secondary': semantic-tokens.$element-text-secondary,
-  'tertiary': semantic-tokens.$element-text-disabled,
-  'success': semantic-tokens.$element-text-success,
-  'info': semantic-tokens.$element-text-information,
-  'warning': semantic-tokens.$element-text-warning,
-  'caution': semantic-tokens.$element-text-caution,
-  'danger': semantic-tokens.$element-text-danger,
-  'inverse': semantic-tokens.$element-text-inverse,
-  'muted': semantic-tokens.$element-text-disabled
+  'primary': system-tokens.$si-sys-text-accent,
+  'body': system-tokens.$si-sys-text-primary,
+  'secondary': system-tokens.$si-sys-text-secondary,
+  'tertiary': system-tokens.$si-sys-text-disabled,
+  'success': system-tokens.$si-sys-text-success,
+  'info': system-tokens.$si-sys-text-information,
+  'warning': system-tokens.$si-sys-text-warning,
+  'caution': system-tokens.$si-sys-text-caution,
+  'danger': system-tokens.$si-sys-text-danger,
+  'inverse': system-tokens.$si-sys-text-inverse,
+  'muted': system-tokens.$si-sys-text-disabled
 ) !default;
 
 @each $color, $value in $text-colors {
@@ -56,26 +56,26 @@ $text-colors: (
 }
 
 $background-colors: (
-  'primary': semantic-tokens.$element-ui-0,
-  'secondary': semantic-tokens.$element-text-secondary,
-  'tertiary': semantic-tokens.$element-text-disabled,
-  'success': semantic-tokens.$element-status-success,
-  'info': semantic-tokens.$element-status-information,
-  'warning': semantic-tokens.$element-status-warning,
-  'danger': semantic-tokens.$element-status-danger,
-  'base-0': semantic-tokens.$element-base-0,
-  'base-1': semantic-tokens.$element-base-1,
-  'base-2': semantic-tokens.$element-base-2,
-  'base-3': semantic-tokens.$element-base-3,
-  'base-4': semantic-tokens.$element-base-4,
-  'base-success': semantic-tokens.$element-base-success,
-  'base-info': semantic-tokens.$element-base-information,
-  'base-caution': semantic-tokens.$element-base-caution,
-  'base-warning': semantic-tokens.$element-base-warning,
-  'base-danger': semantic-tokens.$element-base-danger,
-  'base-critical': semantic-tokens.$element-base-critical,
-  'base-translucent-1': semantic-tokens.$element-base-translucent-1,
-  'base-translucent-2': semantic-tokens.$element-base-translucent-2
+  'primary': system-tokens.$si-sys-background-accent,
+  'secondary': system-tokens.$si-sys-text-secondary,
+  'tertiary': system-tokens.$si-sys-text-disabled,
+  'success': system-tokens.$si-sys-background-success,
+  'info': system-tokens.$si-sys-background-information,
+  'warning': system-tokens.$si-sys-background-warning,
+  'danger': system-tokens.$si-sys-background-danger,
+  'base-0': system-tokens.$si-sys-background-0,
+  'base-1': system-tokens.$si-sys-background-1,
+  'base-2': system-tokens.$si-sys-background-2,
+  'base-3': system-tokens.$si-sys-background-3,
+  'base-4': system-tokens.$si-sys-background-4,
+  'base-success': system-tokens.$si-sys-background-success-subtle,
+  'base-info': system-tokens.$si-sys-background-information-subtle,
+  'base-caution': system-tokens.$si-sys-background-caution-subtle,
+  'base-warning': system-tokens.$si-sys-background-warning-subtle,
+  'base-danger': system-tokens.$si-sys-background-danger-subtle,
+  'base-critical': system-tokens.$si-sys-background-critical-subtle,
+  'base-translucent-1': system-tokens.$si-sys-effects-backdrop,
+  'base-translucent-2': system-tokens.$si-sys-background-inverse
 ) !default;
 
 @each $color, $value in $background-colors {
@@ -85,19 +85,19 @@ $background-colors: (
 }
 
 $status-colors: (
-  'success': semantic-tokens.$element-status-success,
-  'info': semantic-tokens.$element-status-information,
-  'caution': semantic-tokens.$element-status-caution,
-  'warning': semantic-tokens.$element-status-warning,
-  'danger': semantic-tokens.$element-status-danger,
-  'critical': semantic-tokens.$element-status-critical,
-  'neutral': semantic-tokens.$element-ui-4,
-  'success-contrast': semantic-tokens.$element-status-success-contrast,
-  'info-contrast': semantic-tokens.$element-status-information-contrast,
-  'caution-contrast': semantic-tokens.$element-status-caution-contrast,
-  'warning-contrast': semantic-tokens.$element-status-warning-contrast,
-  'danger-contrast': semantic-tokens.$element-status-danger-contrast,
-  'critical-contrast': semantic-tokens.$element-status-critical-contrast
+  'success': system-tokens.$si-sys-background-success,
+  'info': system-tokens.$si-sys-background-information,
+  'caution': system-tokens.$si-sys-background-caution,
+  'warning': system-tokens.$si-sys-background-warning,
+  'danger': system-tokens.$si-sys-background-danger,
+  'critical': system-tokens.$si-sys-background-critical,
+  'neutral': system-tokens.$si-sys-background-neutral,
+  'success-contrast': system-tokens.$si-sys-text-on-success,
+  'info-contrast': system-tokens.$si-sys-text-on-information,
+  'caution-contrast': system-tokens.$si-sys-text-on-caution,
+  'warning-contrast': system-tokens.$si-sys-text-on-warning,
+  'danger-contrast': system-tokens.$si-sys-text-on-danger,
+  'critical-contrast': system-tokens.$si-sys-text-on-critical
 ) !default;
 
 @each $color, $value in $status-colors {

package/src/styles/bootstrap/_variables.scss

@@ -155,8 +155,7 @@ $aspect-ratios: (
 //
 // Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif: var(--element-body-font-family);
-$font-family-monospace:
-  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+$font-family-monospace: typography.$si-font-family-mono !default;
 
 $font-family-base: $font-family-sans-serif !default;
 $font-family-code: $font-family-monospace !default;
@@ -185,7 +184,7 @@ $h2-font-size: typography.$si-font-size-h2 !default;
 $h3-font-size: typography.$si-font-size-h3 !default;
 $h4-font-size: typography.$si-font-size-h4 !default;
 $h5-font-size: typography.$si-font-size-h5 !default;
-$h6-font-size: $font-size-base !default;
+$h6-font-size: typography.$si-font-size-h6 !default;
 
 $font-sizes: (
   1: $h1-font-size,
@@ -273,7 +272,7 @@ $table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color: $text-muted !default;
+$table-caption-color: semantic-tokens.$element-text-secondary !default;
 
 $table-variants: (
   'success': system-tokens.$si-sys-background-success-subtle,

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

@@ -26,6 +26,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 .form-check {
   padding-block: map.get(spacers.$spacers, 1);
   padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4));
+  margin-block-end: map.get(spacers.$spacers, 2);
 
   @extend %form-check-spacing;
 
@@ -36,6 +37,7 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
 
 .form-check-inline {
   display: inline-block;
+  margin-block-end: 0;
   margin-inline-end: variables.$form-check-inline-margin-end;
   @extend %form-check-spacing;
 }

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

@@ -1,4 +1,40 @@
+@use 'sass:map';
 @use '../mixins/form-layout';
+@use '../../variables/spacers';
+
+.si-form-fieldset,
+.si-form-input {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: map.get(spacers.$spacers, 6);
+
+  .form-item-content {
+    flex-grow: 1;
+  }
+}
+
+.si-form-fieldset {
+  .form-label {
+    margin-block-end: map.get(spacers.$spacers, 2);
+  }
+
+  .form-check:not(.form-check-inline) {
+    display: block;
+  }
+}
+
+:is(.si-form-fieldset, .si-form-input) .form-label:empty {
+  display: none;
+}
+
+// Maintain compatibility with the old si-form-item style which allows wrapping multiple checkboxes.
+:is(.si-form-fieldset, .si-form-input).form-check:not(.form-check-inline) {
+  display: block;
+}
+
+:is(.si-form-fieldset, .si-form-input).form-check:has(.form-check) {
+  padding-block: 0;
+}
 
 .form-col-layout {
   @include form-layout.form-col-layout;

package/src/styles/bootstrap/mixins/_form-layout.scss

@@ -6,6 +6,7 @@ $form-col-layout-label-width: 16ch !default;
 
 /* Turns every inner form-field into a column layout */
 @mixin form-col-layout {
+  .si-form-fieldset,
   .si-form-input:not(.form-check),
   .si-form-input.form-check:not(.form-check-inline) {
     display: flex;
@@ -40,12 +41,13 @@ $form-col-layout-label-width: 16ch !default;
     }
   }
 
-  si-form-fieldset.si-form-input {
+  .si-form-fieldset {
     align-items: start;
 
     > .form-label {
       align-self: start;
       padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important
+      margin-block-end: 0 !important; // stylelint-disable-line declaration-no-important
     }
   }
 }

package/src/styles/components/_datatable.scss

@@ -105,6 +105,24 @@ $datatable-ghost-cell-strip-radius: 0 !default;
     }
   }
 
+  &.scroll-horz {
+    .datatable-row-left {
+      .datatable-body-cell:last-child,
+      .datatable-header-cell:last-child {
+        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        clip-path: inset(0 -8px 0 0);
+      }
+    }
+
+    .datatable-row-right {
+      .datatable-body-cell:first-child,
+      .datatable-header-cell:first-child {
+        box-shadow: system-tokens.$si-sys-effects-shadow-3;
+        clip-path: inset(0 0 0 -8px);
+      }
+    }
+  }
+
   // 'checkbox' selection
   :is(.datatable-header-cell, .datatable-body-cell) {
     label.datatable-checkbox {
@@ -185,24 +203,6 @@ $datatable-ghost-cell-strip-radius: 0 !default;
         }
       }
     }
-
-    .horizontal-overflow {
-      .datatable-row-left {
-        .datatable-body-cell:last-child,
-        .datatable-header-cell:last-child {
-          box-shadow: 0 0 8px system-tokens.$si-sys-effects-shadow-1;
-          clip-path: inset(0 -8px 0 0);
-        }
-      }
-
-      .datatable-row-right {
-        .datatable-body-cell:first-child,
-        .datatable-header-cell:first-child {
-          box-shadow: 0 0 8px system-tokens.$si-sys-effects-shadow-1;
-          clip-path: inset(0 0 0 -8px);
-        }
-      }
-    }
   }
 
   // Header Styles
@@ -239,7 +239,6 @@ $datatable-ghost-cell-strip-radius: 0 !default;
 
     :is(.datatable-row-left, .datatable-row-right) {
       background-color: variables.$table-bg;
-      display: flex;
 
       .datatable-header-cell {
         flex-shrink: 0;

package/src/styles/components/_drag_drop.scss

@@ -1,8 +1,9 @@
 @use '../variables';
+@use '../selectors';
 
 /* stylelint-disable declaration-no-important */
 
-body:has(.cdk-drag-preview, .ui-draggable-dragging) {
+#{selectors.$body}:has(.cdk-drag-preview, .ui-draggable-dragging) {
   cursor: grabbing !important;
 
   .cdk-drop-list:not(.cdk-drop-list-dragging) {

package/src/styles/components/_scrollbar.scss

@@ -1,6 +1,7 @@
 @use '../variables/system-tokens';
+@use '../selectors';
 
-html {
+#{selectors.$document} {
   scrollbar-color: color-mix(
       in srgb,
       system-tokens.$si-sys-border-2 60%,

package/src/styles/variables/_typography.scss

@@ -15,7 +15,8 @@
   @return math.div($ratio, $ratio * 0 + 1);
 }
 
-$si-font-family: 'SiemensSans Pro', sans-serif;
+$si-font-family: 'SiemensSans Pro VF', 'SiemensSans Pro', helvetica, arial, sans-serif;
+$si-font-family-mono: 'JetBrains Mono', monospace;
 
 $si-font-weight-lighter: lighter !default;
 $si-font-weight-light: 300 !default;
@@ -26,19 +27,19 @@ $si-font-weight-bold: 700 !default;
 $si-font-weight-bolder: bolder !default;
 $si-font-weight-black: 900 !default;
 
-$si-font-size-h1-bold: px-to-rem(30px);
+$si-font-size-h1-bold: px-to-rem(28px);
 $si-line-height-h1-bold: px-to-ratio($si-font-size-h1-bold, 36px);
 $si-font-weight-h1-bold: $si-font-weight-bold;
 
-$si-font-size-h1: px-to-rem(30px);
+$si-font-size-h1: px-to-rem(28px);
 $si-line-height-h1: px-to-ratio($si-font-size-h1, 36px);
 $si-font-weight-h1: $si-font-weight-normal;
 
-$si-font-size-h2: px-to-rem(20px);
-$si-line-height-h2: px-to-ratio($si-font-size-h2, 24px);
+$si-font-size-h2: px-to-rem(24px);
+$si-line-height-h2: px-to-ratio($si-font-size-h2, 32px);
 $si-font-weight-h2: $si-font-weight-semibold;
 
-$si-font-size-h3: px-to-rem(18px);
+$si-font-size-h3: px-to-rem(20px);
 $si-line-height-h3: px-to-ratio($si-font-size-h3, 24px);
 $si-font-weight-h3: $si-font-weight-semibold;
 
@@ -51,38 +52,72 @@ $si-line-height-h4-bold: px-to-ratio($si-font-size-h4-bold, 20px);
 $si-font-weight-h4-bold: $si-font-weight-bold;
 
 $si-font-size-h5: px-to-rem(14px);
-$si-line-height-h5: px-to-ratio($si-font-size-h5, 16px);
+$si-line-height-h5: px-to-ratio($si-font-size-h5, 20px);
 $si-font-weight-h5: $si-font-weight-semibold;
 
 $si-font-size-h5-bold: px-to-rem(14px);
-$si-line-height-h5-bold: px-to-ratio($si-font-size-h5-bold, 16px);
+$si-line-height-h5-bold: px-to-ratio($si-font-size-h5-bold, 20px);
 $si-font-weight-h5-bold: $si-font-weight-bold;
 
+$si-font-size-h6: px-to-rem(12px);
+$si-line-height-h6: px-to-ratio($si-font-size-h6, 16px);
+$si-font-weight-h6: $si-font-weight-semibold;
+
 $si-font-size-body-lg: px-to-rem(16px);
 $si-line-height-body-lg: px-to-ratio($si-font-size-body-lg, 20px);
 $si-font-weight-body-lg: $si-font-weight-normal;
 
+$si-font-size-body-lg-bold: px-to-rem(16px);
+$si-line-height-body-lg-bold: px-to-ratio($si-font-size-body-lg-bold, 20px);
+$si-font-weight-body-lg-bold: $si-font-weight-semibold;
+
 $si-font-size-body: px-to-rem(14px);
 $si-line-height-body: px-to-ratio($si-font-size-body, 16px);
 $si-line-height-body-rem: px-to-rem(16px);
 $si-font-weight-body: $si-font-weight-normal;
 
-$si-font-size-caption: px-to-rem(12px);
-$si-line-height-caption: px-to-ratio($si-font-size-caption, 16px);
+$si-font-size-body-paragraph: px-to-rem(14px);
+$si-line-height-body-paragraph: px-to-ratio($si-font-size-body-paragraph, 20px);
+$si-font-weight-body-paragraph: $si-font-weight-normal;
+
+$si-font-size-body-sm: px-to-rem(12px);
+$si-line-height-body-sm: px-to-ratio($si-font-size-body-sm, 16px);
+$si-font-weight-body-sm: $si-font-weight-normal;
+
+$si-font-size-caption: $si-font-size-body-sm;
+$si-line-height-caption: $si-line-height-body-sm;
 $si-font-weight-caption: $si-font-weight-normal;
 
-$si-font-size-display-xl: px-to-rem(56px);
-$si-line-height-display-xl: px-to-ratio($si-font-size-display-xl, 72px);
+$si-font-size-display-xxl: px-to-rem(58px);
+$si-line-height-display-xxl: px-to-ratio($si-font-size-display-xxl, 72px);
+$si-font-weight-display-xxl: $si-font-weight-normal;
+
+$si-font-size-display-xl: px-to-rem(48px);
+$si-line-height-display-xl: px-to-ratio($si-font-size-display-xl, 64px);
 $si-font-weight-display-xl: $si-font-weight-normal;
 
-$si-font-size-display-lg: px-to-rem(48px);
-$si-line-height-display-lg: px-to-ratio($si-font-size-display-lg, 64px);
+$si-font-size-display-lg: px-to-rem(40px);
+$si-line-height-display-lg: px-to-ratio($si-font-size-display-lg, 52px);
 $si-font-weight-display-lg: $si-font-weight-normal;
 
-$si-font-size-display-bold: px-to-rem(40px);
-$si-line-height-display-bold: px-to-ratio($si-font-size-display-bold, 52px);
+$si-font-size-display-bold: $si-font-size-display-lg;
+$si-line-height-display-bold: $si-line-height-display-lg;
 $si-font-weight-display-bold: $si-font-weight-bold;
 
-$si-font-size-display: px-to-rem(40px);
-$si-line-height-display: px-to-ratio($si-font-size-display, 52px);
+$si-font-size-display: px-to-rem(32px);
+$si-line-height-display: px-to-ratio($si-font-size-display, 40px);
 $si-font-weight-display: $si-font-weight-normal;
+
+$si-font-size-code-sm: px-to-rem(12px);
+$si-line-height-code-sm: px-to-ratio($si-font-size-code-sm, 16px);
+$si-font-weight-code-sm: $si-font-weight-normal;
+
+$si-font-size-code: px-to-rem(14px);
+$si-line-height-code: px-to-ratio($si-font-size-code, 20px);
+$si-font-weight-code: $si-font-weight-normal;
+
+$si-font-size-code-lg: px-to-rem(16px);
+$si-line-height-code-lg: px-to-ratio($si-font-size-code-lg, 20px);
+$si-font-weight-code-lg: $si-font-weight-normal;
+
+$si-letter-spacing-normal: 0;

package/src/theme-shadow-dom.scss

@@ -0,0 +1,17 @@
+/**
+  * Uses :host selector to apply styles to the shadow DOM root element.
+  *
+  * @see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
+**/
+$element-theme-default: null !default;
+$element-themes: null !default;
+
+@use 'styles/reboot-shadow-dom';
+
+@use 'theme' with (
+  $element-theme-default: $element-theme-default,
+  $element-themes: $element-themes,
+  $element-theme-root-selector: ':host',
+  $element-theme-document-selector: ':host',
+  $element-theme-body-selector: ':host'
+);

package/src/theme.scss

@@ -1,5 +1,8 @@
 $element-theme-default: null !default;
 $element-themes: null !default;
+$element-theme-root-selector: ':root' !default;
+$element-theme-document-selector: 'html' !default;
+$element-theme-body-selector: 'body' !default;
 
 // Defines the default root font size. Change to 'none' at some point.
 $element-root-font-size: 16px !default;
@@ -7,6 +10,11 @@ $element-root-font-size: 16px !default;
 $_theme-default: 'element';
 $_themes: () !default;
 
+@use 'styles/selectors' with (
+  $root: $element-theme-root-selector,
+  $document: $element-theme-document-selector,
+  $body: $element-theme-body-selector
+);
 @use 'styles/root-font-size' with (
   $element-root-font-size: $element-root-font-size
 );
@@ -41,11 +49,11 @@ $_themes: () !default;
 @use 'styles/themes';
 @use 'theme/theme-element';
 
-@include themes.configure($element-theme-default, $element-themes);
+@include themes.configure($element-theme-default, $element-themes, $element-theme-root-selector);
 @include themes.make-theme(theme-element.$theme-element-light, 'element');
 @include themes.make-theme(theme-element.$theme-element-dark, 'element', true);
 
-html,
-body {
+#{selectors.$document},
+#{selectors.$body} {
   block-size: 100%;
 }