npm - @siemens/element-theme - Versions diffs - 47.0.0 - Mend

@siemens/element-theme 47.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/package.json +28 -0
package/src/styles/_accessibility.scss +9 -0
package/src/styles/_all-variables.scss +7 -0
package/src/styles/_bootstrap.scss +26 -0
package/src/styles/_themes.scss +35 -0
package/src/styles/_variables.scss +10 -0
package/src/styles/bootstrap/_alert.scss +60 -0
package/src/styles/bootstrap/_badges.scss +115 -0
package/src/styles/bootstrap/_breadcrumb.scss +32 -0
package/src/styles/bootstrap/_button-group.scss +101 -0
package/src/styles/bootstrap/_buttons.scss +244 -0
package/src/styles/bootstrap/_card.scss +208 -0
package/src/styles/bootstrap/_containers.scss +44 -0
package/src/styles/bootstrap/_dropdowns.scss +216 -0
package/src/styles/bootstrap/_forms.scss +10 -0
package/src/styles/bootstrap/_functions.scss +188 -0
package/src/styles/bootstrap/_grid.scss +33 -0
package/src/styles/bootstrap/_helpers.scss +6 -0
package/src/styles/bootstrap/_images.scss +45 -0
package/src/styles/bootstrap/_list-group.scss +197 -0
package/src/styles/bootstrap/_mixins.scss +30 -0
package/src/styles/bootstrap/_modals.scss +234 -0
package/src/styles/bootstrap/_nav.scss +155 -0
package/src/styles/bootstrap/_pagination.scss +58 -0
package/src/styles/bootstrap/_popovers.scss +188 -0
package/src/styles/bootstrap/_progress.scss +42 -0
package/src/styles/bootstrap/_reboot.scss +618 -0
package/src/styles/bootstrap/_root.scss +22 -0
package/src/styles/bootstrap/_tables.scss +186 -0
package/src/styles/bootstrap/_tooltip.scss +145 -0
package/src/styles/bootstrap/_transitions.scss +28 -0
package/src/styles/bootstrap/_type.scss +235 -0
package/src/styles/bootstrap/_utilities.scss +105 -0
package/src/styles/bootstrap/_variables.scss +654 -0
package/src/styles/bootstrap/forms/_form-check.scss +249 -0
package/src/styles/bootstrap/forms/_form-control.scss +151 -0
package/src/styles/bootstrap/forms/_form-file.scss +29 -0
package/src/styles/bootstrap/forms/_form-label.scss +39 -0
package/src/styles/bootstrap/forms/_form-range.scss +68 -0
package/src/styles/bootstrap/forms/_input-group.scss +103 -0
package/src/styles/bootstrap/forms/_validation.scss +95 -0
package/src/styles/bootstrap/helpers/_clearfix.scss +5 -0
package/src/styles/bootstrap/helpers/_position.scss +34 -0
package/src/styles/bootstrap/helpers/_stacks.scss +13 -0
package/src/styles/bootstrap/helpers/_stretched-link.scss +14 -0
package/src/styles/bootstrap/helpers/_text-truncation.scss +9 -0
package/src/styles/bootstrap/helpers/_visually-hidden.scss +10 -0
package/src/styles/bootstrap/mixins/_backdrop.scss +19 -0
package/src/styles/bootstrap/mixins/_breakpoints.scss +136 -0
package/src/styles/bootstrap/mixins/_clearfix.scss +7 -0
package/src/styles/bootstrap/mixins/_container.scss +7 -0
package/src/styles/bootstrap/mixins/_deprecate.scss +12 -0
package/src/styles/bootstrap/mixins/_gradients.scss +14 -0
package/src/styles/bootstrap/mixins/_grid.scss +171 -0
package/src/styles/bootstrap/mixins/_image.scss +15 -0
package/src/styles/bootstrap/mixins/_lists.scss +5 -0
package/src/styles/bootstrap/mixins/_reset-text.scss +18 -0
package/src/styles/bootstrap/mixins/_table-row.scss +31 -0
package/src/styles/bootstrap/mixins/_text-truncate.scss +7 -0
package/src/styles/bootstrap/mixins/_transition.scss +28 -0
package/src/styles/bootstrap/mixins/_utilities.scss +86 -0
package/src/styles/bootstrap/mixins/_visually-hidden.scss +29 -0
package/src/styles/components/_application-header.scss +244 -0
package/src/styles/components/_container-grid.scss +99 -0
package/src/styles/components/_datatable.scss +328 -0
package/src/styles/components/_drag_drop.scss +105 -0
package/src/styles/components/_electron-titlebar.scss +5 -0
package/src/styles/components/_elevation.scss +21 -0
package/src/styles/components/_focus.scss +21 -0
package/src/styles/components/_icons.scss +25 -0
package/src/styles/components/_layout.scss +105 -0
package/src/styles/components/_links.scss +34 -0
package/src/styles/components/_pills.scss +45 -0
package/src/styles/components/_scrollbar.scss +10 -0
package/src/styles/components/_skeleton.scss +42 -0
package/src/styles/components/_switch.scss +77 -0
package/src/styles/components/_system-banner.scss +5 -0
package/src/styles/components/_widgets.scss +58 -0
package/src/styles/variables/_animations.scss +7 -0
package/src/styles/variables/_elevation.scss +25 -0
package/src/styles/variables/_focus.scss +55 -0
package/src/styles/variables/_layout.scss +6 -0
package/src/styles/variables/_semantic-tokens.scss +178 -0
package/src/styles/variables/_si-vars.scss +19 -0
package/src/styles/variables/_spacers.scss +28 -0
package/src/styles/variables/_typography.scss +66 -0
package/src/styles/variables/_utilities.scss +599 -0
package/src/styles/variables/_zindex.scss +20 -0
package/src/theme/_base-colors.scss +79 -0
package/src/theme/_data-colors.scss +105 -0
package/src/theme/_theme-element.scss +339 -0
package/src/theme.scss +49 -0

