-
Notifications
You must be signed in to change notification settings - Fork 0
/
colors.html
40 lines (34 loc) · 2.07 KB
/
colors.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DS in CSS - Colors</title>
<link rel="shortcut icon" href="https://cdn.casebook.net/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>
<body class="cb-baseline">
<main class="cb-main">
<h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
<h2 class="cb-h5 cb-margin-bottom-large">
Colors
</h2>
<div id="root"></div>
<script type="module">
import { h, Component, render } from "https://unpkg.com/preact?module";
import htm from "https://unpkg.com/htm?module";
const html = htm.bind(h);
const colors = ["framboise", "heather", "indigo", "matter", "millennial", "nightshade", "patina", "stratus"].sort();
const tones = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].sort((a, b) => b - a);
function App(props) {
return html`<div class="cb-flex cb-flex-direction-column justify-content-stretch">${colors.map(c =>
html`<h3 id="${c}" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">${c[0].toUpperCase()}${c.substring(1)}</h3><div class="cb-flex cb-flex-wrap-wrap cb-flex-direction-row cb-flex-grow">${tones.map(t => html`<div class="cb-pad-dense cb-column-4 cb-column-6-sm cb-column-12-xs"><div class="cb-border-color-${c}-${t} cb-border-width-default cb-border-style-solid cb-border-radius-big overflow-hidden"><div class="cb-background-color-white cb-border-radius-big cb-pad-dense">${c} ${t}<br/><code class="cb-monospace cb-caption cb-text-color-secondary">.cb-color-${c}-${t}</code><br/><code class="cb-monospace cb-caption cb-text-color-secondary">.cb-background-color-${c}-${t}</code></div><div class="cb-background-color-${c}-${t} cb-pad-large"></div></div></div>`)
}</div>`
)}</div>`
}
render(html`<${App} name="World" />`, document.getElementById("root"));
</script>
</main>
</body>
</html>