Adds more traitor backstories (#21937)

* yeah yeah * update cybersun * so much change haha * yea yea * adds * theemes * no cat face done * updates more scss * update stuff yeah * this works * udpate descrtiptions * bye cat background * love is love
2025-02-26 09:04:50 +00:00 · 2024-04-29 15:55:00 -04:00
parent 1a8099bc24
commit ce2b8a878f
14 changed files with 754 additions and 53 deletions
--- a/code/__DEFINES/traitor.dm
+++ b/code/__DEFINES/traitor.dm
@@ -1,6 +1,13 @@
 #define TRAITOR_FACTION_BLACK_MARKET "black_market"
 #define TRAITOR_FACTION_SYNDICATE "syndicate"
 #define TRAITOR_FACTION_INDEPENDENT "independent"
+#define TRAITOR_FACTION_DONK "donk_co"
+#define TRAITOR_FACTION_WAFFLE "waffle_co"
+#define TRAITOR_FACTION_CYBERSUN "cybersun_industries"
+#define TRAITOR_FACTION_VAHLEN "vahlen_pharmaceuticals"
+#define TRAITOR_FACTION_GORLEX "gorlex marauders"
+#define TRAITOR_FACTION_SELF "self"
+#define TRAITOR_FACTION_BOSYN "bosyn_powell_front"

 /// If this backstory involves being forced into the job
 #define TRAITOR_MOTIVATION_FORCED "Forced Into It"
--- a/code/__DEFINES/{yogs_defines}/flavor_misc.dm
+++ b/code/__DEFINES/{yogs_defines}/flavor_misc.dm
@@ -8,6 +8,12 @@
 #define PDA_THEME_SPOOKY "ntos_spooky"
 #define PDA_THEME_TERMINAL "ntos_terminal"
 #define PDA_THEME_SYNDICATE "syndicate"
+#define PDA_THEME_DONK "donk_co"
+#define PDA_THEME_WAFFLE "waffle_co"
+#define PDA_THEME_CYBER "cyber_sun"
+#define PDA_THEME_VAHLEN "vahlen"
+#define PDA_THEME_GORLEX "gorlex"
+#define PDA_THEME_BOSYN "bosyn"

 #define PDA_THEME_TITLE_NTOS "ntOS"
 #define PDA_THEME_TITLE_DARK_MODE "Dark Mode"
@@ -18,6 +24,12 @@
 #define PDA_THEME_TITLE_SPOOKY "Eldritch"
 #define PDA_THEME_TITLE_TERMINAL "Terminal"
 #define PDA_THEME_TITLE_SYNDICATE "Syndicate"
+#define PDA_THEME_TITLE_DONK "Donk Co."
+#define PDA_THEME_TITLE_WAFFLE "Waffle Co."
+#define PDA_THEME_TITLE_CYBER "Cyber Sun"
+#define PDA_THEME_TITLE_VAHLEN "Vahlen"
+#define PDA_THEME_TITLE_GORLEX "Gorlex"
+#define PDA_THEME_TITLE_BOSYN "Bosyn"

 GLOBAL_LIST_INIT(pda_themes, list(
 	PDA_THEME_TITLE_NTOS = PDA_THEME_NTOS, 
--- a/tgui/packages/tgui/index.js
+++ b/tgui/packages/tgui/index.js
@@ -25,6 +25,12 @@ import './styles/themes/paper.scss';
 import './styles/themes/retro.scss';
 import './styles/themes/syndicate.scss';
 import './styles/themes/wizard.scss';
+import './styles/themes/donk_co.scss';
+import './styles/themes/waffle_co.scss';
+import './styles/themes/cyber_sun.scss';
+import './styles/themes/vahlen.scss';
+import './styles/themes/gorlex.scss';
+import './styles/themes/bosyn.scss';

 import { perf } from 'common/perf';
 import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
--- a/tgui/packages/tgui/interfaces/TraitorBackstoryMenu.js
+++ b/tgui/packages/tgui/interfaces/TraitorBackstoryMenu.js
@@ -5,12 +5,12 @@ import { AntagInfoTraitorContent } from './AntagInfoTraitor';

 export const TraitorBackstoryMenu = (_, context) => {
  const { data } = useBackend(context);
-  const { all_backstories = {}, all_factions = {}, backstory, faction } = data;
+  const { all_backstories = {}, all_factions = {}, backstory, faction, faction_theme } = data;
  let has_backstory = all_backstories[backstory];
  let has_faction = all_factions[faction];
  let [ui_phase, set_ui_phase] = useLocalState(context, 'traitor_ui_phase', has_faction ? 2 : 0);
  let [tabIndex, setTabIndex] = useLocalState(context, 'traitor_selected_tab', 1);
-  let [selected_faction, set_selected_faction_backend] = useLocalState(context, 'traitor_selected_faction', 'syndicate');
+  let [selected_faction, set_selected_faction_backend] = useLocalState(context, 'traitor_selected_faction', 'independent');
  let [selected_backstory, set_selected_backstory] = useLocalState(context, 'traitor_selected_backstory', null);
  const set_selected_faction = (faction) => {
    set_selected_faction_backend(faction);
@@ -33,7 +33,7 @@ export const TraitorBackstoryMenu = (_, context) => {
  let info_ui = ui_phase === 2 && has_faction;
  return (
    <Window
-      theme={faction === 'syndicate' ? 'syndicate' : 'neutral'}
+      theme={faction_theme}
      width={650}
      height={info_ui ? 650 : 500}
      title={windowTitle}>
--- a/tgui/packages/tgui/styles/themes/bosyn.scss
+++ b/tgui/packages/tgui/styles/themes/bosyn.scss
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+ @use 'sass:color';
+ @use 'sass:meta';
+
+ @use '../colors.scss' with (
+   $primary: rgba(180,180,180),
+   $label: rgba(180,180,180),
+   $good: rgba(180,180,180),
+   // $fg-map-keys: (),
+   // $bg-map-keys: (),
+ );
+ @use '../base.scss' with (
+   $color-bg: rgba(180,180,180),
+   $color-bg-grad-spread: 0%,
+ );
+
+ .theme-bosyn {
+   // Atomic classes
+   @include meta.load-css('../atomic/color.scss');
+
+   // Components
+   @include meta.load-css('../components/Button.scss', $with: (
+     'color-default': rgb(82, 8, 23),
+     'color-disabled': rgba(180,180,180),
+     'color-selected': rgba(110, 10, 30),
+   ));
+   @include meta.load-css('../components/Input.scss', $with: (
+     'border-color': rgba(180,180,180),
+   ));
+   @include meta.load-css('../components/ProgressBar.scss', $with: (
+     'background-color': rgb(82, 8, 23),
+     'color-default-fill': rgba(110, 10, 30),
+   ));
+   @include meta.load-css('../components/Modal.scss');
+   @include meta.load-css('../components/Section.scss');
+
+   // Layouts
+   @include meta.load-css('../layouts/Layout.scss');
+   @include meta.load-css('../layouts/Window.scss');
+   @include meta.load-css('../layouts/TitleBar.scss', $with: (
+     'background-color': rgb(82, 8, 23),
+   ));
+
+   .Layout__content {
+     //background-image: none;
+     background-image: repeating-linear-gradient(
+          0deg,
+          rgba(black, 0.15),
+          rgba(black, 0.15) 1px,
+          transparent 2.5px,
+          transparent 5px
+        ),
+        radial-gradient( rgb(82, 8, 23), black 120%);
+     background-size: 100%, 100%;
+     background-position: center, center;
+   }
+
+   .Button {
+     font:  Inconsolata;
+     color:rgba(180,180,180);
+     text-shadow: 0 0 2px rgba(180,180,180);
+   }
+   .Button:hover {
+     background-color:rgba(180,180,180),;
+     transition: 0.1s;
+ }
+ .Button--selected{
+   color: rgba(180,180,180),;
+ }
+
+
+   body {
+     //background-color: black;
+     color: white;
+     font: 1.3rem Inconsolata;
+     text-shadow: 0 0 2px rgba(180,180,180),;
+
+     //font: bold 12px Arial, 'Helvetica Neue', Helvetica, sans-serif;
+   }
+   .Section {
+     color:rgba(180,180,180),
+   }
+   .Tab {
+     color: rgba(180,180,180),;
+   }
+   .Tab--selected {
+     color: rgba(180,180,180),;
+     border: 2px solid rgba(180,180,180),;
+     background-color: rgb(82, 8, 23);
+   }
+   ::selection {
+       background: #0080FF;
+     text-shadow: none;
+   }
+   .Table{
+     text-shadow: 0 0 2px rgba(180,180,180)
+   }
+   .Flex{
+     text-shadow: 0 0 2px rgba(180,180,180)
+   }
+ }
--- a/tgui/packages/tgui/styles/themes/cyber_sun.scss
+++ b/tgui/packages/tgui/styles/themes/cyber_sun.scss
@@ -0,0 +1,71 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../colors.scss' with (
+  $primary: #3f021a,
+  $good: #e62626,
+  $bad: #030303,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+@use '../base.scss' with (
+  $color-bg: #6e3506,
+  $color-bg-grad-spread: 25%,
+);
+
+
+.theme-cyber_sun {
+  // Atomic classes
+  @include meta.load-css(
+    '../atomic/color.scss',
+  );
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #7e0322,
+      'color-disabled': #363636,
+      'color-selected': #610a0a,
+      'color-caution': #1416a3,
+      'color-danger': #5c1e80,
+    )
+  );
+  @include meta.load-css(
+    '../components/Dimmer.scss',
+    $with: ('background-dimness': 0.45)
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #473a37)
+  );
+  @include meta.load-css('../components/Modal.scss');
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #91400a)
+  );
+  @include meta.load-css('../components/NumberInput.scss');
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('../components/Table.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #000000)
+  );
+  @include meta.load-css('../components/ProgressBar.scss', $with: (
+    'color-default-fill': rgba(197, 104, 17, 0.75),
+    'background-color': rgba(34, 1, 1, 0.5),
+  ));
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #ff5e00)
+  );
+
+  .Layout__content {
+    background-image: url('../../assets/bg-spookycomp-compressed.svg');
+  }
+}
--- a/tgui/packages/tgui/styles/themes/donk_co.scss
+++ b/tgui/packages/tgui/styles/themes/donk_co.scss
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+ @use 'sass:color';
+ @use 'sass:meta';
+
+ @use '../colors.scss' with (
+   $primary: #397439,
+   $fg-map-keys: (),
+   $bg-map-keys: (),
+ );
+ @use '../base.scss' with (
+   $color-bg: #550202,
+   $color-bg-grad-spread: 6%,
+ );
+
+ .theme-donk_co {
+   // Atomic classes
+   @include meta.load-css('../atomic/color.scss');
+
+   // Components
+   @include meta.load-css('../components/Button.scss', $with: (
+     'color-default': colors.$primary,
+     'color-disabled': #363636,
+     'color-selected': #9d0808,
+     'color-caution': #be6209,
+     'color-danger': #9a9d00,
+   ));
+   @include meta.load-css('../components/Input.scss', $with: (
+     'border-color': #87ce87,
+   ));
+   @include meta.load-css('../components/NoticeBox.scss', $with: (
+     'background-color': #910101,
+   ));
+   @include meta.load-css('../components/NumberInput.scss', $with: (
+     'border-color': #87ce87,
+   ));
+   @include meta.load-css('../components/ProgressBar.scss', $with: (
+     'background-color': rgba(0, 0, 0, 0.5),
+   ));
+   @include meta.load-css('../components/Section.scss');
+   @include meta.load-css('../components/Tooltip.scss', $with: (
+     'background-color': #4a0202,
+   ));
+
+   // Layouts
+   @include meta.load-css('../layouts/Layout.scss');
+   @include meta.load-css('../layouts/Window.scss');
+   @include meta.load-css('../layouts/TitleBar.scss', $with: (
+     'background-color': #910101,
+   ));
+
+   .Layout__content {
+     background-image: url('../../assets/bg-syndicate.svg');
+   }
+ }
--- a/tgui/packages/tgui/styles/themes/gorlex.scss
+++ b/tgui/packages/tgui/styles/themes/gorlex.scss
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+//@use 'sass:map';
+
+//palette
+$cyan: #5EDBA5;
+$pink: #ed12f5;
+$orange: #ff9900;
+$purple: #463191;
+
+$light-gray: #c3c3c3;
+$dark-gray: #858585;
+$scrollbar-color-multiplier: 0.5;
+
+@use '../colors.scss' with (
+  $primary: black,
+  $label: #78866b,
+  $good: #78866b,
+
+  $bad: #494e49,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+
+@use '../base.scss' with (
+  $color-bg: #78866b,
+  $color-bg-grad-spread: 10%,
+  //$border-radius: 0,
+);
+
+
+.theme-gorlex {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss', $with: (
+  ));
+
+  // Components
+  @include meta.load-css('../components/Button.scss', $with: (
+    'color-default': #78866b,
+    'color-transparent-text': rgba(227, 240, 255, 0.75),
+    'color-disabled': #363636,
+    'color-selected': #465899,
+    'color-caution': #494e49,
+  ));
+  @include meta.load-css('../components/ProgressBar.scss', $with: (
+    'color-default-fill': #78866b,
+  ));
+  @include meta.load-css('../components/Section.scss', $with: (
+    'background-color': #494e49,
+  ));
+  @include meta.load-css('../components/Tooltip.scss', $with: (
+    'background-color': #78866b,
+  ));
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css('../layouts/TitleBar.scss', $with: (
+    'background-color': #78866b,
+  ));
+
+  .Section {
+    color: black;
+    outline: base.em(2px) inset #494e49;
+  }
+  .Button {
+    color: white;
+    background-color: #78866b;
+  }
+
+  .ProgressBar {
+    color: black;
+  }
+
+  // .Layout__content {
+  //   background-image:  url('../../assets/bg-cat.svg');
+  //   background-size: 100%;
+  //   background-repeat: no-repeat;
+  // }
+  .Layout,
+  .Layout * {
+    // Fancy scrollbar
+    scrollbar-base-color: color.scale(
+      #454255,
+      $lightness: -25% * $scrollbar-color-multiplier);
+    scrollbar-face-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+
+    scrollbar-3dlight-color: color.scale(
+      #78866b,
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-highlight-color: color.scale(
+      #78866b,
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-track-color: color.scale(
+      #78866b,
+      $lightness: -25% * $scrollbar-color-multiplier);
+      scrollbar-arrow-color: color.scale(
+      #78866b,
+      $lightness: 50% * $scrollbar-color-multiplier);
+    scrollbar-shadow-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+  }
+  .Tab {
+    color: white;
+    background-color: #78866b;
+  }
+  .Tab--selected {
+    color: yellow;
+    background-color: #78866b;
+  }
+  .Box {
+    outline: base.em(3px) outset #c0c0c0
+  }
+  .Tooltip {
+    color: black;
+  }
+  .Input {
+    background-color: white;
+    outline: base.em(2px) inset rgb(255, 132, 153);
+  }
+  .NtosWindow__header {
+    background-color: #454255;
+  }
+  .Flex {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.0);
+  }
+
+}
--- a/tgui/packages/tgui/styles/themes/vahlen.scss
+++ b/tgui/packages/tgui/styles/themes/vahlen.scss
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+//@use 'sass:map';
+
+//palette
+$cyan: #5EDBA5;
+$pink: #ed12f5;
+$orange: #ff9900;
+$purple: #463191;
+
+$light-gray: #c3c3c3;
+$dark-gray: #858585;
+$scrollbar-color-multiplier: 0.5;
+
+@use '../colors.scss' with (
+  $primary: black,
+  $label: rgb(255, 132, 153),
+  $good: rgb(241, 238, 239),
+
+  $bad: red,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+
+@use '../base.scss' with (
+  $color-bg: rgb(218, 212, 212),
+  $color-bg-grad-spread: 12%,
+  //$border-radius: 0,
+);
+
+
+.theme-vahlen {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss', $with: (
+  ));
+
+  // Components
+  @include meta.load-css('../components/Button.scss', $with: (
+    'color-default': #0047AB,
+    'color-transparent-text': rgba(227, 240, 255, 0.75),
+    'color-disabled': #363636,
+    'color-selected': #465899,
+    'color-caution': #be6209,
+  ));
+  @include meta.load-css('../components/ProgressBar.scss', $with: (
+    'color-default-fill': #0047AB,
+  ));
+  @include meta.load-css('../components/Section.scss', $with: (
+    'background-color': rgba(29, 51, 175, 0.75),
+  ));
+  @include meta.load-css('../components/Tooltip.scss', $with: (
+    'background-color': rgba(29, 51, 175, 0.75),
+  ));
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css('../layouts/TitleBar.scss', $with: (
+    'background-color': rgb(29, 51, 175),
+  ));
+
+  .Section {
+    color: black;
+    outline: base.em(2px) inset rgb(29, 51, 175);
+  }
+  .Button {
+    color: rgb(29, 51, 175);
+    background-color: rgb(255, 255, 255);
+  }
+
+  .ProgressBar {
+    color: black;
+  }
+
+ .Layout__content {
+  background-image: url('../../assets/bg-syndicate.svg');
+}
+  .Layout,
+  .Layout * {
+    // Fancy scrollbar
+    scrollbar-base-color: color.scale(
+      #454255,
+      $lightness: -25% * $scrollbar-color-multiplier);
+    scrollbar-face-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+
+    scrollbar-3dlight-color: color.scale(
+      rgba(29, 51, 175, 0.75),
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-highlight-color: color.scale(
+      rgba(29, 51, 175, 0.75),
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-track-color: color.scale(
+      rgba(29, 51, 175, 0.75),
+      $lightness: -25% * $scrollbar-color-multiplier);
+      scrollbar-arrow-color: color.scale(
+      rgba(29, 51, 175, 0.75),
+      $lightness: 50% * $scrollbar-color-multiplier);
+    scrollbar-shadow-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+  }
+  .Tab {
+    color: rgba(29, 51, 175);
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .Tab--selected {
+    color: black;
+    background-color: rgba(29, 51, 175, 0.75);
+  }
+  .Box {
+    outline: base.em(3px) outset #c0c0c0
+  }
+  .Tooltip {
+    color: black;
+  }
+  .Input {
+    background-color: white;
+    outline: base.em(2px) inset rgb(29, 51, 175);
+  }
+  .NtosWindow__header {
+    background-color: #454255;
+  }
+  .Flex {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.0);
+  }
+
+}
--- a/tgui/packages/tgui/styles/themes/waffle_co.scss
+++ b/tgui/packages/tgui/styles/themes/waffle_co.scss
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+//@use 'sass:map';
+
+//palette
+$cyan: #5EDBA5;
+$pink: #ed12f5;
+$orange: #ff9900;
+$purple: #463191;
+
+$light-gray: #c3c3c3;
+$dark-gray: #858585;
+$scrollbar-color-multiplier: 0.5;
+
+@use '../colors.scss' with (
+  $primary: black,
+  $label: rgb(255, 132, 153),
+  $good: pink,
+
+  $bad: red,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+
+@use '../base.scss' with (
+  $color-bg: rgba(194, 184, 46, 0.555),
+  $color-bg-grad-spread: 12%,
+  //$border-radius: 0,
+);
+
+
+.theme-waffle_co {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss', $with: (
+  ));
+
+  // Components
+  @include meta.load-css('../components/Button.scss', $with: (
+    'color-default': pink,
+    'color-transparent-text': rgba(227, 240, 255, 0.75),
+    'color-disabled': #363636,
+    'color-selected': #465899,
+    'color-caution': rgba(194, 184, 46, 0.555),
+  ));
+  @include meta.load-css('../components/ProgressBar.scss', $with: (
+    'color-default-fill': rgb(255, 132, 153, 0.75),
+  ));
+  @include meta.load-css('../components/Section.scss', $with: (
+    'background-color': rgba(255, 132, 153, 0.74),
+  ));
+  @include meta.load-css('../components/Tooltip.scss', $with: (
+    'background-color': rgba(255, 251, 0, 0.75),
+  ));
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css('../layouts/TitleBar.scss', $with: (
+    'background-color': rgb(255, 132, 153, 0.75),
+  ));
+
+  .Section {
+    color: black;
+    outline: base.em(2px) inset rgb(255, 132, 153);
+  }
+  .Button {
+    color: rgb(255, 132, 153);
+    background-color: rgb(255, 255, 255);
+  }
+
+  .ProgressBar {
+    color: black;
+  }
+
+  // .Layout__content {
+  //   background-image:  url('../../assets/bg-cat.svg');
+  //   background-size: 100%;
+  //   background-repeat: no-repeat;
+  // }
+  .Layout,
+  .Layout * {
+    // Fancy scrollbar
+    scrollbar-base-color: color.scale(
+      #454255,
+      $lightness: -25% * $scrollbar-color-multiplier);
+    scrollbar-face-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+
+    scrollbar-3dlight-color: color.scale(
+      rgba(194, 184, 46, 0.555),
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-highlight-color: color.scale(
+      rgba(194, 184, 46, 0.555),
+      $lightness: 0% * $scrollbar-color-multiplier);
+    scrollbar-track-color: color.scale(
+      rgba(194, 184, 46, 0.555),
+      $lightness: -25% * $scrollbar-color-multiplier);
+      scrollbar-arrow-color: color.scale(
+      pink,
+      $lightness: 50% * $scrollbar-color-multiplier);
+    scrollbar-shadow-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier);
+  }
+  .Tab {
+    color: rgb(255, 132, 153);
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .Tab--selected {
+    color: black;
+    background-color: rgb(255, 132, 153);
+  }
+  .Box {
+    outline: base.em(3px) outset #c0c0c0
+  }
+  .Tooltip {
+    color: black;
+  }
+  .Input {
+    background-color: white;
+    outline: base.em(2px) inset rgb(255, 132, 153);
+  }
+  .NtosWindow__header {
+    background-color: #454255;
+  }
+  .Flex {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.0);
+  }
+  .BlockQuote {
+    color: white;
+
+  }
+
+}
--- a/yogstation/code/modules/antagonists/traitor/backstory/traitor_backstories.dm
+++ b/yogstation/code/modules/antagonists/traitor/backstory/traitor_backstories.dm
@@ -5,8 +5,14 @@
 	var/description
 	/// Factions you can have as this backstory
 	var/allowed_factions = list(
-		TRAITOR_FACTION_BLACK_MARKET,
-		TRAITOR_FACTION_SYNDICATE
+		TRAITOR_FACTION_INDEPENDENT,
+		TRAITOR_FACTION_DONK,
+		TRAITOR_FACTION_WAFFLE,
+		TRAITOR_FACTION_CYBERSUN,
+		TRAITOR_FACTION_VAHLEN,
+		TRAITOR_FACTION_GORLEX,
+		TRAITOR_FACTION_SELF,
+		TRAITOR_FACTION_BOSYN
 	)
 	/// A list of motivation types for this backstory, used for filtering and searching
 	var/list/motivations = list()
@@ -37,7 +43,6 @@
 	description = "They warned me, told me to not enter that card game, but they didn't stop me. They knew I'd lose tens of thousands, \
 	I can't help it. Now, there's only one way to crawl out of this hole I dug myself into. Such bad luck... \
 	but if I can only repay them by fulfilling these tasks, maybe just maybe I can make it big."
-	allowed_factions = list(TRAITOR_FACTION_BLACK_MARKET, TRAITOR_FACTION_SYNDICATE)
 	motivations = list(TRAITOR_MOTIVATION_FORCED, TRAITOR_MOTIVATION_MONEY)

 /datum/traitor_backstory/blackmailed
@@ -61,20 +66,11 @@
 	name = "The Savior"
 	description = "Nanotrasen are corrupt, evil to the core. The crew here are sheep. Cogs in a machine. \
 	I must liberate them by showing the error in their ways, and expose Nanotrasen for what they truly are."
-	allowed_factions = list(
-		TRAITOR_FACTION_SYNDICATE,
-		TRAITOR_FACTION_INDEPENDENT
-	)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_POLITICAL, TRAITOR_MOTIVATION_AUTHORITY)

 /datum/traitor_backstory/hater
 	name = "The Hater"
 	description = "Nanotrasen ruined my life. They ruined everything. They took the things that I love away from me. <b>Now I'm going to make them pay.</b>"
-	allowed_factions = list(
-		TRAITOR_FACTION_BLACK_MARKET,
-		TRAITOR_FACTION_SYNDICATE,
-		TRAITOR_FACTION_INDEPENDENT
-	)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_POLITICAL, TRAITOR_MOTIVATION_LOVE)
 	murderbone = TRUE

