---
title: "Token naming migration"
manual: "TYPO3 Astryx"
version: "main"
permalink: "https://docs.typo3.org/permalink/skom/typo3-astryx:styling-token-migration@main"
source: "Styling/TokenMigration.rst"
rendered: "2026-11-01T11:49:05+00:00"
---

# Token naming migration {#styling-token-migration}

The public CSS custom-property names now use explicit semantic families. Update sitepackage `@layer product` overrides and custom templates to use the new name. The extension does not emit old-name aliases.

| Previous name | Current name |
| --- | --- |
| `--astryx-accent` | `--astryx-color-accent` |
| `--astryx-on-accent` | `--astryx-color-on-accent` |
| `--astryx-body` | `--astryx-color-background-body` |
| `--astryx-surface` | `--astryx-color-background-surface` |
| `--astryx-muted` | `--astryx-color-background-muted` |
| `--astryx-text` | `--astryx-color-text-primary` |
| `--astryx-secondary` | `--astryx-color-text-secondary` |
| `--astryx-border` | `--astryx-color-border-default` |
| `--astryx-border-strong` | `--astryx-color-border-strong` |
| `--astryx-success` | `--astryx-color-status-success` |
| `--astryx-warning` | `--astryx-color-status-warning` |
| `--astryx-error` | `--astryx-color-status-error` |
| `--astryx-shadow-color` | `--astryx-effect-shadow-color` |
| `--astryx-font` | `--astryx-typography-font-family-body` |
| `--astryx-link` | `--astryx-color-text-link` |
| `--astryx-font-size-body` | `--astryx-typography-body-font-size` |
| `--astryx-font-size-label` | `--astryx-typography-label-font-size` |
| `--astryx-font-size-supporting` | `--astryx-typography-supporting-font-size` |
| `--astryx-line-body` | `--astryx-typography-body-line-height` |
| `--astryx-line-label` | `--astryx-typography-label-line-height` |
| `--astryx-font-code` | `--astryx-typography-font-family-code` |
| `--astryx-radius-element` | `--astryx-shape-radius-element` |
| `--astryx-radius-container` | `--astryx-shape-radius-container` |
| `--astryx-radius-page` | `--astryx-shape-radius-page` |
| `--astryx-space-1` | `--astryx-spacing-1` |
| `--astryx-space-2` | `--astryx-spacing-2` |
| `--astryx-space-3` | `--astryx-spacing-3` |
| `--astryx-space-4` | `--astryx-spacing-4` |
| `--astryx-space-6` | `--astryx-spacing-6` |
| `--astryx-space-8` | `--astryx-spacing-8` |
| `--astryx-space-12` | `--astryx-spacing-12` |
| `--astryx-content-width` | `--astryx-layout-content-max-width` |
| `--astryx-prose-width` | `--astryx-layout-prose-max-width` |
| `--astryx-nav-hover` | `--astryx-color-navigation-state-hover` |
| `--astryx-nav-pressed` | `--astryx-color-navigation-state-pressed` |
| `--astryx-nav-selected` | `--astryx-color-navigation-state-selected` |
| `--astryx-nav-width` | `--astryx-layout-navigation-width` |
| `--astryx-detail-width` | `--astryx-layout-detail-width` |
| `--astryx-duration` | `--astryx-motion-duration-fast` |
| `--astryx-easing` | `--astryx-motion-easing-standard` |
| `--astryx-shadow` | `--astryx-effect-shadow-default` |
| `--astryx-font-heading` | `--astryx-typography-font-family-heading` |
| `--astryx-line-supporting` | `--astryx-typography-supporting-line-height` |
| `--astryx-radius-inner` | `--astryx-shape-radius-inner` |
| `--astryx-radius-full` | `--astryx-shape-radius-full` |
| `--astryx-card` | `--astryx-color-background-card` |
| `--astryx-popover` | `--astryx-color-background-popover` |
| `--astryx-overlay` | `--astryx-color-overlay-scrim` |
| `--astryx-card-border` | `--astryx-color-border-card` |
| `--astryx-card-padding` | `--astryx-component-card-padding` |
| `--astryx-header-shadow` | `--astryx-component-header-shadow` |
| `--astryx-popover-shadow` | `--astryx-component-popover-shadow` |
| `--astryx-button-radius` | `--astryx-component-button-radius` |
| `--astryx-button-secondary-background` | `--astryx-component-button-variant-secondary-background` |
| `--astryx-button-secondary-hover` | `--astryx-component-button-variant-secondary-background-hover` |
| `--astryx-button-destructive-background` | `--astryx-component-button-variant-destructive-background` |
| `--astryx-button-destructive-text` | `--astryx-component-button-variant-destructive-foreground` |
| `--astryx-button-small-size` | `--astryx-component-button-size-small-font-size` |
| `--astryx-button-large-size` | `--astryx-component-button-size-large-font-size` |
| `--astryx-badge-line` | `--astryx-component-badge-line-height` |
| `--astryx-badge-border-width` | `--astryx-component-badge-border-width` |
| `--astryx-notice-border-width` | `--astryx-component-notice-border-width` |
| `--astryx-notice-padding` | `--astryx-component-notice-padding` |
| `--astryx-code-background` | `--astryx-color-code-surface` |
| `--astryx-h1-size` | `--astryx-typography-heading-1-font-size` |
| `--astryx-h1-line` | `--astryx-typography-heading-1-line-height` |
| `--astryx-h1-weight` | `--astryx-typography-heading-1-font-weight` |
| `--astryx-h2-size` | `--astryx-typography-heading-2-font-size` |
| `--astryx-h2-line` | `--astryx-typography-heading-2-line-height` |
| `--astryx-h2-weight` | `--astryx-typography-heading-2-font-weight` |
| `--astryx-h3-size` | `--astryx-typography-heading-3-font-size` |
| `--astryx-h3-line` | `--astryx-typography-heading-3-line-height` |
| `--astryx-h3-weight` | `--astryx-typography-heading-3-font-weight` |
| `--astryx-h4-size` | `--astryx-typography-heading-4-font-size` |
| `--astryx-h4-line` | `--astryx-typography-heading-4-line-height` |
| `--astryx-h4-weight` | `--astryx-typography-heading-4-font-weight` |
| `--astryx-h5-size` | `--astryx-typography-heading-5-font-size` |
| `--astryx-h5-line` | `--astryx-typography-heading-5-line-height` |
| `--astryx-h5-weight` | `--astryx-typography-heading-5-font-weight` |
| `--astryx-h6-size` | `--astryx-typography-heading-6-font-size` |
| `--astryx-h6-line` | `--astryx-typography-heading-6-line-height` |
| `--astryx-h6-weight` | `--astryx-typography-heading-6-font-weight` |
| `--astryx-display-size` | `--astryx-typography-display-font-size` |
| `--astryx-display-line` | `--astryx-typography-display-line-height` |
| `--astryx-display-weight` | `--astryx-typography-display-font-weight` |
| `--astryx-heading-large-size` | `--astryx-typography-heading-large-font-size` |
| `--astryx-heading-large-line` | `--astryx-typography-heading-large-line-height` |
| `--astryx-badge-neutral-background` | `--astryx-component-badge-variant-neutral-background` |
| `--astryx-badge-neutral-text` | `--astryx-component-badge-variant-neutral-foreground` |
| `--astryx-badge-neutral-border` | `--astryx-component-badge-variant-neutral-border-color` |
| `--astryx-notice-neutral-background` | `--astryx-component-notice-variant-neutral-background` |
| `--astryx-notice-neutral-text` | `--astryx-component-notice-variant-neutral-foreground` |
| `--astryx-notice-neutral-secondary` | `--astryx-component-notice-variant-neutral-supporting-text-color` |
| `--astryx-notice-neutral-border` | `--astryx-component-notice-variant-neutral-border-color` |
| `--astryx-badge-accent-background` | `--astryx-component-badge-variant-accent-background` |
| `--astryx-badge-accent-text` | `--astryx-component-badge-variant-accent-foreground` |
| `--astryx-badge-accent-border` | `--astryx-component-badge-variant-accent-border-color` |
| `--astryx-notice-accent-background` | `--astryx-component-notice-variant-accent-background` |
| `--astryx-notice-accent-text` | `--astryx-component-notice-variant-accent-foreground` |
| `--astryx-notice-accent-secondary` | `--astryx-component-notice-variant-accent-supporting-text-color` |
| `--astryx-notice-accent-border` | `--astryx-component-notice-variant-accent-border-color` |
| `--astryx-badge-success-background` | `--astryx-component-badge-variant-success-background` |
| `--astryx-badge-success-text` | `--astryx-component-badge-variant-success-foreground` |
| `--astryx-badge-success-border` | `--astryx-component-badge-variant-success-border-color` |
| `--astryx-notice-success-background` | `--astryx-component-notice-variant-success-background` |
| `--astryx-notice-success-text` | `--astryx-component-notice-variant-success-foreground` |
| `--astryx-notice-success-secondary` | `--astryx-component-notice-variant-success-supporting-text-color` |
| `--astryx-notice-success-border` | `--astryx-component-notice-variant-success-border-color` |
| `--astryx-badge-warning-background` | `--astryx-component-badge-variant-warning-background` |
| `--astryx-badge-warning-text` | `--astryx-component-badge-variant-warning-foreground` |
| `--astryx-badge-warning-border` | `--astryx-component-badge-variant-warning-border-color` |
| `--astryx-notice-warning-background` | `--astryx-component-notice-variant-warning-background` |
| `--astryx-notice-warning-text` | `--astryx-component-notice-variant-warning-foreground` |
| `--astryx-notice-warning-secondary` | `--astryx-component-notice-variant-warning-supporting-text-color` |
| `--astryx-notice-warning-border` | `--astryx-component-notice-variant-warning-border-color` |
| `--astryx-badge-error-background` | `--astryx-component-badge-variant-error-background` |
| `--astryx-badge-error-text` | `--astryx-component-badge-variant-error-foreground` |
| `--astryx-badge-error-border` | `--astryx-component-badge-variant-error-border-color` |
| `--astryx-notice-error-background` | `--astryx-component-notice-variant-error-background` |
| `--astryx-notice-error-text` | `--astryx-component-notice-variant-error-foreground` |
| `--astryx-notice-error-secondary` | `--astryx-component-notice-variant-error-supporting-text-color` |
| `--astryx-notice-error-border` | `--astryx-component-notice-variant-error-border-color` |
| `--astryx-accent-muted` | `--astryx-color-accent-subtle` |
| `--astryx-text-disabled` | `--astryx-color-text-disabled` |
| `--astryx-text-accent` | `--astryx-color-text-accent` |
| `--astryx-on-dark` | `--astryx-color-on-dark` |
| `--astryx-on-light` | `--astryx-color-on-light` |
| `--astryx-on-success` | `--astryx-color-on-status-success` |
| `--astryx-on-error` | `--astryx-color-on-status-error` |
| `--astryx-on-warning` | `--astryx-color-on-status-warning` |
| `--astryx-icon-accent` | `--astryx-color-icon-accent` |
| `--astryx-icon-primary` | `--astryx-color-icon-primary` |
| `--astryx-icon-secondary` | `--astryx-color-icon-secondary` |
| `--astryx-icon-disabled` | `--astryx-color-icon-disabled` |
| `--astryx-background-inverted` | `--astryx-color-background-inverse` |
| `--astryx-success-muted` | `--astryx-color-status-success-subtle` |
| `--astryx-error-muted` | `--astryx-color-status-error-subtle` |
| `--astryx-warning-muted` | `--astryx-color-status-warning-subtle` |
| `--astryx-skeleton` | `--astryx-color-background-skeleton` |
| `--astryx-tint-hover` | `--astryx-color-state-tint-hover` |
| `--astryx-background-blue` | `--astryx-color-category-blue-background` |
| `--astryx-border-blue` | `--astryx-color-category-blue-border` |
| `--astryx-icon-blue` | `--astryx-color-category-blue-icon` |
| `--astryx-text-blue` | `--astryx-color-category-blue-text` |
| `--astryx-background-cyan` | `--astryx-color-category-cyan-background` |
| `--astryx-border-cyan` | `--astryx-color-category-cyan-border` |
| `--astryx-icon-cyan` | `--astryx-color-category-cyan-icon` |
| `--astryx-text-cyan` | `--astryx-color-category-cyan-text` |
| `--astryx-background-gray` | `--astryx-color-category-gray-background` |
| `--astryx-border-gray` | `--astryx-color-category-gray-border` |
| `--astryx-icon-gray` | `--astryx-color-category-gray-icon` |
| `--astryx-text-gray` | `--astryx-color-category-gray-text` |
| `--astryx-background-green` | `--astryx-color-category-green-background` |
| `--astryx-border-green` | `--astryx-color-category-green-border` |
| `--astryx-icon-green` | `--astryx-color-category-green-icon` |
| `--astryx-text-green` | `--astryx-color-category-green-text` |
| `--astryx-background-orange` | `--astryx-color-category-orange-background` |
| `--astryx-border-orange` | `--astryx-color-category-orange-border` |
| `--astryx-icon-orange` | `--astryx-color-category-orange-icon` |
| `--astryx-text-orange` | `--astryx-color-category-orange-text` |
| `--astryx-background-pink` | `--astryx-color-category-pink-background` |
| `--astryx-border-pink` | `--astryx-color-category-pink-border` |
| `--astryx-icon-pink` | `--astryx-color-category-pink-icon` |
| `--astryx-text-pink` | `--astryx-color-category-pink-text` |
| `--astryx-background-purple` | `--astryx-color-category-purple-background` |
| `--astryx-border-purple` | `--astryx-color-category-purple-border` |
| `--astryx-icon-purple` | `--astryx-color-category-purple-icon` |
| `--astryx-text-purple` | `--astryx-color-category-purple-text` |
| `--astryx-background-red` | `--astryx-color-category-red-background` |
| `--astryx-border-red` | `--astryx-color-category-red-border` |
| `--astryx-icon-red` | `--astryx-color-category-red-icon` |
| `--astryx-text-red` | `--astryx-color-category-red-text` |
| `--astryx-background-teal` | `--astryx-color-category-teal-background` |
| `--astryx-border-teal` | `--astryx-color-category-teal-border` |
| `--astryx-icon-teal` | `--astryx-color-category-teal-icon` |
| `--astryx-text-teal` | `--astryx-color-category-teal-text` |
| `--astryx-background-yellow` | `--astryx-color-category-yellow-background` |
| `--astryx-border-yellow` | `--astryx-color-category-yellow-border` |
| `--astryx-icon-yellow` | `--astryx-color-category-yellow-icon` |
| `--astryx-text-yellow` | `--astryx-color-category-yellow-text` |
| `--astryx-radius-none` | `--astryx-shape-radius-none` |
| `--astryx-shadow-med` | `--astryx-effect-shadow-medium` |
| `--astryx-shadow-high` | `--astryx-effect-shadow-high` |
| `--astryx-shadow-inset-hover` | `--astryx-effect-shadow-inset-hover` |
| `--astryx-shadow-inset-selected` | `--astryx-effect-shadow-inset-selected` |
| `--astryx-shadow-inset-success` | `--astryx-effect-shadow-inset-success` |
| `--astryx-shadow-inset-warning` | `--astryx-effect-shadow-inset-warning` |
| `--astryx-shadow-inset-error` | `--astryx-effect-shadow-inset-error` |
| `--astryx-syntax-keyword` | `--astryx-color-code-syntax-keyword` |
| `--astryx-syntax-string` | `--astryx-color-code-syntax-string` |
| `--astryx-syntax-comment` | `--astryx-color-code-syntax-comment` |
| `--astryx-syntax-number` | `--astryx-color-code-syntax-number` |
| `--astryx-syntax-function` | `--astryx-color-code-syntax-function` |
| `--astryx-syntax-type` | `--astryx-color-code-syntax-type` |
| `--astryx-syntax-variable` | `--astryx-color-code-syntax-variable` |
| `--astryx-syntax-operator` | `--astryx-color-code-syntax-operator` |
| `--astryx-syntax-constant` | `--astryx-color-code-syntax-constant` |
| `--astryx-syntax-tag` | `--astryx-color-code-syntax-tag` |
| `--astryx-syntax-attribute` | `--astryx-color-code-syntax-attribute` |
| `--astryx-syntax-property` | `--astryx-color-code-syntax-property` |
| `--astryx-syntax-punctuation` | `--astryx-color-code-syntax-punctuation` |
| `--astryx-syntax-background` | `--astryx-color-code-syntax-background` |
| `--astryx-header-selected` | `--astryx-color-navigation-header-state-selected` |
| `--astryx-header-hover` | `--astryx-color-navigation-header-state-hover` |
| `--astryx-code-border` | `--astryx-color-code-border` |
| `--astryx-code-header` | `--astryx-color-code-header-background` |
| `--astryx-code-title` | `--astryx-color-code-title` |
| `--astryx-button-small-height` | `--astryx-component-button-size-small-height` |
| `--astryx-button-small-min-height` | `--astryx-component-button-size-small-min-height` |
| `--astryx-button-small-padding` | `--astryx-component-button-size-small-padding` |
| `--astryx-button-medium-height` | `--astryx-component-button-size-medium-height` |
| `--astryx-button-medium-min-height` | `--astryx-component-button-size-medium-min-height` |
| `--astryx-button-medium-padding` | `--astryx-component-button-size-medium-padding` |
| `--astryx-button-large-height` | `--astryx-component-button-size-large-height` |
| `--astryx-button-large-min-height` | `--astryx-component-button-size-large-min-height` |
| `--astryx-button-large-padding` | `--astryx-component-button-size-large-padding` |
| `--astryx-button-border-width` | `--astryx-component-button-border-width` |
| `--astryx-button-secondary-border-width` | `--astryx-component-button-variant-secondary-border-width` |
| `--astryx-button-secondary-border-color` | `--astryx-component-button-variant-secondary-border-color` |
| `--astryx-code-preview-size` | `--astryx-component-code-preview-font-size` |
| `--astryx-code-preview-line` | `--astryx-component-code-preview-line-height` |