jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accent tone setting with macOS-style swatches (indigo default)

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jokin
2026-07-12 01:26:35 +02:00
co-authored by Claude Fable 5
parent c7b0418904
commit 2f4bc63ac8
5 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/types.ts
+13
View File
@@ -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",
ui/src/app/file-panel/file-panel.html
+1 -1
View File
@@ -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()"
ui/src/app/settings.service.ts
+21
View File
@@ -5,6 +5,7 @@ import { RpcService } from './rpc.service';
@Injectable({ providedIn: 'root' })
export class SettingsService {
readonly theme = signal<AppSettings['theme']>(DEFAULT_SETTINGS.theme);
readonly accent = signal<AppSettings['accent']>(DEFAULT_SETTINGS.accent);
readonly speedUnit = signal<AppSettings['speedUnit']>(DEFAULT_SETTINGS.speedUnit);
readonly textSize = signal<AppSettings['textSize']>(DEFAULT_SETTINGS.textSize);
readonly transferMode = signal<AppSettings['transferMode']>(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(),
ui/src/app/tab-bar/tab-bar.ts
+32
View File
@@ -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;
</div>
</div>
<div class="mt-2.5 flex items-center justify-between gap-2">
<span class="text-xs text-muted-foreground">Accent</span>
<div class="flex items-center gap-1.5">
@for (tone of accents; track tone.value) {
<button
(click)="settings.setAccent(tone.value)"
[title]="tone.label"
class="size-4 rounded-full border border-foreground/15"
[style.background-color]="tone.swatch"
[class.ring-2]="settings.accent() === tone.value"
[class.ring-foreground]="settings.accent() === tone.value"
[class.ring-offset-1]="settings.accent() === tone.value"
[class.ring-offset-card]="settings.accent() === tone.value"
></button>
}
</div>
</div>
<div class="mt-2.5 flex items-center justify-between gap-2">
<span class="text-xs text-muted-foreground">Text size</span>
<div class="flex rounded-md border border-border p-0.5">
@@ -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;
ui/src/styles.css
+38
View File
@@ -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%;