Skip to content

Commit c5a1ffc

Browse files
lucaslarrochelucaslarroche
committed
refactor: prefix css vars
1 parent cba8f38 commit c5a1ffc

40 files changed

+2335
-2330
lines changed

‎css/pico.classless.css

+740-760
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.css

+772-796
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scss/_settings.scss

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
// Config
22
// ––––––––––––––––––––
33

4+
// Prefix for CSS variables
5+
$css-var-prefix: "pico-" !default;
6+
47
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
58
$semantic-root-element: "body" !default;
69

@@ -67,3 +70,6 @@ $viewports: (
6770
lg: 920px,
6871
xl: 1130px
6972
) !default;
73+
74+
// Shortcut for CSS vars prefix
75+
$✨: --#{$css-var-prefix};

‎scss/components/_accordion.scss

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
@use "../settings";
1+
@use "../settings" as *;
22

33
/**
44
* Accordion (<details>)
55
*/
66

77
details {
88
display: block;
9-
margin-bottom: var(--spacing);
10-
padding-bottom: var(--spacing);
11-
border-bottom: var(--border-width) solid var(--accordion-border-color);
9+
margin-bottom: var(#{$✨}spacing);
10+
padding-bottom: var(#{$✨}spacing);
11+
border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
1212

1313
summary {
1414
line-height: 1rem;
1515
list-style-type: none;
1616
cursor: pointer;
1717

1818
&:not([role]) {
19-
color: var(--accordion-close-summary-color);
19+
color: var(#{$✨}accordion-close-summary-color);
2020
}
2121

22-
@if settings.$enable-transitions {
23-
transition: color var(--transition);
22+
@if $enable-transitions {
23+
transition: color var(#{$✨}transition);
2424
}
2525

2626
// Reset marker
@@ -41,25 +41,25 @@ details {
4141
display: block;
4242
width: 1rem;
4343
height: 1rem;
44-
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
44+
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
4545
float: right;
4646
transform: rotate(-90deg);
47-
background-image: var(--icon-chevron);
47+
background-image: var(#{$✨}icon-chevron);
4848
background-position: right center;
4949
background-size: 1rem auto;
5050
background-repeat: no-repeat;
5151
content: "";
5252

53-
@if settings.$enable-transitions {
54-
transition: transform var(--transition);
53+
@if $enable-transitions {
54+
transition: transform var(#{$✨}transition);
5555
}
5656
}
5757

5858
&:focus {
5959
outline: none;
6060

6161
&:not([role="button"]) {
62-
color: var(--accordion-active-summary-color);
62+
color: var(#{$✨}accordion-active-summary-color);
6363
}
6464
}
6565

@@ -70,16 +70,16 @@ details {
7070

7171
// Marker
7272
&::after {
73-
height: calc(1rem * var(--line-height, 1.5));
74-
background-image: var(--icon-chevron-button);
73+
height: calc(1rem * var(#{$✨}line-height, 1.5));
74+
background-image: var(#{$✨}icon-chevron-button);
7575
}
7676

77-
@if settings.$enable-classes {
77+
@if $enable-classes {
7878
// .contrast
7979
&:not(.outline).contrast {
8080
// Marker
8181
&::after {
82-
background-image: var(--icon-chevron-button-inverse);
82+
background-image: var(#{$✨}icon-chevron-button-inverse);
8383
}
8484
}
8585
}
@@ -89,11 +89,11 @@ details {
8989
// Open
9090
&[open] {
9191
> summary {
92-
margin-bottom: calc(var(--spacing));
92+
margin-bottom: calc(var(#{$✨}spacing));
9393

9494
&:not([role]) {
9595
&:not(:focus) {
96-
color: var(--accordion-open-summary-color);
96+
color: var(#{$✨}accordion-open-summary-color);
9797
}
9898
}
9999

‎scss/components/_card.scss

+21-19
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,37 @@
1+
@use "../settings" as *;
2+
13
/**
24
* Card (<article>)
35
*/
46

57
article {
6-
margin: var(--block-spacing-vertical) 0;
7-
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
8-
border-radius: var(--border-radius);
9-
background: var(--card-background-color);
10-
box-shadow: var(--card-box-shadow);
8+
margin: var(#{$✨}block-spacing-vertical) 0;
9+
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
10+
border-radius: var(#{$✨}border-radius);
11+
background: var(#{$✨}card-background-color);
12+
box-shadow: var(#{$✨}card-box-shadow);
1113

1214
> header,
1315
> footer {
14-
margin-right: calc(var(--block-spacing-horizontal) * -1);
15-
margin-left: calc(var(--block-spacing-horizontal) * -1);
16-
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
17-
background-color: var(--card-sectionning-background-color);
16+
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
17+
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
18+
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
19+
background-color: var(#{$✨}card-sectionning-background-color);
1820
}
1921

2022
> header {
21-
margin-top: calc(var(--block-spacing-vertical) * -1);
22-
margin-bottom: var(--block-spacing-vertical);
23-
border-bottom: var(--border-width) solid var(--card-border-color);
24-
border-top-right-radius: var(--border-radius);
25-
border-top-left-radius: var(--border-radius);
23+
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
24+
margin-bottom: var(#{$✨}block-spacing-vertical);
25+
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
26+
border-top-right-radius: var(#{$✨}border-radius);
27+
border-top-left-radius: var(#{$✨}border-radius);
2628
}
2729

2830
> footer {
29-
margin-top: var(--block-spacing-vertical);
30-
margin-bottom: calc(var(--block-spacing-vertical) * -1);
31-
border-top: var(--border-width) solid var(--card-border-color);
32-
border-bottom-right-radius: var(--border-radius);
33-
border-bottom-left-radius: var(--border-radius);
31+
margin-top: var(#{$✨}block-spacing-vertical);
32+
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
33+
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
34+
border-bottom-right-radius: var(#{$✨}border-radius);
35+
border-bottom-left-radius: var(#{$✨}border-radius);
3436
}
3537
}

‎scss/components/_dropdown.scss

+41-40
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../settings";
1+
@use "../settings" as *;
22

33
/**
44
* Dropdown ([role="list"])
@@ -21,42 +21,43 @@ li[role="list"] > ul {
2121
flex-direction: column;
2222
margin: 0;
2323
padding: 0;
24-
border: var(--border-width) solid var(--dropdown-border-color);
25-
border-radius: var(--border-radius);
24+
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
25+
border-radius: var(#{$✨}border-radius);
2626
border-top-right-radius: 0;
2727
border-top-left-radius: 0;
28-
background-color: var(--dropdown-background-color);
29-
box-shadow: var(--card-box-shadow);
30-
color: var(--dropdown-color);
28+
background-color: var(#{$✨}dropdown-background-color);
29+
box-shadow: var(#{$✨}card-box-shadow);
30+
color: var(#{$✨}dropdown-color);
3131
white-space: nowrap;
3232

3333
li {
3434
width: 100%;
3535
margin-bottom: 0;
36-
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
36+
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
37+
var(#{$✨}form-element-spacing-horizontal);
3738
list-style: none;
3839

3940
&:first-of-type {
40-
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
41+
margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
4142
}
4243

4344
&:last-of-type {
44-
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
45+
margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
4546
}
4647

4748
a {
4849
display: block;
49-
margin: calc(var(--form-element-spacing-vertical) * -0.5)
50-
calc(var(--form-element-spacing-horizontal) * -1);
51-
padding: calc(var(--form-element-spacing-vertical) * 0.5)
52-
var(--form-element-spacing-horizontal);
50+
margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5)
51+
calc(var(#{$✨}form-element-spacing-horizontal) * -1);
52+
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
53+
var(#{$✨}form-element-spacing-horizontal);
5354
overflow: hidden;
54-
color: var(--dropdown-color);
55+
color: var(#{$✨}dropdown-color);
5556
text-decoration: none;
5657
text-overflow: ellipsis;
5758

5859
&:hover {
59-
background-color: var(--dropdown-hover-background-color);
60+
background-color: var(#{$✨}dropdown-hover-background-color);
6061
}
6162
}
6263
}
@@ -68,7 +69,7 @@ li[role="list"] > a {
6869
&::after {
6970
display: block;
7071
width: 1rem;
71-
height: calc(1rem * var(--line-height, 1.5));
72+
height: calc(1rem * var(#{$✨}line-height, 1.5));
7273
margin-inline-start: 0.5rem;
7374
float: right;
7475
transform: rotate(0deg);
@@ -90,30 +91,30 @@ details[role="list"] {
9091

9192
&:not([role]) {
9293
height: calc(
93-
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) *
94-
2
94+
1rem * var(#{$✨}line-height) + var(#{$✨}form-element-spacing-vertical) * 2 +
95+
var(#{$✨}border-width) * 2
9596
);
96-
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
97-
border: var(--border-width) solid var(--form-element-border-color);
98-
border-radius: var(--border-radius);
99-
background-color: var(--form-element-background-color);
100-
color: var(--form-element-placeholder-color);
97+
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
98+
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
99+
border-radius: var(#{$✨}border-radius);
100+
background-color: var(#{$✨}form-element-background-color);
101+
color: var(#{$✨}form-element-placeholder-color);
101102
line-height: inherit;
102103
cursor: pointer;
103104

104-
@if settings.$enable-transitions {
105-
transition: background-color var(--transition), border-color var(--transition),
106-
color var(--transition), box-shadow var(--transition);
105+
@if $enable-transitions {
106+
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
107+
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
107108
}
108109

109110
&:active,
110111
&:focus {
111-
border-color: var(--form-element-active-border-color);
112-
background-color: var(--form-element-active-background-color);
112+
border-color: var(#{$✨}form-element-active-border-color);
113+
background-color: var(#{$✨}form-element-active-background-color);
113114
}
114115

115116
&:focus {
116-
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
117+
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
117118
}
118119
}
119120
}
@@ -148,7 +149,7 @@ nav li[role="list"] a {
148149
nav details[role="list"] summary + ul,
149150
nav li[role="list"] > ul {
150151
min-width: fit-content;
151-
border-radius: var(--border-radius);
152+
border-radius: var(#{$✨}border-radius);
152153

153154
li a {
154155
border-radius: 0;
@@ -160,25 +161,25 @@ nav details[role="list"] {
160161
summary,
161162
summary:not([role]) {
162163
height: auto;
163-
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
164+
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
164165
}
165166

166167
&[open] summary {
167-
border-radius: var(--border-radius);
168+
border-radius: var(#{$✨}border-radius);
168169
}
169170

170171
summary + ul {
171-
margin-top: var(--outline-width);
172+
margin-top: var(#{$✨}outline-width);
172173
margin-inline-start: 0;
173174
}
174175

175176
summary[role="link"] {
176-
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
177-
line-height: var(--line-height);
177+
margin-bottom: calc(var(#{$✨}nav-link-spacing-vertical) * -1);
178+
line-height: var(#{$✨}line-height);
178179

179180
+ ul {
180-
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
181-
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
181+
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
182+
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
182183
}
183184
}
184185
}
@@ -195,13 +196,13 @@ li[role="list"] {
195196

196197
> ul {
197198
display: none;
198-
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
199+
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
199200
margin-inline-start: calc(
200-
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
201+
var(#{$✨}nav-element-spacing-horizontal) - var(#{$✨}nav-link-spacing-horizontal)
201202
);
202203
}
203204

204205
> a::after {
205-
background-image: var(--icon-chevron);
206+
background-image: var(#{$✨}icon-chevron);
206207
}
207208
}

‎scss/components/_loading.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../settings" as *;
2+
13
/**
24
* Loading ([aria-busy=true])
35
*/
@@ -20,15 +22,15 @@
2022
vertical-align: text-bottom;
2123
vertical-align: -0.125em; // Visual alignment
2224
animation: spinner 0.75s linear infinite;
23-
opacity: var(--loading-spinner-opacity);
25+
opacity: var(#{$✨}loading-spinner-opacity);
2426
}
2527

2628
&:not(:empty) {
2729
&::before {
28-
margin-right: calc(var(--spacing) * 0.5);
30+
margin-right: calc(var(#{$✨}spacing) * 0.5);
2931
margin-left: 0;
3032
margin-inline-start: 0;
31-
margin-inline-end: calc(var(--spacing) * 0.5);
33+
margin-inline-end: calc(var(#{$✨}spacing) * 0.5);
3234
}
3335
}
3436

0 commit comments

Comments
 (0)