@siemens/element-theme 47.0.0

package/src/styles/bootstrap/_tables.scss

@@ -0,0 +1,186 @@
+@use '../variables/spacers';
+@use '../variables/typography';
+@use 'mixins/breakpoints';
+@use 'mixins/table-row';
+@use 'variables';
+
+@use 'sass:map';
+
+.table {
+  // FIXME: drop these
+  --#{variables.$variable-prefix}table-bg: #{variables.$table-bg};
+  --#{variables.$variable-prefix}table-accent-bg: #{variables.$table-accent-bg};
+  --#{variables.$variable-prefix}table-striped-color: #{variables.$table-striped-color};
+  --#{variables.$variable-prefix}table-striped-bg: #{variables.$table-striped-bg};
+  --#{variables.$variable-prefix}table-active-color: #{variables.$table-active-color};
+  --#{variables.$variable-prefix}table-active-bg: #{variables.$table-active-bg};
+  --#{variables.$variable-prefix}table-hover-color: #{variables.$table-hover-color};
+  --#{variables.$variable-prefix}table-hover-bg: #{variables.$table-hover-bg};
+
+  inline-size: 100%;
+  margin-block-end: spacers.$spacer;
+  color: variables.$table-color;
+  vertical-align: variables.$table-cell-vertical-align;
+  border-color: variables.$table-border-color;
+  border-radius: variables.$border-radius;
+  background-color: var(--bs-table-bg);
+
+  // Target th & td
+  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding-block: variables.$table-cell-padding-y;
+    padding-inline: variables.$table-cell-padding-x;
+    background-color: var(--bs-table-accent-bg);
+    border-block-end-width: variables.$table-border-width;
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+
+  // Highlight border color between thead, tbody and tfoot.
+  > :not(:first-child) {
+    border-block-start: (2 * variables.$table-border-width) solid
+      variables.$table-group-separator-color;
+  }
+
+  :is(th, td) {
+    vertical-align: middle;
+
+    &:first-child {
+      padding-inline-start: map.get(spacers.$spacers, 6);
+    }
+
+    &:last-child {
+      padding-inline-end: map.get(spacers.$spacers, 6);
+    }
+  }
+
+  thead {
+    border-width: 0;
+    border-block-end: map.get(spacers.$spacers, 2) solid variables.$table-border-color;
+
+    th {
+      vertical-align: baseline;
+      font-size: typography.$si-font-size-title-2;
+      font-weight: typography.$si-font-weight-title-2;
+      line-height: typography.$si-line-height-title-2;
+    }
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        border-end-start-radius: variables.$border-radius;
+        border-end-end-radius: variables.$border-radius;
+
+        > * {
+          border-block-end: 0;
+        }
+
+        > :first-child {
+          border-end-start-radius: inherit;
+        }
+
+        > :last-child {
+          border-end-end-radius: inherit;
+        }
+      }
+    }
+
+    :is(th, td) {
+      block-size: 64px;
+    }
+  }
+}
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+  caption-side: top;
+}
+
+.table-sm {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding-block: variables.$table-cell-padding-y-sm;
+    padding-inline: variables.$table-cell-padding-x-sm;
+  }
+
+  tbody {
+    :is(th, td) {
+      block-size: 48px;
+    }
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  > tbody > tr:nth-of-type(#{variables.$table-striped-order}) > * {
+    --#{variables.$variable-prefix}table-accent-bg: var(
+      --#{variables.$variable-prefix}table-striped-bg
+    );
+    color: var(--#{variables.$variable-prefix}table-striped-color);
+  }
+}
+
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+  --#{variables.$variable-prefix}table-accent-bg: var(
+    --#{variables.$variable-prefix}table-active-bg
+  );
+  color: var(--#{variables.$variable-prefix}table-active-color);
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover > * {
+    --#{variables.$variable-prefix}table-accent-bg: var(
+      --#{variables.$variable-prefix}table-hover-bg
+    );
+    color: var(--#{variables.$variable-prefix}table-hover-color);
+  }
+}
+
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
+
+@each $color, $value in variables.$table-variants {
+  @include table-row.table-variant($color, $value);
+}
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+  @include breakpoints.media-breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}

package/src/styles/bootstrap/_tooltip.scss

