@vention/machine-ui 3.29.0 → 3.29.1-test.0

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

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