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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.4",
+    "version": "1.0.0-develop.5",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",
@@ -31,7 +31,10 @@
         "test:coverage": "yarn test --coverage",
         "test:watch": "jest --watch",
         "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build"
+        "build-storybook": "storybook build",
+        "export": "next export",
+        "prepare": "husky install",
+        "types:check": "tsc --pretty --noEmit"
     },
     "dependencies": {
         "@emotion/react": "^11.10.6",
@@ -39,8 +42,7 @@
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "5.4.2",
         "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "1.0.0-cft-33.12",
-        "@types/jest": "^29.5.0",
+        "@nuskin/foundation-theme": "1.0.0-develop.5",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",
@@ -69,8 +71,10 @@
         "@storybook/testing-library": "^0.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.0",
         "@types/lodash": "^4.14.191",
         "@types/node": "18.15.0",
+        "@types/ramda": "^0.29.3",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
         "@types/react-slick": "^0.23.10",
@@ -86,6 +90,7 @@
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-storybook": "^0.6.11",
+        "husky": "^8.0.0",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "storybook": "^7.0.7"

package/src/common/accordion/specs/NsAccordion.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@/test-utils/index';
-import { NsAccordion, NsAccordionProps } from '@/common/index';
+import { AccordionVariant, NsAccordion, NsAccordionProps } from '@/common/index';
 
 const generateContentArray = (count: number) => {
     const arr = [] as NsAccordionProps['contentArray'];
@@ -22,6 +22,7 @@ describe('NsAccordion', () => {
         },
         allowMultipleExpanded: false,
         contentArray,
+        variant: AccordionVariant.Basic,
     };
 
     it('renders without error', () => {
@@ -68,6 +69,7 @@ describe('NsAccordion', () => {
             },
             allowMultipleExpanded: false,
             contentArray,
+            variant: AccordionVariant.Basic,
         };
         const { getAllByText } = render(<NsAccordion {...defaultProps} allowMultipleExpanded />);
         const [title1, title2, title3] = getAllByText(/Title /i);

package/src/common/accordion/specs/NsAccordionHeader.spec.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionHeader } from '@/common/index';
+import { NsAccordionHeader, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionHeader', () => {
     it('renders title correctly', () => {
         const onClick = jest.fn();
         const title = 'Section Header';
-        const { getByText } = render(<NsAccordionHeader title={title} onClick={onClick} />);
+        const { getByText } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title={title}
+                onClick={onClick}
+            />
+        );
         expect(getByText(title)).toBeInTheDocument();
     });
 
     it('calls onClick handler when clicked', () => {
         const onClick = jest.fn();
-        const { container } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        const { container } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+            />);
         const header = container.querySelector('header');
         if (header) {
             fireEvent.click(header);
@@ -25,6 +36,7 @@ describe('NsAccordionHeader', () => {
         const onClick = jest.fn();
         const { container } = render(
             <NsAccordionHeader
+                variant={AccordionVariant.Basic}
                 title="Section Header"
                 additionalProps={{ className: additionalClassName }}
                 onClick={onClick}
@@ -35,13 +47,17 @@ describe('NsAccordionHeader', () => {
 
     it('renders with expanded class when isOpen is true', () => {
         const onClick = jest.fn();
-        const { container } = render(<NsAccordionHeader title="Section Header" isOpen onClick={onClick} />);
+        const { container } = render(
+            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" isOpen onClick={onClick} />
+        );
         expect(container.querySelector('header')).toHaveClass('expanded');
     });
 
     it('renders with header icon', () => {
         const onClick = jest.fn();
-        const { getByTestId } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        const { getByTestId } = render(
+            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" onClick={onClick} />
+        );
         expect(getByTestId('icon')).toBeInTheDocument();
     });
 });

package/src/common/accordion/specs/NsAccordionItem.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionItem } from '@/common/index';
+import { NsAccordionItem, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionItem', () => {
     const title = 'Accordion Section Title';
@@ -8,7 +8,13 @@ describe('NsAccordionItem', () => {
 
     it('renders title correctly', () => {
         const { getByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
@@ -16,7 +22,13 @@ describe('NsAccordionItem', () => {
     it('calls toggleOpen function when clicked on the section header', () => {
         const toggleOpen = jest.fn();
         const { getByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={toggleOpen} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={toggleOpen}
+                title={title}
+                content={content}
+            />
         );
         fireEvent.click(getByText(title));
         expect(toggleOpen).toHaveBeenCalledTimes(1);
@@ -24,14 +36,26 @@ describe('NsAccordionItem', () => {
 
     it('renders content when isOpen is true', () => {
         const { getByText } = render(
-            <NsAccordionItem isOpen={true} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={true}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(getByText(content)).toBeInTheDocument();
     });
 
     it('does not render content when isOpen is false', () => {
         const { queryByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(queryByText(content)).toBeNull();
     });

package/src/common/accordion/specs/NsCollapse.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse } from '@/common/index';
+import { NsCollapse, AccordionVariant } from '@/common/index';
 
 describe('NsCollapse', () => {
     it('renders children when isOpen is true', () => {
         const { getByText } = render(
-            <NsCollapse isOpen>
+            <NsCollapse isOpen variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>
@@ -16,7 +16,7 @@ describe('NsCollapse', () => {
 
     it('does not render children when isOpen is false', () => {
         render(
-            <NsCollapse isOpen={false}>
+            <NsCollapse isOpen={false} variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>
@@ -27,7 +27,7 @@ describe('NsCollapse', () => {
     it('renders with additional class name', () => {
         const additionalClassName = 'custom-class';
         const { container } = render(
-            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen>
+            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>

package/src/common/accordion/specs/NsToggleSection.spec.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
+
+import { AccordionVariant, NsToggleSection } from '@/common/index';
+
 import { render, fireEvent } from '@/test-utils/index';
-import { NsToggleSection } from '@/common/index';
 
 describe('NsToggleSection', () => {
     const title = 'Toggle Section Title';
     const content = 'Toggle Section Content';
 
     it('renders title correctly', () => {
-        const { getByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
+        const { getByText } = render(
+            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+        );
         expect(getByText(title)).toBeInTheDocument();
     });
 
     it('toggles content visibility when clicked on the section header', () => {
-        const { getByText, queryByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
-
+        const { getByText, queryByText } = render(
+            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+        );
         expect(queryByText(content)).toBeNull();
         fireEvent.click(getByText(title));
         expect(getByText(content)).toBeInTheDocument();
@@ -23,7 +28,7 @@ describe('NsToggleSection', () => {
 
     it('sets defaultOpen prop correctly', () => {
         const { getByText } = render(
-            <NsToggleSection title={title} defaultOpen>
+            <NsToggleSection variant={AccordionVariant.Basic} title={title} defaultOpen>
                 {content}
             </NsToggleSection>
         );

package/src/common/alert/NsAlert.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, fireEvent, screen, act } from '@/test-utils/index';
-// import { act } from 'react-dom/test-utils';
 import NsAlert from './NsAlert';
 
 const addEventListenerMock = jest.spyOn(window, 'addEventListener');

package/src/common/alert/NsAlert.styled.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
-import { styled, css } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
+import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+
+const { color } = ColorUtils;
 
 import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
 const gutter_width = '10px';
@@ -43,7 +43,7 @@ export const AlertContainer = styled.div<AlertContainerParams>`
     }
     text-align: left;
 `;
-
+//[Todo-Arun] - Fonts should be driven through @next/font and according to theme
 const fontFamilyStyles = css`
     font-family: 'proxima-nova', 'OpenSans', 'Pridi', 'NotoSans', 'NotoSansSC', 'NotoSansHebrew', 'NotoSansJapanese',
         'Hiragino Kaku Gothic Pro', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'source-han-sans-japanese',
@@ -57,11 +57,11 @@ export const Alert = styled.div<AlertParams>`
     grid-template-rows: [row1] auto;
     grid-auto-row: auto;
     grid-auto-flow: row;
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-    border: 1px solid ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    background-color: ${color('primary', 'white')};
+    border: 1px solid ${color('primary', 'black')};
     min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
     padding: ${({ type }) => TypeMap?.[type]?.['padding']};
-    color: ${({ context, theme }) => getAppColor(theme, contextType?.[context] as FoundationTheme.AppColors, '40')} };
+    color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
 `;
 
 export const AlertCloseButton = styled.div`
@@ -92,7 +92,7 @@ export const AlertHead = styled.div`
     justify-content: center;
     span {
         ${fontFamilyStyles}
-        color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+        color: ${color('primary', 'black')};
         font-weight: 600;
         font-size: 18px;
         line-height: 20px;
@@ -101,14 +101,14 @@ export const AlertHead = styled.div`
 
 export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
     grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
 `;
 
 export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
     ${fontFamilyStyles}
     font-weight: 300;

package/src/common/alert/NsAlert.tsx

@@ -1,5 +1,6 @@
-/* eslint-disable react/require-default-props */
 import React, { useEffect, useState } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
 import {
     AlertContainer,
     Alert,
@@ -13,7 +14,6 @@ import {
 import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import { NsIconNameType } from '../icon/types';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
 
 const Header: React.FC<HeaderProps> = ({ children, head }) => (
     <>
@@ -57,7 +57,7 @@ export default function NsAlert({
     onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const [windowWidth, setWindowWidth] = useState(0);
 
     const hasDismissListener = typeof onDismiss === 'function';
 
@@ -106,6 +106,7 @@ export default function NsAlert({
     }, [context, type]);
 
     useEffect(() => {
+        setWindowWidth(window?.innerWidth);
         window.addEventListener('resize', handleResize);
         return () => {
             window.removeEventListener('resize', handleResize);

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,9 +1,10 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-const { getPaletteColor } = ColorUtils;
 
+//[TODO-Arun] - Use from custom color variables
 const MAGENTA_COLOR = '#bb29bb';
 
+const { color, paletteColor } = ColorUtils;
+
 export const AuthDropdownContainer = styled.div`
     position: relative;
     display: inline-block;
@@ -19,7 +20,7 @@ export const AuthDropdown = styled.div`
     z-index: 600;
     top: calc(100% + 18px);
     right: 5%;
-    box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     transition: all 0.15s ease-in-out;
     padding: 25px;
 `;
@@ -39,21 +40,21 @@ export const Triangle = styled.div`
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+        background-color: ${color('primary', 'white')};
         transform: rotate(45deg);
         top: 17px;
         left: 5px;
-        box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+        box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
 
-export const AuthHead = styled.div`
+export const AuthHead = styled.div<{ darkModeEnabled: boolean }>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
 export const Button = styled.div`
@@ -69,17 +70,17 @@ export const SignInButton = styled(Link)`
     padding: 13px;
     width: 100%;
     background-color: ${MAGENTA_COLOR};
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    color: ${color('primary', 'white')};
     border: 0;
     font-size: 16px;
     &:hover {
-        background-color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        background-color: ${color('neutral', '70')};
     }
 `;
 
 export const SignUpLinkContainer = styled.div`
     margin-top: 15px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'main')};
+    color: ${color('primary', 'main')};
     font-size: 13px;
     line-height: 16px;
     text-align: left;
@@ -95,7 +96,7 @@ export const SignUpLink = styled(Link)`
     position: relative;
     transition: all 0.15s ease-in-out;
     &:hover {
-        color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        color: ${color('neutral', '70')};
         font-size: 14px;
     }
     &:hover::after {

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -20,6 +20,7 @@ const NsAuthDropdown = ({
     signUpLinkPrefixText,
     titleText,
     closeOnMouseLeave = false,
+    darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -35,7 +36,7 @@ const NsAuthDropdown = ({
 
     return (
         <AuthDropdownContainer>
-            <AuthHead data-testid="auth-head" onClick={handleToggle}>
+            <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (

package/src/common/auth-dropdown/types.d.ts

@@ -1,3 +1,5 @@
+import { AdditionalProps } from '../common.types';
+
 export type NsAuthDropdownProps = {
     signInRedirectLink: string;
     signUpRedirectLink: string;
@@ -6,4 +8,4 @@ export type NsAuthDropdownProps = {
     signUpLinkPrefixText: string;
     titleText: string;
     closeOnMouseLeave?: boolean;
-};
+} & AdditionalProps;

package/src/common/brand-components/NsBrandComponent.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren, useCallback } from 'react';
+
 import NSLogoHorizontal from './icons/NSLogoHorizontal';
 import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
 import LogoContainer from './NsBrandContanier.styled';
+
 import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
@@ -19,6 +21,7 @@ const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
+        // [Todo - Add neutral as FoundationTheme.PaletteColor]
         return <BrandComponent color={color as any} />;
     }, [color, variant]);
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -12,12 +12,14 @@ import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
+const { color } = ColorUtils;
+
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
     const { items, iconVisibility } = props;
 
     const theme = useTheme();
-    const neutral80 = ColorUtils.getAppColor(theme, 'neutral', '80') as string;
-    const neutral60 = ColorUtils.getAppColor(theme, 'neutral', '60') as string;
+    const neutral80 = color('neutral', '80')(theme);
+    const neutral60 = color('neutral', '60')(theme);
 
     const getLabel = (item: ItemProps) => {
         if (item?.href) {

package/src/common/button/NsButton.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
+import { nuskinTheme } from '@nuskin/foundation-theme';
 import Button from './NsButton';
 
 const { palette } = nuskinTheme;

package/src/common/button/NsButton.stories.tsx

@@ -37,7 +37,7 @@ export const button: Story = {};
 
 export const IconOnlyButton: Story = {
     render: (args) => (
-        <NsButton {...args} iconOnly>
+        <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
     ),

package/src/common/button/NsButton.styled.tsx

@@ -1,10 +1,11 @@
 import { Button as MUIButton } from '@mui/material';
 
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/button';
+
 import { NsButtonProps } from './types.d';
 
-const { getPaletteColor, getButtonStateColor } = ColorUtils;
+const { buttonColor, paletteColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     const { config } = theme || {};
@@ -18,8 +19,8 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
         border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
     :disabled {
-        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
-        color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
+        background-color: ${(btnProps) => buttonColor(btnProps?.color, 'disabled')};
+        color: ${(btnProps) => buttonColor(btnProps?.color, 'disabledText')};
     }
     ${({ theme: { config }, size }) => {
         return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
@@ -27,37 +28,38 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
     ${({ theme: { config }, size }) => {
         return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
     }}
-    ${({ variant, theme, color = 'primary' }) => {
+    ${({ variant, theme, color = 'primary', darkModeEnabled }) => {
         return variant === 'contained'
             ? `
-                background-color: ${getPaletteColor(theme, color)};
+                background-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+                color: ${paletteColor(color, 'contrastText')({ theme, darkModeEnabled })} !important;
                 :hover {
-                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
+                    background-color: ${buttonColor(color, 'hovered')({ theme })};
                 }
                 :active {
-                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
+                    background-color: ${buttonColor(color, 'pressed')({ theme })};
                 }
                 :focus {
-                    background-color: ${getButtonStateColor(theme, color, 'focused')};
+                    background-color: ${buttonColor(color, 'focused')({ theme })};
                 }
             `
             : '';
     }}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'outlined' &&
         `
-            border-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            border-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                border-color: ${getButtonStateColor(theme, color, 'hovered')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'hovered')({ theme })};
+                color: ${paletteColor(color)({ theme, darkModeEnabled })};
             }
             :active {
-                border-color: ${getButtonStateColor(theme, color, 'pressed')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'pressed')({ theme })};
+                color: ${paletteColor(color)({ theme })};
             }
         `}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'text' &&
         `
             text-decoration: underline 1px !important;
@@ -65,15 +67,15 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
             padding: 0;
             min-width: auto;
             background-color: transparent !important;
-            text-decoration-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            text-decoration-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                color:  ${getButtonStateColor(theme, color, 'hovered')};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
+                color:  ${buttonColor(color, 'hovered')({ theme })};
+                text-decoration-color:  ${buttonColor(color, 'hovered')({ theme })};
             }
             :active {
-                color: ${getPaletteColor(theme, color)};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
+                color: ${paletteColor(color)};
+                text-decoration-color:  ${buttonColor(color, 'pressed')({ theme })};
             }
         `}
   ${({ iconOnly }) =>