Merge pull request #206 from pxblue/feature/ng-disabled-button-styles

Disabled state for primary accent warn buttons
brightlayer-ui · Jun 30, 2021 · 53b6212 · 53b6212
2 parents 309790c + 9692d24
commit 53b6212
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   Fixed a few color issues in the `<pxb-drawer-header>` ([#184](https://github.com/pxblue/themes/issues/184)) and `<pxb-drawer-nav-item>` ([#186](https://github.com/pxblue/themes/issues/186)).
 
+### Changed
+
+-   Changed `mat-button` styles for disabled `primary`, `accent`, and `warn` variants.
+
 ## v6.1.0 (May 28, 2021)
 
 ### Added

diff --git a/angular/_blueTheme.scss b/angular/_blueTheme.scss
@@ -133,6 +133,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($primary, 500),
             backgroundHover: map-get($primary, 300),
+            disabled: (
+                text: map-get($primary, 200),
+                background: map-get($primary, 50),
+            ),
         ),
     );
     $buttonAccent: (
@@ -149,6 +153,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($accent, 500),
             backgroundHover: map-get($accent, 300),
+            disabled: (
+                text: map-get($accent, 200),
+                background: map-get($accent, 50),
+            ),
         ),
     );
     $buttonWarn: (
@@ -165,6 +173,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($warn, 500),
             backgroundHover: map-get($warn, 300),
+            disabled: (
+                text: map-get($warn, 200),
+                background: map-get($warn, 50),
+            ),
         ),
     );
     $buttonDefault: (
@@ -181,6 +193,10 @@
             text: map-get($pxb-black, 500),
             background: map-get($pxb-white, 50),
             backgroundHover: rgba(66, 78, 84, 0.05),
+            disabled: (
+                text: map-get($foreground, disabled),
+                background: map-get($background, disabled-button),
+            ),
         ),
         toggle: (
             border: map-get($pxb-gray, 100),
@@ -200,7 +216,7 @@
     .mat-stroked-button,
     .mat-raised-button {
         &.mat-button-disabled {
-            background-color: map-get($pxb-white, 50) !important;
+            //    background-color: map-get($pxb-white, 50) !important;
             color: map-get($foreground, disabled);
             border: solid 1px map-get($foreground, divider);
         }

diff --git a/angular/_darkTheme.scss b/angular/_darkTheme.scss
@@ -92,6 +92,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($primary, 500),
             backgroundHover: map-get($primary, 300),
+            disabled: (
+                text: map-get($pxb-black, 400),
+                background: rgba(map-get($pxb-black, 200), 0.24),
+            ),
         ),
     );
     $buttonAccent: (
@@ -108,6 +112,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($accent, 500),
             backgroundHover: map-get($accent, 300),
+            disabled: (
+                text: map-get($pxb-black, 400),
+                background: rgba(map-get($pxb-black, 200), 0.24),
+            ),
         ),
     );
     $buttonWarn: (
@@ -124,6 +132,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($warn, 500),
             backgroundHover: map-get($pxb-red, 300),
+            disabled: (
+                text: map-get($pxb-black, 400),
+                background: rgba(map-get($pxb-black, 200), 0.24),
+            ),
         ),
     );
     $buttonDefault: (
@@ -140,6 +152,10 @@
             text: map-get($pxb-white, 50),
             background: map-get($pxb-black, 500),
             backgroundHover: map-get($pxb-black, 300),
+            disabled: (
+                text: map-get($pxb-black, 400),
+                background: rgba(map-get($pxb-black, 200), 0.24),
+            ),
         ),
         toggle: (
             border: map-get($pxb-black, 200),
@@ -156,9 +172,13 @@
         ),
     );
     @include pxb-mat-buttons($buttonPrimary, $buttonAccent, $buttonWarn, $buttonDefault);
-    .mat-icon-button.mat-button-disabled.mat-button-disabled {
+    .mat-icon-button.mat-button-disabled {
         color: map-get($foreground, disabled);
     }
+    .mat-stroked-button.mat-button-disabled {
+        color: rgba(map-get($pxb-black, 300), 0.36);
+        border-color: rgba(map-get($pxb-black, 300), 0.36);
+    }
 
     /* Tabs */
     $tabText: map-get($foreground, secondary-text);

diff --git a/angular/mixins/button.scss b/angular/mixins/button.scss
@@ -89,6 +89,11 @@
     &:hover:not(.mat-button-disabled) {
         background-color: map-deep-get($palette, fill, backgroundHover);
     }
+    &.mat-button-disabled {
+        color: map-deep-get($palette, fill, disabled, text);
+        background-color: map-deep-get($palette, fill, disabled, background);
+        border: none;
+    }
 }
 @mixin filled-button-helper($primaryPalette, $accentPalette, $warnPalette, $defaultPalette) {
     &.mat-primary {