@sonarsource/marketing-design-system
TypeScript icon, indicating that this package has built-in type declarations

3.5.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @sonarsource/marketing-design-system

Weekly Downloads

167

Version

3.5.1

License

MIT

Unpacked Size

412 kB

Total Files

147

Last publish

Collaborators

  • elorenzana-sonarsource
  • lpaulger_sonarsource
  • gabssnake
  • lucio.merotta.sonarsource
  • jcarsique-sonar
  • saberduck
  • elena-vilchik
  • andrea-guarino-sonarsource
  • gregaubert
  • sonar-jay
  • philippe-perrin-sonarsource
  • xay.tanovan
  • wouter-admiraal-sonarsource
  • mathieu-sonar
  • antonio.garcia.sonarsource
  • tomverin
  • yassin-kammoun-sonarsource
  • sonartech