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

Repair customization JS in docs

Browse source
This commit is contained in:
Lucas 2020-09-29 10:54:26 +07:00
parent a5f837a08b
commit a0c65bcded
7 changed files with 61 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

5
docs/css/pico.docs.css
View file

@ -7,6 +7,7 @@
: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"],
@ -243,6 +244,10 @@ main > aside details[open] summary {
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
background-image: var(--icon-check-dark);
}
#customization h4 {
transition: color var(--transition);
}

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

File diff suppressed because one or more lines are too long

6
docs/index.html
View file

@ -202,7 +202,7 @@
<p>CSS:</p>
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
<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> {
@ -213,7 +213,7 @@
}
<em>/* <span class="name"></span>Dark theme (Auto) */
<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="light"])</b> {
@ -224,7 +224,7 @@
}
<em>/* <span class="name"></span>Dark theme (Forced) */
<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>;

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

File diff suppressed because one or more lines are too long

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

@ -221,7 +221,7 @@
"a200": "#eeff41",
"a400": "#c6ff00",
"a700": "#aeea00",
"inverse": "#000"
"inverse": "rgba(0, 0, 0, 0.75)"
},
"yellow": {
"50": "#fffde7",
@ -238,7 +238,7 @@
"a200": "#ffff00",
"a400": "#ffea00",
"a700": "#ffd600",
"inverse": "#000"
"inverse": "rgba(0, 0, 0, 0.75)"
},
"amber": {
"50": "#fff8e1",
@ -255,7 +255,7 @@
"a200": "#ffd740",
"a400": "#ffc400",
"a700": "#ffab00",
"inverse": "#000"
"inverse": "rgba(0, 0, 0, 0.75)"
},
"orange": {
"50": "#fff3e0",
@ -377,7 +377,7 @@
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['500'] +'; '
+ '}'
+ '}';
}
}
@ -438,41 +438,28 @@
function generateTheme(name, data) {
// Code and Color name
// TODO: Create a function
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
for (var i = 0; i < cName.length; ++i) {
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
}
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
for (var i = 0; i < c500.length; ++i) {
c500[i].innerHTML = data[500];
}
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
for (var i = 0; i < c600.length; ++i) {
c600[i].innerHTML = data[600];
}
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
for (var i = 0; i < c700.length; ++i) {
c700[i].innerHTML = data[700];
}
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
for (var i = 0; i < c600OutlineLight.length; ++i) {
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
}
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
for (var i = 0; i < c600OutlineDark.length; ++i) {
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
}
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
for (var i = 0; i < inverse.length; ++i) {
inverse[i].innerHTML = data['inverse'];
// 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'],
}
// CSS Style
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];
}
});
// Update CSS Style
var generatedStyles = '[data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[700] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
@ -480,8 +467,8 @@
+ '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[400] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
@ -489,11 +476,19 @@
+ '}'
+ '[data-theme="dark"] [data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[500] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '[data-theme="generated"] {'
+ '--primary-border: var(--primary);'
+ '--primary-hover-border: var(--primary-hover);'
+ '--input-hover-border: var(--primary-hover);'
+ '--input-focus: var(--primary-focus);'
+ '--input-inverse: var(--primary-inverse);'
+ '}';
// Insert CSS Styles
@ -518,7 +513,7 @@
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 + ')';
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
}
throw new Error('Bad Hex');
}

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

@ -58,7 +58,7 @@
&[data-color="yellow"],
&[data-color="amber"] {
&.picked {
// TODO
background-image: var(--icon-check-dark);
}
}
}

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

@ -4,4 +4,5 @@
: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");
--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");
}