fix(core/slider): tick color

packages/core/src/components/slider/slider.scss

@@ -99,7 +99,7 @@
   --trace-reference: 0;
   --trace-reference-color: var(--theme-color-8);
   --trace-color: var(--theme-color-dynamic);
-  --tick-color: var(--theme-color-8);
+  --tick-color: var(--theme-color-7);
   --tick-color--active: var(--theme-color-dynamic);
   --track-color: var(--theme-color-component-4);
 

packages/core/src/tests/slider/slider.e2e.ts

@@ -11,41 +11,44 @@ import { test } from '@utils/test';
 
 test('should show reference value', async ({ page, mount }) => {
   await mount(`
-    <ix-slider
-      style="width: 20rem"
-      value="100"
-    ></ix-slider>
-
-    <ix-slider
-      style="width: 20rem"
-      value="100"
-      step="25"
-      trace
-      trace-reference="25"
-    ></ix-slider>
-
-    <ix-slider
-      style="width: 20rem"
-      value="100"
-      step="25"
-      trace
-      trace-reference="50"
-    ></ix-slider>
-
-    <ix-slider
-      style="width: 20rem"
-      value="0"
-      trace
-      trace-reference="75"
-    ></ix-slider>
+    <div id='slider-container'>
+      <ix-slider
+        style="width: 20rem"
+        value="100"
+      ></ix-slider>
+
+      <ix-slider
+        style="width: 20rem"
+        value="100"
+        step="25"
+        trace
+        trace-reference="25"
+      ></ix-slider>
+
+      <ix-slider
+        style="width: 20rem"
+        value="100"
+        step="25"
+        trace
+        trace-reference="50"
+      ></ix-slider>
+
+      <ix-slider
+        style="width: 20rem"
+        value="0"
+        trace
+        trace-reference="75"
+      ></ix-slider>
+    </div>
   `);
 
   const slider = page.locator('ix-slider').nth(0);
   await expect(slider).toHaveClass(/hydrated/);
-
   await expect(slider).toBeVisible();
 
-  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  expect(
+    await page.locator('#slider-container').screenshot()
+  ).toMatchSnapshot();
 });
 
 test('should render marker', async ({ page, mount }) => {
@@ -65,26 +68,30 @@ test('should render marker', async ({ page, mount }) => {
     (elm: HTMLIxSliderElement) => (elm.marker = [10, 20, 70, 80, 100])
   );
 
-  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  expect(await page.locator('ix-slider').screenshot()).toMatchSnapshot();
 });
 
 test('should render with min-max changes', async ({ page, mount }) => {
   await mount(`
-    <ix-slider
-      min="500"
-      max="1000"
-      value="777"
-      trace
-      traceReference="498"
-    ></ix-slider>
-
-    <ix-slider
-      min="-100"
-      max="50"
-      value="25"
-      trace
-      traceReference="-40"
-    ></ix-slider>
+    <div id='slider-container'>
+
+      <ix-slider
+        min="500"
+        max="1000"
+        value="777"
+        trace
+        traceReference="498"
+      ></ix-slider>
+
+      <ix-slider
+        min="-100"
+        max="50"
+        value="25"
+        trace
+        traceReference="-40"
+      ></ix-slider>
+
+    </div>
   `);
 
   const slider1 = page.locator('ix-slider').nth(0);
@@ -101,26 +108,32 @@ test('should render with min-max changes', async ({ page, mount }) => {
     elm.marker = [-50, 25];
   });
 
-  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  expect(
+    await page.locator('#slider-container').screenshot()
+  ).toMatchSnapshot();
 });
 
 test('should render with label', async ({ page, mount }) => {
   await mount(`
-    <ix-slider
-      min="500"
-      max="1000"
-      value="777"
-      trace
-      traceReference="2000"
-      >
-      <span slot="label-start">500</span>
-      <span slot="label-end">1000</span>
-    </ix-slider>
-
-    <ix-slider>
-      <ix-icon name="rocket" slot="label-start">500</ix-icon>
-      <ix-icon name="rocket" slot="label-end">1000</ix-icon>
-    </ix-slider>
+    <div id='slider-container'>
+
+      <ix-slider
+        min="500"
+        max="1000"
+        value="777"
+        trace
+        traceReference="2000"
+        >
+        <span slot="label-start">500</span>
+        <span slot="label-end">1000</span>
+      </ix-slider>
+
+      <ix-slider>
+        <ix-icon name="rocket" slot="label-start">500</ix-icon>
+        <ix-icon name="rocket" slot="label-end">1000</ix-icon>
+      </ix-slider>
+
+    </div>
   `);
 
   const slider1 = page.locator('ix-slider').nth(0);
@@ -129,18 +142,24 @@ test('should render with label', async ({ page, mount }) => {
   await expect(slider1).toHaveClass(/hydrated/);
   await expect(slider2).toHaveClass(/hydrated/);
 
-  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  expect(
+    await page.locator('#slider-container').screenshot()
+  ).toMatchSnapshot();
 });
 
 test('should render with error', async ({ page, mount }) => {
   await mount(`
-    <ix-slider error="Some error message">
-    </ix-slider>
+    <div id='slider-container'>
+
+      <ix-slider error="Some error message">
+      </ix-slider>
+
+      <ix-slider error="Some error message">
+        <span slot="label-start">500</span>
+        <span slot="label-end">1000</span>
+      </ix-slider>
 
-    <ix-slider error="Some error message">
-      <span slot="label-start">500</span>
-      <span slot="label-end">1000</span>
-    </ix-slider>
+    </div>
   `);
 
   const slider1 = page.locator('ix-slider').nth(0);
@@ -149,5 +168,7 @@ test('should render with error', async ({ page, mount }) => {
   await expect(slider1).toHaveClass(/hydrated/);
   await expect(slider2).toHaveClass(/hydrated/);
 
-  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  expect(
+    await page.locator('#slider-container').screenshot()
+  ).toMatchSnapshot();
 });