@wandelbots/wandelbots-js-react-components 1.3.1 → 1.4.0

package/src/themes/theme.ts

@@ -0,0 +1,150 @@
+import { ThemeOptions } from '@mui/material/styles';
+import { wbTheme } from './wbTheme';
+
+// TODO: Is all of this theme name foo actually necessary?
+
+type ThemeName = 'wandelbots'
+
+export const allThemes = {
+  wb: wbTheme,
+}
+
+export interface NamedThemeOptions extends ThemeOptions {
+  name: ThemeName
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    backgrounds: {
+      light1: string,
+      light2: string,
+      medium: string,
+      dark1: string,
+      dark2: string,
+    }
+    buttonPrimary: {
+      background: string;
+      text: string;
+    }
+    buttonSecondary: {
+      background: string;
+      text: string;
+    }
+    buttonBack: {
+      background: string;
+      text: string;
+    }
+    inputField: {
+      background: string;
+      text: string;
+      unitBackground: string;
+      unitText: string;
+    }
+    sidebar: {
+      background: string;
+      backgroundSelected: string;
+      selected: string;
+    }
+    actionPanel: {
+      background: string;
+      backgroundSelected: string;
+      text: string;
+    }
+    controlPanel: {
+      background: string;
+      text: string;
+    }
+    listItem: {
+      background: string;
+      backgroundSelected: string;
+      textTitle: string;
+      textTitleSelected: string;
+      textDesc: string;
+      textDescSelected: string;
+    }
+    breadcrumb: {
+      background: string;
+      text: string
+      textSelected: string;
+    }
+    axes: {
+      x: string;
+      y: string;
+      z: string;
+    };
+    viewport: {
+      background: string;
+      controlBackground: string;
+    };
+    tabIcon: {
+      color: string;
+    }
+  }
+
+  interface ThemeOptions {
+    backgrounds?: {
+      light1?: string,
+      light2?: string,
+      medium?: string,
+      dark1?: string,
+      dark2?: string,
+    }
+    buttonPrimary?: {
+      background?: string;
+      text?: string;
+    }
+    buttonSecondary?: {
+      background?: string;
+      text?: string;
+    }
+    buttonBack?: {
+      background?: string;
+      text?: string;
+    }
+    inputField?: {
+      background?: string;
+      text?: string;
+      unitBackground?: string;
+      unitText?: string;
+    }
+    sidebar?: {
+      background?: string;
+      backgroundSelected?: string;
+      selected?: string;
+    }
+    actionPanel?: {
+      background?: string;
+      backgroundSelected?: string;
+      text?: string;
+    }
+    controlPanel?: {
+      background?: string;
+      text?: string;
+    }
+    listItem?: {
+      background?: string;
+      backgroundSelected?: string;
+      textTitle?: string;
+      textTitleSelected?: string;
+      textDesc?: string;
+      textDescSelected?: string;
+    }
+    breadcrumb?: {
+      background?: string;
+      text?: string
+      textSelected?: string;
+    }
+    axes?: {
+      x?: string;
+      y?: string;
+      z?: string;
+    };
+    viewport?: {
+      background?: string;
+      controlBackground?: string;
+    };
+    tabIcon?: {
+      color?: string;
+    }
+  }
+}

package/src/themes/wbTheme.stories.tsx

