TG Chat color standardisation (#9908)

* chat color standize * more correct grammar lol * moved * forgot it
BeeStation · Oct 5, 2023 · 3bbd88c · 3bbd88c
1 parent 931d715
commit 3bbd88c
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 16 deletions.
diff --git a/code/__DEFINES/colors.dm b/code/__DEFINES/colors.dm
@@ -13,6 +13,10 @@
 /// Color inherent to the atom (e.g. blob color)
 #define FIXED_COLOUR_PRIORITY 4
 
+
+// NOTE: AVOID USING THIS SUCH AS "<font color=COLOR_MACRO>".
+// It's not a correct way to use. All colors look different based on your chat background theme.
+// You should check "chat-light-theme.scss" and "chat-dark-theme.scss" if you want a colored chat
 #define COLOR_INPUT_DISABLED "#F0F0F0"
 #define COLOR_INPUT_ENABLED "#D3B5B5"
 
@@ -84,16 +88,17 @@
 #define COLOR_ASSEMBLY_BLUE    "#38559E"
 #define COLOR_ASSEMBLY_PURPLE  "#6F6192"
 
+// check "chat-light-theme.scss" and "chat-dark-theme.scss"
 GLOBAL_LIST_INIT(color_list_blood_brothers, shuffle(list(
-	"#FF5050",\
-	"#D977FD",\
-	"#422ED8",\
-	"#2D87A1",\
-	"#3ED8FD",\
-	"#0EF5CE",\
-	"#0DF447",\
-	"#D6B20C",\
-	"#FF902A")))
+	"cfc_red",\
+	"cfc_purple",\
+	"cfc_navy",\
+	"cfc_darkbluesky",\
+	"cfc_bluesky",\
+	"cfc_cyan",\
+	"cfc_lime",\
+	"cfc_orange",\
+	"cfc_redorange")))
 
 // Color Filters
 /// Icon filter that creates ambient occlusion

diff --git a/code/game/objects/items/implants/implant_bb.dm b/code/game/objects/items/implants/implant_bb.dm
@@ -4,7 +4,7 @@
 	icon = 'icons/obj/radio.dmi'
 	icon_state = "headset"
 	/// BB implant colour is different per team, and is set by brother antag datum
-	var/implant_colour = "#ff0000"
+	var/span_implant_colour = "cfc_redpurple"
 	var/list/linked_implants // All other implants that this communicates to
 
 /obj/item/implant/bloodbrother/Initialize(mapload)
@@ -22,8 +22,8 @@
 			return
 		input = imp_in.treat_message_min(input)
 
-		var/my_message = "<font color=\"[implant_colour]\"><b><i>[imp_in.mind.name]:</i></b></font> [input]" //add sender, color source with syndie color
-		var/ghost_message = "<font color=\"[implant_colour]\"><b><i>[imp_in.mind.name] -> Blood Brothers:</i></b></font> [input]"
+		var/my_message = "<span class='[span_implant_colour]'><b><i>[imp_in.mind.name]:</i></b></span> [input]" //add sender, color source with syndie color
+		var/ghost_message = "<span class='[span_implant_colour]'><b><i>[imp_in.mind.name] -> Blood Brothers:</i></b></span> [input]"
 		// Reminder: putting a font color directly is bad because color has different readability by your chat theme white/dark
 		// This should be eventually changed to a form of `<span class="red">`, so that a color has a good readability for a chat theme.
 

diff --git a/code/modules/antagonists/brother/brother.dm b/code/modules/antagonists/brother/brother.dm
@@ -75,10 +75,10 @@
 	var/obj/item/implant/bloodbrother/I = new /obj/item/implant/bloodbrother()
 	I.implant(owner.current, null, TRUE, TRUE)
 	if(team.team_id <= length(GLOB.color_list_blood_brothers))
-		I.implant_colour = GLOB.color_list_blood_brothers[team.team_id]
+		I.span_implant_colour = GLOB.color_list_blood_brothers[team.team_id]
 	else
-		I.implant_colour = "#ff0000"
-		stack_trace("Blood brother teams exist more than 9 teams, and colour preset is ran out")
+		I.span_implant_colour = "cfc_redpurple"
+		stack_trace("Blood brother teams exist more than [length(GLOB.color_list_blood_brothers)] teams, and colour preset is ran out")
 	for(var/datum/mind/M in team.members) // Link the implants of all team members
 		var/obj/item/implant/bloodbrother/T = locate() in M.current.implants
 		I.link_implant(T)

diff --git a/code/modules/mob/living/simple_animal/hostile/space_dragon.dm b/code/modules/mob/living/simple_animal/hostile/space_dragon.dm
@@ -419,7 +419,7 @@
 	message = treat_message_min(message)
 	log_talk(message, LOG_SAY)
 	var/message_a = say_quote(message)
