Carbon: Data Table: `$data-table-column-hover` is not properly themed

[jendowns]

What package(s) are you using?

    "@carbon/colors": "^10.1.0",
    "@carbon/grid": "^10.3.0",
    "@carbon/icons-react": "^10.3.0",
    "@carbon/import-once": "^10.1.0",
    "@carbon/layout": "^10.1.0",
    "@carbon/themes": "^10.3.0",
    "@carbon/type": "^10.2.0",
    "carbon-components": "^10.3.1",
    "carbon-components-react": "^7.3.1",

Detailed description

In every place that $data-table-column-hover is used, it is not properly themed. It always shows as #cacaca (very light gray -- the white/g10 theme color), even if you have a dark theme active.

I believe the cause is the abstraction itself? When I go to this line for example --

https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/components/data-table/_data-table-sort.scss#L61

And change it just to the direct color token $hover-select-ui, then the DataTable's sort headings on hover are themed correctly.

[asudoh]

Hi @jendowns thank you for reporting - Created a file like below and placed it at /path/to/carbon/src/globals/scss directory:

@import './vendor/@carbon/elements/scss/themes/theme-maps';
$carbon--theme: $carbon--theme--g100;
@import './styles.scss';

With above, the DOM inspector shows:

.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected:hover td, .bx--data-table tbody .bx--data-table--selected:hover td {
  color: #f3f3f3;
  background: #4c4c4c;
  border-top: 1px solid #4c4c4c;
  border-bottom: 1px solid #4c4c4c;
}

The background color seems to match $hover-select-ui in g100 theme. It makes me wonder how you chose an alternate theme - How we guide people to change theme has completely slipped my mind 😓 and my above way changing $carbon--theme is simply from my code search with my editor.

[jendowns]

@asudoh We don't have a problem with $hover-select-ui; it is properly themed for us. These are the style overrides we used to get around $data-table-column-hover --

  th.#{$prefix}--table-column-checkbox:hover {
    background: $hover-selected-ui;
  }
  .#{$prefix}--data-table--zebra
    tbody
    tr:nth-child(even).#{$prefix}--data-table--selected:hover
    td {
    border-bottom: 1px solid $hover-selected-ui;
  }
  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
    background: $hover-selected-ui;
    border-top: 1px solid $hover-selected-ui;
    border-bottom: 1px solid $hover-selected-ui;
  }
  .#{$prefix}--table-sort:hover {
    background: $hover-selected-ui;
  }

These overrides essentially take $data-table-column-hover out of the way and use $hover-select-ui directly. Again, is not themed$data-table-column-hover but $hover-select-ui is 🤔

Here's the order of our imports:

@import '@carbon/themes/scss/mixins';

@import '../variables/index'; /// sets some of our non-theme variables

@import 'carbon-components/scss/globals/scss/theme';

@import '../deprecate/index'; /// our deprecation warnings
@import '../namespace/index'; /// our namespace info

/// ...

/// Security theme.
/// @type Map<String, Color>
$security--theme: $carbon--theme--g100 !default;

/// Carbon theme.
/// @type Map<String, Color>
$carbon--theme: $security--theme;

/// Dark theme.
/// @type String
$theme: dark !default;  /// OLD variable we use for deprecation purposes

/// ...

@include carbon--theme;

Looking at this import order... we are pulling in the theme-tokens(like $data-table-column-hover) via @import 'carbon-components/scss/globals/scss/theme' before @include carbon--theme 🤔 Wouldn't that work? (Note: I did try really quick just swapping that order & it didn't seem to make a difference)

[asudoh]

@jendowns My apologies for not being able to respond to this sooner. As your above code runs @import 'carbon-components/scss/globals/scss/theme' before you runs @include carbon--theme with your $carbon--theme, here's what happens; Our _theme-tokens.scss is evaluated (with default white theme) before you set theme token variables with $carbon--theme: $security--theme and @include carbon--theme. Therefore $data-table-column-hover is determined with white theme of $hover-selected-ui. Given _theme-tokens.scss has "import once" guard, attempt to load _theme-tokens.scss again with the theme you set won't be successful.

To make above long story short, running @include carbon--theme with your $carbon--theme _before_ running @import 'carbon-components/scss/globals/scss/theme' will make it successful.

You can fiddle with this by replacing demo.scss with the following content, running gulp serve in our /path/to/carbon/packages/components directory and opening http://localhost:3000/component/data-table--select.

@import '../../src/globals/scss/vendor/@carbon/elements/scss/themes/mixins';

// @import '../variables/index'; /// sets some of our non-theme variables

// @import '../deprecate/index'; /// our deprecation warnings
// @import '../namespace/index'; /// our namespace info

/// ...

/// Security theme.
/// @type Map<String, Color>
$security--theme: $carbon--theme--g100 !default;

/// Carbon theme.
/// @type Map<String, Color>
$carbon--theme: $security--theme;

/// Dark theme.
/// @type String
// $theme: dark !default;  /// OLD variable we use for deprecation purposes

/// ...

@include carbon--theme;

@import '../../src/globals/scss/theme';

@import '../../src/globals/scss/styles.scss';

Hope this helps!

[jendowns]

Thanks so much for your help @asudoh! This worked perfectly 🎉