Merge pull request #205 from pxblue/dev

Publish [email protected] and [email protected]
brightlayer-ui · Jun 30, 2021 · d4ff9c6 · d4ff9c6
2 parents 81406e6 + a622616
commit d4ff9c6
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 122 deletions.
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## v6.1.1 (June 30, 2021)
+
+### Fixed
+
+-   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,6 @@
     .mat-stroked-button,
     .mat-raised-button {
         &.mat-button-disabled {
-            background-color: map-get($pxb-white, 50) !important;
             color: map-get($foreground, disabled);
             border: solid 1px map-get($foreground, divider);
         }
@@ -327,6 +342,9 @@
         .pxb-drawer-nav-item-active .pxb-info-list-item .pxb-info-list-item-icon-wrapper {
             color: map-get($primary, 500);
         }
+        .pxb-info-list-item .mat-list-item-content .mat-list-icon {
+            color: map-get($foreground, text);
+        }
     }
 
     /*  Drawer Content */

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,16 @@
         ),
     );
     @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 {
+        &.mat-button-disabled.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/_pxb-component-theme.scss b/angular/_pxb-component-theme.scss
@@ -107,7 +107,9 @@
         .pxb-drawer-nav-group .mat-list-base {
             color: map-get($foreground, text);
         }
-
+        .pxb-drawer-header-content.mat-toolbar {
+            background-color: map-get($primary, 500);
+        }
         .pxb-drawer-nav-item-active-highlight {
             background-color: map-get($primary, 500);
         }

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 {

diff --git a/angular/package.json b/angular/package.json
@@ -2,7 +2,7 @@
     "name": "@pxblue/angular-themes",
     "author": "PX Blue <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "6.1.0",
+    "version": "6.1.1",
     "description": "Angular themes for PX Blue applications",
     "scripts": {
         "initialize": "bash scripts/initializeSubmodule.sh",

diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
@@ -1,4 +1,12 @@
-# Change Log
+# Changelog
+
+## v6.1.0 (June 30, 2021)
+
+### Changed
+
+-   Update auto-fill styles for MUI `<TextInput>`.
+-   Update styles for disabled MUI `<Switch>`.
+-   Light theme shadow base color changed back to pure black (`#000000`).
 
 ## v6.0.0 (March 29, 2021)
 

diff --git a/react/package.json b/react/package.json
@@ -2,7 +2,7 @@
     "name": "@pxblue/react-themes",
     "author": "PX Blue <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "6.0.0",
+    "version": "6.1.0",
     "description": "React themes for PX Blue applications",
     "main": "index.js",
     "scripts": {

diff --git a/react/src/blueDarkTheme.ts b/react/src/blueDarkTheme.ts
@@ -83,7 +83,7 @@ export const blueDarkTheme: ThemeOptions = {
             },
             colorSecondary: {
                 color: ThemeColors.text.primary,
-                backgroundColor: PXBColors.black[900],
+                backgroundColor: ThemeColors.background.paper,
             },
         },
 
@@ -155,7 +155,7 @@ export const blueDarkTheme: ThemeOptions = {
                 },
                 '&$disabled': {
                     borderColor: Color(PXBColors.black[200]).alpha(0.36).string(),
-                    color: Color(PXBColors.black[300]).alpha(0.36).string(),
+                    color: ThemeColors.action.disabled,
                 },
             },
             outlinedPrimary: {
@@ -173,7 +173,7 @@ export const blueDarkTheme: ThemeOptions = {
                 },
                 '&$disabled': {
                     borderColor: Color(PXBColors.black[200]).alpha(0.36).string(),
-                    color: Color(PXBColors.black[300]).alpha(0.36).string(),
+                    color: ThemeColors.action.disabled,
                 },
             },
             contained: {
@@ -183,7 +183,7 @@ export const blueDarkTheme: ThemeOptions = {
                     backgroundColor: PXBColors.black[400],
                 },
                 '&$disabled': {
-                    backgroundColor: Color(PXBColors.black[200]).alpha(0.24).string(),
+                    backgroundColor: ThemeColors.action.disabledBackground,
                     color: PXBColors.black[400],
                 },
             },
@@ -209,10 +209,10 @@ export const blueDarkTheme: ThemeOptions = {
             },
             text: {
                 '&$disabled': {
-                    color: Color(PXBColors.black[300]).alpha(0.36).string(),
+                    color: ThemeColors.action.disabled,
                 },
                 '&:hover': {
-                    backgroundColor: Color(PXBColors.black[50]).alpha(0.1).string(),
+                    backgroundColor: ThemeColors.action.hover,
                 },
             },
             textPrimary: {
@@ -614,19 +614,50 @@ export const blueDarkTheme: ThemeOptions = {
             switchBase: {
                 color: ThemeColors.text.primary,
                 '&$checked + $track': {
-                    opacity: 0.5,
+                    opacity: 0.38,
+                },
+                '&$checked': {
+                    color: ThemeColors.secondary.main,
+                    '&$disabled': {
+                        color: Color(ThemeColors.secondary.main).mix(Color(ThemeColors.background.paper), 0.5).string(),
+                    },
+                    '&$disabled + $track': {
+                        backgroundColor: ThemeColors.secondary.main,
+                    },
                 },
             },
             colorPrimary: {
+                '&$disabled': {
+                    color: Color(PXBColors.white[50]).mix(Color(ThemeColors.background.paper), 0.5).string(),
+                },
+                '&$disabled + $track': {
+                    backgroundColor: PXBColors.black[300],
+                },
                 '&$checked': {
                     color: ThemeColors.primary.main,
+                    '&$disabled': {
+                        color: Color(ThemeColors.primary.main).mix(Color(ThemeColors.background.paper), 0.5).string(),
+                    },
+                    '&$disabled + $track': {
+                        opacity: 0.38,
+                        backgroundColor: Color(ThemeColors.primary.main)
+                            .mix(Color(ThemeColors.background.paper), 0.5)
+                            .string(),
+                    },
+                },
+            },
+            colorSecondary: {
+                '&$disabled': {
+                    color: Color(PXBColors.white[50]).mix(Color(ThemeColors.background.paper), 0.5).string(),
+                },
+                '&$disabled + $track': {
+                    backgroundColor: PXBColors.black[300],
                 },
             },
             track: {
                 backgroundColor: PXBColors.black[300],
-                opacity: 0.36,
+                opacity: 0.38,
             },
-            checked: {},
         },
 
         // TABLE OVERRIDES
@@ -645,19 +676,21 @@ export const blueDarkTheme: ThemeOptions = {
                 color: ThemeColors.text.primary,
                 backgroundColor: PXBColors.darkBlack[300],
                 '&$hover:hover': {
-                    backgroundColor: Color(PXBColors.darkBlack[300]).mix(Color(PXBColors.black[500]), 0.5).string(),
+                    backgroundColor: Color(PXBColors.darkBlack[300]).mix(Color(MediumBlackBackground), 0.5).string(),
                 },
                 '&:nth-of-type(odd):not($selected)': {
-                    backgroundColor: PXBColors.black[900],
+                    backgroundColor: ThemeColors.background.paper,
                     '&$hover:hover': {
-                        backgroundColor: Color(PXBColors.black[900]).mix(Color(PXBColors.black[500]), 0.5).string(),
+                        backgroundColor: Color(ThemeColors.background.paper)
+                            .mix(Color(MediumBlackBackground), 0.5)
+                            .string(),
                     },
                 },
                 '&$selected': {
                     backgroundColor: Color(ThemeColors.primary.dark).alpha(0.2).string(),
                     '&$hover:hover': {
                         backgroundColor: Color(ThemeColors.primary.dark)
-                            .mix(Color(PXBColors.black[500]), 0.5)
+                            .mix(Color(MediumBlackBackground), 0.5)
                             .alpha(0.2)
                             .string(),
                     },
@@ -724,6 +757,10 @@ export const blueDarkTheme: ThemeOptions = {
                     color: PXBColors.black[300],
                     opacity: 0.36,
                 },
+                '&:-webkit-autofill': {
+                    '-webkit-box-shadow': `0 0 0 100px ${ThemeColors.background.paper} inset`,
+                    '-webkit-text-fill-color': ThemeColors.text.primary,
+                },
             },
             adornedStart: {},
             adornedEnd: {},
@@ -779,6 +816,11 @@ export const blueDarkTheme: ThemeOptions = {
                     pointerEvents: 'none',
                 },
             },
+            input: {
+                '&:-webkit-autofill': {
+                    '-webkit-box-shadow': `0 0 0 100px ${PXBColors.black[800]} inset`,
+                },
+            },
             underline: {
                 '&:before': {
                     borderBottomColor: ThemeColors.divider,
@@ -832,6 +874,11 @@ export const blueDarkTheme: ThemeOptions = {
                     borderColor: ThemeColors.secondary.dark,
                 },
             },
+            input: {
+                '&:-webkit-autofill': {
+                    '-webkit-box-shadow': `0 0 0 100px ${PXBColors.black[900]} inset`,
+                },
+            },
             colorSecondary: {},
             focused: {},
             error: {},