From a75d013f683853efd230c127c58ec5e04831b063 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 09:04:56 -0700 Subject: [PATCH] fix(table-row): update component tokens with fallbacks to table --- .../src/components/table-row/table-row.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index 67ff5dcb474..d3cd9176a83 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -5,7 +5,7 @@ * * @prop --calcite-table-row-background: [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component. * @prop --calcite-table-row-background-color: Specifies the background color of the component. - * @prop --calcite-table-row-background-color-striped: The background color of the component's `striped` rows, when specified. + * @prop --calcite-table-row-secondary-background-color: The background color of the component's `striped` rows, when specified. * @prop --calcite-table-row-background-color-selected: The background color of the component's `selected` rows, when specified. * @prop --calcite-table-row-border-color: Specifies the border color of the component. * @prop --calcite-table-row-selected-accent-color: Specifies the border color of the component. @@ -39,10 +39,23 @@ calcite-table-cell { } tr { - border-block-end: 1px solid var(--calcite-table-row-border-color, transparent); + border-block-end: 1px solid + var(--calcite-table-row-border-color, var(--calcite-internal-table-row-border-color, transparent)); background-color: var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)); } tr.last-visible-row { border-block-end: 0; } + +:host(:nth-child(2n + 1)) { + tr { + background-color: var( + --calcite-table-row-secondary-background-color, + var( + --calcite-internal-table-secondary-background-color, + var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)) + ) + ); + } +}