@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -43,22 +43,22 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.1.0",
+    "@floating-ui/dom": "^1.5.1",
     "@stencil/core": "^3.2.1",
+    "@types/luxon": "^3.3.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
-    "luxon": "^3.3.0",
-    "@types/luxon": "^3.3.0"
+    "luxon": "^3.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.32.1",
     "@siemens/ix-icons": "^1.1.0",
-    "@stencil/vue-output-target": "^0.7.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil-community/postcss": "^2.1.0",
     "@stencil/angular-output-target": "^0.5.0",
     "@stencil/react-output-target": "^0.4.0",
     "@stencil/sass": "~3.0.0",
+    "@stencil/vue-output-target": "^0.7.0",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",
@@ -69,6 +69,7 @@
     "animate.css": "~4.1.1",
     "autoprefixer": "10.4.5",
     "bootstrap": "^5.2.0",
+    "cssnano": "^6.0.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-ix": "*",
     "eslint-plugin-react": "^7.32.2",
@@ -77,6 +78,7 @@
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "mustache": "^4.2.0",
+    "postcss": "^8.4.29",
     "puppeteer": "^19.5.2",
     "sass": "^1.58.3",
     "start-server-and-test": "^1.14.0",

package/scss/_core.scss

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+/*
+ * 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 global stylings for Web Components */
+@import './../src/components/toast/styles/toast-container';
+
+@import './legacy/mixins/fonts';
+@import './legacy/fonts';
+
+/* Common */
+@import './common-variables';
+@import 'z-index';
+
+/* Components */
+@import 'legacy/components/modal';
+@import 'legacy/components/buttons';
+@import 'legacy/components/button-group';
+@import 'legacy/components/dropdown';
+@import 'legacy/components/forms';
+@import './components/links';
+@import './components/checkboxes';
+@import './components/radiobuttons';
+@import './components/shadows';
+@import './components/input-group';
+@import './components/table';
+@import './components/fonts';
+
+@import 'mixins/scrollbar';
+
+:root {
+  --animate-duration: #{$default-time};
+  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+body {
+  @include typography-body();
+  color: var(--theme-color-std-text);
+  background-color: var(--theme-color-1);
+  margin: 0;
+}
+
+body:not(.disable-scrollbar) {
+  @include scrollbar();
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

package/scss/components/_checkboxes.scss

@@ -17,6 +17,8 @@
     clip-path: inset(50%);
     height: 1px;
     width: 1px;
+    max-height: 1px;
+    max-width: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
@@ -26,9 +28,12 @@
   [type='checkbox']:checked + label {
     position: relative;
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     user-select: none;
     color: var(--theme-checkbox-label--color);
+    height: $size;
+    min-height: $size;
+    max-height: $size;
   }
 
   [type='checkbox']:not(:disabled) + label {
@@ -109,7 +114,8 @@
       border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
       position: absolute;
       margin: 0.31rem 0.42rem 0.1875rem;
-      transform: rotate(-53deg) scale(2) skew(-8deg, -3deg);
+      transform: translate(-1px, -3px) rotate(-53deg) scale(2)
+        skew(-8deg, -3deg);
     }
 
     &:hover + label:before {
@@ -148,7 +154,7 @@
       height: 0.125rem;
       border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
       position: absolute;
-      margin: 0.5rem 0 0 0.25rem;
+      margin: 0 0 0 0.25rem;
     }
 
     & + label:before {

package/scss/components/_fonts.scss

@@ -0,0 +1,131 @@
+/*
+ * 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/fonts';
+
+@mixin font-label {
+  .typography-label {
+    @include typography-label;
+  }
+
+  .typography-label-xs {
+    @include typography-label-xs;
+  }
+
+  .typography-label-sm {
+    @include typography-label-sm;
+  }
+
+  .typography-label-lg {
+    @include typography-label-lg;
+  }
+
+  .typography-body {
+    @include typography-body;
+  }
+
+  .typography-body-xs {
+    @include typography-body-xs;
+  }
+
+  .typography-body-sm {
+    @include typography-body-sm;
+  }
+
+  .typography-body-lg {
+    @include typography-body-lg;
+  }
+
+  .typography-display {
+    @include typography-display;
+  }
+
+  .typography-display-xs {
+    @include typography-display-xs;
+  }
+
+  .typography-display-sm {
+    @include typography-display-sm;
+  }
+
+  .typography-display-lg {
+    @include typography-display-lg;
+  }
+
+  .typography-display-xl {
+    @include typography-display-xl;
+  }
+
+  .typography-display-xxl {
+    @include typography-display-xxl;
+  }
+
+  h6,
+  .typography-h6 {
+    @include typography-h6;
+  }
+
+  h5,
+  .typography-h5 {
+    @include typography-h5;
+  }
+
+  h4,
+  .typography-h4 {
+    @include typography-h4;
+  }
+
+  h3,
+  .typography-h3 {
+    @include typography-h3;
+  }
+
+  h2,
+  .typography-h2 {
+    @include typography-h2;
+  }
+
+  h1,
+  .typography-h1 {
+    @include typography-h1;
+  }
+
+  .typography-code {
+    @include typography-code;
+  }
+
+  .typography-code-lg {
+    @include typography-code-lg;
+  }
+
+  .typography-code-sm {
+    @include typography-code-sm;
+  }
+
+  .typography-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .typography-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .typography-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .typography-weight-bold {
+    font-weight: 700 !important;
+  }
+
+  a {
+    color: var(--theme-color-primary);
+  }
+}
+
+@include font-label();

package/scss/components/_table.scss

@@ -6,7 +6,7 @@
  * 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';
+@import 'legacy/mixins/fonts';
 
 .table {
   @include text-default;

package/scss/components/form/_input.scss

@@ -0,0 +1,155 @@
+/*
+ * 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/fonts';
+
+@mixin element-input($feature-read-only: true) {
+  &,
+  &:-webkit-autofill {
+    @include typography-body;
+    min-height: 2rem;
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    background-color: var(--theme-input--background);
+    color: var(--theme-input--color);
+
+    border: var(--theme-input--border-thickness, 1px) solid
+      var(--theme-input--border-color);
+    border-radius: var(--theme-input--border-radius);
+    box-shadow: var(--theme-input--box-shadow);
+  }
+
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
+    -webkit-text-fill-color: var(--theme-input--color) !important;
+    border-color: var(--theme-input--border-color) !important;
+  }
+
+  &::placeholder {
+    color: var(--theme-input-hint--color);
+  }
+
+  &.hover,
+  &:hover {
+    border-color: var(--theme-input--border-color--hover);
+    background-color: var(--theme-input--background--hover);
+  }
+
+  &.focus,
+  &:focus {
+    outline: 1px solid var(--theme-color-focus-bdr);
+    outline-offset: var(--theme-input--focus--outline-offset);
+    border-color: var(--theme-input--border-color--focus);
+  }
+
+  @if $feature-read-only == true {
+    &.read-only,
+    &:read-only {
+      box-shadow: none;
+      background-color: transparent;
+      outline: none;
+      border: none;
+      border-bottom: var(--theme-input--border-thickness, 1px)
+        solid
+        var(--theme-input--border-color-bottom--readonly);
+    }
+  }
+
+  &:disabled {
+    box-shadow: none;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    color: var(--theme-input--color--disabled);
+    border-bottom: var(--theme-input--border-thickness, 1px) solid
+      var(--theme-input--border-color-bottom--disabled);
+  }
+}
+
+@mixin element-textarea {
+  height: 3.25rem;
+  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
+}
+
+@mixin form {
+  label {
+    color: var(--theme-color-soft-text);
+  }
+
+  input {
+    @include element-input();
+  }
+
+  input[type='number'] {
+    &::-webkit-inner-spin-button {
+      margin-right: -2px;
+      margin-left: 2px;
+      display: none;
+    }
+
+    text-align: right;
+  }
+
+  textarea {
+    @include element-input();
+    @include element-textarea();
+  }
+
+  textarea ~ .valid-feedback,
+  textarea ~ .invalid-feedback,
+  input ~ .valid-feedback,
+  input ~ .invalid-feedback {
+    display: none;
+
+    @include typography-body;
+  }
+
+  form {
+    textarea ~ .valid-feedback,
+    input ~ .valid-feedback {
+      color: var(--theme-color-success);
+    }
+
+    textarea ~ .invalid-feedback,
+    input ~ .invalid-feedback {
+      color: var(--theme-color-alarm-text);
+    }
+  }
+
+  form:not([novalidate]),
+  form.was-validated {
+    :invalid,
+    .is-invalid {
+      background-color: var(--theme-input-error--background);
+      border-color: var(--theme-input-error--border-color);
+      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;
+      padding-right: 0.75rem;
+      padding-left: calc(1.5em + 0.75rem);
+      background-size: 18px;
+      background-repeat: no-repeat;
+    }
+
+    :invalid,
+    .is-invalid {
+      ~ .invalid-feedback {
+        display: block;
+      }
+    }
+
+    :valid,
+    .is-valid {
+      ~ .valid-feedback {
+        display: block;
+      }
+    }
+  }
+}
+
+@include form;

package/scss/ix-core.scss

@@ -7,78 +7,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* Include 3rd party libraries */
-@import 'bootstrap/scss/bootstrap';
-
-/* Import global stylings for Web Components */
-@import './../src/components/toast/styles/toast-container';
-
-/* Common */
-@import './common-variables';
-@import 'fonts';
-@import 'z-index';
-
-/* Mixins */
-@import './mixins/fonts';
-
-/* Components */
-@import './components/links';
-@import './components/modal';
-@import './components/buttons';
-@import './components/button-group';
-@import './components/dropdown';
-@import './components/checkboxes';
-@import './components/radiobuttons';
-@import './components/shadows';
-@import './components/forms';
-@import './components/input-group';
-@import './components/table';
-
-:root {
-  --animate-duration: #{$default-time};
-  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-body {
-  @include text-default();
-  background-color: var(--theme-color-1);
-}
-
-body:not(.disable-scrollbar) {
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: $small-space;
-    height: $small-space;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-track--background);
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background: var(--theme-scrollbar-track--background--hover);
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-thumb--background);
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--theme-scrollbar-thumb--background--hover);
-  }
-
-  ::-webkit-scrollbar-corner {
-    display: none;
-  }
-}
+/* Core Style */
+@import './core';

