Skip to content

Commit f15af8d

Browse files
didimmovaCopilotsimeonoff
authored
feat(grid): derive theme tokens for internal components (#17049)
* feat(grid): add initial implementation * feat(grid): add tokens for components used in the grid * feat(grid): implement new properties and set more inner component themes * chore(grid): fix button-group tokens import * feat(grid): improve grid theming * feat(grid-builder): update button disabled states and hardcoded values * feat(grid-theme-builder): revert query-builder, fix select and checkbox themes * feat(grid): use the new filtering background property and add badge theme to grid theme builder * feat(grid): update component themes in grid * chore(button-group): fix button group in bootstrap when active * chore(checkbox): moved disabled logic to another PR * feat(grid): make drop-downtheme global in the grid * chore(grid): include elements-grid selectors * chore(elements): remove hardcoded css vars in elements grid * feat(grid): update grid-sumamry background color * fix(grid): include dropdown theme globally under grids scope * chore(samples): fix grid percentage sample cell border * feat(grid-samples): create a grid-theme-builder sample * feat(grid-sample): bind signal properties to grid theme values * fix(button-group): update button-group theme in grid * chore(grid-samples): add padding to block end of theme builder sample * chore(*): revert demo theme and address comments * feat(grid-sample): have the auto derived foreground functionality in grid-theme-builder sample * fix(grid-search-box): remove unused IgxRippleDirective import Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/521278ee-fa9a-440b-8981-8a771e8e3e95 Co-authored-by: didimmova <45598235+didimmova@users.noreply.github.com> * sample(grid-theme-builder): remove row draggable option * fix(grid): get default scrollbar colors from schema * feat(grid): update grid theme * chore(deps): bump theming version * feat(grid): export inner components tokens to another file and create mixin * fix(grid): update circular progress properties in grid theme * build: increase styles budget * fix(angular-elements): revert index.html file in angular-elements --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent 61608b1 commit f15af8d

15 files changed

Lines changed: 705 additions & 169 deletions

‎angular.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -378,8 +378,8 @@
378378
{
379379
"type": "bundle",
380380
"name": "styles",
381-
"maximumWarning": "600kb",
382-
"maximumError": "600kb"
381+
"maximumWarning": "650kb",
382+
"maximumError": "700kb"
383383
},
384384
{
385385
"type": "anyComponentStyle",

‎projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss‎

Lines changed: 16 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
flex-grow: 1;
4141

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

4545
// TODO: The border-radius should not be hardcoded.
4646
border-radius: border-radius(rem(4px));
@@ -102,13 +102,13 @@
102102
opacity: 1;
103103

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

108108
@if $variant == 'indigo' {
109109
&:hover {
110110
igx-icon {
111-
color: color($color: 'primary', $variant: 400);
111+
color: var-get($theme, 'sortable-header-icon-hover-color');
112112
}
113113
}
114114
}
@@ -126,65 +126,8 @@
126126

127127
@if $variant != 'indigo' {
128128
background: var-get($theme, 'filtering-row-background');
129-
130-
%igx-group-display {
131-
--elevation: none;
132-
--item-background: #{var-get($theme, 'filtering-row-background')};
133-
--item-hover-background: #{color($color: 'gray', $variant: 100)};
134-
--item-selected-background: #{color($color: 'gray', $variant: 100)};
135-
--item-text-color: #{color($color: 'gray', $variant: 700)};
136-
--item-icon-color: #{color($color: 'gray', $variant: 700)};
137-
--item-hover-text-color: #{color($color: 'gray', $variant: 800)};
138-
--item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
139-
--item-selected-text-color: #{if(
140-
$variant == 'indigo',
141-
contrast-color($color: 'surface'),
142-
color($color: 'secondary', $variant: 500)
143-
)};
144-
--item-selected-icon-color: #{if(
145-
$variant == 'indigo',
146-
contrast-color($color: 'surface'),
147-
color($color: 'secondary', $variant: 500)
148-
)};
149-
--item-selected-hover-icon-color: #{if(
150-
$variant == 'fluent',
151-
color($color: 'secondary', $variant: 500),
152-
contrast-color($color: 'gray', $variant: 50)
153-
)};
154-
--item-border-color: transparent;
155-
--item-hover-border-color: transparent;
156-
--item-focused-border-color: #{if(
157-
$variant == 'fluent',
158-
color($color: 'gray', $variant: 700),
159-
transparent
160-
)};
161-
--item-selected-border-color: transparent;
162-
--item-selected-hover-border-color: transparent;
163-
--item-disabled-border: transparent;
164-
--disabled-selected-border-color: transparent;
165-
}
166129
} @else {
167-
@if $theme-variant == 'light' {
168-
background: contrast-color($color: 'gray', $variant: 900);
169-
} @else {
170-
background: color($color: 'gray', $variant: 50);
171-
}
172-
173-
%igx-group-display {
174-
--item-background: transparent;
175-
@if $theme-variant == 'dark' {
176-
--item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
177-
}
178-
--border-color: transparent;
179-
--item-border-color: transparent;
180-
--item-focused-border-color: transparent;
181-
--item-hover-border-color: transparent;
182-
--item-selected-border-color: transparent;
183-
--item-selected-hover-border-color: transparent;
184-
--item-disabled-border: transparent;
185-
--disabled-selected-border-color: transparent;
186-
--elevation: none;
187-
}
130+
background: var-get($theme, 'filtering-dialog-background');
188131

189132
%igx-group-item {
190133
&:not(:nth-child(1)) {
@@ -348,11 +291,7 @@
348291

349292
%grid-excel-actions--selected {
350293
igx-icon {
351-
color: if(
352-
$variant == 'indigo',
353-
color($color: 'primary', $variant: 200),
354-
color($color: 'secondary')
355-
);
294+
color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
356295
}
357296
}
358297

@@ -401,37 +340,18 @@
401340
&:hover,
402341
&:focus {
403342
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
343+
background: var-get($theme, 'excel-filtering-actions-hover-background');
404344

405-
@if $variant == 'indigo' {
406-
@if $theme-variant == 'light' {
407-
background: color($color: 'gray', $variant: 200);
408-
} @else {
409-
background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
410-
}
411-
412-
igx-icon {
413-
/* stylelint-disable max-nesting-depth */
414-
@if $theme-variant == 'light' {
415-
color: color($color: 'gray', $variant: 700);
416-
} @else {
417-
color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
418-
}
419-
/* stylelint-enable max-nesting-depth */
420-
}
421-
} @else {
422-
background: color($color: 'gray', $variant: 100);
345+
igx-icon {
346+
color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
423347
}
424348
}
425349

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

430-
@if $theme-variant == 'light' {
431-
color: color($color: 'gray', $variant: 600);
432-
} @else {
433-
color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
434-
}
354+
color: var-get($theme, 'excel-filtering-actions-icon-color');
435355
}
436356
}
437357

@@ -449,7 +369,6 @@
449369
}
450370

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

@@ -468,6 +387,7 @@
468387
display: grid;
469388
place-items: center;
470389
height: 100%;
390+
color: var-get($theme, 'excel-filtering-subheader-foreground');
471391
}
472392

