switch to noto and copy resources from node modules

Author: sprocketc

package-lock.json

@@ -9,14 +9,15 @@
   "scripts": {
     "upgrade": "npx npm-check-updates -u -x 'codemirror'",
     "postinstall": "electron-builder install-app-deps",
-    "tailwindcss-main:build": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --minify",
-    "tailwindcss-main:watch": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --watch=always",
-    "tailwindcss-frame:build": "npx @tailwindcss/cli -i ./src/renderer/frame/styles.css -o ./resources/public/css/frame.css --minify",
-    "tailwindcss-frame:watch": "npx @tailwindcss/cli -i ./src/renderer/frame/styles.css -o ./resources/public/css/frame.css --watch=always",
+    "tailwindcss:build": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --minify",
+    "tailwindcss:watch": "npx @tailwindcss/cli -i ./src/renderer/main.css -o ./resources/public/css/main.css --watch=always",
+    "fonts:sans": "npx shx cp node_modules/@fontsource/noto-sans/files/**/*.* resources/public/css/files",
+    "fonts:mono": "npx shx cp node_modules/@fontsource/noto-sans-mono/files/**/*.* resources/public/css/files",
+    "fonts": "npx npm-run-all --parallel fonts:sans fonts:mono",
     "shadow:build": "npx shadow-cljs release main preload renderer bootstrap",
     "shadow:watch": "npx shadow-cljs watch main preload renderer bootstrap browser-test karma-test portfolio",
-    "dev": "npx npm-run-all --parallel tailwindcss-main:watch tailwindcss-frame:watch shadow:watch",
-    "build": "npx npm-run-all --parallel tailwindcss-main:build tailwindcss-frame:build shadow:build",
+    "dev": "npx npm-run-all --parallel fonts tailwindcss:watch shadow:watch",
+    "build": "npx npm-run-all --parallel fonts tailwindcs:build shadow:build",
     "portfolio": "npx shadow-cljs watch portfolio & npm run tailwindcss:watch",
     "electron": "npx electron .",
     "dist": "npx electron-builder",
@@ -65,6 +66,8 @@
   },
   "main": "resources/main.js",
   "devDependencies": {
+    "@fontsource/noto-sans": "5.2.7",
+    "@fontsource/noto-sans-mono": "5.2.7",
     "@mdn/browser-compat-data": "6.0.16",
     "@radix-ui/react-context-menu": "2.2.7",
     "@radix-ui/react-dialog": "1.1.7",
@@ -117,6 +120,7 @@
     "react-resizable-panels": "3.0.2",
     "react-svg": "16.3.0",
     "shadow-cljs": "3.1.5",
+    "shx": "0.4.0",
     "snabbdom": "3.6.2",
     "source-map-support": "0.5.21",
     "stream-browserify": "3.0.0",

package.json

@@ -4,7 +4,6 @@
   outline: none;
   padding: 4px 12px;
   box-sizing: border-box;
-  line-height: 18px;
   font-size: 12px;
   box-shadow: none !important;
   color: var(--font-color) !important;

resources/public/fonts/LICENSE

@@ -35,8 +35,8 @@
        {:on-pointer-up pointer-handler
         :on-pointer-down pointer-handler
         :on-pointer-move pointer-handler
-        :fill "var(--font-color-muted)"
-        :font-family "monospace"
+        :fill "gray"
+        :font-family "var(--font-mono)"
         :font-size (/ 12 zoom)}) (or (:label el) (name (:tag el)))]
 
      [:rect

resources/public/fonts/mono/AdwaitaMono-Bold.ttf

@@ -30,16 +30,26 @@
 
       :reagent-render #()})))
 
-;; https://github.com/ryanseddon/react-frame-component#initialcontent
-(defonce initial-markup
-  [:html {:data-theme "light"}
-   [:head [:link {:rel "stylesheet" :href "./css/frame.css"}]]
-   [:body {:style {:width "100%"
-                   :height "100%"
-                   :overflow "hidden"
-                   :user-select "none"
-                   :touch-action "none"
-                   :margin 0}}]])
+(defn initial-markup
+  "https://github.com/ryanseddon/react-frame-component#initialcontent
+   The iframe is isolated so we don't have access to the css vars of the parent."
+  []
+  (let [body-styles (js/window.getComputedStyle js/document.body)]
+    [:html {:style (into {}
+                         (map (fn [k] [k (.getPropertyValue body-styles k)]))
+                         ["--font-sans"
+                          "--font-mono"
+                          "--color-accent"
+                          "--color-accent-light"
+                          "--color-accent-inverted"])}
+     [:head]
+     [:body {:style {:width "100%"
+                     :height "100%"
+                     :font-family "var(--font-sans)"
+                     :overflow "hidden"
+                     :user-select "none"
+                     :touch-action "none"
+                     :margin 0}}]]))
 
 (def resize-observer
   (js/ResizeObserver.
@@ -77,7 +87,7 @@
                                                   (js/KeyboardEvent. (.-type e)
                                                                      e)))]
           [:> Frame
-           {:initial-content (server/render-to-static-markup initial-markup)
+           {:initial-content (server/render-to-static-markup (initial-markup))
             :mount-target "body"
             :class "overflow-hidden flex-1 border-0"
             :on-key-down on-keyboard-event

resources/public/fonts/mono/AdwaitaMono-BoldItalic.ttf

@@ -4,7 +4,9 @@
 @import 'codemirror/addon/hint/show-hint.css';
 @import 'codemirror/theme/tomorrow-night-eighties.css';
 
-@import './fonts.css';
+@import "@fontsource/noto-sans";
+@import "@fontsource/noto-sans-mono";
+
 @import './utilities.css';
 @import './components.css';
 @import './animations.css';

resources/public/fonts/mono/AdwaitaMono-Italic.ttf

@@ -1,6 +1,6 @@
 @theme {
-  --font-sans: 'Adwaita Sans', sans;
-  --font-mono: 'Adwaita Mono', monospace;
+  --font-sans: 'Noto Sans', sans;
+  --font-mono: 'Noto Sans Mono', monospace;
 
   --text-2xs: 10px;
   --text-2xs--line-height: 14px;

resources/public/fonts/mono/AdwaitaMono-Regular.ttf

@@ -41,7 +41,7 @@
         active (and (= (:id clicked-element) id)
                     (= (:element clicked-element) element))]
     (into [:rect {:fill (if active "var(--color-accent)" "var(--color-accent-inverted)")
-                  :stroke (if active "var(--color-accent)" "var(--font-color-muted)")
+                  :stroke (if active "var(--color-accent)" "gray")
                   :stroke-width stroke-width
                   :x (- x (/ size 2))
                   :y (- y (/ size 2))