Skip to content

Commit 68f865f

Browse files
simeonoffsimeonoff
committed
feat(themes): add global elevation and roundess params
1 parent 03daa14 commit 68f865f

File tree

3 files changed

+147
-33
lines changed

3 files changed

+147
-33
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
/// @param {Color} $item-hover-text-color [null] - The item's hover text color.
2222
/// @param {Color} $item-hover-icon-color [null] - The item's hover icon color.
2323
/// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer.
24-
/// @param {border-radius} border-radius [null] - The border radius used for the navdrawer.
25-
/// @param {border-radius} item-border-radius [null] - The border radius used for the navdrawer item.
24+
/// @param {border-radius} $border-radius [null] - The border radius used for the navdrawer.
25+
/// @param {border-radius} $item-border-radius [null] - The border radius used for the navdrawer item.
2626
///
2727
/// @requires $default-palette
2828
/// @requires $light-schema

‎projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
/// @param {box-shadow} $hover-shadow [null] - The shadow used for the thumb in hover state of the switch.
2525
/// @param {box-shadow} $disabled-shadow [null] - The shadow used for the thumb in disable state of the switch.
2626
///
27-
/// @param {border-radius} border-radius-track [null] - The border radius used for switch track.
28-
/// @param {border-radius} border-radius-thumb [null] - The border radius used for switch thumb.
29-
/// @param {border-radius} border-radius-ripple [null] - The border radius used for switch ripple.
27+
/// @param {border-radius} $border-radius-track [null] - The border radius used for switch track.
28+
/// @param {border-radius} $border-radius-thumb [null] - The border radius used for switch thumb.
29+
/// @param {border-radius} $border-radius-ripple [null] - The border radius used for switch ripple.
3030
///
3131
/// @requires $default-palette
3232
/// @requires $light-schema

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss‎

Lines changed: 142 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
5252
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
5353
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
54+
/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
55+
/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
5456
/// @requires {variable} $components
5557
/// @requires {variable} $default-palette
5658
/// @requires {function} is-component
@@ -84,12 +86,13 @@
8486
/// @requires {mixin} igx-tabs
8587
/// @requires {mixin} igx-bottom-nav
8688
/// @requires {mixin} igx-toast
87-
8889
@mixin igx-theme(
8990
$palette,
9091
$schema: $light-schema,
9192
$exclude: (),
92-
$legacy-support: true
93+
$legacy-support: true,
94+
$roundness: null,
95+
$elevation: true,
9396
) {
9497
// Stores all excluded component styles
9598
$excluded: ();
@@ -117,43 +120,87 @@
117120
}
118121

119122
@if not(index($exclude, 'igx-badge')) {
120-
@include igx-badge(igx-badge-theme($palette, $schema));
123+
@include igx-badge(igx-badge-theme(
124+
$palette,
125+
$schema,
126+
$border-radius: $roundness,
127+
));
121128
}
122129

123130
@if not(index($exclude, 'igx-bottom-nav')) {
124131
@include igx-bottom-nav(igx-bottom-nav-theme($palette, $schema));
125132
}
126133

127134
@if not(index($exclude, 'igx-button')) {
128-
@include igx-button(igx-button-theme($palette, $schema));
135+
@include igx-button(igx-button-theme(
136+
$palette,
137+
$schema,
138+
$flat-border-radius: $roundness,
139+
$raised-border-radius: $roundness,
140+
$outlined-border-radius: $roundness,
141+
$fab-border-radius: $roundness,
142+
$icon-border-radius: $roundness,
143+
));
129144
}
130145

131146
@if not(index($exclude, 'igx-button-group')) {
132-
@include igx-button-group(igx-button-group-theme($palette, $schema));
147+
@include igx-button-group(igx-button-group-theme(
148+
$palette,
149+
$schema,
150+
$border-radius: $roundness
151+
));
133152
}
134153

135154
@if not(index($exclude, 'igx-banner')) {
136-
@include igx-banner(igx-banner-theme($palette, $schema));
155+
@include igx-banner(igx-banner-theme(
156+
$palette,
157+
$schema,
158+
));
137159
}
138160

