bricks_get_variable_categories
Overview
Lists all global variable categories defined in the Bricks design system. Categories are used to organize CSS custom properties in the Bricks builder UI, grouping related variables together (e.g., « Spacing », « Colors », « Typography », « Sizing »).
Use this tool to understand how the current design system is organized before adding new variables or categories. Each category has an ID and a display name.
Key Features
When to Use
Understanding the organizational structure of the design system
Verifying category names to pass into variable creation tools
Auditing the design system organization during Phase 1
When NOT to Use
When you want to create a new category — use bricks_create_variable_category
Parameters
(none)noneoptionalCode Examples
List All Variable Categories
Retrieve the list of categories to understand design system organization.
bricks_get_variable_categories({})[{"id": "cat_abc", "name": "Spacing"}, {"id": "cat_def", "name": "Colors"}, {"id": "cat_ghi", "name": "Typography"}, {"id": "cat_jkl", "name": "Sizing"}]Common Mistakes
// This returns categories only, NOT variables
const vars = bricks_get_variable_categories({})
// vars = [{ id: "cat1", name: "Spacing" }] — no variable values!// This returns variables AND categories
const data = bricks_get_global_variables({})
// data.variables = [{ id: "v1", name: "spacing-xs", value: "4px" }]
// data.categories = [{ id: "cat1", name: "Spacing" }]Tips & Warnings
Standard categories: A well-organized design system typically has these categories: « Spacing », « Colors », « Typography », « Sizing », « Borders », « Shadows ». You do not need to create categories manually — they are auto-created when you assign a category name in bricks_create_global_variable or bricks_create_variables_batch.
Tip: Use bricks_get_global_variables instead if you need both categories AND variables in one call — it returns both.