diff --git a/ejs/toolbox/colormap.ejs b/ejs/toolbox/colormap.ejs index 20e081b..8b1f481 100644 --- a/ejs/toolbox/colormap.ejs +++ b/ejs/toolbox/colormap.ejs @@ -39,11 +39,11 @@
  • -
  • -
    • diff --git a/js/mathml.js b/js/mathml.js index 8ae66b6..3c694ed 100644 --- a/js/mathml.js +++ b/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); diff --git a/js/tutorial.js b/js/tutorial.js index 899ef77..798f3e0 100644 --- a/js/tutorial.js +++ b/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); diff --git a/js/workspace/rhs.js b/js/workspace/rhs.js index 9f77c4f..c646adc 100644 --- a/js/workspace/rhs.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index c5301cc..59cebc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,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", @@ -4156,9 +4157,9 @@ } }, "node_modules/postcss": { - "version": "8.4.24", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", - "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "dev": true, "funding": [ { @@ -5361,6 +5362,18 @@ "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", "dev": true }, + "node_modules/wallace-cli": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/wallace-cli/-/wallace-cli-3.0.0.tgz", + "integrity": "sha512-A6yDex76bgqj8X+v1b7oqmbKPSiNiBaFcl+lJh0I04O16DkHrTDWRIhTJ9zTncb2qT8CV4MhzRX61+7lbtbeEA==", + "dev": true, + "bin": { + "wallace": "dist/cli.cjs" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 71a958b..2bb61cf 100644 --- a/package.json +++ b/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", diff --git a/scss/colormap.scss b/scss/colormap.scss index 87f765f..0ab831f 100644 --- a/scss/colormap.scss +++ b/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" diff --git a/scss/main.scss b/scss/main.scss index c3dde9e..a9089af 100644 --- a/scss/main.scss +++ b/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) { diff --git a/scss/mathml.scss b/scss/mathml.scss index dec9150..3d50283 100644 --- a/scss/mathml.scss +++ b/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 { diff --git a/scss/theme/_fonts.scss b/scss/theme/_fonts.scss index ee5e314..80691e9 100644 --- a/scss/theme/_fonts.scss +++ b/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; diff --git a/scss/theme/_global.scss b/scss/theme/_global.scss index edfa926..759d216 100644 --- a/scss/theme/_global.scss +++ b/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: diff --git a/scss/theme/_icons.scss b/scss/theme/_icons.scss index bcdac11..0b5ea70 100644 --- a/scss/theme/_icons.scss +++ b/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 { diff --git a/scss/theme/_modes.scss b/scss/theme/_modes.scss new file mode 100644 index 0000000..eef2933 --- /dev/null +++ b/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: diff --git a/scss/theme/_common.scss b/scss/theme/common.scss similarity index 89% rename from scss/theme/_common.scss rename to scss/theme/common.scss index 5e02435..5ac9adc 100644 --- a/scss/theme/_common.scss +++ b/scss/theme/common.scss @@ -1,16 +1,12 @@ @use "sass:map"; @use "sass:color"; -@use "nordtheme" as nord; -@use "lightmode" as light; -@use "darkmode" as dark; - @import 'global'; +@import 'modes'; -$themes: ( - "light": light.$theme, - "dark": dark.$theme, -); +:root { + --base-font-size: 1.1rem; +} $titlebar-inner-height: 4rem; $titlebar-padding: 0.5rem; @@ -24,15 +20,12 @@ $titlebar-padding: 0.5rem; @include foundation-title-bar; @include foundation-off-canvas; @include foundation-drilldown-menu; +@include foundation-table; @import 'ux/button'; @import 'ux/switch'; @import 'ux/slider'; -body { - @include font-sans-serif; -} - // see https://w3c.github.io/mathml-core/#the-top-level-math-element // these values are standard for a user-agent stylesheet, and we want to // make sure we don't accidentally override them @@ -62,10 +55,15 @@ math { } } -@each $name, $theme in $themes { - [data-theme="#{$name}"] body { - color: map.get($theme, "body-font-color"); - background-color: map.get($theme, "body-background"); + +body { + @include font-sans-serif; + + @each $name, $theme in $themes { + [data-theme="#{$name}"] & { + color: map.get($theme, "body-font-color"); + background-color: map.get($theme, "body-background"); + } } } @@ -142,12 +140,12 @@ math { #menu-wrapper { @include breakpoint(medium up) { @include in-canvas; - @include xy-cell($size: 2); - - margin: 0; + @include xy-cell($size: 2, $gutter-type: margin, $gutters: 0); } @include breakpoint(small only) { + @include off-canvas-basics; + @each $name, $theme in $themes { [data-theme="#{$name}"] & { @include off-canvas-base($fixed: false, @@ -155,8 +153,6 @@ math { } } - @include off-canvas-basics; - @include off-canvas-base; @include off-canvas-position($position: left); } @@ -236,13 +232,19 @@ math { } } +@each $name, $theme in $themes { + [data-theme="#{$name}"] tbody { + border-color: color.mix(map.get($theme, "body-background"), + map.get($theme, "body-font-color"), $weight: 80%); + } +} + #app { @include breakpoint(medium up) { - @include xy-cell($size: 10, $vertical: false); + @include xy-cell($size: 10, $gutters: 0, $gutter-type: margin, $vertical: false); @include xy-cell-base($size: grow); @include xy-grid($direction: horizontal, $wrap: true); - margin: 0; height: 100vh; } @@ -253,14 +255,11 @@ math { padding: 0 0.5rem; height: calc(100vh - $titlebar-inner-height); } - - font-size: var(--base-font-size); } #body { @include breakpoint(medium up) { - @include xy-cell($size: 10, $vertical: false); - @include xy-cell-base($size: auto); + @include xy-cell($size: auto, $vertical: false); margin: 1rem; } @@ -268,7 +267,9 @@ math { @include off-canvas-content; padding: 1rem; } +} +#app, #body { font-size: var(--base-font-size); } @@ -306,12 +307,6 @@ h6, .h6 { font-size: 100%; } -@each $name, $theme in $themes { - [data-theme="#{$name}"] .has-tip { - border-bottom: dotted 1px map.get($theme, "muted-label-color"); - } -} - @each $name, $theme in $themes { @each $othername, $othertheme in $themes { [data-theme="#{$name}"] .show-for-#{$othername}-only { diff --git a/scss/theme/ux/_button.scss b/scss/theme/ux/_button.scss index 85112e2..e479472 100644 --- a/scss/theme/ux/_button.scss +++ b/scss/theme/ux/_button.scss @@ -1,3 +1,6 @@ +@use "sass:map"; +@use "sass:color"; + button, a.button { @include font-display-nobold; @@ -10,15 +13,33 @@ button, a.button { @each $name, $theme in $themes { [data-theme="#{$name}"] &.primary { - @include button-fill-style($fill: solid, - $background: map.get($theme, "button-background-primary"), - $background-hover: auto, $color: map.get($theme, "button-color")); + &, + &.disabled, &[disabled], + &.disabled:hover, &[disabled]:hover, + &.disabled:focus, &[disabled]:focus { + background: map.get($theme, "button-background-primary"); + color: map.get($theme, "button-color"); + } + + &:hover, &:focus { + background: color.mix(map.get($theme, "button-background-primary"), + map.get($theme, "body-background"), $weight: 90%); + } } [data-theme="#{$name}"] &.secondary { - @include button-fill-style($fill: solid, - $background: map.get($theme, "button-background-secondary"), - $background-hover: auto, $color: map.get($theme, "button-color")); + &, + &.disabled, &[disabled], + &.disabled:hover, &[disabled]:hover, + &.disabled:focus, &[disabled]:focus { + background: map.get($theme, "button-background-secondary"); + color: map.get($theme, "button-color"); + } + + &:hover, &:focus { + background: color.mix(map.get($theme, "button-background-secondary"), + map.get($theme, "body-background"), $weight: 90%); + } } } @@ -39,8 +60,12 @@ button, a.button { } } -button.icon-button::before, a.button.icon-button::before { +button.icon-button::before { vertical-align: bottom; } +a.icon-button::before { + vertical-align: middle; +} + // vim: set ft=scss: diff --git a/scss/theme/ux/_callout.scss b/scss/theme/ux/_callout.scss index b07d16b..310696e 100644 --- a/scss/theme/ux/_callout.scss +++ b/scss/theme/ux/_callout.scss @@ -15,9 +15,17 @@ $admonitions: ( ); .callout { - @include callout-base; - padding: 1rem; + border: 1px solid; + + // copied from original Foundation for Sites source + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } // paragraphs inside callouts p { @@ -39,7 +47,9 @@ $admonitions: ( [data-theme="#{$name}"] & { color: map.get($theme, "body-font-color"); background-color: color.mix(map.get($theme, "palette-primary"), - map.get($theme, "body-background"), 20%); + map.get($theme, "body-background"), $weight: 20%); + border-color: color.mix(map.get($theme, "palette-primary"), + map.get($theme, "body-background"), $weight: 25%); } } @@ -47,30 +57,40 @@ $admonitions: ( @each $admonition in $admonitions { [data-theme="#{$name}"] &.#{$admonition} { background-color: map.get($theme, "palette-#{$admonition}"); + border-color: color.mix(map.get($theme, "palette-#{$admonition}"), + map.get($theme, "body-background"), $weight: 25%); // inline code nested inside admonitions get slightly different styling p code, p code.hljs { background-color: color.mix(map.get($theme, "palette-#{$admonition}"), map.get($theme, "body-background"), $weight: 10%); - border: 1px solid color.mix(map.get($theme, "palette-#{$admonition}"), + border-color: color.mix(map.get($theme, "palette-#{$admonition}"), map.get($theme, "body-background"), $weight: 60%); } a { color: color.mix(map.get($theme, "palette-#{$admonition}"), map.get($theme, "body-font-color"), $weight: 20%); - text-decoration: underline dotted; - } - a:hover, a:active { - color: color.mix(map.get($theme, "palette-#{$admonition}"), - map.get($theme, "body-font-color"), $weight: 10%); - text-decoration: underline solid; + &:hover, &:active { + color: color.mix(map.get($theme, "palette-#{$admonition}"), + map.get($theme, "body-font-color"), $weight: 10%); + } } } } } + @each $admonition in $admonitions { + &.#{$admonition} a { + text-decoration: underline dotted; + + &:hover, &:active { + text-decoration: underline solid; + } + } + } + &.todo .title::after { content: "TODO"; } diff --git a/scss/theme/ux/_tabs.scss b/scss/theme/ux/_tabs.scss new file mode 100644 index 0000000..b9c9b8f --- /dev/null +++ b/scss/theme/ux/_tabs.scss @@ -0,0 +1,86 @@ +@import 'fdn/scss/util/util'; + +$global-flexbox: true; +$tab-margin: 0; +$tab-background: #00000000; +$tab-item-padding: 5px; +$tab-item-font-size: 0.9rem; +$tab-content-padding: 0; + +// modified from original Foundation for Sites source +@mixin tabs-container ( + $margin: $tab-margin, +) { + @include clearfix; + + margin: $margin; + list-style-type: none; + + @each $name, $theme in $themes { + [data-theme="#{$name}"] & { + background: map.get($theme, "tab-background"), + } + } +} + +// modified from original Foundation for Sites source +@mixin tabs-title ( + $padding: $tab-item-padding, + $font-size: $tab-item-font-size, +) { + float: left; + + > a { + display: block; + padding: $padding; + font-size: $font-size; + line-height: 1; + color: inherit; + } + + @each $name, $theme in $themes { + [data-theme="#{$name}"] & { + color: map.get($theme, "tab-color"); + + &:hover { + background: map.get($theme, "tab-background-hover"); + } + + &:focus, + &:focus-within, + &.is-active, + &[aria-selected="true"] { + background: map.get($theme, "tab-background-active"); + color: map.get($theme, "tab-color-active"); + } + } + } +} + +// modified from original Foundation for Sites source +@mixin tabs-content { + border: 1px solid; + border-top: 0; + + @each $name, $theme in $themes { + [data-theme="#{$name}"] & { + color: map.get($theme, "body-font-color"); + background: map.get($theme, "body-background-color"); + border-color: map.get($theme, "tab-border-color"); + } + } +} + +// copied from Foundation for Sites source +@mixin tabs-panel ( + $padding: $tab-content-padding +) { + display: none; + padding: $padding; + + &.is-active { + display: block; + } +} + +// vim ft=scss: diff --git a/scss/theme/ux/_tooltip.scss b/scss/theme/ux/_tooltip.scss index 6ee49b7..b5d6e3d 100644 --- a/scss/theme/ux/_tooltip.scss +++ b/scss/theme/ux/_tooltip.scss @@ -1,3 +1,18 @@ +$tooltip-padding: 0.75rem; +$tooltip-max-width: 10rem; +$tooltip-font-size: 80%; +$tooltip-pip-width: 0.75rem; +$tooltip-pip-height: $tooltip-pip-width * 0.866; +$tooltip-radius: 0; + +@import 'fdn/scss/util/mixins'; + +@each $name, $theme in $themes { + [data-theme="#{$name}"] .has-tip { + border-bottom: dotted 1px map.get($theme, "muted-label-color"); + } +} + .tooltip { // copied from Foundation for Sites source diff --git a/scss/toolbox.scss b/scss/toolbox.scss index 43799cf..5ad9a7b 100644 --- a/scss/toolbox.scss +++ b/scss/toolbox.scss @@ -1,16 +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; -@include foundation-flex-classes; - $block-margin: 1rem; @include breakpoint(small only) { diff --git a/scss/tutorial.scss b/scss/tutorial.scss index 164e62d..65c9b72 100644 --- a/scss/tutorial.scss +++ b/scss/tutorial.scss @@ -1,18 +1,15 @@ @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/code/common'; @import 'theme/code/hljs'; @import 'theme/ux/callout'; -@include foundation-table; -@include foundation-sticky; - $block-margin: 1rem; @include breakpoint(small only) { diff --git a/scss/workspace.scss b/scss/workspace.scss index 8dbcf5f..08aaf4d 100644 --- a/scss/workspace.scss +++ b/scss/workspace.scss @@ -1,14 +1,19 @@ @use "sass:map"; @use "sass:color"; -:root { - --base-font-size: 1rem; -} +@import 'theme/global'; +@import 'fdn/scss/util/util'; +@import 'fdn/scss/xy-grid/xy-grid'; + +@import 'theme/modes'; +@import 'theme/fonts'; -@import 'theme/common'; @import 'theme/code/common'; @import 'theme/code/codemirror'; @import 'theme/code/hljs'; + +@import 'theme/ux/button'; +@import 'theme/ux/tabs'; @import 'theme/ux/tooltip'; #file-controls { @@ -179,33 +184,17 @@ } #left-panel-tabs, #right-panel-tabs { - @each $name, $theme in $themes { - [data-theme="#{$name}"] & { - @include tabs-container( - $background: map.get($theme, "tab-background"), - $border-color: map.get($theme, "tab-border-color"), - ); - - border-width: 0px !important; - } - - [data-theme="#{$name}"] & li { - @include tabs-title( - $color: map.get($theme, "tab-color"), - $color-active: map.get($theme, "tab-color-active"), - $background-hover: map.get($theme, "tab-background-hover"), - $background-active: map.get($theme, "tab-background-active"), - ); - } - } + @include tabs-container; flex: 0 1 auto; z-index: 1; li { + @include tabs-title; + @include font-display-nobold; + display: flex; flex-direction: row; - @include font-display-nobold; padding: 0 0.5rem 0 0.5rem; // some spacing between adjacent tabs @@ -232,43 +221,11 @@ @include font-sans-serif; font-variant: normal; } - - // color fix: assign background color to entire tab - @each $name, $theme in $themes { - [data-theme="#{$name}"] &.is-active { - background-color: map.get($theme, "tab-background-active") !important; - } - - [data-theme="#{$name}"] &:focus-within { - background-color: map.get($theme, "tab-background-active") !important; - } - - [data-theme="#{$name}"] &:not(.is-active):hover { - background-color: map.get($theme, "tab-background-hover") !important; - } - } - - > a { - &:focus, &[aria-selected="true"] { - background-color: inherit !important; - } - } } } #left-panel-tabs-content, #right-panel-tabs-content { - @each $name, $theme in $themes { - [data-theme="#{$name}"] & { - @include tabs-content( - $background: map.get($theme, "body-background"), - $color: map.get($theme, "body-font-color"), - $border-color: map.get($theme, "tab-border-color"), - ); - - // prevent the fade-in, fade-out effect - transition: none !important; - } - } + @include tabs-content; flex: 1 1 auto; overflow: hidden; diff --git a/webpack.config.js b/webpack.config.js index 6d4c750..8d67a8d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,6 +13,7 @@ const apps = [ template: './ejs/main.ejs', script: './js/simple.js', stylesheets: [ + './scss/theme/common.scss', './scss/main.scss', ], otherImports: [ @@ -43,6 +44,7 @@ const apps = [ template: './ejs/toolbox/index.ejs', script: './js/simple.js', stylesheets: [ + './scss/theme/common.scss', './scss/toolbox.scss', ], otherImports: [ @@ -63,6 +65,7 @@ const apps = [ title: 'LaTeX to MathML tool', template: './ejs/toolbox/mathml.ejs', stylesheets: [ + './scss/theme/common.scss', './scss/mathml.scss', ], partials: [ @@ -80,6 +83,7 @@ const apps = [ template: './ejs/toolbox/colormap.ejs', script: './js/colormap/main.js', stylesheets: [ + './scss/theme/common.scss', './scss/colormap.scss', ], otherImports: [ @@ -100,6 +104,7 @@ const apps = [ template: './ejs/toolbox/workspace.ejs', script: './js/workspace/main.js', stylesheets: [ + './scss/theme/common.scss', './scss/workspace.scss', ], partials: [ @@ -117,6 +122,7 @@ const apps = [ template: './ejs/tutorial/page.ejs', script: './js/tutorial.js', stylesheets: [ + './scss/theme/common.scss', './scss/tutorial.scss', ], pages: [ @@ -371,7 +377,7 @@ module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: (pathData) => { - return `assets/app-${pathData.chunk.name.split('/')[0]}.bundle.js`; + return `assets/${pathData.chunk.name.split('/')[0]}.bundle.js`; }, chunkFilename: (pathData) => { const runtime = pathData.chunk.runtime;