@nuskin/foundation-theme v1.6.0

@nuskin/foundation-themes

This repository houses a collection of Nuskin themes. Intended for utilization by developers across various teams, these themes serve as a standardized design system to ensure a consistent and cohesive visual identity throughout the Nuskin website.

Supports Dark Mode:

Enhance the user experience with a seamlessly integrated dark mode feature.

NuskinThemeProvider for Theme Change:

The repository includes a NuskinThemeProvider that simplifies the process of dynamically changing themes.

Tailwind CSS Utilities:

Utility CSS classes from Tailwind CSS included to provide a robust set of styling options.

Latest Release

Released Versions

Installation Guide

Clone the repository to your local machine

git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-theme.git

Usage

The following example illustrates how to use this project

import { NextGenThemeProvider, forceForGoodTheme, FoundationTheme } from '@nuskin/foundation-theme';
import { NsButton } from '@nuskin/foundation-ui-components';

import Button from '@mui/material/Button';

export function App1(props) {
    const theme = useMemo(() => {
        if (props.theme === 'forceForGood') {
            return forceForGoodTheme;
        }
    }, props.theme);
    const { palette = {} } = theme || {};
    const colorVariables = Object.keys(palette) as FoundationTheme.PaletteColors[];
    return (
        <NextGenThemeProvider isSSR cacheKey="app" theme={theme}>
            {colorVariables?.map((color, index) => (
                <NsButton variant="contained" color={color} key={color + index}>
                  `Button ${index}`
                </NsButton>

            ))}
        </NextGenThemeProvider>
    );
}

Project Dependencies

Emotion Libraries

• @emotion/babel-plugin: ^11.11.0
• @emotion/cache: ^11.11.0
• @emotion/react: ^11.11.1
• @emotion/styled: ^11.11.0

Material-UI

• @mui/material: 5.14.14

Utility Libraries

• lodash: ^4.17.21
• ramda: ^0.29.1

Testing

We use Jest for testing our project. Below are the available test scripts:

• Run all tests and generate coverage report:**

  yarn test

• Run tests for a specific pattern (e.g., accordion/*):

  yarn run test:pattern

• Run only failed tests from the last test run:

  yarn run test:failed

• Generate and view code coverage report:

  yarn run test:coverage

• The yarn test script builds the project using Next.js before running Jest tests.

• Feel free to customize the test patterns or add additional options as needed.

Coverage Report:

After running tests, open the index.html file in the coverage directory to view the coverage report.

Notes

1. To opt out of theme switching between light and dark mode, pass the darkModeEnabled prop with a false value.

2. The following example shows how to retrieve colors using ColorUtils.color

import { ColorUtils } from '@nuskin/foundation-theme';

const color = ColorUtils.color('primary', 'main')(validTheme);

3. The theme repository offers style exports through a Universal Module Definition (UMD) file.

4. Additionally, it provides convenient access to styling capabilities via the Styled and globalStyled features directly from the theme.