@commonpub/layer 0.86.1 → 0.86.3

package/components/LayoutSection.vue

@@ -640,7 +640,7 @@ function onHandlePointerDown(e: PointerEvent): void {
   gap: 4px;
   align-items: center;
 }
-.cpub-layout-section-placeholder code { color: var(--accent); }
+.cpub-layout-section-placeholder code { color: var(--code-inline); }
 .cpub-layout-section-placeholder-hint {
   font-size: var(--text-xs);
   color: var(--text-faint);

package/components/admin/theme/AdminThemeSceneGallery.vue

@@ -205,7 +205,7 @@ export function digestFor(body: string): string {
 .scene-muted { font-size: var(--text-sm); color: var(--text-dim); margin: 0; }
 .scene-faint { font-size: var(--text-sm); color: var(--text-faint); margin: 0; }
 .scene-mono-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); margin: 0; }
-.scene-inline-code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); color: var(--accent); border: var(--border-width-thin) solid var(--border2); }
+.scene-inline-code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); color: var(--code-inline); border: var(--border-width-thin) solid var(--border2); }
 
 /* Buttons */
 .scene-btn {

package/components/admin/theme/AdminThemeSceneProse.vue

@@ -119,7 +119,7 @@
   color: var(--text-dim);
   background: var(--accent-bg);
 }
-.scene-prose-code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--accent); }
+.scene-prose-code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--code-inline); }
 .scene-prose-pre {
   background: var(--code-bg);
   color: var(--code-text);

package/components/blocks/BlockTextView.vue

@@ -25,7 +25,7 @@ const html = computed(() => sanitizeBlockHtml((props.content.html as string) ||
 .cpub-block-text :deep(code) {
   font-family: var(--font-mono);
   font-size: 13px;
-  color: var(--teal);
+  color: var(--code-inline);
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;

package/components/views/ArticleView.vue

@@ -568,7 +568,7 @@ useJsonLd({
 .cpub-prose :deep(code) {
   font-family: var(--font-mono);
   font-size: 13px;
-  color: var(--teal);
+  color: var(--code-inline);
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;

package/components/views/ExplainerView.vue

@@ -696,7 +696,7 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;
-  color: var(--accent);
+  color: var(--code-inline);
 }
 
 .cpub-empty-section {

package/components/views/ProjectView.vue

@@ -926,7 +926,7 @@ async function handleBuild(): Promise<void> {
   background: var(--surface2);
   padding: 2px 5px;
   border: var(--border-width-default) solid var(--border2);
-  color: var(--accent);
+  color: var(--code-inline);
 }
 
 .cpub-prose :deep(pre code) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.86.1",
+  "version": "0.86.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/config": "0.23.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/protocol": "0.14.0",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/explainer": "0.8.0",
+    "@commonpub/schema": "0.48.0",
+    "@commonpub/protocol": "0.14.0",
+    "@commonpub/editor": "0.9.0",
+    "@commonpub/config": "0.23.0",
     "@commonpub/theme-studio": "0.6.1",
     "@commonpub/server": "2.92.0",
-    "@commonpub/editor": "0.9.0",
     "@commonpub/ui": "0.13.1",
-    "@commonpub/schema": "0.48.0"
+    "@commonpub/learning": "0.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/theme/base.css

@@ -108,6 +108,14 @@
 
   --color-text-inverse: #ffffff;
 
+  /* Inline-code text. The raw --teal fails WCAG AA as small text on the light
+     --surface2 chip (≈2.4:1 on base, worse on vivid themes). --code-inline is the
+     theme's teal mixed toward --text so it stays branded yet readable; it adapts
+     per theme (deveco's green, dark mode's light text) via the inner var()
+     resolution. The @supports block (after :root) upgrades it to color-mix; this is
+     the readable fallback. */
+  --code-inline: var(--text);
+
   /* Code block tokens (GitHub Dark defaults — overridable by themes) */
   --code-bg: #0d1117;
   --code-text: #e6edf3;
@@ -305,6 +313,17 @@
   --focus-ring: var(--shadow-accent);
 }
 
+/* Branded-but-readable inline code: mix the theme's --teal ~50% toward --text so it
+   reads at ~6:1 on light themes and adapts on dark (mixes toward the light --text).
+   One definition adapts to every theme because the inner var()s resolve at the
+   inline-code element. ~95% browser support; older browsers keep the readable
+   --text fallback declared in :root above. */
+@supports (color: color-mix(in srgb, red, white)) {
+  :root {
+    --code-inline: color-mix(in srgb, var(--teal), var(--text) 50%);
+  }
+}
+
 /* === BASE STYLES === */
 body {
   font-family: var(--font-body);

package/theme/prose.css

@@ -65,7 +65,7 @@
 .cpub-prose code {
   font-family: var(--font-mono);
   font-size: 0.9em;
-  color: var(--teal);
+  color: var(--code-inline);
   background: var(--surface2);
   padding: 2px 6px;
   border: var(--border-width-thin) solid var(--border2);