igniteui-theming 14.3.0 → 14.3.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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/sass/color/_functions.scss +9 -9
  3. package/sass/color/_multipliers.scss +30 -30
  4. package/sass/color/_types.scss +1 -1
  5. package/sass/color/presets/dark/_indigo.scss +70 -70
  6. package/sass/color/presets/light/_indigo.scss +70 -70
  7. package/sass/elevations/presets/_index.scss +5 -0
  8. package/sass/themes/_functions.scss +1 -1
  9. package/sass/themes/schemas/components/dark/_avatar.scss +1 -26
  10. package/sass/themes/schemas/components/light/_avatar.scss +3 -27
  11. package/sass/themes/schemas/components/light/_checkbox.scss +22 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "14.3.0",
3
+ "version": "14.3.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": {
package/sass/color/_functions.scss CHANGED
@@ -104,12 +104,12 @@ $_enhanced-accessibility: false;
104
104
  $result,
105
105
  (
106
106
  $variant: map.get($shade, 'hsl'),
107
- #{$variant}-contrast:
107
+ '#{$variant}-contrast':
108
108
  text-contrast(
109
109
  $background: map.get($shade, 'raw'),
110
110
  $contrast: 'AA',
111
111
  ),
112
- #{$variant}-raw: map.get($shade, 'raw'),
112
+ '#{$variant}-raw': map.get($shade, 'raw'),
113
113
  )
114
114
  );
115
115
  }
