fix(tile): color palette attr in context

RedHat-UX · Feb 27, 2025 · 56d8433 · 56d8433
1 parent 57c54fe
commit 56d8433
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
@@ -63,12 +63,12 @@
 
   &.on.light { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
   &.on.dark { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
-  &.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
-  &.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
-  &.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
-  &.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
-  &.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
-  &.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
+  &.palette.lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
+  &.palette.lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
+  &.palette.light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
+  &.palette.dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
+  &.palette.darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
+  &.palette.darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
 
   & ::slotted(*) {
     margin-block: 0 var(--_margin);

diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts
@@ -191,7 +191,8 @@ export class RhTile extends LitElement {
   }
 
   render() {
-    const { bleed, compact, checkable, checked, colorPalette, desaturated, on = 'light' } = this;
+    const { bleed, compact, checkable, checked, colorPalette, desaturated } = this;
+    const on = colorPalette?.replace(/(er|est)$/, '') ?? this.on ?? 'light';
     const disabled = this.disabledGroup || this.disabled || this.#internals.formDisabled;
     const hasSlottedIcon = this.#slots.hasSlotted('icon');
     const linkIcon =
@@ -209,8 +210,9 @@ export class RhTile extends LitElement {
             desaturated,
             disabled,
             on: true,
-            [on]: true,
-            [`palette-${colorPalette}`]: !!colorPalette,
+            palette: !!colorPalette,
+            [on]: !colorPalette,
+            [colorPalette ?? '']: !!colorPalette,
           })}">
         <slot id="image"
               name="image"