pnpm add @httpjpg/tokens

import { colors } from '@httpjpg/tokens';

colors.black;        // #000000
colors.white;        // #FFFFFF
colors.neutral[500]; // #737373
colors.primary[500]; // #F43F5E (vibrant rose)
colors.accent[500];  // #F97316 (vibrant orange)

import { spacing } from '@httpjpg/tokens';

spacing["0"];   // 0px
spacing["1"];   // 0.25rem (4px)
spacing["4"];   // 1rem (16px)
spacing["8"];   // 2rem (32px)
spacing["16"];  // 4rem (64px)

import { typography } from '@httpjpg/tokens';

// Font Families
typography.fontFamily.sans;      // Inter, system-ui
typography.fontFamily.headline;  // Poppins, Inter
typography.fontFamily.mono;      // Fira Code, monospace

// Font Sizes
typography.fontSize.xs;    // 0.75rem (12px)
typography.fontSize.base;  // 1rem (16px)
typography.fontSize.xl;    // 1.25rem (20px)
typography.fontSize["4xl"]; // 2.25rem (36px)

// Font Weights
typography.fontWeight.normal;   // 400
typography.fontWeight.semibold; // 600
typography.fontWeight.bold;     // 700

import { shadows } from '@httpjpg/tokens';

shadows.sm;  // Subtle shadow
shadows.md;  // Medium shadow
shadows.lg;  // Large shadow
shadows.xl;  // Extra large shadow

import { borderRadius } from '@httpjpg/tokens';

borderRadius.sm;   // 0.125rem (2px)
borderRadius.md;   // 0.375rem (6px)
borderRadius.lg;   // 0.5rem (8px)
borderRadius.full; // 9999px

import { css } from '@httpjpg/ui/styled-system/css';

const styles = css({
  color: 'primary.500',
  fontSize: 'xl',
  padding: '4',
  borderRadius: 'md',
  boxShadow: 'lg',
});

pnpm --filter @httpjpg/storyblok-sync sync:datasources