igniteui-theming 12.0.0-beta.2 → 12.0.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 (8) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_carousel.scss +54 -52
  3. package/sass/themes/schemas/components/dark/_navbar.scss +47 -2
  4. package/sass/themes/schemas/components/dark/_scrollbar.scss +39 -10
  5. package/sass/themes/schemas/components/elevation/_carousel.scss +4 -0
  6. package/sass/themes/schemas/components/light/_carousel.scss +20 -147
  7. package/sass/themes/schemas/components/light/_navbar.scss +48 -10
  8. package/sass/themes/schemas/components/light/_scrollbar.scss +62 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "12.0.0-beta.2",
3
+ "version": "12.0.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/_carousel.scss CHANGED
@@ -8,90 +8,77 @@
8
8
  ////
9
9
 
10
10
  /// Generates the base dark carousel schema.
11
+ /// @prop {Map} button-arrow-color [color: ('gray', 400)] - The previous/next buttons idle arrow color.
12
+ /// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
13
+ /// @prop {Color} indicator-border-color [color: ('gray', 600)] - The idle indicator border color.
14
+ /// @prop {Color} indicator-active-dot-color [color: ('gray', 600)] - The active indicator dot color.
15
+ /// @prop {Color} indicator-active-border-color [color: ('gray', 600)] - The active indicator border color.
16
+ /// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 600)] - The active indicator dot color on hover.
11
17
  /// @type {Map}
