Skip to content
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

Pr/contrast grid #208

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Pr/contrast grid #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac1abf4
Update grid
Sep 25, 2024
e7e716e
add eightshapes as gh-pages
Sep 27, 2024
ada096e
Update grid
Oct 2, 2024
24fa551
add grid generator
Oct 2, 2024
f09c9c2
Update grid
Oct 2, 2024
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
85 changes: 77 additions & 8 deletions grid.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,85 @@
import fs from 'fs'
import queryString from 'query-string'
import fs from 'fs-extra'
import JSON5 from 'json5'
import { ContrastRatioChecker } from 'contrast-ratio-checker'

const colorTokensString = fs.readFileSync('./tokens/_options/color.json5')
const colorTokens = JSON5.parse(colorTokensString)
const tokens = colorTokens.options.color
const filteredTokens = Object.keys(tokens).filter(name => name !== 'transparent').map(name => [name, tokens[name]])
const colors = filteredTokens.map(([key, value]) => `${value}, ${key}`).join('\n')
const file = './grid/index.html'

const formattedTokens = Object.keys(tokens).map(name => `${tokens[name]}, ${name}`).join('\n')
const crc = new ContrastRatioChecker()

const urlData = {
'foreground-colors': formattedTokens,
'background-colors': formattedTokens
}
const template = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REI - Cedar Tokens - Contrast Grid</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-stone-100 grid grid-cols-[320px,1fr] min-h-dvh">
<div class="px-6 py-4 flex flex-col h-full">
<h1 class="text-2xl font-bold">REI - Cedar Tokens</h1>
<h2 class="text-lg font-bold">Contrast Grid</h2>
<label for="colors" class="block mt-6 font-bold text-xs uppercase">Colors</label>
<textarea class="border border-stone-300 rounded p-4 font-mono text-xs w-full mt-2 min-h-96" id="colors" readonly>${colors}</textarea>
</div>
<div class="bg-white py-4 px-6">
<table class="border-collapse border border-stone-300 text-center w-full table-fixed">
<thead>
<tr>
<th class="font-bold text-xs border border-stone-300 w-[140px] h-[140px]">
<div class="relative w-full h-full" style="background: linear-gradient(to top right, #ffffff 0%, #ffffff calc(50% - 1px), rgb(214 211 209) 50%, #ffffff calc(50% + 1px), #ffffff 100%)">
<span class="absolute right-0 top-1/2 transform -translate-y-1/2 p-2">text</span>
<span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 p-2">background</span>
</div>
</th>
${filteredTokens
.map(([key, value]) => `<th class="font-bold text-xs border border-stone-300 w-[140px] h-[140px]">
<div class="grid place-content-center p-2">
<span>${key}</span>
<span>${value}</span>
</div>
</th>`).join('')}
</tr>
</thead>
<tbody>
${filteredTokens.map(([key, value]) => `<tr>
<td class="font-bold text-xs border border-stone-300 w-[140px] h-[140px]">
<div class="grid place-content-center p-2">
<span>${key}</span>
<span>${value}</span>
</div>
</td>
${filteredTokens.map(([key2, value2]) => {
const ratio = crc.getContrastRatioByHex(value, value2)
const level = (ratio >= 7) ? 'AAA' : (ratio >= 4.5) ? 'AA' : (ratio >= 3) ? 'AA18' : 'DNP'
const color = level === 'AA' ? 'neutral-200' : level === 'AAA' ? 'neutral-200' : level === 'AA18' ? 'amber-300' : 'red-600'
const textColor = level === 'DNP' ? 'white' : 'neutral-900'

console.log(`https://contrast-grid.eightshapes.com/?${queryString.stringify(urlData)}`)
if (key === key2) {
return `<td class="font-bold text-xs border border-stone-300 w-[140px] h-[140px]"></td>`
}

return `<td class="font-bold text-xs border border-stone-300 w-[140px] h-[140px] relative" style="background-color: ${value}; color: ${value2}">
<div class="grid place
-content-center p-2">
<span>${key2}</span>
<span class="absolute left-4 bottom-4 bg-${color} text-${textColor} p-1 text-xs rounded" title="${level}">
${level}
</span>
</div>
</td>`
}).join('')}
</tr>`).join('')}
</tbody>
</table>
</div>
</body>
</html>
`

fs.mkdirpSync('./grid')
fs.writeFileSync(file, template)
Loading