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.

$3

``
/* @type {import('tailwindcss').Config} /
module.exports = {
presets: [
require('./path/to/ids-tailwind.preset.js')
],
// Customizations specific to this project would go here
theme: {
extend: {
...
}
},
}
`

$3

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