npm package: @itsquarehub/styles
Description: A shared styles for IT Square Hub projects.
Author: Arrian Pascual
Latest version: 0.15.8

# Description
A common styles for its project with theming and utilities.

## Install

```bash
npm install @itsquarehub/styles
```
or
```bash
yarn add @itsquarehub/styles
```

## Usage

```scss
@import '~@itsquarehub/styles/theme';
@import '~@itsquarehub/styles/utilities';

@include its-set-theme(dark);
```

## Custom color pallete
You can create your own color scheme by providing all the color pallete that includes their tone:

Color pallete
> Primary, Secondary, Background, Surface, Success, Warning, and Error.

Color tone
> Base, Contrast, Shade, and Tint.

#### Guidelines
Primary color - is the color displayed most frequently across your app’s screens and components.
Secondary color - provides more ways to accent and distinguits your product. Having a secondary color is optional,
                  and should be applied sparingly to accent select parts of your UI.
Surface color - affect surfaces of components, such as cards, sheets, and menus.
Background color - appears behind scrollable content.
Success, Warning, Error color - indicates errors in components, such as invalid text in a text field.

To Pick the color pallete: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

```scss
:root {
  // Sample color scheme for primary color
  --its-color-primary-base: #15c1e8;
  --its-color-primary-contrast: #fafafb;
  --its-color-primary-shade: #009cb9;
  --its-color-primary-tint: #84E1F8;
}
```

## Custom font-family and font-size
Set your own font-family according to your standard. By default,
the primary font is Roboto and the secondary font is Open Sans.

> Primary font will be the heading font
> Secondary font will be the children of headings font suchs as paragraph, anchor, etc.

```scss
:root {
  // Sample font-family settings
  --its-font-family-primary: 'Roboto';
  --its-font-family-secondary: 'Open Sans';
}
```

Set the font-size of the whole document. By default, the base font-size is 15px.
XSmall, Small, Medium, and Large font size will be dynamically adjusted.
However, you can set their corresponding sizes based on the variable definitions.

```scss
:root {
  // Sample font-size settings
  --its-font-size-base: 15px;

  --its-font-size-xs: 0.8rem;
  --its-font-size-sm: 1.0rem;
  --its-font-size-md: 1.2rem;
  --its-font-size-lg: 1.5rem;
}
```

## Custom heading scale, browser and spacing
Set your own variable sizes according to your needs.

```scss
:root {
  // Heading scale variable
  --its-heading-scale: 4rem;

  // Space variables
  --its-space-xs: 0.8rem;
  --its-space-sm: 1.0rem;
  --its-space-md: 1.2rem;
  --its-space-lg: 1.5rem;
  --its-space-xl: 2.5rem;
}
```

## Reset or Normalize
You can also import the reset or normalize styling from the shared styles

```scss
@import '~@itsquarehub/styles/reset';
@import '~@itsquarehub/styles/normalize';
```

## To Test the Code Try this site
https://www.wikimass.com/sass/inspect?filename=example

## License

[MIT](http://vjpr.mit-license.org)

[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
[npm-url]: https://npmjs.org/package/live-xxx
[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
[travis-url]: https://travis-ci.org/live-js/live-xxx
[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master