@siemens/element-theme 51.0.0-rc.1 → 51.0.0-rc.10

package/src/styles/bootstrap/_buttons.scss

@@ -2,6 +2,7 @@
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use '../variables/typography';
 @use './mixins/transition';
 @use './variables' as bootstrap-variables;
@@ -12,13 +13,13 @@ $btn-icon-font-size: variables.$si-icon-font-size;
 
 // there are some non .btn buttons used in element
 button {
-  color: semantic-tokens.$element-text-primary;
+  color: system-tokens.$si-sys-text-primary;
 }
 
 :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);
@@ -64,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)};
   }
 }
 
@@ -73,55 +74,55 @@ button {
 }
 
 .btn-primary {
-  --btn-bg: #{semantic-tokens.$element-action-primary};
-  --btn-bg-hover: #{semantic-tokens.$element-action-primary-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-primary-active};
-  --btn-color: #{semantic-tokens.$element-action-primary-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-primary-text};
-  --btn-color-active: #{semantic-tokens.$element-action-primary-text};
+  --btn-bg: #{system-tokens.$si-sys-background-accent};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-accent-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-accent-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-accent};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-accent};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-accent};
 }
 
 .btn-danger {
-  --btn-bg: #{semantic-tokens.$element-action-danger};
-  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
-  --btn-color: #{semantic-tokens.$element-action-danger-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
-  --btn-color-active: #{semantic-tokens.$element-action-danger-text};
+  --btn-bg: #{system-tokens.$si-sys-background-danger};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-danger-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-danger-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-danger};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-danger};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-danger};
 }
 
 .btn-warning {
-  --btn-bg: #{semantic-tokens.$element-action-warning};
-  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
-  --btn-color: #{semantic-tokens.$element-action-warning-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
-  --btn-color-active: #{semantic-tokens.$element-action-warning-text};
+  --btn-bg: #{system-tokens.$si-sys-background-warning};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-warning-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-warning-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-warning};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-warning};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-warning};
 }
 
 .btn-ghost {
-  --btn-bg: #{semantic-tokens.$element-base-1};
-  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
-  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
-  --btn-color: #{semantic-tokens.$element-text-primary};
-  --btn-color-hover: #{semantic-tokens.$element-text-primary};
-  --btn-color-active: #{semantic-tokens.$element-text-primary};
+  --btn-bg: #{system-tokens.$si-sys-background-1};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
+  --btn-color: #{system-tokens.$si-sys-text-primary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-primary};
+  --btn-color-active: #{system-tokens.$si-sys-text-primary};
 }
 
 .btn-secondary,
 .btn-secondary-warning,
 .btn-secondary-danger,
 .btn-secondary-ghost {
-  --btn-bg: #{semantic-tokens.$element-action-secondary};
-  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
-  --btn-color: #{semantic-tokens.$element-action-secondary-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
-  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
+  --btn-bg: #{system-tokens.$si-sys-background-accent-secondary};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
   --btn-border-width: 1px;
-  --btn-border-color: #{semantic-tokens.$element-action-secondary-border};
-  --btn-border-color-hover: #{semantic-tokens.$element-action-secondary-border-hover};
-  --btn-border-color-active: #{semantic-tokens.$element-action-secondary-border-active};
+  --btn-border-color: #{system-tokens.$si-sys-border-accent};
+  --btn-border-color-hover: #{system-tokens.$si-sys-border-accent-hover};
+  --btn-border-color-active: #{system-tokens.$si-sys-border-accent-active};
 }
 
 .btn-tertiary,
