Skip to content

Instantly share code, notes, and snippets.

@MidasXIV

MidasXIV/index.html

Created September 4, 2020 14:16
Show Gist options
  • Save MidasXIV/61af75514e3fc7ad375e52de6ffbb2d3 to your computer and use it in GitHub Desktop.
Save MidasXIV/61af75514e3fc7ad375e52de6ffbb2d3 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Accessibility Config
Raw
index.html
<div class="bg-gray-100 block min-h-screen">
<div class="bg-gray-900 border-b-1 mb-4 border-gray-500 text-white p-4 shadow-lg">
<h1 class="text-2xl uppercase font-bold">Tailwind Accessibility Config 🎨</h1>
<div class="text-xs">
Github: <a href="https://github.com/optimizasean/TailwindAccessibilityConfig" target="_blank" class="font-mono">optimizasean/TailwindAccessibilityConfig
</a>
</div>
</div>
<div class="overflow-auto block" x-data="wheel()" x-cloak>
<label class="p-2"><input type="checkbox" x-model="mode" /> mode <span x-text="mode==true?'rgb':'hex'"></span></label>
<div class="space-y-1 h-auto text-xs p-2 mx-auto items-center flex flex-row items-start lg:block">
<template x-for="set in Object.entries(colorset)" :key="set">
<div class="p-2 flex flex-col">
<div x-text="set[0]" class="text-center lg:text-left block font-bold text-sm mb-2 w-40"></div>
<div class="flex flex-col lg:flex-row items-center space-y-2 lg:space-y-0 lg:space-x-1">
<template x-for="color in Object.entries(Object.assign({'010':null,'020':null,'030':null,'040':null,'050':null,'100':null,'200':null,'300':null,'400':null,'500':null,'600':null,'700':null,'800':null,'900':null}, set[1])).sort()" :key="color">
<div class="p-1 shadow bg-white flex items-center rounded-full hover:bg-transparent hover:text-white groupedcolor transition-all w- duration-300" :class="{'hascolor': !!color[1]}">
<div class="flex items-center leading-normal mx-1">
<span class="font-mono groupedcolor-key" x-text="color[0]"></span>
<span class="font-mono hidden groupedcolor-color z-1 select-all w-auto flex-grow-1 truncate"
x-text="mode ? hexToRgb(color[1]) : color[1]"
></span>
</div>
<div class="ml-auto block w-6 h-6 rounded-full shadow-inner flex-shrink-0 groupedcolor-swatch z-0 transition duration-100 ease-out"
:style="`background-color: ${color[1]};`"
></div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
Raw
script.js
function wheel() {
return {
mode: false,
hexToRgb(hex) {
if(!hex) return null;
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb('+parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16)+')' /*{
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}*/ : null;
},
colorset: {
// white: '#ffffff',
// black: '#000000',
red: {
"050": "#f9eeee",
"100": "#f8e1de",
"200": "#f7bbb1",
"300": "#f2938c",
"400": "#e9695f",
"500": "#d83933",
"600": "#a23737",
"700": "#6f3331",
"800": "#3e2927",
"900": "#1b1616"
},
"red-warm": {
"050": "#f6efea",
"100": "#f4e3db",
"200": "#ecc0a7",
"300": "#dca081",
"400": "#d27a56",
"500": "#c3512c",
"600": "#805039",
"700": "#524236",
"800": "#332d29",
"900": "#1f1c18"
},
"red-warm-vivid": {
"200": "#f6bd9c",
"300": "#f39268",
"400": "#ee601d",
"500": "#d63e04"
},
"red-cool": {
"050": "#f8eff1 ",
"100": "#f3e1e4",
"200": "#ecbec6",
"300": "#e09aa6",
"400": "#e16b80",
"500": "#cd425b",
"600": "#9e394b",
"700": "#68363f",
"800": "#40282c",
"900": "#1e1517"
},
"red-cool-vivid": {
"100": "#f8dfe2",
"200": "#f8b9c5",
"300": "#fd8ba0",
"400": "#f45d79",
"500": "#e41d3d",
"600": "#b21d38",
"700": "#822133"
},
"red-vivid": {
"100": "#fde0db",
"200": "#fdb8ae",
"300": "#ff8d7b",
"400": "#fb5a47",
"500": "#e52207",
"600": "#b51d09",
"700": "#8b1303",
"800": "#5c1111"
},
orange: {
"050": "#f6efe9",
"100": "#f2e4d4",
"200": "#f3bf90",
"300": "#f09860",
"400": "#dd7533",
"500": "#a86437",
"600": "#775540",
"700": "#524236",
"800": "#332d27",
"900": "#1b1614"
},
"orange-warm": {
"050": "#faeee5",
"100": "#fbe0d0",
"200": "#f7bca2",
"300": "#f3966d",
"400": "#e17141",
"500": "#bd5727",
"600": "#914734",
"700": "#633a32",
"800": "#3d2925",
"900": "#1c1615"
},
"orange-warm-vivid": {
"200": "#fbbaa7",
"300": "#fc906d",
"400": "#ff580a",
"500": "#d24302"
},
"orange-vivid": {
"050": "#fef2e4",
"100": "#fce2c5",
"200": "#ffbc78",
"300": "#fa9441",
"400": "#e66f0e",
"500": "#c05600"
},
gold: {
"050": "#f5f0e6",
"100": "#f1e5cd",
"200": "#dec69a",
"300": "#c7a97b",
"400": "#ad8b65",
"500": "#8e704f",
"600": "#6b5947",
"700": "#4d4438",
"800": "#322d26",
"900": "#191714"
},
"gold-vivid": {
"050": "#fef0c8",
"100": "#ffe396",
"200": "#ffbe2e",
"300": "#e5a000",
"400": "#c2850c",
"500": "#936f38"
},
yellow: {
"050": "#faf3d1",
"100": "#f5e6af",
"200": "#e6c74c",
"300": "#c9ab48",
"400": "#a88f48",
"500": "#8a7237",
"600": "#6b5a39",
"700": "#504332",
"800": "#332d27",
"900": "#1a1614"
},
"yellow-vivid": {
"100": "#fee685",
"200": "#face00"
},
green: {
"050": "#eaf4dd",
"100": "#dfeacd",
"200": "#b8d293",
"300": "#9bb672",
"400": "#7d9b4e",
"500": "#607f35",
"600": "#4c6424",
"700": "#3c4a29",
"800": "#293021",
"900": "#161814"
},
"green-warm": {
"050": "#f1f4d7",
"100": "#e7eab7",
"200": "#cbd17a",
"300": "#a6b557",
"400": "#8a984b",
"500": "#6f7a41",
"600": "#5a5f38",
"700": "#45472f",
"800": "#2d2f21",
"900": "#171712"
},
"green-warm-vivid": {
"050": "#f1f6a5",
"100": "#e2f106",
"200": "#c5d30a",
"300": "#a3b72c",
"400": "#7e9c1d",
"500": "#6a7d00"
},
"green-cool": {
"050": "#ecf3ec",
"100": "#dbebde",
"200": "#b4d0b9",
"300": "#86b98e",
"400": "#5e9f69",
"500": "#4d8055",
"600": "#446443",
"700": "#37493b",
"800": "#28312a",
"900": "#1a1f1a"
},
"green-cool-vivid": {
"050": "#e3f5e1",
"100": "#b7f5bd",
"200": "#70e17b",
"300": "#21c834",
"400": "#00a91c",
"500": "#008817"
},
"green-vivid": {
"050": "#ddf9c7",
"100": "#c3ee90",
"200": "#98d035",
"300": "#7fb135",
"400": "#719f2a",
"500": "#538200"
},
mint: {
"050": "#dbf6ed",
"100": "#c7efe2",
"200": "#92d9bb",
"300": "#5abf95",
"400": "#34a37e",
"500": "#1f8462",
"600": "#286846",
"700": "#204e34",
"800": "#193324",
"900": "#0d1a12"
},
"mint-cool": {
"050": "#e0f7f6",
"100": "#c4eeeb",
"200": "#9bd4cf",
"300": "#6fbab3",
"400": "#4f9e99",
"500": "#21827f",
"600": "#376462",
"700": "#2a4b45",
"800": "#203131",
"900": "#111818"
},
"mint-cool-vivid": {
"050": "#d5fbf3",
"100": "#7efbe1",
"200": "#29e1cb",
"300": "#1dc2ae",
"400": "#00a398"
},
"mint-vivid": {
"050": "#c9fbeb",
"100": "#5dfdc8",
"200": "#0ceda6",
"300": "#04c585",
"400": "#146947"
},
cyan: {
"050": "#e7f6f8",
"100": "#ccecf2",
"200": "#9ddfeb",
"300": "#6ecbdb",
"400": "#449dac",
"500": "#168092",
"600": "#2a646d",
"700": "#2c4a4e",
"800": "#203133",
"900": "#111819"
},
"cyan-vivid": {
"100": "#a8f2ff",
"200": "#52daf2",
"300": "#00bde3",
"400": "#009ec1"
},
blue: {
"050": "#eff6fb",
"100": "#d9e8f6",
"200": "#aacdec",
"300": "#73b3e7",
"400": "#4f97d1",
"500": "#2378c3",
"600": "#2c608a",
"700": "#274863",
"800": "#1f303e",
"900": "#11181d"
},
"blue-warm": {
"050": "#ecf1f7",
"100": "#e1e7f1",
"200": "#bbcae4",
"300": "#98afd2",
"400": "#7292c7",
"500": "#4a77b4",
"600": "#345d96",
"700": "#2f4668",
"800": "#252f3e",
"900": "#13171f"
},
"blue-warm-vivid": {
"200": "#b7caf0",
"300": "#81aefc",
"400": "#5994f6",
"500": "#2672de",
"600": "#0050d8",
"700": "#1a4480",
"800": "#162e51"
},
"blue-cool": {
"050": "#e7f2f5",
"100": "#dae9ee",
"200": "#adcfdc",
"300": "#82b4c9",
"400": "#6499af",
"500": "#3a7d95",
"600": "#2e6276",
"700": "#224a58",
"800": "#14333d",
"900": "#0f191c"
},
"blue-cool-vivid": {
"050": "#e1f3f8",
"200": "#97d4ea",
"300": "#59b9de",
"400": "#28a0cb",
"500": "#0d7ea2",
"600": "#07648d",
"700": "#074b69",
"800": "#002D3F"
},
"blue-vivid": {
"300": "#58b4ff",
"400": "#2491ff",
"500": "#0076d6",
"600": "#005ea2",
"700": "#0b4778",
"800": "#112f4e"
},
indigo: {
"050": "#efeff8",
"100": "#e5e4fa",
"200": "#c5c5f3",
"300": "#a5a8eb",
"400": "#8889db",
"500": "#676cc8",
"600": "#4d52af",
"700": "#3d4076",
"800": "#2b2c40",
"900": "#16171f"
},
"indigo-warm": {
"050": "#f1eff7",
"100": "#e7e3fa",
"200": "#cbc4f2",
"300": "#afa5e8",
"400": "#9287d8",
"500": "#7665d1",
"600": "#5e519e",
"700": "#453c7b",
"800": "#2e2c40",
"900": "#18161d"
},
"indigo-warm-vivid": {
"300": "#b69fff",
"400": "#967efb",
"500": "#745fe9",
"600": "#5942d2"
},
"indigo-cool": {
"050": "#eef0f9",
"100": "#e1e6f9",
"200": "#bbc8f5",
"300": "#96abee",
"400": "#6b8ee8",
"500": "#496fd8",
"600": "#3f57a6",
"700": "#374274",
"800": "#292d42",
"900": "#151622"
},
"indigo-cool-vivid": {
"400": "#628ef4",
"600": "#4150f2"
},
"indigo-vivid": {
"200": "#c4c6f2",
"300": "#a5a8e8",
"500": "#656bd7",
"600": "#4d52b0"
},
violet: {
"050": "#f4f1f9",
"100": "#ebe3f9",
"200": "#d0c3e9",
"300": "#b8a2e3",
"400": "#9d84d2",
"500": "#8168b3",
"600": "#665190",
"700": "#4c3d69",
"800": "#312b3f",
"900": "#18161d"
},
"violet-warm": {
"050": "#f8f0f9",
"100": "#f6dff8",
"200": "#e2bee4",
"300": "#d29ad8",
"400": "#bf77c8",
"500": "#b04abd",
"600": "#864381",
"700": "#5c395a",
"800": "#382936",
"900": "#1b151b"
},
"violet-warm-vivid": {
"050": "#fbebfd",
"100": "#fbdcff",
"200": "#f4b2ff",
"300": "#ee83ff",
"400": "#d85bef",
"500": "#be32d0"
},
"violet-vivid": {
"100": "#ede3ff",
"200": "#d5bfff",
"300": "#c39deb",
"400": "#ad79e9",
"500": "#9355dc",
"600": "#783cb9",
"700": "#562b97"
},
magenta: {
"050": "#f9f0f2",
"100": "#f6e1e8",
"200": "#f0bbcc",
"300": "#e895b3",
"400": "#e0699f",
"500": "#c84281",
"600": "#8b4566",
"700": "#66364b",
"800": "#402731",
"900": "#1b1617"
},
"magenta-vivid": {
"100": "#ffddea",
"200": "#ffb4cf",
"300": "#ff87b2",
"400": "#fd4496",
"500": "#d72d79",
"600": "#ab2165"
},
gray: {
"010": "#fcfcfc",
"020": "#f9f9f9",
"030": "#f6f6f6",
"040": "#f3f3f3",
"050": "#f0f0f0",
"100": "#e6e6e6",
"200": "#c9c9c9",
"300": "#adadad",
"400": "#919191",
"500": "#757575",
"600": "#5c5c5c",
"700": "#454545",
"800": "#2e2e2e",
"900": "#1b1b1b"
},
"gray-warm": {
"010": "#fcfcfb",
"020": "#f9f9f7",
"030": "#f6f6f2",
"040": "#f5f5f0",
"050": "#f0f0ec",
"100": "#e6e6e2",
"200": "#cac9c0",
"300": "#afaea2",
"400": "#929285",
"500": "#76766a",
"600": "#5d5d52",
"700": "#454540",
"800": "#2e2e2a",
"900": "#171716"
},
"gray-cool": {
"010": "#fbfcfd",
"020": "#f7f9fa",
"030": "#f5f6f7",
"040": "#f1f3f6",
"050": "#edeff0",
"100": "#dcdee0",
"200": "#c6cace",
"300": "#a9aeb1",
"400": "#8d9297",
"500": "#71767a",
"600": "#565c65",
"700": "#3d4551",
"800": "#2d2e2f",
"900": "#1c1d1f"
}
}
};
}
Raw
scripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
Raw
style.css
[x-cloak] { display: none; }
.groupedcolor {
position: relative;
background-color: transparent;
background-color: rgba(255,255,255,.2);
line-height: 1rem;
min-width: 6rem;
height: 2rem;
}
.groupedcolor.hascolor {
background-color: #fff;
}
.groupedcolor .groupedcolor-key {
color: #eee;
}
.groupedcolor.hascolor .groupedcolor-key {
color: black;
}
.groupedcolor.hascolor .groupedcolor-color {
display: none;
}
.groupedcolor.hascolor:hover .groupedcolor-key,
.groupedcolor.hascolor:focus .groupedcolor-key {
display: none;
}
.groupedcolor.hascolor:hover .groupedcolor-color,
.groupedcolor.hascolor:focus .groupedcolor-color {
display: block;
text-shadow: 1px 1px #000000;
}
.groupedcolor.hascolor .groupedcolor-swatch:hover {
display: flex;
position: absolute;
top: 0; right: 0; bottom: 0; bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
Raw
tailwind-accessibility-config.markdown

Tailwind Accessibility Config

This is an overview of the https://github.com/optimizasean/TailwindAccessibilityConfig repository. It's a color theme config for Tailwind CSS based on the USWDS color tokens: https://designsystem.digital.gov/design-tokens/color/overview/

Hovering will show the current # or rgb value based on the mode set (which you can toggle between: hex/rgb). Clicking the text will select it, so you can copy its value. Hovering the color circle itself will fill the color into its parent container for a better look.

A Pen by Ken Verhaegen on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment