open-index/open-npm huggingface dataset:
npm package: @i-cell/ids-angular
Description: i-Cell Design System UI Kit components for Angular
Latest version: 0.2.25

# Widgets

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.

## Code scaffolding

Run `ng generate component component-name --project widgets` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project widgets`.
> Note: Don't forget to add `--project widgets` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build widgets` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build widgets`, go to the dist folder `cd dist/widgets` and run `npm publish`.

## Running unit tests

Run `ng test widgets` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @i-cell/ids-tokens
Description: Utility scripts, design token definitions and CSS variable collection for the i-Cell Design System
Latest version: 0.0.40

# i-DS tokens
This repository contains utility scripts, design token definitions and CSS variable collection for the i-Cell Design System, eg. Figma token JSON to CSS converter, etc.

## TailwindCSS (3.x) integration
Tailwind preset is generated and can be imported to parent project to extend the default config.
### Import
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./path/to/ids-tailwind.preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      ...
    }
  },
}
```

### Usage
#### Typography
The following types, sizes and variants can be mixed to achieve the desired style (for detailed explanation check the design documentations):
* types: 'display', 'headline', 'title', 'body', 'caption'
* sizes: 'xlarge', 'large', 'medium', 'small'
* variants: 'regular', 'bold', 'semibold'

Examples: 
- 'display-large-semibold', 
- 'caption-xlarge-regular'

#### Utility classess
Color, spacing (gap, padding, width, etc.) and border radius classes can be used like it were generic tailwind classes, except the generated classes has `ids` prefix. 

Examples: 
- 'gap-ids-container-gap-32' (gap)
- 'text-ids-page-fg-surface-default' (text-color)
- 'bg-ids-container-bg-surface-darker-10' (background-color)
- 'rounded-ids-container-xs' (border-radius)
- 'px-ids-container-padding-8' (horizontal padding)