[feature] add controls for header button style

css/base.css

@@ -26,9 +26,9 @@
   --button-text-hover-focus: var(--style-neutral-text);
   --button-text-active: var(--style-neutral-text);
   --button-text-disabled: var(--gray-04);
-  --button-link-text: var(--gray-10);
+  --button-link-text: var(--gray-12);
-  --button-link-text-hover-focus: var(--gray-14);
+  --button-link-text-hover-focus: var(--style-neutral-text);
-  --button-link-text-active: var(--gray-18);
+  --button-link-text-active: var(--style-neutral-text);
   --button-link-text-disabled: var(--gray-04);
   --form-input-text: var(--gray-16);
   --form-input-border: 2;

css/form.css

@@ -640,6 +640,52 @@ input[type="range"][disabled]~.input-helper {
   cursor: default;
 }
 
+.input-button-link input[type="checkbox"]+label,
+.input-button-link input[type="radio"]+label,
+.input-button-link input[type="color"]+label {
+  background-color: transparent;
+  border: 0;
+  color: rgb(var(--button-link-text));
+}
+
+.input-button-link input[type="checkbox"]:hover+label,
+.input-button-link input[type="checkbox"]:focus+label,
+.input-button-link input[type="checkbox"]:checked+label,
+.input-button-link input[type="radio"]:hover+label,
+.input-button-link input[type="radio"]:focus+label,
+.input-button-link input[type="radio"]:checked+label,
+.input-button-link input[type="color"]:hover+label,
+.input-button-link input[type="color"]:focus+label,
+.input-button-link input[type="color"]:checked+label {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-hover-focus));
+}
+
+.input-button-link input[type="checkbox"]:active+label,
+.input-button-link input[type="radio"]:active+label,
+.input-button-link input[type="color"]:active+label {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-active));
+}
+
+.input-button-link input[disabled][type="checkbox"]+label,
+.input-button-link input[disabled][type="radio"]+label,
+.input-button-link input[disabled][type="color"]+label {
+  background-color: transparent;
+  color: transparent;
+  pointer-events: none;
+}
+
+.input-button-link input[disabled][type="checkbox"]:hover+label,
+.input-button-link input[disabled][type="checkbox"]:focus+label,
+.input-button-link input[disabled][type="radio"]:hover+label,
+.input-button-link input[disabled][type="radio"]:focus+label,
+.input-button-link input[disabled][type="color"]:hover+label,
+.input-button-link input[disabled][type="color"]:focus+label {
+  background-color: transparent;
+  color: transparent;
+}
+
 .input-color-dot input[type="color"] {
   margin: 0;
   position: absolute;

index.html

@@ -625,6 +625,16 @@
               <h1 class="menu-item-header-text">Buttons</h1>
             </div>
             <div class="menu-item-form">
+              <label class="control-header-button-style-label">Button style</label>
+              <div class="input-wrap">
+                <input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="1">
+                <label for="control-header-button-style-box">Box</label>
+              </div>
+              <div class="input-wrap">
+                <input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="1">
+                <label for="control-header-button-style-clear">Clear</label>
+              </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
                 <label for="control-header-button-edit-add-show">Show Edit/Add</label>

js/control.js

@@ -1412,6 +1412,20 @@ var control = (function() {
       header.render.search.size();
       update();
     }
+  }, {
+    element: helper.e(".control-header-button-style-box"),
+    path: "header.button.style",
+    type: "radio",
+    func: function() {
+      header.render.button.style();
+    }
+  }, {
+    element: helper.e(".control-header-button-style-clear"),
+    path: "header.button.style",
+    type: "radio",
+    func: function() {
+      header.render.button.style();
+    }
   }, {
     element: helper.e(".control-header-button-edit-add-show"),
     path: "header.button.editAdd.show",

js/header.js

@@ -63,6 +63,9 @@ var header = (function() {
     button: {
       size: function() {
         _renderButtonSize();
+      },
+      style: function() {
+        _renderButtonStyle();
       }
     }
   };
@@ -141,6 +144,24 @@ var header = (function() {
     html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
   };
 
+  var _renderButtonStyle = function() {
+    var action = {
+      box: function() {
+        helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+        helper.removeClass(helper.e(".control-link-add"), "button-link");
+        helper.removeClass(helper.e(".control-menu"), "button-link");
+      },
+      clear: function() {
+        helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+        helper.addClass(helper.e(".control-link-add"), "button-link");
+        helper.addClass(helper.e(".control-menu"), "button-link");
+      }
+    };
+    action[state.get().header.button.style]();
+  };
+
   var init = function() {
     _bind();
     render.area.width();
@@ -154,6 +175,7 @@ var header = (function() {
     render.search.width();
     render.search.size();
     render.button.size();
+    render.button.style();
   };
 
   // exposed methods

js/state.js

@@ -105,6 +105,7 @@ var state = (function() {
         accent: {
           show: true,
         },
+        style: "box",
         size: 1
       },
       shade: {

js/update.js

@@ -465,6 +465,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_3100 = function(data) {
+    data.version = "3.10.0";
+    data.state.header.button.style = "box";
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -587,6 +593,10 @@ var update = (function() {
         console.log("\t= running update 3.9.0");
         data = _update_390(data);
       };
+      if (version.compare(data.version, "3.10.0") == -1) {
+        console.log("\t= running update 3.10.0");
+        data = _update_3100(data);
+      };
     };
     // if no update is needed
     // version bump

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.9.2";
+  var current = "3.10.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");