@@ -129,45 +130,45 @@ button {
 .btn-tertiary-danger,
 .btn-tertiary-ghost {
   --btn-bg: transparent;
-  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
-  --btn-color: #{semantic-tokens.$element-action-secondary-text};
-  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
-  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
 }
 
 .btn-secondary-warning,
 .btn-tertiary-warning {
-  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
-  --btn-color: #{semantic-tokens.$element-action-secondary-warning};
-  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
-  --btn-color-active: #{semantic-tokens.$element-action-warning-text};
-  --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
-  --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
-  --btn-border-color-active: #{semantic-tokens.$element-action-warning-active};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-warning-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-warning-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-warning-secondary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-warning};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-warning};
+  --btn-border-color: #{system-tokens.$si-sys-border-warning-secondary};
+  --btn-border-color-hover: transparent;
+  --btn-border-color-active: transparent;
 }
 
 .btn-secondary-danger,
 .btn-tertiary-danger {
-  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
-  --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
-  --btn-color: #{semantic-tokens.$element-action-secondary-danger};
-  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
-  --btn-color-active: #{semantic-tokens.$element-action-danger-text};
-  --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
-  --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
-  --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-danger-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-danger-active};
+  --btn-color: #{system-tokens.$si-sys-text-on-danger-secondary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-on-danger};
+  --btn-color-active: #{system-tokens.$si-sys-text-on-danger};
+  --btn-border-color: #{system-tokens.$si-sys-border-danger-secondary};
+  --btn-border-color-hover: transparent;
+  --btn-border-color-active: transparent;
 }
 
 .btn-secondary-ghost,
 .btn-tertiary-ghost {
-  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
-  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
-  --btn-color: #{semantic-tokens.$element-text-primary};
-  --btn-color-hover: #{semantic-tokens.$element-text-primary};
-  --btn-color-active: #{semantic-tokens.$element-text-primary};
-  --btn-border-color: #{semantic-tokens.$element-ui-3};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
+  --btn-color: #{system-tokens.$si-sys-text-primary};
+  --btn-color-hover: #{system-tokens.$si-sys-text-primary};
+  --btn-color-active: #{system-tokens.$si-sys-text-primary};
+  --btn-border-color: #{system-tokens.$si-sys-border-3};
   --btn-border-color-hover: transparent;
   --btn-border-color-active: transparent;
 }
