Skip to content

Commit b94df70

Browse files
simeonoffsimeonoff
authored
refactor(themes): update samples and presets (#15203)
1 parent ab58c9e commit b94df70

File tree

8 files changed

+132
-143
lines changed

8 files changed

+132
-143
lines changed

‎projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'igniteui-theming/sass/color/functions' as *;
2+
@use 'igniteui-theming/sass/color/presets/light/material' as *;
23
@use 'variables' as *;
34
@use 'functions' as *;
45
@use 'sass:color';
@@ -112,7 +113,7 @@
112113
/// $suffix: 'bg'
113114
/// );
114115
/// @requires {mixin} gen-color-class
115-
@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {
116+
@mixin gen-color-classes($prop, $prefix, $suffix) {
116117
@each $name, $color in $palette {
117118
@each $variant, $value in $color {
118119
@if meta.type-of($value) != 'map' {
@@ -140,6 +141,6 @@
140141
/// $suffix: 'bg'
141142
/// );
142143
/// @requires {mixin} gen-color-classes
143-
@mixin color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {
144-
@include gen-color-classes($prop, $prefix, $suffix, $palette);
144+
@mixin color-classes($prop, $suffix: null, $prefix: 'igx') {
145+
@include gen-color-classes($prop, $prefix, $suffix);
145146
}

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -670,16 +670,16 @@
670670
$roundness: null,
671671
$elevation: true,
672672
) {
673-
$gray: color($palette, 'gray');
674-
$surface: color($palette, 'surface');
673+
$gray: color($palette, gray);
674+
$surface: color($palette, surface);
675675

676676
$_light-palette: palette(
677-
$primary: color($palette, 'primary'),
678-
$secondary: color($palette, 'secondary'),
679-
$info: color($palette, 'info'),
680-
$success: color($palette, 'success'),
681-
$warn: color($palette, 'warn'),
682-
$error: color($palette, 'error'),
677+
$primary: color($palette, primary),
678+
$secondary: color($palette, secondary),
679+
$info: color($palette, info),
680+
$success: color($palette, success),
681+
$warn: color($palette, warn),
682+
$error: color($palette, error),
683683
$surface: if($surface != #fff, $surface, #fff),
684684
$gray: if($gray != #9e9e9e, $gray, #000),
685685
);
@@ -704,16 +704,16 @@
704704
$roundness: null,
705705
$elevation: true,
706706
) {
707-
$gray: color($palette, 'gray');
708-
$surface: color($palette, 'surface');
707+
$gray: color($palette, gray);
708+
$surface: color($palette, surface);
709709

710710
$_dark-palette: palette(
711-
$primary: color($palette, 'primary'),
712-
$secondary: color($palette, 'secondary'),
713-
$info: color($palette, 'info'),
714-
$success: color($palette, 'success'),
715-
$warn: color($palette, 'warn'),
716-
$error: color($palette, 'error'),
711+
$primary: color($palette, primary),
712+
$secondary: color($palette, secondary),
713+
$info: color($palette, info),
714+
$success: color($palette, success),
715+
$warn: color($palette, warn),
716+
$error: color($palette, error),
717717
$surface: if($surface != #fff, $surface, #222),
718718
$gray: if($gray != #9e9e9e, $gray, #fff),
719719
);

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
$roundness: null,
2121
$elevation: true,
2222
) {
23-
$primary: color($palette, 'primary');
24-
$secondary: color($palette, 'secondary');
25-
$gray: color($light-bootstrap-palette, 'gray');
26-
$surface: color($light-bootstrap-palette, 'surface');
27-
$info: color($palette, 'info');
28-
$success: color($palette, 'success');
29-
$warn: color($palette, 'warn');
30-
$error: color($palette, 'error');
23+
$primary: color($palette, primary);
24+
$secondary: color($palette, secondary);
25+
$gray: color($light-bootstrap-palette, gray);
26+
$surface: color($light-bootstrap-palette, surface);
27+
$info: color($palette, info);
28+
$success: color($palette, success);
29+
$warn: color($palette, warn);
30+
$error: color($palette, error);
3131

3232
@include theme(
3333
$palette: palette(
@@ -58,14 +58,14 @@
5858
$roundness: null,
5959
$elevation: true,
6060
) {
61-
$primary: color($palette, 'primary');
62-
$secondary: color($palette, 'secondary');
63-
$gray: color($dark-bootstrap-palette, 'gray');
64-
$surface: color($dark-bootstrap-palette, 'surface');
65-
$info: color($palette, 'info');
66-
$success: color($palette, 'success');
67-
$warn: color($palette, 'warn');
68-
$error: color($palette, 'error');
61+
$primary: color($palette, primary);
62+
$secondary: color($palette, secondary);
63+
$gray: color($dark-bootstrap-palette, gray);
64+
$surface: color($dark-bootstrap-palette, surface);
65+
$info: color($palette, info);
66+
$success: color($palette, success);
67+
$warn: color($palette, warn);
68+
$error: color($palette, error);
6969

7070
@include theme(
7171
$palette: palette(

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
$roundness: null,
2121
$elevation: true,
2222
) {
23-
$primary: color($palette, 'primary');
24-
$secondary: color($palette, 'secondary');
25-
$gray: color($light-fluent-palette, 'gray');
26-
$surface: color($light-fluent-palette, 'surface');
27-
$info: color($palette, 'info');
28-
$success: color($palette, 'success');
29-
$warn: color($palette, 'warn');
30-
$error: color($palette, 'error');
23+
$primary: color($palette, primary);
24+
$secondary: color($palette, secondary);
25+
$gray: color($light-fluent-palette, gray);
26+
$surface: color($light-fluent-palette, surface);
27+
$info: color($palette, info);
28+
$success: color($palette, success);
29+
$warn: color($palette, warn);
30+
$error: color($palette, error);
3131

3232
@include theme(
3333
$palette: palette(
@@ -58,14 +58,14 @@
5858
$roundness: null,
5959
$elevation: true,
6060
) {
61-
$primary: color($palette, 'primary');
62-
$secondary: color($palette, 'secondary');
63-
$gray: color($dark-fluent-palette, 'gray');
64-
$surface: color($dark-fluent-palette, 'surface');
65-
$info: color($palette, 'info');
66-
$success: color($palette, 'success');
67-
$warn: color($palette, 'warn');
68-
$error: color($palette, 'error');
61+
$primary: color($palette, primary);
62+
$secondary: color($palette, secondary);
63+
$gray: color($dark-fluent-palette, gray);
64+
$surface: color($dark-fluent-palette, surface);
65+
$info: color($palette, info);
66+
$success: color($palette, success);
67+
$warn: color($palette, warn);
68+
$error: color($palette, error);
6969

7070
@include theme(
7171
$palette: palette(

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@
2121
$roundness: null,
2222
$elevation: true,
2323
) {
24-
$primary: color($palette, 'primary');
25-
$secondary: color($palette, 'secondary');
26-
$gray: color($light-indigo-palette, 'gray');
27-
$surface: color($light-indigo-palette, 'surface');
28-
$info: color($palette, 'info');
29-
$success: color($palette, 'success');
30-
$warn: color($palette, 'warn');
31-
$error: color($palette, 'error');
24+
$primary: color($palette, primary);
25+
$secondary: color($palette, secondary);
26+
$gray: color($light-indigo-palette, gray);
27+
$surface: color($light-indigo-palette, surface);
28+
$info: color($palette, info);
29+
$success: color($palette, success);
30+
$warn: color($palette, warn);
31+
$error: color($palette, error);
3232

3333
@include theme(
3434
$palette: palette(
@@ -60,14 +60,14 @@
6060
$roundness: null,
6161
$elevation: true,
6262
) {
63-
$primary: color($palette, 'primary');
64-
$secondary: color($palette, 'secondary');
65-
$gray: color($dark-indigo-palette, 'gray');
66-
$surface: color($dark-indigo-palette, 'surface');
67-
$info: color($palette, 'info');
68-
$success: color($palette, 'success');
69-
$warn: color($palette, 'warn');
70-
$error: color($palette, 'error');
63+
$primary: color($palette, primary);
64+
$secondary: color($palette, secondary);
65+
$gray: color($dark-indigo-palette, gray);
66+
$surface: color($dark-indigo-palette, surface);
67+
$info: color($palette, info);
68+
$success: color($palette, success);
69+
$warn: color($palette, warn);
70+
$error: color($palette, error);
7171

7272
@include theme(
7373
$palette: palette(

‎src/app/styleguide/colors/color.sample.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,11 @@
5353
}
5454

5555
@include color-classes(
56-
$palette: $palette,
5756
$prop: 'background',
5857
$prefix: 'bg'
5958
);
6059

6160
@include color-classes(
62-
$palette: $palette,
6361
$prop: 'color',
6462
$prefix: 'color'
6563
);

‎src/app/styleguide/shadows/shadows.sample.css‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -34,52 +34,42 @@
3434
font-size: 14px;
3535
}
3636

37-
.elevation-sample.elevate-1 {
38-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 1px 0 rgba(0, 0, 0, .12),
39-
0 2px 1px -1px rgba(0, 0, 0, .08);
37+
.elevate-1 {
38+
box-shadow: var(--ig-elevation-1);
4039
}
4140

42-
.elevation-sample.elevate-2 {
43-
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .26), 0 2px 2px 0 rgba(0, 0, 0, .12),
44-
0 3px 1px -2px rgba(0, 0, 0, .08);
41+
.elevate-2 {
42+
box-shadow: var(--ig-elevation-2);
4543
}
4644

47-
.elevation-sample.elevate-3 {
48-
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .26), 0 3px 4px 0 rgba(0, 0, 0, .12),
49-
0 3px 3px -2px rgba(0, 0, 0, .08);
45+
.elevate-3 {
46+
box-shadow: var(--ig-elevation-3);
5047
}
5148

52-
.elevation-sample.elevate-4 {
53-
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .26),
54-
0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .08);
49+
.elevate-4 {
50+
box-shadow: var(--ig-elevation-4);
5551
}
5652

57-
.elevation-sample.elevate-6 {
58-
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .26),
59-
0 6px 10px 0 rgba(0, 0, 0, .12), 0 1px 18px 0 rgba(0, 0, 0, .08);
53+
.elevate-6 {
54+
box-shadow: var(--ig-elevation-6);
6055
}
6156

62-
.elevation-sample.elevate-8 {
63-
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .26),
64-
0 8px 10px 1px rgba(0, 0, 0, .12), 0 3px 14px 2px rgba(0, 0, 0, .08);
57+
.elevate-8 {
58+
box-shadow: var(--ig-elevation-8);
6559
}
6660

67-
.elevation-sample.elevate-9 {
68-
box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .26),
69-
0 9px 12px 1px rgba(0, 0, 0, .12), 0 3px 16px 2px rgba(0, 0, 0, .08);
61+
.elevate-9 {
62+
box-shadow: var(--ig-elevation-9);
7063
}
7164

72-
.elevation-sample.elevate-12 {
73-
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .26),
74-
0 12px 17px 2px rgba(0, 0, 0, .12), 0 5px 22px 4px rgba(0, 0, 0, .08);
65+
.elevate-12 {
66+
box-shadow: var(--ig-elevation-12);
7567
}
7668

77-
.elevation-sample.elevate-16 {
78-
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .26),
79-
0 16px 24px 2px rgba(0, 0, 0, .12), 0 6px 30px 5px rgba(0, 0, 0, .08);
69+
.elevate-16 {
70+
box-shadow: var(--ig-elevation-16);
8071
}
8172

82-
.elevation-sample.elevate-24 {
83-
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .26),
84-
0 24px 38px 3px rgba(0, 0, 0, .12), 0 9px 46px 8px rgba(0, 0, 0, .08);
73+
.elevate-24 {
74+
box-shadow: var(--ig-elevation-24);
8575
}

0 commit comments

Comments
 (0)