Riverty Design System: CSS Framework

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

Note: @riverty/css-framework seamlessly incorporates @riverty/design-tokens and @riverty/fonts, no separate installation required.

Contributing

We welcome contributions to the CSS Framework! Here's how to get started:

Development Setup

cd packages/css
npm install
npm run build  # Compile SCSS to CSS

Structure

src/
├── main.scss               # Main entry point
├── _breakpoints.scss       # Responsive breakpoints
├── _components.scss        # Component styles
├── _typography.scss        # Typography system
└── _table.scss            # Table styles

Working with Styles

1. Use design tokens for all values:

@use '@riverty/design-tokens/lib/tokens-base' as tokens;

.button {
  background-color: tokens.$color-primary;
  padding: tokens.$spacing-md;
  border-radius: tokens.$border-radius-sm;
}

2. Follow BEM methodology:

.card {
  &__header { }
  &__body { }
  &__footer { }
  
  &--highlighted { }
}

3. Ensure responsive design:

.element {
  // Mobile first
  width: 100%;
  
  @media (min-width: tokens.$breakpoint-md) {
    width: 50%;
  }
}

Best Practices

• Always use design tokens (never hardcode values)
• Follow BEM naming convention
• Write mobile-first CSS
• Support dark mode via CSS custom properties
• Test across browsers
• Ensure accessibility (focus states, contrast ratios)
• Keep specificity low
• Document complex selectors

Testing

Test your changes:

1. Build the CSS: npm run build
2. Check output in lib/riverty.css
3. Test in website: cd ../website && npm run start
4. Verify responsive behavior
5. Check browser compatibility

Adding New Styles

When adding new component styles:

1. Create/update partial in src/
2. Import in main.scss if needed
3. Use design tokens for values
4. Document the component
5. Add examples to website

Useful Commands

• npm run build - Compile SCSS to CSS
• npm run watch - Watch mode (if available)

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