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

Merge pull request #17 from picocss/dev

Browse source 
Minor Release (v1.3.1)
This commit is contained in:
Lucas Larroche 2021-07-10 11:05:50 +07:00 • committed by GitHub
commit cdbd670b3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 741 additions and 1006 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,4 +1,4 @@
*.DS_Store
TODO.md
prepros-6.config
prepros.config
test.html

10
README.md
View file

@ -23,10 +23,10 @@
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
**Great styles with just one CSS file**
No dependencies, package manager, external files or JavaScript.
No dependencies, package manager, external files, or JavaScript.
**Responsive everything**
Elegant and consistent adaptatives spacings and typography on all devices.
Elegant and consistent adaptative spacings and typography on all devices.
**Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
@ -73,7 +73,7 @@ Pico provide a `.classless` version ([example](https://picocss.com/examples/clas
In this version, `header`, `main` and `footer` act as container.
Use the default `.classless `version if you need centered viewports:
Use the default `.classless` version if you need centered viewports:
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
@ -173,8 +173,8 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
## Contributing
- [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
- Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss).
## Copyright and license

2
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**

2
css/pico.fluid.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

@ -356,7 +356,7 @@ section > pre {
[data-theme="invalid"] code,
[data-theme="valid"] code {
padding: 1rem 0;
padding: calc(var(--spacing) * 1.625) 0;
}
[data-theme="invalid"]:before {

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
View file

@ -1,35 +0,0 @@
/**
* 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;
}

1
docs/css/themes/docs.min.css vendored
View file

@ -1 +0,0 @@
: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")}:root:not([data-theme=dark]),[data-theme=light]{--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}

BIN
docs/img/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.2 KiB

39
docs/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
<link rel="stylesheet" href="../css/pico.min.css">
<link rel="stylesheet" href="css/pico.docs.min.css">
</head>
@ -133,9 +133,9 @@
<section id="themes">
<hgroup>
<h2>Themes</h2>
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
<h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
</hgroup>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button>
</article>
@ -186,7 +186,7 @@
</div>
<fieldset>
<label for="remember">
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
<input type="checkbox" role="switch" id="remember" name="remember" checked>
Remember me
</label>
</fieldset>
@ -194,7 +194,7 @@
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c500">...</u>;
<i>--primary</i>: <u class="c600">...</u>;
}
</code></pre>
@ -245,7 +245,7 @@
<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>It is recommended to customize Pico by importing SASS source files into 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>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
@ -258,7 +258,7 @@
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
<p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
<p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
@ -271,7 +271,7 @@
<em>...</em>
</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>
<p>This allows you 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>
</section><!-- ./ Docs: Customization -->
<!-- Docs: Classless -->
@ -280,8 +280,8 @@
<h2>Class-less version</h2>
<h3>For wild HTML purists!</h3>
</hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
@ -396,9 +396,9 @@
<section id="scroller">
<hgroup>
<h2>Horizontal scroller</h2>
<h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
<h3><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h3>
</hgroup>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
<p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
<figure>
<table role="grid">
<thead>
@ -503,7 +503,7 @@
<th><code>&lt;<b>h2</b>&gt;</code></th>
<td>28<small>px</small></td>
<td>29<small>px</small></td>
<td>31<small><small>.5px</small></td>
<td>31<small>.5px</small></td>
<td>33<small>.25px</small></td>
<td>35<small>px</small></td>
</tr>
@ -680,10 +680,10 @@
<section id="forms">
<hgroup>
<h2>Forms</h2>
<h3>All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.</h3>
<h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
</hgroup>
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customized and themables with CSS variables.</p>
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customizable and themable with CSS variables.</p>
<article aria-label="Form example">
<form>
<div class="grid">
@ -756,7 +756,7 @@
<option>Watermelon</option>
<option>Apple</option>
<option>Orange</option>
<option>Mangoe</option>
<option>Mango</option>
</select>
<fieldset>
<legend>Size</legend>
@ -781,7 +781,7 @@
</fieldset>
<fieldset>
<label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
<input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile
</label>
</fieldset>
@ -1211,7 +1211,7 @@
<section id="love">
<h2>We love <code>.classes</code></h2>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>But of course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>
<div data-theme="valid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
@ -1238,6 +1238,7 @@
</main><!-- ./ Main -->
<!-- JavaScript -->
<script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script>
</body>

36
docs/js/pico.docs.js
View file

@ -1,13 +1,35 @@
/*!
/*
* Add some magic to Pico docs
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
// @append src/aside.js
// @append src/theme-switcher.js
// @append src/grid.js
// @append src/color-picker.js
// @append src/most-visible.js
// @append src/scrollspy.js
// Imports
import { aside } from './src/aside.js';
import { themeSwitcher } from './src/theme-switcher.js';
import { materialDesignColors } from './src/material-design-colors.js';
import { colorPicker } from './src/color-picker.js';
import { grid } from './src/grid.js';
import { scrollspy } from './src/scrollspy.js';
// Aside initial state
aside.init();
// Theme switcher
themeSwitcher.addButton({
tag: 'BUTTON',
class: 'contrast switcher theme-switcher',
target: 'body',
});
themeSwitcher.init();
// Color Picker
colorPicker.colors = materialDesignColors;
colorPicker.init();
// Grid Interaction
grid.init();
// Scrollspy
scrollspy.init();

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

File diff suppressed because one or more lines are too long

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

@ -1,23 +1,30 @@
/*!
/*
* Aside adjustment
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
export const aside = {
if (window.matchMedia("(min-width: 992px)").matches) {
// Config
minWidth: '992px',
targets: {
nav: 'aside nav',
details: 'aside details',
},
// Close details if aside > nav have a scrollbar
var nav = document.querySelector("aside nav");
var navDetails = document.querySelectorAll("aside details");
if (nav.clientHeight < nav.scrollHeight) {
for (var i = 1; i < navDetails.length; i++) {
navDetails[i].removeAttribute("open");
// Init
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
let nav = document.querySelector(this.targets.nav);
let details = document.querySelectorAll(this.targets.details);
if (nav.clientHeight < nav.scrollHeight) {
details.forEach(function(detail) {
detail.removeAttribute("open");
});
}
}
}
})();
}

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

@ -1,508 +1,172 @@
/*!
/*
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
export const colorPicker = {
/**
* Config
*/
// Config
colors: null,
buttonsTarget: '#customization article[data-theme="generated"]',
selectorButton: '#customization button[data-color]',
selectorSection: '#customization',
buttons: null,
generatedStyles: null,
var colors = {
target: '#customization article[data-theme="generated"]', // Buttons inserted before target
selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom
styles: '',
// Init
init() {
this.generateButtons();
this.setActiveButton('pink');
this.generateTheme('pink');
},
// Source: https://material.io/design/color/the-color-system.html
system: {
"red": {
"50": "#ffebee",
"100": "#ffcdd2",
"200": "#ef9a9a",
"300": "#e57373",
"400": "#ef5350",
"500": "#f44336",
"600": "#e53935",
"700": "#d32f2f",
"800": "#c62828",
"900": "#b71c1c",
"a100": "#ff8a80",
"a200": "#ff5252",
"a400": "#ff1744",
"a700": "#d50000",
"inverse": "#FFF"
},
"pink": {
"50": "#fce4ec",
"100": "#f8bbd0",
"200": "#f48fb1",
"300": "#f06292",
"400": "#ec407a",
"500": "#e91e63",
"600": "#d81b60",
"700": "#c2185b",
"800": "#ad1457",
"900": "#880e4f",
"a100": "#ff80ab",
"a200": "#ff4081",
"a400": "#f50057",
"a700": "#c51162",
"inverse": "#FFF"
},
"purple": {
"50": "#f3e5f5",
"100": "#e1bee7",
"200": "#ce93d8",
"300": "#ba68c8",
"400": "#ab47bc",
"500": "#9c27b0",
"600": "#8e24aa",
"700": "#7b1fa2",
"800": "#6a1b9a",
"900": "#4a148c",
"a100": "#ea80fc",
"a200": "#e040fb",
"a400": "#d500f9",
"a700": "#aa00ff",
"inverse": "#FFF"
},
"deep-purple": {
"50": "#ede7f6",
"100": "#d1c4e9",
"200": "#b39ddb",
"300": "#9575cd",
"400": "#7e57c2",
"500": "#673ab7",
"600": "#5e35b1",
"700": "#512da8",
"800": "#4527a0",
"900": "#311b92",
"a100": "#b388ff",
"a200": "#7c4dff",
"a400": "#651fff",
"a700": "#6200ea",
"inverse": "#FFF"
},
"indigo": {
"50": "#e8eaf6",
"100": "#c5cae9",
"200": "#9fa8da",
"300": "#7986cb",
"400": "#5c6bc0",
"500": "#3f51b5",
"600": "#3949ab",
"700": "#303f9f",
"800": "#283593",
"900": "#1a237e",
"a100": "#8c9eff",
"a200": "#536dfe",
"a400": "#3d5afe",
"a700": "#304ffe",
"inverse": "#FFF"
},
"blue": {
"50": "#e3f2fd",
"100": "#bbdefb",
"200": "#90caf9",
"300": "#64b5f6",
"400": "#42a5f5",
"500": "#2196f3",
"600": "#1e88e5",
"700": "#1976d2",
"800": "#1565c0",
"900": "#0d47a1",
"a100": "#82b1ff",
"a200": "#448aff",
"a400": "#2979ff",
"a700": "#2962ff",
"inverse": "#FFF"
},
"light-blue": {
"50": "#e1f5fe",
"100": "#b3e5fc",
"200": "#81d4fa",
"300": "#4fc3f7",
"400": "#29b6f6",
"500": "#03a9f4",
"600": "#039be5",
"700": "#0288d1",
"800": "#0277bd",
"900": "#01579b",
"a100": "#80d8ff",
"a200": "#40c4ff",
"a400": "#00b0ff",
"a700": "#0091ea",
"inverse": "#FFF"
},
"cyan": {
"50": "#e0f7fa",
"100": "#b2ebf2",
"200": "#80deea",
"300": "#4dd0e1",
"400": "#26c6da",
"500": "#00bcd4",
"600": "#00acc1",
"700": "#0097a7",
"800": "#00838f",
"900": "#006064",
"a100": "#84ffff",
"a200": "#18ffff",
"a400": "#00e5ff",
"a700": "#00b8d4",
"inverse": "#FFF"
},
"teal": {
"50": "#e0f2f1",
"100": "#b2dfdb",
"200": "#80cbc4",
"300": "#4db6ac",
"400": "#26a69a",
"500": "#009688",
"600": "#00897b",
"700": "#00796b",
"800": "#00695c",
"900": "#004d40",
"a100": "#a7ffeb",
"a200": "#64ffda",
"a400": "#1de9b6",
"a700": "#00bfa5",
"inverse": "#FFF"
},
"green": {
"50": "#e8f5e9",
"100": "#c8e6c9",
"200": "#a5d6a7",
"300": "#81c784",
"400": "#66bb6a",
"500": "#4caf50",
"600": "#43a047",
"700": "#388e3c",
"800": "#2e7d32",
"900": "#1b5e20",
"a100": "#b9f6ca",
"a200": "#69f0ae",
"a400": "#00e676",
"a700": "#00c853",
"inverse": "#FFF"
},
"light-green": {
"50": "#f1f8e9",
"100": "#dcedc8",
"200": "#c5e1a5",
"300": "#aed581",
"400": "#9ccc65",
"500": "#8bc34a",
"600": "#7cb342",
"700": "#689f38",
"800": "#558b2f",
"900": "#33691e",
"a100": "#ccff90",
"a200": "#b2ff59",
"a400": "#76ff03",
"a700": "#64dd17",
"inverse": "#FFF"
},
"lime": {
"50": "#f9fbe7",
"100": "#f0f4c3",
"200": "#e6ee9c",
"300": "#dce775",
"400": "#d4e157",
"500": "#cddc39",
"600": "#c0ca33",
"700": "#afb42b",
"800": "#9e9d24",
"900": "#827717",
"a100": "#f4ff81",
"a200": "#eeff41",
"a400": "#c6ff00",
"a700": "#aeea00",
"inverse": "rgba(0, 0, 0, 0.75)"
},
"yellow": {
"50": "#fffde7",
"100": "#fff9c4",
"200": "#fff59d",
"300": "#fff176",
"400": "#ffee58",
"500": "#ffeb3b",
"600": "#fdd835",
"700": "#fbc02d",
"800": "#f9a825",
"900": "#f57f17",
"a100": "#ffff8d",
"a200": "#ffff00",
"a400": "#ffea00",
"a700": "#ffd600",
"inverse": "rgba(0, 0, 0, 0.75)"
},
"amber": {
"50": "#fff8e1",
"100": "#ffecb3",
"200": "#ffe082",
"300": "#ffd54f",
"400": "#ffca28",
"500": "#ffc107",
"600": "#ffb300",
"700": "#ffa000",
"800": "#ff8f00",
"900": "#ff6f00",
"a100": "#ffe57f",
"a200": "#ffd740",
"a400": "#ffc400",
"a700": "#ffab00",
"inverse": "rgba(0, 0, 0, 0.75)"
},
"orange": {
"50": "#fff3e0",
"100": "#ffe0b2",
"200": "#ffcc80",
"300": "#ffb74d",
"400": "#ffa726",
"500": "#ff9800",
"600": "#fb8c00",
"700": "#f57c00",
"800": "#ef6c00",
"900": "#e65100",
"a100": "#ffd180",
"a200": "#ffab40",
"a400": "#ff9100",
"a700": "#ff6d00",
"inverse": "#FFF"
},
"deep-orange": {
"50": "#fbe9e7",
"100": "#ffccbc",
"200": "#ffab91",
"300": "#ff8a65",
"400": "#ff7043",
"500": "#ff5722",
"600": "#f4511e",
"700": "#e64a19",
"800": "#d84315",
"900": "#bf360c",
"a100": "#ff9e80",
"a200": "#ff6e40",
"a400": "#ff3d00",
"a700": "#dd2c00",
"inverse": "#FFF"
},
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"inverse": "#FFF"
},
"blue-grey": {
"50": "#eceff1",
"100": "#cfd8dc",
"200": "#b0bec5",
"300": "#90a4ae",
"400": "#78909c",
"500": "#607d8b",
"600": "#546e7a",
"700": "#455a64",
"800": "#37474f",
"900": "#263238",
"inverse": "#FFF"
}
// Generate Buttons
generateButtons() {
// Init
let innerButtons = '';
let innerStyles = '';
// Loop colors
for (const color in this.colors) {
// Buttons
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
// Styles
innerStyles += `
button[data-color="${color}"] {
background-color: ${this.colors[color]['600']};
}
[data-theme="light"] button[data-color="${color}"]:hover,
[data-theme="light"] button[data-color="${color}"]:active,
[data-theme="light"] button[data-color="${color}"]:focus {
background-color: ${this.colors[color]['700']}; '
}
[data-theme="dark"] button[data-color="${color}"]:hover,
[data-theme="dark"] button[data-color="${color}"]:active,
[data-theme="dark"] button[data-color="${color}"]:focus {
background-color: ${this.colors[color]['500']};
}`;
}
}
/**
* Init
*/
generateButtons(colors.system);
pickColor('pink', colors.system['pink']);
/**
* Generate Buttons
*
* @param {object} data
*/
function generateButtons(data) {
// Vars
var colorButtons = '';
// Colors
for (var color in data) {
if (data.hasOwnProperty(color)) {
// Buttons
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
// CSS Styles
colors.styles += 'button[data-color="'+ color +'"] {'
+ 'background-color: '+ data[color]['600'] +'; '
+ '}'
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['700'] +'; '
+ '}'
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['500'] +'; '
+ '}';
}
}
// Insert buttons
var buttons = document.createElement('FIGURE');
buttons.innerHTML = colorButtons;
document.querySelector(colors.target).before(buttons);
let containerButtons = document.createElement('FIGURE');
containerButtons.innerHTML = innerButtons;
document.querySelector(this.buttonsTarget).before(containerButtons);
// Buttons listeners
var buttonsAll = document.querySelectorAll(colors.selectorButton);
for (var i = 0; i < buttonsAll.length; i++) {
buttonsAll[i].addEventListener('click', function(event) {
buttonColor = event.target.getAttribute('data-color');
pickColor(buttonColor, data[buttonColor]);
}, false);
}
this.buttons = document.querySelectorAll(this.selectorButton);
this.buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
let color = event.target.getAttribute('data-color');
this.setActiveButton(color);
this.generateTheme(color);
}.bind(this), false);
}.bind(this));
// Insert CSS Styles
var styles = document.createElement('STYLE');
styles.setAttribute('title', 'color-picker');
styles.innerHTML = colors.styles;
document.querySelector('head').appendChild(styles);
}
let containerStyles = document.createElement('STYLE');
containerStyles.setAttribute('title', 'color-picker');
this.generatedStyles = this.minifyCSS(innerStyles);
containerStyles.innerHTML = this.generatedStyles;
document.querySelector('head').appendChild(containerStyles);
},
// Set active button
setActiveButton(color) {
/**
* Pick Color
*
* @param {string} name
* @param {object} data
*/
// Remove all active states
this.buttons.forEach(function(button) {
button.removeAttribute('class');
}.bind(this));
function pickColor(name, data) {
// Generate theme
generateTheme(name, data);
// Clear picked state
var buttonsAll = document.querySelectorAll(colors.selectorButton);
for (var i = 0; i < buttonsAll.length; i++) {
buttonsAll[i].removeAttribute("class");
}
// Set Picked state
var buttonPicked = document.querySelector(colors.selectorButton + '[data-color="' + name + '"]');
// Set active state
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
buttonPicked.setAttribute('class', 'picked');
}
},
// Set active button
generateTheme(color) {
let name = color;
let data = this.colors[color];
/**
* Generate theme
*
* @param {string} name
* @param {object} data
*/
function generateTheme(name, data) {
// Update name and colors in demo code
var swap = {
'.name' : name.charAt(0).toUpperCase() + name.substring(1) + ' ',
'.c500' : data[500],
'.c600' : data[600],
'.c700' : data[700],
'.c600-outline-light' : hexToRgbA(data[600], .125),
'.c600-outline-dark' : hexToRgbA(data[600], .25),
'.inverse' : data['inverse'],
// 1. Update name and colors in demo code
let swaps = {
'.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
'.c500': data[500],
'.c600': data[600],
'.c700': data[700],
'.c600-outline-light': this.hexToRgbA(data[600], .125),
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
'.inverse': data['inverse'],
}
Object.keys(swap).forEach(function(key) {
var target = document.querySelectorAll(colors.selectorTheme + ' ' + key);
for (var i = 0; i < target.length; ++i) {
target[i].innerHTML = swap[key];
Object.keys(swaps).forEach(function(swap) {
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
targets.forEach(function(target) {
target.innerHTML = swaps[swap];
}.bind(this));
}.bind(this));
// 2. Update CSS Styles
const innerStyles = `
[data-theme="generated"] {
--h4-color: ${data[700]};
--primary: ${data[600]};
--primary-hover: ${data[700]};
--primary-focus: ${this.hexToRgbA(data[600], .125)};
--primary-inverse: ${data['inverse']};
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-theme="generated"] {
--h4-color: ${data[400]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-inverse: ${data['inverse']};
}
});
}
[data-theme="dark"] [data-theme="generated"] {
--h4-color: ${data[500]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-inverse: ${data['inverse']};
}
[data-theme="generated"] {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}`;
// Update CSS Style
var generatedStyles = '[data-theme="generated"] {'
+ '--h4-color:' + data[700] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--h4-color:' + data[400] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '}'
+ '[data-theme="dark"] [data-theme="generated"] {'
+ '--h4-color:' + data[500] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '[data-theme="generated"] {'
+ '--form-element-active-border-color: var(--primary);'
+ '--form-element-focus-color: var(--primary-focus);'
+ '--switch-color: var(--primary-inverse);'
+ '--switch-checked-background-color: var(--primary);'
+ '}';
// Insert CSS Styles
document.querySelector('style[title="color-picker"]').innerHTML = colors.styles + generatedStyles;
}
document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
},
// Minify CSS
minifyCSS(css) {
return css.replace(/^ +/gm, '')
},
/**
* Hexadecimal to Rgba
*
* @param {string} hex
* @param {number} alpha
* @return {rgba}
*/
function hexToRgbA(hex, alpha) {
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c= hex.substring(1).split('');
if(c.length== 3) {
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
// Hexadecimal to Rgba
hexToRgbA(hex, alpha) {
let c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('');
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x' + c.join('');
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
c = '0x' + c.join('');
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
}
throw new Error('Bad Hex');
}
})();
}

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

@ -1,131 +1,104 @@
/*!
/*
* Grid Interaction
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
export const grid = {
/**
* Config
*/
var grid = {
columnsCurrent: 4,
columnsMin: 1,
columnsMax: 12,
targetButtons: '#grids article', // Buttons inserted before target
targetGrid: '#grids .grid', // Grid target
targetCode: '#grids pre code', // Code target
selectorAdd: '#grids button.add', // Add button selector in Dom
selectorRemove: '#grids button.remove', // Remove Button selector in Dom
};
// Config
buttons: {
text: {
add: 'Add column',
remove: 'Remove column'
},
target: '#grids article'
},
grid: {
current: 4,
min: 1,
max: 12,
gridTarget: '#grids .grid',
codeTarget: '#grids pre code'
},
/**
* Init
*/
initGridInteraction();
// Init
init() {
this.addButtons();
this.generateGrid()
},
// Add buttons
addButtons() {
/**
* Init grid interaction
*/
// Insert buttons
let buttons = document.createElement('P');
buttons.innerHTML = `
<button class="secondary add">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12">'</line>
</svg>
${this.buttons.text.add}
</button>
function initGridInteraction() {
<button class="secondary remove">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
${this.buttons.text.remove}
</button>`;
document.querySelector(this.buttons.target).before(buttons);
// Add buttons
addButtons();
// Add button listener
document.querySelector('#grids button.add').addEventListener('click', function() {
this.addColumn();
}.bind(this), false);
// Add button listener
document.querySelector(grid.selectorAdd).addEventListener('click', function() {
addColumn();
}, false);
// Remove button listener
document.querySelector('#grids button.remove').addEventListener('click', function() {
this.removeColumn();
}.bind(this), false);
},
// Remove button listener
document.querySelector(grid.selectorRemove).addEventListener('click', function() {
removeColumn();
}, false);
// Generate grid
generateGrid() {
// Config
let htmlInner = '';
let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
// Build
for (let col = 0; col < this.grid.current; col++) {
htmlInner += '<div>' + (col + 1) + '</div>';
codeInner += ' &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
}
// Display
codeInner += '&lt;/<b>div</b>&gt;';
document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
},
// Add column
addColumn() {
if (this.grid.current < this.grid.max) {
this.grid.current++;
this.generateGrid();
}
},
// Remove column
removeColumn() {
if (this.grid.current > this.grid.min) {
this.grid.current--;
this.generateGrid();
}
}
/**
* Add buttons
*/
function addButtons() {
var buttons = document.createElement('P');
buttons.innerHTML = '<button class="secondary add">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="12" y1="5" x2="12" y2="19">'
+ '</line><line x1="5" y1="12" x2="19" y2="12">'
+ '</line>'
+ '</svg>'
+ ' Add column'
+ '</button>'
+ '<button class="secondary remove">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
+ '</svg>'
+ ' Remove column'
+ '</button>';
document.querySelector(grid.targetButtons).before(buttons);
}
/**
* Add column
*/
function addColumn() {
if (grid.columnsCurrent < grid.columnsMax) {
grid.columnsCurrent++;
generateGrid(grid.columnsCurrent);
}
}
/**
* Remove column
*/
function removeColumn() {
if (grid.columnsCurrent > grid.columnsMin) {
grid.columnsCurrent--;
generateGrid(grid.columnsCurrent);
}
}
/**
* Generate grid
*
* @param {number} cols
*/
function generateGrid(cols) {
var colsHTML = '';
var colsCode = '';
var colsCodePref = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
var colsCodeSuff = '&lt;/<b>div</b>&gt;';
for (var i=0; i<cols; i++) {
colsHTML += '<div>' + (i+1) + '</div>';
colsCode += ' &lt;<b>div</b>&gt;' + (i+1) + '&lt;/<b>div</b>&gt;\n';
}
document.querySelector(grid.targetGrid).innerHTML = colsHTML;
document.querySelector(grid.targetCode).innerHTML = colsCodePref+colsCode+colsCodeSuff;
}
})();
};

