@siemens/ix 1.0.0-beta.2

package/scss/components/_dropdown.scss

@@ -0,0 +1,175 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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';
+
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+  .btn {
+    @include ellipsis;
+    display: inline-block;
+    text-align: left;
+    width: 100%;
+  }
+}
+
+.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 {
+  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);
+
+  &:focus {
+    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);
+
+    &.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/components/_forms.scss

@@ -0,0 +1,146 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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';
+
+@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);
+  }
+
+  @include hover {
+    background-color: var(--theme-input--background--hover);
+    border-color: var(--theme-input--border-color--hover);
+  }
+
+  @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(--focus--border-color);
+  }
+}
+
+.form-control:focus {
+  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);
+}
+
+.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);
+}
+
+.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;
+  }
+}
+
+.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);
+  }
+}

package/scss/components/_input-group.scss

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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';
+
+.input-group-label {
+  color: var(--theme-input-unit--color);
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.group-start {
+  .input-group-label:first-child {
+    margin-left: 8px;
+  }
+  .input-group-label:last-child {
+    margin-right: 4px;
+  }
+}
+
+.group-end {
+  .input-group-label:first-child {
+    margin-left: 4px;
+  }
+  .input-group-label:last-child {
+    margin-right: 8px;
+  }
+}

package/scss/components/_links.scss

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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';
+
+a[href] {
+  color: var(--theme-color-primary);
+
+  @include hover {
+    color: var(--theme-color-primary);
+  }
+
+  @include active {
+    color: var(--theme-color-std-text);
+  }
+
+  .glyph {
+    vertical-align: middle;
+
+    &::before {
+      display: inline-block;
+      text-decoration: none;
+    }
+  }
+}

package/scss/components/_modal.scss

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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/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: flex-start;
+
+  [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/components/_radiobuttons.scss

@@ -0,0 +1,169 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 radio-basic() {
+  $size: $large-space;
+
+  /* Base for label styling */
+  [type='radio']:not(:checked),
+  [type='radio']:checked {
+    position: absolute;
+    opacity: 0;
+  }
+
+  [type='radio']:not(:checked) + label,
+  [type='radio']:checked + label {
+    position: relative;
+    line-height: $size;
+    user-select: none;
+
+    color: var(--theme-radiobtn-label--color);
+    margin-right: $default-space;
+  }
+
+  [type='radio']:not(:disabled) + label {
+    cursor: pointer;
+  }
+
+  [type='radio'] + label:before {
+    content: '';
+    width: $size;
+    height: $size;
+    float: left;
+    margin-right: $small-space;
+
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+
+    border-radius: 100%;
+  }
+
+  [type='radio'] + label:focus {
+    &:before {
+      outline: 1px solid var(--focus--border-color);
+      outline-offset: var(--theme-radiobtn--focus--outline-offset);
+    }
+  }
+
+  [type='radio']:focus + label {
+    &:before {
+      outline: 1px solid var(--focus--border-color);
+      outline-offset: var(--theme-radiobtn--focus--outline-offset);
+    }
+  }
+
+  [type='radio']:not(:checked) {
+    & + label:before {
+      background-color: var(--theme-radiobtn-unchecked--background);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-radiobtn-unchecked--background--hover);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-radiobtn-unchecked--background--active);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+    }
+
+    &:disabled + label::before {
+      background-color: var(--theme-radiobtn-unchecked--background--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
+    }
+  }
+
+  [type='radio']:checked {
+    & + label:before {
+      background-color: var(--theme-radiobtn-checked--background);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+    }
+
+    & + label:after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      display: block;
+      background-color: var(--theme-radiobtn-checked--color);
+      border-radius: 100%;
+      transform: scale(1.5);
+      position: absolute;
+      top: 7px;
+      left: 7px;
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-radiobtn-checked--background--hover);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-radiobtn-checked--background--active);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+    }
+
+    &:disabled + label:before {
+      background-color: var(--theme-radiobtn-checked--background--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+    }
+
+    &:disabled + label::after {
+      border-color: var(--theme-radiobtn-checked--color--disabled);
+    }
+  }
+
+  [type='radio']:disabled + label:before {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  [type='radio']:indeterminate {
+    & + label:after {
+      content: '';
+      position: relative;
+      display: block;
+      width: 14px;
+      height: 1px;
+      border-bottom: 2px solid var(--theme-radiobtn-mixed--color);
+      transform: translateX(5px) translateY(-0.8rem);
+    }
+
+    & + label:before {
+      background-color: var(--theme-radiobtn-mixed--background);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color);
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-radiobtn-mixed--background--hover);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-radiobtn-mixed--background--active);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--active);
+    }
+
+    &:disabled + label::before {
+      background-color: var(--theme-radiobtn-mixed--background--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--disabled);
+    }
+
+    &:disabled + label::after {
+      border-color: var(--theme-radiobtn-mixed--color--disabled);
+    }
+  }
+
+  [type='radio']:disabled + label {
+    color: var(--theme-radiobtn-label--color--disabled);
+  }
+}
+
+@include radio-basic();

package/scss/components/_shadows.scss

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 './../theme/define-theme-variable';
+
+@mixin shadows {
+  $box-shadow-lvl-1: 0 1px 4px 0 var(--theme-color-shadow-1),
+    0 0 4px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-2: 0 2px 6px 0 var(--theme-color-shadow-1),
+    0 0 8px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-3: 0 4px 8px 0 var(--theme-color-shadow-1),
+    0 0 16px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-4: 0 8px 16px 0 var(--theme-color-shadow-1),
+    0 0 32px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-5: 0 16px 32px 0 var(--theme-color-shadow-1),
+    0 0 64px 0 var(--theme-color-shadow-2);
+
+  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-lvl-1);
+  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-lvl-2);
+  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-lvl-3);
+  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-lvl-4);
+  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-lvl-5);
+
+  @include define-theme-variable('box-shadow-level-1', $box-shadow-lvl-1);
+  @include define-theme-variable('box-shadow-level-2', $box-shadow-lvl-2);
+  @include define-theme-variable('box-shadow-level-3', $box-shadow-lvl-3);
+  @include define-theme-variable('box-shadow-level-4', $box-shadow-lvl-4);
+  @include define-theme-variable('box-shadow-level-5', $box-shadow-lvl-5);
+}

package/scss/components/_table.scss

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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/fonts';
+
+.table {
+  @include text-default;
+
+  thead {
+    background-color: var(--theme-table-header-row--background);
+  }
+
+  th,
+  td {
+    border-bottom-color: var(--theme-table-data-row--border-color);
+  }
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-accent-bg: var(--theme-table-data-row-alt--background);
+  color: inherit;
+}