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 element font-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