package/src/styles/bootstrap/_variables.scss ADDED Viewed

@@ -0,0 +1,654 @@
+@use '../variables/animations';
+@use '../variables/elevation';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use './functions';
+@use 'sass:map';
+@use 'sass:string';
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+//
+$enable-smooth-scroll: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+// Prefix for :root CSS variables
+$variable-prefix: bs- !default;
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+$position-values: (
+  0: 0,
+  50: 50%,
+  100: 100%
+) !default;
+// Body
+//
+// Settings for the `<body>` element.
+$body-bg: semantic-tokens.$element-base-0 !default;
+$body-color: semantic-tokens.$element-text-primary !default;
+$body-text-align: null !default;
+// Links
+//
+// Style anchor elements.
+$link-color: semantic-tokens.$element-ui-0;
+$link-decoration: none !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: semantic-tokens.$element-ui-0-hover;
+$link-hover-decoration: underline !default;
+$link-border-radius: semantic-tokens.$element-button-radius;
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+// Paragraphs
+//
+// Style p element.
+$paragraph-margin-bottom: 1rem !default;
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+// NOTE: when changing these, also change in si-responsive-container.directive.ts
+@include functions.assert-ascending($grid-breakpoints, '$grid-breakpoints');
+@include functions.assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+@include functions.assert-ascending($container-max-widths, '$container-max-widths');
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+$grid-columns: 12 !default;
+$grid-gutter-width: spacers.$spacer !default;
+$grid-row-columns: 6 !default;
+$gutters: spacers.$spacers !default;
+// Container padding
+$container-padding-x: $grid-gutter-width * 0.5 !default;
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-widths: (
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
+$border-color: semantic-tokens.$element-ui-4 !default;
+$border-radius: semantic-tokens.$element-radius-2 !default;
+$border-radius-sm: semantic-tokens.$element-radius-1 !default;
+$border-radius-lg: semantic-tokens.$element-radius-2 !default;
+$border-radius-pill: 50rem !default;
+$box-shadow: elevation.$element-elevation-2 !default;
+$box-shadow-sm: elevation.$element-elevation-1 !default;
+$box-shadow-lg: elevation.$element-elevation-3 !default;
+$box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
+$component-active-color: semantic-tokens.$element-ui-5 !default;
+$transition-base: all animations.element-transition-duration(0.2s) ease-in-out !default;
+$transition-fade: opacity animations.element-transition-duration(0.15s) linear !default;
+$transition-collapse: height animations.element-transition-duration(0.35s) ease !default;
+$transition-collapse-width: width animations.element-transition-duration(0.35s) ease !default;
+$aspect-ratios: (
+  '1x1': 100%,
+  '4x3': calc(3 / 4 * 100%),
+  '16x9': calc(9 / 16 * 100%),
+  '21x9': calc(9 / 21 * 100%)
+) !default;
+// Typography
+//
+// 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-base: $font-family-sans-serif !default;
+$font-family-code: $font-family-monospace !default;
+// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
+// $font-size-base effects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: typography.$si-font-size-body-2 !default;
+$font-size-lg: typography.$si-font-size-body-1 !default;
+$font-size-sm: typography.$si-font-size-caption-1 !default;
+$font-weight-lighter: typography.$si-font-weight-lighter;
+$font-weight-light: typography.$si-font-weight-light;
+$font-weight-normal: typography.$si-font-weight-normal;
+$font-weight-bold: typography.$si-font-weight-bold;
+$font-weight-bolder: typography.$si-font-weight-bolder;
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: typography.$si-line-height-body-2 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+$h1-font-size: typography.$si-font-size-h1 !default;
+$h2-font-size: typography.$si-font-size-h2 !default;
+$h3-font-size: typography.$si-font-size-h3 !default;
+$h4-font-size: 1rem !default;
+$h5-font-size: $font-size-base !default;
+$h6-font-size: $font-size-base !default;
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size
+) !default;
+$headings-margin-bottom: spacers.$spacer * 0.5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: typography.$si-font-weight-bold !default;
+$headings-line-height: 1.2 !default;
+$headings-color: semantic-tokens.$element-text-primary !default;
+$lead-font-size: typography.$si-font-size-body-1 !default;
+$lead-font-weight: typography.$si-font-weight-normal !default;
+$small-font-size: typography.$si-font-size-caption-1 !default;
+$sub-sup-font-size: 0.75em !default;
+$initialism-font-size: $small-font-size !default;
+$text-muted: semantic-tokens.$element-text-disabled !default;
+$blockquote-margin-y: spacers.$spacer !default;
+$blockquote-font-size: typography.$si-font-size-body-1 !default;
+$blockquote-footer-color: semantic-tokens.$element-text-secondary !default;
+$blockquote-footer-font-size: $small-font-size !default;
+$hr-margin-y: spacers.$spacer !default;
+$hr-color: semantic-tokens.$element-ui-4 !default;
+$hr-height: $border-width !default;
+$hr-opacity: 1 !default;
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+$mark-padding: 0.2em !default;
+$dt-font-weight: $font-weight-bold !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+$list-inline-padding: 0.5rem !default;
+$mark-bg: semantic-tokens.$element-status-caution;
+$mark-color: semantic-tokens.$element-status-caution-contrast;
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+$table-cell-padding-y: map.get(spacers.$spacers, 4) !default;
+$table-cell-padding-x: map.get(spacers.$spacers, 4) !default;
+$table-cell-padding-y-sm: map.get(spacers.$spacers, 2) !default;
+$table-cell-padding-x-sm: map.get(spacers.$spacers, 4) !default;
+$table-cell-vertical-align: top !default;
+$table-color: $body-color !default;
+$table-bg: semantic-tokens.$element-base-1 !default;
+$table-accent-bg: transparent !default;
+$table-th-font-weight: null !default;
+$table-striped-color: $table-color !default;
+$table-striped-bg: semantic-tokens.$element-base-0 !default;
+$table-active-color: $table-color !default;
+$table-active-bg: semantic-tokens.$element-base-1-selected !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg: semantic-tokens.$element-base-1-hover !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+$table-striped-order: odd !default;
+$table-group-separator-color: currentColor !default;
+$table-caption-color: $text-muted !default;
+$table-variants: (
+  'success': semantic-tokens.$element-base-success,
+  'info': semantic-tokens.$element-base-information,
+  'warning': semantic-tokens.$element-base-warning,
+  'danger': semantic-tokens.$element-base-danger
+) !default;
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+$btn-padding-y: map.get(spacers.$spacers, 4);
+$btn-padding-x: map.get(spacers.$spacers, 6);
+$btn-font-size: $font-size-base;
+$btn-line-height: typography.$si-line-height-title-2 !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+$btn-font-size-sm: $font-size-sm;
+$btn-font-size-lg: $font-size-lg;
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: semantic-tokens.$element-text-disabled !default;
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: semantic-tokens.$element-button-radius !default;
+$btn-border-radius-sm: semantic-tokens.$element-button-radius !default;
+$btn-border-radius-lg: semantic-tokens.$element-button-radius !default;
+$btn-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
+// Forms
+// According to figma it should be 2px + line-height: 16px
+// As overriding line-height is not planned by bootstrap, we use 4px + line-height of 14px
+$form-text-margin-top: map.get(spacers.$spacers, 2);
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: semantic-tokens.$element-text-secondary !default;
+$form-label-margin-bottom: 4px !default;
+$form-label-font-size: typography.$si-font-size-body-2 !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: semantic-tokens.$element-text-secondary !default;
+$input-padding-y: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
+$input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border
+$input-font-family: null !default;
+$input-font-size: $font-size-base;
+$input-font-weight: $font-weight-base;
+$input-line-height: $line-height-base;
+$input-bg: semantic-tokens.$element-base-1 !default;
+$input-disabled-bg: semantic-tokens.$element-base-1 !default;
+$input-disabled-border-color: semantic-tokens.$element-ui-4 !default;
+$input-color: semantic-tokens.$element-text-primary !default;
+$input-border-color: semantic-tokens.$element-ui-2 !default;
+$input-border-width: $border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+$input-border-radius: semantic-tokens.$element-input-radius !default;
+$input-focus-bg: $input-bg !default;
+$input-focus-color: $input-color !default;
+$input-placeholder-color: semantic-tokens.$element-text-secondary !default;
+$input-placeholder-disabled-color: transparent !default;
+$input-plaintext-color: $body-color !default;
+$input-height-border: $input-border-width * 2 !default;
+$input-height-inner: functions.add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: functions.add($input-line-height * 0.5em, $input-padding-y) !default;
+$input-height-inner-quarter: functions.add(
+  $input-line-height * 0.25em,
+  $input-padding-y * 0.5
+) !default;
+$input-height: functions.add(
+  $input-line-height * 1em,
+  functions.add($input-padding-y * 2, $input-height-border, false)
+) !default;
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
+$form-check-input-checked-bg-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iSWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPHRpdGxlPm9rPC90aXRsZT4KICA8cGF0aCBkPSJNMzc5LjUxLDE1Ni43NmwtMTczLDE3My03NC03NGExMiwxMiwwLDEsMC0xNywxN2w4Mi41LDgyLjVhMTIsMTIsMCwwLDAsMTcsMGwxODEuNS0xODEuNWExMiwxMiwwLDAsMC0xNy0xN1oiLz4KPC9zdmc+Cg==');
+$form-check-inline-margin-end: 1rem !default;
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: semantic-tokens.$element-ui-4 !default;
+$input-group-addon-border-color: $input-border-color !default;
+// Form validation
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-valid-color: null !default;
+$form-feedback-warning-color: semantic-tokens.$element-text-warning !default;
+$form-feedback-invalid-color: semantic-tokens.$element-text-danger !default;
+$form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
+$form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
+$form-feedback-icon-warning: semantic-tokens.$element-feedback-icon-warning;
+$form-validation-states: (
+  'valid': (
+    'color': null,
+    'text-color': $form-feedback-valid-color,
+    'icon': $form-feedback-icon-valid
+  ),
+  'invalid': (
+    'color': semantic-tokens.$element-status-danger,
+    'text-color': $form-feedback-invalid-color,
+    'icon': $form-feedback-icon-invalid
+  ),
+  'warning': (
+    'color': semantic-tokens.$element-status-warning,
+    'text-color': $form-feedback-warning-color,
+    'icon': $form-feedback-icon-warning
+  )
+);
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+// $zindex-* moved to variables/_zindex.scss
+// Navs
+$nav-link-padding-y: 10px;
+$nav-link-padding-x: map.get(spacers.$spacers, 8);
+$nav-link-font-size: typography.$si-font-size-title-1;
+$nav-link-font-weight: typography.$si-font-weight-title-1;
+$nav-link-color: semantic-tokens.$element-text-secondary !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: ();
+$nav-link-disabled-color: semantic-tokens.$element-text-disabled !default;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: 2px;
+$nav-tabs-border-radius: 0;
+$nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
+$nav-tabs-link-active-bg: transparent !default;
+// Dropdowns
+//
+// Dropdown menu container and contents.
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
+$dropdown-spacer: 0.125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: semantic-tokens.$element-base-1 !default;
+$dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
+$dropdown-divider-bg: semantic-tokens.$element-ui-4 !default;
+$dropdown-divider-margin-y: 4px !default;
+$dropdown-box-shadow: elevation.$element-elevation-2 !default;
+$dropdown-link-color: semantic-tokens.$element-text-primary !default;
+$dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
+$dropdown-item-padding-y: 6px !default;
+$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
+$dropdown-header-color: semantic-tokens.$element-text-primary !default;
+// Cards
+$card-spacer-y: map.get(spacers.$spacers, 6) !default;
+$card-spacer-x: map.get(spacers.$spacers, 6) !default;
+$card-title-spacer-y: map.get(spacers.$spacers, 5) !default;
+$card-border-radius: $border-radius !default;
+$card-inner-border-radius: $card-border-radius;
+$card-cap-padding-y: map.get(spacers.$spacers, 5) !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: semantic-tokens.$element-base-1 !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: semantic-tokens.$element-base-1 !default;
+$card-img-overlay-padding: spacers.$spacer !default;
+$card-group-margin: $grid-gutter-width !default;
+// Tooltips
+$tooltip-font-size: $font-size-base !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: semantic-tokens.$element-ui-5 !default;
+$tooltip-bg: semantic-tokens.$element-ui-1 !default;
+$tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: map.get(spacers.$spacers, 4) !default;
+$tooltip-padding-x: map.get(spacers.$spacers, 6) !default;
+$tooltip-margin: 0 !default;
+$tooltip-arrow-width: 12px !default;
+$tooltip-arrow-height: 6px !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+// Popovers
+$popover-font-size: $font-size-base;
+$popover-bg: semantic-tokens.$element-base-3 !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: semantic-tokens.$element-ui-4 !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: functions.subtract(
+  $popover-border-radius,
+  $popover-border-width
+) !default;
+$popover-box-shadow: $box-shadow !default;
+$popover-header-bg: semantic-tokens.$element-base-3 !default;
+$popover-header-color: semantic-tokens.$element-text-active;
+$popover-header-padding-y: map.get(spacers.$spacers, 5) !default;
+$popover-header-padding-x: map.get(spacers.$spacers, 5) !default;
+$popover-body-color: semantic-tokens.$element-text-primary !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+$popover-arrow-width: 12px;
+$popover-arrow-height: 6px;
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: $popover-border-color !default;
+// Badges
+$badge-font-size: typography.$si-font-size-body-2;
+$badge-font-weight: typography.$si-font-weight-body-2;
+$badge-color: semantic-tokens.$element-text-inverse !default;
+$badge-padding-y: 0;
+$badge-padding-x: map.get(spacers.$spacers, 4);
+$badge-border-radius: map.get(spacers.$spacers, 5);
+// Modals
+// Padding applied to the modal body
+$modal-inner-padding: map.get(spacers.$spacers, 8);
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: map.get(spacers.$spacers, 6);
+$modal-dialog-margin: map.get(spacers.$spacers, 4);
+$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9);
+$modal-title-line-height: typography.$si-line-height-title-1 !default;
+$modal-content-color: null !default;
+$modal-content-bg: semantic-tokens.$element-base-1 !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: functions.subtract(
+  $modal-content-border-radius,
+  $modal-content-border-width
+) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+$modal-backdrop-bg: semantic-tokens.$element-base-translucent-1 !default;
+$modal-backdrop-opacity: 1 !default;
+$modal-header-border-color: $border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: 0 !default;
+$modal-footer-border-width: 0 !default;
+$modal-header-padding-y: map.get(spacers.$spacers, 5);
+$modal-header-padding-x: map.get(spacers.$spacers, 8);
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform animations.element-transition-duration(0.3s) ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+$alert-padding-y: 10px !default;
+$alert-padding-x: map.get(spacers.$spacers, 5) !default;
+$alert-margin-bottom: 0 !default;
+$alert-border-radius: 0 !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: 0 !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// Progress bars
+$progress-height: 0.5rem !default;
+$progress-font-size: $font-size-base * 0.75 !default;
+$progress-bg: semantic-tokens.$element-ui-4 !default;
+$progress-border-radius: $progress-height * 0.5 !default;
+$progress-box-shadow: none !default;
+$progress-bar-color: semantic-tokens.$element-text-inverse !default;
+$progress-bar-bg: semantic-tokens.$element-ui-0 !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
+// List group
+$list-group-color: semantic-tokens.$element-text-primary !default;
+$list-group-bg: semantic-tokens.$element-base-1 !default;
+$list-group-border-color: $border-color !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+$list-group-item-padding-y: map.get(spacers.$spacers, 4) !default;
+$list-group-item-padding-x: map.get(spacers.$spacers, 6) !default; // 1.25rem !default;
+$list-group-hover-bg: semantic-tokens.$element-base-1-hover !default;
+$list-group-active-color: $body-color !default;
+$list-group-active-bg: semantic-tokens.$element-base-1-selected !default;
+$list-group-active-border-color: $border-color !default;
+$list-group-disabled-color: semantic-tokens.$element-text-disabled !default;
+$list-group-disabled-bg: $list-group-bg !default;
+$list-group-action-color: semantic-tokens.$element-text-primary !default;
+$list-group-action-hover-color: $list-group-action-color !important !default;
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: semantic-tokens.$element-base-0 !default;
+// Image thumbnails
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+// Figures
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: semantic-tokens.$element-text-secondary !default;
+// Breadcrumbs
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0;
+$breadcrumb-padding-x: 0;
+$breadcrumb-item-padding-x: map.get(spacers.$spacers, 5);
+$breadcrumb-margin-bottom: 0;
+$breadcrumb-bg: inherit !default;
+$breadcrumb-divider-color: semantic-tokens.$element-ui-2 !default;
+$breadcrumb-active-color: $link-color !default;
+$breadcrumb-divider: string.quote('>') !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: 0 !default;
+// Code
+$code-font-size: 87.5% !default;
+$code-color: semantic-tokens.$element-data-11 !default;
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: semantic-tokens.$element-base-1 !default;
+$kbd-bg: semantic-tokens.$element-ui-1 !default;
+$pre-color: semantic-tokens.$element-text-primary !default;