Skip to content

Commit 4d0a023

Browse files
didimmovasimeonoff
didimmova
and
simeonoff
authored
feat(themes): export component themes from angular to theming (#16027)
* feat(themes): export component themes from angular to theming * chore(theming): bump igniteui-theming version * chore: bump version of theming in package.json --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent f02e0a0 commit 4d0a023

File tree

63 files changed

+14
-9865
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+14
-9865
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 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
@@ -74,7 +74,7 @@
7474
"@types/source-map": "0.5.2",
7575
"express": "^5.1.0",
7676
"fflate": "^0.8.1",
77-
"igniteui-theming": "^19.1.2",
77+
"igniteui-theming": "^19.2.0",
7878
"igniteui-trial-watermark": "^3.1.0",
7979
"lodash-es": "^4.17.21",
8080
"rxjs": "^7.8.2",

‎projects/igniteui-angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.1.0",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^19.1.2",
76+
"igniteui-theming": "^19.2.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,7 @@
11
@use 'sass:map';
22
@use '../../base' as *;
3-
@use '../../themes/schemas' as *;
43
@use 'igniteui-theming/sass/animations/easings' as *;
54

6-
////
7-
/// @group themes
8-
/// @access public
9-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
10-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
11-
////
12-
13-
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
14-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
15-
/// @param {Color} $color [null] - The text color used of the avatar.
16-
/// @param {Color} $icon-color [null] - The icon color used of the avatar.
17-
/// @param {Color} $background [null] - The background color used of the avatar.
18-
/// @param {Number} $border-radius [null] - The border-radius used of the avatar.
19-
/// @param {Number} $size [null] - The size of the avatar.
20-
/// @requires $light-material-schema
21-
///
22-
/// @example scss Change the background and icon colors in icon avatars
23-
/// $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
24-
/// // Pass the theme to the css-vars() mixin
25-
/// @include css-vars($my-avatar-theme);
26-
@function avatar-theme(
27-
$schema: $light-material-schema,
28-
$background: null,
29-
$color: null,
30-
$icon-color: null,
31-
$border-radius: null,
32-
$size: null,
33-
) {
34-
$name: 'igx-avatar';
35-
$avatar-schema: ();
36-
37-
@if map.has-key($schema, 'avatar') {
38-
$avatar-schema: map.get($schema, 'avatar');
39-
} @else {
40-
$avatar-schema: $schema;
41-
}
42-
43-
$theme: digest-schema($avatar-schema);
44-
45-
@if not($color) and $background {
46-
$color: adaptive-contrast(var(--background));
47-
}
48-
49-
@if not($icon-color) and $background {
50-
$icon-color: adaptive-contrast(var(--background));
51-
}
52-
53-
@return extend($theme, (
54-
name: $name,
55-
background: $background,
56-
color: $color,
57-
icon-color: $icon-color,
58-
border-radius: $border-radius,
59-
size: $size,
60-
));
61-
}
62-
635
/// @deprecated Use the `css-vars` mixin instead.
646
/// @see {mixin} css-vars
657
/// @param {Map} $theme - The theme used to style the component.

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

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,6 @@
11
@use '../../base' as *;
2-
@use '../../themes/schemas' as *;
32
@use 'sass:map';
43

5-
////
6-
/// @group themes
7-
/// @access public
8-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
9-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
10-
////
11-
12-
/// If only background color is specified, text/icon color
13-
/// will be assigned automatically to a contrasting color.
14-
///
15-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
16-
/// @param {Color} $icon-color [null] - The icon color used.
17-
/// @param {Color} $text-color [null] - The text color used.
18-
/// @param {Color} $border-color [null] - The border color used.
19-
/// @param {Color} $background-color [null] - The background color used.
20-
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
21-
/// @param {Number} $border-radius [null] - The border radius used for badge component.
22-
///
23-
/// @requires $light-material-schema
24-
///
25-
/// @example scss Change the text and icon colors in a badge
26-
/// $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
27-
/// // Pass the theme to the css-vars() mixin
28-
/// @include css-vars($my-badge-theme);
29-
@function badge-theme(
30-
$schema: $light-material-schema,
31-
32-
$icon-color: null,
33-
$text-color: null,
34-
35-
$border-color: null,
36-
$border-radius: null,
37-
38-
$background-color: null,
39-
$shadow: null,
40-
) {
41-
$name: 'igx-badge';
42-
$badge-schema: ();
43-
44-
@if map.has-key($schema, 'badge') {
45-
$badge-schema: map.get($schema, 'badge');
46-
} @else {
47-
$badge-schema: $schema;
48-
}
49-
50-
$theme: digest-schema($badge-schema);
51-
52-
@if not($icon-color) and $background-color {
53-
$icon-color: adaptive-contrast(var(--background-color));
54-
}
55-
56-
@if not($text-color) and $background-color {
57-
$text-color: adaptive-contrast(var(--background-color));
58-
}
59-
60-
@if not($shadow) {
61-
$elevation: map.get($badge-schema, 'elevation');
62-
$shadow: elevation($elevation);
63-
}
64-
65-
@return extend($theme, (
66-
name: $name,
67-
icon-color: $icon-color,
68-
text-color: $text-color,
69-
border-color: $border-color,
70-
border-radius: $border-radius,
71-
background-color: $background-color,
72-
shadow: $shadow,
73-
));
74-
}
75-
764
/// @deprecated Use the `css-vars` mixin instead.
775
/// @see {mixin} css-vars
786
/// @param {Map} $theme - The theme used to style the component.

‎projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,5 @@
11
@use 'sass:map';
22
@use '../../base' as *;
3-
@use '../../themes/schemas' as *;
4-
5-
////
6-
/// @group themes
7-
/// @access public
8-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
9-
////
10-
11-
/// If only background color is specified, text/icon color
12-
/// will be assigned automatically to a contrasting color.
13-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
14-
///
15-
/// @param {Color} $banner-background [null] - The color used for the banner background.
16-
/// @param {Color} $banner-message-color [null] - The color used for the banner label.
17-
/// @param {Color} $banner-border-color [null] - The color used for the banner border.
18-
/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration.
19-
/// @param {Number} $border-radius [null] - The border-radius for the banner.
20-
///
21-
/// @requires $light-material-schema
22-
///
23-
/// @example scss Change the background in banner
24-
/// $my-banner-theme: banner-theme($banner-background: #000);
25-
/// // Pass the theme to the css-vars() mixin
26-
/// @include css-vars($my-banner-theme);
27-
@function banner-theme(
28-
$schema: $light-material-schema,
29-
$banner-background: null,
30-
$banner-message-color: null,
31-
$banner-border-color: null,
32-
$banner-illustration-color: null,
33-
$border-radius: null,
34-
) {
35-
$name: 'igx-banner';
36-
$selector: 'igx-banner, .igx-banner';
37-
$banner-schema: ();
38-
39-
@if map.has-key($schema, 'banner') {
40-
$banner-schema: map.get($schema, 'banner');
41-
} @else {
42-
$banner-schema: $schema;
43-
}
44-
45-
$theme: digest-schema($banner-schema);
46-
47-
@if not($banner-message-color) and $banner-background {
48-
$banner-message-color: adaptive-contrast(var(--banner-background));
49-
}
50-
51-
@if not($banner-illustration-color) and $banner-background {
52-
$banner-illustration-color: adaptive-contrast(var(--banner-background));
53-
}
54-
55-
@return extend($theme, (
56-
name: $name,
57-
selector: $selector,
58-
banner-background: $banner-background,
59-
banner-message-color: $banner-message-color,
60-
banner-border-color: $banner-border-color,
61-
banner-illustration-color: $banner-illustration-color,
62-
border-radius: $border-radius,
63-
));
64-
}
653

664
/// @deprecated Use the `css-vars` mixin instead.
675
/// @see {mixin} css-vars

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,7 @@
11
@use 'sass:map';
2-
@use 'sass:meta';
32
@use '../../base' as *;
4-
@use '../../themes/schemas' as *;
53
@use 'igniteui-theming/sass/animations/easings' as *;
64

7-
////
8-
/// @group themes
9-
/// @access public
10-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
11-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
12-
////
13-
14-
/// If only background color is specified,
15-
/// the label and icon colors will be assigned automatically to a contrasting color.
16-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
17-
/// @param {Color} $background [null] - The background color used for the toast.
18-
/// @param {Color} $label-color [null] - The label color used in idle state.
19-
/// @param {Color} $icon-color [null] - The icon color used in idle state.
20-
/// @param {Color} $label-selected-color [null] - The label color used in selected state.
21-
/// @param {Color} $icon-selected-color [null] - The icon color used in selected state.
22-
/// @param {Color} $icon-disabled-color [null] - The disabled color of the icon.
23-
/// @param {Color} $label-disabled-color [null] - The disabled color of the label.
24-
/// @param {Color} $border-color [null] - The border color of the bottom navigation.
25-
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
26-
/// @requires $light-material-schema
27-
/// @example scss Set a custom background color
28-
/// $my-bottom-nav-theme: bottom-nav-theme($background: black);
29-
/// // Pass the theme to the css-vars() mixin
30-
/// @include css-vars($my-bottom-nav-theme);
31-
@function bottom-nav-theme(
32-
$schema: $light-material-schema,
33-
$background: null,
34-
$icon-color: null,
35-
$icon-selected-color: null,
36-
$label-color: null,
37-
$label-selected-color: null,
38-
$icon-disabled-color: null,
39-
$label-disabled-color: null,
40-
$border-color: null,
41-
$shadow: null,
42-
) {
43-
$name: 'igx-bottom-nav';
44-
$bottom-nav-schema: ();
45-
46-
@if map.has-key($schema, 'bottom-nav') {
47-
$bottom-nav-schema: map.get($schema, 'bottom-nav');
48-
} @else {
49-
$bottom-nav-schema: $schema;
50-
}
51-
52-
$theme: digest-schema($bottom-nav-schema);
53-
54-
@if not($label-color) and not($icon-color) and $background {
55-
$label-color: adaptive-contrast(var(--background));
56-
}
57-
58-
@if not($icon-color) and $label-color {
59-
$icon-color: $label-color;
60-
}
61-
62-
@if not($label-color) and $icon-color {
63-
$label-color: $icon-color;
64-
}
65-
66-
@if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
67-
$label-disabled-color: adaptive-contrast(var(--background));
68-
}
69-
70-
@if not($icon-disabled-color) and $label-disabled-color {
71-
$icon-disabled-color: $label-disabled-color;
72-
}
73-
74-
@if not($label-disabled-color) and $icon-disabled-color {
75-
$label-disabled-color: $icon-disabled-color;
76-
}
77-
78-
@if not($icon-selected-color) and $label-selected-color {
79-
$icon-selected-color: $label-selected-color;
80-
}
81-
82-
@if not($label-selected-color) and $icon-selected-color {
83-
$label-selected-color: $icon-selected-color;
84-
}
85-
86-
@if not($shadow) {
87-
$elevation: map.get($bottom-nav-schema, 'elevation');
88-
$shadow: elevation($elevation);
89-
}
90-
91-
@return extend($theme, (
92-
name: $name,
93-
background: $background,
94-
icon-color: $icon-color,
95-
icon-selected-color: $icon-selected-color,
96-
label-color: $label-color,
97-
label-selected-color: $label-selected-color,
98-
icon-disabled-color: $icon-disabled-color,
99-
label-disabled-color: $label-disabled-color,
100-
border-color: $border-color,
101-
shadow: $shadow,
102-
));
103-
}
104-
1055
/// @deprecated Use the `css-vars` mixin instead.
1066
/// @see {mixin} css-vars
1077
/// @param {Map} $theme - The theme used to style the component.

0 commit comments

Comments
 (0)