diff --git a/src/shared/types.ts b/src/shared/types.ts index a1e5325..9b931fe 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -41,8 +41,20 @@ export interface ConnectionsFile { connections: SavedConnection[]; } +export type AccentTone = + | "graphite" + | "blue" + | "indigo" + | "purple" + | "rose" + | "orange" + | "green" + | "teal"; + export interface AppSettings { theme: "system" | "light" | "dark"; + /** Accent tone for chrome and selection tint; graphite = neutral zinc. */ + accent: AccentTone; speedUnit: "MBps" | "Mbps"; /** Font size of the path bar and file list. */ textSize: "compact" | "default" | "large"; @@ -60,6 +72,7 @@ export interface AppSettings { export const DEFAULT_SETTINGS: AppSettings = { theme: "system", + accent: "indigo", speedUnit: "MBps", textSize: "default", transferMode: "single", diff --git a/ui/src/app/file-panel/file-panel.html b/ui/src/app/file-panel/file-panel.html index 293a535..0340172 100644 --- a/ui/src/app/file-panel/file-panel.html +++ b/ui/src/app/file-panel/file-panel.html @@ -220,7 +220,7 @@ (dblclick)="openAt(i)" (contextmenu)="rowContextMenu($event, i)" class="grid h-(--row-h) grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] items-center text-(length:--list-font)" - [class.bg-accent]="i === panel().cursor() && !isSelected(entry)" + [class.bg-cursor-tint]="i === panel().cursor() && !isSelected(entry)" [class.bg-primary/15]="isSelected(entry)" [class.ring-1]="i === panel().cursor() && isActive()" [class.ring-inset]="i === panel().cursor() && isActive()" diff --git a/ui/src/app/settings.service.ts b/ui/src/app/settings.service.ts index 37fc99e..9e2d512 100644 --- a/ui/src/app/settings.service.ts +++ b/ui/src/app/settings.service.ts @@ -5,6 +5,7 @@ import { RpcService } from './rpc.service'; @Injectable({ providedIn: 'root' }) export class SettingsService { readonly theme = signal(DEFAULT_SETTINGS.theme); + readonly accent = signal(DEFAULT_SETTINGS.accent); readonly speedUnit = signal(DEFAULT_SETTINGS.speedUnit); readonly textSize = signal(DEFAULT_SETTINGS.textSize); readonly transferMode = signal(DEFAULT_SETTINGS.transferMode); @@ -16,10 +17,13 @@ export class SettingsService { private readonly rpc = inject(RpcService); constructor() { + // the default accent is not the CSS default — apply before first paint + this.applyAccent(); if (!this.rpc.available) return; void this.rpc.request.getSettings({}).then((res) => { if (!res.ok) return; this.theme.set(res.settings.theme); + this.accent.set(res.settings.accent); this.speedUnit.set(res.settings.speedUnit); this.textSize.set(res.settings.textSize); this.transferMode.set(res.settings.transferMode); @@ -28,6 +32,7 @@ export class SettingsService { this.editor.set(res.settings.editor); this.editorApp.set(res.settings.editorApp); this.applyTheme(); + this.applyAccent(); this.applyTextSize(); }); } @@ -38,6 +43,12 @@ export class SettingsService { void this.persist(); } + setAccent(tone: AppSettings['accent']): void { + this.accent.set(tone); + this.applyAccent(); + void this.persist(); + } + setSpeedUnit(unit: AppSettings['speedUnit']): void { this.speedUnit.set(unit); void this.persist(); @@ -83,6 +94,15 @@ export class SettingsService { } } + private applyAccent(): void { + const tone = this.accent(); + if (tone === 'graphite') { + delete document.documentElement.dataset['accent']; + } else { + document.documentElement.dataset['accent'] = tone; + } + } + private applyTextSize(): void { const size = this.textSize(); if (size === 'default') { @@ -95,6 +115,7 @@ export class SettingsService { protected settings(): AppSettings { return { theme: this.theme(), + accent: this.accent(), speedUnit: this.speedUnit(), textSize: this.textSize(), transferMode: this.transferMode(), diff --git a/ui/src/app/tab-bar/tab-bar.ts b/ui/src/app/tab-bar/tab-bar.ts index 976383e..82d5d6e 100644 --- a/ui/src/app/tab-bar/tab-bar.ts +++ b/ui/src/app/tab-bar/tab-bar.ts @@ -1,11 +1,24 @@ import { Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core'; import { NgIcon } from '@ng-icons/core'; +import type { AccentTone } from '@shared/types'; import { PanelsService } from '../panels.service'; import { IS_MAC_CHROME } from '../platform'; import { RpcService } from '../rpc.service'; import { SettingsService } from '../settings.service'; const THEMES = ['system', 'light', 'dark'] as const; +// Swatch colors are fixed mid-tones so every dot reads on both light and dark +// cards (the live --primary values would vanish against one of them). +const ACCENTS: readonly { value: AccentTone; swatch: string; label: string }[] = [ + { value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)', label: 'Graphite' }, + { value: 'blue', swatch: 'oklch(0.65 0.17 255)', label: 'Blue' }, + { value: 'indigo', swatch: 'oklch(0.65 0.19 277)', label: 'Indigo' }, + { value: 'purple', swatch: 'oklch(0.65 0.17 305)', label: 'Purple' }, + { value: 'rose', swatch: 'oklch(0.65 0.17 8)', label: 'Rose' }, + { value: 'orange', swatch: 'oklch(0.68 0.17 50)', label: 'Orange' }, + { value: 'green', swatch: 'oklch(0.65 0.15 150)', label: 'Green' }, + { value: 'teal', swatch: 'oklch(0.65 0.12 185)', label: 'Teal' }, +]; const SPEED_UNITS = [ { value: 'MBps', label: 'MB/s' }, { value: 'Mbps', label: 'Mbps' }, @@ -119,6 +132,24 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const; +
+ Accent +
+ @for (tone of accents; track tone.value) { + + } +
+
+
Text size
@@ -273,6 +304,7 @@ export class TabBar { readonly settingsOpen = signal(false); readonly isMacChrome = IS_MAC_CHROME; readonly themes = THEMES; + readonly accents = ACCENTS; readonly speedUnits = SPEED_UNITS; readonly textSizes = TEXT_SIZES; readonly transferModes = TRANSFER_MODES; diff --git a/ui/src/styles.css b/ui/src/styles.css index be037e5..c9045c7 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -95,6 +95,7 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); + --color-cursor-tint: var(--cursor-tint); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); @@ -125,6 +126,43 @@ --path-ctl-h: 32px; } +/* Accent tone (data-accent set by SettingsService; absent = graphite/zinc). + Each tone is one hue+chroma line; the formula blocks below derive --primary, + --ring and the cursor-row tint for light and both dark states. The dark + formula blocks (0,3,0) outrank the base dark token blocks and the light + formula block (0,2,0) in every dark state; graphite matches no [data-accent] + selector and keeps the zinc tokens untouched. */ +:root { + /* graphite: cursor row identical to the old bg-accent highlight */ + --cursor-tint: var(--accent); +} +:root[data-accent='blue'] { --tone-h: 255; --tone-c: 0.17; } +:root[data-accent='indigo'] { --tone-h: 277; --tone-c: 0.19; } +:root[data-accent='purple'] { --tone-h: 305; --tone-c: 0.17; } +:root[data-accent='rose'] { --tone-h: 8; --tone-c: 0.17; } +/* darkest orange that still reads orange; white button text lands ≈ 4.3:1 */ +:root[data-accent='orange'] { --tone-h: 50; --tone-c: 0.18; --tone-l: 0.58; } +:root[data-accent='green'] { --tone-h: 150; --tone-c: 0.15; } +:root[data-accent='teal'] { --tone-h: 185; --tone-c: 0.12; } + +:root[data-accent] { + --primary: oklch(var(--tone-l, 0.55) var(--tone-c) var(--tone-h)); + --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h)); + --cursor-tint: color-mix(in oklab, var(--primary) 8%, transparent); +} +:root[data-theme='dark'][data-accent] { + --primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h)); + --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h)); + --cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent); +} +@media (prefers-color-scheme: dark) { + :root[data-accent]:not([data-theme='light']) { + --primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h)); + --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h)); + --cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent); + } +} + html, body { height: 100%;