Skip to content

Commit 7ff3ee2

Browse files
didimmovaCopilotdesig9steinsimeonoffCopilot
authored
feat(themes): add derived themes for inner components (#17257)
* feat(themes): add derived themes for inner components * feat(paginator/migations): update paginator properties and write migrations * chore(grid): address comments * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * chore(*): fix migrations formatting and component register * fix(themes): address issues * feat(grid): add header related derived checkbox * fix(excel-fitlering): fix duplicated parameters in button group theme * deps: bump theming version * deps: update the npm packages * npm: attempt to fix package-lock.json * build: set bigger styles budget --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Marin Popov <desig9stein@users.noreply.github.com> Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent 0856ca9 commit 7ff3ee2

26 files changed

Lines changed: 2032 additions & 1348 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": "650kb",
382-
"maximumError": "700kb"
381+
"maximumWarning": "850kb",
382+
"maximumError": "1000kb"
383383
},
384384
{
385385
"type": "anyComponentStyle",

‎package-lock.json‎

Lines changed: 960 additions & 1093 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"express": "^5.2.1",
8383
"fflate": "^0.8.1",
8484
"igniteui-i18n-core": "^1.0.2",
85-
"igniteui-theming": "^26.0.1",
85+
"igniteui-theming": "^27.0.0",
8686
"igniteui-trial-watermark": "^3.1.0",
8787
"jspdf": "^4.2.1",
8888
"lodash-es": "^4.17.21",
@@ -134,9 +134,9 @@
134134
"igniteui-angular-core": "^21.0.0",
135135
"igniteui-dockmanager": "^1.17.0",
136136
"igniteui-grid-lite": "~0.7.1",
137-
"igniteui-i18n-resources": "^1.0.2",
137+
"igniteui-i18n-resources": "^1.0.5",
138138
"igniteui-sassdoc-theme": "^2.1.0",
139-
"igniteui-webcomponents": "^7.0.0",
139+
"igniteui-webcomponents": "^7.2.1",
140140
"jasmine": "^5.6.0",
141141
"jasmine-core": "^5.6.0",
142142
"karma": "^6.4.4",

‎projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@use 'sass:map';
2+
@use 'igniteui-theming/sass/themes/schemas' as *;
3+
4+
/// Function to extract theme variant and schema for derived themes
5+
/// @param $theme - The theme map
6+
/// @returns Map with keys: 'variant', 'theme-variant', 'schema'
7+
@function extract-theme-schema($theme) {
8+
$variant: map.get($theme, '_meta', 'theme');
9+
$theme-variant: map.get($theme, '_meta', 'variant');
10+
$schema: map.get(
11+
(
12+
'light-material': $light-material-schema,
13+
'light-bootstrap': $light-bootstrap-schema,
14+
'light-fluent': $light-fluent-schema,
15+
'light-indigo': $light-indigo-schema,
16+
'dark-material': $dark-material-schema,
17+
'dark-bootstrap': $dark-bootstrap-schema,
18+
'dark-fluent': $dark-fluent-schema,
19+
'dark-indigo': $dark-indigo-schema,
20+
),
21+
'#{$theme-variant}-#{$variant}'
22+
);
23+
24+
@return (
25+
'variant': $variant,
26+
'theme-variant': $theme-variant,
27+
'schema': $schema
28+
);
29+
}

‎projects/igniteui-angular/core/src/core/styles/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@forward 'drop-down/drop-down-theme';
2323
@forward 'expansion-panel/expansion-panel-theme';
2424
@forward 'grid/grid-theme';
25+
@forward 'grid/excel-filtering-theme';
2526
@forward 'grid/pivot-data-selector-theme';
2627
@forward 'grid-summary/grid-summary-theme';
2728
@forward 'grid-toolbar/grid-toolbar-theme';

‎projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@use 'sass:map';
2+
@use '../../base' as *;
3+
@use '../_common/extract-theme-schema' as *;
4+
5+
/// Column actions internal components theming
6+
@mixin column-actions-derived-themes($theme) {
7+
$theme-info: extract-theme-schema($theme);
8+
$schema: map.get($theme-info, 'schema');
9+
10+
:where(igx-column-actions) {
11+
--_column-actions-background: var(--background, var(--ig-column-actions-background));
12+
--_column-actions-foreground: var(--foreground, var(--ig-column-actions-foreground));
13+
--_column-actions-accent-color: var(--accent-color, var(--ig-column-actions-accent-color));
14+
15+
@include tokens(
16+
checkbox-theme(
17+
$schema: $schema,
18+
$empty-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
19+
$empty-fill-color: var(--_column-actions-background),
20+
$tick-color-hover: color-mix(in srgb, var(--_column-actions-foreground) 40%, var(--_column-actions-background)),
21+
$fill-color: var(--_column-actions-accent-color),
22+
$label-color: var(--_column-actions-foreground),
23+
$disabled-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background)),
24+
)
25+
);
26+
27+
@include tokens(
28+
drop-down-theme(
29+
$schema: $schema,
30+
$background-color: var(--_column-actions-background),
31+
$item-text-color: var(--_column-actions-foreground),
32+
$border-color: color-mix(in srgb, var(--_column-actions-foreground) 12%, var(--_column-actions-background)),
33+
$hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 8%, var(--_column-actions-background)),
34+
$focused-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
35+
$selected-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
36+
$selected-hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 16%, var(--_column-actions-background)),
37+
$selected-focus-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 24%, var(--_column-actions-background)),
38+
)
39+
);
40+
41+
@include tokens(
42+
flat-button-theme(
43+
$schema: $schema,
44+
$foreground: var(--_column-actions-accent-color),
45+
$disabled-background: transparent,
46+
$disabled-foreground: color-mix(in srgb, var(--_column-actions-accent-color) 50%, var(--_column-actions-background)),
47+
)
48+
);
49+
50+
@include tokens(
51+
input-group-theme(
52+
$schema: $schema,
53+
$idle-bottom-line-color: var(--_column-actions-accent-color),
54+
$border-color: var(--_column-actions-accent-color),
55+
$idle-text-color: var(--_column-actions-foreground),
56+
$placeholder-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
57+
)
58+
);
59+
60+
$scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
61+
$scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
62+
$scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
63+
$scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
64+
65+
--_scrollbar-thumb-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background));
66+
--_scrollbar-track-border-color: color-mix(in srgb, var(--_column-actions-foreground) 16%, var(--_column-actions-background));
67+
68+
@include tokens(
69+
scrollbar-theme(
70+
$schema: $schema,
71+
$sb-track-bg-color: var(--_column-actions-background, $scrollbar-bg-color),
72+
$sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
73+
$sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
74+
),
75+
$mode: 'scoped'
76+
);
77+
}
78+
}

