From a9fe54d90642b86d5d38b1e551532ae86df25c05 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 29 Aug 2025 14:57:05 +0300 Subject: [PATCH 1/4] fix(card): default avatar size not correct in all themes bar indigo --- src/components/card/themes/card.content.base.scss | 4 ++++ src/components/card/themes/card.header.base.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/card/themes/card.content.base.scss b/src/components/card/themes/card.content.base.scss index 913acf76a..91cdde376 100644 --- a/src/components/card/themes/card.content.base.scss +++ b/src/components/card/themes/card.content.base.scss @@ -13,3 +13,7 @@ ::slotted(*) { margin: 0; } + +::slotted(igc-avatar) { + --ig-size: 1; +} diff --git a/src/components/card/themes/card.header.base.scss b/src/components/card/themes/card.header.base.scss index cbd271736..4420547db 100644 --- a/src/components/card/themes/card.header.base.scss +++ b/src/components/card/themes/card.header.base.scss @@ -17,6 +17,10 @@ opacity: inherit; } +::slotted(igc-avatar) { + --ig-size: 1; +} + header { display: flex; flex-flow: column nowrap; From 162769988c0e16ed88cfb3b86fa67a62282c68b6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 2 Oct 2025 11:06:38 +0300 Subject: [PATCH 2/4] refactor(theme): size the avatar only in the card thumbnail --- src/components/card/themes/card.content.base.scss | 4 ---- src/components/card/themes/card.header.base.scss | 6 ++---- src/components/card/themes/content.ts | 7 ------- .../card/themes/shared/content/card.content.indigo.scss | 7 ------- .../card/themes/shared/header/card.header.indigo.scss | 8 ++++---- 5 files changed, 6 insertions(+), 26 deletions(-) delete mode 100644 src/components/card/themes/shared/content/card.content.indigo.scss diff --git a/src/components/card/themes/card.content.base.scss b/src/components/card/themes/card.content.base.scss index 91cdde376..913acf76a 100644 --- a/src/components/card/themes/card.content.base.scss +++ b/src/components/card/themes/card.content.base.scss @@ -13,7 +13,3 @@ ::slotted(*) { margin: 0; } - -::slotted(igc-avatar) { - --ig-size: 1; -} diff --git a/src/components/card/themes/card.header.base.scss b/src/components/card/themes/card.header.base.scss index 4420547db..4a3e64951 100644 --- a/src/components/card/themes/card.header.base.scss +++ b/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); diff --git a/src/components/card/themes/content.ts b/src/components/card/themes/content.ts index 3fd35f6b1..21e869668 100644 --- a/src/components/card/themes/content.ts +++ b/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 }; diff --git a/src/components/card/themes/shared/content/card.content.indigo.scss b/src/components/card/themes/shared/content/card.content.indigo.scss deleted file mode 100644 index 00a7097b9..000000000 --- a/src/components/card/themes/shared/content/card.content.indigo.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'styles/utilities' as *; - -:host { - ::slotted(igc-avatar) { - --ig-size: 3; - } -} diff --git a/src/components/card/themes/shared/header/card.header.indigo.scss b/src/components/card/themes/shared/header/card.header.indigo.scss index f00a10b32..30e313699 100644 --- a/src/components/card/themes/shared/header/card.header.indigo.scss +++ b/src/components/card/themes/shared/header/card.header.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'); From b8b2e189213c754cbd280dca548d38ed92278497 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 2 Oct 2025 11:12:35 +0300 Subject: [PATCH 3/4] refactor(card): update styles further --- src/components/card/themes/card.header.base.scss | 7 +++++-- .../card/themes/shared/header/card.header.indigo.scss | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/card/themes/card.header.base.scss b/src/components/card/themes/card.header.base.scss index 4a3e64951..a6f3153fa 100644 --- a/src/components/card/themes/card.header.base.scss +++ b/src/components/card/themes/card.header.base.scss @@ -17,6 +17,11 @@ opacity: inherit; } +::slotted([slot='thumbnail']), +::slotted(igc-avatar[slot='thumbnail']) { + --ig-size: 1; +} + header { display: flex; flex-flow: column nowrap; @@ -33,8 +38,6 @@ header { } ::slotted([slot='thumbnail']) { - --ig-size: 1; - display: flex; align-self: flex-start; margin-inline-end: rem(16px); diff --git a/src/components/card/themes/shared/header/card.header.indigo.scss b/src/components/card/themes/shared/header/card.header.indigo.scss index 30e313699..87c0c5660 100644 --- a/src/components/card/themes/shared/header/card.header.indigo.scss +++ b/src/components/card/themes/shared/header/card.header.indigo.scss @@ -6,6 +6,7 @@ } } +::slotted([slot='thumbnail']), ::slotted(igc-avatar[slot='thumbnail']) { --ig-size: 3; } From 242d1151047f5702a98d8c68752d732b944bc711 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 2 Oct 2025 11:33:05 +0300 Subject: [PATCH 4/4] fix(card): don't size the avatar in the content area --- src/components/card/themes/card.content.base.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/card/themes/card.content.base.scss b/src/components/card/themes/card.content.base.scss index a4a8a905a..27530ea14 100644 --- a/src/components/card/themes/card.content.base.scss +++ b/src/components/card/themes/card.content.base.scss @@ -13,7 +13,3 @@ ::slotted(*) { margin: 0; } - -::slotted(igc-avatar) { - --ig-size: 1; -}