@commonpub/layer 0.43.1 → 0.43.2

package/layouts/default.vue

@@ -266,20 +266,50 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 .cpub-layout { min-height: 100vh; display: flex; flex-direction: column; }
 
-/* ═══ TOPBAR ═══ */
+/* ═══ TOPBAR ═══
+   Structure is token-driven (--cpub-topbar-*) so a theme can change the bar's SHAPE
+   — height, radius, shadow, position, padding — not just its colors, without forking
+   this layout. Every default reproduces the current flat 48px bar exactly.
+   (Centering the bar's CONTENT at a max width while keeping a full-bleed background
+   needs an inner wrapper element, which the base markup doesn't have — that one
+   aspect stays a structural choice, not a token.) */
 .cpub-topbar {
-  position: fixed; top: 0; left: 0; right: 0; height: 48px;
-  background: var(--surface); border-bottom: var(--border-width-default) solid var(--border);
-  display: flex; align-items: center; padding: 0 20px; gap: 0; z-index: 100;
+  position: var(--cpub-topbar-position, fixed); top: 0; left: 0; right: 0;
+  height: var(--cpub-topbar-height, 48px);
+  background: var(--cpub-topbar-bg, var(--surface));
+  border-bottom: var(--cpub-topbar-border, var(--border-width-default) solid var(--border));
+  border-bottom-left-radius: var(--cpub-topbar-radius, 0);
+  border-bottom-right-radius: var(--cpub-topbar-radius, 0);
+  box-shadow: var(--cpub-topbar-shadow, none);
+  backdrop-filter: var(--cpub-topbar-blur, none);
+  display: flex; align-items: center;
+  padding: 0 var(--cpub-topbar-padding-x, 20px); gap: 0; z-index: 100;
 }
 .cpub-topbar-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--text); }
 
 /* Nav styles use :deep() to reach into NavRenderer/NavDropdown/NavLink child components */
 :deep(.cpub-topbar-nav) { display: flex; align-items: center; gap: 2px; margin-left: 24px; }
-:deep(.cpub-nav-link) { font-size: 12px; color: var(--text-dim); padding: 5px 12px; border: var(--border-width-default) solid transparent; background: none; text-decoration: none; transition: color 0.15s, background 0.15s; display: flex; align-items: center; gap: 6px; }
+/* Nav-link shape + active state are token-driven (--cpub-nav-link-*) so a theme can
+   make pill-shaped/larger/accent-colored nav links (deveco) without forking. Defaults
+   = the current 12px square neutral link. */
+:deep(.cpub-nav-link) {
+  font-size: var(--cpub-nav-link-size, 12px);
+  font-weight: var(--cpub-nav-link-weight, 400);
+  color: var(--cpub-nav-link-color, var(--text-dim));
+  padding: var(--cpub-nav-link-padding, 5px 12px);
+  border: var(--border-width-default) solid transparent;
+  border-radius: var(--cpub-nav-link-radius, var(--radius));
+  background: none; text-decoration: none;
+  transition: color 0.15s, background 0.15s; display: flex; align-items: center; gap: 6px;
+}
 :deep(.cpub-nav-link i) { font-size: 10px; }
 :deep(.cpub-nav-link:hover) { color: var(--text); background: var(--surface2); }
