styled-components#CSSObject TypeScript Examples

ActionImage = styled.View<Pick<InputStyleProps, 'size' | 'theme'>>(
  ({ size, theme }: InputStyleProps): CSSObject => ({
    borderBottomRightRadius: `${theme.textField.borderRadius}px`,
    borderTopRightRadius: `${theme.textField.borderRadius}px`,
    maxHeight: getFieldHeight(size, theme),
    overflow: 'hidden',
    width: getSizeLarge(theme)
  })
)

Label = styled.Text(({ theme, variant }: VariantStyleProps): CSSObject => ({
  ...getLabelMargin({ theme, variant }),
  color: theme.color.mediumEmphasis,
  fontFamily: theme.rating[variant].label.primary.fontFamily,
  fontSize: theme.rating[variant].label.fontSize,
  fontWeight: theme.rating[variant].label.primary.fontWeight,
  letterSpacing: theme.rating[variant].label.letterSpacing,
  lineHeight: theme.rating[variant].label.fontSize * theme.rating[variant].label.lineHeight
}))

Label = styled.Text(({ theme, color, variant = 'standard' }: BadgeStyleProps): CSSObject => ({
  color: theme.badge.color[color].label,
  fontFamily: theme.badge.label.primary.fontFamily,
  fontSize: theme.badge.label.fontSize,
  fontWeight: theme.badge.label.primary.fontWeight,
  letterSpacing: theme.badge.label.letterSpacing,
  lineHeight: theme.badge[convertPulseToDot(variant)].height,
  textAlignVertical: 'center'
}))

Label = styled.Text<{ theme: Theme }>(({ theme }): CSSObject => ({
  color: getColorMediumEmphasis(theme),
  fontFamily: theme.counter.label.primary.fontFamily,
  fontSize: theme.counter.label.fontSize,
  fontWeight: theme.counter.label.primary.fontWeight,
  letterSpacing: theme.counter.label.letterSpacing,
  lineHeight: theme.counter.label.fontSize * theme.counter.label.lineHeight,
  marginBottom: getSpacingMicro(theme)
}))

Container = styled.View<ContainerStyleProps>(({ size, theme }: ContainerStyleProps): CSSObject => ({
  alignItems: 'center',
  alignSelf: 'flex-start',
  backgroundColor: getColorSurface(theme),
  borderColor: getColorLowEmphasis(theme),
  borderRadius: theme.counter.borderRadius,
  borderWidth: 1,
  flexDirection: 'row',
  height: getSize(theme, size)
}))

Input = styled.TextInput<{ theme: Theme }>(({ theme }): CSSObject => ({
  borderColor: getColorLowEmphasis(theme),
  borderLeftWidth: 1,
  borderRightWidth: 1,
  color: getColorHighEmphasis(theme),
  fontFamily: theme.counter.content.primary.fontFamily,
  fontSize: theme.counter.content.fontSize,
  fontWeight: theme.counter.content.primary.fontWeight,
  height: '100%',
  letterSpacing: theme.counter.content.letterSpacing,
  lineHeight: theme.counter.content.fontSize * theme.counter.content.lineHeight,
  paddingHorizontal: getSpacingSmall(theme),
  textAlign: 'center',
  width: getSizeMediumX(theme)
}))

Box = styled.View<{
  borderColor: string; borderWidth: number;
}>(({ borderColor, borderWidth, theme }): CSSObject => ({
  alignItems: 'center',
  backgroundColor: getColorSurface(theme),
  borderColor,
  borderRadius: getBorderRadiusMedium(theme),
  borderWidth,
  flexDirection: 'row',
  maxWidth: '100%'
}))

HelperText = styled.Text<Pick<HelperTextProps, 'feedback' | 'color'>>(
  ({ color, feedback, theme }): CSSObject => ({
    color: color || getColorMediumEmphasis(theme),
    fontFamily: theme.textField.helperText.primary.fontFamily,
    fontSize: theme.textField.helperText.fontSize,
    fontWeight: theme.textField.helperText.primary.fontWeight,
    letterSpacing: theme.textField.helperText.letterSpacing,
    lineHeight: theme.textField.helperText.fontSize * theme.textField.helperText.lineHeight,
    marginLeft: feedback && getSpacingMicro(theme)
  })
)

Label = styled.Text<Pick<LabelProps, 'color'>>(({ color, theme }): CSSObject => ({
  color: color || getColorMediumEmphasis(theme),
  fontFamily: theme.textField.label.primary.fontFamily,
  fontSize: theme.textField.label.fontSize,
  fontWeight: theme.textField.label.primary.fontWeight,
  letterSpacing: theme.textField.label.letterSpacing,
  lineHeight: theme.textField.label.fontSize * theme.textField.label.lineHeight,
  marginBottom: getSpacingMicro(theme)
}))

Container = styled.View((): CSSObject => ({ width: '100%' }))

ActionIcon = styled.View(({ theme }): CSSObject => ({
  paddingHorizontal: getSpacingTiny(theme)
}))

Content = styled.View(({ theme, variant, align }: VariantStyleProps & AlignStyleProps): CSSObject => ({
  ...getContentMargin({ align, theme, variant }),
  flexDirection: 'row'
}))

