Skip to content

Commit a112c12

Browse files
barelyhumanbarelyhuman
committed
initial commit
0 parents  commit a112c12

File tree

15 files changed

+726
-0
lines changed

15 files changed

+726
-0
lines changed

‎.github/workflows/docs.yml‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
name: Deploy Docs
2+
3+
on:
4+
push:
5+
branches: ["main"]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
env:
18+
BUILD_PATH: "."
19+
20+
jobs:
21+
build:
22+
name: Build
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
- name: Setup Node
28+
uses: actions/setup-node@v4
29+
with:
30+
node-version: "20"
31+
- name: Setup Pages
32+
id: pages
33+
uses: actions/configure-pages@v5
34+
- name: Install dependencies
35+
run: npm ci
36+
working-directory: ${{ env.BUILD_PATH }}
37+
- name: Build
38+
run: |
39+
npm run build
40+
working-directory: ${{ env.BUILD_PATH }}
41+
- name: Upload artifact
42+
uses: actions/upload-pages-artifact@v3
43+
with:
44+
path: ${{ env.BUILD_PATH }}/docs
45+
46+
deploy:
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
needs: build
51+
runs-on: ubuntu-latest
52+
name: Deploy
53+
steps:
54+
- name: Deploy to GitHub Pages
55+
id: deployment
56+
uses: actions/deploy-pages@v4

‎.github/workflows/release.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Publish Package to npmjs
2+
on:
3+
release:
4+
types: [published]
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
permissions:
9+
contents: read
10+
id-token: write
11+
steps:
12+
- uses: actions/checkout@v4
13+
- uses: actions/setup-node@v4
14+
with:
15+
cache: "npm"
16+
cache-dependency-path: package-lock.json
17+
node-version: "20.x"
18+
registry-url: "https://registry.npmjs.org"
19+
- run: npm ci
20+
- run: npm publish --provenance --access public
21+
env:
22+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎css/preach.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
:root {
2+
--preach--base: #f9f9fb;
3+
--preach--surface: #edeef2;
4+
--preach--overlay: #e1e3ea;
5+
--preach--muted: #8890aa;
6+
--preach--subtle: #555d77;
7+
--preach--text: #2a2e3c;
8+
--preach--accent: #d1e16a;
9+
--preach--text-on-accent: #254e34;
10+
--preach--success: #233805;
11+
--preach--success-light: #d8f5a2;
12+
--preach--error: #761919;
13+
--preach--error-light: #ffc9c9;
14+
--preach--warning: #7a3f00;
15+
--preach--warning-light: #ffec99;
16+
--preach--info: #213078;
17+
--preach--info-light: #bac8ff;
18+
--preach--neutral: #505963;
19+
--preach--neutral-light: #e9ecef;
20+
}

‎css/preach.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>@preachjs/colors</title>
9+
<link rel="stylesheet" href="https://esm.sh/toastify-js@1.12.0/src/toastify.css">
10+
<link rel="stylesheet" href="/styles.css">
11+
</head>
12+
13+
<body>
14+
<section>
15+
<header>
16+
<div>
17+
<h1>
18+
@preachjs/colors
19+
</h1>
20+
<p>
21+
<small>
22+
A simple pastel pallete
23+
</small>
24+
</p>
25+
</div>
26+
<nav>
27+
<ul>
28+
<li>
29+
<a href="https://github.com/preachjs/colors">Github</a>
30+
</li>
31+
<li>
32+
<a href="https://npm.im/@preachjs/colors">NPM</a>
33+
</li>
34+
</ul>
35+
</nav>
36+
</header>
37+
<br>
38+
<div>
39+
<button id="copy-css">
40+
Copy CSS
41+
</button>
42+
</div>
43+
<br>
44+
<div id="palette">
45+
<!-- <div class="card" data-color="#fafafa/zinc-50" style="background:var(--zinc-50)">
46+
</div>
47+
<div class="card" data-color="#f4f4f5/zinc-100" style="background:var(--zinc-100)">
48+
49+
</div>
50+
<div class="card" data-color="#e4e4e7/zinc-200" style="background:var(--zinc-200)">
51+
52+
</div>
53+
<div class="card" data-color="#d4d4d8/zinc-300" style="background:var(--zinc-300)">
54+
55+
</div>
56+
<div class="card" data-color="#a1a1aa/zinc-400" style="background:var(--zinc-400)">
57+
58+
</div>
59+
<div class="card" data-color="#71717a/zinc-500" style="background:var(--zinc-500)">
60+
61+
</div>
62+
<div class="card" data-color="#52525b/zinc-600" style="background:var(--zinc-600)">
63+
64+
</div>
65+
<div class="card" data-color="#3f3f46/zinc-700" style="background:var(--zinc-700)">
66+
67+
</div>
68+
<div class="card" data-color="#27272a/zinc-800" style="background:var(--zinc-800)">
69+
70+
</div>
71+
<div class="card" data-color="#18181b/zinc-900" style="background:var(--zinc-900)">
72+
73+
</div> -->
74+
</div>
75+
</section>
76+
77+
<script type="module" src="/main.js"></script>
78+
</body>
79+
80+
</html>

