@buttonschool/create-wireframe 0.1.1 → 0.2.0

package/template/src/kit/components/input.css

@@ -0,0 +1,31 @@
+/* Wireframe Kit – text input component. Uses --wire-* tokens only. */
+
+.wire-input {
+  display: block;
+  width: 100%;
+  min-inline-size: 0;
+  padding: var(--wire-space-md) var(--wire-space-lg);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: var(--wire-border-width) solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+  box-sizing: border-box;
+}
+
+.wire-input::placeholder {
+  color: var(--wire-text-placeholder);
+}
+
+.wire-input:focus {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.wire-input:disabled {
+  color: var(--wire-text-muted);
+  background-color: var(--wire-surface-alt);
+  border-color: var(--wire-border-light);
+  cursor: not-allowed;
+}

package/template/src/kit/components/label.css

@@ -0,0 +1,14 @@
+/* Wireframe Kit – label component. Uses --wire-* tokens only. */
+
+.wire-label {
+  display: block;
+  font-size: var(--wire-text-label);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-secondary);
+  margin-block-end: var(--wire-space-2xs);
+}
+
+.wire-label--required::after {
+  content: " *";
+  color: var(--wire-text-muted);
+}

package/template/src/kit/components/radio.css

@@ -0,0 +1,26 @@
+/* Wireframe Kit – radio component. Uses --wire-* tokens only. */
+
+.wire-radio {
+  display: flex;
+  align-items: center;
+  gap: var(--wire-space-sm);
+  cursor: pointer;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+}
+
+.wire-radio input {
+  width: var(--wire-size-icon-md);
+  height: var(--wire-size-icon-md);
+  accent-color: var(--wire-dark);
+  cursor: pointer;
+}
+
+.wire-radio:has(input:disabled) {
+  color: var(--wire-text-muted);
+  cursor: not-allowed;
+}
+
+.wire-radio:has(input:disabled) input {
+  cursor: not-allowed;
+}

package/template/src/kit/components/select.css

@@ -0,0 +1,69 @@
+/* Wireframe Kit – select component. Uses --wire-* tokens only. */
+
+.wire-select,
+.wire-select-wrap select {
+  display: block;
+  width: 100%;
+  min-inline-size: 0;
+  padding: var(--wire-space-md) var(--wire-space-lg);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: var(--wire-border-width) solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: auto;
+}
+
+.wire-select:focus,
+.wire-select-wrap select:focus {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.wire-select:disabled,
+.wire-select-wrap select:disabled {
+  color: var(--wire-text-muted);
+  background-color: var(--wire-surface-alt);
+  border-color: var(--wire-border-light);
+  cursor: not-allowed;
+}
+
+/* Wrapper: hides native arrow and adds chevron via CSS (no icon element). */
+.wire-select-wrap {
+  position: relative;
+  display: block;
+}
+
+.wire-select-wrap select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-inline-end: calc(var(--wire-space-lg) + var(--wire-size-icon-sm) + var(--wire-space-sm));
+}
+
+/* Chevron (Lucide-style) as pseudo-element so no JS or extra HTML is needed. */
+.wire-select-wrap::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: var(--wire-space-md);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--wire-size-icon-sm);
+  height: var(--wire-size-icon-sm);
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
+  mask-size: contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
+  -webkit-mask-size: contain;
+  pointer-events: none;
+}
+
+.wire-select-wrap {
+  color: var(--wire-text-muted);
+}
+
+.wire-select-wrap:has(select:disabled) {
+  color: var(--wire-text-placeholder);
+}

package/template/src/kit/components/textarea.css

