@sbdesign/styles

Design tokens and base styles for SB Design System.

Installation

npm install @sbdesign/styles

Usage

// Import in your root layout or _app
import '@sbdesign/styles';

This imports:

• Design tokens (CSS variables)
• CSS reset
• Base styles
• Utility classes

Design Tokens

All values are defined as CSS variables:

Colors

--color-bg          /* Background */
--color-fg          /* Foreground (text) */
--color-primary     /* Primary brand color */
--color-secondary   /* Secondary color */
--color-success     /* Success state */
--color-warning     /* Warning state */
--color-error       /* Error state */

Spacing

--gap-1: 4px
--gap-2: 8px
--gap-3: 12px
--gap-4: 16px
--gap-6: 24px
--gap-8: 32px

Typography

--font-sans         /* Sans-serif font stack */
--fs-xs: 12px       /* Font sizes */
--fs-sm: 14px
--fs-md: 16px
--fs-lg: 18px

Border Radius

--radius-sm: 8px
--radius-md: 12px
--radius-lg: 16px
--radius-full: 9999px

Dark Mode

Dark mode is supported via data-theme attribute:

// Toggle theme
document.documentElement.setAttribute('data-theme', 'dark');

Utility Classes

Layout

.container      /* Max-width container */
.grid           /* CSS Grid layout */
.row            /* Flex row */
.flex           /* Flexbox */

Spacing

.p-4            /* Padding */
.mt-4           /* Margin top */
.gap-4          /* Gap */

Typography

.text-xs        /* Font size */
.font-bold      /* Font weight */
.text-center    /* Text align */

Customization

Override tokens in your own CSS:

:root {
  --color-primary: #your-color;
  --gap-4: 20px;
}

License

MIT