diff --git a/projects/angular/src/data/datagrid/_datagrid.clarity.scss b/projects/angular/src/data/datagrid/_datagrid.clarity.scss index d7a6dcfae9..d25fe5370d 100644 --- a/projects/angular/src/data/datagrid/_datagrid.clarity.scss +++ b/projects/angular/src/data/datagrid/_datagrid.clarity.scss @@ -98,10 +98,20 @@ } &:hover { - @include css-var(background-color, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background-color, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); .datagrid-row-sticky { - @include css-var(background-color, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background-color, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); } } @@ -214,7 +224,12 @@ } &.active { - @include css-var(background, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); @include css-var(color, clr-color-neutral-1000, $clr-color-neutral-1000, $clr-use-custom-properties); } @@ -338,7 +353,12 @@ } &.active { - @include css-var(background, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); @include css-var(color, clr-color-neutral-1000, $clr-color-neutral-1000, $clr-use-custom-properties); } @@ -454,7 +474,12 @@ } &.active { - @include css-var(background, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); @include css-var( color, clr-datagrid-row-hover-font-color, @@ -1029,8 +1054,8 @@ // Fixed active state on this button for Safari. @include css-var( color, - clr-datagrid-action-toggle, - $clr-datagrid-action-toggle, + clr-datagrid-action-toggle-color, + $clr-datagrid-action-toggle-color, $clr-use-custom-properties ); } @@ -2159,7 +2184,12 @@ } &.active { - @include css-var(background-color, clr-datagrid-row-hover, $clr-datagrid-row-hover, $clr-use-custom-properties); + @include css-var( + background-color, + clr-datagrid-row-hover-color, + $clr-datagrid-row-hover-color, + $clr-use-custom-properties + ); @include css-var( color, clr-datagrid-row-hover-font-color, diff --git a/projects/angular/src/data/datagrid/_properties.datagrid.scss b/projects/angular/src/data/datagrid/_properties.datagrid.scss index 231c426bc7..ef2658b9fc 100644 --- a/projects/angular/src/data/datagrid/_properties.datagrid.scss +++ b/projects/angular/src/data/datagrid/_properties.datagrid.scss @@ -11,13 +11,9 @@ --clr-datagrid-default-border-color: var(--clr-color-neutral-400); --clr-datagrid-icon-color: var(--clr-color-neutral-600); - // deprecated in 3.0 - // should become --clr-datagrid-row-hover-color - --clr-datagrid-row-hover: var(--clr-color-neutral-200); + --clr-datagrid-row-hover-color: var(--clr-color-neutral-200); --clr-datagrid-row-hover-font-color: var(--clr-color-neutral-1000); - // deprecated in 3.0 - // should become --clr-datagrid-action-toggle-color - --clr-datagrid-action-toggle: var(--clr-color-neutral-700); + --clr-datagrid-action-toggle-color: var(--clr-color-neutral-700); --clr-datagrid-pagination-btn-color: var(--clr-color-neutral-700); --clr-datagrid-pagination-btn-disabled-color: var(--clr-color-neutral-600); --clr-datagrid-pagination-input-border-color: var(--clr-datagrid-default-border-color); diff --git a/projects/angular/src/data/datagrid/_variables.datagrid.scss b/projects/angular/src/data/datagrid/_variables.datagrid.scss index ab3c3f4114..7ebba1e478 100644 --- a/projects/angular/src/data/datagrid/_variables.datagrid.scss +++ b/projects/angular/src/data/datagrid/_variables.datagrid.scss @@ -11,9 +11,9 @@ $clr-datagrid-fixed-column-size: (2 * $clr-table-cellpadding) + $clr-table-lineh $clr-datagrid-font-color: hsl(203, 16%, 72%) !default; $clr-datagrid-default-border-color: $clr-color-neutral-400 !default; -$clr-datagrid-row-hover: $clr-color-neutral-200 !default; +$clr-datagrid-row-hover-color: $clr-color-neutral-200 !default; $clr-datagrid-row-hover-font-color: $clr-color-neutral-1000 !default; -$clr-datagrid-action-toggle: $clr-color-neutral-700 !default; +$clr-datagrid-action-toggle-color: $clr-color-neutral-700 !default; $clr-datagrid-pagination-btn-color: $clr-color-neutral-700 !default; $clr-datagrid-pagination-btn-disabled-color: $clr-color-neutral-600 !default; $clr-datagrid-pagination-btn-disabled-opacity: 0.56; diff --git a/projects/angular/src/utils/_overwrites.clarity.scss b/projects/angular/src/utils/_overwrites.clarity.scss index f29bfa839f..6635deb1fd 100644 --- a/projects/angular/src/utils/_overwrites.clarity.scss +++ b/projects/angular/src/utils/_overwrites.clarity.scss @@ -369,8 +369,8 @@ $clr-table-vertpadding: null; // (($clr-table-cellpadding - $clr-table-borderwid $clr-datagrid-font-color: null; // #adbbc4 $clr-datagrid-default-border-color: null; // $clr-color-neutral-400 -$clr-datagrid-row-hover: null; // $clr-color-neutral-200 -$clr-datagrid-action-toggle: null; // $clr-color-neutral-700 +$clr-datagrid-row-hover-color: null; // $clr-color-neutral-200 +$clr-datagrid-action-toggle-color: null; // $clr-color-neutral-700 $clr-datagrid-pagination-btn-color: null; // $clr-color-neutral-700 $clr-datagrid-pagination-btn-disabled-color: null; // $clr-color-neutral-600 $clr-datagrid-pagination-input-border-color: null; // $clr-datagrid-default-border-color diff --git a/projects/angular/src/utils/_theme.dark.clarity.scss b/projects/angular/src/utils/_theme.dark.clarity.scss index 8e6afb85b5..4d64efa8f7 100644 --- a/projects/angular/src/utils/_theme.dark.clarity.scss +++ b/projects/angular/src/utils/_theme.dark.clarity.scss @@ -368,17 +368,17 @@ $clr-card-divider-color: $clr-card-border-color; * Usage: ../data/datagrid/_datagrid.clarity.scss */ $clr-datagrid-icon-color: hsl(203, 16%, 72%); -$clr-datagrid-row-hover: hsl(201, 31%, 23%); +$clr-datagrid-row-hover-color: hsl(201, 31%, 23%); $clr-datagrid-row-selected: hsl(0, 0%, 100%); $clr-datagrid-popover-bg-color: hsl(198, 28%, 18%); -$clr-datagrid-action-toggle: hsl(203, 16%, 72%); +$clr-datagrid-action-toggle-color: hsl(203, 16%, 72%); $clr-datagrid-pagination-btn-color: hsl(210, 16%, 93%); $clr-datagrid-pagination-btn-disabled-color: hsl(210, 16%, 93%); $clr-datagrid-pagination-btn-disabled-opacity: 0.46; $clr-datagrid-pagination-input-border-color: hsl(208, 16%, 34%); $clr-datagrid-pagination-input-border-focus-color: hsl(198, 65%, 57%); $clr-datagrid-popover-border-color: hsl(0, 0%, 0%); -$clr-datagrid-action-popover-hover-color: $clr-datagrid-row-hover; +$clr-datagrid-action-popover-hover-color: $clr-datagrid-row-hover-color; $clr-datagrid-loading-background: rgba(0, 0, 0, 0.5); $clr-datagrid-column-toggle-border-color: hsl(208, 16%, 34%); diff --git a/projects/ui/src/shim.cds-core.scss b/projects/ui/src/shim.cds-core.scss index c30748e48a..611bfc68d5 100644 --- a/projects/ui/src/shim.cds-core.scss +++ b/projects/ui/src/shim.cds-core.scss @@ -719,14 +719,9 @@ --clr-datagrid-font-color: var(--cds-global-typography-color-500); --clr-datagrid-default-border-color: var(--cds-alias-object-border-color); // var(--clr-color-neutral-400); --clr-datagrid-icon-color: var(--cds-alias-object-interaction-color); // var(--clr-color-neutral-600); - - // deprecated in 3.0 - // should become --clr-datagrid-row-hover-color - --clr-datagrid-row-hover: var(--cds-alias-object-interaction-background-hover); // var(--clr-color-neutral-200); + --clr-datagrid-row-hover-color: var(--cds-alias-object-interaction-background-hover); // var(--clr-color-neutral-200); --clr-datagrid-row-hover-font-color: var(--cds-global-typography-color-500); // var(--clr-color-neutral-1000); - // deprecated in 3.0 - // should become --clr-datagrid-action-toggle-color - --clr-datagrid-action-toggle: var(--cds-alias-object-interaction-background-active); // var(--cds-global-color-gray-700); // var(--clr-color-neutral-700); + --clr-datagrid-action-toggle-color: var(--cds-alias-object-interaction-background-active); // var(--cds-global-color-gray-700); // var(--clr-color-neutral-700); --clr-datagrid-pagination-btn-color: var(--cds-alias-object-interaction-color); // var(--clr-color-neutral-700); --clr-datagrid-pagination-btn-disabled-color: var(--cds-alias-status-disabled); // var(--clr-color-neutral-600); --clr-datagrid-pagination-input-border-color: var(--cds-alias-object-border-color); // indirectly mapped;