Wrapper = styled.View(({ theme, variant, align = 'left' }: VariantStyleProps & AlignStyleProps): CSSObject => ({
  ...getWrapperAlign({ variant }),
  flexDirection: getWrapperDirection({ align, theme, variant })
}))

Container = styled.View((): CSSObject => (
  {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  }
))

HelperTextContainer = styled.View(({ theme }): CSSObject => ({
  alignItems: 'center',
  flexDirection: 'row',
  marginTop: getSpacingMicro(theme)
}))

BoxContainer = styled.View<{ borderWidth: number }>(({ borderWidth, theme }): CSSObject => ({
  borderColor: 'transparent',
  borderRadius: getBorderRadiusMedium(theme),
  borderWidth
}))

Circle = styled(BadgeBase)(({ theme, variant = 'standard' }: BadgeStyleProps): CSSObject => ({
  ...getHorizontalPadding(variant, theme),
  alignContent: 'center',
  justifyContent: 'center'
}))

BadgeBase = styled.View(({ theme, color, variant = 'standard' }: BadgeStyleProps): CSSObject => ({
  ...getWidthByVariant(variant, theme),
  backgroundColor: theme.badge.color[color].background,
  borderRadius: theme.badge[convertPulseToDot(variant)].borderRadius,
  height: theme.badge[convertPulseToDot(variant)].height
}))

Separator = styled.View((): CSSObject => ({
  marginTop: 16
}))

GlobalStyle = (createGlobalStyle as <P extends object = {}>(
  first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<P, Theme>>,
  ...interpolations: Array<Interpolation<ThemedStyledProps<P, Theme>>>
) => GlobalStyleComponent<P, Theme>)`
  ${reset}
  a {
    color: ${({ theme }) => theme.color.primary};
    text-decoration: none;
    transition: color 0.4s ease;
    &:hover {
      color: ${Color.gold};
    }
  }
  b {
    font-weight: 600;
  }
  html {
    overflow-y: scroll;
    scroll-behavior: smooth;
  }
  body {
    min-width: 320px;
  }
  code {
    display: block;
    padding: 16px;
    border-radius: 2px;
    border: 1px ${Color.blackTransparent} solid;
    background: ${Color.white};
    ${({ theme }) => theme.mixins.numeric}
  }
  * {
      box-sizing: border-box;
  }
  body, button, input {
    font-family: 'Poppins', sans-serif;
    color: ${({ theme }) => theme.color.body};
    line-height: 1.3rem;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type=number] {
    -moz-appearance: textfield;
  }

  // Onboard.js
  aside.bn-onboard-custom {
     z-index: 5 !important;
     width: 100% !important;
     height: 100% !important;

     .bn-onboard-modal-content-close:hover {
      background: none;
      opacity: 0.75;
     }

     button:hover {
      background: ${({ theme }) => theme.color.onboardItemHover};
     }

    .bn-onboard-modal-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
      width: inherit;
      max-width: inherit;
      box-sizing: border-box;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      transition: all ease-in;
      background: ${({ theme }) => theme.color.onboardBackground};
    }
    .bn-onboard-modal-content-header {
      font-family: 'Poppins', sans-serif !important;
      color: ${({ theme }) => theme.color.body};
      justify-content: center;
    }
    h3 {
      font-family: 'Poppins', sans-serif !important;
      color: ${({ theme }) => theme.color.body};
      font-weight: 600;
      font-size: 1.125rem;
    }
    .bn-onboard-modal-content-header-icon,
    .bn-onboard-select-description {
      display: none;
    }
    .bn-onboard-icon-button {
      font-weight: normal;
      padding: 0.5rem 1rem;
      width: 100%;
      border: 1px ${({ theme }) => theme.color.defaultBorder} solid;
      border-radius: 0.5rem;
      > :first-child {
        min-width: 32px;
      }
      > span {
        font-weight: 500;
        font-size: 1rem;
        color: ${({ theme }) => theme.color.body};
      }
      &:hover {
        box-shadow: none;
      }
    }
    .bn-onboard-modal-content-close {
      top: 1.5rem;
    }
    .bn-onboard-modal-select-wallets li {
      width: 50%;
    }
    .bn-onboard-modal-select-wallets {
      .bn-onboard-prepare-button {
        color: 1px solid ${({ theme }) => theme.color.body} !important;
        border: 1px ${({ theme }) => theme.color.defaultBorder} solid !important;
      }
    }
    .bn-onboard-select-info-container  {
      justify-content: center !important;

      .bn-onboard-prepare-button {
        display: none;
      }

      span {
        text-align: center;
        color: ${({ theme }) => theme.color.bodyAccent};
        font-size: 0.875rem !important;
        margin: 0 !important;
      }
    }
    .bn-onboard-modal-selected-wallet {
      > *:not(:last-child) {
        margin-bottom: 0.75rem;
      }
    }


    @media (min-width: ${ViewportWidth.s}) {
      .bn-onboard-modal-content {
        position: relative;
        max-width: 28rem;
        border-radius: 0.75rem;
      }
    }
  }

`