Merge pull request #14430 from neersighted/cyndikate

Add syndicate tgui style; overhaul colors

tgui/colors.json

@@ -1,26 +1,55 @@
 {
-  "normal":"#40628a",
-  "good":"#537d29",
-  "average":"#be6209",
-  "bad":"#b00e0e",
-  "highlight":"#8ba5c4",
-  "info":"#e9C183",
-  "label":"#8ba5c4",
-  "dark":"#272727",
-  "title":"#98b0c3",
-  "text":"white",
-  "textinverse":"black",
-  "titlebar":"#363636",
-  "background-start":"#2a2a2a",
-  "background-end":"#202020",
-  "resize":"#363636",
-  "border":"#272727",
-  "rule":"#40628a",
-  "notice1":"#bb9b68",
-  "notice2":"#b1905d",
-  "hover":"15%",
-  "selected":"#2f943c",
-  "caution":"#9a9d00",
-  "danger":"#9d0808",
-  "disabled":"#999999"
+  "normal": "#40628a",
+  "good": "#537d29",
+  "average": "#be6209",
+  "bad": "#b00e0e",
+  "highlight": "#8ba5c4",
+  "text": {
+    "normal": "white",
+    "inverse": "black",
+    "title": "#98b0c3"
+  },
+  "rule": {
+    "normal": "#40628a",
+    "dark": "#272727"
+  },
+  "titlebar": {
+    "background": "#363636",
+    "shadow": "alpha(#000, 0.1)"
+  },
+  "resize": {
+    "border": "#363636"
+  },
+  "display": {
+    "background": "alpha(#000, 0.33)",
+    "shadow": "alpha(#000, 0.5)"
+  },
+  "notice": {
+    "first": "#bb9b68",
+    "second": "#b1905d",
+    "border": "#272727"
+  },
+  "section": {
+    "label": "#8ba5c4"
+  },
+  "bar": {
+    "border": "#40628a",
+    "background": "#272727"
+  },
+  "buttons": {
+    "normal": "#40628a",
+    "disabled": "#999999",
+    "selected": "#2f943c",
+    "caution": "#9a9d00",
+    "danger": "#9d0808",
+    "hover": "15%"
+  },
+  "nanotrasen": {
+    "background-start": "#2a2a2a",
+    "background-end": "#202020"
+  },
+  "syndicate": {
+    "background-start": "#b30f0f",
+    "background-end": "#740d0d"
+  }
 }

tgui/images/nanotrasen.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 425 200" opacity=".25">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 425 200" opacity=".33">
   <path d="m 178.00399,0.03869 -71.20393,0 a 6.7613422,6.0255495 0 0 0 -6.76134,6.02555 l 0,187.87147 a 6.7613422,6.0255495 0 0 0 6.76134,6.02554 l 53.1072,0 a 6.7613422,6.0255495 0 0 0 6.76135,-6.02554 l 0,-101.544018 72.21628,104.699398 a 6.7613422,6.0255495 0 0 0 5.76015,2.87016 l 73.55487,0 a 6.7613422,6.0255495 0 0 0 6.76135,-6.02554 l 0,-187.87147 a 6.7613422,6.0255495 0 0 0 -6.76135,-6.02555 l -54.71644,0 a 6.7613422,6.0255495 0 0 0 -6.76133,6.02555 l 0,102.61935 L 183.76413,2.90886 a 6.7613422,6.0255495 0 0 0 -5.76014,-2.87017 z" />
   <path d="M 4.8446333,22.10875 A 13.412039,12.501842 0 0 1 13.477588,0.03924 l 66.118315,0 a 5.3648158,5.000737 0 0 1 5.364823,5.00073 l 0,79.87931 z" />
   <path d="m 420.15535,177.89119 a 13.412038,12.501842 0 0 1 -8.63295,22.06951 l -66.11832,0 a 5.3648152,5.000737 0 0 1 -5.36482,-5.00074 l 0,-79.87931 z" />

tgui/images/syndicate.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 85.25 114.35" opacity=".33">
+  <text
+    style="font-size:200px;font-family:'Verdana',sans-serif"
+    x="-10.742188"
+    y="111.71875">
+    <tspan>s</tspan>
+  </text>
+</svg>

tgui/styles/components/bar.styl

@@ -7,8 +7,8 @@
   line-height: 17px
   padding: 1px
 
-  border: 1px solid colors.normal
-  background: colors.dark
+  border: 1px solid colors.bar.border
+  background: colors.bar.background
 
   .barText
     @extend $fontReset

tgui/styles/components/button.styl

@@ -5,7 +5,7 @@ buttoncolor(selector, color)
   &.{selector}.active:hover,
   &.{selector}.active:focus
     transition: background-color 0.25s
-    background-color: lighten(color, colors.hover)
+    background-color: lighten(color, colors.buttons.hover)
     outline: 0
 
 
@@ -21,11 +21,11 @@ span.button
   .fa
     padding-right: 2px
 
