@farming-labs/svelte-theme 0.0.3-beta.2 → 0.0.3-beta.3

package/styles/pixel-border.css

@@ -23,6 +23,13 @@
   --color-fd-accent-foreground: oklch(0.216 0.006 56.043);
   --color-fd-border: oklch(0.923 0.003 48.717);
   --color-fd-ring: oklch(0.709 0.01 56.259);
+  --scrollbar-thumb: var(--color-fd-border);
+  --scrollbar-thumb-hover: var(--color-fd-ring);
+  --scrollbar-track: transparent;
+  --radius: 0px;
+  --fd-nav-height: 56px;
+  --fd-banner-height: 0px;
+  --fd-tocnav-height: 0px;
 }
 
 /* ─── Color Tokens (dark) ────────────────────────────────────────── */
@@ -44,6 +51,71 @@
   --color-fd-accent-foreground: oklch(0.985 0.001 106.423);
   --color-fd-border: hsl(0 0% 15%);
   --color-fd-ring: hsl(0 0% 30%);
+  --scrollbar-thumb: var(--color-fd-border);
+  --scrollbar-thumb-hover: var(--color-fd-ring);
+  --scrollbar-track: transparent;
+}
+
+/* ─── Scroll (light + dark) ──────────────────────────────────────── */
+
+html {
+  scroll-behavior: auto;
+  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]) {
+  scroll-behavior: smooth;
+}
+
+/* ─── Custom scrollbar (light + dark) ─────────────────────────────── */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+::-webkit-scrollbar {
+  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;
+}
+
+/* ─── Selection (light + dark) ───────────────────────────────────── */
+
+body {
+  overscroll-behavior: none;
+}
+
+::selection {
+  background: var(--color-fd-foreground);
+  color: var(--color-fd-background);
+}
+
+/* ─── Inline code word break ─────────────────────────────────────── */
+
+code:not(pre code) {
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 /* ─── Sharp corners everywhere (both modes) ──────────────────────── */
@@ -310,7 +382,16 @@
 }
 
 .fd-codeblock-title {
-  border-bottom-color: var(--color-fd-border);
+  border-bottom: 1px solid var(--color-fd-border) !important;
+  border-radius: 0 !important;
+  background-color: color-mix(in srgb, var(--color-fd-secondary, hsl(0 0% 8%)) 55%, transparent) !important;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    color-mix(in srgb, var(--color-fd-foreground, #fff) 4%, transparent),
+    color-mix(in srgb, var(--color-fd-foreground, #fff) 4%, transparent) 1px,
+    transparent 1px,
+    transparent 6px
+  ) !important;
 }
 
 .fd-codeblock-title .fd-copy-btn {
@@ -455,6 +536,32 @@
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
+/* Custom Ask AI trigger — same as fd-ai-floating-btn for theme */
+.fd-ai-floating-trigger .ask-ai-trigger {
+  font-family: var(--fd-font-sans, inherit);
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
+}
+
+.fd-ai-floating-trigger .ask-ai-trigger:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
+  border-radius: 0 !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.04em !important;
+  font-size: 12px !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
 .fd-ai-suggestion {
   border-radius: 0 !important;
   font-size: 12px;
@@ -599,3 +706,85 @@
 .fd-ai-code-block code {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
+
+/* ─── Omni Command Palette — pixel-border theme ──────────────────── */
+
+.omni-content {
+  border-radius: 0 !important;
+  border: 2px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
+  box-shadow:
+    4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
+    0 24px 60px -12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.omni-item {
+  border-radius: 0 !important;
+}
+
+.omni-kbd,
+.omni-kbd-sm {
+  border-radius: 0 !important;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
+}
+
+.omni-close-btn {
+  border-radius: 0 !important;
+}
+
+.omni-empty-icon {
+  border-radius: 0 !important;
+}
+
+.omni-search-input {
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+}
+
+.omni-group-label {
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  letter-spacing: 0.08em !important;
+}
+
+.omni-footer-inner {
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+}
+
+.omni-highlight {
+  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent) !important;
+  border-radius: 0 !important;
+}
+
+/* ─── Page Actions — pixel-border theme ─────────────────────────── */
+
+.fd-page-action-btn {
+  text-transform: uppercase !important;
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626) !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  border-radius: 0 !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 0.03em !important;
+}
+
+.fd-page-action-dropdown {
+  position: relative !important;
+}
+
+.fd-page-action-menu {
+  border-radius: 0 !important;
+  border: 2px solid var(--color-fd-border, #262626) !important;
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626), 0 4px 24px hsl(0 0% 0% / 0.5) !important;
+  padding: 0 !important;
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0 !important;
+  font-size: 0.8rem !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.03em !important;
+  color: var(--color-fd-muted-foreground) !important;
+  border-top: 1px solid var(--color-fd-border, #262626) !important;
+}
+
+.fd-page-action-menu-item:first-child {
+  border-top: none !important;
+}