@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/css/lib/base.css

@@ -0,0 +1,214 @@
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+
+[dir='rtl'] {
+  --fd-sidebar-drawer-offset: -100%;
+}
+
+@theme {
+  --animate-fd-fade-in: fd-fade-in 300ms ease;
+  --animate-fd-fade-out: fd-fade-out 300ms ease;
+
+  --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --animate-fd-popover-in: fd-popover-in 100ms ease;
+  --animate-fd-popover-out: fd-popover-out 100ms ease;
+
+  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
+  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
+
+  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
+  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
+
+  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
+  --animate-fd-exitToRight: fd-exitToRight 250ms ease;
+
+  @keyframes fd-sidebar-in {
+    from {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(var(--fd-sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes fd-dialog-in {
+    from {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fd-dialog-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.04);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-popover-out {
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fd-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fd-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes fd-exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-fd-border, currentColor);
+  }
+
+  body {
+    background-color: var(--color-fd-background);
+    color: var(--color-fd-foreground);
+  }
+}
+
+@utility fd-scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-fd-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@utility fd-steps {
+  counter-reset: step;
+  position: relative;
+  @apply ps-6 ms-2 border-s sm:ms-4 sm:ps-7;
+}
+
+@utility fd-step {
+  &:before {
+    background-color: var(--color-fd-secondary);
+    color: var(--color-fd-secondary-foreground);
+    content: counter(step);
+    counter-increment: step;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: flex;
+    position: absolute;
+    @apply size-8 -start-4 rounded-full;
+  }
+}
+
+@utility prose-no-margin {
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+/* define/override layout variables */
+@variant layout {
+  #nd-docs-layout:has(&),
+  #nd-notebook-layout:has(&),
+  #nd-home-layout:has(&),
+  #nd-flux-layout:has(&) {
+    @slot;
+  }
+}

package/css/lib/default-colors.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-fd-background: hsl(0, 0%, 96%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 94.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsla(0, 0%, 82%, 50%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  --color-fd-primary: hsl(0, 0%, 98%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
+  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+  --color-fd-idea: oklch(70.5% 0.209 60.849);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+}

package/css/lib/shiki.css

@@ -0,0 +1,98 @@
+.shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 4);
+  --padding-right: calc(var(--spacing) * 4);
+
+  code span {
+    color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
+  }
+
+  .line {
+    position: relative;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+  }
+
+  .line:empty {
+    height: 1lh;
+  }
+
+  &.has-focused .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+
+  &.has-focused:hover .line:not(.focused) {
+    filter: blur(0);
+  }
+
+  .diff::before {
+    position: absolute;
+    left: calc(var(--spacing) * 1.5);
+  }
+
+  .diff.remove {
+    opacity: 0.7;
+    --fd-counter-color: var(--color-fd-diff-remove-symbol);
+    @apply bg-fd-diff-remove;
+  }
+
+  .diff.remove::before {
+    content: '-';
+    @apply text-fd-diff-remove-symbol;
+  }
+
+  .diff.add {
+    --fd-counter-color: var(--color-fd-diff-add-symbol);
+    @apply bg-fd-diff-add;
+  }
+
+  .diff.add::before {
+    content: '+';
+    @apply text-fd-diff-add-symbol;
+  }
+
+  .highlighted {
+    --fd-counter-color: var(--color-fd-primary);
+    padding-left: calc(var(--padding-left) - 2px);
+    @apply bg-fd-primary/10;
+  }
+
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    @apply inset-y-0 left-0 border-l-2 border-fd-primary/50;
+  }
+
+  .highlighted-word {
+    padding: 1px;
+    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
+  }
+
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+      transparent
+    );
+    @apply inset-y-0 left-0 w-7 text-right;
+  }
+}
+
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
+  }
+}

package/css/neutral.css

@@ -1 +1,7 @@
-@import '@hanzo/docs-ui/css/colors/neutral.css';
+@import './lib/default-colors.css';
+
+.dark #nd-sidebar {
+  --color-fd-muted: hsl(0, 0%, 16%);
+  --color-fd-secondary: hsl(0, 0%, 18%);
+  --color-fd-muted-foreground: hsl(0, 0%, 72%);
+}

package/css/ocean.css

