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