@emotion/react#SerializedStyles TypeScript Examples

The following examples show how to use @emotion/react#SerializedStyles. 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: Avatar.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
getAvatarSizeCss = ({ size }: ContainerProps): SerializedStyles => {
  switch (size) {
    case 'preview':
      return previewAvatarCss
    case 'cover':
      return coverAvatarCss
    case 'channel':
      return channelAvatarCss
    case 'channel-card':
      return channelCardAvatarCss
    case 'fill':
      return fillAvatarCss
    case 'bid':
      return bidAvatarCss
    case 'small':
      return smallAvatarCss
    default:
      return defaultAvatarCss
  }
}
Example #2
Source File: Button.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
sizeOverwriteStyles = ({
  size,
  textOnly,
  iconOnly,
}: Pick<TextProps, 'size' | 'textOnly' | 'iconOnly'>): SerializedStyles | null => {
  if (textOnly)
    return css`
      padding-left: 0;
      padding-right: 0;
    `
  if (iconOnly) {
    return null
  }
  switch (size) {
    case 'large':
      return css`
        padding-left: ${sizes(5)};
        padding-right: ${sizes(5)};
      `
    case 'medium':
      return css`
        padding-left: ${sizes(4)};
        padding-right: ${sizes(4)};
      `
    case 'small':
      return css`
        padding-left: ${sizes(3)};
        padding-right: ${sizes(3)};
      `
  }
}
Example #3
Source File: ButtonBase.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
sizeStyles = ({ size }: ButtonBaseStyleProps): SerializedStyles => {
  switch (size) {
    case 'large':
      return css`
        padding: ${sizes(3)};
      `
    case 'medium':
      return css`
        padding: ${sizes(2.5)};
      `
    case 'small':
      return css`
        padding: ${sizes(2)};
      `
  }
}
Example #4
Source File: ButtonBase.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
textOnlyStyles = ({ textOnly }: ButtonBaseStyleProps): SerializedStyles | null =>
  textOnly
    ? css`
        background-color: ${oldColors.transparent};
        box-shadow: none;
        padding: 0;

        &:hover,
        &:focus {
          background-color: ${oldColors.transparent};
          box-shadow: none;
        }

        &:active {
          background-color: ${oldColors.transparent};
          box-shadow: none;
        }
      `
    : null
Example #5
Source File: ButtonBase.styles.ts    From atlas with GNU General Public License v3.0 4 votes vote down vote up 
variantStyles = ({ variant, textOnly, iconOnly }: ButtonBaseStyleProps): SerializedStyles => {
  switch (variant) {
    case 'primary':
      return css`
        background-color: ${oldColors.blue[500]};
        color: ${textOnly ? oldColors.blue[300] : oldColors.gray[50]};

        path {
          fill: ${textOnly && oldColors.blue[300]};
        }

        &:hover,
        &:focus {
          background-color: ${oldColors.blue[700]};
        }

        &:active {
          background-color: ${oldColors.blue[900]};
          color: ${textOnly && oldColors.blue[400]};

          path {
            fill: ${textOnly && oldColors.blue[400]};
          }
        }

        &:disabled,
        &[aria-disabled='true'] {
          ${!textOnly && `background-color: ${oldColors.gray[600]}`};
        }
      `
    case 'secondary':
      return css`
        /* 1px inset border */
        box-shadow: inset 0 0 0 1px ${oldColors.gray[400]};
        color: ${oldColors.gray[50]};

        &:hover,
        &:focus {
          box-shadow: inset 0 0 0 2px ${oldColors.gray[300]};
          border-color: ${oldColors.gray[300]};
        }

        &:active {
          box-shadow: inset 0 0 0 2px ${oldColors.gray[50]};
          color: ${textOnly && oldColors.gray[300]};

          path {
            fill: ${textOnly && oldColors.gray[300]};
          }
        }

        &:disabled,
        &[aria-disabled='true'] {
          opacity: ${iconOnly ? 0.25 : 0.5};
        }
      `
    case 'tertiary':
      return css`
        color: ${oldColors.gray[50]};
        ${iconOnly && `border-radius: 50%`};

        &:hover,
        &:focus {
          background-color: ${oldColors.transparentPrimary[18]};
        }

        &:active {
          background-color: ${oldColors.transparentPrimary[10]};
        }
      `
    case 'destructive':
      return css`
        background-color: ${oldColors.secondary.alert[100]};
        color: ${oldColors.gray[50]};

        &:hover,
        &:focus {
          background-color: ${oldColors.secondary.alert[200]};
        }

        &:active {
          background-color: ${oldColors.secondary.alert[300]};
        }

        &:disabled,
        &[aria-disabled='true'] {
          ${!textOnly && `background-color: ${oldColors.gray[600]}`};
        }
      `
    case 'destructive-secondary':
      return css`
        box-shadow: inset 0 0 0 1px ${oldColors.gray[400]};
        color: ${oldColors.secondary.alert[50]};

        path {
          fill: ${oldColors.secondary.alert[50]};
        }

        &:hover,
        &:focus {
          box-shadow: inset 0 0 0 2px ${oldColors.gray[300]};
        }

        &:active {
          box-shadow: inset 0 0 0 2px ${oldColors.gray[50]};
          color: ${textOnly && oldColors.secondary.alert[100]};

          path {
            fill: ${textOnly && oldColors.secondary.alert[100]};
          }
        }

        &:disabled,
        &[aria-disabled='true'] {
          opacity: ${iconOnly ? 0.25 : 0.5};
        }
      `
    case 'warning':
      return css`
        background-color: ${oldColors.secondary.warning[100]};
        color: ${oldColors.gray[900]};

        path {
          fill: ${oldColors.gray[900]};
        }

        &:hover,
        &:focus {
          background-color: ${oldColors.secondary.warning[200]};
        }

        &:active {
          background-color: ${oldColors.secondary.warning[300]};
        }

        &:disabled,
        &[aria-disabled='true'] {
          ${!textOnly && `background-color: ${oldColors.gray[600]}`};
        }
      `
    case 'warning-secondary':
      return css`
        color: ${oldColors.secondary.warning[100]};
        box-shadow: inset 0 0 0 1px ${oldColors.gray[400]};

        path {
          fill: ${oldColors.secondary.warning[100]};
        }

        &:hover,
        &:focus {
          box-shadow: inset 0 0 0 2px ${oldColors.gray[300]};
        }

        &:active {
          color: ${textOnly && oldColors.secondary.warning[300]};
          box-shadow: inset 0 0 0 2px ${oldColors.gray[50]};

          path {
            fill: ${textOnly && oldColors.secondary.warning[300]};
          }
        }

        &:disabled,
        &[aria-disabled='true'] {
          opacity: ${iconOnly ? 0.25 : 0.5};
        }
      `
  }
}