fix: convert the new dashboard theme to be an experiment (#10108)

2023-10-06 09:46:52 -05:00 · 2023-10-06 09:46:52 -05:00 · 2d2bea79a7
parent 69b65693c9
commit 2d2bea79a7
7 changed files with 103 additions and 45 deletions
--- a/coderd/apidoc/docs.go
+++ b/coderd/apidoc/docs.go
@ -8229,14 +8229,16 @@ const docTemplate = `{
                "tailnet_pg_coordinator",
                "single_tailnet",
                "template_autostop_requirement",
-                "deployment_health_page"
+                "deployment_health_page",
+                "dashboard_theme"
            ],
            "x-enum-varnames": [
                "ExperimentMoons",
                "ExperimentTailnetPGCoordinator",
                "ExperimentSingleTailnet",
                "ExperimentTemplateAutostopRequirement",
-                "ExperimentDeploymentHealthPage"
+                "ExperimentDeploymentHealthPage",
+                "ExperimentDashboardTheme"
            ]
        },
        "codersdk.ExternalAuth": {
--- a/coderd/apidoc/swagger.json
+++ b/coderd/apidoc/swagger.json
@ -7367,14 +7367,16 @@
        "tailnet_pg_coordinator",
        "single_tailnet",
        "template_autostop_requirement",
-        "deployment_health_page"
+        "deployment_health_page",
+        "dashboard_theme"
      ],
      "x-enum-varnames": [
        "ExperimentMoons",
        "ExperimentTailnetPGCoordinator",
        "ExperimentSingleTailnet",
        "ExperimentTemplateAutostopRequirement",
-        "ExperimentDeploymentHealthPage"
+        "ExperimentDeploymentHealthPage",
+        "ExperimentDashboardTheme"
      ]
    },
    "codersdk.ExternalAuth": {
--- a/codersdk/deployment.go
+++ b/codersdk/deployment.go
@ -1985,6 +1985,9 @@ const (
 	// Deployment health page
 	ExperimentDeploymentHealthPage Experiment = "deployment_health_page"

+	// ExperimentDashboardTheme mutates the dashboard to use a new, dark color scheme.
+	ExperimentDashboardTheme Experiment = "dashboard_theme"
+
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
--- a/docs/api/schemas.md
+++ b/docs/api/schemas.md
@ -2773,6 +2773,7 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 | `single_tailnet`                |
 | `template_autostop_requirement` |
 | `deployment_health_page`        |
+| `dashboard_theme`               |

 ## codersdk.ExternalAuth

--- a/site/src/api/typesGenerated.ts
+++ b/site/src/api/typesGenerated.ts
@ -1668,12 +1668,14 @@ export const Entitlements: Entitlement[] = [

 // From codersdk/deployment.go
 export type Experiment =
+  | "dashboard_theme"
  | "deployment_health_page"
  | "moons"
  | "single_tailnet"
  | "tailnet_pg_coordinator"
  | "template_autostop_requirement";
 export const Experiments: Experiment[] = [
+  "dashboard_theme",
  "deployment_health_page",
  "moons",
  "single_tailnet",
--- a/site/src/theme/colors.ts
+++ b/site/src/theme/colors.ts
@ -1,47 +1,95 @@
 // Based on https://codepen.io/hkfoster/pen/YzeYRwR

+import { getMetadataAsJSON } from "utils/metadata";
+
+// When in development mode the experiments meta tag won't exist,
+// so you can just set this to true.
+export const experimentalTheme =
+  typeof document !== "undefined" &&
+  getMetadataAsJSON("experiments")?.includes("dashboard_theme");
+
 export const colors = {
  white: "hsl(0, 0%, 100%)",

-  gray: {
-    17: "hsl(0, 0%, 4%)",
-    16: "hsl(0, 0%, 7%)",
-    15: "hsl(0, 0%, 10%)",
-    14: "hsl(0, 0%, 14%)",
-    13: "hsl(0, 0%, 17%)",
-    12: "hsl(0, 0%, 20%)",
-    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%)",
-  },
+  gray: experimentalTheme
+    ? {
+        17: "hsl(0, 0%, 4%)",
+        16: "hsl(0, 0%, 7%)",
+        15: "hsl(0, 0%, 10%)",
+        14: "hsl(0, 0%, 14%)",
+        13: "hsl(0, 0%, 17%)",
+        12: "hsl(0, 0%, 20%)",
+        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%)",
+      }
+    : {
+        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%)",
+      },

-  red: {
-    17: "hsl(355, 95%, 3%)",
-    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%) ",
-  },
+  red: experimentalTheme
+    ? {
+        17: "hsl(355, 95%, 3%)",
+        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%) ",
+      }
+    : {
+        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%) ",
+      },

  orange: {
    17: "hsl(20, 100%, 3%)",
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@ -1,4 +1,4 @@
-import { colors } from "./colors";
+import { colors, experimentalTheme } from "./colors";
 import { createTheme, type ThemeOptions } from "@mui/material/styles";
 import { BODY_FONT_FAMILY, borderRadius } from "./constants";

@ -45,8 +45,8 @@ export let dark = createTheme({
    },
    divider: colors.gray[13],
    warning: {
-      light: colors.orange[9],
-      main: colors.orange[11],
+      light: experimentalTheme ? colors.orange[9] : colors.orange[7],
+      main: experimentalTheme ? colors.orange[11] : colors.orange[9],
      dark: colors.orange[15],
    },
    success: {