Look and Feel
Summary
AUI components can be configured with dynamic CSS variables following the pattern
--atl-theme-<name>.
Status
| API status: | experimental |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-design-tokens-themes
|
| AMD Module key: | N/A |
| Experimental API: | 9.13 |
Import
If you use AUI from WRM, make sure you are including
com.atlassian.auiplugin:aui-design-tokens-themes. Most likely, you've done this
already when setting up the design tokens themes.
If you use NPM, there is a separate resource: include the
aui-prototyping-lf-extracted-color-channels.css file on the page.
Usage
Set --atl-theme<name> CSS variables to the page :root. (More
fine-grained contexts can work too.) It will affect the look and feel of certain AUI
components.
These variables are intended to be customized by the app admin, and until introduction of this AUI feature applications handled the use case differently.
If your application allows customization of a single set of colors, include those variables under a CSS selector that catches that a design-tokens-based theme (Light or Dark; not Original) is loaded.
If your application allows customization of pairs of colors—separately for the Light and for the Dark theme,—include two blocks: the first customized value under the light-theme selector and the second customized value under the dark-theme selector.
| Variable | Effect |
|---|---|
--atl-theme-header-bg-color |
Sets app header background. Sets item text color to contrast with the background unless the text color is customized. |
--atl-theme-header-item-text-color |
Sets text color for regular items in the header. If not set, the appropriate value of
--ds-text will be used to contrast with the background.
|
--atl-theme-header-primary-button-bg-color |
Sets background for the primary button in the header. Sets its text color to contrast with the background unless the text color is customized. |
--atl-theme-header-primary-button-text-color |
Sets text color for the primary button in the header. If not set, the appropriate value
of --ds-text-inverse will be used to contrast with the background.
|
--atl-theme-header-logo-image |
For the CSS mode of logo rendering, applies the background-image property
on the .aui-header-logo-device element. Use in conjunction with the
--atl-theme-header-logo-width (see below), otherwise the logo won't be
visible.
|
--atl-theme-header-logo-width |
For the CSS mode of logo rendering, applies width on the
.aui-header-logo-device element.
|
Output variables
AUI exports derived variables whose values depend on the input variables.
| Variable | Explanation |
|---|---|
--atl-theme-header-bg-color-tinted-contrasting |
A value derived from --atl-theme-header-bg-color: darkened if it is
perceptually light; lightened if it is perceptually dark. Can be used, for example, to
show the "selected" state of header items.
|