mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update $css-var-prefix name

Browse source
This commit is contained in:
Lucas Larroche 2023-12-28 13:21:52 +07:00
parent 2c97dc3ae5
commit 3c96e6043b
41 changed files with 866 additions and 759 deletions
Download patch file Download diff file Expand all files Collapse all files

8
scss/colors/utilities/_background-colors.scss
View file

@ -12,13 +12,13 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if map.get(settings.$utilities, "color-for-background-colors") {
@if utils.foreground-brightness($background-color) == "light" {
@if $enable-css-vars {
color: var(--#{$css-var-color-prefix}-light);
color: var(#{$css-var-color-prefix}-light);
} @else {
color: utils.display-color(map.get(settings.$palette, "light-color"));
}
} @else {
@if $enable-css-vars {
color: var(--#{$css-var-color-prefix}-dark);
color: var(#{$css-var-color-prefix}-dark);
} @else {
color: utils.display-color(map.get(settings.$palette, "dark-color"));
}
@ -40,7 +40,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value;
@if $enable-css-vars {
$value: var(--#{$css-var-family-name});
$value: var(#{$css-var-family-name});
} @else {
$value: utils.display-color($color-value);
}
@ -57,7 +57,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
{
$value: $color-value;
@if $enable-css-vars {
$value: var(--#{$css-var-family-name}-#{$shade});
$value: var(#{$css-var-family-name}-#{$shade});
} @else {
$value: utils.display-color($color-value);
}

4
scss/colors/utilities/_colors.scss
View file

@ -20,7 +20,7 @@
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars {
$color-value: var(--#{$css-var-family-name});
$color-value: var(#{$css-var-family-name});
} @else {
$color-value: utils.display-color($color-value);
}
@ -35,7 +35,7 @@
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
$color-value: var(--#{$css-var-family-name}-#{$shade});
$color-value: var(#{$css-var-family-name}-#{$shade});
} @else {
$color-value: utils.display-color($color-value);
}

12
scss/colors/utilities/_css-vars.scss
View file

@ -19,7 +19,7 @@
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
--#{$css-var-family-name}: #{utils.display-color($color-value)};
#{$css-var-family-name}: #{utils.display-color($color-value)};
}
// Shades
@ -27,7 +27,7 @@
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
--#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
}
}
}
@ -35,16 +35,16 @@
// Black & white
@if map.get(settings.$palette, "enable-black-and-white") {
--#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
--#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
}
// Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") {
--#{$css-var-color-prefix}-light: #{utils.display-color(
#{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color")
)};
--#{$css-var-color-prefix}-dark: #{utils.display-color(
#{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color")
)};
}

12
scss/colors/utilities/_settings.scss
View file

@ -1,9 +1,19 @@
@use "sass:map";
@use "../../settings" as pico-settings;
// String replace function
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Prefix for CSS variables
$css-var-prefix: pico-settings.$css-var-prefix !default;
$css-class-prefix: pico-settings.$css-var-prefix !default;
$css-class-prefix: str-replace(pico-settings.$css-var-prefix, "--", "") !default;
// Palette
$palette: () !default;