From 203751f40f2c09cec2e50e16a1a5132485dc6004 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Mon, 6 Jan 2025 21:28:19 +0100
Subject: [PATCH 01/13] Add color picker to boxel ui

---
 .../src/components/color-picker/index.gts     | 76 +++++++++++++++++++
 .../src/components/color-picker/usage.gts     | 50 ++++++++++++
 packages/boxel-ui/addon/src/usage.ts          |  2 +
 3 files changed, 128 insertions(+)
 create mode 100644 packages/boxel-ui/addon/src/components/color-picker/index.gts
 create mode 100644 packages/boxel-ui/addon/src/components/color-picker/usage.gts

diff --git a/packages/boxel-ui/addon/src/components/color-picker/index.gts b/packages/boxel-ui/addon/src/components/color-picker/index.gts
new file mode 100644
index 0000000000..f013830c66
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -0,0 +1,76 @@
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+interface Signature {
+  Args: {
+    onChange: (color: string) => void;
+    value: string;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class ColorPicker extends Component<Signature> {
+  @tracked private selectedColor: string;
+
+  constructor(owner: unknown, args: Signature['Args']) {
+    super(owner, args);
+    this.selectedColor = args.value ?? '#000000';
+  }
+
+  private handleColorChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    this.selectedColor = input.value;
+    this.args.onChange(input.value);
+  };
+
+  <template>
+    <div class='color-picker' ...attributes>
+      <input
+        type='color'
+        value={{this.selectedColor}}
+        class='input'
+        {{on 'input' this.handleColorChange}}
+      />
+    </div>
+
+    <style scoped>
+      .color-picker {
+        --size: 2.5rem;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .input {
+        width: var(--size);
+        height: var(--size);
+        padding: 0;
+        border: none;
+        cursor: pointer;
+      }
+
+      .input::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .input::-webkit-color-swatch {
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+      }
+
+      .preview {
+        width: var(--size);
+        height: var(--size);
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+      }
+
+      .value {
+        font: var(--boxel-font);
+        color: var(--boxel-dark);
+        text-transform: uppercase;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/color-picker/usage.gts b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
new file mode 100644
index 0000000000..27f8049d6a
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import ColorPicker from './index.gts';
+
+export default class ColorPickerUsage extends Component {
+  @tracked color = '#ff0000';
+
+  private onChange = (newColor: string) => {
+    this.color = newColor;
+  };
+
+  <template>
+    <div class='usage'>
+
+      <section>
+        <h4>Usage</h4>
+        <div class='picker-row'>
+          <ColorPicker @value={{this.color}} @onChange={{this.onChange}} />
+          {{this.color}}
+        </div>
+      </section>
+    </div>
+
+    <style scoped>
+      .usage {
+        padding: var(--boxel-sp-lg);
+      }
+
+      .picker-row {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp);
+      }
+
+      section {
+        margin-block: var(--boxel-sp-lg);
+      }
+
+      h3 {
+        font: var(--boxel-font-h3);
+        margin-bottom: var(--boxel-sp-lg);
+      }
+
+      h4 {
+        font: var(--boxel-font-h4);
+        margin-bottom: var(--boxel-sp);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/usage.ts b/packages/boxel-ui/addon/src/usage.ts
index 20c32ff9ff..6a69b52761 100644
--- a/packages/boxel-ui/addon/src/usage.ts
+++ b/packages/boxel-ui/addon/src/usage.ts
@@ -38,6 +38,7 @@ import SwitchUsage from './components/switch/usage.gts';
 import TabbedHeaderUsage from './components/tabbed-header/usage.gts';
 import TooltipUsage from './components/tooltip/usage.gts';
 import ViewSelectorUsage from './components/view-selector/usage.gts';
+import ColorPickerUsage from './components/color-picker/usage.gts';
 
 export const ALL_USAGE_COMPONENTS = [
   ['Accordion', AccordionUsage],
@@ -77,4 +78,5 @@ export const ALL_USAGE_COMPONENTS = [
   ['TabbedHeader', TabbedHeaderUsage],
   ['Tooltip', TooltipUsage],
   ['ViewSelector', ViewSelectorUsage],
+  ['ColorPicker', ColorPickerUsage],
 ];

From 689a71cd8e21f0d21ef904b0c262b9c719908ef6 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 14:16:30 +0100
Subject: [PATCH 02/13] Improve ColorPicker and add ColorPalette

---
 packages/boxel-ui/addon/src/components.ts     |   4 +
 .../src/components/color-palette/index.gts    | 128 ++++++++++++++++++
 .../src/components/color-palette/usage.gts    |  44 ++++++
 .../src/components/color-picker/index.gts     |  47 +++----
 .../src/components/color-picker/usage.gts     |  84 +++++++-----
 packages/boxel-ui/addon/src/usage.ts          |   2 +
 6 files changed, 247 insertions(+), 62 deletions(-)
 create mode 100644 packages/boxel-ui/addon/src/components/color-palette/index.gts
 create mode 100644 packages/boxel-ui/addon/src/components/color-palette/usage.gts

diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index 6bd10aae3e..05f79ba72a 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -8,6 +8,8 @@ import CardContainer from './components/card-container/index.gts';
 import CardContentContainer from './components/card-content-container/index.gts';
 import CardHeader from './components/card-header/index.gts';
 import CircleSpinner from './components/circle-spinner/index.gts';
+import ColorPalette from './components/color-palette/index.gts';
+import ColorPicker from './components/color-picker/index.gts';
 import DateRangePicker from './components/date-range-picker/index.gts';
 import DndKanbanBoard, {
   type DndItem,
@@ -78,6 +80,8 @@ export {
   CardContentContainer,
   CardHeader,
   CircleSpinner,
+  ColorPalette,
+  ColorPicker,
   DateRangePicker,
   DndColumn,
   DndItem,
diff --git a/packages/boxel-ui/addon/src/components/color-palette/index.gts b/packages/boxel-ui/addon/src/components/color-palette/index.gts
new file mode 100644
index 0000000000..5977a9c9b1
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { eq } from '@cardstack/boxel-ui/helpers';
+import { fn } from '@ember/helper';
+import ColorPicker from '../color-picker/index.gts';
+
+interface Signature {
+  Args: {
+    color: string;
+    onChange: (color: string) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+const DEFAULT_PALETTE_COLORS = [
+  // Row 1
+  '#000000',
+  '#777777',
+  '#FA2200',
+  '#FA7F01',
+  '#FBEB06',
+  '#1EDF67',
+  '#39B1FF',
+  '#9D00FF',
+  // Row 2
+  '#A6A6A6',
+  '#CFCFCF',
+  '#FCA6A7',
+  '#FCD2A7',
+  '#FCF8A6',
+  '#A6F4CA',
+  '#A7E4FF',
+  '#DEA6FF',
+];
+
+export default class ColorPalette extends Component<Signature> {
+  colors = DEFAULT_PALETTE_COLORS;
+
+  private openColorPicker = (event: MouseEvent) => {
+    let container = event.currentTarget as HTMLElement;
+    let input = container.querySelector('input[type="color"]');
+    if (!input) {
+      throw new Error('Color picker input not found');
+    }
+    (input as HTMLInputElement).click();
+  };
+
+  <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='--swatch-color: {{color}}'
+            {{on 'click' (fn @onChange color)}}
+            title={{color}}
+          />
+        {{/each}}
+      </div>
+
+      <button
+        type='button'
+        class='color-picker-container'
+        {{on 'click' this.openColorPicker}}
+      >
+        <ColorPicker @color={{@color}} @onChange={{@onChange}} />
+        <span class='custom-color-label'>Custom Color</span>
+      </button>
+    </div>
+
+    <style scoped>
+      .color-picker-container {
+        border: 1px solid var(--boxel-border-color);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-sm);
+        background: none;
+        margin-top: var(--boxel-sp-sm);
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp);
+        color: var(--boxel-450);
+        width: 18rem;
+      }
+
+      .color-picker-container:hover {
+        background-color: var(--boxel-light-100);
+        color: var(--boxel-500);
+      }
+
+      .color-palette {
+        --swatch-size: 1.8rem;
+        display: grid;
+        grid-template-columns: repeat(8, var(--swatch-size));
+        gap: var(--boxel-sp-xs);
+      }
+
+      .swatch {
+        width: var(--swatch-size);
+        height: var(--swatch-size);
+        border: 1px solid transparent;
+        border-radius: 50%;
+        padding: 2px;
+        cursor: pointer;
+        transition: transform 0.1s ease;
+        background-color: transparent;
+      }
+
+      .swatch::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: var(--swatch-color);
+      }
+
+      .swatch:hover:not(:disabled) {
+        transform: scale(1.1);
+      }
+
+      .swatch.selected {
+        background-color: white;
+        border-color: var(--boxel-800);
+      }
+    </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
new file mode 100644
index 0000000000..dfd73ed667
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/color-palette/usage.gts
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import ColorPalette from './index.gts';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import { fn } from '@ember/helper';
+
+export default class ColorPaletteUsage extends Component {
+  @tracked color = '#000000';
+
+  private handleColorChange = (newColor: string) => {
+    this.color = newColor;
+  };
+
+  <template>
+    <FreestyleUsage
+      @name='ColorPalette'
+      @description='A color palette component that provides a set of predefined colors and a custom color picker.'
+    >
+      <:example>
+        <ColorPalette
+          @color={{this.color}}
+          @onChange={{this.handleColorChange}}
+        />
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='color'
+          @optional={{false}}
+          @description='Currently selected color in hex format.'
+          @value={{this.color}}
+          @onInput={{fn (mut this.color)}}
+          @defaultValue='#000000'
+        />
+        <Args.Action
+          @name='onChange'
+          @description='Callback function that receives the newly selected color value.'
+          @value={{this.handleColorChange}}
+          @onInput={{fn (mut this.handleColorChange)}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
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 f013830c66..184f8365cb 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -1,26 +1,19 @@
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 interface Signature {
   Args: {
+    color: string;
+    disabled?: boolean;
     onChange: (color: string) => void;
-    value: string;
+    showHexString?: boolean;
   };
   Element: HTMLDivElement;
 }
 
 export default class ColorPicker extends Component<Signature> {
-  @tracked private selectedColor: string;
-
-  constructor(owner: unknown, args: Signature['Args']) {
-    super(owner, args);
-    this.selectedColor = args.value ?? '#000000';
-  }
-
   private handleColorChange = (event: Event) => {
-    const input = event.target as HTMLInputElement;
-    this.selectedColor = input.value;
+    let input = event.target as HTMLInputElement;
     this.args.onChange(input.value);
   };
 
@@ -28,26 +21,35 @@ export default class ColorPicker extends Component<Signature> {
     <div class='color-picker' ...attributes>
       <input
         type='color'
-        value={{this.selectedColor}}
+        value={{@color}}
         class='input'
+        disabled={{@disabled}}
         {{on 'input' this.handleColorChange}}
       />
+      {{#if @showHexString}}
+        <span class='hex-value'>{{@color}}</span>
+      {{/if}}
     </div>
 
     <style scoped>
       .color-picker {
-        --size: 2.5rem;
+        --swatch-size: 1.4rem;
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--boxel-sp-xs);
       }
 
       .input {
-        width: var(--size);
-        height: var(--size);
+        width: var(--swatch-size);
+        height: var(--swatch-size);
         padding: 0;
         border: none;
         cursor: pointer;
+        background: transparent;
+      }
+
+      .input:disabled {
+        pointer-events: none;
       }
 
       .input::-webkit-color-swatch-wrapper {
@@ -55,18 +57,11 @@ export default class ColorPicker extends Component<Signature> {
       }
 
       .input::-webkit-color-swatch {
-        border: var(--boxel-border);
-        border-radius: var(--boxel-border-radius);
-      }
-
-      .preview {
-        width: var(--size);
-        height: var(--size);
-        border: var(--boxel-border);
-        border-radius: var(--boxel-border-radius);
+        border: 1px solid transparent;
+        border-radius: 50%;
       }
 
-      .value {
+      .hex-value {
         font: var(--boxel-font);
         color: var(--boxel-dark);
         text-transform: uppercase;
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 27f8049d6a..5da9fc7093 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/usage.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
@@ -1,50 +1,62 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import ColorPicker from './index.gts';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import { fn } from '@ember/helper';
 
 export default class ColorPickerUsage extends Component {
   @tracked color = '#ff0000';
+  @tracked disabled = false;
+  @tracked showHexString = true;
 
   private onChange = (newColor: string) => {
     this.color = newColor;
   };
 
   <template>
-    <div class='usage'>
-
-      <section>
-        <h4>Usage</h4>
-        <div class='picker-row'>
-          <ColorPicker @value={{this.color}} @onChange={{this.onChange}} />
-          {{this.color}}
-        </div>
-      </section>
-    </div>
-
-    <style scoped>
-      .usage {
-        padding: var(--boxel-sp-lg);
-      }
-
-      .picker-row {
-        display: flex;
-        align-items: center;
-        gap: var(--boxel-sp);
-      }
-
-      section {
-        margin-block: var(--boxel-sp-lg);
-      }
-
-      h3 {
-        font: var(--boxel-font-h3);
-        margin-bottom: var(--boxel-sp-lg);
-      }
-
-      h4 {
-        font: var(--boxel-font-h4);
-        margin-bottom: var(--boxel-sp);
-      }
-    </style>
+    <FreestyleUsage
+      @name='ColorPicker'
+      @description='A color picker that allows users to select a color from the color spectrum.'
+    >
+      <:example>
+        <ColorPicker
+          @color={{this.color}}
+          @onChange={{this.onChange}}
+          @showHexString={{this.showHexString}}
+          @disabled={{this.disabled}}
+        />
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='color'
+          @optional={{false}}
+          @description='Hex color value.'
+          @value={{this.color}}
+          @onInput={{fn (mut this.color)}}
+          @defaultValue='#ff0000'
+        />
+        <Args.Action
+          @name='onChange'
+          @description='A callback function that is called when the color is changed.'
+          @value={{this.onChange}}
+          @onInput={{fn (mut this.onChange)}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @description='Whether the color picker is disabled.'
+          @value={{this.disabled}}
+          @onInput={{fn (mut this.disabled)}}
+          @defaultValue={{false}}
+        />
+        <Args.Bool
+          @name='showHexString'
+          @description='Whether to show the hex color value next to the picker.'
+          @value={{this.showHexString}}
+          @onInput={{fn (mut this.showHexString)}}
+          @defaultValue={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/usage.ts b/packages/boxel-ui/addon/src/usage.ts
index 6a69b52761..e1880e60cf 100644
--- a/packages/boxel-ui/addon/src/usage.ts
+++ b/packages/boxel-ui/addon/src/usage.ts
@@ -39,6 +39,7 @@ import TabbedHeaderUsage from './components/tabbed-header/usage.gts';
 import TooltipUsage from './components/tooltip/usage.gts';
 import ViewSelectorUsage from './components/view-selector/usage.gts';
 import ColorPickerUsage from './components/color-picker/usage.gts';
+import ColorPaletteUsage from './components/color-palette/usage.gts';
 
 export const ALL_USAGE_COMPONENTS = [
   ['Accordion', AccordionUsage],
@@ -79,4 +80,5 @@ export const ALL_USAGE_COMPONENTS = [
   ['Tooltip', TooltipUsage],
   ['ViewSelector', ViewSelectorUsage],
   ['ColorPicker', ColorPickerUsage],
+  ['ColorPalette', ColorPaletteUsage],
 ];

From e1d8094a2f5b3d5447d8a7810953771fdd48ba98 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 14:46:43 +0100
Subject: [PATCH 03/13] Accessibility fixes

---
 .../src/components/color-palette/index.gts    | 22 +++++++------------
 .../src/components/color-picker/index.gts     | 10 ++++++++-
 2 files changed, 17 insertions(+), 15 deletions(-)

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 5977a9c9b1..cec6df3287 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -1,8 +1,8 @@
-import Component from '@glimmer/component';
-import { on } from '@ember/modifier';
 import { eq } from '@cardstack/boxel-ui/helpers';
 import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
 import ColorPicker from '../color-picker/index.gts';
+import Component from '@glimmer/component';
 
 interface Signature {
   Args: {
@@ -37,12 +37,9 @@ export default class ColorPalette extends Component<Signature> {
   colors = DEFAULT_PALETTE_COLORS;
 
   private openColorPicker = (event: MouseEvent) => {
-    let container = event.currentTarget as HTMLElement;
-    let input = container.querySelector('input[type="color"]');
-    if (!input) {
-      throw new Error('Color picker input not found');
-    }
-    (input as HTMLInputElement).click();
+    const container = event.currentTarget as HTMLElement;
+    const input = container.querySelector('input[type="color"]');
+    input?.click();
   };
 
   <template>
@@ -59,14 +56,10 @@ export default class ColorPalette extends Component<Signature> {
         {{/each}}
       </div>
 
-      <button
-        type='button'
-        class='color-picker-container'
-        {{on 'click' this.openColorPicker}}
-      >
+      <div class='color-picker-container' {{on 'click' this.openColorPicker}}>
         <ColorPicker @color={{@color}} @onChange={{@onChange}} />
         <span class='custom-color-label'>Custom Color</span>
-      </button>
+      </div>
     </div>
 
     <style scoped>
@@ -81,6 +74,7 @@ export default class ColorPalette extends Component<Signature> {
         gap: var(--boxel-sp);
         color: var(--boxel-450);
         width: 18rem;
+        cursor: pointer;
       }
 
       .color-picker-container:hover {
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 184f8365cb..ff093e4b03 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -14,16 +14,24 @@ interface Signature {
 export default class ColorPicker extends Component<Signature> {
   private handleColorChange = (event: Event) => {
     let input = event.target as HTMLInputElement;
+    event.stopPropagation();
     this.args.onChange(input.value);
   };
 
+  private handleClick = (event: MouseEvent) => {
+    const container = event.currentTarget as HTMLElement;
+    const input = container.querySelector('input[type="color"]');
+    input?.click();
+  };
+
   <template>
-    <div class='color-picker' ...attributes>
+    <div class='color-picker' {{on 'click' this.handleClick}} ...attributes>
       <input
         type='color'
         value={{@color}}
         class='input'
         disabled={{@disabled}}
+        aria-label='Choose color'
         {{on 'input' this.handleColorChange}}
       />
       {{#if @showHexString}}

From 15bf5acb7ba0364dfb33214432b1c59fe85dd2db Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 14:51:42 +0100
Subject: [PATCH 04/13] Type fix

---
 .../boxel-ui/addon/src/components/color-picker/index.gts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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 ff093e4b03..06bc3390da 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -19,8 +19,10 @@ export default class ColorPicker extends Component<Signature> {
   };
 
   private handleClick = (event: MouseEvent) => {
-    const container = event.currentTarget as HTMLElement;
-    const input = container.querySelector('input[type="color"]');
+    let container = event.currentTarget as HTMLElement;
+    let input = container.querySelector(
+      'input[type="color"]',
+    ) as HTMLInputElement;
     input?.click();
   };
 

From ff56da99c620566f48f82bca8cc973d85eabc91b Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 14:58:59 +0100
Subject: [PATCH 05/13] Cleanup

---
 .../addon/src/components/color-palette/index.gts       |  6 ++++--
 .../addon/src/components/color-picker/index.gts        | 10 +---------
 2 files changed, 5 insertions(+), 11 deletions(-)

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 cec6df3287..14cddafcc8 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -37,8 +37,10 @@ export default class ColorPalette extends Component<Signature> {
   colors = DEFAULT_PALETTE_COLORS;
 
   private openColorPicker = (event: MouseEvent) => {
-    const container = event.currentTarget as HTMLElement;
-    const input = container.querySelector('input[type="color"]');
+    let container = event.currentTarget as HTMLElement;
+    let input = container.querySelector(
+      'input[type="color"]',
+    ) as HTMLInputElement;
     input?.click();
   };
 
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 06bc3390da..70d40f7fe4 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -18,16 +18,8 @@ export default class ColorPicker extends Component<Signature> {
     this.args.onChange(input.value);
   };
 
-  private handleClick = (event: MouseEvent) => {
-    let container = event.currentTarget as HTMLElement;
-    let input = container.querySelector(
-      'input[type="color"]',
-    ) as HTMLInputElement;
-    input?.click();
-  };
-
   <template>
-    <div class='color-picker' {{on 'click' this.handleClick}} ...attributes>
+    <div class='color-picker' ...attributes>
       <input
         type='color'
         value={{@color}}

From c094048f90ac217ddefb0a774b919eb0bf0fe1f5 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 15:13:31 +0100
Subject: [PATCH 06/13] Fix import orders

---
 .../boxel-ui/addon/src/components/color-palette/index.gts    | 3 ++-
 .../boxel-ui/addon/src/components/color-palette/usage.gts    | 5 +++--
 .../boxel-ui/addon/src/components/color-picker/usage.gts     | 5 +++--
 3 files changed, 8 insertions(+), 5 deletions(-)

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 14cddafcc8..2bb5eb2477 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -1,9 +1,10 @@
 import { eq } from '@cardstack/boxel-ui/helpers';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import ColorPicker from '../color-picker/index.gts';
 import Component from '@glimmer/component';
 
+import ColorPicker from '../color-picker/index.gts';
+
 interface Signature {
   Args: {
     color: string;
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 dfd73ed667..90701f7ffd 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/usage.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/usage.gts
@@ -1,8 +1,9 @@
+import { fn } from '@ember/helper';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import ColorPalette from './index.gts';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
-import { fn } from '@ember/helper';
+
+import ColorPalette from './index.gts';
 
 export default class ColorPaletteUsage extends Component {
   @tracked color = '#000000';
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 5da9fc7093..6121ae85d7 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/usage.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
@@ -1,8 +1,9 @@
+import { fn } from '@ember/helper';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import ColorPicker from './index.gts';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
-import { fn } from '@ember/helper';
+
+import ColorPicker from './index.gts';
 
 export default class ColorPickerUsage extends Component {
   @tracked color = '#ff0000';

From 7e33805eb7215100e88bcd9758339947a1a930ea Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 15:23:04 +0100
Subject: [PATCH 07/13] Fix linter issues

---
 .../addon/src/components/color-palette/index.gts    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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 2bb5eb2477..161900ec94 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -1,6 +1,7 @@
 import { eq } from '@cardstack/boxel-ui/helpers';
-import { fn } from '@ember/helper';
+import { concat, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
+import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
 import ColorPicker from '../color-picker/index.gts';
@@ -52,17 +53,21 @@ export default class ColorPalette extends Component<Signature> {
           <button
             type='button'
             class='swatch {{if (eq color @color) "selected"}}'
-            style='--swatch-color: {{color}}'
+            style={{htmlSafe (concat '--swatch-color: ' color)}}
             {{on 'click' (fn @onChange color)}}
             title={{color}}
           />
         {{/each}}
       </div>
 
-      <div class='color-picker-container' {{on 'click' this.openColorPicker}}>
+      <button
+        type='button'
+        class='color-picker-container'
+        {{on 'click' this.openColorPicker}}
+      >
         <ColorPicker @color={{@color}} @onChange={{@onChange}} />
         <span class='custom-color-label'>Custom Color</span>
-      </div>
+      </button>
     </div>
 
     <style scoped>

From a5590cbfe4aabf46f8801c86ea4b1680946cecc8 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 16:14:05 +0100
Subject: [PATCH 08/13] Fix accessibility issues

---
 .../src/components/color-palette/index.gts    | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

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 161900ec94..f304dee4a1 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -4,8 +4,6 @@ import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
-import ColorPicker from '../color-picker/index.gts';
-
 interface Signature {
   Args: {
     color: string;
@@ -38,12 +36,9 @@ const DEFAULT_PALETTE_COLORS = [
 export default class ColorPalette extends Component<Signature> {
   colors = DEFAULT_PALETTE_COLORS;
 
-  private openColorPicker = (event: MouseEvent) => {
-    let container = event.currentTarget as HTMLElement;
-    let input = container.querySelector(
-      'input[type="color"]',
-    ) as HTMLInputElement;
-    input?.click();
+  private handleColorInput = (event: Event) => {
+    let input = event.target as HTMLInputElement;
+    this.args.onChange(input.value);
   };
 
   <template>
@@ -60,34 +55,48 @@ export default class ColorPalette extends Component<Signature> {
         {{/each}}
       </div>
 
-      <button
-        type='button'
-        class='color-picker-container'
-        {{on 'click' this.openColorPicker}}
-      >
-        <ColorPicker @color={{@color}} @onChange={{@onChange}} />
+      <label class='color-picker-container'>
         <span class='custom-color-label'>Custom Color</span>
-      </button>
+        <input
+          type='color'
+          value={{@color}}
+          class='color-input'
+          {{on 'input' this.handleColorInput}}
+          aria-label='Choose custom color'
+        />
+      </label>
     </div>
 
     <style scoped>
+      .custom-color-label {
+        margin-left: var(--boxel-sp-sm);
+        color: var(--boxel-450);
+      }
+
+      .color-palette-container {
+        display: flex;
+        gap: var(--boxel-sp);
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
       .color-picker-container {
+        --swatch-size: 1.8rem;
         border: 1px solid var(--boxel-border-color);
         border-radius: var(--boxel-border-radius);
         padding: var(--boxel-sp-sm);
         background: none;
-        margin-top: var(--boxel-sp-sm);
         display: flex;
         align-items: center;
-        gap: var(--boxel-sp);
-        color: var(--boxel-450);
-        width: 18rem;
         cursor: pointer;
+        flex-direction: row-reverse;
+        width: 18rem;
+        justify-content: flex-end;
       }
 
       .color-picker-container:hover {
         background-color: var(--boxel-light-100);
-        color: var(--boxel-500);
+        color: var(--boxel-600);
       }
 
       .color-palette {
@@ -125,6 +134,24 @@ export default class ColorPalette extends Component<Signature> {
         background-color: white;
         border-color: var(--boxel-800);
       }
+
+      .color-input {
+        width: 1.35rem;
+        height: 1.35rem;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        border-radius: 50%;
+      }
+
+      .color-input::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .color-input::-webkit-color-swatch {
+        border: 1px solid transparent;
+        border-radius: 50%;
+      }
     </style>
   </template>
 }

From 1ee5467b441396968c22bf4836ca31a65e0b72d0 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 16:19:58 +0100
Subject: [PATCH 09/13] Compose the 2 components

---
 .../addon/src/components/color-palette/index.gts         | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

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 f304dee4a1..556807f216 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -3,6 +3,7 @@ import { concat, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
+import ColorPicker from '../color-picker/index.gts';
 
 interface Signature {
   Args: {
@@ -57,13 +58,7 @@ export default class ColorPalette extends Component<Signature> {
 
       <label class='color-picker-container'>
         <span class='custom-color-label'>Custom Color</span>
-        <input
-          type='color'
-          value={{@color}}
-          class='color-input'
-          {{on 'input' this.handleColorInput}}
-          aria-label='Choose custom color'
-        />
+        <ColorPicker @color={{@color}} @onChange={{@onChange}} />
       </label>
     </div>
 

From 985a142110f8c3d8636b16231120cdd0151473d6 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 16:26:05 +0100
Subject: [PATCH 10/13] Not needed

---
 .../boxel-ui/addon/src/components/color-palette/index.gts    | 5 -----
 1 file changed, 5 deletions(-)

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 556807f216..7665b09ace 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -37,11 +37,6 @@ const DEFAULT_PALETTE_COLORS = [
 export default class ColorPalette extends Component<Signature> {
   colors = DEFAULT_PALETTE_COLORS;
 
-  private handleColorInput = (event: Event) => {
-    let input = event.target as HTMLInputElement;
-    this.args.onChange(input.value);
-  };
-
   <template>
     <div class='color-palette-container' ...attributes>
       <div class='color-palette'>

From e8864a965497933975e1b72a6fef0d46676f0a95 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Tue, 7 Jan 2025 16:36:29 +0100
Subject: [PATCH 11/13] Linter wants an empty row

---
 packages/boxel-ui/addon/src/components/color-palette/index.gts | 1 +
 1 file changed, 1 insertion(+)

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 7665b09ace..c3893e217f 100644
--- a/packages/boxel-ui/addon/src/components/color-palette/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -3,6 +3,7 @@ import { concat, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
+
 import ColorPicker from '../color-picker/index.gts';
 
 interface Signature {

From 436ef3901af1c608d0f4688ea1da32f7591a7dd9 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Wed, 8 Jan 2025 10:53:35 +0100
Subject: [PATCH 12/13] Not needed

---
 packages/boxel-ui/addon/src/components/color-picker/index.gts | 1 -
 1 file changed, 1 deletion(-)

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 70d40f7fe4..9fc5fb7864 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -14,7 +14,6 @@ interface Signature {
 export default class ColorPicker extends Component<Signature> {
   private handleColorChange = (event: Event) => {
     let input = event.target as HTMLInputElement;
-    event.stopPropagation();
     this.args.onChange(input.value);
   };
 

From 952b33c97946f4cb19c9abec4db12d3d3762dd68 Mon Sep 17 00:00:00 2001
From: Matic Jurglic <matic@jurglic.si>
Date: Wed, 8 Jan 2025 13:39:54 +0100
Subject: [PATCH 13/13] Add a slight border so that the color is seen when the
 color matches the background (e.g. white on white)

---
 packages/boxel-ui/addon/src/components/color-picker/index.gts | 2 ++
 1 file changed, 2 insertions(+)

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 9fc5fb7864..27dd70f9f4 100644
--- a/packages/boxel-ui/addon/src/components/color-picker/index.gts
+++ b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -47,6 +47,8 @@ export default class ColorPicker extends Component<Signature> {
         border: none;
         cursor: pointer;
         background: transparent;
+        border: 1px solid var(--boxel-200);
+        border-radius: 50%;
       }
 
       .input:disabled {