Skip to content

Commit 5678fe7

Browse files
didimmovadidimmova
authored
Merge branch 'simeonoff/indigo-theme' into didimmova/fix-sassdoc
2 parents e7ceb5b + a39c745 commit 5678fe7

File tree

6 files changed

+93
-49
lines changed

6 files changed

+93
-49
lines changed

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -41,49 +41,38 @@ $_dark-bootstrap-calendar: extend(
4141

4242
/// Generates a dark indigo calendar schema.
4343
/// @type {Map}
44-
/// @prop {Map} content-text-color [igx-color: ('grays', 700)] - The main content text color.
45-
/// @prop {Map} inactive-text-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for previous and next month dates.
46-
/// @prop {Map} label-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for weekday labels.
47-
/// @prop {Map} weekend-text-color [igx-contrast-color: ('surface'), rgba: .4] - The text color for weekend days.
48-
/// @prop {Map} date-current-text-color [igx-contrast-color: ('surface')] - The text color for the current date.
49-
/// @prop {Color} date-current-bg-color [transparent] - The background color for the current date.
44+
/// @prop {Map} content-text-color [igx-contrast-color: ('surface')] - The main content text color.
45+
/// @prop {Map} inactive-text-color [igx-color: ('grays', 700)] - The text color for previous and next month dates.
46+
/// @prop {Map} label-color [igx-color: ('grays', 700)] - The text color for weekday labels.
47+
/// @prop {Map} weekend-text-color [igx-color: ('grays', 700)] - The text color for weekend days.
5048
/// @prop {Map} picker-arrow-color [igx-color: ('grays', 800)] - The idle picker arrow color.
5149
/// @prop {Map} picker-arrow-hover-color [igx-contrast-color: ('surface')] - The picker hover arrow color.
5250
/// @prop {Map} picker-text-color [igx-color: ('grays', 800)]- The idle picker month/year color.
5351
/// @prop {Map} picker-text-hover-color [igx-contrast-color: ('surface')]- The hover picker month/year color.
54-
/// @prop {Map} month-hover-text-color [igx-contrast-color: ('surface')] - The month hover text color.
55-
/// @prop {Map} year-hover-text-color [igx-contrast-color: ('surface')] - The year hover text color.
56-
/// @prop {Map} year-current-text-color [igx-contrast-color: ('surface')] - The text color for the current/selected year.
57-
/// @prop {Map} month-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month.
58-
/// @prop {Map} month-hover-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month on hover.
52+
/// @prop {Map} month-hover-text-color [igx-color: ('primary', 300)] - The month hover text color.
53+
/// @prop {Map} year-hover-text-color [igx-color: ('primary', 300)] - The year hover text color.
54+
/// @prop {Map} year-current-text-color [igx-color: ('primary', 300)] - The text color for the current/selected year.
55+
/// @prop {Map} month-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month.
56+
/// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month on hover.
5957
/// @requires {function} extend
6058
/// @requires $_indigo-calendar
6159
$_dark-indigo-calendar: extend(
6260
$_indigo-calendar,
6361
(
6462
content-text-color: (
65-
igx-color: ('grays', 700)
63+
igx-contrast-color: ('surface')
6664
),
6765

6866
inactive-text-color: (
69-
igx-contrast-color: ('surface'),
70-
rgba: .4
71-
),
72-
73-
date-current-text-color: (
74-
igx-contrast-color: ('surface')
67+
igx-color: ('grays', 700)
7568
),
7669

77-
date-current-bg-color: transparent,
78-
7970
label-color: (
80-
igx-contrast-color: ('surface'),
81-
rgba: .4
71+
igx-color: ('grays', 700)
8272
),
8373

8474
weekend-text-color: (
85-
igx-contrast-color: ('surface'),
86-
rgba: .4
75+
igx-color: ('grays', 700)
8776
),
8877

8978
picker-arrow-color: (
@@ -103,23 +92,23 @@ $_dark-indigo-calendar: extend(
10392
),
10493

10594
month-hover-text-color: (
106-
igx-contrast-color: ('surface')
95+
igx-color: ('primary', 300)
10796
),
10897

10998
year-hover-text-color: (
110-
igx-contrast-color: ('surface')
99+
igx-color: ('primary', 300)
111100
),
112101

113102
month-current-text-color: (
114-
igx-contrast-color: ('surface')
103+
igx-color: ('primary', 300)
115104
),
116105

117106
month-hover-current-text-color: (
118-
igx-contrast-color: ('surface')
107+
igx-color: ('primary', 300)
119108
),
120109

121110
year-current-text-color: (
122-
igx-contrast-color: ('surface')
111+
igx-color: ('primary', 300)
123112
)
124113
)
125114
);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,31 @@ $_dark-bootstrap-carousel: extend($_bootstrap-carousel, $_base-dark-carousel);
5151
/// Generates a dark indigo carousel schema based on a mix of $_indigo-carousel and $_base-dark-carousel
5252
/// @type {Map}
5353
/// @prop {Color} slide-background [#222] - The slide background color.
54-
/// @prop {Color} button-background [igx-color: ('grays', 500)] - The previous/next buttons idle background color.
55-
/// @prop {Color} button-hover-background [igx-color: ('grays', 300)] - The previous/next buttons hover background color.
56-
/// @prop {Color} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color.
57-
/// @prop {Color} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color.
54+
/// @prop {Map} button-background [igx-color: ('grays', 400)] - The previous/next buttons idle background color.
55+
/// @prop {Map} button-hover-background [igx-color: ('grays', 200)] - The previous/next buttons hover background color.
56+
/// @prop {Map} button-arrow-color [igx-color: ('grays', 800)] - The previous/next buttons idle arrow color.
57+
/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color.
58+
/// @prop {Map} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color.
59+
/// @prop {Map} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color.
5860
/// @requires {function} extend
5961
/// @requires $_indigo-carousel
60-
/// @requires $_base-dark-carousel
6162
$_dark-indigo-carousel: extend($_indigo-carousel, (
6263
slide-background: #222,
6364

6465
button-background: (
65-
igx-color: ('grays' 500),
66+
igx-color: ('grays' 400),
6667
),
6768

6869
button-hover-background: (
69-
igx-color: ('grays' 300),
70+
igx-color: ('grays' 200),
71+
),
72+
73+
button-arrow-color: (
74+
igx-color: ('grays', 800)
75+
),
76+
77+
button-hover-arrow-color: (
78+
igx-color: ('grays', 900)
7079
),
7180

7281
indicator-dot-color: (

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,24 @@ $_dark-bootstrap-time-picker: extend($_bootstrap-time-picker);
2727

2828
/// Generates a dark indigo time-picker schema.
2929
/// @type {Map}
30-
/// @prop {Map} selected-text-color [igx-contrast-color: ('surface')] - The text color of a selected item in time picker.
31-
/// @prop {Map} hover-text-color [igx-contrast-color: ('surface')] - The hover text color of a open time picker.
30+
/// @prop {Map} text-color [igx-contrast-color: ('surface')] - The text color of an open time picker.
31+
/// @prop {Map} selected-text-color [igx-color: ('primary', 300)] - The text color of a selected item in time picker.
32+
/// @prop {Map} hover-text-color [igx-color: ('primary', 300)] - The hover text color of an open time picker.
3233
/// @requires {function} extend
3334
/// @requires $_indigo-time-picker
3435
$_dark-indigo-time-picker: extend(
3536
$_indigo-time-picker,
3637
(
37-
hover-text-color: (
38+
text-color: (
3839
igx-contrast-color: ('surface')
3940
),
4041

42+
hover-text-color: (
43+
igx-color: ('primary', 300)
44+
),
45+
4146
selected-text-color: (
42-
igx-contrast-color: ('surface')
47+
igx-color: ('primary', 300)
4348
),
4449
)
4550
);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -349,10 +349,16 @@ $_bootstrap-calendar: extend(
349349

350350
/// Generates an indigo calendar schema.
351351
/// @type {Map}
352-
/// @prop {Map} date-current-text-color [igx-color: ('primary', 500)] - The text color for the current date.
352+
/// @prop {Map} content-text-color [igx-color: ('grays', 900)] - The main content text color.
353+
/// @prop {Map} date-current-text-color [igx-color: ('primary', 300)] - The text color for the current date.
353354
/// @prop {Color} date-current-bg-color [transparent] - The background color for the current date.
354355
/// @prop {Map} date-selected-background [igx-color: ('primary', 500)] - The background color for the selected date.
355356
/// @prop {Map} date-selected-text-color [igx-contrast-color: ('primary', 500)] - The text color for the selected date.
357+
/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 300)] - The text color for disabled dates.
358+
/// @prop {Map} inactive-text-color [igx-color: ('grays', 600)] - The text color for previous and next month dates.
359+
/// @prop {Map} label-color [igx-color: ('grays', 600)] - The text color for weekday labels.
360+
/// @prop {Map} weekend-text-color [igx-color: ('grays', 600)] - The text color for weekend days.
361+
/// @prop {Color} month-hover-background [transparent] - The month hover text color.
356362
/// @prop {Map} month-hover-text-color [igx-color: ('primary', 500)] - The month hover text color.
357363
///
358364
/// @prop {Number} border-radius [3px] - The border radius used for calendar.
@@ -366,8 +372,12 @@ $_indigo-calendar: extend(
366372
(
367373
variant: 'indigo-design',
368374

375+
content-text-color: (
376+
igx-color: ('grays', 900)
377+
),
378+
369379
date-current-text-color: (
370-
igx-color: ('primary', 500)
380+
igx-color: ('primary', 300)
371381
),
372382

373383
date-current-bg-color: transparent,
@@ -380,6 +390,24 @@ $_indigo-calendar: extend(
380390
igx-contrast-color: ('primary', 500)
381391
),
382392

393+
date-disabled-text-color: (
394+
igx-color: ('grays', 300),
395+
),
396+
397+
inactive-text-color: (
398+
igx-color: ('grays', 600)
399+
),
400+
401+
label-color: (
402+
igx-color: ('grays', 600)
403+
),
404+
405+
weekend-text-color: (
406+
igx-color: ('grays', 600)
407+
),
408+
409+
month-hover-background: transparent,
410+
383411
month-hover-text-color: (
384412
igx-color: ('primary', 500)
385413
),

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ $_light-carousel: extend(
5959
/// @type {Map}
6060
/// @requires {function} extend
6161
/// @requires {Map} $_light-carousel
62+
/// @see $default-palette
6263
$_fluent-carousel: extend(
6364
$_light-carousel,
6465
$_square-shape-carousel,
@@ -72,23 +73,33 @@ $_fluent-carousel: extend(
7273
$_bootstrap-carousel: extend(
7374
$_light-carousel,
7475
$_bootstrap-shape-carousel,
75-
$_fluent-elevation-carousel, (
76+
$_bootstrap-elevation-carousel, (
7677
variant: 'bootstrap'
7778
)
7879
);
7980

8081
/// Generates an indigo carousel schema.
8182
/// @type {Map}
83+
/// @prop {Map} button-background [igx-color: 'surface', rgba: .4] - The previous/next buttons idle background color.
84+
/// @prop {Map} button-hover-background [igx-color: 'surface', rgba: .65] - The previous/next buttons hover background color.
85+
/// @prop {Color} button-disabled-background [transparent] - The previous/next buttons disabled background color.
86+
/// @prop {Map} button-arrow-color [igx-color: ('grays', 600)] - The previous/next buttons idle arrow color.
87+
/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons hover arrow color.
88+
/// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400)] - The previous/next buttons disabled color.
89+
/// @prop {Map} indicator-dot-color [igx-color: 'surface', rgba: .6] - The idle indicator dot color.
90+
/// @prop {Map} indicator-active-dot-color [igx-color: 'surface'] - The active indicator dot color.
91+
/// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for carousel.
92+
///
8293
/// @requires {function} extend
8394
/// @requires {Map} $_light-carousel
8495
$_indigo-carousel: extend(
8596
$_light-carousel,
86-
$_square-shape-carousel,
97+
$_default-shape-carousel,
8798
$_indigo-elevation-carousel, (
8899
variant: 'indigo-design',
89100

90101
button-background: (
91-
igx-color: #fff,
102+
igx-color: 'surface',
92103
rgba: .4
93104
),
94105

@@ -97,7 +108,7 @@ $_indigo-carousel: extend(
97108
),
98109

99110
button-hover-background: (
100-
igx-color: #fff,
111+
igx-color: 'surface',
101112
rgba: .65,
102113
),
103114

@@ -112,11 +123,13 @@ $_indigo-carousel: extend(
112123
),
113124

114125
indicator-dot-color: (
115-
igx-color: #fff,
126+
igx-color: 'surface',
116127
rgba: .6
117128
),
118129

119-
indicator-active-dot-color: #fff,
130+
indicator-active-dot-color:(
131+
igx-color: 'surface'
132+
),
120133
)
121134
);
122135

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ $_bootstrap-time-picker: extend(
121121
/// @type {Map}
122122
/// @prop {Map} text-color [igx-color: ('grays', 700)] - The text color of an open time picker.
123123
/// @prop {Map} selected-text-color [igx-color: ('primary', 500)] - The text color of a selected item in time picker.
124-
/// @prop {Map} hover-text-color [igx-color: ('primary', 500)] - The hover text color of a open time picker.
124+
/// @prop {Map} hover-text-color [igx-color: ('primary', 500)] - The hover text color of an open time picker.
125125
/// @prop {Map} header-background [igx-color: ('primary', 500)] - The header background color of a time picker.
126126
/// @prop {Map} header-hour-text-color [igx-contrast-color: ('primary', 500)] - The header hour text color of a time picker.
127127
/// @prop {Map} header-time-period-color [igx-contrast-color: ('primary', 500)] - The header AM/PM text color of a time picker.

0 commit comments

Comments
 (0)