@orca-so/design-system

Orca Design System

This is some short description.

This repository contains proprietary fonts that should be removed before open-sourcing this repo.

What is the Orca Design System?

Two styles of components are available: Base and Pro. Base friendly and inviting. Pro is more serious and business-like.

Using the Orca Design System

Including the Orca Design System in your project is easy. Simply add the following to your project's package.json file:

npm i @orca-so/design-system

yarn add @orca-so/design-system

Add our tailwind configuration to your tailwind config file:

module.exports = {
  content: [
    // ...
    "./node_modules/@orca-so/design-system/dist/**/*.{html,ts,tsx,js,jsx}"
  ],
  presets: [
    require('@orca-so/design-system/dist/tailwind.config.js')
  ],
  // ...
}

Add the SuisseIntl font to your project (optional):

@layer base {
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 400;
    src: url("path/to/SuisseIntl-Regular-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 500;
    src: url("path/to/SuisseIntl-Medium-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 600;
    src: url("path/to/SuisseIntl-SemiBold-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntlMono";
    font-weight: 400;
    src: url("path/to/SuisseIntlMono-Regular-WebS.woff") format("woff");
  }
}

Then, you can import the components you need:

import { Button, Colors, Icon } from '@orca-so/design-system';
const Component = () => (
  <div style={{ backgroundColor: Colors.Manta }} className="bg-manta">
    <Button>Click Me</Button>
    <Icon name="orca" />
  </div>
);

This library supports tree-shaking, so you can import only the components you need.

Development and Contributing

• git clone
• yarn install
• yarn dev

Using a local version of design system

If you want to use a local version of the design system in your project, you can do so by following these steps.

1. Add the following to your project's package.json file:

"resolutions": {
  "@orca-so/design-system": "portal:../design-system"
}

1. Run yarn install in your project.
2. Run tsc --watch in the design system project to compile the TypeScript files and watch for changes.
3. Run next dev (or whatever development command) in the in your project. Hot reload should work when using next.