From bb76053b66cdb8eee049570976322ebf55625855 Mon Sep 17 00:00:00 2001 From: daileytj Date: Tue, 22 Jun 2021 10:26:57 -0400 Subject: [PATCH 01/18] Fix input autofill styles --- react/src/blueDarkTheme.ts | 14 ++++++++++++++ react/src/blueTheme.ts | 8 ++++++++ 2 files changed, 22 insertions(+) diff --git a/react/src/blueDarkTheme.ts b/react/src/blueDarkTheme.ts index 22da7e3a..fbfcb37f 100644 --- a/react/src/blueDarkTheme.ts +++ b/react/src/blueDarkTheme.ts @@ -724,6 +724,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 +783,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 +841,11 @@ export const blueDarkTheme: ThemeOptions = { borderColor: ThemeColors.secondary.dark, }, }, + input: { + '&:-webkit-autofill': { + '-webkit-box-shadow': `0 0 0 100px ${ThemeColors.background.paper} inset`, + }, + }, colorSecondary: {}, focused: {}, error: {}, diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index c36e4cea..e1a778d6 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -682,6 +682,9 @@ export const blueTheme: ThemeOptions = { color: PXBColors.black[100], opacity: 1, }, + '&:-webkit-autofill': { + '-webkit-box-shadow': `0 0 0 30px ${ThemeColors.background.paper} inset`, + }, }, adornedStart: {}, adornedEnd: {}, @@ -724,6 +727,11 @@ export const blueTheme: ThemeOptions = { pointerEvents: 'none', }, }, + input: { + '&:-webkit-autofill': { + '-webkit-box-shadow': `0 0 0 30px ${ThemeColors.background.default} inset`, + }, + }, underline: { '&:before': { borderBottomColor: ThemeColors.divider, From 08540cdc2bd18d7dee35f3fbff709f3f40cb1cbc Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 22 Jun 2021 08:24:21 -0700 Subject: [PATCH 02/18] Use primary color in drawer header, use black[500] in light theme drawer icon --- angular/_blueTheme.scss | 3 +++ angular/_pxb-component-theme.scss | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/angular/_blueTheme.scss b/angular/_blueTheme.scss index 0863144c..0e5f98bc 100644 --- a/angular/_blueTheme.scss +++ b/angular/_blueTheme.scss @@ -327,6 +327,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/_pxb-component-theme.scss b/angular/_pxb-component-theme.scss index 1f8075d5..d3bce8b6 100644 --- 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); } From 78bbb042d294b3baaf2fd1048b24054b30c3ca18 Mon Sep 17 00:00:00 2001 From: daileytj Date: Tue, 22 Jun 2021 16:02:52 -0400 Subject: [PATCH 03/18] Fix MuiSwitch theme colors, remove hardcoded values in favor of theme variables --- react/src/blueDarkTheme.ts | 59 +++++++++++++++++++++------ react/src/blueTheme.ts | 83 ++++++++++++++++++++++++++------------ 2 files changed, 104 insertions(+), 38 deletions(-) diff --git a/react/src/blueDarkTheme.ts b/react/src/blueDarkTheme.ts index fbfcb37f..1f5703e5 100644 --- 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: { @@ -538,7 +538,7 @@ export const blueDarkTheme: ThemeOptions = { color: ThemeColors.primary.dark, }, '& .MuiButton-textSecondary': { - color: PXBColors.lightBlue[500], + color: ThemeColors.info.dark, }, }, }, @@ -614,17 +614,48 @@ export const blueDarkTheme: ThemeOptions = { switchBase: { color: ThemeColors.text.primary, '&$checked + $track': { - opacity: 0.5, + opacity: 0.38, + }, + '&$checked': { + color: ThemeColors.secondary.main, + '&$disabled': { + color: '#4F7491', + }, + '&$disabled + $track': { + opacity: 0.24, + backgroundColor: ThemeColors.secondary.main, + }, }, }, colorPrimary: { + '&$disabled': { + color: '#8E9294', + }, + '&$disabled + $track': { + backgroundColor: PXBColors.black[300], + }, '&$checked': { color: ThemeColors.primary.main, + '&$disabled': { + color: '#4E7083', + }, + '&$disabled + $track': { + opacity: 1, + backgroundColor: '#364B57', + }, + }, + }, + colorSecondary: { + '&$disabled': { + color: '#8E9294', + }, + '&$disabled + $track': { + backgroundColor: PXBColors.black[300], }, }, track: { backgroundColor: PXBColors.black[300], - opacity: 0.36, + opacity: 0.38, }, checked: {}, }, @@ -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(), }, diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index e1a778d6..16bb5e85 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -73,16 +73,16 @@ export const blueTheme: ThemeOptions = { MuiAppBar: { colorDefault: { color: ThemeColors.text.primary, - backgroundColor: PXBColors.white[50], + backgroundColor: ThemeColors.background.paper, }, colorSecondary: { - color: PXBColors.white[50], + color: ThemeColors.background.paper, backgroundColor: ThemeColors.primary.dark, '& .MuiInputBase-root': { - color: PXBColors.white[50], + color: ThemeColors.background.paper, }, '& .MuiSelect-icon': { - color: PXBColors.white[50], + color: ThemeColors.background.paper, }, }, }, @@ -121,7 +121,7 @@ export const blueTheme: ThemeOptions = { textTransform: 'none', }, contained: { - backgroundColor: PXBColors.white[50], + backgroundColor: ThemeColors.background.paper, color: ThemeColors.text.primary, '&$disableElevation:not($containedPrimary):not($containedSecondary)': { backgroundColor: PXBColors.white[500], @@ -138,7 +138,7 @@ export const blueTheme: ThemeOptions = { '&$disabled': { backgroundColor: ThemeColors.background.paper, border: `1px solid ${Color(PXBColors.black[500]).alpha(0.12).string()}`, - color: Color(PXBColors.black[500]).alpha(0.3).string(), + color: Color(ThemeColors.text.primary).alpha(0.3).string(), }, }, containedPrimary: { @@ -170,14 +170,14 @@ export const blueTheme: ThemeOptions = { }, '&$disabled': { backgroundColor: ThemeColors.background.paper, - borderColor: Color(PXBColors.black[500]).alpha(0.12).string(), - color: Color(PXBColors.black[500]).alpha(0.3).string(), + borderColor: Color(BlackBorder).alpha(0.12).string(), + color: Color(ThemeColors.text.primary).alpha(0.3).string(), }, }, outlinedPrimary: { borderColor: ThemeColors.primary.main, '&$disabled': { - borderColor: Color(PXBColors.black[500]).alpha(0.12).string(), + borderColor: Color(BlackBorder).alpha(0.12).string(), }, '&:hover': { backgroundColor: Color(ThemeColors.primary.main).alpha(0.05).string(), @@ -186,7 +186,7 @@ export const blueTheme: ThemeOptions = { outlinedSecondary: { borderColor: ThemeColors.secondary.main, '&$disabled': { - borderColor: Color(PXBColors.black[500]).alpha(0.12).string(), + borderColor: Color(BlackBorder).alpha(0.12).string(), }, '&:hover': { backgroundColor: Color(ThemeColors.secondary.main).alpha(0.05).string(), @@ -263,7 +263,7 @@ export const blueTheme: ThemeOptions = { }, '&$disabled': { opacity: 1, - color: Color(PXBColors.black[500]).alpha(0.3).string(), + color: Color(ThemeColors.text.primary).alpha(0.3).string(), '& $avatar': { opacity: 0.5, }, @@ -374,8 +374,8 @@ export const blueTheme: ThemeOptions = { '&$disabled': { opacity: 1, backgroundColor: ThemeColors.background.paper, - color: Color(PXBColors.black[500]).alpha(0.3).string(), - borderColor: Color(PXBColors.black[500]).alpha(0.12).string(), + color: ThemeColors.action.disabled, + borderColor: Color(BlackBorder).alpha(0.12).string(), }, }, outlinedSecondary: { @@ -386,8 +386,8 @@ export const blueTheme: ThemeOptions = { '&$disabled': { opacity: 1, backgroundColor: ThemeColors.background.paper, - color: Color(PXBColors.black[500]).alpha(0.3).string(), - borderColor: Color(PXBColors.black[500]).alpha(0.12).string(), + color: ThemeColors.action.disabled, + borderColor: Color(BlackBorder).alpha(0.12).string(), }, }, icon: { @@ -407,15 +407,15 @@ export const blueTheme: ThemeOptions = { MuiFab: { root: { textTransform: 'none', - backgroundColor: PXBColors.white[50], + backgroundColor: ThemeColors.background.paper, color: ThemeColors.text.primary, '&:hover': { backgroundColor: Color(PXBColors.black[500]).alpha(0.05).string(), }, '&$disabled': { backgroundColor: ThemeColors.background.paper, - border: `1px solid ${Color(PXBColors.black[500]).alpha(0.12).string()}`, - color: Color(PXBColors.black[500]).alpha(0.3).string(), + border: `1px solid ${Color(BlackBorder).alpha(0.12).string()}`, + color: ThemeColors.action.disabled, }, }, primary: { @@ -572,17 +572,48 @@ export const blueTheme: ThemeOptions = { '&$checked + $track': { opacity: 0.38, }, + '&$checked': { + color: ThemeColors.secondary.main, + '&$disabled': { + color: '#80C3F8', + }, + '&$disabled + $track': { + opacity: 0.24, + backgroundColor: ThemeColors.secondary.main, + }, + }, }, colorPrimary: { + '&$disabled': { + color: ThemeColors.background.paper, + }, + '&$disabled + $track': { + backgroundColor: PXBColors.black[100], + }, '&$checked': { color: ThemeColors.primary.main, + '&$disabled': { + color: '#7FBCDF', + }, + '&$disabled + $track': { + opacity: 1, + backgroundColor: '#CFE6F3', + }, + }, + }, + colorSecondary: { + '&$disabled': { + color: ThemeColors.background.paper, + }, + '&$disabled + $track': { + backgroundColor: PXBColors.black[100], }, }, track: { backgroundColor: PXBColors.black[100], - opacity: 1, + opacity: 0.38, }, - checked: {}, + disabled: {}, }, // TABLE OVERRIDES @@ -603,9 +634,11 @@ export const blueTheme: ThemeOptions = { backgroundColor: Color('#FBFBFB').mix(Color(PXBColors.black[50]), 0.5).string(), }, '&:nth-of-type(odd):not($selected)': { - backgroundColor: PXBColors.white[50], + backgroundColor: ThemeColors.background.paper, '&$hover:hover': { - backgroundColor: Color(PXBColors.white[50]).mix(Color(PXBColors.black[50]), 0.5).string(), + backgroundColor: Color(ThemeColors.background.paper) + .mix(Color(PXBColors.black[50]), 0.5) + .string(), }, }, '&$selected': { @@ -666,7 +699,7 @@ export const blueTheme: ThemeOptions = { }, MuiTabs: { indicator: { - backgroundColor: PXBColors.white[50], + backgroundColor: ThemeColors.background.paper, }, }, @@ -697,7 +730,7 @@ export const blueTheme: ThemeOptions = { }, '&:not($disabled):hover:before': { borderBottomWidth: 1, - borderBottomColor: PXBColors.black[500], + borderBottomColor: BlackBorder, }, '&$disabled:before': { borderBottomColor: ThemeColors.divider, @@ -759,7 +792,7 @@ export const blueTheme: ThemeOptions = { borderColor: ThemeColors.error.main, }, '&$error:hover:not($focused) $notchedOutline': { - borderColor: PXBColors.red[900], + borderColor: ThemeColors.error.dark, }, '&$disabled $notchedOutline': { borderColor: ThemeColors.divider, From 45c2138e9aec7ba758efb44b24634533a7a26dce Mon Sep 17 00:00:00 2001 From: Joseph Boyle Date: Wed, 23 Jun 2021 06:23:39 -0400 Subject: [PATCH 04/18] Add changelog entry for fixes --- angular/CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 98e889ab..2bed2226 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## v6.1.1 (Unpublished) + +### Fixed + +- Fixed a few color issues in the `` ([#184](https://github.com/pxblue/themes/issues/184)) and `` ([#186](https://github.com/pxblue/themes/issues/186)). + ## v6.1.0 (May 28, 2021) ### Added From 87c90818b1235807c49df4a464b3c8abdad1f5c1 Mon Sep 17 00:00:00 2001 From: daileytj Date: Wed, 23 Jun 2021 09:28:34 -0400 Subject: [PATCH 05/18] Cleanup react themes --- react/src/blueDarkTheme.ts | 4 ++-- react/src/blueTheme.ts | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/react/src/blueDarkTheme.ts b/react/src/blueDarkTheme.ts index 1f5703e5..3f4f2ef0 100644 --- a/react/src/blueDarkTheme.ts +++ b/react/src/blueDarkTheme.ts @@ -538,7 +538,7 @@ export const blueDarkTheme: ThemeOptions = { color: ThemeColors.primary.dark, }, '& .MuiButton-textSecondary': { - color: ThemeColors.info.dark, + color: PXBColors.lightBlue[500], }, }, }, @@ -876,7 +876,7 @@ export const blueDarkTheme: ThemeOptions = { }, input: { '&:-webkit-autofill': { - '-webkit-box-shadow': `0 0 0 100px ${ThemeColors.background.paper} inset`, + '-webkit-box-shadow': `0 0 0 100px ${PXBColors.black[900]} inset`, }, }, colorSecondary: {}, diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index 16bb5e85..8000a455 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -613,7 +613,6 @@ export const blueTheme: ThemeOptions = { backgroundColor: PXBColors.black[100], opacity: 0.38, }, - disabled: {}, }, // TABLE OVERRIDES @@ -716,7 +715,7 @@ export const blueTheme: ThemeOptions = { opacity: 1, }, '&:-webkit-autofill': { - '-webkit-box-shadow': `0 0 0 30px ${ThemeColors.background.paper} inset`, + '-webkit-box-shadow': `0 0 0 30px ${PXBColors.white[50]} inset`, }, }, adornedStart: {}, From 2aabe17ef49b87f8d2ae7898057932589aa4af38 Mon Sep 17 00:00:00 2001 From: daileytj Date: Wed, 23 Jun 2021 10:50:32 -0400 Subject: [PATCH 06/18] Use mix function in place of hardcoded colors --- react/src/blueDarkTheme.ts | 16 ++++++++-------- react/src/blueTheme.ts | 13 +++++++------ 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/react/src/blueDarkTheme.ts b/react/src/blueDarkTheme.ts index 3f4f2ef0..053d7e1d 100644 --- a/react/src/blueDarkTheme.ts +++ b/react/src/blueDarkTheme.ts @@ -619,17 +619,16 @@ export const blueDarkTheme: ThemeOptions = { '&$checked': { color: ThemeColors.secondary.main, '&$disabled': { - color: '#4F7491', + color: Color(ThemeColors.secondary.main).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { - opacity: 0.24, backgroundColor: ThemeColors.secondary.main, }, }, }, colorPrimary: { '&$disabled': { - color: '#8E9294', + color: Color(PXBColors.white[50]).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { backgroundColor: PXBColors.black[300], @@ -637,17 +636,19 @@ export const blueDarkTheme: ThemeOptions = { '&$checked': { color: ThemeColors.primary.main, '&$disabled': { - color: '#4E7083', + color: Color(ThemeColors.primary.main).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { - opacity: 1, - backgroundColor: '#364B57', + opacity: 0.38, + backgroundColor: Color(ThemeColors.primary.main) + .mix(Color(ThemeColors.background.paper), 0.5) + .string(), }, }, }, colorSecondary: { '&$disabled': { - color: '#8E9294', + color: Color(PXBColors.white[50]).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { backgroundColor: PXBColors.black[300], @@ -657,7 +658,6 @@ export const blueDarkTheme: ThemeOptions = { backgroundColor: PXBColors.black[300], opacity: 0.38, }, - checked: {}, }, // TABLE OVERRIDES diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index 8000a455..ca2ab39f 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -34,7 +34,7 @@ const ThemeColors = { text: { primary: PXBColors.black[500], secondary: PXBColors.gray[500], - // disabled: Color(PXBColors.black[300]).alpha(0.32).string(), + // disabled: Color(PXBColors.black[500]).alpha(0.3).string(), hint: PXBColors.gray[500], }, action: { @@ -575,10 +575,9 @@ export const blueTheme: ThemeOptions = { '&$checked': { color: ThemeColors.secondary.main, '&$disabled': { - color: '#80C3F8', + color: Color(ThemeColors.secondary.main).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { - opacity: 0.24, backgroundColor: ThemeColors.secondary.main, }, }, @@ -593,11 +592,13 @@ export const blueTheme: ThemeOptions = { '&$checked': { color: ThemeColors.primary.main, '&$disabled': { - color: '#7FBCDF', + color: Color(ThemeColors.primary.main).mix(Color(ThemeColors.background.paper), 0.5).string(), }, '&$disabled + $track': { - opacity: 1, - backgroundColor: '#CFE6F3', + opacity: 0.38, + backgroundColor: Color(ThemeColors.primary.main) + .mix(Color(ThemeColors.background.paper), 0.5) + .string(), }, }, }, From 9504818b394bd9a4fbde4a6515fc6aef16d34a73 Mon Sep 17 00:00:00 2001 From: huayunh Date: Wed, 23 Jun 2021 14:37:41 -0400 Subject: [PATCH 07/18] Remove React blue theme custom shadows --- react/src/blueTheme.ts | 2 -- react/src/shadow.ts | 73 ------------------------------------------ 2 files changed, 75 deletions(-) delete mode 100644 react/src/shadow.ts diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index c36e4cea..45ab833f 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -8,7 +8,6 @@ import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'; import { typography, createSimpleLightPalette as createSimplePalette } from './shared'; -import shadows from './shadow'; import * as PXBColors from '@pxblue/colors'; import Color from 'color'; @@ -67,7 +66,6 @@ export const blueTheme: ThemeOptions = { text: ThemeColors.text, action: ThemeColors.action, }, - shadows: shadows, overrides: { // APP BAR OVERRIDES MuiAppBar: { diff --git a/react/src/shadow.ts b/react/src/shadow.ts deleted file mode 100644 index 0bd641b4..00000000 --- a/react/src/shadow.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * adapted from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/shadows.js - The MIT License (MIT) - - Copyright (c) 2014 Call-Em-All - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - -import { black } from '@pxblue/colors'; -import Color from 'color'; -import { Shadows } from '@material-ui/core/styles/shadows'; - -const black500RGB: number[] = Color(black[500]).rgb().array(); - -const shadowKeyUmbraOpacity = 0.2; -const shadowKeyPenumbraOpacity = 0.14; -const shadowAmbientShadowOpacity = 0.12; - -function createShadow(...px: number[]) { - return [ - `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(${black500RGB[0]},${black500RGB[1]},${black500RGB[2]},${shadowKeyUmbraOpacity})`, - `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(${black500RGB[0]},${black500RGB[1]},${black500RGB[2]},${shadowKeyPenumbraOpacity})`, - `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(${black500RGB[0]},${black500RGB[1]},${black500RGB[2]},${shadowAmbientShadowOpacity})`, - ].join(','); -} - -// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss -const shadows: Shadows = [ - 'none', - createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), - createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), - createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), - createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), - createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), - createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), - createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), - createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), - createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), - createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), - createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), - createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), - createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), - createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), - createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), - createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), - createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), - createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), - createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), - createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), - createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), - createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), - createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), - createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8), -]; - -export default shadows; From 69f575c9f01d6aa6caf9b7e7427220c4ef265b3b Mon Sep 17 00:00:00 2001 From: huayunh Date: Wed, 23 Jun 2021 14:41:41 -0400 Subject: [PATCH 08/18] Changelog --- react/CHANGELOG.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md index 39ece10e..31305fb4 100644 --- a/react/CHANGELOG.md +++ b/react/CHANGELOG.md @@ -1,4 +1,10 @@ -# Change Log +# Changelog + +## v6.0.1 (Not Published Yet) + +### Changed + +- Light theme shadow base color changed back to pure black (`#000000`). ## v6.0.0 (March 29, 2021) From 3fb14159cdac5da700afd2648fd1f4d5d83a7666 Mon Sep 17 00:00:00 2001 From: daileytj Date: Thu, 24 Jun 2021 10:28:16 -0400 Subject: [PATCH 09/18] Update Changelog, bump version number --- react/CHANGELOG.md | 7 +++++++ react/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md index 39ece10e..542cc9eb 100644 --- a/react/CHANGELOG.md +++ b/react/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## v6.1.0 (June 28, 2021) + +### Changed + +- Update auto-fill styles for MUI ``. +- Update styles for disabled MUI ``. + ## v6.0.0 (March 29, 2021) ### Changed diff --git a/react/package.json b/react/package.json index 474a0afe..ef8dd094 100644 --- a/react/package.json +++ b/react/package.json @@ -2,7 +2,7 @@ "name": "@pxblue/react-themes", "author": "PX Blue ", "license": "BSD-3-Clause", - "version": "6.0.0", + "version": "6.1.0", "description": "React themes for PX Blue applications", "main": "index.js", "scripts": { From a48836aa4cb586a7c8e94416e6c38162696324ca Mon Sep 17 00:00:00 2001 From: daileytj Date: Thu, 24 Jun 2021 14:12:52 -0400 Subject: [PATCH 10/18] Update MuiTableRow background color to use color variable instead of hardcoded values --- react/src/blueTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/src/blueTheme.ts b/react/src/blueTheme.ts index ca2ab39f..a84a40e2 100644 --- a/react/src/blueTheme.ts +++ b/react/src/blueTheme.ts @@ -629,9 +629,9 @@ export const blueTheme: ThemeOptions = { }, MuiTableRow: { root: { - backgroundColor: '#FBFBFB', // possible new shade of white + backgroundColor: PXBColors.white[100], '&$hover:hover': { - backgroundColor: Color('#FBFBFB').mix(Color(PXBColors.black[50]), 0.5).string(), + backgroundColor: Color(PXBColors.white[100]).mix(Color(PXBColors.black[50]), 0.5).string(), }, '&:nth-of-type(odd):not($selected)': { backgroundColor: ThemeColors.background.paper, From 42c80734a3305d0acb00b0e426cc52fa81a26698 Mon Sep 17 00:00:00 2001 From: huayunh Date: Thu, 24 Jun 2021 15:56:57 -0400 Subject: [PATCH 11/18] Merge changelog --- react/CHANGELOG.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md index 750aea8b..ed4f2f69 100644 --- a/react/CHANGELOG.md +++ b/react/CHANGELOG.md @@ -1,17 +1,12 @@ # Changelog -## v6.0.1 (Not Published Yet) - -### Changed - -- Light theme shadow base color changed back to pure black (`#000000`). - ## v6.1.0 (June 28, 2021) ### Changed - Update auto-fill styles for MUI ``. - Update styles for disabled MUI ``. +- Light theme shadow base color changed back to pure black (`#000000`). ## v6.0.0 (March 29, 2021) From c1c3e1ed948e71bbf1fc0d46a2185438400005f6 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 29 Jun 2021 11:28:05 -0400 Subject: [PATCH 12/18] Disabled state for primary accent warn buttons --- angular/_blueTheme.scss | 18 +++++++++++++++++- angular/_darkTheme.scss | 16 ++++++++++++++++ angular/mixins/button.scss | 5 +++++ 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/angular/_blueTheme.scss b/angular/_blueTheme.scss index 0e5f98bc..1c474e2a 100644 --- 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 index 42a24b55..95c3a109 100644 --- 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($foreground, disabled), + background: map-get($background, disabled-button), + ), ), ); $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($foreground, disabled), + background: map-get($background, disabled-button), + ), ), ); $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($foreground, disabled), + background: map-get($background, disabled-button), + ), ), ); $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($foreground, disabled), + background: map-get($background, disabled-button), + ), ), toggle: ( border: map-get($pxb-black, 200), diff --git a/angular/mixins/button.scss b/angular/mixins/button.scss index a2390b46..4fa5718b 100644 --- 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 { From db4c7c205bd8960f36d029582b4bd5957a6eff15 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 29 Jun 2021 11:30:43 -0400 Subject: [PATCH 13/18] Update changelog --- angular/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 2bed2226..3eb37066 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -6,6 +6,10 @@ - Fixed a few color issues in the `` ([#184](https://github.com/pxblue/themes/issues/184)) and `` ([#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 From b2b3754e5868640c581f665cbd0fe8a889f935a3 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 29 Jun 2021 11:34:48 -0400 Subject: [PATCH 14/18] Run prettier --- angular/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 3eb37066..02628ec0 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -8,7 +8,7 @@ ### Changed -- Changed `mat-button` styles for disabled `primary`, `accent`, and `warn` variants. +- Changed `mat-button` styles for disabled `primary`, `accent`, and `warn` variants. ## v6.1.0 (May 28, 2021) From 9692d246cd3b04a5c4cace82b17cd1451211cb80 Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 30 Jun 2021 11:12:30 -0400 Subject: [PATCH 15/18] Fix disabled dark mode colors --- angular/_darkTheme.scss | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/angular/_darkTheme.scss b/angular/_darkTheme.scss index 95c3a109..d500819c 100644 --- a/angular/_darkTheme.scss +++ b/angular/_darkTheme.scss @@ -93,8 +93,8 @@ background: map-get($primary, 500), backgroundHover: map-get($primary, 300), disabled: ( - text: map-get($foreground, disabled), - background: map-get($background, disabled-button), + text: map-get($pxb-black, 400), + background: rgba(map-get($pxb-black, 200), 0.24), ), ), ); @@ -113,8 +113,8 @@ background: map-get($accent, 500), backgroundHover: map-get($accent, 300), disabled: ( - text: map-get($foreground, disabled), - background: map-get($background, disabled-button), + text: map-get($pxb-black, 400), + background: rgba(map-get($pxb-black, 200), 0.24), ), ), ); @@ -133,8 +133,8 @@ background: map-get($warn, 500), backgroundHover: map-get($pxb-red, 300), disabled: ( - text: map-get($foreground, disabled), - background: map-get($background, disabled-button), + text: map-get($pxb-black, 400), + background: rgba(map-get($pxb-black, 200), 0.24), ), ), ); @@ -153,8 +153,8 @@ background: map-get($pxb-black, 500), backgroundHover: map-get($pxb-black, 300), disabled: ( - text: map-get($foreground, disabled), - background: map-get($background, disabled-button), + text: map-get($pxb-black, 400), + background: rgba(map-get($pxb-black, 200), 0.24), ), ), toggle: ( @@ -172,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); From bd11db706cb813d2c30c7304db8a92413cd67db1 Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 30 Jun 2021 11:39:28 -0400 Subject: [PATCH 16/18] Update changelog dates and versions --- angular/CHANGELOG.md | 2 +- angular/package.json | 2 +- react/CHANGELOG.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 02628ec0..031b0272 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## v6.1.1 (Unpublished) +## v6.1.1 (June 30, 2021) ### Fixed diff --git a/angular/package.json b/angular/package.json index b6f0bc7c..c8b32466 100644 --- a/angular/package.json +++ b/angular/package.json @@ -2,7 +2,7 @@ "name": "@pxblue/angular-themes", "author": "PX Blue ", "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 index ed4f2f69..0c8928cd 100644 --- a/react/CHANGELOG.md +++ b/react/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## v6.1.0 (June 28, 2021) +## v6.1.0 (June 30, 2021) ### Changed From 9838b98c611eb2cf1f4715734e3cb9209f62aa47 Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 30 Jun 2021 14:26:12 -0400 Subject: [PATCH 17/18] Fix dark mode disabled button styles --- angular/_blueTheme.scss | 1 - angular/_darkTheme.scss | 8 +++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/angular/_blueTheme.scss b/angular/_blueTheme.scss index 1c474e2a..c14f13df 100644 --- a/angular/_blueTheme.scss +++ b/angular/_blueTheme.scss @@ -216,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); } diff --git a/angular/_darkTheme.scss b/angular/_darkTheme.scss index d500819c..5e17067a 100644 --- a/angular/_darkTheme.scss +++ b/angular/_darkTheme.scss @@ -175,9 +175,11 @@ .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); + .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 */ From 4a4338506a71a1205a459c81247a51fea077416e Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 30 Jun 2021 14:28:40 -0400 Subject: [PATCH 18/18] Run prettier --- angular/_darkTheme.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/angular/_darkTheme.scss b/angular/_darkTheme.scss index 5e17067a..602030e5 100644 --- a/angular/_darkTheme.scss +++ b/angular/_darkTheme.scss @@ -175,7 +175,8 @@ .mat-icon-button.mat-button-disabled { color: map-get($foreground, disabled); } - .mat-stroked-button, .mat-button { + .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);