‎docs/main.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { colors } from "./preach.js";
2+
import { kebabCase } from "https://esm.sh/change-case@5.4.4";
3+
import Toastify from "https://esm.sh/toastify-js@1.12.0";
4+
5+
const copyCSSBtn = document.getElementById("copy-css");
6+
const palette = document.getElementById("palette");
7+
8+
const cssStyles = await fetch("/preach.css").then((d) => d.text());
9+
10+
copyCSSBtn.addEventListener("click", () => {
11+
copy(cssStyles);
12+
});
13+
14+
for (let colorKey in colors) {
15+
const color = colors[colorKey];
16+
const div = document.createElement("div");
17+
div.classList.add("card");
18+
div.dataset.color = `${color}/${colorKey}`;
19+
div.style.background = `var(--preach--${kebabCase(colorKey)})`;
20+
if (colorKey === "text") {
21+
div.style.color = `var(--preach--surface)`;
22+
} else if (colorKey.endsWith("Light")) {
23+
div.style.color = `var(--preach--${kebabCase(colorKey.replace(/Light$/, ""))})`;
24+
} else if (colors[colorKey + "Light"]) {
25+
div.style.color = `var(--preach--${kebabCase(colorKey + "Light")})`;
26+
} else {
27+
div.style.color = "var(--preach-text)";
28+
}
29+
30+
palette.appendChild(div);
31+
}
32+
33+
const colorCards = palette.querySelectorAll(".card");
34+
for (let index = 0; index < colorCards.length; index++) {
35+
const element = colorCards[index];
36+
37+
element.addEventListener("click", () => {
38+
const color = element.getAttribute("data-color").split("/")[0];
39+
copy(color);
40+
});
41+
}
42+
43+
function copy(toCopy) {
44+
navigator.clipboard.writeText(toCopy).then(() => {
45+
toast(`Copied to clipboard`);
46+
});
47+
}
48+
49+
function toast(msg) {
50+
Toastify({
51+
text: msg,
52+
duration: 3000,
53+
close: false,
54+
gravity: "top",
55+
className: "preach-toast",
56+
position: "right",
57+
}).showToast();
58+
}

‎docs/preach.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:root {
2+
--preach--base: #f9f9fb;
3+
--preach--surface: #edeef2;
4+
--preach--overlay: #e1e3ea;
5+
--preach--muted: #8890aa;
6+
--preach--subtle: #555d77;
7+
--preach--text: #2a2e3c;
8+
--preach--accent: #d1e16a;
9+
--preach--text-on-accent: #254e34;
10+
--preach--success: #233805;
11+
--preach--success-light: #d8f5a2;
12+
--preach--error: #761919;
13+
--preach--error-light: #ffc9c9;
14+
--preach--warning: #7a3f00;
15+
--preach--warning-light: #ffec99;
16+
--preach--info: #213078;
17+
--preach--info-light: #bac8ff;
18+
--preach--neutral: #505963;
19+
--preach--neutral-light: #e9ecef;
20+
}
21+

‎docs/preach.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { hexToHSL, hexToRGB } from "https://esm.sh/@barelyhuman/tocolor";
2+
3+
export const colors = {
4+
// base colors
5+
base: "#F9F9FB",
6+
surface: "#EDEEF2",
7+
overlay: "#E1E3EA",
8+
muted: "#8890AA",
9+
subtle: "#555D77",
10+
text: "#2A2E3C",
11+
accent: "#D1E16A",
12+
textOnAccent: "#254E34",
13+
14+
// variants
15+
success: "#233805",
16+
successLight: "#D8F5A2",
17+
18+
error: "#761919",
19+
errorLight: "#FFC9C9",
20+
21+
warning: "#7A3F00",
22+
warningLight: "#FFEC99",
23+
24+
info: "#213078",
25+
infoLight: "#BAC8FF",
26+
27+
neutral: "#505963",
28+
neutralLight: "#E9ECEF",
29+
};
30+
31+
/**
32+
* @type {Record<keyof typeof colors, import("@barelyhuman/tocolor").HSL>}
33+
*/
34+
export const colorsHSL = Object.fromEntries(
35+
Object.entries(colors).map(([k, v]) => {
36+
return [k, hexToHSL(v)];
37+
})
38+
);
39+
40+
/**
41+
* @type {Record<keyof typeof colors, import("@barelyhuman/tocolor").RGB>}
42+
*/
43+
export const colorsRGB = Object.fromEntries(
44+
Object.entries(colors).map(([k, v]) => {
45+
return [k, hexToRGB(v)];
46+
})
47+
);

0 commit comments

Comments
 (0)