Todays ux tweaks (#132)

mcnuttandrew · Oct 4, 2024 · 37019da · 37019da
1 parent c97cc2f
commit 37019da
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 19 deletions.
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -168,13 +168,28 @@
       >
         <div slot="menu" let:tab>
           {#if tab === "eval"}
-            <div
-              class="bg-red-700 text-white rounded-full w-5 h-5 text-xs text-center flex items-center justify-center mx-1 font-normal"
-            >
-              {$lintStore.currentChecks.filter(
-                (x) => x.kind === "success" && !x.passes
-              ).length}
-            </div>
+            <svg width={`${18}px`} height={`${18}px`} class="ml-1">
+              <circle
+                r={9}
+                cx={9}
+                cy={9}
+                fill={"rgb(185 28 28 / var(--tw-bg-opacity))"}
+              />
+              <!-- text aligned with center -->
+              <text
+                x={9}
+                y={13.5}
+                font-size={13}
+                fill="white"
+                text-anchor="middle"
+                font-weight="normal"
+                alignment-baseline="middle"
+              >
+                {$lintStore.currentChecks.filter(
+                  (x) => x.kind === "success" && !x.passes
+                ).length}
+              </text>
+            </svg>
           {/if}
         </div>
       </Nav>

diff --git a/apps/color-buddy/src/components/ColorBall.svelte b/apps/color-buddy/src/components/ColorBall.svelte
@@ -96,14 +96,14 @@
     {/if}
     {#if stats[idx] && !statsTypeIsDelta && $configStore.evalDeltaDisplay !== "none"}
       <div class=" text-black text-right text-xs whitespace-nowrap">
-        Contrast: {Math.round(stats[idx])}
+        Contrast: {Math.round(stats[idx] * 10) / 10}
       </div>
     {/if}
   </div>
 </div>
 
 {#if stats[idx] && statsTypeIsDelta && $configStore.evalDeltaDisplay !== "none"}
   <div class=" text-black text-right text-xs whitespace-nowrap">
-    dE: {Math.round(stats[idx])}
+    dE: {Math.round(stats[idx] * 10) / 10}
   </div>
 {/if}
diff --git a/apps/color-buddy/src/controls/DeMetric.svelte b/apps/color-buddy/src/controls/DeMetric.svelte
@@ -5,6 +5,10 @@
   import ChevDown from "virtual:icons/fa6-solid/chevron-down";
   import { controlButtonStyle } from "../lib/styles";
   import { contrastMetrics, deltaMetrics } from "../constants";
+
+  const nameMap: Record<string, string> = {
+    Lstar: "Delta L*",
+  };
 </script>
 
 <Tooltip bg="bg-white">
@@ -47,7 +51,7 @@
         class:font-bold={$configStore.evalDeltaDisplay === metric}
         on:click={() => configStore.setEvalDeltaDisplay(metric)}
       >
-        {metric}
+        {nameMap[metric] || metric}
         {#if metric === "WCAG21"}
           <span class="font-normal">(recommended)</span>
         {/if}

diff --git a/apps/color-buddy/src/controls/Title.svelte b/apps/color-buddy/src/controls/Title.svelte
@@ -28,11 +28,23 @@
               on:submit|preventDefault={() =>
                 colorStore.setCurrentPalName(nameBind)}
             >
-              <input type="text" class={buttonStyle} bind:value={nameBind} />
+              <input
+                type="text"
+                class={buttonStyle}
+                bind:value={nameBind}
+                on:blur={() => colorStore.setCurrentPalName(nameBind)}
+              />
             </form>
           </div>
         </div>
-        <button slot="target" let:toggle on:click={toggle}>
+        <button
+          slot="target"
+          let:toggle
+          on:click={(x) => {
+            toggle();
+            nameBind = currentPal.name;
+          }}
+        >
           <Pencil class="text-sm mx-1" />
         </button>
       </Tooltip>

diff --git a/apps/color-buddy/src/linting/GlobalLintConfigModal.svelte b/apps/color-buddy/src/linting/GlobalLintConfigModal.svelte
@@ -27,6 +27,13 @@
   function onClose() {
     modalState = "closed";
   }
+  $: groupNames = [
+    "usability",
+    "contrast-accessibility",
+    "color-accessibility",
+    "design",
+    "custom",
+  ].filter((x) => (lintsByGroup[x] || []).length);
 </script>
 
 <Modal
@@ -84,7 +91,7 @@
   </div>
   <div class="flex flex-col px-4">
     <div class="flex flex-col overflow-scroll">
-      {#each Object.keys(lintGroupNames) as group}
+      {#each groupNames as group}
         {#if (lintsByGroup[group] || []).length > 0}
           <div class="mt-2 flex items-center">
             <div class="h-8 w-10 flex items-center justify-center">

diff --git a/packages/palette-lint/src/__snapshots__/ColorLint.test.ts.snap b/packages/palette-lint/src/__snapshots__/ColorLint.test.ts.snap
@@ -70,13 +70,13 @@ exports[`ColorLint - Contrast (1) GraphicalObjs 1`] = `"These colors () do not h
 
 exports[`ColorLint - Contrast (1) GraphicalObjs 2`] = `"These colors (#feed72, #f8f4d2, #eb717b) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
 
-exports[`ColorLint - Contrast (2) contrastTextAA 1`] = `"These text colors ({{blame}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
+exports[`ColorLint - Contrast (2) contrastTextAA 1`] = `"These text colors () do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
 
-exports[`ColorLint - Contrast (2) contrastTextAA 2`] = `"These text colors ({{blame}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
+exports[`ColorLint - Contrast (2) contrastTextAA 2`] = `"These text colors (#eb717b) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
 
-exports[`ColorLint - Contrast (3) contrastTextAAA 1`] = `"These text colors ({{blame}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
+exports[`ColorLint - Contrast (3) contrastTextAAA 1`] = `"These text colors () do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
 
-exports[`ColorLint - Contrast (3) contrastTextAAA 2`] = `"These text colors ({{blame}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
+exports[`ColorLint - Contrast (3) contrastTextAAA 2`] = `"These text colors (#af3b4b) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable."`;
 
 exports[`ColorLint - Diverging Order 1`] = `""`;
 

diff --git a/packages/palette-lint/src/lints/background-contrast.ts b/packages/palette-lint/src/lints/background-contrast.ts
@@ -41,7 +41,7 @@ const lintBase: LintProgram = {
   level: "error",
   group: "contrast-accessibility",
   description: descriptionBase + textPart,
-  failMessage: `These text colors ({{blame}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable.`,
+  failMessage: `These text colors ({{blame}}) do not have a sufficient contrast do not have sufficient contrast with the background to be easily readable.`,
   id: "background-contrast-built-in",
   blameMode: "single" as const,
   subscribedFix: "fixBackgroundDifferentiability",

diff --git a/packages/palette/src/Color.ts b/packages/palette/src/Color.ts
@@ -445,7 +445,7 @@ class XYZ extends Color {
   spaceName = "xyz-d65" as const;
   // static domains = { x: [0, 9504.7], y: [0, 10000], z: [0, 10888.3] } as Domain;
   // static domains = { x: [0, 100], y: [0, 100], z: [0, 100] } as Domain;
-  static domains = { x: [0, 1.1], y: [1.1, 0], z: [0, 1.1] } as Domain;
+  static domains = { x: [0, 1.1], y: [1.1, 0], z: [1.1, 0] } as Domain;
   static stepSize: Channels = [0.01, 0.01, 0.01];
   static dimensionToChannel = { x: "x", y: "z", z: "y" };
   static description =