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.
```html
<link rel="stylesheet" href="css/pico.min.css" />
<link rel="stylesheet" href="css/pico.min.css">
```
### 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.
```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
@ -98,7 +98,7 @@ composer require picocss/pico
<head>
<meta charset="utf-8">
<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">
<title>Hello world!</title>
</head>
@ -131,7 +131,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
<link
rel="stylesheet"
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:
@ -140,13 +140,13 @@ Then just write pure HTML, and it should look great:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
/>
>
<title>Hello, world!</title>
</head>
<body>

16
package.json
View file

@ -36,7 +36,7 @@
"lint": "run-s \"lint:*\" --silent",
"lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
"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: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",
@ -49,17 +49,17 @@
"done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
},
"devDependencies": {
"autoprefixer": "^10.4.18",
"caniuse-lite": "1.0.30001591",
"autoprefixer": "^10.4.20",
"caniuse-lite": "1.0.30001702",
"clean-css-cli": "^5.6.3",
"css-declaration-sorter": "^7.1.1",
"nodemon": "^3.1.0",
"css-declaration-sorter": "^7.2.0",
"nodemon": "^3.1.9",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.35",
"postcss": "^8.5.3",
"postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9",
"prettier": "^3.2.5",
"sass": "^1.71.1"
"prettier": "^3.5.3",
"sass": "^1.85.1"
},
"engines": {
"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 bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10);
@ -127,7 +127,10 @@ themeColors.forEach((themeColor, colorIndex) => {
// Compile the file
const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
{ outputStyle: "compressed" },
{
outputStyle: "compressed",
silenceDeprecations: ["global-builtin", "color-functions", "mixed-decls"],
},
);
// Write the file

2
scss/_index.scss
View file

@ -22,7 +22,7 @@
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption
@use "content/miscs"; // hr, template, [hidden], dialog, canvas
@use "content/misc"; // hr, template, [hidden], dialog, canvas
// Forms
@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)
// Font size: 17px
sm:
(
sm: (
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
@ -58,8 +57,7 @@ $breakpoints: map.deep-merge(
// Medium (tablets)
// Font size: 18px
md:
(
md: (
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
@ -67,8 +65,7 @@ $breakpoints: map.deep-merge(
// Large
// Font size: 19px
lg:
(
lg: (
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
@ -76,8 +73,7 @@ $breakpoints: map.deep-merge(
// Extra large
// Font size: 20px
xl:
(
xl: (
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
@ -85,8 +81,7 @@ $breakpoints: map.deep-merge(
// Extra extra large
// Font size: 21px
xxl:
(
xxl: (
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
@ -118,7 +113,7 @@ $modules: map.merge(
"content/table": true,
"content/code": true,
"content/figure": true,
"content/miscs": true,
"content/misc": true,
// Forms
"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};
@if $enable-css-vars {
:root {
:root,
:host {
// Loop through color families
@each $family, $colors in colors.$colors {
@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(
(
// Color families
"color-families":
(
"color-families": (
red,
pink,
fuchsia,
@ -34,8 +33,7 @@ $palette: map.merge(
slate
),
// Shades
"shades":
(
"shades": (
50,
100,
150,

16
scss/components/_dropdown.scss
View file

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

2
scss/components/_loading.scss
View file

@ -7,7 +7,7 @@
*/
// 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;
&::before {

5
scss/components/_modal.scss
View file

@ -6,7 +6,8 @@
* Modal (<dialog>)
*/
:root {
:root,
:host {
#{$css-var-prefix}scrollbar-width: 0px;
}
@ -31,7 +32,7 @@
color: var(#{$css-var-prefix}color);
// Content
article {
> article {
$close-selector: if(
$enable-classes,
".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
}
#{$parent-selector} pre code {
#{$parent-selector} pre code,
#{$parent-selector} pre samp {
font-size: inherit;
font-family: inherit;
}
@ -37,7 +38,8 @@
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color);
@ -46,7 +48,8 @@
}
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
display: inline-block;
padding: 0.375rem;
}
@ -56,7 +59,8 @@
margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto;
> code {
> code,
> samp {
display: block;
padding: var(#{$css-var-prefix}spacing);
background: none;

3
scss/content/_embedded.scss
View file

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

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

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

4
scss/content/_table.scss
View file

@ -52,8 +52,8 @@
@if enable-classes {
#{$parent-selector} table {
&.striped {
tbody tr:nth-child(odd) th,
tbody tr:nth-child(odd) td {
tbody tr:nth-child(odd of :not([hidden])) th,
tbody tr:nth-child(odd of :not([hidden])) td {
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"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-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
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-blur-strength: 6rem;
$box-shadow-opacity: 0.06;
@return shadow-layer(
$box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029,
$box-shadow-blur-strength * 0.029,
$box-shadow-opacity * 0.283,
$color
),
shadow-layer(
$box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067,
$box-shadow-blur-strength * 0.067,
$box-shadow-opacity * 0.4,
$color
),
shadow-layer(
$box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125,
$box-shadow-blur-strength * 0.125,
$box-shadow-opacity * 0.5,
$color
),
shadow-layer(
$box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225,
$box-shadow-blur-strength * 0.225,
$box-shadow-opacity * 0.6,
$color
),
shadow-layer(
$box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417,
$box-shadow-blur-strength * 0.417,
$box-shadow-opacity * 0.717,
$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))};
}

3
scss/layout/_document.scss
View file

@ -34,7 +34,8 @@
// 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root) {
:where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-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)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
:root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
:root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme;
}
}

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

@ -9,15 +9,17 @@
* Styles
*/
:root {
:root,
:host {
// Typography
#{$css-var-prefix}font-family-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,
Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
#{$css-var-prefix}font-family-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, 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);
#{$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}line-height: 1.5;
#{$css-var-prefix}font-weight: 400;
@ -143,7 +145,7 @@
}
}
// Responsives spacings
// Responsive spacings
@if $enable-responsive-spacings {
// Landmarks and 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