.my-component {
  color: var(--brand-primary);
  padding: var(--space-md);
  font-size: var(--font-size-lg);
  transition: var(--transition-smooth);
}

import { tokens } from '@abdalkader/ui';

const MyComponent = () => (
  <div style={{
    backgroundColor: tokens.colors.primary,
    padding: tokens.spacing.md,
    fontSize: tokens.typography.sizes.lg
  }}>
    Styled with design tokens
  </div>
);

export interface DesignTokens {
  colors: {
    primary: string;
    primaryLight: string;
    success: string;
    warning: string;
    danger: string;
    info: string;
    dark: string;
    light: string;
  };
  
  typography: {
    fontFamily: {
      primary: string;
    };
    fontSize: {
      xs: string;
      sm: string;
      base: string;
      lg: string;
      xl: string;
      '2xl': string;
      '3xl': string;
      '4xl': string;
    };
    fontWeight: {
      normal: number;
      medium: number;
      semibold: number;
    };
    lineHeight: {
      tight: number;
      snug: number;
      normal: number;
      relaxed: number;
      loose: number;
    };
  };
  
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    '3xl': string;
    '4xl': string;
    '5xl': string;
  };
  
  animation: {
    duration: {
      instant: string;
      fast: string;
      normal: string;
      slow: string;
      slower: string;
    };
    easing: {
      easeOut: string;
      easeIn: string;
      easeInOut: string;
      bounce: string;
      smooth: string;
    };
  };
}

import { tokens } from '@abdalkader/ui';

const StyledComponent = styled.div`
  background-color: ${tokens.colors.primary};
  padding: ${tokens.spacing.md};
  border-radius: ${tokens.borders.radius};
  transition: all ${tokens.animation.duration.fast} ${tokens.animation.easing.easeOut};
  
  &:hover {
    background-color: ${tokens.colors.primaryLight};
    transform: translateY(-2px);
  }
`;

const styles = {
  container: {
    backgroundColor: tokens.colors.light,
    padding: tokens.spacing.lg,
    fontSize: tokens.typography.fontSize.base,
    fontFamily: tokens.typography.fontFamily.primary,
  },
  
  button: {
    backgroundColor: tokens.colors.primary,
    color: 'white',
    padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
    borderRadius: tokens.borders.radius,
    transition: `all ${tokens.animation.duration.fast} ${tokens.animation.easing.easeOut}`,
  }
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--brand-primary)',
        'primary-light': 'var(--brand-primary-light)',
      },
      spacing: {
        'xs': 'var(--space-xs)',
        'sm': 'var(--space-sm)',
        'md': 'var(--space-md)',
        'lg': 'var(--space-lg)',
      },
      fontFamily: {
        'primary': 'var(--font-primary)',
      },
    },
  },
};