divriots/starter-origami

A react-native-paper based design system as a starter kit for Backlight

starter-origami

Origami is a React-Native Design System starter kit, using Paper component library: an open source components library based on Material Design.

Features

• Open-source
• Cross-platform: Mobile & Web
• 25+ components
• Interactive documentation
• Light & Dark mode

Design Tokens

Origami takes the design tokens defined in Paper.

• Colors
• Fonts
• Roundness
• Animation

And make them automatically documented and visually discoverable.

Paper has great semantical design tokens. It's simple but very efficient. The Paper team has done a great job here.

Dark mode

Dark and Light themes are included out-of-the-box. You can experience it in the documentation itself.

Components

Origami comes with 25+ components to get started: menu, dialog, buttons, checkbox, cards, everything to cover the basics, and more.

📦 npm package to try Origami unchanged.

Getting started

• Duplicate this starter-kit on Backlight.dev using the Duplicate button.
• Setup the design tokens to match your brand.
• Release the package to npm.
• Enjoy your Design System on your app(s) by importing from npm.

For more information, follow the Quick Starting Guide.

starter-origami's Issues

Switch from dark to light theme needs 2 clicks

For some reason on first click it switches the paper theme and on the second one it switches the CSS for dark mode.
Expected behavior is to switch both theme and context css on first click/tap.