@@ -0,0 +1,33 @@
+/* Wireframe Kit – textarea component. Uses --wire-* tokens only. */
+
+.wire-textarea {
+  display: block;
+  width: 100%;
+  min-inline-size: 0;
+  padding: var(--wire-space-md) var(--wire-space-lg);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  line-height: var(--wire-line-height);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: var(--wire-border-width) solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.wire-textarea::placeholder {
+  color: var(--wire-text-placeholder);
+}
+
+.wire-textarea:focus {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.wire-textarea:disabled {
+  color: var(--wire-text-muted);
+  background-color: var(--wire-surface-alt);
+  border-color: var(--wire-border-light);
+  cursor: not-allowed;
+}

package/template/src/kit/tokens.css

@@ -29,7 +29,24 @@
   --wire-font-weight-bold: 700;
   --wire-line-height: 1.4;
 
+  /* Type scale (rem), adapted from AUI wireframe kit */
+  --wire-text-2xs: 0.625rem;
+  --wire-text-xs: 0.75rem;
+  --wire-text-sm: 0.875rem;
+  --wire-text-base: 1rem;
+  --wire-text-lg: 1.125rem;
+  --wire-text-xl: 1.25rem;
+  --wire-text-2xl: 1.5rem;
+
+  /* Semantic type aliases */
+  --wire-text-body: var(--wire-text-sm);
+  --wire-text-caption: var(--wire-text-xs);
+  --wire-text-label: var(--wire-text-sm);
+  --wire-text-heading: var(--wire-text-2xl);
+  --wire-text-subheading: var(--wire-text-xl);
+
   /* Spacing scale */
+  --wire-space-2xs: 2px;
   --wire-space-xs: 4px;
   --wire-space-sm: 8px;
   --wire-space-md: 12px;
@@ -38,9 +55,20 @@
   --wire-space-2xl: 24px;
   --wire-space-3xl: 32px;
 
+  /* Border width – controls and strokes */
+  --wire-border-width: 2px;
+
   /* Border radius */
   --wire-radius-sm: 4px;
   --wire-radius-md: 6px;
   --wire-radius-lg: 8px;
   --wire-radius-full: 50%;
+
+  /* Sizing – icons (square) and avatars (diameter) */
+  --wire-size-icon-sm: 1rem;
+  --wire-size-icon-md: 1.25rem;
+  --wire-size-icon-lg: 1.5rem;
+  --wire-size-avatar-sm: 1.5rem;
+  --wire-size-avatar-md: 2rem;
+  --wire-size-avatar-lg: 2.5rem;
 }

package/template/src/main.js

@@ -1,6 +1 @@
-import "./style.css";
-
-document.querySelector("#app").innerHTML = `
-  <h1>Wireframe</h1>
-  <p>Edit <code>src/main.js</code> and save. Vite will hot-reload.</p>
-`;
+import "./game.js";

package/template/src/strings.json

@@ -0,0 +1,24 @@
+{
+  "site": {
+    "title": "Wireframe",
+    "nav": { "start": "Start", "tokens": "Tokens", "components": "Components" }
+  },
+  "game": {
+    "scoreLabel": " points",
+    "inputLabel": "Your word",
+    "inputPlaceholder": "Enter a word",
+    "submitButton": "Guess",
+    "foundHeading": "Found words",
+    "hint": "Make words with the letters. Use the center letter in every word.",
+    "feedback": {
+      "tryAgain": "Try again.",
+      "tooShort": "Too short.",
+      "missingCenter": "Missing center letter.",
+      "invalidLetters": "Invalid letters.",
+      "notInList": "Not in word list.",
+      "alreadyFound": "Already found.",
+      "pangram": "Pangram!",
+      "good": "Good!"
+    }
+  }
+}

package/template/src/{style.css → styles/base.css}

@@ -1,13 +1,13 @@
-@import "./kit/tokens.css";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 body {
+  margin: 0;
   font-family: var(--wire-font-family);
   line-height: var(--wire-line-height);
   color: var(--wire-text-primary);
-  background-color: var(--wire-surface);
-  margin: 0;
-}
-
-#app {
-  padding: var(--wire-space-xl);
+  background-color: var(--wire-bg);
 }

package/template/src/styles/components/nav.css

