Added textAlpha and textActiveAlpha to Button and ButtonGroup.

lib/pixi/button.html

@@ -317,7 +317,9 @@ const button26 = new Button({
     strokeActive: 0x28a745,
     textStyleActive: {
         fill: 0x28a745
-    }
+    },
+    textAlpha: .2,
+    textActiveAlpha: .6
 })
 
 app.scene.addChild(button1, button2, button3, button4, button5, button6)

lib/pixi/button.js

@@ -81,6 +81,8 @@ export default class Button extends PIXI.Container {
      *     for possible options.
      * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
      *     button is activated. See PIXI.TextStyle for possible options.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of the text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of the text when activated.
      * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
      * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
      * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
@@ -138,6 +140,8 @@ export default class Button extends PIXI.Container {
                 strokeActiveAlpha: theme.strokeActiveAlpha,
                 textStyle: {},
                 textStyleActive: {},
+                textAlpha: theme.textAlpha,
+                textActiveAlpha: theme.textActiveAlpha,
                 style: 'default',
                 radius: theme.radius,
                 disabled: false,
@@ -566,10 +570,12 @@ export default class Button extends PIXI.Container {
         if (this._active) {
             if (this.text) {
                 this.text.style = this.opts.textStyleActive
+                this.text.alpha = this.opts.textActiveAlpha
             }
         } else {
             if (this.text) {
                 this.text.style = this.opts.textStyle
+                this.text.alpha = this.opts.textAlpha
             }
         }
 

lib/pixi/buttongroup.html

@@ -339,12 +339,37 @@ const buttonGroup19 = new ButtonGroup({
     app
 })
 
+const buttonGroup20 = new ButtonGroup({
+    x: 10,
+    y: 1520,
+    type: 'checkbox',
+    buttons: [
+        {label: 'one'},
+        {label: 'two'},
+        {label: 'three'}
+    ],
+    textAlpha: .7,
+    textActiveAlpha: .2
+})
+
+const buttonGroup21 = new ButtonGroup({
+    x: 300,
+    y: 1520,
+    type: 'checkbox',
+    buttons: [
+        {label: 'eins', textAlpha: 1, textActiveAlpha: .2},
+        {label: 'zwei', textAlpha: .2, textActiveAlpha: 1},
+        {label: 'drei'}
+    ]
+})
+
 app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
 app.scene.addChild(buttonGroup4)
 app.scene.addChild(buttonGroup5, buttonGroup6)
 app.scene.addChild(buttonGroup7, buttonGroup8)
 app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
 app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
+app.scene.addChild(buttonGroup20, buttonGroup21)
     </script>
 </body>
 </html>

lib/pixi/buttongroup.js

@@ -65,6 +65,8 @@ export default class ButtonGroup extends PIXI.Container {
      *     for possible options.
      * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
      *     button is activated. See PIXI.TextStyle for possible options.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - Button: The alpha value of the text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - Button: The alpha value of the text when activated.
      * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
      * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
      * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
@@ -115,6 +117,8 @@ export default class ButtonGroup extends PIXI.Container {
                 strokeActiveAlpha: theme.strokeActiveAlpha,
                 textStyle: {},
                 textStyleActive: {},
+                textAlpha: theme.textAlpha,
+                textActiveAlpha: theme.textActiveAlpha,
                 style: 'default',
                 radius: theme.radius,
                 disabled: null,
@@ -193,6 +197,8 @@ export default class ButtonGroup extends PIXI.Container {
             it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
             it.textStyle = it.textStyle || this.opts.textStyle
             it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
+            it.textAlpha = it.textAlpha != null ? it.textAlpha : this.opts.textAlpha
+            it.textActiveAlpha = it.textActiveAlpha != null ? it.textActiveAlpha : this.opts.textActiveAlpha
             it.style = it.style || this.opts.style
             it.radius = it.radius != null ? it.radius : this.opts.radius
             if (!it.type) {

lib/pixi/theme.js

@@ -78,6 +78,8 @@ export default class Theme {
      *     large text.
      * @param {object} [opts.textStyleLargeActive=textStyleLarge + {fill: primaryColor}] - A textstyle object which
      *     is used for large actived text.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of text when activated.
      */
     constructor(opts = {}) {
         const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
@@ -106,6 +108,8 @@ export default class Theme {
                 strokeActive: color2,
                 strokeActiveWidth: 0.6,
                 strokeActiveAlpha: 1,
+                textAlpha: 1,
+                textActiveAlpha: 1,
                 iconColor: color2,
                 iconColorActive: colorPrimary,
                 background: color1