Update color-palette defaults (#2059)

* update color-palette defaults * fix lint * null value * update seed realm
cardstack · Jan 21, 2025 · 49c52ea · 49c52ea
1 parent 7417170
commit 49c52ea
Show file tree

Hide file tree

Showing 27 changed files with 203 additions and 229 deletions.
diff --git a/packages/boxel-ui/addon/raw-icons/icon-trash.svg b/packages/boxel-ui/addon/raw-icons/icon-trash.svg
diff --git a/packages/boxel-ui/addon/src/components/color-palette/index.gts b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -4,12 +4,14 @@ import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
+import IconTrash from '../../icons/icon-trash.gts';
 import ColorPicker from '../color-picker/index.gts';
+import IconButton from '../icon-button/index.gts';
 
 interface Signature {
   Args: {
-    color: string;
-    onChange: (color: string) => void;
+    color: string | null;
+    onChange: (color: string | null) => void;
   };
   Element: HTMLDivElement;
 }
@@ -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 null)}}
+              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
@@ -6,9 +6,9 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPalette from './index.gts';
 
 export default class ColorPaletteUsage extends Component {
-  @tracked color = '#000000';
+  @tracked color: string | null = null;
 
-  private handleColorChange = (newColor: string) => {
+  private handleColorChange = (newColor: string | null) => {
     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
@@ -3,9 +3,9 @@ import Component from '@glimmer/component';
 
 interface Signature {
   Args: {
-    color: string;
+    color: string | null;
     disabled?: boolean;
-    onChange: (color: string) => void;
+    onChange: (color: string | null) => void;
     showHexString?: boolean;
   };
   Element: HTMLDivElement;
@@ -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
@@ -6,11 +6,11 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPicker from './index.gts';
 
 export default class ColorPickerUsage extends Component {
-  @tracked color = '#ff0000';
+  @tracked color: string | null = null;
   @tracked disabled = false;
   @tracked showHexString = true;
 
-  private onChange = (newColor: string) => {
+  private onChange = (newColor: string | null) => {
     this.color = newColor;
   };
 
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 @@
       }
     }
   }
-}
+}
diff --git 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 @@
       }
     }
   }
-}
+}
diff --git 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 @@
       }
     }
   }
-}
+}
diff --git 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
@@ -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