igniteui-theming 7.0.1 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_banner.scss +1 -27
  3. package/sass/themes/schemas/components/light/_banner.scss +65 -22
  4. package/sass/themes/schemas/components/light/_button-group.scss +3 -0
  5. package/sass/themes/schemas/components/light/_icon-button.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "7.0.1",
3
+ "version": "7.1.0",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/themes/schemas/components/dark/_banner.scss CHANGED
@@ -19,34 +19,8 @@ $dark-fluent-banner: $fluent-banner;
19
19
 
20
20
  /// Generates a dark bootstrap banner schema.
21
21
  /// @type {Map}
22
- /// @prop {Map} banner-background [color: ('surface')] - The color used for the banner background.
23
- /// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for the banner label.
24
- /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
25
22
  /// @requires $bootstrap-banner
26
- $dark-bootstrap-banner: extend(
27
- $bootstrap-banner,
28
- (
29
- banner-background: (
30
- color: (
31
- 'surface',
32
- ),
33
- ),
34
-
35
- banner-message-color: (
36
- color: (
37
- 'gray',
38
- 600,
39
- ),
40
- ),
41
-
42
- banner-illustration-color: (
43
- color: (
44
- 'gray',
45
- 600,
46
- ),
47
- ),
48
- )
49
- );
23
+ $dark-bootstrap-banner: $bootstrap-banner;
50
24
 
51
25
  /// Generates a dark indigo banner schema.
52
26
  /// @type {Map}
package/sass/themes/schemas/components/light/_banner.scss CHANGED
@@ -11,52 +11,92 @@
11
11
  /// @type {Map}
12
12
  /// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
13
13
  /// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
14
- /// @prop {Map} banner-border-color [color: ('gray', 400)] - The color used for the banner border.
15
- /// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used for the banner illustration.
14
+ /// @prop {Number} border-radius [0] - The border radius of the banner
16
15
  $light-banner: (
17
16
  banner-background: (
18
17
  color: 'surface',
19
18
  ),
20
19
 
21
- banner-message-color: (
22
- contrast-color: 'surface',
23
- ),
24
-
25
- banner-border-color: (
26
- color: (
27
- 'gray',
28
- 400,
29
- ),
30
- ),
31
-
32
- banner-illustration-color: (
33
- contrast-color: 'surface',
34
- ),
20
+ border-radius: 0,
35
21
  );
36
22
 
37
23
  /// Generates a material banner schema.
38
24
  /// @type {Map}
25
+ /// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
26
+ /// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
27
+ /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
39
28
  /// @requires {Map} $light-banner
40
- $material-banner: $light-banner;
29
+ $material-banner: extend(
30
+ $light-banner,
31
+ (
32
+ banner-border-color: (
33
+ color: (
34
+ 'gray',
35
+ 300,
36
+ ),
37
+ ),
38
+
39
+ banner-message-color: (
40
+ color: (
41
+ 'gray',
42
+ 900,
43
+ ),
44
+ ),
45
+
46
+ banner-illustration-color: (
47
+ color: (
48
+ 'gray',
49
+ 900,
50
+ ),
51
+ ),
52
+ )
53
+ );
41
54
 
42
55
  /// Generates a fluent banner schema.
43
56
  /// @type {Map}
57
+ /// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
58
+ /// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
59
+ /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
44
60
  /// @requires {Map} $light-banner
45
- $fluent-banner: $light-banner;
61
+ $fluent-banner: extend(
62
+ $light-banner,
63
+ (
64
+ banner-border-color: (
65
+ color: (
66
+ 'gray',
67
+ 300,
68
+ ),
69
+ ),
70
+
71
+ banner-message-color: (
72
+ color: (
73
+ 'gray',
74
+ 900,
75
+ ),
76
+ ),
77
+
78
+ banner-illustration-color: (
79
+ color: (
80
+ 'gray',
81
+ 900,
82
+ ),
83
+ ),
84
+ )
85
+ );
46
86
 
47
87
  /// Generates a bootstrap banner schema.
48
88
  /// @type {Map}
49
- /// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
50
89
  /// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
90
+ /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
51
91
  /// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
52
92
  /// @requires {Map} $light-banner
53
93
  $bootstrap-banner: extend(
54
94
  $light-banner,
55
95
  (
56
- banner-background: (
57
- contrast-color: (
96
+ banner-border-color: (
97
+ color: (
58
98
  'gray',
59
- 900,
99
+ 300,
60
100
  ),
61
101
  ),
62
102
 
@@ -82,6 +122,7 @@ $bootstrap-banner: extend(
82
122
  /// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
83
123
  /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
84
124
  /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
125
+ /// @prop {Number} border-radius [rem(6px)] - The border radius of the banner
85
126
  $indigo-banner: (
86
127
  banner-background: (
87
128
  color: (
@@ -110,4 +151,6 @@ $indigo-banner: (
110
151
  600,
111
152
  ),
112
153
  ),
154
+
155
+ border-radius: rem(6px),
113
156
  );
package/sass/themes/schemas/components/light/_button-group.scss CHANGED
@@ -132,6 +132,7 @@ $light-button-group: extend(
132
132
  /// @prop {Map} disabled-selected-icon-color [color: ('gray', 400)] - The disabled icon color for a selected item in the button group.
133
133
  /// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
134
134
  /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
135
+ /// @prop {Number} default-size [3] - The default size used for the button-group component.
135
136
  /// @requires {Map} $light-button-group
136
137
  /// @requires {Map} $default-elevation-button-group
137
138
  $material-button-group: extend(
@@ -297,6 +298,8 @@ $material-button-group: extend(
297
298
  400,
298
299
  ),
299
300
  ),
301
+
302
+ default-size: 3,
300
303
  )
301
304
  );
302
305
 
package/sass/themes/schemas/components/light/_icon-button.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material icon button.
30
30
  /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
31
31
  /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
32
- /// @prop {Number} default-size [2] - The default size used for the icon button.
32
+ /// @prop {Number} default-size [3] - The default size used for the icon button.
33
33
  $material-base-icon-button: (
34
34
  shadow-color: transparent,
35
35
  background: transparent,
@@ -121,7 +121,7 @@ $material-base-icon-button: (
121
121
  rem(36px),
122
122
  ),
123
123
  ),
124
- default-size: 2,
124
+ default-size: 3,
125
125
  );
126
126
 
127
127
  /// Generates a material flat icon button schema.