Theming

Text Styles

Typography forms the core of any interface design, making it important to establish patterns for consistent and legible typography early in the development process. This will also help you avoid duplicating typography properties.

Text styles allows you to define textual css properties. The common peoperties are:

• The font family, weight, size
• Line height
• Letter spacing
• Text Decoration (strikethrough and underline)
• Text Transform (uppercase, lowercase, and capitalization)

Defining text styles

Text styles are defined in the textStyles property of the theme.

Here's an example of a text style:

import { defineTextStyles } from '@pandacss/dev'
 
export const textStyles = defineTextStyles({
  body: {
    description: 'The body text style - used in paragraphs',
    value: {
      fontFamily: 'Inter',
      fontWeight: '500',
      fontSize: '16px',
      lineHeight: '24px',
      letterSpacing: '0',
      textDecoration: 'None',
      textTransform: 'None'
    }
  }
})

Update the config

To use the text styles, we need to update the config object in the panda.config.ts file.

import { defineConfig } from '@pandacss/dev'
import { textStyles } from './text-styles'
 
export default defineConfig({
  theme: {
    extend: {
      textStyles
    }
  }
})

This should automatically update the generated theme the specified textStyles. If this doesn't happen, you can run the panda codegen command.

Using text styles

Now we can use textStyle property in our components.

import { css } from '../styled-system/css'
 
function App() {
  return (
    <p className={css({ textStyle: 'body' })}>
      This is a paragraph from Panda with the body text style.
    </p>
  )
}

Best Practices

Avoid layout properties

To ensure the consistency of your design system, avoid applying layout properties (like margin, padding, etc.) or color properties (background, colors, etc.) to the text styles.

Naming conventions

We recommend using the same text style names used by designers on your team. Here are common ideas on how to name text styles:

• Sized-based naming system (xs, sm, md, lg, xl)
• Semantic naming system that corresponds to respective html tags in production (caption, paragraph, h1, h2)
• Descriptive or functional naming system that explains the style's intended use (alert, modal-header, button-label)