@farming-labs/theme 0.0.2-beta.20 → 0.0.2-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.2-beta.20",
+  "version": "0.0.2-beta.21",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -98,7 +98,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.2-beta.20"
+    "@farming-labs/docs": "0.0.2-beta.21"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/base.css

@@ -108,6 +108,36 @@ figure.shiki pre > code > [data-line] {
   padding: 0 0.25rem;
 }
 
+/* Titled code blocks: diagonal stripe background on the title bar */
+figure.shiki:has(figcaption) > div:first-child {
+  position: relative;
+}
+
+figure.shiki:has(figcaption) > div:first-child::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    currentColor,
+    currentColor 1px,
+    transparent 1px,
+    transparent 6px
+  );
+  opacity: 0.03;
+  pointer-events: none;
+}
+
+.dark figure.shiki:has(figcaption) > div:first-child::before {
+  opacity: 0.05;
+}
+
+figure.shiki:has(figcaption) figcaption {
+  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+}
+
 /* ─── Page description (frontmatter) ─────────────────────────────────── */
 
 .fd-page-description {

package/styles/darkbold.css

@@ -455,6 +455,8 @@ details > :not(summary) {
 .fd-page-action-btn {
   border-radius: 6px;
   font-size: 0.8125rem;
+  text-transform: uppercase;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
 }
 
 .fd-page-action-menu {

package/styles/darksharp.css

@@ -179,6 +179,7 @@ figure button {
   border-radius: 0.1rem !important;
 }
 
+
 /* ─── Inline code ─────────────────────────────────────────────────── */
 
 code:not(pre code) {

package/styles/pixel-border.css

@@ -57,12 +57,7 @@
 
 html {
   scroll-behavior: auto;
-  scroll-padding-top: calc(
-    var(--fd-nav-height, 56px) +
-    var(--fd-banner-height, 0px) +
-    var(--fd-tocnav-height, 0px) +
-    24px
-  );
+  scroll-padding-top: calc(var(--fd-nav-height, 56px) + var(--fd-banner-height, 0px) + var(--fd-tocnav-height, 0px) + 24px);
 }
 
 html:not([data-anchor-scrolling]) {
@@ -80,18 +75,22 @@ html:not([data-anchor-scrolling]) {
   width: 12px;
   height: 12px;
 }
+
 ::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb);
   border-radius: 9999px;
   border: 3px solid transparent;
   background-clip: content-box;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
 }
+
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
@@ -157,11 +156,11 @@ code:not(pre code) {
 }
 
 /* ── Full-width border separators between top-level items ─────────── */
-.dark aside .overscroll-contain > div {
+.dark aside .overscroll-contain>div {
   margin-top: -22px;
 }
 
-.dark aside .overscroll-contain > div > a[data-active] {
+.dark aside .overscroll-contain>div>a[data-active] {
   border-top: 1px solid hsl(0 0% 12%);
   margin-left: -1rem;
   margin-right: -1rem;
@@ -170,20 +169,20 @@ code:not(pre code) {
   padding-bottom: 0.75rem;
 }
 
-.dark aside .overscroll-contain > div > div {
+.dark aside .overscroll-contain>div>div {
   border-top: 1px solid hsl(0 0% 12%);
   margin-left: -1rem;
   margin-right: -1rem;
   padding: 0 !important;
 }
 
-.dark aside .overscroll-contain > div > a[data-active]:first-child,
-.dark aside .overscroll-contain > div > div:first-child {
+.dark aside .overscroll-contain>div>a[data-active]:first-child,
+.dark aside .overscroll-contain>div>div:first-child {
   border-top: none;
 }
 
-.dark aside .overscroll-contain > div > a[data-active]:last-child,
-.dark aside .overscroll-contain > div > div:last-child {
+.dark aside .overscroll-contain>div>a[data-active]:last-child,
+.dark aside .overscroll-contain>div>div:last-child {
   border-bottom: 1px solid hsl(0 0% 12%);
 }
 
@@ -263,7 +262,7 @@ code:not(pre code) {
   margin-top: -25px !important;
 }
 
-.dark aside div[data-state="open"] > :last-child {
+.dark aside div[data-state="open"]> :last-child {
   overflow: hidden;
 }
 
@@ -335,7 +334,7 @@ figure.shiki button {
 }
 
 /* Code block title bar */
-figure.shiki > div:first-child {
+figure.shiki>div:first-child {
   border-radius: 0 !important;
 }
 
@@ -412,16 +411,19 @@ figure.shiki > div:first-child {
   font-size: 0.75rem;
   letter-spacing: 0.01em;
 }
+
 .fd-breadcrumb-link {
   color: inherit;
   text-decoration: none;
   text-transform: uppercase;
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
 }
+
 .fd-breadcrumb-current {
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
   text-transform: uppercase;
 }
+
 /* ─── Page Actions (pixel-border overrides) ───────────────────────── */
 
 .fd-page-action-btn {
@@ -661,15 +663,16 @@ figure.shiki > div:first-child {
 .omni-content {
   border-radius: 0 !important;
   border: 2px solid var(--color-fd-border, hsl(0 0% 15%));
-  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
-              0 0 0 1px rgba(255, 255, 255, 0.02);
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
+    0 0 0 1px rgba(255, 255, 255, 0.02);
 }
 
 .omni-item {
   border-radius: 0 !important;
 }
 
-.omni-kbd, .omni-kbd-sm {
+.omni-kbd,
+.omni-kbd-sm {
   border-radius: 0 !important;
   border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
 }
@@ -698,4 +701,4 @@ figure.shiki > div:first-child {
 .omni-highlight {
   background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent);
   border-radius: 0 !important;
-}
+}