@@ -1 +1,44 @@
-@import '@hanzo/docs-ui/css/colors/ocean.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(220, 90%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(220, 50%, 98%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsl(220, 50%, 89.8%);
+  --color-fd-primary: hsl(210, 80%, 20.2%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(220, 90%, 96.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(220, 50%, 94.1%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(220, 100%, 63.9%);
+}
+
+.dark {
+  --color-fd-background: hsl(220, 60%, 8%);
+  --color-fd-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-muted: hsl(220, 50%, 10%);
+  --color-fd-muted-foreground: hsl(220, 30%, 65%);
+  --color-fd-popover: hsl(220, 50%, 10%);
+  --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-card: hsla(220, 56%, 15%, 0.4);
+  --color-fd-card-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-border: hsla(220, 50%, 50%, 0.2);
+  --color-fd-primary: hsl(205, 100%, 85%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(220, 50%, 20%);
+  --color-fd-secondary-foreground: hsl(220, 80%, 90%);
+  --color-fd-accent: hsl(220, 40%, 20%);
+  --color-fd-accent-foreground: hsl(220, 80%, 90%);
+  --color-fd-ring: hsl(205, 100%, 85%);
+}
+
+.dark body {
+  background-image: linear-gradient(rgba(5, 105, 255, 0.15), transparent 20rem, transparent);
+  background-repeat: no-repeat;
+}

package/css/preset.css

@@ -1,10 +1,12 @@
-@import '@hanzo/docs-ui/css/base.css';
+@import './lib/base.css';
+@import './lib/shiki.css';
+
+@plugin '../dist/tailwind/typography.js';
 
 /* TODO: remove them on next major */
-@import './layouts/docs.css';
-@import './layouts/home.css';
-@import './layouts/notebook.css';
+@import './generated/flux.css';
+@import './generated/docs.css';
+@import './generated/home.css';
+@import './generated/notebook.css';
 
-@source '../dist/*.js';
-@source '../dist/{components,contexts,provider,utils}/**/*.js';
-@source '../dist/layouts/shared/**/*.js';
+@import './generated/shared.css';

package/css/purple.css

@@ -1 +1,39 @@
-@import '@hanzo/docs-ui/css/colors/purple.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(256, 100%, 96%);
+  --color-fd-primary: hsl(270, 100%, 52%);
+  --color-fd-border: hsla(270, 40%, 80%, 0.5);
+  --color-fd-accent: hsl(270, 40%, 88%);
+  --color-fd-accent-foreground: hsl(270, 100%, 20%);
+  --color-fd-muted: hsl(256, 60%, 94%);
+  --color-fd-muted-foreground: hsl(256, 50%, 50%);
+  --color-fd-foreground: hsl(256, 60%, 26%);
+  --color-fd-secondary: hsl(270, 60%, 90%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 10%);
+  --color-fd-card: hsl(256, 60%, 92%);
+  --color-fd-card-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover-foreground: hsl(256, 100%, 20%);
+  --color-fd-popover: hsl(256, 60%, 96%);
+  --color-fd-primary-foreground: hsl(270, 100%, 20%);
+  --color-fd-ring: hsl(270, 100%, 52%);
+}
+
+.dark {
+  --color-fd-background: hsl(256, 20%, 6%);
+  --color-fd-primary: hsl(270, 100%, 86%);
+  --color-fd-border: hsla(270, 50%, 40%, 0.3);
+  --color-fd-accent: hsl(256, 23%, 22%);
+  --color-fd-accent-foreground: hsl(270, 40%, 86%);
+  --color-fd-muted: hsl(256, 23%, 10%);
+  --color-fd-foreground: hsl(256, 60%, 90%);
+  --color-fd-muted-foreground: hsl(256, 50%, 75%);
+  --color-fd-secondary: hsl(270, 23%, 20%);
+  --color-fd-secondary-foreground: hsl(256, 60%, 90%);
+  --color-fd-card: hsl(256, 23%, 10%);
+  --color-fd-card-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover-foreground: hsl(256, 60%, 90%);
+  --color-fd-popover: hsl(256, 23%, 6%);
+  --color-fd-primary-foreground: hsl(256, 60%, 6%);
+  --color-fd-ring: hsl(270, 100%, 86%);
+}

package/css/ruby.css

@@ -0,0 +1,39 @@
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(350, 45%, 14%);
+  --color-fd-primary: hsl(348, 85%, 45%);
+  --color-fd-primary-foreground: hsl(0, 0%, 100%);
+  --color-fd-border: hsla(348, 40%, 60%, 0.25);
+  --color-fd-ring: hsl(348, 85%, 45%);
+  --color-fd-accent: hsl(348, 70%, 95%);
+  --color-fd-accent-foreground: hsl(348, 70%, 22%);
+  --color-fd-muted: hsl(0, 0%, 94%);
+  --color-fd-muted-foreground: hsl(348, 25%, 42%);
+  --color-fd-secondary: hsl(348, 55%, 92%);
+  --color-fd-secondary-foreground: hsl(348, 50%, 20%);
+  --color-fd-card: hsl(0, 0%, 100%);
+  --color-fd-card-foreground: hsl(350, 45%, 14%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(350, 45%, 14%);
+}
+
+.dark {
+  --color-fd-background: hsl(350, 30%, 6%);
+  --color-fd-foreground: hsl(350, 30%, 92%);
+  --color-fd-primary: hsl(348, 90%, 62%);
+  --color-fd-primary-foreground: hsl(350, 30%, 8%);
+  --color-fd-border: hsla(348, 40%, 45%, 0.25);
+  --color-fd-ring: hsl(348, 90%, 62%);
+  --color-fd-accent: hsl(348, 35%, 16%);
+  --color-fd-accent-foreground: hsl(348, 70%, 82%);
+  --color-fd-muted: hsl(350, 25%, 11%);
+  --color-fd-muted-foreground: hsl(348, 25%, 65%);
+  --color-fd-secondary: hsl(348, 30%, 14%);
+  --color-fd-secondary-foreground: hsl(350, 30%, 92%);
+  --color-fd-card: hsl(350, 30%, 9%);
+  --color-fd-card-foreground: hsl(350, 30%, 92%);
+  --color-fd-popover: hsl(350, 30%, 8%);
+  --color-fd-popover-foreground: hsl(350, 30%, 92%);
+}

package/css/shadcn.css

@@ -1 +1,36 @@
-@import '@hanzo/docs-ui/css/colors/shadcn.css';
+@import './lib/default-colors.css';
+
+:root,
+.dark {
+  --color-fd-background: var(--background);
+  --color-fd-foreground: var(--foreground);
+  --color-fd-muted: var(--muted);
+  --color-fd-muted-foreground: var(--muted-foreground);
+  --color-fd-popover: var(--popover);
+  --color-fd-popover-foreground: var(--popover-foreground);
+  --color-fd-card: var(--card);
+  --color-fd-card-foreground: var(--card-foreground);
+  --color-fd-border: var(--border);
+  --color-fd-primary: var(--primary);
+  --color-fd-primary-foreground: var(--primary-foreground);
+  --color-fd-secondary: var(--secondary);
+  --color-fd-secondary-foreground: var(--secondary-foreground);
+  --color-fd-accent: var(--accent);
+  --color-fd-accent-foreground: var(--accent-foreground);
+  --color-fd-ring: var(--ring);
+}
+
+#nd-sidebar {
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+  border-color: var(--sidebar-border);
+
+  --color-fd-accent: var(--sidebar-accent);
+  --color-fd-accent-foreground: var(--sidebar-accent-foreground);
+  --color-fd-ring: var(--sidebar-ring);
+  --color-fd-primary-foreground: var(--sidebar-primary-foreground);
+}
+
+@theme static {
+  --color-fd-error: var(--destructive);
+}

package/css/solar.css

@@ -1 +1,75 @@
-@import '@hanzo/docs-ui/css/colors/solar.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-primary: oklch(0.487 0.083 262.691);
+  --color-fd-article: hsl(0, 0%, 97%);
+}
+
+:root {
+  letter-spacing: -0.25px;
+}
+
+.dark {
+  --color-fd-primary: oklch(0.902 0.0461 259.51);
+  --color-fd-article: hsl(0, 0%, 7.04%);
+  --color-fd-background: hsl(0, 0%, 5.04%);
+}
+
+@variant md {
+  #nd-docs-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-1) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+
+  #nd-notebook-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-2) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
+  }
+}
+
+#nd-sidebar[data-collapsed='false'] {
+  border: none;
+  @apply bg-fd-background;
+}

