Skip to content

Swatch picker #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mttshw wants to merge 28 commits into
base: main
Choose a base branch
from
Open

Swatch picker #4

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
e5ecb97
swatch picker WIP
mttshw Dec 12, 2025
cc1217f
Update index.html
mttshw Dec 12, 2025
c9214aa
added option to exclude or include the result label
mttshw Dec 12, 2025
4df6695
updated html
mttshw Dec 12, 2025
636bc36
Update swatch-picker/open-swatch-picker.js
mttshw Dec 13, 2025
caf169d
Update swatch-picker/open-swatch-picker.js
mttshw Dec 13, 2025
cb408a6
Update swatch-picker/open-swatch-picker.js
mttshw Dec 13, 2025
4964bac
Update swatch-picker/open-swatch-picker.js
mttshw Dec 13, 2025
8fa3525
Update swatch-picker/open-swatch-picker.js
mttshw Dec 13, 2025
ccf3e9a
fixing some pr comments
mttshw Dec 13, 2025
8d4a63a
buggered it
mttshw Dec 13, 2025
419ab7c
why doesnt this work
mttshw Dec 13, 2025
a446760
removing button
mttshw Dec 13, 2025
86eae93
cant add a label inside a button
mttshw Dec 13, 2025
60dde34
reduced options a bit
mttshw Dec 13, 2025
28d75bf
removed console logs
mttshw Dec 13, 2025
88f02f2
Update swatch-picker/open-swatch-picker.js
mttshw Dec 14, 2025
ac20317
Update swatch-picker/open-swatch-picker.js
mttshw Dec 14, 2025
853e790
Update swatch-picker/open-swatch-picker.js
mttshw Dec 14, 2025
61a578d
Update swatch-picker/open-swatch-picker.js
mttshw Dec 14, 2025
697d170
dedenting
mttshw Dec 14, 2025
8069b90
cut a lot of the crap out
mttshw Dec 14, 2025
44340bc
stop converting to rgb and hex every time
mttshw Dec 14, 2025
fe81471
added form controls
mttshw Dec 14, 2025
beda35b
remove looping through elements
mttshw Dec 14, 2025
9ddf48f
remove ampersands
mttshw Dec 14, 2025
448592d
Update swatch-picker/open-swatch-picker.js
mttshw Dec 15, 2025
a2640a9
improving the way values are set
mttshw Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export default (eleventyConfig) => {
eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy("swatch-picker");
eleventyConfig.addPassthroughCopy("favicon.ico");
eleventyConfig.addPassthroughCopy("favicon.png");
return {
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 115 additions & 0 deletions swatch-picker/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/open-swatch.css">
<link rel="stylesheet" href="../css/page.css">
<title>Swatch Picker | open swatch - the open color system</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header hero>
<h1>Open Swatch</h1>
<div>
<p>Swatch picker</p>
<a href="/">&lt; Back to openswatch</a>
</div>
<section>

</section>
</header>
<main>
<section>
<h2>Default use</h2>
<p>By default the picker will return the variable </p>
<h3>Example</h3>
<open-swatch-picker show-output-label="true"></open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker show-output-label="true"&gt;&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>
<hr>
<section>
<h2>Return Hex Code</h2>
<h3>Example</h3>
<open-swatch-picker output-type="hex" show-output-label="true"></open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker output-type="hex" show-output-label="true"&gt;&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>
<hr>
<section>
<h2>Return RGB</h2>
<h3>Example</h3>
<open-swatch-picker output-type="rgb" show-output-label="true"></open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker output-type="rgb" show-output-label="true"&gt;&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>
<hr>
<section>
<h2>Use your own button</h2>
<h3>Example</h3>
<open-swatch-picker>
<button slot="button">select a color</button>
</open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker&gt;
&lt;button slot="button"&gt;select a color&lt;/button&gt;
&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>
<hr>
<section>
<h2>Add a label</h2>
<h3>Example</h3>
<open-swatch-picker>
<label slot="label">Choose color</label>
<button slot="button">select</button>
</open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker&gt;
&lt;label slot="label"&gt;Choose color&lt;/label&gt;
&lt;button slot="button"&gt;select a color&lt;/button&gt;
&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>
<hr>
<section>
<h2>Show output value</h2>
<p>Default: false</p>
<h3>Example</h3>
<open-swatch-picker show-output-label="true">
<label slot="label">Choose color</label>
<button slot="button">select</button>
</open-swatch-picker>
<h3>Usage</h3>
<pre>
<code>
&lt;open-swatch-picker show-output-label="true"&gt;
&lt;label slot="label"&gt;Choose color&lt;/label&gt;
&lt;button slot="button"&gt;select a color&lt;/button&gt;
&lt;/open-swatch-picker&gt;
</code>
</pre>
</section>

</main>
</body>
<script src="open-swatch-picker.js" defer type="module"></script>

</html>
Loading