refactor: text-primary (#22141)

This commit is contained in:
Jason Rasmussen 2025-09-17 12:12:51 -04:00 committed by GitHub
parent 53a6724039
commit 11e72a0f35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
63 changed files with 138 additions and 229 deletions

View file

@ -367,11 +367,7 @@
>
{#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
{#if useLocationPin}
<Icon
icon={mdiMapMarker}
size="50px"
class="dark:text-immich-dark-primary text-immich-primary -translate-y-[50%]"
/>
<Icon icon={mdiMapMarker} size="50px" class="text-primary -translate-y-[50%]" />
{:else}
<img
src={getAssetThumbnailUrl(feature.properties?.id)}

View file

@ -55,7 +55,7 @@
</div>
</div>
<div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
<p class="text-center text-lg font-medium text-primary">
{$user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
@ -107,7 +107,7 @@
<button
type="button"
class="text-center mt-4 underline text-xs text-immich-primary dark:text-immich-dark-primary"
class="text-center mt-4 underline text-xs text-primary"
onclick={async () => {
onClose();
if (info) {

View file

@ -10,7 +10,7 @@
<div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<div class="text-primary">
<Icon icon={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
</div>

View file

@ -14,7 +14,7 @@
</script>
<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
<Icon icon={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
<Icon icon={mdiPartyPopper} class="text-primary" size="96" />
<p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
<p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>

View file

@ -10,7 +10,7 @@
<div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<div class="text-primary">
<Icon icon={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
</div>

View file

@ -102,7 +102,7 @@
<button
id={getId(0)}
type="button"
class="rounded-lg p-2 font-semibold text-immich-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25 dark:text-immich-dark-primary"
class="rounded-lg p-2 font-semibold text-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25"
role="option"
onclick={() => handleClearAll()}
tabindex="-1"

View file

@ -78,9 +78,9 @@
<div>
<div class="flex gap-2 place-items-center">
{#if icon}
<Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" aria-hidden />
<Icon {icon} class="text-primary" size="24" aria-hidden />
{/if}
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
<h2 class="font-medium text-primary">
{title}
</h2>
</div>

View file

@ -16,13 +16,9 @@
<div class="mt-8 flex justify-between gap-2">
<div class="left">
{#if showResetToDefault}
<button
type="button"
onclick={() => onReset({ default: true })}
class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
<Button variant="ghost" shape="round" size="small" onclick={() => onReset({ default: true })}
>{$t('reset_to_default')}</Button
>
{$t('reset_to_default')}
</button>
{/if}
</div>

View file

@ -31,7 +31,7 @@
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select">
<label class="font-medium text-primary text-sm" for="{name}-select">
{label}
</label>

View file

@ -1,9 +1,9 @@
<script lang="ts">
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte';
interface Props {
title: string;
@ -31,7 +31,7 @@
<div class="grid grid-cols-2">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>
{#if isEdited}

View file

@ -29,7 +29,7 @@
<div class="flex place-items-center justify-between">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>
{#if isEdited}

View file

@ -81,9 +81,7 @@
<div class="mb-4 w-full">
<div class="flex place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm min-h-6 uppercase" for={label}
>{label}</label
>
<label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>
{/if}

View file

@ -40,9 +40,7 @@
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select"
>{label}</label
>
<label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
{#if isEdited}
<div

View file

@ -35,7 +35,7 @@
<div class="flex place-items-center justify-between">
<div class="me-2">
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}>
<label class="font-medium text-primary text-sm" for={sliderId}>
{title}
</label>
{#if isEdited}

View file

@ -1,8 +1,8 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte';
interface Props {
value: string;
@ -31,7 +31,7 @@
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={label}>{label}</label>
<label class="font-medium text-primary text-sm" for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>
{/if}

View file

@ -38,7 +38,7 @@
{#if showSettingDescription}
<div>
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={$t('language')}>
<label class="font-medium text-primary text-sm" for={$t('language')}>
{$t('language')}
</label>
</div>

View file

@ -96,17 +96,13 @@
<div class="h-6 w-6">
<ImmichLogo noText class="h-[24px]" />
</div>
<p class="flex text-immich-primary dark:text-immich-dark-primary font-medium">
<p class="flex text-primary font-medium">
{$t('purchase_button_buy_immich')}
</p>
</div>
<div>
<Icon
icon={mdiInformationOutline}
class="hidden sidebar:flex text-immich-primary dark:text-immich-dark-primary font-medium"
size="18"
/>
<Icon icon={mdiInformationOutline} class="hidden sidebar:flex text-primary font-medium" size="18" />
</div>
</div>
</button>
@ -142,7 +138,7 @@
/>
</div>
<h1 class="text-lg font-medium my-3 dark:text-immich-dark-primary text-immich-primary">
<h1 class="text-lg font-medium my-3 text-primary">
{$t('purchase_panel_title')}
</h1>

View file

@ -57,9 +57,7 @@
draggable="false"
aria-current={isSelected ? 'page' : undefined}
class="flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
{isSelected
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
: ''}"
{isSelected ? 'bg-immich-primary/10 text-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10' : ''}"
>
<div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate">
<Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden />

View file

@ -51,9 +51,7 @@
/>
</li>
{#each parents as parent (parent)}
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
{parent.value}
@ -61,9 +59,7 @@
</li>
{/each}
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<p class="cursor-default whitespace-pre-wrap">{node.value}</p>
</li>

View file

@ -23,7 +23,7 @@
title={item.value}
type="button"
>
<Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="64" />
<Icon {icon} class="text-primary" size="64" />
<p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
{item.value}
</p>

View file

@ -26,7 +26,7 @@
<a
href={getLink(node.path)}
title={node.value}
class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-primary' : 'dark:text-gray-200'}`}
data-sveltekit-keepfocus
>
{#if node.size > 0}
@ -37,7 +37,7 @@
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
<Icon
icon={isActive ? icons.active : icons.default}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
class={isActive ? 'text-primary' : 'text-gray-400'}
color={node.color}
size="20"
/>