Skip to content

Commit

Permalink
chore: replace colors by variables
Browse files Browse the repository at this point in the history 
Signed-off-by: Florent Benoit <[email protected]>
  • Loading branch information
@benoitf
benoitf committed Feb 27, 2024
1 parent 5db22e0 commit deb0f74
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 40 deletions.
72 changes: 72 additions & 0 deletions packages/main/src/plugin/color-registry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ export class ColorRegistry {
this.initSecondaryNav();
this.initTitlebar();
this.initInvertContent();
this.initInputBox();
}

protected initGlobalNav(): void {
Expand Down Expand Up @@ -365,4 +366,75 @@ export class ColorRegistry {
light: colorPalette.purple[600],
});
}

// input boxes
protected initInputBox(): void {
const sNav = 'input-field-';

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],
});
this.registerColor(`${sNav}focused-text`, {
dark: colorPalette.white,
light: colorPalette.gray[900],
});
this.registerColor(`${sNav}error-text`, {
dark: colorPalette.red[500],
light: colorPalette.red[500],
});
this.registerColor(`${sNav}disabled-text`, {
dark: colorPalette.gray[900],
light: colorPalette.gray[900],
});
this.registerColor(`${sNav}hover-text`, {
dark: colorPalette.gray[900],
light: colorPalette.gray[900],
});
this.registerColor(`${sNav}placeholder-text`, {
dark: colorPalette.gray[900],
light: colorPalette.gray[900],
});
this.registerColor(`${sNav}stroke`, {
dark: colorPalette.purple[500],
light: colorPalette.purple[600],
});
this.registerColor(`${sNav}hover-stroke`, {
dark: colorPalette.purple[400],
light: colorPalette.purple[400],
});
this.registerColor(`${sNav}stroke-error`, {
dark: colorPalette.red[500],
light: colorPalette.red[500],
});
this.registerColor(`${sNav}stroke-readonly`, {
dark: colorPalette.charcoal[100],
light: colorPalette.charcoal[100],
});
this.registerColor(`${sNav}icon`, {
dark: colorPalette.gray[500],
light: colorPalette.gray[500],
});
this.registerColor(`${sNav}focused-icon`, {
dark: colorPalette.gray[500],
light: colorPalette.gray[500],
});
this.registerColor(`${sNav}disabled-icon`, {
dark: colorPalette.gray[500],
light: colorPalette.gray[500],
});
this.registerColor(`${sNav}hover-icon`, {
dark: colorPalette.gray[500],
light: colorPalette.gray[500],
});
}
}
44 changes: 22 additions & 22 deletions packages/renderer/src/lib/ui/Input.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,20 +53,20 @@ test('Expect basic styling', async () => {
expect(element).toHaveClass('outline-0');
expect(element).toHaveClass('bg-transparent');
expect(element).toHaveClass('text-sm');
expect(element).toHaveClass('text-white');
expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');

expect(element).toHaveClass('group-hover:bg-charcoal-900');
expect(element).toHaveClass('group-focus-within:bg-charcoal-900');
expect(element).toHaveClass('group-hover-placeholder:text-gray-900');
expect(element).toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element).toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
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('border-[1px]');
expect(element.parentElement).toHaveClass('border-transparent');

expect(element.parentElement).toHaveClass('hover:bg-charcoal-900');
expect(element.parentElement).toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element.parentElement).toHaveClass('hover:rounded-md');
expect(element.parentElement).toHaveClass('hover:border-purple-400');
expect(element.parentElement).toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
});

test('Expect basic readonly styling', async () => {
Expand All @@ -79,21 +79,21 @@ test('Expect basic readonly styling', async () => {
expect(element).toHaveClass('outline-0');
expect(element).toHaveClass('bg-transparent');
expect(element).toHaveClass('text-sm');
expect(element).toHaveClass('text-white');
expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');

expect(element).not.toHaveClass('group-hover:bg-charcoal-900');
expect(element).not.toHaveClass('group-focus-within:bg-charcoal-900');
expect(element).not.toHaveClass('group-hover-placeholder:text-gray-900');
expect(element).not.toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element).not.toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
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('border-[1px]');
expect(element.parentElement).toHaveClass('border-transparent');
expect(element.parentElement).toHaveClass('border-b-charcoal-100');
expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');

expect(element.parentElement).not.toHaveClass('hover:bg-charcoal-900');
expect(element.parentElement).not.toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element.parentElement).not.toHaveClass('hover:rounded-md');
expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
});

