@idds/styles
v1.6.23
Published
Shared CSS styles and colors for INA Digital Design System
Downloads
2,795
Readme
@idds/styles
Shared CSS styles and color tokens for INA Digital Design System.
This package contains all the CSS files used by the @idds/react, @idds/vue, and @idds/js 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
npm install @idds/stylesUsage
Import Complete Bundle (Recommended)
Import the main entry point which includes all components, base styles, colors, and reset:
/* 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:
/* 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.cssfor optimal performance. If you're using@idds/reactor@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 HTML prototyping.
Complete Bundle (Recommended)
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<!-- Use unpkg -->
<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 -->
<button class="ina-button ina-button--primary">Button</button>
</body>
</html>Base Styles Only
<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:
<!-- Example using 1.6.13 -->
<link
rel="stylesheet"
href="https://unpkg.com/@idds/[email protected]/dist/index.min.css"
/>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
│ └── ... # and other brands (with .min.css versions)
└── ts/ # Tailwind CSS v3 TypeScript tokens
├── default.ts
├── idds.ts
├── bgn.ts
└── ... # and other brandsAvailable Components
This package includes CSS for all INA Digital Design System components deployed across React, Vue, and Vanilla JS:
- 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 if you explicitly want to use INA Digital color tokens alongside Tailwind classes.
Tailwind CSS v3
For Tailwind v3, import the TypeScript tokens:
// tailwind.config.js
import iddsTokens from '@idds/styles/tailwind/ts/idds';
export default {
theme: {
extend: {
colors: {
...iddsTokens,
},
},
},
};Tailwind CSS v4
For Tailwind v4, use the CSS files with @import configuration inside your entry stylesheet:
/* src/index.css */
@import 'tailwindcss';
@import '@idds/styles/tailwind/css/idds.css';Theme Mode Support
Styles natively hook into [data-theme="dark"] and [data-theme="light"] attribute selectors dynamically via CSS variables mapped internally by this package.
License
MIT