Generalise use of themes

src/diamondTheme.ts → src/phoebusTheme.ts

@@ -1,6 +1,6 @@
 import { createTheme } from "@mui/material/styles";
 
-export const diamondTheme = createTheme({
+export const phoebusTheme = createTheme({
   palette: {
     primary: {
       main: "#D2D2D2",

src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ActionButton /> > it matches the snapshot 1`] = `
 <button
-  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q0v14n-MuiButtonBase-root-MuiButton-root"
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-5uchfp-MuiButtonBase-root-MuiButton-root"
   disabled={false}
   onBlur={[Function]}
   onClick={[MockFunction spy]}

src/ui/widgets/ActionButton/actionButton.tsx

@@ -20,9 +20,7 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { styled, Button as MuiButton } from "@mui/material";
-
-import { diamondTheme } from "../../../diamondTheme";
+import { styled, Button as MuiButton, useTheme } from "@mui/material";
 
 export interface ActionButtonProps {
   text: string;
@@ -63,17 +61,18 @@ const Button = styled(MuiButton)({
 export const ActionButtonComponent = (
   props: ActionButtonProps
 ): JSX.Element => {
+  const theme = useTheme();
   const {
     enabled = true,
-    foregroundColor = diamondTheme.palette.primary.contrastText,
+    foregroundColor = theme.palette.primary.contrastText,
     rotationStep = 0,
     transparent = false
   } = props;
 
   const backgroundColor = transparent
     ? "transparent"
-    : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
-  const font = props.font?.css() ?? diamondTheme.typography;
+    : (props.backgroundColor?.toString() ?? theme.palette.primary.main);
+  const font = props.font?.css() ?? theme.typography;
   const border = props.border?.css() ?? null;
 
   return (

src/ui/widgets/BoolButton/__snapshots__/boolButton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<BoolButton /> > it renders a button with default values 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1rvqe9o-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1d1kta9-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -29,7 +29,7 @@ exports[`<BoolButton /> > it renders a button with default values 1`] = `
 exports[`<BoolButton /> > it renders a button with led and overwrites default values 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-ry8voz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mp9lyf-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -55,7 +55,7 @@ exports[`<BoolButton /> > it renders a button with led and overwrites default va
 exports[`<BoolButton /> > on click change text and led colour  1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-ry8voz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-mp9lyf-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >

src/ui/widgets/BoolButton/boolButton.tsx

@@ -16,8 +16,7 @@ import classes from "./boolButton.module.css";
 import { writePv } from "../../hooks/useSubscription";
 import { DType } from "../../../types/dtypes";
 import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
-import { Button as MuiButton, styled } from "@mui/material";
-import { diamondTheme } from "../../../diamondTheme";
+import { Button as MuiButton, styled, useTheme } from "@mui/material";
 
 // For HTML button, these are the sizes of the buffer on
 // width and height. Must take into account when allocating
@@ -83,11 +82,12 @@ export type BoolButtonComponentProps = InferWidgetProps<
 export const BoolButtonComponent = (
   props: BoolButtonComponentProps
 ): JSX.Element => {
+  const theme = useTheme();
   const {
     width = WIDGET_DEFAULT_SIZES["bool_button"][0],
     height = WIDGET_DEFAULT_SIZES["bool_button"][1],
-    foregroundColor = diamondTheme.palette.primary.contrastText,
-    backgroundColor = diamondTheme.palette.primary.main,
+    foregroundColor = theme.palette.primary.contrastText,
+    backgroundColor = theme.palette.primary.main,
     pvName,
     value,
     onState = 1,
@@ -101,7 +101,7 @@ export const BoolButtonComponent = (
     enabled = true
   } = props;
 
-  const font = props.font?.css() ?? diamondTheme.typography;
+  const font = props.font?.css() ?? theme.typography;
 
   // These could be overwritten by  PV labels
   let { onLabel = "On", offLabel = "Off" } = props;

src/ui/widgets/Checkbox/checkbox.tsx

@@ -13,9 +13,9 @@ import { registerWidget } from "../register";
 import {
   FormControlLabel as MuiFormControlLabel,
   Checkbox as MuiCheckbox,
-  styled
+  styled,
+  useTheme
 } from "@mui/material";
-import { diamondTheme } from "../../../diamondTheme";
 
 export const CheckboxProps = {
   label: StringPropOpt,
@@ -61,6 +61,7 @@ export type CheckboxComponentProps = InferWidgetProps<typeof CheckboxProps> &
 export const CheckboxComponent = (
   props: CheckboxComponentProps
 ): JSX.Element => {
+  const theme = useTheme();
   const { enabled = true } = props;
   const [checked, setChecked] = useState(true);
 
@@ -74,9 +75,9 @@ export const CheckboxComponent = (
       sx={{
         color:
           props.foregroundColor?.toString() ??
-          diamondTheme.palette.primary.contrastText,
+          theme.palette.primary.contrastText,
         ".MuiFormControlLabel-label": {
-          fontFamily: props.font?.css() ?? diamondTheme.typography
+          fontFamily: props.font?.css() ?? theme.typography
         }
       }}
       control={
@@ -85,9 +86,9 @@ export const CheckboxComponent = (
           onChange={handleChange}
           sx={{
             padding: 0,
-            color: diamondTheme.palette.primary.main,
+            color: theme.palette.primary.main,
             "&.Mui-checked": {
-              color: diamondTheme.palette.primary.main
+              color: theme.palette.primary.main
             }
           }}
         />

src/ui/widgets/ChoiceButton/__snapshots__/choiceButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`<BoolButton /> > it renders ChoiceButton with default props 1`] = `
   >
     <button
       aria-pressed="false"
-      class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-6n663-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-45gy8m-MuiButtonBase-root-MuiToggleButton-root"
       tabindex="0"
       type="button"
       value="0"
@@ -17,7 +17,7 @@ exports[`<BoolButton /> > it renders ChoiceButton with default props 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-6n663-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-45gy8m-MuiButtonBase-root-MuiToggleButton-root"
       tabindex="0"
       type="button"
       value="1"
@@ -36,7 +36,7 @@ exports[`<BoolButton /> > pass props to widget 1`] = `
   >
     <button
       aria-pressed="true"
-      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-selected Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-17lpp1x-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-selected Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1xzf5k3-MuiButtonBase-root-MuiToggleButton-root"
       disabled=""
       tabindex="-1"
       type="button"
@@ -46,7 +46,7 @@ exports[`<BoolButton /> > pass props to widget 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17lpp1x-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1xzf5k3-MuiButtonBase-root-MuiToggleButton-root"
       disabled=""
       tabindex="-1"
       type="button"
@@ -56,7 +56,7 @@ exports[`<BoolButton /> > pass props to widget 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-17lpp1x-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1xzf5k3-MuiButtonBase-root-MuiToggleButton-root"
       disabled=""
       tabindex="-1"
       type="button"
@@ -66,7 +66,7 @@ exports[`<BoolButton /> > pass props to widget 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-17lpp1x-MuiButtonBase-root-MuiToggleButton-root"
+      class="MuiButtonBase-root Mui-disabled MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedVertical Mui-disabled MuiToggleButton-root Mui-disabled MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1xzf5k3-MuiButtonBase-root-MuiToggleButton-root"
       disabled=""
       tabindex="-1"
       type="button"

src/ui/widgets/ChoiceButton/choiceButton.tsx

@@ -17,9 +17,9 @@ import { writePv } from "../../hooks/useSubscription";
 import {
   ToggleButton as MuiToggleButton,
   styled,
-  ToggleButtonGroup
+  ToggleButtonGroup,
+  useTheme
 } from "@mui/material";
-import { diamondTheme } from "../../../diamondTheme";
 import { Color } from "../../../types";
 
 const ChoiceButtonProps = {
@@ -67,6 +67,7 @@ const ToggleButton = styled(MuiToggleButton)({
 export const ChoiceButtonComponent = (
   props: ChoiceButtonComponentProps
 ): JSX.Element => {
+  const theme = useTheme();
   const {
     width = 100,
     height = 43,
@@ -76,11 +77,11 @@ export const ChoiceButtonComponent = (
     pvName,
     items = ["Item 1", "Item 2"],
     horizontal = true,
-    foregroundColor = diamondTheme.palette.primary.contrastText,
-    backgroundColor = diamondTheme.palette.primary.main,
+    foregroundColor = theme.palette.primary.contrastText,
+    backgroundColor = theme.palette.primary.main,
     selectedColor = Color.fromRgba(200, 200, 200)
   } = props;
-  const font = props.font?.css() ?? diamondTheme.typography;
+  const font = props.font?.css() ?? theme.typography;
   const [selected, setSelected] = useState(value?.getDoubleValue());
 
   // Use items from file, unless itemsFRomPv set

src/ui/widgets/DynamicPage/dynamicPage.tsx

@@ -22,6 +22,7 @@ import { EmbeddedDisplay } from "../EmbeddedDisplay/embeddedDisplay";
 import { Color } from "../../../types/color";
 import { RelativePosition } from "../../../types/position";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
+import { useTheme } from "@mui/material";
 
 const DynamicPageProps = {
   location: StringProp,
@@ -34,6 +35,7 @@ const DynamicPageProps = {
 export const DynamicPageComponent = (
   props: InferWidgetProps<typeof DynamicPageProps>
 ): JSX.Element => {
+  const theme = useTheme();
   const style = commonCss(props);
   const fileContext = useContext(FileContext);
 
@@ -69,6 +71,7 @@ export const DynamicPageComponent = (
             position={new RelativePosition()}
             scalingOrigin={"0 0"}
             scroll={props.scroll ?? false}
+            theme={theme}
           />
           <div
             style={{
@@ -115,6 +118,7 @@ export const DynamicPageComponent = (
             position={new RelativePosition()}
             scalingOrigin={"0 0"}
             scroll={props.scroll ?? false}
+            theme={theme}
           />
         </div>
       </ExitFileContext.Provider>

src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx

@@ -24,8 +24,8 @@ import { GroupBoxComponent } from "../GroupBox/groupBox";
 import { useOpiFile } from "./useOpiFile";
 import { useId } from "react-id-generator";
 import { getOptionalValue, trimFromString } from "../utils";
-import { ThemeProvider } from "@mui/material";
-import { diamondTheme } from "../../../diamondTheme";
+import { Theme, ThemeProvider } from "@mui/material";
+import { phoebusTheme } from "../../../phoebusTheme";
 
 const RESIZE_STRINGS = [
   "scroll-widget",
@@ -35,6 +35,10 @@ const RESIZE_STRINGS = [
   "crop-content"
 ];
 
+export interface EmbeddedDisplayPropsExtra {
+  theme?: Theme;
+}
+
 const EmbeddedDisplayProps = {
   ...WidgetPropType,
   file: FilePropType,
@@ -48,7 +52,8 @@ const EmbeddedDisplayProps = {
 };
 
 export const EmbeddedDisplay = (
-  props: InferWidgetProps<typeof EmbeddedDisplayProps>
+  props: InferWidgetProps<typeof EmbeddedDisplayProps> &
+    EmbeddedDisplayPropsExtra
 ): JSX.Element => {
   const description = useOpiFile(props.file);
   const id = useId();
@@ -209,17 +214,21 @@ export const EmbeddedDisplay = (
 
   if (props.border?.style === BorderStyle.GroupBox) {
     return (
-      <MacroContext.Provider value={embeddedDisplayMacroContext}>
-        <GroupBoxComponent name={resolvedName} styleOpt={0}>
-          <ThemeProvider theme={diamondTheme}>{component}</ThemeProvider>
-        </GroupBoxComponent>
-      </MacroContext.Provider>
+      <ThemeProvider theme={props.theme ?? phoebusTheme}>
+        <MacroContext.Provider value={embeddedDisplayMacroContext}>
+          <GroupBoxComponent name={resolvedName} styleOpt={0}>
+            {component}
+          </GroupBoxComponent>
+        </MacroContext.Provider>
+      </ThemeProvider>
     );
   } else {
     return (
-      <MacroContext.Provider value={embeddedDisplayMacroContext}>
-        {component}
-      </MacroContext.Provider>
+      <ThemeProvider theme={props.theme ?? phoebusTheme}>
+        <MacroContext.Provider value={embeddedDisplayMacroContext}>
+          {component}
+        </MacroContext.Provider>
+      </ThemeProvider>
     );
   }
 };

src/ui/widgets/Input/__snapshots__/input.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Input /> > renders an input 1`] = `
 <DocumentFragment>
   <div
-    class="MuiFormControl-root MuiTextField-root css-hbvq8u-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-jhquk5-MuiFormControl-root-MuiTextField-root"
   >
     <div
       class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-quhxjy-MuiInputBase-root-MuiOutlinedInput-root"

src/ui/widgets/Input/input.tsx

@@ -15,8 +15,7 @@ import {
   FloatPropOpt
 } from "../propTypes";
 import { AlarmQuality, DType } from "../../../types/dtypes";
-import { TextField as MuiTextField, styled } from "@mui/material";
-import { diamondTheme } from "../../../diamondTheme";
+import { TextField as MuiTextField, styled, useTheme } from "@mui/material";
 import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
 
 const InputComponentProps = {
@@ -73,6 +72,7 @@ const TextField = styled(MuiTextField)({
 export const SmartInputComponent = (
   props: PVInputComponent & InferWidgetProps<typeof InputComponentProps>
 ): JSX.Element => {
+  const theme = useTheme();
   const {
     enabled = true,
     transparent = false,
@@ -84,11 +84,10 @@ export const SmartInputComponent = (
     height = WIDGET_DEFAULT_SIZES["textupdate"][1]
   } = props;
 
-  const font = props.font?.css() ?? diamondTheme.typography;
+  const font = props.font?.css() ?? theme.typography;
 
   let foregroundColor =
-    props.foregroundColor?.toString() ??
-    diamondTheme.palette.primary.contrastText;
+    props.foregroundColor?.toString() ?? theme.palette.primary.contrastText;
 
   let borderColor = props.border?.css().borderColor ?? "#000000";
   let borderStyle = props.border?.css().borderStyle ?? "solid";
@@ -138,7 +137,7 @@ export const SmartInputComponent = (
           .match(/\d+.\d+/)
           ?.toString() ?? ""
       ) * 16
-    : diamondTheme.typography.fontSize;
+    : theme.typography.fontSize;
 
   const maxRows = multiLine
     ? Math.floor(height / fontSize) - 1 < 1