Skip to main content
Back to changelog

Semantic spacing and tonal borders

vortex-themes v0.2.0: Semantic spacing and tonal borders

Spacing tokens consolidate into one scale, tonal borders gain default and bold variants, and the Vortex and Awen themes sync with Figma.

New features

  • Added semantic --vortex-spacing-{4xs…5xl} tokens and exported the SpacingTokenName type.
  • Added default and bold variants for tonal borders: --vortex-color-border-{primary,critical,warning,success,info}-{default,bold}.

Improvements

  • Improved Awen text contrast across surfaces and states, and kept Awen's primary background on brand primary 500.

Bug fixes

  • Fixed Vortex theme colors, critical button tokens and foundations to match Figma.
  • Fixed elevation shadows to use black alpha tokens.

Breaking changes

  • Replaced --vortex-space-padding-* and --vortex-space-gap-* with --vortex-spacing-* of the same size. Replace the removed 6xl, 7xl and 9xl steps with --vortex-spacing-5xl or a global --vortex-space-* value.
  • Removed --vortex-space-button-padding-{sm,md,lg}; use --vortex-spacing-* tokens instead.
  • Renamed --vortex-color-border-{primary,critical,warning,success,info} to the -default variant; use -bold for stronger emphasis.
  • Removed --vortex-color-border-hover; use --vortex-color-border-default or --vortex-color-border-bold instead.
Before → After
/* Before */
gap: var(--vortex-space-gap-md);
padding: var(--vortex-space-padding-xs);
border-color: var(--vortex-color-border-primary);

/* After */
gap: var(--vortex-spacing-md);
padding: var(--vortex-spacing-xs);
border-color: var(--vortex-color-border-primary-default);

Regenerate custom theme CSS with vortex-themes theming after upgrading.