refactor(theme): size the avatar only in the card thumbnail

Author: simeonoff

src/components/card/themes/card.content.base.scss

@@ -13,7 +13,3 @@
 ::slotted(*) {
     margin: 0;
 }
-
-::slotted(igc-avatar) {
-    --ig-size: 1;
-}

src/components/card/themes/card.header.base.scss

@@ -17,10 +17,6 @@
     opacity: inherit;
 }
 
-::slotted(igc-avatar) {
-    --ig-size: 1;
-}
-
 header {
     display: flex;
     flex-flow: column nowrap;
@@ -37,6 +33,8 @@ header {
 }
 
 ::slotted([slot='thumbnail']) {
+    --ig-size: 1;
+
     display: flex;
     align-self: flex-start;
     margin-inline-end: rem(16px);

src/components/card/themes/content.ts

@@ -3,24 +3,17 @@ import { css } from 'lit';
 import type { Themes } from '../../../theming/types.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js';
-import { styles as indigo } from './shared/content/card.content.indigo.css.js';
 
 const light = {
   bootstrap: css`
     ${bootstrap}
   `,
-  indigo: css`
-    ${indigo}
-  `,
 };
 
 const dark = {
   bootstrap: css`
     ${bootstrap}
   `,
-  indigo: css`
-    ${indigo}
-  `,
 };
 
 export const all: Themes = { light, dark };

src/components/card/themes/shared/content/card.content.indigo.scss

@@ -1,15 +1,15 @@
 @use 'styles/utilities' as *;
 
 :host {
-    ::slotted(igc-avatar) {
-        --ig-size: 3;
-    }
-
     [part='header'] {
         gap: rem(2px);
     }
 }
 
+::slotted(igc-avatar[slot='thumbnail']) {
+    --ig-size: 3;
+}
+
 ::slotted([slot='subtitle']) {
     @include type-style('body-2');