Skip to content

Commit b017ec9

Browse files
author
castastrophe
committed
Adjust styles to use BEM naming and add variable theme usage
1 parent 57397f9 commit b017ec9

File tree

2 files changed

+47
-53
lines changed

2 files changed

+47
-53
lines changed

‎elements/pfe-tabs/src/pfe-tab.scss‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "../../pfe-sass/pfe-sass";
22

3+
$LOCAL: tab;
4+
35
/// ===========================================================================
46
/// Component Specific SASS Vars
57
/// ===========================================================================
@@ -22,10 +24,10 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
2224
margin: 0 0 -1px;
2325

2426
// Padding
25-
padding-top: #{pfe-var(container-padding)};
26-
padding-right: calc(#{pfe-var(container-padding)} * #{$pfe-tabs__tab--PaddingRight-factor});;
27+
padding-top: #{pfe-var(container-padding)};
28+
padding-right: calc(#{pfe-var(container-padding)} * #{$pfe-tabs__tab--PaddingRight-factor});;
2729
padding-bottom: calc(#{pfe-var(container-padding)} * #{$pfe-tabs__tab--PaddingBottom-factor});
28-
padding-left: #{pfe-var(container-padding)};
30+
padding-left: #{pfe-var(container-padding)};
2931
// Border
3032
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
3133
border-bottom: 0;
@@ -40,7 +42,7 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
4042
}
4143

4244
:host([aria-selected="true"]) {
43-
--pfe-tabs--main: #{pfe-color(surface--lightest)};
45+
--pfe-tabs--main: #{pfe-color(surface--lightest)};
4446

4547
// Border
4648
border-color: #{pfe-color(surface--border)};
@@ -53,13 +55,13 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
5355
left: auto;
5456

5557
display: var(--pfe-tabs__indicator--Display, block); // Exposing this for themability. Use `none` to not show at all
56-
height: var(--pfe-tabs__indicator--Height, 4px); // Exposing this for themability
57-
width: var(--pfe-tabs__indicator--Width, 22px); // Exposing this for themability
58+
height: var(--pfe-tabs__indicator--Height, 4px); // Exposing this for themability
59+
width: var(--pfe-tabs__indicator--Width, 22px); // Exposing this for themability
5860

5961
background-color: #{pfe-color(surface--border--darkest)};
6062
}
6163

62-
// Hover state for inactive tabs.
64+
// Hover state for inactive tabs
6365
:host(:hover) .indicator {
6466
background-color: var(--pfe-tabs--link);
6567
}
@@ -79,8 +81,7 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
7981
/// HORIZONTAL TAB VARIANTS
8082
/// ===========================================================================
8183

82-
// Horizontal primary sets.
83-
84+
// Horizontal primary sets
8485
:host([pfe-variant="primary"]) {
8586
text-align: center;
8687
padding: 0 calc(#{pfe-var(container-padding)} / 3) #{pfe-var(container-padding)};
@@ -107,7 +108,7 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
107108
:host([pfe-variant="secondary"]) {
108109
text-align: center;
109110
padding: calc(#{pfe-var(container-padding)} * .666) calc(#{pfe-var(container-padding)} * 2.75);
110-
border: 1px solid $pfe-global--color--black-soft;
111+
border: 1px solid #{pfe-color(surface--border--darkest)};
111112
margin-right: 2%;
112113

113114
.indicator {
@@ -118,8 +119,8 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
118119
// Horizontal secondary sets.
119120

120121
:host([pfe-variant="secondary"][aria-selected="true"]) {
121-
background-color: $pfe-global--color--black-soft;
122-
color: #ffffff;
122+
background-color: #{pfe-color(surface--darkest)};
123+
color: #{pfe-color(surface--darkest--text)};
123124

124125
.indicator {
125126
display: block;
@@ -128,20 +129,20 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
128129
height: 0;
129130
left: 50%;
130131
transform: translateX(-50%);
131-
border-left: #{pfe-var(container-spacer)} solid transparent;
132+
border-left: #{pfe-var(container-spacer)} solid transparent;
132133
border-right: #{pfe-var(container-spacer)} solid transparent;
133-
border-top: #{pfe-var(container-spacer)} solid $pfe-global--color--black-soft;
134+
border-top: #{pfe-var(container-spacer)} solid $pfe-global--color--black-soft;
134135
background-color: transparent;
135136
}
136137
}
137138

138139
:host([pfe-variant="secondary"][aria-selected="false"]) {
139-
color: $pfe-color--ui-base;
140+
color: #{pfe-color(ui-base)};
140141
}
141142

142143
:host([pfe-variant="secondary"]:hover) {
143-
background-color: $pfe-global--color--black-soft;
144-
color: #ffffff;
144+
background-color: #{pfe-color(surface--darkest)};
145+
color: #{pfe-color(surface--darkest--text)};
145146
}
146147

147148
/// ===========================================================================
@@ -155,12 +156,12 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
155156
padding-right: #{pfe-var(container-padding)};
156157

157158
.indicator {
158-
left: auto;
159+
left: auto;
159160
right: 0;
160-
top: 0;
161+
top: 0;
161162
display: var(--pfe-tabs__indicator--Display, block); // Exposing this for themability. Use `none` to not show at all
162-
height: var(--pfe-tabs__indicator--Height, 22px); // Exposing this for themability
163-
width: var(--pfe-tabs__indicator--Width, 4px); // Exposing this for themability
163+
height: var(--pfe-tabs__indicator--Height, 22px); // Exposing this for themability
164+
width: var(--pfe-tabs__indicator--Width, 4px); // Exposing this for themability
164165
}
165166
}
166167

@@ -170,16 +171,14 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
170171

171172
// Vertical secondary sets.
172173

173-
:host([vertical][pfe-variant="secondary"][aria-selected="true"]) {
174-
.indicator {
175-
left: 99%;
176-
top: 50%;
177-
transform: translateY(-50%);
178-
border-top: #{pfe-var(container-spacer)} solid transparent;
179-
border-left: #{pfe-var(container-spacer)} solid $pfe-global--color--black-soft;
180-
border-bottom: #{pfe-var(container-spacer)} solid transparent;
181-
background-color: transparent;
182-
}
174+
:host([vertical][pfe-variant="secondary"][aria-selected="true"]) .indicator {
175+
left: 99%;
176+
top: 50%;
177+
transform: translateY(-50%);
178+
border-top: #{pfe-var(container-spacer)} solid transparent;
179+
border-left: #{pfe-var(container-spacer)} solid $pfe-global--color--black-soft;
180+
border-bottom: #{pfe-var(container-spacer)} solid transparent;
181+
background-color: transparent;
183182
}
184183

185184
::slotted(h1),
@@ -188,8 +187,8 @@ $pfe-tabs__tab--PaddingBottom-factor: 1.5; // 54px at 16px base.
188187
::slotted(h4),
189188
::slotted(h5),
190189
::slotted(h6) {
191-
font-size: var(--pfe-theme--font-size);
192-
font-weight: var(--pfe-theme--font-weight--normal, 500);
190+
font-size: #{pfe-var(font-size)};
191+
font-weight: #{pfe-var(font-weight--normal)};
193192
margin: 0;
194193
user-select: none;
195194
}

‎elements/pfe-tabs/src/pfe-tabs.scss‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "../../pfe-sass/pfe-sass";
22

3+
$LOCAL: tabs;
4+
35
/// ===========================================================================
46
/// Component Specific SASS Vars
57
/// ===========================================================================
@@ -15,11 +17,11 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
1517
}
1618

1719
.tabs {
18-
--pfe-tabs--border-color: #{pfe-color(surface--border)};
20+
--pfe-tabs--BorderColor: #{pfe-color(surface--border)};
1921

2022
display: flex;
2123
border: 0;
22-
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} var(--pfe-tabs--border-color);
24+
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
2325
}
2426

2527
.panels {
@@ -37,10 +39,9 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
3739

3840
:host([vertical]) .tabs {
3941
flex-direction: column;
40-
width: 25%;
41-
42+
width: 25%;
4243
border: 0;
43-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} var(--pfe-tabs--border-color);
44+
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
4445
}
4546

4647
:host([vertical]) .tabs ::slotted(pfe-tab) {
@@ -51,7 +52,7 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
5152
}
5253

5354
:host([vertical]) .tabs ::slotted(pfe-tab[aria-selected="true"]) {
54-
border-color: var(--pfe-tabs--border-color);
55+
border-color: #{pfe-local(BorderColor)};
5556
border-right: 0;
5657
}
5758

@@ -64,25 +65,19 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
6465
/// ===========================================================================
6566
/// TAB VARIANTS
6667
/// ===========================================================================
67-
68-
:host([pfe-variant="primary"]) {
69-
.tabs {
70-
border-bottom: transparent;
71-
border-right: transparent;
72-
}
68+
:host([pfe-variant="primary"]) .tabs {
69+
border-bottom: transparent;
70+
border-right: transparent;
7371
}
72+
7473
:host([vertical][pfe-variant="primary"]) {
7574
align-items: flex-start;
7675
}
7776

78-
:host([pfe-variant="secondary"]) {
79-
.tabs {
80-
border-bottom: transparent;
81-
}
77+
:host([pfe-variant="secondary"]) .tabs {
78+
border-bottom: transparent;
8279
}
8380

84-
:host([vertical][pfe-variant="secondary"]) {
85-
.tabs {
86-
justify-content: flex-start;
87-
}
81+
:host([vertical][pfe-variant="secondary"]) .tabs {
82+
justify-content: flex-start;
8883
}

0 commit comments

Comments
 (0)