Skip to content

Commit 9c3a013

Browse files
didimmovadidimmova
committed
feat(themes): update button themes and remove alpha where it's 1
1 parent a209805 commit 9c3a013

File tree

11 files changed

+142
-40
lines changed

11 files changed

+142
-40
lines changed

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

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,30 @@
115115
$theme: digest-schema($button-schema);
116116
$variant: map.get($schema, '_meta', 'theme');
117117

118+
@if not($hover-foreground) and $foreground {
119+
$hover-foreground: var(--foreground);
120+
}
121+
122+
@if not($focus-foreground) and $foreground {
123+
$focus-foreground: var(--foreground);
124+
}
125+
126+
@if not($focus-hover-foreground) and $foreground {
127+
$focus-hover-foreground: var(--foreground);
128+
}
129+
130+
@if not($focus-visible-foreground) and $foreground {
131+
$focus-visible-foreground: var(--foreground);
132+
}
133+
134+
@if not($active-foreground) and $foreground {
135+
$active-foreground: var(--foreground);
136+
}
137+
138+
@if not($icon-color-hover) and $icon-color {
139+
$icon-color-hover: var(--icon-color);
140+
}
141+
118142
@if not($foreground) and $background {
119143
$foreground: adaptive-contrast(var(--background));
120144
}
@@ -144,49 +168,31 @@
144168
}
145169

146170
@if not($hover-foreground) and $hover-background {
147-
$hover-foreground: if(
148-
$foreground,
149-
var(--foreground),
150-
adaptive-contrast(var(--hover-background))
151-
);
171+
$hover-foreground: adaptive-contrast(var(--hover-background));
152172
}
153173

154174
@if not($icon-color-hover) and $hover-background {
155-
$icon-color-hover: if(
156-
$icon-color,
157-
var(--icon-color),
158-
adaptive-contrast(var(--hover-background))
159-
);
175+
$icon-color-hover: adaptive-contrast(var(--hover-background));
160176
}
161177

162178
@if not($focus-foreground) and $focus-background {
163-
$focus-foreground: if(
164-
$foreground,
165-
var(--foreground),
166-
adaptive-contrast(var(--focus-background))
167-
);
179+
$focus-foreground: adaptive-contrast(var(--focus-background));
168180
}
169181

170182
@if not($focus-hover-background) and $hover-background {
171183
$focus-hover-background: var(--hover-background);
172184
}
173185

174186
@if not($focus-hover-foreground) and $focus-hover-background {
175-
$focus-hover-foreground: if(
176-
$foreground,
177-
var(--foreground),
178-
adaptive-contrast(var(--focus-hover-background))
179-
);
187+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
180188
}
181189

182190
@if not($focus-visible-background) and $focus-background {
183191
$focus-visible-background: var(--focus-background);
184192
}
185193

186194
@if not($focus-visible-foreground) and $focus-visible-background {
187-
$focus-visible-foreground: adaptive-contrast(
188-
var(--focus-visible-background)
189-
);
195+
$focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
190196
}
191197

