npm package: @inadigital-ui/styles
Description: Shared CSS styles and colors for INA Digital Design System
Author: INA Digital
Latest version: 1.0.25

# @inadigital-ui/styles

Shared CSS styles and colors for INA Digital Design System.

This package contains all the CSS files used by both `@inadigital-ui/react` and `@inadigital-ui/vue` packages.

## Installation

```bash
npm install @inadigital-ui/styles
```

## Usage

### Import all styles

```css
@import '@inadigital-ui/styles';
```

This will import:

- All color tokens and brand themes
- Reset CSS

### Import colors only

```css
@import '@inadigital-ui/styles/colors';
```

### Import specific component styles

```css
@import '@inadigital-ui/styles/components/button.css';
@import '@inadigital-ui/styles/components/accordion.css';
@import '@inadigital-ui/styles/components/modal.css';
```

### Import specific brand colors

```css
@import '@inadigital-ui/styles/colors/brands/inagov.css';
@import '@inadigital-ui/styles/colors/brands/inaku.css';
```

## Structure

```
@inadigital-ui/styles/
├── colors/
│   ├── brands/          # Brand-specific color themes
│   ├── primitives/      # Base color tokens
│   ├── product/         # Product color tokens
│   └── utilities/       # Utility color tokens
└── components/
    └── [component].css  # Component-specific styles
```

## Available Components

This package includes CSS for all INA Digital Design System components:

- Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Chip
- DatePicker, Dropdown, FileUpload, Modal, Pagination, Stepper
- Table, TextField, TextArea, Toast, Tooltip, and more...

## Tailwind CSS Integration

This package provides Tailwind CSS utilities for both Tailwind v3 and v4.

### Tailwind CSS v3

For Tailwind v3, use the TypeScript token files:

```js
// tailwind.config.js
import inaColorTokens from '@inadigital-ui/styles/tailwind/ts/ina-color-token';
import inagovTokens from '@inadigital-ui/styles/tailwind/ts/inagov'; // Optional: brand theme

export default {
  theme: {
    extend: {
      colors: {
        ...inaColorTokens,
        ...inagovTokens, // Optional: extend with brand colors
      },
    },
  },
};
```

Then you can use classes like:

- `text-neutral-500`
- `bg-blue-500`
- `text-guide-500` (which uses `--ina-blue-500` = `#0968f6`)

**Available brand tokens:**

- `@inadigital-ui/styles/tailwind/ts/inagov`
- `@inadigital-ui/styles/tailwind/ts/inaku`
- `@inadigital-ui/styles/tailwind/ts/inapas`
- `@inadigital-ui/styles/tailwind/ts/bgn`
- `@inadigital-ui/styles/tailwind/ts/bkn`
- `@inadigital-ui/styles/tailwind/ts/lan`
- `@inadigital-ui/styles/tailwind/ts/panrb`

### Tailwind CSS v4

For Tailwind v4, use the CSS files with `@theme` syntax:

```css
/* your main CSS file */
@import '@inadigital-ui/styles/tailwind/css/inadigital-color-token.css';
@import '@inadigital-ui/styles/tailwind/css/inagov-color-token.css'; /* Optional: brand theme */
```

Then you can use classes like:

- `text-neutral-500`
- `bg-blue-500`
- `text-guide-500` (which uses `--ina-blue-500` = `#0968f6`)

**Available brand tokens:**

- `@inadigital-ui/styles/tailwind/css/inagov-color-token.css`
- `@inadigital-ui/styles/tailwind/css/inaku-color-token.css`
- `@inadigital-ui/styles/tailwind/css/inapas-color-token.css`
- `@inadigital-ui/styles/tailwind/css/bgn-color-token.css`
- `@inadigital-ui/styles/tailwind/css/bkn-color-token.css`
- `@inadigital-ui/styles/tailwind/css/lan-color-token.css`
- `@inadigital-ui/styles/tailwind/css/pan-rb-color-token.css`

### Example Usage

```html
<!-- Using Tailwind classes with INA Digital colors -->
<div class="bg-blue-500 text-white p-4">
  <p class="text-guide-500">This text uses guide-500 color (#0968f6)</p>
  <p class="text-neutral-500">This text uses neutral-500 color</p>
</div>
```

## License

MIT