Skip to content

Commit 2189c67

Browse files
didimmovadidimmova
authored
feat(tabs): improve tabs theme (#15709)
1 parent fc6ec35 commit 2189c67

File tree

1 file changed

+111
-56
lines changed

1 file changed

+111
-56
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss‎

Lines changed: 111 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -78,82 +78,141 @@
7878
}
7979

8080
$theme: digest-schema($tabs-schema);
81-
$meta: map.get($theme, '_meta');
81+
$variant: map.get($theme, '_meta', 'theme');
8282

83-
@if not($item-text-color) and $item-background {
84-
@if meta.type-of($item-background) == 'color' {
85-
$item-text-color: rgba(text-contrast($item-background), .54);
86-
}
83+
@if not($item-hover-background) and $item-background {
84+
$item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
8785
}
8886

89-
@if not($item-hover-color) and $item-background {
90-
$item-hover-color: text-contrast($item-background);
87+
@if not($item-active-background) and $item-background {
88+
$item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
9189
}
9290

93-
@if not($item-hover-color) and $item-hover-background {
94-
$item-hover-color: text-contrast($item-hover-background);
95-
}
91+
@if not($item-background) {
92+
@if not($item-text-color) and $item-icon-color {
93+
$item-text-color: var(--item-icon-color);
94+
}
9695

97-
@if not($item-active-icon-color) and $item-active-background {
98-
$item-active-icon-color: text-contrast($item-active-background);
99-
}
96+
@if not($item-icon-color) and $item-text-color {
97+
$item-icon-color: var(--item-text-color);
98+
}
99+
} @else {
100+
@if not($item-text-color) and $item-background {
101+
$item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.9);
102+
}
100103

101-
@if not($item-active-icon-color) and $item-background {
102-
$item-active-icon-color: text-contrast($item-background);
104+
@if not($item-icon-color) and $item-background {
105+
$item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.9));
106+
}
103107
}
104108

105-
@if not($indicator-color) and $item-background {
106-
$indicator-color: text-contrast($item-background);
109+
@if $variant == 'bootstrap' {
110+
@if not($item-hover-color) and $item-text-color {
111+
$item-hover-color: hsl(from var(--item-text-color) h s calc(l * 0.9));
112+
}
113+
114+
@if not($item-hover-icon-color) and $item-icon-color {
115+
$item-hover-icon-color: hsla(from var(--item-icon-color) h s calc(l * 0.9));
116+
}
117+
118+
@if not($border-color) and $item-background {
119+
$border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5);
120+
}
121+
122+
@if not($border-color--hover) and $border-color {
123+
$border-color--hover: var(--border-color);
124+
}
125+
} @else {
126+
@if not($item-hover-color) and $item-text-color {
127+
$item-hover-color: hsla(from var(--item-text-color) h s l / 1);
128+
}
129+
130+
@if not($item-hover-icon-color) and $item-icon-color {
131+
$item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
132+
}
133+
134+
@if not($item-background) {
135+
@if not($indicator-color) and $item-text-color {
136+
$indicator-color: var(--item-text-color);
137+
}
138+
139+
@if not($indicator-color) and $item-icon-color {
140+
$indicator-color: var(--item-icon-color);
141+
}
142+
} @else {
143+
@if not($indicator-color) {
144+
$indicator-color: adaptive-contrast(var(--item-background));
145+
}
146+
}
107147
}
108148

