Skip to content

Commit 5b681a1

Browse files
simeonoffsimeonoff
authored
deps: bump dependencies for CSS var ig prefix; update elements utils (#16883)
1 parent 15ee9de commit 5b681a1

34 files changed

Lines changed: 809 additions & 408 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"express": "^5.2.1",
7878
"fflate": "^0.8.1",
7979
"igniteui-i18n-core": "^1.0.2",
80-
"igniteui-theming": "^24.1.1",
80+
"igniteui-theming": "^25.0.0-beta.5",
8181
"igniteui-trial-watermark": "^3.1.0",
8282
"jspdf": "^4.0.0",
8383
"lodash-es": "^4.17.21",

‎projects/igniteui-angular-elements/src/themes/_util.scss‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use 'sass:string';
44
@use 'sass:list';
55
@use '../../../igniteui-angular/core/src/core/styles/themes' as igx;
6+
@use 'igniteui-theming/sass/themes/config' as theme;
67
@use './variables' as vars;
78

89
/// Prefix used for 'global' component CSS vars
@@ -25,52 +26,58 @@ $elements-selector-prefix: 'igc';
2526
/// @access private
2627
/// @param {Map} $theme_schema - The component's theme schema
2728
/// @return {Map} - Updated component theme schema
28-
@function updateElementName($theme_schema) {
29-
$prefix: 'ig';
29+
@function update-element($theme_schema) {
3030
$result: $theme_schema;
3131

32-
@if map.has-key($theme_schema, "name") {
33-
$name: map.get($theme_schema, "name");
34-
$selector: map.get($theme_schema, "selector") or $name;
32+
@if map.has-key($theme_schema, '_meta', 'name') {
33+
$name: map.get($theme_schema, '_meta', 'name');
34+
$selector: map.get($theme_schema, 'selector') or $name;
3535
$modified: ();
3636

37-
// @debug "name: #{$name}";
38-
39-
@if string.index($name, 'igx-') {
40-
$name: list.nth(string.split($name, 'igx-'), -1);
41-
$name: '#{$elements-var-prefix}-#{$name}';
42-
// @debug "name after: #{$name}";
43-
$modified: map.merge($modified, (name: $name));
44-
}
45-
46-
// For exposed components also modify selector with updated element prefix:
47-
@if list.index(vars.$allowed, map.get($theme_schema, "name")) {
48-
// @debug "selector before: #{$selector}";
49-
$selector: updateSelectors($selector);
50-
// @debug "selector after: #{$selector}";
37+
// For exposed components also update the selector with updated element prefix
38+
@if list.index(vars.$allowed, #{igx-#{$name}}) {
39+
$selector: update-selectors($selector);
5140
}
5241

53-
$modified: map.merge($modified, (selector: $selector));
42+
$modified: map.merge(
43+
$modified,
44+
(
45+
selector: $selector,
46+
)
47+
);
5448

49+
// INFO: Weird use case! I'm not aware of any component using this, but just in case...
5550
@if map.has-key($theme_schema, 'themes') {
5651
$themes: map.get($theme_schema, 'themes');
57-
$newThemes: ();
52+
$new: ();
53+
5854
@each $name, $sub_schema in $themes {
59-
$newThemes: map.set($newThemes, $name, updateElementName($sub_schema));
55+
$newThemes: map.set(
56+
$newThemes,
57+
$name,
58+
update-element($sub_schema)
59+
);
6060
}
61-
$modified: map.merge($modified, (themes: $newThemes));
61+
62+
$modified: map.deep-merge(
63+
$modified,
64+
(
65+
themes: $new,
66+
)
67+
);
6268
}
6369

6470
$result: map.merge($result, $modified);
6571
}
72+
6673
@return $result;
6774
}
6875

6976
/// Break down the selector and update `igx-` element selectors with matching `igc-` for exposed Elements
7077
/// @access private
7178
/// @param {String} $selector - The selector(s) to update
7279
/// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
73-
@function updateSelectors($selector) {
80+
@function update-selectors($selector) {
7481
$result: ();
7582

7683
@each $sel in $selector {
@@ -83,7 +90,7 @@ $elements-selector-prefix: 'igc';
8390
}
8491
}
8592

86-
@return "#{$result}";
93+
@return '#{$result}';
8794
}
8895

8996
/// Generates an Ignite UI for Angular Elements global theme.
@@ -96,18 +103,13 @@ $elements-selector-prefix: 'igc';
96103
/// @requires $light-material-schema
97104
/// @requires {function} is-component
98105
/// @requires {function} is-used
99-
@mixin elements-theme(
100-
$palette,
101-
$schema,
102-
$exclude,
103-
// $roundness,
104-
// $elevation,
105-
// $elevations,
106-
) {
106+
@mixin elements-theme($palette, $schema, $exclude) {
107+
@include theme.configure-variable-prefix($elements-var-prefix);
108+
107109
@include igx.theme-internal(
108110
$palette: $palette,
109111
$exclude: $exclude,
110112
$schema: $schema,
111-
$theme-handler: meta.get-function("updateElementName")
113+
$theme-handler: meta.get-function('update-element')
112114
);
113115
}

‎projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@
6868
igx-icon {
6969
--component-size: var(--action-strip-size);
7070

71-
width: var(--igx-icon-size, rem(18px));
72-
height: var(--igx-icon-size, rem(18px));
73-
font-size: var(--igx-icon-size, rem(18px));
71+
width: var(--ig-icon-size, rem(18px));
72+
height: var(--ig-icon-size, rem(18px));
73+
font-size: var(--ig-icon-size, rem(18px));
7474
}
7575

7676
&%igx-drop-down__item {

‎projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
overflow: hidden;
2929

3030
igx-icon {
31-
--size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
31+
--size: var(--ig-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
3232
--component-size: var(--badge-size);
3333

3434
display: inline-flex;
@@ -42,7 +42,6 @@
4242
$icon-size: sizable(rem(8px), rem(10px), rem(12px));
4343

4444
--ig-icon-size: #{$icon-size};
45-
--igx-icon-size: #{$icon-size};
4645
}
4746
}
4847
}

‎projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@
143143
$icon-size: rem(18px);
144144

145145
--ig-icon-size: #{$icon-size};
146-
--igx-icon-size: #{$icon-size};
147146
}
148147

149148
&:active {
@@ -159,7 +158,6 @@
159158
$icon-size: rem(16px);
160159

161160
--ig-icon-size: #{$icon-size};
162-
--igx-icon-size: #{$icon-size};
163161
}
164162

165163
&:hover {

‎projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -328,9 +328,9 @@
328328
--component-size: var(--ig-size, var(--ig-size-large));
329329
display: flex;
330330
justify-content: center;
331-
width: var(--igx-icon-size, #{$icon-in-button-size});
332-
height: var(--igx-icon-size, #{$icon-in-button-size});
333-
font-size: var(--igx-icon-size, #{$icon-in-button-size});
331+
width: var(--ig-icon-size, #{$icon-in-button-size});
332+
height: var(--ig-icon-size, #{$icon-in-button-size});
333+
font-size: var(--ig-icon-size, #{$icon-in-button-size});
334334
transition: var(--_button-transition);
335335
}
336336
}

‎projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
// in order to override the !important rule of .igx-icon--inactive.
9696
%igx-combo__case-icon {
9797
igx-icon {
98-
--igx-icon-disabled-color: var(--ig-gray-600);
98+
--ig-icon-disabled-color: var(--ig-gray-600);
9999

100100
opacity: 1;
101101
}
@@ -159,8 +159,8 @@
159159

160160
@if $variant == 'fluent' or $variant == 'bootstrap' {
161161
%igx-combo__search {
162-
--igx-input-group-input-suffix-background: transparent;
163-
--igx-input-group-input-suffix-background--focused: transparent;
162+
--ig-input-group-input-suffix-background: transparent;
163+
--ig-input-group-input-suffix-background--focused: transparent;
164164

165165
.igx-input-group__bundle::after {
166166
border-block-end-color: var(--border-color);

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393

9494
@if $variant != 'indigo' {
9595
igx-icon {
96-
--size: var(--igx-icon-size, #{rem(15px)});
96+
--size: var(--ig-icon-size, #{rem(15px)});
9797
}
9898
}
9999
}
@@ -546,9 +546,9 @@
546546
}
547547

548548
igx-icon {
549-
width: var(--igx-icon-size, #{$tree-node-expander-size});
550-
height: var(--igx-icon-size, #{$tree-node-expander-size});
551-
font-size: var(--igx-icon-size, #{$tree-node-expander-size});
549+
width: var(--ig-icon-size, #{$tree-node-expander-size});
550+
height: var(--ig-icon-size, #{$tree-node-expander-size});
551+
font-size: var(--ig-icon-size, #{$tree-node-expander-size});
552552
}
553553

554554
> igx-checkbox,
@@ -694,9 +694,9 @@
694694
}
695695

696696
igx-icon {
697-
width: var(--igx-icon-size, #{rem(18px)});
698-
height: var(--igx-icon-size, #{rem(18px)});
699-
font-size: var(--igx-icon-size, #{rem(18px)});
697+
width: var(--ig-icon-size, #{rem(18px)});
698+
height: var(--ig-icon-size, #{rem(18px)});
699+
font-size: var(--ig-icon-size, #{rem(18px)});
700700
}
701701
}
702702

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -436,43 +436,43 @@
436436
igx-tree-grid {
437437
@if $variant == 'material' {
438438
@if $theme-variant == 'light' {
439-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
440-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
441-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
439+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
440+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
441+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
442442
}
443443
@if $theme-variant == 'dark' {
444-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
445-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
446-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
444+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
445+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
446+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
447447
}
448448
}
449449

450450
@if $variant == 'fluent' {
451451
@if $theme-variant == 'dark' {
452-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
453-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
454-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
452+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
453+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
454+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
455455
}
456456
}
457457

458458
@if $variant == 'bootstrap' {
459459
@if $theme-variant == 'dark' {
460-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
461-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
462-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
460+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
461+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
462+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
463463
}
464464
}
465465

466466
@if $variant == 'indigo' {
467467
@if $theme-variant == 'light' {
468-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
469-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
470-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
468+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
469+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
470+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
471471
}
472472
@if $theme-variant == 'dark' {
473-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
474-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
475-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
473+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
474+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
475+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
476476
}
477477
}
478478
}
@@ -501,7 +501,7 @@
501501
map.get($grouparea-min-height, 'comfortable')
502502
)};
503503

504-
--igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
504+
--ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
505505

506506
position: relative;
507507
display: grid;
@@ -1284,9 +1284,9 @@
12841284

12851285
> igx-icon {
12861286
color: color($color: 'error');
1287-
width: var(--igx-icon-size, rem(18px));
1288-
height: var(--igx-icon-size, rem(18px));
1289-
font-size: var(--igx-icon-size, rem(18px));
1287+
width: var(--ig-icon-size, rem(18px));
1288+
height: var(--ig-icon-size, rem(18px));
1289+
font-size: var(--ig-icon-size, rem(18px));
12901290
}
12911291

12921292
%grid-cell-text {
@@ -1544,7 +1544,7 @@
15441544

15451545
@if $variant != 'indigo' {
15461546
igx-icon {
1547-
--size: var(--igx-icon-size, #{rem(15px)});
1547+
--size: var(--ig-icon-size, #{rem(15px)});
15481548
}
15491549
}
15501550

@@ -2175,9 +2175,9 @@
21752175
margin: 0 rem(4px);
21762176

21772177
igx-icon {
2178-
width: var(--igx-icon-size, #{rem(16px)});
2179-
height: var(--igx-icon-size, #{rem(16px)});
2180-
font-size: var(--igx-icon-size, #{rem(16px)});
2178+
width: var(--ig-icon-size, #{rem(16px)});
2179+
height: var(--ig-icon-size, #{rem(16px)});
2180+
font-size: var(--ig-icon-size, #{rem(16px)});
21812181
}
21822182

21832183
[dir='rtl'] & {

0 commit comments

Comments
 (0)