feat: Added new NOVA theme (#75)

src/components/SelectableFab.tsx

@@ -0,0 +1,47 @@
+import { Fab, styled, type FabProps } from "@mui/material"
+
+const StyledSelectableFab = styled(Fab, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<CodeFabProps>(({ theme }) => ({
+  borderRadius: "20px",
+
+  "&:hover": {
+    background: theme.palette.backgroundPaperElevation?.[7],
+  },
+
+  variants: [
+    {
+      props: ({ selected }) => !selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[0],
+        color: theme.palette.action.disabled,
+        "> img": {
+          opacity: 0.4,
+        },
+      },
+    },
+    {
+      props: ({ selected }) => selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[11],
+        border: `1px solid ${theme.palette.divider}`,
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  ],
+}))
+
+type CodeFabProps = {
+  selected?: boolean
+} & Omit<FabProps, "variant" | "color">
+
+export function SelectableFab({ selected, ...props }: CodeFabProps) {
+  return (
+    <StyledSelectableFab
+      selected={selected}
+      {...props}
+      color={"secondary"}
+      variant="circular"
+    />
+  )
+}

src/components/VelocitySlider.tsx

@@ -40,6 +40,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
       </Typography>
       <Slider
         value={props.velocity}
+        color="secondary"
         onChange={onSliderChange}
         min={props.min}
         max={props.max}

src/components/jogging/JoggingActivationRequired.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material"
+import { Button, Stack, useTheme } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import type React from "react"
 import { useTranslation } from "react-i18next"
@@ -9,14 +9,15 @@ import type { JoggingStore } from "./JoggingStore"
 export const JoggingActivationRequired = observer(
   ({ store, children }: { store: JoggingStore; children: React.ReactNode }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function renderOverlay() {
       if (store.activationState === "inactive" && !store.activationError) {
         return (
           <TransparentOverlay
             sx={{
               borderRadius: "6px",
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <Button
@@ -33,7 +34,7 @@ export const JoggingActivationRequired = observer(
         return (
           <TransparentOverlay
             sx={{
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <LoadingCover

src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,12 +1,14 @@
-import { Button, Typography } from "@mui/material"
+import { Add, Remove } from "@mui/icons-material"
+import { IconButton, Typography } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import { useRef, type ReactNode } from "react"
-import { useAnimationFrame } from "../utils/hooks"
 import { externalizeComponent } from "../../externalizeComponent"
+import type { AxisControlComponentColors } from "../../themes/themeTypes"
+import { useAnimationFrame } from "../utils/hooks"
 
 type JoggingCartesianAxisControlProps = {
-  color?: string
+  colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
   startJogging: (direction: "-" | "+") => void
@@ -17,7 +19,7 @@ type JoggingCartesianAxisControlProps = {
 export const JoggingCartesianAxisControl = externalizeComponent(
   observer(
     ({
-      color,
+      colors,
       label,
       getDisplayedValue,
       startJogging,
@@ -35,8 +37,6 @@ export const JoggingCartesianAxisControl = externalizeComponent(
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-      color = color || "#F14D42"
-
       function onPointerDownMinus(ev: React.PointerEvent) {
         // Stop right click from triggering jog
         if (ev.button === 0) startJogging("-")
@@ -46,35 +46,46 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         if (ev.button === 0) startJogging("+")
       }
 
+      if (!colors) {
+        colors = {
+          color: "#fff",
+          backgroundColor: "#000",
+          borderColor: "#000",
+          buttonBackgroundColor: "#000",
+        }
+      }
+
       return (
-        <Stack height="72px" direction="row" {...rest}>
-          <Button
+        <Stack height="72px" direction="row" justifyContent="center" {...rest}>
+          <IconButton
             onPointerDown={onPointerDownMinus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "16px 0px 0px 16px",
-
+              borderLeft: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"-"}
-          </Button>
+            <Remove />
+          </IconButton>
 
           <Stack
             spacing="6px"
             sx={{
-              width: "184px",
-              backgroundColor: color,
+              width: "150px",
+              backgroundColor: colors.backgroundColor,
               alignItems: "center",
               justifyContent: "center",
               opacity: "0.9",
@@ -94,35 +105,37 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               height="22px"
               sx={{
                 fontSize: "15px",
-                color: "white",
+                color: colors.color,
               }}
               ref={valueContainerRef}
             >
               {getDisplayedValue()}
             </Typography>
           </Stack>
 
-          <Button
+          <IconButton
             onPointerDown={onPointerDownPlus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "0px 16px 16px 0px",
-
+              borderRight: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"+"}
-          </Button>
+            <Add />
+          </IconButton>
         </Stack>
       )
     },

src/components/jogging/JoggingCartesianTab.tsx

@@ -3,10 +3,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useTheme,
 } from "@mui/material"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
-import type { ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
@@ -28,8 +28,15 @@ type JoggingCartesianOpts = {
 }
 
 export const JoggingCartesianTab = observer(
-  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+  }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function onMotionTypeChange(
       _event: React.MouseEvent<HTMLElement>,
@@ -119,17 +126,17 @@ export const JoggingCartesianTab = observer(
     const axisList = [
       {
         id: "x",
-        color: "#F14D42",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.X,
         icon: <XAxisIcon />,
       },
       {
         id: "y",
-        color: "#42A705",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Y,
         icon: <YAxisIcon />,
       },
       {
         id: "z",
-        color: "#0075FF",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Z,
         icon: <ZAxisIcon />,
       },
     ] as const
@@ -145,7 +152,7 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} justifyContent="space-between">
+      <Stack flexGrow={1} gap={4}>
         <Stack>
           {/* Show Wandelscript string for the current coords */}
           <JoggingCartesianValues store={store} />
@@ -169,6 +176,7 @@ export const JoggingCartesianTab = observer(
             onChange={onMotionTypeChange}
             exclusive
             aria-label={t("Jogging.Cartesian.MotionType.lb")}
+            sx={{ justifyContent: "center" }}
           >
             <ToggleButton value="translate">
               {t("Jogging.Cartesian.Translation.bt")}
@@ -194,7 +202,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>
@@ -231,7 +239,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>

src/components/jogging/JoggingOptions.tsx

@@ -44,6 +44,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-coord-select"
             value={store.selectedCoordSystemId}
+            size="small"
+            variant="filled"
             displayEmpty={true}
             onChange={(event) => {
               store.setSelectedCoordSystemId(event.target.value as string)
@@ -64,6 +66,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-tcp-select"
             value={store.selectedTcpId}
+            size="small"
+            variant="filled"
             onChange={(event) => {
               store.setSelectedTcpId(event.target.value as string)
             }}
@@ -92,7 +96,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         }}
       >
         {/* Orientation */}
-        <Stack width="35%">
+        <Stack width="50%">
           <InputLabel id="orientation-select">
             {t("Jogging.Cartesian.Orientation.lb")}
           </InputLabel>
@@ -103,20 +107,22 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
             aria-labelledby="orientation-select"
             disabled={store.isLocked}
           >
-            <ToggleButton value="coordsys">
+            <ToggleButton value="coordsys" sx={{ flexGrow: 1 }}>
               <OrientationCoordSysIcon />
             </ToggleButton>
-            <ToggleButton value="tool">
+            <ToggleButton value="tool" sx={{ flexGrow: 1 }}>
               <OrientationToolIcon />
             </ToggleButton>
           </ToggleButtonGroup>
         </Stack>
 
         {/* Increment selection */}
-        <Stack width="65%">
+        <Stack width="50%">
           <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
           <Select
             labelId="jogging-increment-select"
+            size="small"
+            variant="filled"
             value={store.activeDiscreteIncrement?.id || "continuous"}
             onChange={(event) => {
               store.setSelectedIncrementId(