-:deep(.cpub-nav-link.router-link-active) { color: var(--text); background: var(--surface2); border-color: var(--border); }
+:deep(.cpub-nav-link.router-link-active) {
+  color: var(--cpub-nav-link-active-color, var(--text));
+  background: var(--cpub-nav-link-active-bg, var(--surface2));
+  border-color: var(--cpub-nav-link-active-border, var(--border));
+  font-weight: var(--cpub-nav-link-active-weight, 400);
+}
 :deep(.cpub-nav-link--disabled) { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
 
 /* Nav dropdowns */
@@ -343,7 +373,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-dropdown-item--mobile { display: none; }
 
 .cpub-mobile-toggle { display: none; width: 32px; height: 32px; background: none; border: var(--border-width-default) solid transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }
-.cpub-mobile-menu { display: none; position: fixed; inset: 0; top: 48px; z-index: 99; background: var(--color-surface-overlay-light); }
+.cpub-mobile-menu { display: none; position: fixed; inset: 0; top: var(--cpub-topbar-height, 48px); z-index: 99; background: var(--color-surface-overlay-light); }
 :deep(.cpub-mobile-nav) { background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); padding: 8px 0; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
 :deep(.cpub-mobile-link) { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; color: var(--text-dim); text-decoration: none; transition: background 0.1s; }
 :deep(.cpub-mobile-link:hover) { background: var(--surface2); color: var(--text); }
@@ -351,22 +381,27 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-mobile-divider { height: 2px; background: var(--border2); margin: 4px 16px; }
 .cpub-mobile-nav-extra { border-top: var(--border-width-default) solid var(--border2); }
 
-#main-content { margin-top: 48px; flex: 1; }
+/* Offsets the fixed top bar — MUST track --cpub-topbar-height (only when the bar is
+   actually fixed; a sticky bar reserves its own space, so a theme that switches to
+   sticky should zero this via --cpub-content-top-offset). */
+#main-content { margin-top: var(--cpub-content-top-offset, var(--cpub-topbar-height, 48px)); flex: 1; }
 
 /* ═══ FOOTER ═══ */
-.cpub-footer { background: var(--surface); border-top: var(--border-width-default) solid var(--border); margin-top: auto; }
+/* Footer bg + text are token-driven (--cpub-footer-*) so a theme can ship a dark/branded
+   footer (deveco green) without forking. Defaults = the current neutral surface footer. */
+.cpub-footer { background: var(--cpub-footer-bg, var(--surface)); border-top: var(--border-width-default) solid var(--cpub-footer-border, var(--border)); margin-top: auto; }
 .cpub-footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 32px 32px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
 .cpub-footer-brand { display: flex; flex-direction: column; gap: 8px; }
-.cpub-footer-logo { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text); }
-.cpub-footer-tagline { font-size: 12px; color: var(--text-dim); }
+.cpub-footer-logo { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--cpub-footer-heading, var(--text)); }
+.cpub-footer-tagline { font-size: 12px; color: var(--cpub-footer-text, var(--text-dim)); }
 .cpub-footer-social { display: flex; gap: 8px; margin-top: 8px; }
-.cpub-footer-social-link { width: 28px; height: 28px; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 12px; text-decoration: none; transition: all 0.12s; }
+.cpub-footer-social-link { width: 28px; height: 28px; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--cpub-footer-text, var(--text-dim)); font-size: 12px; text-decoration: none; transition: all 0.12s; }
 .cpub-footer-social-link:hover { background: var(--accent); color: var(--color-text-inverse); border-color: var(--accent); }
 .cpub-footer-col { display: flex; flex-direction: column; gap: 6px; }
