@next-library/theme 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-library/theme",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -94,7 +94,7 @@
     "rehype-highlight": "^7.0.2",
     "rehype-autolink-headings": "^7.1.0",
     "react-github-btn": "^1.4.0",
-    "@next-library/core": "1.0.28"
+    "@next-library/core": "1.0.38"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.0",
@@ -111,10 +111,10 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup && npm run build:types",
+    "build": "tsup && pnpm run build:types",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist",
     "dev": "tsup --watch",
-    "lint": "eslint src",
+    "lint": "pnpm -w exec eslint packages/theme/src",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",

package/src/style.css

@@ -17,3 +17,188 @@
 @source "./**/*.{js,jsx,ts,tsx}";
 @source "../dist/**/*.{js,jsx}";
 
+
+/* ── Inline code: render as a crisp snippet, not Tailwind Typography's backticked bold ── */
+.prose code:not(pre code) {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.85em;
+  font-weight: 500;
+  background: color-mix(in oklab, var(--foreground) 7%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  padding: 0.1em 0.36em;
+  white-space: break-word;
+}
+.prose code:not(pre code)::before,
+.prose code:not(pre code)::after { content: none !important; }
+
+/* ── Fenced code blocks: premium card + copy + language, with real syntax colors ── */
+.cl-code {
+  position: relative;
+  margin: 1.25em 0;
+  border: 1px solid var(--border);
+  border-radius: 0.65rem;
+  background: var(--card);
+  overflow: hidden;
+}
+.cl-code-bar {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 1;
+}
+.cl-code-lang {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.68rem;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  color: var(--muted-foreground);
+  opacity: 0.75;
+  padding-right: 0.15rem;
+}
+.cl-code-copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.6rem;
+  width: 1.6rem;
+  border-radius: 0.4rem;
+  color: var(--muted-foreground);
+  background: color-mix(in oklab, var(--card) 70%, transparent);
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+.cl-code:hover .cl-code-copy, .cl-code-copy:focus-visible { opacity: 1; }
+.cl-code-copy:hover { background: color-mix(in oklab, var(--foreground) 10%, transparent); color: var(--foreground); }
+.cl-code pre {
+  margin: 0;
+  padding: 0.95rem 1.05rem;
+  overflow-x: auto;
+  background: transparent;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.82rem;
+  line-height: 1.65;
+  color: var(--foreground);
+}
+.cl-code pre code {
+  background: transparent !important;
+  border: 0 !important;
+  padding: 0 !important;
+  font-size: inherit;
+  white-space: pre;
+  color: inherit;
+}
+
+/* Syntax theme (One Light by default, One Dark under .dark). Scoped to code blocks. */
+.cl-code .hljs { color: #383a42; background: transparent; }
+.cl-code .hljs-comment, .cl-code .hljs-quote { color: #a0a1a7; font-style: italic; }
+.cl-code .hljs-keyword, .cl-code .hljs-selector-tag, .cl-code .hljs-literal, .cl-code .hljs-section, .cl-code .hljs-doctag, .cl-code .hljs-name, .cl-code .hljs-strong { color: #a626a4; }
+.cl-code .hljs-string, .cl-code .hljs-regexp, .cl-code .hljs-addition { color: #50a14f; }
+.cl-code .hljs-number, .cl-code .hljs-bullet { color: #986801; }
+.cl-code .hljs-title, .cl-code .hljs-title.function_, .cl-code .hljs-function .hljs-title { color: #4078f2; }
+.cl-code .hljs-type, .cl-code .hljs-class .hljs-title, .cl-code .hljs-built_in, .cl-code .hljs-params { color: #c18401; }
+.cl-code .hljs-variable, .cl-code .hljs-template-variable, .cl-code .hljs-attr, .cl-code .hljs-attribute, .cl-code .hljs-selector-attr, .cl-code .hljs-selector-class, .cl-code .hljs-selector-id, .cl-code .hljs-tag { color: #e45649; }
+.cl-code .hljs-symbol, .cl-code .hljs-link, .cl-code .hljs-meta, .cl-code .hljs-subst { color: #0184bc; }
+.cl-code .hljs-deletion { color: #e45649; }
+.cl-code .hljs-emphasis { font-style: italic; }
+
+.dark .cl-code .hljs { color: #abb2bf; }
+.dark .cl-code .hljs-comment, .dark .cl-code .hljs-quote { color: #7f848e; }
+.dark .cl-code .hljs-keyword, .dark .cl-code .hljs-selector-tag, .dark .cl-code .hljs-literal, .dark .cl-code .hljs-section, .dark .cl-code .hljs-doctag, .dark .cl-code .hljs-name, .dark .cl-code .hljs-strong { color: #c678dd; }
+.dark .cl-code .hljs-string, .dark .cl-code .hljs-regexp, .dark .cl-code .hljs-addition { color: #98c379; }
+.dark .cl-code .hljs-number, .dark .cl-code .hljs-bullet { color: #d19a66; }
+.dark .cl-code .hljs-title, .dark .cl-code .hljs-title.function_, .dark .cl-code .hljs-function .hljs-title { color: #61afef; }
+.dark .cl-code .hljs-type, .dark .cl-code .hljs-class .hljs-title, .dark .cl-code .hljs-built_in, .dark .cl-code .hljs-params { color: #e5c07b; }
+.dark .cl-code .hljs-variable, .dark .cl-code .hljs-template-variable, .dark .cl-code .hljs-attr, .dark .cl-code .hljs-attribute, .dark .cl-code .hljs-selector-attr, .dark .cl-code .hljs-selector-class, .dark .cl-code .hljs-selector-id, .dark .cl-code .hljs-tag { color: #e06c75; }
+.dark .cl-code .hljs-symbol, .dark .cl-code .hljs-link, .dark .cl-code .hljs-meta, .dark .cl-code .hljs-subst { color: #56b6c2; }
+.dark .cl-code .hljs-deletion { color: #e06c75; }
+
+/* ── Tabbed content groups ── */
+.cl-tabs { margin: 1.25em 0; }
+.cl-tabs-list { display: flex; flex-wrap: wrap; gap: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
+.cl-tab-btn {
+  position: relative;
+  padding: 0 0 0.6rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.cl-tab-btn:hover { color: var(--foreground); }
+.cl-tab-btn.is-active { color: var(--foreground); }
+.cl-tab-btn.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--foreground);
+}
+.cl-tabs-panel > :first-child { margin-top: 0; }
+.cl-tabs-panel > :last-child { margin-bottom: 0; }
+
+/* ── Callouts / admonitions (rehype-callouts output) ── */
+.prose .callout {
+  --cl-accent: var(--muted-foreground);
+  margin: 1.25em 0;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--cl-accent);
+  border-radius: 0.55rem;
+  background: color-mix(in oklab, var(--cl-accent) 7%, var(--card));
+  padding: 0.85rem 1rem;
+}
+.prose .callout-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--foreground); }
+.prose .callout-title-icon { display: inline-flex; color: var(--cl-accent); }
+.prose .callout-title-icon svg { width: 1.05rem; height: 1.05rem; }
+.prose .callout-content { margin-top: 0.4rem; font-size: 0.92rem; color: var(--muted-foreground); }
+.prose .callout-content > :first-child { margin-top: 0; }
+.prose .callout-content > :last-child { margin-bottom: 0; }
+.prose .callout[data-callout="note"], .prose .callout[data-callout="info"] { --cl-accent: #3b82f6; }
+.prose .callout[data-callout="tip"], .prose .callout[data-callout="hint"], .prose .callout[data-callout="success"], .prose .callout[data-callout="check"], .prose .callout[data-callout="done"] { --cl-accent: #22c55e; }
+.prose .callout[data-callout="warning"], .prose .callout[data-callout="caution"], .prose .callout[data-callout="attention"] { --cl-accent: #f59e0b; }
+.prose .callout[data-callout="danger"], .prose .callout[data-callout="error"], .prose .callout[data-callout="bug"], .prose .callout[data-callout="failure"], .prose .callout[data-callout="missing"] { --cl-accent: #ef4444; }
+.prose .callout[data-callout="important"], .prose .callout[data-callout="example"] { --cl-accent: #a855f7; }
+
+/* ── Tables ── */
+.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5em 0; font-size: 0.875rem; border: 1px solid var(--border); border-radius: 0.55rem; overflow: hidden; }
+.prose thead { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
+.prose th { text-align: left; font-weight: 600; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); }
+.prose td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); }
+.prose tbody tr:last-child td { border-bottom: 0; }
+.prose tbody tr:hover { background: color-mix(in oklab, var(--foreground) 3%, transparent); }
+
+/* ── Heading anchors (rehype-autolink-headings, behavior: append) ── */
+.prose .heading-anchor { margin-left: 0.4em; color: var(--muted-foreground); text-decoration: none; opacity: 0; transition: opacity 0.15s, color 0.15s; font-weight: 400; }
+.prose h1:hover .heading-anchor, .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .prose h4:hover .heading-anchor { opacity: 1; }
+.prose .heading-anchor:hover { color: var(--foreground); }
+
+/* ── Blockquote, images, selection ── */
+.prose blockquote { border-left: 3px solid var(--border); padding-left: 1rem; font-style: normal; color: var(--muted-foreground); }
+.prose img { border: 1px solid var(--border); border-radius: 0.55rem; }
+::selection { background: color-mix(in oklab, var(--foreground) 18%, transparent); }
+
+/* ── Content entrance motion ── */
+@keyframes cl-content-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
+.cl-content-in { animation: cl-content-in 0.4s cubic-bezier(.4,0,.2,1); }
+
+/* ── Reading progress bar ── */
+.cl-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 50; background: var(--foreground); width: 0; transition: width 0.1s linear; }
+@media (prefers-reduced-motion: reduce) { .cl-content-in { animation: none; } .cl-progress { transition: none; } }
+
+/* ── Prev/Next pager + edit link ── */
+.cl-pager { display: grid; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
+@media (min-width: 640px) { .cl-pager-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
+.cl-pager-card { display: flex; flex-direction: column; gap: 0.2rem; border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.85rem 1rem; transition: background 0.15s, border-color 0.15s; }
+.cl-pager-card:hover { background: var(--accent); border-color: color-mix(in oklab, var(--foreground) 20%, var(--border)); }
+.cl-pager-card.is-next { text-align: right; align-items: flex-end; }
+.cl-pager-dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
+.cl-pager-title { font-size: 0.95rem; font-weight: 500; color: var(--foreground); }
+.cl-edit-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted-foreground); transition: color 0.15s; }
+.cl-edit-link:hover { color: var(--foreground); }