@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2

package/src/themes/createDarkTheme.ts

@@ -1,343 +0,0 @@
-import { createTheme, type Theme } from "@mui/material/styles"
-export function createDarkTheme(): Theme {
-  const baseTheme = createTheme({
-    palette: {
-      mode: "dark",
-      text: {
-        primary: "rgba(255, 255, 255, 1)",
-        secondary: "rgba(255, 255, 255, 0.7)",
-        disabled: "rgba(255, 255, 255, 0.38)",
-      },
-      primary: {
-        main: "rgba(142, 86, 252, 1)",
-        dark: "rgba(136, 58, 255, 1)",
-        light: "rgba(157, 131, 246, 1)",
-        contrastText: "rgba(255, 255, 255, 0.87)",
-      },
-      secondary: {
-        main: "rgba(255, 255, 255, 1)",
-        dark: "rgba(255, 255, 255, 0.06)",
-        contrastText: "rgba(255, 255, 255, 0.87)",
-      },
-      tertiary: {
-        main: "rgba(100, 255, 218, 1)",
-        dark: "rgba(38, 166, 154, 1)",
-        light: "rgba(167, 255, 235, 1)",
-        contrastText: "rgba(0, 0, 0, 1)",
-      },
-      error: {
-        main: "rgba(239, 83, 80, 1)",
-        dark: "rgba(229, 57, 53, 1)",
-        light: "rgba(239, 154, 154, 1)",
-        contrastText: "rgba(255, 255, 255, 1)",
-      },
-      warning: {
-        main: "rgba(255, 171, 64, 1)",
-        dark: "rgba(255, 145, 0, 1)",
-        light: "rgba(255, 209, 128, 1)",
-        contrastText: "rgba(0, 0, 0, 0.87)",
-      },
-      success: {
-        main: "rgba(38, 166, 154, 1)",
-        dark: "rgba(0, 121, 107, 1)",
-        light: "rgba(128, 203, 196, 1)",
-        contrastText: "rgba(255, 255, 255, 0.87)",
-      },
-      background: {
-        default: "rgba(2, 6, 23, 1)",
-        paper: "rgba(17, 19, 31, 1)",
-      },
-      action: {
-        active: "rgba(255, 255, 255, 0.56)",
-        hover: "rgba(255, 255, 255, 0.08)",
-        selected: "rgba(255, 255, 255, 0.16)",
-        disabledBackground: "rgba(255, 255, 255, 0.12)",
-        focus: "rgba(255, 255, 255, 0.12)",
-        disabled: "rgba(255, 255, 255, 0.38)",
-      },
-      common: {
-        white: "rgba(255, 255, 255, 1)",
-        black: "rgba(0, 0, 0, 1)",
-      },
-      divider: "rgba(255, 255, 255, 0.12)",
-      backgroundPaperElevation: {
-        0: "rgba(17,19,31,1.0)",
-        1: "rgba(20,22,35,1.0)",
-        2: "rgba(23,25,39,1.0)",
-        3: "rgba(26,28,43,1.0)",
-        4: "rgba(29,31,47,1.0)",
-        5: "rgba(32,34,51,1.0)",
-        6: "rgba(35,37,55,1.0)",
-        7: "rgba(38,40,59,1.0)",
-        8: "rgba(41,43,63,1.0)",
-        9: "rgba(44,46,67,1.0)",
-        10: "rgba(47,49,71,1.0)",
-        11: "rgba(50,52,75,1.0)",
-        12: "rgba(53,55,79,1.0)",
-        13: "rgba(56,58,83,1.0)",
-        14: "rgba(59,61,87,1.0)",
-        15: "rgba(62,64,91,1.0)",
-        16: "rgba(57,63,87,1.0)",
-      },
-    },
-    paletteExt: {
-      primary: {
-        hover: "rgba(142, 86, 252, 0.08)",
-        selected: "rgba(142, 86, 252, 0.16)",
-        focus: "rgba(142, 86, 252, 0.12)",
-        focusVisible: "rgba(142, 86, 252, 0.3)",
-        outlineBorder: "rgba(142, 86, 252, 0.5)",
-      },
-      secondary: {
-        tonal: "rgba(255,255,255,0.1)",
-      },
-    },
-  })
-
-  return {
-    ...baseTheme,
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: {
-          "html, body, *": {
-            scrollbarWidth: "none",
-            msOverflowStyle: "none",
-          },
-
-          "html:hover, body:hover, *:hover": {
-            scrollbarWidth: "thin",
-            scrollbarColor: `${baseTheme.palette.divider} transparent`,
-          },
-
-          // Global styles for DataGrid filter popup
-          ".MuiDataGrid-panelContent": {
-            borderRadius: "16px !important",
-            "& .MuiPaper-root": {
-              borderRadius: "16px !important",
-            },
-          },
-          ".MuiDataGrid-filterForm": {
-            borderRadius: "16px !important",
-            "& .MuiInputBase-root": {
-              borderRadius: "16px !important",
-              "& fieldset": {
-                borderRadius: "16px !important",
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderRadius: "16px !important",
-              },
-            },
-            "& .MuiTextField-root": {
-              "& .MuiInputBase-root": {
-                borderRadius: "16px !important",
-                "& fieldset": {
-                  borderRadius: "16px !important",
-                },
-                "& .MuiOutlinedInput-notchedOutline": {
-                  borderRadius: "16px !important",
-                },
-              },
-            },
-          },
-          ".MuiDataGrid-filterFormValueInput": {
-            "& .MuiInputBase-root": {
-              borderRadius: "16px !important",
-              "& fieldset": {
-                borderRadius: "16px !important",
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderRadius: "16px !important",
-              },
-            },
-          },
-        },
-      },
-      MuiDataGrid: {
-        styleOverrides: {
-          root: {
-            // Main DataGrid styling can go here if needed
-          },
-          panelContent: {
-            borderRadius: "16px !important",
-          },
-          filterForm: {
-            "& .MuiInputBase-root": {
-              borderRadius: "10px !important",
-              "& fieldset": {
-                borderRadius: "10px !important",
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderRadius: "10px !important",
-              },
-            },
-          },
-          filterFormValueInput: {
-            "& .MuiInputBase-root": {
-              borderRadius: "10px !important",
-              "& fieldset": {
-                borderRadius: "10px !important",
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderRadius: "10px !important",
-              },
-            },
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            borderRadius: "10px",
-          },
-        },
-        variants: [
-          {
-            props: { color: "secondary", variant: "contained" },
-            style: {
-              border: `1px solid ${baseTheme.palette.divider}`,
-              background: baseTheme.paletteExt?.secondary?.tonal?.toString(),
-            },
-          },
-          {
-            props: { color: "secondary", variant: "outlined" },
-            style: {
-              border: `1px solid ${baseTheme.palette.divider}`,
-            },
-          },
-        ],
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            color: baseTheme.palette.text.secondary,
-            "&.Mui-selected": {
-              color: baseTheme.palette.text.primary,
-            },
-          },
-        },
-      },
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            background: baseTheme.palette.backgroundPaperElevation?.[1],
-          },
-        },
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: {
-            ".MuiToggleButtonGroup-firstButton": {
-              borderRadius: "10px 0 0 10px",
-            },
-            ".MuiToggleButtonGroup-lastButton": {
-              borderRadius: "0 10px 10px 0",
-            },
-          },
-        },
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            padding: "6px 16px",
-          },
-        },
-      },
-      MuiSelect: {
-        variants: [
-          {
-            props: { variant: "filled" },
-            style: {
-              borderRadius: "10px",
-              "::before, ::after": {
-                visibility: "collapse",
-              },
-              ".MuiInputBase-input": {
-                padding: "6px 16px",
-                borderRadius: "10px",
-              },
-            },
-          },
-        ],
-      },
-      MuiDrawer: {
-        styleOverrides: {
-          paper: {
-            border: "none",
-            boxShadow: "4px 0 8px -4px rgba(0, 0, 0, 0.3)",
-          },
-        },
-      },
-      MuiFab: {
-        styleOverrides: {
-          root: {
-            background: baseTheme.paletteExt?.secondary?.tonal,
-          },
-        },
-        variants: [
-          {
-            props: { color: "primary" },
-            style: {
-              background: baseTheme.palette.primary.main,
-            },
-          },
-        ],
-      },
-    },
-
-    componentsExt: {
-      JoggingPanel: {
-        JoggingCartesian: {
-          Axis: {
-            X: {
-              backgroundColor: "rgba(215, 66, 56, 1)",
-              borderColor: "rgba(215, 66, 56, 1)",
-              buttonBackgroundColor: {
-                default: "rgba(241, 77, 66, 1)",
-                pressed: "rgba(138, 41, 35, 1)",
-                hovered: "rgba(241, 77, 66, 1)",
-                disabled: "rgba(241, 77, 66, 1)",
-              },
-              color: "rgba(255, 198, 198, 1)",
-              labelColor: baseTheme.palette.text.primary,
-            },
-            Y: {
-              backgroundColor: "rgba(20, 151, 108, 1)",
-              borderColor: "rgba(20, 151, 108, 1)",
-              buttonBackgroundColor: {
-                default: "rgba(28, 188, 135, 1)",
-                pressed: "rgba(11, 89, 63, 1)",
-                disabled: "rgba(28, 188, 135, 1)",
-                hovered: "rgba(28, 188, 135, 1)",
-              },
-              color: "rgba(215, 255, 242, 1)",
-              labelColor: baseTheme.palette.text.primary,
-            },
-            Z: {
-              backgroundColor: "rgba(1, 87, 155, 1)",
-              borderColor: "rgba(1, 87, 155, 1)",
-              buttonBackgroundColor: {
-                default: "rgba(2, 136, 209, 1)",
-                pressed: "rgba(2, 64, 114, 1)",
-                disabled: "rgba(2, 136, 209, 1)",
-                hovered: "rgba(2, 136, 209, 1)",
-              },
-              color: "rgba(210, 239, 255, 1)",
-              labelColor: baseTheme.palette.text.primary,
-            },
-          },
-        },
-        JoggingJoint: {
-          Joint: {
-            arrowColor: baseTheme.palette.text.primary,
-          },
-        },
-        VelocitySlider: {
-          sliderLegendColor: baseTheme.palette.text.primary,
-        },
-      },
-    },
-  } as Theme
-}

