Design Tokens and Variables in shadcncraft

Collections

Variables are grouped into four collections, each handling a specific part of your design system.

1. Primitives

This collection includes standard Tailwind utility-based values. It's designed to match the utility-first approach used in shadcn/ui.

Use these variables to:

Set component dimensions (height, width) and spacing
Define borders, including radius and stroke width
Adjust opacity values
Set line-height for text styles

Group	Usage
`border-radius`	Border radius values for rounded corners
`border-width`	Set border thickness
`height`	Control the height of components and individual elements
`max-width`	Set minimum and maximum width constraints for components or individual elements
`opacity`	Adjust element transparency
`width`	Control the width of components and individual elements

2. Theme

Edit these variables to apply your brand styling. This is where the majority of the theming variables live for light and dark mode in shadcncraft. The Theme collection allows you to house multiple brands with unique styling from the one library.

Use these variables to define theme-specific:

Spacing
Typography
Shadows
Radii

Group	Usage
`colors`	Define the color palette used for your theme
`custom`	Misc things like icon border width
`font`	Control all the facets of typography including family, size and weight
`radius`	Theme-specific radii – references Primitive collection
`shadow`	Define all the properties of the various shadows

Color variable usage guide

color	Usage
`primary`	Define the color palette used for your theme
`primary-foreground`	For elements on top of `primary`
`secondary`	Your secondary brand color
`secondary-foreground`	For elements on top of `secondary`
`accent`	Highlight color for active or focused elements
`accent-foreground`	For elements on top of `accent`
`background`	Main application background color
`foreground`	For elements on top of `background`
`card`	Background color for cards
`card-foreground`	For elements on top of `card`
`popover`	Background color for things like select menus
`popover-foreground`	For elements on top of `popover`
`muted`	Subtle background for elements requiring less attention
`muted-foreground`	For elements on top of `muted`
`destructive`	For errors and destructive actions like delete
`destructive-foreground`	For elements on top of `destructive`
`border`	Main border color
`input`	Border color for form input elements
`ring`	Helps define the focus indicator
`opacity-90`	Applied to elements to lighten their background color
`opacity-50`	Applied to elements to lighten their background color
`opacity-30`	Applied to elements to lighten their background color
`custom/focus`	The soft outer focus ring on focussed elements like buttons
`custom/destructive-focus`	The soft outer focus ring on focussed elements like destructive buttons
`bg-input-30`	Used for the background of elements like `input` to increase contrast in dark mode. More info here
`bg-input-50`	Used in the backgrounds of elements on hover like Combobox
`bg-input-80`	Used for input element background like Switch

3. Mode

These are the colors you apply to elements in your library. They enable the use of light and dark modes. These reference variables in the Theme collection.

Group	Usage
`Root`	The majority of colors for UI in shadcncraft. These reference colors in the theme collection.
`custom`	Figma-specific colors used to achieve the shadcn/ui look.
`chart`	Colors used for charts
`shadow`	Colors used for shadows
`sidebar`	Colors specific for the sidebar component

4. Pro

These are variables specific to the Pro Figma UI Kit only.

Group	Usage
`grid/marketing`	Semantic variables to handle spacing across all marketing blocks
`grid/application`	Semantic variables to handle spacing across all application blocks

Best practices

Use variables instead of hard-coded values to maintain consistency across your designs.
Apply Mode variables to any elements that need to respond to light or dark themes.
Use the collections in different ways:
- Alter the values of Theme for Theme-specific styles
- Apply mode variables rather than editing their values

Following these practices ensures your Figma designs stay aligned with the shadcn/ui framework and are easily translatable to Tailwind CSS in code.