fix(core/card): card-filled colors for hover/active states

packages/core/src/components/card/card.scss

@@ -41,12 +41,24 @@
   }
 }
 
-:host(.card-insight), :host(.card-outline) {
-  --ix-card-background: transparent;
+@mixin accordionChevronColorPrimary {
+  ::slotted(ix-card-accordion) {
+    color: var(--theme-color-primary);
+  }
+}
+
+:host(.card-insight),
+:host(.card-outline) {
+  @include accordionChevronColorPrimary;
+
+  --ix-card-background: var(--theme-color-ghost);
   --ix-card-border-color: var(--theme-color-soft-bdr);
 }
 
-:host(.card-notification), :host(.card-filled) {
+:host(.card-notification),
+:host(.card-filled) {
+  @include accordionChevronColorPrimary;
+
   --ix-card-background: var(--theme-color-component-1);
 }
 
@@ -85,17 +97,19 @@
   color: var(--theme-color-neutral--contrast);
 }
 
-:host(:not(.card-insight)) {
+:host(:not(.card-insight, .card-outline)) {
   --ix-card-border-color: transparent;
 }
 
 // ### Hover ###
 
-:host(.card-insight:hover) {
+:host(.card-insight:hover),
+:host(.card-outline:hover) {
   --ix-card-background: var(--theme-color-ghost--hover);
 }
 
-:host(.card-notification:hover) {
+:host(.card-notification:hover),
+:host(.card-filled:hover) {
   --ix-card-background: var(--theme-color-component-1--hover);
 }
 
@@ -129,11 +143,13 @@
 
 // ### Active ###
 
-:host(.card-insight:active) {
+:host(.card-insight:active),
+:host( .card-outline:active) {
   --ix-card-background: var(--theme-color-ghost--active);
 }
 
-:host(.card-notification:active) {
+:host(.card-notification:active),
+:host(.card-filled:active) {
   --ix-card-background: var(--theme-color-component-1--active);
 }
 
@@ -171,11 +187,13 @@
   --ix-card-border-color: var(--theme-color-dynamic);
 }
 
-:host(.selected.card-insight) {
+:host(.selected.card-insight),
+:host(.selected.card-outline) {
   --ix-card-background: var(--theme-color-ghost--selected);
 }
 
-:host(.selected.card-notification) {
+:host(.selected.card-notification),
+:host(.selected.card-filled) {
   --ix-card-background: var(--theme-color-ghost--selected);
 }
 

packages/core/src/tests/action-card/basic/index.html

@@ -72,6 +72,18 @@
       subheading="Secondary text"
       variant="primary"
     ></ix-action-card>
+    <ix-action-card
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="outline"
+    ></ix-action-card>
+    <ix-action-card
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="filled"
+    ></ix-action-card>
     <ix-action-card>
       <div class="d-flex flex-column align-items-center" style="color: #ff00ff">
         <ix-icon name="refresh"></ix-icon>

packages/core/src/tests/action-card/selected/index.html

@@ -81,6 +81,20 @@
       subheading="Secondary text"
       variant="primary"
     ></ix-action-card>
+    <ix-action-card
+      selected
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="outline"
+    ></ix-action-card>
+    <ix-action-card
+      selected
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="filled"
+    ></ix-action-card>
     <ix-action-card selected>
       <div class="d-flex flex-column align-items-center" style="color: #ff00ff">
         <ix-icon name="refresh"></ix-icon>

packages/core/src/tests/card/basic/index.html

@@ -64,6 +64,16 @@
         <ix-typography>Primary</ix-typography>
       </div>
     </ix-card>
+    <ix-card variant="outline">
+      <div class="d-flex flex-column align-items-center">
+        <ix-typography>Outline</ix-typography>
+      </div>
+    </ix-card>
+    <ix-card variant="filled">
+      <div class="d-flex flex-column align-items-center">
+        <ix-typography>Filled</ix-typography>
+      </div>
+    </ix-card>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>

packages/core/src/tests/card/selected/index.html

@@ -64,6 +64,16 @@
         <ix-typography>Primary</ix-typography>
       </div>
     </ix-card>
+    <ix-card selected variant="outline">
+      <div class="d-flex flex-column align-items-center">
+        <ix-typography>Outline</ix-typography>
+      </div>
+    </ix-card>
+    <ix-card selected variant="filled">
+      <div class="d-flex flex-column align-items-center">
+        <ix-typography>Filled</ix-typography>
+      </div>
+    </ix-card>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>

packages/core/src/tests/push-card/basic/index.html

@@ -113,6 +113,24 @@
       >
         <ix-topography format="h2">Some Content</ix-topography>
       </ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="outline"
+      >
+        <ix-topography format="h2">Some Content</ix-topography>
+      </ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="filled"
+      >
+        <ix-topography format="h2">Some Content</ix-topography>
+      </ix-push-card>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>