package/src/themes/createLightTheme.ts

@@ -1,8 +0,0 @@
-import { createDarkTheme } from "./createDarkTheme"
-
-export function createLightTheme() {
-  // Keep the dark theme until we support a light theme
-  const theme = createDarkTheme()
-  theme.palette.mode = "light"
-  return theme
-}

package/src/themes/themeTypes.ts

@@ -1,96 +0,0 @@
-type NovaColorPaletteExtension = {
-  paletteExt?: {
-    primary?: {
-      hover?: string
-      selected?: string
-      focus?: string
-      focusVisible?: string
-      outlineBorder?: string
-    }
-    secondary?: {
-      tonal?: string
-    }
-  }
-}
-
-export interface AxisControlComponentColors {
-  color?: string
-  borderColor?: string
-  backgroundColor?: string
-  buttonBackgroundColor?: {
-    default?: string
-    pressed?: string
-    disabled?: string
-    hovered?: string
-  }
-  labelColor?: string
-}
-
-interface NovaComponentsExtension {
-  componentsExt?: {
-    JoggingPanel?: {
-      JoggingCartesian?: {
-        Axis?: {
-          X?: AxisControlComponentColors
-          Y?: AxisControlComponentColors
-          Z?: AxisControlComponentColors
-          CustomRotation?: AxisControlComponentColors
-        }
-      }
-      JoggingJoint?: {
-        Joint?: {
-          arrowColor?: string
-        }
-      }
-      VelocitySlider?: {
-        sliderLegendColor?: string
-      }
-    }
-  }
-}
-
-interface BackgroundPaperElevation {
-  0?: string
-  1?: string
-  2?: string
-  3?: string
-  4?: string
-  5?: string
-  6?: string
-  7?: string
-  8?: string
-  9?: string
-  10?: string
-  11?: string
-  12?: string
-  13?: string
-  14?: string
-  15?: string
-  16?: string
-  17?: string
-  18?: string
-  19?: string
-  20?: string
-  21?: string
-  22?: string
-  23?: string
-  24?: string
-}
-
-declare module "@mui/material/styles" {
-  interface Palette {
-    tertiary: Palette["primary"]
-    backgroundPaperElevation?: BackgroundPaperElevation
-  }
-
-  interface PaletteOptions {
-    tertiary?: PaletteOptions["primary"]
-    backgroundPaperElevation?: BackgroundPaperElevation
-  }
-
-  interface Theme extends NovaComponentsExtension, NovaColorPaletteExtension {}
-
-  interface ThemeOptions
-    extends NovaComponentsExtension,
-      NovaColorPaletteExtension {}
-}

package/src/themes/theming.ts

@@ -1,29 +0,0 @@
-"use client"
-
-import {
-  createTheme,
-  type Theme,
-  type ThemeOptions,
-} from "@mui/material/styles"
-import { createDarkTheme } from "./createDarkTheme"
-import { createLightTheme } from "./createLightTheme"
-
-/**
- * Create the default Wandelbots Nova Material UI theme, overriding
- * any defaults with the provided theme options.
- */
-export function createNovaMuiTheme(opts: ThemeOptions): Theme {
-  let isDark = true
-  if (opts.palette?.mode === "light") {
-    isDark = false
-  } else if (opts.palette?.mode !== "dark") {
-    const browserPrefersLight =
-      typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-color-scheme: light)")?.matches
-    isDark = !browserPrefersLight
-  }
-
-  const baseTheme = isDark ? createDarkTheme() : createLightTheme()
-
-  return createTheme(baseTheme, opts)
-}

package/src/wb-icons.ts

@@ -1,3 +0,0 @@
-// Icon components (SVG icons for UI and safety bar)
-export * from "./components/safetyBar/icons"
-export * from "./icons"