473393
%grid-excel-main {
@@ -489,7 +409,7 @@
489409
overflow: hidden;
490410

491411
@if $variant == 'indigo' {
492-
--background: #{color($color: 'surface', $variant: 500)};
412+
--background: var(--_grid-background, #{color($color: 'surface', $variant: 500)});
493413

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

@@ -510,19 +430,8 @@
510430
}
511431

512432
border: 0;
513-
514-
@if $bootstrap-theme {
515-
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
516-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
517-
} @else {
518-
border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
519-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
520-
}
521-
522-
@if $variant == 'indigo' and $theme-variant == 'dark' {
523-
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
524-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
525-
}
433+
border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
434+
border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
526435
}
527436

528437
%igx-excel-filter__tree {
@@ -531,19 +440,8 @@
531440
margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
532441
margin-block: 0;
533442
flex: 1;
534-
535-
@if $bootstrap-theme {
536-
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
537-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
538-
} @else {
539-
border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
540-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
541-
}
542-
543-
@if $variant == 'indigo' and $theme-variant == 'dark' {
544-
border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
545-
border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
546-
}
443+
border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
444+
border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
547445

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

722620
@if $bootstrap-theme {
723621
padding-block-start: pad-block(rem(16px));
724-
border-top: rem(1px) solid color($color: 'gray', $variant: 300);
622+
border-top: rem(1px) solid color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 20%, var(--_grid-background, var(--ig-gray-300)));
725623
}
726624

727625
%grid-excel-filter__apply,

0 commit comments

Comments
 (0)