@haxtheweb/simple-colors
Version:
Automated conversion of simple-colors/
135 lines (129 loc) • 4.57 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>SimpleColors: simple-colors Overview</title>
<script src="../../../node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '../simple-colors.js';
import '../lib/simple-colors-picker.js';
</script>
<style>
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h1>simple-colors</h1>
<p>
Simple-colors is a method for managing colors. It includes a
custom element, and CSS variables declared in shared styles.
</p>
<p>
With simple colors, you can easily create a dark mode version of
your interfaces, and/or swap accent colors on the fly.
</p>
<demo-snippet>
<style>
div {
padding: 20px;
margin: 0 0 15px;
}
button {
color: var(--simple-colors-default-theme-grey-1);
border-radius: 3px;
padding: 3px 5px;
font-size: 110%;
cursor: pointer;
}
#box {
background-color: var(--simple-colors-default-theme-grey-1);
border: 1px solid var(--simple-colors-default-theme-grey-2);
display: block;
margin: 0 15px;
padding: 20px;
}
#box {
color: var(--simple-colors-default-theme-grey-12);
background-color: var(--simple-colors-default-theme-accent-1);
border: 4px solid var(--simple-colors-default-theme-accent-3);
}
simple-colors-picker-demo[dark] #box {
background-color: var(--simple-colors-default-theme-grey-1);
border: 4px solid var(--simple-colors-default-theme-accent-6);
}
.button {
background-color: var(--simple-colors-default-theme-accent-7);
border: 2px solid var(--simple-colors-default-theme-accent-8);
}
.button:hover {
background-color: var(--simple-colors-default-theme-accent-8);
}
.confirm {
background-color: var(--simple-colors-default-theme-blue-7);
border: 2px solid var(--simple-colors-default-theme-blue-8);
}
.confirm:hover {
background-color: var(--simple-colors-default-theme-blue-8);
}
.delete {
background-color: var(--simple-colors-default-theme-red-7);
border: 2px solid var(--simple-colors-default-theme-red-8);
}
.delete:hover {
background-color: var(--simple-colors-default-theme-red-8);
}
input[type="checkbox"],
input[type="radio"] {
height: 20px;
width: 20px;
}
</style>
<script>
window.onload = () => {
let simplecolors = document.getElementById('simplecolors'),
mode = document.getElementById('mode'),
color = document.getElementById('color');
mode.addEventListener('click',e => {
if(mode.checked) {
simplecolors.setAttribute('dark','dark');
} else {
simplecolors.removeAttribute('dark');
}
});
color.addEventListener('change',e => {
simplecolors.setAttribute('accent-color',color.value);
});
};
</script>
<div id="controls">
<p>
<label>Enable Dark Mode: </label><input id="mode" type="checkbox">
</p>
<p>
<label>Set Accent-Color: </label>
<simple-colors-picker id="color"></simple-colors-picker>
</p>
</div>
<simple-colors id="simplecolors">
<div id="box">
<input type="checkbox" checked>
<br>
<input type="radio" checked>
<br>
<input type="range">
<br>
<progress></progress>
<p>This is an accent-color box.</p>
<button class="button">
Button
</button>
<button class="confirm">Save</button>
<button class="delete">Delete</button>
</div>
</simple-colors>
</demo-snippet>
</div>
</body>
</html>