Skip to main content

Variant-Aware Divs

The core of Vivid's generated styles are variant-aware divs. Vivid uses PandaCSS's slot recipes to define a set of styled divs that correspond to frames in Figma. Each div has a set of styles conditionally applied to it based on which variant is specified. Vivid defines these variant-aware divs in what we call the "style" file.

Vivid manages this style file - it is not intended to be modified by developers. Think of this file as living code that represents your Figma design.

Style file​

The style file is an implementation of PandaCSS's slot recipes, designed to define style variations to multiple parts of a component. These variations are controlled by one variant specification at the top level of the component.

A slot recipe consists of these properties:

  • slots: An array of component parts to style
  • base: The base styles per slot
  • variants: The different visual styles for each slot
  • defaultVariants: The default variant for the component
  • compoundVariants: The compound variant combination and style overrides for each slot.
import { sva } from '../styled-system/css'
 
const checkbox = sva({
  slots: ['root', 'control', 'label'],
  base: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { marginStart: '2' }
  },
  variants: {
    size: {
      sm: {
        control: { width: '8', height: '8' },
        label: { fontSize: 'sm' }
      },
      md: {
        control: { width: '10', height: '10' },
        label: { fontSize: 'md' }
      }
    },
    isChecked: {
      true: { 
        control: {backgroundColor: 'green-500'}, 
      }, 
      false: {
        control: {backgroundColor: 'red-500'},
      }
    }
  },
    compoundVariants: [
    {
      size: 'sm',
      isChecked: true,
      css: {
        control: { borderColor: 'green-500' }
      }
    }
  ],
})

Slots​

Each element of the slot array corresponds to a frame in Figma and a div in JSX. Vivid generates the names of the slots from Figma frame names.

Base​

In the base object, Vivid defines the styles that get applied to each div regardless of the variant specified.

Variants​

The variants objects is the primary mechanism to control styles that only get applied to a particular variant. The variants objects contains keys for each Figma "variant property". Within each variant property, Vivid defines the styles that should be applied for each possible value of that property.

Compound Variants​

Some CSS properties are not controlled by only one variant property. These properties are defined with compound variants.

TypeScript support​

Vivid creates a type interface for the props of any given component. This interface can be imported and extended in the React component.

export type CheckboxProps = {
    size: 'sm' | 'md',
    isChecked: boolean,
}