Skip to content

Commit 99151c1

Browse files
didimmovadidimmova
authored
feat(icon-button): improve icon-button themes (#15737)
1 parent 2189c67 commit 99151c1

File tree

5 files changed

+636
-35
lines changed

5 files changed

+636
-35
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
@use 'sass:map';
2+
@use '../../base' as *;
3+
@use '../../themes/schemas' as *;
4+
5+
@function contained-icon-button-theme(
6+
$schema: $light-material-schema,
7+
8+
$background: null,
9+
$foreground: null,
10+
$shadow-color: null,
11+
12+
$hover-background: null,
13+
$hover-foreground: null,
14+
15+
$focus-background: null,
16+
$focus-foreground: null,
17+
18+
$focus-hover-background: null,
19+
$focus-hover-foreground: null,
20+
21+
$active-background: null,
22+
$active-foreground: null,
23+
24+
$border-radius: null,
25+
$border-color: null,
26+
$focus-border-color: null,
27+
28+
$disabled-background: null,
29+
$disabled-foreground: null,
30+
$disabled-border-color: null,
31+
32+
$size: null,
33+
) {
34+
$name: 'igx-contained-icon-button';
35+
$icon-button-schema: ();
36+
37+
@if map.has-key($schema, 'icon-button') {
38+
$icon-button-schema: map.get($schema, 'icon-button');
39+
@if map.has-key($icon-button-schema, 'contained') {
40+
$icon-button-schema: map.get($icon-button-schema, 'contained');
41+
} @else {
42+
$icon-button-schema: $schema;
43+
}
44+
}
45+
46+
$theme: digest-schema($icon-button-schema);
47+
$variant: map.get($schema, '_meta', 'theme');
48+
49+
@if $variant == 'indigo' {
50+
@if not($foreground) and $background {
51+
$foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
52+
}
53+
54+
@if not($hover-background) and $background {
55+
$hover-background: hsl(from var(--background) h s calc(l * 1.1));
56+
}
57+
58+
@if not($focus-background) and $background {
59+
$focus-background: var(--background);
60+
}
61+
62+
@if not($focus-foreground) and $foreground {
63+
$focus-foreground: var(--foreground);
64+
}
65+
66+
@if not($focus-hover-background) and $focus-background {
67+
$focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1));
68+
}
69+
70+
@if not($active-background) and $background {
71+
$active-background: hsl(from var(--background) h s calc(l * 1.1));
72+
}
73+
} @else {
74+
@if not($foreground) and $background {
75+
$foreground: hsla(from adaptive-contrast(var(--background)) h s l / 1);
76+
}
77+
78+
@if not($hover-background) and $background {
79+
$hover-background: hsl(from var(--background) h s calc(l * 0.9));
80+
}
81+
82+
@if not($focus-background) and $background {
83+
@if $variant == 'fluent' or $variant == 'bootstrap' {
84+
$focus-background: var(--background);
85+
} @else {
86+
$focus-background: hsl(from var(--background) h s calc(l * 0.8));
87+
}
88+
}
89+
90+
@if not($focus-foreground) and $focus-background {
91+
$focus-foreground: hsla(from adaptive-contrast(var(--focus-background)) h s l / 1);
92+
}
93+
94+
@if not($focus-hover-background) and $focus-background {
95+
$focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
96+
}
97+
98+
@if not($active-background) and $background {
99+
$active-background: hsl(from var(--background) h s calc(l * 0.8));
100+
}
101+
}
102+
103+
@if not($hover-foreground) and $hover-background {
104+
$hover-foreground: hsla(from adaptive-contrast(var(--hover-background)) h s l / 1);
105+
}
106+
107+
@if not($focus-hover-foreground) and $focus-hover-background {
108+
$focus-hover-foreground: hsla(from adaptive-contrast(var(--focus-hover-background)) h s l / 1);
109+
}
110+
111+
@if not($active-foreground) and $active-background {
112+
$active-foreground: hsla(from adaptive-contrast(var(--active-background)) h s l / 1);
113+
}
114+
115+
@if not($shadow-color) and $focus-background {
116+
$shadow-color: hsla(from var(--focus-background) h s l / 0.5);
117+
}
118+
119+
@if $variant == 'fluent' {
120+
@if not($focus-border-color) and $foreground {
121+
$focus-border-color: var(--foreground);
122+
}
123+
} @else {
124+
@if not($focus-border-color) and $border-color {
125+
$focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
126+
}
127+
}
128+
129+
@if $variant == 'indigo' {
130+
@if not($disabled-background) and $background {
131+
$disabled-background: hsla(from var(--background) h s l / 0.4);
132+
}
133+
134+
@if not($disabled-foreground) and $foreground {
135+
$disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
136+
}
137+
138+
@if not($focus-border-color) and $focus-background {
139+
$focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
140+
}
141+
} @else {
142+
@if not($disabled-background) and $background {
143+
$disabled-background: hsla(from var(--background) h s l / 0.2);
144+
}
145+
146+
@if not($disabled-foreground) and $disabled-background {
147+
$disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7);
148+
}
149+
}
150+
151+
@return extend(
152+
$theme,
153+
(
154+
name: $name,
155+
background: $background,
156+
foreground: $foreground,
157+
shadow-color: $shadow-color,
158+
159+
hover-background: $hover-background,
160+
hover-foreground: $hover-foreground,
161+
162+
focus-background: $focus-background,
163+
focus-foreground: $focus-foreground,
164+
165+
focus-hover-background: $focus-hover-background,
166+
focus-hover-foreground: $focus-hover-foreground,
167+
168+
active-background: $active-background,
169+
active-foreground: $active-foreground,
170+
171+
border-radius: $border-radius,
172+
border-color: $border-color,
173+
focus-border-color: $focus-border-color,
174+
175+
disabled-background: $disabled-background,
176+
disabled-foreground: $disabled-foreground,
177+
disabled-border-color: $disabled-border-color,
178+
size: $size,
179+
));
180+
}

