Skip to content

Commit 7544220

Browse files
author
castastrophe
committed
Resolve complexity with variable calls in mixins using pfe-local; fix broadcasted variable for ui-links in theme mixin
1 parent 8cbf1e8 commit 7544220

File tree

5 files changed

+80
-64
lines changed

5 files changed

+80
-64
lines changed

‎elements/pfe-accordion/demo/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,18 @@
3333
section {
3434
padding: 2rem;
3535
}
36+
a {
37+
color: var(--pfe-broadcasted--color--ui-link);
38+
}
39+
a:hover {
40+
color: var(--pfe-broadcasted--color--ui-link--hover);
41+
}
42+
a:visited {
43+
color: var(--pfe-broadcasted--color--ui-link--visited);
44+
}
45+
a:focus {
46+
color: var(--pfe-broadcasted--color--ui-link--focus);
47+
}
3648
.dark-background {
3749
background-color: #191e84;
3850
}

‎elements/pfe-accordion/src/pfe-accordion-header.scss‎

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

3+
$LOCAL: accordion;
4+
35
/// ===========================================================================
46
/// DEFAULT ACCORDION HEADING
57
/// ===========================================================================
@@ -8,16 +10,15 @@
810
@include pfe-accordion-header;
911

1012
button {
11-
@include pfe-trigger-button($component-name: accordion); // border 3px
13+
@include pfe-trigger-button;
1214
@include pfe-trigger-color($component-name: accordion);
1315

1416
&[aria-expanded="true"] {
15-
@include pfe-trigger-color-expanded($component-name: accordion);
16-
@include pfe-trigger-expanded;
17-
}
18-
19-
&[aria-expanded="true"]::after {
17+
@include pfe-trigger-color-expanded($component-name: accordion);
18+
@include pfe-trigger-expanded;
19+
&::after {
2020
@include pfe-chevron-expanded;
21+
}
2122
}
2223

2324
&[aria-expanded="false"]::after {
@@ -26,9 +27,7 @@
2627
}
2728
}
2829

29-
:host(:first-child),
30-
:host([color="lighter"]:first-child),
31-
:host([color="lightest"]:first-child) {
30+
:host(:first-child) {
3231
button {
3332
@include pfe-trigger-button-first($theme: light);
3433
}
@@ -47,7 +46,7 @@
4746
}
4847

4948
/// ===========================================================================
50-
/// COLOR OVERRIDES
49+
/// CONTEXT STYLES, ON=DARK
5150
/// ===========================================================================
5251

5352
:host([on="dark"]) {

‎elements/pfe-accordion/src/pfe-accordion-panel.scss‎

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

3+
$LOCAL: accordion;
4+
35
/// ===========================================================================
46
/// DEFAULT ACCORDION PANEL
57
/// ===========================================================================
@@ -14,6 +16,7 @@
1416
}
1517

1618
:host([on="dark"][expanded]) {
19+
@include pfe-theme($theme: "dark");
1720
@include pfe-accordion-panel-expanded-style($theme: dark);
1821
}
1922

@@ -25,7 +28,7 @@
2528
.container {
2629
@include pfe-accordion-panel-container-inset($align: left);
2730
}
28-
31+
2932
:host(:last-of-type[expanded]) {
3033
margin-bottom: 0;
3134
}

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

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

3+
$LOCAL: accordion;
4+
35
:host {
46
display: block;
57
position: relative;

‎elements/pfe-sass/mixins/_mixins.scss‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -40,58 +40,58 @@
4040
/// ===========================================================================
4141

4242
@mixin pfe-theme($theme) {
43+
// GENERAL CONTEXT-BASED UPDATES, ON="DARK"
4344
@if $theme == dark {
4445
--pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};
45-
--pfe-broadcasted--color--ui-link: #{pfe-color(link--on-dark)};
46-
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(link--visited--on-dark)};
47-
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(link--hover--on-dark)};
48-
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(link--focus--on-dark)};
46+
--pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};
47+
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};
48+
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};
49+
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};
4950
}
50-
@if $theme == light {
51+
@else if $theme == light {
5152
--pfe-broadcasted--color--text: #{pfe-color(text)};
52-
--pfe-broadcasted--color--ui-link: #{pfe-color(link)};
53-
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(link--visited)};
54-
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(link--hover)};
55-
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(link--focus)};
53+
--pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};
54+
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};
55+
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};
56+
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};
5657
}
57-
// THEMES:
58-
@if $theme == darker {
58+
// MORE SPECIFIC COLOR BASED UPDATES, COLOR="DARKER"
59+
@else if $theme == darker {
5960
--pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};
6061
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};
6162
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};
6263
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};
6364
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};
6465
}
65-
@if $theme == darkest {
66+
@else if $theme == darkest {
6667
--pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};
6768
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};
6869
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};
6970
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};
7071
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};
7172
}
72-
@if $theme == accent {
73+
@else if $theme == accent {
7374
--pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};
7475
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};
7576
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};
7677
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};
7778
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};
7879
}
79-
@if $theme == complement {
80+
@else if $theme == complement {
8081
--pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};
8182
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};
8283
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};
8384
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};
8485
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};
8586
}
86-
87-
@if $theme == lighter {
87+
@else if $theme == lighter {
8888
--pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};
8989
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};
9090
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};
9191
--pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};
9292
--pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};
9393
}
94-
@if $theme == lightest {
94+
@else if $theme == lightest {
9595
--pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};
9696
--pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};
9797
--pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};
@@ -197,12 +197,13 @@
197197
/// ===========================================================================
198198

