Component theming

Blockle components are built using a theming system that allows you to customize the appearance of the components to match your brand.

Button example

Below is an example of a button component with a custom theme applied. To create a theme for a specific component, you can use makeComponentTheme(). This function takes a component name and a theme object.

We set the base styles and variants for the button component.

The default variants can be specficied with defaultVariants

import { createVar } from '@vanilla-extract/css';
import { makeComponentTheme, atoms, vars, style } from '@blockle/blocks';

const primaryColor = createVar();

export const button = makeComponentTheme('button', {
  base: style({
    display: 'inline-flex',
  }),
  variants: {
    variant: {
      solid: style({
        color: vars.color.white,
        backgroundColor: primaryColor,
        border: 'none',
      }),
      outline: style({
        color: primaryColor,
        borderWidth: 'small',
        borderStyle: 'solid',
        borderColor: primaryColor,
        background: 'transparent',
      }),
      ghost: style({
        color: primaryColor,
        background: 'transparent',
      }),
    },
    size: {
      small: style({
        paddingX: 'large',
        height: 40,
      }),
      medium: style({
        paddingX: 'xlarge',
        height: 56,
      }),
      large: style({
        paddingX: 'xlarge',
        height: 72,
      }),
    },
    intent: {
      neutral: style({
        vars: {
          [primaryColor]: vars.color.primary,
        },
      }),
      danger: style({
        vars: {
          [primaryColor]: vars.color.danger,
        },
      }),
    },
  },
  defaultVariants: {
    size: 'small',
    variant: 'ghost',
    intent: 'neutral',
  },
});

Compound variants

To apply custom styling rules to a combination of variants, you can use compound variants.

export const button = makeComponentTheme('button', {
  base: '...',
  variants: {
    variant: { ... },
    size: { ... },
  },
  compoundVariants: [
    {
      // When the variant is 'solid' and the size is 'large'
      variants: {
        variant: 'solid',
        size: 'large',
      },
      // These styles will be applied
      style: style({
        transform: 'scale(2)',
      }),
    },
  ]
});

For more examples of component theming, see GitHub.