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

@@ -56,7 +56,7 @@
   <style>
     html,
     body {
-      background-color: hsl(220, 50%, 3%);
+      background-color: hsl(0, 0%, 1%);
     }
   </style>
 </head>

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: {

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],
             },
         },
       },