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

Merge branch 'dev' into pr/596

Browse source
This commit is contained in:
Lucas Larroche 2025-03-09 20:09:48 +07:00
commit e66b84b53e
21 changed files with 1045 additions and 649 deletions
Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -55,7 +55,7 @@ There are 4 ways to get started with pico.css:
[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website. [Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
```html ```html
<link rel="stylesheet" href="css/pico.min.css" /> <link rel="stylesheet" href="css/pico.min.css">
``` ```
### Usage from CDN ### Usage from CDN
@ -63,7 +63,7 @@ There are 4 ways to get started with pico.css:
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css. Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
``` ```
### Install with NPM ### Install with NPM
@ -98,7 +98,7 @@ composer require picocss/pico
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/pico.min.css"> <link rel="stylesheet" href="css/pico.min.css">
<title>Hello world!</title> <title>Hello world!</title>
</head> </head>
@ -131,7 +131,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
/> >
``` ```
Then just write pure HTML, and it should look great: Then just write pure HTML, and it should look great:
@ -140,13 +140,13 @@ Then just write pure HTML, and it should look great:
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark">
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
/> >
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>
<body> <body>

16
package.json
View file

@ -36,7 +36,7 @@
"lint": "run-s \"lint:*\" --silent", "lint": "run-s \"lint:*\" --silent",
"lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'", "lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace", "lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
"build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/", "build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/ --silence-deprecation=global-builtin,color-functions,mixed-decls",
"build:themes": "node scripts/build-themes", "build:themes": "node scripts/build-themes",
"build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css", "build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css", "build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css",
@ -49,17 +49,17 @@
"done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'" "done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.18", "autoprefixer": "^10.4.20",
"caniuse-lite": "1.0.30001591", "caniuse-lite": "1.0.30001702",
"clean-css-cli": "^5.6.3", "clean-css-cli": "^5.6.3",
"css-declaration-sorter": "^7.1.1", "css-declaration-sorter": "^7.2.0",
"nodemon": "^3.1.0", "nodemon": "^3.1.9",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.35", "postcss": "^8.5.3",
"postcss-cli": "^11.0.0", "postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"prettier": "^3.2.5", "prettier": "^3.5.3",
"sass": "^1.71.1" "sass": "^1.85.1"
}, },
"engines": { "engines": {
"node": ">=18.19.0" "node": ">=18.19.0"

7
scripts/build-themes.js
View file

@ -103,7 +103,7 @@ themeColors.forEach((themeColor, colorIndex) => {
}, },
]; ];
const displayAsciiProgress = ({length, index, color}) => { const displayAsciiProgress = ({ length, index, color }) => {
const progress = Math.round((index / length) * 100); const progress = Math.round((index / length) * 100);
const bar = "■".repeat(progress / 10); const bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10); const empty = "□".repeat(10 - progress / 10);
@ -127,7 +127,10 @@ themeColors.forEach((themeColor, colorIndex) => {
// Compile the file // Compile the file
const result = sass.compile( const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`), path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
{ outputStyle: "compressed" }, {
outputStyle: "compressed",
silenceDeprecations: ["global-builtin", "color-functions", "mixed-decls"],
},
); );
// Write the file // Write the file

2
scss/_index.scss
View file

@ -22,7 +22,7 @@
@use "content/embedded"; // audio, canvas, iframe, img, svg, video @use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ... @use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption @use "content/figure"; // figure, figcaption
@use "content/miscs"; // hr, template, [hidden], dialog, canvas @use "content/misc"; // hr, template, [hidden], dialog, canvas
// Forms // Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend @use "forms/basics"; // input, select, textarea, label, fieldset, legend

17
scss/_settings.scss
View file

@ -49,8 +49,7 @@ $breakpoints: map.deep-merge(
( (
// Small (landscape phones) // Small (landscape phones)
// Font size: 17px // Font size: 17px
sm: sm: (
(
breakpoint: 576px, breakpoint: 576px,
viewport: 510px, viewport: 510px,
root-font-size: 106.25%, root-font-size: 106.25%,
@ -58,8 +57,7 @@ $breakpoints: map.deep-merge(
// Medium (tablets) // Medium (tablets)
// Font size: 18px // Font size: 18px
md: md: (
(
breakpoint: 768px, breakpoint: 768px,
viewport: 700px, viewport: 700px,
root-font-size: 112.5%, root-font-size: 112.5%,
@ -67,8 +65,7 @@ $breakpoints: map.deep-merge(
// Large // Large
// Font size: 19px // Font size: 19px
lg: lg: (
(
breakpoint: 1024px, breakpoint: 1024px,
viewport: 950px, viewport: 950px,
root-font-size: 118.75%, root-font-size: 118.75%,
@ -76,8 +73,7 @@ $breakpoints: map.deep-merge(
// Extra large // Extra large
// Font size: 20px // Font size: 20px
xl: xl: (
(
breakpoint: 1280px, breakpoint: 1280px,
viewport: 1200px, viewport: 1200px,
root-font-size: 125%, root-font-size: 125%,
@ -85,8 +81,7 @@ $breakpoints: map.deep-merge(
// Extra extra large // Extra extra large
// Font size: 21px // Font size: 21px
xxl: xxl: (
(
breakpoint: 1536px, breakpoint: 1536px,
viewport: 1450px, viewport: 1450px,
root-font-size: 131.25%, root-font-size: 131.25%,
@ -118,7 +113,7 @@ $modules: map.merge(
"content/table": true, "content/table": true,
"content/code": true, "content/code": true,
"content/figure": true, "content/figure": true,
"content/miscs": true, "content/misc": true,
// Forms // Forms
"forms/basics": true, "forms/basics": true,

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

@ -9,7 +9,8 @@
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name}; $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars { @if $enable-css-vars {
:root { :root,
:host {
// Loop through color families // Loop through color families
@each $family, $colors in colors.$colors { @each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) { @if index(map.get(settings.$palette, "color-families"), $family) {

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

@ -10,8 +10,7 @@ $palette: () !default;
$palette: map.merge( $palette: map.merge(
( (
// Color families // Color families
"color-families": "color-families": (
(
red, red,
pink, pink,
fuchsia, fuchsia,
@ -34,8 +33,7 @@ $palette: map.merge(
slate slate
), ),
// Shades // Shades
"shades": "shades": (
(
50, 50,
100, 100,
150, 150,

16
scss/components/_dropdown.scss
View file

@ -14,7 +14,7 @@
// Marker // Marker
// –––––––––––––––––––– // ––––––––––––––––––––
summary, > summary,
> button, > button,
> a { > a {
&::after { &::after {
@ -43,10 +43,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
// Bouton as a select // Button as a select
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown summary:not([role]) { #{$parent-selector} details.dropdown > summary:not([role]) {
height: calc( height: calc(
1rem * 1rem *
var(#{$css-var-prefix}line-height) + var(#{$css-var-prefix}line-height) +
@ -126,7 +126,7 @@
display: inline; display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary { > summary {
&::after { &::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
@ -156,7 +156,7 @@
// Submenu // Submenu
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown summary + ul { #{$parent-selector} details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -236,14 +236,14 @@
// Button opened // Button opened
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
// Menu opened // Menu opened
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Inside container type accordion // 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
+ ul { + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@ -259,7 +259,7 @@
// Close for dropdown // Close for dropdown
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
&::before { &::before {
display: block; display: block;
z-index: 1; z-index: 1;

2
scss/components/_loading.scss
View file

@ -7,7 +7,7 @@
*/ */
// Everything except form elements // Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) { #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
&::before { &::before {

5
scss/components/_modal.scss
View file

@ -6,7 +6,8 @@
* Modal (<dialog>) * Modal (<dialog>)
*/ */
:root { :root,
:host {
#{$css-var-prefix}scrollbar-width: 0px; #{$css-var-prefix}scrollbar-width: 0px;
} }
@ -31,7 +32,7 @@
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
// Content // Content
article { > article {
$close-selector: if( $close-selector: if(
$enable-classes, $enable-classes,
".close, :is(a, button)[rel=prev]", ".close, :is(a, button)[rel=prev]",

12
scss/content/_code.scss
View file

@ -21,7 +21,8 @@
font-family: var(#{$css-var-prefix}font-family); // 1 font-family: var(#{$css-var-prefix}font-family); // 1
} }
#{$parent-selector} pre code { #{$parent-selector} pre code,
#{$parent-selector} pre samp {
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
} }
@ -37,7 +38,8 @@
#{$parent-selector} pre, #{$parent-selector} pre,
#{$parent-selector} code, #{$parent-selector} code,
#{$parent-selector} kbd { #{$parent-selector} kbd,
#{$parent-selector} samp {
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color); background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color); color: var(#{$css-var-prefix}code-color);
@ -46,7 +48,8 @@
} }
#{$parent-selector} code, #{$parent-selector} code,
#{$parent-selector} kbd { #{$parent-selector} kbd,
#{$parent-selector} samp {
display: inline-block; display: inline-block;
padding: 0.375rem; padding: 0.375rem;
} }
@ -56,7 +59,8 @@
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto; overflow-x: auto;
> code { > code,
> samp {
display: block; display: block;
padding: var(#{$css-var-prefix}spacing); padding: var(#{$css-var-prefix}spacing);
background: none; background: none;

3
scss/content/_embedded.scss
View file

@ -47,7 +47,8 @@
} }
// Hide the overflow in IE // Hide the overflow in IE
#{$parent-selector} svg:not(:root) { #{$parent-selector} svg:not(:root),
#{$parent-selector} svg:not(:host) {
overflow: hidden; overflow: hidden;
} }
} }

4
scss/content/_miscs.scss → scss/content/_misc.scss
View file

@ -1,9 +1,9 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/miscs") { @if map.get($modules, "content/misc") {
/** /**
* Miscs * Misc
*/ */
// Reboot based on : // Reboot based on :

4
scss/content/_table.scss
View file

@ -52,8 +52,8 @@
@if enable-classes { @if enable-classes {
#{$parent-selector} table { #{$parent-selector} table {
&.striped { &.striped {
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd of :not([hidden])) th,
tbody tr:nth-child(odd) td { tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color); background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
} }
} }

2
scss/forms/_checkbox-radio-switch.scss
View file

@ -79,7 +79,7 @@
} }
} }
// Switchs // Switches
#{$parent-selector} [type="checkbox"][role="switch"] { #{$parent-selector} [type="checkbox"][role="switch"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color); #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);

14
scss/helpers/_functions.scss
View file

@ -11,39 +11,39 @@
// Generate a shadow with 7 layers // Generate a shadow with 7 layers
@function shadow($color) { @function shadow($color) {
$box-shadow-elevation: 1rem; $box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem; $box-shadow-blur-strength: 6rem;
$box-shadow-opacity: 0.06; $box-shadow-opacity: 0.06;
@return shadow-layer( @return shadow-layer(
$box-shadow-elevation * 0.029, $box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029, $box-shadow-blur-strength * 0.029,
$box-shadow-opacity * 0.283, $box-shadow-opacity * 0.283,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.067, $box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067, $box-shadow-blur-strength * 0.067,
$box-shadow-opacity * 0.4, $box-shadow-opacity * 0.4,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.125, $box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125, $box-shadow-blur-strength * 0.125,
$box-shadow-opacity * 0.5, $box-shadow-opacity * 0.5,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.225, $box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225, $box-shadow-blur-strength * 0.225,
$box-shadow-opacity * 0.6, $box-shadow-opacity * 0.6,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.417, $box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417, $box-shadow-blur-strength * 0.417,
$box-shadow-opacity * 0.717, $box-shadow-opacity * 0.717,
$color $color
), ),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color), shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))}; 0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
} }

3
scss/layout/_document.scss
View file

@ -34,7 +34,8 @@
// 3. Use a 4-space tab width in all browsers (opinionated) // 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated) // 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS // 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root) { :where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4 -webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5 -webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5 text-size-adjust: 100%; // 5

2
scss/layout/_grid.scss
View file

@ -20,7 +20,7 @@
} }
& > * { & > * {
min-width: 0; // HACK for childs in overflow min-width: 0; // HACK for children in overflow
} }
} }
} }

6
scss/themes/default/_schemes.scss
View file

@ -12,14 +12,16 @@
// Light color scheme (Default) // Light color scheme (Default)
// Can be forced with data-theme="light" // Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme; @include light.theme;
} }
// Dark color scheme (Auto) // Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme; @include dark.theme;
} }
} }

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

@ -9,15 +9,17 @@
* Styles * Styles
*/ */
:root { :root,
:host {
// Typography // Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", #{$css-var-prefix}font-family-emoji:
"Noto Color Emoji"; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
#{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, #{$css-var-prefix}font-family-sans-serif:
Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
sans-serif, var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
var(#{$css-var-prefix}font-family-emoji); var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif); #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$css-var-prefix}line-height: 1.5; #{$css-var-prefix}line-height: 1.5;
#{$css-var-prefix}font-weight: 400; #{$css-var-prefix}font-weight: 400;
@ -143,7 +145,7 @@
} }
} }
// Responsives spacings // Responsive spacings
@if $enable-responsive-spacings { @if $enable-responsive-spacings {
// Landmarks and section // Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") { @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {

1536
yarn.lock
View file

File diff suppressed because it is too large Load diff