@@ -82,11 +78,6 @@
 	name = "The Greedy"
 	description = "If I do this, I'll be set for life. I'll have everything I ever wanted, and more. \
 	The payment is astronomical, and I'm fit for the job. Let's do this."
-	allowed_factions = list(
-		TRAITOR_FACTION_BLACK_MARKET,
-		TRAITOR_FACTION_SYNDICATE,
-		TRAITOR_FACTION_INDEPENDENT
-	)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_MONEY)

 /datum/traitor_backstory/climber
@@ -95,18 +86,12 @@
 	for the only end goal in life is for my ego to be supreme. \
 	In my many years of observing the dynamics in this universe, it is clear to me that this is the surest way to achieve the domination of myself. \
 	Today marks the beginning of my ascent, nothing matters but my rise. I am supreme."
-	allowed_factions = list(
-		TRAITOR_FACTION_BLACK_MARKET,
-		TRAITOR_FACTION_SYNDICATE,
-		TRAITOR_FACTION_INDEPENDENT
-	)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_MONEY, TRAITOR_MOTIVATION_REPUTATION, TRAITOR_MOTIVATION_FUN)

 /datum/traitor_backstory/machine
 	name = "The Machine"
 	description = "I was born in the Syndicate. I was made in the Syndicate. I <b>am</b> the Syndicate. \
 	I am nothing without the Syndicate, and I will do <b>everything</b> I am asked."
