feat: revised and added grid color variables (#1232)

Refinitiv · Nov 25, 2024 · 1707882 · 1707882
1 parent 0633c6d
commit 1707882
Showing 1 changed file with 54 additions and 11 deletions.
diff --git a/packages/ds-theme/src/variants/light/variables.less b/packages/ds-theme/src/variants/light/variables.less
@@ -205,22 +205,71 @@
 
 
 // Table/Grid
-// TODO: Need to review
 @grid-border-color                       : @separator-color;
 @grid-header-text-color                  : @header-text-color;
-@grid-header-background-color            : @header-background-color;
+@grid-header-background-color            : @cont-color-common-container-surface-on-layer-1-subtle; // @header-background-color;
 @grid-header-border-color                : @grid-header-background-color;
+@grid-header-hover-background-color      : @cont-color-common-container-surface-on-layer-1-moderate; // Missing
 @grid-row-text-color                     : @global-text-color;
 @grid-row-background-color               : @global-background-color;
 @grid-row-hover-text-color               : @grid-row-text-color;
-@grid-row-hover-background-color         : fade(mix(@scheme-color-primary, @grid-row-background-color, 15%), 50%);
+@grid-row-hover-background-color         : @cont-color-common-container-surface-on-layer-3-minimal; // fade(mix(@scheme-color-primary, @grid-row-background-color, 15%), 50%);
 @grid-row-active-text-color              : @grid-row-text-color;
-@grid-row-active-background-color        : @grid-row-hover-background-color;
+@grid-row-active-background-color        : @cont-color-common-container-surface-on-layer-3-subtle; // @grid-row-hover-background-color;
 @grid-row-active-border-width            : @grid-border-width;
 @grid-row-active-border-color            : @scheme-color-primary;
-@grid-row-focus-border-color             : @scheme-color-primary;
+@grid-row-focus-border-color             : @cont-color-common-container-misc-focus;
 @grid-row-focus-border                   : @grid-row-focus-border-width dotted @grid-row-focus-border-color;
 
+// Grid
+@grid-text-color                         : @global-text-color;
+@grid-header-alt-background-color        : @header-background-color;
+@grid-row-alternate-background-color     : darken(@grid-row-background-color, 2%);
+
+// Grid column
+// - Column selection
+@grid-column-active-title-border-color   : invalidColor; // selected column title divider
+@grid-column-active-border-color         : @cont-color-common-container-brand-base; // selection boundary, overrides global-focus-bordercolor
+
+// - Column separator (between pined and unpined column)
+@grid-column-separator-background-color  : darken(@separator-color, 1%);
+
+// Grid row
+// - Row group header
+@grid-row-header-background-color        : darken(@grid-row-background-color, 3%); // TBC
+@grid-expended-row-header-color          : @cont-color-common-fg-generic-bold; // TBC
+
+// - Row group tag
+@grid-tag-background-color               : darken(@cont-color-common-fg-generic-moderate, 20%);
+@grid-expanded-tag-background-color      : darken(@cont-color-common-fg-generic-moderate, 10%);
+
+// Grid dragging UI
+@grid-guideline-background-color         : @cont-color-common-fg-primary-moderate; // Placeholder guide
+@grid-drag-box-border-color              : @control-border-color;
+@grid-drag-box-background-color          : lighten(@grid-row-background-color, 5%);
+@grid-drag-indicator-border-color        : dashed 1px lighten(@separator-color, 20%); // Border of dragging selected column
+
+// Grid icons
+// - Filter icon, Stack icon
+@grid-title-icon-color                   : @cont-color-common-fg-primary-moderate;
+@grid-title-icon-active-color            : @cont-color-common-fg-primary-on-primary-moderate;  // active filtering
+@grid-title-icon-hover-color             : @cont-color-common-fg-primary-bold;
+
+// - Sort icon
+@grid-title-sort-icon-color              : @cont-color-common-fg-primary-moderate;
+
+// - Tiny filter icon
+@grid-title-dot-icon-color               : @grid-header-text-color;
+
+// - Row menu icon, column menu icon
+@grid-menu-icon-color                    : #ffffff;
+@grid-menu-icon-background-color         : @cont-color-common-fg-brand-moderate;
+@grid-menu-icon-hover-background-color   : @cont-color-common-fg-brand-bold;
+
+// - Row more icon
+@grid-row-more-icon-color                : @grid-header-text-color;
+@grid-row-more-icon-hover-color          : @cont-color-common-fg-primary-bold;
+
 // Tabs
 @tab-background-color                    : @header-level3-bg-color;
 @tab-text-color                          : @button-text-color;
@@ -252,12 +301,6 @@
 // Tab bar
 @tab-bar-background-color                : @cont-color-common-container-surface-layer-2;
 
-// Grid
-// TODO: Need to review
-@grid-text-color                         : @global-text-color;
-@grid-header-alt-background-color        : @header-background-color;
-@grid-row-alternate-background-color     : darken(@grid-row-background-color, 2%);
-
 // Data viz
 @dataviz-color-primary                   : @scheme-color-primary;
 @dataviz-color-secondary                 : @scheme-color-secondary;