igniteui-theming 5.0.0-beta.1 → 5.0.0-beta.2

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "5.0.0-beta.1",
3
+ "version": "5.0.0-beta.2",
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": {
@@ -9,278 +9,340 @@
9
9
 
10
10
  /// Generates a dark calendar schema.
11
11
  /// @type {Map}
12
- /// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
13
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
14
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
15
12
  /// @requires $light-calendar
16
- $dark-calendar: extend(
17
- $light-calendar,
13
+ $dark-calendar: extend($light-calendar);
14
+
15
+ /// Generates a dark fluent calendar schema.
16
+ /// @type {Map}
17
+ /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 800)] - The foreground color of the selected year.
18
+ /// @prop {Map} year-selected-background [color: ('primary', 800)]- The background color of the selected year in years view.
19
+ /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected year in years view.
20
+ /// @prop {Map} year-selected-hover-background [color: ('primary' 900)] - The :hover background color of the selected year in years view.
21
+ /// @prop {Map} year-selected-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected year in years view.
22
+ /// @prop {Map} year-selected-focus-background [color: ('primary' 900)] - The :focus background color of the selected year in years view.
23
+ /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
24
+ /// @prop {Map} year-selected-current-hover-background [color: ('primary', 900)] - The :hover background color of the current/selected year.
25
+ /// @prop {Map} year-selected-current-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the current/selected year.
26
+ /// @prop {Map} year-selected-current-focus-background [color: ('secondary', 500)] - The :focus background color of the current/selected year.
27
+ /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 800)] - The foreground color of the selected month in month view.
28
+ /// @prop {Map} month-selected-background [color: ('primary', 800)] - The background color of the selected month in month view.
29
+ /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)]- The :hover foreground color of the selected month in month view.
30
+ /// @prop {Map} month-selected-hover-background [color: ('primary', 900)]- The :hover background color of the selected month in month view.
31
+ /// @prop {Map} month-selected-focus-foreground [contrast-color: ('primary', 900)]- The :focus foreground color of the selected month in month view.
32
+ /// @prop {Map} month-selected-focus-background [color: ('primary', 900)]- The :focus background color of the selected month in month view.
33
+ /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 800)] - The foreground color of the current/selected month in month view.
34
+ /// @prop {Map} month-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month in month view.
35
+ /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
36
+ /// @prop {Map} month-selected-current-hover-background [color: ('primary', 900)] - The :hover background color of the current/selected month in month view.
37
+ /// @prop {Map} month-selected-current-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the current/selected month in month view.
38
+ /// @prop {Map} month-selected-current-focus-background [color: ('primary', 900)] - The :focus background color of the current/selected month in month view.
39
+ /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 50] - The :hover foreground color of a date.
40
+ /// @prop {Map} date-hover-background [color: ('gray', 50)] - The :hover background color of a date.
41
+ /// @prop {Map} date-focus-foreground [contrast-color: 'gray', 50] - The :focus foreground color of a date.
42
+ /// @prop {Map} date-focus-background [color: ('gray', 50)] - The :focus background color of date.
43
+ /// @prop {Map} date-selected-foreground [contrast-color: ('gray', 50)] - The foreground color of the selected date.
44
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected date.
45
+ /// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected date.
46
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 700)] - The :focus foreground color of the selected date.
47
+ /// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The :focus background color of the selected date.
48
+ /// @prop {Map} date-selected-range-start-foreground [contrast-color: ('gray', 50)] - The foreground color of the first date in the selected range.
49
+ /// @prop {Map} date-selected-range-end-foreground [contrast-color: ('gray', 50)] - The background color of the last date in the selected range.
50
+ /// @prop {Map} date-selected-range-start-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the first date in the selected range.
51
+ /// @prop {Map} date-selected-range-start-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the first date in the selected range.
52
+ /// @prop {Map} date-selected-range-end-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the last date in the selected range.
53
+ /// @prop {Map} date-selected-range-end-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the last date in the selected range.
54
+ /// @prop {Map} date-disabled-foreground [color: ('gray', 300)] - The foreground of disabled dates.
55
+ /// @requires $fluent-calendar
56
+ $dark-fluent-calendar: extend(
57
+ $fluent-calendar,
18
58
  (
19
- date-disabled-text-color: (
59
+ year-selected-foreground: (
60
+ contrast-color: (
61
+ 'primary',
62
+ 800,
63
+ ),
64
+ ),
65
+ year-selected-background: (
20
66
  color: (
21
- 'gray',
22
- 500,
67
+ 'primary',
68
+ 800,
23
69
  ),
24
70
  ),
25
-
26
- date-selected-hover-foreground: (
71
+ year-selected-hover-foreground: (
27
72
  contrast-color: (
28
- 'secondary',
29
- 500,
73
+ 'primary',
74
+ 900,
30
75
  ),
31
76
  ),
32
-
33
- date-selected-focus-foreground: (
77
+ year-selected-hover-background: (
78
+ color: (
79
+ 'primary',
80
+ 900,
81
+ ),
82
+ ),
83
+ year-selected-focus-foreground: (
34
84
  contrast-color: (
35
- 'secondary',
36
- 500,
85
+ 'primary',
86
+ 900,
37
87
  ),
38
88
  ),
39
- )
40
- );
41
-
42
- /// Generates a dark fluent calendar schema.
43
- /// @type {Map}
44
- /// @requires $fluent-calendar
45
- $dark-fluent-calendar: extend($fluent-calendar);
46
-
47
- /// Generates a dark bootstrap calendar schema.
48
- /// @type {Map}
49
- /// @prop {Map} content-background [color: ('gray', 50)] - The main content background color.
50
- /// @prop {Color} picker-background-color [color: ('gray', 100, .5)] - The igx calendar picker background color.
51
- /// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
52
- /// @prop {Map} picker-text-color [contrast-color: ('surface')]- The idle picker month/year color.
53
- /// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
54
- /// @prop {Map} date-current-text-color [contrast-color: 'surface'] - The text color for the current date.
55
- /// @prop {Map} date-current-hover-text-color [color: ('surface')] - The hover text color for the current date.
56
- /// @prop {Map} date-current-focus-text-color [color: ('surface')] - The focus text color for the current date.
57
- /// @prop {Map} week-number-background [('gray', 300, .2)] - The background color of the week number column.
58
- /// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
59
- /// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
60
- /// @requires $bootstrap-calendar
61
- $dark-bootstrap-calendar: extend(
62
- $bootstrap-calendar,
63
- (
64
- content-background: (
65
- color: (
66
- 'gray',
67
- 50,
89
+ year-selected-focus-background: (
90
+ contrast-color: (
91
+ 'primary',
92
+ 900,
68
93
  ),
69
94
  ),
70
-
71
- picker-background-color: (
95
+ year-selected-current-hover-foreground: (
96
+ contrast-color: (
97
+ 'primary',
98
+ 900,
99
+ ),
100
+ ),
101
+ year-selected-current-hover-background: (
72
102
  color: (
73
- 'gray',
74
- 100,
75
- 0.5,
103
+ 'primary',
104
+ 900,
76
105
  ),
77
106
  ),
78
-
79
- border-color: (
107
+ year-selected-current-focus-foreground: (
108
+ contrast-color: (
109
+ 'primary',
110
+ 900,
111
+ ),
112
+ ),
113
+ year-selected-current-focus-background: (
80
114
  color: (
81
- 'gray',
82
- 100,
115
+ 'primary',
116
+ 900,
83
117
  ),
84
118
  ),
85
-
86
- picker-text-color: (
119
+ month-selected-foreground: (
87
120
  contrast-color: (
88
- 'surface',
121
+ 'primary',
122
+ 800,
89
123
  ),
90
124
  ),
91
-
92
- date-selected-text-color: (
125
+ month-selected-background: (
126
+ color: (
127
+ 'primary',
128
+ 800,
129
+ ),
130
+ ),
131
+ month-selected-hover-foreground: (
93
132
  contrast-color: (
94
- 'secondary',
95
- 600,
133
+ 'primary',
134
+ 900,
96
135
  ),
97
136
  ),
98
-
99
- date-selected-hover-text-color: (
137
+ month-selected-hover-background: (
138
+ color: (
139
+ 'primary',
140
+ 900,
141
+ ),
142
+ ),
143
+ month-selected-focus-foreground: (
100
144
  contrast-color: (
101
- 'surface',
145
+ 'primary',
146
+ 900,
102
147
  ),
103
148
  ),
104
-
105
- date-selected-focus-text-color: (
149
+ month-selected-focus-background: (
106
150
  contrast-color: (
107
- 'surface',
151
+ 'primary',
152
+ 900,
108
153
  ),
109
154
  ),
110
-
111
- date-current-text-color: (
112
- contrast-color: 'surface',
155
+ month-selected-current-foreground: (
156
+ contrast-color: (
157
+ 'primary',
158
+ 800,
159
+ ),
113
160
  ),
114
-
115
- date-current-hover-text-color: (
116
- contrast-color: 'surface',
161
+ month-selected-current-background: (
162
+ color: (
163
+ 'primary',
164
+ 800,
165
+ ),
117
166
  ),
118
-
119
- date-current-focus-text-color: (
120
- contrast-color: 'surface',
167
+ month-selected-current-hover-foreground: (
168
+ contrast-color: (
169
+ 'primary',
170
+ 900,
171
+ ),
121
172
  ),
122
-
123
- week-number-background: (
173
+ month-selected-current-hover-background: (
124
174
  color: (
125
- 'gray',
126
- 300,
127
- 0.2,
175
+ 'primary',
176
+ 900,
128
177
  ),
129
178
  ),
130
- )
131
- );
132
-
133
- /// Generates a dark indigo calendar schema.
134
- /// @type {Map}
135
- /// @prop {Map} content-text-color [contrast-color: ('surface')] - The main content text color.
136
- /// @prop {Map} inactive-text-color [color: ('gray', 700)] - The text color for previous and next month dates.
137
- /// @prop {Map} label-color [color: ('gray', 700)] - The text color for weekday labels.
138
- /// @prop {Map} weekend-text-color [color: ('gray', 700)] - The text color for weekend days.
139
- /// @prop {Map} picker-arrow-color [color: ('gray', 800)] - The idle picker arrow color.
140
- /// @prop {Map} picker-arrow-hover-color [contrast-color: ('surface')] - The picker hover arrow color.
141
- /// @prop {Map} picker-text-color [color: ('gray', 800)]- The idle picker month/year color.
142
- /// @prop {Map} picker-text-hover-color [contrast-color: ('surface')]- The hover picker month/year color.
143
- /// @prop {Map} month-hover-text-color [color: ('primary', 300)] - The month hover text color.
144
- /// @prop {Map} year-hover-text-color [color: ('primary', 300)] - The year hover text color.
145
- /// @prop {Map} year-current-text-color [color: ('primary', 300)] - The text color for the current/selected year.
146
- /// @prop {Map} month-current-text-color [color: ('primary', 300)]- The text color for the current/selected month.
147
- /// @prop {Map} month-hover-current-text-color [color: ('primary', 300)]- The text color for the current/selected month on hover.
148
- /// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
149
- /// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
150
- /// @prop {Map} date-current-hover-text-color [color: ('primary', 200)] - The hover text color for the current date.
151
- /// @prop {Map} date-current-focus-text-color [color: ('gray', 100)] - The focus text color for the current date.
152
- /// @prop {Map} date-current-hover-bg-color [color: ('gray', 100)] - The hover background color for the current date.
153
- /// @prop {Map} date-current-focus-bg-color [color: ('gray', 100)] - The focus background color for the current date.
154
- /// @requires $indigo-calendar
155
- $dark-indigo-calendar: extend(
156
- $indigo-calendar,
157
- (
158
- content-text-color: (
179
+ month-selected-current-focus-foreground: (
159
180
  contrast-color: (
160
- 'surface',
181
+ 'primary',
182
+ 900,
161
183
  ),
162
184
  ),
163
-
164
- date-current-hover-bg-color: (
185
+ month-selected-current-focus-background: (
165
186
  color: (
166
- 'gray',
167
- 100,
187
+ 'primary',
188
+ 900,
168
189
  ),
169
190
  ),
170
-
171
- date-current-focus-bg-color: (
172
- color: (
191
+ date-hover-foreground: (
192
+ contrast-color: (
173
193
  'gray',
174
- 100,
194
+ 50,
175
195
  ),
176
196
  ),
177
-
178
- date-current-hover-text-color: (
197
+ date-hover-background: (
179
198
  color: (
180
- 'primary',
199
+ 'gray',
181
200
  200,
182
201
  ),
183
202
  ),
184
-
185
- date-current-focus-text-color: (
186
- color: (
187
- 'primary',
188
- 200,
203
+ date-focus-foreground: (
204
+ contrast-color: (
205
+ 'gray',
206
+ 50,
189
207
  ),
190
208
  ),
191
-
192
- inactive-text-color: (
209
+ date-focus-background: (
193
210
  color: (
194
211
  'gray',
195
- 700,
212
+ 200,
196
213
  ),
197
214
  ),
198
-
199
- date-selected-hover-text-color: (
215
+ date-selected-foreground: (
200
216
  contrast-color: (
201
- 'surface',
217
+ 'gray',
218
+ 50,
202
219
  ),
203
220
  ),
204
-
205
- date-selected-focus-text-color: (
221
+ date-selected-hover-foreground: (
206
222
  contrast-color: (
207
- 'surface',
223
+ 'gray',
224
+ 50,
208
225
  ),
209
226
  ),
210
-
211
- label-color: (
227
+ date-selected-hover-background: (
212
228
  color: (
213
229
  'gray',
214
- 700,
230
+ 200,
215
231
  ),
216
232
  ),
217
-
218
- weekend-text-color: (
219
- color: (
233
+ date-selected-focus-foreground: (
234
+ contrast-color: (
220
235
  'gray',
221
- 700,
236
+ 50,
222
237
  ),
223
238
  ),
224
-
225
- picker-arrow-color: (
239
+ date-selected-focus-background: (
226
240
  color: (
227
241
  'gray',
228
- 800,
242
+ 200,
229
243
  ),
230
244
  ),
231
-
232
- picker-arrow-hover-color: (
245
+ date-selected-range-start-foreground: (
233
246
  contrast-color: (
234
- 'surface',
247
+ 'gray',
248
+ 50,
235
249
  ),
236
250
  ),
237
-
238
- picker-text-color: (
239
- color: (
251
+ date-selected-range-end-foreground: (
252
+ contrast-color: (
240
253
  'gray',
241
- 800,
254
+ 50,
242
255
  ),
243
256
  ),
244
-
245
- picker-text-hover-color: (
257
+ date-selected-range-start-hover-foreground: (
246
258
  contrast-color: (
247
- 'surface',
259
+ 'gray',
260
+ 50,
248
261
  ),
249
262
  ),
250
-
251
- month-hover-text-color: (
252
- color: (
253
- 'primary',
254
- 300,
263
+ date-selected-range-start-focus-foreground: (
264
+ contrast-color: (
265
+ 'gray',
266
+ 50,
255
267
  ),
256
268
  ),
257
-
258
- year-hover-text-color: (
259
- color: (
260
- 'primary',
261
- 300,
269
+ date-selected-range-end-hover-foreground: (
270
+ contrast-color: (
271
+ 'gray',
272
+ 50,
262
273
  ),
263
274
  ),
264
-
265
- month-current-text-color: (
275
+ date-selected-range-end-focus-foreground: (
276
+ contrast-color: (
277
+ 'gray',
278
+ 50,
279
+ ),
280
+ ),
281
+ date-disabled-foreground: (
266
282
  color: (
267
- 'primary',
283
+ 'gray',
268
284
  300,
269
285
  ),
270
286
  ),
287
+ )
288
+ );
271
289
 
272
- month-hover-current-text-color: (
290
+ /// Generates a dark bootstrap calendar schema.
291
+ /// @type {Map}
292
+ /// @prop {Map} content-background [color: ('gray', 50)] - The main content background color.
293
+ /// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
294
+ /// @prop {Map} picker-foreground [contrast-color: ('surface')]- The idle picker month/year color.
295
+ /// @prop {Map} date-selected-foreground [contrast-color: ('secondary', 600)] - The text color for the selected date.
296
+ /// @prop {Map} date-current-foreground [contrast-color: 'surface'] - The text color for the current date.
297
+ /// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
298
+ /// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
299
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('surface')] - The hover text color for the selected date.
300
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('surface')] - The focus text color for the selected date.
301
+ /// @requires $bootstrap-calendar
302
+ $dark-bootstrap-calendar: extend(
303
+ $bootstrap-calendar,
304
+ (
305
+ content-background: (
273
306
  color: (
274
- 'primary',
275
- 300,
307
+ 'gray',
308
+ 50,
276
309
  ),
277
310
  ),
278
-
279
- year-current-text-color: (
311
+ border-color: (
280
312
  color: (
281
- 'primary',
282
- 300,
313
+ 'gray',
314
+ 100,
283
315
  ),
284
316
  ),
317
+ date-selected-foreground: (
318
+ contrast-color: (
319
+ 'secondary',
320
+ 600,
321
+ ),
322
+ ),
323
+ date-selected-hover-foreground: (
324
+ contrast-color: (
325
+ 'surface',
326
+ ),
327
+ ),
328
+ date-selected-focus-foreground: (
329
+ contrast-color: (
330
+ 'surface',
331
+ ),
332
+ ),
333
+ date-current-foreground: (
334
+ contrast-color: 'surface',
335
+ ),
336
+ date-current-hover-foreground: (
337
+ contrast-color: 'surface',
338
+ ),
339
+ date-current-focus-foreground: (
340
+ contrast-color: 'surface',
341
+ ),
285
342
  )
286
343
  );
344
+
345
+ /// Generates a dark indigo calendar schema.
346
+ /// @type {Map}
347
+ /// @requires $indigo-calendar
348
+ $dark-indigo-calendar: extend($indigo-calendar);