139161
@if not(index($exclude, 'igx-calendar')) {
140-
@include igx-calendar(igx-calendar-theme($palette, $schema));
162+
@include igx-calendar(igx-calendar-theme(
163+
$palette,
164+
$schema,
165+
$border-radius: $roundness,
166+
$date-border-radius: $roundness,
167+
$month-border-radius: $roundness,
168+
));
141169
}
142170

143171
@if not(index($exclude, 'igx-card')) {
144-
@include igx-card(igx-card-theme($palette, $schema));
172+
@include igx-card(igx-card-theme(
173+
$palette,
174+
$schema,
175+
$border-radius: $roundness,
176+
$resting-shadow: if($elevation == false, 0, null),
177+
$hover-shadow: if($elevation == false, 0, null),
178+
));
145179
}
146180

147181
@if not(index($exclude, 'igx-carousel')) {
148-
@include igx-carousel(igx-carousel-theme($palette, $schema));
182+
@include igx-carousel(igx-carousel-theme(
183+
$palette,
184+
$schema,
185+
$border-radius: $roundness,
186+
));
149187
}
150188

151189
@if not(index($exclude, 'igx-checkbox')) {
152-
@include igx-checkbox(igx-checkbox-theme($palette, $schema));
190+
@include igx-checkbox(igx-checkbox-theme(
191+
$palette,
192+
$schema,
193+
$border-radius: $roundness,
194+
$border-radius-ripple: $roundness,
195+
));
153196
}
154197

155198
@if not(index($exclude, 'igx-chip')) {
156-
@include igx-chip(igx-chip-theme($palette, $schema));
199+
@include igx-chip(igx-chip-theme(
200+
$palette,
201+
$schema,
202+
$border-radius: $roundness,
203+
));
157204
}
158205

159206
@if not(index($exclude, 'igx-column-hiding')) {
@@ -165,27 +212,47 @@
165212
}
166213

167214
@if not(index($exclude, 'igx-date-picker')) {
168-
@include igx-date-picker(igx-calendar-theme($palette, $schema));
215+
@include igx-date-picker(igx-calendar-theme(
216+
$palette,
217+
$schema,
218+
$border-radius: $roundness,
219+
));
169220
}
170221

171222
@if not(index($exclude, 'igx-dialog')) {
172-
@include igx-dialog(igx-dialog-theme($palette, $schema));
223+
@include igx-dialog(igx-dialog-theme(
224+
$palette,
225+
$schema,
226+
$border-radius: $roundness,
227+
));
173228
}
174229

175230
@if not(index($exclude, 'igx-divider')) {
176231
@include igx-divider(igx-divider-theme($palette, $schema));
177232
}
178233

179234
@if not(index($exclude, 'igx-drop-down')) {
180-
@include igx-drop-down(igx-drop-down-theme($palette, $schema));
235+
@include igx-drop-down(igx-drop-down-theme(
236+
$palette,
237+
$schema,
238+
$border-radius: $roundness,
239+
));
181240
}
182241

183242
@if not(index($exclude, 'igx-expansion-panel')) {
184-
@include igx-expansion-panel(igx-expansion-panel-theme($palette, $schema));
243+
@include igx-expansion-panel(igx-expansion-panel-theme(
244+
$palette,
245+
$schema,
246+
$border-radius: $roundness,
247+
));
185248
}
186249

187250
@if not(index($exclude, 'igx-grid')) {
188-
@include igx-grid(igx-grid-theme($palette, $schema));
251+
@include igx-grid(igx-grid-theme(
252+
$palette,
253+
$schema,
254+
$drop-area-border-radius: $roundness,
255+
));
189256
}
190257

191258
@if not(index($exclude, 'igx-grid-summary')) {
@@ -201,19 +268,35 @@
201268
}
202269

203270
@if not(index($exclude, 'igx-input-group')) {
204-
@include igx-input-group(igx-input-group-theme($palette, $schema));
271+
@include igx-input-group(igx-input-group-theme(
272+
$palette,
273+
$schema,
274+
$box-border-radius: $roundness,
275+
$border-border-radius: $roundness,
276+
$search-border-radius: $roundness,
277+
));
205278
}
206279