‎projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
@use 'sass:map';
2+
@use '../../base' as *;
3+
@use '../../themes/schemas' as *;
4+
5+
@function flat-icon-button-theme(
6+
$schema: $light-material-schema,
7+
8+
$background: null,
9+
$foreground: null,
10+
$shadow-color: null,
11+
12+
$hover-background: null,
13+
$hover-foreground: null,
14+
15+
$focus-background: null,
16+
$focus-foreground: null,
17+
18+
$focus-hover-background: null,
19+
$focus-hover-foreground: null,
20+
21+
$active-background: null,
22+
$active-foreground: null,
23+
24+
$border-radius: null,
25+
$border-color: null,
26+
$focus-border-color: null,
27+
28+
$disabled-background: null,
29+
$disabled-foreground: null,
30+
$disabled-border-color: null,
31+
32+
$size: null,
33+
) {
34+
$name: 'igx-flat-icon-button';
35+
$icon-button-schema: ();
36+
37+
@if map.has-key($schema, 'icon-button') {
38+
$icon-button-schema: map.get($schema, 'icon-button');
39+
@if map.has-key($icon-button-schema, 'flat') {
40+
$icon-button-schema: map.get($icon-button-schema, 'flat');
41+
} @else {
42+
$icon-button-schema: $schema;
43+
}
44+
}
45+
46+
$theme: digest-schema($icon-button-schema);
47+
$variant: map.get($schema, '_meta', 'theme');
48+
49+
@if $variant == 'material' or $variant == 'fluent' {
50+
@if not($hover-foreground) and $foreground {
51+
$hover-foreground: var(--foreground);
52+
}
53+
54+
@if not($focus-foreground) and $foreground {
55+
$focus-foreground: var(--foreground);
56+
}
57+
58+
@if not($focus-hover-foreground) and $foreground {
59+
$focus-hover-foreground: var(--foreground);
60+
}
61+
62+
@if not($active-foreground) and $foreground {
63+
$active-foreground: var(--foreground);
64+
}
65+
66+
@if not($hover-background) and $foreground {
67+
$hover-background: hsla(from var(--foreground) h s l / 0.08);
68+
}
69+
70+
@if $variant == 'material' {
71+
@if not($focus-background) and $foreground {
72+
$focus-background: hsla(from var(--foreground) h s l / 0.16);
73+
}
74+
75+
@if not($focus-hover-background) and $foreground {
76+
$focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
77+
}
78+
} @else {
79+
@if not($focus-hover-background) and $hover-background {
80+
$focus-hover-background: var(--hover-background);
81+
}
82+
}
83+
84+
@if not($active-background) and $foreground {
85+
$active-background: hsla(from var(--foreground) h s l / 0.24);
86+
}
87+
}
88+
89+
@if $variant == 'indigo' {
90+
@if not($hover-background) and $foreground {
91+
$hover-background: hsla(from var(--foreground) h s l / 0.15);
92+
}
93+
94+
@if not($focus-background) and $foreground {
95+
$focus-background: hsla(from var(--foreground) h s l / 0.15);
96+
}
97+
98+
@if not($focus-hover-background) and $foreground {
99+
$focus-hover-background: hsla(from var(--foreground) h s l / 0.15);
100+
}
101+
102+
@if not($active-background) and $foreground {
103+
$active-background: hsla(from var(--foreground) h s l / 0.15);
104+
}
105+
}
106+
107+
@if $variant == 'bootstrap'or $variant == 'indigo' {
108+
@if not($hover-foreground) and $foreground {
109+
$hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
110+
}
111+
112+
@if not($focus-foreground) and $foreground {
113+
$focus-foreground: var(--foreground);
114+
}
115+
116+
@if not($focus-hover-foreground) and $hover-foreground {
117+
$focus-hover-foreground: var(--hover-foreground);
118+
}
119+
120+
@if $variant == 'bootstrap' {
121+
@if not($active-foreground) and $foreground {
122+
$active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
123+
}
124+
125+
@if not($shadow-color) and $foreground {
126+
$shadow-color: hsla(from var(--foreground) h s l / 0.5);
127+
}
128+
} @else {
129+
@if not($active-foreground) and $hover-foreground {
130+
$active-foreground: var(--hover-foreground);
131+
}
132+
133+
@if not($focus-border-color) and $foreground {
134+
$focus-border-color: hsla(from var(--foreground) h s l / 0.3);
135+
}
136+
}
137+
}
138+
139+
@if not($disabled-foreground) and $foreground {
140+
$disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
141+
}
142+
143+
@if $variant == 'fluent' {
144+
@if not($disabled-background) and $foreground {
145+
$disabled-background: hsla(from var(--foreground) h s l / 0.1);
146+
}
147+
}
148+
149+
@return extend(
150+
$theme,
151+
(
152+
name: $name,
153+
background: $background,
154+
foreground: $foreground,
155+
shadow-color: $shadow-color,
156+
157+
hover-background: $hover-background,
158+
hover-foreground: $hover-foreground,
159+
160+
focus-background: $focus-background,
161+
focus-foreground: $focus-foreground,
162+
163+
focus-hover-background: $focus-hover-background,
164+
focus-hover-foreground: $focus-hover-foreground,
165+
166+
active-background: $active-background,
167+
active-foreground: $active-foreground,
168+
169+
border-radius: $border-radius,
170+
border-color: $border-color,
171+
focus-border-color: $focus-border-color,
172+
173+
disabled-background: $disabled-background,
174+
disabled-foreground: $disabled-foreground,
175+
disabled-border-color: $disabled-border-color,
176+
size: $size,
177+
));
178+
}

0 commit comments

Comments
 (0)