igniteui-theming 5.0.0-beta.4 → 5.0.0-beta.5

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 +23 -4
  3. package/sass/themes/schemas/components/elevation/_snackbar.scss +7 -1
  4. package/sass/themes/schemas/components/light/_banner.scss +36 -24
  5. package/sass/themes/schemas/components/light/_snackbar.scss +8 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "5.0.0-beta.4",
3
+ "version": "5.0.0-beta.5",
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,9 +19,9 @@ $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 background color used banner background.
23
- /// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for banner label.
24
- /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
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
25
  /// @requires $bootstrap-banner
26
26
  $dark-bootstrap-banner: extend(
27
27
  $bootstrap-banner,
@@ -50,5 +50,24 @@ $dark-bootstrap-banner: extend(
50
50
 
51
51
  /// Generates a dark indigo banner schema.
52
52
  /// @type {Map}
53
+ /// @prop {Map} banner-background [color: ('gray', 50)] - The color used for the banner background.
54
+ /// @prop {Map} banner-border-color [color: ('gray', 100)] - The color used for the banner border.
53
55
  /// @requires $indigo-banner
54
- $dark-indigo-banner: $indigo-banner;
56
+ $dark-indigo-banner: extend(
57
+ $indigo-banner,
58
+ (
59
+ banner-background: (
60
+ color: (
61
+ 'gray',
62
+ 50,
63
+ ),
64
+ ),
65
+
66
+ banner-border-color: (
67
+ color: (
68
+ 'gray',
69
+ 100,
70
+ ),
71
+ ),
72
+ )
73
+ );
package/sass/themes/schemas/components/elevation/_snackbar.scss CHANGED
@@ -11,7 +11,13 @@ $default-elevation-snackbar: (
11
11
  );
12
12
 
13
13
  /// @type Map
14
- /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar.
14
+ /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the bootstrap snackbar.
15
15
  $bootstrap-elevation-snackbar: (
16
16
  elevation: 10,
17
17
  );
18
+
19
+ /// @type Map
20
+ /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used in the indigo snackbar.
21
+ $indigo-elevation-snackbar: (
22
+ elevation: 0,
23
+ );
package/sass/themes/schemas/components/light/_banner.scss CHANGED
@@ -9,10 +9,10 @@
9
9
 
10
10
  /// Generates a light banner schema.
11
11
  /// @type {Map}
12
- /// @prop {Map} banner-background [color: 'surface']- The background color used banner background.
13
- /// @prop {Map} banner-message-color [contrast-color: 'surface']- The color used for banner label.
14
- /// @prop {Map} banner-border-color [color: ('gray', 400)] - The border color used banner border.
15
- /// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used banner illustration.
12
+ /// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
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.
16
16
  $light-banner: (
17
17
  banner-background: (
18
18
  color: 'surface',
@@ -46,9 +46,9 @@ $fluent-banner: $light-banner;
46
46
 
47
47
  /// Generates a bootstrap banner schema.
48
48
  /// @type {Map}
49
- /// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The background color used banner background.
50
- /// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for banner label.
51
- /// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used banner illustration.
49
+ /// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
50
+ /// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
51
+ /// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
52
52
  /// @requires {Map} $light-banner
53
53
  $bootstrap-banner: extend(
54
54
  $light-banner,
@@ -78,24 +78,36 @@ $bootstrap-banner: extend(
78
78
 
79
79
  /// Generates an indigo banner schema.
80
80
  /// @type {Map}
81
- /// @prop {Map} banner-message-color [color: ('gray', 900)]- The color used for banner label.
82
- /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
83
- /// @requires {Map} $light-banner
84
- $indigo-banner: extend(
85
- $light-banner,
86
- (
87
- banner-message-color: (
88
- color: (
89
- 'gray',
90
- 900,
91
- ),
81
+ /// @prop {Map} banner-background [color: ('gray', 200)] - The color used for the banner background.
82
+ /// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
83
+ /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
84
+ /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
85
+ $indigo-banner: (
86
+ banner-background: (
87
+ color: (
88
+ 'gray',
89
+ 200,
92
90
  ),
91
+ ),
93
92
 
94
- banner-illustration-color: (
95
- color: (
96
- 'gray',
97
- 600,
98
- ),
93
+ banner-border-color: (
94
+ color: (
95
+ 'gray',
96
+ 300,
99
97
  ),
100
- )
98
+ ),
99
+
100
+ banner-message-color: (
101
+ color: (
102
+ 'gray',
103
+ 700,
104
+ ),
105
+ ),
106
+
107
+ banner-illustration-color: (
108
+ color: (
109
+ 'gray',
110
+ 600,
111
+ ),
112
+ ),
101
113
  );
package/sass/themes/schemas/components/light/_snackbar.scss CHANGED
@@ -108,31 +108,32 @@ $bootstrap-snackbar: extend(
108
108
 
109
109
  /// Generates an indigo snackbar schema.
110
110
  /// @type {Map}
111
- /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
112
- /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
113
- /// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
111
+ /// @prop {Map} background [color: ('gray', 200)] - The background color used in the snackbar.
112
+ /// @prop {Map} text-color [color: ('gray', 700)] - The text color used in the snackbar.
113
+ /// @prop {Map} button-color [color: ('gray', 700)] - The button color used in the snackbar.
114
114
  /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
115
115
  /// @requires $light-snackbar
116
+ /// @requires {Map} $indigo-elevation-snackbar
116
117
  $indigo-snackbar: extend(
117
118
  $light-snackbar,
119
+ $indigo-elevation-snackbar,
118
120
  (
119
121
  background: (
120
122
  color: (
121
123
  'gray',
122
- 700,
123
- 0.9,
124
+ 200,
124
125
  ),
125
126
  ),
126
127
 
127
128
  text-color: (
128
- contrast-color: (
129
+ color: (
129
130
  'gray',
130
131
  700,
131
132
  ),
132
133
  ),
133
134
 
134
135
  button-color: (
135
- contrast-color: (
136
+ color: (
136
137
  'gray',
137
138
  700,
138
139
  ),