@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

npm install @inadigital-ui/styles

Usage

Import all styles

@import '@inadigital-ui/styles';

This will import:

• All color tokens and brand themes
• Reset CSS

Import colors only

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

Import specific component styles

@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

@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:

// 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:

/* 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

<!-- 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