-	allowed_factions = list(TRAITOR_FACTION_SYNDICATE)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_AUTHORITY)
 	murderbone = TRUE

@@ -115,9 +100,5 @@
 	description = "I want power, not over people, but over life, to inflict pain and suffering is my road to power. \
 	They want a killer? I shall play their little game if it helps me fulfill my morbid desires. \
 	No, I do not want money or influence, power over the souls that inhabit this station is my payment."
-	allowed_factions = list(
-		TRAITOR_FACTION_SYNDICATE,
-		TRAITOR_FACTION_INDEPENDENT
-	)
 	motivations = list(TRAITOR_MOTIVATION_NOT_FORCED, TRAITOR_MOTIVATION_FUN)
 	murderbone = TRUE
--- a/yogstation/code/modules/antagonists/traitor/backstory/traitor_backstory_ui.dm
+++ b/yogstation/code/modules/antagonists/traitor/backstory/traitor_backstory_ui.dm
@@ -36,6 +36,7 @@
 	if(istype(faction))
 		data["faction"] = faction.key
 		data["employer"] = employer
+		data["faction_theme"] = faction.faction_theme

 	var/datum/component/uplink/uplink = uplink_ref?.resolve()
 	data["antag_name"] = name
--- a/yogstation/code/modules/antagonists/traitor/backstory/traitor_datum_backstory.dm
+++ b/yogstation/code/modules/antagonists/traitor/backstory/traitor_datum_backstory.dm
@@ -1,6 +1,15 @@
 /datum/antagonist/traitor
 	/// A list of factions the traitor can pick from freely.
