Themes and Design Tokens

Design tokens are named values reused across the project. A token can hold a color, spacing value, text size, corner size, or another style value.

Open Themes from the Activity Bar. The Primary Sidebar contains the project theme list and its create, rename, and delete actions. The first entry, Default, is selected initially and shows the shared values declared in :root. The main workbench is reserved for the categorized token list and the selected token editor. Studio groups tokens into Colors, Spacing, Typography, Radius, and Custom categories, shows reference counts, and opens each declaration or reference at its actual source location.

Selecting a token, such as --color-accent here, opens its editor with the current value, a rename field, a delete action, and its reference count across the project: 33 references in this example. Check the reference count before deleting or renaming a token that other files may depend on.

The token editor can create, change, rename, or delete a token. Rename changes all loaded files that use it. You can undo this as one operation.

Example:

:root {
  --color-primary: #66c9e6;
  --space-sm: 8px;
  --radius-panel: 20px;
}

The Inspector color fields offer indexed variables as var(--token) values.

Creating and editing themes

Choose Add theme in the Primary Sidebar, enter a name, and select Copy Default. Studio writes a complete 1:1 copy of the current Default token set into a named data-calmui-theme CSS rule and selects it in Preview. Values can then be edited without changing Default. Existing themes that override only some tokens still show the complete Default token list; unchanged values are marked as inherited.

Named theme layers remain ordinary project CSS rather than private Studio data:

:root[data-calmui-theme='HighContrast'] {
  --color-primary: #ffffff;
  --surface-panel: #000000;
}

Select a theme in the THEMES panel or next to the Preview controls to check the screen with that set of values. Theme creation, token edits, renames, and deletion participate in Studio undo and are saved with the project.