199199
$pfe-expand_button--LineHeight: 1.5;
200-
$pfe-expand_button--Padding: #{pfe-var(container-spacer)};
201-
$pfe-expand_button--Padding--factor: .75;
202-
$pfe-expand_button--Padding--wide: #{$pfe-expand_button--Padding * 1.5};
200+
$pfe-expand_button--padding: #{pfe-var(container-spacer)};
201+
$pfe-expand_button--padding--factor: .75;
202+
$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);
203203

204204
$pfe-expand_chevron--size: .4em;
205205
$pfe-expand_chevron--weight: .1em;
206+
$pfe-expand_chevron--padding: 3em;
206207
$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};
207208

208209
@mixin pfe-accordion-header {
@@ -212,14 +213,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
212213
}
213214
}
214215

215-
@mixin pfe-trigger-button($component-name, $theme: light, $align: left) {
216-
--pfe-#{$component-name}--main: transparent;
217-
--pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};
218-
--pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};
219-
--pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;
220-
--pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
221-
--pfe-#{$component-name}--border-bottom: 0;
222-
216+
@mixin pfe-trigger-button($theme: light, $align: left) {
223217
-webkit-appearance: button;
224218
margin: 0;
225219
width: 100%;
@@ -230,35 +224,37 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
230224
cursor: pointer;
231225
z-index: 1;
232226
position: relative;
227+
233228
font-size: calc(#{pfe-var(font-size)} * 1.1);
234229
line-height: #{pfe-var(line-height)};
235-
color: var(--pfe-#{$component-name}--aux);
236-
background-color: var(--pfe-#{$component-name}--main);
237-
border-left: var(--pfe-#{$component-name}--border-left);
238-
border-right: var(--pfe-#{$component-name}--border-right);
239-
border-bottom: var(--pfe-#{$component-name}--border-bottom);
230+
231+
color: #{pfe-local(aux)}; //var(--pfe-#{$component-name}--aux);
232+
background-color: #{pfe-local(main)}; //var(--pfe-#{$component-name}--main);
233+
border-left: #{pfe-local(BorderLeft)}; //var(--pfe-#{$component-name}--border-left);
234+
border-right: #{pfe-local(BorderRight)}; //var(--pfe-#{$component-name}--border-right);
235+
border-bottom: #{pfe-local(BorderBottom)}; //var(--pfe-#{$component-name}--border-bottom);
240236
border-top: 0;
241237

242238
&:hover {
243239
outline: none;
244-
border-left-color: var(--pfe-#{$component-name}--focus);
240+
border-left-color: #{pfe-local(BorderLeftColor--focus)}; //var(--pfe-#{$component-name}--focus);
245241
z-index: 2;
246242
}
247243

248244
&:focus {
249245
outline: none;
250246
z-index: 2;
251247
text-decoration: underline;
252-
text-decoration-color: pfe-color(surface--border--darker);
248+
text-decoration-color: #{pfe-color(surface--border--darker)};
253249
}
254250

255251
&::-moz-focus-inner {
256252
border: 0;
257253
}
258254
@if $align == right {
259-
padding: #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide #{$pfe-expand_button--Padding} 50px;
255+
padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;
260256
} @else {
261-
padding: #{$pfe-expand_button--Padding} 50px #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide;
257+
padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};
262258
}
263259
// @TODO later, type scale support
264260
//[scale="large"] & {
@@ -298,30 +294,34 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
298294
@if $theme == dark {
299295
--pfe-#{$component-name}--main: transparent;
300296
--pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};
301-
--pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)};
297+
--pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};
302298
}
303299
@else {
304300
--pfe-#{$component-name}--main: transparent;
305301
--pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};
306-
--pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};
307-
--pfe-#{$component-name}--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
302+
303+
--pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;
304+
--pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
305+
306+
--pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};
307+
--pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
308308
}
309309
}
310310

