Refactor base theme colors to configurables directory. Allow customiz…

…ing primary color for light and dark mode Signed-off-by: Dom Del Nano <[email protected]>
pixie-io · Jun 27, 2024 · 24ca5fa · 24ca5fa
1 parent f83e53c
commit 24ca5fa
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 66 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 */
@@ -319,7 +255,7 @@ export const COMMON_THEME = {
  white: '#FFFFFF',
  },
  primary: {
- main: COLORS.PRIMARY[500],
+ main: COLORS.PRIMARY[500].dark,
  dark: COLORS.PRIMARY[600],
  light: COLORS.PRIMARY[400],
  },
@@ -544,6 +480,9 @@ export const DARK_BASE = {
 
 export const LIGHT_BASE = {
  palette: {
+ primary: {
+ main: COLORS.PRIMARY[500].light,
+ },
  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,86 @@
+/*
+ * 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': { // Brand primary color!
+ dark: '#12D6D6',
+ light: '#12D6D6',
+ },
+ '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%)',
+};