From 32a404b0cc0a9ee53433e9c06dea401544851582 Mon Sep 17 00:00:00 2001 From: Kuba Sunderland-Ober Date: Fri, 29 May 2026 19:00:13 +0200 Subject: [PATCH 1/3] Port deprecated SCSS constructs to supported syntax. --- builder/scss.mjs | 2 +- .../vendor/just-the-docs/_sass/buttons.scss | 12 ++++++---- builder/vendor/just-the-docs/_sass/code.scss | 4 +++- .../_sass/color_schemes/dark.scss | 6 +++-- .../_sass/color_schemes/light.scss | 6 +++-- .../vendor/just-the-docs/_sass/layout.scss | 4 +++- .../_sass/support/_variables.scss | 22 ++++++++++-------- .../_sass/support/mixins/_buttons.scss | 14 ++++++----- .../_sass/support/mixins/_layout.scss | 4 +++- .../_sass/utilities/_layout.scss | 9 +++++--- .../_sass/utilities/_spacing.scss | 23 +++++++++++-------- docs/_sass/custom/custom.scss | 2 +- 12 files changed, 65 insertions(+), 43 deletions(-) diff --git a/builder/scss.mjs b/builder/scss.mjs index 5676141a..a20f4286 100644 --- a/builder/scss.mjs +++ b/builder/scss.mjs @@ -31,7 +31,7 @@ const SCSS_REL = path.join("assets", "css", "just-the-docs-combined.scss"); export async function compileScss(srcRoot) { let sass; try { - sass = (await import("sass")).default; + sass = await import("sass"); } catch (err) { throw new Error( "scss: sass not installed. Run `npm install` at the repo root to fetch it.", diff --git a/builder/vendor/just-the-docs/_sass/buttons.scss b/builder/vendor/just-the-docs/_sass/buttons.scss index 7953f7f0..be5eb0a9 100644 --- a/builder/vendor/just-the-docs/_sass/buttons.scss +++ b/builder/vendor/just-the-docs/_sass/buttons.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + // Buttons and things that look like buttons // stylelint-disable color-named @@ -35,7 +37,7 @@ &:hover, &.zeroclipboard-is-hover { - color: darken($link-color, 2%); + color: color.adjust($link-color, $lightness: -2%); } &:hover, @@ -43,19 +45,19 @@ &.zeroclipboard-is-hover, &.zeroclipboard-is-active { text-decoration: none; - background-color: darken($base-button-color, 1%); + background-color: color.adjust($base-button-color, $lightness: -1%); } &:active, &.selected, &.zeroclipboard-is-active { - background-color: darken($base-button-color, 3%); + background-color: color.adjust($base-button-color, $lightness: -3%); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } &.selected:hover { - background-color: darken(#dcdcdc, 5%); + background-color: color.adjust(#dcdcdc, $lightness: -5%); } &:disabled, @@ -80,7 +82,7 @@ &:active, &.zeroclipboard-is-hover, &.zeroclipboard-is-active { - color: darken($link-color, 4%); + color: color.adjust($link-color, $lightness: -4%); text-decoration: none; background-color: transparent; box-shadow: inset 0 0 0 3px $grey-lt-300; diff --git a/builder/vendor/just-the-docs/_sass/code.scss b/builder/vendor/just-the-docs/_sass/code.scss index df54f256..a6feee4e 100644 --- a/builder/vendor/just-the-docs/_sass/code.scss +++ b/builder/vendor/just-the-docs/_sass/code.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // Code and syntax highlighting // stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty @@ -231,7 +233,7 @@ code.language-mermaid { pre.highlight { background: $code-background-color; // Code Background // For Backwards Compatibility Before $code-linenumber-color was added - @if variable-exists(code-linenumber-color) { + @if meta.variable-exists(code-linenumber-color) { color: $code-linenumber-color; // Code Line Numbers } @else { color: $body-text-color; // Code Line Numbers diff --git a/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss b/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss index 6d0999bb..e614fd4e 100644 --- a/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss +++ b/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + $color-scheme: dark; $body-background-color: $grey-dk-300; $body-heading-color: $grey-lt-000; @@ -9,10 +11,10 @@ $base-button-color: $grey-dk-250; $btn-primary-color: $blue-200; $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid $code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid -$feedback-color: darken($sidebar-color, 3%); +$feedback-color: color.adjust($sidebar-color, $lightness: -3%); $table-background-color: $grey-dk-250; $search-background-color: $grey-dk-250; $search-result-preview-color: $grey-dk-000; $border-color: $grey-dk-200; -@import "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme +@use "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme diff --git a/builder/vendor/just-the-docs/_sass/color_schemes/light.scss b/builder/vendor/just-the-docs/_sass/color_schemes/light.scss index 799e9c66..01057ce6 100644 --- a/builder/vendor/just-the-docs/_sass/color_schemes/light.scss +++ b/builder/vendor/just-the-docs/_sass/color_schemes/light.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + $color-scheme: light !default; $body-background-color: $white !default; $body-heading-color: $grey-dk-300 !default; @@ -8,9 +10,9 @@ $sidebar-color: $grey-lt-000 !default; $base-button-color: #f7f7f7 !default; $btn-primary-color: $purple-100 !default; $code-background-color: $grey-lt-000 !default; -$feedback-color: darken($sidebar-color, 3%) !default; +$feedback-color: color.adjust($sidebar-color, $lightness: -3%) !default; $table-background-color: $white !default; $search-background-color: $white !default; $search-result-preview-color: $grey-dk-000 !default; -@import "./vendor/OneLightJekyll/syntax"; +@use "./vendor/OneLightJekyll/syntax"; diff --git a/builder/vendor/just-the-docs/_sass/layout.scss b/builder/vendor/just-the-docs/_sass/layout.scss index 4cc6ee4c..d1be3355 100644 --- a/builder/vendor/just-the-docs/_sass/layout.scss +++ b/builder/vendor/just-the-docs/_sass/layout.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + // The basic two column layout .side-bar { @@ -144,7 +146,7 @@ } } -@if variable-exists(logo) { +@if meta.variable-exists(logo) { .site-logo { width: 100%; height: 100%; diff --git a/builder/vendor/just-the-docs/_sass/support/_variables.scss b/builder/vendor/just-the-docs/_sass/support/_variables.scss index 0b051ffe..c1e2234f 100644 --- a/builder/vendor/just-the-docs/_sass/support/_variables.scss +++ b/builder/vendor/just-the-docs/_sass/support/_variables.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + // Typography // prettier-ignore @@ -75,16 +77,16 @@ $spacers: ( sp-9: $spacing-unit * 3.5, sp-10: $spacing-unit * 4, ) !default; -$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px -$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px -$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px -$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px -$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px -$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px -$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px -$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px -$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px -$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px +$sp-1: map.get($spacers, sp-1) !default; // 0.25 rem == 4px +$sp-2: map.get($spacers, sp-2) !default; // 0.5 rem == 8px +$sp-3: map.get($spacers, sp-3) !default; // 0.75 rem == 12px +$sp-4: map.get($spacers, sp-4) !default; // 1 rem == 16px +$sp-5: map.get($spacers, sp-5) !default; // 1.5 rem == 24px +$sp-6: map.get($spacers, sp-6) !default; // 2 rem == 32px +$sp-7: map.get($spacers, sp-7) !default; // 2.5 rem == 40px +$sp-8: map.get($spacers, sp-8) !default; // 3 rem == 48px +$sp-9: map.get($spacers, sp-9) !default; // 3.5 rem == 56px +$sp-10: map.get($spacers, sp-10) !default; // 4 rem == 64px // Borders diff --git a/builder/vendor/just-the-docs/_sass/support/mixins/_buttons.scss b/builder/vendor/just-the-docs/_sass/support/mixins/_buttons.scss index cd51da36..c77f9568 100644 --- a/builder/vendor/just-the-docs/_sass/support/mixins/_buttons.scss +++ b/builder/vendor/just-the-docs/_sass/support/mixins/_buttons.scss @@ -1,9 +1,11 @@ +@use "sass:color"; + // Colored button @mixin btn-color($fg, $bg) { color: $fg; - background-color: darken($bg, 2%); - background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%)); + background-color: color.adjust($bg, $lightness: -2%); + background-image: linear-gradient(color.adjust($bg, $lightness: 5%), color.adjust($bg, $lightness: -2%)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12); @@ -11,19 +13,19 @@ &:hover, &.zeroclipboard-is-hover { color: $fg; - background-color: darken($bg, 4%); - background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%))); + background-color: color.adjust($bg, $lightness: -4%); + background-image: linear-gradient((color.adjust($bg, $lightness: 2%), color.adjust($bg, $lightness: -4%))); } &:active, &.selected, &.zeroclipboard-is-active { - background-color: darken($bg, 5%); + background-color: color.adjust($bg, $lightness: -5%); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } &.selected:hover { - background-color: darken($bg, 10%); + background-color: color.adjust($bg, $lightness: -10%); } } diff --git a/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss b/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss index a9b32ee4..10f4f292 100644 --- a/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss +++ b/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + // Media query // Media query mixin @@ -7,7 +9,7 @@ // } @mixin mq($name) { // Retrieves the value from the key - $value: map-get($media-queries, $name); + $value: map.get($media-queries, $name); // If the key exists in the map @if $value { diff --git a/builder/vendor/just-the-docs/_sass/utilities/_layout.scss b/builder/vendor/just-the-docs/_sass/utilities/_layout.scss index 01a57c5e..f192644f 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_layout.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_layout.scss @@ -1,3 +1,6 @@ +@use "sass:map"; +@use "sass:list"; + // Utility classes for layout // Display @@ -22,10 +25,10 @@ display: none !important; } -@each $media-query in map-keys($media-queries) { - @for $i from 1 through length($spacers) { +@each $media-query in map.keys($media-queries) { + @for $i from 1 through list.length($spacers) { @include mq($media-query) { - $size: #{map-get($spacers, sp-#{$i - 1})}; + $size: #{map.get($spacers, sp-#{$i - 1})}; $scale: #{$i - 1}; // .d-sm-block, .d-md-none, .d-lg-inline diff --git a/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss b/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss index a8118613..2444fa24 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss @@ -1,3 +1,6 @@ +@use "sass:map"; +@use "sass:list"; + // Utility classes for margins and padding // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before @@ -9,8 +12,8 @@ margin-left: auto !important; } -@for $i from 1 through length($spacers) { - $size: #{map-get($spacers, sp-#{$i - 1})}; +@for $i from 1 through list.length($spacers) { + $size: #{map.get($spacers, sp-#{$i - 1})}; $scale: #{$i - 1}; // .m-0, .m-1, .m-2... @@ -50,10 +53,10 @@ } } -@each $media-query in map-keys($media-queries) { - @for $i from 1 through length($spacers) { +@each $media-query in map.keys($media-queries) { + @for $i from 1 through list.length($spacers) { @include mq($media-query) { - $size: #{map-get($spacers, sp-#{$i - 1})}; + $size: #{map.get($spacers, sp-#{$i - 1})}; $scale: #{$i - 1}; // .m-sm-0, .m-md-1, .m-lg-2... @@ -93,8 +96,8 @@ // Padding spacer utilities -@for $i from 1 through length($spacers) { - $size: #{map-get($spacers, sp-#{$i - 1})}; +@for $i from 1 through list.length($spacers) { + $size: #{map.get($spacers, sp-#{$i - 1})}; $scale: #{$i - 1}; // .p-0, .p-1, .p-2... @@ -125,10 +128,10 @@ } } -@each $media-query in map-keys($media-queries) { +@each $media-query in map.keys($media-queries) { @include mq($media-query) { - @for $i from 1 through length($spacers) { - $size: #{map-get($spacers, sp-#{$i - 1})}; + @for $i from 1 through list.length($spacers) { + $size: #{map.get($spacers, sp-#{$i - 1})}; $scale: #{$i - 1}; // .p-sm-0, .p-md-1, .p-lg-2... diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss index 6c9e2d40..7231616a 100644 --- a/docs/_sass/custom/custom.scss +++ b/docs/_sass/custom/custom.scss @@ -1,4 +1,4 @@ -@import "admonitions"; +@use "admonitions"; .site-logo { padding-right: 3rem; From 1632d3de6d74f3b4a1df67da15d57849c40e0810 Mon Sep 17 00:00:00 2001 From: Kuba Sunderland-Ober Date: Fri, 29 May 2026 19:26:09 +0200 Subject: [PATCH 2/3] Remove the unused One[Dark,Light]Jekyll highlighter styles. --- builder/vendor/just-the-docs/README.md | 19 +- builder/vendor/just-the-docs/_sass/code.scss | 4 +- .../_sass/color_schemes/dark.scss | 6 +- .../_sass/color_schemes/light.scss | 2 - .../_sass/vendor/OneDarkJekyll/LICENSE | 21 -- .../_sass/vendor/OneDarkJekyll/syntax.scss | 265 ----------------- .../_sass/vendor/OneLightJekyll/LICENSE | 65 ----- .../_sass/vendor/OneLightJekyll/syntax.scss | 273 ------------------ docs/_sass/custom/custom.scss | 9 +- 9 files changed, 22 insertions(+), 642 deletions(-) delete mode 100644 builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/LICENSE delete mode 100644 builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/syntax.scss delete mode 100644 builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/LICENSE delete mode 100644 builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/syntax.scss diff --git a/builder/vendor/just-the-docs/README.md b/builder/vendor/just-the-docs/README.md index e64b821e..897e2c43 100644 --- a/builder/vendor/just-the-docs/README.md +++ b/builder/vendor/just-the-docs/README.md @@ -9,7 +9,7 @@ everything here either feeds a compile step or is copied verbatim into | Path | Origin | Used by | |---|---|---| -| `_sass/` | Gem's `_sass/` at v0.10.1, byte-for-byte (`base.scss`, `buttons.scss`, `code.scss`, `color_schemes/`, `custom/setup.scss` + the gem's empty `custom/custom.scss`, `modules.scss`, `support/`, `utilities/`, `vendor/normalize.scss/normalize.scss`, `vendor/OneLightJekyll/syntax.scss`, `vendor/OneDarkJekyll/syntax.scss`, ...). | [`builder/scss.mjs`](../../scss.mjs) compiles `docs/assets/css/just-the-docs-combined.scss` against these sources via Dart Sass; the load-path ordering puts `docs/_sass/` first so our `custom/custom.scss` shadows the gem's empty one. | +| `_sass/` | Gem's `_sass/` at v0.10.1, byte-for-byte (`base.scss`, `buttons.scss`, `code.scss`, `color_schemes/`, `custom/setup.scss` + the gem's empty `custom/custom.scss`, `modules.scss`, `support/`, `utilities/`, `vendor/normalize.scss/normalize.scss`, ...). | [`builder/scss.mjs`](../../scss.mjs) compiles `docs/assets/css/just-the-docs-combined.scss` against these sources via Dart Sass; the load-path ordering puts `docs/_sass/` first so our `custom/custom.scss` shadows the gem's empty one. | | `assets/js/just-the-docs.js` | Gem's `assets/js/just-the-docs.js` at v0.10.1, **patched in tree**. | [`builder/write.mjs`](../../write.mjs)'s `copyTheme` copies it to `_site/assets/js/just-the-docs.js`; [`builder/offline.mjs`](../../offline.mjs) re-derives an offline-mode variant via [`acorn`](https://www.npmjs.com/package/acorn)-AST patching. | | `assets/js/vendor/lunr.min.js` | Gem's `assets/js/vendor/lunr.min.js` at v0.10.1, unmodified. | Copied verbatim by `copyTheme`. The search index that drives it is the in-process [`builder/search.mjs`](../../search.mjs) output (`assets/js/search-data.json`). | @@ -55,11 +55,20 @@ Bumping the just-the-docs version is a deliberate operation. Procedure: builder/vendor/just-the-docs/assets/js/vendor/lunr.min.js ``` -3. Re-apply the copy-button patch in `assets/js/just-the-docs.js` (see +3. Delete the unused vendor syntax themes that are not used by this site + (syntax highlighting comes from the twinBASIC IDE theme via + `builder/highlight-theme.mjs` instead): + + ```sh + rm -rf builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll + rm -rf builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll + ``` + +4. Re-apply the copy-button patch in `assets/js/just-the-docs.js` (see above). Diffing against the previous vendored copy via `git diff` is the easiest way to spot what needs to come back. -4. Inspect the entry point at `docs/assets/css/just-the-docs-combined.scss` +5. Inspect the entry point at `docs/assets/css/just-the-docs-combined.scss` --- if the upstream `_includes/css/just-the-docs.scss.liquid` Liquid template changed shape between versions, the entry point needs to track it. The current entry point mirrors v0.10.1's: `support/support`, @@ -67,12 +76,12 @@ Bumping the just-the-docs version is a deliberate operation. Procedure: `callouts.scss.liquid` `div.opaque` rule and the `custom.scss.liquid` `@import "./custom/custom"`. -5. Inspect the offline JS patcher in [`builder/offline.mjs`](../../offline.mjs) +6. Inspect the offline JS patcher in [`builder/offline.mjs`](../../offline.mjs) --- `deriveOfflineJtdJs` slices in replacements for the upstream `navLink` and `initSearch` functions; if upstream rewrote either, the replacement bodies may need a refresh. -6. Run `build.bat && check.bat`. The link check catches missing CSS / JS +7. Run `build.bat && check.bat`. The link check catches missing CSS / JS references immediately; visual regressions are best caught by spinning up a preview and checking both light and dark modes. diff --git a/builder/vendor/just-the-docs/_sass/code.scss b/builder/vendor/just-the-docs/_sass/code.scss index a6feee4e..0f2ed232 100644 --- a/builder/vendor/just-the-docs/_sass/code.scss +++ b/builder/vendor/just-the-docs/_sass/code.scss @@ -228,7 +228,7 @@ code.language-mermaid { border: 0; } -// Override OneDarkJekyll Colors for Code Blocks +// Code block background and line-number colors .highlight, pre.highlight { background: $code-background-color; // Code Background @@ -240,7 +240,7 @@ pre.highlight { } } -// Override OneDarkJekyll Colors for Code Blocks +// Code block background and line-number colors .highlight pre { background: $code-background-color; // Code Background } diff --git a/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss b/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss index e614fd4e..2aa619fc 100644 --- a/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss +++ b/builder/vendor/just-the-docs/_sass/color_schemes/dark.scss @@ -9,12 +9,10 @@ $nav-child-link-color: $grey-dk-000; $sidebar-color: $grey-dk-300; $base-button-color: $grey-dk-250; $btn-primary-color: $blue-200; -$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid -$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid +$code-background-color: #31343f; +$code-linenumber-color: #dee2f7; $feedback-color: color.adjust($sidebar-color, $lightness: -3%); $table-background-color: $grey-dk-250; $search-background-color: $grey-dk-250; $search-result-preview-color: $grey-dk-000; $border-color: $grey-dk-200; - -@use "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme diff --git a/builder/vendor/just-the-docs/_sass/color_schemes/light.scss b/builder/vendor/just-the-docs/_sass/color_schemes/light.scss index 01057ce6..9bb3d267 100644 --- a/builder/vendor/just-the-docs/_sass/color_schemes/light.scss +++ b/builder/vendor/just-the-docs/_sass/color_schemes/light.scss @@ -14,5 +14,3 @@ $feedback-color: color.adjust($sidebar-color, $lightness: -3%) !default; $table-background-color: $white !default; $search-background-color: $white !default; $search-result-preview-color: $grey-dk-000 !default; - -@use "./vendor/OneLightJekyll/syntax"; diff --git a/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/LICENSE b/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/LICENSE deleted file mode 100644 index 01d0dfb2..00000000 --- a/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2016 Mihály Gyöngyösi - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/syntax.scss b/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/syntax.scss deleted file mode 100644 index bf7eb524..00000000 --- a/builder/vendor/just-the-docs/_sass/vendor/OneDarkJekyll/syntax.scss +++ /dev/null @@ -1,265 +0,0 @@ -// Generated with OneDarkJekyll applied to Atom's One Dark Vivid theme - -.highlight, -pre.highlight { - background: #31343f; - color: #dee2f7; -} - -.highlight pre { - background: #31343f; -} - -.highlight .hll { - background: #31343f; -} - -.highlight .c { - color: #63677e; - font-style: italic; -} - -.highlight .err { - color: #960050; - background-color: #1e0010; -} - -.highlight .k { - color: #e19ef5; -} - -.highlight .l { - color: #a3eea0; -} - -.highlight .n { - color: #dee2f7; -} - -.highlight .o { - color: #dee2f7; -} - -.highlight .p { - color: #dee2f7; -} - -.highlight .cm { - color: #63677e; - font-style: italic; -} - -.highlight .cp { - color: #63677e; - font-style: italic; -} - -.highlight .c1 { - color: #63677e; - font-style: italic; -} - -.highlight .cs { - color: #63677e; - font-style: italic; -} - -.highlight .ge { - font-style: italic; -} - -.highlight .gs { - font-weight: 700; -} - -.highlight .kc { - color: #e19ef5; -} - -.highlight .kd { - color: #e19ef5; -} - -.highlight .kn { - color: #e19ef5; -} - -.highlight .kp { - color: #e19ef5; -} - -.highlight .kr { - color: #e19ef5; -} - -.highlight .kt { - color: #e19ef5; -} - -.highlight .ld { - color: #a3eea0; -} - -.highlight .m { - color: #eddc96; -} - -.highlight .s { - color: #a3eea0; -} - -.highlight .na { - color: #eddc96; -} - -.highlight .nb { - color: #fdce68; -} - -.highlight .nc { - color: #fdce68; -} - -.highlight .no { - color: #fdce68; -} - -.highlight .nd { - color: #fdce68; -} - -.highlight .ni { - color: #fdce68; -} - -.highlight .ne { - color: #fdce68; -} - -.highlight .nf { - color: #dee2f7; -} - -.highlight .nl { - color: #fdce68; -} - -.highlight .nn { - color: #dee2f7; -} - -.highlight .nx { - color: #dee2f7; -} - -.highlight .py { - color: #fdce68; -} - -.highlight .nt { - color: #f9867b; -} - -.highlight .nv { - color: #fdce68; -} - -.highlight .ow { - font-weight: 700; -} - -.highlight .w { - color: #f8f8f2; -} - -.highlight .mf { - color: #eddc96; -} - -.highlight .mh { - color: #eddc96; -} - -.highlight .mi { - color: #eddc96; -} - -.highlight .mo { - color: #eddc96; -} - -.highlight .sb { - color: #a3eea0; -} - -.highlight .sc { - color: #a3eea0; -} - -.highlight .sd { - color: #a3eea0; -} - -.highlight .s2 { - color: #a3eea0; -} - -.highlight .se { - color: #a3eea0; -} - -.highlight .sh { - color: #a3eea0; -} - -.highlight .si { - color: #a3eea0; -} - -.highlight .sx { - color: #a3eea0; -} - -.highlight .sr { - color: #7be2f9; -} - -.highlight .s1 { - color: #a3eea0; -} - -.highlight .ss { - color: #7be2f9; -} - -.highlight .bp { - color: #fdce68; -} - -.highlight .vc { - color: #fdce68; -} - -.highlight .vg { - color: #fdce68; -} - -.highlight .vi { - color: #f9867b; -} - -.highlight .il { - color: #eddc96; -} - -.highlight .gu { - color: #75715e; -} - -.highlight .gd { - color: #f92672; -} - -.highlight .gi { - color: #a6e22e; -} diff --git a/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/LICENSE b/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/LICENSE deleted file mode 100644 index df5eca00..00000000 --- a/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/LICENSE +++ /dev/null @@ -1,65 +0,0 @@ -OneLightJekyll relies on two works: OneDarkJekyll, and Atom's One Light theme. This file contains the licensing for all the related software. - ---- - -OneLightJekyll (https://github.com/just-the-docs/OneLightJekyll/blob/main/LICENSE) - -MIT License - -Copyright (c) 2023 Matthew Wang - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ---- - -OneDarkJekyll (https://github.com/mgyongyosi/OneDarkJekyll/blob/master/LICENSE) - -MIT License - -Copyright (c) 2016 Mihály Gyöngyösi - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - ---- - -Atom One Light (https://github.com/atom/atom/blob/master/LICENSE.md) - -Copyright (c) 2011-2022 GitHub Inc. - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/syntax.scss b/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/syntax.scss deleted file mode 100644 index d69a534a..00000000 --- a/builder/vendor/just-the-docs/_sass/vendor/OneLightJekyll/syntax.scss +++ /dev/null @@ -1,273 +0,0 @@ -// Generated with OneLightJekyll applied to Atom's One Light theme - -.highlight, -pre.highlight { - background: #f9f9f9; - color: #383942; -} - -.highlight pre { - background: #f9f9f9; -} - -.highlight .hll { - background: #f9f9f9; -} - -.highlight .c { - color: #9fa0a6; - font-style: italic; -} - -.highlight .err { - color: #fff; - background-color: #e05151; -} - -.highlight .k { - color: #a625a4; -} - -.highlight .l { - color: #50a04f; -} - -.highlight .n { - color: #383942; -} - -.highlight .o { - color: #383942; -} - -.highlight .p { - color: #383942; -} - -.highlight .cm { - color: #9fa0a6; - font-style: italic; -} - -.highlight .cp { - color: #9fa0a6; - font-style: italic; -} - -.highlight .c1 { - color: #9fa0a6; - font-style: italic; -} - -.highlight .cs { - color: #9fa0a6; - font-style: italic; -} - -.highlight .ge { - font-style: italic; -} - -.highlight .gs { - font-weight: 700; -} - -.highlight .kc { - color: #a625a4; -} - -.highlight .kd { - color: #a625a4; -} - -.highlight .kn { - color: #a625a4; -} - -.highlight .kp { - color: #a625a4; -} - -.highlight .kr { - color: #a625a4; -} - -.highlight .kt { - color: #a625a4; -} - -.highlight .ld { - color: #50a04f; -} - -.highlight .m { - color: #b66a00; -} - -.highlight .s { - color: #50a04f; -} - -.highlight .na { - color: #b66a00; -} - -.highlight .nb { - color: #ca7601; -} - -.highlight .nc { - color: #ca7601; -} - -.highlight .no { - color: #ca7601; -} - -.highlight .nd { - color: #ca7601; -} - -.highlight .ni { - color: #ca7601; -} - -.highlight .ne { - color: #ca7601; -} - -.highlight .nf { - color: #383942; -} - -.highlight .nl { - color: #ca7601; -} - -.highlight .nn { - color: #383942; -} - -.highlight .nx { - color: #383942; -} - -.highlight .py { - color: #ca7601; -} - -.highlight .nt { - color: #e35549; -} - -.highlight .nv { - color: #ca7601; -} - -.highlight .ow { - font-weight: 700; -} - -.highlight .w { - color: #f8f8f2; -} - -.highlight .mf { - color: #b66a00; -} - -.highlight .mh { - color: #b66a00; -} - -.highlight .mi { - color: #b66a00; -} - -.highlight .mo { - color: #b66a00; -} - -.highlight .sb { - color: #50a04f; -} - -.highlight .sc { - color: #50a04f; -} - -.highlight .sd { - color: #50a04f; -} - -.highlight .s2 { - color: #50a04f; -} - -.highlight .se { - color: #50a04f; -} - -.highlight .sh { - color: #50a04f; -} - -.highlight .si { - color: #50a04f; -} - -.highlight .sx { - color: #50a04f; -} - -.highlight .sr { - color: #0083bb; -} - -.highlight .s1 { - color: #50a04f; -} - -.highlight .ss { - color: #0083bb; -} - -.highlight .bp { - color: #ca7601; -} - -.highlight .vc { - color: #ca7601; -} - -.highlight .vg { - color: #ca7601; -} - -.highlight .vi { - color: #e35549; -} - -.highlight .il { - color: #b66a00; -} - -.highlight .gu { - color: #75715e; -} - -.highlight .gd { - color: #e05151; -} - -.highlight .gi { - color: #43d089; -} - -.highlight .language-json .w + .s2 { - color: #e35549; -} - -.highlight .language-json .kc { - color: #0083bb; -} diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss index 7231616a..352e21b4 100644 --- a/docs/_sass/custom/custom.scss +++ b/docs/_sass/custom/custom.scss @@ -66,11 +66,10 @@ html.dark-mode { scrollbar-color: #404040 #1a1a1a; } - // Dark-mode background for ```tb fenced code blocks. Overrides the - // OneDarkJekyll syntax theme's default so tB blocks match the - // twinBASIC IDE's CodePanelBackColor. Token colours themselves come - // from Shiki via assets/css/tb-highlight.css (generated by - // builder/highlight-theme.mjs from builder/themes/{Light,Dark}.theme). + // Dark-mode background for ```tb fenced code blocks, matching the + // twinBASIC IDE's CodePanelBackColor. Token colours come from Shiki via + // assets/css/tb-highlight.css (generated by builder/highlight-theme.mjs + // from builder/themes/{Light,Dark}.theme). .language-tb.highlighter-rouge, .language-tb .highlight, .language-tb pre.highlight, From edc99902a99d85a6208495b2b26d6a0908efbe9f Mon Sep 17 00:00:00 2001 From: Kuba Sunderland-Ober Date: Fri, 29 May 2026 20:51:29 +0200 Subject: [PATCH 3/3] Migrate Sass @import to @use/@forward, eliminating all deprecation warnings --- builder/scss.mjs | 46 +++-- builder/vendor/just-the-docs/_sass/base.scss | 2 + .../vendor/just-the-docs/_sass/buttons.scss | 1 + builder/vendor/just-the-docs/_sass/code.scss | 4 +- .../vendor/just-the-docs/_sass/content.scss | 1 + .../vendor/just-the-docs/_sass/labels.scss | 2 + .../vendor/just-the-docs/_sass/layout.scss | 4 +- .../vendor/just-the-docs/_sass/modules.scss | 34 +-- .../just-the-docs/_sass/navigation.scss | 2 + builder/vendor/just-the-docs/_sass/print.scss | 2 + .../vendor/just-the-docs/_sass/search.scss | 2 + .../just-the-docs/_sass/skiptomain.scss | 2 + .../_sass/support/_variables.scss | 20 ++ .../_sass/support/mixins/_layout.scss | 1 + .../_sass/support/mixins/_typography.scss | 3 + .../_sass/support/mixins/mixins.scss | 6 +- .../just-the-docs/_sass/support/support.scss | 4 +- .../vendor/just-the-docs/_sass/tables.scss | 2 + .../just-the-docs/_sass/typography.scss | 2 + .../_sass/utilities/_colors.scss | 2 + .../_sass/utilities/_layout.scss | 1 + .../_sass/utilities/_spacing.scss | 1 + .../_sass/utilities/_typography.scss | 2 + .../_sass/utilities/utilities.scss | 10 +- docs/_sass/modules-dark.scss | 36 ++++ docs/assets/css/just-the-docs-combined.scss | 195 +++--------------- docs/assets/css/just-the-docs-dark.scss | 155 ++++++++++++++ 27 files changed, 336 insertions(+), 206 deletions(-) create mode 100644 docs/_sass/modules-dark.scss create mode 100644 docs/assets/css/just-the-docs-dark.scss diff --git a/builder/scss.mjs b/builder/scss.mjs index a20f4286..1231c01a 100644 --- a/builder/scss.mjs +++ b/builder/scss.mjs @@ -10,6 +10,17 @@ // `_sass/custom/custom.scss` in the site root shadowed the gem's empty // upstream version. The same shadowing now happens via load-path ordering. // +// TWO sass.compile() calls are used: +// 1. just-the-docs-combined.scss -- light theme +// 2. just-the-docs-dark.scss -- dark theme (html.dark-mode { ... }) +// The results are concatenated into a single CSS asset. +// +// Two separate compilations are required because Dart Sass maintains one +// module cache per compile() call, and a module URL can only be loaded once +// per compilation with one variable configuration. The dark theme needs +// modules.scss loaded with different variable values, which is only possible +// in a fresh compilation with its own empty cache. +// // Failure modes: // SETUP -- sass not installed: throw. There is no pre-compiled fallback; // `npm install` is the fix. The error message points there. @@ -26,7 +37,8 @@ import { fileURLToPath } from "node:url"; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const VENDOR_JTD_SASS = path.join(__dirname, "vendor", "just-the-docs", "_sass"); -const SCSS_REL = path.join("assets", "css", "just-the-docs-combined.scss"); +const SCSS_LIGHT_REL = path.join("assets", "css", "just-the-docs-combined.scss"); +const SCSS_DARK_REL = path.join("assets", "css", "just-the-docs-dark.scss"); export async function compileScss(srcRoot) { let sass; @@ -39,22 +51,30 @@ export async function compileScss(srcRoot) { ); } - const scssPath = path.join(srcRoot, SCSS_REL); + const loadPaths = [ + path.join(srcRoot, "_sass"), // our customizations first + VENDOR_JTD_SASS, // gem fallback + ]; - let result; + const compileOpts = { + style: "expanded", + sourceMap: false, + loadPaths, + }; + + let lightResult, darkResult; + try { + lightResult = sass.compile(path.join(srcRoot, SCSS_LIGHT_REL), compileOpts); + } catch (err) { + console.warn(`scss (light): compilation failed:\n ${err.message}`); + return { compiled: false, failed: true }; + } try { - result = sass.compile(scssPath, { - style: "expanded", - sourceMap: false, - loadPaths: [ - path.join(srcRoot, "_sass"), // our customizations first - VENDOR_JTD_SASS, // gem fallback - ], - }); + darkResult = sass.compile(path.join(srcRoot, SCSS_DARK_REL), compileOpts); } catch (err) { - console.warn(`scss: compilation failed:\n ${err.message}`); + console.warn(`scss (dark): compilation failed:\n ${err.message}`); return { compiled: false, failed: true }; } - return { compiled: true, css: result.css }; + return { compiled: true, css: lightResult.css + "\n" + darkResult.css }; } diff --git a/builder/vendor/just-the-docs/_sass/base.scss b/builder/vendor/just-the-docs/_sass/base.scss index afa67a40..00e176b5 100644 --- a/builder/vendor/just-the-docs/_sass/base.scss +++ b/builder/vendor/just-the-docs/_sass/base.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Base element style overrides // stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id diff --git a/builder/vendor/just-the-docs/_sass/buttons.scss b/builder/vendor/just-the-docs/_sass/buttons.scss index be5eb0a9..c6ea5429 100644 --- a/builder/vendor/just-the-docs/_sass/buttons.scss +++ b/builder/vendor/just-the-docs/_sass/buttons.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "support/support" as *; // Buttons and things that look like buttons // stylelint-disable color-named diff --git a/builder/vendor/just-the-docs/_sass/code.scss b/builder/vendor/just-the-docs/_sass/code.scss index 0f2ed232..2cc9ff6e 100644 --- a/builder/vendor/just-the-docs/_sass/code.scss +++ b/builder/vendor/just-the-docs/_sass/code.scss @@ -1,4 +1,4 @@ -@use "sass:meta"; +@use "support/support" as *; // Code and syntax highlighting // stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty @@ -233,7 +233,7 @@ code.language-mermaid { pre.highlight { background: $code-background-color; // Code Background // For Backwards Compatibility Before $code-linenumber-color was added - @if meta.variable-exists(code-linenumber-color) { + @if $code-linenumber-color { color: $code-linenumber-color; // Code Line Numbers } @else { color: $body-text-color; // Code Line Numbers diff --git a/builder/vendor/just-the-docs/_sass/content.scss b/builder/vendor/just-the-docs/_sass/content.scss index 219a0975..09d36794 100644 --- a/builder/vendor/just-the-docs/_sass/content.scss +++ b/builder/vendor/just-the-docs/_sass/content.scss @@ -1,4 +1,5 @@ @charset "UTF-8"; +@use "support/support" as *; // Styles for rendered markdown in the .main-content container // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id diff --git a/builder/vendor/just-the-docs/_sass/labels.scss b/builder/vendor/just-the-docs/_sass/labels.scss index fdf714e5..3dfcef95 100644 --- a/builder/vendor/just-the-docs/_sass/labels.scss +++ b/builder/vendor/just-the-docs/_sass/labels.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Labels (not the form kind) // this :not() prevents a style clash with Mermaid.js's diff --git a/builder/vendor/just-the-docs/_sass/layout.scss b/builder/vendor/just-the-docs/_sass/layout.scss index d1be3355..875564f6 100644 --- a/builder/vendor/just-the-docs/_sass/layout.scss +++ b/builder/vendor/just-the-docs/_sass/layout.scss @@ -1,4 +1,4 @@ -@use "sass:meta"; +@use "support/support" as *; // The basic two column layout @@ -146,7 +146,7 @@ } } -@if meta.variable-exists(logo) { +@if $logo { .site-logo { width: 100%; height: 100%; diff --git a/builder/vendor/just-the-docs/_sass/modules.scss b/builder/vendor/just-the-docs/_sass/modules.scss index ee282e73..d2d8e1f5 100644 --- a/builder/vendor/just-the-docs/_sass/modules.scss +++ b/builder/vendor/just-the-docs/_sass/modules.scss @@ -1,17 +1,21 @@ -// Import external dependencies -@import "./vendor/normalize.scss/normalize"; +// Forward support so the entry point can configure theme variables through +// this aggregator (e.g. @use "modules" with ($logo: "/favicon.png")). +@forward "./support/support"; + +// External dependency +@use "./vendor/normalize.scss/normalize"; // Modules -@import "./base"; -@import "./layout"; -@import "./content"; -@import "./navigation"; -@import "./typography"; -@import "./labels"; -@import "./buttons"; -@import "./search"; -@import "./tables"; -@import "./code"; -@import "./utilities/utilities"; -@import "./print"; -@import "./skiptomain"; +@use "./base"; +@use "./layout"; +@use "./content"; +@use "./navigation"; +@use "./typography"; +@use "./labels"; +@use "./buttons"; +@use "./search"; +@use "./tables"; +@use "./code"; +@use "./utilities/utilities"; +@use "./print"; +@use "./skiptomain"; diff --git a/builder/vendor/just-the-docs/_sass/navigation.scss b/builder/vendor/just-the-docs/_sass/navigation.scss index a99d9dce..aa1bc56f 100644 --- a/builder/vendor/just-the-docs/_sass/navigation.scss +++ b/builder/vendor/just-the-docs/_sass/navigation.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Main nav, breadcrumb, etc... // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity diff --git a/builder/vendor/just-the-docs/_sass/print.scss b/builder/vendor/just-the-docs/_sass/print.scss index ee76a3cc..9771728d 100644 --- a/builder/vendor/just-the-docs/_sass/print.scss +++ b/builder/vendor/just-the-docs/_sass/print.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type @media print { diff --git a/builder/vendor/just-the-docs/_sass/search.scss b/builder/vendor/just-the-docs/_sass/search.scss index cdf8d6e1..bbaf8fa7 100644 --- a/builder/vendor/just-the-docs/_sass/search.scss +++ b/builder/vendor/just-the-docs/_sass/search.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Search input and autocomplete .search { diff --git a/builder/vendor/just-the-docs/_sass/skiptomain.scss b/builder/vendor/just-the-docs/_sass/skiptomain.scss index 7c14f057..824bb192 100644 --- a/builder/vendor/just-the-docs/_sass/skiptomain.scss +++ b/builder/vendor/just-the-docs/_sass/skiptomain.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Skipnav // Skip to main content diff --git a/builder/vendor/just-the-docs/_sass/support/_variables.scss b/builder/vendor/just-the-docs/_sass/support/_variables.scss index c1e2234f..7afcbb76 100644 --- a/builder/vendor/just-the-docs/_sass/support/_variables.scss +++ b/builder/vendor/just-the-docs/_sass/support/_variables.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "sass:color"; // Typography @@ -117,3 +118,22 @@ $media-queries: ( lg: $content-width + $nav-width, xl: 87.5rem, ) !default; + +// Theme variables -- light defaults (overridden per-load for the dark theme) + +$logo: null !default; +$color-scheme: light !default; +$body-background-color: $white !default; +$body-heading-color: $grey-dk-300 !default; +$body-text-color: $grey-dk-100 !default; +$link-color: $purple-000 !default; +$nav-child-link-color: $grey-dk-100 !default; +$sidebar-color: $grey-lt-000 !default; +$base-button-color: #f7f7f7 !default; +$btn-primary-color: $purple-100 !default; +$code-background-color: $grey-lt-000 !default; +$code-linenumber-color: null !default; +$feedback-color: color.adjust($sidebar-color, $lightness: -3%) !default; +$table-background-color: $white !default; +$search-background-color: $white !default; +$search-result-preview-color: $grey-dk-000 !default; diff --git a/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss b/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss index 10f4f292..52f57fed 100644 --- a/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss +++ b/builder/vendor/just-the-docs/_sass/support/mixins/_layout.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "../variables" as *; // Media query diff --git a/builder/vendor/just-the-docs/_sass/support/mixins/_typography.scss b/builder/vendor/just-the-docs/_sass/support/mixins/_typography.scss index 760b0e9a..53d80c68 100644 --- a/builder/vendor/just-the-docs/_sass/support/mixins/_typography.scss +++ b/builder/vendor/just-the-docs/_sass/support/mixins/_typography.scss @@ -1,3 +1,6 @@ +@use "../variables" as *; +@use "./layout" as *; + @mixin fs-1 { & { font-size: $font-size-1 !important; diff --git a/builder/vendor/just-the-docs/_sass/support/mixins/mixins.scss b/builder/vendor/just-the-docs/_sass/support/mixins/mixins.scss index 0506fbf5..306463de 100644 --- a/builder/vendor/just-the-docs/_sass/support/mixins/mixins.scss +++ b/builder/vendor/just-the-docs/_sass/support/mixins/mixins.scss @@ -1,3 +1,3 @@ -@import "./layout"; -@import "./buttons"; -@import "./typography"; +@forward "./layout"; +@forward "./buttons"; +@forward "./typography"; diff --git a/builder/vendor/just-the-docs/_sass/support/support.scss b/builder/vendor/just-the-docs/_sass/support/support.scss index e8005929..c9b73179 100644 --- a/builder/vendor/just-the-docs/_sass/support/support.scss +++ b/builder/vendor/just-the-docs/_sass/support/support.scss @@ -1,2 +1,2 @@ -@import "./variables"; -@import "./mixins/mixins"; +@forward "./variables"; +@forward "./mixins/mixins"; diff --git a/builder/vendor/just-the-docs/_sass/tables.scss b/builder/vendor/just-the-docs/_sass/tables.scss index 3574323c..2725552c 100644 --- a/builder/vendor/just-the-docs/_sass/tables.scss +++ b/builder/vendor/just-the-docs/_sass/tables.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Tables // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type diff --git a/builder/vendor/just-the-docs/_sass/typography.scss b/builder/vendor/just-the-docs/_sass/typography.scss index 0d0eaf22..7c2fc861 100644 --- a/builder/vendor/just-the-docs/_sass/typography.scss +++ b/builder/vendor/just-the-docs/_sass/typography.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Typography // stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id diff --git a/builder/vendor/just-the-docs/_sass/utilities/_colors.scss b/builder/vendor/just-the-docs/_sass/utilities/_colors.scss index 9025649c..291083f1 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_colors.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_colors.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Utility classes for colors // Text colors diff --git a/builder/vendor/just-the-docs/_sass/utilities/_layout.scss b/builder/vendor/just-the-docs/_sass/utilities/_layout.scss index f192644f..1a3f0720 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_layout.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_layout.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "sass:list"; +@use "support/support" as *; // Utility classes for layout diff --git a/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss b/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss index 2444fa24..fb22c680 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_spacing.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "sass:list"; +@use "support/support" as *; // Utility classes for margins and padding diff --git a/builder/vendor/just-the-docs/_sass/utilities/_typography.scss b/builder/vendor/just-the-docs/_sass/utilities/_typography.scss index 33f1db9e..e49dbf23 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/_typography.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/_typography.scss @@ -1,3 +1,5 @@ +@use "support/support" as *; + // Utility classes for typography .fs-1 { diff --git a/builder/vendor/just-the-docs/_sass/utilities/utilities.scss b/builder/vendor/just-the-docs/_sass/utilities/utilities.scss index 6c25bdfa..cb46df64 100644 --- a/builder/vendor/just-the-docs/_sass/utilities/utilities.scss +++ b/builder/vendor/just-the-docs/_sass/utilities/utilities.scss @@ -1,5 +1,5 @@ -@import "./colors"; -@import "./layout"; -@import "./typography"; -@import "./lists"; -@import "./spacing"; +@use "./colors"; +@use "./layout"; +@use "./typography"; +@use "./lists"; +@use "./spacing"; diff --git a/docs/_sass/modules-dark.scss b/docs/_sass/modules-dark.scss new file mode 100644 index 00000000..bdcc7bd4 --- /dev/null +++ b/docs/_sass/modules-dark.scss @@ -0,0 +1,36 @@ +// Dark-theme configuration of the full JTD module tree. +// +// This file is ONLY ever loaded via meta.load-css() inside html.dark-mode {} +// 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 +// (inside the html.dark-mode selector), every rule below ends up scoped to +// html.dark-mode in the compiled CSS -- exactly what @import "modules" inside +// html.dark-mode {} produced under the old @import architecture. +// +// 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 "modules" with ( + $logo: "/favicon.png", + $color-scheme: dark, + $body-background-color: #27262b, + $body-heading-color: #f5f6fa, + $body-text-color: #e6e1e8, + $link-color: #2c84fa, + $nav-child-link-color: #959396, + $sidebar-color: #27262b, + $base-button-color: #302d36, + $btn-primary-color: #264caf, + $code-background-color: #31343f, + $code-linenumber-color: #dee2f7, + $table-background-color: #302d36, + $search-background-color: #302d36, + $border-color: #44434d, +); diff --git a/docs/assets/css/just-the-docs-combined.scss b/docs/assets/css/just-the-docs-combined.scss index 63cc41a3..74e6957f 100644 --- a/docs/assets/css/just-the-docs-combined.scss +++ b/docs/assets/css/just-the-docs-combined.scss @@ -4,179 +4,46 @@ // 1. docs/_sass/ -- our customizations (custom/*.scss, etc.) // 2. builder/vendor/just-the-docs/_sass/ -- pristine JTD v0.10.1 sources // -// Our docs/_sass/custom/custom.scss therefore shadows the gem's empty -// upstream custom/custom.scss via load-path ordering -- same behavior the -// Jekyll build relied on. +// scss.mjs performs TWO sass.compile() calls: this file (light theme) and +// just-the-docs-dark.scss (dark theme), then concatenates the results into +// a single just-the-docs-combined.css asset. Having separate compilations +// gives each its own module cache, which is the only way to load modules.scss +// twice with different variable configurations in Dart Sass. // -// This file replaces the Liquid-templated entry point Jekyll used -// (`_includes/css/just-the-docs.scss.liquid`). Inline comments mark where -// each block corresponds to the Liquid include's output. +// Within a single compilation, a module URL can only be loaded once. The +// $with parameter of meta.load-css() ALSO writes to the shared module cache, +// so two calls to meta.load-css("modules", $with: ...) -- even with different +// values -- conflict. Therefore @use "modules" and @use "support/support" +// are absent here; only meta.load-css() is used, and only once. +// +// Consequence: the two literal values in this file (div.opaque background +// and span colour) cannot be referenced via Sass variables and are hardcoded. -// site.logo = "favicon.png", relative_url-prefixed for the empty baseurl: -$logo: "/favicon.png"; +@use "sass:meta"; +// custom/setup is the gem's empty pre-colour-scheme hook. +@use "custom/setup"; +// custom/custom generates admonitions, .site-logo, code-size overrides, and +// dark-scrollbar CSS, and exposes the tb-code-overrides mixin. +@use "custom/custom" as *; // ── Light theme (root level) ────────────────────────────────────────────── // -// Replicates the gem's `just-the-docs.scss.liquid` with color_scheme="light". +// Replicates the gem's just-the-docs.scss.liquid with color_scheme="light". +// +// meta.load-css() is the only load of modules.scss in this compilation. +// The $with map configures _variables.scss through the @forward chain: +// modules → @forward "support/support" → @forward "_variables.scss" +// Only $logo is passed; all other variables use their !default light values. -@import "support/support"; // variables + mixins -@import "custom/setup"; // gem's pre-color-scheme hook (empty upstream) -@import "color_schemes/light"; // light theme variable values -@import "modules"; // all gem CSS modules +@include meta.load-css("modules", $with: ("logo": "/favicon.png")); -// callouts.scss.liquid output. site.callouts is configured but empty, so the -// `{% for callout in site.callouts %}` loop produces nothing -- only the -// unconditional div.opaque rule is emitted. +// callouts.scss.liquid output -- only the unconditional div.opaque rule. +// Light $body-background-color default = $white = #fff. div.opaque { - background-color: $body-background-color; + background-color: #fff; } -// custom.scss.liquid expands to `@import "./custom/custom"`. Our shadow at -// docs/_sass/custom/custom.scss adds admonitions, .site-logo, and the -// dark-mode scrollbar rules. -@import "custom/custom"; - +// Light $link-color default = $purple-000 = #7253ed. span { - color: $link-color; -} - -// ── Dark theme ──────────────────────────────────────────────────────────── -// -// Replicates the gem's `just-the-docs.scss.liquid` with color_scheme="dark", -// nested under html.dark-mode so every emitted rule is scoped. -// -// Note: the Jekyll build re-imported custom/custom.scss here via the second -// expansion of custom.scss.liquid, which produced doubled -// `html.dark-mode html.dark-mode` scrollbar selectors. We don't replay that -// import -- our root-level @import "custom/custom" above already emits the -// dark-mode scrollbar rules correctly. - -html.dark-mode { - @import "color_schemes/dark"; // overrides JTD variables to dark values - @import "modules"; // re-emits all module CSS with dark values - - div.opaque { - background-color: $body-background-color; - } - - // Re-emit the code font-size / inline-padding overrides defined in - // custom/custom.scss; without this scope the JTD dark-theme `code` - // rule (specificity 0,1,1) out-ranks our root-level override (0,0,1). - @include tb-code-overrides; - - // --------------------------------------------------------------- - // Workaround for the dark-mode + .search-active interaction. - // - // Upstream `_sass/search.scss` declares its active-state rules as - // `.search-active { .search-results { display: block; } ... }`, - // assuming `.search-active` will be set on `` directly (which - // is what `showSearch()` in just-the-docs.js does). Wrapping the - // dark-theme @import inside `html.dark-mode { }` causes SCSS - // nesting to compile those to: - // - // html.dark-mode .search-active .search-results { display: block; } - // - // -- a *descendant* combinator. With both classes on ``, - // `.search-active` isn't a descendant of `html.dark-mode`, so the - // override never matches. Meanwhile the dark-mode default - // `html.dark-mode .search-results { display: none; }` (specificity - // 0,2,1) outranks the unscoped light override - // `.search-active .search-results { display: block; }` (0,2,0), so - // the search dropdown stays hidden in dark mode. - // - // Fix: re-emit the upstream `.search-active { ... }` block here - // with `&.search-active { ... }`, which composes into the - // *compound* selector `html.dark-mode.search-active` (specificity - // 0,3,1) -- enough to beat the dark-mode default. The contents - // mirror upstream `_sass/search.scss` so the dark-mode active-search - // visuals stay byte-equivalent to the light-mode ones. - &.search-active { - .search { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - } - - .search-input-wrap { - height: $sp-10; - border-radius: 0; - - @include mq(md) { - width: $search-results-width; - box-shadow: - 0 1px 2px rgba(0, 0, 0, 0.12), - 0 3px 10px rgba(0, 0, 0, 0.08); - } - } - - .search-input { - background-color: $search-background-color; - - @include mq(md) { - padding-left: 2.3rem; - } - } - - .search-label { - @include mq(md) { - padding-left: 0.6rem; - } - } - - .search-results { - display: block; - } - - .search-overlay { - width: 100%; - height: 100%; - opacity: 1; - transition: - opacity ease $transition-duration, - width 0s, - height 0s; - } - - @include mq(md) { - .main { - position: fixed; - right: 0; - left: 0; - } - } - - .main-header { - padding-top: $sp-10; - - @include mq(md) { - padding-top: 0; - } - } - } - // --------------------------------------------------------------- - - div.highlighter-rouge div.highlight { - line-height: 1; - } - - span { - color: $link-color; - } - - .site-footer { - color: #959396; - } - - h1, - h2, - h3, - h4, - h5, - h6, - #toctitle { - font-weight: 500; - } + color: #7253ed; } diff --git a/docs/assets/css/just-the-docs-dark.scss b/docs/assets/css/just-the-docs-dark.scss new file mode 100644 index 00000000..0f1b6d57 --- /dev/null +++ b/docs/assets/css/just-the-docs-dark.scss @@ -0,0 +1,155 @@ +// Dark-theme stylesheet -- compiled separately by builder/scss.mjs and +// appended to just-the-docs-combined.css. +// +// This file is the second of two sass.compile() calls. Having a separate +// compilation gives it its own empty module cache, so modules.scss (and +// its transitive dependencies) can be loaded with dark variable values +// without conflicting with the light-theme load in the first compilation. +// +// css.mjs does NOT @use "custom/custom" here because that would duplicate +// the root-level CSS (admonitions, .site-logo, code overrides) that the +// first compilation already emits. Only the dark-mode-specific mixin body +// (tb-code-overrides) is reproduced inline below. + +@use "sass:meta"; + +// ── Dark theme ──────────────────────────────────────────────────────────── +// +// meta.load-css() includes modules-dark.scss's CSS output at this call site, +// i.e. inside html.dark-mode {}. modules-dark.scss @uses modules.scss with +// dark configuration; that @use is valid because this is a fresh compilation +// where modules.scss has not yet been loaded. + +html.dark-mode { + @include meta.load-css("modules-dark"); + + // $body-background-color dark = $grey-dk-300 = #27262b. + div.opaque { + background-color: #27262b; + } + + // Inline tb-code-overrides (from docs/_sass/custom/custom.scss). + // Re-emitting inside html.dark-mode ensures this rule's specificity (0,1,1) + // beats the JTD dark-theme `code` rule generated by meta.load-css above. + code { + font-size: 0.95em; + } + + :not(pre, figure) > code { + padding: 0.15em 0.12em; + } + + td code, + th code { + font-size: 1em; + } + + // --------------------------------------------------------------- + // Workaround for the dark-mode + .search-active interaction. + // + // Upstream search.scss emits .search-active rules assuming the class + // lives directly on . meta.load-css inside html.dark-mode {} + // turns those into descendant-combinator selectors that never match. + // Re-emitting the block as &.search-active produces the compound + // selector html.dark-mode.search-active (specificity 0,3,1) which + // beats the dark-mode default. + // + // Sass members from support/support are not in scope here (no @use + // of that module in this file, to avoid cache conflicts), so layout + // constants are hardcoded: + // mq(md) → @media (min-width: 50rem) ($content-width) + // $sp-10 → 4rem ($spacing-unit × 4) + // $search-results-width → 33.5rem ($content-width − $nav-width) + // $transition-duration → 400ms + // dark $search-background-color → #302d36 ($grey-dk-250) + &.search-active { + .search { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + } + + .search-input-wrap { + height: 4rem; + border-radius: 0; + + @media (min-width: 50rem) { + width: 33.5rem; + box-shadow: + 0 1px 2px rgba(0, 0, 0, 0.12), + 0 3px 10px rgba(0, 0, 0, 0.08); + } + } + + .search-input { + background-color: #302d36; + + @media (min-width: 50rem) { + padding-left: 2.3rem; + } + } + + .search-label { + @media (min-width: 50rem) { + padding-left: 0.6rem; + } + } + + .search-results { + display: block; + } + + .search-overlay { + width: 100%; + height: 100%; + opacity: 1; + transition: + opacity ease 400ms, + width 0s, + height 0s; + } + + @media (min-width: 50rem) { + .main { + position: fixed; + right: 0; + left: 0; + } + } + + .main-header { + padding-top: 4rem; + + @media (min-width: 50rem) { + padding-top: 0; + } + } + } + // --------------------------------------------------------------- + + div.highlighter-rouge div.highlight { + line-height: 1; + } + + // $link-color dark = $blue-000 = #2c84fa. + span { + color: #2c84fa; + } + + .site-footer { + color: #959396; + } + + h1, + h2, + h3, + h4, + h5, + h6, + #toctitle { + font-weight: 500; + } +}