Use case

You want to use beautiful colors from the Atlassian Design System to format cells' background conditionally: these colors will be automatically adjusted for Light and Dark Confluence themes.

Solution

  1. Go to the Atlassian Design System and navigate to the Design Tokens section.
  2. Locate the JavaScript syntax/CSS syntax dropdown menu at the top of the page and choose the CSS syntax option. Show the active tokens.
  3. Copy the required color token and use it with the FORMATWIKI function inside the Table Transformer macro.
  4. Switch the page to the edit mode.
  5. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
  6. Select the macro and click Edit.
  7. In the Presets tab select Custom transformation and click Next.

  8. Enter the following SQL query:

    SELECT *,
CASE 
WHEN T1.'Amount of Transactions' < 30
THEN FORMATWIKI("{cell:background-color=var(--ds-background-accent-red-subtlest, red)}", T1.'Amount of Transactions',  "{cell}")
WHEN T1.'Amount of Transactions' >= 30 AND T1.'Amount of Transactions' < 80
THEN FORMATWIKI("{cell:background-color=var(--ds-background-accent-yellow-subtlest, yellow)}", T1.'Amount of Transactions',  "{cell}")
ELSE FORMATWIKI("{cell:background-color=var(--ds-background-accent-green-subtlest, green)}", T1.'Amount of Transactions',  "{cell}")
END
AS 'Amount of Transactions'  
FROM T*
    SQL
  9. Click Next. 
  10. Define the table settings and view options if needed. 

  11. Save the macro and the page.

The syntax for the FORMATWIKI function looks as following:

FORMATWIKI("{cell:background-color=var(--ds-background-accent-red-subtlest, red)}", T1.'Amount of Transactions', "{cell}")

Here the "--ds-background-accent-red-subtlest" part is a color token that we copy from the Atlassian Design System. The "red" part is an alternative Confluence color that is used by default (for example, if there is no such token in the system because you've copied the query to another instance with an old Confluence version).