From c99b8804efda4833535292498350fad2ab1dd802 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Fri, 17 Jan 2025 14:21:44 -0500
Subject: [PATCH] update color-palette defaults

---
 .../boxel-ui/addon/raw-icons/icon-trash.svg   |  2 +-
 .../src/components/color-palette/index.gts    | 62 +++++++++++++++----
 .../src/components/color-palette/usage.gts    |  3 +-
 .../src/components/color-picker/index.gts     | 10 +--
 .../src/components/color-picker/usage.gts     |  3 +-
 .../src/components/icon-button/index.gts      |  1 +
 .../boxel-ui/addon/src/helpers/color-tools.ts |  1 +
 .../addon/src/helpers/contrast-color.ts       |  5 +-
 .../boxel-ui/addon/src/icons/icon-trash.gts   |  2 +-
 .../5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json |  5 +-
 .../a4ee8a18-182b-47ff-b557-ef2e529c97ec.json |  5 +-
 .../BlogCategory/crypto.json                  |  9 +--
 .../BlogCategory/home-decor.json              |  7 +--
 .../BlogCategory/productivity.json            |  7 +--
 packages/experiments-realm/blog-category.gts  | 54 +++++++++-------
 packages/experiments-realm/blog-post.gts      | 38 +++++-------
 packages/experiments-realm/color.gts          | 24 ++-----
 17 files changed, 121 insertions(+), 117 deletions(-)

diff --git a/packages/boxel-ui/addon/raw-icons/icon-trash.svg b/packages/boxel-ui/addon/raw-icons/icon-trash.svg
index f2f321b5ab..bf7edcd0d5 100644
--- a/packages/boxel-ui/addon/raw-icons/icon-trash.svg
+++ b/packages/boxel-ui/addon/raw-icons/icon-trash.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0.5 0.5 12.7 14">
-  <g fill="none" stroke="var(--icon-color, #000)" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width, 1px)">
+  <g fill="none" stroke="var(--icon-color, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width, 1px)">
     <path d="m3 6h11.7" transform="translate(-2 -2.4)"/>
     <path d="m14.1 4.6v9.1a1.3 1.3 0 0 1 -1.3 1.3h-6.5a1.3 1.3 0 0 1 -1.3-1.3v-9.1m1.95 0v-1.3a1.3 1.3 0 0 1 1.3-1.3h2.6a1.3 1.3 0 0 1 1.3 1.3v1.3" transform="translate(-2.7 -1)"/>
     <path d="m10 11v3.9" stroke-width="var(--icon-stroke-width, 1px)" transform="translate(-4.45 -4.15)"/>
diff --git a/packages/boxel-ui/addon/src/components/color-palette/index.gts b/packages/boxel-ui/addon/src/components/color-palette/index.gts
index c3893e217f..e21cf9e0c1 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -5,6 +5,8 @@ import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
 import ColorPicker from '../color-picker/index.gts';
