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

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]};