igniteui-theming 1.4.3-beta.3 → 1.4.3-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 (9) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/_index.scss +0 -1
  3. package/sass/themes/schemas/components/dark/_button.scss +42 -48
  4. package/sass/themes/schemas/components/dark/_combo.scss +1 -1
  5. package/sass/themes/schemas/components/dark/_select.scss +1 -1
  6. package/sass/themes/schemas/components/dark/_tabs.scss +1 -1
  7. package/sass/themes/schemas/components/light/_avatar.scss +14 -16
  8. package/sass/themes/schemas/components/light/_checkbox.scss +69 -71
  9. package/sass/themes/schemas/components/light/_tabs.scss +116 -118
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "1.4.3-beta.3",
3
+ "version": "1.4.3-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/_index.scss CHANGED
@@ -1,4 +1,3 @@
1
1
  @forward 'functions';
2
2
  @forward 'mixins';
3
3
  @forward 'charts';
4
- @forward 'schemas';
package/sass/themes/schemas/components/dark/_button.scss CHANGED
@@ -13,22 +13,20 @@
13
13
  /// @prop {Map} disabled-background [color: ('gray', 100, .3)] - The disabled background color of the button.
14
14
  /// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
15
15
  /// @requires {Map} $material-base-button
16
- $material-base-button-dark: extend(
17
- (
18
- disabled-background: (
19
- color: (
20
- 'gray',
21
- 100,
22
- 0.3,
23
- ),
24
- ),
25
- disabled-foreground: (
26
- color: (
27
- 'gray',
28
- 200,
29
- ),
30
- ),
31
- )
16
+ $material-base-button-dark: (
17
+ disabled-background: (
18
+ color: (
19
+ 'gray',
20
+ 100,
21
+ 0.3,
22
+ ),
23
+ ),
24
+ disabled-foreground: (
25
+ color: (
26
+ 'gray',
27
+ 200,
28
+ ),
29
+ ),
32
30
  );
33
31
 
34
32
  /// @type {Map}
@@ -149,21 +147,19 @@ $dark-button: (
149
147
  /// @requires {Map} $material-base-button
150
148
  /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
151
149
  /// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
152
- $fluent-base-button-dark: extend(
153
- (
154
- disabled-background: (
155
- color: (
156
- 'gray',
157
- 50,
158
- ),
159
- ),
160
- disabled-foreground: (
161
- color: (
162
- 'gray',
163
- 100,
164
- ),
165
- ),
166
- )
150
+ $fluent-base-button-dark: (
151
+ disabled-background: (
152
+ color: (
153
+ 'gray',
154
+ 50,
155
+ ),
156
+ ),
157
+ disabled-foreground: (
158
+ color: (
159
+ 'gray',
160
+ 100,
161
+ ),
162
+ ),
167
163
  );
168
164
 
169
165
  /// @type {Map}
@@ -272,7 +268,7 @@ $dark-fluent-button: (
272
268
 
273
269
  /// @type {Map}
274
270
  /// @requires {Map} $bootstrap-base-button
275
- $bootstrap-base-button-dark: extend($bootstrap-base-button);
271
+ $bootstrap-base-button-dark: $bootstrap-base-button;
276
272
 
277
273
  /// @type {Map}
278
274
  /// @prop {Map} disabled-border-color [color: ('primary', 900)] - The disabled border color of the button.
@@ -315,22 +311,20 @@ $dark-bootstrap-button: (
315
311
  /// @prop {Color} disabled-foreground [color: ('gray', 300)] - The disabled foreground color of the button.
316
312
  /// @prop {Color} disabled-background [color: ('gray', 200, .1)] - The disabled background color of the button.
317
313
  /// @requires {Map} $indigo-base-button
318
- $indigo-base-button-dark: extend(
319
- (
320
- disabled-foreground: (
321
- color: (
322
- 'gray',
323
- 300,
324
- ),
325
- ),
326
- disabled-background: (
327
- color: (
328
- 'gray',
329
- 200,
330
- 0.1,
331
- ),
332
- ),
333
- )
314
+ $indigo-base-button-dark: (
315
+ disabled-foreground: (
316
+ color: (
317
+ 'gray',
318
+ 300,
319
+ ),
320
+ ),
321
+ disabled-background: (
322
+ color: (
323
+ 'gray',
324
+ 200,
325
+ 0.1,
326
+ ),
327
+ ),
334
328
  );
335
329
 
336
330
  /// @type {Map}
package/sass/themes/schemas/components/dark/_combo.scss CHANGED
@@ -23,7 +23,7 @@ $dark-fluent-combo: $fluent-combo;
23
23
  /// Generates a dark bootstrap combo schema.
24
24
  /// @type {Map}
25
25
  /// @requires $bootstrap-combo
26
- $dark-bootstrap-combo: extend($bootstrap-combo);
26
+ $dark-bootstrap-combo: $bootstrap-combo;
27
27
 
28
28
  /// Generates a dark indigo combo schema.
29
29
  /// @prop {Map} toggle-button-foreground [color: ('gray', 600)] - The combo toggle button foreground color.
package/sass/themes/schemas/components/dark/_select.scss CHANGED
@@ -23,7 +23,7 @@ $dark-fluent-select: $fluent-select;
23
23
  /// Generates a dark bootstrap select schema.
24
24
  /// @type {Map}
25
25
  /// @requires $bootstrap-select
26
- $dark-bootstrap-select: extend($bootstrap-select);
26
+ $dark-bootstrap-select: $bootstrap-select;
27
27
 
28
28
  /// Generates a dark indigo select schema.
29
29
  /// @type {Map}
package/sass/themes/schemas/components/dark/_tabs.scss CHANGED
@@ -62,4 +62,4 @@ $dark-bootstrap-tabs: extend(
62
62
  /// Generates a dark indigo tabs schema.
63
63
  /// @type {Map}
64
64
  /// @requires $indigo-tabs
65
- $dark-indigo-tabs: extend($indigo-tabs);
65
+ $dark-indigo-tabs: $indigo-tabs;
package/sass/themes/schemas/components/light/_avatar.scss CHANGED
@@ -13,24 +13,22 @@
13
13
  /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
14
14
  /// @prop {Number} border-radius [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
15
15
  /// @prop {Number} size - The size of the avatar.
16
- $light-avatar: extend(
17
- (
18
- background: (
19
- color: (
20
- 'gray',
21
- 400,
22
- 0.54,
23
- ),
16
+ $light-avatar: (
17
+ background: (
18
+ color: (
19
+ 'gray',
20
+ 400,
21
+ 0.54,
24
22
  ),
23
+ ),
24
+ color: (
25
25
  color: (
26
- color: (
27
- 'gray',
28
- 800,
29
- 0.96,
30
- ),
26
+ 'gray',
27
+ 800,
28
+ 0.96,
31
29
  ),
32
- border-radius: rem(0),
33
- )
30
+ ),
31
+ border-radius: rem(0),
34
32
  );
35
33
 
36
34
  /// Generates a fluent avatar schema.
@@ -66,4 +64,4 @@ $bootstrap-avatar: extend(
66
64
  /// Generates an indigo avatar schema.
67
65
  /// @type {Map}
68
66
  /// @requires {Map} $light-avatar
69
- $indigo-avatar: extend($light-avatar);
67
+ $indigo-avatar: $light-avatar;
package/sass/themes/schemas/components/light/_checkbox.scss CHANGED
@@ -24,77 +24,75 @@
24
24
  /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
25
25
  /// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
26
26
  /// @prop {Number} border-radius-ripple [24px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
27
- $light-checkbox: extend(
28
- (
29
- tick-color: (
30
- color: (
31
- 'gray',
32
- 50,
33
- ),
34
- ),
35
- tick-color-hover: (
36
- color: (
37
- 'gray',
38
- 50,
39
- ),
40
- ),
41
- label-color: (
42
- color: (
43
- 'gray',
44
- 900,
45
- ),
46
- ),
47
- empty-color: (
48
- color: (
49
- 'gray',
50
- 600,
51
- ),
52
- ),
53
- fill-color: (
54
- color: (
55
- 'secondary',
56
- 500,
57
- ),
58
- ),
59
- fill-color-hover: (
60
- color: (
61
- 'secondary',
62
- 500,
63
- ),
64
- ),
65
- disabled-color: (
66
- color: (
67
- 'gray',
68
- 400,
69
- ),
70
- ),
71
- disabled-indeterminate-color: (
72
- color: (
73
- 'secondary',
74
- 100,
75
- ),
76
- ),
77
- disabled-color-label: (
78
- color: (
79
- 'gray',
80
- 500,
81
- ),
82
- ),
83
- error-color: (
84
- color: (
85
- 'error',
86
- 500,
87
- ),
88
- ),
89
- error-color-hover: (
90
- color: (
91
- 'error',
92
- 500,
93
- ),
94
- ),
95
- border-radius: rem(2px),
96
- border-radius-ripple: rem(24px),
97
- )
27
+ $light-checkbox: (
28
+ tick-color: (
29
+ color: (
30
+ 'gray',
31
+ 50,
32
+ ),
33
+ ),
34
+ tick-color-hover: (
35
+ color: (
36
+ 'gray',
37
+ 50,
38
+ ),
39
+ ),
40
+ label-color: (
41
+ color: (
42
+ 'gray',
43
+ 900,
44
+ ),
45
+ ),
46
+ empty-color: (
47
+ color: (
48
+ 'gray',
49
+ 600,
50
+ ),
51
+ ),
52
+ fill-color: (
53
+ color: (
54
+ 'secondary',
55
+ 500,
56
+ ),
57
+ ),
58
+ fill-color-hover: (
59
+ color: (
60
+ 'secondary',
61
+ 500,
62
+ ),
63
+ ),
64
+ disabled-color: (
65
+ color: (
66
+ 'gray',
67
+ 400,
68
+ ),
69
+ ),
70
+ disabled-indeterminate-color: (
71
+ color: (
72
+ 'secondary',
73
+ 100,
74
+ ),
75
+ ),
76
+ disabled-color-label: (
77
+ color: (
78
+ 'gray',
79
+ 500,
80
+ ),
81
+ ),
82
+ error-color: (
83
+ color: (
84
+ 'error',
85
+ 500,
86
+ ),
87
+ ),
88
+ error-color-hover: (
89
+ color: (
90
+ 'error',
91
+ 500,
92
+ ),
93
+ ),
94
+ border-radius: rem(2px),
95
+ border-radius-ripple: rem(24px),
98
96
  );
99
97
 
100
98
  /// Generates a fluent checkbox schema.
package/sass/themes/schemas/components/light/_tabs.scss CHANGED
@@ -33,124 +33,122 @@
33
33
  /// @prop {Map} tab-ripple-color [color: ('gray', 100)] - The color used for the button background.
34
34
  /// @prop {Map} button-ripple-color [color: ('gray', 100)] - The color used for the button background on hover.
35
35
  /// @prop {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent.
36
- $light-tabs: extend(
37
- (
38
- item-text-color: (
39
- color: (
40
- 'gray',
41
- 700,
42
- ),
43
- ),
44
- item-background: (
45
- color: (
46
- 'surface',
47
- ),
48
- ),
49
- item-hover-background: (
50
- color: (
51
- 'gray',
52
- 200,
53
- ),
54
- ),
55
- item-hover-color: (
56
- color: (
57
- 'gray',
58
- 700,
59
- ),
60
- ),
61
- item-active-color: (
62
- color: (
63
- 'primary',
64
- 500,
65
- ),
66
- ),
67
- item-icon-color: (
68
- color: (
69
- 'gray',
70
- 700,
71
- ),
72
- ),
73
- item-active-icon-color: (
74
- color: (
75
- 'primary',
76
- 500,
77
- ),
78
- ),
79
- item-hover-icon-color: (
80
- color: (
81
- 'gray',
82
- 700,
83
- ),
84
- ),
85
- item-disabled-icon-color: (
86
- color: (
87
- 'gray',
88
- 500,
89
- ),
90
- ),
91
- item-active-background: (
92
- color: (
93
- 'gray',
94
- 200,
95
- ),
96
- ),
97
- item-disabled-color: (
98
- color: (
99
- 'gray',
100
- 500,
101
- ),
102
- ),
103
- indicator-color: (
104
- color: (
105
- 'primary',
106
- 500,
107
- ),
108
- ),
109
- button-color: (
110
- color: (
111
- 'gray',
112
- 700,
113
- ),
114
- ),
115
- button-background: (
116
- color: (
117
- 'surface',
118
- ),
119
- ),
120
- button-hover-background: (
121
- color: (
122
- 'gray',
123
- 100,
124
- ),
125
- ),
126
- button-hover-color: (
127
- color: (
128
- 'gray',
129
- 900,
130
- ),
131
- ),
132
- button-disabled-color: (
133
- color: (
134
- 'gray',
135
- 500,
136
- ),
137
- ),
138
- tab-ripple-color: (
139
- color: (
140
- 'gray',
141
- 100,
142
- ),
143
- ),
144
- button-ripple-color: (
145
- color: (
146
- 'gray',
147
- 100,
148
- ),
149
- ),
150
- border-color: transparent,
151
- border-color--hover: transparent,
152
- border-radius: rem(0),
153
- )
36
+ $light-tabs: (
37
+ item-text-color: (
38
+ color: (
39
+ 'gray',
40
+ 700,
41
+ ),
42
+ ),
43
+ item-background: (
44
+ color: (
45
+ 'surface',
46
+ ),
47
+ ),
48
+ item-hover-background: (
49
+ color: (
50
+ 'gray',
51
+ 200,
52
+ ),
53
+ ),
54
+ item-hover-color: (
55
+ color: (
56
+ 'gray',
57
+ 700,
58
+ ),
59
+ ),
60
+ item-active-color: (
61
+ color: (
62
+ 'primary',
63
+ 500,
64
+ ),
65
+ ),
66
+ item-icon-color: (
67
+ color: (
68
+ 'gray',
69
+ 700,
70
+ ),
71
+ ),
72
+ item-active-icon-color: (
73
+ color: (
74
+ 'primary',
75
+ 500,
76
+ ),
77
+ ),
78
+ item-hover-icon-color: (
79
+ color: (
80
+ 'gray',
81
+ 700,
82
+ ),
83
+ ),
84
+ item-disabled-icon-color: (
85
+ color: (
86
+ 'gray',
87
+ 500,
88
+ ),
89
+ ),
90
+ item-active-background: (
91
+ color: (
92
+ 'gray',
93
+ 200,
94
+ ),
95
+ ),
96
+ item-disabled-color: (
97
+ color: (
98
+ 'gray',
99
+ 500,
100
+ ),
101
+ ),
102
+ indicator-color: (
103
+ color: (
104
+ 'primary',
105
+ 500,
106
+ ),
107
+ ),
108
+ button-color: (
109
+ color: (
110
+ 'gray',
111
+ 700,
112
+ ),
113
+ ),
114
+ button-background: (
115
+ color: (
116
+ 'surface',
117
+ ),
118
+ ),
119
+ button-hover-background: (
120
+ color: (
121
+ 'gray',
122
+ 100,
123
+ ),
124
+ ),
125
+ button-hover-color: (
126
+ color: (
127
+ 'gray',
128
+ 900,
129
+ ),
130
+ ),
131
+ button-disabled-color: (
132
+ color: (
133
+ 'gray',
134
+ 500,
135
+ ),
136
+ ),
137
+ tab-ripple-color: (
138
+ color: (
139
+ 'gray',
140
+ 100,
141
+ ),
142
+ ),
143
+ button-ripple-color: (
144
+ color: (
145
+ 'gray',
146
+ 100,
147
+ ),
148
+ ),
149
+ border-color: transparent,
150
+ border-color--hover: transparent,
151
+ border-radius: rem(0),
154
152
  );
155
153
 
156
154
  /// Generates a fluent tabs schema.