fix missing headerColor and realm-icon border properties

cardstack · Jan 13, 2025 · aea8f5e · aea8f5e
1 parent e03162c
commit aea8f5e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/packages/boxel-ui/addon/src/components/card-header/index.gts b/packages/boxel-ui/addon/src/components/card-header/index.gts
@@ -1,4 +1,3 @@
-import { concat } from '@ember/helper';
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
@@ -37,33 +36,27 @@ export default class CardHeader extends Component<Signature> {
   get safeMoreOptionsMenuItems() {
     return this.args.moreOptionsMenuItems || [];
   }
-  get headerColor() {
-    return (
-      this.args.headerColor ||
-      getComputedStyle(document.documentElement).getPropertyValue(
-        '--boxel-light',
-      )
-    );
-  }
   <template>
     <header
       data-test-card-header
       class={{cn is-editing=(bool @onFinishEditing)}}
       {{setCssVar
-        boxel-card-header-background-color=this.headerColor
-        boxel-card-header-text-color=(getContrastColor this.headerColor)
+        --boxel-card-header-background-color=@headerColor
+        --boxel-card-header-text-color=(getContrastColor @headerColor)
       }}
       ...attributes
     >
       <div
         class='realm-icon-container'
-        style={{cssVar
-          boxel-realm-icon-background-color=(getContrastColor
-            this.headerColor 'transparent'
-          )
-          boxel-realm-icon-border=(concat
-            '1px solid '
-            (getContrastColor this.headerColor 'rgba(0, 0, 0, 0.15)')
+        style={{if
+          @headerColor
+          (cssVar
+            boxel-realm-icon-background-color=(getContrastColor
+              @headerColor 'transparent'
+            )
+            boxel-realm-icon-border-color=(getContrastColor
+              @headerColor 'rgba(0, 0, 0, 0.15)'
+            )
           )
         }}
       >
@@ -264,12 +257,14 @@ export default class CardHeader extends Component<Signature> {
           align-items: center;
           min-width: var(--boxel-card-header-icon-container-min-width);
           justify-content: left;
-          --boxel-realm-icon-background-color: var(--boxel-light);
-          --boxel-realm-icon-border-radius: 7px;
-        }
-        .is-editing .realm-icon-container {
-          --boxel-realm-icon-background-color: var(--boxel-light);
-          --boxel-realm-icon-border: 1px solid var(--boxel-light);
+          --boxel-realm-icon-background-color: var(
+            --realm-icon-background-color
+          );
+          --boxel-realm-icon-border-color: var(--realm-icon-border-color);
+          --boxel-realm-icon-border-radius: var(
+            --realm-icon-border-radius,
+            7px
+          );
         }
 
         .realm-icon {

diff --git a/packages/boxel-ui/addon/src/components/card-header/usage.gts b/packages/boxel-ui/addon/src/components/card-header/usage.gts
@@ -134,7 +134,7 @@ export default class CardHeaderUsage extends Component {
           />
           <Args.String
             @name='headerColor'
-            @description='background color of the header, defaults to boxel-light'
+            @description='background color of the header'
             @value={{this.headerColor}}
             @onInput={{fn (mut this.headerColor)}}
           />
@@ -195,15 +195,15 @@ export default class CardHeaderUsage extends Component {
           <Css.Basic
             @name='boxel-card-header-icon-container-min-width'
             @type='length'
-            @description='minimum width of the icon container; useful to set matching boxel-card-header-actions-min-width to keep the title centered opverall'
+            @description='minimum width of the icon container; useful to set matching boxel-card-header-actions-min-width to keep the title centered overall'
             @defaultValue={{this.cardHeaderIconContainerMinWidth.defaults}}
             @value={{this.cardHeaderIconContainerMinWidth.value}}
             @onInput={{this.cardHeaderIconContainerMinWidth.update}}
           />
           <Css.Basic
             @name='boxel-card-header-actions-min-width'
             @type='length'
-            @description='minimum width of the actions container; useful to set matching boxel-card-header-icon-container-min-width to keep the title centered opverall'
+            @description='minimum width of the actions container; useful to set matching boxel-card-header-icon-container-min-width to keep the title centered overall'
             @defaultValue={{this.cardHeaderActionsMinWidth.defaults}}
             @value={{this.cardHeaderActionsMinWidth.value}}
             @onInput={{this.cardHeaderActionsMinWidth.update}}

diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
@@ -624,9 +624,14 @@ export default class OperatorModeStackItem extends Component<Signature> {
               boxel-card-header-actions-min-width=(if
                 this.isBuried '50px' '95px'
               )
-              realm-icon-background=(getContrastColor
+              boxel-card-header-background-color=@item.headerColor
+              boxel-card-header-text-color=(getContrastColor @item.headerColor)
+              realm-icon-background-color=(getContrastColor
                 @item.headerColor 'transparent'
               )
+              realm-icon-border-color=(getContrastColor
+                @item.headerColor 'transparent' 'rgba(0 0 0 / 15%)'
+              )
             }}
             role={{if this.isBuried 'button' 'banner'}}
             {{on
@@ -654,7 +659,6 @@ export default class OperatorModeStackItem extends Component<Signature> {
             <CardHeader
               @cardTypeDisplayName={{this.headerTitle}}
               @cardTypeIcon={{cardTypeIcon @item.card}}
-              @headerColor={{@item.headerColor}}
               @isSaving={{this.isSaving}}
               @isTopCard={{this.isTopCard}}
               @lastSavedMessage={{this.lastSavedMsg}}
@@ -671,9 +675,16 @@ export default class OperatorModeStackItem extends Component<Signature> {
                 boxel-card-header-actions-min-width=(if
                   this.isBuried '50px' '95px'
                 )
-                realm-icon-background=(getContrastColor
+                boxel-card-header-background-color=@item.headerColor
+                boxel-card-header-text-color=(getContrastColor
+                  @item.headerColor
+                )
+                realm-icon-background-color=(getContrastColor
                   @item.headerColor 'transparent'
                 )
+                realm-icon-border-color=(getContrastColor
+                  @item.headerColor 'transparent' 'rgba(0 0 0 / 15%)'
+                )
               }}
               role={{if this.isBuried 'button' 'banner'}}
               {{on
@@ -774,6 +785,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
 
       .item.buried {
         --stack-item-header-height: 2.5rem;
+        --realm-icon-border-radius: 4px;
       }
 
       .stack-item-card {