-.cpub-footer-col-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 4px; }
-.cpub-footer-link { font-size: 12px; color: var(--text-dim); text-decoration: none; transition: color 0.12s; }
-.cpub-footer-link:hover { color: var(--text); }
-.cpub-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 16px 32px; border-top: var(--border-width-default) solid var(--border); font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
+.cpub-footer-col-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cpub-footer-muted, var(--text-faint)); margin-bottom: 4px; }
+.cpub-footer-link { font-size: 12px; color: var(--cpub-footer-text, var(--text-dim)); text-decoration: none; transition: color 0.12s; }
+.cpub-footer-link:hover { color: var(--cpub-footer-link-hover, var(--text)); }
+.cpub-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 16px 32px; border-top: var(--border-width-default) solid var(--cpub-footer-border, var(--border)); font-size: 10px; font-family: var(--font-mono); color: var(--cpub-footer-muted, var(--text-faint)); }
 
 @media (max-width: 768px) {
   :deep(.cpub-topbar-nav) { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.43.1",
+  "version": "0.43.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -56,13 +56,13 @@
     "@commonpub/auth": "0.7.0",
     "@commonpub/config": "0.16.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/schema": "0.25.0",
-    "@commonpub/server": "2.71.0",
-    "@commonpub/ui": "0.9.1",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/ui": "0.9.2",
     "@commonpub/protocol": "0.12.0",
-    "@commonpub/learning": "0.5.2"
+    "@commonpub/server": "2.71.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/theme/base.css

@@ -231,6 +231,46 @@
   --cpub-card-min: 260px;  /* min column width before wrapping (auto-fill) */
   --cpub-card-gap: 20px;   /* gutter between cards */
 
+  /* === CHROME (topbar / nav / footer / banner) ===
+     The global layout chrome is fully token-driven so an instance theme can change
+     its SHAPE — not just colors — without forking the layout (the deveco use case).
+     Every default below EXACTLY reproduces the current base look, so existing
+     instances + built-in themes are unaffected unless they opt in by overriding a
+     token. A theme that wants e.g. deveco's elevated rounded bar sets these in its
+     own [data-theme="…"] / :root block. See layers/base/layouts/default.vue. */
+
+  /* Top bar */
+  --cpub-topbar-height: 48px;              /* MUST match the content top-offset + mobile-menu top */
+  --cpub-topbar-bg: var(--surface);
+  --cpub-topbar-border: var(--border-width-default) solid var(--border); /* shorthand: full bottom border */
+  --cpub-topbar-radius: 0;                 /* deveco: 12px rounded bottom */
+  --cpub-topbar-shadow: none;              /* deveco: 0 2px 8px rgba(0,0,0,.08) */
+  --cpub-topbar-position: fixed;           /* deveco: sticky */
+  --cpub-topbar-padding-x: 20px;
+  --cpub-topbar-blur: none;                /* deveco: blur(8px) backdrop */
+  /* Top offset reserved for the fixed bar. A theme that makes the bar `sticky`
+     (which reserves its own space) should set this to 0. Default = the bar height. */
+  --cpub-content-top-offset: var(--cpub-topbar-height, 48px);
+
+  /* Nav links (rendered by NavRenderer → .cpub-nav-link) */
+  --cpub-nav-link-size: 12px;              /* deveco: 14px */
+  --cpub-nav-link-weight: 400;             /* deveco: 500 */
+  --cpub-nav-link-padding: 5px 12px;       /* deveco: 8px 14px */
+  --cpub-nav-link-radius: var(--radius);   /* deveco: 6px (pill) */
+  --cpub-nav-link-color: var(--text-dim);
+  --cpub-nav-link-active-color: var(--text);          /* deveco: var(--deveco-dark-green) */
+  --cpub-nav-link-active-bg: var(--surface2);          /* deveco: var(--accent-bg) */
+  --cpub-nav-link-active-weight: 400;                  /* deveco: 600 */
+  --cpub-nav-link-active-border: var(--border);        /* color of the active link border */
+
+  /* Footer */
+  --cpub-footer-bg: var(--surface);        /* deveco: var(--deveco-dark-green) */
+  --cpub-footer-text: var(--text-dim);     /* body/link text; deveco: rgba(255,255,255,.7) */
+  --cpub-footer-muted: var(--text-faint);  /* col titles / bottom bar; deveco: rgba(255,255,255,.4) */
+  --cpub-footer-border: var(--border);     /* deveco: rgba(255,255,255,.1) */
+  --cpub-footer-link-hover: var(--text);   /* link hover color; deveco: var(--accent) */
+  --cpub-footer-heading: var(--text);      /* brand logo text; deveco uses its dark-bg logo */
+
   /* === FOCUS === */
   --focus-ring: var(--shadow-accent);
 }