igniteui-theming 4.0.1 → 4.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 (4) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_button-group.scss +50 -27
  3. package/sass/themes/schemas/components/dark/_calendar.scss +0 -6
  4. package/sass/themes/schemas/components/light/_button-group.scss +86 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "4.0.1",
3
+ "version": "4.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/_button-group.scss CHANGED
@@ -11,7 +11,9 @@
11
11
  /// @type {Map}
12
12
  /// @prop {Map} item-disabled-border [color: ('gray', 100)] - The border color for a disabled item in the button group.
13
13
  /// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
14
+ /// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
14
15
  /// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
16
+ /// @prop {Map} item-focused-background [color: ('gray', 100), .8] - The focused background color for button group items.
15
17
  /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
16
18
  /// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The background color for a selected item in hover or focus state in the button group.
17
19
  /// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
@@ -24,6 +26,14 @@ $base-dark-button-group: (
24
26
  ),
25
27
  ),
26
28
 
29
+ item-focused-background: (
30
+ color: (
31
+ 'gray',
32
+ 100,
33
+ 0.8,
34
+ ),
35
+ ),
36
+
27
37
  item-selected-background: (
28
38
  color: (
29
39
  'gray',
@@ -53,6 +63,13 @@ $base-dark-button-group: (
53
63
  ),
54
64
  ),
55
65
 
66
+ item-focused-border-color: (
67
+ color: (
68
+ 'gray',
69
+ 100,
70
+ ),
71
+ ),
72
+
56
73
  item-disabled-border: (
57
74
  color: (
58
75
  'gray',
@@ -69,16 +86,17 @@ $dark-button-group: extend($light-button-group, $base-dark-button-group);
69
86
 
70
87
  /// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
71
88
  /// @type {Map}
72
- /// @prop {Map} item-border-color [color: ('gray', 100)] - The border color for button group items.
73
- /// @prop {Map} item-selected-border-color [color: ('gray', 100)] - The border color for button group selected items.
74
- /// @prop {Map} item-disabled-border: [color: ('gray', 100)] - The border color for button group disabled items.
89
+ /// @prop {Map} item-border-color [color: ('gray', 400)] - The border color for button group items.
90
+ /// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for button group items.
91
+ /// @prop {Map} item-disabled-border: [color: ('gray', 400)] - The border color for button group disabled items.
75
92
  /// @prop {Map} item-text-color [color: ('gray', 900)] - The text color for button group items.
76
- /// @prop {Map} item-hover-text-color [color: ('primary', 200)] - The text color for button group items on hover.
77
- /// @prop {Color} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
78
- /// @prop {Map} item-selected-background [color: ('gray', 100, .5)] - The background color for button group selected items.
79
- /// @prop {Map} item-selected-hover-background [color: ('gray', 100, .5)] - The background color for button group selected items on hover.
80
- /// @prop {Map} item-selected-text-color [color: ('primary', 200)] - The text color for button group selected items.
81
- /// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for button group disabled items.
93
+ /// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
94
+ /// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
95
+ /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for button group selected items.
96
+ /// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover or focus state in the button group.
97
+ /// @prop {Map} item-selected-border-color [color: ('gray', 400)] - The border color for button group selected items.
98
+ /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for button group disabled items.
99
+ /// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled item in the button group.
82
100
  /// @requires $fluent-button-group
83
101
  /// @requires $base-dark-button-group
84
102
  $dark-fluent-button-group: extend(
@@ -92,61 +110,59 @@ $dark-fluent-button-group: extend(
92
110
  ),
93
111
  ),
94
112
 
95
- item-selected-text-color: (
113
+ item-hover-background: (
96
114
  color: (
97
- 'primary',
98
- 200,
115
+ 'gray',
116
+ 50,
99
117
  ),
100
118
  ),
101
119
 
102
- item-hover-text-color: (
120
+ item-focused-background: (
103
121
  color: (
104
- 'primary',
105
- 200,
122
+ 'gray',
123
+ 100,
106
124
  ),
107
125
  ),
108
126
 
109
- item-hover-background: (
127
+ item-selected-background: (
110
128
  color: (
111
129
  'gray',
112
- 50,
130
+ 200,
113
131
  ),
114
132
  ),
115
133
 
116
- item-selected-background: (
134
+ item-selected-hover-background: (
117
135
  color: (
118
136
  'gray',
119
- 100,
120
- 0.5,
137
+ 300,
121
138
  ),
122
139
  ),
123
140
 
124
- item-selected-hover-background: (
141
+ item-border-color: (
125
142
  color: (
126
143
  'gray',
127
- 100,
128
- 0.5,
144
+ 400,
129
145
  ),
130
146
  ),
131
147
 
132
- item-border-color: (
148
+ item-focused-border-color: (
133
149
  color: (
134
150
  'gray',
135
- 100,
151
+ 400,
136
152
  ),
137
153
  ),
138
154
 
139
155
  item-selected-border-color: (
140
156
  color: (
141
157
  'gray',
142
- 100,
158
+ 400,
143
159
  ),
144
160
  ),
145
161
 
146
162
  item-disabled-border: (
147
163
  color: (
148
164
  'gray',
149
- 100,
165
+ 400,
150
166
  ),
151
167
  ),
152
168
 
@@ -156,6 +172,13 @@ $dark-fluent-button-group: extend(
156
172
  50,
157
173
  ),
158
174
  ),
175
+
176
+ disabled-text-color: (
177
+ color: (
178
+ 'gray',
179
+ 300,
180
+ ),
181
+ ),
159
182
  )
160
183
  );
161
184
 
package/sass/themes/schemas/components/dark/_calendar.scss CHANGED
@@ -7,16 +7,12 @@
7
7
  /// @access public
8
8
  ////
9
9
 
10
- /// Generates a dark calendar schema.
11
- /// @type {Map}
12
-
13
10
  /// Generates a dark calendar schema.
14
11
  /// @type {Map}
15
12
  /// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
16
13
  /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
17
14
  /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
18
15
  /// @requires $light-calendar
19
- /// @requires $dark-base-calendar
20
16
  $dark-calendar: extend(
21
17
  $light-calendar,
22
18
  (
@@ -62,7 +58,6 @@ $dark-fluent-calendar: extend($fluent-calendar);
62
58
  /// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
63
59
  /// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
64
60
  /// @requires $bootstrap-calendar
65
- /// @requires $dark-base-calendar
66
61
  $dark-bootstrap-calendar: extend(
67
62
  $bootstrap-calendar,
68
63
  (
@@ -157,7 +152,6 @@ $dark-bootstrap-calendar: extend(
157
152
  /// @prop {Map} date-current-hover-bg-color [color: ('gray', 100)] - The hover background color for the current date.
158
153
  /// @prop {Map} date-current-focus-bg-color [color: ('gray', 100)] - The focus background color for the current date.
159
154
  /// @requires $indigo-calendar
160
- /// @requires $dark-base-calendar
161
155
  $dark-indigo-calendar: extend(
162
156
  $indigo-calendar,
163
157
  (
package/sass/themes/schemas/components/light/_button-group.scss CHANGED
@@ -11,10 +11,12 @@
11
11
  /// Generates a light button group schema.
12
12
  /// @type {Map}
13
13
  /// @prop {Map} item-text-color [color: ('gray', 700)]- The text color for button group items.
14
- /// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items .
14
+ /// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items.
15
15
  /// @prop {Map} item-border-color [color: ('gray', 400)] - The border color between button group items.
16
+ /// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for an item from the button group.
16
17
  /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
17
18
  /// @prop {Map} item-hover-background [color: ('gray', 300)] - The hover background color for button group items.
19
+ /// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
18
20
  /// @prop {Map} disabled-text-color [color: ('gray', 400)]- The text/icon color for a disabled item in the button group.
19
21
  /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
20
22
  /// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for a disabled item in the button group.
@@ -46,6 +48,13 @@ $light-button-group: extend(
46
48
  ),
47
49
  ),
48
50
 
51
+ item-focused-border-color: (
52
+ color: (
53
+ 'gray',
54
+ 400,
55
+ ),
56
+ ),
57
+
49
58
  item-text-color: (
50
59
  color: (
51
60
  'gray',
@@ -67,6 +76,13 @@ $light-button-group: extend(
67
76
  ),
68
77
  ),
69
78
 
79
+ item-focused-background: (
80
+ color: (
81
+ 'gray',
82
+ 300,
83
+ ),
84
+ ),
85
+
70
86
  item-selected-text-color: (
71
87
  color: (
72
88
  'gray',
@@ -132,12 +148,19 @@ $light-button-group: extend(
132
148
  /// Generates a fluent button group schema.
133
149
  /// @type {Map}
134
150
  /// @prop {Map} item-text-color [color: ('gray', 900)]- The text color for button group items.
135
- /// @prop {Map} item-hover-text-color [color: ('primary', 200)] - The hover text color for button group items.
136
- /// @prop {Map} item-hover-background [color: ('gray', 50)] - The hover background color for button group items.
137
- /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
138
- /// @prop {Map} item-selected-hover-background [color: ('gray', 200)] - The background color for a selected item in hover or focus state in the button group.
139
- /// @prop {Map} item-selected-text-color [color: ('primary', 200)]- The text color for a selected item in the button group.
140
- /// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
151
+ /// @prop {Map} item-background [contrast-color: ('gray', 900)] - The background color for button group items.
152
+ /// @prop {Map} item-border-color [color: ('gray', 600)] - The border color between button group items.`
153
+ /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The hover text color for button group items.
154
+ /// @prop {Map} item-hover-background [color: ('gray', 200)] - The hover background color for button group items.
155
+ /// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
156
+ /// @prop {Map} item-selected-background [color: ('gray', 300)] - The background color for a selected item in the button group.
157
+ /// @prop {Map} item-selected-hover-background [color: ('gray', 400)] - The background color for a selected item in hover or focus state in the button group.
158
+ /// @prop {Map} item-selected-text-color [color: ('gray', 900)]- The text color for a selected item in the button group.
159
+ /// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for a selected item from the button group.
160
+ /// @prop {Map} item-focused-border-color [color: ('gray', 700)] - The focused border color for an item from the button group.
161
+ /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
162
+ /// @prop {Map} disabled-text-color [color: ('gray', 500)]- The text/icon color for a disabled item in the button group.
163
+ /// @prop {Map} item-disabled-border [color: ('gray', 600)] - The border color for a disabled item in the button group.
141
164
  /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
142
165
  /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
143
166
  /// @requires {Map} $light-button-group
@@ -146,6 +169,27 @@ $fluent-button-group: extend(
146
169
  $light-button-group,
147
170
  $fluent-elevation-button-group,
148
171
  (
172
+ item-background: (
173
+ contrast-color: (
174
+ 'gray',
175
+ 900,
176
+ ),
177
+ ),
178
+
179
+ item-border-color: (
180
+ color: (
181
+ 'gray',
182
+ 600,
183
+ ),
184
+ ),
185
+
186
+ item-focused-border-color: (
187
+ color: (
188
+ 'gray',
189
+ 700,
190
+ ),
191
+ ),
192
+
149
193
  item-text-color: (
150
194
  color: (
151
195
  'gray',
@@ -155,36 +199,50 @@ $fluent-button-group: extend(
155
199
 
156
200
  item-hover-text-color: (
157
201
  color: (
158
- 'primary',
159
- 200,
202
+ 'gray',
203
+ 900,
160
204
  ),
161
205
  ),
162
206
 
163
207
  item-hover-background: (
164
208
  color: (
165
209
  'gray',
166
- 50,
210
+ 200,
211
+ ),
212
+ ),
213
+
214
+ item-focused-background: (
215
+ color: (
216
+ 'gray',
217
+ 300,
167
218
  ),
168
219
  ),
169
220
 
170
221
  item-selected-background: (
171
222
  color: (
172
223
  'gray',
173
- 200,
224
+ 300,
174
225
  ),
175
226
  ),
176
227
 
177
228
  item-selected-hover-background: (
178
229
  color: (
179
230
  'gray',
180
- 200,
231
+ 400,
181
232
  ),
182
233
  ),
183
234
 
184
235
  item-selected-text-color: (
185
236
  color: (
186
- 'primary',
187
- 200,
237
+ 'gray',
238
+ 900,
239
+ ),
240
+ ),
241
+
242
+ item-selected-border-color: (
243
+ color: (
244
+ 'gray',
245
+ 600,
188
246
  ),
189
247
  ),
190
248
 
@@ -195,6 +253,20 @@ $fluent-button-group: extend(
195
253
  ),
196
254
  ),
197
255
 
256
+ disabled-text-color: (
257
+ color: (
258
+ 'gray',
259
+ 500,
260
+ ),
261
+ ),
262
+
263
+ item-disabled-border: (
264
+ color: (
265
+ 'gray',
266
+ 600,
267
+ ),
268
+ ),
269
+
198
270
  border-radius: (
199
271
  border-radius: (
200
272
  rem(2px),