@@ -0,0 +1,145 @@
+@use '../variables/zindex';
+@use './mixins/reset-text';
+@use './variables';
+
+.tooltip {
+  position: absolute;
+  z-index: zindex.$zindex-tooltip;
+  display: block;
+  margin: variables.$tooltip-margin;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text.reset-text();
+  font-size: variables.$tooltip-font-size;
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show {
+    opacity: variables.$tooltip-opacity;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    display: block;
+    inline-size: variables.$tooltip-arrow-width;
+    block-size: variables.$tooltip-arrow-height;
+
+    &::before {
+      position: absolute;
+      content: '';
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.tooltip-inner {
+  min-inline-size: 100px;
+  max-inline-size: variables.$tooltip-max-width;
+  padding-block: variables.$tooltip-padding-y;
+  padding-inline: variables.$tooltip-padding-x;
+  color: variables.$tooltip-color;
+  text-align: center;
+  background-color: variables.$tooltip-bg;
+  border-radius: variables.$tooltip-border-radius;
+}
+
+// .bs-tooltip-*: standard BS
+// .tooltip-*-*: si-tooltip with CDK overlay
+// .bs-tooltip-auto*: popper.js
+// FIXME: remove popper.js selectors in next breaking release
+
+:is(
+  .bs-tooltip-top,
+  .tooltip-start-bottom,
+  .tooltip-end-bottom,
+  .tooltip-center-bottom,
+  .bs-tooltip-auto[data-popper-placement^='top']
+) {
+  padding-block: variables.$tooltip-arrow-height;
+
+  .tooltip-arrow {
+    inset-block-end: 0;
+    margin-inline-start: (variables.$tooltip-arrow-width * -0.5);
+
+    &::before {
+      inset-block-start: -1px;
+      border-block-width: variables.$tooltip-arrow-height 0;
+      border-inline-width: (variables.$tooltip-arrow-width * 0.5);
+      border-block-start-color: variables.$tooltip-arrow-color;
+    }
+  }
+}
+
+:is(.bs-tooltip-end, .tooltip-start-center, .bs-tooltip-auto[data-popper-placement^='right']) {
+  padding-inline: variables.$tooltip-arrow-height;
+
+  .tooltip-arrow {
+    inset-inline-start: 0;
+    inline-size: variables.$tooltip-arrow-height;
+    block-size: variables.$tooltip-arrow-width;
+    margin-block-start: -0.5 * variables.$tooltip-arrow-width;
+
+    &::before {
+      inset-inline-end: -1px;
+      border-block-width: (variables.$tooltip-arrow-width * 0.5);
+      border-inline-width: 0 variables.$tooltip-arrow-height;
+      border-inline-end-color: variables.$tooltip-arrow-color;
+    }
+  }
+}
+
+:is(
+  .bs-tooltip-bottom,
+  .tooltip-start-top,
+  .tooltip-end-top,
+  .tooltip-center-top,
+  .bs-tooltip-auto[data-popper-placement^='bottom']
+) {
+  padding-block: variables.$tooltip-arrow-height;
+
+  .tooltip-arrow {
+    inset-block-start: 0;
+    margin-inline-start: (variables.$tooltip-arrow-width * -0.5);
+
+    &::before {
+      inset-block-end: -1px;
+      border-block-width: 0 variables.$tooltip-arrow-height;
+      border-inline-width: (variables.$tooltip-arrow-width * 0.5);
+      border-block-end-color: variables.$tooltip-arrow-color;
+    }
+  }
+}
+
+:is(.bs-tooltip-start, .tooltip-end-center, .bs-tooltip-auto[data-popper-placement^='left']) {
+  padding-inline: variables.$tooltip-arrow-height;
+
+  .tooltip-arrow {
+    inset-inline-end: 0;
+    inline-size: variables.$tooltip-arrow-height;
+    block-size: variables.$tooltip-arrow-width;
+    margin-block-start: -0.5 * variables.$tooltip-arrow-width;
+
+    &::before {
+      inset-inline-start: -1px;
+      border-block-width: (variables.$tooltip-arrow-width * 0.5);
+      border-inline-width: variables.$tooltip-arrow-height 0;
+      border-inline-start-color: variables.$tooltip-arrow-color;
+    }
+  }
+}
+
+// center arrow in block direction
+:is(.tooltip-start-center, .tooltip-end-center) {
+  .tooltip-arrow {
+    inset-block-start: 50%;
+  }
+}
+
+// center arrow in inline direction
+:is(.tooltip-center-top, .tooltip-center-bottom) {
+  .tooltip-arrow {
+    inset-inline-start: 50%;
+  }
+}

package/src/styles/bootstrap/_transitions.scss

@@ -0,0 +1,28 @@
+@use './mixins/transition';
+@use './variables';
+
+.fade {
+  @include transition.transition(variables.$transition-fade);
+
+  &:not(.show) {
+    opacity: 0;
+  }
+}
+
+.collapse {
+  &:not(.show) {
+    display: none;
+  }
+}
+
+.collapsing {
+  block-size: 0;
+  overflow: hidden;
+  @include transition.transition(variables.$transition-collapse);
+
+  &.collapse-horizontal {
+    inline-size: 0;
+    block-size: auto;
+    @include transition.transition(variables.$transition-collapse-width);
+  }
+}

package/src/styles/bootstrap/_type.scss

@@ -0,0 +1,235 @@
+@use '../variables/typography';
+@use './mixins/lists';
+@use './variables';
+
+// used for @extend to work
+@use './reboot';
+
+//
+// Headings
+//
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
+
+.h6 {
+  @extend h6;
+}
+
+.lead {
+  font-size: variables.$lead-font-size;
+  font-weight: variables.$lead-font-weight;
+}
+
+//
+// Emphasis
+//
+.small {
+  @extend small;
+}
+
+.mark {
+  @extend mark;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include lists.list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include lists.list-unstyled();
+}
+
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-inline-end: variables.$list-inline-padding;
+  }
+}
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+  font-size: variables.$initialism-font-size;
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  margin-block-end: variables.$blockquote-margin-y;
+  font-size: variables.$blockquote-font-size;
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+}
+
+.blockquote-footer {
+  margin-block: -(variables.$blockquote-margin-y) variables.$blockquote-margin-y;
+  font-size: variables.$blockquote-footer-font-size;
+  color: variables.$blockquote-footer-color;
+
+  &::before {
+    content: '\2014\00A0'; // em dash, nbsp
+  }
+}
+
+h1,
+.h1,
+.si-h1 {
+  @include typography.si-font(
+    typography.$si-font-size-h1,
+    typography.$si-line-height-h1,
+    typography.$si-font-weight-h1
+  );
+}
+
+.si-h1-black {
+  @include typography.si-font(
+    typography.$si-font-size-h1-black,
+    typography.$si-line-height-h1-black,
+    typography.$si-font-weight-h1-black
+  );
+}
+
+h2,
+.h2,
+.si-h2 {
+  @include typography.si-font(
+    typography.$si-font-size-h2,
+    typography.$si-line-height-h2,
+    typography.$si-font-weight-h2
+  );
+}
+
+h3,
+.h3,
+.si-h3 {
+  @include typography.si-font(
+    typography.$si-font-size-h3,
+    typography.$si-line-height-h3,
+    typography.$si-font-weight-h3
+  );
+}
+
+h4,
+h5,
+h6,
+.h4,
+.h5,
+.h6 {
+  @include typography.si-font(
+    typography.$si-font-size-body-1,
+    typography.$si-line-height-body-1,
+    typography.$si-font-weight-body-1
+  );
+}
+
+.si-title-1 {
+  @include typography.si-font(
+    typography.$si-font-size-title-1,
+    typography.$si-line-height-title-1,
+    typography.$si-font-weight-title-1
+  );
+}
+
+.si-body-1 {
+  @include typography.si-font(
+    typography.$si-font-size-body-1,
+    typography.$si-line-height-body-1,
+    typography.$si-font-weight-body-1
+  );
+}
+
+.si-title-2 {
+  @include typography.si-font(
+    typography.$si-font-size-title-2,
+    typography.$si-line-height-title-2,
+    typography.$si-font-weight-title-2
+  );
+}
+
+.si-body-2 {
+  @include typography.si-font(
+    typography.$si-font-size-body-2,
+    typography.$si-line-height-body-2,
+    typography.$si-font-weight-body-2
+  );
+}
+
+.si-caption {
+  @include typography.si-font(
+    typography.$si-font-size-caption-1,
+    typography.$si-line-height-caption-1,
+    typography.$si-font-weight-caption-1
+  );
+}
+
+.display-1,
+.si-display-1 {
+  @include typography.si-font(
+    typography.$si-font-size-display-1,
+    typography.$si-line-height-display-1,
+    typography.$si-font-weight-display-1
+  );
+}
+
+.display-2,
+.si-display-2 {
+  @include typography.si-font(
+    typography.$si-font-size-display-2,
+    typography.$si-line-height-display-2,
+    typography.$si-font-weight-display-2
+  );
+}
+
+.display-3,
+.si-display-3 {
+  @include typography.si-font(
+    typography.$si-font-size-display-3,
+    typography.$si-line-height-display-3,
+    typography.$si-font-weight-display-3
+  );
+}
+
+.display-4,
+.si-display-4 {
+  @include typography.si-font(
+    typography.$si-font-size-display-4,
+    typography.$si-line-height-display-4,
+    typography.$si-font-weight-display-4
+  );
+}
+
+.text-pre {
+  white-space: pre;
+}
+
+.text-pre-wrap {
+  white-space: pre-wrap;
+}

