Skip to content

Commit f9b7c61

Browse files
adrianptrvadrianptrv
authored
feat(tabs): add 'active' parameters (#495)
* feat(tabs): add 'active' parameters * chore(tabs): fix docs sentence
1 parent b502cc1 commit f9b7c61

File tree

3 files changed

+147
-29
lines changed

3 files changed

+147
-29
lines changed

‎sass/themes/components/tabs/_tabs-theme.scss‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,13 @@
2020
/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.
2121
/// @param {Color} $item-icon-color [null] - The color used for the tab icon.
2222
/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.
23+
/// @param {Color} $item-active-hover-icon-color [null] - The color used for the active tab icon on hover and focus.
2324
/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.
2425
/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.
2526
/// @param {Color} $item-active-color [null] - The color used for the active tabs text.
26-
/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.
27+
/// @param {Color} $item-active-hover-color [null] - The color used for the active tabs text on hover and focus.
28+
/// @param {Color} $item-active-background [null] - The color used for the active tab background.
29+
/// @param {Color} $item-active-hover-background [null] - The color used for the active tab background on hover and focus.
2730
/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.
2831
/// @param {Color} $indicator-color [null] - The color used for the active tab indicator.
2932
/// @param {Color} $button-color [null] - The color used for the button icon/text color.
@@ -51,10 +54,13 @@
5154
$item-hover-color: null,
5255
$item-icon-color: null,
5356
$item-active-icon-color: null,
57+
$item-active-hover-icon-color: null,
5458
$item-hover-icon-color: null,
5559
$item-disabled-icon-color: null,
5660
$item-active-color: null,
61+
$item-active-hover-color: null,
5762
$item-active-background: null,
63+
$item-active-hover-background: null,
5864
$item-disabled-color: null,
5965
$indicator-color: null,
6066
$button-color: null,
@@ -82,7 +88,11 @@
8288
$variant: map.get($theme, '_meta', 'theme');
8389

8490
@if not($item-active-background) and $item-background {
85-
$item-active-background: dynamic-shade(var(--item-background));
91+
$item-active-background: var(--item-background);
92+
}
93+
94+
@if not($item-active-hover-background) and $item-active-background {
95+
$item-active-hover-background: dynamic-shade(var(--item-active-background));
8696
}
8797

8898
@if not($item-background) {
@@ -103,8 +113,24 @@
103113
}
104114
}
105115

116+
@if not($item-active-icon-color) and $item-active-color {
117+
$item-active-icon-color: var(--item-active-color);
118+
}
119+
120+
@if not($item-active-color) and $item-active-icon-color {
121+
$item-active-color: var(--item-active-icon-color);
122+
}
123+
124+
@if not($item-active-hover-color) and $item-active-color {
125+
$item-active-hover-color: var(--item-active-color);
126+
}
127+
128+
@if not($item-active-hover-icon-color) and $item-active-icon-color {
129+
$item-active-hover-icon-color: var(--item-active-icon-color);
130+
}
131+
106132
@if not($item-active-background) {
107-
@if $variant != 'bootstrap' {
133+
@if $variant != 'bootstrap' and $variant != 'material' {
108134
@if not($item-active-icon-color) and $item-icon-color {
109135
$item-active-icon-color: var(--item-icon-color);
110136
}
@@ -114,21 +140,21 @@
114140
}
115141
}
116142
} @else {
117-
@if not($item-active-icon-color) and $item-active-color {
118-
$item-active-icon-color: var(--item-active-color);
119-
}
120-
121-
@if not($item-active-color) and $item-active-icon-color {
122-
$item-active-color: var(--item-active-icon-color);
123-
}
124-
125143
@if not($item-active-icon-color) and $item-active-background {
126144
$item-active-icon-color: adaptive-contrast(var(--item-active-background));
127145
}
128146

129147
@if not($item-active-color) and $item-active-background {
130148
$item-active-color: adaptive-contrast(var(--item-active-background));
131149
}
150+
151+
@if not($item-active-hover-icon-color) and $item-active-hover-background {
152+
$item-active-hover-icon-color: adaptive-contrast(var(--item-active-hover-background));
153+
}
154+
155+
@if not($item-active-hover-color) and $item-active-hover-background {
156+
$item-active-hover-color: adaptive-contrast(var(--item-active-hover-background));
157+
}
132158
}
133159

