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

Co-authored-by: matthiashader <[email protected]> Co-authored-by: matthias <[email protected]> Co-authored-by: Daniel Leroux <[email protected]>
siemens · Oct 23, 2024 · 0b41424 · 0b41424
1 parent ed67657
commit 0b41424
Show file tree

Hide file tree

Showing 29 changed files with 97 additions and 10 deletions.
diff --git a/.changeset/short-dolls-perform.md b/.changeset/short-dolls-perform.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(card): card-filled colors for hover/active states
diff --git a/packages/core/src/components/card/card.scss b/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);
 }
 

diff --git a/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png b/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png
diff --git a/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png b/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/action-card/basic/index.html b/packages/core/src/tests/action-card/basic/index.html
@@ -73,6 +73,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>

diff --git a/packages/core/src/tests/action-card/selected/index.html b/packages/core/src/tests/action-card/selected/index.html
@@ -82,6 +82,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>

diff --git a/...hots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png b/...hots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png
diff --git a/...ots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png b/...ots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png
diff --git a/...ist-basic-should-hide-show-all-button-1-chromium---theme-classic-dark-linux.png b/...ist-basic-should-hide-show-all-button-1-chromium---theme-classic-dark-linux.png
diff --git a/...st-basic-should-hide-show-all-button-1-chromium---theme-classic-light-linux.png b/...st-basic-should-hide-show-all-button-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/...list-basic-should-show-ellipsis-label-1-chromium---theme-classic-dark-linux.png b/...list-basic-should-show-ellipsis-label-1-chromium---theme-classic-dark-linux.png
diff --git a/...ist-basic-should-show-ellipsis-label-1-chromium---theme-classic-light-linux.png b/...ist-basic-should-show-ellipsis-label-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/card/basic/index.html b/packages/core/src/tests/card/basic/index.html
@@ -65,6 +65,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>
diff --git a/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png b/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png
diff --git a/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png b/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/card/selected/index.html b/packages/core/src/tests/card/selected/index.html
@@ -65,6 +65,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>
diff --git a/packages/core/src/tests/push-card/basic/index.html b/packages/core/src/tests/push-card/basic/index.html
@@ -114,6 +114,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>

diff --git a/...ush-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png b/...ush-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png
diff --git a/...sh-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png b/...sh-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/...ard.e2e.ts-snapshots/push-card-expand-1-chromium---theme-classic-dark-linux.png b/...ard.e2e.ts-snapshots/push-card-expand-1-chromium---theme-classic-dark-linux.png
diff --git a/...rd.e2e.ts-snapshots/push-card-expand-1-chromium---theme-classic-light-linux.png b/...rd.e2e.ts-snapshots/push-card-expand-1-chromium---theme-classic-light-linux.png