@sage-box/core
v0.1.1
Published
Core styles, tokens and utilities for SageBox components
Maintainers
adravilagReadme
@sage-box/core
Core styles, design tokens and utilities for SageBox components.
Installation
npm install @sage-box/coreUsage
CSS Tokens
Import the CSS file to get all design tokens as CSS custom properties:
@import '@sage-box/core/styles';Or in JavaScript:
import '@sage-box/core/dist/styles/tokens.css';JavaScript Tokens
import { colors, spacing, tokens } from '@sage-box/core';
// Use tokens in your code
console.log(colors.primary); // 'var(--sg-color-primary, #6366f1)'Utilities
import { generateId, debounce, clamp } from '@sage-box/core';
const id = generateId('button'); // 'button-abc123'
const value = clamp(150, 0, 100); // 100Theming
Override CSS variables to customize the theme:
:root {
--sg-color-primary: #your-color;
--sg-color-primary-hover: #your-hover-color;
}Dark Mode
Add data-theme="dark" or class dark to enable dark mode:
<html data-theme="dark">
<!-- or -->
<html class="dark">License
MIT © adravilag