feat: make the dashboard darker (#10084)

kylecarbs · web-flow · commit f270d9d3517e · 2023-10-05T16:46:38.000-05:00
* 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
diff --git 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
@@ -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
@@ -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],
             },
         },
       },

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`<style>`
`57`	`57`	`html,`
`58`	`58`	`body {`
`59`		`- background-color: hsl(220, 50%, 3%);`
	`59`	`+ background-color: hsl(0, 0%, 1%);`
`60`	`60`	`}`
`61`	`61`	`</style>`
`62`	`62`	`</head>`