@@ -0,0 +1,36 @@
+.site-nav {
+  display: flex;
+  gap: 0;
+  padding: 0 var(--wire-space-lg);
+  border-bottom: var(--wire-border-width) solid var(--wire-border-light);
+  background-color: var(--wire-surface);
+}
+
+.site-nav a {
+  color: var(--wire-text-secondary);
+  display: block;
+  font-weight: var(--wire-font-weight-bold);
+  padding: var(--wire-space-sm) var(--wire-space-md);
+  text-decoration: none;
+}
+
+.site-nav a:hover {
+  color: var(--wire-text-primary);
+}
+
+.site-nav a[aria-current="page"] {
+  color: var(--wire-text-primary);
+  position: relative;
+}
+
+.site-nav a[aria-current="page"]::after {
+  content: "";
+  display: block;
+  height: var(--wire-border-width);
+  background-color: var(--wire-light);
+  border-radius: var(--wire-radius-sm) var(--wire-radius-sm) 0 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

package/template/src/styles/layout.css

@@ -0,0 +1,5 @@
+main {
+  max-width: 60ch;
+  margin: 0 auto;
+  padding: var(--wire-space-xl);
+}

package/template/src/styles/main.css

@@ -0,0 +1,15 @@
+@import "../kit/tokens.css";
+@import "../kit/components/button.css";
+@import "../kit/components/input.css";
+@import "../kit/components/textarea.css";
+@import "../kit/components/checkbox.css";
+@import "../kit/components/radio.css";
+@import "../kit/components/select.css";
+@import "../kit/components/label.css";
+@import "../kit/components/field.css";
+@import "base.css";
+@import "layout.css";
+@import "components/nav.css";
+@import "pages/start.css";
+@import "pages/tokens-showcase.css";
+@import "pages/components-showcase.css";

package/template/src/styles/pages/components-showcase.css

@@ -0,0 +1,38 @@
+/* Components showcase page. Reuses .showcase-section from tokens-showcase. */
+
+.components-showcase-intro {
+  margin-block-end: var(--wire-space-2xl);
+  color: var(--wire-text-muted);
+}
+
+.components-showcase code {
+  padding: var(--wire-space-2xs) 0;
+  background-color: var(--wire-surface-alt);
+  border-radius: var(--wire-radius-sm);
+  font-family: "Monaspace Argon", monospace;
+  font-size: var(--wire-text-xs);
+  color: #c41;
+  white-space: nowrap;
+}
+
+.component-demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wire-space-md);
+  align-items: center;
+}
+
+.component-demo-block {
+  max-inline-size: 20rem;
+  margin-block-end: var(--wire-space-lg);
+}
+
+.component-demo-block:last-child {
+  margin-block-end: 0;
+}
+
+.component-demo-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-md);
+}

package/template/src/styles/pages/start.css

