kiwicom · mainframev · Dec 11, 2023 · Dec 7, 2023 · Dec 11, 2023
diff --git a/packages/orbit-components/src/Stepper/Stepper.ct.tsx b/packages/orbit-components/src/Stepper/Stepper.ct.tsx
@@ -20,6 +20,22 @@ test.describe("visual Stepper", () => {
     await expect(component).toHaveScreenshot();
   });
 
+  test("Stepper disabled with active", async ({ mount }) => {
+    const component = await mount(
+      <StepperStory titleIncrement="increment" titleDecrement="decrement" disabled active />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Stepper with active", async ({ mount }) => {
+    const component = await mount(
+      <StepperStory titleIncrement="increment" titleDecrement="decrement" active />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
   test("Stepper disabled increment", async ({ mount }) => {
     const component = await mount(
       <StepperStory
@@ -34,6 +50,21 @@ test.describe("visual Stepper", () => {
     await expect(component).toHaveScreenshot();
   });
 
+  test("Stepper disabled increment with active", async ({ mount }) => {
+    const component = await mount(
+      <StepperStory
+        titleIncrement="increment"
+        titleDecrement="decrement"
+        maxValue={10}
+        defaultValue={10}
+        minValue={0}
+        active
+      />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
   test("Stepper disabled decrement", async ({ mount }) => {
     const component = await mount(
       <StepperStory
@@ -47,4 +78,19 @@ test.describe("visual Stepper", () => {
 
     await expect(component).toHaveScreenshot();
   });
+
+  test("Stepper disabled decrement with active", async ({ mount }) => {
+    const component = await mount(
+      <StepperStory
+        titleIncrement="increment"
+        titleDecrement="decrement"
+        maxValue={10}
+        defaultValue={0}
+        minValue={0}
+        active
+      />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/...hots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Desktop-darwin.png b/...hots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Desktop-darwin.png
diff --git a/...shots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Desktop-linux.png b/...shots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Desktop-linux.png
diff --git a/...isual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Desktop-darwin.png b/...isual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Desktop-darwin.png
diff --git a/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Desktop-linux.png b/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Desktop-linux.png
diff --git a/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Mobile-darwin.png b/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Mobile-darwin.png
diff --git a/.../visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Mobile-linux.png b/.../visual-Stepper-Stepper-disabled-decrement-with-active-1-Large-Mobile-linux.png
diff --git a/...isual-Stepper-Stepper-disabled-decrement-with-active-1-Medium-Mobile-darwin.png b/...isual-Stepper-Stepper-disabled-decrement-with-active-1-Medium-Mobile-darwin.png
diff --git a/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Medium-Mobile-linux.png b/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Medium-Mobile-linux.png
diff --git a/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Small-Mobile-darwin.png b/...visual-Stepper-Stepper-disabled-decrement-with-active-1-Small-Mobile-darwin.png
diff --git a/.../visual-Stepper-Stepper-disabled-decrement-with-active-1-Small-Mobile-linux.png b/.../visual-Stepper-Stepper-disabled-decrement-with-active-1-Small-Mobile-linux.png
diff --git a/...shots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Tablet-darwin.png b/...shots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Tablet-darwin.png
diff --git a/...pshots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Tablet-linux.png b/...pshots/visual-Stepper-Stepper-disabled-decrement-with-active-1-Tablet-linux.png
diff --git a/...hots/visual-Stepper-Stepper-disabled-increment-with-active-1-Desktop-darwin.png b/...hots/visual-Stepper-Stepper-disabled-increment-with-active-1-Desktop-darwin.png
diff --git a/...shots/visual-Stepper-Stepper-disabled-increment-with-active-1-Desktop-linux.png b/...shots/visual-Stepper-Stepper-disabled-increment-with-active-1-Desktop-linux.png
diff --git a/...isual-Stepper-Stepper-disabled-increment-with-active-1-Large-Desktop-darwin.png b/...isual-Stepper-Stepper-disabled-increment-with-active-1-Large-Desktop-darwin.png
diff --git a/...visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Desktop-linux.png b/...visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Desktop-linux.png
diff --git a/...visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Mobile-darwin.png b/...visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Mobile-darwin.png
diff --git a/.../visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Mobile-linux.png b/.../visual-Stepper-Stepper-disabled-increment-with-active-1-Large-Mobile-linux.png
diff --git a/...isual-Stepper-Stepper-disabled-increment-with-active-1-Medium-Mobile-darwin.png b/...isual-Stepper-Stepper-disabled-increment-with-active-1-Medium-Mobile-darwin.png
diff --git a/...visual-Stepper-Stepper-disabled-increment-with-active-1-Medium-Mobile-linux.png b/...visual-Stepper-Stepper-disabled-increment-with-active-1-Medium-Mobile-linux.png
diff --git a/...visual-Stepper-Stepper-disabled-increment-with-active-1-Small-Mobile-darwin.png b/...visual-Stepper-Stepper-disabled-increment-with-active-1-Small-Mobile-darwin.png
diff --git a/.../visual-Stepper-Stepper-disabled-increment-with-active-1-Small-Mobile-linux.png b/.../visual-Stepper-Stepper-disabled-increment-with-active-1-Small-Mobile-linux.png
diff --git a/...shots/visual-Stepper-Stepper-disabled-increment-with-active-1-Tablet-darwin.png b/...shots/visual-Stepper-Stepper-disabled-increment-with-active-1-Tablet-darwin.png
diff --git a/...pshots/visual-Stepper-Stepper-disabled-increment-with-active-1-Tablet-linux.png b/...pshots/visual-Stepper-Stepper-disabled-increment-with-active-1-Tablet-linux.png
diff --git a/....tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Desktop-darwin.png b/....tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Desktop-darwin.png
diff --git a/...t.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Desktop-linux.png b/...t.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Desktop-linux.png
diff --git a/...napshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Desktop-darwin.png b/...napshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Desktop-darwin.png
diff --git a/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Desktop-linux.png b/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Desktop-linux.png
diff --git a/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Mobile-darwin.png b/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Mobile-darwin.png
diff --git a/...-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Mobile-linux.png b/...-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Large-Mobile-linux.png
diff --git a/...napshots/visual-Stepper-Stepper-disabled-with-active-1-Medium-Mobile-darwin.png b/...napshots/visual-Stepper-Stepper-disabled-with-active-1-Medium-Mobile-darwin.png
diff --git a/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Medium-Mobile-linux.png b/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Medium-Mobile-linux.png
diff --git a/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Small-Mobile-darwin.png b/...snapshots/visual-Stepper-Stepper-disabled-with-active-1-Small-Mobile-darwin.png
diff --git a/...-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Small-Mobile-linux.png b/...-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Small-Mobile-linux.png
diff --git a/...t.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Tablet-darwin.png b/...t.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Tablet-darwin.png
diff --git a/...ct.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Tablet-linux.png b/...ct.tsx-snapshots/visual-Stepper-Stepper-disabled-with-active-1-Tablet-linux.png
diff --git a/...tepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Desktop-darwin.png b/...tepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Desktop-darwin.png
diff --git a/...Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Desktop-linux.png b/...Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Desktop-linux.png
diff --git a/....ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Desktop-darwin.png b/....ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Desktop-darwin.png
diff --git a/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Desktop-linux.png b/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Desktop-linux.png
diff --git a/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Mobile-darwin.png b/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Mobile-darwin.png
diff --git a/...er.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Mobile-linux.png b/...er.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Large-Mobile-linux.png
diff --git a/....ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Medium-Mobile-darwin.png b/....ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Medium-Mobile-darwin.png
diff --git a/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Medium-Mobile-linux.png b/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Medium-Mobile-linux.png
diff --git a/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Small-Mobile-darwin.png b/...r.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Small-Mobile-darwin.png
diff --git a/...er.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Small-Mobile-linux.png b/...er.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Small-Mobile-linux.png
diff --git a/...Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Tablet-darwin.png b/...Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Tablet-darwin.png
diff --git a/.../Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Tablet-linux.png b/.../Stepper.ct.tsx-snapshots/visual-Stepper-Stepper-with-active-1-Tablet-linux.png
diff --git a/packages/orbit-components/src/Stepper/StepperStateless/index.tsx b/packages/orbit-components/src/Stepper/StepperStateless/index.tsx
@@ -21,12 +21,12 @@ const stepperButtonMixin = ({ disabled, active }: { disabled: boolean; active?:
     "[&_svg]:rounded-circle",
     "focus:outline-0",
     "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2",
+    active ? "[&_svg]:bg-blue-normal" : "[&_svg]:bg-cloud-normal",
     !disabled && [
       active
-        ? "[&_svg]:bg-blue-normal hover:[&_svg]:bg-blue-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-blue-light-active)]"
-        : "[&_svg]:bg-cloud-normal hover:[&_svg]:bg-cloud-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-cloud-normal-active)]",
+        ? "hover:[&_svg]:bg-blue-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-blue-light-active)]"
+        : "hover:[&_svg]:bg-cloud-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-cloud-normal-active)]",
     ],
-    disabled && "[&_svg]:bg-cloud-normal",
   );
 
 const StepperStateless = ({