Revamping stylesheets to (hopefully) reduce duplication

ejs/toolbox/colormap.ejs

@@ -39,11 +39,11 @@
               </div>
             </li>
             <li>
-              <button type="button" class="primary button icon-button md-squiggle"
+              <button type="button" class="primary button expanded icon-button md-squiggle"
                 id="interpolate-button" tabindex="0">Interpolate</button>
             </li>
             <li>
-              <button type="button" class="primary button icon-button md-grayscale"
+              <button type="button" class="primary button expanded icon-button md-grayscale"
                 id="grayscale-button" tabindex="0">Grayscale</button>
             </li>
           </ul>

js/mathml.js

@@ -1,11 +1,3 @@
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import { defaultKeymap, historyKeymap, history } from '@codemirror/commands';
-
-import { html } from '@codemirror/lang-html';
-import { classHighlighter } from '@lezer/highlight';
-import { syntaxHighlighting } from '@codemirror/language';
-
 import * as $ from 'jquery';
 
 import { Slider, OffCanvas, Drilldown } from 'fdn/js/foundation';
@@ -24,7 +16,20 @@ function initControls() {
   initDarkModeToggle();
 }
 
-function initCodemirror() {
+async function initCodemirror() {
+
+  const { EditorState } =
+    await import(/* webpackChunkName: "codemirror" */ '@codemirror/state');
+  const { EditorView, keymap } =
+    await import(/* webpackChunkName: "codemirror" */ '@codemirror/view');
+  const { defaultKeymap, historyKeymap, history } =
+    await import(/* webpackChunkName: "codemirror" */ '@codemirror/commands');
+  const { html } =
+    await import(/* webpackChunkName: "codemirror" */ '@codemirror/lang-html');
+  const { classHighlighter } =
+    await import(/* webpackChunkName: "codemirror" */ '@lezer/highlight');
+  const { syntaxHighlighting } =
+    await import(/* webpackChunkName: "codemirror" */ '@codemirror/language');
 
   const inputElement  = document.getElementById("editor");
   const outputElement = document.getElementById("output");
@@ -195,13 +200,19 @@ async function addRenderListener(cm, mjx) {
       cm.elements.render.appendChild(math.typesetRoot);
     }
 
-    let outputState = EditorState.create({
-      doc: allmath,
-      extensions: cm.htmlExtensions,
-    });
-
     // update the output window with the new content
-    cm.views.output.setState(outputState);
+    cm.views.output.dispatch({
+      changes: [
+        {
+          from: 0,
+          to: cm.views.output.state.doc.length,
+        },
+        {
+          from: 0,
+          insert: allmath,
+        },
+      ],
+    });
 
     // make sure the button goes back to its unfocused state,
     // indicating the render is complete
@@ -227,7 +238,7 @@ export default (function() {
 
     // run only when document is fully loaded
     initControls();
-    const cm = initCodemirror();
+    const cm = await initCodemirror();
     const mjx = await initMathJax();
     await addRenderListener(cm, mjx);
     addCopyListener(cm);

js/tutorial.js

@@ -3,8 +3,6 @@ import xml from 'highlight.js/lib/languages/xml';
 import latex from 'highlight.js/lib/languages/latex';
 import plaintext from 'highlight.js/lib/languages/plaintext';
 
-import 'highlight.js/styles/nord.css';
-
 hljs.registerLanguage('html', xml);
 hljs.registerLanguage('latex', latex);
 hljs.registerLanguage('plaintext', plaintext);

js/workspace/rhs.js

@@ -4,8 +4,6 @@ import hljs from 'highlight.js/lib/core';
 import xml from 'highlight.js/lib/languages/xml';
 import latex from 'highlight.js/lib/languages/latex';
 
-import 'highlight.js/styles/nord.css';
-
 hljs.registerLanguage('html', xml);
 hljs.registerLanguage('latex', latex);
 

package.json

@@ -56,6 +56,7 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.3",
     "tar-stream": "^3.1.6",
+    "wallace-cli": "^3.0.0",
     "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.4",

scss/colormap.scss

@@ -1,24 +1,18 @@
 @use "sass:map";
 
-:root {
-  --base-font-size: 1rem;
-}
+@import 'theme/global';
+@import 'fdn/scss/util/util';
+@import 'fdn/scss/xy-grid/xy-grid';
 
-@import 'theme/common';
+@import 'theme/modes';
+@import 'theme/fonts';
 @import 'theme/ux/tooltip';
 
-@include foundation-dropdown;
-@include foundation-float-classes;
-
 .grayscale {
   filter: #{grayscale(100%)};
 }
 
 #menu {
-  button {
-    @include button-expand($expand: true);
-  }
-
   li button {
     margin: 0 !important;
   }
@@ -202,7 +196,7 @@
       }
 
       button {
-        @extend .float-right;
+        float: right;
 
         margin: 0;
         padding: 0.5rem;
@@ -237,6 +231,21 @@
         }
       }
 
+      // from Foundation for Sites source
+      position: absolute;
+      visibility: hidden;
+      width: 300px;
+      padding: 1rem;
+
+      &.is-opening {
+        display: block;
+      }
+
+      &.is-open {
+        display: block;
+        visibility: visible;
+      }
+
       cursor: default;  // otherwise inherited from the handle
       padding-top: 0;   // pip on top edge adds "ghost" padding
       z-index: 20;      // set sufficiently high to appear "on top"

scss/main.scss

@@ -1,15 +1,13 @@
 @use "sass:map";
 @use "sass:color";
 
-:root {
-  --base-font-size: 1.1rem;
-}
+@import 'theme/global';
+@import 'fdn/scss/util/util';
 
-@import 'theme/common';
+@import 'theme/modes';
+@import 'theme/fonts';
 @import 'theme/ux/callout';
 
-@include foundation-sticky;
-
 $block-margin: 1rem;
 
 @include breakpoint(small only) {

scss/mathml.scss

@@ -1,10 +1,11 @@
 @use "sass:map";
 
-:root {
-  --base-font-size: 1rem;
-}
+@import 'theme/global';
+@import 'fdn/scss/util/util';
+@import 'fdn/scss/xy-grid/xy-grid';
 
-@import 'theme/common';
+@import 'theme/modes';
+@import 'theme/fonts';
 @import 'theme/code/codemirror';
 
 #app {

scss/theme/_fonts.scss

@@ -1,90 +1,73 @@
 @font-face {
     font-family: 'Open Sans';
-    src: url('../ttf/Open_Sans/static/OpenSans-Regular.ttf');
+    src: url('/ttf/Open_Sans/static/OpenSans-Regular.ttf');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../ttf/Open_Sans/static/OpenSans-Italic.ttf');
+    src: url('/ttf/Open_Sans/static/OpenSans-Italic.ttf');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../ttf/Open_Sans/static/OpenSans-Bold.ttf');
+    src: url('/ttf/Open_Sans/static/OpenSans-Bold.ttf');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../ttf/Open_Sans/static/OpenSans-BoldItalic.ttf');
+    src: url('/ttf/Open_Sans/static/OpenSans-BoldItalic.ttf');
     font-weight: 700;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Source Code Pro';
-    src: url('../ttf/Source_Code_Pro/static/SourceCodePro-Regular.ttf');
+    src: url('/ttf/Source_Code_Pro/static/SourceCodePro-Regular.ttf');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Source Code Pro';
-    src: url('../ttf/Source_Code_Pro/static/SourceCodePro-Italic.ttf');
+    src: url('/ttf/Source_Code_Pro/static/SourceCodePro-Italic.ttf');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Source Code Pro';
-    src: url('../ttf/Source_Code_Pro/static/SourceCodePro-Bold.ttf');
+    src: url('/ttf/Source_Code_Pro/static/SourceCodePro-Bold.ttf');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Source Code Pro';
-    src: url('../ttf/Source_Code_Pro/static/SourceCodePro-BoldItalic.ttf');
+    src: url('/ttf/Source_Code_Pro/static/SourceCodePro-BoldItalic.ttf');
     font-weight: 700;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Rubik';
-    src: url('../ttf/Rubik/static/Rubik-Regular.ttf');
+    src: url('/ttf/Rubik/static/Rubik-Regular.ttf');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Rubik';
-    src: url('../ttf/Rubik/static/Rubik-Bold.ttf');
+    src: url('/ttf/Rubik/static/Rubik-Bold.ttf');
     font-weight: 700;
     font-style: normal;
 }
 
-/* unused fonts; may be needed later
- *
- * @font-face {
- *     font-family: 'Rubik';
- *     src: url('../ttf/Rubik/static/Rubik-Italic.ttf');
- *     font-weight: 400;
- *     font-style: italic;
- * }
- *
- * @font-face {
- *     font-family: 'Rubik';
- *     src: url('../ttf/Rubik/static/Rubik-BoldItalic.ttf');
- *     font-weight: 700;
- *     font-style: italic;
- * }
- */
-
 @mixin font-display {
   font-family: #{Rubik, sans-serif};
   font-weight: bold;

scss/theme/_global.scss

@@ -26,8 +26,4 @@ $global-lineheight: 1.5;
 $body-font-family: #{'Open Sans', sans-serif};
 $font-family-monospace: #{'Source Code Pro', monospace};
 
-$tab-item-padding: 5px;
-$tab-item-font-size: 0.9rem;
-$tab-content-padding: 0;
-
 // vim: set ft=scss:

scss/theme/_icons.scss

@@ -2,7 +2,7 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url('../ttf/material-icons/MaterialIcons-Regular.ttf') format('truetype');
+  src: url('/ttf/material-icons/MaterialIcons-Regular.ttf') format('truetype');
 }
 
 .md {

scss/theme/_modes.scss

@@ -0,0 +1,9 @@
+@use "lightmode" as light;
+@use "darkmode" as dark;
+
+$themes: (
+  "light": light.$theme,
+  "dark": dark.$theme,
+);
+
+// vim: set ft=scss: