From f270d9d3517e5e8a2027383e9d1cffc64fa989bd Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Thu, 5 Oct 2023 16:46:38 -0500
Subject: [PATCH] feat: make the dashboard darker (#10084)

* feat: make the dashboard darker

Coder is a the internal software development platform. It is not
designed to be opinionated on colors, but it should look great.

Focusing on neutrality for our default dashboard theme is great
for our ICP. Some organizations may lean towards colors more or
less, and that shouldn't influence their decision when exploring
Coder.

* Make it a lil more dark

* Improve button outline

* Lower the red brightness

* Improve the divider contrast
---
 site/index.html          |  2 +-
 site/src/theme/colors.ts | 66 ++++++++++++++++++++--------------------
 site/src/theme/theme.ts  | 11 +++++--
 3 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/site/index.html b/site/index.html
index 99f24c4747..f02d25b777 100644
--- a/site/index.html
+++ b/site/index.html
@@ -56,7 +56,7 @@
   <style>
     html,
     body {
-      background-color: hsl(220, 50%, 3%);
+      background-color: hsl(0, 0%, 1%);
     }
   </style>
 </head>
diff --git a/site/src/theme/colors.ts b/site/src/theme/colors.ts
index f65edb2d17..6c3629812e 100644
--- a/site/src/theme/colors.ts
+++ b/site/src/theme/colors.ts
@@ -4,43 +4,43 @@ export const colors = {
   white: "hsl(0, 0%, 100%)",
 
   gray: {
-    17: "hsl(220, 50%, 3%)",
-    16: "hsl(223, 44%, 9%)",
-    15: "hsl(222, 38%, 14%)",
-    14: "hsl(222, 32%, 19%)",
-    13: "hsl(222, 31%, 25%)",
-    12: "hsl(222, 30%, 31%)",
-    11: "hsl(219, 29%, 38%)",
-    10: "hsl(219, 28%, 45%)",
-    9: "hsl(219, 28%, 52%)",
-    8: "hsl(218, 29%, 58%)",
-    7: "hsl(219, 30%, 64%)",
-    6: "hsl(219, 31%, 71%)",
-    5: "hsl(218, 32%, 77%)",
-    4: "hsl(223, 38%, 84%)",
-    3: "hsl(218, 44%, 92%)",
-    2: "hsl(220, 50%, 95%)",
-    1: "hsl(220, 55%, 98%)",
+    17: "hsl(0, 0%, 1%)",
+    16: "hsl(0, 0%, 4%)",
+    15: "hsl(0, 0%, 7%)",
+    14: "hsl(0, 0%, 11%)",
+    13: "hsl(0, 0%, 15%)",
+    12: "hsl(0, 0%, 19%)",
+    11: "hsl(0, 0%, 23%)",
+    10: "hsl(0, 0%, 27%)",
+    9: "hsl(0, 0%, 31%)",
+    8: "hsl(0, 0%, 35%)",
+    7: "hsl(0, 0%, 62%)",
+    6: "hsl(0, 0%, 69%)",
+    5: "hsl(0, 0%, 75%)",
+    4: "hsl(0, 0%, 82%)",
+    3: "hsl(0, 0%, 90%)",
+    2: "hsl(0, 0%, 93%)",
+    1: "hsl(0, 0%, 96%)",
   },
 
   red: {
     17: "hsl(355, 95%, 3%)",
-    16: "hsl(355, 88%, 9%)",
-    15: "hsl(355, 86%, 14%)",
-    14: "hsl(355, 84%, 19%)",
-    13: "hsl(355, 82%, 25%)",
-    12: "hsl(355, 74%, 31%)",
-    11: "hsl(355, 70%, 38%)",
-    10: "hsl(355, 66%, 45%)",
-    9: "hsl(355, 69%, 52%)",
-    8: "hsl(355, 73%, 58%)",
-    7: "hsl(355, 76%, 64%)",
-    6: "hsl(355, 78%, 71%)",
-    5: "hsl(355, 79%, 77%)",
-    4: "hsl(355, 85%, 84%)",
-    3: "hsl(355, 88%, 92%)",
-    2: "hsl(355, 95%, 96%)",
-    1: "hsl(355, 100%, 98%) ",
+    16: "hsl(355, 88%, 8%)",
+    15: "hsl(355, 86%, 13%)",
+    14: "hsl(355, 84%, 18%)",
+    13: "hsl(355, 82%, 23%)",
+    12: "hsl(355, 74%, 28%)",
+    11: "hsl(355, 70%, 33%)",
+    10: "hsl(355, 66%, 38%)",
+    9: "hsl(355, 69%, 43%)",
+    8: "hsl(355, 73%, 48%)",
+    7: "hsl(355, 76%, 53%)",
+    6: "hsl(355, 78%, 58%)",
+    5: "hsl(355, 79%, 63%)",
+    4: "hsl(355, 85%, 68%)",
+    3: "hsl(355, 88%, 73%)",
+    2: "hsl(355, 95%, 78%)",
+    1: "hsl(355, 100%, 83%) ",
   },
 
   orange: {
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 0c24af51b7..1cb837754c 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -45,8 +45,8 @@ export let dark = createTheme({
     },
     divider: colors.gray[13],
     warning: {
-      light: colors.orange[7],
-      main: colors.orange[9],
+      light: colors.orange[9],
+      main: colors.orange[11],
       dark: colors.orange[15],
     },
     success: {
@@ -167,6 +167,11 @@ dark = createTheme(dark, {
         sizeLarge: {
           height: BUTTON_LG_HEIGHT,
         },
+        outlined: {
+          ":hover": {
+            border: `1px solid ${colors.gray[10]}`,
+          },
+        },
         outlinedNeutral: {
           borderColor: colors.gray[12],
 
@@ -376,7 +381,7 @@ dark = createTheme(dark, {
           // The default outlined input color is white, which seemed jarring.
           "&:hover:not(.Mui-error):not(.Mui-focused) .MuiOutlinedInput-notchedOutline":
             {
-              borderColor: colors.gray[7],
+              borderColor: colors.gray[10],
             },
         },
       },