301
docs/js/src/material-design-colors.js Normal file
View file

@ -0,0 +1,301 @@
// Source: https://material.io/design/color/the-color-system.html
export const materialDesignColors = {
red: {
50: "#ffebee",
100: "#ffcdd2",
200: "#ef9a9a",
300: "#e57373",
400: "#ef5350",
500: "#f44336",
600: "#e53935",
700: "#d32f2f",
800: "#c62828",
900: "#b71c1c",
a100: "#ff8a80",
a200: "#ff5252",
a400: "#ff1744",
a700: "#d50000",
inverse: "#FFF"
},
pink: {
50: "#fce4ec",
100: "#f8bbd0",
200: "#f48fb1",
300: "#f06292",
400: "#ec407a",
500: "#e91e63",
600: "#d81b60",
700: "#c2185b",
800: "#ad1457",
900: "#880e4f",
a100: "#ff80ab",
a200: "#ff4081",
a400: "#f50057",
a700: "#c51162",
inverse: "#FFF"
},
purple: {
50: "#f3e5f5",
100: "#e1bee7",
200: "#ce93d8",
300: "#ba68c8",
400: "#ab47bc",
500: "#9c27b0",
600: "#8e24aa",
700: "#7b1fa2",
800: "#6a1b9a",
900: "#4a148c",
a100: "#ea80fc",
a200: "#e040fb",
a400: "#d500f9",
a700: "#aa00ff",
inverse: "#FFF"
},
"deep-purple": {
50: "#ede7f6",
100: "#d1c4e9",
200: "#b39ddb",
300: "#9575cd",
400: "#7e57c2",
500: "#673ab7",
600: "#5e35b1",
700: "#512da8",
800: "#4527a0",
900: "#311b92",
a100: "#b388ff",
a200: "#7c4dff",
a400: "#651fff",
a700: "#6200ea",
inverse: "#FFF"
},
indigo: {
50: "#e8eaf6",
100: "#c5cae9",
200: "#9fa8da",
300: "#7986cb",
400: "#5c6bc0",
500: "#3f51b5",
600: "#3949ab",
700: "#303f9f",
800: "#283593",
900: "#1a237e",
a100: "#8c9eff",
a200: "#536dfe",
a400: "#3d5afe",
a700: "#304ffe",
inverse: "#FFF"
},
blue: {
50: "#e3f2fd",
100: "#bbdefb",
200: "#90caf9",
300: "#64b5f6",
400: "#42a5f5",
500: "#2196f3",
600: "#1e88e5",
700: "#1976d2",
800: "#1565c0",
900: "#0d47a1",
a100: "#82b1ff",
a200: "#448aff",
a400: "#2979ff",
a700: "#2962ff",
inverse: "#FFF"
},
"light-blue": {
50: "#e1f5fe",
100: "#b3e5fc",
200: "#81d4fa",
300: "#4fc3f7",
400: "#29b6f6",
500: "#03a9f4",
600: "#039be5",
700: "#0288d1",
800: "#0277bd",
900: "#01579b",
a100: "#80d8ff",
a200: "#40c4ff",
a400: "#00b0ff",
a700: "#0091ea",
inverse: "#FFF"
},
cyan: {
50: "#e0f7fa",
100: "#b2ebf2",
200: "#80deea",
300: "#4dd0e1",
400: "#26c6da",
500: "#00bcd4",
600: "#00acc1",
700: "#0097a7",
800: "#00838f",
900: "#006064",
a100: "#84ffff",
a200: "#18ffff",
a400: "#00e5ff",
a700: "#00b8d4",
inverse: "#FFF"
},
teal: {
50: "#e0f2f1",
100: "#b2dfdb",
200: "#80cbc4",
300: "#4db6ac",
400: "#26a69a",
500: "#009688",
600: "#00897b",
700: "#00796b",
800: "#00695c",
900: "#004d40",
a100: "#a7ffeb",
a200: "#64ffda",
a400: "#1de9b6",
a700: "#00bfa5",
inverse: "#FFF"
},
green: {
50: "#e8f5e9",
100: "#c8e6c9",
200: "#a5d6a7",
300: "#81c784",
400: "#66bb6a",
500: "#4caf50",
600: "#43a047",
700: "#388e3c",
800: "#2e7d32",
900: "#1b5e20",
a100: "#b9f6ca",
a200: "#69f0ae",
a400: "#00e676",
a700: "#00c853",
inverse: "#FFF"
},
"light-green": {
50: "#f1f8e9",
100: "#dcedc8",
200: "#c5e1a5",
300: "#aed581",
400: "#9ccc65",
500: "#8bc34a",
600: "#7cb342",
700: "#689f38",
800: "#558b2f",
900: "#33691e",
a100: "#ccff90",
a200: "#b2ff59",
a400: "#76ff03",
a700: "#64dd17",
inverse: "#FFF"
},
lime: {
50: "#f9fbe7",
100: "#f0f4c3",
200: "#e6ee9c",
300: "#dce775",
400: "#d4e157",
500: "#cddc39",
600: "#c0ca33",
700: "#afb42b",
800: "#9e9d24",
900: "#827717",
a100: "#f4ff81",
a200: "#eeff41",
a400: "#c6ff00",
a700: "#aeea00",
inverse: "rgba(0, 0, 0, 0.75)"
},
yellow: {
50: "#fffde7",
100: "#fff9c4",
200: "#fff59d",
300: "#fff176",
400: "#ffee58",
500: "#ffeb3b",
600: "#fdd835",
700: "#fbc02d",
800: "#f9a825",
900: "#f57f17",
a100: "#ffff8d",
a200: "#ffff00",
a400: "#ffea00",
a700: "#ffd600",
inverse: "rgba(0, 0, 0, 0.75)"
},
amber: {
50: "#fff8e1",
100: "#ffecb3",
200: "#ffe082",
300: "#ffd54f",
400: "#ffca28",
500: "#ffc107",
600: "#ffb300",
700: "#ffa000",
800: "#ff8f00",
900: "#ff6f00",
a100: "#ffe57f",
a200: "#ffd740",
a400: "#ffc400",
a700: "#ffab00",
inverse: "rgba(0, 0, 0, 0.75)"
},
orange: {
50: "#fff3e0",
100: "#ffe0b2",
200: "#ffcc80",
300: "#ffb74d",
400: "#ffa726",
500: "#ff9800",
600: "#fb8c00",
700: "#f57c00",
800: "#ef6c00",
900: "#e65100",
a100: "#ffd180",
a200: "#ffab40",
a400: "#ff9100",
a700: "#ff6d00",
inverse: "#FFF"
},
"deep-orange": {
50: "#fbe9e7",
100: "#ffccbc",
200: "#ffab91",
300: "#ff8a65",
400: "#ff7043",
500: "#ff5722",
600: "#f4511e",
700: "#e64a19",
800: "#d84315",
900: "#bf360c",
a100: "#ff9e80",
a200: "#ff6e40",
a400: "#ff3d00",
a700: "#dd2c00",
inverse: "#FFF"
},
grey: {
50: "#fafafa",
100: "#f5f5f5",
200: "#eeeeee",
300: "#e0e0e0",
400: "#bdbdbd",
500: "#9e9e9e",
600: "#757575",
700: "#616161",
800: "#424242",
900: "#212121",
inverse: "#FFF"
},
"blue-grey": {
50: "#eceff1",
100: "#cfd8dc",
200: "#b0bec5",
300: "#90a4ae",
400: "#78909c",
500: "#607d8b",
600: "#546e7a",
700: "#455a64",
800: "#37474f",
900: "#263238",
inverse: "#FFF"
}
};

