yarn add sonar-design-system// App.tsx
import { ThemeProvider, Button } from 'sonar-design-system';
const App = () => (
<ThemeProvider>
<Button variant="primary">Primary Button</Button>
</ThemeProvider>
);# Test all components
yarn test
# Create a new build
yarn build
# Choose new version and publish build to repository
yarn publishyarn storybookyarn build-storybook
Commit to master
-
mercurydefault gemini
-
lightdefault dark
// App.tsx
import { ThemeProvider, Button } from 'sonar-design-system';
const App = () => (
<ThemeProvider theme="gemini" shade="dark">
<Button />
</ThemeProvider>
);// Button.tsx
import { useTheme } from 'sonar-design-system';
const Button = () => {
const { theme, shade, setTheme, setShade } = useTheme();
return <button />;
};import 'sonar-design-system/dist/fonts/maven-pro.woff2';
import 'sonar-design-system/dist/fonts/saira.woff2';import 'sonar-design-system/dist/css/fonts.css';