Skip to content

Commit ce8eb5e

Browse files
desig9steindesig9stein
authored
refactor(tabs): update schema colors (#346)
* refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors
1 parent 09e8d10 commit ce8eb5e

2 files changed

Lines changed: 106 additions & 32 deletions

File tree

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

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,32 +33,87 @@ $base-dark-tabs: (
3333

3434
/// Generates a dark material tabs schema.
3535
/// @type {Map}
36+
/// @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.
3638
/// @requires $material-tabs
3739
/// @requires $base-dark-tabs
38-
$dark-material-tabs: extend($material-tabs, $base-dark-tabs);
40+
$dark-material-tabs: extend(
41+
$material-tabs,
42+
(
43+
item-hover-background: (
44+
color: (
45+
'gray',
46+
100,
47+
),
48+
),
49+
item-active-background: (
50+
color: (
51+
'gray',
52+
100,
53+
),
54+
),
55+
)
56+
);
3957

4058
/// Generates a dark fluent tabs schema.
59+
/// @prop {Map} item-disabled-color [color: ('gray', 300)] - The color used for the disabled tabs text.
60+
/// @prop {Map} item-disabled-icon-color [color: ('gray', 300)] - The color used for the disabled tab icon.
61+
/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background used for the tabs on hover.
62+
/// @prop {Map} item-active-background [color: ('gray', 50)] - The color used for the active/focused tab background.
63+
/// @prop {Map} button-disabled-color [color: ('gray', 200)] - The color used for the disabled button icon/text.
64+
/// @prop {Map} indicator-color [color: ('primary', 300)] - The color used for the active tab indicator.
4165
/// @type {Map}
4266
/// @requires $fluent-tabs
4367
/// @requires $base-dark-tabs
44-
$dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs);
45-
46-
/// Generates a dark bootstrap tabs schema.
47-
/// @type {Map}
48-
/// @prop {Map} item-background [color: ('primary', 400)] - The background color used for the tabs header.
49-
/// @requires $bootstrap-tabs
50-
$dark-bootstrap-tabs: extend(
51-
$bootstrap-tabs,
68+
$dark-fluent-tabs: extend(
69+
$fluent-tabs,
70+
$base-dark-tabs,
5271
(
53-
item-hover-color: (
72+
item-disabled-color: (
73+
color: (
74+
'gray',
75+
300,
76+
),
77+
),
78+
item-disabled-icon-color: (
79+
color: (
80+
'gray',
81+
300,
82+
),
83+
),
84+
85+
item-hover-background: (
86+
color: (
87+
'gray',
88+
50,
89+
),
90+
),
91+
item-active-background: (
92+
color: (
93+
'gray',
94+
50,
95+
),
96+
),
97+
button-disabled-color: (
98+
color: (
99+
'gray',
100+
200,
101+
),
102+
),
103+
indicator-color: (
54104
color: (
55105
'primary',
56-
400,
106+
300,
57107
),
58108
),
59109
)
60110
);
61111

112+
/// Generates a dark bootstrap tabs schema.
113+
/// @type {Map}
114+
/// @requires $bootstrap-tabs
115+
$dark-bootstrap-tabs: extend($bootstrap-tabs);
116+
62117
/// Generates a dark indigo tabs schema.
63118
/// @type {Map}
64119
/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The background used for the tabs on hover.
@@ -74,7 +129,7 @@ $dark-bootstrap-tabs: extend(
74129
/// @prop {Map} button-color [contrast-color: ('gray', 50, .8)] - The color used for the button icon/text color.
75130
/// @prop {Map} button-hover-color [contrast-color: ('gray', 50)] - The color used for the button icon/text color on hover.
76131
/// @prop {Map} button-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled button icon/text.
77-
/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .1)] - The color used for the button background on hover.
132+
/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .10)] - The color used for the button background on hover.
78133
/// @requires $indigo-tabs
79134
$dark-indigo-tabs: extend(
80135
$indigo-tabs,

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

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/// Generates a base light tabs schema.
1313
/// @type {Map}
1414
/// @prop {Map} item-text-color [color: ('gray', 700)] - The color used for the tab text color.
15-
/// @prop {Color} item-background [color: ('surface')] - The background color used for the tabs header.
15+
/// @prop {Map} item-background [color: ('surface')] - The background color used for the tabs header.
1616
/// @prop {Map} item-hover-background [color: ('gray', 200)] - The background used for the tabs on hover.
1717
/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
1818
/// @prop {Map} item-icon-color [color: ('gray', 700)] - The color used for the tab icon.
@@ -175,50 +175,64 @@ $material-tabs: extend(
175175

176176
/// Generates a fluent tabs schema.
177177
/// @type {Map}
178-
/// @prop {Map} item-text-color [color: ('gray', 900)] - The color used for the tab text color.
179-
/// @prop {Map} item-disabled-color [color: ('gray', 400)] - The color used for the disabled tabs text.
180-
/// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The color used for the disabled tab icon.
178+
/// @prop {Map} item-text-color [color: ('gray', 800)] - The color used for the tab text color.
181179
/// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
182180
/// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
183181
/// @prop {Map} button-disabled-color [color: ('gray', 400)] - The color used for the disabled button icon/text.
182+
/// @prop {Map} item-active-color [color: ('gray', 800)] - The color used for the active tabs text.
183+
/// @prop {Map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tab icon.
184+
/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
185+
/// @prop {Map} item-icon-color [color: ('gray', 800)] - The color used for the tab icon.
184186
/// @requires {Map} $light-tabs
185187
$fluent-tabs: extend(
186188
$light-tabs,
187189
(
188190
item-text-color: (
189191
color: (
190192
'gray',
191-
900,
193+
800,
192194
),
193195
),
194-
item-disabled-color: (
196+
button-color: (
195197
color: (
196198
'gray',
197-
400,
199+
500,
198200
),
199201
),
200-
item-disabled-icon-color: (
202+
button-hover-color: (
203+
color: (
204+
'gray',
205+
600,
206+
),
207+
),
208+
button-disabled-color: (
201209
color: (
202210
'gray',
203211
400,
204212
),
205213
),
206-
button-color: (
214+
item-active-color: (
207215
color: (
208216
'gray',
209-
500,
217+
800,
210218
),
211219
),
212-
button-hover-color: (
220+
item-active-icon-color: (
213221
color: (
214222
'gray',
215-
600,
223+
800,
216224
),
217225
),
218-
button-disabled-color: (
226+
item-hover-icon-color: (
219227
color: (
220228
'gray',
221-
400,
229+
900,
230+
),
231+
),
232+
item-icon-color: (
233+
color: (
234+
'gray',
235+
800,
222236
),
223237
),
224238
)
@@ -234,8 +248,8 @@ $fluent-tabs: extend(
234248
/// @prop {map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tabs icon.
235249
/// @prop {Map} item-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled tabs text.
236250
/// @prop {Map} item-disabled-icon-color [color: ('primary', 500, .5)] - The color used for the disabled tab icon.
237-
/// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
238-
/// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
251+
/// @prop {Map} button-color [color: ('primary', 500)] - The color used for the button icon/text color.
252+
/// @prop {Map} button-hover-color [color: ('primary', 500)] - The color used for the button icon/text color on hover.
239253
/// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
240254
/// @prop {map} item-hover-background [color: ('surface')] - The background used for the tabs on hover.
241255
/// @prop {map} item-active-background [color: ('surface')] - The color used for the active/focused tab background.
@@ -248,14 +262,14 @@ $bootstrap-tabs: extend(
248262
(
249263
button-color: (
250264
color: (
251-
'gray',
265+
'primary',
252266
500,
253267
),
254268
),
255269
button-hover-color: (
256270
color: (
257-
'gray',
258-
600,
271+
'primary',
272+
500,
259273
),
260274
),
261275
item-hover-background: (
@@ -429,7 +443,12 @@ $indigo-tabs: extend(
429443
0.15,
430444
),
431445
),
432-
button-background: transparent,
446+
button-background: (
447+
contrast-color: (
448+
'gray',
449+
900,
450+
),
451+
),
433452
button-hover-background: (
434453
color: (
435454
'gray',

0 commit comments

Comments
 (0)