@material-ui/core/styles#ThemeOptions TypeScript Examples

The following examples show how to use @material-ui/core/styles#ThemeOptions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Themes.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
customizableLightTheme = (customization: ThemeOptions) => {
  const customizedLightThemeBase = createMuiTheme(
    _merge({}, themeBase, customization)
  );

  return createMuiTheme(
    customizedLightThemeBase,
    _merge({}, defaultOverrides(customizedLightThemeBase), customization)
  );
}
Example #2
Source File: Themes.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
customizableDarkTheme = (customization: ThemeOptions) => {
  const customizedDarkThemeBase = createMuiTheme(
    _merge({}, themeBase, darkThemeBase, customization)
  );

  return createMuiTheme(
    customizedDarkThemeBase,
    _merge({}, defaultOverrides(customizedDarkThemeBase), customization)
  );
}
Example #3
Source File: theme.ts    From amplication with Apache License 2.0 5 votes vote down vote up 
themeOptions: ThemeOptions = {
  palette,
}
Example #4
Source File: Themes.tsx    From firetable with Apache License 2.0 4 votes vote down vote up 
defaultOverrides = (theme: Theme): ThemeOptions => ({
  transitions: {
    easing: { custom: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
  },
  overrides: {
    MuiContainer: {
      root: {
        "@supports (padding: max(0px))": {
          paddingLeft: `max(${theme.spacing(2)}px, env(safe-area-inset-left))`,
          paddingRight: `max(${theme.spacing(
            2
          )}px, env(safe-area-inset-right))`,

          "@media (min-width: 640px)": {
            paddingLeft: `max(${theme.spacing(
              3
            )}px, env(safe-area-inset-left))`,
            paddingRight: `max(${theme.spacing(
              3
            )}px, env(safe-area-inset-right))`,
          },
        },
      },
    },
    MuiTooltip: {
      tooltip: theme.typography.caption,
    },
    MuiButton: {
      root: {
        minHeight: 32,
        padding: theme.spacing(0.25, 2),
      },
      sizeSmall: { minHeight: 30 },
      sizeLarge: { minHeight: 48 },

      contained: {
        borderRadius: 500,
        boxShadow: "none",
      },
      containedSizeLarge: { padding: theme.spacing(1, 4) },

      outlined: { padding: theme.spacing(3 / 8, 15 / 8) },
      outlinedPrimary: {
        // Same as outlined text field
        borderColor: fade(theme.palette.divider, 0.23),
      },
      outlinedSizeLarge: {
        padding: theme.spacing(1, 4),
        borderRadius: 500,

        "&$outlinedPrimary": { borderColor: theme.palette.primary.main },
      },

      iconSizeMedium: {
        "& > *:first-child": { fontSize: 24 },
      },
    },
    MuiSvgIcon: {
      fontSizeLarge: { fontSize: toRem(36) },
    },
    // Override text field label
    MuiFormLabel: {
      root: {
        ...theme.typography.subtitle2,
        lineHeight: 1,
      },
    },
    // Override radio & checkbox labels
    MuiFormControlLabel: {
      root: { display: "flex" },
      label: theme.typography.body1,
    },
    MuiChip: {
      root: {
        borderRadius: 4,
        maxWidth: "100%",

        height: "auto",
        minHeight: 32,

        color: theme.palette.text.secondary,
      },
      label: {
        ...theme.typography.caption,
        color: "inherit",
        padding: theme.spacing(1, 1.5),
        // whiteSpace: "normal",

        "$outlined &": {
          paddingTop: theme.spacing(0.875),
          paddingBottom: theme.spacing(0.875),
        },
      },
      sizeSmall: { minHeight: 24 },
      labelSmall: {
        padding: theme.spacing(0.5, 1.5),
      },

      outlined: {
        backgroundColor: theme.palette.action.selected,
        borderColor: theme.palette.action.selected,
      },
      outlinedPrimary: {
        backgroundColor: fade(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
      },

      deleteIcon: { color: "inherit" },
    },
    MuiBadge: {
      badge: {
        ...theme.typography.caption,
        fontFeatureSettings: '"tnum"',
      },
    },
    MuiPaper: {
      root: {
        backgroundColor: "var(--bg-paper)",
        "--bg-paper": theme.palette.background.paper,
      },
      rounded: { borderRadius: 8 },
      // Dark theme paper elevation backgrounds
      ...(() => {
        const classes: Record<string, any> = {};
        for (let i = 0; i <= 24; i++) {
          if (theme.palette.background.elevation === undefined) continue;

          let closestElevation = i;
          for (let j = i; j > 0; j--) {
            if (theme.palette.background.elevation[j] !== undefined) {
              closestElevation = j;
              break;
            }
          }

          classes["elevation" + i] = {
            "&&": {
              "--bg-paper":
                theme.palette.background.elevation[closestElevation],
            },
          };
        }
        return classes;
      })(),
    },
    MuiSlider: {
      disabled: {},
      rail: {
        backgroundColor: "#e7e7e7",
        opacity: 1,
      },

      mark: {
        width: 4,
        height: 4,
        borderRadius: "50%",
        marginLeft: -2,
        marginTop: -1,
        backgroundColor: "#69696a",
        "$disabled &": { backgroundColor: "currentColor" },
      },
      markActive: {
        opacity: 1,
        backgroundColor: "currentColor",
        "$disabled &": { backgroundColor: "currentColor" },
      },

      thumb: {
        width: 16,
        height: 16,
        marginTop: -7,
        marginLeft: -8,

        "$disabled &": {
          width: 12,
          height: 12,
          marginTop: -5,
          marginLeft: -6,
        },
      },

      valueLabel: {
        top: -22,
        left: "calc(-25%)",
        ...theme.typography.caption,
        color: theme.palette.primary.main,

        "& > *": {
          width: "auto",
          minWidth: 24,
          height: 24,

          whiteSpace: "nowrap",
          borderRadius: 500,

          padding: theme.spacing(0, 1),
          paddingRight: theme.spacing(0.875),
        },
        "& *": { transform: "none" },
      },
      markLabel: theme.typography.caption,
    },
    MuiFormHelperText: {
      contained: {
        marginLeft: theme.spacing(1.5),
        marginRight: theme.spacing(1.5),
      },
    },
    MuiListItemIcon: {
      root: { minWidth: theme.spacing(40 / 8) },
    },

    MuiSnackbar: {
      root: {
        ..._omit(theme.typography.overline, ["color"]),

        "&& > *": {
          ..._mapValues(
            _omit(theme.typography.overline, ["color"]),
            () => "inherit"
          ),
          alignItems: "center",
        },
      },
    },
    MuiSnackbarContent: {
      root: {
        backgroundColor: antlerPalette.aGray[700],
        color: theme.palette.common.white,
        userSelect: "none",

        padding: theme.spacing(0.5, 2),
        boxShadow: "none",
      },

      message: {
        padding: theme.spacing(1, 2),
      },
    },
  },
  props: {
    MuiTypography: {
      variantMapping: {
        subtitle1: "div",
        subtitle2: "div",
      },
    },
    MuiRadio: { color: "primary" },
    MuiCheckbox: { color: "primary" },
    MuiButton: { color: "primary" },
    MuiTabs: {
      indicatorColor: "primary",
      textColor: "primary",
    },
    MuiCircularProgress: { size: 44 },
    // Select: show dropdown below text field to follow new Material spec
    MuiSelect: {
      MenuProps: {
        getContentAnchorEl: null,
        anchorOrigin: { vertical: "bottom", horizontal: "center" },
        transformOrigin: { vertical: "top", horizontal: "center" },
      },
    },
    MuiLink: {
      color: "primary",
      underline: "hover",
    },
    MuiChip: { deleteIcon: <ClearIcon /> },
    MuiTextField: { variant: "filled" },
    MuiDialog: {
      PaperProps: { elevation: 4 },
    },
  },
})
Example #5
Source File: theme.ts    From parity-bridges-ui with GNU General Public License v3.0 4 votes vote down vote up 
light: ThemeOptions = {
  typography: {
    allVariants: {
      color: paletteLight.text && paletteLight.text.primary
    },
    fontFamily:
      'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, Segoe UI, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Web3-Regular"',
    h1: {
      fontWeight: 500,
      fontSize: 30,
      lineHeight: '115%',
      letterSpacing: '-0.02em'
    },
    h2: {
      fontWeight: 600,
      fontSize: 21,
      lineHeight: '120%'
    },
    h3: {
      fontWeight: 600,
      fontSize: 18,
      lineHeight: '120%'
    },
    h4: {
      fontWeight: 500,
      fontSize: 14,
      lineHeight: '120%',
      color: grey[800]
    },
    body1: {
      fontWeight: 400,
      fontSize: 14,
      lineHeight: '140%',
      color: grey[800]
    },
    body2: {
      fontWeight: 400,
      fontSize: 12,
      lineHeight: '140%'
    },
    button: {
      fontWeight: 500,
      fontSize: 16,
      lineHeight: '140%',
      letterSpacing: 0.2,
      textTransform: 'none'
    },
    subtitle1: {
      fontFamily: 'SFMono-Regular, Consolas , Liberation Mono, Menlo, monospace',
      fontWeight: 400,
      fontSize: 20,
      lineHeight: '120%'
    },
    subtitle2: {
      fontFamily: 'SFMono-Regular, Consolas , Liberation Mono, Menlo, monospace',
      fontWeight: 400,
      fontSize: 11,
      lineHeight: '135%',
      color: grey[700],
      letterSpacing: 0.1
    },
    overline: {
      fontWeight: 500,
      fontSize: 14,
      letterSpacing: 0.3,
      textTransform: 'uppercase'
    }
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': {
          fontFamily: 'Web3-Regular',
          fontStyle: 'normal',
          fontDisplay: 'swap',
          fontWeight: 400,
          src: `
              local('Web3-Regular'),
              url(${Web3Regular}) format('woff'),
              url(${Web3Regular2}) format('woff2')
            `
        },
        '.Web3Icon': {
          fontFamily: 'Web3-Regular !important',
          letterSpacing: 0,
          textTransform: 'lowercase'
        }
      }
    }
  },
  palette: paletteLight,
  shadows: shadows
}