package/src/styles/bootstrap/_utilities.scss

@@ -0,0 +1,105 @@
+@use '../variables/semantic-tokens';
+@use '../variables/utilities' as variables-utilities;
+@use 'mixins/breakpoints';
+@use 'mixins/utilities' as mixins-utilities;
+@use 'variables';
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// Loop over each breakpoint
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  // Generate media query if needed
+  @include breakpoints.media-breakpoint-up($breakpoint) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in variables-utilities.$utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
+        @include mixins-utilities.generate-utility($utility, $infix);
+      }
+    }
+  }
+}
+
+// Print utilities
+@media print {
+  @each $key, $utility in variables-utilities.$utilities {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Then check if the utility needs print styles
+    @if meta.type-of($utility) == 'map' and map.get($utility, print) == true {
+      @include mixins-utilities.generate-utility($utility, '-print');
+    }
+  }
+}
+
+$text-colors: (
+  'primary': semantic-tokens.$element-text-active,
+  'body': semantic-tokens.$element-text-primary,
+  'secondary': semantic-tokens.$element-text-secondary,
+  'tertiary': semantic-tokens.$element-text-disabled,
+  'success': semantic-tokens.$element-text-success,
+  'info': semantic-tokens.$element-text-information,
+  'warning': semantic-tokens.$element-text-warning,
+  'caution': semantic-tokens.$element-text-caution,
+  'danger': semantic-tokens.$element-text-danger,
+  'inverse': semantic-tokens.$element-text-inverse,
+  'muted': semantic-tokens.$element-text-disabled
+) !default;
+
+@each $color, $value in $text-colors {
+  .text-#{$color} {
+    color: #{$value} !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+$background-colors: (
+  'primary': semantic-tokens.$element-ui-0,
+  'secondary': semantic-tokens.$element-text-secondary,
+  'tertiary': semantic-tokens.$element-text-disabled,
+  'success': semantic-tokens.$element-status-success,
+  'info': semantic-tokens.$element-status-information,
+  'warning': semantic-tokens.$element-status-warning,
+  'danger': semantic-tokens.$element-status-danger,
+  'base-0': semantic-tokens.$element-base-0,
+  'base-1': semantic-tokens.$element-base-1,
+  'base-2': semantic-tokens.$element-base-2,
+  'base-3': semantic-tokens.$element-base-3,
+  'base-success': semantic-tokens.$element-base-success,
+  'base-info': semantic-tokens.$element-base-information,
+  'base-caution': semantic-tokens.$element-base-caution,
+  'base-warning': semantic-tokens.$element-base-warning,
+  'base-danger': semantic-tokens.$element-base-danger,
+  'base-translucent-1': semantic-tokens.$element-base-translucent-1,
+  'base-translucent-2': semantic-tokens.$element-base-translucent-2
+) !default;
+
+@each $color, $value in $background-colors {
+  .bg-#{$color} {
+    background: #{$value} !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+$status-colors: (
+  'success': semantic-tokens.$element-status-success,
+  'info': semantic-tokens.$element-status-information,
+  'caution': semantic-tokens.$element-status-caution,
+  'warning': semantic-tokens.$element-status-warning,
+  'danger': semantic-tokens.$element-status-danger,
+  'critical': semantic-tokens.$element-status-critical,
+  'neutral': semantic-tokens.$element-ui-4,
+  'success-contrast': semantic-tokens.$element-status-success-contrast,
+  'info-contrast': semantic-tokens.$element-status-information-contrast,
+  'caution-contrast': semantic-tokens.$element-status-caution-contrast,
+  'warning-contrast': semantic-tokens.$element-status-warning-contrast,
+  'danger-contrast': semantic-tokens.$element-status-danger-contrast,
+  'critical-contrast': semantic-tokens.$element-status-critical-contrast
+) !default;
+
+@each $color, $value in $status-colors {
+  .status-#{$color} {
+    color: #{$value} !important; // stylelint-disable-line declaration-no-important
+  }
+}