@riverty/design-tokens

Riverty Design System: Design Tokens

Riverty, your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.

Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.

→ designsystem.riverty.com

Contributing

We welcome contributions to the Design Tokens package! Design tokens are the foundation of our design system.

Development Setup

cd packages/design-tokens
npm install
npm run build  # Generate tokens

Token Structure

Tokens are organized in JSON files:

tokens/
├── base_tokens.json          # Primitive values (core colors, base sizes)
├── color_tokens.json         # Color system (semantic colors)
├── typography_tokens.json    # Typography scale
├── spacing_tokens.json       # Spacing system
└── ...

Editing Tokens

• Edit JSON files in the tokens/ directory:

{
  "color": {
    "primary": {
      "value": "#0066CC",
      "type": "color",
      "description": "Primary brand color"
    }
  }
}

• Build to generate outputs:

  npm run build
  

  This generates:

  • lib/tokens.css - CSS custom properties
  • lib/tokens-base.scss - SCSS variables
  • Other formats

• Test in dependent packages:

  • @riverty/css-framework
  • @riverty/web-components

Naming Conventions

Follow Style Dictionary naming:

• Primitive tokens: base-color-blue-500
• Semantic tokens: color-primary, spacing-md
• Component tokens: button-padding-horizontal

Best Practices

• Use semantic names for application tokens
• Reference primitive tokens in semantic tokens
• Document the purpose of each token
• Consider dark mode when adding color tokens
• Maintain consistency across token categories
• Test generated outputs

Token Types

• Color: Brand colors, semantic colors, state colors
• Spacing: Margin, padding, gap values
• Typography: Font families, sizes, weights, line heights
• Border: Radius, width
• Shadow: Box shadows, elevation
• Animation: Durations, easings

Testing Changes

After modifying tokens:

• Build design tokens: npm run build
• Build dependent packages (CSS, components)
• Check visual regression in Storybook
• Document breaking changes

For complete contribution guidelines, see CONTRIBUTING.md in the repository root.