package/scss/ix.scss

@@ -8,87 +8,16 @@
  */
 
 /* Include 3rd party libraries */
-
 @import '~bootstrap/scss/bootstrap';
-@import '~animate.css/animate.css';
-
-/* Import global stylings for Web Components */
-@import './../src/components/toast/styles/toast-container';
 
 /* Default Theme */
 @import './theme/classic-dark';
 @import './theme/classic-light';
 
-/* Common */
-@import './common-variables';
-@import 'fonts';
-@import 'z-index';
-
-/* Mixins */
-@import './mixins/fonts';
-
-/* Components */
-@import './components/links';
-@import './components/modal';
-@import './components/buttons';
-@import './components/button-group';
-@import './components/dropdown';
-@import './components/checkboxes';
-@import './components/radiobuttons';
-@import './components/shadows';
-@import './components/forms';
-@import './components/input-group';
-@import './components/table';
-
-:root {
-  --animate-duration: #{$default-time};
-  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
+/* Core Style */
+@import './core';
 
+/* Load embedded theme */
 body:not([class*='theme-']) {
   @extend .theme-classic-dark;
 }
-
-body {
-  @include text-default();
-  background-color: var(--theme-color-1);
-}
-
-body:not(.disable-scrollbar) {
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: $small-space;
-    height: $small-space;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-track--background);
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background: var(--theme-scrollbar-track--background--hover);
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-thumb--background);
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--theme-scrollbar-thumb--background--hover);
-  }
-
-  ::-webkit-scrollbar-corner {
-    display: none;
-  }
-}

