npm package: @mikeheinrich/sp-global-design-system
Description: S&P Global Design System - A comprehensive React component library with Akkurat LL typography, brand colors, and standardized patterns
Author: S&P Global
Latest version: 1.4.0

# S&P Global Design System

A comprehensive React component library built with TypeScript, featuring S&P Global's brand colors, Akkurat LL typography, and standardized design patterns.

## Features

- **S&P Global Brand Colors**: Complete color palette including primary, brand, and semantic colors
- **Akkurat LL Typography**: Professional typography system with proper scaling
- **Standardized Components**: Button, Header, and other essential UI components
- **TypeScript Support**: Full type definitions included
- **Tailwind CSS Integration**: Built with Tailwind CSS for consistency
- **Tree Shaking**: Optimized bundle size with ES modules

## Installation

```bash
npm install @mikeheinrich/sp-global-design-system
```

## Setup

### 1. Import the CSS styles

Add this to your main CSS file or index.css:

```css
@import '@mikeheinrich/sp-global-design-system/styles.css';
```

### 2. Configure Tailwind CSS (Optional but Recommended)

If you're using Tailwind CSS in your project, extend your `tailwind.config.js`:

```js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@mikeheinrich/sp-global-design-system/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      // Your existing config
    },
  },
  plugins: [],
}
```

Or use our complete Tailwind config:

```js
const spGlobalConfig = require('@mikeheinrich/sp-global-design-system/tailwind.config.js');

module.exports = {
  ...spGlobalConfig,
  content: [
    ...spGlobalConfig.content,
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
};
```

## Usage

```tsx
import { Button, Header } from '@mikeheinrich/sp-global-design-system';

function App() {
  return (
    <div>
      <Header 
        productName="My Application"
        userInitials="JD"
        onBellClick={() => console.log('Notifications')}
        onQuestionClick={() => console.log('Help')}
        onUserClick={() => console.log('User menu')}
      />
      <Button variant="primary">Click me</Button>
    </div>
  );
}
```

## Available Components

### Button
```tsx
<Button variant="primary" size="md" icon={<Icon />}>
  Primary Button
</Button>
```

Properties:
- `variant`: "primary" | "secondary" | "link"
- `size`: "sm" | "md" | "lg"
- `icon`: React node for optional icon

### Header
```tsx
<Header 
  productName="My App"
  userInitials="JD"
  onBellClick={() => {}}
  onQuestionClick={() => {}}
  onUserClick={() => {}}
/>
```

Properties:
- `productName`: Product name display
- `userInitials`: User avatar initials (2 characters)
- `onBellClick`: Notification bell handler
- `onQuestionClick`: Help icon handler
- `onUserClick`: User avatar handler

## Design Tokens

The package exports design tokens for consistent styling:

```tsx
import { DESIGN_TOKENS } from '@mikeheinrich/sp-global-design-system';

// Access S&P Global colors
const primaryColor = DESIGN_TOKENS.colors.primary;
const brandColor = DESIGN_TOKENS.colors.brand;

// Typography tokens
const h1Size = DESIGN_TOKENS.typography.h1.fontSize;
```

## Typography Classes

Use S&P Global typography classes:

```css
.text-h1      /* 24px, Akkurat LL Regular */
.text-h2      /* 22px, Akkurat LL Regular */
.text-h3      /* 18px, Akkurat LL Regular */
.text-h4      /* 16px, Akkurat LL Regular */
.text-paragraph /* 14px, Akkurat LL Regular */
.text-small   /* 12px, Akkurat LL Regular */

.font-akkurat-regular /* Akkurat LL Regular */
.font-akkurat-bold    /* Akkurat LL Bold */
```

## Color Classes

Use S&P Global color utilities:

```css
/* Brand Colors */
.text-brand, .bg-brand, .border-brand

/* Primary Action Colors */
.text-primary, .bg-primary, .border-primary

/* Semantic Colors */
.text-success, .bg-success, .border-success
.text-warning, .bg-warning, .border-warning
.text-attention, .bg-attention, .border-attention
.text-info, .bg-info, .border-info

/* Gray Scale */
.text-gray-5, .bg-gray-bg, .text-gray-4, etc.
```

## Spacing System

S&P Global spacing utilities:

```css
/* Padding (Insets) */
.inset-xs   /* 5px padding */
.inset-sm   /* 10px padding */
.inset-md   /* 20px padding - default */
.inset-lg   /* 40px padding */

/* Vertical Spacing (Stacks) */
.stack-xs, .stack-sm, .stack-md, .stack-lg

/* Horizontal Spacing (Push) */
.push-xs, .push-sm, .push-md, .push-lg
```

## Requirements

- React 16.8+
- TypeScript (optional but recommended)
- Tailwind CSS 3.0+ (for full styling support)

## License

MIT