@nuskin/foundation-ui-components 1.0.0-develop.4 → 1.0.0-develop.6

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -1,5 +1,5 @@
 import { FormControl } from '@mui/material';
-import { NsRadioGroupProps } from './types';
+
 import {
     StyledHelperText,
     StyledFormControlLabel,
@@ -9,19 +9,33 @@ import {
 } from './NsRadioGroup.styled';
 import { NsLabel } from '../label';
 
+import { NsRadioGroupProps } from './types';
+
 const NsRadioGroup = (props: NsRadioGroupProps) => {
-    const { items, additionalSlot, label, onChange, color, disable, size, additionalProps, labelFontSize } = props;
+    const {
+        items,
+        additionalSlot,
+        label,
+        onChange,
+        color,
+        disable,
+        size,
+        additionalProps,
+        labelFontSize,
+        darkModeEnabled = true
+    } = props;
 
     return (
         <>
             <FormControl data-testid={additionalProps?.testid}>
                 <NsLabel size={labelFontSize}>{label}</NsLabel>
                 <StyledRadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
+                    aria-labelledby="radio-buttons-group-label"
                     defaultValue={items?.[0]?.value}
                     name="radio-buttons-group"
                     onChange={onChange}
                     color={color}
+                    darkModeEnabled={darkModeEnabled}
                 >
                     {items?.map((item, index) => (
                         <StyledFormControlLabel
@@ -31,13 +45,14 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
                             control={<StyledRadio className="custom-radio" />}
                             label={item?.label}
                             disabled={disable}
+                            darkModeEnabled={darkModeEnabled}
                         />
                     ))}
                 </StyledRadioGroup>
             </FormControl>
-            {additionalSlot && <StyledHelperText className={`ml-${size}`}>
+            {additionalSlot ? <StyledHelperText className={`ml-${size}`}>
                 <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
-            </StyledHelperText>}
+            </StyledHelperText> : null}
 
         </>
     );

package/src/common/radiogroup/types.d.ts

@@ -1,16 +1,17 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
 import { AdditionalProps } from '../common.types';
 
-export type NsRadioGroupProps = AdditionalProps & {
+export type NsRadioGroupProps = {
     disable : boolean ;
     name : string; 
     additionalSlot : string;
     label : string ;
     items: RadioItems[] ;
-    color : string;
+    color: FoundationTheme.PaletteColors;
     size : number;
     labelFontSize:number,
     onChange : () => void;
-}
+} & AdditionalProps;
 
 export type RadioItems = {
     label : string ; 

package/src/common/select/NsSelect.styled.tsx

@@ -1,5 +1,5 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const SelectContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -14,8 +14,8 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     justify-content: space-between;
     align-items: center;
     border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+        type === 'outlined' ? `1px solid ${color('primary', 'black')({ theme })}` : 'none'};
+    color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
     z-index: 2;
@@ -28,38 +28,34 @@ export const SelectButton = styled.div`
 export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
-    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     padding: 0;
     margin: 0;
     width: -webkit-fill-available;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary')};
+    background-color: ${paletteColor('primary', 'contrastText')};
 `;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
 
-const getDividerColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const dividerColor = isLight ? getAppColor(theme, 'neutral', '30') : getAppColor(theme, 'neutral', '20');
+const getDividerColor = (props: { theme: FoundationTheme.Theme}) => {
+    const dividerColor = !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
     return dividerColor;
 };
-const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
+
+const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
+    const bgColor = !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
     return bgColor;
 };
+
 export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
      ${({ showListDivider, isSelected, theme }) => `
         cursor: pointer;
         padding: 5px 0;
-        border-bottom: 1px solid ${showListDivider ? getDividerColor(theme) : 'none'};
-        background-color: ${isSelected ? getPaletteColor(theme, 'primary') : 'white'};
+        border-bottom: 1px solid ${showListDivider ? getDividerColor({ theme }) : 'none'};
+        background-color: ${isSelected ? paletteColor('primary')({ theme }) : 'white'};
         color: ${isSelected ? 'white' : 'black'};
 
         &:hover {
-            background-color: ${getListBgColor(theme)};
+            background-color: ${getListBgColor({ theme })};
         }
 
         &:last-child {
@@ -71,13 +67,13 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelect
 export const ListItem = styled.div<{ isSelected: boolean}>`
     padding: 5px 10px;
     border-left: ${({ isSelected, theme }) =>
-        isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none'};
+        isSelected ? `2px solid ${paletteColor('primary')({ theme })}` : 'none'};
     background-color: ${({ isSelected, theme }) =>
-        isSelected ? getPaletteColor(theme, 'primary', 'main') : 'white'};
+        isSelected ? paletteColor('primary', 'main')({ theme }) : 'white'};
     color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
     &:hover {
         background-color: ${({ isSelected, theme }) =>
-        isSelected ? getPaletteColor(theme, 'primary', 'main') : getListBgColor(theme)};
+        isSelected ? paletteColor('primary')({ theme }) : getListBgColor({ theme })};
             font-weight: bold; 
     }
 `;
@@ -85,5 +81,5 @@ export const ListItem = styled.div<{ isSelected: boolean}>`
 export const SelectLabel = styled.label`
     display: block;
     margin-bottom: 5px;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')} !important;
 `;

package/src/common/table/NsTable.styled.ts

@@ -1,7 +1,7 @@
 // TODO: const ariel = #f8e9f8;
 
