open-index/open-npm huggingface dataset:
npm package: @spicainternational/sds-3rdparty
Description: Spica design system overrides of third party components.
Latest version: 1.0.0

# Spica Design System - The 3rd party style overrides

## Motivation
This styles are used to apply SDS look to the 3rd party libs/frameworks/components.

List of supported components:
- ngx-toastr


## Installation
Add package to your project 

`npm install @spicainternational/sds-3rdparty --save`

It is recommended that you target latest minor version in the project's dependency section of the package.json.

`"@spicainternational/sds-3rdparty":"~1.0.0"`

Upgrade to new major release only after adapting to the version's breaking changes.

## Configuration
The components's default theme file should be imported first.
The override file should be placed afterwards.

Example
```scss
@import '~ngx-toastr/toastr';
@import '@import '../node_modules/@spicainternational/sds-3rdparty/sds-ngx-toastr';';
...
```
npm package: @spicainternational/sds-bootstrap
Description: Spica design system bootstrap customizations.
Latest version: 5.28.0

# Spica Design System - The Bootstrap Toolkit

## Motivation
Spica Design system is strongly based on the Bootstrap 4 library of components (atoms and molecules). 

The Bootstrap Toolkit provides easy way of customizing the default Bootstrap 4 schema in order to apply Spica Design System to the web based apps.

## Prerequisites
Projects must be based on the **Bootstrap 4** and have **sass processor** configured.
There are no restrictions on the js framework.

To use the Bootstrap Toolkit a basic knowledge of sass is required and NPM is required. 

## Installation
Add sds bootstrap toolkit package to your project 

`npm install @spicainternational/sds-bootstrap --save`

It is recommended that you target latest minor version in the project's dependency section of the package.json.

`"@spicainternational/sds-bootstrap":"~1.0.0"`

Upgrade to new major release only after adapting to the version's breaking changes.

## Configuration
The Bootstrap toolkit provides two sass style sheets:
* bootstrap variables overrides 
* deep impact bootstrap style sheets 

The order of @import statements in project's styles list is important due to sass default variable values.

Example
```scss
@import 'sds_bootstrap_variables';
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import 'sds_bootstrap';
@import 'app-specific-components';
@import 'third-party-styles';
...
```

### Bootstrap variables overrides
These are the basic overrides that modify the bootstrap design. Majority of the customization should are placed here. 

**Style sheets MUST be placed BEFORE the bootstrap files.**

filename: sds_bootstrap_variables.scss 

### Deep impact
Only those modifications that cannot be done via variables are placed here.

**Style sheets MUST be placed AFTER the bootstrap files.**

filename: sds_bootstrap.scss

## Resources

Figma files: 
* [Web design Presentation](https://www.figma.com/file/Y1XYXQdAyz1q2NRKnVvQ7t/Web-design-system-Presentation-v1)
* [Web design Bootstrap 4](https://www.figma.com/file/8ssYY514cXYsE3zG2zTDoa/Web-design-Bootstrap-4)


## Publish

To publish new package bump version and use `npm publish`.

### Beta 
It is crucial that we add beta.0 at the end of your version. The .0 indicates which beta version it is. When we publish a new fix as beta, we will increment the .0 to .1 and so on.
Example: 5.20.0-beta.0

To publish the beta version just run the following command:
`npm publish --tag beta`
npm package: @spicainternational/sds-core
Description: Spica design system Core.
Latest version: 5.29.0

# Spica Design System - The Core 

## Motivation
Spica Design system is strongly based on the Bootstrap 4 library of components (atoms and molecules). 

The Spica Design System Core provides custom components that are not covered either by Bootstrap or the dev extreme tool kit.

## Prerequisites
Projects must be based on the **Bootstrap 4** and have **sass processor** configured.
There are no restrictions on the js framework.

To use the SDS Core a basic knowledge of sass is required and NPM is required. 

## Installation
Add sds core package to your project 

`npm install @spicainternational/sds-core --save`

It is recommended that you target latest minor version in the project's dependency section of the package.json.

`"@spicainternational/sds-core":"~1.0.0"`

Upgrade to new major release only after adapting to the version's breaking changes.

## Configuration
Import SDS Core styles after the bootstrap.

Example
```scss
@import 'sds-bootstrap_variables';
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import 'sds-bootstrap';
@import 'sds-core';
@import 'app-specific-components';
@import 'third-party-styles';
...
```

## Publish

To publish new package bump version and use `npm publish`.

### Beta 
It is crucial that we add beta.0 at the end of your version. The .0 indicates which beta version it is. When we publish a new fix as beta, we will increment the .0 to .1 and so on.
Example: 5.20.0-beta.0

To publish the beta version just run the following command:
`npm publish --tag beta`


## Resources

Figma files: 
* [Web design Presentation](https://www.figma.com/file/Y1XYXQdAyz1q2NRKnVvQ7t/Web-design-system-Presentation-v1)
* [Web design Bootstrap 4](https://www.figma.com/file/8ssYY514cXYsE3zG2zTDoa/Web-design-Bootstrap-4)