Refactor base colors to configurables directory. Allow customizing pr…

…imary 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 <[email protected]>
pixie-io · Jul 1, 2024 · e0aa3e2 · e0aa3e2
1 parent cff5157
commit e0aa3e2
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 65 deletions.
diff --git 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
@@ -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%)',
+};