From 512be6ed3ddcf57ee39d2728a914a328227d68c7 Mon Sep 17 00:00:00 2001
From: FalloutFalcon <86381784+FalloutFalcon@users.noreply.github.com>
Date: Thu, 9 Jul 2026 09:50:44 -0500
Subject: [PATCH] Job Panels use a consistant color pallet (#96834)

## About The Pull Request
Converts all of these random css files to all pull from our department
datums turning this:
<img width="1920" height="1044" alt="image"
src="https://github.com/user-attachments/assets/966d77a3-7382-4ea6-859e-2a57508e28b3"
/>
into this:
<img width="1920" height="1034" alt="image"
src="https://github.com/user-attachments/assets/73fda9cd-8546-42d8-ba60-1135a12b2d6f"
/>

The only real note here is that that purple that prefs use is prob alot
better for sillicon then what the datum uses right now.
## Why It's Good For The Game
I think its horribly bad behavior to have like 10 loose spots you need
to add to if you are trying to add a new
feature/datum/department/whatever. There is a lot of code (mostly old
but some still linger) that does this and its horrible for
maintainability.
There is prob a few other aspects of departments i would like to rework
to tamper down on this but atomization is good.

This also creates a consistent color scheme for jobs instead of using
just like... The default values for "red" for instance. It should make
it easier to tell departments apart across the different menus.
## Changelog
:cl:
qol: All panels displaying jobs now use a consistent color pallet
/:cl:
---
 code/datums/records/manifest.dm               |  2 +-
 code/modules/admin/sql_ban_system.dm          |  4 +--
 .../client/preferences/middleware/jobs.dm     |  1 +
 code/modules/jobs/departments/departments.dm  | 15 +++-----
 html/admin/banpanel.css                       | 34 +------------------
 .../packages/tgui/interfaces/CrewManifest.jsx |  3 +-
 .../CharacterPreferences/JobsPage.tsx         |  3 +-
 .../tgui/interfaces/PreferencesMenu/types.ts  |  1 +
 .../tgui/styles/interfaces/CrewManifest.scss  | 20 ++---------
 .../styles/interfaces/PreferencesMenu.scss    | 23 ++-----------
 10 files changed, 21 insertions(+), 85 deletions(-)

diff --git a/code/datums/records/manifest.dm b/code/datums/records/manifest.dm
index de4fae2baef..3efdf85d5bb 100644
--- a/code/datums/records/manifest.dm
+++ b/code/datums/records/manifest.dm
@@ -217,7 +217,7 @@ GLOBAL_DATUM_INIT(manifest, /datum/manifest, new)
 			if(open_slots < 1)
 				continue
 			open += open_slots
-		positions[department.department_name] = list("exceptions" = exceptions, "open" = open)
+		positions[department.department_name] = list("exceptions" = exceptions, "open" = open, "color" = department.ui_color)
 
 	return list(
 		"manifest" = get_manifest(),
diff --git a/code/modules/admin/sql_ban_system.dm b/code/modules/admin/sql_ban_system.dm
index 81c00fc9367..14572a2e5d4 100644
--- a/code/modules/admin/sql_ban_system.dm
+++ b/code/modules/admin/sql_ban_system.dm
@@ -320,9 +320,9 @@
 		output += "<div class='row'>"
 
 		for(var/datum/job_department/department as anything in SSjob.joinable_departments)
-			var/label_class = department.label_class
+			var/label_class = department.get_label_class()
 			var/department_name = department.department_name
-			output += "<div class='column'><label class='rolegroup [label_class]'><input type='checkbox' name='[label_class]' class='hidden' onClick='header_click_all_checkboxes(this)'> \
+			output += "<div class='column'><label class='rolegroup [label_class]' style='background-color: [department.ui_color];'><input type='checkbox' name='[label_class]' class='hidden' onClick='header_click_all_checkboxes(this)'> \
 			[department_name]</label><div class='content'>"
 			for(var/datum/job/job_datum as anything in department.get_jobban_jobs())
 				if(break_counter > 0 && (break_counter % 3 == 0))
diff --git a/code/modules/client/preferences/middleware/jobs.dm b/code/modules/client/preferences/middleware/jobs.dm
index 392822eac61..0f185490ac8 100644
--- a/code/modules/client/preferences/middleware/jobs.dm
+++ b/code/modules/client/preferences/middleware/jobs.dm
@@ -49,6 +49,7 @@
 
 			departments[department_name] = list(
 				"head" = department_head_type && initial(department_head_type.title),
+				"color" = department_type.ui_color, // Prob shouldnt be here.
 			)
 
 		jobs[job.title] = list(
diff --git a/code/modules/jobs/departments/departments.dm b/code/modules/jobs/departments/departments.dm
index 6a2d7633603..dd504653b8f 100644
--- a/code/modules/jobs/departments/departments.dm
+++ b/code/modules/jobs/departments/departments.dm
@@ -10,8 +10,6 @@
 	var/department_experience_type = null
 	/// The order in which this department appears on menus, in relation to other departments.
 	var/display_order = 0
-	/// The header color to be displayed in the ban panel, classes defined in banpanel.css
-	var/label_class = "undefineddepartment"
 	/// The color used in TGUI or similar menus.
 	var/ui_color = "#9689db"
 	/// Job singleton datums associated to this department. Populated on job initialization.
@@ -54,6 +52,10 @@
 	var/static/list/nation_suffixes = list("stan", "topia", "land", "nia", "ca", "tova", "dor", "ador", "tia", "sia", "ano", "tica", "tide", "cis", "marea", "co", "taoide", "slavia", "stotzka")
 	return pick(nation_prefixes) + pick(nation_suffixes)
 
+/// Returns a simplifed spaceless string for use in stuff like CSS.
+/datum/job_department/proc/get_label_class()
+	return LOWER_TEXT(replacetext(department_name, " ", "_"))
+
 /// A special assistant only department, primarily for use by the preferences menu
 /datum/job_department/assistant
 	department_name = DEPARTMENT_ASSISTANT
@@ -70,6 +72,7 @@
 	department_name = DEPARTMENT_CAPTAIN
 	department_bitflags = DEPARTMENT_BITFLAG_CAPTAIN
 	department_head = /datum/job/captain
+	ui_color = "#6681a5"
 	primary_work_area = /area/station/command
 
 /datum/job_department/command
@@ -78,7 +81,6 @@
 	department_head = /datum/job/captain
 	department_experience_type = EXP_TYPE_COMMAND
 	display_order = 1
-	label_class = "command"
 	ui_color = "#6681a5"
 	primary_work_area = /area/station/command
 
@@ -88,7 +90,6 @@
 	department_head = /datum/job/head_of_security
 	department_experience_type = EXP_TYPE_SECURITY
 	display_order = 2
-	label_class = "security"
 	ui_color = "#d46a78"
 	nation_prefixes = list("Securi", "Beepski", "Shitcuri", "Red", "Stunba", "Flashbango", "Flasha", "Stanfordi")
 	primary_work_area = /area/station/security
@@ -111,7 +112,6 @@
 	department_head = /datum/job/chief_engineer
 	department_experience_type = EXP_TYPE_ENGINEERING
 	display_order = 3
-	label_class = "engineering"
 	ui_color = "#dfb567"
 	nation_prefixes = list("Atomo", "Engino", "Power", "Teleco")
 	primary_work_area = /area/station/engineering
@@ -129,7 +129,6 @@
 	department_head = /datum/job/chief_medical_officer
 	department_experience_type = EXP_TYPE_MEDICAL
 	display_order = 4
-	label_class = "medical"
 	ui_color = "#65b2bd"
 	nation_prefixes = list("Mede", "Healtha", "Recova", "Chemi", "Viro", "Psych")
 	primary_work_area = /area/station/medical
@@ -149,7 +148,6 @@
 	department_head = /datum/job/research_director
 	department_experience_type = EXP_TYPE_SCIENCE
 	display_order = 5
-	label_class = "science"
 	ui_color = "#c973c9"
 	nation_prefixes = list("Sci", "Griffa", "Geneti", "Explosi", "Mecha", "Xeno", "Nani", "Cyto")
 	primary_work_area = /area/station/science
@@ -169,7 +167,6 @@
 	department_head = /datum/job/quartermaster
 	department_experience_type = EXP_TYPE_SUPPLY
 	display_order = 6
-	label_class = "supply"
 	ui_color = "#cf9c6c"
 	nation_prefixes = list("Cargo", "Guna", "Suppli", "Mule", "Crate", "Ore", "Mini", "Shaf")
 	primary_work_area = /area/station/cargo
@@ -182,7 +179,6 @@
 	department_head = /datum/job/head_of_personnel
 	department_experience_type = EXP_TYPE_SERVICE
 	display_order = 7
-	label_class = "service"
 	ui_color = "#7cc46a"
 	nation_prefixes = list("Honka", "Boozo", "Fatu", "Danka", "Mimi", "Libra", "Jani", "Religi")
 	primary_work_area = /area/station/service
@@ -197,7 +193,6 @@
 	department_head = /datum/job/ai
 	department_experience_type = EXP_TYPE_SILICON
 	display_order = 8
-	label_class = "silicon"
 	ui_color = "#5dbda0"
 
 /datum/job_department/silicon/generate_nation_name()
diff --git a/html/admin/banpanel.css b/html/admin/banpanel.css
index 8ad4f648e7a..33deafb6619 100644
--- a/html/admin/banpanel.css
+++ b/html/admin/banpanel.css
@@ -29,42 +29,10 @@
   text-align: center;
 }
 
-.command {
-  background-color: #948f02;
-}
-
-.security {
-  background-color: #a30000;
-}
-
-.engineering {
-  background-color: #fb5613;
-}
-
-.medical {
-  background-color: #337296;
-}
-
-.science {
-  background-color: #993399;
-}
-
-.supply {
-  background-color: #a8732b;
-}
-
-.silicon {
-  background-color: #ff00ff;
-}
-
 .abstract {
   background-color: #708090;
 }
 
-.service {
-  background-color: #6eaa2c;
-}
-
 .ghostandotherroles {
   background-color: #5c00e6;
 }
@@ -73,6 +41,6 @@
   background-color: #6d3f40;
 }
 
-.undefineddepartment {
+.no_department {
   background-color: #111cf7;
 }
diff --git a/tgui/packages/tgui/interfaces/CrewManifest.jsx b/tgui/packages/tgui/interfaces/CrewManifest.jsx
index af09ba11875..376a4d2df77 100644
--- a/tgui/packages/tgui/interfaces/CrewManifest.jsx
+++ b/tgui/packages/tgui/interfaces/CrewManifest.jsx
@@ -23,8 +23,9 @@ export const CrewManifest = (props) => {
       <Window.Content scrollable>
         {Object.entries(manifest).map(([dept, crew]) => (
           <Section
-            className={`CrewManifest--${dept}`}
+            className={`CrewManifest--Section`}
             key={dept}
+            style={{'--department-color': positions[dept].color}}
             title={
               dept +
               (dept !== 'Misc'
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
index 9376b2b8f66..46433a30f40 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
@@ -284,12 +284,13 @@ function Department(props: DepartmentProps) {
   );
 
   return (
-    <Box>
+    <Box style={{'--department-color': department.color} as React.CSSProperties}>
       <Stack fill vertical g={0}>
         {jobsForDepartment.map(([name, job]) => {
           return (
             <JobRow
               className={classes([
+                "PreferencesMenu__Jobs__departments",
                 className,
                 name === department.head && 'head',
               ])}
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/types.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/types.ts
index 77098af0fed..89c648c9e44 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/types.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/types.ts
@@ -77,6 +77,7 @@ export type Perk = {
 
 export type Department = {
   head?: string;
+  color?: string;
 };
 
 export type Job = {
diff --git a/tgui/packages/tgui/styles/interfaces/CrewManifest.scss b/tgui/packages/tgui/styles/interfaces/CrewManifest.scss
index 85895c60af1..e2fb3935792 100644
--- a/tgui/packages/tgui/styles/interfaces/CrewManifest.scss
+++ b/tgui/packages/tgui/styles/interfaces/CrewManifest.scss
@@ -1,28 +1,14 @@
-$department_map: (
-  'Cargo': var(--color-brown),
-  'Command': var(--color-yellow),
-  'Security': var(--color-red),
-  'Engineering': var(--color-orange),
-  'Medical': var(--color-teal),
-  'Misc': var(--color-white),
-  'Science': var(--color-purple),
-  'Service': var(--color-green),
-  'Silicon': var(--color-pink),
-);
-
 .CrewManifest {
-  @each $department-name, $color-value in $department_map {
-    &--#{$department-name} {
+    &--Section {
       .Section {
         &__title {
-          border-color: $color-value;
+          border-color: var(--department-color);
         }
         &__titleText {
-          color: $color-value;
+          color: var(--department-color);
         }
       }
     }
-  }
 
   &__Cell {
     padding: var(--space-s) 0;
diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
index cff7b09fbe8..8e07a0355fc 100644
--- a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
+++ b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
@@ -3,19 +3,6 @@
 @use '../colors.scss';
 @use '../base.scss';
 
-$department_map: (
-  'Assistant': var(--color-gray),
-  'Captain': colors.fg(var(--color-blue)),
-  'Cargo': var(--color-brown),
-  'Command': var(--color-yellow),
-  'Security': var(--color-red),
-  'Engineering': hsl(from var(--color-orange) h s calc(l + 7.5)),
-  'Medical': var(--color-teal),
-  'Science': colors.fg(var(--color-purple)),
-  'Service': var(--color-green),
-  'Silicon': var(--color-pink),
-);
-
 .ChoicedSelection {
   padding: var(--space-m);
   background-color: var(--color-base);
@@ -126,18 +113,16 @@ $department_map: (
     }
 
     &__departments {
-      @each $department-name, $color-value in $department_map {
-        &--#{$department-name} {
           &.head {
-            background: $color-value;
+            background: colors.bg(var(--department-color));
 
             .job-name {
               font-weight: bold;
             }
           }
 
-          background: colors.fg($color-value);
-          border: var(--border-thickness-small) outset colors.fg($color-value);
+          background: var(--department-color);
+          border: var(--border-thickness-small) outset var(--department-color);
           color: black;
 
           > * {
@@ -150,7 +135,6 @@ $department_map: (
             background: hsla(0, 0%, 0%, 0.2);
             height: 100%;
           }
-        }
 
         &--Captain {
           border: var(--border-thickness-medium)
@@ -167,7 +151,6 @@ $department_map: (
             font-size: 17px;
           }
         }
-      }
 
       &__priority {
         border: var(--border-thickness-tiny) solid hsla(0, 0%, 0%, 0.3);