[feature] add theme font light, regular and bold controls

Author: zombieFox

src/index.html

@@ -1375,6 +1375,17 @@ <h1 class="menu-item-header-text">Fonts</h1>
 <divclass="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
 </div>
 </div>
+<divclass="form-inline">
+<divclass="button-wrap">
+<buttonclass="control-theme-font-display-light button mb-0" tabindex="-1">Light</button>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-font-display-regular button mb-0" tabindex="-1">Regular</button>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-font-display-bold button mb-0" tabindex="-1">Bold</button>
+</div>
+</div>
 <pclass="control-theme-font-display-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
 <hr>
 <divclass="input-wrap">
@@ -1409,6 +1420,17 @@ <h1 class="menu-item-header-text">Fonts</h1>
 <divclass="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
 </div>
 </div>
+<divclass="form-inline">
+<divclass="button-wrap">
+<buttonclass="control-theme-font-ui-light button mb-0" tabindex="-1">Light</button>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-font-ui-regular button mb-0" tabindex="-1">Regular</button>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-font-ui-bold button mb-0" tabindex="-1">Bold</button>
+</div>
+</div>
 <pclass="control-theme-font-ui-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
 <hr>
 <divclass="input-wrap">

src/js/control.js

@@ -2586,6 +2586,30 @@ var control = (function(){
 theme.render.font.display.weight();
 render.range.count(this);
 }
+},{
+element: helper.e(".control-theme-font-display-light"),
+type: "button",
+func: function(){
+theme.mod.font.display.light();
+theme.render.font.display.weight();
+render.update();
+}
+},{
+element: helper.e(".control-theme-font-display-regular"),
+type: "button",
+func: function(){
+theme.mod.font.display.regular();
+theme.render.font.display.weight();
+render.update();
+}
+},{
+element: helper.e(".control-theme-font-display-bold"),
+type: "button",
+func: function(){
+theme.mod.font.display.bold();
+theme.render.font.display.weight();
+render.update();
+}
 },{
 element: helper.e(".control-theme-font-display-weight-style-default"),
 type: "button",
@@ -2644,6 +2668,30 @@ var control = (function(){
 theme.render.font.ui.weight();
 render.range.count(this);
 }
+},{
+element: helper.e(".control-theme-font-ui-light"),
+type: "button",
+func: function(){
+theme.mod.font.ui.light();
+theme.render.font.ui.weight();
+render.update();
+}
+},{
+element: helper.e(".control-theme-font-ui-regular"),
+type: "button",
+func: function(){
+theme.mod.font.ui.regular();
+theme.render.font.ui.weight();
+render.update();
+}
+},{
+element: helper.e(".control-theme-font-ui-bold"),
+type: "button",
+func: function(){
+theme.mod.font.ui.bold();
+theme.render.font.ui.weight();
+render.update();
+}
 },{
 element: helper.e(".control-theme-font-ui-weight-style-default"),
 type: "button",

src/js/theme.js

@@ -1106,6 +1106,55 @@ var theme = (function(){
 }
 };
 
+mod.font={
+display: {
+light: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.display.weight",
+newValue: 300
+});
+},
+regular: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.display.weight",
+newValue: 400
+});
+},
+bold: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.display.weight",
+newValue: 700
+});
+}
+},
+ui: {
+light: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.ui.weight",
+newValue: 300
+});
+},
+regular: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.ui.weight",
+newValue: 400
+});
+},
+bold: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.font.ui.weight",
+newValue: 700
+});
+}
+}
+};
+
 varrender={};
 
 render.style={