161
docs/js/src/most-visible.js
View file

@ -1,161 +0,0 @@
/**
* Most Visible v1.4.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
(function (root, factory) {
// Universal Module Definition
/* jshint strict:false */
/* global define: false, module: false */
if (typeof define === 'function' && define.amd) {
define([], function () {
return factory(root);
});
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(root);
} else {
root.mostVisible = factory(root);
}
}(typeof self !== 'undefined' ? self : this, function (window) {
/* jshint unused: vars */
'use strict';
/**
* MostVisible constructor
*
* @param {NodeList|string} elements
* @param {Object} options
* @constructor
*/
function MostVisible(elements, options) {
if (!(this instanceof MostVisible)) {
return (new MostVisible(elements, options)).getMostVisible();
}
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
this.elements = elements;
this.options = extend({}, MostVisible.defaults, options);
}
/**
* MostVisible default options
*
* @namespace
* @property {object} defaults Default options hash.
* @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height.
* @property {number} defaults.offset An offset to take into account when calculating visibility.
*/
MostVisible.defaults = {
percentage: false,
offset: 0
};
MostVisible.prototype = {
/**
* Returns the most visible element from the instance's NodeList.
*
* @returns {Element} Most visible element.
*/
getMostVisible: function () {
var element = null,
viewportHeight = document.documentElement.clientHeight,
maxVisible = 0;
for (var i = 0; i < this.elements.length; i++) {
var currentVisible = this.getVisibleHeight(this.elements[i], viewportHeight);
if (currentVisible > maxVisible) {
maxVisible = currentVisible;
element = this.elements[i];
}
}
return element;
},
/**
* Returns the visible height of an element.
*
* @param {Element} element Element to check the visibility of.
* @param {number} viewportHeight
* @returns {number} Visible height of the element in pixels or a percentage of the element's total height.
*/
getVisibleHeight: function (element, viewportHeight) {
var rect = element.getBoundingClientRect(),
rectTopOffset = rect.top - this.options.offset,
rectBottomOffset = rect.bottom - this.options.offset,
height = rect.bottom - rect.top,
visible = {
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight
},
visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rectBottomOffset;
} else if (height > viewportHeight && rectTopOffset < 0) {
var absTop = Math.abs(rectTopOffset);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
if (this.options.percentage) {
return (visiblePx / height) * 100;
}
return visiblePx;
}
};
/*
MostVisible.makeJQueryPlugin = function ($) {
if (!$) {
return;
}
$.fn.mostVisible = function (options) {
var instance = new MostVisible(this.get(), options);
return this.filter(instance.getMostVisible());
};
};
*/
// Try adding the jQuery plugin to window.jQuery
// MostVisible.makeJQueryPlugin(window.jQuery);
/**
* Extends obj by adding the properties of all other objects passed to the function.
*
* @param {...Object} obj
* @returns {Object} The extended object.
*/
function extend(obj) {
for (var i = 1; i < arguments.length; i++) {
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) {
obj[key] = arguments[i][key];
}
}
}
return obj;
}
//noinspection JSAnnotator
return MostVisible;
}));

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

