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
30
app/Main.hs
30
app/Main.hs
|
|
@ -7,6 +7,8 @@ import Protolude
|
||||||
import Data.Prizm.Color (HexRGB (..))
|
import Data.Prizm.Color (HexRGB (..))
|
||||||
import qualified Data.Text as Text
|
import qualified Data.Text as Text
|
||||||
import qualified Data.Text.Format as Format
|
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 System.Environment (getArgs)
|
||||||
|
|
||||||
import Lib
|
import Lib
|
||||||
|
|
@ -14,17 +16,37 @@ import Lib
|
||||||
main :: IO ()
|
main :: IO ()
|
||||||
main = do
|
main = do
|
||||||
args <- getArgs
|
args <- getArgs
|
||||||
|
tpl <- toS <$> LazyIO.readFile "resources/example.tpl"
|
||||||
case args of
|
case args of
|
||||||
[dark,light,accent] -> showPalette dark light accent
|
[dark,light,accent] -> genPaletteFile tpl (dark,light,accent)
|
||||||
|
["all"] -> traverse_ (genPaletteFile tpl) allColors
|
||||||
_ -> do
|
_ -> do
|
||||||
putText "Please give 3 colors in HEX format, dark, light and an accent color; you have given"
|
putText "Please give 3 colors in HEX format, dark, light and an accent color; you have given"
|
||||||
print args
|
print args
|
||||||
|
|
||||||
showPalette :: [Char] -> [Char] -> [Char] -> IO ()
|
allColors :: [([Char],[Char],[Char])]
|
||||||
showPalette dark light accent = do
|
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)
|
let d = HexRGB (toS dark)
|
||||||
l = HexRGB (toS light)
|
l = HexRGB (toS light)
|
||||||
c = HexRGB (toS accent)
|
c = HexRGB (toS accent)
|
||||||
palette = map unHexRGB $ genExtendedPalette d l c
|
palette = map unHexRGB $ genExtendedPalette d l c
|
||||||
annotated = zip extendedPaletteLabels palette
|
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