Skip to content

Commit 3c96e60

Browse files
lucaslarrochelucaslarroche
committed
refactor: update $css-var-prefix name
1 parent 2c97dc3 commit 3c96e60

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+866
-759
lines changed

‎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.colors.css.map

+1-1
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.fluid.classless.css.map

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

‎scss/_settings.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// ––––––––––––––––––––
55

66
// Prefix for CSS variables
7-
$css-var-prefix: "pico-" !default;
7+
$css-var-prefix: "--pico-" !default; // Must start with "--"
88

99
// Define the root element used to target <header>, <main>, <footer>
1010
// with $enable-semantic-container and $enable-responsive-spacings
@@ -137,6 +137,3 @@ $modules: map.merge(
137137
),
138138
$modules
139139
);
140-
141-
// Shortcut for CSS vars prefix
142-
$✨: --#{$css-var-prefix};

‎scss/colors/utilities/_background-colors.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
1212
@if map.get(settings.$utilities, "color-for-background-colors") {
1313
@if utils.foreground-brightness($background-color) == "light" {
1414
@if $enable-css-vars {
15-
color: var(--#{$css-var-color-prefix}-light);
15+
color: var(#{$css-var-color-prefix}-light);
1616
} @else {
1717
color: utils.display-color(map.get(settings.$palette, "light-color"));
1818
}
1919
} @else {
2020
@if $enable-css-vars {
21-
color: var(--#{$css-var-color-prefix}-dark);
21+
color: var(#{$css-var-color-prefix}-dark);
2222
} @else {
2323
color: utils.display-color(map.get(settings.$palette, "dark-color"));
2424
}
@@ -40,7 +40,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
4040
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
4141
$value: $color-value;
4242
@if $enable-css-vars {
43-
$value: var(--#{$css-var-family-name});
43+
$value: var(#{$css-var-family-name});
4444
} @else {
4545
$value: utils.display-color($color-value);
4646
}
@@ -57,7 +57,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
5757
{
5858
$value: $color-value;
5959
@if $enable-css-vars {
60-
$value: var(--#{$css-var-family-name}-#{$shade});
60+
$value: var(#{$css-var-family-name}-#{$shade});
6161
} @else {
6262
$value: utils.display-color($color-value);
6363
}

‎scss/colors/utilities/_colors.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
// Main color
2121
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
2222
@if $enable-css-vars {
23-
$color-value: var(--#{$css-var-family-name});
23+
$color-value: var(#{$css-var-family-name});
2424
} @else {
2525
$color-value: utils.display-color($color-value);
2626
}
@@ -35,7 +35,7 @@
3535
map.get(settings.$palette, "enable-shades")
3636
{
3737
@if $enable-css-vars {
38-
$color-value: var(--#{$css-var-family-name}-#{$shade});
38+
$color-value: var(#{$css-var-family-name}-#{$shade});
3939
} @else {
4040
$color-value: utils.display-color($color-value);
4141
}

‎scss/colors/utilities/_css-vars.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -19,32 +19,32 @@
1919
@each $shade, $color-value in $colors {
2020
// Main color
2121
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
22-
--#{$css-var-family-name}: #{utils.display-color($color-value)};
22+
#{$css-var-family-name}: #{utils.display-color($color-value)};
2323
}
2424

2525
// Shades
2626
@else if
2727
index(map.get(settings.$palette, "shades"), $shade) and
2828
map.get(settings.$palette, "enable-shades")
2929
{
30-
--#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
30+
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
3131
}
3232
}
3333
}
3434
}
3535

3636
// Black & white
3737
@if map.get(settings.$palette, "enable-black-and-white") {
38-
--#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
39-
--#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
38+
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
39+
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
4040
}
4141

4242
// Text color variables
4343
@if map.get(settings.$utilities, "color-for-background-colors") {
44-
--#{$css-var-color-prefix}-light: #{utils.display-color(
44+
#{$css-var-color-prefix}-light: #{utils.display-color(
4545
map.get(settings.$palette, "light-color")
4646
)};
47-
--#{$css-var-color-prefix}-dark: #{utils.display-color(
47+
#{$css-var-color-prefix}-dark: #{utils.display-color(
4848
map.get(settings.$palette, "dark-color")
4949
)};
5050
}

‎scss/colors/utilities/_settings.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
@use "sass:map";
22
@use "../../settings" as pico-settings;
33

4+
// String replace function
5+
@function str-replace($string, $search, $replace: "") {
6+
$index: str-index($string, $search);
7+
@if $index {
8+
@return str-slice($string, 1, $index - 1) + $replace +
9+
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
10+
}
11+
@return $string;
12+
}
13+
414
// Prefix for CSS variables
515
$css-var-prefix: pico-settings.$css-var-prefix !default;
6-
$css-class-prefix: pico-settings.$css-var-prefix !default;
16+
$css-class-prefix: str-replace(pico-settings.$css-var-prefix, "--", "") !default;
717

818
// Palette
919
$palette: () !default;

‎scss/components/_accordion.scss

+13-13
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@
88

99
details {
1010
display: block;
11-
margin-bottom: var(#{$✨}spacing);
11+
margin-bottom: var(#{$css-var-prefix}spacing);
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(#{$css-var-prefix}accordion-close-summary-color);
2020
}
2121

2222
@if $enable-transitions {
23-
transition: color var(#{$✨}transition);
23+
transition: color var(#{$css-var-prefix}transition);
2424
}
2525

2626
// Reset marker
@@ -41,33 +41,33 @@
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(#{$css-var-prefix}spacing, 1rem) * 0.5);
4545
float: right;
4646
transform: rotate(-90deg);
47-
background-image: var(#{$✨}icon-chevron);
47+
background-image: var(#{$css-var-prefix}icon-chevron);
4848
background-position: right center;
4949
background-size: 1rem auto;
5050
background-repeat: no-repeat;
5151
content: "";
5252

5353
@if $enable-transitions {
54-
transition: transform var(#{$✨}transition);
54+
transition: transform var(#{$css-var-prefix}transition);
5555
}
5656
}
5757

5858
&:focus {
5959
outline: none;
6060

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

6666
&:focus-visible {
6767
&:not([role]) {
68-
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
69-
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
70-
color: var(#{$✨}primary);
68+
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
69+
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
70+
color: var(#{$css-var-prefix}primary);
7171
}
7272
}
7373

@@ -78,19 +78,19 @@
7878

7979
// Marker
8080
&::after {
81-
height: calc(1rem * var(#{$✨}line-height, 1.5));
81+
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
8282
}
8383
}
8484
}
8585

8686
// Open
8787
&[open] {
8888
> summary {
89-
margin-bottom: var(#{$✨}spacing);
89+
margin-bottom: var(#{$css-var-prefix}spacing);
9090

9191
&:not([role]) {
9292
&:not(:focus) {
93-
color: var(#{$✨}accordion-open-summary-color);
93+
color: var(#{$css-var-prefix}accordion-open-summary-color);
9494
}
9595
}
9696

‎scss/components/_card.scss

+25-19
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,40 @@
77
*/
88

99
article {
10-
margin-bottom: var(#{$✨}block-spacing-vertical);
11-
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
12-
border-radius: var(#{$✨}border-radius);
13-
background: var(#{$✨}card-background-color);
14-
box-shadow: var(#{$✨}card-box-shadow);
10+
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
11+
padding: var(#{$css-var-prefix}block-spacing-vertical)
12+
var(#{$css-var-prefix}block-spacing-horizontal);
13+
border-radius: var(#{$css-var-prefix}border-radius);
14+
background: var(#{$css-var-prefix}card-background-color);
15+
box-shadow: var(#{$css-var-prefix}card-box-shadow);
1516

1617
> header,
1718
> footer {
18-
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
19-
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
20-
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
21-
background-color: var(#{$✨}card-sectioning-background-color);
19+
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
20+
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
21+
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
22+
var(#{$css-var-prefix}block-spacing-horizontal);
23+
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
2224
}
2325

2426
> header {
25-
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
26-
margin-bottom: var(#{$✨}block-spacing-vertical);
27-
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
28-
border-top-right-radius: var(#{$✨}border-radius);
29-
border-top-left-radius: var(#{$✨}border-radius);
27+
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
28+
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
29+
border-bottom: var(#{$css-var-prefix}border-width)
30+
solid
31+
var(#{$css-var-prefix}card-border-color);
32+
border-top-right-radius: var(#{$css-var-prefix}border-radius);
33+
border-top-left-radius: var(#{$css-var-prefix}border-radius);
3034
}
3135

3236
> footer {
33-
margin-top: var(#{$✨}block-spacing-vertical);
34-
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
35-
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
36-
border-bottom-right-radius: var(#{$✨}border-radius);
37-
border-bottom-left-radius: var(#{$✨}border-radius);
37+
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
38+
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
39+
border-top: var(#{$css-var-prefix}border-width)
40+
solid
41+
var(#{$css-var-prefix}card-border-color);
42+
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
43+
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
3844
}
3945
}
4046
}

0 commit comments

Comments
 (0)