Support breakpoints in createUnistyles

[HellYeahOmg]

So I'm creating a new theme and want to add some breakpoints, just like using create createStyleSheet:
export const theme = { components: { typography: { h1: { fontFamily: Platform.OS === 'web' ? 'inherit' : 'Mulish_700Bold', fontSize: { xs: 32, xl: 42, }, fontWeight: '700', lineHeight: { xs: 40, xl: 52, }, }, }, }, } as const

ATM it's not working:

Or maybe there should be completely different way to create component variants.
For instance with BaseText from the docs, just write all the styles inside createStyleSheet, not in the theme itself. Then introduce "variant" prop inside the component and then just choose the desired variant like styles[variant] and pass it down to the component.

Also this way provides access to theme colors and margins, because when you define a theme, there is no way to referrer to another property inside the theme.

[jpudysz]

Could you show me a more extensive example? I didn't quite understand that.

[HellYeahOmg]

Well, there are several problems ATM:

• No access to theme variables during theme creation. For instance, there is a primary button, which takes theme.colors.primary as a background and theme.colors.white for a text color
• No access to media queries
• IMO but if I want to make a button component, I probably expect to export only 1 button component with different props for styling, instead of PrimaryButton, SecondaryButton etc. Same goes for text and other stuff

TLDR: instead of trying to define components in a theme, use kinda styled-components approach

This is what it might look like:

interface ButtonProps extends PropsWithChildren {
  color?: 'primary' | 'alt' | 'white' | 'lightgreen'
  size?: 'default' | 'small'
}

export const Button = ({
  children,
  color = 'primary',
  size = 'default',
}: ButtonProps) => {
  const { styles } = useStyles(stylesheet)

  return (
      <TouchableOpacity style={styles.button(color, size)}>
        <BaseText bold={size === 'default'} style={styles.text(color)}>
          {children}
        </BaseText>
      </TouchableOpacity>
  )
}

const stylesheet = createStyleSheet((theme) => ({
  text: (color: ButtonProps['color']) => ({
    color: color === 'primary' ? theme.colors.white : theme.colors.primary,
  }),
  button: (color: ButtonProps['color'], size: ButtonProps['size']) => {
    let backgroundColor: string

    switch (color) {
      case 'primary':
        backgroundColor = theme.colors.primary
        break
      case 'alt':
        backgroundColor = theme.colors.grey
        break
      case 'white':
        backgroundColor = theme.colors.white
        break
      case 'lightgreen':
        backgroundColor = theme.colors.lightGreen
        break
      default:
        backgroundColor = theme.colors.primary
        break
    }

    return {
      borderRadius: 8,
      backgroundColor,
      alignSelf: 'flex-start',
      paddingVertical: size === 'default' ? 18 : 9,
      paddingHorizontal: size === 'default' ? 60 : 17,
    }
  },
}))

[HellYeahOmg]

Or maybe something like this, IMO more concise & react native approach

interface ButtonProps extends PropsWithChildren {
  color?: 'primary' | 'alt' | 'white' | 'lightgreen'
  size?: 'default' | 'small'
}

export const Button = ({
  children,
  color = 'primary',
  size = 'default',
  style: customStyle = {},
}: ButtonProps) => {
  const { styles } = useStyles(stylesheet)

  return (
    <TouchableOpacity
      style={{
        ...styles.button(size),
        ...styles[color],
        ...customStyle,
      }}
    >
      <BaseText bold={size === 'default'} style={styles.text(color)}>
        {children}
      </BaseText>
    </TouchableOpacity>
  )
}

const stylesheet = createStyleSheet((theme) => ({
  text: (color: ButtonProps['color']) => ({
    color: color === 'primary' ? theme.colors.white : theme.colors.primary,
  }),
  button: (size: ButtonProps['size']) => ({
    borderRadius: 8,
    alignSelf: 'flex-start',
    paddingVertical: size === 'default' ? 18 : 9,
    paddingHorizontal: size === 'default' ? 60 : 17,
  }),
  primary: {
    backgroundColor: theme.colors.primary,
  },
  alt: {
    backgroundColor: theme.colors.grey,
  },
  white: {
    backgroundColor: theme.colors.white,
  },
  lightgreen: {
    backgroundColor: theme.colors.lightGreen,
  },
}))

[HellYeahOmg]

And typography example:

interface TypographyProps extends PropsWithChildren {
  bold?: boolean
  style?: TextStyle
  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'review'
}

export const Typography = ({
  children,
  variant = 'body',
  bold = false,
  style,
}: TypographyProps) => {
  const { styles } = useStyles(textStylesheet)

  return (
    <Text
      style={{
        ...styles.text(bold),
        ...styles[variant],
        ...style,
      }}
    >
      {children}
    </Text>
  )
}

const textStylesheet = createStyleSheet((theme) => ({
  text: (bold: boolean) => ({
    fontWeight: bold ? '700' : '400',
    fontFamily:
      Platform.OS === 'web'
        ? 'inherit'
        : bold
        ? 'Mulish_700Bold'
        : 'Mulish_400Regular',
  }),
  h1: { fontSize: 42, lineHeight: 52 },
  h2: { fontSize: 34, lineHeight: 42 },
  h3: { fontSize: 26, lineHeight: 32 },
  body: { fontSize: 14, lineHeight: 22 },
  review: { fontSize: 10, lineHeight: 22 },
}))

This topic can be closed actually, because the solution in the examples suits me well and the "problem" is resolved. It's up to you @jpudysz to decided whether to add it to docs or not.

[jpudysz]

@HellYeahOmg I don't want to impose any rules for variants, it can be easily built like your example above.
No access to theme variables during theme creation - you can actually access colors in your theme, simply move colors to separate object:

const colors = {...}
const theme = {
      colors,
      components: {
           // access colors here
      }
}

No access to media queries - you can access them, if you pass object to createStyleSheet with your breakpoints it will work out of the box. Remember to add as const to your types.

IMO but if I want to make a button component, I probably expect to export only 1 button component with different props - its up to you how you structure your components. Once again I don't want to force any technique as every app is different.