Description

A common styles for its project with theming and utilities.

Install

npm install @itsquarehub/styles

or

yarn add @itsquarehub/styles

Usage

@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

: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.

: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.

: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.

: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

@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