From c2fc4245df06dfa8c06a90beb9995e818695d0d1 Mon Sep 17 00:00:00 2001
From: RTannenbaum <rachel.tannenbaum@vonage.com>
Date: Mon, 4 Mar 2024 08:58:04 +0200
Subject: [PATCH 1/3] add appearance to card

---
 libs/components/src/lib/card/README.md | 10 ++++++++++
 libs/components/src/lib/card/card.scss | 21 ++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/lib/card/README.md b/libs/components/src/lib/card/README.md
index f0e2434ca8..2e0b0ec974 100644
--- a/libs/components/src/lib/card/README.md
+++ b/libs/components/src/lib/card/README.md
@@ -81,6 +81,16 @@ Add a `text` attribute to add text to the card.
 <vwc-card headline="Vivid Card Component" subtitle="Extra text below the card headline" text="The card can contain multiple lines of text."></vwc-card>
 ```
 
+### With-Hover
+
+```html preview
+<vwc-layout>
+<vwc-card with-hover appearance="elevated" headline="Vivid Card - Appearance Elevated" subtitle="this is the default appearance"></vwc-card>
+<vwc-card with-hover appearance="outlined" headline="Vivid Card - Appearance Outlined" subtitle="set a border to the card same as elevation='0' "></vwc-card>
+<vwc-card with-hover appearance="ghost" headline="Vivid Card - Appearance Ghost" subtitle="present the card template without background or shadow"></vwc-card>
+</vwc-layout>
+```
+
 ## Slots
 
 ### Graphic
diff --git a/libs/components/src/lib/card/card.scss b/libs/components/src/lib/card/card.scss
index c13d92e560..3c51b841cb 100644
--- a/libs/components/src/lib/card/card.scss
+++ b/libs/components/src/lib/card/card.scss
@@ -1,6 +1,18 @@
 @use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
 @use "partials/card-variables" as card-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
+@use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
+	$connotations: accent,
+	$shades: primary primary-text primary-increment faint soft,
+	$default: accent,
+);
+@use "../../../../shared/src/lib/sass/mixins/connotation" as connotation;
+@use "../../../../shared/src/lib/sass/mixins/appearance/config" as appearance-config with (
+	$appearances: ghost,
+	$states: idle hover active,
+	$default: ghost,
+);
+@use "../../../../shared/src/lib/sass/mixins/appearance" as appearance;
 
 :host {
 	display: flex;
@@ -13,12 +25,19 @@
 }
 
 .wrapper {
+	@include appearance.appearance;
+	@include connotation.connotation (nav-item);
+
 	display: flex;
 	overflow: hidden;
 	flex-flow: column;
 	border-radius: inherit;
 	block-size: 100%;
-	color: var(#{constants.$vvd-color-canvas-text});
+	color: var(#{appearance.get-appearance-token(text)});
+
+	:host([with-hover]) & {
+		background-color: var(#{appearance.get-appearance-token(fill)});
+	}
 }
 
 .main-content {

From bbea075299efbe19edd41d323e49b0209cb43ae5 Mon Sep 17 00:00:00 2001
From: RTannenbaum <rachel.tannenbaum@vonage.com>
Date: Mon, 4 Mar 2024 10:26:52 +0200
Subject: [PATCH 2/3] fix typo

---
 libs/components/src/lib/card/card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/components/src/lib/card/card.scss b/libs/components/src/lib/card/card.scss
index 3c51b841cb..c0956ee19e 100644
--- a/libs/components/src/lib/card/card.scss
+++ b/libs/components/src/lib/card/card.scss
@@ -26,7 +26,7 @@
 
 .wrapper {
 	@include appearance.appearance;
-	@include connotation.connotation (nav-item);
+	@include connotation.connotation (card);
 
 	display: flex;
 	overflow: hidden;

From 335969a3ccf65351c391e7fcc438043cf6d66d73 Mon Sep 17 00:00:00 2001
From: RTannenbaum <rachel.tannenbaum@vonage.com>
Date: Wed, 6 Mar 2024 13:09:49 +0200
Subject: [PATCH 3/3] change connotation to cta

---
 libs/components/src/lib/card/card.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/lib/card/card.scss b/libs/components/src/lib/card/card.scss
index c0956ee19e..99e9749c57 100644
--- a/libs/components/src/lib/card/card.scss
+++ b/libs/components/src/lib/card/card.scss
@@ -2,9 +2,9 @@
 @use "partials/card-variables" as card-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
-	$connotations: accent,
+	$connotations: cta,
 	$shades: primary primary-text primary-increment faint soft,
-	$default: accent,
+	$default: cta,
 );
 @use "../../../../shared/src/lib/sass/mixins/connotation" as connotation;
 @use "../../../../shared/src/lib/sass/mixins/appearance/config" as appearance-config with (
@@ -33,7 +33,7 @@
 	flex-flow: column;
 	border-radius: inherit;
 	block-size: 100%;
-	color: var(#{appearance.get-appearance-token(text)});
+	color: var(#{constants.$vvd-color-canvas-text});
 
 	:host([with-hover]) & {
 		background-color: var(#{appearance.get-appearance-token(fill)});