Jismete Theme

This jismete base theme contains the predefined base theme colors, mixin, typography, spacing variables, grid, icons and functions useful for the jismete components.

Installation

Below command:

npm install @jismete/theme

Build

Below command:

lerna run build --scope @jismete/theme --stream

Import

To use the jismete base theme, simply use the import statement in your ts file. Use CDN URLs to import this themes to html file.

Usage

Using themes variables

/* Set styling for a checkbox element */
/* _component.scss */
chip {
  min-width: $chip-min-width;
  height: $chip-height;
  background-color: var(--chip-background-color);
  color: var(--chip-label-font-color);
  padding: 0 var(--spacing-03);
  margin-left: var(--spacing-03);
  color: var(--chip-close-icon-color);
}

/* component-map.scss*/
--chip-background-color: var(--secondary);
--chip-label-font-family: var(--global-font-family);
--chip-label-font-color: var(--neutral);
--chip-close-icon-color: var(--neutral);

// non-customize variable
$chip-min-width: 44px;
$chip-height: 30px;

Using mixins & functions

/* _component.scss */
button {
  @include border-radius(5px); // mixin to apply border-radius to all sides
  height: calculate_rem(24px); // function to convert px to rem
  width: 100%;
}

Global colors

| Color Variable | Color Code (HEX) | | -------------- | ---------------- | | --primary | #0C71AC | | --secondary | #0A57A1 | | --tertiary | #13294E | | --error | #D9222A | | --warning | #B95000 | | --neutral | #FFFFFF |

Extended colors

| Color Variable | Color Code (HEX) | | -------------------- | ---------------- | | --star-rate | #DC791E | | --separator-01 | #E1E6ED | | --global-bg | #F5F8FB | | --infopanel-bg | #FDFCC7 | | --specialmessage-bg | #FAF0DE |

Text colors

| Color Variable | Color Code (HEX) | | ----------------- | ---------------- | | --primary-text | #1A2228 | | --secondary-text | #505660 | | --tertiary-text | #6A7078 | | --disabled-text | #6A7078 | | --links | #0C71AC | | --pricing | #218336 | | --error-text | #D9222A | | --neutral | #FFFFFF |

Rating bar colors

| Color Variable | Color Code (HEX) | | ------------------- | ---------------- | | --rating-excellent | #218336 | | --rating-great | #67AB04 | | --rating-average | #D99B22 | | --rating-poor | #D97322 | | --rating-bad | #D9222A |

Alert title colors

| Color Variable | Color Code (HEX) | | ---------------- | ---------------- | | --success-title | #218336 | | --error-title | #D9222A | | --warning-title | #b95000 | | --info-title | #2e5aac |

Alert panel colors

| Color Variable | Color Code (HEX) | | ---------------------- | ---------------- | | --success-panelfill | #F8FFFC | | --success-panelborder | #218336 | | --error-panelfill | #FFF4F4 | | --error-panelborder | #D9222A | | --warning-panelfill | #FDFAF3 | | --warning-panelborder | #B95000 | | --info-panelfill | #F0F3FA | | --info-panelborder | #2E5AAC |

Button hover and focus colors

| Color Variable | Color Code (HEX) | | ------------------ | ---------------- | | --hover-primary | #2FAA48 | | --focus-primary | #26a23f | | --hover-secondary | #0C69C2 | | --focus-secondary | #0C69C2 | | --hover-tertiary | #0C69C2 | | --focus-tertiary | #0C69C2 |

Typography

| Classes | Font size | Font weight | Line height | | ---------------- | --------- | ----------- | ----------- | | --txt--sm-sb-sm | 1.2 | 600 | 1 | | --txt--sm-r-sm | 1.2 | 400 | 1 | | --txt--md-sb-sm | 1.4 | 600 | 1 | | --txt--md-r-sm | 1.4 | 400 | 1 | | --txt--lg-sb-sm | 1.6 | 600 | 1 | | --txt--lg-r-sm | 1.6 | 400 | 1 | | --txt--xl-r-sm | 1.8 | 400 | 1 | | --txt--xl-sb-sm | 1.8 | 600 | 1 | | --txt--sm-sb-md | 1.2 | 600 | 1.2 | | --txt--sm-r-md | 1.2 | 400 | 1.2 | | --txt--md-sb-md | 1.4 | 600 | 1.2 | | --txt--md-r-md | 1.4 | 400 | 1.2 | | --txt--lg-sb-md | 1.6 | 600 | 1.2 | | --txt--xl-sb-md | 1.8 | 600 | 1.2 | | --txt--sm-r-md | 1.2 | 400 | 1.5 | | --txt--sm-sb-md | 1.2 | 600 | 1.5 | | --txt--md-sb-md | 1.4 | 600 | 1.5 | | --txt--md-r-md | 1.4 | 400 | 1.5 | | --txt--lg-sb-md | 1.6 | 600 | 1.5 |

Mixins

| Mixin Name | Uses | | ------------------ | ---------------------------------------------------------------------------------------------------------------- | | border-radius | To apply border radius to all sides of an element | | padding | To apply padding to all side of an element | | padding-horizontal | To apply padding to left & right sides only of an element | | margin | To apply margin to all side of an element | | margin-horizontal | To apply margin to left & right sides only of an element | | font-smoothing | For font smoothing | | text-inherit | To inherit all properties of a parent elementfont-family, font-size, font-style, font-weight, letter-spacing |

Functions

| Function Name | Uses | | ------------- | -------------------------------------- | | calculate_em | To convert px into em | | calculate_rem | To convert px into rem | | encode-svg | To encode svg for background images | | str-replace | It is useful to provide dynamic string |

Trigger changes - 1