‎projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
@use 'sass:map';
22
@use '../../base' as *;
3+
@use 'igniteui-theming/sass/themes/schemas' as *;
4+
@use './column-actions-derived-themes' as *;
35

4-
/// @deprecated Use the `css-vars` mixin instead.
5-
/// @see {mixin} css-vars
6+
/// @deprecated Use the `tokens` mixin instead.
7+
/// @see {mixin} tokens
68
/// @param {Map} $theme - The theme used to style the component.
79
@mixin column-actions($theme) {
8-
@include css-vars($theme);
10+
@include tokens($theme, $mode: 'scoped');
11+
@include column-actions-derived-themes($theme);
912
$variant: map.get($theme, '_meta', 'theme');
1013

1114
%column-actions-display {
1215
display: flex;
1316
flex-flow: column nowrap;
14-
background: var-get($theme, 'background-color');
17+
background: var-get($theme, 'background');
1518
box-shadow: elevation(8);
1619
width: 100%;
1720
flex: 1 1 auto;

‎projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@use 'sass:map';
2+
@use '../../base' as *;
3+
@use 'igniteui-theming/sass/themes/schemas' as *;
4+
@use '../_common/extract-theme-schema' as *;
5+
6+
/// Grid toolbar internal theming
7+
/// @access private
8+
/// @param {Map} $theme - The grid toolbar theme map.
9+
@mixin grid-toolbar-derived-themes($theme) {
10+
$theme-info: extract-theme-schema($theme);
11+
$schema: map.get($theme-info, 'schema');
12+
13+
:where(igx-grid-toolbar) {
14+
--_grid-toolbar-background: var(--background, var(--ig-grid-toolbar-background));
15+
--_grid-toolbar-foreground: var(--foreground, var(--ig-grid-toolbar-foreground));
16+
--_grid-toolbar-accent-color: var(--accent-color, var(--ig-grid-toolbar-accent-color));
17+
18+
@include tokens(
19+
column-actions-theme(
20+
$schema: $schema,
21+
$background: var(--_grid-toolbar-background),
22+
$foreground: var(--_grid-toolbar-foreground),
23+
$title-color: var(--_grid-toolbar-accent-color),
24+
$accent-color: var(--_grid-toolbar-accent-color)
25+
)
26+
);
27+
28+
@include tokens(
29+
outlined-button-theme(
30+
$schema: $schema,
31+
$foreground: var(--_grid-toolbar-accent-color),
32+
$disabled-background: transparent,
33+
$disabled-foreground: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
34+
$disabled-border-color: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
35+
)
36+
);
37+
}
38+
}

‎projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
@use 'sass:map';
22
@use '../../base' as *;
3+
@use 'igniteui-theming/sass/themes/schemas' as *;
4+
@use './grid-toolbar-derived-themes' as *;
35

4-
/// @deprecated Use the `css-vars` mixin instead.
5-
/// @see {mixin} css-vars
6+
/// @deprecated Use the `tokens` mixin instead.
7+
/// @see {mixin} tokens
68
/// @param {Map} $theme - The theme used to style the component.
79
@mixin grid-toolbar($theme) {
8-
@include css-vars($theme);
10+
@include tokens($theme, $mode: 'scoped');
11+
@include grid-toolbar-derived-themes($theme);
912

1013
$variant: map.get($theme, '_meta', 'theme');
1114
$bootstrap-theme: $variant == 'bootstrap';
@@ -67,7 +70,7 @@
6770
grid-row: 1;
6871
font-size: $grid-toolbar-fs;
6972
border-bottom: rem(1px) solid var-get($theme, 'border-color');
70-
background: var-get($theme, 'background-color');
73+
background: var-get($theme, 'background');
7174
height: auto;
7275
min-height: var-get($theme, 'size');
7376
padding-block: 0;
@@ -179,7 +182,7 @@
179182
bottom: rem(-1px);
180183
height: rem(2px);
181184
overflow: hidden;
182-
background: var-get($theme, 'background-color');
185+
background: var-get($theme, 'background');
183186

184187
igx-linear-bar > * {
185188
border-radius: 0;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
@use '../../base' as *;
2+
@use 'sass:string';
23

34
/// @access private
45
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
56
@mixin excel-filtering-partial {
7+
@include register-component(
8+
$name: 'igx-grid-excel-style-filtering',
9+
$deps: (
10+
igx-button,
11+
igx-checkbox,
12+
igx-icon-button,
13+
igx-input-group,
14+
)
15+
);
16+
617
@include b(igx-excel-filter) {
718
@extend %grid-excel-filter !optional;
819

0 commit comments

Comments
 (0)