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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,74 +1,74 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$background-color-property-name: map.get(settings.$properties, "background-color");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@mixin foreground-color($background-color) {
@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);
} @else {
color: utils.display-color(map.get(settings.$palette, "light-color"));
}
} @else {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-dark);
} @else {
color: utils.display-color(map.get(settings.$palette, "dark-color"));
}
}
}
}
@mixin background-colors {
@if map.get(settings.$utilities, "background-colors") {
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
background-color: $value;
@include foreground-color($color-value);
}
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name}-#{$shade});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
background-color: $value;
@include foreground-color($color-value);
}
}
}
}
}
}
}
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$background-color-property-name: map.get(settings.$properties, "background-color");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@mixin foreground-color($background-color) {
@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);
} @else {
color: utils.display-color(map.get(settings.$palette, "light-color"));
}
} @else {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-dark);
} @else {
color: utils.display-color(map.get(settings.$palette, "dark-color"));
}
}
}
}
@mixin background-colors {
@if map.get(settings.$utilities, "background-colors") {
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
background-color: $value;
@include foreground-color($color-value);
}
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name}-#{$shade});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
background-color: $value;
@include foreground-color($color-value);
}
}
}
}
}
}
}

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

@ -1,51 +1,51 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
@mixin colors {
@if map.get(settings.$utilities, "colors") {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
color: $color-value;
}
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name}-#{$shade});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
color: $color-value;
}
}
}
}
}
}
}
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
@mixin colors {
@if map.get(settings.$utilities, "colors") {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
color: $color-value;
}
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name}-#{$shade});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
color: $color-value;
}
}
}
}
}
}
}

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

@ -1,55 +1,55 @@
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
@mixin css-vars {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
:root,
:host {
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
// Loop through colors
@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)};
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
}
}
}
}
// 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)};
}
// Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") {
#{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color")
)};
#{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color")
)};
}
}
}
}
@use "sass:map";
@use "sass:list";
@use "../../colors";
@use "settings";
@use "utils";
@mixin css-vars {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
:root,
:host {
// Loop through color families
@each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
// Loop through colors
@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)};
}
// Shades
@else if
list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
}
}
}
}
// 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)};
}
// Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") {
#{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color")
)};
#{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color")
)};
}
}
}
}

16
scss/colors/utilities/_index.scss
View file

@ -1,8 +1,8 @@
@forward "settings";
@use "css-vars" as *;
@use "colors" as *;
@use "background-colors" as *;
@include css-vars;
@include colors;
@include background-colors;
@forward "settings";
@use "css-vars" as *;
@use "colors" as *;
@use "background-colors" as *;
@include css-vars;
@include colors;
@include background-colors;

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

@ -1,106 +1,106 @@
@use "sass:map";
@use "../../settings" as pico-settings;
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default;
// Palette
$palette: () !default;
$palette: map.merge(
(
// Color families
"color-families": (
red,
pink,
fuchsia,
purple,
violet,
indigo,
blue,
azure,
cyan,
jade,
green,
lime,
yellow,
amber,
pumpkin,
orange,
sand,
grey,
zinc,
slate
),
// Shades
"shades": (
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
),
// Export main color for each family
"enable-main-color": true,
// Export shades for each family
"enable-shades": true,
// Export black and white
"enable-black-and-white": false,
// Light color used for dark backgrounds
"light-color": #fff,
// Dark color used for light backgrounds
"dark-color": #000,
// Export as HEX, RGB or HSL values
"export-as": "hex" // hex | rgb | hsl
),
$palette
);
// Properties names used for CSS variables and classes
// Useful if you want to shorten the names
$properties: () !default;
$properties: map.merge(
(
"color": "color",
"background-color": "background",
),
$properties
);
// Utilities to export
$utilities: () !default;
$utilities: map.merge(
(
// CSS Vars
"css-vars": true,
// Colors utility classes
"colors": true,
// Background color utility classes
"background-colors": true,
// Color value for background color utility classes
"color-for-background-colors": true
),
$utilities
);
@use "sass:map";
@use "../../settings" as pico-settings;
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default;
// Palette
$palette: () !default;
$palette: map.merge(
(
// Color families
"color-families": (
red,
pink,
fuchsia,
purple,
violet,
indigo,
blue,
azure,
cyan,
jade,
green,
lime,
yellow,
amber,
pumpkin,
orange,
sand,
grey,
zinc,
slate
),
// Shades
"shades": (
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
),
// Export main color for each family
"enable-main-color": true,
// Export shades for each family
"enable-shades": true,
// Export black and white
"enable-black-and-white": false,
// Light color used for dark backgrounds
"light-color": #fff,
// Dark color used for light backgrounds
"dark-color": #000,
// Export as HEX, RGB or HSL values
"export-as": "hex" // hex | rgb | hsl
),
$palette
);
// Properties names used for CSS variables and classes
// Useful if you want to shorten the names
$properties: () !default;
$properties: map.merge(
(
"color": "color",
"background-color": "background",
),
$properties
);
// Utilities to export
$utilities: () !default;
$utilities: map.merge(
(
// CSS Vars
"css-vars": true,
// Colors utility classes
"colors": true,
// Background color utility classes
"background-colors": true,
// Color value for background color utility classes
"color-for-background-colors": true
),
$utilities
);

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

@ -1,63 +1,63 @@
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "sass:string";
@use "settings";
// Determines if the foreground needs to be light or dark
// depending on the background color passed.
// W3C reference: http://www.w3.org/TR/AERT#color-contrast
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
@function foreground-brightness($background-color) {
$background-color-brightness: brightness($background-color);
$light-color-brightness: brightness(#ffffff);
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
@return "light";
} @else {
@return "dark";
}
}
// Calculates the color brightness
// Color brightness is determined by the following formula:
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
@function brightness($color) {
$color-brightness: round(
math.div(
(color.channel($color, "red", $space: rgb) * 299) +
(color.channel($color, "green", $space: rgb) * 587) +
(color.channel($color, "blue", $space: rgb) * 114),
1000
)
);
@return $color-brightness;
}
// Returns the color as RGB, HSL or HEX
@function display-color($color) {
@if map.get(settings.$palette, "export-as") == "rgb" {
@return display-rgb($color);
}
@if map.get(settings.$palette, "export-as") == "hsl" {
@return display-hsl($color);
}
@return $color;
}
// Display color as HSL
@function display-hsl($color) {
@return unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
);
}
// Display color as RGB
@function display-rgb($color) {
@return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")"
);
}
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "sass:string";
@use "settings";
// Determines if the foreground needs to be light or dark
// depending on the background color passed.
// W3C reference: http://www.w3.org/TR/AERT#color-contrast
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
@function foreground-brightness($background-color) {
$background-color-brightness: brightness($background-color);
$light-color-brightness: brightness(#ffffff);
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
@return "light";
} @else {
@return "dark";
}
}
// Calculates the color brightness
// Color brightness is determined by the following formula:
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
@function brightness($color) {
$color-brightness: round(
math.div(
(color.channel($color, "red", $space: rgb) * 299) +
(color.channel($color, "green", $space: rgb) * 587) +
(color.channel($color, "blue", $space: rgb) * 114),
1000
)
);
@return $color-brightness;
}
// Returns the color as RGB, HSL or HEX
@function display-color($color) {
@if map.get(settings.$palette, "export-as") == "rgb" {
@return display-rgb($color);
}
@if map.get(settings.$palette, "export-as") == "hsl" {
@return display-hsl($color);
}
@return $color;
}
// Display color as HSL
@function display-hsl($color) {
@return unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
);
}
// Display color as RGB
@function display-rgb($color) {
@return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")"
);
}