Last active
March 11, 2023 12:23
-
-
Save joshdavenport/86cb857671226ea6fb530c6bd7923bdf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Name: Preview CSS Color | |
// Description: Preview any CSS color accepted by background-color | |
// Author: Josh Davenport-Smith | |
// Twitter: @joshdprts | |
import "@johnlindquist/kit"; | |
const color = await arg("Color"); | |
await div(` | |
<div class="pt-2 h-full w-full"> | |
<div class="checker h-full w-full"> | |
<div style="background-color: ${color}" class="h-full w-full flex items-start"> | |
<div class="bg-white"> | |
<div style="background-color: ${color}" class="p-2"> | |
<div style="color: ${color}; filter: invert(100%); text-shadow: 0 0 1px hsla(0, 0%, 100%, 0.2)" class="w-fit text-xs">${color}</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<style type="text/css"> | |
.checker { | |
background-color: #fff; | |
background-size: 24px 24px; | |
background-position: 0 0, 12px 12px; | |
background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef); | |
} | |
</style> | |
`); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment