From 8e78e54340d874334d6b51c440374a16d67d5ecc Mon Sep 17 00:00:00 2001
From: MartinS-git <info@eyepic.de>
Date: Thu, 25 Jun 2026 15:09:38 +0200
Subject: [PATCH 1/4] feat(ui): add hover and active states for Card component

Signed-off-by: MartinS-git <info@eyepic.de>
---
 .changeset/card-hover-active-states.md        |  5 +++
 .../src/components/Card/Card.component.tsx    | 10 ++++-
 .../src/components/Card/Card.stories.tsx      |  8 ++++
 .../src/components/Card/Card.test.tsx         | 34 ++++++++++++++
 packages/ui-components/src/global.css         | 45 +++++++++++++------
 5 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/card-hover-active-states.md

diff --git a/.changeset/card-hover-active-states.md b/.changeset/card-hover-active-states.md
new file mode 100644
index 0000000000..344acbbca0
--- /dev/null
+++ b/.changeset/card-hover-active-states.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+feat(Card): add hover and active states for interactive cards. When rendered as `<a>` or `<button>`, the Card now shows an elevated border on hover (`border-theme-card-hover`) with an enhanced shadow, and an accent border on active. Adds `--color-border-high` and `--color-card-border-hover` CSS variables.
diff --git a/packages/ui-components/src/components/Card/Card.component.tsx b/packages/ui-components/src/components/Card/Card.component.tsx
index 94c70635f4..6b90675609 100644
--- a/packages/ui-components/src/components/Card/Card.component.tsx
+++ b/packages/ui-components/src/components/Card/Card.component.tsx
@@ -14,6 +14,13 @@ const cardStyles = `
   jn:shadow-theme-default
 `
 
+const cardInteractiveStyles = `
+  jn:cursor-pointer
+  jn:hover:border-theme-card-hover
+  jn:hover:shadow-theme-default-hover
+  jn:active:border-theme-accent
+`
+
 const cardPadding = "jn:p-4"
 
 export interface CardProps extends HTMLAttributes<HTMLElement> {
@@ -60,7 +67,8 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
  */
 export const Card = forwardRef<HTMLElement, CardProps>(
   ({ children, padding = false, className = "", href, onClick, disabled = false, ...props }, ref) => {
-    const combinedClassName = `juno-card ${cardStyles} ${padding ? cardPadding : ""} ${className} ${disabled ? "jn:cursor-not-allowed" : ""}`
+    const isInteractive = (!!href || !!onClick) && !disabled
+    const combinedClassName = `juno-card ${cardStyles} ${isInteractive ? cardInteractiveStyles : ""} ${padding ? cardPadding : ""} ${className} ${disabled ? "jn:cursor-not-allowed" : ""}`
 
     // Handle click event when disabled
     const handleClick: MouseEventHandler<HTMLElement> = (event) => {
diff --git a/packages/ui-components/src/components/Card/Card.stories.tsx b/packages/ui-components/src/components/Card/Card.stories.tsx
index eea5ccbc74..46dce074b7 100644
--- a/packages/ui-components/src/components/Card/Card.stories.tsx
+++ b/packages/ui-components/src/components/Card/Card.stories.tsx
@@ -66,3 +66,11 @@ export const WithoutPadding: Story = {
     onClick: undefined,
   },
 }
+
+export const InteractiveHover: Story = {
+  args: {
+    children: "Hover or click me to see the interactive states.",
+    padding: true,
+    onClick: () => {},
+  },
+}
diff --git a/packages/ui-components/src/components/Card/Card.test.tsx b/packages/ui-components/src/components/Card/Card.test.tsx
index 0b40d87eb3..ec8577ee7b 100644
--- a/packages/ui-components/src/components/Card/Card.test.tsx
+++ b/packages/ui-components/src/components/Card/Card.test.tsx
@@ -118,4 +118,38 @@ describe("Card Component", () => {
       expect(handleClick).not.toHaveBeenCalled()
     })
   })
+
+  describe("Interactive Styles", () => {
+    test("applies interactive styles when onClick is provided", () => {
+      render(<Card data-testid="card" onClick={() => {}}>Button</Card>)
+      const element = screen.getByTestId("card")
+      expect(element).toHaveClass("jn:cursor-pointer")
+      expect(element).toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).toHaveClass("jn:active:border-theme-accent")
+    })
+
+    test("applies interactive styles when href is provided", () => {
+      render(<Card data-testid="card" href="https://example.com">Link</Card>)
+      const element = screen.getByTestId("card")
+      expect(element).toHaveClass("jn:cursor-pointer")
+      expect(element).toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).toHaveClass("jn:active:border-theme-accent")
+    })
+
+    test("does not apply interactive styles when neither href nor onClick are provided", () => {
+      render(<Card data-testid="card">Div</Card>)
+      const element = screen.getByTestId("card")
+      expect(element).not.toHaveClass("jn:cursor-pointer")
+      expect(element).not.toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).not.toHaveClass("jn:active:border-theme-accent")
+    })
+
+    test("does not apply interactive styles when disabled", () => {
+      render(<Card data-testid="card" onClick={() => {}} disabled>Disabled</Card>)
+      const element = screen.getByTestId("card")
+      expect(element).not.toHaveClass("jn:cursor-pointer")
+      expect(element).not.toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).toHaveClass("jn:cursor-not-allowed")
+    })
+  })
 })
diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css
index fa855e59d5..65c346118b 100644
--- a/packages/ui-components/src/global.css
+++ b/packages/ui-components/src/global.css
@@ -421,6 +421,7 @@
   --border-color-theme-box-default: var(--color-box-border);
 
   --border-color-theme-card-default: var(--color-card-border-default);
+  --border-color-theme-card-hover: var(--color-card-border-hover);
 
   --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
   --border-color-theme-codeblock-tab-active: var(--color-text-default);
@@ -532,6 +533,7 @@
   /* LT Global */
   --color-global-bg: var(--color-juno-grey-light-1);
   --color-border-default: var(--color-juno-grey-light-7);
+  --color-border-high: var(--color-juno-grey-light-9);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
   /* LT FOCUS */
@@ -595,7 +597,7 @@
   --color-button-primary-danger-active-text: var(--color-white);
   --color-button-primary-danger-active-bg: var(--color-juno-primary-danger-5);
 
-   /* LT DataGrid */
+  /* LT DataGrid */
   --color-datagridtoolbar-bg: var(--color-background-lvl-1);
   --color-datagridrow-selected: var(--color-accent);
 
@@ -650,6 +652,7 @@
   /* LT Card */
   --color-card-background-default: var(--color-white);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* LT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);
@@ -742,7 +745,7 @@
   ); /* Dark Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
   /* LT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
-  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.2)), 0 2px 8px 0 rgba(0, 0, 0, 0.2);
   /* LT PageFooter */
   --color-pagefooter-text: var(--color-text-light);
   --color-pagefooter-background: var(--color-white);
@@ -783,6 +786,7 @@
   /* DT Global */
   --color-global-bg: var(--color-juno-grey-blue-10);
   --color-border-default: var(--color-juno-grey-blue-3);
+  --color-border-high: var(--color-juno-grey-blue-1);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
 
@@ -901,6 +905,7 @@
   /* DT Card */
   --color-card-background-default: var(--color-juno-grey-blue-10);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* DT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);
@@ -1052,41 +1057,53 @@
     @apply jn:text-theme-link;
   }
 
-  h1, .juno-h1,
-  h2, .juno-h2,
-  h3, .juno-h3,
-  h4, .juno-h4,
-  h5, .juno-h5,
-  h6, .juno-h6 {
+  h1,
+  .juno-h1,
+  h2,
+  .juno-h2,
+  h3,
+  .juno-h3,
+  h4,
+  .juno-h4,
+  h5,
+  .juno-h5,
+  h6,
+  .juno-h6 {
     @apply jn:font-sans jn:font-bold;
   }
 
-  h1, .juno-h1 {
+  h1,
+  .juno-h1 {
     font-size: 1.69rem;
     line-height: 1.375;
   }
 
-  h2, .juno-h2 {
+  h2,
+  .juno-h2 {
     font-size: 1.56rem;
     line-height: 1.375;
   }
 
-  h3, .juno-h3 {
+  h3,
+  .juno-h3 {
     font-size: 1.44rem;
     line-height: 1.375;
   }
 
-  h4, .juno-h4 {
+  h4,
+  .juno-h4 {
     font-size: 1.28rem;
     line-height: 1.625;
   }
 
-  h5, .juno-h5 {
+  h5,
+  .juno-h5 {
     font-size: 1.125rem;
     line-height: 1.625;
   }
 
-  h6, .juno-h6 {
+  h6,
+  .juno-h6 {
     font-size: 1rem;
     line-height: 1.5;
   }

From f49a8763a87e872caced19f8bee84ea0e9974785 Mon Sep 17 00:00:00 2001
From: MartinS-git <info@eyepic.de>
Date: Thu, 25 Jun 2026 15:11:56 +0200
Subject: [PATCH 2/4] chore(ui): format Card test with prettier

Signed-off-by: MartinS-git <info@eyepic.de>
---
 .../src/components/Card/Card.test.tsx          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/components/Card/Card.test.tsx b/packages/ui-components/src/components/Card/Card.test.tsx
index ec8577ee7b..43a6c1a79c 100644
--- a/packages/ui-components/src/components/Card/Card.test.tsx
+++ b/packages/ui-components/src/components/Card/Card.test.tsx
@@ -121,7 +121,11 @@ describe("Card Component", () => {
 
   describe("Interactive Styles", () => {
     test("applies interactive styles when onClick is provided", () => {
-      render(<Card data-testid="card" onClick={() => {}}>Button</Card>)
+      render(
+        <Card data-testid="card" onClick={() => {}}>
+          Button
+        </Card>
+      )
       const element = screen.getByTestId("card")
       expect(element).toHaveClass("jn:cursor-pointer")
       expect(element).toHaveClass("jn:hover:border-theme-card-hover")
@@ -129,7 +133,11 @@ describe("Card Component", () => {
     })
 
     test("applies interactive styles when href is provided", () => {
-      render(<Card data-testid="card" href="https://example.com">Link</Card>)
+      render(
+        <Card data-testid="card" href="https://example.com">
+          Link
+        </Card>
+      )
       const element = screen.getByTestId("card")
       expect(element).toHaveClass("jn:cursor-pointer")
       expect(element).toHaveClass("jn:hover:border-theme-card-hover")
@@ -145,7 +153,11 @@ describe("Card Component", () => {
     })
 
     test("does not apply interactive styles when disabled", () => {
-      render(<Card data-testid="card" onClick={() => {}} disabled>Disabled</Card>)
+      render(
+        <Card data-testid="card" onClick={() => {}} disabled>
+          Disabled
+        </Card>
+      )
       const element = screen.getByTestId("card")
       expect(element).not.toHaveClass("jn:cursor-pointer")
       expect(element).not.toHaveClass("jn:hover:border-theme-card-hover")

From 917c458d1f4c8bf37145f2923493e763485b213d Mon Sep 17 00:00:00 2001
From: MartinS-git <info@eyepic.de>
Date: Thu, 25 Jun 2026 15:26:21 +0200
Subject: [PATCH 3/4] fix(ui): sync Card hover tokens to theme.css and add
 shadow test coverage

Signed-off-by: MartinS-git <info@eyepic.de>
---
 packages/ui-components/src/components/Card/Card.test.tsx | 2 ++
 packages/ui-components/src/theme.css                     | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/src/components/Card/Card.test.tsx b/packages/ui-components/src/components/Card/Card.test.tsx
index 43a6c1a79c..c5eb16e8dc 100644
--- a/packages/ui-components/src/components/Card/Card.test.tsx
+++ b/packages/ui-components/src/components/Card/Card.test.tsx
@@ -129,6 +129,7 @@ describe("Card Component", () => {
       const element = screen.getByTestId("card")
       expect(element).toHaveClass("jn:cursor-pointer")
       expect(element).toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).toHaveClass("jn:hover:shadow-theme-default-hover")
       expect(element).toHaveClass("jn:active:border-theme-accent")
     })
 
@@ -141,6 +142,7 @@ describe("Card Component", () => {
       const element = screen.getByTestId("card")
       expect(element).toHaveClass("jn:cursor-pointer")
       expect(element).toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).toHaveClass("jn:hover:shadow-theme-default-hover")
       expect(element).toHaveClass("jn:active:border-theme-accent")
     })
 
diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css
index 9fa622bda1..cbbb6894cb 100644
--- a/packages/ui-components/src/theme.css
+++ b/packages/ui-components/src/theme.css
@@ -409,6 +409,7 @@
   --border-color-theme-box-default: var(--color-box-border);
 
   --border-color-theme-card-default: var(--color-card-border-default);
+  --border-color-theme-card-hover: var(--color-card-border-hover);
 
   --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
   --border-color-theme-codeblock-tab-active: var(--color-text-default);
@@ -521,6 +522,7 @@
   /* LT Global */
   --color-global-bg: var(--color-juno-grey-light-1);
   --color-border-default: var(--color-juno-grey-light-7);
+  --color-border-high: var(--color-juno-grey-light-9);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
   /* LT FOCUS */
@@ -635,6 +637,7 @@
   /* LT Card */
   --color-card-background-default: var(--color-white);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* LT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);
@@ -730,7 +733,7 @@
   ); /* Light Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
   /* LT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
-  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.2)), 0 2px 8px 0 rgba(0, 0, 0, 0.2);
   /* LT PageFooter */
   --color-pagefooter-text: var(--color-text-light);
   --color-pagefooter-background: var(--color-white);
@@ -772,6 +775,7 @@
   /* DT Global */
   --color-global-bg: var(--color-juno-grey-blue-10);
   --color-border-default: var(--color-juno-grey-blue-3);
+  --color-border-high: var(--color-juno-grey-blue-1);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
 
@@ -888,6 +892,7 @@
   /* DT Card */
   --color-card-background-default: var(--color-juno-grey-blue-10);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* DT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);

From 5159a3c189915e71d13c891d7bd4f2d05283a25a Mon Sep 17 00:00:00 2001
From: MartinS-git <info@eyepic.de>
Date: Fri, 26 Jun 2026 11:45:56 +0200
Subject: [PATCH 4/4] fix(ui): address Card PR review feedback from Franz

Signed-off-by: MartinS-git <info@eyepic.de>
---
 .../src/components/Card/Card.component.tsx    |  7 ++++++-
 .../src/components/Card/Card.stories.tsx      |  8 --------
 .../src/components/Card/Card.test.tsx         | 20 ++++---------------
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/ui-components/src/components/Card/Card.component.tsx b/packages/ui-components/src/components/Card/Card.component.tsx
index 6b90675609..c52cd67ba2 100644
--- a/packages/ui-components/src/components/Card/Card.component.tsx
+++ b/packages/ui-components/src/components/Card/Card.component.tsx
@@ -19,6 +19,11 @@ const cardInteractiveStyles = `
   jn:hover:border-theme-card-hover
   jn:hover:shadow-theme-default-hover
   jn:active:border-theme-accent
+  jn:focus:outline-hidden
+  jn:focus-visible:ring-2
+  jn:focus-visible:ring-theme-focus
+  jn:focus-visible:ring-offset-1
+  jn:focus-visible:ring-offset-theme-focus
 `
 
 const cardPadding = "jn:p-4"
@@ -68,7 +73,7 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
 export const Card = forwardRef<HTMLElement, CardProps>(
   ({ children, padding = false, className = "", href, onClick, disabled = false, ...props }, ref) => {
     const isInteractive = (!!href || !!onClick) && !disabled
-    const combinedClassName = `juno-card ${cardStyles} ${isInteractive ? cardInteractiveStyles : ""} ${padding ? cardPadding : ""} ${className} ${disabled ? "jn:cursor-not-allowed" : ""}`
+    const combinedClassName = `juno-card ${isInteractive ? "juno-card-interactive" : ""} ${cardStyles} ${isInteractive ? cardInteractiveStyles : ""} ${padding ? cardPadding : ""} ${className} ${disabled ? "jn:cursor-not-allowed" : ""}`
 
     // Handle click event when disabled
     const handleClick: MouseEventHandler<HTMLElement> = (event) => {
diff --git a/packages/ui-components/src/components/Card/Card.stories.tsx b/packages/ui-components/src/components/Card/Card.stories.tsx
index 46dce074b7..eea5ccbc74 100644
--- a/packages/ui-components/src/components/Card/Card.stories.tsx
+++ b/packages/ui-components/src/components/Card/Card.stories.tsx
@@ -66,11 +66,3 @@ export const WithoutPadding: Story = {
     onClick: undefined,
   },
 }
-
-export const InteractiveHover: Story = {
-  args: {
-    children: "Hover or click me to see the interactive states.",
-    padding: true,
-    onClick: () => {},
-  },
-}
diff --git a/packages/ui-components/src/components/Card/Card.test.tsx b/packages/ui-components/src/components/Card/Card.test.tsx
index c5eb16e8dc..935eabcdcc 100644
--- a/packages/ui-components/src/components/Card/Card.test.tsx
+++ b/packages/ui-components/src/components/Card/Card.test.tsx
@@ -126,11 +126,7 @@ describe("Card Component", () => {
           Button
         </Card>
       )
-      const element = screen.getByTestId("card")
-      expect(element).toHaveClass("jn:cursor-pointer")
-      expect(element).toHaveClass("jn:hover:border-theme-card-hover")
-      expect(element).toHaveClass("jn:hover:shadow-theme-default-hover")
-      expect(element).toHaveClass("jn:active:border-theme-accent")
+      expect(screen.getByTestId("card")).toHaveClass("juno-card-interactive")
     })
 
     test("applies interactive styles when href is provided", () => {
@@ -139,19 +135,12 @@ describe("Card Component", () => {
           Link
         </Card>
       )
-      const element = screen.getByTestId("card")
-      expect(element).toHaveClass("jn:cursor-pointer")
-      expect(element).toHaveClass("jn:hover:border-theme-card-hover")
-      expect(element).toHaveClass("jn:hover:shadow-theme-default-hover")
-      expect(element).toHaveClass("jn:active:border-theme-accent")
+      expect(screen.getByTestId("card")).toHaveClass("juno-card-interactive")
     })
 
     test("does not apply interactive styles when neither href nor onClick are provided", () => {
       render(<Card data-testid="card">Div</Card>)
-      const element = screen.getByTestId("card")
-      expect(element).not.toHaveClass("jn:cursor-pointer")
-      expect(element).not.toHaveClass("jn:hover:border-theme-card-hover")
-      expect(element).not.toHaveClass("jn:active:border-theme-accent")
+      expect(screen.getByTestId("card")).not.toHaveClass("juno-card-interactive")
     })
 
     test("does not apply interactive styles when disabled", () => {
@@ -161,8 +150,7 @@ describe("Card Component", () => {
         </Card>
       )
       const element = screen.getByTestId("card")
-      expect(element).not.toHaveClass("jn:cursor-pointer")
-      expect(element).not.toHaveClass("jn:hover:border-theme-card-hover")
+      expect(element).not.toHaveClass("juno-card-interactive")
       expect(element).toHaveClass("jn:cursor-not-allowed")
     })
   })