Skip to main content

Style System V1 vs V2

This guide documents the main changes between version V1 and V2 of the style system.

You will be exposed to this version in older projects.

Overview of Changes​

V2 represents a complete refactor of the internal structure, maintaining the fundamental usage principles while significantly simplifying the API and improving the developer experience.

Key Improvements in V2​

  • Unified API: All functionality through a single style prop
  • Simplified syntax: Less verbosity and greater readability
  • Optimized performance: More efficient internal structure
  • Enhanced TypeScript: Better type inference and autocomplete
  • Integrated responsiveness: Native breakpoint system

API Comparison​

1. Applying Variants​

V1 - Multiple Specific Props​

// V1: Separate props for different types of variants
<View 
  variants={['column', 'padding:4', 'center', 'fullWidth']} 
  responsiveVariants={{ small: ['padding:2', 'paddingVertical:4'] }}
  css={[styles.header, { backgroundColor: currentLevel?.bg_color }]}
  styles={{
    box: styles.box,
  }}
/>

V2 - Unified Style Prop​

// V2: Everything through the style prop
<View style={[
  'column', 
  'p:4', 
  'center', 
  'fullWidth',
  { box: styles.box },
  { backgroundColor: currentLevel?.bg_color },
  {
    breakpoints: {
      small: ['p:2', 'py:4']
    }
  }
]} />

2. Creating Custom Styles​

V1 - variantProvider.createComponentStyle​

// V1: Provider-specific function
const styles = variantProvider.createComponentStyle(theme => ({
  box: {
    maxWidth: WIDTH,
    width: '100vw',
    minHeight: WIDTH / 2,
  },
  header: {
    ...theme.presets.fullWidth,
    ...theme.presets.column,
    ...theme.presets.center,
    ...theme.presets.relative,
    ...theme.spacing.gap(2),
    ...theme.spacing.padding(4),
    [theme.media.down('small')]: {
      ...theme.spacing.paddingTop(10),
    }
  }
}), true)

V2 - Simplified createStyles​

// V2: Unified and cleaner function
const styles = createStyles((theme) => ({
  box: {
    maxWidth: WIDTH,
    width: '100vw',
    minHeight: WIDTH / 2,
  },
  header: {
    ...theme.presets.fullWidth,
    ...theme.presets.column,
    ...theme.presets.center,
    ...theme.presets.relative,
    ...theme.spacing.gap(2),
    ...theme.spacing.padding(4),
  }
}))

3. Responsiveness​

V1 - Separate Props​

// V1: responsiveVariants as separate prop
<Text 
  variants={['p2', 'color:neutral5', 'paddingHorizontal:4']}
  responsiveVariants={{ small: ['paddingHorizontal:2'] }}
  text={t('achievements.levelProgress')} 
/>

V2 - Integrated Breakpoints​

// V2: Breakpoints integrated in the style prop
<Text 
  style={[
    'p2', 
    'color:neutralSolid500', 
    'px:4',
    {
      breakpoints: {
        small: ['px:2']
      }
    }
  ]}
  text={t('achievements.levelProgress')} 
/>

4. Short Variants​

V1 - Full Names​

// V1: Variants with full names
<View variants={['padding:4', 'paddingVertical:4', 'marginTop:2']} />

V2 - Short Variants​

// V2: Abbreviated variants for greater productivity
<View style={['p:4', 'py:4', 'mt:2']} />