207280
@if not(index($exclude, 'igx-list')) {
208-
@include igx-list(igx-list-theme($palette, $schema));
281+
@include igx-list(igx-list-theme(
282+
$palette,
283+
$schema,
284+
$border-radius: $roundness,
285+
$item-border-radius: $roundness,
286+
));
209287
}
210288

211289
@if not(index($exclude, 'igx-navbar')) {
212290
@include igx-navbar(igx-navbar-theme($palette, $schema));
213291
}
214292

215293
@if not(index($exclude, 'igx-nav-drawer')) {
216-
@include igx-navdrawer(igx-navdrawer-theme($palette, $schema));
294+
@include igx-navdrawer(igx-navdrawer-theme(
295+
$palette,
296+
$schema,
297+
$border-radius: $roundness,
298+
$item-border-radius: $roundness,
299+
));
217300
}
218301

219302
@if not(index($exclude, 'igx-overlay')) {
@@ -241,27 +324,50 @@
241324
}
242325

243326
@if not(index($exclude, 'igx-snackbar')) {
244-
@include igx-snackbar(igx-snackbar-theme($palette, $schema));
327+
@include igx-snackbar(igx-snackbar-theme(
328+
$palette,
329+
$schema,
330+
$border-radius: $roundness,
331+
));
245332
}
246333

247334
@if not(index($exclude, 'igx-switch')) {
248-
@include igx-switch(igx-switch-theme($palette, $schema));
335+
@include igx-switch(igx-switch-theme(
336+
$palette,
337+
$schema,
338+
$border-radius-track: $roundness,
339+
$border-radius-thumb: $roundness,
340+
$border-radius-ripple: $roundness,
341+
));
249342
}
250343

251344
@if not(index($exclude, 'igx-tabs')) {
252345
@include igx-tabs(igx-tabs-theme($palette, $schema));
253346
}
254347

255348
@if not(index($exclude, 'igx-toast')) {
256-
@include igx-toast(igx-toast-theme($palette, $schema));
349+
@include igx-toast(igx-toast-theme(
350+
$palette,
351+
$schema,
352+
$border-radius: $roundness,
353+
));
257354
}
258355

259356
@if not(index($exclude, 'igx-tooltip')) {
260-
@include igx-tooltip(igx-tooltip-theme($palette, $schema));
357+
@include igx-tooltip(igx-tooltip-theme(
358+
$palette,
359+
$schema,
360+
$border-radius: $roundness,
361+
));
261362
}
262363

263364
@if not(index($exclude, 'igx-time-picker')) {
264-
@include igx-time-picker(igx-time-picker-theme($palette, $schema));
365+
@include igx-time-picker(igx-time-picker-theme(
366+
$palette,
367+
$schema,
368+
$border-radius: $roundness,
369+
$active-item-border-radius: $roundness,
370+
));
265371
}
266372
}
267373

@@ -272,7 +378,9 @@
272378
@mixin igx-light-theme(
273379
$palette,
274380
$exclude: (),
275-
$legacy-support: true
381+
$legacy-support: true,
382+
$roundness: null,
383+
$elevation: true,
276384
) {
277385
$grays: igx-color($palette, 'grays');
278386
$surface: igx-color($palette, 'surface');
@@ -292,7 +400,9 @@
292400
$palette: $light-palette,
293401
$schema: $light-schema,
294402
$legacy-support: $legacy-support,
295-
$exclude: $exclude
403+
$exclude: $exclude,
404+
$roundness: $roundness,
405+
$elevation: $elevation,
296406
);
297407
}
298408

@@ -303,7 +413,9 @@
303413
@mixin igx-dark-theme(
304414
$palette,
305415
$exclude: (),
306-
$legacy-support: true
416+
$legacy-support: true,
417+
$roundness: null,
418+
$elevation: true,
307419
) {
308420
$grays: igx-color($palette, 'grays');
309421
$surface: igx-color($palette, 'surface');
@@ -323,6 +435,8 @@
323435
$palette: $dark-palette,
324436
$schema: $dark-schema,
325437
$legacy-support: $legacy-support,
326-
$exclude: $exclude
438+
$exclude: $exclude,
439+
$roundness: $roundness,
440+
$elevation: $elevation,
327441
);
328442
}

0 commit comments

Comments
 (0)