Adopt Oxide's color scheme and a square design
The palette now follows Oxide's design system (docs.oxide.computer): a cool neutral scale at hue 260 with almost no chroma, opaque strokes, and Oxide's green as the only accent. The accent-color option is gone: selection, the cursor row, focus rings and the active-panel line all read green. The file panel's header strip now steps toward the list, one shade per row (session strip, path bar, column headers), derived by color-mix so every theme, AMOLED included, follows on its own. Everything is square: every rounded utility and the radius tokens are gone, and checkboxes, radios, selects, number spinners and scrollbars are restyled to match (square scrollbars are always visible on macOS, the cost of styling them). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,6 @@ export class SettingsService {
|
||||
readonly locale = signal<AppSettings['locale']>(DEFAULT_SETTINGS.locale);
|
||||
readonly theme = signal<AppSettings['theme']>(DEFAULT_SETTINGS.theme);
|
||||
readonly darkTone = signal<AppSettings['darkTone']>(DEFAULT_SETTINGS.darkTone);
|
||||
readonly accent = signal<AppSettings['accent']>(DEFAULT_SETTINGS.accent);
|
||||
readonly columns = signal<ColumnKey[]>(DEFAULT_SETTINGS.columns);
|
||||
readonly speedUnit = signal<AppSettings['speedUnit']>(DEFAULT_SETTINGS.speedUnit);
|
||||
readonly uiScale = signal<number>(DEFAULT_SETTINGS.uiScale);
|
||||
@@ -37,8 +36,6 @@ export class SettingsService {
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', (e) => this.systemDark.set(e.matches));
|
||||
// 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) this.applyAll(res.settings);
|
||||
@@ -51,7 +48,6 @@ export class SettingsService {
|
||||
this.locale.set(settings.locale);
|
||||
this.theme.set(settings.theme);
|
||||
this.darkTone.set(settings.darkTone);
|
||||
this.accent.set(settings.accent);
|
||||
this.columns.set(settings.columns);
|
||||
this.speedUnit.set(settings.speedUnit);
|
||||
this.uiScale.set(settings.uiScale);
|
||||
@@ -62,7 +58,6 @@ export class SettingsService {
|
||||
this.editorApp.set(settings.editorApp);
|
||||
this.applyTheme();
|
||||
this.applyDarkTone();
|
||||
this.applyAccent();
|
||||
this.applyUiScale();
|
||||
this.applyLocale();
|
||||
}
|
||||
@@ -85,12 +80,6 @@ export class SettingsService {
|
||||
void this.persist();
|
||||
}
|
||||
|
||||
setAccent(tone: AppSettings['accent']): void {
|
||||
this.accent.set(tone);
|
||||
this.applyAccent();
|
||||
void this.persist();
|
||||
}
|
||||
|
||||
toggleColumn(key: ColumnKey): void {
|
||||
this.columns.update((list) =>
|
||||
list.includes(key) ? list.filter((c) => c !== key) : [...list, key],
|
||||
@@ -152,15 +141,6 @@ export class SettingsService {
|
||||
}
|
||||
}
|
||||
|
||||
private applyAccent(): void {
|
||||
const tone = this.accent();
|
||||
if (tone === 'graphite') {
|
||||
delete document.documentElement.dataset['accent'];
|
||||
} else {
|
||||
document.documentElement.dataset['accent'] = tone;
|
||||
}
|
||||
}
|
||||
|
||||
/** The whole interface scale is ONE declaration: every size in the app is
|
||||
* rem, so moving the root font-size moves the whole UI. 1 = the
|
||||
* browser-default 16px root; delete-when-default keeps the pristine state
|
||||
@@ -184,7 +164,6 @@ export class SettingsService {
|
||||
locale: this.locale(),
|
||||
theme: this.theme(),
|
||||
darkTone: this.darkTone(),
|
||||
accent: this.accent(),
|
||||
columns: this.columns(),
|
||||
speedUnit: this.speedUnit(),
|
||||
uiScale: this.uiScale(),
|
||||
|
||||
Reference in New Issue
Block a user