@doenet/doenetml-iframe 0.7.20 → 0.7.21

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml-iframe",
     "type": "module",
     "description": "A renderer for DoenetML contained in an iframe",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "repository": {

package/style.css

@@ -7,6 +7,10 @@
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.filter {
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .keyboard-button {
         display: inline-flex;
         height: 2.5rem;
@@ -147,7 +151,7 @@
 }
 
 .virtual-keyboard button {
-        background-color: #fff;
+        background-color: var(--kb-key-bg, #fff);
         display: inline-flex;
         height: 2.5rem;
         max-width: 4em;
@@ -272,6 +276,14 @@
         }
 }
 
+.virtual-keyboard-tab-list button {
+        /* Non-selected tabs: slate-200 underline so only the selected tab's
+           blue indicator stands out. Without an explicit color this falls
+           back to currentColor (black), drawing a harsh line under every tab. */
+        --tw-border-opacity: 1;
+        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+    }
+
 .virtual-keyboard-tab-list button[aria-selected="true"] {
         --tw-border-opacity: 1;
         border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
@@ -289,6 +301,9 @@ Tailwind base is purposely not included because we want all styles to be prefixe
         --tw-blur: blur(8px);
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.filter {
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 
 /*
  * Some styles from tailwind preflight need to be included here
@@ -317,7 +332,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     --tw-scale-y: 1;
     --tw-scroll-snap-strictness: proximity;
     --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
+    --tw-ring-offset-color: var(--kb-ring-offset, #fff);
     --tw-ring-color: rgb(59 130 246 / 0.5);
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;
@@ -325,9 +340,15 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     --tw-shadow-colored: 0 0 #0000;
     --tw-border-opacity: 1;
 
+    /* Theme tokens — light-mode defaults */
+    --kb-tray-bg: white;
+    --kb-tray-border-top: black;
+    --kb-ring-offset: #fff;
+    --kb-key-bg: #fff;
+
     --keyboard-tray-height: 280px;
 
-    border-top: 1px solid black;
+    border-top: 1px solid var(--kb-tray-border-top);
 
     position: fixed;
 
@@ -355,7 +376,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     min-height: var(--keyboard-tray-height);
     max-height: calc(100vh - 1.5rem);
     z-index: 10000;
-    background-color: white;
+    background-color: var(--kb-tray-bg);
 }
 
 #virtual-keyboard-tray .close-keyboard-button {
@@ -444,6 +465,111 @@ Tailwind base is purposely not included because we want all styles to be prefixe
         margin-right: auto;
 }
 
+/* Dark-mode overrides — applied when data-theme="dark" is written to #virtual-keyboard-tray */
+#virtual-keyboard-tray[data-theme="dark"] {
+    --kb-tray-bg: #1e1e1e;
+    --kb-tray-border-top: #555;
+    --kb-ring-offset: #1e1e1e;
+    --kb-key-bg: #2d2d2d;
+
+    color: white;
+}
+/*
+     * Browsers have a UA stylesheet rule `button { color: ButtonText }` which
+     * is an explicit UA-level declaration and beats an *inherited* `color:
+     * white` from a parent. We must set color explicitly on button elements
+     * so the author rule overrides UA. This also makes MathJax SVG paths
+     * (which use fill:currentColor) render white rather than the UA button
+     * color.
+     */
+#virtual-keyboard-tray[data-theme="dark"] button {
+        color: white;
+    }
+/* Close (×) button */
+#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:hover {
+        background-color: #3a3a3a;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:active {
+        background-color: #4a4a4a;
+    }
+/* Open-keyboard tab that peeks above the tray */
+#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button {
+        background-color: #2d2d2d;
+        border-color: #555;
+        border-bottom-color: transparent;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:hover {
+        background-color: #3a3a3a;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:active {
+        background-color: #4a4a4a;
+    }
+/*
+     * Key faces — target via .virtual-keyboard button because @apply in
+     * keyboard.css inlines styles without adding the class to the HTML element.
+     * These override the light-mode .virtual-keyboard button:hover / :active
+     * rules (light grey slate-100/slate-300) that become invisible with white text.
+     */
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button {
+        background-color: #2d2d2d;
+        border-color: #4a4a4a;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:hover {
+        background-color: #3a3a3a;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:active {
+        background-color: #4a4a4a;
+    }
+/*
+     * Special keys (backspace, shift, space, arrows, enter).
+     * These use @apply special-button in keyboard.css which compiles to
+     * .virtual-keyboard .key-space, .virtual-keyboard .key-backspace etc.
+     * — the HTML elements have .key-space/.key-backspace class, not .special-button.
+     * Specificity must beat .virtual-keyboard .key-* at (0, 2, 0).
+     */
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter {
+        background-color: #383838;
+        border-color: #383838;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:hover,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:hover,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:hover,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:hover,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:hover,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:hover {
+        background-color: #454545;
+        border-color: #454545;
+    }
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:active,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:active,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:active,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:active,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:active,
+    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:active {
+        background-color: #555555;
+        border-color: #555555;
+        color: white;
+    }
+/*
+     * Selected tab indicator.
+     * blue-400 (#60a5fa) on #1e1e1e ≈ 6.9:1 — WCAG AA ✓
+     * blue-300 (#93c5fd) on #1e1e1e ≈ 8.6:1 — WCAG AA ✓
+     */
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button[aria-selected="true"] {
+        border-color: #60a5fa;
+        color: #93c5fd;
+    }
+/* Non-selected tab borders: use a dim separator instead of transparent
+       so the tab strip has a subtle anchor line in dark mode. */
+#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button:not([aria-selected="true"]) {
+        border-color: #444;
+    }
+
 #virtual-keyboard-tray.open {
         --tw-translate-y: 0px;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));