igniteui-theming 6.4.0-beta.2 → 7.0.1
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/json/elevations/indigo.json +1 -1
- package/package.json +1 -1
- package/sass/elevations/presets/_indigo.scss +9 -9
- package/sass/themes/schemas/components/dark/_navdrawer.scss +3 -2
- package/sass/themes/schemas/components/dark/_snackbar.scss +3 -0
- package/sass/themes/schemas/components/dark/_tree.scss +2 -1
- package/sass/themes/schemas/components/elevation/_snackbar.scss +8 -2
- package/sass/themes/schemas/components/light/_button.scss +2 -2
- package/sass/themes/schemas/components/light/_navbar.scss +2 -11
- package/sass/themes/schemas/components/light/_tree.scss +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) *
|
|
1
|
+
{"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(0, 0, 0, 0.3)","3":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(36, 37, 44, 0.2)","4":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.1)","5":"0 0 calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","6":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","7":"0 0 calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(0, 0, 0, 0.3)","8":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(36, 37, 44, 0.2)","9":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.3)","10":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(36, 37, 44, 0.4)","11":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(0, 0, 0, 0.4)","12":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)","13":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","14":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","15":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","16":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","17":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","18":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","19":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","20":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","21":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","22":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","23":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(0, 0, 0, 0.3)","24":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)"}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.1",
|
|
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": {
|
|
@@ -24,17 +24,17 @@ $color-3: rgba(0 0 0 / 8%) !default;
|
|
|
24
24
|
/// All elevation levels
|
|
25
25
|
/// @access private
|
|
26
26
|
$_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
|
|
27
|
-
$_2: box-shadow((0
|
|
28
|
-
$_3: box-shadow((0
|
|
27
|
+
$_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 30%)));
|
|
28
|
+
$_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 20%)));
|
|
29
29
|
$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
|
|
30
|
-
$_5: box-shadow((0
|
|
30
|
+
$_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 20%)));
|
|
31
31
|
$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
|
|
32
|
-
$_7: box-shadow((0
|
|
33
|
-
$_8: box-shadow((0
|
|
34
|
-
$_9: box-shadow((0
|
|
35
|
-
$_10: box-shadow((0
|
|
36
|
-
$_11: box-shadow((0 6px
|
|
37
|
-
$_12: box-shadow((0
|
|
32
|
+
$_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 30%)));
|
|
33
|
+
$_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 20%)));
|
|
34
|
+
$_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 30%)));
|
|
35
|
+
$_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 40%)));
|
|
36
|
+
$_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 40%)));
|
|
37
|
+
$_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
|
|
38
38
|
$_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
|
|
39
39
|
$_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
|
|
40
40
|
$_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
|
|
@@ -61,7 +61,7 @@ $dark-fluent-navdrawer: extend(
|
|
|
61
61
|
|
|
62
62
|
/// Generates a dark bootstrap navdrawer schema.
|
|
63
63
|
/// @type {Map}
|
|
64
|
-
/// @prop {Map} item-hover-background [color: ('gray',
|
|
64
|
+
/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
|
|
65
65
|
/// @requires $bootstrap-navdrawer
|
|
66
66
|
$dark-bootstrap-navdrawer: extend(
|
|
67
67
|
$bootstrap-navdrawer,
|
|
@@ -69,7 +69,8 @@ $dark-bootstrap-navdrawer: extend(
|
|
|
69
69
|
item-hover-background: (
|
|
70
70
|
color: (
|
|
71
71
|
'gray',
|
|
72
|
-
|
|
72
|
+
200,
|
|
73
|
+
0.8,
|
|
73
74
|
),
|
|
74
75
|
),
|
|
75
76
|
)
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use '../../../../utils/map' as *;
|
|
2
2
|
@use '../light/snackbar' as *;
|
|
3
|
+
@use '../elevation/snackbar' as *;
|
|
3
4
|
|
|
4
5
|
////
|
|
5
6
|
/// @package theming
|
|
@@ -28,8 +29,10 @@ $dark-bootstrap-snackbar: $bootstrap-snackbar;
|
|
|
28
29
|
/// @prop {Map} text-color [contrast-color: ('gray', 200)] - The text color used in the snackbar.
|
|
29
30
|
/// @prop {Map} button-color [contrast-color: ('gray', 200)] - The button color used in the snackbar.
|
|
30
31
|
/// @requires $indigo-snackbar
|
|
32
|
+
/// @requires {Map} $dark-indigo-elevation-snackbar
|
|
31
33
|
$dark-indigo-snackbar: extend(
|
|
32
34
|
$indigo-snackbar,
|
|
35
|
+
$dark-indigo-elevation-snackbar,
|
|
33
36
|
(
|
|
34
37
|
background: (
|
|
35
38
|
color: (
|
|
@@ -115,7 +115,7 @@ $dark-bootstrap-tree: extend(
|
|
|
115
115
|
/// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
|
|
116
116
|
/// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
|
|
117
117
|
/// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
|
|
118
|
-
/// @prop {Map} foreground-selected [contrast-color: ('gray', 50)] - The color used for the content of the selected tree node.
|
|
118
|
+
/// @prop {Map} foreground-selected [contrast-color: ('gray', 50, 0.8)] - The color used for the content of the selected tree node.
|
|
119
119
|
/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
|
|
120
120
|
/// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
|
|
121
121
|
/// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
|
|
@@ -137,6 +137,7 @@ $dark-indigo-tree: extend(
|
|
|
137
137
|
contrast-color: (
|
|
138
138
|
'gray',
|
|
139
139
|
50,
|
|
140
|
+
0.8,
|
|
140
141
|
),
|
|
141
142
|
),
|
|
142
143
|
background-active: (
|
|
@@ -17,7 +17,13 @@ $bootstrap-elevation-snackbar: (
|
|
|
17
17
|
);
|
|
18
18
|
|
|
19
19
|
/// @type Map
|
|
20
|
-
/// @prop {Number} elevation [
|
|
20
|
+
/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the indigo snackbar.
|
|
21
21
|
$indigo-elevation-snackbar: (
|
|
22
|
-
elevation:
|
|
22
|
+
elevation: 10,
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
/// @type Map
|
|
26
|
+
/// @prop {Number} elevation [11] - The elevation level, between 0-24, to be used in the dark indigo snackbar.
|
|
27
|
+
$dark-indigo-elevation-snackbar: (
|
|
28
|
+
elevation: 11,
|
|
23
29
|
);
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
|
|
23
23
|
/// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
|
|
24
24
|
/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
|
|
25
|
-
/// @prop {Number} default-size [
|
|
25
|
+
/// @prop {Number} default-size [3] - The default size used for the button component.
|
|
26
26
|
$light-base-button: (
|
|
27
27
|
shadow-color: transparent,
|
|
28
28
|
border-color: transparent,
|
|
@@ -56,7 +56,7 @@ $light-base-button: (
|
|
|
56
56
|
rem(36px),
|
|
57
57
|
),
|
|
58
58
|
),
|
|
59
|
-
default-size:
|
|
59
|
+
default-size: 3,
|
|
60
60
|
);
|
|
61
61
|
|
|
62
62
|
/// @type {Map}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
/// Generates a base light navbar schema.
|
|
12
12
|
/// @type {Map}
|
|
13
13
|
/// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
|
|
14
|
-
/// @prop {
|
|
14
|
+
/// @prop {Color} border-color [transparent] - The navbar border color.
|
|
15
15
|
/// @prop {Map} text-color [contrast-color: ('primary', 500)] - The navbar text color.
|
|
16
16
|
/// @prop {Map} idle-icon-color [contrast-color: ('primary', 500)] - The navbar idle icon color.
|
|
17
17
|
/// @prop {Map} hover-icon-color [contrast-color: ('primary', 500)] - The navbar hover icon color.
|
|
@@ -26,12 +26,7 @@ $light-navbar: extend(
|
|
|
26
26
|
500,
|
|
27
27
|
),
|
|
28
28
|
),
|
|
29
|
-
border-color:
|
|
30
|
-
color: (
|
|
31
|
-
'primary',
|
|
32
|
-
500,
|
|
33
|
-
),
|
|
34
|
-
),
|
|
29
|
+
border-color: transparent,
|
|
35
30
|
text-color: (
|
|
36
31
|
contrast-color: (
|
|
37
32
|
'primary',
|
|
@@ -61,7 +56,6 @@ $material-navbar: $light-navbar;
|
|
|
61
56
|
/// Generates a fluent navbar schema.
|
|
62
57
|
/// @type {Map}
|
|
63
58
|
/// @prop {Map} background [color: 'surface'] - The navbar background color.
|
|
64
|
-
/// @prop {Map} border-color [color: 'surface'] - The navbar border color.
|
|
65
59
|
/// @prop {Map} text-color [color: ('gray', 900)] - The navbar text color.
|
|
66
60
|
/// @prop {Map} idle-icon-color [color: ('primary', 500)] - The navbar idle icon color.
|
|
67
61
|
/// @prop {Map} hover-icon-color [color: ('primary', 500)] - The navbar hover icon color.
|
|
@@ -72,9 +66,6 @@ $fluent-navbar: extend(
|
|
|
72
66
|
background: (
|
|
73
67
|
color: 'surface',
|
|
74
68
|
),
|
|
75
|
-
border-color: (
|
|
76
|
-
color: 'surface',
|
|
77
|
-
),
|
|
78
69
|
text-color: (
|
|
79
70
|
color: (
|
|
80
71
|
'gray',
|
|
@@ -236,7 +236,7 @@ $bootstrap-tree: extend(
|
|
|
236
236
|
/// @prop {Color} background-disabled [transparent] - The background color used for the tree node in disabled state.
|
|
237
237
|
/// @prop {Map} foreground [color: ('gray', 800)] - The color used for the tree node content.
|
|
238
238
|
/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
|
|
239
|
-
/// @prop {Map} foreground-selected [color: ('gray',
|
|
239
|
+
/// @prop {Map} foreground-selected [color: ('gray', 800)] - The color used for the content of the selected tree node.
|
|
240
240
|
/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
|
|
241
241
|
/// @prop {Map} foreground-disabled [color: ('gray', 900, 0.2)] - The color used for the content of the disabled tree node.
|
|
242
242
|
/// @prop {Map} icon-color [color: ('gray', 600)] - The color used for the tree node icon.
|
|
@@ -259,7 +259,7 @@ $indigo-tree: extend(
|
|
|
259
259
|
foreground-selected: (
|
|
260
260
|
color: (
|
|
261
261
|
'gray',
|
|
262
|
-
|
|
262
|
+
800,
|
|
263
263
|
),
|
|
264
264
|
),
|
|
265
265
|
background-active: (
|