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

package/src/styles/components/_markdown.scss

@@ -1,6 +1,5 @@
-@use '../variables';
-
 @use 'sass:map';
+@use '../variables';
 
 .markdown-content {
   max-inline-size: 100%;
@@ -8,13 +7,13 @@
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
+  line-height: variables.px-to-ratio(variables.$si-font-size-body, 20px);
 
   strong {
     font-weight: variables.$si-font-weight-semibold;
   }
 
-  ul,
-  ol {
+  :is(ul, ol) {
     max-inline-size: 100%;
     overflow-wrap: break-word;
 
@@ -33,11 +32,24 @@
     overflow-wrap: break-word;
   }
 
+  .task-list-item {
+    list-style: none;
+
+    .form-check-input {
+      margin-inline-start: calc(-1rem - map.get(variables.$spacers, 2));
+      margin-inline-end: map.get(variables.$spacers, 2);
+      vertical-align: text-bottom;
+      pointer-events: none;
+    }
+  }
+
   pre {
     code {
+      color: inherit;
       background-color: transparent;
       padding-block: 0;
       padding-inline: 0;
+      border: 0;
       border-radius: 0;
     }
 
@@ -51,7 +63,7 @@
   }
 
   blockquote {
-    border-inline-start: 4px solid variables.$element-ui-3;
+    border-inline-start: 4px solid variables.$si-sys-border-4;
     padding-inline-start: map.get(variables.$spacers, 4);
 
     p {
@@ -72,24 +84,26 @@
   table {
     inline-size: max-content;
     max-inline-size: 100%;
-    // stylelint-disable-next-line declaration-no-important
-    margin-block-start: map.get(variables.$spacers, 6) !important;
-    // stylelint-disable-next-line declaration-no-important
-    margin-block-end: 0 !important;
-    overflow: auto;
-    display: block;
+    align-self: stretch;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    display: table;
+    table-layout: auto;
     white-space: nowrap;
 
-    ul,
-    ol {
+    :is(ul, ol) {
       // stylelint-disable-next-line declaration-no-important
       padding-inline-start: map.get(variables.$spacers, 6) !important;
     }
+
+    td:last-child,
+    th:last-child {
+      inline-size: 100%;
+    }
   }
 
   table td,
   table th {
-    max-inline-size: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
 

package/src/styles/components/_pills.scss

@@ -6,19 +6,19 @@
   display: flex;
   align-items: center;
   border-radius: 0.75rem;
-  background: var(--filter-pill-background-color, variables.$element-base-0);
+  background: var(--filter-pill-background-color, variables.$si-sys-background-0);
   padding-inline: map.get(variables.$spacers, 4);
   max-inline-size: 100%;
 
   &.active {
-    background: variables.$element-base-1-selected;
+    background: variables.$si-sys-background-selected;
   }
 
   &.pill-interactive {
     cursor: pointer;
 
     &:hover {
-      background: variables.$element-action-secondary-hover;
+      background: variables.$si-sys-background-accent-secondary-hover;
     }
   }
 

package/src/styles/components/_scrollbar.scss

@@ -1,10 +1,11 @@
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
+@use '../selectors';
 
-html {
+#{selectors.$document} {
   scrollbar-color: color-mix(
       in srgb,
-      semantic-tokens.$element-ui-2 60%,
-      semantic-tokens.$element-base-1
+      system-tokens.$si-sys-border-2 60%,
+      system-tokens.$si-sys-background-1
     )
-    semantic-tokens.$element-base-1;
+    system-tokens.$si-sys-background-1;
 }

package/src/styles/components/_skeleton.scss

@@ -1,5 +1,6 @@
 @use '../variables/animations';
 @use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 
 @keyframes shimmer {
   to {
@@ -12,9 +13,9 @@
   min-block-size: 1em;
   background: 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%
   );
   background-size: 200% 100%;
   background-position-x: 100%;

package/src/styles/components/_switch.scss

@@ -5,12 +5,10 @@
 $si-switch-size: 1.25rem !default;
 $si-switch-inline-size: calc(2 * #{$si-switch-size});
 $si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
-$si-switch-background-off-color: variables.$element-ui-4 !default;
-$si-switch-background-on-color: variables.$element-ui-0 !default;
-$si-switch-background-disabled-color: variables.$element-ui-3 !default;
+$si-switch-background-off-color: variables.$si-sys-background-1 !default;
+$si-switch-background-on-color: variables.$si-sys-background-accent !default;
 $si-switch-slider-margin: 0.25rem !default;
-$si-switch-slider-off-color: variables.$element-ui-2 !default;
-$si-switch-slider-on-color: variables.$element-ui-5 !default;
+$si-switch-slider-on-color: variables.$si-sys-text-on-accent !default;
 $si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
 
 $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin});
@@ -26,9 +24,9 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
     margin-inline-start: calc(-1 * $si-switch-inline-spacing);
     inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
     block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
-    background-color: variables.$element-base-1;
+    background-color: variables.$si-sys-background-1;
     transition: $si-switch-transition-length;
-    border: 1px solid variables.$element-ui-2;
+    border: 1px solid variables.$si-sys-border-2;
     border-radius: #{$si-switch-size};
     appearance: none;
 
@@ -39,7 +37,7 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
       inline-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
       inset-inline-start: calc(#{$si-switch-slider-margin} - 1px);
       inset-block-end: calc(#{$si-switch-slider-margin} - 1px);
-      background-color: variables.$element-text-secondary;
+      background-color: variables.$si-sys-text-secondary;
       transition: $si-switch-transition-length;
       border-radius: 50%;
     }
@@ -49,23 +47,23 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
     }
 
     &:hover {
-      background-color: variables.$element-base-1-hover;
+      background-color: variables.$si-sys-background-hover;
     }
 
     &:is(:checked, .checked) {
-      background-color: variables.$element-action-primary;
+      background-color: variables.$si-sys-background-accent;
 
       &:hover {
-        background-color: variables.$element-action-primary-hover;
+        background-color: variables.$si-sys-background-accent-hover;
       }
 
       &:active {
-        background-color: variables.$element-action-primary-active;
+        background-color: variables.$si-sys-background-accent-active;
       }
 
       &:is(:disabled, .disabled) {
-        background-color: variables.$element-action-primary;
-        border-color: variables.$element-action-primary;
+        background-color: variables.$si-sys-background-accent;
+        border-color: variables.$si-sys-border-accent;
       }
     }
 

package/src/styles/components/_widgets.scss

@@ -54,5 +54,5 @@
 .si-timeline-widget-item-lower-line {
   inline-size: 1px;
   block-size: 100%;
-  background-color: variables.$element-ui-4;
+  background-color: variables.$si-sys-border-4;
 }

package/src/styles/variables/_focus.scss

@@ -1,8 +1,9 @@
+@use 'system-tokens';
 @use 'semantic-tokens';
 
 // Building focus< with outline
 $focus-style-outline: semantic-tokens.$element-button-focus-width solid
-  semantic-tokens.$element-focus-default;
+  system-tokens.$si-sys-effects-focus;
 $focus-style-outline-offset: semantic-tokens.$element-button-focus-overlay-width;
 $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-focus-width});
 
@@ -51,5 +52,5 @@ $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-
   @return inset 0 0 0 semantic-tokens.$element-button-focus-width $focus-color;
 }
 
-$si-focus-styling-box-shadow: make-focus(semantic-tokens.$element-focus-default);
-$si-focus-styling-inside-box-shadow: make-focus-inside(semantic-tokens.$element-focus-default);
+$si-focus-styling-box-shadow: make-focus(system-tokens.$si-sys-effects-focus);
+$si-focus-styling-inside-box-shadow: make-focus-inside(system-tokens.$si-sys-effects-focus);

package/src/styles/variables/_system-tokens.scss

@@ -0,0 +1,180 @@
+$si-sys-background-0: var(--si-sys-background-0);
+$si-sys-background-1: var(--si-sys-background-1);
+$si-sys-background-2: var(--si-sys-background-2);
+$si-sys-background-3: var(--si-sys-background-3);
+$si-sys-background-4: var(--si-sys-background-4);
+$si-sys-background-accent: var(--si-sys-background-accent);
+$si-sys-background-accent-active: var(--si-sys-background-accent-active);
+$si-sys-background-accent-hover: var(--si-sys-background-accent-hover);
+$si-sys-background-accent-secondary: var(--si-sys-background-accent-secondary);
+$si-sys-background-accent-secondary-active: var(--si-sys-background-accent-secondary-active);
+$si-sys-background-accent-secondary-hover: var(--si-sys-background-accent-secondary-hover);
+$si-sys-background-caution: var(--si-sys-background-caution);
+$si-sys-background-caution-active: var(--si-sys-background-caution-active);
+$si-sys-background-caution-hover: var(--si-sys-background-caution-hover);
+$si-sys-background-caution-subtle: var(--si-sys-background-caution-subtle);
+$si-sys-background-critical: var(--si-sys-background-critical);
+$si-sys-background-critical-active: var(--si-sys-background-critical-active);
+$si-sys-background-critical-hover: var(--si-sys-background-critical-hover);
+$si-sys-background-critical-subtle: var(--si-sys-background-critical-subtle);
+$si-sys-background-danger: var(--si-sys-background-danger);
+$si-sys-background-danger-active: var(--si-sys-background-danger-active);
+$si-sys-background-danger-hover: var(--si-sys-background-danger-hover);
+$si-sys-background-danger-secondary: var(--si-sys-background-danger-secondary);
+$si-sys-background-danger-subtle: var(--si-sys-background-danger-subtle);
+$si-sys-background-hover: var(--si-sys-background-hover);
+$si-sys-background-information: var(--si-sys-background-information);
+$si-sys-background-information-active: var(--si-sys-background-information-active);
+$si-sys-background-information-hover: var(--si-sys-background-information-hover);
+$si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
+$si-sys-background-inverse: var(--si-sys-background-inverse);
+$si-sys-background-neutral: var(--si-sys-background-neutral);
+$si-sys-background-selected: var(--si-sys-background-selected);
+$si-sys-background-success: var(--si-sys-background-success);
+$si-sys-background-success-active: var(--si-sys-background-success-active);
+$si-sys-background-success-hover: var(--si-sys-background-success-hover);
+$si-sys-background-success-subtle: var(--si-sys-background-success-subtle);
+$si-sys-background-warning: var(--si-sys-background-warning);
+$si-sys-background-warning-active: var(--si-sys-background-warning-active);
+$si-sys-background-warning-hover: var(--si-sys-background-warning-hover);
+$si-sys-background-warning-secondary: var(--si-sys-background-warning-secondary);
+$si-sys-background-warning-subtle: var(--si-sys-background-warning-subtle);
+$si-sys-border-1: var(--si-sys-border-1);
+$si-sys-border-2: var(--si-sys-border-2);
+$si-sys-border-3: var(--si-sys-border-3);
+$si-sys-border-4: var(--si-sys-border-4);
+$si-sys-border-accent: var(--si-sys-border-accent);
+$si-sys-border-accent-active: var(--si-sys-border-accent-active);
+$si-sys-border-accent-hover: var(--si-sys-border-accent-hover);
+$si-sys-border-caution: var(--si-sys-border-caution);
+$si-sys-border-critical: var(--si-sys-border-critical);
+$si-sys-border-danger: var(--si-sys-border-danger);
+$si-sys-border-danger-secondary: var(--si-sys-border-danger-secondary);
+$si-sys-border-information: var(--si-sys-border-information);
+$si-sys-border-inverse: var(--si-sys-border-inverse);
+$si-sys-border-neutral: var(--si-sys-border-neutral);
+$si-sys-border-success: var(--si-sys-border-success);
+$si-sys-border-warning: var(--si-sys-border-warning);
+$si-sys-border-warning-secondary: var(--si-sys-border-warning-secondary);
+$si-sys-code-1: var(--si-sys-code-1);
+$si-sys-code-10: var(--si-sys-code-10);
+$si-sys-code-11: var(--si-sys-code-11);
+$si-sys-code-12: var(--si-sys-code-12);
+$si-sys-code-2: var(--si-sys-code-2);
+$si-sys-code-3: var(--si-sys-code-3);
+$si-sys-code-4: var(--si-sys-code-4);
+$si-sys-code-5: var(--si-sys-code-5);
+$si-sys-code-6: var(--si-sys-code-6);
+$si-sys-code-7: var(--si-sys-code-7);
+$si-sys-code-8: var(--si-sys-code-8);
+$si-sys-code-9: var(--si-sys-code-9);
+$si-sys-data-categorial-1: var(--si-sys-data-categorial-1);
+$si-sys-data-categorial-10: var(--si-sys-data-categorial-10);
+$si-sys-data-categorial-11: var(--si-sys-data-categorial-11);
+$si-sys-data-categorial-12: var(--si-sys-data-categorial-12);
+$si-sys-data-categorial-13: var(--si-sys-data-categorial-13);
+$si-sys-data-categorial-14: var(--si-sys-data-categorial-14);
+$si-sys-data-categorial-15: var(--si-sys-data-categorial-15);
+$si-sys-data-categorial-16: var(--si-sys-data-categorial-16);
+$si-sys-data-categorial-17: var(--si-sys-data-categorial-17);
+$si-sys-data-categorial-2: var(--si-sys-data-categorial-2);
+$si-sys-data-categorial-3: var(--si-sys-data-categorial-3);
+$si-sys-data-categorial-4: var(--si-sys-data-categorial-4);
+$si-sys-data-categorial-5: var(--si-sys-data-categorial-5);
+$si-sys-data-categorial-6: var(--si-sys-data-categorial-6);
+$si-sys-data-categorial-7: var(--si-sys-data-categorial-7);
+$si-sys-data-categorial-8: var(--si-sys-data-categorial-8);
+$si-sys-data-categorial-9: var(--si-sys-data-categorial-9);
+$si-sys-data-rating-average: var(--si-sys-data-rating-average);
+$si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
+$si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);
+$si-sys-data-rating-good: var(--si-sys-data-rating-good);
+$si-sys-data-rating-poor: var(--si-sys-data-rating-poor);
+$si-sys-data-sequential-avocado-1: var(--si-sys-data-sequential-avocado-1);
+$si-sys-data-sequential-avocado-2: var(--si-sys-data-sequential-avocado-2);
+$si-sys-data-sequential-avocado-3: var(--si-sys-data-sequential-avocado-3);
+$si-sys-data-sequential-avocado-4: var(--si-sys-data-sequential-avocado-4);
+$si-sys-data-sequential-blue-1: var(--si-sys-data-sequential-blue-1);
+$si-sys-data-sequential-blue-2: var(--si-sys-data-sequential-blue-2);
+$si-sys-data-sequential-blue-3: var(--si-sys-data-sequential-blue-3);
+$si-sys-data-sequential-blue-4: var(--si-sys-data-sequential-blue-4);
+$si-sys-data-sequential-deep-blue-1: var(--si-sys-data-sequential-deep-blue-1);
+$si-sys-data-sequential-deep-blue-2: var(--si-sys-data-sequential-deep-blue-2);
+$si-sys-data-sequential-deep-blue-3: var(--si-sys-data-sequential-deep-blue-3);
+$si-sys-data-sequential-deep-blue-4: var(--si-sys-data-sequential-deep-blue-4);
+$si-sys-data-sequential-green-1: var(--si-sys-data-sequential-green-1);
+$si-sys-data-sequential-green-2: var(--si-sys-data-sequential-green-2);
+$si-sys-data-sequential-green-3: var(--si-sys-data-sequential-green-3);
+$si-sys-data-sequential-green-4: var(--si-sys-data-sequential-green-4);
+$si-sys-data-sequential-interactive-coral-1: var(--si-sys-data-sequential-interactive-coral-1);
+$si-sys-data-sequential-interactive-coral-2: var(--si-sys-data-sequential-interactive-coral-2);
+$si-sys-data-sequential-interactive-coral-3: var(--si-sys-data-sequential-interactive-coral-3);
+$si-sys-data-sequential-interactive-coral-4: var(--si-sys-data-sequential-interactive-coral-4);
+$si-sys-data-sequential-orange-1: var(--si-sys-data-sequential-orange-1);
+$si-sys-data-sequential-orange-2: var(--si-sys-data-sequential-orange-2);
+$si-sys-data-sequential-orange-3: var(--si-sys-data-sequential-orange-3);
+$si-sys-data-sequential-orange-4: var(--si-sys-data-sequential-orange-4);
+$si-sys-data-sequential-orchid-1: var(--si-sys-data-sequential-orchid-1);
+$si-sys-data-sequential-orchid-2: var(--si-sys-data-sequential-orchid-2);
+$si-sys-data-sequential-orchid-3: var(--si-sys-data-sequential-orchid-3);
+$si-sys-data-sequential-orchid-4: var(--si-sys-data-sequential-orchid-4);
+$si-sys-data-sequential-plum-1: var(--si-sys-data-sequential-plum-1);
+$si-sys-data-sequential-plum-2: var(--si-sys-data-sequential-plum-2);
+$si-sys-data-sequential-plum-3: var(--si-sys-data-sequential-plum-3);
+$si-sys-data-sequential-plum-4: var(--si-sys-data-sequential-plum-4);
+$si-sys-data-sequential-purple-1: var(--si-sys-data-sequential-purple-1);
+$si-sys-data-sequential-purple-2: var(--si-sys-data-sequential-purple-2);
+$si-sys-data-sequential-purple-3: var(--si-sys-data-sequential-purple-3);
+$si-sys-data-sequential-purple-4: var(--si-sys-data-sequential-purple-4);
+$si-sys-data-sequential-red-1: var(--si-sys-data-sequential-red-1);
+$si-sys-data-sequential-red-2: var(--si-sys-data-sequential-red-2);
+$si-sys-data-sequential-red-3: var(--si-sys-data-sequential-red-3);
+$si-sys-data-sequential-red-4: var(--si-sys-data-sequential-red-4);
+$si-sys-data-sequential-royal-blue-1: var(--si-sys-data-sequential-royal-blue-1);
+$si-sys-data-sequential-royal-blue-2: var(--si-sys-data-sequential-royal-blue-2);
+$si-sys-data-sequential-royal-blue-3: var(--si-sys-data-sequential-royal-blue-3);
+$si-sys-data-sequential-royal-blue-4: var(--si-sys-data-sequential-royal-blue-4);
+$si-sys-data-sequential-sand-1: var(--si-sys-data-sequential-sand-1);
+$si-sys-data-sequential-sand-2: var(--si-sys-data-sequential-sand-2);
+$si-sys-data-sequential-sand-3: var(--si-sys-data-sequential-sand-3);
+$si-sys-data-sequential-sand-4: var(--si-sys-data-sequential-sand-4);
+$si-sys-data-sequential-turquoise-1: var(--si-sys-data-sequential-turquoise-1);
+$si-sys-data-sequential-turquoise-2: var(--si-sys-data-sequential-turquoise-2);
+$si-sys-data-sequential-turquoise-3: var(--si-sys-data-sequential-turquoise-3);
+$si-sys-data-sequential-turquoise-4: var(--si-sys-data-sequential-turquoise-4);
+$si-sys-data-sequential-yellow-1: var(--si-sys-data-sequential-yellow-1);
+$si-sys-data-sequential-yellow-2: var(--si-sys-data-sequential-yellow-2);
+$si-sys-data-sequential-yellow-3: var(--si-sys-data-sequential-yellow-3);
+$si-sys-data-sequential-yellow-4: var(--si-sys-data-sequential-yellow-4);
+$si-sys-effects-backdrop: var(--si-sys-effects-backdrop);
+$si-sys-effects-focus: var(--si-sys-effects-focus);
+$si-sys-effects-logo: var(--si-sys-effects-logo);
+$si-sys-effects-shadow-1: var(--si-sys-effects-shadow-1);
+$si-sys-effects-shadow-2: var(--si-sys-effects-shadow-2);
+$si-sys-effects-shadow-3: var(--si-sys-effects-shadow-3);
+$si-sys-effects-shadow-4: var(--si-sys-effects-shadow-4);
+$si-sys-text-accent: var(--si-sys-text-accent);
+$si-sys-text-accent-active: var(--si-sys-text-accent-active);
+$si-sys-text-accent-hover: var(--si-sys-text-accent-hover);
+$si-sys-text-caution: var(--si-sys-text-caution);
+$si-sys-text-critical: var(--si-sys-text-critical);
+$si-sys-text-danger: var(--si-sys-text-danger);
+$si-sys-text-disabled: var(--si-sys-text-disabled);
+$si-sys-text-information: var(--si-sys-text-information);
+$si-sys-text-inverse: var(--si-sys-text-inverse);
+$si-sys-text-on-accent: var(--si-sys-text-on-accent);
+$si-sys-text-on-accent-secondary: var(--si-sys-text-on-accent-secondary);
+$si-sys-text-on-accent-secondary-active: var(--si-sys-text-on-accent-secondary-active);
+$si-sys-text-on-accent-secondary-hover: var(--si-sys-text-on-accent-secondary-hover);
+$si-sys-text-on-caution: var(--si-sys-text-on-caution);
+$si-sys-text-on-critical: var(--si-sys-text-on-critical);
+$si-sys-text-on-danger: var(--si-sys-text-on-danger);
+$si-sys-text-on-danger-secondary: var(--si-sys-text-on-danger-secondary);
+$si-sys-text-on-information: var(--si-sys-text-on-information);
+$si-sys-text-on-success: var(--si-sys-text-on-success);
+$si-sys-text-on-warning: var(--si-sys-text-on-warning);
+$si-sys-text-on-warning-secondary: var(--si-sys-text-on-warning-secondary);
+$si-sys-text-primary: var(--si-sys-text-primary);
+$si-sys-text-secondary: var(--si-sys-text-secondary);
+$si-sys-text-success: var(--si-sys-text-success);
+$si-sys-text-warning: var(--si-sys-text-warning);

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;