@siemens/ix 1.6.3 → 2.0.0-beta.1

package/scss/legacy/components/_buttons.scss

@@ -0,0 +1,181 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import './mixins/hover';
+@import './mixins/text-truncation';
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: $x-large-space;
+  font-size: $font-size-default;
+  font-weight: $font-weight-bold;
+  transition: $default-time;
+  padding: 0 $small-space;
+  min-width: 5rem;
+  gap: $tiny-space;
+
+  @include ellipsis;
+
+  .glyph {
+    margin-right: $tiny-space;
+    font-weight: $font-weight-normal;
+  }
+
+  &:focus-visible,
+  &.focus {
+    box-shadow: none;
+  }
+}
+
+$button-categories: (primary, secondary);
+
+@mixin btn($name, $enable-border: true) {
+  .btn-#{$name} {
+    border-radius: var(--theme-btn--border-radius);
+
+    @if $enable-border == false {
+      --bs-btn-border-width: 0px;
+      --bs-btn-active-border-color: none;
+    }
+
+    &,
+    &.focus,
+    &:focus-visible {
+      background-color: var(--theme-btn-#{$name}--background);
+      color: var(--theme-btn-#{$name}--color);
+
+      --ix-button-color: var(--theme-btn-#{$name}--color);
+
+      @if $enable-border {
+        border-width: var(--theme-btn--border-thickness);
+        border-color: var(--theme-btn-#{$name}--border-color);
+        border-style: solid;
+      } @else {
+        border-color: transparent;
+      }
+    }
+
+    @include focus-visible {
+      outline: 1px solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
+
+    &.selected {
+      background-color: var(--theme-color-ghost--selected);
+      color: var(--theme-color-dynamic);
+    }
+
+    &.hover,
+    &:hover {
+      @if $enable-border {
+        border-color: var(--theme-btn-#{$name}--border-color--hover);
+      }
+
+      background-color: var(--theme-btn-#{$name}--background--hover);
+      color: var(--theme-btn-#{$name}--color--hover);
+    }
+
+    &.selected {
+      &.hover,
+      &:hover {
+        background-color: var(--theme-color-ghost--selected-hover);
+        color: var(--theme-color-dynamic);
+      }
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show > &.dropdown-toggle {
+      @if $enable-border {
+        border-color: var(
+          --theme-btn-#{$name}--border-color--active
+        );
+      }
+
+     background-color: var(
+        --theme-btn-#{$name}--background--active
+      );
+      color: var(--theme-btn-#{$name}--color--active);
+    }
+
+    &.selected {
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-color: var(
+          --theme-color-ghost--selected-active
+        );
+
+        color: var(--theme-color-dynamic);
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      pointer-events: none;
+      cursor: initial;
+
+      @if $enable-border {
+        border-color: var(--theme-btn-#{$name}--border-color--disabled);
+      }
+
+      background-color: var(--theme-btn-#{$name}--background--disabled);
+      color: var(--theme-btn-#{$name}--color--disabled);
+      opacity: 1;
+
+      --ix-button-color: var(--theme-btn-#{$name}--color--disabled);
+    }
+  }
+}
+
+@each $category in $button-categories {
+  @include btn($category);
+  @include btn('outline-#{$category}');
+  @include btn('invisible-#{$category}', false);
+}
+
+.btn-oval,
+.btn-icon {
+  min-width: $x-large-space;
+  width: $x-large-space;
+
+  .glyph {
+    margin-right: 0;
+  }
+}
+
+.btn-oval {
+  border-radius: 6.25rem;
+  width: $default-control-height;
+}
+
+.btn-icon-xs,
+.btn-icon-12 {
+  height: $default-space;
+  width: $default-space;
+  min-width: $default-space;
+  min-height: $default-space;
+}
+
+.btn-icon-s,
+.btn-icon-16 {
+  height: $large-space;
+  width: $large-space;
+  min-width: $large-space;
+  min-height: $large-space;
+}
+
+.btn-icon-32 {
+  height: $x-large-space;
+  width: $x-large-space;
+  min-width: $x-large-space;
+  min-height: $x-large-space;
+}

package/scss/legacy/components/_dropdown.scss

@@ -0,0 +1,170 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import 'mixins/hover';
+
+.dropdown-group {
+  margin: 0.687rem;
+  display: block;
+  position: relative;
+  width: 21.562rem;
+  border-radius: 0.25rem;
+  background-color: #f8f9fa;
+  border: solid 0.062rem rgba(0, 0, 0, 0.25);
+
+  .dropdown-group-title {
+    display: block;
+    position: relative;
+    font-size: 0.875rem;
+    text-align: left;
+    margin: 0.937rem 0 1.25rem 0.937rem;
+  }
+
+  .dropdown-group-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 11.562rem;
+    margin: 0.937rem 0 0.937rem 0.937rem;
+
+    > * {
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+.dropdown-group-submit {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0.687rem 0 0.687rem;
+}
+
+.dropdown-menu {
+  position: absolute;
+
+  background-color: var(--theme-menu--background);
+  @include text-default-single;
+  border: var(--theme-menu--border-thickness) solid
+    var(--theme-menu--border--color);
+  border-radius: var(--theme-menu--border-radius);
+  max-width: 100vw;
+  padding: $tiny-space 0;
+  transition: background-color $default-time;
+  box-shadow: var(--theme-menu--box-shadow);
+
+  &.xl > .dropdown-item {
+    height: 2.5rem;
+    line-height: 2.187rem;
+  }
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  height: $large-control-height;
+  color: var(--theme-menu-header--color);
+  padding: 0 $default-space;
+}
+
+.dropdown-buttons {
+  display: flex;
+  padding: $tiny-space $small-space;
+
+  ix-icon-button + ix-icon-button {
+    margin-inline-start: $small-space;
+  }
+}
+
+.dropdown-item {
+  display: flex;
+  height: 2.5rem;
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 $x-large-space;
+  border: 1px solid transparent;
+  color: var(--theme-menu-item--color);
+  background-color: transparent;
+
+  &:focus-visible {
+    background-color: var(--theme-menu-item--background);
+    color: var(--theme-menu-item--color);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: var(--theme-menu-item--background);
+    border-color: #119fff;
+    color: var(--theme-menu-item--color--focus);
+  }
+
+  @include hover {
+    color: var(--theme-menu-item--color--hover);
+    background-color: var(--theme-menu-item--background--hover);
+  }
+
+  @include active {
+    color: var(--theme-menu-item--color--active);
+    background-color: var(--theme-menu-item--background--active);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--theme-menu-item--color--disabled);
+    background-color: var(--theme-menu-item--background--disabled);
+  }
+
+  > a,
+  a:hover,
+  a:active {
+    color: var(--theme-color-std-text);
+  }
+
+  > .glyph {
+    color: var(--theme-menu-item-icon--color);
+
+    &.disabled {
+      color: var(--color-weak-text);
+    }
+
+    &.glyph-single-check {
+      color: var(--theme-menu-item-icon-check--color);
+    }
+
+    margin-inline-end: $small-space;
+  }
+}
+
+.dropdown-item {
+  > input[type='checkbox'] + label {
+    margin-bottom: 0px;
+
+    &::before {
+      margin-right: 1rem;
+    }
+  }
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--theme-menu-separator--background);
+  margin: $tiny-space 0;
+}
+
+button.dropdown-toggle {
+  position: relative;
+  padding-right: 1.5rem;
+}
+
+button.dropdown-toggle::after {
+  position: absolute;
+  top: 45%;
+  right: 0.5rem;
+}

package/scss/legacy/components/_forms.scss

@@ -0,0 +1,167 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import 'common-variables';
+@import './mixins/hover';
+@import './mixins/text-truncation';
+@import 'legacy/mixins/fonts';
+
+@mixin from-control-invalid {
+  color: $form-feedback-invalid-color;
+}
+
+.form-control,
+.form-control-plaintext {
+  @include text-default();
+  color: var(--theme-input--color);
+  @include ellipsis;
+  border-radius: var(--theme-input--border-radius);
+  height: $default-control-height;
+  min-height: $default-control-height;
+  min-width: $input-min-width;
+  background-color: var(--theme-input--background);
+  border: solid 1px var(--theme-input--border-color);
+  box-shadow: var(--theme-input--box-shadow);
+  padding-inline-start: $input-padding-x;
+  padding-inline-end: $input-padding-x;
+
+  &::placeholder {
+    color: var(--theme-input-hint--color);
+  }
+
+  &:not(:read-only):not([readonly]):not([readOnly]):not(.readonly) {
+    @include hover {
+      background-color: var(--theme-input--background--hover);
+      border-color: var(--theme-input--border-color--hover);
+      cursor: auto;
+    }
+
+    @include focus-visible {
+      background-color: var(--theme-input--background--focus);
+      border-color: var(--theme-input--border-color--focus);
+      outline-offset: var(--theme-input--focus--outline-offset);
+      box-shadow: var(--theme-input--box-shadow);
+      outline: 1px solid var(--theme-color-focus-bdr);
+    }
+  }
+}
+
+.form-control:focus-visible {
+  color: var(--theme-input--color);
+}
+
+.form-control[type='number'] {
+  &::-webkit-inner-spin-button {
+    margin-right: -2px;
+    margin-left: 2px;
+    display: none;
+  }
+
+  text-align: right;
+}
+
+.form-control.readonly,
+.form-control[readonly] {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+}
+
+.form-control:read-only,
+.form-control[readonly],
+.form-control[readOnly],
+.form-control.readonly {
+  box-shadow: none !important;
+  outline: none !important;
+  border-color: var(--theme-input--border-color);
+  cursor: default !important;
+
+  &::placeholder {
+    color: transparent;
+  }
+}
+
+.form-control:disabled,
+.form-control.disabled {
+  background: transparent !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  border-radius: 0rem;
+  color: var(--theme-color-weak-text);
+
+  border-color: var(--theme-input--border-color-bottom--disabled);
+
+  &::placeholder {
+    color: transparent;
+  }
+}
+
+.form-control-plaintext {
+  outline: 0;
+}
+
+.form-group {
+  position: relative;
+}
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  > .glyph {
+    display: block;
+    position: absolute;
+    margin-inline-start: 0.312rem;
+    color: var(--theme-color-std-text);
+  }
+
+  > input {
+    padding-inline-start: 2.2rem;
+  }
+}
+
+select.form-control {
+  padding: 0 0.312rem;
+}
+
+textarea {
+  &.form-control {
+    padding: 0.375rem $small-space;
+  }
+}
+
+.was-validated {
+  .form-control:invalid,
+  .is-invalid {
+    background-color: var(--theme-input-error--background);
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+    background-position: left calc(0.375em + 0.1875rem) center !important;
+    padding-right: 0.75rem;
+    padding-left: calc(1.5em + 0.75rem);
+    background-size: 18px;
+    background-repeat: no-repeat;
+  }
+}
+
+input {
+  &.disabled,
+  &:disabled {
+    color: var(--theme-input--color--disabled);
+  }
+
+  &:read-only,
+  &.readonly {
+    cursor: default;
+  }
+}

package/scss/legacy/components/_modal.scss

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import 'legacy/mixins/fonts';
+
+.modal {
+  --bs-modal-footer-gap: 1rem;
+  --bs-modal-box-shadow: var(--theme-modal--box-shadow);
+}
+
+.modal-header {
+  @include text-default-title;
+  padding: 0;
+  padding-bottom: $tiny-space;
+  border: none;
+  align-items: center;
+
+  [data-close-button] {
+    margin-left: 1rem;
+  }
+}
+
+.modal-body {
+  padding: 0;
+}
+
+.modal-footer {
+  border-top: none;
+  padding: 0;
+  padding-block-start: 2rem;
+
+  > * {
+    margin: 0 0 0 calc(var(--bs-modal-footer-gap) * 0.5);
+  }
+}

package/scss/legacy/mixins/_fonts.scss

@@ -0,0 +1,166 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@mixin font-smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+
+@mixin text-format(
+  $font-size,
+  $line-height,
+  $font-weight: $font-weight-normal,
+  $color-inverted: false
+) {
+  @include font-smoothing();
+  font-family: Siemens Sans, sans-serif;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+
+  @if $color-inverted {
+    color: var(--theme-color-inv-std-text);
+  } @else {
+    color: var(--theme-color-std-text);
+  }
+}
+
+@mixin text-default($color-inverted: false) {
+  @include text-format(
+    $font-size-default,
+    $line-height-default,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-default-single($color-inverted: false) {
+  @include text-format(
+    $font-size-default,
+    $line-height-default-single,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-default-title($color-inverted: false) {
+  @include text-format(
+    $font-size-default,
+    $line-height-default,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-default-title-single($color-inverted: false) {
+  @include text-format(
+    $font-size-default,
+    $line-height-default-single,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-xs($color-inverted: false) {
+  @include text-format(
+    $font-size-xs,
+    $line-height-xs,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-s($color-inverted: false) {
+  @include text-format(
+    $font-size-s,
+    $line-height-s,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-caption($color-inverted: false) {
+  @include text-format(
+    $font-size-caption,
+    $line-height-caption,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-caption-single($color-inverted: false) {
+  @include text-format(
+    $font-size-caption,
+    $line-height-caption-single,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-l($color-inverted: false) {
+  @include text-format(
+    $font-size-l,
+    $line-height-l,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-l-single($color-inverted: false) {
+  @include text-format(
+    $font-size-l,
+    $line-height-l-single,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@mixin text-l-title($color-inverted: false) {
+  @include text-format(
+    $font-size-l,
+    $line-height-l,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-l-title-single($color-inverted: false) {
+  @include text-format(
+    $font-size-l,
+    $line-height-l-single,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-h2($color-inverted: false) {
+  @include text-format(
+    $font-size-xl,
+    $line-height-h2,
+    $font-weight-bold,
+    $color-inverted
+  );
+}
+
+@mixin text-xl($color-inverted: false) {
+  @include text-format(
+    $font-size-xl,
+    $line-height-xl,
+    $font-weight-normal,
+    $color-inverted
+  );
+}
+
+@function automatic-text-color($color, $theshold: 50) {
+  @if (lightness($color) > $theshold) {
+    @return rgba(0, 0, 0, 0.99);
+  } @else {
+    @return rgba(255, 255, 255, 0.99);
+  }
+}