feat: ✨ add character color component

src/components/colors.webc

@@ -0,0 +1,62 @@
+<div class="character-colors">
+  <div class="color" webc:for="color of colors">
+    <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
+    <div class="content">
+      <p class="heading" @text="color.name"></p>
+      <p class="text" @text="color.value"></p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .character-colors {
+    --color-box-size: 5.5em;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
+    gap: 1em;
+
+    margin-block: 2em;
+
+    & .color {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: 1.5fr 1fr;
+
+      background-color: var(--clr-color-box-background);
+
+      border: var(--border-thin) solid var(--clr-box-border);
+      border-radius: 0.5em;
+
+      overflow: hidden;
+    }
+
+    & .content {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+      gap: 0.25em;
+      height: 100%;
+      padding: 0.5em;
+    }
+
+    & p {
+      margin-block: 0;
+    }
+
+    & .heading {
+      flex: 1 0 auto;
+      font-size: 0.625em;
+      line-height: 1.2;
+      color: var(--clr-heading-data);
+      text-transform: uppercase;
+      text-align: left;
+    }
+
+    & .text {
+      flex: 0 0 auto;
+      font-size: 0.75em;
+      margin-inline: 0;
+    }
+  }
+</style>