@@ -0,0 +1,243 @@
+/* Start page – Spelling Bee game */
+
+.visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.game-area {
+  max-inline-size: 36rem;
+  margin-inline: auto;
+}
+
+.game-area .bee-score {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--wire-space-sm);
+  font-size: var(--wire-text-xl);
+  margin-block-end: var(--wire-space-lg);
+}
+
+.game-area .bee-score-icon {
+  width: var(--wire-size-icon-md);
+  height: var(--wire-size-icon-md);
+  flex-shrink: 0;
+  color: var(--wire-text-muted);
+}
+
+.game-area .bee-score-value {
+  font-weight: var(--wire-font-weight-bold);
+}
+
+.game-area .bee-score-label {
+  font-size: var(--wire-text-body);
+  font-weight: var(--wire-font-weight-normal);
+  color: var(--wire-text-muted);
+}
+
+/* Honeycomb: 7 letters, pointy-top hexes via ::before, absolute positioning */
+.bee-honeycomb {
+  --width: 3.25em;
+  --height: calc(var(--width) * 0.8660254);
+  --gap: var(--wire-space-xs);
+  box-sizing: content-box;
+  position: relative;
+  height: calc(3 * var(--height) + 2 * var(--gap));
+  width: calc(2.5 * var(--width) + 2 * 1.1547 * var(--gap));
+  margin-block-end: var(--wire-space-2xl);
+  margin-inline: auto;
+  padding: calc(var(--height) / 2 - var(--gap)) calc(var(--width) / 2 - var(--gap));
+}
+
+/* DOM order: 1=E(center), 2=W, 3=I, 4=R, 5=F, 6=A, 7=M */
+.bee-honeycomb .bee-letter:nth-child(1) {
+  transform: scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(2) {
+  transform: translate(0, calc(-1 * var(--height) - var(--gap))) scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(3) {
+  transform: translate(
+    calc(0.75 * var(--width) + 1.1547 * var(--gap)),
+    calc(-0.5 * var(--height) - 0.5 * var(--gap))
+  ) scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(4) {
+  transform: translate(
+    calc(0.75 * var(--width) + 1.1547 * var(--gap)),
+    calc(0.5 * var(--height) + 0.5 * var(--gap))
+  ) scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(5) {
+  transform: translate(
+    calc(-0.75 * var(--width) - 1.1547 * var(--gap)),
+    calc(-0.5 * var(--height) - 0.5 * var(--gap))
+  ) scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(6) {
+  transform: translate(
+    calc(-0.75 * var(--width) - 1.1547 * var(--gap)),
+    calc(0.5 * var(--height) + 0.5 * var(--gap))
+  ) scale(var(--bee-scale, 1));
+}
+.bee-honeycomb .bee-letter:nth-child(7) {
+  transform: translate(0, calc(var(--height) + var(--gap))) scale(var(--bee-scale, 1));
+}
+
+.bee-letter {
+  --bee-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  --bee-scale: 1;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--width);
+  height: var(--height);
+  margin-left: calc(-0.5 * var(--width));
+  margin-top: calc(-0.5 * var(--height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: var(--wire-text-xl);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-primary);
+  cursor: pointer;
+  transition: transform 50ms ease-out;
+}
+.bee-letter:active,
+.bee-letter.bee-letter--typed-press {
+  --bee-scale: 0.92;
+}
+
+.bee-letter::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  z-index: -1;
+  background-color: var(--wire-white);
+  clip-path: var(--bee-hex);
+  -webkit-clip-path: var(--bee-hex);
+}
+
+.bee-letter::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-color: var(--wire-black);
+  clip-path: var(--bee-hex);
+  -webkit-clip-path: var(--bee-hex);
+}
+
+.bee-letter.bee-letter--center {
+  color: var(--wire-white);
+  z-index: 1;
+}
+
+.bee-letter.bee-letter--center::before {
+  background-color: var(--wire-dark);
+}
+
+.bee-focus-region:focus {
+  outline: none;
+}
+
+/* Word input row */
+.bee-input-row {
+  display: flex;
+  gap: var(--wire-space-sm);
+  margin-block-end: var(--wire-space-md);
+}
+
+.bee-input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: var(--wire-space-md) var(--wire-space-lg);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: var(--wire-border-width) solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+}
+
+.bee-input::placeholder {
+  color: var(--wire-text-placeholder);
+}
+
+.bee-input:focus,
+.game-area:focus-within .bee-input {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.bee-submit {
+  padding: var(--wire-space-md) var(--wire-space-xl);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-white);
+  background-color: var(--wire-dark);
+  border: var(--wire-border-width) solid var(--wire-dark);
+  border-radius: var(--wire-radius-lg);
+  cursor: pointer;
+}
+
+.bee-submit:hover {
+  background-color: var(--wire-black);
+  border-color: var(--wire-black);
+}
+
+/* Feedback message */
+.bee-feedback {
+  min-block-size: 1.5em;
+  margin-block-end: var(--wire-space-lg);
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-secondary);
+}
+
+.bee-feedback.bee-feedback--success {
+  color: var(--wire-text-primary);
+  font-weight: var(--wire-font-weight-bold);
+}
+
+.bee-feedback.bee-feedback--error {
+  color: var(--wire-text-primary);
+}
+
+/* Found words list */
+.bee-found-heading {
+  font-size: var(--wire-text-sm);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-muted);
+  margin-block-end: var(--wire-space-sm);
+}
+
+.bee-found-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wire-space-xs) var(--wire-space-lg);
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-secondary);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.bee-found-list li {
+  display: flex;
+  align-items: center;
+  gap: var(--wire-space-xs);
+}
+
+.bee-found-list .bee-pangram {
+  font-weight: var(--wire-font-weight-bold);
+}