-import { styled } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
 import { 
     Table,
     TableContainer,
@@ -12,8 +12,10 @@ import {
 import Pagination from '@mui/material/Pagination';
 import LinearProgress from '@mui/material/LinearProgress';
 
+const { color } = ColorUtils;
+
 export const StyledTableContainer= styled(TableContainer)`
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    background-color: ${color('primary', 'white')};
 `;
 
 export const StyledTable = styled(Table)`
@@ -21,53 +23,54 @@ export const StyledTable = styled(Table)`
 `;
 
 export const StyledTableSortLabel = styled(TableSortLabel)`
-  font-size: 12px;
-  text-transform: uppercase;
-  font-weight: 600;
-  line-height: 16px;
-  letter-spacing: 0.05em;
-  color: rgba(0, 0, 0, 0.54);
-  &:hover {
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-  }
-  `;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.05em;
+    color: rgba(0, 0, 0, 0.54);
+    &:hover {
+    color: ${color('primary', 'black')};
+    }
+`;
 
 export const StyledTableLabel = styled.span`
-  font-size: 12px;
-  text-transform: uppercase;
-  font-weight: 700;
-  line-height: 16px;
-  letter-spacing: 0.05em;
-  color: rgba(0, 0, 0, 0.54);
-  &:hover {
-    cursor: default;
-  }
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0.05em;
+    color: rgba(0, 0, 0, 0.54);
+    &:hover {
+        cursor: default;
+    }
 `;
 
 export const StyledPageComponent = styled.div`
-  background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    background-color: ${color('primary', 'white')};
 `;
 
 export const StyledEmptyRow = styled(TableRow)<{emptyRows: number}>`
-  height: ${({ emptyRows }) => 48 * emptyRows}px;
+    height: ${({ emptyRows }) => 48 * emptyRows}px;
 `;
 
+// [Todo-Arun] - Move f8e9f8 to custom color palette
 export const StyledTableRow  = styled(TableRow)`
-  &:hover {
-    background-color: #f8e9f8 !important;
-  }
+    &:hover {
+        background-color: #f8e9f8 !important;
+    }
 `;
 
 export const StyledTableLastCell = styled(TableCell)`
-  display: flex;
-  height: 49px;
-  align-items: center;
-  padding: 0 24px;
-  margin-bottom: -0.5px;
+    display: flex;
+    height: 49px;
+    align-items: center;
+    padding: 0 24px;
+    margin-bottom: -0.5px;
 
-  .action {
-    margin-left: auto;
-  }
+    .action {
+        margin-left: auto;
+    }
 `;
 
 export const StyledOriginalTableCell = styled(TableCell)`
@@ -76,43 +79,43 @@ export const StyledOriginalTableCell = styled(TableCell)`
 `;
 
 export const StyledPagination = styled(Pagination)`
-  .MuiPagination-ul {
-    display: flex;
-    justify-content: flex-end;
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-  }
-  & .MuiPaginationItem-previousNext {
-    margin: 0.3rem 10px;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-  }
-  & .MuiPaginationItem-page {
-    border-radius: 0px;
-    width: auto;
-    min-width: 34px;
-    padding: 0 5px;
-    font-size: 16px;
-    line-height: 17px;
-    border-color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-  }
-  & .MuiPaginationItem-root.Mui-selected {
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-  }
+    .MuiPagination-ul {
+        display: flex;
+        justify-content: flex-end;
+        background-color: ${color('primary', 'white')};
+    }
+    & .MuiPaginationItem-previousNext {
+        margin: 0.3rem 10px;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 4px;
+    }
+    & .MuiPaginationItem-page {
+        border-radius: 0px;
+        width: auto;
+        min-width: 34px;
+        padding: 0 5px;
+        font-size: 16px;
+        line-height: 17px;
+        border-color: ${color('primary', 'black')};
+    }
+    & .MuiPaginationItem-root.Mui-selected {
+        background-color: ${color('primary', 'black')};
+        color: ${color('primary', 'white')};
+    }
 `;
 
 export const StyledExpandCell= styled(TableCell)`
-  padding-bottom: 0;
-  padding-top: 0;
-  &.remove {
-    border: 0;
-  }
+    padding-bottom: 0;
+    padding-top: 0;
+    &.remove {
+        border: 0;
+    }
 `;
 
 export const StyledProgressCell = styled(TableCell)`
-  padding: 0;
-  border: 0;
+    padding: 0;
+    border: 0;
 `;
 
 export const StyledLinearProgress = styled(LinearProgress)`

package/src/common/text-strip/NsTextStrip.tsx

@@ -8,14 +8,16 @@ import React from 'react';
 import { NsTextStripProps } from './types.d';
 import { NsTypography } from '../typography';
 import { NsLink } from '../link';
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
+const { isDarkMode, paletteColor, color } = ColorUtils;
+
 const StyledHeader = styled.header`
-    background: ${({ theme }) => (getIsLight(theme) ? '#f5f5f5' : getPaletteColor(theme, 'primary', 'contrastText'))};
+    background: ${(props) => (
+        !isDarkMode(props)
+            ? color('primary', 'gray')
+            : paletteColor('primary', 'contrastText')
+    )};
     display: flex;
     flex-direction: column;
     min-height: 60px;
@@ -25,6 +27,7 @@ const StyledHeader = styled.header`
         font-weight: 600;
     }
 `;
+
 const NsTextStrip = (props: NsTextStripProps) => {
     const { alignment = 'center', text, description, link, className = '' } = props;
 

package/src/common/typography/Typography.styled.tsx

@@ -1,7 +1,7 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsTypographyProps } from './types.d';
 
-const { getPaletteColor } = ColorUtils;
+const { paletteColor } = ColorUtils;
 
 const variantStyles = {
     h1: 'font-size: 36px; line-height: 44px;',
@@ -29,8 +29,8 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, theme, colorOverride }) =>
-        colorOverride?.startsWith('#') ? colorOverride : getPaletteColor(theme, color)};
+    color: ${({ color, colorOverride }) =>
+        colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};