@siemens/element-theme 47.0.0

package/src/styles/components/_skeleton.scss

@@ -0,0 +1,42 @@
+@use '../variables/animations';
+@use '../variables/semantic-tokens';
+
+@keyframes shimmer {
+  to {
+    background-position-x: -100%;
+  }
+}
+
+.si-skeleton {
+  display: inline-block;
+  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%
+  );
+  background-size: 200% 100%;
+  background-position-x: 100%;
+  border-radius: semantic-tokens.$element-button-radius;
+  animation: shimmer animations.element-transition-duration(1.6s) ease-in-out infinite;
+  cursor: wait;
+
+  &.btn::before {
+    display: inline-block;
+    content: '';
+  }
+}
+
+// Sizing
+.si-skeleton-xs {
+  min-block-size: 0.6em;
+}
+
+.si-skeleton-sm {
+  min-block-size: 0.8em;
+}
+
+.si-skeleton-lg {
+  min-block-size: 1.2em;
+}

package/src/styles/components/_switch.scss

@@ -0,0 +1,77 @@
+@use '../variables';
+
+@use 'sass:map';
+
+$si-switch-size: 20px !default;
+$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-slider-margin: 4px !default;
+$si-switch-slider-off-color: variables.$element-ui-2 !default;
+$si-switch-slider-on-color: variables.$element-ui-5 !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});
+
+.form-switch {
+  padding-block: map.get(variables.$spacers, 1);
+
+  .form-check-input {
+    cursor: pointer;
+    position: relative;
+    inset: 0;
+    margin-inline: 0 map.get(variables.$spacers, 3);
+    margin-block: - map.get(variables.$spacers, 1);
+    inline-size: calc(
+      2 * #{$si-switch-size}
+    ) !important; // stylelint-disable-line declaration-no-important
+    block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
+    background-color: $si-switch-background-off-color;
+    transition: $si-switch-transition-length;
+    border: 0;
+    border-radius: #{$si-switch-size};
+    appearance: none;
+
+    &::before {
+      position: absolute;
+      content: '';
+      block-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
+      inline-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
+      inset-inline-start: $si-switch-slider-margin;
+      inset-block-end: $si-switch-slider-margin;
+      background-color: $si-switch-slider-off-color;
+      transition: $si-switch-transition-length;
+      border-radius: 50%;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &:hover {
+      background-color: variables.$element-ui-4;
+    }
+
+    &:is(:checked, .checked) {
+      background-color: $si-switch-background-on-color;
+
+      &:hover {
+        background-color: variables.$element-ui-0-hover;
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: $si-switch-background-on-color;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      cursor: default;
+      opacity: 0.5;
+    }
+
+    &:is(:checked, .checked)::before {
+      inset-inline-start: calc(#{$si-switch-slider-margin} + #{$si-switch-size});
+      background-color: $si-switch-slider-on-color;
+    }
+  }
+}

package/src/styles/components/_system-banner.scss

@@ -0,0 +1,5 @@
+@use '../variables';
+
+.has-system-banner {
+  --element-system-banner-spacing: #{variables.$si-system-banner-height};
+}

package/src/styles/components/_widgets.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+
+@use '../variables';
+
+// used for @extend to work
+@use '../bootstrap/type';
+@use './skeleton';
+
+.si-value-widget-value {
+  @extend .si-display-3;
+  display: inline-block;
+  min-block-size: variables.$si-font-size-display-3 * variables.$si-line-height-display-3;
+}
+
+/**
+* Defines a skeleton that has the height of the font-size and does not include
+* the line height.
+*/
+.si-value-widget-value-skeleton {
+  @extend .si-display-3;
+  @extend .si-skeleton;
+  display: inline-block;
+  block-size: variables.$si-font-size-display-3;
+  vertical-align: middle;
+  inline-size: 100%;
+}
+
+.si-value-widget-unit {
+  @extend .si-body-1;
+  display: inline-block;
+  margin-inline-start: map.get(variables.$spacers, 2);
+}
+
+.si-value-widget-description {
+  display: flex;
+  align-items: center;
+  gap: map.get(variables.$spacers, 2);
+  margin-block-start: map.get(variables.$spacers, 2);
+  min-block-size: variables.$si-icon-font-size;
+}
+
+.si-link-widget {
+  display: flex;
+  flex-direction: column;
+  gap: map.get(variables.$spacers, 4);
+}
+
+.si-link-widget-skeleton {
+  @extend .si-skeleton;
+  block-size: calc(variables.$si-font-size-body-2 * variables.$si-line-height-body-2);
+  inline-size: 100%;
+}
+
+.si-timeline-widget-item-lower-line {
+  inline-size: 1px;
+  block-size: 100%;
+  background-color: variables.$element-ui-4;
+}

package/src/styles/variables/_animations.scss

@@ -0,0 +1,7 @@
+// transition-duration that can be disabled by settings
+// :root { --element-animations-enabled: 0; }
+@function element-transition-duration($duration) {
+  @return calc($duration * var(--element-animations-enabled, 1));
+}
+
+$element-default-transition-duration: element-transition-duration(0.5s);

package/src/styles/variables/_elevation.scss

@@ -0,0 +1,25 @@
+$element-elevation-1:
+  0 0 4px var(--element-box-shadow-color-1),
+  0 4px 4px var(--element-box-shadow-color-2);
+$element-elevation-2:
+  0 0 8px var(--element-box-shadow-color-1),
+  0 8px 8px var(--element-box-shadow-color-2);
+$element-elevation-3:
+  0 0 16px var(--element-box-shadow-color-1),
+  0 16px 16px var(--element-box-shadow-color-2);
+$element-elevation-4:
+  0 0 32px var(--element-box-shadow-color-1),
+  0 32px 32px var(--element-box-shadow-color-2);
+
+$element-elevation-inset-1:
+  inset 0 0 4px var(--element-box-shadow-color-1),
+  inset 0 4px 4px var(--element-box-shadow-color-2);
+$element-elevation-inset-2:
+  inset 0 0 8px var(--element-box-shadow-color-1),
+  inset 0 8px 8px var(--element-box-shadow-color-2);
+$element-elevation-inset-3:
+  inset 0 0 16px var(--element-box-shadow-color-1),
+  inset 0 16px 16px var(--element-box-shadow-color-2);
+$element-elevation-inset-4:
+  inset 0 0 32px var(--element-box-shadow-color-1),
+  inset 0 32px 32px var(--element-box-shadow-color-2);

package/src/styles/variables/_focus.scss

@@ -0,0 +1,55 @@
+@use 'semantic-tokens';
+
+// Building focus< with outline
+$focus-style-outline: semantic-tokens.$element-button-focus-width solid
+  semantic-tokens.$element-focus-default;
+$focus-style-outline-offset: semantic-tokens.$element-button-focus-overlay-width;
+$focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-focus-width});
+
+@mixin make-outline-focus() {
+  outline: $focus-style-outline;
+  outline-offset: $focus-style-outline-offset;
+}
+
+@mixin make-outline-focus-inside {
+  outline: $focus-style-outline;
+  outline-offset: $focus-style-outline-inside-offset;
+}
+
+// legacy box-shadow focus
+
+@function make-focus($focus-color) {
+  $focus-width: calc(
+    semantic-tokens.$element-button-focus-width +
+      semantic-tokens.$element-button-focus-overlay-width
+  );
+  $focus-overlay: 0 0 0 semantic-tokens.$element-button-focus-overlay-width
+    semantic-tokens.$element-button-focus-overlay-color;
+
+  @return $focus-overlay, 0 0 0 $focus-width $focus-color;
+}
+
+// same as make-focus, but with an additional offset for things that use box-shadow as border
+// e.g. the textarea
+@function make-focus-with-offset($focus-color, $offset) {
+  $focus-width: calc(
+    semantic-tokens.$element-button-focus-width +
+      semantic-tokens.$element-button-focus-overlay-width + $offset
+  );
+  $focus-overlay: 0 0 0 calc(semantic-tokens.$element-button-focus-overlay-width + $offset)
+    semantic-tokens.$element-button-focus-overlay-color;
+
+  @return $focus-overlay, 0 0 0 $focus-width $focus-color;
+}
+
+@function make-focus-inside($focus-color) {
+  $focus-width: calc(
+    semantic-tokens.$element-button-focus-width +
+      semantic-tokens.$element-button-focus-overlay-width
+  );
+
+  @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);

package/src/styles/variables/_layout.scss

@@ -0,0 +1,6 @@
+@mixin si-layout-fixed-height() {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+}

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

@@ -0,0 +1,178 @@
+// Semantic tokens defined by the theme
+
+$element-ui-0: var(--element-ui-0);
+$element-ui-0-hover: var(--element-ui-0-hover);
+$element-ui-1: var(--element-ui-1);
+$element-ui-2: var(--element-ui-2);
+$element-ui-3: var(--element-ui-3);
+$element-ui-4: var(--element-ui-4);
+$element-ui-5: var(--element-ui-5);
+$element-ui-6: var(--element-ui-6);
+
+$element-base-0: var(--element-base-0);
+$element-base-1: var(--element-base-1);
+$element-base-1-hover: var(--element-base-1-hover);
+$element-base-1-selected: var(--element-base-1-selected);
+$element-base-2: var(--element-base-2);
+$element-base-3: var(--element-base-3);
+$element-base-information: var(--element-base-information);
+$element-base-success: var(--element-base-success);
+$element-base-caution: var(--element-base-caution);
+$element-base-warning: var(--element-base-warning);
+$element-base-danger: var(--element-base-danger);
+$element-base-translucent-1: var(--element-base-translucent-1);
+$element-base-translucent-2: var(--element-base-translucent-2);
+
+$element-radius-0: var(--element-radius-0);
+$element-radius-1: var(--element-radius-1);
+$element-radius-2: var(--element-radius-2);
+$element-radius-3: var(--element-radius-3);
+
+$element-action-primary: var(--element-action-primary);
+$element-action-primary-hover: var(--element-action-primary-hover);
+$element-action-primary-text: var(--element-action-primary-text);
+$element-action-secondary: var(--element-action-secondary);
+$element-action-secondary-hover: var(--element-action-secondary-hover);
+$element-action-secondary-text: var(--element-action-secondary-text);
+$element-action-secondary-text-hover: var(--element-action-secondary-text-hover);
+$element-action-secondary-border: var(--element-action-secondary-border);
+$element-action-secondary-border-hover: var(--element-action-secondary-border-hover);
+$element-action-secondary-warning: var(--element-action-secondary-warning);
+$element-action-secondary-danger: var(--element-action-secondary-danger);
+$element-action-warning: var(--element-action-warning);
+$element-action-warning-hover: var(--element-action-warning-hover);
+$element-action-warning-text: var(--element-action-warning-text);
+$element-action-danger: var(--element-action-danger);
+$element-action-danger-hover: var(--element-action-danger-hover);
+$element-action-danger-text: var(--element-action-danger-text);
+$element-action-disabled-opacity: var(--element-action-disabled-opacity);
+
+$element-text-primary: var(--element-text-primary);
+$element-text-secondary: var(--element-text-secondary);
+$element-text-disabled: var(--element-text-disabled);
+$element-text-inverse: var(--element-text-inverse);
+$element-text-active: var(--element-text-active);
+$element-text-information: var(--element-text-information);
+$element-text-success: var(--element-text-success);
+$element-text-caution: var(--element-text-caution);
+$element-text-warning: var(--element-text-warning);
+$element-text-danger: var(--element-text-danger);
+
+$element-status-information: var(--element-status-information);
+$element-status-information-contrast: var(--element-status-information-contrast);
+$element-status-success: var(--element-status-success);
+$element-status-success-contrast: var(--element-status-success-contrast);
+$element-status-caution: var(--element-status-caution);
+$element-status-caution-contrast: var(--element-status-caution-contrast);
+$element-status-warning: var(--element-status-warning);
+$element-status-warning-contrast: var(--element-status-warning-contrast);
+$element-status-danger: var(--element-status-danger);
+$element-status-danger-contrast: var(--element-status-danger-contrast);
+$element-status-critical: var(--element-status-critical);
+$element-status-critical-contrast: var(--element-status-critical-contrast);
+
+$element-focus-default: var(--element-focus-default);
+
+$element-button-radius: var(--element-button-radius);
+$element-button-focus-width: var(--element-button-focus-width);
+$element-button-focus-overlay-width: var(--element-button-focus-overlay-width);
+$element-button-focus-overlay-color: var(--element-button-focus-overlay-color);
+$element-input-radius: var(--element-input-radius);
+
+$element-brand-logo: var(--element-brand-logo);
+$element-brand-logo-width: var(--element-brand-logo-width);
+$element-brand-logo-height: var(--element-brand-logo-height);
+$element-brand-logo-text: var(--element-brand-logo-text);
+
+// Additional semantic colors defined by the theme for domain specific use cases
+
+$element-color-cooling: var(--element-color-cooling);
+$element-color-heating: var(--element-color-heating);
+$element-color-comfort: var(--element-color-comfort);
+$element-color-economy: var(--element-color-economy);
+$element-color-off: var(--element-color-off);
+$element-color-on: var(--element-color-on);
+$element-color-default: var(--element-color-default);
+
+$element-color-passed: var(--element-color-passed);
+$element-color-failed: var(--element-color-failed);
+
+$element-color-bad: var(--element-color-bad);
+$element-color-poor: var(--element-color-poor);
+$element-color-average: var(--element-color-average);
+$element-color-good: var(--element-color-good);
+$element-color-excellent: var(--element-color-excellent);
+
+$element-range-danger: var(--element-gradient-danger);
+$element-range-warning: var(--element-gradient-warning);
+$element-range-caution: var(--element-gradient-caution);
+$element-range-information: var(--element-gradient-information);
+$element-range-success: var(--element-gradient-success);
+$element-range-temp-heating: var(--element-gradient-temp-heating);
+$element-range-temp-cooling: var(--element-gradient-temp-cooling);
+$element-range-comfort: var(--element-gradient-comfort);
+
+$element-range-temperature: var(--element-gradient-temperature);
+$element-range-humidity: var(--element-gradient-humidity);
+
+$element-data-1: var(--element-data-1);
+$element-data-2: var(--element-data-2);
+$element-data-3: var(--element-data-3);
+$element-data-4: var(--element-data-4);
+$element-data-5: var(--element-data-5);
+$element-data-6: var(--element-data-6);
+$element-data-7: var(--element-data-7);
+$element-data-8: var(--element-data-8);
+$element-data-9: var(--element-data-9);
+$element-data-10: var(--element-data-10);
+$element-data-11: var(--element-data-11);
+$element-data-12: var(--element-data-12);
+$element-data-13: var(--element-data-13);
+$element-data-14: var(--element-data-14);
+$element-data-15: var(--element-data-15);
+$element-data-16: var(--element-data-16);
+$element-data-17: var(--element-data-17);
+
+$element-data-green-1: var(--element-data-green-1);
+$element-data-green-2: var(--element-data-green-2);
+$element-data-green-3: var(--element-data-green-3);
+$element-data-green-4: var(--element-data-green-4);
+
+$element-data-turquoise-1: var(--element-data-turquoise-1);
+$element-data-turquoise-2: var(--element-data-turquoise-2);
+$element-data-turquoise-3: var(--element-data-turquoise-3);
+$element-data-turquoise-4: var(--element-data-turquoise-4);
+
+$element-data-interactive-coral-1: var(--element-data-interactive-coral-1);
+$element-data-interactive-coral-2: var(--element-data-interactive-coral-2);
+$element-data-interactive-coral-3: var(--element-data-interactive-coral-3);
+$element-data-interactive-coral-4: var(--element-data-interactive-coral-4);
+
+$element-data-purple-1: var(--element-data-purple-1);
+$element-data-purple-2: var(--element-data-purple-2);
+$element-data-purple-3: var(--element-data-purple-3);
+$element-data-purple-4: var(--element-data-purple-4);
+
+$element-data-plum-1: var(--element-data-plum-1);
+$element-data-plum-2: var(--element-data-plum-2);
+$element-data-plum-3: var(--element-data-plum-3);
+$element-data-plum-4: var(--element-data-plum-4);
+
+$element-data-red-1: var(--element-data-red-1);
+$element-data-red-2: var(--element-data-red-2);
+$element-data-red-3: var(--element-data-red-3);
+$element-data-red-4: var(--element-data-red-4);
+
+$element-data-orange-1: var(--element-data-orange-1);
+$element-data-orange-2: var(--element-data-orange-2);
+$element-data-orange-3: var(--element-data-orange-3);
+$element-data-orange-4: var(--element-data-orange-4);
+
+$element-data-sand-1: var(--element-data-sand-1);
+$element-data-sand-2: var(--element-data-sand-2);
+$element-data-sand-3: var(--element-data-sand-3);
+$element-data-sand-4: var(--element-data-sand-4);
+
+$element-feedback-icon-invalid: var(--element-feedback-icon-invalid);
+$element-feedback-icon-warning: var(--element-feedback-icon-warning);
+$element-feedback-icon-valid: var(--element-feedback-icon-valid);

package/src/styles/variables/_si-vars.scss

@@ -0,0 +1,19 @@
+@use './animations';
+
+// Custom variables
+$si-caret-transition-duration: animations.element-transition-duration(0.4s);
+$si-icon-font-size: 1.5rem;
+$si-icon-font-size-small: 1rem;
+
+$btn-width-normal: 100px;
+
+// Component styling
+$si-application-header-height: 48px;
+
+$si-titlebar-height: 36px;
+$si-system-banner-height: 20px;
+
+// allows adding a custom titlebar on top
+// stylelint-disable-next-line length-zero-no-unit
+$si-titlebar-spacing: var(--element-titlebar-spacing, 0px);
+$si-system-banner-spacing: var(--element-system-banner-spacing, 0px);

package/src/styles/variables/_spacers.scss

@@ -0,0 +1,28 @@
+$spacer: 16px;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: (
+  0: 0,
+  // 2px
+  1: $spacer * 0.125,
+  // 4px
+  2: $spacer * 0.25,
+  // 6px
+  3: $spacer * 0.375,
+  // 8px
+  4: $spacer * 0.5,
+  // 12px
+  5: $spacer * 0.75,
+  // 16px
+  6: $spacer,
+  // 20px
+  7: $spacer * 1.25,
+  // 24px
+  8: $spacer * 1.5,
+  // 32px
+  9: $spacer * 2,
+  // 64px
+  10: $spacer * 4,
+  // 96px
+  11: $spacer * 6
+);

package/src/styles/variables/_typography.scss

@@ -0,0 +1,66 @@
+@mixin si-font($font-size, $line-height, $font-weight) {
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+}
+
+$si-font-family: 'Siemens Sans', sans-serif;
+
+$si-font-weight-lighter: lighter !default;
+$si-font-weight-light: 300 !default;
+$si-font-weight-normal: normal !default;
+$si-font-weight-bold: bold !default;
+$si-font-weight-bolder: bolder !default;
+$si-font-weight-black: 900 !default;
+
+$si-font-size-h1: 1.85rem;
+$si-line-height-h1: 1.067;
+$si-font-weight-h1: $si-font-weight-normal;
+
+$si-font-size-h1-black: $si-font-size-h1;
+$si-line-height-h1-black: $si-line-height-h1;
+$si-font-weight-h1-black: $si-font-weight-black;
+
+$si-font-size-h2: 1.25rem;
+$si-line-height-h2: 1.2;
+$si-font-weight-h2: $si-font-weight-normal;
+
+$si-font-size-h3: 1.125rem;
+$si-line-height-h3: 1.111;
+$si-font-weight-h3: $si-font-weight-bold;
+
+$si-font-size-title-1: 1rem;
+$si-line-height-title-1: 1.125;
+$si-font-weight-title-1: $si-font-weight-bold;
+
+$si-font-size-body-1: 1rem;
+$si-line-height-body-1: 1.125;
+$si-font-weight-body-1: $si-font-weight-normal;
+
+$si-font-size-title-2: 0.875rem;
+$si-line-height-title-2: 1.143;
+$si-font-weight-title-2: $si-font-weight-bold;
+
+$si-font-size-body-2: 0.875rem;
+$si-line-height-body-2: 1.143;
+$si-font-weight-body-2: $si-font-weight-normal;
+
+$si-font-size-caption-1: 0.75rem;
+$si-line-height-caption-1: 1.333;
+$si-font-weight-caption-1: $si-font-weight-normal;
+
+$si-font-size-display-1: 3.5rem;
+$si-line-height-display-1: 4.5rem;
+$si-font-weight-display-1: $si-font-weight-normal;
+
+$si-font-size-display-2: 3rem;
+$si-line-height-display-2: 4rem;
+$si-font-weight-display-2: $si-font-weight-normal;
+
+$si-font-size-display-3: 2.5rem;
+$si-line-height-display-3: 1.3;
+$si-font-weight-display-3: $si-font-weight-black;
+
+$si-font-size-display-4: 2.5rem;
+$si-line-height-display-4: 1.3;
+$si-font-weight-display-4: $si-font-weight-normal;