-	var/rendered = "<font color=\"#44aaff\">Carp Wavespeak <span class='name'>[shown_name]</span> <span class='message'>[message_a]</span></font>"
+	var/rendered = "<span class='carpspeak'>Carp Wavespeak <span class='name'>[shown_name]</span> <span class='message'>[message_a]</span></span>"
 	if(istype(src, /mob/living/simple_animal/hostile/space_dragon))
 		rendered = "<span class='big'>[rendered]</span>"
 	for(var/mob/S in GLOB.player_list)

diff --git a/tgui/packages/tgui-panel/styles/chat-format/chat-dark-theme.scss b/tgui/packages/tgui-panel/styles/chat-format/chat-dark-theme.scss
@@ -0,0 +1,57 @@
+/*****************************************
+*
+* cf means "chat format"
+* cfc means "chat format color" which means only dedicated for color
+*
+******************************************/
+
+// Standard colors
+// color names are not really accurate due to theme base color visibility. get the feeling.
+.cfc_red {
+  color: #e21919;
+}
+.cfc_redorange {
+  color: #e04a0e;
+}
+.cfc_orange {
+  color: #dd8716;
+}
+.cfc_yellow {
+  color: #e2df10;
+}
+.cfc_lime {
+  color: #86e608;
+}
+.cfc_green {
+  color: #0edb07;
+}
+.cfc_cyan {
+  color: #07dbad;
+}
+.cfc_bluesky {
+  color: #07aadb;
+}
+.cfc_darkbluesky {
+  color: #2d87a1;
+}
+.cfc_navy {
+  color: #075cdb;
+}
+.cfc_blue {
+  color: #0b07db;
+}
+.cfc_indigo {
+  color: #4707db;
+}
+.cfc_purple {
+  color: #900be9;
+}
+.cfc_violet {
+  color: #c90be2;
+}
+.cfc_magenta {
+  color: #d402a7;
+}
+.cfc_redpurple {
+  color: #db075f;
+}
diff --git a/tgui/packages/tgui-panel/styles/chat-format/chat-light-theme.scss b/tgui/packages/tgui-panel/styles/chat-format/chat-light-theme.scss
@@ -0,0 +1,57 @@
+/*****************************************
+*
+* cf means "chat format"
+* cfc means "chat format color" which means only dedicated for color
+*
+******************************************/
+
+// Standard colors
+// color names are not really accurate due to theme base color visibility. get the feeling.
+.cfc_red {
+  color: #d60f0f;
+}
+.cfc_redorange {
+  color: #e4480a;
+}
+.cfc_orange {
+  color: #db7e05;
+}
+.cfc_yellow {
+  color: #d1ce06;
+}
+.cfc_lime {
+  color: #6fb611;
+}
+.cfc_green {
+  color: #15b910;
+}
+.cfc_cyan {
+  color: #0bc099;
+}
+.cfc_bluesky {
+  color: #0b8fb8;
+}
+.cfc_darkbluesky {
+  color: #2b7386;
+}
+.cfc_navy {
+  color: #0f52b8;
+}
+.cfc_blue {
+  color: #0d0ac5;
+}
+.cfc_indigo {
+  color: #410eb9;
+}
+.cfc_purple {
+  color: #750eb9;
+}
+.cfc_violet {
+  color: #af10c4;
+}
+.cfc_magenta {
+  color: #bb0a95;
+}
+.cfc_redpurple {
+  color: #b90c54;
+}
diff --git a/tgui/packages/tgui-panel/styles/goon/chat-dark.scss b/tgui/packages/tgui-panel/styles/goon/chat-dark.scss
@@ -1329,6 +1329,9 @@ em {
 .slimemobsay {
   color: #00ced1;
 }
+.carpspeak {
+  color: #44aaff;
+}
 
 @keyframes rainbowtext {
   0% {

diff --git a/tgui/packages/tgui-panel/styles/goon/chat-light.scss b/tgui/packages/tgui-panel/styles/goon/chat-light.scss
@@ -1334,6 +1334,9 @@ h2.alert {
 .slimemobsay {
   color: #00ced1;
 }
+.carpspeak {
+  color: #2e89d3;
+}
 
 @keyframes rainbowtext {
   0% {

diff --git a/tgui/packages/tgui-panel/styles/main.scss b/tgui/packages/tgui-panel/styles/main.scss
@@ -58,3 +58,6 @@
 
 // Goonchat styles
 @include meta.load-css('./goon/chat-dark.scss');
+
+// Chat formats (color, size, font, etc)
+@include meta.load-css('./chat-format/chat-dark-theme.scss');
diff --git a/tgui/packages/tgui-panel/styles/themes/light.scss b/tgui/packages/tgui-panel/styles/themes/light.scss
@@ -72,6 +72,9 @@
   // Goonchat styles
   @include meta.load-css('../goon/chat-light.scss');
 
+  // Chat formats (color, size, font, etc)
+  @include meta.load-css('../chat-format/chat-light-theme.scss');
+
   //Stat styles
   @include meta.load-css('../components/Stat.scss', $with: ('border-color': #000000));
 }