test('Expect basic disabled styling', async () => {
Expand All @@ -106,21 +106,21 @@ test('Expect basic disabled styling', async () => {
expect(element).toHaveClass('outline-0');
expect(element).toHaveClass('bg-transparent');
expect(element).toHaveClass('text-sm');
expect(element).toHaveClass('text-gray-700');
expect(element).toHaveClass('text-[color:var(--pd-input-field-disabled-text)]');

expect(element).not.toHaveClass('group-hover:bg-charcoal-900');
expect(element).not.toHaveClass('group-focus-within:bg-charcoal-900');
expect(element).not.toHaveClass('group-hover-placeholder:text-gray-900');
expect(element).not.toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element).not.toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
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('border-[1px]');
expect(element.parentElement).toHaveClass('border-transparent');
expect(element.parentElement).toHaveClass('border-b-charcoal-100');
expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');

expect(element.parentElement).not.toHaveClass('hover:bg-charcoal-900');
expect(element.parentElement).not.toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
expect(element.parentElement).not.toHaveClass('hover:rounded-md');
expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
});

test('Expect clear styling', async () => {
Expand All @@ -143,9 +143,9 @@ test('Expect basic error styling', async () => {

expect(element.parentElement).toBeInTheDocument();
expect(element.parentElement).toHaveClass('border-[1px]');
expect(element.parentElement).toHaveClass('border-b-red-500');
expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-error)]');

expect(element.parentElement).not.toHaveClass('hover:border-red-500');
expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');

const err = screen.getByText(error);
expect(err).toBeInTheDocument();
Expand Down
36 changes: 18 additions & 18 deletions packages/renderer/src/lib/ui/Input.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,27 +37,27 @@ async function onClear() {
<div
class="flex flex-row w-full items-center px-1 py-1 group bg-transparent border-[1px] border-transparent {$$props.class ||
''}"
class:hover:bg-charcoal-900="{enabled}"
class:focus-within:bg-charcoal-900="{enabled}"
class: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}"
class:border-b-purple-500="{enabled && !error}"
class:border-b-red-500="{enabled && error}"
class:hover:border-purple-400="{enabled && !error}"
class:hover:border-red-400="{enabled && error}"
class:focus-within:border-purple-500="{enabled && !error}"
class:focus-within:border-red-500="{enabled && error}"
class:border-b-charcoal-100="{readonly || disabled}">
class:border-b-[var(--pd-input-field-stroke)]="{enabled && !error}"
class:border-b-[var(--pd-input-field-stroke-error)]="{enabled && error}"
class:hover:border-[var(--pd-input-field-stroke)]="{enabled && !error}"
class:hover:border-[var(--pd-input-field-stroke-error)]="{enabled && error}"
class:focus-within:border-[var(--pd-input-field-stroke)]="{enabled && !error}"
class:focus-within:border-[var(--pd-input-field-stroke-error)]="{enabled && error}"
class:border-b-[var(--pd-input-field-stroke-readonly)]="{readonly || disabled}">
<slot name="left" />
<input
bind:this="{element}"
on:input
class="grow px-1 outline-0 text-sm bg-transparent placeholder:text-gray-700 overflow-hidden"
class:text-white="{!disabled}"
class:text-gray-700="{disabled}"
class:group-hover:bg-charcoal-900="{enabled}"
class:group-focus-within:bg-charcoal-900="{enabled}"
class:group-hover-placeholder:text-gray-900="{enabled}"
class="grow px-1 outline-0 text-sm bg-transparent 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}"
class:group-focus-within:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
class:group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]="{enabled}"
name="{name}"
type="text"
disabled="{disabled}"
Expand All @@ -69,13 +69,13 @@ async function onClear() {
aria-invalid="{$$props['aria-invalid']}"
bind:value="{value}" />
{#if error}
<span class="px-1 text-red-500" aria-label="error">
<span class="px-1 text-[color:var(--pd-input-field-error-text)]" aria-label="error">
<Fa icon="{faCircleExclamation}" />
</span>
{/if}
{#if clearable}
<button
class="px-1 cursor-pointer text-gray-700 group-hover:text-gray-900 group-focus-within:text-gray-900"
class="px-1 cursor-pointer text-[color:var(--pd-input-field-icon)] group-hover:text-[color:var(--pd-input-field-hover-icon)] group-focus-within:text-[color:var(--pd-input-field-focused-icon)]"
class:hidden="{!value || readonly || disabled}"
aria-label="clear"
on:click="{onClear}">
Expand All @@ -85,6 +85,6 @@ async function onClear() {
<slot name="right" />
</div>
{#if error && error.length > 0}
<span class="text-sm text-red-500">{error}</span>
<span class="text-sm text-[color:var(--pd-input-field-error-text)]">{error}</span>
{/if}
</div>

0 comments on commit deb0f74

Please sign in to comment.