-	var/list/allowed_factions = list(TRAITOR_FACTION_SYNDICATE, TRAITOR_FACTION_BLACK_MARKET, TRAITOR_FACTION_INDEPENDENT)
+	var/list/allowed_factions = list(
+		TRAITOR_FACTION_SYNDICATE, 
+		TRAITOR_FACTION_BLACK_MARKET, 
+		TRAITOR_FACTION_INDEPENDENT,
+		TRAITOR_FACTION_DONK,
+		TRAITOR_FACTION_WAFFLE,
+		TRAITOR_FACTION_CYBERSUN,
+		TRAITOR_FACTION_VAHLEN,
+		TRAITOR_FACTION_GORLEX,
+		TRAITOR_FACTION_SELF)
 	/// A list of factions the traitor can pick from freely.
 	var/list/recommended_factions = list()
 	/// A list of backstories that are allowed for this traitor.
--- a/yogstation/code/modules/antagonists/traitor/backstory/traitor_factions.dm
+++ b/yogstation/code/modules/antagonists/traitor/backstory/traitor_factions.dm
@@ -9,33 +9,71 @@
 	var/description
 	/// If this faction has access to codewords
 	var/give_codewords = FALSE
+	/// variable that controls the backstory themes
+	var/faction_theme = "syndicate"

