mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-10-30 12:39:03 +01:00
feat!: add v3 design tokens, fonts and color themes
This commit is contained in:
Elias Schneider
-109
@@ -1,109 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Label } from '#lib/components/ui/label/index.js';
|
||||
import * as RadioGroup from '#lib/components/ui/radio-group/index.js';
|
||||
import { applyAccentColor } from '#lib/utils/accent-color-util.ts';
|
||||
import { Check, Plus } from '@lucide/svelte';
|
||||
import CustomColorDialog from './custom-accent-color-dialog.svelte';
|
||||
|
||||
let {
|
||||
selectedColor = $bindable(),
|
||||
previousColor,
|
||||
disabled = false
|
||||
}: { selectedColor: string; previousColor: string; disabled?: boolean } = $props();
|
||||
let showCustomColorDialog = $state(false);
|
||||
|
||||
const accentColors = [
|
||||
{ label: 'Default', color: 'default' },
|
||||
{ label: 'Rose', color: 'oklch(0.63 0.2 15)' },
|
||||
{ label: 'Orange', color: 'oklch(0.68 0.2 50)' },
|
||||
{ label: 'Amber', color: 'oklch(0.75 0.18 80)' },
|
||||
{ label: 'Green', color: 'oklch(0.65 0.2 150)' },
|
||||
{ label: 'Teal', color: 'oklch(0.6 0.15 180)' },
|
||||
{ label: 'Blue', color: 'oklch(0.6 0.2 240)' },
|
||||
{ label: 'Purple', color: 'oklch(0.6 0.24 300)' }
|
||||
];
|
||||
|
||||
// Check if current accent color is a custom color (not in predefined list)
|
||||
let isCustomColor = $derived(!accentColors.some((c) => c.color === selectedColor));
|
||||
let isPreviousColorCustom = $derived(!accentColors.some((c) => c.color === previousColor));
|
||||
|
||||
// Applies the selection as a live preview. Because it re-runs whenever the bound value
|
||||
// changes, it also restores the saved colour when the selection is discarded.
|
||||
$effect(() => {
|
||||
applyAccentColor(selectedColor);
|
||||
});
|
||||
|
||||
function handleAccentColorChange(accentValue: string) {
|
||||
selectedColor = accentValue;
|
||||
}
|
||||
</script>
|
||||
|
||||
<RadioGroup.Root
|
||||
class="flex flex-wrap gap-3"
|
||||
value={isCustomColor ? 'custom' : selectedColor}
|
||||
onValueChange={(value) => {
|
||||
if (value != 'custom') {
|
||||
handleAccentColorChange(value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#each accentColors as accent (accent.color)}
|
||||
{@render colorOption(accent.label, accent.color, selectedColor === accent.color)}
|
||||
{/each}
|
||||
{#if isCustomColor || isPreviousColorCustom}
|
||||
{@render colorOption('Custom', isCustomColor ? selectedColor : previousColor, isCustomColor)}
|
||||
{/if}
|
||||
{@render colorOption('Custom', 'custom', false, true)}
|
||||
</RadioGroup.Root>
|
||||
|
||||
<CustomColorDialog bind:open={showCustomColorDialog} onApply={handleAccentColorChange} />
|
||||
|
||||
{#snippet colorOption(
|
||||
label: string,
|
||||
color: string,
|
||||
isSelected: boolean,
|
||||
isCustomColorSelection = false
|
||||
)}
|
||||
<div class="group/item relative">
|
||||
<RadioGroup.Item id={color} value={color} class="sr-only" />
|
||||
<Label
|
||||
for={color}
|
||||
class={{
|
||||
'cursor-pointer': !disabled,
|
||||
'cursor-not-allowed': disabled,
|
||||
group: isCustomColorSelection
|
||||
}}
|
||||
onclick={() => {
|
||||
if (isCustomColorSelection && !disabled) {
|
||||
showCustomColorDialog = true;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class={{
|
||||
'relative z-10 size-8 rounded-full border-2 transition-all duration-200 ease-out group-hover/item:z-20 group-hover/item:scale-110': true,
|
||||
'bg-black dark:bg-white': color === 'default'
|
||||
}}
|
||||
style={color !== 'default' ? `background-color: ${color}` : ''}
|
||||
title={label}
|
||||
>
|
||||
{#if isCustomColorSelection}
|
||||
<div
|
||||
class="bg-muted absolute inset-0 flex items-center justify-center rounded-full border-2 border-dashed border-gray-300"
|
||||
>
|
||||
<Plus class="text-muted-foreground size-4" />
|
||||
</div>
|
||||
{:else if isSelected}
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<Check class="size-4 text-white drop-shadow-sm" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="text-muted-foreground group-hover/item:text-foreground bg-background absolute top-12 left-1/2 z-20 max-w-0 -translate-x-1/2 transform overflow-hidden rounded-md border px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-sm transition-all duration-300 ease-out group-hover/item:max-w-[100px] group-hover/item:opacity-100"
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
{/snippet}
|
||||
+7
-12
@@ -9,7 +9,7 @@
|
||||
import { createForm } from '#lib/utils/form-util.ts';
|
||||
import { trackFormChanges } from '#lib/utils/unsaved-changes-util.svelte.ts';
|
||||
import { z } from 'zod/v4';
|
||||
import AccentColorPicker from './accent-color-picker.svelte';
|
||||
import ColorThemePicker from './color-theme-picker.svelte';
|
||||
|
||||
let {
|
||||
callback,
|
||||
@@ -30,7 +30,7 @@
|
||||
sessionDuration: appConfig.sessionDuration,
|
||||
allowOwnAccountEdit: appConfig.allowOwnAccountEdit,
|
||||
disableAnimations: appConfig.disableAnimations,
|
||||
accentColor: appConfig.accentColor
|
||||
colorTheme: appConfig.colorTheme
|
||||
};
|
||||
|
||||
const formSchema = z.object({
|
||||
@@ -39,7 +39,7 @@
|
||||
sessionDuration: z.number().min(1).max(43200),
|
||||
allowOwnAccountEdit: z.boolean(),
|
||||
disableAnimations: z.boolean(),
|
||||
accentColor: z.string()
|
||||
colorTheme: z.string()
|
||||
});
|
||||
|
||||
let formStore = $derived(createForm(formSchema, updatedAppConfig));
|
||||
@@ -95,16 +95,11 @@
|
||||
|
||||
<Field.Field class="space-y-5">
|
||||
<div>
|
||||
<Field.Label>
|
||||
{m.accent_color()}
|
||||
</Field.Label>
|
||||
<Field.Description>
|
||||
{m.select_an_accent_color_to_customize_the_appearance_of_pocket_id()}
|
||||
</Field.Description>
|
||||
<Field.Label>{m.color_theme()}</Field.Label>
|
||||
<Field.Description>{m.color_theme_description()}</Field.Description>
|
||||
</div>
|
||||
<AccentColorPicker
|
||||
previousColor={appConfig.accentColor}
|
||||
bind:selectedColor={$inputs.accentColor.value}
|
||||
<ColorThemePicker
|
||||
bind:value={$inputs.colorTheme.value}
|
||||
disabled={$appConfigStore.uiConfigDisabled}
|
||||
/>
|
||||
</Field.Field>
|
||||
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
<script lang="ts">
|
||||
import { m } from '#lib/paraglide/messages.js';
|
||||
import {
|
||||
applyColorTheme,
|
||||
colorThemePreview,
|
||||
parseColorTheme
|
||||
} from '#lib/utils/color-theme-util.ts';
|
||||
import { colorThemes } from '#lib/utils/color-themes.ts';
|
||||
import { cn } from '#lib/utils/style.ts';
|
||||
import { Check, Palette, Plus } from '@lucide/svelte';
|
||||
import { RadioGroup } from 'bits-ui';
|
||||
import CustomThemeColorDialog from './custom-theme-color-dialog.svelte';
|
||||
|
||||
let {
|
||||
value = $bindable(),
|
||||
disabled = false
|
||||
}: {
|
||||
value: string;
|
||||
disabled?: boolean;
|
||||
} = $props();
|
||||
|
||||
const themeNames: Record<string, () => string> = {
|
||||
mono: m.color_theme_mono,
|
||||
mist: m.color_theme_mist,
|
||||
sage: m.color_theme_sage,
|
||||
midnight: m.color_theme_midnight,
|
||||
lavender: m.color_theme_lavender
|
||||
};
|
||||
|
||||
let dialogOpen = $state(false);
|
||||
let selectedId = $derived(parseColorTheme(value).id);
|
||||
let customColor = $state<string>();
|
||||
|
||||
// The last custom color stays on its tile while other themes are previewed
|
||||
$effect.pre(() => {
|
||||
const color = parseColorTheme(value).color;
|
||||
if (color) customColor = color;
|
||||
});
|
||||
|
||||
// Picking a tile previews across the whole app at once
|
||||
// Discard in the unsaved bar resets value, which re-applies the saved theme
|
||||
$effect(() => {
|
||||
applyColorTheme(value);
|
||||
});
|
||||
|
||||
function onValueChange(id: string) {
|
||||
if (id !== 'custom') value = id;
|
||||
else if (customColor) value = `custom:${customColor}`;
|
||||
else dialogOpen = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex max-w-[760px] flex-col gap-3">
|
||||
<RadioGroup.Root
|
||||
class="grid grid-cols-2 gap-3 sm:grid-cols-3"
|
||||
aria-label={m.color_theme()}
|
||||
bind:value={() => selectedId, onValueChange}
|
||||
{disabled}
|
||||
>
|
||||
{#each colorThemes as theme (theme.id)}
|
||||
{@render tile(theme.id, themeNames[theme.id](), theme.id)}
|
||||
{/each}
|
||||
{@render tile('custom', m.custom(), customColor ? `custom:${customColor}` : null)}
|
||||
</RadioGroup.Root>
|
||||
|
||||
{#if selectedId === 'custom'}
|
||||
<div class="flex flex-col items-start gap-1">
|
||||
<button
|
||||
type="button"
|
||||
class="text-fg inline-flex items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline"
|
||||
onclick={() => (dialogOpen = true)}
|
||||
{disabled}
|
||||
>
|
||||
<Palette class="size-3.5" />
|
||||
{m.edit_custom_color()}
|
||||
</button>
|
||||
<p class="text-fg-muted text-caption">{m.custom_color_theme_note()}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<CustomThemeColorDialog
|
||||
bind:open={dialogOpen}
|
||||
initialColor={customColor}
|
||||
onUse={(color) => (value = `custom:${color}`)}
|
||||
/>
|
||||
|
||||
{#snippet tile(id: string, name: string, previewValue: string | null)}
|
||||
<RadioGroup.Item
|
||||
value={id}
|
||||
class={cn(
|
||||
'group bg-surface flex flex-col gap-2 rounded-lg p-2 text-left shadow-[inset_0_0_0_1px_var(--border)] transition-shadow duration-(--dur-fast)',
|
||||
'hover:shadow-[inset_0_0_0_1px_var(--border-strong)] data-[state=checked]:shadow-[inset_0_0_0_2px_var(--fg)]',
|
||||
'focus-visible:outline-ring focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
'disabled:cursor-not-allowed disabled:opacity-55 data-[state=checked]:disabled:opacity-100'
|
||||
)}
|
||||
>
|
||||
{#snippet children({ checked })}
|
||||
{#if previewValue}
|
||||
<div class="grid h-[72px] grid-cols-2 overflow-hidden rounded-md" aria-hidden="true">
|
||||
{#each colorThemePreview(previewValue) as half (half.mode)}
|
||||
<div class="flex" style="background: {half.page}">
|
||||
<div class="flex w-[34%] flex-col gap-1 p-1.5" style="background: {half.sidebar}">
|
||||
<span class="h-1 w-full rounded-full" style="background: {half.line}"></span>
|
||||
<span class="h-1 w-3/4 rounded-full opacity-50" style="background: {half.text}"
|
||||
></span>
|
||||
<span class="h-1 w-2/3 rounded-full opacity-50" style="background: {half.text}"
|
||||
></span>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1 p-1.5">
|
||||
<span class="h-1 w-4/5 rounded-full opacity-60" style="background: {half.text}"
|
||||
></span>
|
||||
<span class="h-1 w-1/2 rounded-full opacity-40" style="background: {half.text}"
|
||||
></span>
|
||||
<span
|
||||
class="mt-auto h-2.5 w-full max-w-8 rounded-[3px]"
|
||||
style="background: {half.primary}"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="border-border-strong text-fg-muted text-caption flex h-[72px] flex-col items-center justify-center gap-1 rounded-md border border-dashed"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Plus class="size-4" />
|
||||
{m.pick_a_color()}
|
||||
</div>
|
||||
{/if}
|
||||
<span class="flex items-center justify-between gap-2 px-0.5 text-sm font-medium">
|
||||
{name}
|
||||
{#if checked}<Check class="size-4" />{/if}
|
||||
</span>
|
||||
{/snippet}
|
||||
</RadioGroup.Item>
|
||||
{/snippet}
|
||||
-82
@@ -1,82 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '#lib/components/ui/button/index.ts';
|
||||
import * as Dialog from '#lib/components/ui/dialog/index.ts';
|
||||
import * as Field from '#lib/components/ui/field/index.ts';
|
||||
import { Input } from '#lib/components/ui/input/index.ts';
|
||||
import { m } from '#lib/paraglide/messages.js';
|
||||
import { preventDefault } from '#lib/utils/event-util.ts';
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
onApply
|
||||
}: {
|
||||
open: boolean;
|
||||
onApply: (color: string) => void;
|
||||
} = $props();
|
||||
|
||||
let customColorInput = $state('');
|
||||
|
||||
function applyCustomColor() {
|
||||
if (!isValidColor(customColorInput)) return;
|
||||
onApply(customColorInput);
|
||||
open = false;
|
||||
}
|
||||
|
||||
function isValidColor(color: string): boolean {
|
||||
// Create a temporary element to test if the color is valid
|
||||
const testElement = document.createElement('div');
|
||||
testElement.style.color = color;
|
||||
return testElement.style.color !== '';
|
||||
}
|
||||
|
||||
function onOpenChange(newOpen: boolean) {
|
||||
if (!newOpen) {
|
||||
customColorInput = '';
|
||||
}
|
||||
open = newOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root {open} {onOpenChange}>
|
||||
<Dialog.Content class="max-w-md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title class="flex items-center gap-2">{m.custom_accent_color()}</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{m.custom_accent_color_description()}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<form onsubmit={preventDefault(applyCustomColor)}>
|
||||
<div class="space-y-4">
|
||||
<Field.Field>
|
||||
<Field.Label for="custom-color-input">{m.color_value()}</Field.Label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-full transition">
|
||||
<Input
|
||||
id="custom-color-input"
|
||||
bind:value={customColorInput}
|
||||
placeholder="#3b82f6"
|
||||
class="mt-1 flex-1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class={{
|
||||
'border-border mt-1 rounded-lg border-1 transition-all duration-200 ease-in-out': true,
|
||||
'h-9 w-9': isValidColor(customColorInput),
|
||||
'h-0 w-0': !isValidColor(customColorInput)
|
||||
}}
|
||||
style="background-color: {customColorInput}"
|
||||
></div>
|
||||
</div>
|
||||
</Field.Field>
|
||||
</div>
|
||||
|
||||
<Dialog.Footer class="mt-6">
|
||||
<Button variant="secondary" onclick={() => onOpenChange(false)}>{m.cancel()}</Button>
|
||||
<Button type="submit" disabled={!customColorInput || !isValidColor(customColorInput)}
|
||||
>{m.apply()}</Button
|
||||
>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '#lib/components/ui/button/index.ts';
|
||||
import * as Dialog from '#lib/components/ui/dialog/index.ts';
|
||||
import * as Field from '#lib/components/ui/field/index.ts';
|
||||
import { Input } from '#lib/components/ui/input/index.ts';
|
||||
import { Switch } from '#lib/components/ui/switch/index.ts';
|
||||
import { m } from '#lib/paraglide/messages.js';
|
||||
import {
|
||||
colorThemeFor,
|
||||
deriveAccent,
|
||||
parseColor,
|
||||
primaryVars
|
||||
} from '#lib/utils/color-theme-util.ts';
|
||||
import { preventDefault } from '#lib/utils/event-util.ts';
|
||||
import { mode } from 'mode-watcher';
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
initialColor,
|
||||
onUse
|
||||
}: {
|
||||
open: boolean;
|
||||
initialColor?: string;
|
||||
onUse: (color: string) => void;
|
||||
} = $props();
|
||||
|
||||
let color = $state('');
|
||||
let showError = $state(false);
|
||||
let errorTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const parsed = $derived(parseColor(color));
|
||||
const valid = $derived(!!parsed && parsed.alpha >= 1);
|
||||
const error = $derived(
|
||||
!color.trim() || valid
|
||||
? null
|
||||
: parsed
|
||||
? m.use_a_color_without_transparency()
|
||||
: m.enter_a_css_color()
|
||||
);
|
||||
|
||||
// The preview fits the accent against the tinted surfaces of the custom theme, so it is exactly what people will see
|
||||
const fitted = $derived.by(() => {
|
||||
if (!valid) return null;
|
||||
const theme = colorThemeFor(`custom:${color.trim()}`);
|
||||
const modeName: 'light' | 'dark' = mode.current === 'dark' ? 'dark' : 'light';
|
||||
return {
|
||||
light: deriveAccent(theme.accent, theme.accentInputs.light),
|
||||
dark: deriveAccent(theme.accent, theme.accentInputs.dark),
|
||||
current: modeName
|
||||
};
|
||||
});
|
||||
const previewVars = $derived(fitted ? primaryVars(fitted[fitted.current]) : null);
|
||||
const previewStyle = $derived(
|
||||
previewVars
|
||||
? Object.entries(previewVars)
|
||||
.map(([k, v]) => `--${k}: ${v}`)
|
||||
.join('; ')
|
||||
: ''
|
||||
);
|
||||
const notes = $derived.by(() => {
|
||||
if (!fitted) return [];
|
||||
const out: string[] = [];
|
||||
if (fitted.light.deepened) out.push(m.custom_color_note_darkened());
|
||||
if (fitted.dark.lifted) out.push(m.custom_color_note_lightened());
|
||||
if (fitted.light.edge || fitted.dark.edge) out.push(m.custom_color_note_edge());
|
||||
if (fitted.light.nearSemantic) out.push(m.custom_color_note_near_status());
|
||||
return out;
|
||||
});
|
||||
|
||||
// Errors wait for a pause in typing, never interrupting it
|
||||
$effect(() => {
|
||||
void color;
|
||||
showError = false;
|
||||
clearTimeout(errorTimer);
|
||||
errorTimer = setTimeout(() => (showError = true), 700);
|
||||
return () => clearTimeout(errorTimer);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (open) color = initialColor ?? '';
|
||||
});
|
||||
|
||||
function use() {
|
||||
showError = true;
|
||||
if (!valid) return;
|
||||
onUse(color.trim());
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="top-[15%] max-w-[420px] translate-y-0 sm:max-h-[80dvh]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{m.custom_theme_color()}</Dialog.Title>
|
||||
<Dialog.Description>{m.custom_theme_color_description()}</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<form class="flex flex-col gap-5" onsubmit={preventDefault(use)}>
|
||||
<Field.Field data-invalid={showError && error ? true : undefined}>
|
||||
<Field.Label for="custom-theme-color">{m.color()}</Field.Label>
|
||||
<Input
|
||||
id="custom-theme-color"
|
||||
class="font-mono"
|
||||
placeholder="#2f6f4e"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
bind:value={color}
|
||||
aria-invalid={showError && error ? true : undefined}
|
||||
/>
|
||||
<div class="max-sm:min-h-[18px] sm:empty:hidden">
|
||||
{#if showError && error}
|
||||
<Field.Error>{error}</Field.Error>
|
||||
{/if}
|
||||
</div>
|
||||
</Field.Field>
|
||||
|
||||
{#if fitted}
|
||||
<div class="flex flex-col gap-2" style={previewStyle}>
|
||||
<span class="text-fg-muted text-caption font-medium">{m.preview()}</span>
|
||||
<div class="bg-surface-sunken flex items-center gap-4 rounded-md p-3">
|
||||
<Button type="button" tabindex={-1}>{m.authenticate()}</Button>
|
||||
<Switch checked tabindex={-1} aria-hidden="true" />
|
||||
<span class="text-fg-muted ml-auto font-mono text-xs">{previewVars?.primary}</span>
|
||||
</div>
|
||||
<p class="text-fg-muted text-caption" aria-live="polite">{notes.join(' ')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button type="button" variant="ghost" onclick={() => (open = false)}>{m.cancel()}</Button>
|
||||
<Button type="submit" disabled={!valid}>{m.use_color()}</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
Reference in New Issue
Block a user