Lack of contrast of subtle rows in AUI Tables

Atlassian Ecosystem Design
1

When I make an AUI Table row “subtle” using the aui-row-subtle CSS class, text is barely readable, both in light and dark themes.

2

Hey,

What version of AUI are you using? Which product? Cloud or DC? Do you have a codesandbox or reproduction repo?

3

I am on Jira Data Center 10.3.6.
How can I see the AUI version?

If you have ScriptRunner, you can simply paste this code on the script console:

"""
<table class="aui aui-table-list">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="aui-row-subtle">
        <td>Value A1</td>
        <td>Value A2</td>
    </tr>
    <tr>
        <td>Value B1</td>
        <td>Value B2</td>
    </tr>
  </tbody>
</table>
"""

and hit the RUN button.

Here is how the table appears in dark, light, and original themes:

dark-theme
dark-theme446×106 3.41 KB

light-theme
original-theme
original-theme448×105 3.92 KB

Thanks.

1 Like
4

Ah okay, Jira 10.3 is on AUI 9.12, the matching documentation is: Tables - AUI Documentation and the issue is visible there

image
image1427×499 58.2 KB

Running AJS.version in the JS developer console shows the version.

Thanks, now that we know which products are affected I’ll forward this to the right people internally.

Using the documentation as a reference it seems this affects all versions of AUI from 9.7 as it seems to be an issue with the new “light” theme based on design tokens.

You can follow this Jira ticket: Jira

3 Likes