![Imgur](https://i.imgur.com/8FKIPAg.png)

# Softanic Styles

Our css styles package on which all of our themes are build (SASS /SCSS Library)

## 🚩 Table of contents

- [Built with](#built-with)
- [Structure](#structure)
- [Usage](#usage)

## Built with

| Name                                                               | Version | Description   |
| ------------------------------------------------------------------ | ------- | ------------- |
| [`@sass`](https://sass-lang.com/documentation/)                    | 3.6.5   | CSS framework |
| [`@softanic/icons`](https://www.npmjs.com/package/@softanic/icons) | 1.0.1   | Icon library  |

## Structure

We applied the following structure:

## Usage

### :wrench: Setup

```shell
$ npm i @softanic/styles
```

> If you are using npm 8 or above you might need to add `--legacy-peer-deps` when running npm install

## SCSS

In order to use this package import the package in your main.scss file.

### Importing the styles

```scss
// @/theme/vendors/_softanic.scss

@import '@softanic/styles';
```

### Overriding the imported styles

```scss
// @/theme/vendors/_softanic.scss

@use '@softanic/styles' with (
  $primary: (
    light: (
      900: #00359E,
      800: #0040C1,
      700: #004EEB,
      600: #155EEF,
      500: #2970FF,
      400: #528BFF,
      300: #84ADFF,
      200: #B2CCFF,
      100: #D1E0FF,
      50: #EFF4FF,
      25: #F5F8FF
    ),
    dark: (
      900: #00359E,
      800: #0040C1,
      700: #004EEB,
      600: #155EEF,
      500: #2970FF,
      400: #528BFF,
      300: #84ADFF,
      200: #B2CCFF,
      100: #D1E0FF,
      50: #EFF4FF,
      25: #F5F8FF
    )
  )
);
```