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

surpressimg sass warnings

Browse source
This commit is contained in:
Yohn 2024-11-10 11:27:44 -05:00
parent 4825b265c7
commit a085c20d2f
247 changed files with 9469 additions and 10096 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,9 @@
@function brightness($color) {
$color-brightness: round(
math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
(color.channel($color, "red", $space: rgb) * 299) +
(color.channel($color, "green", $space: rgb) * 587) +
(color.channel($color, "blue", $space: rgb) * 114),
1000
)
);

10
scss/components/_modal.scss
View file

@ -30,6 +30,11 @@
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color);
@if $enable-transitions {
transform: scale(1);
transition: transform var(#{$css-var-prefix}transition);
}
// Content
> article {
$close-selector: if(
@ -77,11 +82,6 @@
}
}
@if $enable-transitions {
transform: scale(1);
transition: transform var(#{$css-var-prefix}transition);
}
// Close icon
#{$close-selector} {
display: block;

9
scss/helpers/_functions.scss
View file

@ -1,6 +1,13 @@
@use "sass:color";
@use "sass:string";
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
@return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")"
);
}
// Generate a shadow layer

43
scss/themes/default/_dark.scss
View file

@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:color";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@ -7,7 +8,7 @@
// Default: Dark theme
@mixin theme {
color-scheme: dark;
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
// Text color
#{$css-var-prefix}color: #{$zinc-200};
@ -56,7 +57,7 @@
#{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
// Typography
@if map.get($modules, "content/typography") {
@ -73,8 +74,8 @@
#{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@ -97,7 +98,7 @@
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
@ -105,22 +106,34 @@
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}form-element-active-background-color: #{color.mix(
$slate-900,
$slate-850,
75%
)};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
$red-500,
$slate-600,
75%
)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
$jade-450,
$slate-600,
75%
)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
@ -156,7 +169,7 @@
#{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
}
// Dropdown (details.dropdown)
@ -175,7 +188,7 @@
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
}
// Progress
@ -192,8 +205,8 @@
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
// Focus for buttons, radio and select

37
scss/themes/default/_light.scss
View file

@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:color";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@ -17,7 +18,7 @@
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-550};
#{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
#{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
// Primary colors
#{$css-var-prefix}primary: theme-colors.get("primary", "light");
@ -69,12 +70,12 @@
#{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@ -97,7 +98,7 @@
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-color: #{$zinc-550};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
@ -105,7 +106,7 @@
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$css-var-prefix}form-element-color: #{$zinc-850};
@ -114,13 +115,21 @@
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
$red-500,
$zinc-350,
75%
)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
$jade-450,
$zinc-350,
75%
)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
@ -156,7 +165,7 @@
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)};
}
// Dropdown (details.dropdown)
@ -175,7 +184,7 @@
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)};
}
// Progress
@ -192,8 +201,8 @@
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
// Focus for buttons, radio and select

18
scss/themes/default/_styles.scss
View file

@ -24,18 +24,14 @@
#{$css-var-prefix}font-size: 100%;
#{$css-var-prefix}text-underline-offset: 0.1rem;
& {
// Borders
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem;
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem;
// Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out;
// Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings
#{$css-var-prefix}spacing: 1rem;
}
// Spacings
#{$css-var-prefix}spacing: 1rem;
// Spacings for typography elements
@if map.get($modules, "content/typography") {

3
scss/themes/default/_theme-colors.scss
View file

@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:color";
@use "../../colors" as *;
@use "../../settings" as *;
@ -442,7 +443,7 @@ $color-mappings: (
"primary-background": $yellow-100,
"primary-underline": rgba($yellow-350, 0.5),
"primary-hover": $yellow-250,
"primary-hover-background": mix($yellow-100, $yellow-50),
"primary-hover-background": color.mix($yellow-100, $yellow-50),
"primary-focus": rgba($yellow-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),