Skip to content

Commit

Permalink
refactor(ds-theme): update grid color variables to match specs (#1233)
Browse files Browse the repository at this point in the history 
Co-authored-by: Pornchai Korpraserttaworn <[email protected]>
  • Loading branch information
@wsuwt @efx-grid
wsuwt and efx-grid authored Dec 12, 2024
1 parent ca29f2e commit 7a3849b
Showing 1 changed file with 32 additions and 25 deletions.
57 changes: 32 additions & 25 deletions packages/ds-theme/src/variants/light/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,21 +229,21 @@


// Table/Grid
@grid-border-color : @separator-color;
@grid-header-text-color : @header-text-color;
@grid-header-background-color : @cont-color-common-container-surface-on-layer-1-subtle; // @header-background-color;
@grid-border-color : @cont-color-common-container-surface-on-layer-1-subtle;
@grid-header-text-color : @cont-color-common-fg-generic-bold;
@grid-header-background-color : @cont-color-common-container-surface-layer-1;
@grid-header-border-color : @grid-header-background-color;
@grid-header-hover-background-color : @cont-color-common-container-surface-on-layer-1-moderate; // Missing
@grid-header-hover-background-color : @cont-color-common-container-surface-on-layer-1-minimal;
@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 : @cont-color-common-container-surface-on-layer-3-minimal; // fade(mix(@scheme-color-primary, @grid-row-background-color, 15%), 50%);
@grid-row-hover-background-color : @cont-color-common-container-surface-on-layer-1-minimal;
@grid-row-active-text-color : @grid-row-text-color;
@grid-row-active-background-color : @cont-color-common-container-surface-on-layer-3-subtle; // @grid-row-hover-background-color;
@grid-row-active-background-color : @cont-color-common-container-surface-on-layer-1-minimal;
@grid-row-active-border-width : @grid-border-width;
@grid-row-active-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-row-focus-border-color : @cont-color-common-container-neutral-bold;
@grid-row-focus-border : @grid-row-focus-border-width solid @grid-row-focus-border-color;

// Grid
@grid-text-color : @global-text-color;
Expand All @@ -253,46 +253,53 @@
// 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
@grid-column-active-border-color : @cont-color-common-container-primary-base; // selection boundary, overrides global-focus-bordercolor

// - Column separator (between pined and unpined column)
@grid-column-separator-background-color : darken(@separator-color, 1%);
@grid-column-separator-background-color : @cont-color-common-container-surface-on-layer-1-bold;

// 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
@grid-row-header-background-color : @cont-color-common-container-surface-layer-1;
@grid-expended-row-header-color : @global-text-color;

// - 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-tag-background-color : @cont-color-common-container-neutral-bold;
@grid-expanded-tag-background-color : @cont-color-common-container-neutral-bold;

// 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-guideline-background-color : @cont-color-action-bg-primary-base; // Placeholder guide
@grid-drag-box-border-color : @cont-color-common-container-neutral-bold;
@grid-drag-box-background-color : @cont-color-common-container-surface-on-layer-1-minimal;
@grid-drag-indicator-border-color : @cont-color-common-container-neutral-bold; // 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;
@grid-title-icon-active-color : @cont-color-common-container-primary-base; // active filtering

// - Sort icon
@grid-title-sort-icon-color : @cont-color-common-fg-primary-moderate;
@grid-title-sort-icon-color : @cont-color-common-container-primary-base;

// - Tiny filter icon
@grid-title-dot-icon-color : @grid-header-text-color;
@grid-title-dot-icon-color : @cont-color-common-container-primary-base;

// - 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;
@grid-menu-icon-color : @cont-color-common-fg-generic-bold-inverse;
@grid-menu-icon-hover-color : @cont-color-common-fg-generic-subtle-inverse;
@grid-menu-icon-background-color : @cont-color-common-container-neutral-bold;
@grid-menu-icon-hover-background-color : @cont-color-common-container-neutral-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;
@grid-row-more-icon-hover-color : @cont-color-common-fg-generic-bold;

// - In cell editor
@grid-input-text-color : @grid-row-text-color;
@grid-input-background-color : @cont-color-common-container-surface-layer-1;
@grid-input-selection-text-color : @cont-color-common-fg-generic-bold-inverse;
@grid-input-selection-background-color : @cont-color-common-container-misc-focus;

// Tabs
@tab-background-color : @cont-color-navigation-bg-on-layer-1-minimal;
Expand Down

0 comments on commit 7a3849b

Please sign in to comment.