additional colors under admin control

backend/app/main.py

@@ -65,6 +65,10 @@ def _migrate_add_missing_columns(sync_conn):
         ("station_config", "color_success", sa.String(7), "#4a9e4f"),
         ("station_config", "color_danger", sa.String(7), "#c83030"),
         ("station_config", "color_info", sa.String(7), "#3a8abf"),
+        ("station_config", "color_white", sa.String(7), "#ffffff"),
+        ("station_config", "color_light", sa.String(7), "#f0ebe3"),
+        ("station_config", "color_medium", sa.String(7), "#8a8580"),
+        ("station_config", "color_black", sa.String(7), "#1a1816"),
     ]
 
     # Determine dialect

backend/app/models.py

@@ -120,6 +120,12 @@ class StationConfig(Base):
     color_danger = Column(String(7), nullable=False, default="#c83030")
     color_info = Column(String(7), nullable=False, default="#3a8abf")
 
+    # Neutral colors
+    color_white = Column(String(7), nullable=False, default="#ffffff")
+    color_light = Column(String(7), nullable=False, default="#f0ebe3")
+    color_medium = Column(String(7), nullable=False, default="#8a8580")
+    color_black = Column(String(7), nullable=False, default="#1a1816")
+
 
 class HistoryEntry(Base):
     __tablename__ = "history_entries"

backend/seed.py

@@ -231,6 +231,10 @@ STATION_CONFIG: dict = {
     "color_success": "#4a9e4f",
     "color_danger": "#c83030",
     "color_info": "#3a8abf",
+    "color_white": "#ffffff",
+    "color_light": "#f0ebe3",
+    "color_medium": "#8a8580",
+    "color_black": "#1a1816",
 }
 
 HISTORY_ENTRIES: list[dict] = [

src/app/admin/admin.component.ts

@@ -55,6 +55,10 @@ interface ThemeColorState {
   color_success: string;
   color_danger: string;
   color_info: string;
+  color_white: string;
+  color_light: string;
+  color_medium: string;
+  color_black: string;
   [key: string]: string;
 }
 
@@ -143,6 +147,10 @@ export class AdminComponent implements OnInit {
     color_success: '#4a9e4f',
     color_danger: '#c83030',
     color_info: '#3a8abf',
+    color_white: '#ffffff',
+    color_light: '#f0ebe3',
+    color_medium: '#8a8580',
+    color_black: '#1a1816',
   };
 
   showShowForm = false;
@@ -417,6 +425,10 @@ export class AdminComponent implements OnInit {
       color_success: config.color_success || this.themeDefaults.color_success,
       color_danger: config.color_danger || this.themeDefaults.color_danger,
       color_info: config.color_info || this.themeDefaults.color_info,
+      color_white: config.color_white || this.themeDefaults.color_white,
+      color_light: config.color_light || this.themeDefaults.color_light,
+      color_medium: config.color_medium || this.themeDefaults.color_medium,
+      color_black: config.color_black || this.themeDefaults.color_black,
     };
     this.themeSaveSuccess = '';
     this.themeSaveError = '';

src/app/interfaces/station-config.ts

@@ -37,4 +37,8 @@ export interface StationConfig {
   color_success: string;
   color_danger: string;
   color_info: string;
+  color_white: string;
+  color_light: string;
+  color_medium: string;
+  color_black: string;
 }

src/app/services/station-config.service.ts

@@ -46,6 +46,10 @@ const DEFAULT_CONFIG: StationConfig = {
   color_success: '#4a9e4f',
   color_danger: '#c83030',
   color_info: '#3a8abf',
+  color_white: '#ffffff',
+  color_light: '#f0ebe3',
+  color_medium: '#8a8580',
+  color_black: '#1a1816',
 };
 
 @Injectable({

src/app/services/theme.service.ts

@@ -17,6 +17,10 @@ const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
   { field: 'color_success', prop: '--color-success' },
   { field: 'color_danger', prop: '--color-danger' },
   { field: 'color_info', prop: '--color-info' },
+  { field: 'color_white', prop: '--color-white' },
+  { field: 'color_light', prop: '--color-light' },
+  { field: 'color_medium', prop: '--color-medium' },
+  { field: 'color_black', prop: '--color-black' },
 ];
 
 /** Build a gradient CSS value from three color stops. */

src/app/utils/color-harmony.ts

@@ -253,6 +253,10 @@ export const COLOR_ROLES: readonly ColorRole[] = [
   { field: 'color_success', label: 'Success', group: 'semantic' },
   { field: 'color_danger', label: 'Danger', group: 'semantic' },
   { field: 'color_info', label: 'Info', group: 'semantic' },
+  { field: 'color_white', label: 'White', group: 'neutral' },
+  { field: 'color_light', label: 'Light', group: 'neutral' },
+  { field: 'color_medium', label: 'Medium', group: 'neutral' },
+  { field: 'color_black', label: 'Black', group: 'neutral' },
 ] as const;
 
 /**