fix(core): update classic theme (#725)

packages/core/scss/theme/classic-dark/_boxShadow.scss

@@ -5,7 +5,7 @@
   .theme-classic-dark {
       --theme-shadow-1: 0px 1px 1px #00000099, 0px 2px 2px #000000;
       --theme-shadow-2: 0px 0px 16px #00000099, 4px 0px 8px #000000, -4px 0px 8px #000000;
-      --theme-shadow-3: 0 0 8 #00000099, 0 2 6 #000000;
+      --theme-shadow-3: 0px 0px 8px #00000099, 0px 2px 6px #000000;
       --theme-shadow-4: 0px 12px 18px #00000099, 0px 4px 8px #00000099, 0px 0px 2px #000000;
       --theme-inset-shadow-1: inset 0px 2px 4px #00000099;
       --theme-input--box-shadow: var(--theme-inset-shadow-1);

packages/core/scss/theme/classic-dark/_fontSizes.scss

@@ -14,7 +14,7 @@
       --theme-ms-0: 0.875rem;
       --theme-ms-1: 1rem;
       --theme-ms-2: 1.25rem;
-      --theme-ms-3: .15rem;
+      --theme-ms-3: 1.5rem;
       --theme-ms-4: 1.8125rem;
       --theme-ms-5: 2.1875rem;
       --theme-ms-6: 2.625rem;

packages/core/scss/theme/classic-dark/_index.scss

@@ -14,3 +14,4 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";

packages/core/scss/theme/classic-dark/_letterSpacing.scss

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-dark {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

packages/core/scss/theme/classic-dark/_lineHeights.scss

@@ -3,19 +3,19 @@
  */
 :root {
   .theme-classic-dark {
-    --theme-line-height-s: 150%;
-    --theme-line-height-s-single: 150%;
-    --theme-line-height-caption: 150%;
-    --theme-line-height-caption-single: 100%;
-    --theme-line-height-default: 142.9%;
-    --theme-line-height-default-single: 114.3%;
-    --theme-line-height-l: 150%;
-    --theme-line-height-l-single: 125%;
-    --theme-line-height-h2: 145.5%;
-    --theme-line-height-xl: 109.1%;
-    --theme-line-height-xs: 100%;
-    --theme-line-height-sm: 120%;
-    --theme-line-height-md: 143%;
-    --theme-line-height-lg: 150%;
+      --theme-line-height-s: 150%;
+      --theme-line-height-s-single: 150%;
+      --theme-line-height-caption: 150%;
+      --theme-line-height-caption-single: 100%;
+      --theme-line-height-default: 142.9%;
+      --theme-line-height-default-single: 114.3%;
+      --theme-line-height-l: 150%;
+      --theme-line-height-l-single: 125%;
+      --theme-line-height-h2: 145.5%;
+      --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
-}
+}

packages/core/scss/theme/classic-light/_boxShadow.scss

@@ -6,7 +6,7 @@
       --theme-shadow-1: 0px 1px 1px #00000033, 0px 2px 2px #0000001a;
       --theme-shadow-2: 0px 0px 16px #0000001a, 4px 0px 8px #00000033, -4px 0px 8px #00000033;
       --theme-shadow-3: 0px 0px 8px #00000033, 0px 2px 6px #00000033;
-      --theme-shadow-4: 0 12 18 #0000001a, 0 4 8 #0000001a, 0 0 2 #0000001a;
+      --theme-shadow-4: 0px 12px 18px #0000001a, 0px 4px 8px #0000001a, 0px 0px 2px #0000001a;
       --theme-inset-shadow-1: inset 0px 2px 4px #0000001f;
       --theme-input--box-shadow: var(--theme-inset-shadow-1);
       --theme-menu--box-shadow: var(--theme-shadow-4);

packages/core/scss/theme/classic-light/_fontSizes.scss

@@ -14,7 +14,7 @@
       --theme-ms-0: 0.875rem;
       --theme-ms-1: 1rem;
       --theme-ms-2: 1.25rem;
-      --theme-ms-3: .15rem;
+      --theme-ms-3: 1.5rem;
       --theme-ms-4: 1.8125rem;
       --theme-ms-5: 2.1875rem;
       --theme-ms-6: 2.625rem;

packages/core/scss/theme/classic-light/_index.scss

@@ -14,3 +14,4 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";

packages/core/scss/theme/classic-light/_letterSpacing.scss

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-classic-light {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

packages/core/scss/theme/classic-light/_lineHeights.scss

@@ -3,19 +3,19 @@
  */
 :root {
   .theme-classic-light {
-    --theme-line-height-s: 150%;
-    --theme-line-height-s-single: 150%;
-    --theme-line-height-caption: 150%;
-    --theme-line-height-caption-single: 100%;
-    --theme-line-height-default: 142.9%;
-    --theme-line-height-default-single: 114.3%;
-    --theme-line-height-l: 150%;
-    --theme-line-height-l-single: 125%;
-    --theme-line-height-h2: 145.5%;
-    --theme-line-height-xl: 109.1%;
-    --theme-line-height-xs: 100%;
-    --theme-line-height-sm: 120%;
-    --theme-line-height-md: 143%;
-    --theme-line-height-lg: 150%;
+      --theme-line-height-s: 150%;
+      --theme-line-height-s-single: 150%;
+      --theme-line-height-caption: 150%;
+      --theme-line-height-caption-single: 100%;
+      --theme-line-height-default: 142.9%;
+      --theme-line-height-default-single: 114.3%;
+      --theme-line-height-l: 150%;
+      --theme-line-height-l-single: 125%;
+      --theme-line-height-h2: 145.5%;
+      --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
-}
+}

packages/core/scss/theme/legacy-classic-dark/_fontSizes.scss

@@ -14,7 +14,7 @@
       --theme-ms-0: 0.875rem;
       --theme-ms-1: 1rem;
       --theme-ms-2: 1.25rem;
-      --theme-ms-3: .15rem;
+      --theme-ms-3: 1.5rem;
       --theme-ms-4: 1.8125rem;
       --theme-ms-5: 2.1875rem;
       --theme-ms-6: 2.625rem;

packages/core/scss/theme/legacy-classic-dark/_index.scss

@@ -14,3 +14,4 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";

packages/core/scss/theme/legacy-classic-dark/_letterSpacing.scss

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-legacy-classic-dark {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

packages/core/scss/theme/legacy-classic-dark/_lineHeights.scss

@@ -3,19 +3,19 @@
  */
 :root {
   .theme-legacy-classic-dark {
-    --theme-line-height-s: 150%;
-    --theme-line-height-s-single: 150%;
-    --theme-line-height-caption: 150%;
-    --theme-line-height-caption-single: 100%;
-    --theme-line-height-default: 142.9%;
-    --theme-line-height-default-single: 114.3%;
-    --theme-line-height-l: 150%;
-    --theme-line-height-l-single: 125%;
-    --theme-line-height-h2: 145.5%;
-    --theme-line-height-xl: 109.1%;
-    --theme-line-height-xs: 100%;
-    --theme-line-height-sm: 120%;
-    --theme-line-height-md: 143%;
-    --theme-line-height-lg: 150%;
+      --theme-line-height-s: 150%;
+      --theme-line-height-s-single: 150%;
+      --theme-line-height-caption: 150%;
+      --theme-line-height-caption-single: 100%;
+      --theme-line-height-default: 142.9%;
+      --theme-line-height-default-single: 114.3%;
+      --theme-line-height-l: 150%;
+      --theme-line-height-l-single: 125%;
+      --theme-line-height-h2: 145.5%;
+      --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
-}
+}

packages/core/scss/theme/legacy-classic-light/_fontSizes.scss

@@ -14,7 +14,7 @@
       --theme-ms-0: 0.875rem;
       --theme-ms-1: 1rem;
       --theme-ms-2: 1.25rem;
-      --theme-ms-3: .15rem;
+      --theme-ms-3: 1.5rem;
       --theme-ms-4: 1.8125rem;
       --theme-ms-5: 2.1875rem;
       --theme-ms-6: 2.625rem;

packages/core/scss/theme/legacy-classic-light/_index.scss

@@ -14,3 +14,4 @@
 @import "./spacing";
 @import "./borderWidth";
 @import "./border";
+@import "./letterSpacing";

packages/core/scss/theme/legacy-classic-light/_letterSpacing.scss

@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+:root {
+  .theme-legacy-classic-light {
+      --theme-letter-spacing-xs: -1.2%;
+      --theme-letter-spacing-sm: -0.6%;
+      --theme-letter-spacing-md: 0%;
+      --theme-letter-spacing-lg: 0.6%;
+      --theme-letter-spacing-xl: 1.2%;
+      --theme-letter-spacing-xxl: 2%;
+  }
+}

packages/core/scss/theme/legacy-classic-light/_lineHeights.scss

@@ -3,19 +3,19 @@
  */
 :root {
   .theme-legacy-classic-light {
-    --theme-line-height-s: 150%;
-    --theme-line-height-s-single: 150%;
-    --theme-line-height-caption: 150%;
-    --theme-line-height-caption-single: 100%;
-    --theme-line-height-default: 142.9%;
-    --theme-line-height-default-single: 114.3%;
-    --theme-line-height-l: 150%;
-    --theme-line-height-l-single: 125%;
-    --theme-line-height-h2: 145.5%;
-    --theme-line-height-xl: 109.1%;
-    --theme-line-height-xs: 100%;
-    --theme-line-height-sm: 120%;
-    --theme-line-height-md: 143%;
-    --theme-line-height-lg: 150%;
+      --theme-line-height-s: 150%;
+      --theme-line-height-s-single: 150%;
+      --theme-line-height-caption: 150%;
+      --theme-line-height-caption-single: 100%;
+      --theme-line-height-default: 142.9%;
+      --theme-line-height-default-single: 114.3%;
+      --theme-line-height-l: 150%;
+      --theme-line-height-l-single: 125%;
+      --theme-line-height-h2: 145.5%;
+      --theme-line-height-xl: 109.1%;
+      --theme-line-height-xs: 100%;
+      --theme-line-height-sm: 120%;
+      --theme-line-height-md: 143%;
+      --theme-line-height-lg: 150%;
   }
-}
+}

packages/core/src/components/my-component/my-component.tsx

@@ -4,7 +4,7 @@
  * 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.
+ * LICENxSE file in the root directory of this source tree.
  */
 import { Component, h, Host } from '@stencil/core';
 

packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts

@@ -8,8 +8,7 @@
  */
 
 import { expect } from '@playwright/test';
-import { regressionTest } from '@utils/test';
-
+import { regressionTest, test } from '@utils/test';
 const smallWidth = 639;
 const mediumWidth = 642;
 const largeWidth = 1026;
@@ -176,39 +175,61 @@ regressionTest.describe('basic navigation mobile', () => {
     ).toMatchSnapshot();
   });
 
-  regressionTest('mobile expanded overlay', async ({ page }) => {
-    await page.goto('basic-navigation/mobile');
+  test('mobile expanded overlay', async ({ page, mount }) => {
+    // await page.goto('basic-navigation/mobile');
+    await mount(
+      `
+      <ix-basic-navigation application-name="Test">
+        <div slot="logo">LOGO</div>
+        <ix-menu>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-item>Test 1</ix-menu-item>
+          <ix-menu-settings>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+            <ix-menu-settings-item>Item 1</ix-menu-settings-item>
+          </ix-menu-settings>
+        </ix-menu>
+        <div class="debug-element"></div>
+      </ix-basic-navigation>
+      `
+    );
+
     await page.setViewportSize({
       height: 1200,
       width: smallWidth,
     });
 
+    // Animation
     await page.waitForTimeout(500);
-    const header = page.locator('ix-application-header');
-    const menuElement = header.locator('ix-burger-menu');
-
-    await expect(menuElement).toBeVisible();
 
-    await menuElement.click();
-    await expect(page.locator('ix-menu')).toHaveClass(/mode-small/);
-    await expect(page.locator('ix-menu')).toHaveClass(/expanded/);
+    const toggleMenuButton = page.locator('ix-burger-menu').nth(0);
+    await expect(toggleMenuButton).toBeVisible();
+    await toggleMenuButton.click();
 
-    const settingsButton = await page.waitForSelector('#settings');
-    await settingsButton.click();
-    await expect(page.locator('ix-menu-settings')).toBeVisible();
+    const menu = page.locator('ix-menu');
+    await expect(menu).toHaveClass(/expanded/);
 
-    await menuElement.click();
+    // Animation
+    await page.waitForTimeout(500);
 
-    const menu = page.locator('ix-menu');
-    const item = menu.locator('ix-menu-item').nth(0);
+    const settings = page.locator('#settings');
+    await settings.click({
+      force: true,
+    });
+    // Animation
+    await page.waitForTimeout(500);
+    await expect(menu).not.toHaveClass(/expanded/);
 
-    await expect(
-      page.locator('ix-menu').locator('.menu.expanded')
-    ).toBeVisible();
+    const settingsOverlay = page.locator('ix-menu-settings');
+    await expect(settingsOverlay).toBeVisible();
 
-    await expect(item).toBeVisible();
+    await toggleMenuButton.click();
+    await expect(menu).toHaveClass(/expanded/);
 
-    await page.waitForTimeout(1000);
+    // Animation
+    await page.waitForTimeout(500);
 
     expect(
       await page.screenshot({ fullPage: true, animations: 'disabled' })