Migrating Styled Component II

Styled Components

The StyledHeaderToolbar uses the theme provided by styled-components to style its properties dynamically.

export const StyledHeaderToolbar = styled.div(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing.sm,
  right: theme.spacing.twoXS,
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  borderColor: theme.colors.borderBold,
}))

Identify Tokens

Tokens such as spacing.sm, spacing.twoXS, and colors.borderBold are used from the theme object.

const theme = {
  spacing: {
    sm: '8px',
    twoXS: '4px',
  },
  colors: {
    borderBold: 'black',
  },
}

Migrate to Panda CSS

Extend the Panda theme in panda.config to include these token values under the tokens object.

  theme: {
    extend: {
      tokens: {
        spacing: {
          sm: { value: '8px' },
          twoXS: { value: '4px' },
        },
        colors: {
          borderBold: { value: 'black' },
        },
      },
    },
  },

Automatic Token Connection

In Panda CSS, tokens like spacing and colors are automatically connected to corresponding CSS properties such as top, right, borderColor, color, background, etc.

Create a Recipe

Define a recipe that mirrors the styled component's styles using the defined tokens.

const toolbarRecipe = cva({
  base: {
    position: 'absolute',
    top: 'sm',
    right: 'twoXS',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: 'borderBold',
  },
})

Convert to Panda CSS Component

Use the styled function to create a StyledHeaderToolbar component.

export const StyledHeaderToolbar = styled('div', toolbarRecipe)