@mui/material#lighten TypeScript Examples

The following examples show how to use @mui/material#lighten. 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: RadioButton.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledRadioButton = styled('div')(() => ({
  [`& .${classes.radioWrapper}`]: {
    borderRadius: theme.borders.round,
    border: `1px solid ${theme.borders.dark}`,
    padding: theme.spacing(2),
    width: '100%',
    margin: '0 auto',
  },

  [`& .${classes.checked}`]: {
    background: lighten(theme.palette.primary.main, 0.8),
    border: `1px solid ${theme.borders.light}`,
  },

  [`& .${classes.circle}`]: {
    width: 30,
    height: 30,
    border: `1px solid ${theme.palette.primary.dark}`,
    borderRadius: theme.borders.round,
  },

  [`& .${classes.label}`]: {
    fontSize: 20,
    marginLeft: theme.spacing(3),
  },
}))
Example #2
Source File: Footer.tsx    From frontend with MIT License 6 votes vote down vote up 
export default function Footer() {
  return (
    <Container
      component="footer"
      maxWidth={false}
      disableGutters
      sx={(theme) => ({
        backgroundColor: theme.palette.primary.dark,
        color: lighten(theme.palette.primary.main, 0.75),
        '& a': {
          color: lighten(theme.palette.primary.main, 0.75),
          '&:hover': {
            color: lighten(theme.palette.primary.main, 0.55),
          },
        },
      })}>
      <Container maxWidth="lg" disableGutters>
        <Grid
          container
          sx={(theme) => ({
            xs: {
              textAlign: 'center',
              padding: theme.spacing(5, 0),
            },
            textAlign: 'left',
            padding: theme.spacing(5),
          })}>
          <Grid item xs={12} sm={8} md={5}>
            <InfoGrid />
          </Grid>
          <Grid item xs={12} sm={4} md={7}>
            <FooterLinks />
          </Grid>
        </Grid>
      </Container>
    </Container>
  )
}
Example #3
Source File: AdminMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #4
Source File: DevelopmentMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #5
Source File: DonationMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #6
Source File: PrivateMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGrid = styled(Grid)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #7
Source File: ProjectMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #8
Source File: PublicMenu.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledGrid = styled(Grid)(({ theme }) => ({
  [`& .${classes.dropdownLinkButton}`]: {
    '&:hover': {
      backgroundColor: lighten(theme.palette.primary.main, 0.9),
    },
  },

  [`& .${classes.dropdownLinkText}`]: {
    color: theme.palette.primary.dark,
    width: '100%',
    '&:hover': {
      color: theme.palette.primary.main,
    },
  },
}))
Example #9
Source File: HeaderTypography.tsx    From frontend with MIT License 6 votes vote down vote up 
export default function HeaderTypography({ children }: { children: ReactNode }) {
  return (
    <Typography
      variant="h4"
      align="center"
      sx={(theme) => ({
        mt: 10,
        color: lighten(theme.palette.primary.dark, 0.1),
        width: '100%',
      })}>
      {children}
    </Typography>
  )
}
Example #10
Source File: CircleCheckboxField.tsx    From frontend with MIT License 5 votes vote down vote up 
export default function CircleCheckboxField({ name, label, labelProps }: CircleCheckboxField) {
  const { t } = useTranslation('one-time-donation')
  const [field, meta] = useField(name)
  const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
  return (
    <FormControl required component="fieldset" error={Boolean(meta.error) && Boolean(meta.touched)}>
      <FormControlLabel
        sx={
          field.checked
            ? {
                background: lighten(theme.palette.primary.main, 0.8),
                border: `1px solid ${theme.borders.light}`,
              }
            : undefined
        }
        label={<Typography sx={{ fontWeight: 'bold', ml: 1 }}>{label}</Typography>}
        control={
          <Checkbox
            icon={
              <Icon
                sx={(theme) => ({
                  width: 30,
                  height: 30,
                  border: `1px solid ${theme.palette.primary.dark}`,
                  // @ts-expect-error theme doesn't include overrides
                  borderRadius: theme.borders.round,
                })}
              />
            }
            checkedIcon={
              <CheckIcon
                sx={(theme) => ({
                  width: 30,
                  height: 30,
                  border: `1px solid ${theme.palette.primary.main}`,
                  backgroundColor: theme.palette.primary.main,
                  // @ts-expect-error theme doesn't include overrides
                  borderRadius: theme.borders.round,
                  color: '#fff',
                })}
              />
            }
            checked={Boolean(field.value)}
            {...field}
          />
        }
        {...labelProps}
      />
      {Boolean(meta.error) && (
        <FormHelperText error>{helperText ? t(helperText) : 'General Error'}</FormHelperText>
      )}
    </FormControl>
  )
}
Example #11
Source File: ReferencePreview.tsx    From firecms with MIT License 4 votes vote down vote up 
function ReferencePreviewComponent<M extends { [Key: string]: any }>(
    {
        value,
        property,
        onClick,
        size,
        onHover
    }: ReferencePreviewProps) {

    if (typeof property.path !== "string") {
        throw Error("Picked the wrong component ReferencePreviewComponent");
    }

    const reference: EntityReference = value;
    const previewProperties = property.previewProperties;

    const navigationContext = useNavigation();
    const sideEntityController = useSideEntityController();

    const collectionResolver = navigationContext.getCollectionResolver<M>(property.path);
    if (!collectionResolver) {
        throw Error(`Couldn't find the corresponding collection view for the path: ${property.path}`);
    }

    const schema = collectionResolver.schema;

    const {
        entity,
        dataLoading,
        dataLoadingError
    } = useEntityFetch({
        path: reference.path,
        entityId: reference.id,
        schema: collectionResolver.schemaResolver,
        useCache: true
    });

    const listProperties = useMemo(() => {
        let res = previewProperties;
        if (!res || !res.length) {
            res = Object.keys(schema.properties);
        }

        if (size === "small" || size === "regular")
            res = res.slice(0, 3);
        else if (size === "tiny")
            res = res.slice(0, 1);
        return res;
    }, [previewProperties, schema.properties, size]);

    let body: JSX.Element;

    function buildError(error: string, tooltip?: string) {
        return <ErrorView error={error} tooltip={tooltip}/>;
    }

    if (!value) {
        body = buildError("Reference not set");
    }
    // currently not happening since this gets filtered out in PreviewComponent
    else if (!(value instanceof EntityReference)) {
        body = buildError("Unexpected value", JSON.stringify(value));
    } else if (entity && !entity.values) {
        body = buildError("Reference does not exist", reference.path);
    } else {

        body = (
            <>
                <Box sx={{
                    display: "flex",
                    flexDirection: "column",
                    flexGrow: 1,
                    maxWidth: "calc(100% - 60px)",
                    margin: 1
                }}>

                    {size !== "tiny" && (
                        value
                            ? <Box sx={{
                                display: size !== "regular" ? "block" : undefined,
                                whiteSpace: size !== "regular" ? "nowrap" : undefined,
                                overflow: size !== "regular" ? "hidden" : undefined,
                                textOverflow: size !== "regular" ? "ellipsis" : undefined
                            }}>
                                <Typography variant={"caption"}
                                            className={"mono"}>
                                    {value.id}
                                </Typography>
                            </Box>
                            : <Skeleton variant="text"/>)}


                    {listProperties && listProperties.map((key) => {
                        const childProperty = schema.properties[key as string];
                        if (!childProperty) return null;

                        return (
                            <div key={"ref_prev_" + (key as string)}>
                                {entity
                                    ? <PreviewComponent name={key as string}
                                                        value={entity.values[key as string]}
                                                        property={childProperty as AnyProperty}
                                                        size={"tiny"}/>
                                    : <SkeletonComponent
                                        property={childProperty as AnyProperty}
                                        size={"tiny"}/>
                                }
                            </div>
                        );
                    })}

                </Box>
                <Box sx={{
                    margin: "auto"
                }}>
                    {entity &&
                        <Tooltip title={`See details for ${entity.id}`}>
                            <IconButton
                                size={size === "tiny" ? "small" : "medium"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    sideEntityController.open({
                                        entityId: entity.id,
                                        path: entity.path,
                                        schema: schema,
                                        overrideSchemaRegistry: false
                                    });
                                }}>
                                <KeyboardTabIcon fontSize={"small"}/>
                            </IconButton>
                        </Tooltip>}
                </Box>
            </>
        );
    }


    return (
        <Paper elevation={0} sx={(theme) => {
            const clickableStyles = onClick
                ? {
                    tabindex: 0,
                    backgroundColor: onHover ? (theme.palette.mode === "dark" ? lighten(theme.palette.background.default, 0.1) : darken(theme.palette.background.default, 0.15)) : darken(theme.palette.background.default, 0.1),
                    transition: "background-color 300ms ease, box-shadow 300ms ease",
                    boxShadow: onHover ? "0 0 0 2px rgba(128,128,128,0.05)" : undefined,
                    cursor: onHover ? "pointer" : undefined
                }
                : {};
            return ({
                width: "100%",
                display: "flex",
                color: "#838383",
                backgroundColor: darken(theme.palette.background.default, 0.1),
                borderRadius: "2px",
                overflow: "hidden",
                padding: size === "regular" ? 1 : 0,
                itemsAlign: size === "tiny" ? "center" : undefined,
                fontWeight: theme.typography.fontWeightMedium,
                ...clickableStyles
            });
        }}
               onClick={onClick}>

            {body}

        </Paper>
    );

}