[refactor] improve custom and preset theme by removing duplicate code

src/css/theme.css

@@ -1,7 +1,7 @@
 .theme-preset-item,
 .theme-custom-item {
-  width: var(--theme-preset-preview-size);
-  height: var(--theme-preset-preview-size);
+  width: var(--theme-preview-size);
+  height: var(--theme-preview-size);
   border-radius: var(--theme-radius);
   padding: 0;
   margin: 0.5em;
@@ -13,8 +13,8 @@
 .theme-custom-button {
   padding: 0;
   border-radius: 0;
-  width: var(--theme-preset-preview-size);
-  height: var(--theme-preset-preview-size);
+  width: var(--theme-preview-size);
+  height: var(--theme-preview-size);
   line-height: 1.6;
   position: absolute;
   top: 0;
@@ -31,7 +31,7 @@
 }
 
 .theme-custom-control {
-  width: var(--theme-preset-preview-size);
+  width: var(--theme-preview-size);
   height: 0;
   position: absolute;
   bottom: 0;
@@ -53,7 +53,7 @@
 }
 
 .is-theme-custom-edit .theme-custom-button {
-  height: calc(var(--theme-preset-preview-size) - var(--theme-custom-edit-height));
+  height: calc(var(--theme-preview-size) - var(--theme-custom-edit-height));
   box-shadow: var(--theme-shadow-bottom-medium);
 }
 
@@ -63,8 +63,8 @@
 
 .theme-preset-preview,
 .theme-custom-preview {
-  width: var(--theme-preset-preview-size);
-  height: var(--theme-preset-preview-size);
+  width: var(--theme-preview-size);
+  height: var(--theme-preview-size);
   position: absolute;
   top: 0;
   left: 0;
@@ -268,10 +268,17 @@
 }
 
 .theme-shadow-box {
+  background-color: rgb(var(--theme-color-02));
   border-radius: var(--theme-radius);
   margin: 0;
+  padding: 0.5em;
   width: 5em;
   height: 5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
 }
 
 .theme-shadow-box-small {

src/css/variables.css

@@ -32,7 +32,7 @@
   --theme-shade-pos-08:                                 25, 25, 25;
   --theme-shade-pos-09:                                 25, 25, 25;
   --theme-shade-pos-10:                                 25, 25, 25;
-  --theme-preset-preview-size:                          6em;
+  --theme-preview-size:                                 6em;
   --theme-custom-edit-height:                           2.5em;
   --theme-shadow:                                       1;
   --theme-shadow-offset-y:                              0.02em;

src/index.html

@@ -1662,19 +1662,16 @@
                 <button class="control-theme-shadow-default button mb-0" tabindex="-1">Default shadow size</button>
               </div>
               <hr>
-              <div class="p-wrap">
-                <p>Small, Medium and Large shadows</p>
-              </div>
               <div class="form-group-wrap">
                 <div class="form-group form-group-block mb-0">
                   <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-small"></div>
+                    <div class="theme-shadow-box theme-shadow-box-small">Small shadow</div>
                   </div>
                   <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-medium"></div>
+                    <div class="theme-shadow-box theme-shadow-box-medium">Medium shadow</div>
                   </div>
                   <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-large"></div>
+                    <div class="theme-shadow-box theme-shadow-box-large">Large shadow</div>
                   </div>
                 </div>
               </div>

src/js/theme.js

@@ -33,6 +33,39 @@ var theme = (function() {
 
   var mod = {};
 
+  mod.apply = function(data) {
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.font",
+      newValue: data.font
+    });
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.color",
+      newValue: data.color
+    });
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.accent.current",
+      newValue: data.accent
+    });
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.radius",
+      newValue: data.radius
+    });
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.style",
+      newValue: data.style
+    });
+    helper.setObject({
+      object: state.get.current(),
+      path: "theme.shadow",
+      newValue: data.shadow
+    });
+  };
+
   mod.style = {
     light: function() {
       helper.setObject({
@@ -136,38 +169,6 @@ var theme = (function() {
   };
 
   mod.preset = {
-    set: function(themePreset) {
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.font",
-        newValue: themePreset.font
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.color",
-        newValue: themePreset.color
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.accent.current",
-        newValue: themePreset.accent
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.radius",
-        newValue: themePreset.radius
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.style",
-        newValue: themePreset.style
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.shadow",
-        newValue: themePreset.shadow
-      });
-    },
     get: function(index) {
       return JSON.parse(JSON.stringify(mod.preset.all[index]));
     },
@@ -1087,38 +1088,6 @@ var theme = (function() {
   };
 
   mod.custom = {
-    set: function(themeCustom) {
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.font",
-        newValue: themeCustom.font
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.color",
-        newValue: themeCustom.color
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.accent.current",
-        newValue: themeCustom.accent
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.radius",
-        newValue: themeCustom.radius
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.style",
-        newValue: themeCustom.style
-      });
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.shadow",
-        newValue: themeCustom.shadow
-      });
-    },
     get: function(index) {
       return JSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
     },
@@ -1405,7 +1374,7 @@ var theme = (function() {
       formInline.appendChild(themePresetItem);
 
       themePresetButton.addEventListener("click", function() {
-        mod.preset.set(mod.preset.get(index));
+        mod.apply(mod.preset.get(index));
         data.save();
         render.font.display.name();
         render.font.display.weight();
@@ -1492,7 +1461,7 @@ var theme = (function() {
           var copyStagedThemeCustom = JSON.parse(JSON.stringify(stagedThemeCustom));
 
           themeCustomButton.addEventListener("click", function() {
-            mod.custom.set(mod.custom.get(index));
+            mod.apply(mod.custom.get(index));
             data.save();
             render.font.display.name();
             render.font.display.weight();
@@ -1686,10 +1655,6 @@ var theme = (function() {
     }
   }
 
-  var preset = function(name) {
-    mod.preset.set(name);
-  };
-
   var custom = {
     add: function() {
       render.custom.add();
@@ -1725,7 +1690,6 @@ var theme = (function() {
     render: render,
     style: style,
     accent: accent,
-    preset: preset,
     custom: custom
   };