@wandelbots/wandelbots-js-react-components 1.8.0 → 1.9.0

package/src/themes/theme.ts

@@ -1,150 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,186 +0,0 @@
-"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