@@ -175,7 +176,7 @@ button {
 .btn-link {
   --btn-color: #{bootstrap-variables.$btn-link-color};
   --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
-  --btn-color-active: #{semantic-tokens.$element-action-primary-active};
+  --btn-color-active: #{system-tokens.$si-sys-text-accent-active};
   --btn-font-weight: #{typography.$si-font-weight-body};
   justify-content: flex-start;
   text-decoration: bootstrap-variables.$link-decoration;
@@ -226,17 +227,17 @@ button {
 .btn-close {
   --btn-font-weight: #{typography.$si-font-weight-normal};
   --btn-bg: transparent;
-  --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
-  --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
-  --btn-color: #{semantic-tokens.$element-ui-1};
-  --btn-color-active: #{semantic-tokens.$element-ui-1};
+  --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
+  --btn-bg-active: #{system-tokens.$si-sys-background-active};
+  --btn-color: #{system-tokens.$si-sys-text-primary};
+  --btn-color-active: #{system-tokens.$si-sys-text-primary};
 
   &.btn-tertiary {
-    --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
-    --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
-    --btn-color: #{semantic-tokens.$element-action-secondary-text};
-    --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
-    --btn-color-active: #{semantic-tokens.$element-action-primary-active};
+    --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
+    --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
+    --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
+    --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
+    --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
   }
 
   &::before {
@@ -257,29 +258,28 @@ button {
   --btn-color: #{bootstrap-variables.$input-color};
   --btn-color-hover: #{bootstrap-variables.$input-color};
   --btn-color-active: #{bootstrap-variables.$input-color};
-  --btn-border-width: 1px;
-  --btn-border-color: #{semantic-tokens.$element-ui-2};
-  --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
-  --btn-border-color-active: #{semantic-tokens.$element-ui-1};
+  --btn-border-width: #{bootstrap-variables.$input-border-width};
+  --btn-border-color: #{bootstrap-variables.$input-border-color};
+  --btn-border-color-hover: #{bootstrap-variables.$input-focus-border-color};
+  --btn-border-color-active: #{bootstrap-variables.$input-focus-border-color};
 
   @include typography.si-font(
-    typography.$si-font-size-body,
-    typography.$si-line-height-body,
-    typography.$si-font-weight-body
+    bootstrap-variables.$input-font-size,
+    bootstrap-variables.$input-line-height,
+    bootstrap-variables.$input-font-weight
   );
   padding-block: bootstrap-variables.$input-padding-y;
-  padding-inline: bootstrap-variables.$btn-padding-x - bootstrap-variables.$input-border-width;
-
+  padding-inline: bootstrap-variables.$input-padding-x;
   border-radius: bootstrap-variables.$input-border-radius;
   justify-content: flex-start;
 
   &:is(:disabled, .disabled) {
-    --btn-border-color: #{semantic-tokens.$element-ui-3};
-    --btn-color: #{semantic-tokens.$element-text-disabled};
+    --btn-border-color: #{bootstrap-variables.$input-disabled-border-color};
+    --btn-color: #{bootstrap-variables.$input-disabled-color};
     opacity: unset;
   }
 
   &:focus {
-    --btn-border-color: #{semantic-tokens.$element-ui-1};
+    --btn-border-color: #{bootstrap-variables.$input-focus-border-color};
   }
 }

package/src/styles/bootstrap/_card.scss

@@ -1,5 +1,5 @@
 @use '../variables/focus';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
@@ -43,56 +43,62 @@
   }
 
   &.accent-primary {
-    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-ui-0;
+    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 semantic-tokens.$element-ui-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
-      semantic-tokens.$element-status-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 semantic-tokens.$element-status-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 semantic-tokens.$element-status-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 semantic-tokens.$element-status-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 semantic-tokens.$element-status-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 semantic-tokens.$element-status-critical;
+    border-inline-start: map.get(spacers.$spacers-inline, 4) solid
+      system-tokens.$si-sys-border-critical;
   }
 
   &.action-card:not(:disabled) {
     &:hover {
       &,
       .card-footer {
-        background-color: semantic-tokens.$element-base-1-hover;
+        background-color: system-tokens.$si-sys-background-hover;
       }
     }
 
     &:active {
       &,
       .card-footer {
-        background-color: semantic-tokens.$element-base-1-selected;
+        background-color: system-tokens.$si-sys-background-active;
       }
     }
   }
 
   &.selected {
-    box-shadow: 0 0 0 1px semantic-tokens.$element-ui-0;
+    box-shadow: 0 0 0 1px system-tokens.$si-sys-border-accent-active;
   }
 
   &:focus-visible {
@@ -101,7 +107,7 @@
 
   &.card-outline {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px semantic-tokens.$element-ui-4;
+    box-shadow: inset 0 0 0 1px system-tokens.$si-sys-border-4;
   }
 }
 
@@ -134,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 {
@@ -168,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

@@ -1,5 +1,5 @@
 @use '../variables';
-@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
 @use '../variables/spacers';
 @use '../variables/typography';
 @use '../variables/zindex';
@@ -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;
   }
 
@@ -126,15 +126,15 @@
 
   // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
   &: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;
   }
 
   // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
   &:is(:active, .active) {
-    color: var(--element-text-primary);
-    background-color: var(--element-base-1-selected);
+    color: var(--si-sys-text-primary);
+    background-color: var(--si-sys-background-active);
   }
 
   &:is(.disabled, :disabled) {
@@ -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);
     }
   }
 }
@@ -162,7 +162,7 @@
 // FIXME: drop when dropping si-menu-legacy
 .dropdown-item-static {
   &:is(.active, :active, :hover, :hover:focus:not(:focus-visible), :focus) {
-    background-color: semantic-tokens.$element-base-1;
+    background-color: system-tokens.$si-sys-background-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/_forms.scss

@@ -1,6 +1,7 @@
 @use './forms/form-check';
 @use './forms/form-control';
 @use './forms/form-file';
+@use './forms/form-layout';
 @use './forms/form-label';
 @use './forms/form-range';
 // not part of the design system

package/src/styles/bootstrap/_images.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../variables/spacers';
+@use '../variables/system-tokens';
 @use './mixins/image';
 @use './variables';
 
@@ -19,7 +21,7 @@
   background-color: variables.$thumbnail-bg;
   border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
   border-radius: variables.$thumbnail-border-radius;
-  box-shadow: variables.$thumbnail-box-shadow;
+  box-shadow: system-tokens.$si-sys-effects-shadow-1;
 
   // Keep them at most 100% wide
   @include image.img-fluid();
@@ -35,7 +37,7 @@
 }
 
 .figure-img {
-  margin-block-end: spacers.$spacer * 0.5;
+  margin-block-end: map.get(spacers.$spacers-block, 4);
   line-height: 1;
 }