+import IconTrash from '../../icons/icon-trash.gts';
+import IconButton from '../icon-button/index.gts';
 
 interface Signature {
   Args: {
@@ -40,16 +42,31 @@ export default class ColorPalette extends Component<Signature> {
 
   <template>
     <div class='color-palette-container' ...attributes>
-      <div class='color-palette'>
-        {{#each this.colors as |color|}}
-          <button
-            type='button'
-            class='swatch {{if (eq color @color) "selected"}}'
-            style={{htmlSafe (concat '--swatch-color: ' color)}}
-            {{on 'click' (fn @onChange color)}}
-            title={{color}}
-          />
-        {{/each}}
+      <div class='palette-group'>
+        <div class='color-palette'>
+          {{#each this.colors as |color|}}
+            <button
+              type='button'
+              class='swatch {{if (eq color @color) "selected"}}'
+              style={{htmlSafe (concat '--swatch-color: ' color)}}
+              {{on 'click' (fn @onChange color)}}
+              title={{color}}
+            />
+          {{/each}}
+        </div>
+        {{#if @color}}
+          <div>
+            <code class='selected-color'>{{@color}}</code>
+            <IconButton
+              @icon={{IconTrash}}
+              @width='16px'
+              @height='16px'
+              class='remove'
+              {{on 'click' (fn @onChange '')}}
+              aria-label='Unset color'
+            />
+          </div>
+        {{/if}}
       </div>
 
       <label class='color-picker-container'>
@@ -65,12 +82,25 @@ export default class ColorPalette extends Component<Signature> {
       }
 
       .color-palette-container {
+        --boxel-icon-button-width: var(--boxel-icon-sm);
+        --boxel-icon-button-height: var(--boxel-icon-sm);
         display: flex;
         gap: var(--boxel-sp);
         align-items: flex-start;
         flex-direction: column;
       }
 
+      .palette-group {
+        display: flex;
+        gap: var(--boxel-sp) var(--boxel-sp-lg);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .selected-color {
+        text-transform: uppercase;
+      }
+
       .color-picker-container {
         --swatch-size: 1.8rem;
         border: 1px solid var(--boxel-border-color);
@@ -100,7 +130,7 @@ export default class ColorPalette extends Component<Signature> {
       .swatch {
         width: var(--swatch-size);
         height: var(--swatch-size);
-        border: 1px solid transparent;
+        border: 2px solid transparent;
         border-radius: 50%;
         padding: 2px;
         cursor: pointer;
@@ -143,6 +173,16 @@ export default class ColorPalette extends Component<Signature> {
         border: 1px solid transparent;
         border-radius: 50%;
       }
+
+      .remove {
+        vertical-align: text-bottom;
+        margin-left: var(--boxel-sp-xxxs);
+      }
+      .remove:focus,
+      .remove:hover {
+        --icon-color: var(--boxel-red);
+        outline: 0;
+      }
     </style>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/components/color-palette/usage.gts b/packages/boxel-ui/addon/src/components/color-palette/usage.gts
index 90701f7ffd..ec24b3e1e2 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/usage.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/usage.gts
@@ -6,7 +6,7 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPalette from './index.gts';
 
 export default class ColorPaletteUsage extends Component {
-  @tracked color = '#000000';
+  @tracked color = '';
 
   private handleColorChange = (newColor: string) => {
     this.color = newColor;
@@ -31,7 +31,6 @@ export default class ColorPaletteUsage extends Component {
           @description='Currently selected color in hex format.'
           @value={{this.color}}
           @onInput={{fn (mut this.color)}}
-          @defaultValue='#000000'
         />
         <Args.Action
           @name='onChange'
diff --git a/packages/boxel-ui/addon/src/components/color-picker/index.gts b/packages/boxel-ui/addon/src/components/color-picker/index.gts
index 27dd70f9f4..ae916f11f7 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -21,14 +21,14 @@ export default class ColorPicker extends Component<Signature> {
     <div class='color-picker' ...attributes>
       <input
         type='color'
-        value={{@color}}
+        value={{if @color @color '#ffffff'}}
         class='input'
         disabled={{@disabled}}
         aria-label='Choose color'
         {{on 'input' this.handleColorChange}}
       />
       {{#if @showHexString}}
-        <span class='hex-value'>{{@color}}</span>
+        <code class='hex-value'>{{@color}}</code>
       {{/if}}
     </div>
 
@@ -44,10 +44,8 @@ export default class ColorPicker extends Component<Signature> {
         width: var(--swatch-size);
         height: var(--swatch-size);
         padding: 0;
-        border: none;
         cursor: pointer;
-        background: transparent;
-        border: 1px solid var(--boxel-200);
+        border: var(--boxel-border);
         border-radius: 50%;
       }
 
@@ -65,8 +63,6 @@ export default class ColorPicker extends Component<Signature> {
       }
 
       .hex-value {
-        font: var(--boxel-font);
-        color: var(--boxel-dark);
         text-transform: uppercase;
       }
     </style>
diff --git a/packages/boxel-ui/addon/src/components/color-picker/usage.gts b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
index 6121ae85d7..555f1f1e5c 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/usage.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
@@ -6,7 +6,7 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPicker from './index.gts';
 
 export default class ColorPickerUsage extends Component {
-  @tracked color = '#ff0000';
+  @tracked color = '';
   @tracked disabled = false;
   @tracked showHexString = true;
 
@@ -35,7 +35,6 @@ export default class ColorPickerUsage extends Component {
           @description='Hex color value.'
           @value={{this.color}}
           @onInput={{fn (mut this.color)}}
-          @defaultValue='#ff0000'
         />
         <Args.Action
           @name='onChange'
diff --git a/packages/boxel-ui/addon/src/components/icon-button/index.gts b/packages/boxel-ui/addon/src/components/icon-button/index.gts
index 8192b6d125..7dad5620a5 100644
--- a/packages/boxel-ui/addon/src/components/icon-button/index.gts
+++ b/packages/boxel-ui/addon/src/components/icon-button/index.gts
@@ -58,6 +58,7 @@ class IconButton extends Component<Signature> {
         padding: 0;
         background: var(--boxel-icon-button-background, none);
         border: 1px solid transparent;
+        color: var(--boxel-icon-button-color, currentColor);
         z-index: 0;
         overflow: hidden;
       }
diff --git a/packages/boxel-ui/addon/src/helpers/color-tools.ts b/packages/boxel-ui/addon/src/helpers/color-tools.ts
index b086bb2744..9931391aba 100644
--- a/packages/boxel-ui/addon/src/helpers/color-tools.ts
+++ b/packages/boxel-ui/addon/src/helpers/color-tools.ts
@@ -3,6 +3,7 @@ type RGB = { r: number; g: number; b: number };
 
 // contrast ratio should be at least 4.5 for regular sized text based on WCAG guidelines
 export const targetContrast = 4.5;
+export const targetContrastAAA = 7;
 
 export function rgbToHex({ r, g, b }: RGB): string {
   return (
diff --git a/packages/boxel-ui/addon/src/helpers/contrast-color.ts b/packages/boxel-ui/addon/src/helpers/contrast-color.ts
index b061cdcaf8..96054097cc 100644
--- a/packages/boxel-ui/addon/src/helpers/contrast-color.ts
+++ b/packages/boxel-ui/addon/src/helpers/contrast-color.ts
@@ -3,6 +3,7 @@ import {
   calculateLuminance,
   hexToRgb,
   targetContrast,
+  targetContrastAAA,
 } from './color-tools.ts';
 
 /*
@@ -16,6 +17,7 @@ export function getContrastColor(
   value: string | undefined,
   darkColor = 'var(--boxel-dark, #000000)',
   lightColor = 'var(--boxel-light, #ffffff)',
+  opts?: { isSmallText: true },
 ) {
   if (!value) {
     return;
@@ -25,5 +27,6 @@ export function getContrastColor(
     return;
   }
   let ratio = calculateContrast(calculateLuminance(rgb), 0); // luminocity of black is 0
-  return ratio >= targetContrast ? darkColor : lightColor;
+  let contrastLevel = opts?.isSmallText ? targetContrastAAA : targetContrast;
+  return ratio >= contrastLevel ? darkColor : lightColor;
 }
diff --git a/packages/boxel-ui/addon/src/icons/icon-trash.gts b/packages/boxel-ui/addon/src/icons/icon-trash.gts
index f93acb84ab..eb2220f043 100644
--- a/packages/boxel-ui/addon/src/icons/icon-trash.gts
+++ b/packages/boxel-ui/addon/src/icons/icon-trash.gts
@@ -10,7 +10,7 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
     ...attributes
   ><g
       fill='none'
-      stroke='var(--icon-color, #000)'
+      stroke='var(--icon-color, currentColor)'
       stroke-linecap='round'
       stroke-linejoin='round'
       stroke-width='var(--icon-stroke-width, 1px)'
diff --git a/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json b/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
index 833a01204e..5f79688add 100644
--- a/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
+++ b/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
@@ -5,8 +5,7 @@
       "longName": "Movie Review",
       "shortName": "Movies",
       "slug": "movies",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "pillColor": "#fff500",
       "description": null,
       "title": "Movie Review",
       "thumbnailURL": null
@@ -25,4 +24,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json b/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
index 0c883d5bed..a2d8367a96 100644
--- a/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
+++ b/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
@@ -5,8 +5,7 @@
       "longName": "TV Series",
       "shortName": "TV",
       "slug": "tv-series",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "pillColor": "#fff500",
       "description": null,
       "title": "TV Series",
       "thumbnailURL": null
@@ -25,4 +24,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/BlogCategory/crypto.json b/packages/experiments-realm/BlogCategory/crypto.json
index af3a19c4e1..611910c0f4 100644
--- a/packages/experiments-realm/BlogCategory/crypto.json
+++ b/packages/experiments-realm/BlogCategory/crypto.json
@@ -5,12 +5,7 @@
       "longName": "Cryptocurrencies",
       "shortName": "Crypto",
       "slug": "crypto",
-      "backgroundColor": {
-        "hexValue": "#FA2200"
-      },
-      "textColor": {
-        "hexValue": "#ffffff"
-      },
+      "pillColor": "#FA2200",
       "description": "News about cryptocurrencies, price predictions, charts and everything about Satoshi Nakamoto",
       "title": "Cryptocurrency",
       "thumbnailURL": null
@@ -29,4 +24,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/BlogCategory/home-decor.json b/packages/experiments-realm/BlogCategory/home-decor.json
index c1989bdf58..76caf18a5d 100644
--- a/packages/experiments-realm/BlogCategory/home-decor.json
+++ b/packages/experiments-realm/BlogCategory/home-decor.json
@@ -5,12 +5,7 @@
       "longName": "Home decoration & interior design",
       "shortName": "Home Decor",
       "slug": "home",
-      "backgroundColor": {
-        "hexValue": "#FCF8A6"
-      },
-      "textColor": {
-        "hexValue": "#FA2200"
-      },
+      "pillColor": "#FCF8A6",
       "description": "Articles about the aesthetic side of home building and renovation",
       "title": "Home decoration & interior design",
       "thumbnailURL": null
diff --git a/packages/experiments-realm/BlogCategory/productivity.json b/packages/experiments-realm/BlogCategory/productivity.json
index 1e187d3341..ba63eca55d 100644
--- a/packages/experiments-realm/BlogCategory/productivity.json
+++ b/packages/experiments-realm/BlogCategory/productivity.json
@@ -5,12 +5,7 @@
       "longName": "Productivity",
       "shortName": "Productivity",
       "slug": "productivity",
-      "backgroundColor": {
-        "color": "#9D00FF"
-      },
-      "textColor": {
-        "color": "#ffffff"
-      },
+      "pillColor": "#9D00FF",
       "description": "Tips and tricks for better organization and effectiveness at work",
       "title": "Productivity",
       "thumbnailURL": null
diff --git a/packages/experiments-realm/blog-category.gts b/packages/experiments-realm/blog-category.gts
index 6fe493fdd3..f130680b3c 100644
--- a/packages/experiments-realm/blog-category.gts
+++ b/packages/experiments-realm/blog-category.gts
@@ -9,19 +9,21 @@ import StringField from 'https://cardstack.com/base/string';
 import { BlogApp as BlogAppCard } from './blog-app';
 import { htmlSafe } from '@ember/template';
 import { ColorField } from './color';
-
-function htmlSafeColor(color?: string) {
-  return htmlSafe(`background-color: ${color || ''}`);
-}
+import { cssVar, getContrastColor } from '@cardstack/boxel-ui/helpers';
 
 export const categoryStyle = (category: Partial<BlogCategory>) => {
   if (!category) {
     return;
   }
+  const pillColor = category.pillColor ?? '#e8e8e8'; // var(--boxel-200)
+  const borderColor = category.pillColor ?? '#d3d3d3'; // var(--boxel-border-color)
   return htmlSafe(`
-    background-color: ${category.backgroundColor?.hexValue || '#000000'};
-    color: ${category.textColor?.hexValue || '#ffffff'};
-  `);
+      background-color: ${pillColor};
+      color: ${getContrastColor(pillColor, undefined, undefined, {
+        isSmallText: true,
+      })};
+      border: 1px solid ${borderColor}
+    `);
 };
 
 let BlogCategoryTemplate = class Embedded extends Component<
@@ -34,15 +36,17 @@ let BlogCategoryTemplate = class Embedded extends Component<
         padding: var(--boxel-sp);
       }
       .category-name {
-        padding: var(--boxel-sp-xxs);
-        color: white;
+        padding: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
         border-radius: var(--boxel-border-radius-sm);
-        font-weight: bold;
+        font: 600 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-sm);
         display: inline-block;
       }
       .category-label {
-        color: var(--boxel-400);
-        margin-top: var(--boxel-sp-sm);
+        color: var(--boxel-450);
+        font: 500 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-sm);
+        margin-top: var(--boxel-sp);
       }
       .category-full-name {
         font-size: var(--boxel-font-size);
@@ -50,7 +54,8 @@ let BlogCategoryTemplate = class Embedded extends Component<
       }
       .category-description {
         margin-top: var(--boxel-sp-sm);
-        color: var(--boxel-400);
+        font: 400 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-sm);
       }
     </style>
     <div class='blog-category'>
@@ -75,8 +80,7 @@ export class BlogCategory extends CardDef {
   @field longName = contains(StringField);
   @field shortName = contains(StringField);
   @field slug = contains(StringField);
-  @field backgroundColor = contains(ColorField);
-  @field textColor = contains(ColorField);
+  @field pillColor = contains(ColorField);
   @field description = contains(StringField);
   @field blog = linksTo(BlogAppCard, { isUsed: true });
 
@@ -91,18 +95,17 @@ export class BlogCategory extends CardDef {
           border-radius: 50%;
           display: inline-block;
           margin-right: var(--boxel-sp-xxs);
+          background-color: var(--category-swatch);
         }
         .category-atom {
           display: inline-flex;
           align-items: center;
+          font-weight: 600;
         }
       </style>
       <div class='category-atom'>
         {{! template-lint-disable no-inline-styles }}
-        <div
-          class='circle'
-          style={{htmlSafeColor @model.backgroundColor.hexValue}}
-        />
+        <div class='circle' style={{cssVar category-swatch=@model.pillColor}} />
         <@fields.longName />
       </div>
     </template>
@@ -116,14 +119,16 @@ export class BlogCategory extends CardDef {
           padding: var(--boxel-sp-xs);
         }
         .category-name {
-          padding: var(--boxel-sp-xxs);
-          color: white;
+          padding: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
           border-radius: var(--boxel-border-radius-sm);
-          font-weight: bold;
+          font: 600 var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
           display: inline-block;
         }
         .category-label {
-          color: var(--boxel-400);
+          color: var(--boxel-450);
+          font: 500 var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
           margin-top: var(--boxel-sp-sm);
         }
         .category-full-name {
@@ -136,12 +141,13 @@ export class BlogCategory extends CardDef {
         }
         .category-description {
           margin-top: var(--boxel-sp-sm);
-          color: var(--boxel-400);
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
           text-overflow: ellipsis;
+          font: 400 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp);
         }
         @container fitted-card ((aspect-ratio <= 0.92) and (height <= 182px)) {
           .category-description {
diff --git a/packages/experiments-realm/blog-post.gts b/packages/experiments-realm/blog-post.gts
index d5a424f55e..2ddb1a7081 100644
--- a/packages/experiments-realm/blog-post.gts
+++ b/packages/experiments-realm/blog-post.gts
@@ -31,10 +31,9 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
       {{#if @model.categories.length}}
         <div class='categories'>
           {{#each @model.categories as |category|}}
-            <div
-              class='category'
-              style={{categoryStyle category}}
-            >{{category.shortName}}</div>
+            <div class='category' style={{categoryStyle category}}>
+              {{category.shortName}}
+            </div>
           {{/each}}
         </div>
       {{/if}}
@@ -130,10 +129,9 @@ class FittedTemplate extends Component<typeof BlogPost> {
       <div class='thumbnail' style={{setBackgroundImage @model.thumbnailURL}} />
       <div class='categories'>
         {{#each @model.categories as |category|}}
-          <div
-            class='category'
-            style={{categoryStyle category}}
-          >{{category.shortName}}</div>
+          <div class='category' style={{categoryStyle category}}>
+            {{category.shortName}}
+          </div>
         {{/each}}
       </div>
       <div class='content'>
@@ -221,12 +219,12 @@ class FittedTemplate extends Component<typeof BlogPost> {
 
       .category {
         font-size: 0.6rem;
-        height: 18px;
+        height: 20px;
         padding: 3px 4px;
         border-radius: var(--boxel-border-radius-sm);
         display: inline-block;
-        font-family: var(--boxel-font-family);
-        font-weight: 600;
+        font: 500 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-sm);
         margin-right: var(--boxel-sp-xxxs);
         overflow: hidden;
         text-overflow: ellipsis;
@@ -712,12 +710,7 @@ export class BlogPost extends CardDef {
           {{/if}}
           {{#if @model.categories.length}}
             <div class='categories'>
-              {{#each @model.categories as |category|}}
-                <div
-                  class='category'
-                  style={{categoryStyle category}}
-                >{{category.shortName}}</div>
-              {{/each}}
+              <@fields.categories @format='atom' @displayContainer={{false}} />
             </div>
           {{/if}}
           <h1><@fields.title /></h1>
@@ -841,13 +834,12 @@ export class BlogPost extends CardDef {
         }
         .categories {
           margin-top: var(--boxel-sp);
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--boxel-sp-xxs);
         }
-        .category {
-          display: inline-block;
-          padding: 3px var(--boxel-sp-xxxs);
-          border-radius: var(--boxel-border-radius-sm);
-          font: 500 var(--boxel-font-sm);
-          letter-spacing: var(--boxel-lsp-xs);
+        .featured-image + .categories {
+          margin-top: var(--boxel-sp-xl);
         }
       </style>
     </template>
diff --git a/packages/experiments-realm/color.gts b/packages/experiments-realm/color.gts
index bff8ca296c..54c5618d04 100644
--- a/packages/experiments-realm/color.gts
+++ b/packages/experiments-realm/color.gts
@@ -1,38 +1,22 @@
-import {
-  Component,
-  FieldDef,
-  StringField,
-  contains,
-  field,
-} from 'https://cardstack.com/base/card-api';
+import { Component, StringField } from 'https://cardstack.com/base/card-api';
 import { ColorPalette } from '@cardstack/boxel-ui/components';
 import { ColorPicker } from '@cardstack/boxel-ui/components';
 
 class View extends Component<typeof ColorPalette> {
   <template>
-    <ColorPicker
-      @color={{@model.hexValue}}
-      @disabled={{true}}
-      @showHexString={{true}}
-    />
+    <ColorPicker @color={{@model}} @disabled={{true}} @showHexString={{true}} />
   </template>
 }
 
 class EditView extends Component<typeof ColorPalette> {
-  setColor = (color: string) => {
-    this.args.model.hexValue = color;
-  };
-
   <template>
-    <ColorPalette @color={{@model.hexValue}} @onChange={{this.setColor}} />
+    <ColorPalette @color={{@model}} @onChange={{@set}} />
   </template>
 }
 
-export class ColorField extends FieldDef {
+export class ColorField extends StringField {
   static displayName = 'Color';
-  @field hexValue = contains(StringField);
 
-  static isolated = View;
   static embedded = View;
   static atom = View;
   static fitted = View;