package/scss/{_fonts.scss → legacy/_fonts.scss}

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import './mixins/fonts';
+@import 'legacy/mixins/fonts';
 
 .text-xs {
   @include text-xs;

package/scss/{components → legacy/components}/_buttons.scss

@@ -69,24 +69,25 @@ $button-categories: (primary, secondary);
     }
 
     &.selected {
-      background-color: var(--theme-btn-#{$name}--background--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) !important;
+        border-color: var(--theme-btn-#{$name}--border-color--hover);
       }
 
-      background-color: var(--theme-btn-#{$name}--background--hover) !important;
-      color: var(--theme-btn-#{$name}--color--hover) !important;
+      background-color: var(--theme-btn-#{$name}--background--hover);
+      color: var(--theme-btn-#{$name}--color--hover);
     }
 
     &.selected {
       &.hover,
       &:hover {
-        background-color: var(--theme-btn-#{$name}--background--selected-hover);
-        color: var(--theme-btn-#{$name}--color--selected-hover);
+        background-color: var(--theme-color-ghost--selected-hover);
+        color: var(--theme-color-dynamic);
       }
     }
 
@@ -96,13 +97,13 @@ $button-categories: (primary, secondary);
       @if $enable-border {
         border-color: var(
           --theme-btn-#{$name}--border-color--active
-        ) !important;
+        );
       }
 
-      background-color: var(
+     background-color: var(
         --theme-btn-#{$name}--background--active
-      ) !important;
-      color: var(--theme-btn-#{$name}--color--active) !important;
+      );
+      color: var(--theme-btn-#{$name}--color--active);
     }
 
     &.selected {
@@ -110,9 +111,10 @@ $button-categories: (primary, secondary);
       &:not(:disabled):not(.disabled).active,
       .show > &.dropdown-toggle {
         background-color: var(
-          --theme-btn-#{$name}--background--selected-active
+          --theme-color-ghost--selected-active
         );
-        color: var(--theme-btn-#{$name}--color--selected-active);
+
+        color: var(--theme-color-dynamic);
       }
     }