mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

160
docs/css/pico.docs.css
View file

@ -12,20 +12,29 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7);
--nav-border: rgba(115, 130, 140, 0.2);
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}
}
[data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}
/**
@ -39,72 +48,61 @@ html {
* Docs: Main (Grid)
*/
body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
}
@media (min-width: 576px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
}
}
@media (min-width: 768px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
}
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 992px) {
body > main {
grid-column-gap: calc(var(--spacing-gutter) * 4);
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
}
}
@media (min-width: 1200px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
body > main > * {
body > main > aside,
body > main div[role="document"] {
min-width: 0;
}
div[role="document"] > section::before {
display: block;
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
content: '';
}
@media (min-width: 576px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-4rem - 3.5rem + .5rem);
}
}
@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: '';
}
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
svg {
height: 1rem;
}
@ -133,11 +126,11 @@ svg {
*/
main > aside nav {
width: 100%;
margin-bottom: var(--spacing-block);
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav h1 {
margin-bottom: var(--spacing-typography);
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: 992px) {
@ -184,7 +177,7 @@ main > aside details {
}
main > aside details summary {
color: var(--h3);
color: var(--h3-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
@ -195,7 +188,7 @@ main > aside details summary::after {
}
main > aside details[open] summary {
color: var(--h3);
color: var(--h3-color);
}
/**
@ -217,8 +210,8 @@ main > aside details[open] summary {
#customization figure {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
}
@ -260,10 +253,14 @@ main > aside details[open] summary {
border-color: var(--primary);
}
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button {
display: block;
width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2);
margin-bottom: var(--spacing);
}
@media (min-width: 576px) {
@ -283,13 +280,15 @@ main > aside details[open] summary {
}
#grids .grid > * {
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
padding: calc(var(--spacing) / 2) 0;
background: var(--secondary);
color: var(--secondary-inverse);
text-align: center;
opacity: .5;
}
#grids details {
margin-top: calc(var(--spacing-typography) * 2);
margin-top: calc(var(--typography-spacing-vertical) * 2);
}
#grids details svg {
@ -304,12 +303,12 @@ main > aside details[open] summary {
* Docs: Typography
*/
section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2);
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] section > h1,
@ -321,28 +320,15 @@ a[role=button] {
/**
* Docs: Code
*/
@media (min-width: 576px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
code {
--font-weight: 400;
}
@media (min-width: 768px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@media (min-width: 992px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@media (min-width: 1200px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
section > pre {
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
[data-theme="invalid"],
@ -367,8 +353,8 @@ a[role=button] {
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -378,12 +364,12 @@ a[role=button] {
}
[data-theme="invalid"]:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
[data-theme="valid"]:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
@ -398,8 +384,8 @@ body > nav {
right: 0;
left: 0;
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background);
box-shadow: 0px 1px 0 var(--nav-border);
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
}
body > nav a {
@ -413,10 +399,10 @@ body > nav svg {
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1);
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
@ -425,8 +411,8 @@ body > nav ul:first-of-type li:first-of-type a svg {
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing-gutter);
color: var(--h1);
margin-left: var(--spacing);
color: var(--h1-color);
}
@media (min-width: 992px) {
@ -440,13 +426,13 @@ body > nav ul:first-of-type li:nth-of-type(2) {
*/
.switcher {
position: fixed;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
right: calc(var(--spacing) / 2);
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
@ -484,16 +470,16 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover i {
max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus);
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: 576px) {
.switcher {
right: var(--spacing-gutter);
right: var(--spacing);
}
}

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

35
docs/css/themes/docs.css Normal file
View file

@ -0,0 +1,35 @@
/**
* Theme: Additions for docs
*/
:root {
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: 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='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}
}
[data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}

188
docs/index.html
View file

@ -191,9 +191,61 @@
</label>
</fieldset>
</form>
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c500">...</u>;
}
</code></pre>
</article>
<p>There are 2 ways to customize your version of Pico.css:</p>
<h4>Importing SASS</h4>
<h4>Overriding CSS variables</h4>
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> {
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
<i>--form-element-focus:</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
<i>--switch-checked-background-color:</i>: <u>var</u>(<i>--primary</i>);
}
</code></pre>
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
<h4>Importing Pico SASS library</h4>
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
@ -221,50 +273,6 @@
</code></pre>
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
<h4>Overriding CSS variables</h4>
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> {
<i>--primary-border</i>: <u>var</u>(<i>--primary</i>);
<i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
<i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
<i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</i>);
}
</code></pre>
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/default.css</a></p>
</section><!-- ./ Docs: Customization -->
@ -313,19 +321,19 @@
<tbody>
<tr>
<th>Breakpoint</th>
<td>&lt;576<small>px</small></td>
<td>≥576<small>px</small></td>
<td>≥768<small>px</small></td>
<td>≥992<small>px</small></td>
<td>≥1200<small>px</small></td>
<td>&lt;576px</td>
<td>≥576px</td>
<td>≥768px</td>
<td>≥992px</td>
<td>≥1200px</td>
</tr>
<tr>
<th>Viewport</th>
<td>None&nbsp;<small>(auto)</small></td>
<td>540<small>px</small></td>
<td>720<small>px</small></td>
<td>960<small>px</small></td>
<td>1140<small>px</small></td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
</tbody>
</table>
@ -469,59 +477,59 @@
<tbody>
<tr>
<th>Base&nbsp;font</th>
<td>16<small>px</small></td>
<td>17<small>px</small></td>
<td>18<small>px</small></td>
<td>19<small>px</small></td>
<td>20<small>px</small></td>
<td>16px</td>
<td>17px</td>
<td>18px</td>
<td>19px</td>
<td>20px</td>
</tr>
<tr>
<th>h1</th>
<td>32<small>px</small></td>
<td>34<small>px</small></td>
<td>36<small>px</small></td>
<td>38<small>px</small></td>
<td>40<small>px</small></td>
<td>32px</td>
<td>34px</td>
<td>36px</td>
<td>38px</td>
<td>40px</td>
</tr>
<tr>
<th>h2</th>
<td>28<small>px</small></td>
<td>29<small>px</small></td>
<td>31.5<small>px</small></td>
<td>33.25<small>px</small></td>
<td>35<small>px</small></td>
<td>28px</td>
<td>29px</td>
<td>31.5px</td>
<td>33.25px</td>
<td>35px</td>
</tr>
<tr>
<th>h3</th>
<td>24<small>px</small></td>
<td>25.5<small>px</small></td>
<td>27<small>px</small></td>
<td>28.5<small>px</small></td>
<td>30<small>px</small></td>
<td>24px</td>
<td>25.5px</td>
<td>27px</td>
<td>28.5px</td>
<td>30px</td>
</tr>
<tr>
<th>h4</th>
<td>20<small>px</small></td>
<td>21.25<small>px</small></td>
<td>22.5<small>px</small></td>
<td>23.75<small>px</small></td>
<td>25<small>px</small></td>
<td>20px</td>
<td>21.25px</td>
<td>22.5px</td>
<td>23.75px</td>
<td>25px</td>
</tr>
<tr>
<th>h5</th>
<td>18<small>px</small></td>
<td>19.125<small>px</small></td>
<td>20.25<small>px</small></td>
<td>21.375<small>px</small></td>
<td>22.5<small>px</small></td>
<td>18px</td>
<td>19.125px</td>
<td>20.25px</td>
<td>21.375px</td>
<td>22.5px</td>
</tr>
<tr>
<th>h6</th>
<td>16<small>px</small></td>
<td>17<small>px</small></td>
<td>18<small>px</small></td>
<td>19<small>px</small></td>
<td>20<small>px</small></td>
<td>16px</td>
<td>17px</td>
<td>18px</td>
<td>19px</td>
<td>20px</td>
</tr>
</tbody>
</table>
@ -543,7 +551,7 @@
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<article aria-label="Hgroup example">
<hgroup>
<h2>Heading 2</h2>

2
docs/js/pico.docs.js
View file

@ -2,7 +2,7 @@
* Add some magic to Pico docs
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
// @append src/aside.js

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/js/src/aside.js
View file

@ -2,7 +2,7 @@
* Aside adjustment
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {

30
docs/js/src/color-picker.js
View file

@ -2,7 +2,7 @@
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
@ -291,19 +291,6 @@
"a700": "#dd2c00",
"inverse": "#FFF"
},
/*"brown": {
"50": "#efebe9",
"100": "#d7ccc8",
"200": "#bcaaa4",
"300": "#a1887f",
"400": "#8d6e63",
"500": "#795548",
"600": "#6d4c41",
"700": "#5d4037",
"800": "#4e342e",
"900": "#3e2723",
"inverse": "#FFF"
},*/
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
@ -458,7 +445,7 @@
// Update CSS Style
var generatedStyles = '[data-theme="generated"] {'
+ '--h4:' + data[700] + ';'
+ '--h4-color:' + data[700] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
@ -467,7 +454,7 @@
+ '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--h4:' + data[400] + ';'
+ '--h4-color:' + data[400] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -476,7 +463,7 @@
+ '}'
+ '[data-theme="dark"] [data-theme="generated"] {'
+ '--h4:' + data[500] + ';'
+ '--h4-color:' + data[500] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -484,11 +471,10 @@
+ '}'
+ '[data-theme="generated"] {'
+ '--primary-border: var(--primary);'
+ '--primary-hover-border: var(--primary-hover);'
+ '--input-hover-border: var(--primary);'
+ '--input-focus: var(--primary-focus);'
+ '--input-inverse: var(--primary-inverse);'
+ '--form-element-active-border-color: var(--primary);'
+ '--form-element-focus: var(--primary-focus);'
+ '--switch-color: var(--primary-inverse);'
+ '--switch-checked-background-color: var(--primary);'
+ '}';
// Insert CSS Styles

2
docs/js/src/grid.js
View file

@ -2,7 +2,7 @@
* Grid Interaction
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {

2
docs/js/src/scrollspy.js
View file

@ -5,7 +5,7 @@
* Require `most-visible.js` from https://github.com/andyexeter/most-visible
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {

2
docs/js/src/theme-switcher.js
View file

@ -2,7 +2,7 @@
* Theme Switcher
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {

14
docs/scss/components/_nav.scss
View file

@ -10,8 +10,8 @@ body > nav {
right: 0;
left: 0;
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background);
box-shadow: 0px 1px 0 var(--nav-border);
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
a {
border-radius: 0;
@ -29,10 +29,10 @@ body > nav {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1);
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
background: var(--h1-color);
color: var(--nav-logo-color);
svg {
height: 3.5rem;
@ -43,8 +43,8 @@ body > nav {
// Title
&:nth-of-type(2) {
display: none;
margin-left: var(--spacing-gutter);
color: var(--h1);
margin-left: var(--spacing);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;

13
docs/scss/components/_theme-switcher.scss
View file

@ -4,13 +4,13 @@
.switcher {
position: fixed;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
right: calc(var(--spacing) / 2);
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
@ -53,18 +53,17 @@
i {
max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition),
padding var(--transition);
}
}
&:focus {
box-shadow: var(--card-shadow),
0 0 0 0.2rem var(--secondary-focus);
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: map-get($breakpoints, "sm")) {
right: var(--spacing-gutter);
right: var(--spacing);
}
}

50
docs/scss/content/_code.scss
View file

@ -2,40 +2,16 @@
* Docs: Code
*/
// Custom spacings for <pre> (vertically aligned with <article> content)
pre {
code {
--font-weight: 400;
}
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
// Custom spacings for <pre> (Horizontally aligned with <article> content)
section > pre {
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var( --card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
// Badge for Valid & Invalid code
@ -57,8 +33,8 @@ pre {
line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -71,14 +47,14 @@ pre {
// Color for Valid & Invalid code
[data-theme="invalid"] {
&:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
}
[data-theme="valid"] {
&:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
}

6
docs/scss/content/_typography.scss
View file

@ -3,12 +3,12 @@
*/
section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2);
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {

8
docs/scss/layout/_aside.scss
View file

@ -6,10 +6,10 @@ main > aside {
nav {
width: 100%;
margin-bottom: var(--spacing-block);
margin-bottom: var(--block-spacing-vertical);
h1 {
margin-bottom: var(--spacing-typography);
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: map-get($breakpoints, "lg")) {
@ -55,7 +55,7 @@ main > aside {
border-bottom: none;
summary {
color: var(--h3);
color: var(--h3-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
@ -66,7 +66,7 @@ main > aside {
}
&[open] summary {
color: var(--h3);
color: var(--h3-color);
}
}
}

30
docs/scss/layout/_documentation.scss
View file

@ -3,8 +3,6 @@
*/
// Docs: Themes
// ––––––––––––––––––––
#themes {
button i {
font-style: normal;
@ -12,8 +10,6 @@
}
// Docs: Customization
// ––––––––––––––––––––
#customization {
figure {
@ -26,8 +22,8 @@
@media (min-width: map-get($breakpoints, "sm")) {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
~ article {
@ -75,14 +71,14 @@
// Docs: Grids
// ––––––––––––––––––––
#grids {
--grid-spacing-vertical: 1rem;
button {
display: block;
width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2);
margin-bottom: var(--spacing);
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
@ -99,14 +95,18 @@
}
}
.grid > * {
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
text-align: center;
.grid {
> * {
padding: calc(var(--spacing) / 2) 0;
background: var(--secondary);
color: var(--secondary-inverse);
text-align: center;
opacity: .5;
}
}
details {
margin-top: calc(var(--spacing-typography) * 2);
margin-top: calc(var(--typography-spacing-vertical) * 2);
svg {
vertical-align: bottom;
@ -115,8 +115,6 @@
}
// Docs: Forms
// ––––––––––––––––––––
#forms div.grid {
grid-row-gap: 0;
}

93
docs/scss/layout/_main.scss
View file

@ -2,71 +2,73 @@
* Docs: Main (Grid)
*/
// Config
$navHeight: 3.5rem;
// Main grid
body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
@media (min-width: map-get($breakpoints, "sm")) {
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid;
grid-template-columns: 200px auto;
}
}
@media (min-width: map-get($breakpoints, "md")) {
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: calc(var(--spacing-gutter) * 4);
display: grid;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
}
> * {
min-width: 0; // HACK for childs in overflow
> aside,
div[role="document"] {
min-width: 0;
}
}
// Anchors hacks for internal links
// ––––––––––––––––––––
div[role="document"] > section::before {
display: block;
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: '';
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - .5rem);
height: calc(-2.5rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "md")) {
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
}
}
}
// External links
// ––––––––––––––––––––
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: '';
}
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}
// Embedded SVG
// ––––––––––––––––––––
svg {
height: 1rem;
}

12
docs/scss/themes/docs/_dark.scss
View file

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
}
@ -12,6 +15,9 @@
// Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}

1
docs/scss/themes/docs/_icons.scss
View file

@ -1,6 +1,5 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

7
docs/scss/themes/docs/_light.scss
View file

@ -2,6 +2,9 @@
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
}