From e0aa3e2d820927ac8834d36c134643c7ad748f59 Mon Sep 17 00:00:00 2001
From: Dom Delnano <ddelnano@gmail.com>
Date: Mon, 1 Jul 2024 09:46:27 -0700
Subject: [PATCH] Refactor base colors to configurables directory. Allow
 customizing primary color for light and dark mode (#1957)

Summary: Refactor base colors to configurables directory. Allow
customizing primary color for light and dark mode

This change makes it possible to have different main colors for light
and dark mode. The contrast difference between the light mode background
and the text color scores poorly with the [contrast
checker](https://webaim.org/resources/contrastchecker/?fcolor=12D6D6&bcolor=F6F6F6).

Relevant Issues: N/A

Type of change: /kind cleanup

Test Plan: Tested UI to verify that it looks the same in light and dark
mode
- [x] Verified all references to `COLORS.PRIMARY[500]` have been updated
with new structure

---------

Signed-off-by: Dom Del Nano <ddelnano@gmail.com>
---
 src/ui/src/components/mui-theme.tsx           | 69 +--------------
 src/ui/src/configurables/base/theme-colors.ts | 84 +++++++++++++++++++
 2 files changed, 88 insertions(+), 65 deletions(-)
 create mode 100644 src/ui/src/configurables/base/theme-colors.ts

diff --git a/src/ui/src/components/mui-theme.tsx b/src/ui/src/components/mui-theme.tsx
index 10506c2aa08..6f9fee741f2 100644
--- a/src/ui/src/components/mui-theme.tsx
+++ b/src/ui/src/components/mui-theme.tsx
@@ -26,71 +26,7 @@ import type {
 import { Shadows } from '@mui/material/styles/shadows';
 import { deepmerge } from '@mui/utils';
 
-// These aren't quite the Material UI colors, but they follow the same principles.
-const COLORS = {
-  PRIMARY: {
-    '100': '#D0FBFB',
-    '200': '#A1F7F7',
-    '300': '#6DF3F3',
-    '400': '#35EEEE',
-    '500': '#12D6D6', // Brand primary color!
-    '600': '#0DA0A0',
-    '700': '#096C6C',
-    '800': '#053838',
-    '900': '#031C1C',
-  },
-  SECONDARY: {
-    '100': '#E0F4FF',
-    '200': '#C2EAFF',
-    '300': '#99DBFF',
-    '400': '#61C8FF',
-    '500': '#24B2FF',
-    '600': '#0095E5',
-    '700': '#006EA8',
-    '800': '#004266',
-    '900': '#002133',
-  },
-  NEUTRAL: {
-    '100': '#FFFFFF',
-    '200': '#E6E6EA',
-    '300': '#C3C3CB',
-    '400': '#686875',
-    '500': '#4E4E4E',
-    '600': '#3B3B3B',
-    '700': '#333333',
-    '800': '#232323',
-    '850': '#1E1E1E',
-    '900': '#121212',
-    '1000': '#0A0A0A',
-  },
-  SUCCESS: {
-    '300': '#50F6CE',
-    '400': '#20F3C1',
-    '500': '#0BD3A3',
-    '600': '#0AC296',
-  },
-  ERROR: {
-    '300': '#FFA8B0',
-    '400': '#FF7582',
-    '500': '#FF5E6D',
-    '600': '#FF4C5D',
-  },
-  WARNING: {
-    '300': '#FACA6B',
-    '400': '#F8B83A',
-    '500': '#F6A609',
-    '600': '#E79C08',
-  },
-  INFO: {
-    '300': '#B5E4FD',
-    '400': '#83D2FB',
-    '500': '#53C0FA',
-    '600': '#20ADF9',
-  },
-  // Note: these two colors are similar enough that RGB interpolation doesn't create a noticeable grey zone.
-  // If it did, we'd need to manually compute a few middle points in a colorspace like HCL or LAB to get a better one.
-  GRADIENT: 'linear-gradient(to right, #00DBA6 0%, #24B2FF 100%)',
-};
+import { COLORS } from 'configurable/theme-colors';
 
 interface SyntaxPalette {
   /** Default color for tokens that don't match any other rules */
@@ -544,6 +480,9 @@ export const DARK_BASE = {
 
 export const LIGHT_BASE = {
   palette: {
+    primary: {
+      main: COLORS.PRIMARY[550],
+    },
     mode: 'light' as const,
     divider: '#dbdde0',
     foreground: {
diff --git a/src/ui/src/configurables/base/theme-colors.ts b/src/ui/src/configurables/base/theme-colors.ts
new file mode 100644
index 00000000000..75388a1ae31
--- /dev/null
+++ b/src/ui/src/configurables/base/theme-colors.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2018- The Pixie Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// These aren't quite the Material UI colors, but they follow the same principles.
+export const COLORS = {
+  PRIMARY: {
+    '100': '#D0FBFB',
+    '200': '#A1F7F7',
+    '300': '#6DF3F3',
+    '400': '#35EEEE',
+    '500': '#12D6D6', // Brand primary color!
+    '550': '#12D6D6', // Primary for light mode
+    '600': '#0DA0A0',
+    '700': '#096C6C',
+    '800': '#053838',
+    '900': '#031C1C',
+  },
+  SECONDARY: {
+    '100': '#E0F4FF',
+    '200': '#C2EAFF',
+    '300': '#99DBFF',
+    '400': '#61C8FF',
+    '500': '#24B2FF',
+    '600': '#0095E5',
+    '700': '#006EA8',
+    '800': '#004266',
+    '900': '#002133',
+  },
+  NEUTRAL: {
+    '100': '#FFFFFF',
+    '200': '#E6E6EA',
+    '300': '#C3C3CB',
+    '400': '#686875',
+    '500': '#4E4E4E',
+    '600': '#3B3B3B',
+    '700': '#333333',
+    '800': '#232323',
+    '850': '#1E1E1E',
+    '900': '#121212',
+    '1000': '#0A0A0A',
+  },
+  SUCCESS: {
+    '300': '#50F6CE',
+    '400': '#20F3C1',
+    '500': '#0BD3A3',
+    '600': '#0AC296',
+  },
+  ERROR: {
+    '300': '#FFA8B0',
+    '400': '#FF7582',
+    '500': '#FF5E6D',
+    '600': '#FF4C5D',
+  },
+  WARNING: {
+    '300': '#FACA6B',
+    '400': '#F8B83A',
+    '500': '#F6A609',
+    '600': '#E79C08',
+  },
+  INFO: {
+    '300': '#B5E4FD',
+    '400': '#83D2FB',
+    '500': '#53C0FA',
+    '600': '#20ADF9',
+  },
+  // Note: these two colors are similar enough that RGB interpolation doesn't create a noticeable grey zone.
+  // If it did, we'd need to manually compute a few middle points in a colorspace like HCL or LAB to get a better one.
+  GRADIENT: 'linear-gradient(to right, #00DBA6 0%, #24B2FF 100%)',
+};