With the introduction of v2 theme styles in Rock v18, several legacy CSS variables will be retired. These variables will still be available for themes using the v1 LESS file, but they won't be supported in themes built on the new v2 styling. Most churches won’t notice any changes, but this could impact plugin blocks, or custom HTML/CSS still using the old variables and running in the new v2 RockNextGen theme.
If you’ve built a custom theme or developed blocks that reference these variables, you’ll need to update them to use the new equivalents.
Legacy Variable | New Variable |
--text-color | --color-interface-strong |
--color-base-primary | --color-primary |
--color-success | --color-success-strong |
--color-info | --color-info-strong |
--color-warning | --color-warning-strong |
--color-danger | --color-danger-strong |
--panel-border | --color-interface-soft |
--panel-body-padding | --spacing-medium |
--border-radius-base | --rounded-xsmall |
--gutter-x | --spacing-large |
Less Common
Legacy Variable | New Variable |
--theme-dark | --color-interface-strong |
--theme-medium | --color-interface-medium |
--theme-light | --color-interface-soft |
--theme-lightest | --color-interface-softer |
--theme-white | --color-interface-softest |
--theme-darkest | --color-interface-strongest |
--input-bg-disabled | --color-interface-softer |
--input-border | --color-interface-soft |
--input-border-radius | --rounded-xsmall |
--input-padding | --spacing-xsmall OR --spacing-medium |
--input-placeholder | --color-interface-medium |