2 files changed, 56 insertions, 1 deletions
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
new file mode 100644
index 00000000..ac67cf9c
--- /dev/null
+++ b/src/services/export_import/export_import.js
@@ -0,0 +1,55 @@
+export const newExporter = ({
+  filename = 'data',
+  getExportedObject
+}) => ({
+  exportData () {
+    const stringified = JSON.stringify(getExportedObject(), null, 2) // Pretty-print and indent with 2 spaces
+
+    // Create an invisible link with a data url and simulate a click
+    const e = document.createElement('a')
+    e.setAttribute('download', `${filename}.json`)
+    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    e.style.display = 'none'
+
+    document.body.appendChild(e)
+    e.click()
+    document.body.removeChild(e)
+  }
+})
+
+export const newImporter = ({
+  onImport,
+  onImportFailure,
+  validator = () => true
+}) => ({
+  importData () {
+    const filePicker = document.createElement('input')
+    filePicker.setAttribute('type', 'file')
+    filePicker.setAttribute('accept', '.json')
+
+    filePicker.addEventListener('change', event => {
+      if (event.target.files[0]) {
+        // eslint-disable-next-line no-undef
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          try {
+            const parsed = JSON.parse(target.result)
+            const validationResult = validator(parsed)
+            if (validationResult === true) {
+              onImport(parsed)
+            } else {
+              onImportFailure({ validationResult })
+            }
+          } catch (error) {
+            onImportFailure({ error })
+          }
+        }
+        reader.readAsText(event.target.files[0])
+      }
+    })
+
+    document.body.appendChild(filePicker)
+    filePicker.click()
+    document.body.removeChild(filePicker)
+  }
+})
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index a2bba67b..f75e6916 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -380,7 +380,7 @@ export const colors2to3 = (colors) => {
  */
 export const shadows2to3 = (shadows, opacity) => {
   return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color }) => color.startsWith('--')
+    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
     const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,