@ -1,85 +1,63 @@
/*!
/*
* Scrollspy
* Automatically update nav targets based on scroll position
*
* Require `most-visible.js` from https://github.com/andyexeter/most-visible
* Require `most-visible.js` (https://github.com/andyexeter/most-visible)
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
export const scrollspy = {
/**
* Config
*/
var scrollspy = {
interval: 75, // Delay for detect scroll stop
sections: '[role="document"] > section', // Target for sections
nav: 'main aside nav', // Target for nav
active: 'active', // .class for active element
};
// Config
minWidth: '992px',
interval: 75,
targets: {
sections: '[role="document"] > section',
nav: 'main aside nav',
active: 'active',
},
/**
* Init
*/
if (window.matchMedia("(min-width: 992px)").matches) {
activeNav();
scrollStop(
function () {
activeNav()
}
);
}
// Init
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
this.setActiveNav();
this.scrollStop();
}
},
/**
* Set active section in nav
*/
function activeNav() {
// Set active section in nav
setActiveNav() {
// Get active section
var section = mostVisible(scrollspy.sections).getAttribute('id');
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
// Remove all active states
var allActive = document.querySelectorAll(scrollspy.nav + ' a.' + scrollspy.active);
for (var i = 0; i < allActive.length; i++) {
allActive[i].classList.remove(scrollspy.active);
}
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
links.forEach(function(link) {
link.classList.remove(this.targets.active);
}.bind(this));
// Set active state
var active = document.querySelector(scrollspy.nav + ' a[href="#' + section + '"]');
active.classList.add(scrollspy.active);
let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
activeLink.classList.add(this.targets.active);
// Open details parent
active.parentNode.parentNode.parentNode.setAttribute('open', '');
}
activeLink.closest('details').setAttribute('open', '');
},
/**
* Scroll stop
* Detect when the user stop scrolling
* Source: https://vanillajstoolkit.com/helpers/scrollstop/
*
* @param {Function} callback The function to run after scrolling
*
*/
function scrollStop(callback) {
var isScrolling;
window.addEventListener('scroll', function (event) {
// Scroll stop
scrollStop() {
let isScrolling;
window.addEventListener('scroll', function(event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
callback();
}, scrollspy.interval);
}, false);
this.setActiveNav();
}.bind(this), this.interval);
}.bind(this), false);
}
})();
}

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

