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
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;