@@ -0,0 +1,64 @@
+import { wbTheme } from "./wbTheme";
+import { Meta, StoryObj } from "@storybook/react";
+import { Color, ColorSection } from "./color";
+
+const ColorPalette = () => {
+  return (
+    <div
+      style={{
+        fontFamily: "sans-serif",
+      }}
+    >
+      <ColorSection name="Palette">
+        <Color name="Primary" color={wbTheme.palette.primary.main} />
+        <Color name="Secondary" color={wbTheme.palette.secondary.main} />
+        <Color name="Background" color={wbTheme.palette.background.default} />
+      </ColorSection>
+      <ColorSection name="Text">
+        <Color name="Primary" color={wbTheme.palette.text.primary} />
+        <Color name="Secondary" color={wbTheme.palette.text.secondary} />
+      </ColorSection>
+      <ColorSection name="Button">
+        <Color
+          name="Primary Background"
+          color={wbTheme.buttonPrimary.background}
+        />
+        <Color name="Primary Text" color={wbTheme.buttonPrimary.text} />
+        <Color
+          name="Secondary Background"
+          color={wbTheme.buttonSecondary.background}
+        />
+        <Color name="Secondary Text" color={wbTheme.buttonSecondary.text} />
+        <Color name="Back Background" color={wbTheme.buttonBack.background} />
+        <Color name="Back Text" color={wbTheme.buttonBack.text} />
+      </ColorSection>
+      <ColorSection name="Input Field">
+        <Color name="Background" color={wbTheme.inputField.background} />
+        <Color name="Text" color={wbTheme.inputField.text} />
+        <Color
+          name="Unit Background"
+          color={wbTheme.inputField.unitBackground}
+        />
+        <Color name="Unit Text" color={wbTheme.inputField.unitText} />
+      </ColorSection>
+      <ColorSection name="Sidebar">
+        <Color name="Background" color={wbTheme.sidebar.background} />
+        <Color
+          name="Background Selected"
+          color={wbTheme.sidebar.backgroundSelected}
+        />
+        <Color name="Selected" color={wbTheme.sidebar.selected} />
+      </ColorSection>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ColorPalette> = {
+  component: ColorPalette,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorPalette>;
+
+export const colorPalette: Story = {};

package/src/themes/wbTheme.ts

@@ -0,0 +1,186 @@
+"use client"
+
+import { createTheme, useTheme, type ThemeOptions } from "@mui/material/styles"
+import { defaultsDeep } from "lodash-es"
+
+const baseColors = {
+  white: "#FFFFFF",
+  midnightblue: "#001337",
+  lightbuttonblue: "#47D3FF",
+  midnightgray: "#DDE0E4",
+  midnightgray500: "#828B9B",
+  skyblue500: "#06B8F1",
+  skyblue600: "#0094CE",
+  darkishblue: "#262F42",
+  darkestblue: "#101629",
+  grayishblue: "#505968",
+  darkgrayishblue: "#363c4b",
+  scaryred: "#FF0E65",
+  tealGreen: "#1AC0B2",
+  magenta: "#EA3785",
+}
+
+/** Colors for the dark theme */
+export const darkColors = {
+  primary: baseColors.skyblue500,
+  textDefault: baseColors.white,
+  textInverse: baseColors.darkestblue,
+  textError: baseColors.scaryred,
+  textSubtle: baseColors.midnightgray500,
+  backgroundDefault: baseColors.darkishblue,
+  inputBackgroundDefault: baseColors.darkgrayishblue,
+  borderColorDefault: "#3A4150",
+
+  selectBackground: baseColors.grayishblue,
+  appBarBackground: baseColors.darkestblue,
+  virtualRobot: "#1AC0B2",
+  physicalRobot: "#956FFA",
+  robotViewportBackground: "#1F283A",
+  viewportButtonInactiveBackground: baseColors.darkestblue,
+  viewportButtonHover: baseColors.midnightgray500,
+  viewportButtonActiveBackground: baseColors.skyblue500,
+  tabsBarBackground: baseColors.darkestblue,
+  activeTabBackground: baseColors.darkishblue,
+  omniverseConfigurationSuccess: baseColors.tealGreen,
+  omniverseConfigurationFailure: baseColors.magenta,
+}
+
+/** Colors for the light theme */
+export const lightColors = {
+  primary: baseColors.lightbuttonblue,
+  textDefault: "#18181B",
+  textInverse: baseColors.white,
+  textError: baseColors.scaryred,
+  textSubtle: baseColors.midnightgray500,
+  backgroundDefault: baseColors.white,
+  inputBackgroundDefault: baseColors.white,
+  borderColorDefault: baseColors.midnightgray500,
+
+  selectBackground: "#E4E4E7",
+  appBarBackground: baseColors.white,
+  virtualRobot: "green",
+  physicalRobot: "blue",
+  robotViewportBackground: "#E4E4E7",
+  viewportButtonInactiveBackground: baseColors.midnightgray,
+  viewportButtonHover: baseColors.midnightgray500,
+  viewportButtonActiveBackground: baseColors.lightbuttonblue,
+  tabsBarBackground: baseColors.white,
+  activeTabBackground: baseColors.white,
+  omniverseConfigurationSuccess: baseColors.tealGreen,
+  omniverseConfigurationFailure: baseColors.magenta,
+}
+
+/** Gets the colors for the current theme (light or dark) */
+export function useThemeColors() {
+  return useTheme().palette.mode === "dark" ? darkColors : lightColors
+}
+
+function createRobotPadTheme(
+  mode: "light" | "dark",
+  options: ThemeOptions = {},
+) {
+  const colors = mode === "light" ? lightColors : darkColors
+  return createTheme(
+    defaultsDeep(options, {
+      palette: {
+        mode,
+        primary: {
+          main: colors.primary,
+        },
+        background: {
+          default: colors.backgroundDefault,
+        },
+      },
+      typography: {
+        allVariants: {
+          color: colors.textDefault,
+        },
+      },
+      components: {
+        MuiPaper: {
+          styleOverrides: {
+            root: {
+              backgroundColor: colors.backgroundDefault,
+            },
+          },
+        },
+        MuiTabs: {
+          styleOverrides: {
+            root: {
+              backgroundColor: colors.tabsBarBackground,
+              minHeight: "42px",
+            },
+          },
+        },
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              minHeight: "42px",
+              textTransform: "none",
+              "&.Mui-selected": {
+                color: "inherit",
+                backgroundColor: colors.activeTabBackground,
+              },
+            },
+          },
+        },
+        MuiButton: {
+          defaultProps: {
+            disableElevation: true,
+          },
+          styleOverrides: {
+            root: {
+              textTransform: "none",
+              borderRadius: "10px",
+              fontSize: "14px",
+              fontWeight: 500,
+            },
+          },
+          variants: [
+            {
+              props: { variant: "outlined" },
+              style: {
+                border: "2px solid rgba(255, 255, 255, 0.6)",
+                color: "rgba(255, 255, 255, 0.6)",
+                backgroundColor: "rgba(255, 255, 255, 0.2)",
+                "&:hover": {
+                  backgroundColor: "rgba(255, 255, 255, 0.4)",
+                  border: "2px solid rgba(255, 255, 255, 0.8)",
+                },
+              },
+            },
+          ],
+        },
+        MuiFab: {
+          styleOverrides: {
+            root: {
+              width: "48px",
+              height: "48px",
+              backgroundColor: colors.viewportButtonInactiveBackground,
+              color: colors.textDefault,
+              "&:hover": {
+                backgroundColor: colors.viewportButtonHover,
+              },
+            },
+          },
+          variants: [
+            {
+              props: { variant: "active" },
+              style: {
+                backgroundColor: colors.viewportButtonActiveBackground,
+                color: colors.textInverse,
+                "&:hover": {
+                  backgroundColor: colors.viewportButtonActiveBackground,
+                },
+              },
+            },
+          ],
+        },
+      },
+    }),
+  )
+}
+
+export const darkTheme = createRobotPadTheme("dark")
+export const lightTheme = createRobotPadTheme("light")
+export const wbTheme = darkTheme