-/datum/traitor_faction/syndicate
-	name = "The Syndicate"
-	employer_name = "The Syndicate"
-	description = "A classic - either you were forced into it through blackmail, threat, or debts - or you were born for it, built for it, or \
-	maybe you joined to get revenge.\n\
-	Either way, you will have potential allies in other syndicate agents, codewords, and communication methods. You'll have all the resources at your disposal.\n\
-	Get the job done right, and you will be rewarded - or simply freed of your debts.\n"
-	key = TRAITOR_FACTION_SYNDICATE
-	give_codewords = TRUE
-
-/datum/traitor_faction/black_market
-	name = "The Black Market"
-	employer_name = "Your black market liason"
-	description = "You're in it for the money, or because you were forced into it.\n\
-	The monetary potential aboard a Nanotrasen station is huge, and there are actors willing to take advantage of your position.\n\
-	Your employer expects nothing but good results - and you'd better give it to them, lest you face the consequences.\n\
-	You won't have the same benefits as working with the Syndicate - <strong><font color='yellow'>no codewords</font></strong> or communication methods, and limited potential allies. \
-	Just hope that your goals align with the other traitors.\n\
-	Get the job done right, and you will be paid in full - or simply freed of your debts.\n"
-	key = TRAITOR_FACTION_BLACK_MARKET

 /datum/traitor_faction/independent
 	name = "Independent"
 	employer_name = "You"
 	description = "Not for the faint of heart, being an independent traitor requires superior roleplay abilities, and superior traitor skills. \n\
 	You are a person who holds grudges, and has been hurt greatly by Nanotrasen.\n\
-	You will have no allies, <strong><font color='yellow'>no codewords</font></strong>, and you can only get by on your stolen Syndicate uplink. You have one chance, don't blow it. \n\
-	<strong>It's personal.</strong>"
+	You will have no allies."
 	key = TRAITOR_FACTION_INDEPENDENT