311311
@mixin pfe-trigger-color-expanded($component-name, $theme: light) {
312312
@if $theme == dark {
313313
--pfe-#{$component-name}--main: #{pfe-color(surface--darker)};
314314
--pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};
315-
--pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)};
316-
--pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
317-
--pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
315+
--pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};
316+
--pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
317+
--pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
318318
}
319319
@else {
320320
--pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};
321321
--pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};
322322
--pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};
323-
--pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};
324-
--pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
323+
--pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};
324+
--pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
325325
}
326326
}
327327

@@ -332,7 +332,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
332332
@mixin pfe-chevron-expanded($state: true, $position: after) {
333333
content: "";
334334
position: absolute;
335-
top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--Padding--factor}) + #{$pfe-expand_chevron--placement} );
335+
top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );
336336
display: block;
337337
border-style: #{pfe-var(surface--border-style)};
338338
height: $pfe-expand_chevron--size;
@@ -344,20 +344,20 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
344344
border-bottom: 0;
345345
transform: rotate(-45deg);
346346
@if $position == before {
347-
left: #{$pfe-expand_button--Padding--wide};
347+
left: #{$pfe-expand_button--padding--wide};
348348
}
349349
@else {
350-
right: #{$pfe-expand_button--Padding--wide};
350+
right: #{$pfe-expand_button--padding--wide};
351351
}
352352
}
353353
@else {
354354
border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;
355355
transform: rotate(45deg);
356356
@if $position == before {
357-
left: #{$pfe-expand_button--Padding--wide};
357+
left: #{$pfe-expand_button--padding--wide};
358358
}
359359
@else {
360-
right: #{$pfe-expand_button--Padding--wide};
360+
right: #{$pfe-expand_button--padding--wide};
361361
}
362362
}
363363
}
@@ -371,7 +371,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
371371
display: block;
372372
width: 100%;
373373

374-
padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};
374+
padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};
375375

376376
@media (min-width: #{pfe-breakpoint(sm)}) {
377377
padding: #{pfe-local(Padding)};
@@ -413,9 +413,9 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
413413
width: 100%;
414414

415415
@if $align == left {
416-
padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide};
416+
padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};
417417
}
418418
@else {
419-
padding: 0 #{$pfe-expand_button--padding-wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
419+
padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
420420
}
421421
}

0 commit comments

Comments
 (0)