@nuskin/foundation-theme
@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.gitUsage
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
Testing
We use Jest for testing our project. Below are the available test scripts:
Run all tests and generate coverage report:**
yarn testRun tests for a specific pattern (e.g., accordion/*):
yarn run test:patternRun only failed tests from the last test run:
yarn run test:failedGenerate and view code coverage report:
yarn run test:coverageThe 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);