Skip to content

feat(grid): derive theme tokens for internal components #17049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 42 commits into from
Apr 20, 2026
Merged

feat(grid): derive theme tokens for internal components #17049

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
58033e4
feat(grid): add initial implementation
didimmova Mar 16, 2026
e1b5a13
feat(grid): add tokens for components used in the grid
didimmova Mar 17, 2026
37d257a
feat(grid): implement new properties and set more inner component themes
didimmova Mar 19, 2026
9dca793
chore(grid): fix button-group tokens import
didimmova Mar 19, 2026
6fc3907
feat(grid): improve grid theming
didimmova Mar 19, 2026
c7a01a0
feat(grid-builder): update button disabled states and hardcoded values
didimmova Mar 20, 2026
645f17a
feat(grid-theme-builder): revert query-builder, fix select and checkb…
didimmova Mar 20, 2026
e20447a
feat(grid): use the new filtering background property and add badge t…
didimmova Mar 23, 2026
8a3ddd9
feat(grid): update component themes in grid
didimmova Mar 23, 2026
8e87c3b
chore(button-group): fix button group in bootstrap when active
didimmova Mar 23, 2026
7a0aacd
chore(checkbox): moved disabled logic to another PR
didimmova Mar 24, 2026
87ad2e1
feat(grid): make drop-downtheme global in the grid
didimmova Mar 25, 2026
e2534cd
chore(grid): include elements-grid selectors
didimmova Mar 25, 2026
eaae112
chore(elements): remove hardcoded css vars in elements grid
didimmova Mar 25, 2026
7c613ea
feat(grid): update grid-sumamry background color
didimmova Mar 26, 2026
e42a10e
fix(grid): include dropdown theme globally under grids scope
didimmova Mar 26, 2026
ed416d0
chore(samples): fix grid percentage sample cell border
didimmova Mar 26, 2026
d141202
feat(grid-samples): create a grid-theme-builder sample
didimmova Mar 26, 2026
c3ebcbd
feat(grid-sample): bind signal properties to grid theme values
didimmova Mar 26, 2026
254799d
fix(button-group): update button-group theme in grid
didimmova Mar 26, 2026
ea4cf24
chore(grid-samples): add padding to block end of theme builder sample
didimmova Mar 26, 2026
fde8e3e
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Mar 27, 2026
e355370
chore(*): revert demo theme and address comments
didimmova Mar 27, 2026
f0c2ea8
feat(grid-sample): have the auto derived foreground functionality in …
didimmova Mar 27, 2026
961f7bf
fix(grid-search-box): remove unused IgxRippleDirective import
Copilot Mar 27, 2026
5e76955
sample(grid-theme-builder): remove row draggable option
didimmova Mar 27, 2026
96eaa1f
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Mar 31, 2026
f38075c
fix(grid): get default scrollbar colors from schema
simeonoff Apr 1, 2026
632931a
feat(grid): update grid theme
didimmova Apr 1, 2026
3583dd7
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 2, 2026
54918c9
chore(deps): bump theming version
didimmova Apr 2, 2026
53e1939
Merge branch 'master' into didimmova/grid-theme-builder
simeonoff Apr 14, 2026
b2cb9a9
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 14, 2026
d145ee7
feat(grid): export inner components tokens to another file and create…
didimmova Apr 14, 2026
6b0dfcb
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 14, 2026
59cd5fe
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 20, 2026
d659005
fix(grid): update circular progress properties in grid theme
simeonoff Apr 20, 2026
8f7ab1c
build: increase styles budget
simeonoff Apr 20, 2026
9d6bcc7
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 20, 2026
a134d22
fix(angular-elements): revert index.html file in angular-elements
didimmova Apr 20, 2026
871dd56
Merge branch 'master' into didimmova/grid-theme-builder
didimmova Apr 20, 2026
a89aaa7
Merge branch 'master' into didimmova/grid-theme-builder
simeonoff Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions projects/igniteui-angular-elements/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@
igc-grid,
igc-tree-grid {
max-height: 550px;
--ig-grid-grouparea-background: #ff000012;
--ig-grid-drop-area-background: #ff004c12;
--ig-paginator-border-color: #d0ab23;
}