-  buttoncolor(normal, colors.normal)
-  buttoncolor(disabled, colors.disabled)
-  buttoncolor(selected, colors.selected)
-  buttoncolor(caution, colors.caution)
-  buttoncolor(danger, colors.danger)
+  buttoncolor(normal, colors.buttons.normal)
+  buttoncolor(disabled, colors.buttons.disabled)
+  buttoncolor(selected, colors.buttons.selected)
+  buttoncolor(caution, colors.buttons.caution)
+  buttoncolor(danger, colors.buttons.danger)
 
   &.gridable
     width: 125px

tgui/styles/components/display.styl

@@ -3,8 +3,8 @@ div.display
   padding: 4px
   margin: 6px 0
 
-  background-color: alpha(#000, 0.33) // Transparent background.
-  box-shadow: inset 0 0 5px alpha(#000, 0.5)
+  background-color: colors.display.background // Transparent background.
+  box-shadow: inset 0 0 5px colors.display.shadow
 
   header
     display: block
@@ -13,7 +13,7 @@ div.display
     padding: 0 4px
     margin-bottom: 6px
 
-    border-bottom: 2px solid colors.rule
+    border-bottom: 2px solid colors.rule.normal
 
     .buttonRight
       position: absolute

tgui/styles/components/notice.styl

@@ -4,10 +4,10 @@ $noticeStripes
   background-color: colors.notice1 // Fallback for old browers.
   background-image: repeating-linear-gradient(
     -45deg,
-    colors.notice1,
-    colors.notice1 10px,
-    colors.notice2 10px,
-    colors.notice2 20px
+    colors.notice.first,
+    colors.notice.first 10px,
+    colors.notice.second 10px,
+    colors.notice.second 20px
   )
 
 div.notice
@@ -16,15 +16,15 @@ div.notice
 
   box-shadow: none
 
-  color: colors.textinverse
+  color: colors.text.inverse
   font-weight: bold
   font-style: italic
 
   .button
-    outline: 1px solid colors.border
+    outline: 1px solid colors.notice.border
 
   .label
-    color: colors.textinverse
+    color: colors.text.inverse
 
   hr
-    background-color: colors.border
+    background-color: colors.rule.dark

tgui/styles/components/resize.styl

@@ -7,6 +7,6 @@ div.resize
 
   border-style: solid;
   border-width: 0 0 45px 45px;
-  border-color: transparent transparent colors.resize transparent
+  border-color: transparent transparent colors.resize.border transparent
 
   transform: rotate(360deg)

tgui/styles/components/section.styl

@@ -18,7 +18,7 @@ section
     padding-right: 32px
     white-space: nowrap
 
-    color: colors.label
+    color: colors.section.label
 
   .content
     @extend $cell

tgui/styles/components/titlebar.styl

@@ -4,10 +4,10 @@ $titleButton
   padding: 7px // To make a bigger clickable area.
   margin: -7px
 
-  color: colors.title;
+  color: colors.text.title;
 
   &:hover
-    color: lighten(colors.title, colors.hover)
+    color: lighten(colors.text.title, colors.buttons.hover)
 
 header.titlebar
   position: fixed;
@@ -16,8 +16,8 @@ header.titlebar
   width: 100%;
   height: 32px;
 
-  background-color: colors.titlebar
-  box-shadow: 0 3px 3px alpha(#000, 0.1)
+  background-color: colors.titlebar.background
+  box-shadow: 0 3px 3px colors.titlebar.shadow
 
   .statusicon
     position: absolute
@@ -30,7 +30,7 @@ header.titlebar
     top: 6px
     left: 46px
 
-    color: colors.title
+    color: colors.text.title
     font-size: 16px
     white-space: nowrap
 

tgui/styles/core/colors.styl

@@ -8,7 +8,3 @@
   color: colors.bad
 .highlight
   color: colors.highlight
-.label
-  color: colors.label
-.dark
-  color: colors.dark

tgui/styles/core/document.styl

@@ -14,11 +14,9 @@ body
   height: 100%
   margin: 0 6px
 
-  background-color: colors.background-end; // Fallback for old browsers.
-
   font-family: font
   font-size: fontsize
-  color: colors.text
+  color: colors.text.normal
 
 main
   display: block
@@ -28,5 +26,5 @@ main
 
 hr
   height: 2px
-  background-color: colors.rule
+  background-color: colors.rule.normal
   border: none

tgui/styles/core/text.styl

@@ -1,6 +1,6 @@
 // Helper to reset font options to default.
 $fontReset
-  color: colors.text
+  color: colors.text.normal
   font-size: fontsize
   font-weight: normal
   font-style: normal

tgui/styles/styles/nanotrasen.styl

@@ -1,5 +1,5 @@
 body.nanotrasen
   background: data-url('nanotrasen.svg') no-repeat fixed center/70% 70%,
     linear-gradient(to bottom,
-      colors.background-start 0%,
-      colors.background-end 100%)
+      colors.nanotrasen.background-start 0%,
+      colors.nanotrasen.background-end 100%)

tgui/styles/styles/syndicate.styl

@@ -0,0 +1,5 @@
+body.syndicate
+  background: data-url('syndicate.svg') no-repeat fixed center/70% 70%,
+    linear-gradient(to bottom,
+      colors.syndicate.background-start 0%,
+      colors.syndicate.background-end 100%)