Enhancements in tokens and components

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.
 

src/custom/Modal/index.tsx

@@ -172,17 +172,17 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ 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
+}));

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<HTMLInputElement | null>(null);
 
+  const outerTheme = useTheme();
+
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchText(event.target.value);
   };
@@ -71,21 +123,23 @@ function SearchBar({
       }}
     >
       <div>
-        <TextField
-          variant="standard"
-          value={searchText}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            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'
-          }}
-        />
+        <ThemeProvider theme={customTheme(outerTheme)}>
+          <TextField
+            variant="standard"
+            value={searchText}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              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'
+            }}
+          />
+        </ThemeProvider>
         {expanded ? (
           <TooltipIcon
             title="Close"

src/theme/components/button.modifier.ts

@@ -5,36 +5,37 @@ export const MuiButton: Components<Theme>['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;
       return {
         ...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
         }
       };
     }

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],