From 2c00726ebc83e023aadf79b15c3901ed0faa0d33 Mon Sep 17 00:00:00 2001
From: Andrew Gormley <andrewgormley91@gmail.com>
Date: Wed, 3 Jul 2024 21:23:55 +0100
Subject: [PATCH] 16649 general contrast issues (#16759)

* fixes #16647: navigation contrast issues updated

* fixes #16651: table contrast issues new

* fixed #16649: general contrast issues

* fixes #16649: feedback changes

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>
---
 netbox/project-static/dist/netbox.css         | Bin 551938 -> 553341 bytes
 netbox/project-static/styles/_variables.scss  |  13 ++++
 .../styles/overrides/_tabler.scss             |  70 +++++++++++++++++-
 .../styles/transitional/_navigation.scss      |   8 ++
 4 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 36ed4defca8e8ed69115468fac126f7bbb72ce1d..fc27a79e7c1bc96fc1506e382205f44a45c95efe 100644
GIT binary patch
delta 1437
zcmZuwT}&KR6wckb^RuwDl%HjH2^+RZ(^|Tjnf+yH31~GuR0Zopg;JP5%9fwS=~9)7
zAyVN1qiHAMq!Ob9sP!kY$vjLn#KtGz2)vP4g=!iTCDvLKUod)SW}&3|cFsNLe&;*i
zckf&4k-vY8+<F7ybRu=qoIpv+E5u?AwSt&vg2+5w0n`!>n7`lzrelei*fjeS3Y$-P
zJqT+lEn!6bl}2~bpIFfpnIz?~d>8r5eDMwJAR1RgfnuJ(6)=sK(hN>Y$+$5R3K%OP
z#wqei(!ulQjnXp=EhlBcof4^{5G4zZg&|(!nZU0&!N>OuIvormY~LVwHCRa~0+|?Q
z(;@*(r3yoQOk;}Vjpk-(?Se~Nn66=@w8E4AwRio-Z*OyyswyOIW@Jf?t1;umR5Mo7
zYTD?Xs<<}OYd)OHlwn1bHB-3Ww%>^i;d;M$@8(f<C-cKQPa@vfyh)oqx7yrec;yNz
zH`+g^p)Je?%<rsE7_3SJ_rv8HbLs0DkDCqL4w=t?)85P`1VS|)hmK}XrTNuA`$w@Y
zI~-`|c!S?!VDut7VYQ4Rxy0EU)+f=Y&_0Q-IO#M=t@TMy?hGpsRf(vu_Os_{FHb@@
zZQb;wr&sTItkpYI_qUEoAS~hlw__2sFX9#|l}^FRAnj+gWM8aLgfA9x7{|%OFlxOO
z*1bjiK;-Ip{#o&4yb0DG;3^BP<A>L<q)9O%do{!J_KUKD1M~`_w3uWg1ii$UI59hs
zwtPc$N7Np#f;30J={yQRA2Y$}?K#@oo@2H;9a-VrX|Bqm{$er>PPf%s$Fe~;JawE!
zhujr9WVU8^1#47hFEu*_>;6aVOJS!S=9j5})pMI&>T*k5HJ2!LhFGmfx$#|76|269
zdm-%0_eXQOs_BwEsKJIoSI$bP2zbNehlQ89F%S$-1su=PDfn`XE@4zjAJB%O^{%I!
zIYRWVKLX!hpsTR0kuiZPN@Q7yDe8Ds8r1YWM0)6hup!e7YM52IdiWrVYK-^ZFNTc;
z##<c84vpmWyfmC2hkadK6};HR9fn*tSJb$t6z$99@|s>7&1<jakB#WrAxVGzvXUFj
z=^5gV5Eo;6x<NRL0yg209hDm`pE1CnMIkmiEM1Z%-AQ1qn+x04+Ly=e#vmOXk<M#Q
zb%$wLSskAiWKntyKFH>6wQ407t1yQ37fv5h>l4+ui(cc_qU7J5Cl?DX+2MXo&ywXG
z0#1vuxgD?_K<=T}U3zFV4_AYz0!nA7YNz|KTezqxxnbhTt{$%Zj}!L)zlJdX2U`VO
zB3A^fr#KpVJ2{_~>EsqDSo@u+#I`yhiS!fuR6RGM=3X5>md$HJm+gCgP(=FRA;**d
hu;6)n^+zn=K!$z}CVs%!@}1+TBIl`E<^9}!>R+Jm%$EQF

delta 931
zcmZuvTS!z<6y?l4_n|d9W$8R}a_B*&V{`AFnPwb|AnGIN;ZO8H={{z1%&{8BKnjwI
zrWYk0Xjc>1LqmGg{Ww99)K3KwNkl<L7Ez#N3Q-YQT}Km=em488b@tlqz4q{X&)!#_
zo4XMX_?4j1f`SbBF64tShp|FV2eupiIDlD6@=Fmonn7-3S&jv<x*pXda6f~bM9&>y
zRaI9baP6H*H%+>Pvsz@P%>{cBJWqZJ0$FL3uwM=ZNQ=$G1s9c-h%yY-vD1vZw&fff
z4r$7m{OlqIVNnvt)R)@_SXm1C$JEz390-s6Hg)Vd6(zGm0Y%pXW-q%{^hu^{zzmX4
zGI_UElw}iHWClr;Nw;k_Bp%_(#x&QtIy^D~X+2iVDIqnag-G|o8LX`Pqkc0hBzq3e
z<5Wdcb%iWFumo!{Jx01)Q^vOg6;rXI=rZiMW$}>S&kM=3PP=jTbZ_3ju<@*O89xpc
z!tn*jXH?%@HHwj?SMB8bZO(W??{HYtqJHDZy-rIuBMn_na_in>!}%b+Sn!2MCJ0AB
z{KOR+UB9hOjOhir|0V>@ji{0Yf7+n$FbdP7O~_%*t_EK3Lzkhg5f#GP6pF*Sy@<^c
zX_KI@_gS{Bhf{gXq4bL$3w_bUR6itV@C?)SB8atPU%6ik2O?f?O07?Nw<qHXCE4t)
zPno-p2BXnfZ~_I+E7(mAA{QNQ$8RNQEk%>y%UPC(&391_oa)E<^yf?b^#l%vwb)<V
ze7=!$qXk>pr)X+ej!h6fxs7!}ZHHM}oM0=;v-bp^DpU-^`#AwxGVF%zHNnsz=Su&`
zu=GcU>)V*!H~sjHt125U>3)t1=;~SgS9|tNS5)$7F4QD=kv6M*VhL1V;3oqv<)(n+
zBA-X6oaeo6s2t)8fVs@<qz}9J(5BH+#w7%7<A(mVzJRus3eNoh;3W}ZjoYE@ipA?w
z(PV|1jBlw;HAEX5=ZT_k&V2C1+39d&gRl#J*9gV5uSU4YK+7OrNYk3Y<U((~kWWu1
Hgb&Og1X)Kz

diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss
index afd4bc6bd..9a4d510b7 100644
--- a/netbox/project-static/styles/_variables.scss
+++ b/netbox/project-static/styles/_variables.scss
@@ -21,3 +21,16 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
 
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
+
+// Colors
+$rich-black: #001423;
+$rich-black-light: #081B2A;
+$rich-black-lighter: #0D202E;
+$rich-black-lightest: #1A2C39;
+$bright-teal: #00F2D4;
+$dark-teal: #00857D;
+
+$primary: $dark-teal;
+
+// Navbar active dropdown border color
+$navbar-active-border-color: $bright-teal;
diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss
index 97f1298df..120f37990 100644
--- a/netbox/project-static/styles/overrides/_tabler.scss
+++ b/netbox/project-static/styles/overrides/_tabler.scss
@@ -35,12 +35,76 @@ pre {
   display: inline-block;;
 }
 
-table a {
-  // Adjust table anchor link contrast as not enough contrast in dark mode
-  filter: brightness(110%);
+table th.orderable a {
+  color: var(--#{$prefix}body-color);
 }
 
 // Override background color alpha value
 [data-bs-theme=dark] ::selection {
   background-color: rgba(var(--tblr-primary-rgb),.48)
 }
+
+// Dark mode colors
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%);
+    --#{$prefix}link-color: #{$bright-teal};
+    --#{$prefix}secondary: #{$gray-400};
+  }
+}
+
+// Slightly increase alert contrast between bg and text
+.alert {
+  background: var(--#{$prefix}bg-surface);
+}
+
+// Altering background colors
+.page, .page-tabs .nav-tabs .nav-link.active {
+  background-color: var(--#{$prefix}bg-surface-tertiary)!important;
+}
+.page-body .card .card-header {
+  background: var(--tblr-bg-surface-secondary)!important;
+}
+
+.footer .text-primary {
+  color: $rich-black!important;
+}
+
+// Dark mode overrides
+body[data-bs-theme=dark] {
+
+  // Background colors to match brand colors
+  background-color: $rich-black;
+  .navbar, .page-header {
+    background-color: $rich-black;
+  }
+  .page, .page-tabs .nav-tabs .nav-link.active {
+    background-color: $rich-black-light!important;
+  }
+
+  // Adjust dark table link color without affecting buttons and badges
+  table {
+    a {
+      color: $bright-teal;
+    }
+    .badge a {
+      color: inherit;
+    }
+    .btn {
+      color: var(--#{$prefix}body-color);
+    }
+  }
+
+  // Adjusting text colors
+  .text- {
+    &muted {
+      color: var(--#{$prefix}secondary-color) !important;
+    }
+    &secondary {
+      color: $gray-400!important;
+    }
+  }
+  .footer .text-primary {
+    color: white!important;
+  }
+}
diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss
index fe7b8e75a..e7dd35507 100644
--- a/netbox/project-static/styles/transitional/_navigation.scss
+++ b/netbox/project-static/styles/transitional/_navigation.scss
@@ -1,5 +1,13 @@
 // Navbar styling
 .navbar-vertical.navbar-expand-lg {
+  background-color: $rich-black;
+  .dropdown-item {
+    color: white!important;
+  }
+  .text-secondary {
+    color: $bright-teal!important;
+  }
+
   .navbar-collapse {
     .dropdown-menu {
       .dropdown-item {