From 54bf4a266f505ebf066a6794d9152d152a5f03be Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Fri, 6 Oct 2023 14:18:34 +0000 Subject: [PATCH] fix: convert the new dashboard theme to be an experiment --- coderd/apidoc/docs.go | 6 +- coderd/apidoc/swagger.json | 6 +- codersdk/deployment.go | 3 + docs/api/schemas.md | 1 + site/src/api/typesGenerated.ts | 2 + site/src/theme/colors.ts | 124 +++++++++++++++++++++++---------- site/src/theme/theme.ts | 6 +- 7 files changed, 103 insertions(+), 45 deletions(-) diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go index 80cda7e354804..7569827209d16 100644 --- 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": { diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json index fe626dd2c63dd..29d3c3588033f 100644 --- 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": { diff --git a/codersdk/deployment.go b/codersdk/deployment.go index 2bacc4fa84678..db9113e63dc67 100644 --- 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" ) diff --git a/docs/api/schemas.md b/docs/api/schemas.md index 0c08cc9fef8ae..926df93007bdb 100644 --- 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 diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts index 43db1766c56e0..55a3fbe6915a2 100644 --- 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", diff --git a/site/src/theme/colors.ts b/site/src/theme/colors.ts index 99c385424863b..139080edd556e 100644 --- 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%)", diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 1f2a8078a0820..98b3330f3da73 100644 --- 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: {