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.
Enhance the user experience with a seamlessly integrated dark mode feature.
The repository includes a NuskinThemeProvider that simplifies the process of dynamically changing themes.
Utility CSS classes from Tailwind CSS included to provide a robust set of styling options.
git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-theme.git
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>
);
}
- @emotion/babel-plugin: ^11.11.0
- @emotion/cache: ^11.11.0
- @emotion/react: ^11.11.1
- @emotion/styled: ^11.11.0
- @mui/material: 5.14.14
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.
After running tests, open the index.html
file in the coverage
directory to view the coverage report.
1. To opt out of theme switching between light and dark mode, pass the darkModeEnabled
prop with a false
value.
import { ColorUtils } from '@nuskin/foundation-theme';
const color = ColorUtils.color('primary', 'main')(validTheme);