134160
@if not($item-hover-background) {
@@ -162,21 +188,17 @@
162188
$border-color--hover: var(--border-color);
163189
}
164190
} @else {
165-
@if not($item-background) {
166-
@if not($indicator-color) and $item-text-color {
167-
$indicator-color: var(--item-text-color);
168-
}
169-
170-
@if not($indicator-color) and $item-icon-color {
171-
$indicator-color: var(--item-icon-color);
191+
@if not($item-active-background) {
192+
@if not($indicator-color) and $item-active-color {
193+
$indicator-color: var(--item-active-color);
172194
}
173195
} @else {
174196
@if not($indicator-color) and $item-active-color {
175197
$indicator-color: var(--item-active-color);
176198
}
177199

178200
@if not($indicator-color) {
179-
$indicator-color: adaptive-contrast(var(--item-background));
201+
$indicator-color: adaptive-contrast(var(--item-active-background));
180202
}
181203
}
182204
}
@@ -249,10 +271,13 @@
249271
item-hover-background: $item-hover-background,
250272
item-icon-color: $item-icon-color,
251273
item-active-icon-color: $item-active-icon-color,
274+
item-active-hover-icon-color: $item-active-hover-icon-color,
252275
item-hover-icon-color: $item-hover-icon-color,
253276
item-disabled-icon-color: $item-disabled-icon-color,
254277
item-active-color: $item-active-color,
278+
item-active-hover-color: $item-active-hover-color,
255279
item-active-background: $item-active-background,
280+
item-active-hover-background: $item-active-hover-background,
256281
item-disabled-color: $item-disabled-color,
257282
indicator-color: $indicator-color,
258283
button-color: $button-color,

‎sass/themes/schemas/components/dark/_tabs.scss‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
/// Generates a base dark tabs schema.
1414
/// @type {Map}
1515
/// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The background used for the tabs on hover.
16-
/// @prop {Map} item-active-background [color: ('gray', 100, .5)] - The color used for the active/focused tab background.
16+
/// @prop {Map} item-active-hover-background [color: ('gray', 100, .5)] - The color used for the active tab background on hover and focus.
1717
$base-dark-tabs: (
1818
item-hover-background: (
1919
color: (
@@ -22,7 +22,7 @@ $base-dark-tabs: (
2222
0.5,
2323
),
2424
),
25-
item-active-background: (
25+
item-active-hover-background: (
2626
color: (
2727
'gray',
2828
100,
@@ -34,7 +34,7 @@ $base-dark-tabs: (
3434
/// Generates a dark material tabs schema.
3535
/// @type {Map}
3636
/// @prop {Map} item-hover-background [color: ('gray', 100)] - The background used for the tabs on hover.
37-
/// @prop {Map} item-active-background [color: ('gray', 100)] - The color used for the active/focused tab background.
37+
/// @prop {Map} item-active-hover-background [color: ('gray', 100)] - The color used for the active tab background on hover and focus.
3838
/// @requires $material-tabs
3939
/// @requires $base-dark-tabs
4040
$dark-material-tabs: extend(
@@ -46,7 +46,7 @@ $dark-material-tabs: extend(
4646
100,
4747
),
4848
),
49-
item-active-background: (
49+
item-active-hover-background: (
5050
color: (
5151
'gray',
5252
100,
@@ -63,7 +63,7 @@ $dark-material-tabs: extend(
6363
/// @prop {Map} item-disabled-color [color: ('gray', 300)] - The color used for the disabled tabs text.
6464
/// @prop {Map} item-disabled-icon-color [color: ('gray', 300)] - The color used for the disabled tab icon.
6565
/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background used for the tabs on hover.
66-
/// @prop {Map} item-active-background [color: ('gray', 50)] - The color used for the active/focused tab background.
66+
/// @prop {Map} item-active-hover-background [color: ('gray', 50)] - The color used for the active tab background on hover and focus.
6767
/// @prop {Map} button-disabled-color [color: ('gray', 200)] - The color used for the disabled button icon/text.
6868
/// @prop {Map} indicator-color [color: ('primary', 300)] - The color used for the active tab indicator.
6969
/// @type {Map}
@@ -92,7 +92,7 @@ $dark-fluent-tabs: extend(
9292
50,
9393
),
9494
),
95-
item-active-background: (
95+
item-active-hover-background: (
9696
color: (
9797
'gray',
9898
50,
@@ -133,13 +133,16 @@ $dark-bootstrap-tabs: extend(
133133
/// Generates a dark indigo tabs schema.
134134
/// @type {Map}
135135
/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The background used for the tabs on hover.
136+
/// @prop {Map} item-active-hover-background [contrast-color: ('gray', 50, .1)] - The color used for the active tab background on hover and focus.
136137
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The color used for the tab text color.
137138
/// @prop {Map} item-hover-color [contrast-color: ('gray', 50)] - The text color used for the tabs on hover.
138139
/// @prop {Map} item-active-color [contrast-color: ('gray', 50)] - The color used for the active tabs text.
140+
/// @prop {Map} item-active-hover-color [contrast-color: ('gray', 50)] - The color used for the active tabs text on hover and focus.
139141
/// @prop {Map} item-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tabs text.
140142
/// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .6)] - The color used for the tab icon.
141143
/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the tab icon on hover.
142144
/// @prop {Map} item-active-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon.
145+
/// @prop {Map} item-active-hover-icon-color [contrast-color: ('gray', 50, .8)] - The color used for the active tab icon on hover and focus.
143146
/// @prop {Map} item-disabled-icon-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled tab icon.
144147
/// @prop {Map} border-color [contrast-color: ('gray', 50, .15)] - The color used for the tab items bottom border.
145148
/// @prop {Map} border-color--hover [contrast-color: ('gray', 50, .15)] - The color used for the tab items bottom border on hover/focus.
@@ -158,6 +161,13 @@ $dark-indigo-tabs: extend(
158161
0.1,
159162
),
160163
),
164+
item-active-hover-background: (
165+
contrast-color: (
166+
'gray',
167+
50,
168+
0.1,
169+
),
170+
),
161171
item-text-color: (
162172
contrast-color: (
163173
'gray',
@@ -177,6 +187,12 @@ $dark-indigo-tabs: extend(
177187
50,
178188
),
179189
),
190+
item-active-hover-color: (
191+
contrast-color: (
192+
'gray',
193+
50,
194+
),
195+
),
180196
item-disabled-color: (
181197
contrast-color: (
182198
'gray',
@@ -205,6 +221,13 @@ $dark-indigo-tabs: extend(
205221
0.8,
206222
),
207223
),
224+
item-active-hover-icon-color: (
225+
contrast-color: (
226+
'gray',
227+
50,
228+
0.8,
229+
),
230+
),
208231
item-disabled-icon-color: (
209232
contrast-color: (
210233
'gray',

0 commit comments

Comments
 (0)