igniteui-theming 13.1.0-beta.2 → 14.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.
@@ -23,205 +23,205 @@ $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: to-hsl(#c5cdff),
27
27
  '50-contrast': black,
28
- 100: #a3aff6,
28
+ 100: to-hsl(#a3aff6),
29
29
  '100-contrast': black,
30
- 200: #8293f8,
30
+ 200: to-hsl(#8293f8),
31
31
  '200-contrast': black,
32
- 300: #7385f4,
32
+ 300: to-hsl(#7385f4),
33
33
  '300-contrast': black,
34
- 400: #5468d9,
34
+ 400: to-hsl(#5468d9),
35
35
  '400-contrast': black,
36
- 500: #3f51b5,
36
+ 500: to-hsl(#3f51b5),
37
37
  '500-contrast': white,
38
- 600: #39479c,
38
+ 600: to-hsl(#39479c),
39
39
  '600-contrast': white,
40
- 700: #333d83,
40
+ 700: to-hsl(#333d83),
41
41
  '700-contrast': white,
42
- 800: #2e3172,
42
+ 800: to-hsl(#2e3172),
43
43
  '800-contrast': white,
44
- 900: #262851,
44
+ 900: to-hsl(#262851),
45
45
  '900-contrast': white,
46
- 'A100': #39479c,
46
+ 'A100': to-hsl(#39479c),
47
47
  'A100-contrast': white,
48
- 'A200': #333d83,
48
+ 'A200': to-hsl(#333d83),
49
49
  'A200-contrast': white,
50
- 'A400': #2e3172,
50
+ 'A400': to-hsl(#2e3172),
51
51
  'A400-contrast': white,
52
- 'A700': #262851,
52
+ 'A700': to-hsl(#262851),
53
53
  'A700-contrast': white,
54
54
  ),
55
55
  'secondary': (
56
- 50: #c5cdff,
56
+ 50: to-hsl(#c5cdff),
57
57
  '50-contrast': black,
58
- 100: #a3aff6,
58
+ 100: to-hsl(#a3aff6),
59
59
  '100-contrast': black,
60
- 200: #8293f8,
60
+ 200: to-hsl(#8293f8),
61
61
  '200-contrast': black,
62
- 300: #7385f4,
62
+ 300: to-hsl(#7385f4),
63
63
  '300-contrast': black,
64
- 400: #5468d9,
64
+ 400: to-hsl(#5468d9),
65
65
  '400-contrast': black,
66
- 500: #3f51b5,
66
+ 500: to-hsl(#3f51b5),
67
67
  '500-contrast': white,
68
- 600: #39479c,
68
+ 600: to-hsl(#39479c),
69
69
  '600-contrast': white,
70
- 700: #333d83,
70
+ 700: to-hsl(#333d83),
71
71
  '700-contrast': white,
72
- 800: #2e3172,
72
+ 800: to-hsl(#2e3172),
73
73
  '800-contrast': white,
74
- 900: #262851,
74
+ 900: to-hsl(#262851),
75
75
  '900-contrast': white,
76
- 'A100': #39479c,
76
+ 'A100': to-hsl(#39479c),
77
77
  'A100-contrast': white,
78
- 'A200': #333d83,
78
+ 'A200': to-hsl(#333d83),
79
79
  'A200-contrast': white,
80
- 'A400': #2e3172,
80
+ 'A400': to-hsl(#2e3172),
81
81
  'A400-contrast': white,
82
- 'A700': #262851,
82
+ 'A700': to-hsl(#262851),
83
83
  'A700-contrast': white,
84
84
  ),
85
85
  'gray': (
86
- 50: #fcfcfd,
86
+ 50: to-hsl(#fcfcfd),
87
87
  '50-contrast': black,
88
- 100: #f8f8fa,
88
+ 100: to-hsl(#f8f8fa),
89
89
  '100-contrast': black,
90
- 200: #ebedf2,
90
+ 200: to-hsl(#ebedf2),
91
91
  '200-contrast': black,
92
- 300: #d6d8dc,
92
+ 300: to-hsl(#d6d8dc),
93
93
  '300-contrast': black,
94
- 400: #c3c4c7,
94
+ 400: to-hsl(#c3c4c7),
95
95
  '400-contrast': black,
96
- 500: #9a9da2,
96
+ 500: to-hsl(#9a9da2),
97
97
  '500-contrast': black,
98
- 600: #6c707a,
98
+ 600: to-hsl(#6c707a),
99
99
  '600-contrast': white,
100
- 700: #545762,
100
+ 700: to-hsl(#545762),
101
101
  '700-contrast': white,
102
- 800: #3b3d47,
102
+ 800: to-hsl(#3b3d47),
103
103
  '800-contrast': white,
104
- 900: #24252c,
104
+ 900: to-hsl(#24252c),
105
105
  '900-contrast': white,
106
106
  ),
107
107
  'info': (
108
- 50: #f1c3ff,
108
+ 50: to-hsl(#f1c3ff),
109
109
  '50-contrast': black,
110
- 100: #e89eff,
110
+ 100: to-hsl(#e89eff),
111
111
  '100-contrast': black,
112
- 200: #dd71ff,
112
+ 200: to-hsl(#dd71ff),
113
113
  '200-contrast': black,
114
- 300: #da64ff,
114
+ 300: to-hsl(#da64ff),
115
115
  '300-contrast': black,
116
- 400: #bc34d3,
116
+ 400: to-hsl(#bc34d3),
117
117
  '400-contrast': white,
118
- 500: #9c27b0,
118
+ 500: to-hsl(#9c27b0),
119
119
  '500-contrast': white,
120
- 600: #8c16a0,
120
+ 600: to-hsl(#8c16a0),
121
121
  '600-contrast': white,
122
- 700: #7f1192,
122
+ 700: to-hsl(#7f1192),
123
123
  '700-contrast': white,
124
- 800: #6f0a80,
124
+ 800: to-hsl(#6f0a80),
125
125
  '800-contrast': white,
126
- 900: #5c056b,
126
+ 900: to-hsl(#5c056b),
127
127
  '900-contrast': white,
128
- 'A100': #8c16a0,
128
+ 'A100': to-hsl(#8c16a0),
129
129
  'A100-contrast': white,
130
- 'A200': #7f1192,
130
+ 'A200': to-hsl(#7f1192),
131
131
  'A200-contrast': white,
132
- 'A400': #6f0a80,
132
+ 'A400': to-hsl(#6f0a80),
133
133
  'A400-contrast': white,
134
- 'A700': #5c056b,
134
+ 'A700': to-hsl(#5c056b),
135
135
  'A700-contrast': white,
136
136
  ),
137
137
  'success': (
138
- 50: #edf3e7,
138
+ 50: to-hsl(#edf3e7),
139
139
  '50-contrast': black,
140
- 100: #d2e2c3,
140
+ 100: to-hsl(#d2e2c3),
141
141
  '100-contrast': black,
142
- 200: #b4cf9c,
142
+ 200: to-hsl(#b4cf9c),
143
143
  '200-contrast': black,
144
- 300: #95bc74,
144
+ 300: to-hsl(#95bc74),
145
145
  '300-contrast': black,
146
- 400: #7fad56,
146
+ 400: to-hsl(#7fad56),
147
147
  '400-contrast': black,
148
- 500: #689f38,
148
+ 500: to-hsl(#689f38),
149
149
  '500-contrast': black,
150
- 600: #5a912a,
150
+ 600: to-hsl(#5a912a),
151
151
  '600-contrast': black,
152
- 700: #4e8222,
152
+ 700: to-hsl(#4e8222),
153
153
  '700-contrast': white,
154
- 800: #3d7012,
154
+ 800: to-hsl(#3d7012),
155
155
  '800-contrast': white,
156
- 900: #316109,
156
+ 900: to-hsl(#316109),
157
157
  '900-contrast': white,
158
- 'A100': #5a912a,
158
+ 'A100': to-hsl(#5a912a),
159
159
  'A100-contrast': black,
160
- 'A200': #4e8222,
160
+ 'A200': to-hsl(#4e8222),
161
161
  'A200-contrast': white,
162
- 'A400': #3d7012,
162
+ 'A400': to-hsl(#3d7012),
163
163
  'A400-contrast': white,
164
- 'A700': #316109,
164
+ 'A700': to-hsl(#316109),
165
165
  'A700-contrast': white,
166
166
  ),
167
167
  'warn': (
168
- 50: #fed7b7,
168
+ 50: to-hsl(#fed7b7),
169
169
  '50-contrast': black,
170
- 100: #ffc696,
170
+ 100: to-hsl(#ffc696),
171
171
  '100-contrast': black,
172
- 200: #ffad67,
172
+ 200: to-hsl(#ffad67),
173
173
  '200-contrast': black,
174
- 300: #fb8f32,
174
+ 300: to-hsl(#fb8f32),
175
175
  '300-contrast': black,
176
- 400: #fa7b0e,
176
+ 400: to-hsl(#fa7b0e),
177
177
  '400-contrast': black,
178
- 500: #f56b1d,
178
+ 500: to-hsl(#f56b1d),
179
179
  '500-contrast': black,
180
- 600: #f05a2b,
180
+ 600: to-hsl(#f05a2b),
181
181
  '600-contrast': black,
182
- 700: #ec4820,
182
+ 700: to-hsl(#ec4820),
183
183
  '700-contrast': black,
184
- 800: #df370e,
184
+ 800: to-hsl(#df370e),
185
185
  '800-contrast': black,
186
- 900: #d22900,
186
+ 900: to-hsl(#d22900),
187
187
  '900-contrast': white,
188
- 'A100': #f05a2b,
188
+ 'A100': to-hsl(#f05a2b),
189
189
  'A100-contrast': black,
190
- 'A200': #ec4820,
190
+ 'A200': to-hsl(#ec4820),
191
191
  'A200-contrast': black,
192
- 'A400': #df370e,
192
+ 'A400': to-hsl(#df370e),
193
193
  'A400-contrast': black,
194
- 'A700': #d22900,
194
+ 'A700': to-hsl(#d22900),
195
195
  'A700-contrast': white,
196
196
  ),
197
197
  'error': (
198
- 50: #ffebf0,
198
+ 50: to-hsl(#ffebf0),
199
199
  '50-contrast': black,
200
- 100: #ffb0b7,
200
+ 100: to-hsl(#ffb0b7),
201
201
  '100-contrast': black,
202
- 200: #fc7f8a,
202
+ 200: to-hsl(#fc7f8a),
203
203
  '200-contrast': black,
204
- 300: #ec5461,
204
+ 300: to-hsl(#ec5461),
205
205
  '300-contrast': black,
206
- 400: #dd3544,
206
+ 400: to-hsl(#dd3544),
207
207
  '400-contrast': black,
208
- 500: #cf1a2b,
208
+ 500: to-hsl(#cf1a2b),
209
209
  '500-contrast': white,
210
- 600: #c31223,
210
+ 600: to-hsl(#c31223),
211
211
  '600-contrast': white,
212
- 700: #b90415,
212
+ 700: to-hsl(#b90415),
213
213
  '700-contrast': white,
214
- 800: #ae0111,
214
+ 800: to-hsl(#ae0111),
215
215
  '800-contrast': white,
216
- 900: #9f000f,
216
+ 900: to-hsl(#9f000f),
217
217
  '900-contrast': white,
218
- 'A100': #c31223,
218
+ 'A100': to-hsl(#c31223),
219
219
  'A100-contrast': white,
220
- 'A200': #b90415,
220
+ 'A200': to-hsl(#b90415),
221
221
  'A200-contrast': white,
222
- 'A400': #ae0111,
222
+ 'A400': to-hsl(#ae0111),
223
223
  'A400-contrast': white,
224
- 'A700': #9f000f,
224
+ 'A700': to-hsl(#9f000f),
225
225
  'A700-contrast': white,
226
226
  ),
227
227
  'surface': $surface-shades,
@@ -1,17 +1,17 @@
1
1
  /// Level 1 - The color used to generate umbra shadows.
2
2
  /// @type Color
3
3
  /// @access private
4
- $color-1: rgba(0 0 0 / 0.26) !default;
4
+ $color-1: rgba(0 0 0 / 26%) !default;
5
5
 
6
6
  /// Level 2 - The color used to generate penumbra shadows.
7
7
  /// @type Color
8
8
  /// @access private
9
- $color-2: rgba(0 0 0 / 0.12) !default;
9
+ $color-2: rgba(0 0 0 / 12%) !default;
10
10
 
11
11
  /// Level 3 - The color used to generate ambient shadows.
12
12
  /// @type Color
13
13
  /// @access private
14
- $color-3: rgba(0 0 0 / 0.08) !default;
14
+ $color-3: rgba(0 0 0 / 8%) !default;
15
15
 
16
16
  @forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
17
17
  @forward './indigo' as indigo-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
@@ -9,32 +9,32 @@
9
9
  /// Level 1 - The color used to generate umbra shadows.
10
10
  /// @type Color
11
11
  /// @access private
12
- $color-1: rgba(0 0 0 / 0.26) !default;
12
+ $color-1: rgba(0 0 0 / 26%) !default;
13
13
 
14
14
  /// Level 2 - The color used to generate penumbra shadows.
15
15
  /// @type Color
16
16
  /// @access private
17
- $color-2: rgba(0 0 0 / 0.12) !default;
17
+ $color-2: rgba(0 0 0 / 12%) !default;
18
18
 
19
19
  /// Level 3 - The color used to generate ambient shadows.
20
20
  /// @type Color
21
21
  /// @access private
22
- $color-3: rgba(0 0 0 / 0.08) !default;
22
+ $color-3: rgba(0 0 0 / 8%) !default;
23
23
 
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 3px 6px 0 rgba(0 0 0 / 0.3)));
28
- $_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 0.2)));
29
- $_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.1)));
30
- $_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 0.2)));
31
- $_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.2)));
32
- $_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 0.3)));
33
- $_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 0.2)));
34
- $_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 0.3)));
35
- $_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 0.4)));
36
- $_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 0.4)));
37
- $_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
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
+ $_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
30
+ $_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 20%)));
31
+ $_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
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));
@@ -45,8 +45,8 @@ $_19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px
45
45
  $_20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3));
46
46
  $_21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3));
47
47
  $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3));
48
- $_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 0.3)));
49
- $_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
48
+ $_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 30%)));
49
+ $_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
50
50
 
51
51
  /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
52
52
  /// @type Map
@@ -9,17 +9,17 @@
9
9
  /// Level 1 - The color used to generate umbra shadows.
10
10
  /// @type Color
11
11
  /// @access private
12
- $color-1: rgba(0 0 0 / 0.26) !default;
12
+ $color-1: rgba(0 0 0 / 26%) !default;
13
13
 
14
14
  /// Level 2 - The color used to generate penumbra shadows.
15
15
  /// @type Color
16
16
  /// @access private
17
- $color-2: rgba(0 0 0 / 0.12) !default;
17
+ $color-2: rgba(0 0 0 / 12%) !default;
18
18
 
19
19
  /// Level 3 - The color used to generate ambient shadows.
20
20
  /// @type Color
21
21
  /// @access private
22
- $color-3: rgba(0 0 0 / 0.08) !default;
22
+ $color-3: rgba(0 0 0 / 8%) !default;
23
23
 
24
24
  /// All elevation levels
25
25
  /// @access private
@@ -24,85 +24,131 @@ $dark-bootstrap-chip: $bootstrap-chip;
24
24
 
25
25
  /// Generates a dark indigo chip schema.
26
26
  /// @type {Map}
27
- /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
28
- /// @prop {Map} hover-text-color [color: ('gray', 700)] - The chip text hover color.
29
- /// @prop {Map} focus-text-color [color: ('gray', 700)] The focused chip text color.
30
- /// @prop {Map} background [color: ('surface')] - The chip background color.
31
- /// @prop {Map} hover-background [color: ('gray', 200] - The chip hover background color.
32
- /// @prop {Map} focus-background [color: ('surface')] The focused chip background color.
33
- /// @prop {Map} ghost-background [color: ('gray', 200)] - The chip ghost background color.
34
- /// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
35
- /// @prop {Map} hover-border-color [color: ('gray', 400)] - The chip hover border color.
36
- /// @prop {Color} focus-border-color [color: ('gray', 400)] - The chip focus border color.
27
+ /// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The chip text color.
28
+ /// @prop {Map} hover-text-color [contrast-color: ('gray', 50)] - The chip text hover color.
29
+ /// @prop {Map} focus-text-color [contrast-color: ('gray', 50, .8)] The focused chip text color.
30
+ ///
31
+ /// @prop {Map} background [contrast-color: ('gray', 50, .05)] - The chip background color.
32
+ /// @prop {Map} hover-background [contrast-color: ('gray', 50, .1)] - The chip hover background color.
33
+ /// @prop {Map} focus-background [contrast-color: ('gray', 50, .05)] The focused chip background color.
34
+ ///
35
+ /// @prop {Map} border-color [color: ('gray', 100)] - The chip border color.
36
+ /// @prop {Map} hover-border-color [color: ('gray', 200)] - The chip hover border color.
37
+ /// @prop {Map} focus-border-color [color: ('gray', 100)] - The chip focus border color.
38
+ /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The chip focus outline color.
39
+ ///
40
+ /// @prop {Map} ghost-background [color: ('gray', 100)] - The chip ghost background color.
41
+ ///
42
+ /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The disabled chip text color.
43
+ /// @prop {Map} disabled-background [contrast-color: ('gray', 50, .05)] - The disabled chip background color.
44
+ /// @prop {Map} disabled-border-color [ color: ('gray', 50)] - The disabled chip border color.
37
45
  /// @requires $indigo-chip
38
46
  $dark-indigo-chip: extend(
39
47
  $indigo-chip,
40
48
  (
41
49
  text-color: (
42
- color: (
50
+ contrast-color: (
43
51
  'gray',
44
- 700,
52
+ 50,
53
+ 0.8,
45
54
  ),
46
55
  ),
47
56
 
48
57
  hover-text-color: (
49
- color: (
58
+ contrast-color: (
50
59
  'gray',
51
- 700,
60
+ 50,
52
61
  ),
53
62
  ),
54
63
 
55
64
  focus-text-color: (
56
- color: (
65
+ contrast-color: (
57
66
  'gray',
58
- 700,
67
+ 50,
68
+ 0.8,
59
69
  ),
60
70
  ),
61
71
 
62
72
  background: (
63
- color: (
64
- 'surface',
73
+ contrast-color: (
74
+ 'gray',
75
+ 50,
76
+ 0.05,
65
77
  ),
66
78
  ),
67
79
 
68
80
  hover-background: (
69
- color: (
81
+ contrast-color: (
70
82
  'gray',
71
- 200,
83
+ 50,
84
+ 0.1,
72
85
  ),
73
86
  ),
74
87
 
75
88
  focus-background: (
76
- color: (
77
- 'surface',
89
+ contrast-color: (
90
+ 'gray',
91
+ 50,
92
+ 0.05,
78
93
  ),
79
94
  ),
80
95
 
81
96
  ghost-background: (
82
97
  color: (
83
98
  'gray',
84
- 200,
99
+ 100,
85
100
  ),
86
101
  ),
87
102
 
88
103
  border-color: (
89
104
  color: (
90
105
  'gray',
91
- 400,
106
+ 100,
92
107
  ),
93
108
  ),
94
109
 
95
110
  hover-border-color: (
96
111
  color: (
97
112
  'gray',
98
- 400,
113
+ 200,
99
114
  ),
100
115
  ),
101
116
 
102
117
  focus-border-color: (
103
118
  color: (
104
119
  'gray',
105
- 200,
120
+ 100,
121
+ ),
122
+ ),
123
+
124
+ focus-outline-color: (
125
+ contrast-color: (
126
+ 'gray',
127
+ 50,
128
+ 0.2,
129
+ ),
130
+ ),
131
+
132
+ disabled-text-color: (
133
+ contrast-color: (
134
+ 'gray',
135
+ 50,
136
+ 0.2,
137
+ ),
138
+ ),
139
+
140
+ disabled-background: (
141
+ contrast-color: (
142
+ 'gray',
143
+ 50,
144
+ 0.05,
145
+ ),
146
+ ),
147
+
148
+ disabled-border-color: (
149
+ color: (
150
+ 'gray',
151
+ 50,
106
152
  ),
107
153
  ),
108
154
  )