Skip to content

Commit a0b7ec0

Browse files
SisIvanovaSisIvanova
authored
feat(badge): design enhancement (#16396)
1 parent 4ef47d6 commit a0b7ec0

File tree

7 files changed

+115
-17
lines changed

7 files changed

+115
-17
lines changed

‎projects/igniteui-angular/src/lib/badge/themes/_base.scss‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,13 @@ $theme: $material;
99

1010
@include layer(base) {
1111
@include b(igx-badge) {
12-
--size: #{rem(22px)};
13-
--_badge-size: var(--size);
14-
--igx-icon-size: calc(var(--_badge-size) / 2);
12+
@include sizable();
13+
14+
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
15+
--badge-size: var(--component-size);
16+
--_badge-size: #{var-get($theme, 'size')};
17+
18+
--igx-icon-size: #{sizable(rem(12px), rem(14px), rem(16px))};
1519
--igx-icon-color: #{var-get($theme, 'icon-color')};
1620

1721
display: inline-flex;
@@ -24,40 +28,60 @@ $theme: $material;
2428
border-radius: calc(var(--size) / 2);
2529
box-shadow: var-get($theme, 'elevation');
2630
overflow: hidden;
27-
28-
@include type-style(caption) {
29-
margin: 0;
30-
}
31+
font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
32+
font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
33+
line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
34+
letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
35+
text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
3136

3237
@include e(value) {
3338
white-space: nowrap;
34-
padding-inline: rem(4px);
39+
padding-inline: pad-inline(rem(4px), rem(6px), rem(8px));
3540
}
3641

3742
@include m(info) {
38-
background: color($color: 'info');
43+
background: color($color: 'info', $variant: 800);
3944
}
4045

4146
@include m(success) {
42-
background: color($color: 'success');
47+
background: color($color: 'success', $variant: 900);
4348
}
4449

4550
@include m(warning) {
4651
background: color($color: 'warn');
52+
color: contrast-color($color: 'warn', $variant: 500);
53+
54+
igx-icon {
55+
color: contrast-color($color: 'warn', $variant: 500);
56+
}
4757
}
4858

4959
@include m(error) {
50-
background: color($color: 'error');
60+
background: color($color: 'error', $variant: 700);
61+
color: contrast-color($color: 'error', $variant: 900);
5162
}
5263

5364
@include m(outlined) {
54-
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
65+
box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
5566
}
5667

5768
@include m(square) {
5869
border-radius: var-get($theme, 'border-radius');
5970
}
6071

72+
@include m(dot) {
73+
--_dot-size: #{var-get($theme, 'dot-size')};
74+
75+
min-width: var(--_dot-size);
76+
min-height: var(--_dot-size);
77+
padding: 0;
78+
79+
igx-icon,
80+
> * {
81+
display: none;
82+
}
83+
}
84+
6185
@include m(hidden) {
6286
visibility: hidden;
6387
}

‎projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:meta';
22
@use 'tokens';
33
@use 'styles/themes/standalone' as *;
4+
@use 'indigo';
45

56
$tokens: meta.module-variables(tokens);
67
@include themes(igx-badge, $tokens, dark);

‎projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/color/functions' as *;
3+
@use 'styles/themes/standalone' as *;
4+
@use '../light/tokens' as *;
5+
6+
@include themed-block(igx-badge, indigo, dark) {
7+
@include m(warning) {
8+
color: color($color: 'gray', $variant: 50);
9+
10+
igx-icon {
11+
color: color($color: 'gray', $variant: 50);
12+
}
13+
}
14+
}

‎projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@forward 'bootstrap';
22
@forward 'indigo';
3+
@forward 'fluent';

‎projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
@use 'igniteui-theming/sass/bem' as *;
22
@use 'igniteui-theming/sass/typography' as *;
33
@use 'igniteui-theming/sass/themes/functions' as *;
4+
@use 'igniteui-theming/sass/color/functions' as *;
45
@use 'styles/themes/standalone' as *;
56
@use '../light/tokens' as *;
67

78
$_theme: $bootstrap;
89

910
@include themed-block(igx-badge, bootstrap) {
10-
@include m(outlined) {
11-
box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color');
11+
@include m(success) {
12+
background: color($color: 'success', $variant: 500);
13+
}
14+
15+
@include m(info) {
16+
background: color($color: 'info', $variant: 500);
17+
}
18+
19+
@include m(error) {
20+
background: color($color: 'error', $variant: 500);
21+
color: contrast-color($color: 'error', $variant: 100);
1222
}
1323
}

‎projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/typography' as *;
3+
@use 'igniteui-theming/sass/themes/functions' as *;
4+
@use 'igniteui-theming/sass/color/functions' as *;
5+
@use 'styles/themes/standalone' as *;
6+
@use '../light/tokens' as *;
7+
8+
$_theme: $fluent;
9+
10+
@include themed-block(igx-badge, fluent) {
11+
@include m(success) {
12+
background: color($color: 'success', $variant: 500);
13+
}
14+
15+
@include m(info) {
16+
background: color($color: 'info', $variant: 700);
17+
}
18+
19+
@include m(error) {
20+
background: color($color: 'error', $variant: 500);
21+
}
22+
}

‎projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
11
@use 'igniteui-theming/sass/bem' as *;
22
@use 'igniteui-theming/sass/typography' as *;
33
@use 'igniteui-theming/sass/themes/functions' as *;
4+
@use 'igniteui-theming/sass/color/functions' as *;
45
@use 'styles/themes/standalone' as *;
56
@use '../light/tokens' as *;
67

78
@include themed-block(igx-badge, indigo) {
8-
--igx-icon-size: #{rem(12px)};
9+
--igx-icon-size: #{sizable(rem(8px), rem(10px), rem(12px))};
910

10-
@include type-style(button) {
11-
margin: 0;
11+
@include type-style('button', false) {
12+
font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
13+
line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
14+
}
15+
16+
@include e(value) {
17+
padding-inline: pad-inline(rem(4px), rem(6px), rem(6px));
18+
}
19+
20+
@include m(success) {
21+
background: color($color: 'success', $variant: 700);
22+
}
23+
24+
@include m(info) {
25+
background: color($color: 'info', $variant: 500);
26+
}
27+
28+
@include m(error) {
29+
background: color($color: 'error', $variant: 500);
30+
}
31+
32+
@include m(warning) {
33+
color: color($color: 'gray', $variant: 900);
34+
35+
igx-icon {
36+
color: color($color: 'gray', $variant: 900);
37+
}
1238
}
1339
}

0 commit comments

Comments
 (0)