npm package: @idds/styles
Description: Shared CSS styles and colors for INA Digital Design System
Author: INA Digital
Latest version: 1.6.11

# @idds/styles

Shared CSS styles and color tokens for INA Digital Design System.

This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages. All styles are built from scratch using pure CSS (not dependent on Tailwind CSS classes) and are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.

## Installation

```bash
npm install @idds/styles
```

## Usage

### Import Complete Bundle (Recommended)

Import the main entry point which includes all components, base styles, colors, and reset:

```css
/* Development */
@import '@idds/styles';

/* Or use the explicit path */
@import '@idds/styles/index';

/* Production (minified) */
@import '@idds/styles/index.min';
```

This will import:

- All component styles (Accordion, Button, Modal, Table, TextField, etc.)
- Base styles (colors, reset CSS)
- All color tokens and brand themes

### Import Base Styles Only

If you only need base styles (colors and reset) without components:

```css
/* Development */
@import '@idds/styles/base';

/* Production (minified) */
@import '@idds/styles/base.min';
```

This will import:

- All color tokens and brand themes
- CSS reset styles

> **Note:** Individual component CSS files are not available as separate imports. All component styles are bundled into `index.css` for optimal performance. If you're using `@idds/react` or `@idds/vue`, the components already include the necessary styles via the main bundle.

### Using CDN

You can use `@idds/styles` directly via CDN without installing it as a package. This is useful for quick prototypes, static HTML pages, or when you don't want to set up a build process.

#### Complete Bundle (Recommended)

Include the complete bundle which contains all components, base styles, colors, and reset:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>

    <!-- INA Digital Design System Styles -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/@idds/styles@latest/dist/index.min.css"
    />

    <!-- Or use jsDelivr -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@idds/styles@latest/dist/index.min.css"
    />
  </head>
  <body>
    <!-- Your HTML content using INA Digital Design System classes -->
    <div class="ina-button ina-button--primary">Button</div>
  </body>
</html>
```

#### Base Styles Only

If you only need base styles (colors and reset) without components:

```html
<head>
  <!-- Base styles only (colors + reset) -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@idds/styles@latest/dist/base.min.css"
  />
</head>
```

#### Using Specific Version

For production, it's recommended to pin to a specific version instead of `@latest`:

```html
<!-- Using unpkg -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
/>

<!-- Using jsDelivr -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@idds/styles@1.2.12/dist/index.min.css"
/>
```

#### Available CDN Providers

- **unpkg**: `https://unpkg.com/@idds/styles@[version]/dist/[file]`
- **jsDelivr**: `https://cdn.jsdelivr.net/npm/@idds/styles@[version]/dist/[file]`

**Available files:**

- `index.css` / `index.min.css` - Complete bundle (all components + base)
- `base.css` / `base.min.css` - Base styles only (colors + reset)
- `tailwind/css/[theme].css` / `tailwind/css/[theme].min.css` - Tailwind CSS v4 themes

**Example CDN URLs:**

```html
<!-- Complete bundle (minified) -->
<link
  href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
  rel="stylesheet"
/>

<!-- Base styles only (minified) -->
<link
  href="https://unpkg.com/@idds/styles@1.2.12/dist/base.min.css"
  rel="stylesheet"
/>

<!-- Tailwind theme (minified) -->
<link
  href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/idds.min.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/bgn.min.css"
  rel="stylesheet"
/>
```

