feat: add automatic color calculation of text value based on backgrou…

…nd color
bigcommerce · Jun 6, 2023 · c8b93ea · c8b93ea
1 parent f938ec1
commit c8b93ea
Show file tree

Hide file tree

Showing 23 changed files with 423 additions and 48 deletions.
diff --git a/apps/storefront/src/components/B3DropDown.tsx b/apps/storefront/src/components/B3DropDown.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useState } from 'react'
+import { MouseEvent, useContext, useState } from 'react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 import { Box } from '@mui/material'
@@ -7,6 +7,10 @@ import ListItemText from '@mui/material/ListItemText'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 
+import { CustomStyleContext } from '@/shared/customStyleButtton'
+
+import { getContrastColor } from './outSideComponents/utils/b3CustomStyles'
+
 type ConfigProps = {
   name: string
   key: string | number
@@ -29,6 +33,12 @@ export default function B3DropDown<T>({
   value,
   handleItemClick,
 }: B3DropDownProps<T>) {
+  const {
+    state: {
+      portalStyle: { backgroundColor = '#FEF9F5' },
+    },
+  } = useContext(CustomStyleContext)
+
   const [open, setOpen] = useState<null | HTMLElement>(null)
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
@@ -51,6 +61,7 @@ export default function B3DropDown<T>({
         onClick={handleClick}
         sx={{
           pr: 0,
+          color: getContrastColor(backgroundColor),
         }}
       >
         <ListItemText primary={title} />

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -1,11 +1,22 @@
-import { BaseSyntheticEvent, useEffect, useRef, useState } from 'react'
+import {
+  BaseSyntheticEvent,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useForm } from 'react-hook-form'
 import FilterListIcon from '@mui/icons-material/FilterList'
-import { Box, IconButton } from '@mui/material'
-import { grey } from '@mui/material/colors'
+import { Box, IconButton, useTheme } from '@mui/material'
 
 import { B3CustomForm, B3Dialog, CustomButton } from '@/components'
 import { useMobile } from '@/hooks'
+import { CustomStyleContext } from '@/shared/customStyleButtton'
+
+import {
+  getContrastColor,
+  getHoverColor,
+} from '../outSideComponents/utils/b3CustomStyles'
 
 import B3FilterPicker from './B3FilterPicker'
 
@@ -44,6 +55,14 @@ function B3FilterMore<T, Y>({
   onChange,
   isShowMore = false,
 }: B3FilterMoreProps<T, Y>) {
+  const {
+    state: {
+      portalStyle: { backgroundColor = '#FEF9F5' },
+    },
+  } = useContext(CustomStyleContext)
+
+  const customColor = getContrastColor(backgroundColor)
+
   const [open, setOpen] = useState<boolean>(false)
   const [isFiltering, setIsFiltering] = useState<boolean>(false)
   const [filterCounter, setFilterCounter] = useState<number>(0)
@@ -64,6 +83,9 @@ function B3FilterMore<T, Y>({
 
   const [isMobile] = useMobile()
 
+  const theme = useTheme()
+  const primaryColor = theme.palette.primary.main
+
   useEffect(() => {
     if (cacheData) {
       Object.keys(cacheData).forEach((item: string) => {
@@ -145,8 +167,9 @@ function B3FilterMore<T, Y>({
               aria-label="edit"
               size="medium"
               sx={{
+                color: customColor,
                 ':hover': {
-                  backgroundColor: grey[100],
+                  backgroundColor: getHoverColor('#FFFFFF', 0.1),
                 },
               }}
             >
@@ -159,8 +182,9 @@ function B3FilterMore<T, Y>({
                 aria-label="edit"
                 size="medium"
                 sx={{
+                  color: customColor,
                   ':hover': {
-                    backgroundColor: grey[100],
+                    backgroundColor: getHoverColor('#FFFFFF', 0.1),
                   },
                 }}
               >
@@ -173,7 +197,7 @@ function B3FilterMore<T, Y>({
                   width: '20px',
                   height: '20px',
                   borderRadius: '50%',
-                  background: '#ff8a65',
+                  background: primaryColor || '#ff8a65',
                   fontSize: '12px',
                   ml: '5px',
                   justifyContent: 'center',

diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -1,15 +1,26 @@
 import { useContext } from 'react'
 import { Box } from '@mui/material'
 
+import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 
+import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
+
 import B3AccountInfo from './B3AccountInfo'
 
 export default function B3Mainheader({ title }: { title: string }) {
   const {
     state: { companyInfo, salesRepCompanyName, role },
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      portalStyle: { backgroundColor = '#FEF9F5' },
+    },
+  } = useContext(CustomStyleContext)
+
+  const customColor = getContrastColor(backgroundColor)
+
   return (
     <Box>
       <Box
@@ -26,7 +37,7 @@ export default function B3Mainheader({ title }: { title: string }) {
           sx={{
             fontSize: '20px',
             fontWeight: '500',
-            color: '#333333',
+            color: customColor || '#333333',
           }}
         >
           {+role === 3 &&
@@ -46,6 +57,7 @@ export default function B3Mainheader({ title }: { title: string }) {
             display: 'flex',
             alignItems: 'end',
             mb: '8px',
+            color: customColor,
           }}
         >
           {title}

diff --git a/apps/storefront/src/components/layout/B3MobileLayout.tsx b/apps/storefront/src/components/layout/B3MobileLayout.tsx
@@ -2,8 +2,11 @@ import { ReactNode, useContext, useState } from 'react'
 import { Close, Dehaze } from '@mui/icons-material'
 import { Badge, Box } from '@mui/material'
 
+import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 
+import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
+
 import B3AccountInfo from './B3AccountInfo'
 import B3Logo from './B3Logo'
 import B3Nav from './B3Nav'
@@ -24,6 +27,14 @@ export default function B3MobileLayout({
     state: { companyInfo, salesRepCompanyName, isAgenting, role },
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      portalStyle: { backgroundColor = '#FEF9F5' },
+    },
+  } = useContext(CustomStyleContext)
+
+  const customColor = getContrastColor(backgroundColor)
+
   return (
     <Box
       sx={{
@@ -46,7 +57,7 @@ export default function B3MobileLayout({
         <B3Logo />
 
         <Badge badgeContent={0} color="secondary">
-          <Dehaze onClick={openRouteList} />
+          <Dehaze onClick={openRouteList} sx={{ color: customColor }} />
         </Badge>
       </Box>
 
@@ -58,7 +69,7 @@ export default function B3MobileLayout({
           mb: '2vw',
           fontSize: '34px',
           fontWeight: '400',
-          color: '#263238',
+          color: customColor || '#263238',
         }}
       >
         {title}

diff --git a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts
@@ -1,5 +1,4 @@
 import { SnackbarOrigin } from '@mui/material'
-import { grey } from '@mui/material/colors'
 import { trim } from 'lodash'
 
 interface RGBColor {
@@ -76,21 +75,14 @@ const getContrastRatio = (foreground: string, background: string): number => {
 }
 
 export const getContrastColor = (color: string) => {
-  let brightness: string | undefined
-  const res = Object.keys(grey).find(
-    (key) => getContrastRatio(grey[key as keyof typeof grey], color) > 4.5
-  )
-  if (res) {
-    brightness = grey[res as keyof typeof grey]
-  } else {
-    const hex = color.replace('#', '')
-    const r = parseInt(hex.slice(0, 2), 16)
-    const g = parseInt(hex.slice(2, 4), 16)
-    const b = parseInt(hex.slice(4, 6), 16)
-    brightness = (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#000' : '#fff'
-  }
+  const contrastThreshold = 4.5
+  const blackContrast = getContrastRatio(color, '#000000')
+  const whiteContrast = getContrastRatio(color, '#FFFFFF')
 
-  return brightness || '#fff'
+  if (blackContrast >= contrastThreshold || whiteContrast < blackContrast) {
+    return '#000000'
+  }
+  return '#FFFFFF'
 }
 
 export const b3HexToRgb = (color: string, transparency?: number) => {

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -1,4 +1,10 @@
-import { ChangeEvent, MouseEvent, ReactElement, ReactNode } from 'react'
+import {
+  ChangeEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useContext,
+} from 'react'
 import {
   Box,
   Card,
@@ -13,6 +19,14 @@ import {
   TableRow,
 } from '@mui/material'
 
+import { useMobile } from '@/hooks'
+import { CustomStyleContext } from '@/shared/customStyleButtton'
+
+import {
+  b3HexToRgb,
+  getContrastColor,
+} from '../outSideComponents/utils/b3CustomStyles'
+
 import B3NoData from './B3NoData'
 
 export interface Pagination {
@@ -104,6 +118,16 @@ export function B3Table<T>({
   onClickRow,
   showRowsPerPageOptions = true,
 }: TableProps<T>) {
+  const {
+    state: {
+      portalStyle: { backgroundColor = '#FEF9F5' },
+    },
+  } = useContext(CustomStyleContext)
+
+  const customColor = getContrastColor(backgroundColor)
+
+  const [isMobile] = useMobile()
+
   const { offset, count, first } = pagination
   const clickableRowStyles =
     typeof onClickRow === 'function' ? MOUSE_POINTER_STYLE : undefined
@@ -184,10 +208,18 @@ export function B3Table<T>({
               labelRowsPerPage={labelRowsPerPage || 'per page:'}
               component="div"
               sx={{
+                color: isMobile
+                  ? b3HexToRgb(customColor, 0.87)
+                  : 'rgba(0, 0, 0, 0.87)',
                 marginTop: '1.5rem',
                 '::-webkit-scrollbar': {
                   display: 'none',
                 },
+                '& svg': {
+                  color: isMobile
+                    ? b3HexToRgb(customColor, 0.87)
+                    : 'rgba(0, 0, 0, 0.87)',
+                },
               }}
               count={count}
               rowsPerPage={first}
@@ -218,10 +250,14 @@ export function B3Table<T>({
               labelRowsPerPage={labelRowsPerPage || 'Cards per page:'}
               component="div"
               sx={{
+                color: customColor,
                 marginTop: '1.5rem',
                 '::-webkit-scrollbar': {
                   display: 'none',
                 },
+                '& svg': {
+                  color: customColor,
+                },
               }}
               count={count}
               rowsPerPage={first}

diff --git a/apps/storefront/src/components/ui/B3Select.tsx b/apps/storefront/src/components/ui/B3Select.tsx
@@ -6,6 +6,8 @@ import {
   SelectChangeEvent,
 } from '@mui/material'
 
+import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
+
 interface ConfigProps {
   labelName: string
   valueName: string
@@ -50,16 +52,36 @@ export default function B3Select<T extends string | undefined>({
     <FormControl
       variant="filled"
       sx={{
+        borderRadius: '4px',
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
         width: w || 120,
+        backgroundColor: '#efeae7',
+        '& .MuiInputBase-root.MuiFilledInput-root': {
+          backgroundColor: '#efeae7',
+        },
       }}
     >
-      <InputLabel id="demo-simple-select-filled-label">{label}</InputLabel>
+      <InputLabel
+        id="demo-simple-select-filled-label"
+        sx={{
+          color: getContrastColor('#efeae7'),
+        }}
+      >
+        {label}
+      </InputLabel>
       <Select
         labelId="demo-simple-select-filled-label"
         id="demo-simple-select-filled"
         value={value}
         size={size}
         onChange={handleSelectChange}
+        sx={{
+          color: getContrastColor('#efeae7'),
+          '& svg': {
+            color: getContrastColor('#efeae7'),
+          },
+        }}
       >
         {isFirstSelect && (
           <MenuItem value="">