@siemens/element-theme 47.0.0

package/src/styles/bootstrap/_card.scss

@@ -0,0 +1,208 @@
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use 'mixins/breakpoints';
+@use 'variables';
+
+@use 'sass:map';
+
+%card-inner-radius-top {
+  border-start-start-radius: variables.$card-inner-border-radius;
+  border-start-end-radius: variables.$card-inner-border-radius;
+}
+
+%card-inner-radius-start {
+  border-start-start-radius: variables.$card-inner-border-radius;
+  border-end-start-radius: variables.$card-inner-border-radius;
+}
+
+%card-inner-radius-bottom {
+  border-end-start-radius: variables.$card-inner-border-radius;
+  border-end-end-radius: variables.$card-inner-border-radius;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  block-size: variables.$card-height;
+  word-wrap: break-word;
+  background-color: variables.$card-bg;
+  border-radius: variables.$card-border-radius;
+
+  > .list-group {
+    &:first-child {
+      @extend %card-inner-radius-top;
+    }
+
+    &:last-child {
+      @extend %card-inner-radius-bottom;
+    }
+  }
+
+  &.accent-primary {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-ui-0;
+  }
+
+  &.accent-inactive {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-ui-4;
+  }
+
+  &.accent-info {
+    border-inline-start: map.get(spacers.$spacers, 4) solid
+      semantic-tokens.$element-status-information;
+  }
+
+  &.accent-success {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-success;
+  }
+
+  &.accent-warning {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-warning;
+  }
+
+  &.accent-caution {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-caution;
+  }
+
+  &.accent-danger {
+    border-inline-start: map.get(spacers.$spacers, 4) solid semantic-tokens.$element-status-danger;
+  }
+}
+
+.card-header {
+  font-size: typography.$si-font-size-title-2;
+  font-weight: typography.$si-font-weight-title-2;
+  min-block-size: map.get(spacers.$spacers, 9) + map.get(spacers.$spacers, 4);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-block: variables.$card-cap-padding-y;
+  padding-inline: variables.$card-cap-padding-x;
+  margin-block-end: 0; // Removes the default margin-bottom of <hN>
+  color: variables.$card-cap-color;
+  background-color: variables.$card-cap-bg;
+
+  &,
+  .icon {
+    line-height: typography.$si-font-size-title-2;
+  }
+
+  &:first-child {
+    @extend %card-inner-radius-top;
+  }
+}
+
+.card-body {
+  overflow: hidden;
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding-block: variables.$card-spacer-y;
+  padding-inline: variables.$card-spacer-x;
+  color: variables.$card-color;
+}
+
+.card-title {
+  margin-block-end: variables.$card-title-spacer-y;
+}
+
+.card-subtitle {
+  margin-block: (-(variables.$card-title-spacer-y) * 0.5) 0;
+}
+
+.card-text:last-child {
+  margin-block-end: 0;
+}
+
+// If the card has a header, remove the top padding for the body.
+// Since we removed the separator line from the header, too much
+// padding looks weird.
+.card-header + .card-body {
+  padding-block-start: 0;
+}
+
+.card-footer {
+  @extend %card-inner-radius-bottom;
+  padding-inline: variables.$card-cap-padding-x;
+  padding-block-start: variables.$card-cap-padding-y;
+  padding-block-end: variables.$card-cap-padding-x;
+  background-color: variables.$card-cap-bg;
+}
+
+.card-img-overlay {
+  position: absolute;
+  inset: 0;
+  padding: variables.$card-img-overlay-padding;
+  border-radius: variables.$card-inner-border-radius;
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  inline-size: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+}
+
+.card-img,
+.card-img-top {
+  @extend %card-inner-radius-top;
+}
+
+.card-img,
+.card-img-start {
+  @extend %card-inner-radius-start;
+}
+
+.card-img,
+.card-img-bottom {
+  @extend %card-inner-radius-bottom;
+}
+
+.card-group {
+  // The child selector allows nested `.card` within `.card-group` to display properly.
+  > .card {
+    margin-block-end: variables.$card-group-margin;
+  }
+
+  @include breakpoints.media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group` to display properly.
+    > .card {
+      flex: 1 0 0%;
+      margin-block-end: 0;
+
+      + .card {
+        margin-inline-start: 0;
+      }
+
+      // Handle rounded corners
+      &:not(:last-child) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+
+        :is(.card-img-top, .card-header) {
+          border-start-end-radius: 0;
+        }
+
+        :is(.card-img-bottom, .card-footer) {
+          border-end-end-radius: 0;
+        }
+      }
+
+      &:not(:first-child) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+
+        :is(.card-img-top, .card-header) {
+          border-start-start-radius: 0;
+        }
+
+        :is(.card-img-bottom, .card-footer) {
+          border-end-start-radius: 0;
+        }
+      }
+    }
+  }
+}

package/src/styles/bootstrap/_containers.scss

@@ -0,0 +1,44 @@
+@use './mixins/breakpoints';
+@use './mixins/container';
+@use './variables';
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+// Single container class with breakpoint max-widths
+.container,
+// 100% wide container at all breakpoints
+.container-fluid {
+  @include container.make-container();
+}
+
+// Responsive containers that are 100% wide until a breakpoint
+// FIXME: do we need responsive containers?
+@each $breakpoint, $container-max-width in variables.$container-max-widths {
+  .container-#{$breakpoint} {
+    @extend .container-fluid;
+  }
+
+  @include breakpoints.media-breakpoint-up($breakpoint, variables.$grid-breakpoints) {
+    %responsive-container-#{$breakpoint} {
+      max-inline-size: $container-max-width;
+    }
+
+    // Extend each breakpoint which is smaller or equal to the current breakpoint
+    $extend-breakpoint: true;
+
+    @each $name, $width in variables.$grid-breakpoints {
+      @if ($extend-breakpoint) {
+        .container#{breakpoints.breakpoint-infix($name, variables.$grid-breakpoints)} {
+          @extend %responsive-container-#{$breakpoint};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if ($breakpoint == $name) {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}

package/src/styles/bootstrap/_dropdowns.scss

@@ -0,0 +1,216 @@
+@use '../variables';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use '../variables/zindex';
+@use './variables' as bootstrap-variables;
+
+@use 'sass:map';
+
+.dropup,
+.dropend,
+.dropdown,
+.dropstart {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  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(100vh - #{map.get(spacers.$spacers, 1) * 2});
+  overflow-y: auto;
+  padding-block: bootstrap-variables.$dropdown-padding-y;
+  padding-inline: bootstrap-variables.$dropdown-padding-x;
+  font-size: bootstrap-variables.$dropdown-font-size;
+  color: bootstrap-variables.$dropdown-color;
+  list-style: none;
+  background-color: bootstrap-variables.$dropdown-bg;
+  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-inline: 0;
+  text-align: start;
+
+  &.show {
+    display: block;
+  }
+}
+
+.dropdown-menu,
+.dropdown-item {
+  .icon + .item-title {
+    padding-inline-start: map.get(spacers.$spacers, 4);
+  }
+}
+
+.dropdown-toggle {
+  --caret-rotate: 0deg;
+  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, 4)};
+    font-size: 1.5rem !important; // stylelint-disable-line declaration-no-important
+
+    &::before {
+      transform: rotate(var(--caret-rotate));
+      transition: transform variables.$si-caret-transition-duration;
+      display: inline-block;
+    }
+  }
+
+  &.show .dropdown-caret::before {
+    transform: rotate(calc(var(--caret-rotate) + 180deg));
+  }
+}
+
+.dropup .dropdown-toggle {
+  --caret-rotate: 180deg;
+}
+
+.dropstart .dropdown-toggle {
+  --caret-rotate: 90deg;
+}
+
+.dropend .dropdown-toggle {
+  --caret-rotate: 270deg;
+}
+
+.dropdown-item,
+.dropdown-item-text {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  block-size: 32px;
+  inline-size: 100%;
+  padding-block: bootstrap-variables.$dropdown-item-padding-y;
+  padding-inline: bootstrap-variables.$dropdown-item-padding-x;
+  color: bootstrap-variables.$dropdown-link-color;
+  text-decoration: none;
+}
+
+.dropdown-item {
+  font-weight: bootstrap-variables.$font-weight-normal;
+  text-align: inherit; // For `<button>`s
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background-color: transparent; // For `<button>`s
+  border: 0; // For `<button>`s
+  cursor: pointer;
+
+  .item-title {
+    flex: 1;
+  }
+
+  &:focus {
+    color: bootstrap-variables.$dropdown-link-color;
+    background: transparent;
+  }
+
+  // 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;
+    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);
+  }
+
+  &:is(.disabled, :disabled) {
+    color: bootstrap-variables.$dropdown-link-disabled-color;
+    pointer-events: none;
+    background-color: transparent;
+    cursor: default;
+  }
+
+  .menu-end-icon {
+    margin-inline-end: -1 * map.get(spacers.$spacers, 3);
+
+    &.element-record-filled {
+      font-size: 1rem;
+      margin-inline-end: -1 * map.get(spacers.$spacers, 1);
+    }
+  }
+}
+
+.dropdown-item-static,
+.dropdown-item-text {
+  cursor: default;
+}
+
+// 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;
+  }
+}
+
+.dropdown-header {
+  display: block;
+  padding-block: bootstrap-variables.$dropdown-padding-y;
+  padding-inline: bootstrap-variables.$dropdown-item-padding-x;
+  margin-block-end: 0; // for use with heading elements
+  color: bootstrap-variables.$dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+  font-size: typography.$si-font-size-title-2;
+  font-weight: typography.$si-font-weight-title-2;
+}
+
+.dropdown-divider {
+  block-size: 0;
+  margin-block: bootstrap-variables.$dropdown-divider-margin-y;
+  margin-inline: map.get(spacers.$spacers, 5);
+  overflow: hidden;
+  border-block-start: 1px solid bootstrap-variables.$dropdown-divider-bg;
+}
+
+.dropdown > .dropdown-menu {
+  inset-block: 100% auto;
+  inset-inline: 0 auto;
+  margin-block: bootstrap-variables.$dropdown-spacer 0;
+  margin-inline: 0;
+}
+
+.dropup > .dropdown-menu {
+  inset-block: auto 100%;
+  inset-inline: auto;
+  margin-block: 0 bootstrap-variables.$dropdown-spacer;
+  margin-inline: 0;
+}
+
+.dropend > .dropdown-menu {
+  inset-block: 0 auto;
+  inset-inline: 100% auto;
+  margin-block: 0;
+  margin-inline: bootstrap-variables.$dropdown-spacer 0;
+}
+
+.dropstart > .dropdown-menu {
+  inset-block: 0 auto;
+  inset-inline: auto 100%;
+  margin-block: 0;
+  margin-inline: 0 bootstrap-variables.$dropdown-spacer;
+}
+
+.dropdown-menu {
+  &.align-center {
+    left: 0; // stylelint-disable-line liberty/use-logical-spec
+    right: unset; // stylelint-disable-line liberty/use-logical-spec
+    transform: translateX(-50%);
+  }
+
+  &.align-start {
+    inset-inline: 0 auto;
+  }
+
+  &.align-end {
+    inset-inline: auto 0;
+  }
+}

package/src/styles/bootstrap/_forms.scss

@@ -0,0 +1,10 @@
+@use './forms/form-check';
+@use './forms/form-control';
+@use './forms/form-file';
+@use './forms/form-label';
+@use './forms/form-range';
+// not part of the design system
+// @import 'bootstrap/scss/forms/floating-labels';
+// FIXME: check if needed
+@use './forms/input-group';
+@use './forms/validation';

package/src/styles/bootstrap/_functions.scss

@@ -0,0 +1,188 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ('<', '%3c'),
+  ('>', '%3e'),
+  ('#', '%23'),
+  ('(', '%28'),
+  (')', '%29')
+) !default;
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
+      // Do nothing
+    } @else if not math.compatible($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+  @if list.length($map) > 0 {
+    $values: map.values($map);
+    $first-value: list.nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return sting.slice($string, 1, $index - 1) + $replace +
+      str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if string.index($string, 'data:image/svg+xml') {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) ==
+    number and
+    meta.type-of($value2) ==
+    number and
+    math.compatible($value1, $value2)
+  {
+    @return $value1 + $value2;
+  }
+
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} + #{$value2}),
+    $value1 + string.unquote(' + ') + $value2
+  );
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) ==
+    number and
+    meta.type-of($value2) ==
+    number and
+    math.compatible($value1, $value2)
+  {
+    @return $value1 - $value2;
+  }
+
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote('(') + $value2 + string.unquote(')');
+  }
+
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} - #{$value2}),
+    $value1 + string.unquote(' - ') + $value2
+  );
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}

package/src/styles/bootstrap/_grid.scss

@@ -0,0 +1,33 @@
+@use './mixins/grid';
+@use './variables';
+
+// Row
+//
+// Rows contain your columns.
+
+.row {
+  @include grid.make-row();
+
+  > * {
+    @include grid.make-col-ready();
+  }
+}
+
+@if variables.$enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{variables.$variable-prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(
+      var(--#{variables.$variable-prefix}columns, #{variables.$grid-columns}),
+      1fr
+    );
+    gap: var(--#{variables.$variable-prefix}gap, #{variables.$grid-gutter-width});
+
+    @include grid.make-cssgrid();
+  }
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+@include grid.make-grid-columns();

package/src/styles/bootstrap/_helpers.scss

@@ -0,0 +1,6 @@
+@use './helpers/clearfix';
+@use './helpers/stacks';
+@use './helpers/position';
+@use './helpers/visually-hidden';
+@use './helpers/stretched-link';
+@use './helpers/text-truncation';