> **Reference:** Similar to how [Vuetify provides CDN usage](https://vuetifyjs.com/en/getting-started/installation/#using-cdn), `@idds/styles` bundles all components and styles into a single CSS file for easy CDN consumption.

## Structure

The package is published from the `dist/` folder with the following structure:

```
@idds/styles/
├── index.css              # Complete bundle (all components + base)
├── index.min.css          # Minified complete bundle
├── base.css               # Base styles only (colors + reset)
├── base.min.css           # Minified base styles
└── tailwind/
    ├── css/               # Tailwind CSS v4 theme files
    │   ├── idds.css       # Default theme
    │   ├── idds.min.css   # Minified
    │   ├── bgn.css        # BGN brand theme
    │   ├── bgn.min.css    # Minified
    │   ├── inagov.css     # INAGov brand theme
    │   ├── inaku.css      # INAKu brand theme
    │   ├── inapas.css     # INAPas brand theme
    │   ├── bkn.css        # BKN brand theme
    │   ├── lan.css        # LAN brand theme
    │   ├── panrb.css      # panrb brand theme
    │   └── ...            # (with .min.css versions)
    └── ts/                 # Tailwind CSS v3 TypeScript tokens
        ├── default.ts
        ├── idds.ts
        ├── bgn.ts
        ├── inagov.ts
        ├── inaku.ts
        ├── inapas.ts
        ├── bkn.ts
        ├── lan.ts
        ├── panrb.ts
        └── ...             # Brand-specific tokens
```

> **Note:** The `colors/`, `components/`, and `reset/` folders are not published to npm. They are bundled into `base.css` and `index.css` during the build process for optimal performance.

## Available Components

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

- Accordion, AccordionCard, AccordionGroup, ActionDropdown, Alert, Avatar, Badge
- BottomSheet, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Chip, Collapse
- DatePicker, Divider, Drawer, Dropdown, FieldInputTable, FileUpload, InputSearch
- LinearProgressIndicator, Modal, MonthPicker, MultipleChoiceGrid, OneTimePassword
- Pagination, PasswordInput, PhoneInput, ProgressBar, RadioInput, SelectDropdown
- SingleFileUpload, Skeleton, Spinner, Stepper, TabHorizontal, TabVertical
- Table, TableProgressBar, TextArea, TextField, ThemeToggle, TimePicker
- Toast, Toggle, Tooltip, YearPicker, and more...

## Tailwind CSS Integration (Optional)

This package provides optional Tailwind CSS utilities for both Tailwind v3 and v4. These are **optional** and only needed if you want to use INA Digital color tokens with Tailwind utility classes in your project.

### Tailwind CSS v3

For Tailwind v3, use the TypeScript token files:

```js
// tailwind.config.js
import iddsTokens from '@idds/styles/tailwind/ts/idds';
import bgnTokens from '@idds/styles/tailwind/ts/bgn'; // Optional: brand theme

export default {
  theme: {
    extend: {
      colors: {
        ...iddsTokens,
        ...bgnTokens, // 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:**

- `@idds/styles/tailwind/ts/default` - Default tokens
- `@idds/styles/tailwind/ts/idds` - IDDS tokens
- `@idds/styles/tailwind/ts/inagov` - INAGov brand
- `@idds/styles/tailwind/ts/inaku` - INAKu brand
- `@idds/styles/tailwind/ts/inapas` - INAPas brand
- `@idds/styles/tailwind/ts/bgn` - BGN brand
- `@idds/styles/tailwind/ts/bkn` - BKN brand
- `@idds/styles/tailwind/ts/lan` - LAN brand
- `@idds/styles/tailwind/ts/panrb` - panrb brand

### Tailwind CSS v4

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

```css
/* your main CSS file */
@import '@idds/styles/tailwind/css/idds.css';
@import '@idds/styles/tailwind/css/bgn.css'; /* Optional: brand theme */
```

Or use minified versions for production:

```css
@import '@idds/styles/tailwind/css/idds.min.css';
@import '@idds/styles/tailwind/css/bgn.min.css';
```

Then you can use classes like:

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

**Available brand themes (with .min.css versions):**

- `@idds/styles/tailwind/css/idds.css` - Default theme
- `@idds/styles/tailwind/css/inagov.css` - INAGov brand
- `@idds/styles/tailwind/css/inaku.css` - INAKu brand
- `@idds/styles/tailwind/css/inapas.css` - INAPas brand
- `@idds/styles/tailwind/css/bgn.css` - BGN brand
- `@idds/styles/tailwind/css/bkn.css` - BKN brand
- `@idds/styles/tailwind/css/lan.css` - LAN brand
- `@idds/styles/tailwind/css/panrb.css` - panrb brand

### 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>
```

## Important Notes

- **No Tailwind Dependency**: This package does NOT require Tailwind CSS. All styles are built from scratch using pure CSS.
- **Tailwind Integration is Optional**: The Tailwind token files are provided as a convenience for projects that want to use INA Digital colors with Tailwind utility classes. You can use `@idds/styles` without Tailwind.
- **Component Styles**: Component styles use BEM-like naming convention (e.g., `ina-button`, `ina-button--primary`) and are self-contained.

## License

MIT