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