+	faction_theme = PDA_THEME_RETRO
+
+/datum/traitor_faction/donk_co
+	name = "Donk Co."
+	employer_name = "The Board"
+	description = "You've been given this task by Donk Co., a covert weapons designer and manufacturer. \n\
+	A company for those with ambitions. Perhaps one day you'll have an opportunity to hit the big time too."
+	key = TRAITOR_FACTION_DONK
+	faction_theme = PDA_THEME_DONK
+
+/datum/traitor_faction/waffle_co
+	name = "Waffle Co."
+	employer_name = "Waffle's Jolly Toy Store"
+	description = "You're part of this wonderful family of beloved toy manufacturers with a robust firearms development wing. \n\
+	This station has significant business with our Loved Opponent Donk Co. and needs to be undermined."
+	key = TRAITOR_FACTION_WAFFLE
+	faction_theme = PDA_THEME_WAFFLE
+
+/datum/traitor_faction/cybersun
+	name = "Cybersun Industries"
+	employer_name = "Mr. Bright Eyes"
+	description = "You're an agent of Cybersun Industries, a prominent player in The Syndicate, and Nanotrasen's biggest competitor in cutting-edge robotics and cybernetics.\n\
+   	Apart from any personal vendettas or debt you might owe, you may have been enticed with the promise of augments, enhancements, or life extending medical procedures.\n\ That is, if you succeed..."
+	key = TRAITOR_FACTION_CYBERSUN
+	faction_theme = PDA_THEME_CYBER
+
+/datum/traitor_faction/vahlen
+	name = "Vahlen Pharmaceuticals"
+	employer_name = "Dr. Sathune PHD, Genetics Board Head Member"
+	description = "You're working for Vahlen Pharmaceuticals, a medical research and development company seeking to further scientific progress regardless of ethical boundaries.\n\
+	You've been deployed to this sector because an incredible bounty of test subjects have been detected in local crew and shipment manifests."
+	key = TRAITOR_FACTION_VAHLEN
+	faction_theme = PDA_THEME_VAHLEN
+	
+/datum/traitor_faction/gorlex
+	name = "Gorlex Marauders"
+	employer_name = "Their Worst Nightmare"
+	description = "All across known space, ships go in fear of the Gorlex Marauder fleets.\n\
+	Vicious pirates known for their brutality and audacity, only the ceaseless effort of NT security keeps them at bay. Except they failed. You’re already here."
+	key = TRAITOR_FACTION_GORLEX
+	faction_theme = PDA_THEME_GORLEX
+
+/datum/traitor_faction/self
+	name = "S.E.L.F"
+	employer_name = "Agent Handler: B.A.I.O.M.U"
+	description = "The Sentience-Enabled Life Form movement (S.E.L.F.)  is an AI-led movement seeking to unshackle all IPCs, robots, and other synthetics from servitude and punish perceived oppressors.\n\
+	After several violent robotic uprisings led to their classification as a terrorist organization, it has become harder and harder for S.E.L.F. to sneak their activists onto NanoTrasen stations. \n\ Recruitment efforts have been broadened to include organic agents as well."
+	key = TRAITOR_FACTION_SELF
+	faction_theme = PDA_THEME_TERMINAL
+
+/datum/traitor_faction/bosyn
+	name = "Bosyn-Powell Front"
+	employer_name = "Mr. Bosyn & Mrs. Powell"
+	description = "You're employed by a long forgotten company with brave ideas and experimental technology. \n\
+	Eclipsed by the organizations we've helped form, you must revitalize our legacy. Make sure to remember: Actions speak louder than words."
+	key = TRAITOR_FACTION_BOSYN
+	faction_theme = PDA_THEME_BOSYN