Submarine Design System

https://nectar-emote-20777979.figma.site
Admin
Submarine Design System is a comprehensive design system with design tokens, UI components, and a...
Tokens:5,113
Snippets:57
Trust Score:6.7
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Tabler Icons package

Source: https://nectar-emote-20777979.figma.site/docs/icons

Commands to install the @tabler/icons-react package using common package managers.

```bash
npm install @tabler/icons-react
pnpm add @tabler/icons-react
yarn add @tabler/icons-react
```

--------------------------------

### Import and Configure Tabler Icons

Source: https://nectar-emote-20777979.figma.site/docs/icons

Examples of importing icons, adjusting size, stroke width, and color using Tailwind classes or CSS variables.

```jsx
import { IconHeart, IconStar, IconUser } from "@tabler/icons-react";

// Sizing
<IconHeart className="size-4" />
<IconHeart style={{ width: "var(--spacing-16)", height: "var(--spacing-16)" }} />

// Stroke
<IconHeart stroke={1.5} />
<IconHeart stroke={2} />

// Coloring
<span className="text-primary"><IconHeart /></span>
<IconHeart className="text-destructive" />
<IconHeart style={{ color: "var(--success)" }} />
```

--------------------------------

### Color Theme Structure and CSS Variables

Source: https://nectar-emote-20777979.figma.site/docs/colors

Demonstrates the three-layer color architecture using CSS. It shows how primitives (raw HEX values) are defined in `@theme`, referenced by semantic aliases using `var()` for dynamic theming (e.g., Light/Dark modes), and exposed via inline Tailwind classes.

```css
@theme { primitives }
:root { sémantique }
@theme inline { Tailwind classes }
```

--------------------------------

### Integrate Icons into Design System Components

Source: https://nectar-emote-20777979.figma.site/docs/icons

Demonstrates how to pass icons as props into custom design system components like buttons, badges, and inputs.

```jsx
<DSButton iconLeft={<IconPlus className="size-4" />}>
  Ajouter
</DSButton>

<DSBadge iconLeft={<IconStar style={{ width: "100%", height: "100%" }} />}>
  Favori
</DSBadge>

<DSInput prefixIcon={<IconSearch style={{ width: "100%", height: "100%" }} stroke={2} />} />
```

--------------------------------

### Generating Tailwind CSS Classes from Primitives

Source: https://nectar-emote-20777979.figma.site/docs/colors

Illustrates how primitive color values automatically generate Tailwind CSS classes. It highlights the convention used for naming these classes (e.g., `bg-neutral-200`, `text-primary-700`) and recommends using semantic aliases for better maintainability.

```css
/* Example of generated Tailwind classes */
.bg-neutral-200 { background-color: #E8E8ED; }
.text-primary-700 { color: #4F32AF; }
.border-error-500 { border-color: #F05242; }
```
Tokens:
Raw