@gemka/core 0.5.2 → 0.6.0

package/chrome.css

@@ -576,3 +576,80 @@
   .theme-vintage .auth-avatar:hover { opacity: 1; }
   .theme-vintage .nav-logo-btn:hover { opacity: 0.8; }
 }
+
+/* ============================================================================
+   Shared product footer + product-name coloring (UNSCOPED)
+
+   Everything above is .theme-vintage-scoped (GemTimer's single permanent theme).
+   The rules below are intentionally UNSCOPED: the first consumer is gemka's
+   warm-paper auth pages, which do not carry .theme-vintage. They are namespaced
+   .gk-footer / .gk-prod so they never collide with the app-side .site-footer /
+   .landing-footer that live in GemTimer's index.html (mirrored in GemTodo).
+   That separation matters because sync-tokens inlines this sheet into gemtimer's
+   index.html on every deploy, so reusing .site-footer here would restyle its live
+   footer. These are additive; no rule above is touched.
+
+   Content model is slot-based: this sheet styles the frame, the top rule, generic
+   link styling, and light layout primitives; each consumer supplies its own
+   columns and links. Frame size is parameterized so a consumer can match its own
+   content frame without forking:
+     --gk-footer-max    frame max-width (default 1200px)
+     --gk-footer-inset  side padding + top-rule inset (default 40px)
+   gemka sets 1100px / 40px to match its auth frame.
+   ============================================================================ */
+.gk-footer {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--gk-footer-max, 1200px);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.5rem var(--gk-footer-inset, 40px);
+  background: var(--gk-bg);
+  font-size: 0.72rem;
+  color: var(--gk-muted);
+}
+/* 2px oxblood top rule, inset to match the frame's side padding. */
+.gk-footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: var(--gk-footer-inset, 40px);
+  right: var(--gk-footer-inset, 40px);
+  border-top: 2px solid var(--gk-accent);
+}
+
+/* Link primitive: muted, lifts to oxblood on hover. Styles any <a> inside the
+   footer so consumers just drop in their own links. */
+.gk-footer a {
+  color: var(--gk-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.gk-footer a:hover { color: var(--gk-accent); }
+
+/* Layout primitives: compose columns/rows from these; the consumer owns the
+   overall grid. .gk-footer-row is a horizontal group; .gk-footer-sep is the
+   faint inline separator between links. */
+.gk-footer-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.gk-footer-sep { color: var(--gk-faint); }
+
+/* ── Product wordmark coloring (product names as text, anywhere) ───────────── */
+/* Wrap a product name in .gk-prod and color each half with a child span:
+     GemTimer   -> .gk-prod-ink "Gem"  + .gk-prod-accent "Timer"
+     GemTodo    -> .gk-prod-ink "Gem"  + .gk-prod-accent "Todo"
+     IdeaKache  -> .gk-prod-ink "Idea" + .gk-prod-brick  "Kache"
+   .gk-prod inherits the surrounding font size and weight so it drops into any
+   context (footers now, more later). */
+.gk-prod {
+  display: inline-block;
+  font-size: inherit;
+  font-weight: inherit;
+}
+.gk-prod-ink    { color: var(--gk-ink); }
+.gk-prod-accent { color: var(--gk-accent); }
+.gk-prod-brick  { color: var(--gk-brand-kache); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemka/core",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Canonical GemKa design tokens (cream paper, oxblood accent, warm neutrals, Inter + Fraunces).",
   "license": "UNLICENSED",
   "type": "module",

package/tokens.css

@@ -22,6 +22,11 @@
   --gk-accent-wash:        rgba(200, 16, 46, 0.06);
   --gk-accent-wash-hover:  rgba(200, 16, 46, 0.10);
 
+  /* Product brand: per-product wordmark accents (product names shown as text) */
+  --gk-brand-kache:   #9b5b42;   /* IdeaKache brick: the "Kache" half of the wordmark.
+                                    Was hardcoded in gemka home cards + auth note. No
+                                    PoolRoome token yet, per Jeremy. */
+
   /* Shared row-hover tint */
   --gk-hover-cream:   #f0ece0;
 
@@ -35,7 +40,14 @@
   /* Chrome primitives: non-color dimensions consumed by chrome.css */
   --gk-nav-rule:      1px;             /* nav / dd-nav oxblood underline (base 2px folds to the vintage 1px) */
   --gk-avatar:        30px;            /* auth-avatar diameter */
-  --gk-clock-half:    5.5rem;          /* nav clock date/time half width */
+  --gk-clock-half:    7rem;            /* nav clock date/time half width — must hold the widest
+                                          zero-padded 10-char date (pt/de dd?dd?yyyy ~108px at the
+                                          14px/0.18em nav clock). At 5.5rem the date text overflowed
+                                          the fixed box rightward into the middle, eating the flex
+                                          gap (pt collided at ~0px). Sized so the date fits inside
+                                          the box, text-align:right seats it at the inner edge, and
+                                          chrome.css's gap:1.25rem reads as a real ~20px gap for
+                                          every locale; en (short 7/7/2026 date) is unchanged. */
   --gk-heatmap-cell:  14px;            /* deep-dive heatmap cell + day-label row height */
   --gk-stat-card-pad: 0.5rem 0.65rem;  /* deep-dive stat / peak-hour card padding */
 }