@ciderpress/ui 1.0.0-rc.1

package/dist/theme/styles/overrides/home.css

@@ -0,0 +1,243 @@
+/**
+ * Home page overrides — hero image sizing, Rspress card/code tweaks.
+ *
+ * Cascade layer: `ciderpress.overrides` (see styles/layers.css).
+ *
+ * `!important` inventory (task 8.2):
+ *   - Before: 24
+ *   - After:  17
+ *
+ * Retained `!important` declarations override Rspress styles that are
+ * authored outside the `ciderpress.*` layer stack — either unlayered (Rspress's
+ * `.rp-home-hero*` component CSS, which beats layered rules in the normal
+ * cascade) or inside Rspress's own `@layer rp-base` (e.g. shiki's
+ * `[class*=language-]` border-radius). Both cases require `!important` to
+ * win from inside `@layer ciderpress.overrides`.
+ *
+ * Removed `!important` declarations targeted selectors with no competing
+ * Rspress rule (`.rp-home-hero__name`, `.rp-home-hero__text`, and the
+ * `padding-bottom`/`line-height` properties on `.rp-home-hero__tagline`),
+ * so the layer cascade alone is sufficient.
+ */
+
+@layer ciderpress.overrides {
+  /* ── Rspress home hero image sizing ──────────────────────── */
+  html .rp-home-hero__image {
+    flex: none;
+    width: 548px;
+    margin-left: 24px;
+  }
+
+  html .rp-home-hero__image-img {
+    width: 548px;
+    height: auto;
+  }
+
+  /* ── Rspress home hero padding ─────────────────────────── */
+  html .rp-home-hero {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  /* ── Rspress home hero container ────────────────────────── */
+  html .rp-home-hero__container {
+    gap: 16px !important;
+  }
+
+  /* ── Rspress home hero text sizing & spacing ───────────── */
+  /* No `!important`: Rspress does not define `.rp-home-hero__name` or
+   * `.rp-home-hero__text`, and `.rp-home-hero__tagline` has no competing
+   * `padding-bottom` rule, so the layer cascade is sufficient. */
+  html .rp-home-hero__name {
+    font-size: 1.25rem;
+  }
+
+  html .rp-home-hero__text {
+    font-size: 2.5rem;
+    margin-bottom: 8px;
+  }
+
+  html .rp-home-hero__tagline {
+    padding-bottom: 16px;
+  }
+
+  html .rp-home-hero__actions {
+    gap: 1.25rem !important;
+  }
+
+  @media (max-width: 1000px) {
+    html .rp-home-hero {
+      padding-bottom: 24px !important;
+    }
+
+    html .rp-home-hero__image {
+      width: 400px;
+      margin-left: 0;
+      margin-top: 32px;
+    }
+
+    html .rp-home-hero__image-img {
+      width: 400px;
+    }
+  }
+
+  @media (max-width: 1184px) {
+    html .rp-home-hero {
+      padding-left: 16px !important;
+      padding-right: 16px !important;
+    }
+  }
+
+  /* ── Mobile overrides ────────────────────────────────────── */
+  @media (max-width: 768px) {
+    html .rp-home-hero__container {
+      gap: 8px !important;
+    }
+
+    html .rp-home-hero__image {
+      width: 100%;
+      max-width: 90vw !important;
+      margin-left: 0;
+      margin-top: 24px;
+    }
+
+    html .rp-home-hero__image-img {
+      width: 100%;
+      max-width: 90vw !important;
+    }
+
+    html .rp-home-hero__name {
+      font-size: 1.125rem;
+    }
+
+    html .rp-home-hero__text {
+      font-size: 2rem;
+    }
+
+    html .rp-home-hero__tagline {
+      /* `!important` retained on `font-size` because Rspress defines
+       * `.rp-home-hero__tagline { font-size: 1.125rem }` at
+       * `(width >= 640px)` and `(width >= 768px)`, which still match at the
+       * `max-width: 768px` breakpoint. `line-height` has no competing rule. */
+      font-size: 1rem !important;
+      line-height: 1.5;
+    }
+  }
+
+  /* ── Feature section ───────────────────────────────────────── */
+  .cp-feature-section {
+    padding: 64px 32px;
+  }
+
+  @media (max-width: 720px) {
+    .cp-feature-section {
+      padding: 48px 20px;
+    }
+  }
+
+  /* Inside doc pages (MDX-driven), the surrounding `.rp-doc` already
+     constrains the content column — additional horizontal padding here
+     just misaligns the feature grid with the body paragraphs above it.
+     Strip it so cards land on the same left edge as prose. */
+  .rp-doc .cp-feature-section {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Eyebrow + title above the feature grid (mockup pattern) */
+  .cp-feature-section-head {
+    text-align: center;
+    margin-bottom: 56px;
+    max-width: 720px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .cp-feature-section-head__eyebrow {
+    font-family: var(--cp-font-family-mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--cp-c-brand-1);
+    margin-bottom: 12px;
+  }
+
+  .cp-feature-section-head__title {
+    font-size: clamp(28px, 4vw, 44px);
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    line-height: 1.1;
+    margin: 0 0 16px;
+    color: var(--cp-c-text-1);
+  }
+
+  .cp-feature-section-head__sub {
+    font-size: 17px;
+    color: var(--cp-c-text-2);
+    margin: 0;
+    line-height: 1.55;
+  }
+
+  /* ── Feature grid — hairline-divider grid (mockup pattern) ─── */
+  /* The grid has `gap: 1px` on a border-color background so the gap shows
+   through as hairlines between cells. Each cell paints its own panel bg. */
+  .cp-feature-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1px;
+    background: var(--cp-c-border);
+    border: 1px solid var(--cp-c-border);
+    border-radius: var(--cp-radius-frame);
+    overflow: hidden;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  @media (max-width: 880px) {
+    .cp-feature-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .cp-feature-grid__item {
+    position: relative;
+    background: var(--cp-c-bg-elv);
+    transition: background 0.15s ease;
+  }
+
+  .cp-feature-grid__item:hover {
+    background: var(--cp-c-bg-soft);
+  }
+
+  /* Strip the inner card chrome; the grid gutter does the work now */
+  .cp-feature-grid__item .cp-card,
+  .cp-feature-grid__item .cp-feature-card {
+    background: transparent !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 28px 24px !important;
+    box-shadow: none !important;
+    height: 100%;
+  }
+
+  .cp-feature-grid__item-wrap {
+    height: 100%;
+  }
+
+  /* Span system retained but neutralized — every item takes one grid column. */
+  .cp-feature-grid__item--span-2,
+  .cp-feature-grid__item--span-3,
+  .cp-feature-grid__item--span-4,
+  .cp-feature-grid__item--span-6 {
+    width: auto;
+  }
+
+  /* ── Code blocks ─────────────────────────────────────────── */
+  div[class*='language-'] {
+    border-radius: var(--rp-radius) !important;
+  }
+
+  code:not(pre code) {
+    border-radius: var(--rp-radius-small);
+  }
+}

package/dist/theme/styles/overrides/rail.css

@@ -0,0 +1,337 @@
+/**
+ * Page rail — the structural pattern that bounds the docs body content
+ * with hairlines on each side and a thin canvas gutter between the rail
+ * and the viewport.
+ *
+ * Applied to Rspress's `.rp-doc-layout__container` (the flex row that
+ * holds sidebar / content / outline). Selectors are prefixed with `html`
+ * to win the specificity war against Rspress's default DocLayout CSS,
+ * which loads after our overrides in the bundle and would otherwise
+ * reset the gutter.
+ *
+ * Mirrors the approved `gutter` mockup variant.
+ */
+
+/* ── Token overrides — tighten Rspress defaults to match mockup ── */
+html:root {
+  /* Define ciderpress sticky-stack heights at root so the docs bar's
+     `top:` and the `--rp-nav-height` override calc in
+     `ciderpress-header.css` resolve against the SAME value when a theme
+     overrides either token. Without these, both sides only see their
+     hard-coded `var(..., 56px)` / `var(..., 46px)` fallbacks. */
+  --cp-header-height: 56px;
+  --cp-docs-bar-height: 46px;
+  /* `--rp-nav-height` drives:
+       - sidebar / outline sticky-top (DocLayout/index.css)
+       - scroll-padding-top on <html> (styles/base.css) for anchor jumps
+     The viewport-blocking stack on docs pages is:
+       [ <AnnouncementBar /> ] + [ <CiderpressHeader /> ] + [ <CiderpressDocsBar /> ]
+     `--cp-announcement-height` is set by <AnnouncementBar /> itself
+     (it injects a `<style>` tag, same pattern Rspress's `<Banner />`
+     uses) so it tracks the actual rendered height and collapses to
+     `0px` when the bar is dismissed. Defining the calc at `html:root`
+     wins over Rspress's `:root` default (`64px`) on specificity. */
+  --rp-nav-height: calc(
+    var(--cp-header-height) + var(--cp-docs-bar-height) + var(--cp-announcement-height, 0px)
+  );
+  --rp-sidebar-width: 260px;
+  --rp-sidebar-padding: 0px;
+  --rp-outline-width: 240px;
+  /* Zero out Rspress's `--rp-sidebar-menu-height` (default 46px).
+     Rspress consumes it in three places:
+       1. `.rp-doc-layout__sidebar { margin-top: calc(-1 * var(--rp-sidebar-menu-height)) }`
+          — pulls the sidebar UP 46px to overlap the `.rp-doc-layout__menu` bar.
+       2. `.rp-doc-layout__outline { margin-top: var(--rp-sidebar-menu-height) }`
+          — pushes the outline DOWN 46px to clear that same bar.
+       3. `html { scroll-padding-top: calc(... + var(--rp-sidebar-menu-height)) }`
+          — accounts for the bar when scrolling to anchors.
+     Our `<CiderpressDocLayout />` doesn't render `.rp-doc-layout__menu`,
+     so leaving the token at its default phantom-offsets the rails
+     (sidebar's `.cp-sidebar-top` band leaks under `<CiderpressDocsBar />`,
+     outline gets an extra 46px of dead space at the top, anchors land
+     46px low). Zero kills all three at the source. */
+  --rp-sidebar-menu-height: 0px;
+  --rp-content-padding-x: 64px;
+  --rp-content-padding-y: 56px;
+  /* Set this MUCH wider than typical viewports so Rspress's `.rp-doc-layout__doc`
+     fills the available flex space between sidebar and outline. The reading
+     width cap lives on the inner doc-container instead — see below. */
+  --rp-content-max-width: 100vw;
+  /* Zero out Rspress's calculated gap that pushes the sidebar away from
+     the rail's left edge and the outline away from the rail's right edge.
+     The mockup wants sidebar / content / outline to butt up against each
+     other with hairlines as the only separator. */
+  --rp-sidebar-margin-left: 0px;
+  --rp-outline-margin-right: 0px;
+}
+
+html body {
+  background: var(--cp-c-bg);
+}
+
+/* ── Doc body rail ──────────────────────────────────────── */
+/* `width: auto` overrides Rspress's default `width: 100%` so that the
+   horizontal margins actually inset the rail (otherwise margin pushes
+   the box past the viewport edge). */
+html .rp-doc-layout__container {
+  width: auto;
+  margin: 0 var(--cp-frame-gutter);
+  background: var(--cp-c-bg);
+  border-left: 1px solid var(--cp-c-border);
+  border-right: 1px solid var(--cp-c-border);
+}
+
+/* Note: `.rp-doc-layout__menu` is no longer rendered at all — see
+   `<CiderpressDocLayout />`, our DocLayout override that re-exports
+   from the theme entry. `<CiderpressDocsBar />` (inserted via the
+   `beforeDoc` slot) replaces it with breadcrumbs + active-section
+   chrome. No CSS override needed for the old element. */
+
+/* ── Sidebar / content / outline dividers ──────────────── */
+html .rp-doc-layout__sidebar {
+  background: var(--cp-c-bg);
+  border-right: 1px solid var(--cp-c-border);
+  /* Flex column so the bottom band can grow to fill remaining space
+     (sidebar layout: nav items stack from the top, bottom band fills
+     the rest). No vertical padding — the sticky top/bottom wrappers
+     supply their own internal padding so they hug the actual edges
+     (sticky `top: 0` / `bottom: 0` would otherwise sit inside the
+     padding box and leave a "see-through" gap above/below). The
+     `:first-child:not(.cp-sidebar-top)` rule below restores top
+     breathing room for nav items when no above-links are configured. */
+  display: flex;
+  flex-direction: column;
+  padding: 0 8px;
+  /* Hide the sidebar's scrollbar entirely — modern doc-site pattern.
+     Avoids both the reserved scrollbar gutter (which would push the
+     bottom band's edge 12px short of the right border) and the visual
+     confusion of a scrollbar appearing to extend through the sticky
+     bottom band. Scrolling still works via wheel/trackpad/keyboard. */
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+html .rp-doc-layout__sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Sidebar sticky bands ──────────────────────────────────
+ * The sidebar itself is the scrolling container; the top and bottom
+ * regions sit `position: sticky` against the viewport edges so only the
+ * middle nav tree scrolls. Backgrounds are required so the scrolling
+ * nav-tree content doesn't bleed through.
+ *
+ * Wrappers come from `nav/layout.tsx` and only render when there's
+ * something to pin (above-links for the top, below-links + promo for
+ * the bottom). When neither is configured, the sidebar scrolls cleanly
+ * with no empty bands.
+ * ────────────────────────────────────────────────────────── */
+html .cp-sidebar-top {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--cp-c-bg);
+  border-bottom: 1px solid var(--cp-c-divider);
+  /* Edge-to-edge horizontal extension over the sidebar's 8px padding
+     so the divider hairline spans the full sidebar width. */
+  margin: 0 -8px;
+  padding: 12px 8px;
+}
+
+/* Without a top wrapper, the first nav item butts right against the
+   topbar's border-bottom — give it breathing room. */
+html .rp-doc-layout__sidebar > :first-child:not(.cp-sidebar-top) {
+  margin-top: 12px;
+}
+
+html .cp-sidebar-bottom {
+  /* Grow to fill the remaining sidebar space so the nav tree stacks
+     from the top and this band occupies everything below it. When the
+     nav tree is short, the band is tall and its content (promo +
+     below-links) sits at its bottom via `justify-content: flex-end`. */
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  /* When the sidebar scrolls (nav tree taller than viewport), this band
+     stays glued to the viewport bottom so the promo is always visible.
+     `z-index: 3` so the band paints above the thin overlay scrollbar
+     thumb so it doesn't appear to "go through" the band region. */
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  background: var(--cp-c-bg);
+  border-top: 1px solid var(--cp-c-divider);
+  /* Negative left/right margins extend the band edge-to-edge over the
+     sidebar's horizontal padding so the divider hairline (and the
+     band's bg) run flush to the sidebar's right border, covering any
+     scrollbar lane that would otherwise show through. */
+  margin: 0 -8px;
+  padding: 12px 8px;
+}
+
+html .rp-doc-layout__outline {
+  background: var(--cp-c-bg);
+  border-left: 1px solid var(--cp-c-border);
+  box-shadow: none;
+  /* `padding-top: 12px` matches the rhythm of `.cp-sidebar-top` /
+     first-child margin on the left sidebar so the first TOC link and
+     the first nav link land at the same y. */
+  padding: 12px 16px;
+}
+
+/* Hide the outline's built-in "On this page" title — the same label
+   lives in <CiderpressDocsBar /> above it, so showing both is
+   redundant. (The Rspress `<ReadPercent />` indicator nested inside
+   the title goes with it; not worth preserving for a doc rail that
+   already lists every heading.) */
+html .rp-outline__title {
+  display: none;
+}
+
+html .rp-doc-layout__doc {
+  background: var(--cp-c-bg);
+}
+
+/* Cap the prose reading width INSIDE the doc-container — sidebar and
+   outline stay pinned to the rail edges; the gutter lives here as
+   centered whitespace around the article body.
+
+   `width: 100%` + `min-width: 0` pin the container to its parent's
+   cross-axis size and break the flex `min-content` calculation so
+   wide inner elements (Shiki code blocks, ASCII trees) scroll inside
+   themselves (their own `overflow-x: auto`) instead of pushing the
+   container past `.rp-doc-layout__doc`'s width, which otherwise
+   clips prose at the viewport edge. */
+html .rp-doc-layout__doc-container {
+  width: 100%;
+  max-width: var(--cp-content-reading-max, 1000px);
+  margin: 0 auto;
+  min-width: 0;
+}
+
+/* ── H1 — match mockup (36px / weight 600 / tight line-height) ── */
+html .rp-doc-layout__doc-container h1,
+html .rp-doc h1 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+}
+
+/* ── First H2 divider — tighten Rspress's default spacing.
+   Rspress paints a hairline as `::before` on the first h2 in `.rp-doc`
+   with `margin-top: 3rem` on the h2 and `margin-bottom: 3rem` on the
+   pseudo, leaving the line floating in ~48px of dead space on each side.
+   Pull both gaps in so the divider reads as a clean separator between
+   the intro paragraph and the first heading. */
+html .rp-doc h2:first-of-type {
+  margin-top: 1.5rem;
+}
+
+html .rp-doc h2:first-of-type::before {
+  margin-bottom: 1rem;
+}
+
+/* ── Right rail (TOC) typography — tighten to mockup ── */
+html .rp-doc-layout__outline a,
+html .rp-aside a {
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+/* ── Topbar ────────────────────────────────────────────── */
+/* All topbar chrome is now rendered by `<CiderpressHeader />`. The
+   Rspress `.rp-nav` is hidden by a rule inside that component's CSS,
+   so no overrides are required here. */
+
+/* Tighten nav typography to match the mockup */
+html .rp-nav-menu__item,
+html .rp-nav-menu a,
+html .rp-nav__menu a {
+  font-size: 13px;
+}
+
+/* Pin `font-weight` AND `font-size` across ALL nav item states (idle,
+   hover, active) so the box never reflows when the active page changes
+   or on hover.
+
+   CRITICAL: Rspress styles the INNER `.rp-nav-menu__item__container`
+   element (not the outer `__item`) and ships rules with `font-size: 14px`
+   on `:hover` and `--active` states + `font-weight: 600` on the mobile
+   screen menu active. Without overriding the container, color flips on
+   hover/active drag the text along with a size + weight change, which
+   reflows the topbar layout.
+
+   Color change alone marks state — pin every size/weight token. */
+html .rp-nav-menu__item,
+html .rp-nav-menu__item .rp-nav-menu__item__container,
+html .rp-nav-menu__item:hover .rp-nav-menu__item__container,
+html .rp-nav-menu__item--active .rp-nav-menu__item__container,
+html .rp-nav-menu a,
+html .rp-nav__menu a,
+html .rp-hover-group__item,
+html .rp-hover-group__item:hover,
+html .rp-hover-group__item--active,
+html .rp-nav-screen-menu-item,
+html .rp-nav-screen-menu-item:hover,
+html .rp-nav-screen-menu-item--active {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* ── Landing page navbar — wraps the rail with vertical hairlines so
+   the lines run continuously from the top of the navbar to the bottom
+   of the footer. Detected by the presence of `.cp-page-rail` in the
+   document. ───────────────────────────────────────────── */
+html body:has(.cp-page-rail) .rspress-nav,
+html body:has(.cp-page-rail) .rp-nav {
+  border-left: 1px solid var(--cp-c-border);
+  border-right: 1px solid var(--cp-c-border);
+  margin: 0 var(--cp-frame-gutter);
+  max-width: var(--cp-landing-max-width);
+}
+
+@media (min-width: 1248px) {
+  html body:has(.cp-page-rail) .rspress-nav,
+  html body:has(.cp-page-rail) .rp-nav {
+    margin: 0 auto;
+  }
+}
+
+/* ── Footer ────────────────────────────────────────────── */
+/* Footer inherits the page background — only the hairline at the top
+   separates it from the content above. */
+html .cp-site-footer {
+  background: transparent;
+  border-top: 1px solid var(--cp-c-border);
+}
+
+/* The docs rail keeps its 12px frame gutter at all viewport widths.
+   Sidebar and outline stay pinned to the rail's edges; only the prose
+   inside the doc-container is capped + centered to keep reading width
+   comfortable at wide viewports. */
+
+/* ── Mobile: drop the gutter + vertical hairlines on the rail so it
+   goes edge-to-edge with the header and docs bar above it. Breakpoint
+   matches `<CiderpressHeader />`, `<CiderpressNavHamburger />`, and
+   `<CiderpressDocsBar />` (all at `max-width: 1024px`) so the entire
+   top-of-page stack transitions to full-bleed in one beat instead of
+   leaving the rail inset under a full-bleed docs bar. */
+@media (max-width: 1024px) {
+  html .rp-doc-layout__container,
+  html .rp-doc-layout__menu {
+    margin: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+}
+
+/* At very narrow viewports, tighten the prose's inner horizontal
+   padding so the article body keeps breathing room without eating into
+   the reading width. */
+@media (max-width: 720px) {
+  html:root {
+    --rp-content-padding-x: 20px;
+  }
+}

package/dist/theme/styles/overrides/rspress.css

@@ -0,0 +1,62 @@
+/**
+ * Rspress structural overrides.
+ *
+ * Color definitions have moved to theme files (styles/themes/*.css).
+ * This file retains only structural overrides: fonts, layout, LLMs UI.
+ *
+ * Cascade layer: `ciderpress.overrides` (see styles/layers.css).
+ *
+ * `!important` inventory (task 8.2):
+ *   - Before: 0
+ *   - After:  0
+ *
+ * No `!important` declarations are needed here — `html .rp-*` specificity
+ * combined with the `ciderpress.overrides` layer is sufficient against Rspress's
+ * font and LLMs UI defaults.
+ */
+
+@layer ciderpress.overrides {
+  html:root {
+    /* Fonts — map Geist into Rspress's font stack */
+    --rp-font-family-base: 'Geist', ui-sans-serif, system-ui, sans-serif;
+    --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  }
+
+  /* ── LLMs UI — Ciderpress mounts its own `<LlmsContainer />` inside
+     `<CiderpressDocsBar />`. The H1 placement is suppressed natively
+     by setting `themeConfig.llmsUI.placement: 'outline'` (see
+     `packages/ui/src/config.ts`). That moves Rspress's auto-render
+     into the outline rail (`<LlmsCopyRow />` + `<LlmsOpenRow />`),
+     which we then hide here so the bar is the single source of
+     truth. ───────────────────────────────────────────────────── */
+  html .rp-outline .rp-outline__action-row,
+  html .rp-outline .rp-outline__open-in-wrapper {
+    display: none;
+  }
+
+  /* ── Buttons — pill shape ─────────────────────────────────── */
+  html .rp-button--medium,
+  html .rp-button--big {
+    border-radius: 9999px;
+  }
+
+  /* ── Tables ──────────────────────────────────────────────── */
+  html table {
+    border-radius: var(--rp-radius);
+    overflow: hidden;
+  }
+}
+
+/* ── Single-variant themes — hide the appearance toggle when the
+   active theme only ships one variant.
+
+   Intentionally **unlayered**: Rspress ships its appearance toggle styles
+   unlayered, and unlayered rules always win over layered ones regardless
+   of specificity. Hoisting this rule out of `@layer ciderpress.overrides` is
+   the only way to win the cascade without `!important`. ────────────── */
+html[data-cp-variants='dark'] .rp-switch-appearance,
+html[data-cp-variants='light'] .rp-switch-appearance,
+html[data-cp-variants='dark'] .rp-nav-screen-appearance,
+html[data-cp-variants='light'] .rp-nav-screen-appearance {
+  display: none;
+}

package/dist/theme/styles/overrides/scrollbar.css

@@ -0,0 +1,25 @@
+/**
+ * Dark scrollbar overrides.
+ */
+
+.rp-dark ::-webkit-scrollbar,
+html[data-dark='true'] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.rp-dark ::-webkit-scrollbar-track,
+html[data-dark='true'] ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rp-dark ::-webkit-scrollbar-thumb,
+html[data-dark='true'] ::-webkit-scrollbar-thumb {
+  background: var(--cp-c-scrollbar-thumb);
+  border-radius: 3px;
+}
+
+.rp-dark ::-webkit-scrollbar-thumb:hover,
+html[data-dark='true'] ::-webkit-scrollbar-thumb:hover {
+  background: var(--cp-c-scrollbar-thumb-hover);
+}