modules-dark.scss

// Dark-theme configuration of the full JTD module tree.
//
// This file is ONLY ever loaded via meta.load-css() from inside the
// `dark-theme` mixin in just-the-docs-dark.scss.  It is never @used
// directly.
//
// Because meta.load-css() includes this file's CSS output at the call site,
// and the mixin emits its content twice -- once under
// `@media (prefers-color-scheme: dark) html:not([data-theme="light"])` for
// the no-JS system default, once under `html[data-theme="dark"]` for an
// explicit toggle choice -- every rule below ships scoped to both. That
// second form is what raises a JTD base rule from (0,0,1) to (0,1,2) in
// dark mode, which is why a single-class override in custom/custom.scss
// can apply in light mode and silently not in dark.
//
// (An earlier architecture wrapped this in a literal `html.dark-mode {}`;
// that selector no longer exists anywhere in the build.)
//
// The @use here is at the TOP LEVEL of this file, which is required.
// The $with map threads configuration through modules.scss's
// @forward "support/support" chain down to _variables.scss.
//
// $feedback-color is intentionally omitted: _variables.scss computes it
// as color.adjust($sidebar-color, $lightness: -3%), so passing $sidebar-color
// is sufficient -- the default expression runs with the configured dark value.
// $search-result-preview-color is omitted: identical in both themes.

@use "custom/fonts" as fonts;

// The font stacks are NOT dark-specific -- they are passed here because this
// compilation re-emits every JTD base rule under `html[data-theme="dark"]`,
// which raises `body { font-family: ... }` from (0,0,1) to (0,1,2) and so
// out-ranks whatever the light compilation emitted.  Omit them and the site
// renders Inter in light mode and the old system stack in dark, which is the
// specificity trap this file's header warns about.  The @font-face rules
// themselves stay in the light compilation; see custom/_fonts.scss.
@use "modules" with (
  $logo: "/favicon.png",
  $body-font-family: fonts.$tb-body-font-family,
  $mono-font-family: fonts.$tb-mono-font-family,
  $color-scheme: dark,
  $body-background-color: #27262b,
  $body-heading-color: #f5f6fa,
  $body-text-color: #e6e1e8,
  // WCAG 1.4.6 (AAA): $blue-000 (#2c84fa) was 4.13:1 on the dark
  // $body-background-color -- every link on every page failed even AA.
  // This is 8.06:1 there, 8.65:1 on the code background, 7.25:1 on
  // $table-background-color and 8.80:1 on the active-nav gradient.
  $link-color: #8cc2ff,
  // AAA for child nav links: #959396 was 4.92:1. Hierarchy against the
  // parent items is carried by font-weight (navigation.scss), not by a
  // dimmer colour.
  $nav-child-link-color: #b6b4b7,
  $sidebar-color: #27262b,
  $base-button-color: #302d36,
  $btn-primary-color: #264caf,
  // One background for every code context. #31343f is lighter than the
  // .language-tb override below it, so token colours clamped against
  // #212121 in builder/highlight-theme.mjs failed on js/json/yaml/html
  // blocks and on inline code inside links. Matches the twinBASIC IDE's
  // CodePanelBackColor.
  $code-background-color: #212121,
  $code-linenumber-color: #dee2f7,
  $table-background-color: #302d36,
  $search-background-color: #302d36,
  $border-color: #44434d,
);