generation
This commit is contained in:
Yann Esposito (Yogsototh)
parent
bef05f3ff7
commit
174e2bd9db
GPG key ID:
7B19A4C650D59646
2 changed files with 160 additions and 8 deletions
38
app/Main.hs
38
app/Main.hs
|
|
@ -4,27 +4,49 @@ module Main where
|
|||
|
||||
import Protolude
|
||||
|
||||
import Data.Prizm.Color (HexRGB (..))
|
||||
import qualified Data.Text as Text
|
||||
import qualified Data.Text.Format as Format
|
||||
import System.Environment (getArgs)
|
||||
import Data.Prizm.Color (HexRGB (..))
|
||||
import qualified Data.Text as Text
|
||||
import qualified Data.Text.Format as Format
|
||||
import qualified Data.Text.Lazy.IO as LazyIO
|
||||
import qualified Data.Text.Lazy as LazyText
|
||||
import System.Environment (getArgs)
|
||||
|
||||
import Lib
|
||||
|
||||
main :: IO ()
|
||||
main = do
|
||||
args <- getArgs
|
||||
tpl <- toS <$> LazyIO.readFile "resources/example.tpl"
|
||||
case args of
|
||||
[dark,light,accent] -> showPalette dark light accent
|
||||
[dark,light,accent] -> genPaletteFile tpl (dark,light,accent)
|
||||
["all"] -> traverse_ (genPaletteFile tpl) allColors
|
||||
_ -> do
|
||||
putText "Please give 3 colors in HEX format, dark, light and an accent color; you have given"
|
||||
print args
|
||||
|
||||
showPalette :: [Char] -> [Char] -> [Char] -> IO ()
|
||||
showPalette dark light accent = do
|
||||
allColors :: [([Char],[Char],[Char])]
|
||||
allColors = [(dark,light,accent) | dark <- colors, light <- colors, accent <- colors ]
|
||||
where
|
||||
colors = ['#':r:v:b:[] | r <- ['0','2','4','6','8','A','C','E']
|
||||
, v <- ['0','2','4','6','8','A','C','E']
|
||||
, b <- ['0','2','4','6','8','A','C','E']
|
||||
]
|
||||
|
||||
genPaletteFile :: Text -> ([Char],[Char],[Char]) -> IO ()
|
||||
genPaletteFile tpl (dark,light,accent) = do
|
||||
let palette = map toS $ genAnnotatedPalette dark light accent
|
||||
html = Text.replace "$palette$" (Text.intercalate "\n\t" palette) tpl
|
||||
filename = Format.format "palette-{}-{}-{}.html" (drop 1 dark,
|
||||
drop 1 light,
|
||||
drop 1 accent)
|
||||
LazyIO.writeFile (toS filename) (toS html)
|
||||
putText (toS filename)
|
||||
|
||||
genAnnotatedPalette :: [Char] -> [Char] -> [Char] -> [Text]
|
||||
genAnnotatedPalette dark light accent = do
|
||||
let d = HexRGB (toS dark)
|
||||
l = HexRGB (toS light)
|
||||
c = HexRGB (toS accent)
|
||||
palette = map unHexRGB $ genExtendedPalette d l c
|
||||
annotated = zip extendedPaletteLabels palette
|
||||
traverse_ (Format.print "--{}: {};\n" ) annotated
|
||||
map (toS . Format.format "--{}: {};\n") annotated
|
||||
|
|
|
|||
130
resources/example.tpl
Normal file
130
resources/example.tpl
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
:root {
|
||||
$palette$
|
||||
}
|
||||
div.dark > div , div.light > div {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 1px;
|
||||
}
|
||||
html {
|
||||
background-color: var(--base03);
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
color: var(--base0);
|
||||
}
|
||||
body { width: 730px; margin: 0 auto; }
|
||||
.dark {background-color: var(--base03); width: 100%; margin: 20px; padding: 20px; }
|
||||
.dark > .base2, .dark > .base3 { visibility: hidden; }
|
||||
.light {background-color: var(--base3); width: 100%; margin: 20px; padding: 20px; }
|
||||
.light > .base02, .light > .base03 { visibility: hidden; }
|
||||
.base03 { background-color: var(--base03); color: var(--base0); }
|
||||
.base02 { background-color: var(--base02); color: var(--base1); }
|
||||
.base01 { color: var(--base01); }
|
||||
.base00 { color: var(--base00); }
|
||||
.base0 { color: var(--base0); }
|
||||
.base1 { color: var(--base1); }
|
||||
.base2 { background-color: var(--base2); color: var(--base01); }
|
||||
.base3 { background-color: var(--base3); color: var(--base00); }
|
||||
.magenta { color: var(--magenta); }
|
||||
.red { color: var(--red); }
|
||||
.orange { color: var(--orange); }
|
||||
.yellow { color: var(--yellow); }
|
||||
.green { color: var(--green); }
|
||||
.cyan { color: var(--cyan); }
|
||||
.blue { color: var(--blue); }
|
||||
.violet { color: var(--violet); }
|
||||
.magenta-d { color: var(--magenta-d); }
|
||||
.red-d { color: var(--red-d); }
|
||||
.orange-d { color: var(--orange-d); }
|
||||
.yellow-d { color: var(--yellow-d); }
|
||||
.green-d { color: var(--green-d); }
|
||||
.cyan-d { color: var(--cyan-d); }
|
||||
.blue-d { color: var(--blue-d); }
|
||||
.violet-d { color: var(--violet-d); }
|
||||
.magenta-l { color: var(--magenta-l); }
|
||||
.red-l { color: var(--red-l); }
|
||||
.orange-l { color: var(--orange-l); }
|
||||
.yellow-l { color: var(--yellow-l); }
|
||||
.green-l { color: var(--green-l); }
|
||||
.cyan-l { color: var(--cyan-l); }
|
||||
.blue-l { color: var(--blue-l); }
|
||||
.violet-l { color: var(--violet-l); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dark">
|
||||
<div class="base03">base03</div>
|
||||
<div class="base02">base02</div>
|
||||
<div class="base01">base01</div>
|
||||
<div class="base00">base00</div>
|
||||
<div class="base0">base0</div>
|
||||
<div class="base1">base1</div>
|
||||
<div class="base2">base2</div>
|
||||
<div class="base3">base3</div>
|
||||
<div class="magenta">magenta</div>
|
||||
<div class="red">red</div>
|
||||
<div class="orange">orange</div>
|
||||
<div class="yellow">yellow</div>
|
||||
<div class="green">green</div>
|
||||
<div class="cyan">cyan</div>
|
||||
<div class="blue">blue</div>
|
||||
<div class="violet">violet</div>
|
||||
<div class="magenta-d">magenta-d</div>
|
||||
<div class="red-d">red-d</div>
|
||||
<div class="orange-d">orange-d</div>
|
||||
<div class="yellow-d">yellow-d</div>
|
||||
<div class="green-d">green-d</div>
|
||||
<div class="cyan-d">cyan-d</div>
|
||||
<div class="blue-d">blue-d</div>
|
||||
<div class="violet-d">violet-d</div>
|
||||
<div class="magenta-l">magenta-l</div>
|
||||
<div class="red-l">red-l</div>
|
||||
<div class="orange-l">orange-l</div>
|
||||
<div class="yellow-l">yellow-l</div>
|
||||
<div class="green-l">green-l</div>
|
||||
<div class="cyan-l">cyan-l</div>
|
||||
<div class="blue-l">blue-l</div>
|
||||
<div class="violet-l">violet-l</div>
|
||||
</div>
|
||||
<div class="light">
|
||||
<div class="base03">base03</div>
|
||||
<div class="base02">base02</div>
|
||||
<div class="base01">base01</div>
|
||||
<div class="base00">base00</div>
|
||||
<div class="base0">base0</div>
|
||||
<div class="base1">base1</div>
|
||||
<div class="base2">base2</div>
|
||||
<div class="base3">base3</div>
|
||||
<div class="magenta">magenta</div>
|
||||
<div class="red">red</div>
|
||||
<div class="orange">orange</div>
|
||||
<div class="yellow">yellow</div>
|
||||
<div class="green">green</div>
|
||||
<div class="cyan">cyan</div>
|
||||
<div class="blue">blue</div>
|
||||
<div class="violet">violet</div>
|
||||
<div class="magenta-d">magenta-d</div>
|
||||
<div class="red-d">red-d</div>
|
||||
<div class="orange-d">orange-d</div>
|
||||
<div class="yellow-d">yellow-d</div>
|
||||
<div class="green-d">green-d</div>
|
||||
<div class="cyan-d">cyan-d</div>
|
||||
<div class="blue-d">blue-d</div>
|
||||
<div class="violet-d">violet-d</div>
|
||||
<div class="magenta-l">magenta-l</div>
|
||||
<div class="red-l">red-l</div>
|
||||
<div class="orange-l">orange-l</div>
|
||||
<div class="yellow-l">yellow-l</div>
|
||||
<div class="green-l">green-l</div>
|
||||
<div class="cyan-l">cyan-l</div>
|
||||
<div class="blue-l">blue-l</div>
|
||||
<div class="violet-l">violet-l</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue