From e3e18c8179b4309ea137521b479671e6475d4fa4 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 17 Apr 2024 17:55:49 +0530 Subject: [PATCH 1/3] fix(enhancements): tokens and colors Signed-off-by: Sudhanshu Dasgupta --- src/custom/Modal/index.tsx | 12 +++++++++--- src/theme/components/button.modifier.ts | 19 ++++++++++--------- src/theme/palette.ts | 7 ++++++- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx index 167487ff..feff3092 100644 --- a/src/custom/Modal/index.tsx +++ b/src/custom/Modal/index.tsx @@ -172,17 +172,17 @@ export const ModalFooter: React.FC = ({ helpText, children, va // ModalButtonPrimary export const ModalButtonPrimary: React.FC = styled(ContainedButton)(({ theme }) => ({ backgroundColor: theme.palette.background.brand?.default, - color: theme.palette.text.inverse + color: theme.palette.text.constant?.white })); // ModalButtonSecondary export const ModalButtonSecondary = styled(OutlinedButton)(({ theme }) => ({ '&.MuiButton-outlined': { border: `1px solid ${theme.palette.common.white}`, - color: theme.palette.common?.white, + color: theme.palette.text.constant?.white, '&:hover': { background: 'transparent', - color: theme.palette.common?.white + color: theme.palette.text.constant?.white } } })); @@ -191,3 +191,9 @@ export const ModalButtonSecondary = styled(OutlinedButton)(({ theme }) => ({ export const ModalButtonTertiary = styled(TextButton)(({ theme }) => ({ color: theme.palette.text.inverse })); + +// ModalButtonDanger +export const ModalButtonDanger = styled(ContainedButton)(({ theme }) => ({ + backgroundColor: theme.palette.background.error?.default, + color: theme.palette.text.constant?.white +})); diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index 2b6ed6ba..ccf220c6 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -5,8 +5,9 @@ export const MuiButton: Components['MuiButton'] = { root: ({ theme }) => { const { palette: { - background: { brand }, - text: { tertiary, default: defaultText } + background: { brand, neutral: BgNeutral }, + text: { disabled, constant, neutral: TextNeutral }, + border: { neutral } }, typography: { textB2SemiBold } } = theme; @@ -14,27 +15,27 @@ export const MuiButton: Components['MuiButton'] = { ...textB2SemiBold, fontFamily: 'Qanelas Soft, sans-serif', '&.MuiButton-contained': { - color: defaultText, + color: constant?.white, backgroundColor: brand?.default, '&:hover': { backgroundColor: brand?.hover } }, '&.MuiButton-outlined': { - border: `1px solid ${brand?.default}`, + border: `1px solid ${neutral?.default}`, '&:hover': { - backgroundColor: brand?.hover, - color: defaultText + backgroundColor: BgNeutral?.pressed, + color: TextNeutral?.default } }, '&.MuiButton-contained.Mui-disabled': { - color: tertiary, + color: disabled, backgroundColor: brand?.disabled }, '&.MuiButton-outlined.Mui-disabled': { - border: `1px solid ${tertiary}`, + border: `1px solid ${disabled}`, backgroundColor: brand?.disabled, - color: tertiary + color: disabled } }; } diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 9d2a3be7..eee0eaec 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -45,6 +45,7 @@ declare module '@mui/material/styles' { default?: string; secondary: string; tertiary?: string; + disabled: string; inverse?: string; brand?: string; info?: string; @@ -87,6 +88,7 @@ declare module '@mui/material/styles' { code?: string; strong?: string; normal?: string; + disabled?: string; } // Defines the simple palette color options. @@ -116,6 +118,7 @@ declare module '@mui/material/styles' { code?: string; strong?: string; normal?: string; + disabled?: string; } /* Defines the palette containing border and icon color options. @@ -241,7 +244,8 @@ export const lightModePalette: PaletteOptions = { text: { default: Colors.charcoal[10], secondary: Colors.charcoal[40], - tertiary: Colors.charcoal[70], + tertiary: Colors.charcoal[50], + disabled: Colors.charcoal[70], inverse: Colors.charcoal[100], brand: Colors.keppel[40], info: Colors.blue[40], @@ -348,6 +352,7 @@ export const darkModePalette: PaletteOptions = { default: Colors.charcoal[100], secondary: Colors.charcoal[40], tertiary: Colors.charcoal[60], + disabled: Colors.charcoal[70], inverse: Colors.charcoal[10], brand: Colors.keppel[40], info: Colors.blue[40], From 9e2145117e92f93df954adc46039ecbe89042d9c Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 17 Apr 2024 17:59:54 +0530 Subject: [PATCH 2/3] fix(lint): check Signed-off-by: Sudhanshu Dasgupta --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d1d6ede..970da2e1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Layer5 Design System Sistent +# Layer5 Design System Sistent The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences. From 3a145fed8176a9fd92f88b1213ceeaeaae8f421f Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 17 Apr 2024 20:43:12 +0530 Subject: [PATCH 3/3] fix(theme): searchbar Signed-off-by: Sudhanshu Dasgupta --- src/custom/SearchBar.tsx | 84 +++++++++++++++++++++++++++++++++------- 1 file changed, 69 insertions(+), 15 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index e673b661..b77b317d 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,9 +1,59 @@ +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; import React from 'react'; import { ClickAwayListener } from '../base/ClickAwayListener'; import { TextField } from '../base/TextField'; import { CloseIcon, SearchIcon } from '../icons'; import TooltipIcon from './TooltipIcon'; +const customTheme = (theme: Theme) => + createTheme({ + components: { + MuiTextField: { + styleOverrides: { + root: { + '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)', + '--TextField-brandBorderHoverColor': theme.palette.background.graphics?.default, + '--TextField-brandBorderFocusedColor': theme.palette.background.graphics?.default, + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)' + } + } + } + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + borderColor: 'var(--TextField-brandBorderColor)' + }, + root: { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderHoverColor)' + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderFocusedColor)' + } + } + } + }, + MuiInput: { + styleOverrides: { + root: { + '&::before': { + borderBottom: '2px solid var(--TextField-brandBorderColor)' + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)' + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)' + } + } + } + } + } + }); + export interface SearchBarProps { onSearch: (searchText: string) => void; style?: React.CSSProperties; @@ -25,6 +75,8 @@ function SearchBar({ const [searchText, setSearchText] = React.useState(''); const searchRef = React.useRef(null); + const outerTheme = useTheme(); + const handleSearchChange = (event: React.ChangeEvent): void => { setSearchText(event.target.value); }; @@ -71,21 +123,23 @@ function SearchBar({ }} >
- ) => { - handleSearchChange(e); - onSearch(e.target.value); - }} - inputRef={searchRef} - placeholder={placeholder} - style={{ - width: expanded ? '150px' : '0', - opacity: expanded ? 1 : 0, - transition: 'width 0.3s ease, opacity 0.3s ease' - }} - /> + + ) => { + handleSearchChange(e); + onSearch(e.target.value); + }} + inputRef={searchRef} + placeholder={placeholder} + style={{ + width: expanded ? '150px' : '0', + opacity: expanded ? 1 : 0, + transition: 'width 0.3s ease, opacity 0.3s ease' + }} + /> + {expanded ? (