Skip to content

Commit dbd5f80

Browse files
micllemiclle
committed
refactor(scss): extract common variants and simplify labels
- Extract $variants to _variables.scss for reuse across components - Refactor labels to use semantic CSS variables (--primary, --success, etc.) - Replace label-variant mixin with @each loop and filter: brightness() - Reduce _labels.scss from 132 to 65 lines (~50% reduction)
1 parent a634252 commit dbd5f80

4 files changed

Lines changed: 45 additions & 141 deletions

File tree

‎scss/_buttons.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// --------------------------------------------------
33

44
@use 'sass:list';
5+
@use 'variables' as *;
56

67
// Button component variables
78
button,
@@ -157,8 +158,6 @@ button,
157158
);
158159

159160
// Button variants
160-
$variants: 'primary', 'success', 'info', 'warning', 'danger';
161-
162161
@each $variant in $variants {
163162
&.#{$variant} {
164163
@include button-variant(

‎scss/_labels.scss‎

Lines changed: 24 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,17 @@
1-
// Lables
1+
// Labels
22
// --------------------------------------------------
33

4-
@use 'sass:color';
5-
@use 'sass:string';
4+
@use 'variables' as *;
65

76
// Label component variables
87
.label {
9-
--label-background-default: #999;
10-
--label-background-primary: #0085f0;
11-
--label-background-success: #81c735;
12-
--label-background-info: #5bc0de;
13-
--label-background-warning: #f0ad4e;
14-
--label-background-danger: #ff3a3c;
8+
--label-default-background: #999;
9+
--label-default-background-hover: #8a8a8a;
1510
--label-color: #fff;
1611
--label-link-hover-color: #fff;
17-
--label-background-default-hover: #8a8a8a;
18-
--label-background-primary-hover: #0077d9;
19-
--label-background-success-hover: #73b32f;
20-
--label-background-info-hover: #50adc8;
21-
--label-background-warning-hover: #d39b46;
22-
--label-background-danger-hover: #e13436;
23-
}
24-
25-
@mixin label-variant($color, $hover: null) {
26-
$use-css-vars: string.index($color, 'var(') != null;
27-
28-
background-color: $color;
29-
30-
&[href] {
31-
&:hover,
32-
&:focus {
33-
@if $use-css-vars and $hover {
34-
background-color: $hover;
35-
} @else if not $use-css-vars {
36-
background-color: color.adjust($color, $lightness: -10%);
37-
}
38-
}
39-
}
4012
}
4113

14+
// Base styles
4215
.label {
4316
display: inline;
4417
padding: 0.25em 0.6em 0.28em;
@@ -50,8 +23,7 @@
5023
white-space: nowrap;
5124
vertical-align: baseline;
5225
border-radius: var(--border-radius);
53-
54-
// [converter] extracted a& to a.label
26+
background-color: var(--label-default-background);
5527

5628
// Empty labels collapse automatically (not available in IE8)
5729
&:empty {
@@ -63,69 +35,30 @@
6335
position: relative;
6436
top: -1px;
6537
}
66-
}
6738

68-
// Add hover effects, but only for links
69-
a.label {
70-
&:hover,
71-
&:focus {
72-
color: var(--label-link-hover-color);
73-
text-decoration: none;
74-
cursor: pointer;
39+
// Hover effect for linked labels
40+
&[href] {
41+
&:hover,
42+
&:focus {
43+
color: var(--label-link-hover-color);
44+
text-decoration: none;
45+
cursor: pointer;
46+
filter: brightness(0.9);
47+
}
7548
}
76-
}
7749

78-
// Colors
79-
// Contextual variations (linked labels get darker on :hover)
80-
.label {
81-
@include label-variant(
82-
var(--label-background-default),
83-
var(--label-background-default-hover)
84-
);
85-
}
86-
.label.primary {
87-
@include label-variant(
88-
var(--label-background-primary),
89-
var(--label-background-primary-hover)
90-
);
91-
}
92-
.label.success {
93-
@include label-variant(
94-
var(--label-background-success),
95-
var(--label-background-success-hover)
96-
);
97-
}
98-
.label.info {
99-
@include label-variant(
100-
var(--label-background-info),
101-
var(--label-background-info-hover)
102-
);
103-
}
104-
.label.warning {
105-
@include label-variant(
106-
var(--label-background-warning),
107-
var(--label-background-warning-hover)
108-
);
109-
}
110-
.label.danger {
111-
@include label-variant(
112-
var(--label-background-danger),
113-
var(--label-background-danger-hover)
114-
);
115-
}
50+
// Label variants
51+
@each $variant in $variants {
52+
&.#{$variant} {
53+
--label-background-variant: var(--#{$variant});
11654

117-
.label {
55+
background-color: var(--label-background-variant);
56+
}
57+
}
58+
59+
// Size variant
11860
&.large {
11961
padding: 0.4em 0.8em 0.5em;
12062
font-size: 120%;
121-
border-radius: var(--border-radius);
12263
}
12364
}
124-
125-
// $colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow;
126-
127-
// @for $i from 1 through list.length($colors) {
128-
// .label.#{nth($colors, $i)}{
129-
// @include label-variant(#{nth($colors, $i)});
130-
// }
131-
// }

‎scss/_variables.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// SCSS Variables
2+
// Common variables shared across components
3+
4+
// Component variants - used for generating color-based component variations
5+
$variants: 'primary', 'success', 'info', 'warning', 'danger';

‎site/public/stylesheets/mice.css‎

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3737,20 +3737,10 @@ table.hover > tbody > tr:hover > td {
37373737
}
37383738

37393739
.label {
3740-
--label-background-default: #999;
3741-
--label-background-primary: #0085f0;
3742-
--label-background-success: #81c735;
3743-
--label-background-info: #5bc0de;
3744-
--label-background-warning: #f0ad4e;
3745-
--label-background-danger: #ff3a3c;
3740+
--label-default-background: #999;
3741+
--label-default-background-hover: #8a8a8a;
37463742
--label-color: #fff;
37473743
--label-link-hover-color: #fff;
3748-
--label-background-default-hover: #8a8a8a;
3749-
--label-background-primary-hover: #0077d9;
3750-
--label-background-success-hover: #73b32f;
3751-
--label-background-info-hover: #50adc8;
3752-
--label-background-warning-hover: #d39b46;
3753-
--label-background-danger-hover: #e13436;
37543744
}
37553745

37563746
.label {
@@ -3764,6 +3754,7 @@ table.hover > tbody > tr:hover > td {
37643754
white-space: nowrap;
37653755
vertical-align: baseline;
37663756
border-radius: var(--border-radius);
3757+
background-color: var(--label-default-background);
37673758
}
37683759
.label:empty {
37693760
display: none;
@@ -3772,59 +3763,35 @@ table.hover > tbody > tr:hover > td {
37723763
position: relative;
37733764
top: -1px;
37743765
}
3775-
3776-
a.label:hover, a.label:focus {
3766+
.label[href]:hover, .label[href]:focus {
37773767
color: var(--label-link-hover-color);
37783768
text-decoration: none;
37793769
cursor: pointer;
3770+
filter: brightness(0.9);
37803771
}
3781-
3782-
.label {
3783-
background-color: var(--label-background-default);
3784-
}
3785-
.label[href]:hover, .label[href]:focus {
3786-
background-color: var(--label-background-default-hover);
3787-
}
3788-
37893772
.label.primary {
3790-
background-color: var(--label-background-primary);
3791-
}
3792-
.label.primary[href]:hover, .label.primary[href]:focus {
3793-
background-color: var(--label-background-primary-hover);
3773+
--label-background-variant: var(--primary);
3774+
background-color: var(--label-background-variant);
37943775
}
3795-
37963776
.label.success {
3797-
background-color: var(--label-background-success);
3798-
}
3799-
.label.success[href]:hover, .label.success[href]:focus {
3800-
background-color: var(--label-background-success-hover);
3777+
--label-background-variant: var(--success);
3778+
background-color: var(--label-background-variant);
38013779
}
3802-
38033780
.label.info {
3804-
background-color: var(--label-background-info);
3781+
--label-background-variant: var(--info);
3782+
background-color: var(--label-background-variant);
38053783
}
3806-
.label.info[href]:hover, .label.info[href]:focus {
3807-
background-color: var(--label-background-info-hover);
3808-
}
3809-
38103784
.label.warning {
3811-
background-color: var(--label-background-warning);
3785+
--label-background-variant: var(--warning);
3786+
background-color: var(--label-background-variant);
38123787
}
3813-
.label.warning[href]:hover, .label.warning[href]:focus {
3814-
background-color: var(--label-background-warning-hover);
3815-
}
3816-
38173788
.label.danger {
3818-
background-color: var(--label-background-danger);
3819-
}
3820-
.label.danger[href]:hover, .label.danger[href]:focus {
3821-
background-color: var(--label-background-danger-hover);
3789+
--label-background-variant: var(--danger);
3790+
background-color: var(--label-background-variant);
38223791
}
3823-
38243792
.label.large {
38253793
padding: 0.4em 0.8em 0.5em;
38263794
font-size: 120%;
3827-
border-radius: var(--border-radius);
38283795
}
38293796

38303797
.timeline {

0 commit comments

Comments
 (0)