hyperbook 0.39.1 → 0.40.1

package/dist/assets/code.css

@@ -134,33 +134,9 @@ pre button.rehype-pretty-copy {
   font-weight: 700;
 }
 
-[data-chars-id="r"] {
-  color: #9f123980 !important;
-  background-color: rgb(249, 168, 212) !important;
-}
-
-[data-chars-id="y"] {
-  color: #854d0e80 !important;
-  background-color: rgb(253, 224, 71) !important;
-}
-
-[data-chars-id="l"] {
-  color: #6b21a880 !important;
-  background-color: rgb(233, 213, 255) !important;
-}
-
-
-figure[data-rehype-pretty-code-figure] pre,
-code[data-theme*=" "],
-code[data-theme*=" "] span {
-  color: var(--shiki-light);
-  background-color: var(--shiki-light-bg);
-}
-
 [data-rehype-pretty-code-title] {
   border-top-left-radius: .5rem;
   border-top-right-radius: .5rem;
-  border-color: var(--color-spacer);
   border-style: solid;
   border-width: 1px;
   border-bottom: none;
@@ -168,17 +144,6 @@ code[data-theme*=" "] span {
   font-size: .875rem;
   line-height: 1.25rem;
   font-weight: 600;
-  color: var(--color-text);
-}
-
-[data-rehype-pretty-code-title] {
-  color: var(--color-text);
-  background-color: var(--color-nav);
-  border-color: var(--color-spacer);
-}
-
-[data-highlighted-line] {
-  background: var(--color-nav) !important;
 }
 
 figure[data-rehype-pretty-code-figure]:has(>[data-rehype-pretty-code-title]) pre {
@@ -213,47 +178,3 @@ code[data-line-numbers-max-digits="3"]>[data-line]::before {
 code[data-line-numbers-max-digits="4"]>[data-line]::before {
   width: 2.25rem;
 }
-
-@media (prefers-color-scheme: dark) {
-
-  figure[data-rehype-pretty-code-figure] pre,
-  code[data-theme*=" "],
-  code[data-theme*=" "] span {
-    color: var(--shiki-dark);
-    background-color: var(--shiki-dark-bg);
-  }
-
-  [data-highlighted-chars] {
-    background-color: var(--color-spacer) !important;
-  }
-
-  [data-rehype-pretty-code-title] {
-    color: var(--color-text);
-    background-color: var(--color-spacer);
-    border-color: var(--color-spacer);
-  }
-
-  [data-highlighted-line] {
-    background: var(--color-spacer) !important;
-  }
-
-  [data-char-id] {
-    background-color: var(--color-spacer);
-  }
-
-  [data-chars-id="r"] {
-    background-color: #9f123980 !important;
-    color: rgb(249, 168, 212) !important;
-  }
-
-  [data-chars-id="y"] {
-    background-color: #854d0e80 !important;
-    color: rgb(253, 224, 71) !important;
-  }
-
-  [data-chars-id="l"] {
-    background-color: #6b21a880 !important;
-    color: rgb(233, 213, 255) !important;
-  }
-
-}

package/dist/assets/content.css

@@ -378,19 +378,16 @@ figure {
 }
 
 #search-toggle {
-  background-color: var(--color-text);
+  background-color: var(--color-brand-text);
   width: 24px;
   height: 24px;
   cursor: pointer;
   margin-right: 16px;
   mask-repeat: no-repeat;
+  cursor: pointer;
   mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==')
 }
 
-#search-toggle:hover {
-  background-color: var(--color-brand);
-}
-
 #search-drawer {
   overflow-y: auto;
   background: var(--color-nav);
@@ -448,7 +445,9 @@ figure {
   color: var(--color-text);
   font-size: 1rem;
   border-radius: 8px;
-  background-color: var(--color-nav-border);
+  border-color: var(--color-nav-border);
+  border-style: solid;
+  border-width: 1px;
   padding: 8px;
 }
 
@@ -474,7 +473,7 @@ figure {
   display: flex;
   flex-direction: column;
   padding: 8px;
-  height: calc(var(--app-height));
+  height: 100%;
   overflow-y: auto;
   gap: 8px;
 }
@@ -487,7 +486,7 @@ figure {
 .toc-drawer-content {
   display: flex;
   flex-direction: column;
-  height: calc(var(--app-height));
+  height: 100%;
 }
 
 .toc-drawer-content>nav {

package/dist/assets/dark-mode-toggle-stylesheets-loader.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @license © 2024 Google LLC. Licensed under the Apache License, Version 2.0.
+(() => {
+  const ELEMENT_ID = 'dark-mode-toggle-stylesheets';
+  const STORAGE_NAME = 'dark-mode-toggle';
+  const LIGHT = 'light';
+  const DARK = 'dark';
+
+  let stylesheets = document.getElementById(ELEMENT_ID).textContent;
+
+  let mode = null;
+  try {
+    mode = localStorage.getItem(STORAGE_NAME);
+  } catch (e) {}
+
+  const lightCSSMediaRegex = /\(\s*prefers-color-scheme\s*:\s*light\s*\)/gi;
+  const darkCSSMediaRegex = /\(\s*prefers-color-scheme\s*:\s*dark\s*\)/gi;
+
+  switch (mode) {
+    case LIGHT:
+      stylesheets = stylesheets
+        .replace(lightCSSMediaRegex, '$&, all')
+        .replace(darkCSSMediaRegex, '$& and not all');
+      break;
+
+    case DARK:
+      stylesheets = stylesheets
+        .replace(darkCSSMediaRegex, '$&, all')
+        .replace(lightCSSMediaRegex, '$& and not all');
+      break;
+  }
+
+  document.write(stylesheets);
+})();