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.

Important boundary:

  • V1 belongs to older projects that still use the legacy styling system from @codeleap/common
  • V2 is the current styling system from @codeleap/styles

Before applying any styling pattern, first confirm which package the project is actually using. Do not mix V1 props such as variants, responsiveVariants, css, and styles into a V2 style prop flow, and do not rewrite a legacy @codeleap/common screen as if it already used @codeleap/styles.

How To Decide Which Version The Project Uses​

Check the real project dependencies and existing component code first.

Use V1 guidance when you see legacy signals such as:

  • dependency on @codeleap/common
  • styling props like variants, responsiveVariants, css, or styles
  • older component code that still follows the legacy provider-based styling flow

Use V2 guidance when you see current signals such as:

  • dependency on @codeleap/styles
  • a single style prop containing string variants and style objects
  • createStyles(...), createTheme(...), createAppVariants(...), or project StyleRegistry usage

If the project is legacy, treat this page as the source of truth for migration and comparison. If the project is already on V2, prefer the rest of the @codeleap/styles documentation and do not bring V1 patterns back into new code.

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']} />