Skip to content

Commit 3548875

Browse files
YohnYohn
committed
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier.
Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
1 parent 7ce5b5c commit 3548875

File tree

256 files changed

+1699
-41261
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

256 files changed

+1699
-41261
lines changed

‎.github/CONTRIBUTING.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
# Contributing to Pico
22

3-
Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls).
3+
Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/Yohn/PicoCSS/issues) or a [pull request](https://github.com/Yohn/PicoCSS/pulls).
44

55
## Bug reports
66

7-
The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
8-
- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead.
9-
- Please do not use the issue tracker for feature requests. Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have.
7+
The [issue tracker]((https://github.com/Yohn/PicoCSS/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
8+
- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/Yohn/PicoCSS/discussions/categories/help) instead.
9+
- Please do not use the issue tracker for feature requests. Instead, use our discussion forums to [suggest any ideas](https://github.com/Yohn/PicoCSS/discussions/categories/ideas) you have.
1010

1111
## Pull requests
1212

1313
Good pull requests, patches, improvements, and new features are a fantastic help.
1414

1515
**Please ask before starting work on any significant new features.**
16-
We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas).
16+
We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/Yohn/PicoCSS/discussions/categories/ideas).
1717

18-
[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
18+
[`dev`](https://github.com/Yohn/PicoCSS/tree/dev) branch is open for pull requests on `v3`.
1919

20-
[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
20+
[`main`](https://github.com/Yohn/PicoCSS/tree/main) branch is open to pull requests on `v2`.
2121

22-
**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`.
22+
**Do not edit [`/css`](https://github.com/Yohn/PicoCSS/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/Yohn/PicoCSS/tree/master/scss), then recompile the [`/css`](https://github.com/Yohn/PicoCSS/tree/master/css) files with `npm run build`.

‎.github/ISSUE_TEMPLATE/config.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
blank_issues_enabled: false
22
contact_links:
33
- name: Get Help
4-
url: https://github.com/picocss/pico/discussions/categories/help
4+
url: https://github.com/Yohn/PicoCSS/discussions/categories/help
55
about: If you can't get something to work the way you expect, open a question in our discussion forums.
66
- name: Feature Request
7-
url: https://github.com/picocss/pico/discussions/categories/ideas
8-
about: Suggest any ideas you have using our discussion forums.
7+
url: https://github.com/Yohn/PicoCSS/discussions/categories/ideas
8+
about: Suggest any ideas you have using our discussion forums.

‎README.md

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<p>
22
<a href="https://picocss.com" target="_blank">
33
<picture>
4-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
5-
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
6-
<img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
4+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-dark.svg">
5+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg">
6+
<img alt="Pico CSS" src="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg" width="auto" height="60">
77
</picture>
88
</a>
99
</p>
1010

11-
[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
12-
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)
13-
[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)
11+
[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
12+
[![npm version](https://img.shields.io/npm/v/@yohns/picocss?color=0172ad)](https://www.npmjs.com/package/@yohns/picocss)
13+
[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md)
1414
[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
1515

1616
## Yohns Updated Version
@@ -66,18 +66,18 @@ There are 4 ways to get started with pico.css:
6666

6767
### Install manually
6868

69-
[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
69+
[Download Pico](https://github.com/Yohn/PicoCSS/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
7070

7171
```html
7272
<link rel="stylesheet" href="css/pico.min.css" />
7373
```
7474

7575
### Usage from CDN
7676

77-
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
77+
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
7878

7979
```html
80-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.min.css" />
80+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.min.css" />
8181
```
8282

8383
### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
135135
```html
136136
<link
137137
rel="stylesheet"
138-
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.classless.min.css"
138+
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.classless.min.css"
139139
/>
140140
```
141141

@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
144144
```html
145145
<link
146146
rel="stylesheet"
147-
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.fluid.classless.min.css"
147+
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.fluid.classless.min.css"
148148
/>
149149
```
150150

@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
159159
<meta name="color-scheme" content="light dark" />
160160
<link
161161
rel="stylesheet"
162-
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.classless.min.css"
162+
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.classless.min.css"
163163
/>
164164
<title>Hello, world!</title>
165165
</head>
@@ -181,6 +181,7 @@ Pico CSS can be used without custom CSS for quick or small projects. However, it
181181

182182
**Getting started**
183183

184+
- [Yohns Pico CSS Additions](https://yohn.github.io/PicoCSS/)
184185
- [Quick start](https://picocss.com/docs)
185186
- [Version picker `New`](https://picocss.com/docs/version-picker)
186187
- [Color schemes](https://picocss.com/docs/color-schemes)
@@ -245,8 +246,8 @@ Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and
245246

246247
## Contributing
247248

248-
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
249+
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/Yohn/PicoCSS/blob/master/.github/CONTRIBUTING.md).
249250

250251
## Copyright and license
251252

252-
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
253+
Licensed under the [MIT License](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md).

‎css/pico.amber.css

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.0.6 (https://picocss.com)
3+
* Pico CSS ✨ v2.1.3 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2024 - Licensed under MIT
55
*/
66
/**
@@ -27,8 +27,8 @@
2727
--pico-block-spacing-horizontal: var(--pico-spacing);
2828
--pico-grid-column-gap: var(--pico-spacing);
2929
--pico-grid-row-gap: var(--pico-spacing);
30-
--pico-form-element-spacing-vertical: 0.75rem;
31-
--pico-form-element-spacing-horizontal: 1rem;
30+
--pico-form-element-spacing-vertical: calc(var(--pico-spacing) * 0.5);
31+
--pico-form-element-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
3232
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3333
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
3434
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
@@ -223,7 +223,7 @@ details summary[role=button]:not(.outline)::after {
223223
filter: brightness(0) invert(1);
224224
}
225225

226-
[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
226+
[aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
227227
filter: brightness(0) invert(0);
228228
}
229229

@@ -462,8 +462,8 @@ details summary[role=button]:not(.outline)::after {
462462
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
463463
--pico-progress-background-color: #202632;
464464
--pico-progress-color: var(--pico-primary-background);
465-
--pico-tooltip-background-color: var(--pico-contrast-background);
466-
--pico-tooltip-color: var(--pico-contrast-inverse);
465+
--pico-tooltip-background-color: var(--pico-contrast-inverse);
466+
--pico-tooltip-color: var(--pico-contrast-background);
467467
--pico-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='rgb(42, 123, 111)' 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");
468468
--pico-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='rgb(149.5, 74, 80)' 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");
469469
--pico-timeline-line-color: var(--pico-primary-background);
@@ -601,8 +601,8 @@ details summary[role=button]:not(.outline)::after {
601601
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
602602
--pico-progress-background-color: #202632;
603603
--pico-progress-color: var(--pico-primary-background);
604-
--pico-tooltip-background-color: var(--pico-contrast-background);
605-
--pico-tooltip-color: var(--pico-contrast-inverse);
604+
--pico-tooltip-background-color: var(--pico-contrast-inverse);
605+
--pico-tooltip-color: var(--pico-contrast-background);
606606
--pico-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='rgb(42, 123, 111)' 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");
607607
--pico-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='rgb(149.5, 74, 80)' 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");
608608
--pico-timeline-line-color: var(--pico-primary-background);
@@ -1527,6 +1527,7 @@ button,
15271527
line-height: var(--pico-line-height);
15281528
text-align: center;
15291529
text-decoration: none;
1530+
cursor: pointer;
15301531
-webkit-user-select: none;
15311532
-moz-user-select: none;
15321533
user-select: none;
@@ -3551,7 +3552,7 @@ dialog[role=alert] {
35513552
-moz-user-select: none;
35523553
user-select: none;
35533554
}
3554-
dialog[role=alert] > * {
3555+
dialog[role=alert] * {
35553556
color: var(--pico-primary-inverse);
35563557
font-weight: var(--pico-font-weight);
35573558
font-size: var(--pico-font-size);

‎css/pico.amber.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.blue.css

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.0.6 (https://picocss.com)
3+
* Pico CSS ✨ v2.1.3 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2024 - Licensed under MIT
55
*/
66
/**
@@ -27,8 +27,8 @@
2727
--pico-block-spacing-horizontal: var(--pico-spacing);
2828
--pico-grid-column-gap: var(--pico-spacing);
2929
--pico-grid-row-gap: var(--pico-spacing);
30-
--pico-form-element-spacing-vertical: 0.75rem;
31-
--pico-form-element-spacing-horizontal: 1rem;
30+
--pico-form-element-spacing-vertical: calc(var(--pico-spacing) * 0.5);
31+
--pico-form-element-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
3232
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3333
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
3434
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
@@ -223,7 +223,7 @@ details summary[role=button]:not(.outline)::after {
223223
filter: brightness(0) invert(1);
224224
}
225225

226-
[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
226+
[aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
227227
filter: brightness(0) invert(1);
228228
}
229229

@@ -462,8 +462,8 @@ details summary[role=button]:not(.outline)::after {
462462
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
463463
--pico-progress-background-color: #202632;
464464
--pico-progress-color: var(--pico-primary-background);
465-
--pico-tooltip-background-color: var(--pico-contrast-background);
466-
--pico-tooltip-color: var(--pico-contrast-inverse);
465+
--pico-tooltip-background-color: var(--pico-contrast-inverse);
466+
--pico-tooltip-color: var(--pico-contrast-background);
467467
--pico-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='rgb(42, 123, 111)' 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");
468468
--pico-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='rgb(149.5, 74, 80)' 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");
469469
--pico-timeline-line-color: var(--pico-primary-background);
@@ -601,8 +601,8 @@ details summary[role=button]:not(.outline)::after {
601601
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
602602
--pico-progress-background-color: #202632;
603603
--pico-progress-color: var(--pico-primary-background);
604-
--pico-tooltip-background-color: var(--pico-contrast-background);
605-
--pico-tooltip-color: var(--pico-contrast-inverse);
604+
--pico-tooltip-background-color: var(--pico-contrast-inverse);
605+
--pico-tooltip-color: var(--pico-contrast-background);
606606
--pico-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='rgb(42, 123, 111)' 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");
607607
--pico-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='rgb(149.5, 74, 80)' 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");
608608
--pico-timeline-line-color: var(--pico-primary-background);
@@ -1527,6 +1527,7 @@ button,
15271527
line-height: var(--pico-line-height);
15281528
text-align: center;
15291529
text-decoration: none;
1530+
cursor: pointer;
15301531
-webkit-user-select: none;
15311532
-moz-user-select: none;
15321533
user-select: none;
@@ -3551,7 +3552,7 @@ dialog[role=alert] {
35513552
-moz-user-select: none;
35523553
user-select: none;
35533554
}
3554-
dialog[role=alert] > * {
3555+
dialog[role=alert] * {
35553556
color: var(--pico-primary-inverse);
35563557
font-weight: var(--pico-font-weight);
35573558
font-size: var(--pico-font-size);

‎css/pico.blue.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)