@ -1,125 +1,112 @@
/*!
* Theme Switcher
/*
* Theme switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
export const themeSwitcher = {
/**
* Config
*/
var switcher = {
button: {
element: 'BUTTON',
class: 'contrast switcher theme-switcher',
on: '<i>Turn on dark mode</i>',
off: '<i>Turn off dark mode</i>'
},
target: 'body', // Button append in target
selector: 'button.theme-switcher', // Button selector in Dom
currentTheme: systemColorScheme()
};
// Config
_scheme: 'auto',
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>'
},
buttonsTarget: '.theme-switcher',
/**
* Init
*/
themeSwitcher();
// Init
init() {
this.scheme = this._scheme;
this.initSwitchers();
},
/**
* Get System Color Scheme
*
* @return {string}
*/
function systemColorScheme() {
// Prefered color scheme
get preferedColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
else {
return 'light';
}
}
},
/**
* Display Theme Switcher
*/
function themeSwitcher() {
// Insert Switcher
var button = document.createElement(switcher.button.element);
button.className = switcher.button.class;
document.querySelector(switcher.target).appendChild(button);
// Set Current Theme
setTheme(switcher.currentTheme);
// Click Listener on Switcher
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].addEventListener('click', function(event) {
// Switch Theme
if (switcher.currentTheme == 'light') {
setTheme('dark');
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
}
else {
setTheme('light');
this.scheme = 'dark';
}
}.bind(this), false);
}.bind(this));
},
}, false);
// Add new button
addButton(config) {
// Insert Switcher
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
},
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
}
else {
this._scheme = 'light';
}
}
// Set to Dark
else if (scheme == 'dark' || scheme == 'light') {
this._scheme = scheme;
}
// Set to Apply theme
this.applyScheme();
},
// Get scheme
get scheme() {
return this._scheme;
},
// Apply scheme
applyScheme() {
// Root attribute
document.querySelector('html').setAttribute('data-theme', this.scheme);
// Buttons text
const buttons = document.querySelectorAll(this.buttonsTarget);
let text;
buttons.forEach(function(button) {
if (this.scheme == 'dark') {
text = this.change.dark;
}
else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this));
}
/**
* Set Theme
*
* @param {string} set
*/
function setTheme(set) {
// Text toggle
if (set == 'light') {
var label = switcher.button.on;
}
else {
var label = switcher.button.off;
}
// Apply theme
document.querySelector('html').setAttribute('data-theme', set);
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].innerHTML = label;
switchers[i].setAttribute('aria-label', stripTags(label));
}
switcher.currentTheme = set;
}
/**
* Strip tags
*
* @param {string} html
* @return {string}
*/
function stripTags(html) {
return html.replace(/<[^>]*>?/gm, '');
}
})();
}

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

@ -36,7 +36,7 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: 1rem 0;
padding: calc(var(--spacing) * 1.625) 0;
}
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.3.0",
"version": "1.3.1",
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.0 (https://picocss.com)
* Pico.css v1.3.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example

3
scss/themes/default/_dark.scss
View file

@ -1,7 +1,6 @@
// Default: Dark theme
@mixin dark {
// Document
color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};