109-
@if not($item-active-color) and $item-active-icon-color {
110-
$item-active-color: $item-active-icon-color;
149+
@if not($item-active-background) {
150+
@if $variant != 'bootstrap' {
151+
@if not($item-active-icon-color) and $item-icon-color {
152+
$item-active-icon-color: var(--item-icon-color);
153+
}
154+
155+
@if not($item-active-color) and $item-text-color {
156+
$item-active-color: var(--item-text-color);
157+
}
158+
}
159+
} @else {
160+
@if not($item-active-icon-color) and $item-active-background {
161+
$item-active-icon-color: adaptive-contrast(var(--item-active-background));
162+
}
163+
164+
@if not($item-active-color) and $item-active-background {
165+
$item-active-color: adaptive-contrast(var(--item-active-background));
166+
}
111167
}
112168

113169
// Button
114-
@if not($button-color) and $item-background {
115-
$button-color: text-contrast($item-background);
116-
}
170+
@if $item-background {
171+
@if not($button-background) and $item-background {
172+
$button-background: var(--item-background);
173+
}
117174

118-
@if not($button-color) and $button-background {
119-
$button-color: text-contrast($button-background);
120-
}
175+
@if not($button-hover-background) and $item-background {
176+
$button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
177+
}
178+
} @else if not($button-background) {
179+
@if $variant != 'material' {
180+
@if not($button-color) and $item-text-color {
181+
$button-color: var(--item-text-color);
182+
}
183+
184+
@if not($button-hover-color) and $button-color {
185+
$button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9));
186+
}
121187

122-
@if not($button-color) and $item-background {
123-
$button-background: transparent;
188+
@if not($button-disabled-color) and $button-color {
189+
$button-disabled-color: hsla(from var(--button-color) h s l / 0.5);
190+
}
191+
}
124192
}
125193

126-
@if not($button-hover-color) and $button-hover-background {
127-
$button-hover-color: text-contrast($button-hover-background);
194+
@if $button-background {
195+
@if not($button-hover-background) and $button-background {
196+
$button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
197+
}
128198
}
129199

130-
@if not($button-hover-background) and $item-background {
131-
$button-hover-color: text-contrast($item-background);
200+
@if not($button-color) and $button-background {
201+
$button-color: adaptive-contrast(var(--button-background));
132202
}
133203

134-
@if not($button-background) and $item-background {
135-
@if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
136-
$button-background: transparent;
137-
} @else {
138-
$button-background: rgba(255, 255, 255 , .1);
139-
}
204+
@if not($button-hover-color) and $button-hover-background {
205+
$button-hover-color: adaptive-contrast(var(--button-hover-background));
140206
}
141207

142-
@if not($button-hover-background) and $item-background {
143-
@if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
144-
$button-hover-background: rgba(0, 0, 0, .05);
145-
} @else {
146-
$button-hover-background: rgba(255, 255, 255 , .14);
147-
}
208+
@if not($button-ripple-color) and $button-color {
209+
$button-ripple-color: var(--button-color);
148210
}
149211

150-
@if not($button-ripple-color) and $button-background {
151-
@if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
152-
$button-ripple-color: rgba(0, 0, 0, .4);
153-
} @else {
154-
$button-ripple-color: rgba(255, 255, 255, .4);
155-
}
212+
@if not($button-disabled-color) and $button-color {
213+
$button-disabled-color: hsla(from var(--button-color) h s l / 0.4);
156214
}
215+
157216
// Button end
158217

159218
@if not($tab-ripple-color) and $item-active-background {
@@ -186,12 +245,8 @@
186245
tab-ripple-color: $tab-ripple-color,
187246
button-ripple-color: $button-ripple-color,
188247
border-color: $border-color,
248+
border-color--hover: $border-color--hover,
189249
border-radius: $border-radius,
190-
theme: map.get($schema, '_meta', 'theme'),
191-
_meta: map.merge(if($meta, $meta, ()), (
192-
variant: map.get($schema, '_meta', 'theme'),
193-
theme-variant: map.get($schema, '_meta', 'variant')
194-
)),
195250
));
196251
}
197252

@@ -203,11 +258,11 @@
203258
@mixin tabs($theme) {
204259
@include css-vars($theme);
205260

206-
$variant: map.get($theme, '_meta', 'variant');
261+
$variant: map.get($theme, '_meta', 'theme');
207262
$not-bootstrap-theme: $variant != 'bootstrap';
208263
$bootstrap-theme: $variant == 'bootstrap';
209264
$indigo-theme: $variant == 'indigo';
210-
$theme-variant: map.get($theme, '_meta', 'theme-variant');
265+
$theme-variant: map.get($theme, '_meta', 'variant');
211266

212267
$item-min-width: rem(90px);
213268
$item-max-width: rem(360px);

0 commit comments

Comments
 (0)