@@ -137,7 +137,7 @@ $_enhanced-accessibility: false;
137
137
  $color: if($color, $color, if($lum > 0.5, #000, #fff));
138
138
  $lmap: map.get(multipliers.$grayscale, 'l');
139
139
  $len: list.length($lmap);
140
- $i: list.index(map.keys($lmap), $shade);
140
+ $i: list.index(map.keys($lmap), #{$shade});
141
141
  $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
142
142
  $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
143
143
  $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
@@ -148,8 +148,8 @@ $_enhanced-accessibility: false;
148
148
 
149
149
  @return (raw: $raw, hsl: $hsl);
150
150
  } @else {
151
- $sx: map.get(multipliers.$color, 's', $shade);
152
- $lx: map.get(multipliers.$color, 'l', $shade);
151
+ $sx: map.get(multipliers.$color, 's', #{$shade});
152
+ $lx: map.get(multipliers.$color, 'l', #{$shade});
153
153
  $raw: hsl(
154
154
  to-fixed(color.hue($color)),
155
155
  to-fixed(color.saturation($color) * $sx),
@@ -185,7 +185,7 @@ $_enhanced-accessibility: false;
185
185
  /// .my-component-2 {
186
186
  /// background: color($my-palette, 'primary', 200, .5);
187
187
  /// }
188
- @function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
188
+ @function color($palette: null, $color: primary, $variant: 500, $opacity: null) {
189
189
  $s: #{var(--ig-#{$color}-#{$variant})};
190
190
  $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
191
191
  $_alpha: if($opacity, $opacity, 1);
@@ -193,11 +193,11 @@ $_enhanced-accessibility: false;
193
193
  $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
194
194
 
195
195
  @if $palette {
196
- $s: map.get($palette, $color);
197
- $base: map.get($s, $variant);
196
+ $s: map.get($palette, #{$color});
197
+ $base: map.get($s, #{$variant});
198
198
  $raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));
199
199
 
200
- @return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
200
+ @return if($raw and $variant != '500', rgba($raw, $_alpha), rgba($base, $_alpha));
201
201
  }
202
202
 
203
203
  @return if($contrast, $_mix-alpha, $_hsl-alpha);
package/sass/color/_multipliers.scss CHANGED
@@ -1,31 +1,31 @@
1
1
  $color: (
2
2
  s: (
3
- 50: 1.23,
4
- 100: 0.8,
5
- 200: 0.64,
6
- 300: 0.73,
7
- 400: 0.875,
8
- 500: 1,
9
- 600: 1.26,
10
- 700: 1.26,
11
- 800: 1.26,
12
- 900: 1.26,
3
+ '50': 1.23,
4
+ '100': 0.8,
5
+ '200': 0.64,
6
+ '300': 0.73,
7
+ '400': 0.875,
8
+ '500': 1,
9
+ '600': 1.26,
10
+ '700': 1.26,
11
+ '800': 1.26,
12
+ '900': 1.26,
13
13
  'A100': 1.23,
14
14
  'A200': 1.22,
15
15
  'A400': 1.23,
16
16
  'A700': 1.23,
17
17
  ),
18
18
  l: (
19
- 50: 1.78,
20
- 100: 1.66,
21
- 200: 1.43,
22
- 300: 1.19,
23
- 400: 1.08,
24
- 500: 1,
25
- 600: 0.89,
26
- 700: 0.81,
27
- 800: 0.73,
28
- 900: 0.64,
19
+ '50': 1.78,
20
+ '100': 1.66,
21
+ '200': 1.43,
22
+ '300': 1.19,
23
+ '400': 1.08,
24
+ '500': 1,
25
+ '600': 0.89,
26
+ '700': 0.81,
27
+ '800': 0.73,
28
+ '900': 0.64,
29
29
  'A100': 1.34,
30
30
  'A200': 1.16,
31
31
  'A400': 0.91,
@@ -34,15 +34,15 @@ $color: (
34
34
  );
35
35
  $grayscale: (
36
36
  l: (
37
- 50: 13%,
38
- 100: 26%,
39
- 200: 38%,
40
- 300: 54%,
41
- 400: 62%,
42
- 500: 74%,
43
- 600: 88%,
44
- 700: 93%,
45
- 800: 96%,
46
- 900: 98%,
37
+ '50': 13%,
38
+ '100': 26%,
39
+ '200': 38%,
40
+ '300': 54%,
41
+ '400': 62%,
42
+ '500': 74%,
43
+ '600': 88%,
44
+ '700': 93%,
45
+ '800': 96%,
46
+ '900': 98%,
47
47
  ),
48
48
  );
package/sass/color/_types.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  /// A list consisting of all generated gray shades
10
10
  /// @type Map
11
11
  /// @access private
12
- $IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
12
+ $IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');
13
13
 
14
14
  /// A list consisting of all generated shades for palette colors
15
15
  /// @type Map
package/sass/color/presets/dark/_indigo.scss CHANGED
@@ -23,25 +23,25 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
23
23
  /// @prop {Color} surface [#1e1f24] - The surface color.
24
24
  $palette: (
25
25
  'primary': (
26
- 50: #c5cdff,
26
+ '50': #c5cdff,
27
27
  '50-contrast': black,
28
- 100: #a3aff6,
28
+ '100': #a3aff6,
29
29
  '100-contrast': black,
30
- 200: #8293f8,
30
+ '200': #8293f8,
31
31
  '200-contrast': black,
32
- 300: #7385f4,
32
+ '300': #7385f4,
33
33
  '300-contrast': black,
34
- 400: #5468d9,
34
+ '400': #5468d9,
35
35
  '400-contrast': black,
36
- 500: #3f51b5,
36
+ '500': #3f51b5,
37
37
  '500-contrast': white,
38
- 600: #39479c,
38
+ '600': #39479c,
39
39
  '600-contrast': white,
40
- 700: #333d83,
40
+ '700': #333d83,
41
41
  '700-contrast': white,
42
- 800: #2e3172,
42
+ '800': #2e3172,
43
43
  '800-contrast': white,
44
- 900: #262851,
44
+ '900': #262851,
45
45
  '900-contrast': white,
46
46
  'A100': #39479c,
47
47
  'A100-contrast': white,
@@ -53,25 +53,25 @@ $palette: (
53
53
  'A700-contrast': white,
54
54
  ),
55
55
  'secondary': (
56
- 50: #c5cdff,
56
+ '50': #c5cdff,
57
57
  '50-contrast': black,
58
- 100: #a3aff6,
58
+ '100': #a3aff6,
59
59
  '100-contrast': black,
60
- 200: #8293f8,
60
+ '200': #8293f8,
61
61
  '200-contrast': black,
62
- 300: #7385f4,
62
+ '300': #7385f4,
63
63
  '300-contrast': black,
64
- 400: #5468d9,
64
+ '400': #5468d9,
65
65
  '400-contrast': black,
66
- 500: #3f51b5,
66
+ '500': #3f51b5,
67
67
  '500-contrast': white,
68
- 600: #39479c,
68
+ '600': #39479c,
69
69
  '600-contrast': white,
70
- 700: #333d83,
70
+ '700': #333d83,
71
71
  '700-contrast': white,
72
- 800: #2e3172,
72
+ '800': #2e3172,
73
73
  '800-contrast': white,
74
- 900: #262851,
74
+ '900': #262851,
75
75
  '900-contrast': white,
76
76
  'A100': #39479c,
77
77
  'A100-contrast': white,
@@ -83,47 +83,47 @@ $palette: (
83
83
  'A700-contrast': white,
84
84
  ),
85
85
  'gray': (
86
- 50: #24252c,
86
+ '50': #24252c,
87
87
  '50-contrast': white,
88
- 100: #3b3d47,
88
+ '100': #3b3d47,
89
89
  '100-contrast': white,
90
- 200: #545762,
90
+ '200': #545762,
91
91
  '200-contrast': white,
92
- 300: #6c707a,
92
+ '300': #6c707a,
93
93
  '300-contrast': white,
94
- 400: #9a9da2,
94
+ '400': #9a9da2,
95
95
  '400-contrast': black,
96
- 500: #c3c4c7,
96
+ '500': #c3c4c7,
97
97
  '500-contrast': black,
98
- 600: #d6d8dc,
98
+ '600': #d6d8dc,
99
99
  '600-contrast': black,
100
- 700: #ebedf2,
100
+ '700': #ebedf2,
101
101
  '700-contrast': black,
102
- 800: #f8f8fa,
102
+ '800': #f8f8fa,
103
103
  '800-contrast': black,
104
- 900: #fcfcfd,
104
+ '900': #fcfcfd,
105
105
  '900-contrast': black,
106
106
  ),
107
107
  'info': (
108
- 50: #f1c3ff,
108
+ '50': #f1c3ff,
109
109
  '50-contrast': black,
110
- 100: #e89eff,
110
+ '100': #e89eff,
111
111
  '100-contrast': black,
112
- 200: #dd71ff,
112
+ '200': #dd71ff,
113
113
  '200-contrast': black,
114
- 300: #da64ff,
114
+ '300': #da64ff,
115
115
  '300-contrast': black,
116
- 400: #bc34d3,
116
+ '400': #bc34d3,
117
117
  '400-contrast': white,
118
- 500: #9c27b0,
118
+ '500': #9c27b0,
119
119
  '500-contrast': white,
120
- 600: #8c16a0,
120
+ '600': #8c16a0,
121
121
  '600-contrast': white,
122
- 700: #7f1192,
122
+ '700': #7f1192,
123
123
  '700-contrast': white,
124
- 800: #6f0a80,
124
+ '800': #6f0a80,
125
125
  '800-contrast': white,
126
- 900: #5c056b,
126
+ '900': #5c056b,
127
127
  '900-contrast': white,
128
128
  'A100': #8c16a0,
129
129
  'A100-contrast': white,
@@ -135,25 +135,25 @@ $palette: (
135
135
  'A700-contrast': white,
136
136
  ),
137
137
  'success': (
138
- 50: #edf3e7,
138
+ '50': #edf3e7,
139
139
  '50-contrast': black,
140
- 100: #d2e2c3,
140
+ '100': #d2e2c3,
141
141
  '100-contrast': black,
142
- 200: #b4cf9c,
142
+ '200': #b4cf9c,
143
143
  '200-contrast': black,
144
- 300: #95bc74,
144
+ '300': #95bc74,
145
145
  '300-contrast': black,
146
- 400: #7fad56,
146
+ '400': #7fad56,
147
147
  '400-contrast': black,
148
- 500: #689f38,
148
+ '500': #689f38,
149
149
  '500-contrast': black,
150
- 600: #5a912a,
150
+ '600': #5a912a,
151
151
  '600-contrast': black,
152
- 700: #4e8222,
152
+ '700': #4e8222,
153
153
  '700-contrast': white,
154
- 800: #3d7012,
154
+ '800': #3d7012,
155
155
  '800-contrast': white,
156
- 900: #316109,
156
+ '900': #316109,
157
157
  '900-contrast': white,
158
158
  'A100': #5a912a,
159
159
  'A100-contrast': black,
@@ -165,25 +165,25 @@ $palette: (
165
165
  'A700-contrast': white,
166
166
  ),
167
167
  'warn': (
168
- 50: #fed7b7,
168
+ '50': #fed7b7,
169
169
  '50-contrast': black,
170
- 100: #ffc696,
170
+ '100': #ffc696,
171
171
  '100-contrast': black,
172
- 200: #ffad67,
172
+ '200': #ffad67,
173
173
  '200-contrast': black,
174
- 300: #fb8f32,
174
+ '300': #fb8f32,
175
175
  '300-contrast': black,
176
- 400: #fa7b0e,
176
+ '400': #fa7b0e,
177
177
  '400-contrast': black,
178
- 500: #f56b1d,
178
+ '500': #f56b1d,
179
179
  '500-contrast': black,
180
- 600: #f05a2b,
180
+ '600': #f05a2b,
181
181
  '600-contrast': black,
182
- 700: #ec4820,
182
+ '700': #ec4820,
183
183
  '700-contrast': black,
184
- 800: #df370e,
184
+ '800': #df370e,
185
185
  '800-contrast': black,
186
- 900: #d22900,
186
+ '900': #d22900,
187
187
  '900-contrast': white,
188
188
  'A100': #f05a2b,
189
189
  'A100-contrast': black,
@@ -195,25 +195,25 @@ $palette: (
195
195
  'A700-contrast': white,
196
196
  ),
197
197
  'error': (
198
- 50: #ffebf0,
198
+ '50': #ffebf0,
199
199
  '50-contrast': black,
200
- 100: #ffb0b7,
200
+ '100': #ffb0b7,
201
201
  '100-contrast': black,
202
- 200: #fc7f8a,
202
+ '200': #fc7f8a,
203
203
  '200-contrast': black,
204
- 300: #ec5461,
204
+ '300': #ec5461,
205
205
  '300-contrast': black,
206
- 400: #dd3544,
206
+ '400': #dd3544,
207
207
  '400-contrast': black,
208
- 500: #cf1a2b,
208
+ '500': #cf1a2b,
209
209
  '500-contrast': white,
210
- 600: #c31223,
210
+ '600': #c31223,
211
211
  '600-contrast': white,
212
- 700: #b90415,
212
+ '700': #b90415,
213
213
  '700-contrast': white,
214
- 800: #ae0111,
214
+ '800': #ae0111,
215
215
  '800-contrast': white,
216
- 900: #9f000f,
216
+ '900': #9f000f,
217
217
  '900-contrast': white,
218
218
  'A100': #c31223,
219
219
  'A100-contrast': white,
package/sass/color/presets/light/_indigo.scss CHANGED
@@ -23,25 +23,25 @@ $surface-shades: shades('surface', #f8f8fa, $color-shades);
23
23
  /// @prop {Color} surface [#f8f8fa] - The surface color.
24
24
  $palette: (
25
25
  'primary': (
26
- 50: #c5cdff,
26
+ '50': #c5cdff,
27
27
  '50-contrast': black,
28
- 100: #a3aff6,
28
+ '100': #a3aff6,
29
29
  '100-contrast': black,
30
- 200: #8293f8,
30
+ '200': #8293f8,
31
31
  '200-contrast': black,
32
- 300: #7385f4,
32
+ '300': #7385f4,
33
33
  '300-contrast': black,
34
- 400: #5468d9,
34
+ '400': #5468d9,
35
35
  '400-contrast': black,
36
- 500: #3f51b5,
36
+ '500': #3f51b5,
37
37
  '500-contrast': white,
38
- 600: #39479c,
38
+ '600': #39479c,
39
39
  '600-contrast': white,
40
- 700: #333d83,
40
+ '700': #333d83,
41
41
  '700-contrast': white,
42
- 800: #2e3172,
42
+ '800': #2e3172,
43
43
  '800-contrast': white,
44
- 900: #262851,
44
+ '900': #262851,
45
45
  '900-contrast': white,
46
46
  'A100': #39479c,
47
47
  'A100-contrast': white,
@@ -53,25 +53,25 @@ $palette: (
53
53
  'A700-contrast': white,
54
54
  ),
55
55
  'secondary': (
56
- 50: #c5cdff,
56
+ '50': #c5cdff,
57
57
  '50-contrast': black,
58
- 100: #a3aff6,
58
+ '100': #a3aff6,
59
59
  '100-contrast': black,
60
- 200: #8293f8,
60
+ '200': #8293f8,
61
61
  '200-contrast': black,
62
- 300: #7385f4,
62
+ '300': #7385f4,
63
63
  '300-contrast': black,
64
- 400: #5468d9,
64
+ '400': #5468d9,
65
65
  '400-contrast': black,
66
- 500: #3f51b5,
66
+ '500': #3f51b5,
67
67
  '500-contrast': white,
68
- 600: #39479c,
68
+ '600': #39479c,
69
69
  '600-contrast': white,
70
- 700: #333d83,
70
+ '700': #333d83,
71
71
  '700-contrast': white,
72
- 800: #2e3172,
72
+ '800': #2e3172,
73
73
  '800-contrast': white,
74
- 900: #262851,
74
+ '900': #262851,
75
75
  '900-contrast': white,
76
76
  'A100': #39479c,
77
77
  'A100-contrast': white,
@@ -83,47 +83,47 @@ $palette: (
83
83
  'A700-contrast': white,
84
84
  ),
85
85
  'gray': (
86
- 50: #fcfcfd,
86
+ '50': #fcfcfd,
87
87
  '50-contrast': black,
88
- 100: #f8f8fa,
88
+ '100': #f8f8fa,
89
89
  '100-contrast': black,
90
- 200: #ebedf2,
90
+ '200': #ebedf2,
91
91
  '200-contrast': black,
92
- 300: #d6d8dc,
92
+ '300': #d6d8dc,
93
93
  '300-contrast': black,
94
- 400: #c3c4c7,
94
+ '400': #c3c4c7,
95
95
  '400-contrast': black,
96
- 500: #9a9da2,
96
+ '500': #9a9da2,
97
97
  '500-contrast': black,
98
- 600: #6c707a,
98
+ '600': #6c707a,
99
99
  '600-contrast': white,
100
- 700: #545762,
100
+ '700': #545762,
101
101
  '700-contrast': white,
102
- 800: #3b3d47,
102
+ '800': #3b3d47,
103
103
  '800-contrast': white,
104
- 900: #24252c,
104
+ '900': #24252c,
105
105
  '900-contrast': white,
106
106
  ),
107
107
  'info': (
108
- 50: #f1c3ff,
108
+ '50': #f1c3ff,
109
109
  '50-contrast': black,
110
- 100: #e89eff,
110
+ '100': #e89eff,
111
111
  '100-contrast': black,
112
- 200: #dd71ff,
112
+ '200': #dd71ff,
113
113
  '200-contrast': black,
114
- 300: #da64ff,
114
+ '300': #da64ff,
115
115
  '300-contrast': black,
116
- 400: #bc34d3,
116
+ '400': #bc34d3,
117
117
  '400-contrast': white,
118
- 500: #9c27b0,
118
+ '500': #9c27b0,
119
119
  '500-contrast': white,
120
- 600: #8c16a0,
120
+ '600': #8c16a0,
121
121
  '600-contrast': white,
122
- 700: #7f1192,
122
+ '700': #7f1192,
123
123
  '700-contrast': white,
124
- 800: #6f0a80,
124
+ '800': #6f0a80,
125
125
  '800-contrast': white,
126
- 900: #5c056b,
126
+ '900': #5c056b,
127
127
  '900-contrast': white,
128
128
  'A100': #8c16a0,
129
129
  'A100-contrast': white,
@@ -135,25 +135,25 @@ $palette: (
135
135
  'A700-contrast': white,
136
136
  ),
137
137
  'success': (
138
- 50: #edf3e7,
138
+ '50': #edf3e7,
139
139
  '50-contrast': black,
140
- 100: #d2e2c3,
140
+ '100': #d2e2c3,
141
141
  '100-contrast': black,
142
- 200: #b4cf9c,
142
+ '200': #b4cf9c,
143
143
  '200-contrast': black,
144
- 300: #95bc74,
144
+ '300': #95bc74,
145
145
  '300-contrast': black,
146
- 400: #7fad56,
146
+ '400': #7fad56,
147
147
  '400-contrast': black,
148
- 500: #689f38,
148
+ '500': #689f38,
149
149
  '500-contrast': black,
150
- 600: #5a912a,
150
+ '600': #5a912a,
151
151
  '600-contrast': black,
152
- 700: #4e8222,
152
+ '700': #4e8222,
153
153
  '700-contrast': white,
154
- 800: #3d7012,
154
+ '800': #3d7012,
155
155
  '800-contrast': white,
156
- 900: #316109,
156
+ '900': #316109,
157
157
  '900-contrast': white,
158
158
  'A100': #5a912a,
159
159
  'A100-contrast': black,
@@ -165,25 +165,25 @@ $palette: (
165
165
  'A700-contrast': white,
166
166
  ),
167
167
  'warn': (
168
- 50: #fed7b7,
168
+ '50': #fed7b7,
169
169
  '50-contrast': black,
170
- 100: #ffc696,
170
+ '100': #ffc696,
171
171
  '100-contrast': black,
172
- 200: #ffad67,
172
+ '200': #ffad67,
173
173
  '200-contrast': black,
174
- 300: #fb8f32,
174
+ '300': #fb8f32,
175
175
  '300-contrast': black,
176
- 400: #fa7b0e,
176
+ '400': #fa7b0e,
177
177
  '400-contrast': black,
178
- 500: #f56b1d,
178
+ '500': #f56b1d,
179
179
  '500-contrast': black,
180
- 600: #f05a2b,
180
+ '600': #f05a2b,
181
181
  '600-contrast': black,
182
- 700: #ec4820,
182
+ '700': #ec4820,
183
183
  '700-contrast': black,
184
- 800: #df370e,
184
+ '800': #df370e,
185
185
  '800-contrast': black,
186
- 900: #d22900,
186
+ '900': #d22900,
187
187
  '900-contrast': white,
188
188
  'A100': #f05a2b,
189
189
  'A100-contrast': black,
@@ -195,25 +195,25 @@ $palette: (
195
195
  'A700-contrast': white,
196
196
  ),
197
197
  'error': (
198
- 50: #ffebf0,
198
+ '50': #ffebf0,
199
199
  '50-contrast': black,
200
- 100: #ffb0b7,
200
+ '100': #ffb0b7,
201
201
  '100-contrast': black,
202
- 200: #fc7f8a,
202
+ '200': #fc7f8a,
203
203
  '200-contrast': black,
204
- 300: #ec5461,
204
+ '300': #ec5461,
205
205
  '300-contrast': black,
206
- 400: #dd3544,
206
+ '400': #dd3544,
207
207
  '400-contrast': black,
208
- 500: #cf1a2b,
208
+ '500': #cf1a2b,
209
209
  '500-contrast': white,
210
- 600: #c31223,
210
+ '600': #c31223,
211
211
  '600-contrast': white,
212
- 700: #b90415,
212
+ '700': #b90415,
213
213
  '700-contrast': white,
214
- 800: #ae0111,
214
+ '800': #ae0111,
215
215
  '800-contrast': white,
216
- 900: #9f000f,
216
+ '900': #9f000f,
217
217
  '900-contrast': white,
218
218
  'A100': #c31223,
219
219
  'A100-contrast': white,
package/sass/elevations/presets/_index.scss CHANGED
@@ -1,3 +1,8 @@
1
+ ////
2
+ /// @package theming
3
+ /// @group elevations
4
+ ////
5
+
1
6
  /// Level 1 - The color used to generate umbra shadows.
2
7
  /// @type Color
3
8
  /// @access private
package/sass/themes/_functions.scss CHANGED
@@ -114,7 +114,7 @@
114
114
 
115
115
  @return if($fallback, var($p, $fallback), var($p));
116
116
  } @else {
117
- @error 'The theme for #{map.get($map, 'name')} does not contain #{$key}';
117
+ @error 'The #{map.get($theme, name)} theme does \not contain property "#{$property}".';
118
118
  }
119
119
  }
120
120
 
package/sass/themes/schemas/components/dark/_avatar.scss CHANGED
@@ -19,33 +19,8 @@ $dark-fluent-avatar: $fluent-avatar;
19
19
 
20
20
  /// Generates a dark bootstrap avatar schema.
21
21
  /// @type {Map}
22
- /// @prop {Map} background [color: ('gray', 200)]- The background color of the avatar.
23
- /// @prop {Map} color [contrast-color: ('gray', 200)] - The text color of the avatar.
24
- /// @prop {Map} icon-color [contrast-color: ('gray', 200)] - The icon color of the avatar.
25
22
  /// @requires $bootstrap-avatar
26
- $dark-bootstrap-avatar: extend(
27
- $bootstrap-avatar,
28
- (
29
- background: (
30
- color: (
31
- 'gray',
32
- 200,
33
- ),
34
- ),
35
- color: (
36
- contrast-color: (
37
- 'gray',
38
- 200,
39
- ),
40
- ),
41
- icon-color: (
42
- contrast-color: (
43
- 'gray',
44
- 200,
45
- ),
46
- ),
47
- )
48
- );
23
+ $dark-bootstrap-avatar: $bootstrap-avatar;
49
24
 
50
25
  /// Generates a dark indigo avatar schema.
51
26
  /// @type {Map}
package/sass/themes/schemas/components/light/_avatar.scss CHANGED
@@ -9,9 +9,9 @@
9
9
 
10
10
  /// Generates a light avatar schema.
11
11
  /// @type {Map}
12
- /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
13
- /// @prop {Map} color [color: ('gray', 800, .96)] - The text color of the avatar.
14
- /// @prop {Map} icon-color [color: ('gray', 800, .96)] - The icon color of the avatar.
12
+ /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
13
+ /// @prop {Map} color [color: ('gray', 800)] - The text color of the avatar.
14
+ /// @prop {Map} icon-color [color: ('gray', 800)] - The icon color of the avatar.
15
15
  /// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
16
16
  /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
17
17
  /// @prop {Number} default-size [1] - The default size used for the avatar component.
@@ -20,21 +20,18 @@ $light-avatar: (
20
20
  color: (
21
21
  'gray',
22
22
  400,
23
- 0.54,
24
23
  ),
25
24
  ),
26
25
  color: (
27
26
  color: (
28
27
  'gray',
29
28
  800,
30
- 0.96,
31
29
  ),
32
30
  ),
33
31
  icon-color: (
34
32
  color: (
35
33
  'gray',
36
34
  800,
37
- 0.96,
38
35
  ),
39
36
  ),
40
37
  border-radius: rem(8px),
@@ -60,32 +57,11 @@ $fluent-avatar: $light-avatar;
60
57
 
61
58
  /// Generates a bootstrap avatar schema.
62
59
  /// @type {Map}
63
- /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
64
- /// @prop {Map} color [contrast-color: ('gray', 400)] - The text color of the avatar.
65
- /// @prop {Map} icon-color [contrast-color: ('gray', 400)] - The icon color of the avatar.
66
60
  /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
67
61
  /// @requires {Map} $light-avatar
68
62
  $bootstrap-avatar: extend(
69
63
  $light-avatar,
70
64
  (
71
- background: (
72
- color: (
73
- 'gray',
74
- 400,
75
- ),
76
- ),
77
- color: (
78
- contrast-color: (
79
- 'gray',
80
- 400,
81
- ),
82
- ),
83
- icon-color: (
84
- contrast-color: (
85
- 'gray',
86
- 400,
87
- ),
88
- ),
89
65
  border-radius: rem(4px),
90
66
  )
91
67
  );
package/sass/themes/schemas/components/light/_checkbox.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  /// @prop {Color} focus-outline-color-focused [transparent] - The focus outlined color for focused state.
20
20
  /// @prop {Color} focus-outline-color-error [transparent] - The focus outlined color for focused invalid state.
21
21
  /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
22
+ /// @prop {Map} disabled-tick-color [color: ('gray', 50)] - The checked mark color in disabled state.
22
23
  /// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
23
24
  /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
24
25
  /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
@@ -58,6 +59,12 @@ $light-checkbox: (
58
59
  400,
59
60
  ),
60
61
  ),
62
+ disabled-tick-color: (
63
+ color: (
64
+ 'gray',
65
+ 50,
66
+ ),
67
+ ),
61
68
  disabled-indeterminate-color: (
62
69
  color: (
63
70
  'secondary',
@@ -219,6 +226,7 @@ $fluent-checkbox: extend(
219
226
  /// @prop {Map} empty-fill-color [contrast-color: ('gray', 900)] - The unchecked fill color.
220
227
  /// @prop {Map} fill-color-hover [color: ('primary', 600)] - The checked border and fill colors on hover.
221
228
  /// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
229
+ /// @prop {Map} disabled-tick-color [contrast-color: ('primary', 900)] - The checked mark color in disabled state.
222
230
  /// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors.
223
231
  /// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outlined color.
224
232
  /// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outlined color for focused invalid state.
@@ -285,6 +293,12 @@ $bootstrap-checkbox: extend(
285
293
  300,
286
294
  ),
287
295
  ),
296
+ disabled-tick-color: (
297
+ contrast-color: (
298
+ 'primary',
299
+ 900,
300
+ ),
301
+ ),
288
302
  disabled-indeterminate-color: (
289
303
  color: (
290
304
  'primary',
@@ -323,6 +337,7 @@ $bootstrap-checkbox: extend(
323
337
  /// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
324
338
  /// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
325
339
  /// @prop {Map} disabled-color [color: ('gray', 900, .15)] - The disabled border and fill colors.
340
+ /// @prop {Map} disabled-tick-color [contrast-color: ('primary', 500, .4)] - The checked mark color in disabled state.
326
341
  /// @prop {Map} disabled-indeterminate-color [color: ('primary', 400, .5)] - The disabled border and fill colors in checked/indeterminate state.
327
342
  /// @prop {Map} disabled-color-label [color: ('gray', 900, .2)] - The disabled label color.
328
343
  /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
@@ -399,6 +414,13 @@ $indigo-checkbox: extend(
399
414
  0.15,
400
415
  ),
401
416
  ),
417
+ disabled-tick-color: (
418
+ contrast-color: (
419
+ 'primary',
420
+ 500,
421
+ 0.4,
422
+ ),
423
+ ),
402
424
  disabled-color-label: (
403
425
  color: (
404
426
  'gray',