Skip to main content

Component Stylesheet

After creating a component, you must create its stylesheet. Stylesheets contain all component variants, with specific styling for each element of its composition.

What are Stylesheets​

Stylesheets are files that define the visual variants of a component. They allow you to create different styles (the default, or variants like primary/secondary, etc.).

Basic Structure​

import { createStyles } from '@codeleap/styles'
import { ComponentComposition } from '@codeleap/mobile'
import { StyleRegistry } from '../styles'

const createComponentVariant = createStyles<ComponentComposition>

export const ComponentStyles = {
  default: createComponentVariant((theme) => ({
    wrapper: {
      ...theme.presets.center,
      ...theme.presets.fullWidth,
    },
    text: {
      ...theme.presets.textCenter,
      ...theme.presets.fullWidth,
      ...theme.spacing.paddingVertical(2),
    },
  })),
}

StyleRegistry.registerVariants('Component', ComponentStyles)

Stylesheet Anatomy​

1. Creating the Variant Creator​

const createComponentVariant = createStyles<ComponentComposition>

createStyles is a generic function that receives the component's composition type and returns a function to create typed variants.

2. Defining Variants​

export const ComponentStyles = {
  default: createComponentVariant((theme) => ({
    wrapper: {
      backgroundColor: theme.colors.surface,
      padding: theme.spacing.value(2),
    },
    content: {
      fontSize: theme.typography.defaults.fontSize,
    },
  })),
  
  primary: createComponentVariant((theme) => ({
    wrapper: {
      backgroundColor: theme.colors.primary,
      borderRadius: theme.radius.large,
    },
    content: {
      color: theme.colors.onPrimary,
      fontWeight: '600',
    },
  })),
}

3. StyleRegistry Registration​

StyleRegistry.registerVariants('ComponentName', ComponentStyles)

Using the Theme​

Inside the variant function, you have complete access to the theme:

createComponentVariant((theme) => ({
  wrapper: {
    // Colors
    backgroundColor: theme.colors.surface,
    borderColor: theme.colors.primary,
    
    // Spacing
    padding: theme.spacing.value(2),
    marginVertical: theme.spacing.value(1),
    
    // Border radius
    borderRadius: theme.radius.medium,
    
    // Presets (useful functions)
    ...theme.presets.center,
    ...theme.presets.shadow,
    
    // Custom values
    height: theme.values.buttonHeight,
  },
}))