Palette

building-plans/src/components/GltfScene.module.scss

@@ -1,5 +1,4 @@
 .canvas {
-  // margin: calc(0px - var(--main-padding));
   width: 100vw;
   height: calc(100vh - var(--nav-primary-height));
 }

building-plans/src/root.css

@@ -1,5 +1,17 @@
 :root {
+  --color-gray-1: hwb(0 98% 2%);
+  --color-gray-2: hwb(0 93% 7%);
+  --color-gray-3: hwb(0 88% 12%);
+  --color-gray-4: hwb(0 74% 26%);
+  --color-gray-5: hwb(0 62% 38%);
+  --color-gray-6: hwb(0 46% 54%);
+  --color-gray-7: hwb(0 38% 62%);
+  --color-gray-8: hwb(0 26% 74%);
+  --color-gray-9: hwb(0 13% 87%);
+
+  /* hsl vs hsv/hsb */
   --color-nav-primary-bg: hwb(0deg 100% 0%);
+  --color-nav-primary-bg: var(--color-gray-1);
   --color-body-bg: hwb(240deg 20% 70.2%);
   --color-body-fg: hwb(0deg 100% 0%);
 

building-plans/src/root.tsx

@@ -31,6 +31,7 @@ export default function Root() {
         <ErrorBoundary>
           <nav>
             <A href={BASE_URL}>Home</A>
+            <A href={`${BASE_URL}palette`}>Palette</A>
             <A href={`${BASE_URL}scene/rabbit-house`}>Rabbits</A>
           </nav>
           <Suspense>

building-plans/src/routes/palette.module.scss

@@ -0,0 +1,7 @@
+.swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 100px;
+}

building-plans/src/routes/palette.tsx

@@ -0,0 +1,31 @@
+import { For } from 'solid-js'
+import { Title } from 'solid-start'
+import styles from './palette.module.scss'
+function* range(start: number, end: number) {
+  for (let i = start; i <= end; ++i) {
+    yield i
+  }
+}
+
+export default function Palette() {
+  return (
+    <main>
+      <Title>Palette</Title>
+      <h1>Palette</h1>
+      <div>
+        <For each={[...range(1, 9)]}>
+          {(i) => (
+            <div
+              class={styles.swatch}
+              style={{
+                color: `var(--color-gray-${i > 3 ? 1 : 9})`,
+                ['background-color']: `var(--color-gray-${i})`,
+              }}>
+              gray-{i}
+            </div>
+          )}
+        </For>
+      </div>
+    </main>
+  )
+}