192198
@if $variant == 'fluent' {

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,34 @@
115115
$theme: digest-schema($button-schema);
116116
$variant: map.get($schema, '_meta', 'theme');
117117

118+
@if not($hover-foreground) and $hover-background {
119+
$hover-foreground: adaptive-contrast(var(--hover-background));
120+
}
121+
122+
@if not($icon-color-hover) and $hover-foreground {
123+
$icon-color-hover: var(--hover-foreground);
124+
}
125+
126+
@if not($focus-foreground) and $focus-background {
127+
$focus-foreground: adaptive-contrast(var(--focus-background));
128+
}
129+
130+
@if not($focus-hover-foreground) and $focus-hover-background {
131+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
132+
}
133+
134+
@if not($focus-visible-background) and $focus-background {
135+
$focus-visible-background: var(--focus-background);
136+
}
137+
138+
@if not($focus-visible-foreground) and $focus-visible-background {
139+
$focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
140+
}
141+
142+
@if not($focus-visible-border-color) and $focus-border-color {
143+
$focus-visible-border-color: var(--focus-border-color);
144+
}
145+
118146
@if $variant == 'material' or $variant == 'fluent' {
119147
@if not($hover-background) and $foreground {
120148
$hover-background: hsla(from var(--foreground) h s l / 0.08);

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,34 @@
114114
$theme: digest-schema($button-schema);
115115
$variant: map.get($schema, '_meta', 'theme');
116116

117+
@if not($hover-foreground) and $hover-background {
118+
$hover-foreground: adaptive-contrast(var(--hover-background));
119+
}
120+
121+
@if not($icon-color-hover) and $hover-foreground {
122+
$icon-color-hover: var(--hover-foreground);
123+
}
124+
125+
@if not($focus-foreground) and $focus-background {
126+
$focus-foreground: adaptive-contrast(var(--focus-background));
127+
}
128+
129+
@if not($focus-hover-foreground) and $focus-hover-background {
130+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
131+
}
132+
133+
@if not($focus-visible-background) and $focus-background {
134+
$focus-visible-background: var(--focus-background);
135+
}
136+
137+
@if not($focus-visible-foreground) and $focus-visible-background {
138+
$focus-visible-foreground: adaptive-contrast(var(--focus-visible-foreground));
139+
}
140+
141+
@if not($focus-visible-border-color) and $focus-border-color {
142+
$focus-visible-border-color: var(--focus-border-color);
143+
}
144+
117145
@if $variant == 'material' or $variant == 'fluent' {
118146
@if not($hover-background) and $foreground {
119147
$hover-background: hsla(from var(--foreground) h s l / 0.08);

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -769,19 +769,19 @@
769769
}
770770

771771
@if not($ym-current-foreground) and $ym-current-background {
772-
$ym-current-foreground: hsla(from adaptive-contrast(var(--ym-current-background) h s l / 1));
772+
$ym-current-foreground: adaptive-contrast(var(--ym-current-background));
773773
}
774774

775775
@if not($ym-current-hover-foreground) and $ym-current-hover-background {
776-
$ym-current-hover-foreground: hsla(from adaptive-contrast(var(--ym-current-hover-background) h s l / 1));
776+
$ym-current-hover-foreground: adaptive-contrast(var(--ym-current-hover-background));
777777
}
778778

779779
@if not($ym-selected-current-foreground) and $ym-selected-current-background {
780-
$ym-selected-current-foreground: hsla(from adaptive-contrast($ym-selected-current-background) h s l / 1);
780+
$ym-selected-current-foreground: adaptive-contrast(var(--ym-selected-current-background));
781781
}
782782

783783
@if not($ym-selected-current-hover-foreground) and $ym-selected-current-hover-background {
784-
$ym-selected-current-hover-foreground: hsla(from adaptive-contrast($ym-selected-current-hover-background) h s l / 1);
784+
$ym-selected-current-hover-foreground: adaptive-contrast(var(--ym-selected-current-hover-background));
785785
}
786786
//calendar views end
787787

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,22 @@
4646
$theme: digest-schema($icon-button-schema);
4747
$variant: map.get($schema, '_meta', 'theme');
4848

49+
@if not($hover-foreground) and $foreground {
50+
$hover-foreground: var(--foreground);
51+
}
52+
53+
@if not($focus-foreground) and $foreground {
54+
$focus-foreground: var(--foreground);
55+
}
56+
57+
@if not($focus-hover-foreground) and $foreground {
58+
$focus-hover-foreground: var(--foreground);
59+
}
60+
61+
@if not($active-foreground) and $foreground {
62+
$active-foreground: var(--foreground);
63+
}
64+
4965
@if $variant == 'indigo' {
5066
@if not($foreground) and $background {
5167
$foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
@@ -72,7 +88,7 @@
7288
}
7389
} @else {
7490
@if not($foreground) and $background {
75-
$foreground: hsla(from adaptive-contrast(var(--background)) h s l / 1);
91+
$foreground: adaptive-contrast(var(--background));
7692
}
7793

7894
@if not($hover-background) and $background {
@@ -88,7 +104,7 @@
88104
}
89105

90106
@if not($focus-foreground) and $focus-background {
91-
$focus-foreground: hsla(from adaptive-contrast(var(--focus-background)) h s l / 1);
107+
$focus-foreground: adaptive-contrast(var(--focus-background));
92108
}
93109

94110
@if not($focus-hover-background) and $focus-background {
@@ -101,15 +117,15 @@
101117
}
102118

103119
@if not($hover-foreground) and $hover-background {
104-
$hover-foreground: hsla(from adaptive-contrast(var(--hover-background)) h s l / 1);
120+
$hover-foreground: adaptive-contrast(var(--hover-background));
105121
}
106122

107123
@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);
124+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
109125
}
110126

111127
@if not($active-foreground) and $active-background {
112-
$active-foreground: hsla(from adaptive-contrast(var(--active-background)) h s l / 1);
128+
$active-foreground: adaptive-contrast(var(--active-background));
113129
}
114130

115131
@if not($shadow-color) and $focus-background {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@
4646
$theme: digest-schema($icon-button-schema);
4747
$variant: map.get($schema, '_meta', 'theme');
4848

49+
@if not($hover-foreground) and $hover-background {
50+
$hover-foreground: adaptive-contrast(var(--hover-background));
51+
}
52+
53+
@if not($focus-foreground) and $focus-background {
54+
$focus-foreground: adaptive-contrast(var(--focus-background));
55+
}
56+
57+
@if not($focus-hover-foreground) and $focus-hover-background {
58+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
59+
}
60+
4961
@if $variant == 'material' or $variant == 'fluent' {
5062
@if not($hover-foreground) and $foreground {
5163
$hover-foreground: var(--foreground);

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@
4646
$theme: digest-schema($icon-button-schema);
4747
$variant: map.get($schema, '_meta', 'theme');
4848

49+
@if not($hover-foreground) and $hover-background {
50+
$hover-foreground: adaptive-contrast(var(--hover-background));
51+
}
52+
53+
@if not($focus-foreground) and $focus-background {
54+
$focus-foreground: adaptive-contrast(var(--focus-background));
55+
}
56+
57+
@if not($focus-hover-foreground) and $focus-hover-background {
58+
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
59+
}
60+
4961
@if $variant == 'material' or $variant == 'fluent' {
5062
@if not($hover-foreground) and $foreground {
5163
$hover-foreground: var(--foreground);

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,12 +116,12 @@
116116
$item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
117117
}
118118

119-
@if not($item-background-active) and $item-background {
120-
$item-background-active: hsl(from var(--item-background) h s calc(l * 0.9));
119+
@if not($item-background-active) and $item-background-hover {
120+
$item-background-active: var(--item-background-hover);
121121
}
122122

123-
@if not($item-background-selected) and $item-background {
124-
$item-background-selected: hsl(from var(--item-background) h s calc(l * 0.9));
123+
@if not($item-background-selected) and $item-background-active {
124+
$item-background-selected: var(--item-background-active);
125125
}
126126

127127
@if not($header-text-color) and $header-background {

‎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
@@ -103,11 +103,11 @@
103103
}
104104

105105
@if not($item-active-text-color) and $item-active-background {
106-
$item-active-text-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
106+
$item-active-text-color: adaptive-contrast(var(--item-active-background));
107107
}
108108

109109
@if not($item-active-icon-color) and $item-active-background {
110-
$item-active-icon-color: adaptive-contrast(hsla(from $item-active-background h s l / 1));
110+
$item-active-icon-color: adaptive-contrast(var(--item-active-background));
111111
}
112112

113113
@if not($item-disabled-text-color) and $background {

‎projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@
205205
}
206206

207207
@if not($indicator-color) and $indicator-background {
208-
$indicator-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 1);
208+
$indicator-color: adaptive-contrast(var(--indicator-background));
209209
}
210210

211211
@if not($title-color) and $step-background {

0 commit comments

Comments
 (0)