Skip to content

Table border color Sass variable is not applied. #4389

@cateprNIH

Description

@cateprNIH

Describe the bug

When customizing the USWDS theming through the provided Sass variables, the $theme-table-border-color variable is not applied in the node_modules/uswds/src/stylesheets/core/placeholders/_table.scss file. This means the variable can't be used to customize the table border color.

Steps to reproduce the bug

  1. Setup USWDS to compile CSS from Sass files/variables.
  2. Add a table component to a page.
  3. Customize the $theme-table-border-color Sass variable.
  4. Compile the Sass into CSS.
  5. See that the table color did not change to the customized color.

Expected behavior

The $theme-table-border-color changes the border color of table elements.

System setup

  • 2.12.2
  • Mac
  • 11.6
  • Chrome 95

Additional context

The line where the table border color is being applied appears to be line 89 of the node_modules/uswds/src/stylesheets/core/placeholders/_table.scss file:

  th,
  td {
    background-color: color($theme-body-background-color);
    border: 1px solid $table-text-color;
    font-weight: fw("normal");
    padding: units(1) units(2);
  }

where it seems to always be applying the table text color as the border color.

Metadata

Metadata

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions