@vobio/design-system
v1.0.1
Published
Vobio Design System - Design tokens for web and React Native
Downloads
155
Maintainers
vobiotechReadme
@vobio/design-system
Design tokens from Figma for web and React Native projects.
Installation
npm install @vobio/design-systemUsage
CSS Custom Properties (Web)
Import the CSS file in your app entry point:
/* In your global CSS */
@import "@vobio/design-system/css";Or in JavaScript/TypeScript:
import "@vobio/design-system/css";Then use CSS variables:
.button {
background: var(--color-primary-default);
padding: var(--spacing-padding-m);
border-radius: var(--radius-m);
font-size: var(--body-medium-font-size);
}Dark Mode
Add data-theme="dark" or class dark to your root element:
<html data-theme="dark"></html>Tailwind CSS
Add the preset to your tailwind.config.js:
const vobioPreset = require("@vobio/design-system/tailwind");
module.exports = {
presets: [vobioPreset],
// ... your config
};Remember to also import the CSS file for the variables to work:
import "@vobio/design-system/css";Then use in your templates:
<button
class="bg-primary text-base-white p-padding-m rounded-m text-body-medium"
>
Click me
</button>React Native
import {
colors,
typography,
spacing,
radius,
} from "@vobio/design-system/native";
import { StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
container: {
padding: spacing.padding.m,
gap: spacing.gap.s,
backgroundColor: colors.primary.faint,
borderRadius: radius.m,
},
title: {
...typography.headlineLarge,
color: colors.neutral.intense,
},
});
export function Card() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
</View>
);
}Dark Mode (React Native)
import { colors, colorsDark } from "@vobio/design-system/native";
import { useColorScheme } from "react-native";
function useThemeColors() {
const scheme = useColorScheme();
return scheme === "dark" ? colorsDark : colors;
}Available Tokens
Colors
| Category | Variants |
| --------- | ---------------------------------------------------------------- |
| primary | faint, softer, soft, muted, emphasis, default, stronger, intense |
| accent | faint, softer, soft, muted, emphasis, default, stronger, intense |
| success | faint, softer, soft, muted, emphasis, default, stronger, intense |
| neutral | faint, softer, soft, muted, emphasis, default, stronger, intense |
| base | white, black |
| logo | blue, red, black, grey, white |
Typography
| Category | Sizes |
| ---------- | ---------------------------- |
| display | large, medium, small |
| headline | large, medium, small |
| title | large, medium, small, xsmall |
| body | large, medium, small, xsmall |
| caption | medium, small |
Spacing
| Category | Sizes |
| --------- | ------------------------------------ |
| gap | none, 2xs, xs, s, m, l, xl, 2xl, 3xl |
| padding | none, 2xs, xs, s, m, l, xl, 2xl, 3xl |
| section | s, m, l, xl |
| radius | none, xs, s, m, l, xl, full |
| size | 4xs, 3xs, 2xs, xs, s, m, l, xl, 2xl |
Responsive Breakpoints
CSS variables automatically update at these breakpoints:
- Mobile: default (0px+)
- Tablet: 768px+
- Small Desktop: 1024px+
- Large Desktop: 1440px+
License
MIT