@siemens/ix 1.3.0 → 1.4.0-beta.1

package/scss/components/_shadows.scss

@@ -1,35 +1,23 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * 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.
  */
+:root {
+  body {
+    --theme-box-shadow-lvl-1: var(--theme-shadow-1);
+    --theme-box-shadow-lvl-2: var(--theme-shadow-2);
+    --theme-box-shadow-lvl-3: var(--theme-shadow-3);
+    --theme-box-shadow-lvl-4: var(--theme-shadow-4);
 
-@import './../theme/define-theme-variable';
+    --theme-box-shadow-level-1: var(--theme-shadow-1);
+    --theme-box-shadow-level-2: var(--theme-shadow-2);
+    --theme-box-shadow-level-3: var(--theme-shadow-3);
+    --theme-box-shadow-level-4: var(--theme-shadow-4);
 
-@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);
+    --theme-box-shadow-insert: var(--theme-inset-shadow-1);
+  }
 }

package/scss/components/_table.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/ix.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -15,10 +15,9 @@
 /* Import global stylings for Web Components */
 @import './../src/components/toast/styles/toast-container';
 
-/* Default themes */
+/* Default Theme */
 @import './theme/classic-dark';
 @import './theme/classic-light';
-@import './theme/static-colors';
 
 /* Common */
 @import './common-variables';

package/scss/mixins/_animations.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_fonts.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_hover.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_shadows.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_text-truncation.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/theme/classic-dark/_border.scss

@@ -0,0 +1,35 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-primary-bdr-1: 0.0625rem solid var(--theme-color-primary);
+      --theme-primary-bdr-2: 0.125rem solid var(--theme-color-primary);
+      --theme-dynamic-bdr-1: 0.0625rem solid var(--theme-color-dynamic);
+      --theme-dynamic-bdr-2: 0.125rem solid var(--theme-color-dynamic);
+      --theme-contrast-bdr-1: 0.0625rem solid var(--theme-color-contrast-bdr);
+      --theme-contrast-bdr-2: 0.125rem solid var(--theme-color-contrast-bdr);
+      --theme-std-bdr-1: 0.0625rem solid var(--theme-color-std-bdr);
+      --theme-std-bdr-2: 0.125rem solid var(--theme-color-std-bdr);
+      --theme-soft-bdr-1: 0.0625rem solid var(--theme-color-soft-bdr);
+      --theme-soft-bdr-2: 0.125rem solid var(--theme-color-soft-bdr);
+      --theme-soft-dashed-bdr-1: 0.0625rem dashed var(--theme-color-soft-bdr);
+      --theme-soft-dashed-bdr-2: 0.125rem dashed var(--theme-color-soft-bdr);
+      --theme-weak-bdr-1: 0.0625rem solid var(--theme-color-weak-bdr);
+      --theme-weak-bdr-2: 0.125rem solid var(--theme-color-weak-bdr);
+      --theme-x-weak-bdr-1: 0.0625rem solid var(--theme-color-x-weak-bdr);
+      --theme-x-weak-bdr-2: 0.125rem solid var(--theme-color-x-weak-bdr);
+      --theme-alarm-bdr-1: 0.0625rem solid var(--theme-color-alarm);
+      --theme-alarm-bdr-2: 0.125rem solid var(--theme-color-alarm);
+      --theme-critical-bdr-1: 0.0625rem solid var(--theme-color-critical);
+      --theme-critical-bdr-2: 0.125rem solid var(--theme-color-critical);
+      --theme-warning-bdr-1: 0.0625rem solid var(--theme-color-warning);
+      --theme-warning-bdr-2: 0.125rem solid var(--theme-color-warning);
+      --theme-success-bdr-1: 0.0625rem solid var(--theme-color-success);
+      --theme-success-bdr-2: 0.125rem solid var(--theme-color-success);
+      --theme-info-bdr-1: 0.0625rem solid var(--theme-color-info);
+      --theme-info-bdr-2: 0.125rem solid var(--theme-color-info);
+      --theme-neutral-bdr-1: 0.0625rem solid var(--theme-color-neutral);
+      --theme-neutral-bdr-2: 0.125rem solid var(--theme-color-neutral);
+  }
+}

package/scss/theme/classic-dark/_borderRadius.scss

@@ -0,0 +1,24 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-default-border-radius: 0.25rem;
+      --theme-small-border-radius: 0.125rem;
+      --theme-min-border-radius: 0rem;
+      --theme-btn--border-radius: var(--theme-default-border-radius);
+      --theme-blind--border-radius: var(--theme-default-border-radius);
+      --theme-breadcrumb--border-radius: var(--theme-default-border-radius);
+      --theme-group--border-radius: var(--theme-default-border-radius);
+      --theme-group--border-radius--focus: var(--theme-min-border-radius);
+      --theme-kpi--border-radius: var(--theme-default-border-radius);
+      --theme-input--border-radius: var(--theme-default-border-radius);
+      --theme-menu--border-radius: var(--theme-default-border-radius);
+      --theme-message-bar--border-radius: var(--theme-default-border-radius);
+      --theme-tile--border-radius: var(--theme-default-border-radius);
+      --theme-toast--border-radus: var(--theme-default-border-radius);
+      --theme-flip-tile--border-radius: var(--theme-default-border-radius);
+      --theme-upload--border-radius: var(--theme-default-border-radius);
+      --theme-workflow--border-radius: var(--theme-default-border-radius);
+  }
+}

package/scss/theme/classic-dark/_borderWidth.scss

@@ -0,0 +1,18 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-btn--border-thickness: 0.125rem;
+      --theme-app-header--border-width: 0.0625rem;
+      --theme-blind--border-thickness: 0.0625rem;
+      --theme-checkbox--border-thickness: 0.125rem;
+      --theme-focus--border-thickness: 0.0625rem;
+      --theme-radiobtn--border-thickness: 0.125rem;
+      --theme-input--border-thickness: 0.0625rem;
+      --theme-menu--border-thickness: 0.0625rem;
+      --theme-message-bar--border-thickness: 0.125rem;
+      --theme-modal--border-thickness: 0.0625rem;
+      --theme-toast--border-thickness: 0rem;
+  }
+}

package/scss/theme/classic-dark/_boxShadow.scss

@@ -0,0 +1,19 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-shadow-1: 0px 2px 2px var(--theme-color-shadow-2), 0px 1px 1px var(--theme-color-shadow-1);
+      --theme-shadow-2: -4px 0px 8px var(--theme-color-shadow-2), 4px 0px 8px var(--theme-color-shadow-2), 0px 0px 16px var(--theme-color-shadow-1);
+      --theme-shadow-3: 0px 2px 6px var(--theme-color-shadow-2), 0px 0px 8px var(--theme-color-shadow-1);
+      --theme-shadow-4: 0px 0px 2px var(--theme-color-shadow-1), 0px 4px 8px var(--theme-color-shadow-1), 0px 12px 18px var(--theme-color-shadow-1);
+      --theme-inset-shadow-1: insert 0px 2px 4px var(--theme-color-shadow-3);
+      --theme-input--box-shadow: none;
+      --theme-menu--box-shadow: var(--theme-shadow-4);
+      --theme-navigation--box-shadow: var(--theme-shadow-2);
+      --theme-modal--box-shadow: var(--theme-shadow-4);
+      --theme-switch-thumb--box-shadow: none;
+      --theme-tile--box-shadow: var(--theme-shadow-3);
+      --theme-toast--box-shadow: var(--theme-shadow-4);
+  }
+}