.range-wrapper {
Expand Down Expand Up @@ -443,7 +440,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
<script type="module">
import { html } from "/lit-html.js";
// jump around vite import analysis with dynamic import url
const hgridData = (await import(`/assets/${'data'}/projects-hgrid.js`)).default;
const hgridData = (await import(/* @vite-ignore */ `/assets/${'data'}/projects-hgrid.js`)).default;
let hgrid = document.getElementById('hgrid1');
hgrid.data = hgridData;

Expand Down
5 changes: 4 additions & 1 deletion ...ts/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,10 @@
border-color: var-get($theme, 'item-selected-border-color');
background: var-get($theme, 'item-selected-hover-background');

igx-icon {
color: var-get($theme, 'item-selected-icon-color');
}

&::before {
background: var-get($theme, 'item-selected-focus-background');
}
Expand All @@ -382,7 +386,6 @@
@if $variant == 'fluent' {
&:hover {
background: var-get($theme, 'item-selected-background');
color: var-get($theme, 'item-selected-text-color');

@extend %item-overlay;

Expand Down
134 changes: 16 additions & 118 deletions projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
flex-grow: 1;

@if $variant == 'indigo' {
box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100));
box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');

// TODO: The border-radius should not be hardcoded.
border-radius: border-radius(rem(4px));
Expand Down Expand Up @@ -102,13 +102,13 @@
opacity: 1;

igx-icon {
color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary'));
color: var-get($theme, 'sorted-header-icon-color');
}

@if $variant == 'indigo' {
&:hover {
igx-icon {
color: color($color: 'primary', $variant: 400);
color: var-get($theme, 'sortable-header-icon-hover-color');
}
}
}
Expand All @@ -126,65 +126,8 @@

@if $variant != 'indigo' {
background: var-get($theme, 'filtering-row-background');

%igx-group-display {
--elevation: none;
--item-background: #{var-get($theme, 'filtering-row-background')};
--item-hover-background: #{color($color: 'gray', $variant: 100)};
--item-selected-background: #{color($color: 'gray', $variant: 100)};
--item-text-color: #{color($color: 'gray', $variant: 700)};
--item-icon-color: #{color($color: 'gray', $variant: 700)};
--item-hover-text-color: #{color($color: 'gray', $variant: 800)};
--item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
--item-selected-text-color: #{if(
$variant == 'indigo',
contrast-color($color: 'surface'),
color($color: 'secondary', $variant: 500)
)};
--item-selected-icon-color: #{if(
$variant == 'indigo',
contrast-color($color: 'surface'),
color($color: 'secondary', $variant: 500)
)};
--item-selected-hover-icon-color: #{if(
$variant == 'fluent',
color($color: 'secondary', $variant: 500),
contrast-color($color: 'gray', $variant: 50)
)};
--item-border-color: transparent;
--item-hover-border-color: transparent;
--item-focused-border-color: #{if(
$variant == 'fluent',
color($color: 'gray', $variant: 700),
transparent
)};
--item-selected-border-color: transparent;
--item-selected-hover-border-color: transparent;
--item-disabled-border: transparent;
--disabled-selected-border-color: transparent;
}
} @else {
@if $theme-variant == 'light' {
background: contrast-color($color: 'gray', $variant: 900);
} @else {
background: color($color: 'gray', $variant: 50);
}

%igx-group-display {
--item-background: transparent;
@if $theme-variant == 'dark' {
--item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
}
--border-color: transparent;
--item-border-color: transparent;
--item-focused-border-color: transparent;
--item-hover-border-color: transparent;
--item-selected-border-color: transparent;
--item-selected-hover-border-color: transparent;
--item-disabled-border: transparent;
--disabled-selected-border-color: transparent;
--elevation: none;
}
background: var-get($theme, 'filtering-dialog-background');

%igx-group-item {
&:not(:nth-child(1)) {
Expand Down Expand Up @@ -348,11 +291,7 @@

%grid-excel-actions--selected {
igx-icon {
color: if(
$variant == 'indigo',
color($color: 'primary', $variant: 200),
color($color: 'secondary')
);
color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
}
}

Expand Down Expand Up @@ -401,37 +340,18 @@
&:hover,
&:focus {
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
background: var-get($theme, 'excel-filtering-actions-hover-background');

@if $variant == 'indigo' {
@if $theme-variant == 'light' {
background: color($color: 'gray', $variant: 200);
} @else {
background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
}

igx-icon {
/* stylelint-disable max-nesting-depth */
@if $theme-variant == 'light' {
color: color($color: 'gray', $variant: 700);
} @else {
color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
}
/* stylelint-enable max-nesting-depth */
}
} @else {
background: color($color: 'gray', $variant: 100);
igx-icon {
color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
}
}

@if $variant == 'indigo' {
igx-icon {
--component-size: 2;

@if $theme-variant == 'light' {
color: color($color: 'gray', $variant: 600);
} @else {
color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
}
color: var-get($theme, 'excel-filtering-actions-icon-color');
}
}

Expand All @@ -449,7 +369,6 @@
}

%grid-excel-actions__action--active {
background: color($color: 'gray', $variant: 100);
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
}

Expand All @@ -468,6 +387,7 @@
display: grid;
place-items: center;
height: 100%;
color: var-get($theme, 'excel-filtering-subheader-foreground');
}

%grid-excel-main {
Expand All @@ -489,7 +409,7 @@
overflow: hidden;

@if $variant == 'indigo' {
--background: #{color($color: 'surface', $variant: 500)};
--background: var(--ig-grid-background, #{color($color: 'surface', $variant: 500)});

margin-inline: calc(sizable(rem(-16px)) * -1);

Expand All @@ -510,19 +430,8 @@
}

border: 0;

@if $bootstrap-theme {
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
} @else {
border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
}

@if $variant == 'indigo' and $theme-variant == 'dark' {
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
}
border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
}

%igx-excel-filter__tree {
Expand All @@ -531,19 +440,8 @@
margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
margin-block: 0;
flex: 1;

@if $bootstrap-theme {
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
} @else {
border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
}

@if $variant == 'indigo' and $theme-variant == 'dark' {
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
}
border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');

igx-icon {
width: var(--ig-icon-size, #{$tree-node-expander-size});
Expand Down Expand Up @@ -721,7 +619,7 @@

@if $bootstrap-theme {
padding-block-start: pad-block(rem(16px));
border-top: rem(1px) solid color($color: 'gray', $variant: 300);
border-top: rem(1px) solid color-mix(in srgb, var(--ig-grid-foreground, --ig-gray-300) 20%, var(--ig-grid-background, --ig-gray-300));
Comment thread
didimmova marked this conversation as resolved.
Outdated
}

%grid-excel-filter__apply,
Expand Down
Loading
Loading