0.9.0 • Published 2 years ago
sonar-design-system v0.9.0
Sonar Design System
Usage
Installation
yarn add sonar-design-system
Implementation
// App.tsx
import { ThemeProvider, Button } from 'sonar-design-system';
const App = () => (
<ThemeProvider>
<Button variant="primary">Primary Button</Button>
</ThemeProvider>
);
Releases
# Test all components
yarn test
# Create a new build
yarn build
# Choose new version and publish build to repository
yarn publish
Storybook
Start
yarn storybook
Build
yarn build-storybook
Deploy
Commit to master
Theming
Available themes:
mercury
defaultgemini
Available shades:
light
defaultdark
Overwrite default theme
// App.tsx
import { ThemeProvider, Button } from 'sonar-design-system';
const App = () => (
<ThemeProvider theme="gemini" shade="dark">
<Button />
</ThemeProvider>
);
Get or modify current theme and shade
// Button.tsx
import { useTheme } from 'sonar-design-system';
const Button = () => {
const { theme, shade, setTheme, setShade } = useTheme();
return <button />;
};
Fonts
Import directly
import 'sonar-design-system/dist/fonts/maven-pro.woff2';
import 'sonar-design-system/dist/fonts/saira.woff2';
Import by CSS
import 'sonar-design-system/dist/css/fonts.css';
0.8.9
2 years ago
0.8.8
2 years ago
0.9.0
2 years ago
0.8.7
2 years ago
0.8.5
2 years ago
0.8.4
2 years ago
0.8.6
2 years ago
0.8.3
2 years ago
0.8.2
2 years ago
0.8.1
2 years ago
0.8.0
2 years ago
0.7.4
2 years ago
0.7.3
2 years ago
0.7.2
2 years ago
0.7.1
2 years ago
0.7.0
2 years ago
0.6.9
2 years ago
0.6.8
2 years ago
0.6.7
2 years ago
0.6.6
2 years ago
0.6.5
2 years ago
0.6.4
2 years ago
0.6.2
2 years ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.9
2 years ago
0.5.8
2 years ago
0.5.7
2 years ago
0.5.6
2 years ago
0.5.0
2 years ago
0.4.9
2 years ago
0.5.5
2 years ago
0.5.4
2 years ago
0.5.3
2 years ago
0.5.1
2 years ago
0.4.8
2 years ago
0.4.7
2 years ago
0.4.6
2 years ago
0.4.5
2 years ago
0.4.4
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.0
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.9
2 years ago
0.2.8
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago