cardstack · burieberry · Aug 19, 2026 · Aug 14, 2026
diff --git a/packages/boxel-ui/raw-icons/failure-bordered.svg b/packages/boxel-ui/raw-icons/failure-bordered.svg
diff --git a/packages/boxel-ui/raw-icons/warning-triangle-filled.svg b/packages/boxel-ui/raw-icons/warning-triangle-filled.svg
diff --git a/packages/boxel-ui/src/components/alert/index.gts b/packages/boxel-ui/src/components/alert/index.gts
@@ -43,9 +43,13 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
   {{#each @messages as |message i|}}
     <div class='alert'>
       {{#if (eq @type 'error')}}
-        <FailureBordered class='alert-icon failure-icon' />
+        <FailureBordered
+          class='alert-icon failure-icon'
+          width='24'
+          height='24'
+        />
       {{else if (eq @type 'warning')}}
-        <Warning class='alert-icon' />
+        <Warning class='alert-icon' width='20' height='20' />
       {{/if}}
       <p
         class='message'
@@ -65,13 +69,7 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
       margin-top: var(--boxel-sp-lg);
     }
     .alert-icon {
-      min-width: 20px;
-      height: 20px;
-      --icon-background-color: var(--boxel-error-400);
-    }
-    .failure-icon {
-      --icon-background-color: var(--boxel-error-400);
-      --icon-color: var(--boxel-light);
+      flex-shrink: 0;
     }
     .message {
       align-self: center;

diff --git a/packages/boxel-ui/src/components/loading-indicator/index.gts b/packages/boxel-ui/src/components/loading-indicator/index.gts
@@ -1,33 +1,27 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { concat } from '@ember/helper';
 
-import cn from '../../helpers/cn.ts';
 import cssVar from '../../helpers/css-var.ts';
 import LoadingIndicatorIcon from '../../icons/loading-indicator.gts';
 
 interface Signature {
   Args: {
     color?: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'destructive' | 'default';
+    size?: string;
   };
   Element: HTMLSpanElement;
 }
 
 const LoadingIndicator: TemplateOnlyComponent<Signature> = <template>
   <span
-    class={{cn
-      'boxel-loading-indicator'
-      (if @variant (concat 'variant-' @variant) 'variant-default')
+    class='boxel-loading-indicator'
+    style={{cssVar
+      icon-color=(if @color @color 'var(--loading-indicator-color)')
+      boxel-loading-indicator-size=@size
     }}
     data-test-loading-indicator
     ...attributes
   >
-    <LoadingIndicatorIcon
-      style={{cssVar
-        icon-color=(if @color @color 'var(--loading-indicator-color)')
-      }}
-      role='presentation'
-    />
+    <LoadingIndicatorIcon role='presentation' />
   </span>
   <style scoped>
     /* zero specificity default sizing */
@@ -36,40 +30,26 @@ const LoadingIndicator: TemplateOnlyComponent<Signature> = <template>
         --boxel-loading-indicator-size,
         var(--boxel-icon-sm)
       );
+      --loading-indicator-color: var(
+        --boxel-loading-indicator-color,
+        currentColor
+      );
       display: inline-block;
       width: var(--loading-indicator-size);
       height: var(--loading-indicator-size);
       flex-shrink: 0;
     }
 
-    .variant-default {
-      --loading-indicator-color: var(--foreground);
-    }
-
-    .variant-primary {
-      --loading-indicator-color: var(--primary-foreground);
-    }
-
-    .variant-secondary {
-      --loading-indicator-color: var(--secondary-foreground);
-    }
-
-    .variant-muted {
-      --loading-indicator-color: var(--muted-foreground);
-    }
-
-    .variant-destructive {
-      --loading-indicator-color: var(--destructive-foreground);
+    .boxel-loading-indicator :deep(svg) {
+      display: block;
+      width: var(--loading-indicator-size);
+      height: var(--loading-indicator-size);
     }
 
-    /*
-      Only animate if the user has not said that they want reduced motion
-    */
+    /* Only animate if the user has not said that they want reduced motion */
     @media (prefers-reduced-motion: no-preference) {
       .boxel-loading-indicator :deep(svg) {
         animation: var(--boxel-infinite-spin-animation);
-        width: var(--loading-indicator-size);
-        height: var(--loading-indicator-size);
       }
     }
   </style>

diff --git a/packages/boxel-ui/src/components/loading-indicator/usage.gts b/packages/boxel-ui/src/components/loading-indicator/usage.gts
@@ -7,66 +7,72 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import cssVars from '../../helpers/css-var.ts';
+import cssVar from '../../helpers/css-var.ts';
 import BoxelLoadingIndicator from './index.gts';
 
 export default class LoadingIndicatorUsage extends Component {
-  @tracked color = '';
-  @tracked variant:
-    | undefined
-    | 'primary'
-    | 'secondary'
-    | 'muted'
-    | 'destructive'
-    | 'default' = undefined;
+  @tracked color?: string;
+  @tracked size?: string;
 
-  variants = ['default', 'primary', 'secondary', 'muted', 'destructive'];
-
-  @cssVariable({ cssClassName: 'boxel-loading-indicator-size' })
+  @cssVariable({ cssClassName: 'loading-indicator-usage-container' })
   declare boxelLoadingIndicatorSize: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'loading-indicator-usage-container' })
+  declare boxelLoadingIndicatorColor: CSSVariableInfo;
 
   <template>
-    <FreestyleUsage
-      @name='Loading Indicator'
-      @description='Default loading indicator for Boxel components.'
+    <div
+      class='loading-indicator-usage-container'
+      style={{cssVar
+        boxel-loading-indicator-size=this.boxelLoadingIndicatorSize.value
+        boxel-loading-indicator-color=this.boxelLoadingIndicatorColor.value
+      }}
     >
-      <:example>
-        <BoxelLoadingIndicator
-          class='loading-indicator-usage__example'
-          style={{cssVars
-            boxel-loading-indicator-size=this.boxelLoadingIndicatorSize.value
-          }}
-          @color={{this.color}}
-          @variant={{this.variant}}
-        />
-      </:example>
-      <:api as |Args|>
-        <Args.String
-          @name='color'
-          @description='Custom color override (CSS color value)'
-          @value={{this.color}}
-          @onInput={{fn (mut this.color)}}
-          @default='undefined'
-        />
-        <Args.String
-          @name='variant'
-          @description='Theme-based color variant'
-          @value={{this.variant}}
-          @onInput={{fn (mut this.variant)}}
-          @options={{this.variants}}
-          @default='undefined'
-        />
-      </:api>
-      <:cssVars as |Css|>
-        <Css.Basic
-          @name='loading-indicator-size'
-          @type='length'
-          @description='Sets height and width for loading indicator icon.'
-          @defaultValue={{this.boxelLoadingIndicatorSize.defaults}}
-          @value={{this.boxelLoadingIndicatorSize.value}}
-          @onInput={{this.boxelLoadingIndicatorSize.update}}
-        />
-      </:cssVars>
-    </FreestyleUsage>
+      <FreestyleUsage
+        @name='Loading Indicator'
+        @description='Default loading indicator for Boxel components.'
+      >
+        <:example>
+          <BoxelLoadingIndicator
+            class='loading-indicator-usage__example'
+            @color={{this.color}}
+            @size={{this.size}}
+          />
+        </:example>
+        <:api as |Args|>
+          <Args.String
+            @name='color'
+            @description='Custom color override (CSS color value). Defaults to currentColor.'
+            @value={{this.color}}
+            @onInput={{fn (mut this.color)}}
+            @default='undefined'
+          />
+          <Args.String
+            @name='size'
+            @description='One CSS length for both axes, e.g. 20px. Takes precedence over the boxel-loading-indicator-size variable.'
+            @value={{this.size}}
+            @onInput={{fn (mut this.size)}}
+            @default='undefined'
+          />
+        </:api>
+        <:cssVars as |Css|>
+          <Css.Basic
+            @name='boxel-loading-indicator-size'
+            @type='length'
+            @description='Sets height and width for loading indicator icon. The @size argument takes precedence.'
+            @defaultValue={{this.boxelLoadingIndicatorSize.defaults}}
+            @value={{this.boxelLoadingIndicatorSize.value}}
+            @onInput={{this.boxelLoadingIndicatorSize.update}}
+          />
+          <Css.Basic
+            @name='boxel-loading-indicator-color'
+            @type='color'
+            @description='Icon color (defaults to currentColor). The @color argument takes precedence.'
+            @defaultValue={{this.boxelLoadingIndicatorColor.defaults}}
+            @value={{this.boxelLoadingIndicatorColor.value}}
+            @onInput={{this.boxelLoadingIndicatorColor.update}}
+          />
+        </:cssVars>
+      </FreestyleUsage>
+    </div>
   </template>
 }
diff --git a/packages/boxel-ui/src/icons/failure-bordered.gts b/packages/boxel-ui/src/icons/failure-bordered.gts
@@ -6,18 +6,18 @@ import type { Signature } from './types.ts';
 const IconComponent: TemplateOnlyComponent<Signature> = <template>
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='20'
-    height='20'
-    viewBox='0 0 20 20'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
     ...attributes
   ><g fill='none'><circle
-        cx='10'
-        cy='10'
+        cx='12'
+        cy='12'
         r='10'
-        fill='var(--icon-background-color, red)'
+        fill='var(--icon-background-color, var(--destructive, red))'
       /><path
-        fill='var(--icon-color, #FFF)'
-        d='M11.143 10.757h-2.32l-.486-6.855h3.29zM8.3 14.01a1.6 1.6 0 0 1 .427-1.207 1.74 1.74 0 0 1 1.246-.41 1.7 1.7 0 0 1 1.222.419c.304.322.461.756.432 1.198a1.6 1.6 0 0 1-.437 1.182c-.33.303-.77.46-1.217.433a1.7 1.7 0 0 1-1.237-.423A1.58 1.58 0 0 1 8.3 14.01'
+        fill='var(--icon-foreground-color, #f5f5f5)'
+        d='M13.143 12.757h-2.32l-.486-6.855h3.29zM10.3 16.01a1.6 1.6 0 0 1 .427-1.207 1.74 1.74 0 0 1 1.246-.41 1.7 1.7 0 0 1 1.222.419c.304.322.461.756.432 1.198a1.6 1.6 0 0 1-.437 1.182c-.33.303-.77.46-1.217.433a1.7 1.7 0 0 1-1.237-.423 1.58 1.58 0 0 1-.436-1.192'
       /></g></svg>
 </template>;
 

diff --git a/packages/boxel-ui/src/icons/warning-triangle-filled.gts b/packages/boxel-ui/src/icons/warning-triangle-filled.gts
@@ -11,18 +11,20 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
     viewBox='0 0 24 24'
     ...attributes
   ><path
-      fill='#ffa515'
-      stroke='#ffa515'
-      stroke-linejoin='round'
-      stroke-width='1.5'
-      d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'
+      fill='var(--icon-background-color, #ffba00)'
+      d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'
     /><path
       fill='none'
-      stroke='#1a1a1a'
+      stroke='var(--icon-foreground-color, #1a1a1a)'
       stroke-linecap='round'
       stroke-width='2.2'
       d='M12 9.2v4.3'
-    /><circle cx='12' cy='16.9' r='1.05' fill='#1a1a1a' /></svg>
+    /><circle
+      cx='12'
+      cy='16.9'
+      r='1.05'
+      fill='var(--icon-foreground-color, #1a1a1a)'
+    /></svg>
 </template>;
 
 // @ts-expect-error this is the only way to set a name on a Template Only Component currently

diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
@@ -165,8 +165,6 @@ export default class CardPill extends Component<CardPillSignature> {
       .fallback-card-icon {
         display: block;
         flex-shrink: 0;
-        --icon-background-color: var(--boxel-error-500);
-        --icon-color: var(--boxel-light);
       }
       .card-content {
         max-width: 100px;