open-index/open-npm huggingface dataset:
npm package: @talentsoft-opensource/hylia
Description: The Hylia design systems. Contains all the building blocks style rules for Talentsoft.
Author: Talentsoft
Latest version: 4.0.1

# Hylia

This package gather all the style rules for the building blocks used inside Talentsoft products.

## How to use it ?

### 1. Install the NPM package:

```shell
yarn add @talentsoft/hylia
```

### 2. Import the module in your source code

```Less
@import "~@talentsoft/hylia/main.less";
```

You can also reference files individually, like:

```Less
@import "~@talentsoft/hylia/utilities/variables.less";
```

You can reference files only for use the ico & font (talentsoft-ico, roboto):

```Less
@import "~@talentsoft/hylia/utilities/mixins.less";
@import "~@talentsoft/hylia/utilities/fonts.less";
@import "~@talentsoft/hylia/atoms/icon.less";
```

## Releases Packages

**3.0.0**

*   [ICON-DELETE] Adding styles component
*   [TOASTER] Adding styles component
*   [SEARCH-BAR] Adding styles component
*   [FORM-LAYOUT] Adding styles component
*   [ITEM-FORM] Adding styles component
*   [BUSINESS-CARD] Adding styles component
*   [DROPDOWN] Adding styles component
*   [INPUT] Update styles component
*   [INPUT-SWITCH] Update styles component
*   [INPUT-RADIO] Update styles component
*   [INPUT-CHECKBOX] Update styles component
*   [INPUT-SWITCH] Update styles component
*   [TEXTAREA] Update styles component
*   [LABEL] Update styles component

**2.0.3**

*   [LOADER-DOT] Adding styles component

**2.0.2**

*   [BUTTON MENU] Add round props button

**2.0.1**

*   [IMPORT] Modify import

**2.0.0**

*   [MODAL] Add new component
*   [HEADER-PAGE] Add new component
*   [GROUP-BUTTON] Add new component

**1.1.6**

*   [GRID] Fix mixin and add .less files
*   [INPUT CHECKBOX] Remove color-check

**1.1.5**

*   [SCROLLBAR] Add class to apply
*   [GRID] Prefixe container & delete others grid class
*   [PANEL-MENU] Add color to list and fix elements

**1.1.4**

*   [FONTS] Replace Fonts with news files

**1.1.3**

*   [PANEL-MENU] Fix position & delete effect on the item

**1.1.2**

*   [GRID] Add Bootstrap Grid
*   [LABEL] Font in condensed
*   [INPUT] Add new position icon on the right on Input
*   [INPUT-SWITCH] Change style and behavior when is checked
*   [INPUT-DROPDOWN] Delete effect on the List Dropdown 
*   [INPUT, TEXTAREA] Font placeholder in condensed
*   [BUTTON] Font in condensed

**1.1.1**

*   Remove mixin loopIcon & reset numero version properly

**1.0.5:**

*   Add two mixins: property and vendor

**1.0.4**

*   Add ico content in variables
npm package: @talentsoft-opensource/integration-dll
Description: The assembly used for the integration running inside Talentsoft products.
Author: Talentsoft
Latest version: 4.7.2

What this package is used for?
------------------------------

This package is used to group all dependencies needed by a partner widget.
It helps to reduce the package compilation time and improves the client side
cache reuse.

How to use this package?
------------------------

This package defines a webpack dll. In order to use it in a widget package:

- add integration-dll in the package dependencies
- in the webpack configuration, reference the dll:

```
    const webpack = require('webpack');

    module.exports = {
        ...
        plugins: [
            ...
            new webpack.DllReferencePlugin({
                context: '.',
                manifest: require('./node_modules/@talentsoft-opensource/integration-dll/dist/integration-manifest.json')
            }),
            ...
        ],
        ...
    }
```

This way, if a dependency is referenced in integration-dll is imported in the widget package,
webpack won't add it to the widget bundle and will instead load it from integration-dll.

**Warning**: It seems that importing a less dependency from a less file doesn't work well
with the webpack dll system. In order to make it work correctly it is necessary to
place all imports in a js/ts/tsx file.
npm package: @talentsoft-opensource/integration-widget-component
Description: Base widget component for my talentsoft integration
Author: Talentsoft
Latest version: 5.3.4

What is this package?
---------------------

This package contains the react HOC component that is used to run the custom
widgets. It manages the basic layout and interactions from the My TS page such
as language changes, display mode (minified, enlarged...) and context loading.
npm package: @talentsoft-opensource/uxp-themes
Description: Talentsoft UX themes
Author: Talentsoft
Latest version: 3.0.1

This package gathers common styles and assets related to the UXP theme.  
It includes less files, fonts and images.

## How to use it ?

1. Install the NPM package:
```shell
yarn add @talentsoft-opensource/uxp-themes
```

2. Import the module in your source code  
To reference the less entry point:
```Less
@import "~@talentsoft-opensource\uxp-themes\dist\assets\styles\index.less";
```
You can also reference files individually, like:   

```Less
@import "~@talentsoft-opensource\uxp-themes\dist\assets\styles\colors.less";
```

## Dynamic less

The less provided by this package is dynamic and could not be compiled without providing global variables:
* themeColor
* fontColorOnTheme
* fontColorOnNeutral
* backgroundColor
* backgroundOpacity

*2.4.10*
rename @vader instead of @vader