igniteui-theming 3.3.0-beta.2 → 3.3.0-beta.4
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.
- package/_index.scss +1 -0
- package/package.json +1 -1
- package/sass/config/_index.scss +1 -0
- package/sass/themes/charts/_category-chart-theme.scss +2 -1
- package/sass/themes/charts/_data-chart-theme.scss +2 -1
- package/sass/themes/charts/_doughnut-chart-theme.scss +2 -1
- package/sass/themes/charts/_financial-chart-theme.scss +2 -1
- package/sass/themes/charts/_funnel-chart-theme.scss +2 -1
- package/sass/themes/charts/_gauge-theme.scss +2 -1
- package/sass/themes/charts/_geo-map-theme.scss +2 -1
- package/sass/themes/charts/_graph-theme.scss +2 -1
- package/sass/themes/charts/_pie-chart-theme.scss +2 -1
- package/sass/themes/charts/_shape-chart-theme.scss +2 -1
- package/sass/themes/charts/_sparkline-theme.scss +2 -1
- package/sass/themes/schemas/components/dark/_button.scss +113 -2
- package/sass/themes/schemas/components/dark/_icon-button.scss +36 -1
- package/sass/themes/schemas/components/light/_icon-button.scss +18 -2
- package/sass/typography/_functions.scss +4 -5
- package/sass/typography/_mixins.scss +2 -0
- package/sass/typography/presets/_bootstrap.scss +1 -0
- package/sass/typography/presets/_fluent.scss +1 -0
- package/sass/typography/presets/_indigo.scss +1 -0
- package/sass/typography/presets/_material.scss +1 -0
package/_index.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "3.3.0-beta.
|
|
3
|
+
"version": "3.3.0-beta.4",
|
|
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": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$base-font-size: 16px !default;
|
|
@@ -174,13 +174,124 @@ $fluent-flat-button-dark: extend(
|
|
|
174
174
|
)
|
|
175
175
|
);
|
|
176
176
|
|
|
177
|
+
/// @type {Map}
|
|
178
|
+
/// @prop {Map} background [color: ('primary', 300)] - The background color of an raised button.
|
|
179
|
+
/// @prop {Map} foreground [color: ('surface', 500] - The idle text color of a raised button.
|
|
180
|
+
/// @prop {Map} border-color [color: ('primary', 300)] - The border color of a raised button.
|
|
181
|
+
/// @prop {Map} hover-border-color [color: ('primary', 200)] - The hover border color of a raised button.
|
|
182
|
+
/// @prop {Map} focus-border-color [color: ('primary', 300)] - The focus border color of a raised button.
|
|
183
|
+
/// @prop {Map} focus-visible-border-color [color: ('primary', 200)] - The focus-visible border color of a raised button.
|
|
184
|
+
/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a raised button.
|
|
185
|
+
/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a raised button.
|
|
186
|
+
/// @prop {Map} hover-foreground [color: ('surface', 500] - The hover text color of a raised button.
|
|
187
|
+
/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a raised button.
|
|
188
|
+
/// @prop {Map} focus-foreground [color: ('surface', 500] - The focus text color of a raised button.
|
|
189
|
+
/// @prop {Map} focus-visible-background [color: ('primary', 200)] - The focus-visible background color of a raised button.
|
|
190
|
+
/// @prop {Map} focus-visible-foreground [color: ('surface', 500] - The focus-visible text color of a raised button.
|
|
191
|
+
/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a raised button.
|
|
192
|
+
/// @prop {Map} active-foreground [color: ('surface', 500] - The active text color of a raised button.
|
|
177
193
|
/// @requires {Map} $fluent-raised-button
|
|
178
194
|
/// @requires {Map} $fluent-base-button-dark
|
|
179
|
-
$fluent-raised-button-dark: extend(
|
|
195
|
+
$fluent-raised-button-dark: extend(
|
|
196
|
+
$fluent-raised-button,
|
|
197
|
+
$fluent-base-button-dark,
|
|
198
|
+
(
|
|
199
|
+
background: (
|
|
200
|
+
color: (
|
|
201
|
+
'primary',
|
|
202
|
+
300,
|
|
203
|
+
),
|
|
204
|
+
),
|
|
205
|
+
foreground: (
|
|
206
|
+
color: (
|
|
207
|
+
'surface',
|
|
208
|
+
500,
|
|
209
|
+
),
|
|
210
|
+
),
|
|
211
|
+
border-color: (
|
|
212
|
+
color: (
|
|
213
|
+
'primary',
|
|
214
|
+
300,
|
|
215
|
+
),
|
|
216
|
+
),
|
|
217
|
+
hover-background: (
|
|
218
|
+
color: (
|
|
219
|
+
'primary',
|
|
220
|
+
200,
|
|
221
|
+
),
|
|
222
|
+
),
|
|
223
|
+
hover-foreground: (
|
|
224
|
+
color: (
|
|
225
|
+
'surface',
|
|
226
|
+
500,
|
|
227
|
+
),
|
|
228
|
+
),
|
|
229
|
+
hover-border-color: (
|
|
230
|
+
color: (
|
|
231
|
+
'primary',
|
|
232
|
+
200,
|
|
233
|
+
),
|
|
234
|
+
),
|
|
235
|
+
focus-background: (
|
|
236
|
+
color: (
|
|
237
|
+
'primary',
|
|
238
|
+
300,
|
|
239
|
+
),
|
|
240
|
+
),
|
|
241
|
+
focus-foreground: (
|
|
242
|
+
color: (
|
|
243
|
+
'surface',
|
|
244
|
+
500,
|
|
245
|
+
),
|
|
246
|
+
),
|
|
247
|
+
focus-border-color: (
|
|
248
|
+
color: (
|
|
249
|
+
'primary',
|
|
250
|
+
300,
|
|
251
|
+
),
|
|
252
|
+
),
|
|
253
|
+
focus-visible-background: (
|
|
254
|
+
color: (
|
|
255
|
+
'primary',
|
|
256
|
+
200,
|
|
257
|
+
),
|
|
258
|
+
),
|
|
259
|
+
focus-visible-foreground: (
|
|
260
|
+
color: (
|
|
261
|
+
'surface',
|
|
262
|
+
500,
|
|
263
|
+
),
|
|
264
|
+
),
|
|
265
|
+
focus-visible-border-color: (
|
|
266
|
+
color: (
|
|
267
|
+
'primary',
|
|
268
|
+
200,
|
|
269
|
+
),
|
|
270
|
+
),
|
|
271
|
+
active-background: (
|
|
272
|
+
color: (
|
|
273
|
+
'primary',
|
|
274
|
+
200,
|
|
275
|
+
),
|
|
276
|
+
),
|
|
277
|
+
active-foreground: (
|
|
278
|
+
color: (
|
|
279
|
+
'surface',
|
|
280
|
+
500,
|
|
281
|
+
),
|
|
282
|
+
),
|
|
283
|
+
active-border-color: (
|
|
284
|
+
color: (
|
|
285
|
+
'primary',
|
|
286
|
+
200,
|
|
287
|
+
),
|
|
288
|
+
),
|
|
289
|
+
)
|
|
290
|
+
);
|
|
180
291
|
|
|
181
292
|
/// @requires {Map} $fluent-fab-button
|
|
182
293
|
/// @requires {Map} $fluent-base-button-dark
|
|
183
|
-
$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark);
|
|
294
|
+
$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark, $fluent-raised-button-dark);
|
|
184
295
|
|
|
185
296
|
/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of an icon button.
|
|
186
297
|
/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an icon button.
|
|
@@ -42,24 +42,59 @@ $fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
|
|
|
42
42
|
|
|
43
43
|
/// Generates a dark fluent contained icon button schema.
|
|
44
44
|
/// @type {Map}
|
|
45
|
+
/// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
|
|
45
46
|
/// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
|
|
46
|
-
/// @prop {Map}
|
|
47
|
+
/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
|
|
48
|
+
/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
|
|
49
|
+
/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
|
|
50
|
+
/// @prop {Map} active-foreground [color: ('surface', 500)] - The active text color of the fluent dark contained icon button.
|
|
51
|
+
/// @prop {Map} focus-border-color [color: ('surface', 500)] - The focus border color of the fluent dark contained icon button.
|
|
47
52
|
/// @requires {Map} $fluent-contained-icon-button
|
|
48
53
|
$fluent-contained-icon-button-dark: extend(
|
|
49
54
|
$fluent-contained-icon-button,
|
|
50
55
|
(
|
|
56
|
+
background: (
|
|
57
|
+
color: (
|
|
58
|
+
'primary',
|
|
59
|
+
300,
|
|
60
|
+
),
|
|
61
|
+
),
|
|
51
62
|
foreground: (
|
|
52
63
|
color: (
|
|
53
64
|
'surface',
|
|
54
65
|
500,
|
|
55
66
|
),
|
|
56
67
|
),
|
|
68
|
+
hover-background: (
|
|
69
|
+
color: (
|
|
70
|
+
'primary',
|
|
71
|
+
200,
|
|
72
|
+
),
|
|
73
|
+
),
|
|
57
74
|
focus-background: (
|
|
58
75
|
color: (
|
|
59
76
|
'primary',
|
|
60
77
|
300,
|
|
61
78
|
),
|
|
62
79
|
),
|
|
80
|
+
active-background: (
|
|
81
|
+
color: (
|
|
82
|
+
'primary',
|
|
83
|
+
200,
|
|
84
|
+
),
|
|
85
|
+
),
|
|
86
|
+
active-foreground: (
|
|
87
|
+
color: (
|
|
88
|
+
'surface',
|
|
89
|
+
500,
|
|
90
|
+
),
|
|
91
|
+
),
|
|
92
|
+
focus-border-color: (
|
|
93
|
+
color: (
|
|
94
|
+
'surface',
|
|
95
|
+
500,
|
|
96
|
+
),
|
|
97
|
+
),
|
|
63
98
|
)
|
|
64
99
|
);
|
|
65
100
|
|
|
@@ -145,7 +145,8 @@ $light-icon-button: (
|
|
|
145
145
|
/// @type {Map}
|
|
146
146
|
/// @prop {Color} background [transparent] - The background color of the fluent icon button.
|
|
147
147
|
/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the fluent icon button.
|
|
148
|
-
/// @prop {Map}
|
|
148
|
+
/// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of the fluent icon button.
|
|
149
|
+
/// @prop {Map} focus-background [color: ('gray', 200)] - The focus background color of the fluent icon button.
|
|
149
150
|
/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the fluent icon button.
|
|
150
151
|
/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color of the fluent icon button.
|
|
151
152
|
/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the fluent icon button.
|
|
@@ -160,6 +161,12 @@ $fluent-base-icon-button: (
|
|
|
160
161
|
500,
|
|
161
162
|
),
|
|
162
163
|
),
|
|
164
|
+
hover-background: (
|
|
165
|
+
color: (
|
|
166
|
+
'gray',
|
|
167
|
+
200,
|
|
168
|
+
),
|
|
169
|
+
),
|
|
163
170
|
focus-background: (
|
|
164
171
|
color: (
|
|
165
172
|
'gray',
|
|
@@ -215,7 +222,8 @@ $fluent-flat-icon-button: extend($fluent-base-icon-button);
|
|
|
215
222
|
/// @type {Map}
|
|
216
223
|
/// @prop {Map} background [color: ('primary', 500)] - The background color of the fluent contained icon button.
|
|
217
224
|
/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the fluent contained icon button.
|
|
218
|
-
/// @prop {Map}
|
|
225
|
+
/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the fluent contained icon button.
|
|
226
|
+
/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the fluent contained icon button.
|
|
219
227
|
/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the fluent contained icon button.
|
|
220
228
|
/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the fluent contained icon button.
|
|
221
229
|
/// @prop {Map} focus-border-color [contrast-color: ('primary', 600)] - The focus border color of the fluent contained icon button.
|
|
@@ -235,6 +243,12 @@ $fluent-contained-icon-button: extend(
|
|
|
235
243
|
600,
|
|
236
244
|
),
|
|
237
245
|
),
|
|
246
|
+
hover-background: (
|
|
247
|
+
color: (
|
|
248
|
+
'primary',
|
|
249
|
+
600,
|
|
250
|
+
),
|
|
251
|
+
),
|
|
238
252
|
focus-background: (
|
|
239
253
|
color: (
|
|
240
254
|
'primary',
|
|
@@ -266,6 +280,7 @@ $fluent-contained-icon-button: extend(
|
|
|
266
280
|
/// @type {Map}
|
|
267
281
|
/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the fluent outlined icon button.
|
|
268
282
|
/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the fluent outlined icon button.
|
|
283
|
+
/// @prop {Color} hover-background [transparent] - The hover background color of the fluent outlined icon button.
|
|
269
284
|
/// @prop {Color} focus-background [transparent] - The focus background color of the fluent outlined icon button.
|
|
270
285
|
/// @prop {Map} active-background [color: ('gray', 200)] - The hover/active background color of the fluent outlined icon button.
|
|
271
286
|
/// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color of the fluent outlined icon button.
|
|
@@ -285,6 +300,7 @@ $fluent-outlined-icon-button: extend(
|
|
|
285
300
|
700,
|
|
286
301
|
),
|
|
287
302
|
),
|
|
303
|
+
hover-background: transparent,
|
|
288
304
|
focus-background: transparent,
|
|
289
305
|
active-background: (
|
|
290
306
|
color: (
|
|
@@ -4,14 +4,13 @@
|
|
|
4
4
|
@use 'sass:list';
|
|
5
5
|
@use 'sass:string';
|
|
6
6
|
@use './types';
|
|
7
|
+
@use '../config' as *;
|
|
7
8
|
|
|
8
9
|
////
|
|
9
10
|
/// @package theming
|
|
10
11
|
/// @group Typography
|
|
11
12
|
////
|
|
12
13
|
|
|
13
|
-
$browser-context: 16px;
|
|
14
|
-
|
|
15
14
|
/// Converts pixels to relative values (em).
|
|
16
15
|
/// @access public
|
|
17
16
|
/// @param {number|string} $pixels - The pixel value to be converted.
|
|
@@ -21,7 +20,7 @@ $browser-context: 16px;
|
|
|
21
20
|
/// margin: em(10px) em(5px);
|
|
22
21
|
/// }
|
|
23
22
|
/// @return {number} - Returns the pixels value converted to em.
|
|
24
|
-
@function em($pixels, $context: $
|
|
23
|
+
@function em($pixels, $context: $base-font-size) {
|
|
25
24
|
@if math.is-unitless($pixels) {
|
|
26
25
|
$pixels: $pixels * 1px;
|
|
27
26
|
}
|
|
@@ -42,7 +41,7 @@ $browser-context: 16px;
|
|
|
42
41
|
/// margin: rem(10px) rem(5px);
|
|
43
42
|
/// }
|
|
44
43
|
/// @return {number} - Returns the pixels value converted to rem.
|
|
45
|
-
@function rem($pixels, $context: $
|
|
44
|
+
@function rem($pixels, $context: $base-font-size) {
|
|
46
45
|
@if math.is-unitless($pixels) {
|
|
47
46
|
$pixels: $pixels * 1px;
|
|
48
47
|
}
|
|
@@ -63,7 +62,7 @@ $browser-context: 16px;
|
|
|
63
62
|
/// margin: px(3.23rem);
|
|
64
63
|
/// }
|
|
65
64
|
/// @return {number} - Returns the relative value converted to pixels.
|
|
66
|
-
@function px($num, $context: $
|
|
65
|
+
@function px($num, $context: $base-font-size) {
|
|
67
66
|
@if meta.type-of($num) == 'number' {
|
|
68
67
|
@return math.div($num, $num * 0 + 1) * 16px;
|
|
69
68
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
@use '../utils/meta' as *;
|
|
5
5
|
@use './types';
|
|
6
6
|
@use '../themes/mixins' as *;
|
|
7
|
+
@use '../config' as *;
|
|
7
8
|
|
|
8
9
|
////
|
|
9
10
|
/// @package theming
|
|
@@ -126,6 +127,7 @@
|
|
|
126
127
|
|
|
127
128
|
#{$scope} {
|
|
128
129
|
--ig-font-family: #{string.unquote($font-family)};
|
|
130
|
+
--ig-base-font-size: #{$base-font-size};
|
|
129
131
|
|
|
130
132
|
@each $name, $style in map.remove($type-scale, '_meta') {
|
|
131
133
|
@include type-style-vars($name, $style);
|