12
- /// @prop {Map} indicator-focus-color [color: ('secondary', 200)] - The indicators border and dot color on focus.
13
- /// @prop {Map} button-focus-border-color [color: ('secondary', 200)] - The navigation buttons border color on focus.
14
- /// @requires $light-carousel
15
18
  $base-dark-carousel: extend(
16
19
  $light-carousel,
17
20
  (
18
- indicator-focus-color: (
21
+ button-arrow-color: (
19
22
  color: (
20
- 'secondary',
21
- 200,
23
+ 'gray',
24
+ 400,
22
25
  ),
23
26
  ),
24
27
 
25
- button-focus-border-color: (
28
+ button-hover-arrow-color: (
26
29
  color: (
27
- 'secondary',
28
- 200,
30
+ 'gray',
31
+ 700,
29
32
  ),
30
33
  ),
31
- )
32
- );
33
-
34
- /// Generates a dark material carousel schema based on a mix of $material-carousel and $base-dark-carousel
35
- /// @type {Map}
36
- /// @requires $material-carousel
37
- /// @requires $base-dark-carousel
38
- $dark-material-carousel: extend($material-carousel, $base-dark-carousel);
39
34
 
40
- /// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
41
- /// @type {Map}
42
- /// @prop {Map} button-disabled-background [color: ('gray', 50)] - The previous/next buttons disabled background color.
43
- /// @prop {Map} button-disabled-arrow-color [color: ('gray' 200)] - The previous/next buttons disabled color.
44
- /// @prop {Map} indicator-focus-color [color: ('primary', 200)] - The buttons/indicators border color on focus.
45
- /// @prop {Map} button-focus-border-color [color: ('gray', 400)] - The navigation buttons border color on focus.
46
- /// @requires $fluent-carousel
47
- $dark-fluent-carousel: extend(
48
- $fluent-carousel,
49
- (
50
- button-disabled-background: (
35
+ indicator-border-color: (
51
36
  color: (
52
37
  'gray',
53
- 50,
38
+ 600,
54
39
  ),
55
40
  ),
56
41
 
57
- button-disabled-arrow-color: (
42
+ indicator-active-dot-color: (
58
43
  color: (
59
44
  'gray',
60
- 200,
45
+ 600,
61
46
  ),
62
47
  ),
63
48
 
64
- indicator-focus-color: (
49
+ indicator-active-border-color: (
65
50
  color: (
66
- 'primary',
67
- 200,
51
+ 'gray',
52
+ 600,
68
53
  ),
69
54
  ),
70
55
 
71
- button-focus-border-color: (
56
+ indicator-active-hover-dot-color: (
72
57
  color: (
73
58
  'gray',
74
- 400,
59
+ 600,
75
60
  ),
76
61
  ),
77
62
  )
78
63
  );
79
64
 
65
+ /// Generates a dark material carousel schema based on a mix of $material-carousel and $base-dark-carousel
66
+ /// @type {Map}
67
+ /// @requires $material-carousel
68
+ /// @requires $base-dark-carousel
69
+ $dark-material-carousel: extend($material-carousel, $base-dark-carousel);
70
+
71
+ /// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
72
+ /// @type {Map}
73
+ /// @requires $fluent-carousel
74
+ /// @requires $base-dark-carousel
75
+ $dark-fluent-carousel: extend($fluent-carousel, $base-dark-carousel);
76
+
80
77
  /// Generates a dark bootstrap carousel schema based on a mix of $bootstrap-carousel and $base-dark-carousel
81
78
  /// @type {Map}
82
- /// @prop {Map} indicator-focus-color [color: ('primary', 200)] - The buttons/indicators border color on focus.
83
79
  /// @requires $bootstrap-carousel
84
- $dark-bootstrap-carousel: extend(
85
- $bootstrap-carousel,
86
- (
87
- indicator-focus-color: (
88
- color: (
89
- 'primary',
90
- 200,
91
- ),
92
- ),
93
- )
94
- );
80
+ /// @requires $base-dark-carousel
81
+ $dark-bootstrap-carousel: extend($bootstrap-carousel, $base-dark-carousel);
95
82
 
96
83
  /// Generates a dark indigo carousel schema based on a mix of $indigo-carousel and $base-dark-carousel
97
84
  /// @type {Map}
@@ -100,10 +87,12 @@ $dark-bootstrap-carousel: extend(
100
87
  /// @prop {Map} button-hover-arrow-color [color: ('gray', 50)] - The previous/next buttons hover arrow color.
101
88
  /// @prop {Map} button-border-color [color: ('gray', 200)] - The previous/next buttons idle border color.
102
89
  /// @prop {Map} button-hover-border-color [color: ('gray', 300)] - The previous/next buttons hover border color.
103
- /// @prop {Map} button-disabled-border-color [contrast-color: ('gray', 50, .15)] - The previous/next buttons disabled border color.
90
+ /// @prop {Map} button-disabled-border-color [color: ('gray', 100)] - The previous/next buttons disabled border color.
104
91
  /// @prop {Map} button-disabled-arrow-color [contrast-color: ('gray' 50, .2)] - The previous/next buttons disabled color.
105
92
  /// @prop {Map} indicator-dot-color [color: ('gray', 400)] - The idle indicator dot color.
106
93
  /// @prop {Map} indicator-hover-dot-color [color: ('gray', 500)] - The hover indicator dot color.
94
+ /// @prop {Map} indicator-active-dot-color [color: ('primary', 400)] - The active indicator dot color.
95
+ /// @prop {Map} indicator-active-hover-dot-color [color: ('primary', 300)] - The active indicator dot color on hover.
107
96
  /// @requires $indigo-carousel
108
97
  $dark-indigo-carousel: extend(
109
98
  $indigo-carousel,
@@ -153,10 +142,9 @@ $dark-indigo-carousel: extend(
153
142
  ),
154
143
 
155
144
  button-disabled-border-color: (
156
- contrast-color: (
145
+ color: (
157
146
  'gray',
158
- 50,
159
- 0.15,
147
+ 100,
160
148
  ),
161
149
  ),
162
150
 
@@ -173,5 +161,19 @@ $dark-indigo-carousel: extend(
173
161
  500,
174
162
  ),
175
163
  ),
164
+
165
+ indicator-active-dot-color: (
166
+ color: (
167
+ 'primary',
168
+ 400,
169
+ ),
170
+ ),
171
+
172
+ indicator-active-hover-dot-color: (
173
+ color: (
174
+ 'primary',
175
+ 300,
176
+ ),
177
+ ),
176
178
  )
177
179
  );
package/sass/themes/schemas/components/dark/_navbar.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use '../../../../utils/map' as *;
1
2
  @use '../light/navbar' as *;
2
3
 
3
4
  ////
@@ -8,8 +9,41 @@
8
9
 
9
10
  /// Generates a dark material navbar schema.
10
11
  /// @type {Map}
12
+ /// @prop {Map} background [color: ('primary', 800)] - The navbar background color.
13
+ /// @prop {Color} border-color [transparent] - The navbar border color.
14
+ /// @prop {Map} text-color [contrast-color: ('primary', 800)] - The navbar text color.
15
+ /// @prop {Map} idle-icon-color [contrast-color: ('primary', 800)] - The navbar idle icon color.
16
+ /// @prop {Map} hover-icon-color [contrast-color: ('primary', 800)] - The navbar hover icon color.
11
17
  /// @requires $material-navbar
12
- $dark-material-navbar: $material-navbar;
18
+ $dark-material-navbar: extend(
19
+ $material-navbar,
20
+ (
21
+ background: (
22
+ color: (
23
+ 'primary',
24
+ 800,
25
+ ),
26
+ ),
27
+ text-color: (
28
+ contrast-color: (
29
+ 'primary',
30
+ 800,
31
+ ),
32
+ ),
33
+ idle-icon-color: (
34
+ contrast-color: (
35
+ 'primary',
36
+ 800,
37
+ ),
38
+ ),
39
+ hover-icon-color: (
40
+ contrast-color: (
41
+ 'primary',
42
+ 800,
43
+ ),
44
+ ),
45
+ )
46
+ );
13
47
 
14
48
  /// Generates a dark fluent navbar schema.
15
49
  /// @type {Map}
@@ -23,5 +57,16 @@ $dark-bootstrap-navbar: $bootstrap-navbar;
23
57
 
24
58
  /// Generates a dark indigo navbar schema.
25
59
  /// @type {Map}
60
+ /// @prop {Color} border-color [color: ('primary', 200)] - The navbar border color.
26
61
  /// @requires $indigo-navbar
27
- $dark-indigo-navbar: $indigo-navbar;
62
+ $dark-indigo-navbar: extend(
63
+ $indigo-navbar,
64
+ (
65
+ border-color: (
66
+ color: (
67
+ 'primary',
68
+ 200,
69
+ ),
70
+ ),
71
+ )
72
+ );
package/sass/themes/schemas/components/dark/_scrollbar.scss CHANGED
@@ -19,21 +19,36 @@ $dark-fluent-scrollbar: $fluent-scrollbar;
19
19
 
20
20
  /// Generates a dark bootstrap scrollbar schema.
21
21
  /// @type {Map}
22
- /// @prop {Map} thumb-background [color: ('gray', 200, .5)] - The background color used for the thumb.
23
- /// @prop {Color} track-background [color: ('gray', 100, .5)] - The background color used for the track.
22
+ /// @prop {Map} sb-thumb-bg-color [color: ('gray', 200, .5)] - The background color used for the thumb.
23
+ /// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 200, .5)] - The :hover background color of the thumb.
24
+ /// @prop {Map} sb-track-bg-color [color: ('gray', 100, .5)] - The background color used for the track.
25
+ /// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100, .5)] - The :hover background color of the track.
24
26
  /// @requires $bootstrap-scrollbar
25
27
  $dark-bootstrap-scrollbar: extend(
26
28
  $bootstrap-scrollbar,
27
29
  (
28
- thumb-background: (
30
+ sb-thumb-bg-color: (
29
31
  color: (
30
32
  'gray',
31
33
  200,
32
34
  0.5,
33
35
  ),
34
36
  ),
35
-
36
- track-background: (
37
+ sb-thumb-bg-color-hover: (
38
+ color: (
39
+ 'gray',
40
+ 200,
41
+ 0.5,
42
+ ),
43
+ ),
44
+ sb-track-bg-color: (
45
+ color: (
46
+ 'gray',
47
+ 100,
48
+ 0.5,
49
+ ),
50
+ ),
51
+ sb-track-bg-color-hover: (
37
52
  color: (
38
53
  'gray',
39
54
  100,
@@ -45,20 +60,34 @@ $dark-bootstrap-scrollbar: extend(
45
60
 
46
61
  /// Generates a dark indigo scrollbar schema.
47
62
  /// @type {Map}
48
- /// @prop {Map} thumb-background [color: ('gray', 100)] - The background color used for the thumb.
49
- /// @prop {Color} track-background [color: ('gray', 50)] - The background color used for the track.
63
+ /// @prop {Map} sb-thumb-bg-color [color: ('gray', 100)] - The background color used for the thumb.
64
+ /// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 100)] - The :hover background color of the thumb.
65
+
66
+ /// @prop {Map} sb-track-bg-color [color: ('gray', 50)] - The background color used for the track.
67
+ /// @prop {Map} sb-track-bg-color-hover [color: ('gray', 50)] - The :hover background color of the track.
50
68
  /// @requires $indigo-scrollbar
51
69
  $dark-indigo-scrollbar: extend(
52
70
  $indigo-scrollbar,
53
71
  (
54
- thumb-background: (
72
+ sb-thumb-bg-color: (
55
73
  color: (
56
74
  'gray',
57
75
  100,
58
76
  ),
59
77
  ),
60
-
61
- track-background: (
78
+ sb-thumb-bg-color-hover: (
79
+ color: (
80
+ 'gray',
81
+ 100,
82
+ ),
83
+ ),
84
+ sb-track-bg-color: (
85
+ color: (
86
+ 'gray',
87
+ 50,
88
+ ),
89
+ ),
90
+ sb-track-bg-color-hover: (
62
91
  color: (
63
92
  'gray',
64
93
  50,
package/sass/themes/schemas/components/elevation/_carousel.scss CHANGED
@@ -16,6 +16,10 @@ $flat-carousel: (
16
16
  button-elevation: 0,
17
17
  );
18
18
 
19
+ /// @type Map
20
+ /// @requires {Map} $flat-carousel
21
+ $fluent-elevation-carousel: $flat-carousel;
22
+
19
23
  /// @type Map
20
24
  /// @requires {Map} $flat-carousel
21
25
  $bootstrap-elevation-carousel: $flat-carousel;
package/sass/themes/schemas/components/light/_carousel.scss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  /// Generates a light carousel schema.
12
12
  /// @type {Map}
13
- /// @prop {Map} slide-background [contrast-color: ('gray', 900)] - The slide background color.
13
+ /// @prop {Map} slide-background [color: ('gray', 50)] - The slide background color.
14
14
  /// @prop {Map} button-background [color: ('gray', 50)] - The previous/next buttons idle background color.
15
15
  /// @prop {Map} button-hover-background [color: ('gray', 50)] - The previous/next buttons hover background color.
16
16
  /// @prop {Map} button-disabled-background [color: ('gray', 100)] - The previous/next buttons disabled background color.
@@ -20,27 +20,22 @@
20
20
  /// @prop {Color} button-border-color [transparent] - The previous/next buttons idle border color.
21
21
  /// @prop {Color} button-hover-border-color [transparent] - The previous/next buttons hover border color.
22
22
  /// @prop {Color} button-disabled-border-color [transparent] - The previous/next buttons disabled border color.
23
- /// @prop {Map} indicator-focus-color [color: ('secondary', 600)] - The indicators border and dot color on focus.
24
- /// @prop {Map} button-focus-border-color [color: ('secondary', 600)] - The navigation buttons border color on focus.
25
- /// @prop {Map} indicator-background [color: ('gray', 50)] - The indicators container background color.
26
- /// @prop {Map} label-indicator-background [color: ('gray', 50, .8)] - The label indicator container background color.
27
- /// @prop {Map} indicator-label [color: ('gray', 700)] - The indicators label color.
28
23
  /// @prop {Color} indicator-dot-color [transparent] - The idle indicator dot color.
29
24
  /// @prop {Color} indicator-hover-dot-color [transparent] - The hover indicator dot color.
30
- /// @prop {Map} indicator-border-color [color: ('gray', 900, .7)] - The idle indicator border color.
31
- /// @prop {Map} indicator-active-dot-color [color: ('gray', 900)] - The active indicator dot color.
32
- /// @prop {Map} indicator-active-border-color [color: ('gray', 900)] - The active indicator border color.
33
- /// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 900)] - The active indicator dot color on hover.
25
+ /// @prop {Map} indicator-border-color [color: ('gray', 50)] - The idle indicator border color.
26
+ /// @prop {Map} indicator-active-dot-color [color: ('gray', 50)] - The active indicator dot color.
27
+ /// @prop {Map} indicator-active-border-color [color: ('gray', 50)] - The active indicator border color.
28
+ /// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 50)] - The active indicator dot color on hover.
34
29
  /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
35
- /// @prop {List} border-radius [(rem(36px), rem(0), rem(36px))] - The border radius used for carousel.
30
+ /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for carousel.
36
31
  /// @requires {Map} $default-elevation-carousel
37
32
  $light-carousel: extend(
38
33
  $default-elevation-carousel,
39
34
  (
40
35
  slide-background: (
41
- contrast-color: (
36
+ color: (
42
37
  'gray',
43
- 900,
38
+ 50,
44
39
  ),
45
40
  ),
46
41
 
@@ -86,80 +81,42 @@ $light-carousel: extend(
86
81
  ),
87
82
  ),
88
83
 
89
- indicator-focus-color: (
90
- color: (
91
- 'secondary',
92
- 600,
93
- ),
94
- ),
95
-
96
- button-focus-border-color: (
97
- color: (
98
- 'secondary',
99
- 600,
100
- ),
101
- ),
102
-
103
84
  button-border-color: transparent,
104
85
  button-hover-border-color: transparent,
105
86
  button-disabled-border-color: transparent,
106
87
  indicator-dot-color: transparent,
107
- indicator-hover-dot-color: transparent,
108
-
109
- indicator-background: (
110
- color: (
111
- 'gray',
112
- 50,
113
- ),
114
- ),
115
-
116
- label-indicator-background: (
117
- color: (
118
- 'gray',
119
- 50,
120
- 0.8,
121
- ),
122
- ),
123
-
124
- indicator-color: (
125
- color: (
126
- 'gray',
127
- 700,
128
- ),
129
- ),
130
88
 
131
89
  indicator-border-color: (
132
90
  color: (
133
91
  'gray',
134
- 900,
135
- 0.7,
92
+ 50,
136
93
  ),
137
94
  ),
138
95
 
139
96
  indicator-active-dot-color: (
140
97
  color: (
141
98
  'gray',
142
- 900,
99
+ 50,
143
100
  ),
144
101
  ),
145
102
 
146
103
  indicator-active-border-color: (
147
104
  color: (
148
105
  'gray',
149
- 900,
106
+ 50,
150
107
  ),
151
108
  ),
152
109
 
153
110
  indicator-active-hover-dot-color: (
154
111
  color: (
155
112
  'gray',
156
- 900,
113
+ 50,
157
114
  ),
158
115
  ),
159
116
 
160
117
  border-radius: (
161
118
  border-radius: (
162
- rem(36px),
119
+ rem(0),
163
120
  rem(0),
164
121
  rem(36px),
165
122
  ),
@@ -169,62 +126,20 @@ $light-carousel: extend(
169
126
 
170
127
  /// Generates a material carousel schema.
171
128
  /// @type {Map}
129
+ /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
172
130
  /// @requires {Map} $light-carousel
131
+ /// @requires {Map} $default-elevation-carousel
173
132
  $material-carousel: $light-carousel;
174
133
 
175
134
  /// Generates a fluent carousel schema.
176
135
  /// @type {Map}
177
- /// @prop {Map} button-disabled-background [color: ('gray', 300)] - The previous/next buttons disabled background color.
178
- /// @prop {Map} button-disabled-arrow-color [color: ('gray' 500)] - The previous/next buttons disabled color.
179
- /// @prop {Map} indicator-focus-color [color: ('primary', 600)] - The buttons/indicators border color on focus.
180
- /// @prop {Map} button-focus-border-color [color: ('gray', 700)] - The navigation buttons border color on focus.
181
- /// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for carousel.
136
+ /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
182
137
  /// @requires {Map} $light-carousel
183
- $fluent-carousel: extend(
184
- $light-carousel,
185
- (
186
- button-disabled-background: (
187
- color: (
188
- 'gray',
189
- 300,
190
- ),
191
- ),
192
-
193
- button-disabled-arrow-color: (
194
- color: (
195
- 'gray',
196
- 500,
197
- ),
198
- ),
199
-
200
- indicator-focus-color: (
201
- color: (
202
- 'primary',
203
- 600,
204
- ),
205
- ),
206
-
207
- button-focus-border-color: (
208
- color: (
209
- 'gray',
210
- 700,
211
- ),
212
- ),
213
-
214
- border-radius: (
215
- border-radius: (
216
- rem(2px),
217
- rem(0),
218
- rem(36px),
219
- ),
220
- ),
221
- )
222
- );
138
+ /// @requires {Map} $fluent-elevation-carousel
139
+ $fluent-carousel: extend($light-carousel, $fluent-elevation-carousel);
223
140
 
224
141
  /// Generates a bootstrap carousel schema.
225
142
  /// @type {Map}
226
- /// @prop {Map} indicator-focus-color [color: ('primary', 600)] - The buttons/indicators border color on focus.
227
- /// @prop {Map} button-focus-border-color [color: ('primary', 600, .5)] - The navigation buttons border color on focus.
228
143
  /// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for carousel.
229
144
  /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
230
145
  /// @requires {Map} $light-carousel
@@ -233,21 +148,6 @@ $bootstrap-carousel: extend(
233
148
  $light-carousel,
234
149
  $bootstrap-elevation-carousel,
235
150
  (
236
- indicator-focus-color: (
237
- color: (
238
- 'primary',
239
- 600,
240
- ),
241
- ),
242
-
243
- button-focus-border-color: (
244
- color: (
245
- 'primary',
246
- 600,
247
- 0.5,
248
- ),
249
- ),
250
-
251
151
  border-radius: (
252
152
  border-radius: (
253
153
  rem(4px),
@@ -265,15 +165,12 @@ $bootstrap-carousel: extend(
265
165
  /// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
266
166
  /// @prop {Map} button-border-color [color: ('gray', 400)] - The previous/next buttons idle border color.
267
167
  /// @prop {Map} button-hover-border-color [color: ('gray', 500)] - The previous/next buttons hover border color.
268
- /// @prop {Map} button-disabled-border-color [color: ('gray', 900, .15)] - The previous/next buttons disabled border color.
168
+ /// @prop {Map} button-disabled-border-color [color: ('gray', 300)] - The previous/next buttons disabled border color.
269
169
  /// @prop {Map} button-disabled-background [color: ('gray', 50)] - The previous/next buttons disabled background color.
270
- /// @prop {Map} button-disabled-arrow-color [color: ('gray' 900, .2)] - The previous/next buttons disabled color.
271
170
  /// @prop {Map} indicator-dot-color [color: ('gray', 500)] - The idle indicator dot color.
272
171
  /// @prop {Map} indicator-hover-dot-color [color: ('gray', 600)] - The hover indicator dot color.
273
172
  /// @prop {Map} indicator-active-dot-color [color: ('primary', 500)] - The active indicator dot color.
274
173
  /// @prop {Map} indicator-active-hover-dot-color [color: ('primary', 400)] - The active indicator dot color on hover.
275
- /// @prop {Map} indicator-focus-color [color: ('primary', 400, .5)] - The indicators border and dot color on focus.
276
- /// @prop {Map} button-focus-border-color [color: ('primary', 500)] - The navigation buttons border color on focus.
277
174
  /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
278
175
  /// @requires {Map} $light-carousel
279
176
  /// @requires {Map} $indigo-elevation-carousel
@@ -319,8 +216,7 @@ $indigo-carousel: extend(
319
216
  button-disabled-border-color: (
320
217
  color: (
321
218
  'gray',
322
- 900,
323
- 0.15,
219
+ 300,
324
220
  ),
325
221
  ),
326
222
 
@@ -331,14 +227,6 @@ $indigo-carousel: extend(
331
227
  ),
332
228
  ),
333
229
 
334
- button-disabled-arrow-color: (
335
- color: (
336
- 'gray',
337
- 900,
338
- 0.2,
339
- ),
340
- ),
341
-
342
230
  indicator-dot-color: (
343
231
  color: (
344
232
  'gray',
@@ -366,20 +254,5 @@ $indigo-carousel: extend(
366
254
  400,
367
255
  ),
368
256
  ),
369
-
370
- indicator-focus-color: (
371
- color: (
372
- 'primary',
373
- 400,
374
- 0.5,
375
- ),
376
- ),
377
-
378
- button-focus-border-color: (
379
- color: (
380
- 'primary',
381
- 500,
382
- ),
383
- ),
384
257
  )
385
258
  );
package/sass/themes/schemas/components/light/_navbar.scss CHANGED
@@ -10,11 +10,11 @@
10
10
 
11
11
  /// Generates a base light navbar schema.
12
12
  /// @type {Map}
13
- /// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
13
+ /// @prop {Map} background [color: ('primary', 400)] - The navbar background color.
14
14
  /// @prop {Color} border-color [transparent] - The navbar border color.
15
- /// @prop {Map} text-color [contrast-color: ('primary', 500)] - The navbar text color.
16
- /// @prop {Map} idle-icon-color [contrast-color: ('primary', 500)] - The navbar idle icon color.
17
- /// @prop {Map} hover-icon-color [contrast-color: ('primary', 500)] - The navbar hover icon color.
15
+ /// @prop {Map} text-color [contrast-color: ('primary', 400)] - The navbar text color.
16
+ /// @prop {Map} idle-icon-color [contrast-color: ('primary', 400)] - The navbar idle icon color.
17
+ /// @prop {Map} hover-icon-color [contrast-color: ('primary', 400)] - The navbar hover icon color.
18
18
  /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar.
19
19
  /// @requires {Map} $default-elevation-navbar
20
20
  $light-navbar: extend(
@@ -23,28 +23,28 @@ $light-navbar: extend(
23
23
  background: (
24
24
  color: (
25
25
  'primary',
26
- 500,
26
+ 400,
27
27
  ),
28
28
  ),
29
- border-color: transparent,
30
29
  text-color: (
31
30
  contrast-color: (
32
31
  'primary',
33
- 500,
32
+ 400,
34
33
  ),
35
34
  ),
36
35
  idle-icon-color: (
37
36
  contrast-color: (
38
37
  'primary',
39
- 500,
38
+ 400,
40
39
  ),
41
40
  ),
42
41
  hover-icon-color: (
43
42
  contrast-color: (
44
43
  'primary',
45
- 500,
44
+ 400,
46
45
  ),
47
46
  ),
47
+ border-color: transparent,
48
48
  )
49
49
  );
50
50
 
@@ -124,7 +124,45 @@ $bootstrap-navbar: extend(
124
124
 
125
125
  /// Generates an indigo navbar schema.
126
126
  /// @type {Map}
127
+ /// @prop {Map} background [color: ('surface', 500)] - The navbar background color.
128
+ /// @prop {Map} text-color [color: ('gray', 800)] - The navbar text color.
129
+ /// @prop {Map} idle-icon-color [color: ('gray', 800)] - The navbar idle icon color.
130
+ /// @prop {Map} hover-icon-color [color: ('gray', 800)] - The navbar hover icon color.
131
+ /// @prop {Color} border-color [color: ('primary', 500)] - The navbar border color.
127
132
  /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
128
133
  /// @requires {Map} $light-navbar
129
134
  /// @requires {Map} $indigo-elevation-navbar
130
- $indigo-navbar: extend($light-navbar, $indigo-elevation-navbar);
135
+ $indigo-navbar: extend(
136
+ $indigo-elevation-navbar,
137
+ (
138
+ background: (
139
+ color: (
140
+ 'surface',
141
+ ),
142
+ ),
143
+ text-color: (
144
+ color: (
145
+ 'gray',
146
+ 800,
147
+ ),
148
+ ),
149
+ idle-icon-color: (
150
+ color: (
151
+ 'gray',
152
+ 800,
153
+ ),
154
+ ),
155
+ hover-icon-color: (
156
+ color: (
157
+ 'gray',
158
+ 800,
159
+ ),
160
+ ),
161
+ border-color: (
162
+ color: (
163
+ 'primary',
164
+ 500,
165
+ ),
166
+ ),
167
+ )
168
+ );
package/sass/themes/schemas/components/light/_scrollbar.scss CHANGED
@@ -9,25 +9,62 @@
9
9
 
10
10
  /// Generates a base light scrollbar schema.
11
11
  /// @type {Map}
12
- /// @property {Color} thumb-background [color: ('gray', 400)] - The background color used for the thumb.
13
- /// @property {Color} track-background [color: ('gray', 100)] - The background color used for the track.
14
- /// @property {String | Number} scrollbar-size [16px] - The size of the track.
12
+ /// @prop {String | Number} sb-size [rem(16px)] - The size of the scrollbar.
13
+ /// @prop {String | Number} sb-thumb-min-height [rem(32px)] - The min-height of the thumb.
14
+ /// @prop {Map} sb-thumb-bg-color [color: ('gray', 400)] - The background color of the thumb.
15
+ /// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 400)] - The :hover background color of the thumb.
16
+ /// @prop {Color} sb-thumb-border-color [transparent] - The border color of the thumb.
17
+ /// @prop {String | Number} sb-thumb-border-size [0] - The border size of the thumb.
18
+ /// @prop {String | Number} sb-thumb-border-radius [0] - The border radius of the thumb.
19
+ /// @prop {Map} sb-track-bg-color [color: ('gray', 100)] - The background color of the track.
20
+ /// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100)] - The :hover background color of the track.
21
+ /// @prop {Color} sb-track-border-color [transparent] - The border color of the track.
22
+ /// @prop {String | Number} sb-track-border-size [0] - The border size of the track.
23
+ /// @prop {Map} sb-corner-bg [color: ('gray', 100)] - The background color of the corner.
24
+ /// @prop {Color} sb-corner-border-color [transparent] - The border color of the corner.
25
+ /// @prop {String | Number} sb-corner-border-size [0] - The border size of the corner.
15
26
  $light-scrollbar: (
16
- scrollbar-size: 16px,
17
-
18
- thumb-background: (
27
+ sb-size: rem(16px),
28
+ sb-thumb-min-height: rem(32px),
29
+ sb-thumb-bg-color: (
19
30
  color: (
20
31
  'gray',
21
32
  400,
22
33
  ),
23
34
  ),
35
+ sb-thumb-bg-color-hover: (
36
+ color: (
37
+ 'gray',
38
+ 400,
39
+ ),
40
+ ),
41
+ sb-thumb-border-color: transparent,
42
+ sb-thumb-border-size: 0,
43
+ sb-thumb-border-radius: 0,
24
44
 
25
- track-background: (
45
+ sb-track-bg-color: (
46
+ color: (
47
+ 'gray',
48
+ 100,
49
+ ),
50
+ ),
51
+ sb-track-bg-color-hover: (
26
52
  color: (
27
53
  'gray',
28
54
  100,
29
55
  ),
30
56
  ),
57
+ sb-track-border-color: transparent,
58
+ sb-track-border-size: 0,
59
+
60
+ sb-corner-bg: (
61
+ color: (
62
+ 'gray',
63
+ 100,
64
+ ),
65
+ ),
66
+ sb-corner-border-color: transparent,
67
+ sb-corner-border-size: 0,
31
68
  );
32
69
 
33
70
  /// Generates a material scrollbar schema.
@@ -37,12 +74,19 @@ $material-scrollbar: $light-scrollbar;
37
74
 
38
75
  /// Generates a fluent scrollbar schema.
39
76
  /// @type {Map}
40
- /// @property {Color} thumb-background [color: ('gray', 300)] - The background color used for the thumb.
77
+ /// @prop {Color} sb-thumb-bg-color [color: ('gray', 300)] - The background color used for the thumb.
78
+ /// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 300)] - The :hover background color of the thumb.
41
79
  /// @requires {Map} $light-scrollbar
42
80
  $fluent-scrollbar: extend(
43
81
  $light-scrollbar,
44
82
  (
45
- thumb-background: (
83
+ sb-thumb-bg-color: (
84
+ color: (
85
+ 'gray',
86
+ 300,
87
+ ),
88
+ ),
89
+ sb-thumb-bg-color-hover: (
46
90
  color: (
47
91
  'gray',
48
92
  300,
@@ -58,12 +102,19 @@ $bootstrap-scrollbar: $light-scrollbar;
58
102
 
59
103
  /// Generates an indigo scrollbar schema.
60
104
  /// @type {Map}
61
- /// @property {Color} track-background [color: ('gray', 200)] - The background color used for the track.
105
+ /// @prop {Map} sb-track-bg-color [color: ('gray', 200)] - The background color used for the track.
106
+ /// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100)] - The :hover background color of the track.
62
107
  /// @requires {Map} $light-scrollbar
63
108
  $indigo-scrollbar: extend(
64
109
  $light-scrollbar,
65
110
  (
66
- track-background: (
111
+ sb-track-bg-color: (
112
+ color: (
113
+ 'gray',
114
+ 200,
115
+ ),
116
+ ),
117
+ sb-track-bg-color-hover: (
67
118
  color: (
68
119
  'gray',
69
120
  200,