@sonarsource/marketing-design-system

Sonar Design System

View Storybook

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 default
• gemini

Available shades:

• light default
• dark

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';