feat(datagrid): rename css custom properties to add "color" suffix

BREAKING CHANGE: Two css custom properties were renamed to add the missing "color" suffix: `--clr-datagrid-row-hover` -> `--clr-datagrid-row-hover-color` `--clr-datagrid-action-toggle` -> `--clr-datagrid-action-toggle-color` The same renames were made for the scss variables (prefixed with `$`).
vmware-clarity · Feb 2, 2023 · e7ace9b · e7ace9b
1 parent e84886a
commit e7ace9b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;