@vention/machine-ui 3.27.0

package/src/lib/theme/machine-ui-theme.ts

@@ -0,0 +1,718 @@
+import { createTheme } from "@mui/material/styles"
+
+import { COLORS } from "./colors"
+import { TYPOGRAPHY } from "./typography"
+
+export const machineUiTheme = createTheme({
+  custom: {
+    iconStrokeWidth: "1.01px", // This decimal value is necessary to ensure that the SVG renderer is precise in its calculations
+  },
+  palette: {
+    mode: "light",
+    primary: {
+      main: COLORS.blue[500],
+    },
+    error: {
+      main: COLORS.red[500],
+    },
+    warning: {
+      main: COLORS.amber[500],
+    },
+    info: {
+      main: COLORS.slate[500],
+    },
+    success: {
+      main: COLORS.green[500],
+    },
+    ventionBlue: {
+      main: COLORS.slate[800],
+    },
+    text: {
+      primary: COLORS.slate[900],
+      primaryOnColor: "white",
+      primaryInverse: "white",
+      secondary: COLORS.slate[700],
+      secondaryInverse: "rgba(255,255,255,0.4)",
+      tertiary: COLORS.slate[500],
+      tertiaryInverse: "rgba(255,255,255,0.25)",
+      brand: COLORS.blue[600],
+      negative: COLORS.red[600],
+      warning: COLORS.amber[600],
+      positive: COLORS.green[600],
+    },
+    button: {
+      primary: COLORS.blue[500],
+      primaryHover: COLORS.blue[600],
+      primaryPressed: COLORS.blue[700],
+      primaryDisabled: COLORS.blue[500] + "50",
+      secondary: "white",
+      secondaryHover: COLORS.slate[200],
+      secondaryPressed: COLORS.slate[300],
+      destructive: COLORS.red[500],
+      destructiveHover: COLORS.red[600],
+      destructivePressed: COLORS.red[700],
+      destructiveDisabled: COLORS.red[500] + "50",
+      filled: COLORS.slate[900],
+      filledHover: COLORS.slate[800],
+      filledPressed: COLORS.slate[700],
+      filledDisabled: COLORS.slate[900] + "50",
+      shaded: COLORS.slate[100],
+      shadedHover: COLORS.slate[200],
+      shadedPressed: COLORS.slate[300],
+      shadedDisabled: COLORS.slate[100] + "50",
+    },
+    background: {
+      default: "white",
+      defaultInverse: COLORS.slate[900],
+      brand: COLORS.slate[800],
+      blue: COLORS.blue[600],
+      success: COLORS.green[500],
+      warning: COLORS.amber[400],
+      destructive: COLORS.red[500],
+      slate: COLORS.slate[400],
+      mutedBlue: COLORS.blue[200],
+      mutedSuccess: COLORS.green[200],
+      mutedWarning: COLORS.amber[200],
+      mutedDestructive: COLORS.red[200],
+      mutedSlate: COLORS.slate[200],
+      subtleBlue: COLORS.blue[50],
+      subtleSuccess: COLORS.green[50],
+      subtleWarning: COLORS.amber[50],
+      subtleDestructive: COLORS.red[50],
+      subtleSlate: COLORS.slate[100],
+      surface1: COLORS.slate[50],
+      surface1hover: COLORS.slate[50],
+      surface1active: COLORS.slate[100],
+      surface2: COLORS.slate[100],
+      surface2hover: COLORS.slate[100],
+      surface2active: COLORS.slate[200],
+      surface3: COLORS.slate[200],
+      surface3hover: COLORS.slate[300],
+      surface3active: COLORS.slate[300],
+      surface4: COLORS.slate[300],
+      surface4hover: COLORS.slate[300],
+      surface4active: COLORS.slate[400],
+      inputOutlined: "white",
+      inputShaded: COLORS.slate[100],
+      inputDisabled: COLORS.slate[100],
+      popover: COLORS.slate[800],
+      tab: "white",
+      popoverInverse: COLORS.slate[900],
+      tooltip: COLORS.slate[800],
+    },
+    border: {
+      main: COLORS.slate[200],
+      hover: COLORS.slate[500],
+      active: COLORS.slate[800],
+      inverse: COLORS.slate[100],
+      onColor: COLORS.slate[100],
+      contrast: COLORS.slate[200],
+      white: "white",
+      black: COLORS.slate[900],
+      blue: COLORS.blue[500],
+      blueSubtle: COLORS.blue[300],
+      blueSelected: COLORS.blue[400],
+      success: COLORS.green[500],
+      subtleSuccess: COLORS.green[300],
+      warning: COLORS.amber[500],
+      subtleWarning: COLORS.amber[300],
+      destructive: COLORS.red[500],
+      subtleDestructive: COLORS.red[300],
+      subtleSlate: COLORS.slate[300],
+      default: COLORS.slate[200],
+    },
+    icon: {
+      primary: COLORS.slate[900],
+      inverse: "white",
+      primaryOnColor: "white",
+      secondary: COLORS.slate[700],
+      tertiary: COLORS.slate[400],
+      tertiaryHover: COLORS.slate[500],
+      tertiaryPressed: COLORS.slate[600],
+      brand: COLORS.blue[500],
+      positive: COLORS.green[500],
+      warning: COLORS.amber[500],
+      negative: COLORS.red[500],
+      blue: COLORS.blue[500],
+    },
+    buttonText: {
+      primary: COLORS.slate[900],
+      primaryDisabled: COLORS.slate[900] + "50",
+      primaryOnColor: "white",
+      primaryInverse: "white",
+      secondary: COLORS.slate[500],
+      secondaryInverse: "rgba(255,255,255,0.4)",
+      tertiary: COLORS.slate[300],
+      tertiaryInverse: "rgba(255,255,255,0.25)",
+      brand: COLORS.blue[600],
+      negative: COLORS.red[600],
+      warning: COLORS.amber[600],
+      positive: COLORS.green[600],
+    },
+    misc: {
+      highlight: COLORS.blue[200],
+      scrollbar: COLORS.slate[200],
+      ratingEmojiParts: COLORS.slate[900],
+      sliderDisabled: COLORS.slate[400],
+      stepper: {
+        border: COLORS.slate[200],
+        text: COLORS.slate[900],
+      },
+    },
+  },
+  typography: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: 14,
+    fontWeightBold: 700,
+    fontWeightMedium: 500,
+    fontWeightRegular: 400,
+    fontWeightLight: undefined,
+    caption: undefined,
+    overline: undefined,
+    htmlFontSize: undefined,
+    subtitle1: undefined,
+    subtitle2: undefined,
+    h1: undefined,
+    h2: undefined,
+    h3: undefined,
+    h4: undefined,
+    h5: undefined,
+    h6: undefined,
+    body1: undefined,
+    body2: undefined,
+    button: undefined,
+    ...TYPOGRAPHY,
+  },
+  spacing: [0, 4, 8, 12, 16, 24, 28, 32, 40, 48, 56, 64, 80, 96, 128],
+  shadows: [
+    "none",
+    `0px 1px 2px 0px rgba(2, 6, 23, 0.05)`,
+    `0px 1px 3px 0px rgba(2, 6, 23, 0.10)`,
+    `0px 4px 6px -1px rgba(2, 6, 23, 0.08)`,
+    `0px 10px 15px -3px rgba(2, 6, 23, 0.08)`,
+    `0px 20px 25px -5px rgba(2, 6, 23, 0.08)`,
+    `0px 25px 50px -12px rgba(2, 6, 23, 0.18)`,
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+  ],
+  shape: { borderRadius: 4 },
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variant: "paragraph16Regular",
+      },
+    },
+    MuiChip: {
+      defaultProps: {
+        clickable: false,
+        variant: "offline",
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: "16px",
+          border: "0.5px solid",
+          padding: "0px",
+          gap: "2px",
+          textAlign: "left",
+          height: "16px",
+        },
+        label: {
+          fontFamily: "Inter, sans-serif",
+          fontSize: "12px",
+          fontWeight: 500,
+          lineHeight: "16px",
+          padding: "0px 2px",
+        },
+      },
+      variants: [
+        {
+          props: { variant: "idle" },
+          style: {
+            color: COLORS.blue[600],
+            border: `0.5px solid ${COLORS.blue[300]}`,
+            backgroundColor: COLORS.blue[50],
+          },
+        },
+        {
+          props: { variant: "running" },
+          style: {
+            color: COLORS.green[600],
+            border: `0.5px solid ${COLORS.green[300]}`,
+            backgroundColor: COLORS.green[50],
+          },
+        },
+        {
+          props: { variant: "estop" },
+          style: {
+            color: COLORS.red[600],
+            border: `0.5px solid ${COLORS.red[300]}`,
+            backgroundColor: COLORS.red[50],
+          },
+        },
+        {
+          props: { variant: "offline" },
+          style: {
+            color: COLORS.slate[900],
+            border: `0.5px solid ${COLORS.slate[200]}`,
+            backgroundColor: COLORS.slate[50],
+          },
+        },
+      ],
+    },
+    MuiTextField: {
+      defaultProps: {
+        size: "medium",
+        variant: "outlined",
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: "4px",
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      defaultProps: {
+        notched: false,
+      },
+      styleOverrides: {
+        root: {
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: `${COLORS.slate[400]}`,
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: `${COLORS.blue[400]}`,
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: `${COLORS.red[600]}`,
+            backgroundColor: COLORS.red[50],
+          },
+          "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: `${COLORS.slate[200]}`,
+            backgroundColor: COLORS.slate[100],
+          },
+        },
+        input: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          color: COLORS.slate[900],
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          "&::placeholder": {
+            color: COLORS.slate[600],
+          },
+        },
+        notchedOutline: {},
+      },
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...theme.typography.uiText14SemiBold,
+          transform: "none",
+          transition: "none",
+          position: "relative",
+          color: theme.palette.text.primary,
+          ...theme.typography.h5,
+          "&.Mui-focused": {
+            color: theme.palette.text.primary,
+          },
+          "&.Mui-error": {
+            color: theme.palette.text.primary,
+          },
+        }),
+      },
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          margin: 0,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: "2px",
+          alignSelf: "stretch",
+          ...theme.typography.uiText12Regular,
+          "&.Mui-error": {
+            color: theme.palette.text.negative,
+          },
+        }),
+      },
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: {
+          zIndex: 1,
+          margin: "0px 8px",
+        },
+      },
+    },
+  },
+})
+
+export const machineUiHmiTheme = createTheme({
+  ...machineUiTheme,
+  custom: {
+    ...machineUiTheme.custom,
+    iconStrokeWidth: "1.5px",
+  },
+})
+
+interface PaletteMisc {
+  highlight: string
+  scrollbar: string
+  ratingEmojiParts: string
+  sliderDisabled: string
+  stepper: {
+    border: string
+    text: string
+  }
+}
+
+// module augmentation for custom theme variables
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    heading36Bold: React.CSSProperties
+    heading24SemiBold: React.CSSProperties
+    heading24Medium: React.CSSProperties
+    heading18SemiBold: React.CSSProperties
+    heading16SemiBold: React.CSSProperties
+
+    paragraph18Medium: React.CSSProperties
+    paragraph18Regular: React.CSSProperties
+    paragraph16Medium: React.CSSProperties
+    paragraph16Regular: React.CSSProperties
+    paragraph14Regular: React.CSSProperties
+
+    code14Reg: React.CSSProperties
+    code12Reg: React.CSSProperties
+
+    uiText14SemiBold: React.CSSProperties
+    uiText14Medium: React.CSSProperties
+    uiText14Regular: React.CSSProperties
+
+    uiText12SemiBold: React.CSSProperties
+    uiText12Medium: React.CSSProperties
+    uiText12Regular: React.CSSProperties
+
+    uiTableNumbers14Reg: React.CSSProperties
+    uiTableNumbers12Reg: React.CSSProperties
+
+    hmiText20Regular: React.CSSProperties
+    hmiText20SemiBold: React.CSSProperties
+    hmiText22Regular: React.CSSProperties
+    hmiText22Medium: React.CSSProperties
+    hmiText22SemiBold: React.CSSProperties
+    hmiText28SemiBold: React.CSSProperties
+    hmiText32SemiBold: React.CSSProperties
+  }
+
+  interface TypographyVariantsOptions {
+    heading36Bold?: React.CSSProperties
+    heading24SemiBold?: React.CSSProperties
+    heading24Medium?: React.CSSProperties
+    heading18SemiBold?: React.CSSProperties
+    heading16SemiBold?: React.CSSProperties
+
+    paragraph18Medium?: React.CSSProperties
+    paragraph18Regular?: React.CSSProperties
+    paragraph16Medium?: React.CSSProperties
+    paragraph16Regular?: React.CSSProperties
+    paragraph14Regular?: React.CSSProperties
+
+    code14Reg?: React.CSSProperties
+    code12Reg?: React.CSSProperties
+
+    uiText14SemiBold?: React.CSSProperties
+    uiText14Medium?: React.CSSProperties
+    uiText14Regular?: React.CSSProperties
+
+    uiText12SemiBold?: React.CSSProperties
+    uiText12Medium?: React.CSSProperties
+    uiText12Regular?: React.CSSProperties
+
+    uiTableNumbers14Reg?: React.CSSProperties
+    uiTableNumbers12Reg?: React.CSSProperties
+
+    hmiText20Regular?: React.CSSProperties
+    hmiText20SemiBold?: React.CSSProperties
+    hmiText22Regular?: React.CSSProperties
+    hmiText22Medium?: React.CSSProperties
+    hmiText22SemiBold?: React.CSSProperties
+    hmiText28SemiBold?: React.CSSProperties
+    hmiText32SemiBold?: React.CSSProperties
+  }
+
+  interface Palette {
+    ventionBlue: Palette["primary"]
+    text: TypeText
+    button: ButtonColors
+    buttonText: ButtonTextColors
+    background: TypeBackground
+    border: BorderColors
+    icon: IconColors
+    misc: PaletteMisc
+  }
+
+  interface PaletteOptions {
+    ventionBlue?: PaletteOptions["primary"]
+    text?: Partial<TypeText>
+    button?: ButtonColors
+    buttonText?: ButtonTextColors
+    background?: Partial<TypeBackground>
+    border?: BorderColors
+    icon?: IconColors
+    misc?: PaletteMisc
+  }
+
+  interface TypeText {
+    primary: string
+    primaryOnColor: string
+    primaryInverse: string
+    secondary: string
+    secondaryInverse: string
+    tertiary: string
+    tertiaryInverse: string
+    brand: string
+    negative: string
+    warning: string
+    positive: string
+  }
+
+  interface TypeBackground {
+    default: string
+    defaultInverse: string
+    brand: string
+    blue: string
+    success: string
+    warning: string
+    destructive: string
+    slate: string
+    mutedBlue: string
+    mutedSuccess: string
+    mutedWarning: string
+    mutedDestructive: string
+    mutedSlate: string
+    subtleBlue: string
+    subtleSuccess: string
+    subtleWarning: string
+    subtleDestructive: string
+    subtleSlate: string
+    surface1: string
+    surface1hover: string
+    surface1active: string
+    surface2: string
+    surface2hover: string
+    surface2active: string
+    surface3: string
+    surface3hover: string
+    surface3active: string
+    surface4: string
+    surface4hover: string
+    surface4active: string
+    inputOutlined: string
+    inputShaded: string
+    inputDisabled: string
+    popover: string
+    tab: string
+    popoverInverse: string
+    tooltip: string
+  }
+
+  interface IconColors {
+    primary: string
+    inverse: string
+    primaryOnColor: string
+    secondary: string
+    tertiary: string
+    tertiaryHover: string
+    tertiaryPressed: string
+    brand: string
+    positive: string
+    warning: string
+    negative: string
+    blue: string
+  }
+
+  interface ButtonColors {
+    primary: string
+    primaryHover: string
+    primaryPressed: string
+    primaryDisabled: string
+    secondary: string
+    secondaryHover: string
+    secondaryPressed: string
+    destructive: string
+    destructiveHover: string
+    destructivePressed: string
+    destructiveDisabled: string
+    shaded: string
+    shadedHover: string
+    shadedPressed: string
+    shadedDisabled: string
+    filled: string
+    filledHover: string
+    filledPressed: string
+    filledDisabled: string
+  }
+
+  interface ButtonTextColors {
+    primary: string
+    primaryDisabled: string
+    primaryOnColor: string
+    primaryInverse: string
+    secondary: string
+    secondaryInverse: string
+    tertiary: string
+    tertiaryInverse: string
+    brand: string
+    negative: string
+    warning: string
+    positive: string
+  }
+
+  interface BorderColors {
+    main: string
+    hover: string
+    active: string
+    inverse: string
+    onColor: string
+    contrast: string
+    white: string
+    black: string
+    blue: string
+    blueSubtle: string
+    blueSelected: string
+    success: string
+    subtleSuccess: string
+    warning: string
+    subtleWarning: string
+    destructive: string
+    subtleDestructive: string
+    subtleSlate: string
+    default: string
+  }
+
+  interface MiscellaneousColors {
+    highlight: string
+    scrollbar: string
+    ratingEmojiParts: string
+    sliderDisabled: string
+  }
+
+  interface Theme {
+    custom: {
+      iconStrokeWidth: string
+    }
+  }
+  interface ThemeOptions {
+    custom?: {
+      iconStrokeWidth?: string
+    }
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    // Disable the default typography variants
+    h1: false
+    h2: false
+    h3: false
+    h4: false
+    h5: false
+    h6: false
+    subtitle1: false
+    subtitle2: false
+    body1: false
+    body2: false
+    caption: false
+    overline: false
+    button: false
+
+    // Custom typography variants
+    heading36Bold: true
+    heading24SemiBold: true
+    heading24Medium: true
+    heading18SemiBold: true
+    heading16SemiBold: true
+
+    paragraph18Medium: true
+    paragraph18Regular: true
+    paragraph16Medium: true
+    paragraph16Regular: true
+    paragraph14Regular: true
+
+    code14Reg: true
+    code12Reg: true
+
+    uiText14SemiBold: true
+    uiText14Medium: true
+    uiText14Regular: true
+
+    uiText12SemiBold: true
+    uiText12Medium: true
+    uiText12Regular: true
+
+    uiTableNumbers14Reg: true
+    uiTableNumbers12Reg: true
+
+    hmiText20Regular: true
+    hmiText20SemiBold: true
+    hmiText22Regular: true
+    hmiText22Medium: true
+    hmiText22SemiBold: true
+    hmiText28SemiBold: true
+    hmiText32SemiBold: true
+  }
+}
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    idle: true
+    running: true
+    estop: true
+    offline: true
+    paused: true
+  }
+}
+
+declare module "@mui/material/TextField" {
+  interface TextFieldPropsSizeOverrides {
+    small: true
+    medium: true
+    large: true
+    "x-large": true
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsSizeOverrides {
+    "x-large": true
+  }
+}
+
+declare module "@mui/material/IconButton" {
+  interface IconButtonPropsSizeOverrides {
+    "x-large": true
+  }
+}
+
+// Feel free to extend this further by appending more x's to sizes
+export type Sizes = "xxx-small" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "dynamic"
+
+export type StrictExtract<T, U extends T> = U