@siemens/element-theme 47.0.0

package/src/styles/components/_datatable.scss

@@ -0,0 +1,328 @@
+@use '../bootstrap/mixins/text-truncate';
+@use '../bootstrap/variables';
+@use '../variables/animations';
+@use '../variables/focus';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use '../variables/utilities';
+
+@use 'sass:map';
+
+$datatable-header-border-color: variables.$table-border-color !default;
+$datatable-header-background-color: transparent !default;
+$datatable-header-color: semantic-tokens.$element-text-primary !default;
+$datatable-footer-background-color: transparent !default;
+
+$datatable-header-height: 40px !default;
+$datatable-cell-min-width: 40px !default;
+$datatable-body-row-min-height: 48px !default;
+
+$datatable-ghost-cell-container-background: variables.$table-bg !default;
+
+$datatable-ghost-cell-strip-background: semantic-tokens.$element-base-1-hover !default;
+$datatable-ghost-cell-strip-background-image: linear-gradient(
+  90deg,
+  semantic-tokens.$element-base-1-hover 0%,
+  semantic-tokens.$element-base-1-selected 25%,
+  semantic-tokens.$element-base-1-hover 50%
+) !default;
+$datatable-ghost-cell-strip-radius: 0 !default;
+
+.ngx-datatable {
+  .ghost-cell-container {
+    background: $datatable-ghost-cell-container-background;
+  }
+
+  .ghost-cell-strip {
+    background: $datatable-ghost-cell-strip-background;
+    background-image: $datatable-ghost-cell-strip-background-image;
+  }
+}
+
+.ngx-datatable.table-element {
+  background-color: variables.$table-bg;
+  border-radius: semantic-tokens.$element-radius-2;
+
+  &.table-custom {
+    --si-datatable-row-min-height: 24px;
+  }
+
+  // any kind of selection: apply a row hover state
+  &:is(
+      .single-selection,
+      .multi-selection,
+      .multi-click-selection,
+      .cell-selection,
+      .checkbox-selection
+    ) {
+    .datatable-row-wrapper {
+      &:hover {
+        background-color: variables.$table-hover-bg;
+      }
+    }
+  }
+
+  // any selection type but 'cell'
+  &:is(.single-selection, .multi-selection, .multi-click-selection, .checkbox-selection) {
+    .datatable-body-row {
+      &.active {
+        &,
+        .datatable-row-group {
+          background-color: variables.$table-active-bg;
+        }
+      }
+    }
+  }
+
+  // solely 'cell' selection type
+  &.cell-selection {
+    .datatable-body-cell {
+      &.active,
+      &.active .datatable-row-group,
+      &:focus,
+      &:focus .datatable-row-group {
+        background-color: variables.$table-active-bg;
+      }
+    }
+  }
+
+  // not 'cell' selection type
+  &:not(.cell-selection) {
+    .datatable-body-row {
+      &:focus,
+      &:focus .datatable-row-group {
+        background-color: variables.$table-active-bg;
+      }
+    }
+  }
+
+  // 'checkbox' selection
+  :is(.datatable-header-cell, .datatable-body-cell) {
+    label.datatable-checkbox {
+      display: inline-flex;
+      inline-size: 13px;
+      block-size: 13px;
+      margin-block: 0;
+      margin-inline: 0 map.get(spacers.$spacers, 6);
+      position: relative;
+
+      > input {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+    }
+  }
+
+  .datatable-header-cell {
+    label.datatable-checkbox {
+      > input {
+        inset-block: 0;
+      }
+    }
+  }
+
+  // Global Row Styles
+  :is(.datatable-header, .datatable-body) {
+    ghost-loader:not(.ghost-overlay) {
+      display: flex;
+      flex: 1 1 0;
+
+      :is(.ghost-cell-strip, .ghost-element, .ghost-loader) {
+        display: flex;
+        flex: 1 1 0;
+        inline-size: unset !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+
+    .ghost-cell-strip {
+      animation-name: shimmer !important; // stylelint-disable-line declaration-no-important
+      animation-duration: animations.element-transition-duration(
+        1.6s
+      ) !important; // stylelint-disable-line declaration-no-important
+      animation-timing-function: ease-in-out !important; // stylelint-disable-line declaration-no-important
+      background-size: 200% 100%;
+      background-position-x: 100%;
+    }
+
+    :is(.datatable-header-cell, .datatable-body-cell) {
+      display: flex;
+      align-items: center;
+      padding-block: 0;
+      padding-inline: 4px;
+      min-inline-size: $datatable-cell-min-width;
+      line-height: typography.$si-line-height-body-2;
+
+      > div {
+        padding: 4px;
+      }
+
+      &:first-child {
+        padding-inline-start: map.get(spacers.$spacers, 5);
+      }
+
+      &:last-child {
+        padding-inline-end: map.get(spacers.$spacers, 5);
+      }
+    }
+
+    .datatable-header-cell {
+      .datatable-header-cell-template-wrap {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+
+        .datatable-header-cell-wrapper {
+          @include text-truncate.text-truncate;
+        }
+      }
+    }
+  }
+
+  // Header Styles
+  .datatable-header {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    border-block-end: 4px solid $datatable-header-border-color;
+    background-color: $datatable-header-background-color;
+    color: $datatable-header-color;
+    block-size: $datatable-header-height;
+    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;
+    user-select: none;
+
+    .sort-btn {
+      color: $datatable-header-color !important; // stylelint-disable-line declaration-no-important
+    }
+
+    // Resizable handle
+    .resizeable:hover {
+      .resize-handle {
+        background-color: semantic-tokens.$element-base-0;
+        inline-size: 2px;
+        border-radius: 2px;
+        padding-block: 0;
+        padding-inline: 2px;
+      }
+    }
+
+    :is(.datatable-row-left, .datatable-row-right) {
+      background-color: variables.$table-bg;
+      display: flex;
+
+      .datatable-header-cell {
+        flex-shrink: 0;
+      }
+    }
+
+    .datatable-header-cell:focus-visible {
+      @include focus.make-outline-focus();
+    }
+  }
+
+  // Body Styles
+  .datatable-body {
+    .datatable-row-wrapper {
+      min-block-size: var(--si-datatable-row-min-height, #{$datatable-body-row-min-height});
+      justify-content: center;
+      padding: 0;
+      inline-size: 100%;
+    }
+
+    .datatable-body-row {
+      border-block-end: 1px solid $datatable-header-border-color;
+      inline-size: 100% !important; // stylelint-disable-line declaration-no-important
+      min-inline-size: fit-content;
+
+      .datatable-body-cell-label {
+        overflow: inherit;
+        text-overflow: ellipsis;
+      }
+
+      &:hover:not(.active) {
+        background-color: variables.$table-hover-bg;
+
+        :is(.datatable-row-left, .datatable-row-right) {
+          background-color: variables.$table-hover-bg;
+        }
+      }
+
+      :is(.datatable-row-left, .datatable-row-right) {
+        background-color: variables.$table-bg;
+      }
+    }
+
+    .datatable-body-cell,
+    .datatable-body-row {
+      &:focus-visible {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          content: '';
+          inset: 0;
+          z-index: 9;
+          pointer-events: none; // Otherwise this can block mouse events if the focus is on a row/cell.
+          @include focus.make-outline-focus-inside();
+        }
+      }
+    }
+  }
+
+  // Footer Styles
+  .datatable-footer {
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    align-content: flex-end;
+    background-color: $datatable-footer-background-color;
+    color: semantic-tokens.$element-text-secondary;
+    font-size: typography.$si-font-size-caption-1;
+    margin-block-start: -4px;
+    position: relative;
+    z-index: 11;
+
+    .datatable-footer-inner {
+      background-color: variables.$table-bg;
+      padding-inline-start: map.get(spacers.$spacers, 6);
+      padding-inline-end: map.get(spacers.$spacers, 4);
+      position: relative;
+
+      &::before {
+        position: absolute;
+        content: '';
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inline-size: 100%;
+        block-size: 1px;
+        background-color: var(--element-base-0);
+      }
+    }
+  }
+
+  > div {
+    block-size: unset !important; // stylelint-disable-line declaration-no-important
+    min-block-size: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Tree view icon styles
+  .datatable-tree-button {
+    border: 0;
+    background: none;
+    margin-inline: map.get(spacers.$spacers, 2);
+    padding: 0;
+
+    &[disabled] {
+      display: none;
+    }
+
+    &:focus-visible {
+      @include focus.make-outline-focus-inside();
+    }
+  }
+}

package/src/styles/components/_drag_drop.scss

@@ -0,0 +1,105 @@
+@use '../variables';
+
+/* stylelint-disable declaration-no-important */
+
+body:has(.cdk-drag-preview) {
+  cursor: grabbing !important;
+
+  .cdk-drop-list:not(.cdk-drop-list-dragging) {
+    &:hover,
+    *:hover {
+      cursor: no-drop !important;
+    }
+    cursor: no-drop !important;
+  }
+
+  .cdk-drop-list.cdk-drop-list-dragging {
+    &:hover,
+    *:hover {
+      cursor: grabbing !important;
+    }
+  }
+}
+
+.cdk-drag-preview {
+  background-color: variables.$element-base-3 !important;
+  box-shadow: variables.$element-elevation-2 !important;
+  position: relative !important;
+  inset-inline-start: -5px !important;
+  inset-block-start: -10px !important;
+
+  .cdk-drag-handle {
+    &:hover {
+      cursor: grabbing !important;
+    }
+  }
+}
+
+.cdk-drag-handle {
+  font-size: 24px;
+  color: variables.$element-ui-2;
+}
+
+.cdk-drag-disabled {
+  .cdk-drag-handle {
+    cursor: not-allowed;
+  }
+
+  &:not(:has(.cdk-drag-handle)) {
+    cursor: not-allowed;
+  }
+}
+
+.cdk-drag:not(.cdk-drag-disabled) {
+  .cdk-drag-handle {
+    &:is(:hover, .hover) {
+      cursor: grab;
+    }
+  }
+
+  &:not(:has(.cdk-drag-handle)) {
+    &:hover,
+    .grab-area:hover {
+      cursor: grab;
+    }
+
+    .cdk-drag-dragging {
+      cursor: grabbing;
+    }
+  }
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+  background-color: variables.$element-base-information !important;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  min-block-size: 45px;
+  font-size: 0; // hide direct text
+  * {
+    visibility: hidden;
+  }
+}
+
+.cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
+}
+
+.droppable-container {
+  &.drop-border {
+    border: 1px dashed variables.$element-ui-2;
+  }
+
+  .cdk-drag-placeholder {
+    display: none;
+  }
+
+  &.cdk-drop-list-dragging,
+  .cdk-drop-list-dragging {
+    @include variables.make-outline-focus-inside();
+    cursor: grabbing !important;
+
+    &.focus-none > .focus-direct-sub-inside {
+      @include variables.make-outline-focus-inside();
+    }
+  }
+}

package/src/styles/components/_electron-titlebar.scss

@@ -0,0 +1,5 @@
+@use '../variables';
+
+.in-electron {
+  --element-titlebar-spacing: #{variables.$si-titlebar-height};
+}

package/src/styles/components/_elevation.scss

@@ -0,0 +1,21 @@
+@use '../variables/elevation';
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.elevation-1 {
+  box-shadow: elevation.$element-elevation-1;
+}
+
+.elevation-2 {
+  box-shadow: elevation.$element-elevation-2;
+}
+
+.elevation-3 {
+  box-shadow: elevation.$element-elevation-3;
+}
+
+.elevation-4 {
+  box-shadow: elevation.$element-elevation-4;
+}

package/src/styles/components/_focus.scss

@@ -0,0 +1,21 @@
+@use '../variables/focus';
+
+// Unified focus styling
+
+*:focus-visible,
+*.focus-default:focus-visible,
+*:focus-visible .focus-sub,
+*:focus-visible > .focus-direct-sub,
+*:focus-visible > .focus-direct-sub-inside {
+  @include focus.make-outline-focus();
+}
+
+*.focus-inside:focus-visible,
+*:focus-visible .focus-sub-inside,
+*:focus-visible > .focus-direct-sub-inside {
+  outline-offset: focus.$focus-style-outline-inside-offset;
+}
+
+.focus-none {
+  outline: none !important; // stylelint-disable-line declaration-no-important
+}

package/src/styles/components/_icons.scss

@@ -0,0 +1,25 @@
+@use '../variables';
+@use '../variables/utilities';
+
+.icon {
+  font-size: variables.$si-icon-font-size;
+}
+
+.icon-small {
+  font-size: variables.$si-icon-font-size-small;
+}
+
+.spinning {
+  animation: 1.5s linear infinite spinner-border;
+}
+
+.smooth-auto {
+  -webkit-font-smoothing: auto !important; // stylelint-disable-line declaration-no-important
+  -moz-osx-font-smoothing: auto !important; // stylelint-disable-line declaration-no-important
+}
+
+@include utilities.rtl {
+  .flip-rtl {
+    transform: scaleX(-1);
+  }
+}

package/src/styles/components/_layout.scss

@@ -0,0 +1,105 @@
+@use 'sass:map';
+@use '../variables';
+@use '../bootstrap/mixins/breakpoints';
+
+.si-layout-fixed-height {
+  &,
+  .si-layout-inner {
+    @include variables.si-layout-fixed-height;
+  }
+}
+
+.si-layout-main-padding {
+  padding-block: map.get(variables.$spacers, 6) 0;
+  padding-inline: map.get(variables.$spacers, 6);
+
+  @include breakpoints.media-breakpoint-up(md) {
+    padding-inline: map.get(variables.$spacers, 9);
+  }
+}
+
+.si-layout-top-element {
+  transition: margin-inline variables.$element-default-transition-duration;
+  margin-inline: var(--si-layout-header-first-element-offset, 0)
+    var(--si-layout-header-first-element-offset-end, 0);
+}
+
+.si-layout-status {
+  margin-block-end: map.get(variables.$spacers, 4);
+  margin-block-start: -#{map.get(variables.$spacers, 4)};
+}
+
+.si-layout-breadcrumb {
+  display: block;
+  margin-block-end: map.get(variables.$spacers, 4);
+
+  &.si-layout-top-element {
+    margin-block-end: map.get(variables.$spacers, 6);
+  }
+}
+
+.si-layout-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    'title title'
+    'subtitle subtitle'
+    'actions actions';
+  margin-block-end: map.get(variables.$spacers, 8);
+}
+
+.si-layout-title {
+  grid-area: title;
+  margin-block-end: 0;
+
+  &.si-layout-top-element + .si-layout-subtitle {
+    margin-inline: var(--si-layout-header-first-element-offset, 0)
+      var(--si-layout-header-first-element-offset-end, 0);
+  }
+}
+
+.si-layout-subtitle {
+  grid-area: subtitle;
+  margin-block-start: map.get(variables.$spacers, 4);
+  margin-block-end: 0;
+  color: variables.$element-text-secondary;
+  @include variables.si-font(
+    variables.$si-font-size-body-2,
+    variables.$si-line-height-body-2,
+    variables.$si-font-weight-body-2
+  );
+}
+
+.si-layout-actions {
+  grid-area: actions;
+  margin-block-start: map.get(variables.$spacers, 6);
+}
+
+@include breakpoints.media-breakpoint-up(sm) {
+  .si-layout-breadcrumb {
+    margin-block-end: map.get(
+      variables.$spacers,
+      4
+    ) !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+@include breakpoints.media-breakpoint-up(md) {
+  .si-layout-header {
+    grid-template-areas:
+      'title actions'
+      'subtitle actions';
+  }
+
+  .si-layout-actions {
+    margin-block-start: 0;
+  }
+
+  .si-layout-status {
+    margin-block-start: 0;
+    margin-block-end: map.get(
+      variables.$spacers,
+      6
+    ) !important; // stylelint-disable-line declaration-no-important
+  }
+}

package/src/styles/components/_links.scss

@@ -0,0 +1,34 @@
+@use '../variables/semantic-tokens';
+
+@use 'sass:math';
+// so that @extend works
+@use '../bootstrap/reboot';
+
+$si-link-icon-size: math.div(20em, 14);
+$si-link-icon-line-height: math.div(14em, 20);
+$si-link-icon-spacing: math.div(4em, 20);
+
+a:active {
+  color: semantic-tokens.$element-ui-0-hover;
+  text-decoration: underline;
+}
+
+.link {
+  @extend a;
+}
+
+.link-icon {
+  font-size: $si-link-icon-size !important; // stylelint-disable-line declaration-no-important
+  line-height: $si-link-icon-line-height !important; // stylelint-disable-line declaration-no-important
+  margin-block-start: -(math.div(20em - 14em, 2 * 20) + math.div(2.5em, 20));
+  margin-block-end: math.div(20em - 14em, -2 * 20);
+  vertical-align: middle;
+}
+
+.link-start {
+  margin-inline-end: $si-link-icon-spacing;
+}
+
+.link-end {
+  margin-inline-start: $si-link-icon-spacing;
+}

package/src/styles/components/_pills.scss

@@ -0,0 +1,45 @@
+@use '../variables';
+
+@use 'sass:map';
+
+.pill {
+  display: flex;
+  align-items: center;
+  block-size: 24px;
+  border-radius: 12px;
+  background: variables.$element-base-0;
+  padding-block: map.get(variables.$spacers, 2);
+  padding-inline: map.get(variables.$spacers, 4);
+  max-inline-size: 100%;
+
+  &.active {
+    background: variables.$element-base-1-selected;
+  }
+
+  &.pill-interactive {
+    cursor: pointer;
+
+    &:hover {
+      background: variables.$element-action-secondary-hover;
+    }
+  }
+}
+
+.pill-group {
+  display: flex;
+  gap: map.get(variables.$spacers, 1);
+
+  .pill {
+    border-radius: 0;
+
+    &:first-child {
+      border-start-start-radius: 12px;
+      border-end-start-radius: 12px;
+    }
+
+    &:last-child {
+      border-start-end-radius: 12px;
+      border-end-end-radius: 12px;
+    }
+  }
+}

package/src/styles/components/_scrollbar.scss

@@ -0,0 +1,10 @@
+@use '../variables/semantic-tokens';
+
+html {
+  scrollbar-color: color-mix(
+      in srgb,
+      semantic-tokens.$element-ui-2 60%,
+      semantic-tokens.$element-base-1
+    )
+    semantic-tokens.$element-base-1;
+}