From 042a8aee59211f7a34dafd83d66852951accaa8e Mon Sep 17 00:00:00 2001 From: Pornchai Korpraserttaworn Date: Mon, 25 Nov 2024 15:49:39 +0700 Subject: [PATCH] refactor(ds-theme): revised/added variable for grid --- .../src/variants/light/variables.less | 65 +++++++++++++++---- 1 file changed, 54 insertions(+), 11 deletions(-) diff --git a/packages/ds-theme/src/variants/light/variables.less b/packages/ds-theme/src/variants/light/variables.less index 9a61e7d63..ca6a5a145 100644 --- 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;