chore: reduce impact of Input styling

Changes three things in the Input styling to reduce the changes from 1.7:

- Changes the bottom border/focus outline (stroke color) from purple to
  charcoal. (one suggestion was to remove it, but that's both a bigger
  change and IMHO this still provides some nice minor styling)
- Added a new input-field-bg variable so that you can customize the
  regular background of the input, and set it to charcoal-800.
- The mouse-over effect was identical to focus (rounded, full border, dark
  background) and was distracting if you moved the mouse over multiple
  Inputs. This removes the background change by making the hover effect
  transparent. This required moving transparent color to our new color
  palette, and adding a not() so that the hover affect doesn't effect
  focussed inputs.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/main/src/plugin/color-registry.ts

@@ -371,18 +371,21 @@ export class ColorRegistry {
   protected initInputBox(): void {
     const sNav = 'input-field-';
 
+    this.registerColor(`${sNav}bg`, {
+      dark: colorPalette.charcoal[800],
+      light: colorPalette.charcoal[800],
+    });
     this.registerColor(`${sNav}focused-bg`, {
       dark: colorPalette.charcoal[900],
       light: colorPalette.gray[100],
     });
-
     this.registerColor(`${sNav}disabled-bg`, {
       dark: colorPalette.charcoal[900],
       light: colorPalette.charcoal[900],
     });
     this.registerColor(`${sNav}hover-bg`, {
-      dark: colorPalette.charcoal[900],
-      light: colorPalette.gray[100],
+      dark: colorPalette.transparent,
+      light: colorPalette.transparent,
     });
     this.registerColor(`${sNav}focused-text`, {
       dark: colorPalette.white,
@@ -405,8 +408,8 @@ export class ColorRegistry {
       light: colorPalette.gray[900],
     });
     this.registerColor(`${sNav}stroke`, {
-      dark: colorPalette.purple[500],
-      light: colorPalette.purple[600],
+      dark: colorPalette.charcoal[400],
+      light: colorPalette.charcoal[400],
     });
     this.registerColor(`${sNav}hover-stroke`, {
       dark: colorPalette.purple[400],

packages/ui/src/lib/input/Input.spec.ts

@@ -52,7 +52,7 @@ test('Expect basic styling', async () => {
   expect(element).toHaveClass('grow');
   expect(element).toHaveClass('px-1');
   expect(element).toHaveClass('outline-0');
-  expect(element).toHaveClass('bg-transparent');
+  expect(element).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element).toHaveClass('text-sm');
   expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');
 
@@ -61,11 +61,11 @@ test('Expect basic styling', async () => {
   expect(element).toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
-  expect(element.parentElement).toHaveClass('bg-transparent');
+  expect(element.parentElement).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
 
-  expect(element.parentElement).toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element.parentElement).toHaveClass('not(focus-within):hover:bg-[var(--pd-input-field-hover-bg)]');
   expect(element.parentElement).toHaveClass('hover:rounded-md');
   expect(element.parentElement).toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
 });
@@ -79,7 +79,7 @@ test('Expect basic readonly styling', async () => {
   expect(element).toHaveClass('grow');
   expect(element).toHaveClass('px-1');
   expect(element).toHaveClass('outline-0');
-  expect(element).toHaveClass('bg-transparent');
+  expect(element).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element).toHaveClass('text-sm');
   expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');
 
@@ -88,7 +88,7 @@ test('Expect basic readonly styling', async () => {
   expect(element).not.toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
-  expect(element.parentElement).toHaveClass('bg-transparent');
+  expect(element.parentElement).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
   expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');
@@ -107,7 +107,7 @@ test('Expect basic disabled styling', async () => {
   expect(element).toHaveClass('grow');
   expect(element).toHaveClass('px-1');
   expect(element).toHaveClass('outline-0');
-  expect(element).toHaveClass('bg-transparent');
+  expect(element).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element).toHaveClass('text-sm');
   expect(element).toHaveClass('text-[color:var(--pd-input-field-disabled-text)]');
 
@@ -116,7 +116,7 @@ test('Expect basic disabled styling', async () => {
   expect(element).not.toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
-  expect(element.parentElement).toHaveClass('bg-transparent');
+  expect(element.parentElement).toHaveClass('bg-[var(--pd-input-field-bg)]');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
   expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');

packages/ui/src/lib/input/Input.svelte

@@ -35,9 +35,9 @@ async function onClear(): Promise<void> {
 
 <div class="flex flex-col grow">
   <div
-    class="flex flex-row grow items-center px-1 py-1 group bg-transparent border-[1px] border-transparent {$$props.class ||
+    class="flex flex-row grow items-center px-1 py-1 group bg-[var(--pd-input-field-bg)] border-[1px] border-transparent {$$props.class ||
       ''}"
-    class:hover:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
+    class:not(focus-within):hover:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
     class:focus-within:bg-[var(--pd-input-field-focused-bg)]="{enabled}"
     class:hover:rounded-md="{enabled}"
     class:focus-within:rounded-md="{enabled}"
@@ -52,7 +52,7 @@ async function onClear(): Promise<void> {
     <input
       bind:this="{element}"
       on:input
-      class="grow px-1 outline-0 text-sm bg-transparent placeholder:text-[color:var(--pd-input-field-placeholder-text)] overflow-hidden"
+      class="grow px-1 outline-0 text-sm bg-[var(--pd-input-field-bg)] placeholder:text-[color:var(--pd-input-field-placeholder-text)] overflow-hidden"
       class:text-[color:var(--pd-input-field-focused-text)]="{!disabled}"
       class:text-[color:var(--pd-input-field-disabled-text)]="{disabled}"
       class:group-hover:bg-[var(--pd-input-field-hover-bg)]="{enabled}"

tailwind-color-palette.json

@@ -109,5 +109,6 @@
     "800": "#1a4a72",
     "900": "#1b3f5f"
   },
-  "white": "#fff"
+  "white": "#fff",
+  "transparent": "transparent"
 }

tailwind.config.cjs

@@ -78,7 +78,6 @@ module.exports = {
         'unknown': tailwindColors.gray[100],
 
       },
-      transparent: 'transparent',
       // The remaining colors below are not part of our palette and are only here
       // to maintain existing code. No new use.
       'zinc': {