--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
- --#{$prefix}table-color: initial;
- --#{$prefix}table-bg: initial;
// End of reset
+ --#{$prefix}table-color: #{$table-color};
+ --#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
width: 100%;
margin-bottom: $spacer;
- color: $table-color;
+ color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align;
- background-color: $table-bg;
+ background-color: var(--#{$prefix}table-bg);
border-color: var(--#{$prefix}table-border-color);
// Target th & td
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
- color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color, inherit)));
- background-color: var(--#{$prefix}table-bg, inherit);
+ color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, inherit));
+ background-color: inherit;
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}