package/css/vitepress.css

@@ -1 +1,65 @@
-@import '@hanzo/docs-ui/css/colors/vitepress.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsl(0, 0%, 89.8%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(0, 0%, 94.1%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+
+  --color-fd-background: hsl(0, 0%, 100%);
+  --color-fd-card: hsl(0, 0%, 100%);
+  --color-fd-foreground: hsl(240, 6%, 25%);
+  --color-fd-muted-foreground: hsl(240, 6%, 50%);
+  --color-fd-secondary: hsl(240, 6%, 97%);
+  --color-fd-accent-foreground: hsl(240, 6%, 25%);
+  --color-fd-primary: hsl(226, 55%, 45%);
+}
+
+.dark {
+  --color-fd-ring: hsl(234, 100%, 83%);
+  --color-fd-primary: hsl(234, 100%, 83%);
+  --color-fd-secondary-foreground: hsl(60, 100%, 98%);
+  --color-fd-card-foreground: hsl(60, 100%, 98%);
+  --color-fd-background: hsl(240, 7%, 11%);
+  --color-fd-foreground: hsl(60, 100%, 98%);
+  --color-fd-popover: hsl(240, 7%, 11%);
+  --color-fd-popover-foreground: hsl(60, 100%, 98%);
+  --color-fd-primary-foreground: hsl(240, 7%, 11%);
+  --color-fd-card: hsl(240, 7%, 11%);
+  --color-fd-muted: hsl(0, 0%, 13%);
+  --color-fd-border: hsl(240, 4%, 19%);
+  --color-fd-accent: hsl(0, 0%, 15%);
+  --color-fd-secondary: hsl(240, 4%, 9%);
+  --color-fd-accent-foreground: hsl(0, 0%, 100%);
+  --color-fd-muted-foreground: hsl(240, 4%, 65%);
+}
+
+.prose {
+  --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 85%, transparent);
+  --tw-prose-headings: color-mix(in oklab, var(--color-fd-foreground) 85%, transparent);
+  --tw-prose-links: var(--color-fd-primary);
+  --tw-prose-code: var(--color-fd-primary);
+}
+
+.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  border: none;
+  background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+}
+
+#nd-sidebar {
+  background-color: hsl(240, 6%, 97%);
+  border-color: transparent;
+}
+
+.dark #nd-sidebar {
+  background-color: hsl(240, 4%, 9%);
+}
+
+button[data-search-full] {
+  background-color: var(--color-fd-background);
+}