diff --git a/.pnp.cjs b/.pnp.cjs index 59fc35738..3ca46a1c6 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -50,7 +50,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\ ["@twuni/emojify", "npm:1.0.2"],\ ["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\ - ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\ + ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\ ["bootstrap-icons", "npm:1.10.5"],\ ["browser-fs-access", "npm:0.33.1"],\ ["browserlist", "npm:1.0.1"],\ @@ -2940,10 +2940,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ],\ "linkType": "SOFT"\ }],\ - ["npm:5.2.3", {\ - "packageLocation": "./.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\ + ["npm:5.3.0-alpha3", {\ + "packageLocation": "./.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\ "packageDependencies": [\ - ["bootstrap", "npm:5.2.3"]\ + ["bootstrap", "npm:5.3.0-alpha3"]\ ],\ "linkType": "SOFT"\ }],\ @@ -2960,10 +2960,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ],\ "linkType": "HARD"\ }],\ - ["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3", {\ - "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-c4952ffff0/0/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\ + ["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3", {\ + "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-cc4ceea380/0/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\ "packageDependencies": [\ - ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\ + ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\ ["@popperjs/core", "npm:2.11.7"],\ ["@types/popperjs__core", null]\ ],\ @@ -7728,7 +7728,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\ ["@twuni/emojify", "npm:1.0.2"],\ ["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\ - ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\ + ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\ ["bootstrap-icons", "npm:1.10.5"],\ ["browser-fs-access", "npm:0.33.1"],\ ["browserlist", "npm:1.0.1"],\ diff --git a/.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip b/.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip deleted file mode 100644 index 24c59290c..000000000 Binary files a/.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip and /dev/null differ diff --git a/.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip b/.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip new file mode 100644 index 000000000..bced3b185 Binary files /dev/null and b/.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip differ diff --git a/ietf/static/css/datepicker.scss b/ietf/static/css/datepicker.scss index 21d6aac24..d8473086d 100644 --- a/ietf/static/css/datepicker.scss +++ b/ietf/static/css/datepicker.scss @@ -1,2 +1,11 @@ -@import "vanillajs-datepicker/sass/index-bs5"; +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; + +// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:` +$dp-cell-focus-background-color: $dropdown-link-hover-bg !default; + @import "vanillajs-datepicker/sass/datepicker-bs5"; diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss index 1347ec012..9b9e5a7fa 100644 --- a/ietf/static/css/document_html.scss +++ b/ietf/static/css/document_html.scss @@ -11,6 +11,7 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss index 88c9cbda0..62d6868f3 100644 --- a/ietf/static/css/ietf.scss +++ b/ietf/static/css/ietf.scss @@ -15,9 +15,14 @@ $popover-max-width: 100%; $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +// Allow color modes + +$color-mode-type: media-query; + // Only import what we need: @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; $h1-font-size: $font-size-base * 2.2; $h2-font-size: $font-size-base * 1.8; @@ -334,7 +339,7 @@ th, } .ballot-icon table .my { - border: 2 * $table-border-width solid #000; + border: calc(2 * $table-border-width) solid #000; } // See https://getbootstrap.com/docs/5.1/customize/color/#all-colors diff --git a/ietf/static/css/list.scss b/ietf/static/css/list.scss index d52fc879a..af5ceab61 100644 --- a/ietf/static/css/list.scss +++ b/ietf/static/css/list.scss @@ -1,6 +1,7 @@ // Import bootstrap helpers @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; table .sort { cursor: pointer; diff --git a/ietf/static/css/select2.scss b/ietf/static/css/select2.scss index 44824a358..9a0a591ed 100644 --- a/ietf/static/css/select2.scss +++ b/ietf/static/css/select2.scss @@ -1,5 +1,11 @@ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; + +// FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75s +$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default; @import "select2/src/scss/core"; @import "select2-bootstrap-5-theme/src/include-all"; diff --git a/ietf/static/js/theme.js b/ietf/static/js/theme.js new file mode 100644 index 000000000..2baac13c9 --- /dev/null +++ b/ietf/static/js/theme.js @@ -0,0 +1,87 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2023 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + "use strict"; + + const storedTheme = localStorage.getItem("theme"); + + const getPreferredTheme = () => { + if (storedTheme) { + return storedTheme; + } + + return window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + }; + + const setTheme = function (theme) { + if ( + theme === "auto" && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + document.documentElement.setAttribute("data-bs-theme", "dark"); + } else { + document.documentElement.setAttribute("data-bs-theme", theme); + } + }; + + setTheme(getPreferredTheme()); + + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector("#bd-theme"); + + if (!themeSwitcher) { + return; + } + + const themeSwitcherText = document.querySelector("#bd-theme-text"); + const activeThemeIcon = document.querySelector(".theme-icon-active use"); + const btnToActive = document.querySelector( + `[data-bs-theme-value="${theme}"]` + ); + const svgOfActiveBtn = btnToActive + .querySelector("svg use") + .getAttribute("href"); + + document.querySelectorAll("[data-bs-theme-value]").forEach((element) => { + element.classList.remove("active"); + element.setAttribute("aria-pressed", "false"); + }); + + btnToActive.classList.add("active"); + btnToActive.setAttribute("aria-pressed", "true"); + activeThemeIcon.setAttribute("href", svgOfActiveBtn); + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`; + themeSwitcher.setAttribute("aria-label", themeSwitcherLabel); + + if (focus) { + themeSwitcher.focus(); + } + }; + + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", () => { + if (storedTheme !== "light" || storedTheme !== "dark") { + setTheme(getPreferredTheme()); + } + }); + + window.addEventListener("DOMContentLoaded", () => { + showActiveTheme(getPreferredTheme()); + + document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => { + toggle.addEventListener("click", () => { + const theme = toggle.getAttribute("data-bs-theme-value"); + localStorage.setItem("theme", theme); + setTheme(theme); + showActiveTheme(theme, true); + }); + }); + }); +})(); diff --git a/ietf/templates/base.html b/ietf/templates/base.html index dd8a49158..7e06e6cae 100644 --- a/ietf/templates/base.html +++ b/ietf/templates/base.html @@ -6,7 +6,7 @@ {% origin %} {% load django_bootstrap5 %} {% load django_vite %} - + {% analytical_head_top %} @@ -160,6 +160,7 @@ {% endblock %} {% block js %} {% endblock %} +