@gemka/core 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chrome.css +77 -0
- package/package.json +1 -1
- package/tokens.css +5 -0
package/chrome.css
CHANGED
|
@@ -576,3 +576,80 @@
|
|
|
576
576
|
.theme-vintage .auth-avatar:hover { opacity: 1; }
|
|
577
577
|
.theme-vintage .nav-logo-btn:hover { opacity: 0.8; }
|
|
578
578
|
}
|
|
579
|
+
|
|
580
|
+
/* ============================================================================
|
|
581
|
+
Shared product footer + product-name coloring (UNSCOPED)
|
|
582
|
+
|
|
583
|
+
Everything above is .theme-vintage-scoped (GemTimer's single permanent theme).
|
|
584
|
+
The rules below are intentionally UNSCOPED: the first consumer is gemka's
|
|
585
|
+
warm-paper auth pages, which do not carry .theme-vintage. They are namespaced
|
|
586
|
+
.gk-footer / .gk-prod so they never collide with the app-side .site-footer /
|
|
587
|
+
.landing-footer that live in GemTimer's index.html (mirrored in GemTodo).
|
|
588
|
+
That separation matters because sync-tokens inlines this sheet into gemtimer's
|
|
589
|
+
index.html on every deploy, so reusing .site-footer here would restyle its live
|
|
590
|
+
footer. These are additive; no rule above is touched.
|
|
591
|
+
|
|
592
|
+
Content model is slot-based: this sheet styles the frame, the top rule, generic
|
|
593
|
+
link styling, and light layout primitives; each consumer supplies its own
|
|
594
|
+
columns and links. Frame size is parameterized so a consumer can match its own
|
|
595
|
+
content frame without forking:
|
|
596
|
+
--gk-footer-max frame max-width (default 1200px)
|
|
597
|
+
--gk-footer-inset side padding + top-rule inset (default 40px)
|
|
598
|
+
gemka sets 1100px / 40px to match its auth frame.
|
|
599
|
+
============================================================================ */
|
|
600
|
+
.gk-footer {
|
|
601
|
+
position: relative;
|
|
602
|
+
box-sizing: border-box;
|
|
603
|
+
width: 100%;
|
|
604
|
+
max-width: var(--gk-footer-max, 1200px);
|
|
605
|
+
margin-left: auto;
|
|
606
|
+
margin-right: auto;
|
|
607
|
+
padding: 0.5rem var(--gk-footer-inset, 40px);
|
|
608
|
+
background: var(--gk-bg);
|
|
609
|
+
font-size: 0.72rem;
|
|
610
|
+
color: var(--gk-muted);
|
|
611
|
+
}
|
|
612
|
+
/* 2px oxblood top rule, inset to match the frame's side padding. */
|
|
613
|
+
.gk-footer::before {
|
|
614
|
+
content: '';
|
|
615
|
+
position: absolute;
|
|
616
|
+
top: 0;
|
|
617
|
+
left: var(--gk-footer-inset, 40px);
|
|
618
|
+
right: var(--gk-footer-inset, 40px);
|
|
619
|
+
border-top: 2px solid var(--gk-accent);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
/* Link primitive: muted, lifts to oxblood on hover. Styles any <a> inside the
|
|
623
|
+
footer so consumers just drop in their own links. */
|
|
624
|
+
.gk-footer a {
|
|
625
|
+
color: var(--gk-muted);
|
|
626
|
+
text-decoration: none;
|
|
627
|
+
transition: color 0.15s;
|
|
628
|
+
}
|
|
629
|
+
.gk-footer a:hover { color: var(--gk-accent); }
|
|
630
|
+
|
|
631
|
+
/* Layout primitives: compose columns/rows from these; the consumer owns the
|
|
632
|
+
overall grid. .gk-footer-row is a horizontal group; .gk-footer-sep is the
|
|
633
|
+
faint inline separator between links. */
|
|
634
|
+
.gk-footer-row {
|
|
635
|
+
display: flex;
|
|
636
|
+
align-items: center;
|
|
637
|
+
gap: 0.5rem;
|
|
638
|
+
}
|
|
639
|
+
.gk-footer-sep { color: var(--gk-faint); }
|
|
640
|
+
|
|
641
|
+
/* ── Product wordmark coloring (product names as text, anywhere) ───────────── */
|
|
642
|
+
/* Wrap a product name in .gk-prod and color each half with a child span:
|
|
643
|
+
GemTimer -> .gk-prod-ink "Gem" + .gk-prod-accent "Timer"
|
|
644
|
+
GemTodo -> .gk-prod-ink "Gem" + .gk-prod-accent "Todo"
|
|
645
|
+
IdeaKache -> .gk-prod-ink "Idea" + .gk-prod-brick "Kache"
|
|
646
|
+
.gk-prod inherits the surrounding font size and weight so it drops into any
|
|
647
|
+
context (footers now, more later). */
|
|
648
|
+
.gk-prod {
|
|
649
|
+
display: inline-block;
|
|
650
|
+
font-size: inherit;
|
|
651
|
+
font-weight: inherit;
|
|
652
|
+
}
|
|
653
|
+
.gk-prod-ink { color: var(--gk-ink); }
|
|
654
|
+
.gk-prod-accent { color: var(--gk-accent); }
|
|
655
|
+
.gk-prod-brick { color: var(--gk-brand-kache); }
|
package/package.json
CHANGED
package/tokens.css
CHANGED
|
@@ -22,6 +22,11 @@
|
|
|
22
22
|
--gk-accent-wash: rgba(200, 16, 46, 0.06);
|
|
23
23
|
--gk-accent-wash-hover: rgba(200, 16, 46, 0.10);
|
|
24
24
|
|
|
25
|
+
/* Product brand: per-product wordmark accents (product names shown as text) */
|
|
26
|
+
--gk-brand-kache: #9b5b42; /* IdeaKache brick: the "Kache" half of the wordmark.
|
|
27
|
+
Was hardcoded in gemka home cards + auth note. No
|
|
28
|
+
PoolRoome token yet, per Jeremy. */
|
|
29
|
+
|
|
25
30
|
/* Shared row-hover tint */
|
|
26
31
|
--gk-hover-cream: #f0ece0;
|
|
27
32
|
|