Component Properties

The following are the Components section CSS Variables when configuring specific elements of a new theme:

Accordion

Color

CSS Variable	Description	Value
--jgt-acc-contentBg	Background color of the accordion body	#ffffff
--jgt-acc-headerBg	Background color of the accordion header	rgba(0, 0, 0, 0.02)
--jgt-acc-colorBorder	Border color of the accordion	#d9d9d9
--jgt-acc-colorText	Color of the accordion body text	rgba(0, 0, 0, 0.88)
--jgt-acc-colorTextHeading	Color of the accordion header text	#222222 rgba(0, 0, 0, 0.88)

Size

CSS Variable	Description	Value
--jgt-acc-contentPadding	Accordion body full padding (e.g., 16px 16px)	16px 16px
--jgt-acc-headerPadding	Accordion header full padding (e.g., 12px 16px)	12px 16px
--jgt-acc-fontSize	Accordion header font size	14px
--jgt-acc-lineHeight	Accordion header line height	1.5714285714285714
--jgt-acc-lineWidth	Accordion border line width	1px

Style

CSS Variable	Description	Value
--jgt-acc-borderRadius	Border radius of the accordion	8px
--jgt-acc-lineType	Line type of the accordion	solid

Card

Color

CSS Variable	Description	Value
--jgt-card-headerBg	Background color of the card header	#ffffff
--jgt-card-colorBgContainer	Background color of the card body	#FFFFFF
--jgt-card-colorBorderSecondary	Border color of the card	#F0F0F0
--jgt-card-colorText	Not in use	rgba(0, 0, 0, 0.88)
--jgt-card-colorTextDescription	Color of the card text	rgba(0, 0, 0, 0.45)
--jgt-card-colorTextHeading	Color of the card header text	rgba(0, 0, 0, 0.88)

Size

CSS Variable	Description	Value
--jgt-card-headerFontSize	Card header font size	16px
--jgt-card-headerHeight	Card header height	56px
--jgt-card-fontHeight	Not in use	22
--jgt-card-fontSizeLG	Card body font size	14px
--jgt-card-lineHeight	Card font line height	1.5714285714285714
--jgt-card-lineWidth	Card border line width	1px
--jgt-card-padding	Card body padding	24px

Style

CSS Variable	Description	Value
--jgt-card-borderRadiusLG	Card border-radius	8px
--jgt-card-boxShadowCard	Card box-shadow	none
--jgt-card-fontWeightStrong	Card header font weight	600
--jgt-card-lineType	Card border line type	solid

List

Color

CSS Variable	Description	Value
--jgt-list-contentBg	Background color of list .list-group-item	#FFFFFF
--jgt-list-colorBorder	Border color of the list	rgba(5, 5, 5, 0.06)
--jgt-list-colorText	Color of the list	rgba(0, 0, 0, 0.88)
--jgt-list-colorTextDescription	Color of description .list-group-item .text-muted	rgba(0, 0, 0, 0.45)

Size

CSS Variable	Description	Value
--jgt-list-avatarMarginRight	Not in use	16px
--jgt-list-descriptionFontSize	Font size of description .list-group-item .text-muted	14px
--jgt-list-itemPadding	Padding of the list item	12px 20px
--jgt-list-fontSize	Font size of the list item	14px
--jgt-list-lineHeight	Line height of the list item	1.5714285714285714
--jgt-list-lineWidth	Line width of the list item	1px

Style

CSS Variable	Description	Value
--jgt-list-borderRadius	Border radius of the list item	8px
--jgt-list-lineType	Border line type of the list item	solid

Tab

Color

CSS Variable	Description	Value
--jgt-tab-cardBg	Background color of the tab	rgba(0, 0, 0, 0.02)
--jgt-tab-itemColor	Color of the tab item	rgba(0, 0, 0, 0.88)
--jgt-tab-itemHoverColor	Color when tab item is hovered	#4096FF
--jgt-tab-itemSelectedColor	Active tab item color	#1677FF
--jgt-tab-colorBgContainer	Active tab item background color	#FFFFFF
--jgt-tab-colorBorder	Tab border color	#F0F0F0

Size

CSS Variable	Description	Value
--jgt-tab-cardHeight	Tab item height	40px
--jgt-tab-cardPadding	Tab item full padding (e.g., 8px 16px)	8px 16px
--jgt-tab-horizontalMargin	Full padding of the tab element (e.g., 0 0 50px 0)	0 0 16px 0
--jgt-tab-titleFontSize	Tab item font size	14px
--jgt-tab-fontHeight	Tab item font weight	500
--jgt-tab-lineHeight	Tab item line height	1.5714285714285714

Style

CSS Variable	Description	Value
--jgt-tab-cardGutter	Distance between each tab item	2px
--jgt-tab-borderRadius	Border-radius of the top left and top right of tab item	6px
--jgt-tab-lineType	Border line type of the tab	solid

Table

Color

CSS Variable	Description	Value
--jgt-table-borderColor	Border color for table	#F0F0F0
--jgt-table-headerBg	Table header background color	#FAFAFA
--jgt-table-headerColor	Table header color	rgba(0, 0, 0, 0.88)
--jgt-table-headerFilterHoverBg	Not in use	rgba(0, 0, 0, 0.06)
--jgt-table-headerSortActiveBg	Table header sorted background color	#F0F0F0
--jgt-table-headerSortHoverBg	Table header sortable background color	#F0F0F0
--jgt-table-headerSplitColor	Header split color	#F0F0F0
--jgt-table-rowHoverBg	Table row hover background color	#FAFAFA
--jgt-table-rowSelectedBg	Selected table row background color	#E6F4FF
--jgt-table-colorBgContainer	Background color of table	#FFFFFF
--jgt-table-colorPrimary	Not in use	#1677FF
--jgt-table-colorText	Text color of table	rgba(0, 0, 0, 0.88)

Size

CSS Variable	Description	Value
--jgt-table-cellFontSize	Font size of each cell	14px
--jgt-table-cellPaddingBlock	Padding top & bottom of each cell	16px
--jgt-table-cellPaddingInline	Padding left & right of each cell	16px
--jgt-table-lineHeight	Font line height	1.5714285714285714
--jgt-table-lineWidth	Border line width	1px

Style

CSS Variable	Description	Value
--jgt-table-headerBorderRadius	Border radius for table header top-left and top-right	8px
--jgt-table-borderRadius	Not in use	6px
--jgt-table-fontWeightStrong	Table header font weight	600
--jgt-table-lineType	Border line type	solid

Breadcrumb

Color

CSS Variable	Description	Value
--jgt-breadcrumb-bgColor	Background color for the breadcrumb element	transparent
--jgt-breadcrumb-lastItemColor	Last breadcrumb item color	rgba(0, 0, 0, 0.88)
--jgt-breadcrumb-linkColor	Breadcrumb item color	rgba(0, 0, 0, 0.45)
--jgt-breadcrumb-linkHoverColor	Breadcrumb item hover color	rgba(0, 0, 0, 0.88)
--jgt-breadcrumb-separatorColor	Breadcrumb separator color	rgba(0, 0, 0, 0.45)
--jgt-breadcrumb-colorBgTextHover	Breadcrumb item hover background color	rgba(0, 0, 0, 0.06)
--jgt-breadcrumb-colorPrimaryBorder	Not in use	#91caff
--jgt-breadcrumb-colorText	Color text for breadcrumb	rgba(0, 0, 0, 0.88)

Size

CSS Variable	Description	Value
--jgt-breadcrumb-iconFontSize	Icon font size	14px
--jgt-breadcrumb-separatorMargin	Margin left & right for the separator	4px
--jgt-breadcrumb-fontHeight	Not in use	-
--jgt-breadcrumb-fontSize	Font size for breadcrumb	14px
--jgt-breadcrumb-fontWeight	Font weight for breadcrumb	400
--jgt-breadcrumb-lineHeight	Line height for font	1.5714285714285714
--jgt-breadcrumb-padding	Padding left & right for the breadcrumb item	4px
--jgt-breadcrumb-paddingBlockStart	Padding top of the breadcrumb element	18px

Style

CSS Variable	Description	Value
--jgt-breadcrumb-borderRadius	Border radius for breadcrumb item	4px

Dropdown

Color

CSS Variable	Description	Value
--jgt-dd-colorBgElevated	Dropdown background color	#ffffff
--jgt-dd-colorText	Dropdown color	rgba(0, 0, 0, 0.88)
--jgt-dd-controlItemBgHover	Dropdown item hover background color	rgba(0, 0, 0, 0.04)

Size

CSS Variable	Description	Value
--jgt-dd-paddingBlock	Padding top & bottom of the dropdown item	5px
--jgt-dd-controlPaddingHorizontal	Padding left & right of the dropdown item	12px
--jgt-dd-fontSize	Font size of the dropdown item	14px
--jgt-dd-lineHeight	Font line height of the dropdown item	1.5714285714285714
--jgt-dd-padding	Padding of the dropdown element	4px

Style

CSS Variable	Description	Value
--jgt-dd-borderRadius	Border radius of the dropdown element	8px
--jgt-dd-boxShadowSecondary	Box shadow of the dropdown element	0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)

Pagination

Color

CSS Variable	Description	Value
--jgt-pg-itemActiveBg	Active item background color	#FFFFFF
--jgt-pg-itemActiveBgDisabled	Disabled item background color	#D9D9D9
--jgt-pg-itemActiveColorDisabled	Disabled item color	#BFBFBF
--jgt-pg-colorBgContainer	Background color of pagination item	#FFFFFF
--jgt-pg-colorBgTextActive	Not in use	-
--jgt-pg-colorBgTextHover	Item hovered background color	#F0F0F0
--jgt-pg-colorPrimary	Active item border color & font color	#1677FF
--jgt-pg-colorPrimaryHover	Active item hovered border color & font color	#4096FF
--jgt-pg-colorText	Color for pagination	rgba(0, 0, 0, 0.88)
--jgt-pg-colorTextDisabled	Disabled item text color	#BFBFBF

Size

CSS Variable	Description	Value
--jgt-pg-itemSize	Pagination item height and width	32px
--jgt-pg-controlHeight	Control height of the pagination element	32px
--jgt-pg-fontSize	Font size of the pagination item	14px
--jgt-pg-lineHeight	Line height of the pagination item	1.5714285714285714
--jgt-pg-lineWidth	Line width of the pagination item	1px
--jgt-pg-padding	Padding left & right of the pagination item	6px
--jgt-pg-margin	Margin right of the pagination item	8px

Style

CSS Variable	Description	Value
--jgt-pg-lineType	Line type of border	solid
--jgt-pg-borderRadius	Border radius of pagination item	6px
--jgt-pg-fontWeightStrong	Font weight of active pagination item	600

Wizard

Color

CSS Variable	Description	Value
--jgt-wizard-colorPrimary	Active wizard item background color	#1677FF
--jgt-wizard-colorSplit	Border color for the split	rgba(5, 5, 5, 0.06)
--jgt-wizard-colorText	Active wizard item title color	rgba(0, 0, 0, 0.88)
--jgt-wizard-colorTextDescription	Unactive wizard item color	rgba(0, 0, 0, 0.45)
--jgt-wizard-colorTextLightSolid	Active wizard item color	#FFFFFF

Sizing

CSS Variable	Description	Value
--jgt-wizard-titleLineHeight	Title line height	32px
--jgt-wizard-controlHeight	Height of the wizard item	32px
--jgt-wizard-fontSize	Font size of wizard item and title	14px
--jgt-wizard-lineHeight	Font line height	1.5714285714285714
--jgt-wizard-lineWidth	Border line width	1px

Style

CSS Variable	Description	Value
--jgt-wizard-borderRadius	Border radius of wizard item	50%
--jgt-wizard-lineType	Border line type	solid

Button

Color

CSS Variable	Description	Value
--jgt-btn-borderColorDisabled	Disabled button border color	#d9d9d9
--jgt-btn-dangerColor	Danger button color	#FFFFFF
--jgt-btn-defaultActiveBg	Default button active background	#FFFFFF
--jgt-btn-defaultActiveBorderColor	Default button active border color	#0958D9
--jgt-btn-defaultActiveColor	Default button active color	#0958D9
--jgt-btn-defaultBg	Default button background	#FFFFFF
--jgt-btn-defaultBorderColor	Default button border color	#D9D9D9
--jgt-btn-defaultColor	Default button color	rgba(0, 0, 0, 0.88)
--jgt-btn-defaultHoverBg	Default button hover background	#FFFFFF
--jgt-btn-defaultHoverBorderColor	Default button hover border color	#4096FF
--jgt-btn-defaultHoverColor	Default button hover color	#4096FF
--jgt-btn-linkHoverBg	Link hover background	#FFFFFF
--jgt-btn-primaryColor	Primary button color	#FFFFFF
--jgt-btn-colorBgContainerDisabled	Disabled button background color	rgba(0, 0, 0, 0.04)
--jgt-btn-colorBorder	Border color	#D9D9D9
--jgt-btn-colorError	Danger button background color	#ff4d4f
--jgt-btn-colorErrorActive	Danger button active background color	#D9363E
--jgt-btn-colorErrorHover	Danger button hover background color	#ff7875
--jgt-btn-colorLink	Link color	#1677ff
--jgt-btn-colorLinkActive	Active link color	#0958d9
--jgt-btn-colorLinkHover	Link hover color	#69b1ff
--jgt-btn-colorPrimary	Primary button background color	#1677FF
--jgt-btn-colorPrimaryActive	Primary button active background color	#0958d9
--jgt-btn-colorPrimaryHover	Primary button hover background color	#4096ff
--jgt-btn-colorTextDisabled	Disabled button color	rgba(0, 0, 0, 0.25)

Size

CSS Variable	Description	Value
--jgt-btn-contentFontSize	Button font size	14px
--jgt-btn-contentLineHeight	Button line height	1
--jgt-btn-paddingBlock	Button padding top & bottom	8px
--jgt-btn-paddingInline	Button padding left & right	15px
--jgt-btn-controlHeight	Button height	32px

Style

CSS Variable	Description	Value
--jgt-btn-borderRadius	Button border radius	6px
--jgt-btn-fontWeight	Button font weight	400
--jgt-btn-dangerShadow	Danger button box shadow	0 2px 0 rgba(255, 38, 5, 0.06)
--jgt-btn-defaultShadow	Default button box shadow	0 2px 0 rgba(0, 0, 0, 0.02)
--jgt-btn-primaryShadow	Primary button box shadow	0 2px 0 rgba(5, 145, 255, 0.1)

Typography

Color

CSS Variable	Description	Value
--jgt-tpgh-colorLink	Link color	#1677FF
--jgt-tpgh-colorLinkActive	Active link color	#0958D9
--jgt-tpgh-colorLinkHover	Link hover color	#69B1FF
--jgt-tpgh-colorText	Text color	rgba(0, 0, 0, 0.88)
--jgt-tpgh-colorTextHeading	Heading text color	rgba(0, 0, 0, 0.88)
--jgt-tpgh-colorTextDisabled	Disabled text color	rgba(0, 0, 0, 0.25)
--jgt-tpgh-colorTextDescription	Description text color	rgba(0, 0, 0, 0.45)

Size

CSS Variable	Description	Value
--jgt-tpgh-titleMarginBottom	Margin bottom for headings	0.5em
--jgt-tpgh-titleMarginTop	Margin top for headings	0px
--jgt-tpgh-fontSize	Font size	14px
--jgt-tpgh-fontSizeHeading1	Font size for H1	38px
--jgt-tpgh-fontSizeHeading2	Font size for H2	30px
--jgt-tpgh-fontSizeHeading3	Font size for H3	24px
--jgt-tpgh-fontSizeHeading4	Font size for H4	20px
--jgt-tpgh-fontSizeHeading5	Font size for H5	16px
--jgt-tpgh-lineHeight	Line height	1.5714285714285714
--jgt-tpgh-lineHeightHeading1	Line height for H1	1.2105263157894737
--jgt-tpgh-lineHeightHeading2	Line height for H2	1.2666666666666666
--jgt-tpgh-lineHeightHeading3	Line height for H3	1.3333333333333333
--jgt-tpgh-lineHeightHeading4	Line height for H4	1.4
--jgt-tpgh-lineHeightHeading5	Line height for H5	1.5

Style

CSS Variable	Description	Value
--jgt-tpgh-fontWeightStrong	Font weight for headings (H1, H2, H3, H4, H5)	600
--jgt-tpgh-googleFontAPI	Google Font API Key	Explore Google Font API: developers.google.com/fonts/docs/developer_api
--jgt-tpgh-fontFamilyCode	Font family for code	'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
--jgt-tpgh-fontFamily	Font family	(Not provided)

Checkbox

Color

CSS Variable	Description	Value
--jgt-cb-colorBgContainer	Checkbox background color	#FFFFFF
--jgt-cb-colorBgContainerDisabled	Disabled checkbox background color	rgba(0, 0, 0, 0.04)
--jgt-cb-colorBorder	Checkbox border color	#D9D9D9
--jgt-cb-colorPrimary	Checkbox checked background color	#1677FF
--jgt-cb-colorPrimaryBorder	Checkbox checked border color	#91CAFF
--jgt-cb-colorPrimaryHover	Checkbox hover border color	#4096FF
--jgt-cb-colorText	Checkbox label color	rgba(0, 0, 0, 0.88)
--jgt-cb-colorTextDisabled	Disabled label color	rgba(0, 0, 0, 0.25)

Size

CSS Variable	Description	Value
--jgt-cb-controlInteractiveSize	Checkbox size	16px
--jgt-cb-fontSize	Label font size	14px
--jgt-cb-lineHeight	Label line height	1.5714285714285714
--jgt-cb-lineWidth	Border line width	1px
--jgt-cb-padding	Label padding left	8px

Style

CSS Variable	Description	Value
--jgt-cb-borderRadiusSM	Checkbox border radius	4px
--jgt-cb-lineType	Border line type	solid

Form

Color

CSS Variable	Description	Value
--jgt-form-labelRequiredMarkColor	Mandatory field mark color	#FF4D4F
--jgt-form-colorBorder	Border color	#D9D9D9
--jgt-form-colorText	Form label color	rgba(0, 0, 0, 0.88)
--jgt-form-colorTextDescription	Form description color	rgba(0, 0, 0, 0.45)

Size

CSS Variable	Description	Value
--jgt-form-itemMarginBottom	Field margin bottom	24px
--jgt-form-labelWidth	Width of label	30%
--jgt-form-labelFontSize	Font size of label	14px
--jgt-form-labelHeight	Height of the label	32px
--jgt-form-labelMarginInlineEnd	Label margin right	15px
--jgt-form-fieldWidth	Width of the field	70%
--jgt-form-lineWidth	Border line width	1px
--jgt-form-lineHeight	Line height of label	1.5714285714285714

Style

CSS Variable	Description	Value
--jgt-form-lineType	Border line type	solid
--jgt-form-labelFloat	Label float position	left
--jgt-form-fieldFloat	Field label float position	left
--jgt-form-labelAlign	Label text align	end
--jgt-form-fontWeight	Label font weight	400
--jgt-form-controlOutline	Control outline color	rgba(5, 145, 255, 0.1)
--jgt-form-controlOutlineWidth	Control outline width	2px

Input

Color

CSS Variable	Description	Value
--jgt-input-activeBg	Input active background color	#FFFFFF
--jgt-input-hoverBg	Input hover background color	#FFFFFF
--jgt-input-colorText	Input field color	rgba(0, 0, 0, 0.88)
--jgt-input-colorTextDescription	Input description color	rgba(0, 0, 0, 0.45)
--jgt-input-colorTextDisabled	Disabled input color	rgba(0, 0, 0, 0.25)
--jgt-input-colorTextPlaceholder	Input placeholder color	rgba(0, 0, 0, 0.25)
--jgt-input-colorBgContainer	Input background color	#FFFFFF
--jgt-input-colorBgContainerDisabled	Disabled input background color	rgba(0, 0, 0, 0.04)
--jgt-input-colorBorder	Input border color	#D9D9D9
--jgt-input-colorIcon	Input icon color	rgba(0, 0, 0, 0.45)
--jgt-input-colorIconHover	Input icon hover color	rgba(0, 0, 0, 0.88)
--jgt-input-activeBorderColor	Input active border color	#1677FF
--jgt-input-hoverBorderColor	Input hover border color	#4096FF

Size

CSS Variable	Description	Value
--jgt-input-inputFontSize	Input font size	14px
--jgt-input-paddingBlock	Input padding top & bottom	4px
--jgt-input-paddingInline	Input padding left & right	11px
--jgt-input-controlHeight	Input height	32px
--jgt-input-fontSizeIcon	Input icon font size	12px
--jgt-input-lineHeight	Input line height	1.5714285714285714
--jgt-input-lineWidth	Input border line width	1px

Style

CSS Variable	Description	Value
--jgt-input-activeShadow	Active input field box shadow	0 0 0 2px rgba(5, 145, 255, 0.1)
--jgt-input-borderRadius	Input field border radius	6px
--jgt-input-lineType	Input field border line type	solid

Radio

Color

CSS Variable	Description	Value
--jgt-radio-colorBgContainer	Radio background color	#FFFFFF
--jgt-radio-colorBgContainerDisabled	Disabled radio background color	rgba(0, 0, 0, 0.04)
--jgt-radio-colorBorder	Radio border color	#D9D9D9
--jgt-radio-colorPrimary	Checked radio background color	#1677FF
--jgt-radio-colorPrimaryBorder	Checked radio border color	#91CAFF
--jgt-radio-colorPrimaryHover	Radio hover color	#4096FF
--jgt-radio-colorText	Label color	rgba(0, 0, 0, 0.88)
--jgt-radio-colorTextDisabled	Disabled label color	rgba(0, 0, 0, 0.25)

Size

CSS Variable	Description	Value
--jgt-radio-radioSize	Size of radio	16px
--jgt-radio-fontSize	Label font size	14px
--jgt-radio-lineHeight	Label line height	1.5714285714285714
--jgt-radio-lineWidth	Radio border line width	1px
--jgt-radio-dotSize	Size of the radio dot	8px
--jgt-radio-padding	Label padding left	8px

Style

CSS Variable	Description	Value
--jgt-radio-lineType	Radio border line type	solid

Upload

Color

CSS Variable	Description	Value
--jgt-upload-colorBorder	Border color	#D9D9D9
--jgt-upload-colorError	Remove link color	#FF4D4F
--jgt-upload-colorFillAlter	Dropzone background color	rgba(0, 0, 0, 0.02)
--jgt-upload-colorPrimary	Dropzone container hover border color	#1677FF
--jgt-upload-colorText	Dropzone color	rgba(0, 0, 0, 0.88)
--jgt-upload-colorTextDescription	Dropzone description color	rgba(0, 0, 0, 0.45)

Size

CSS Variable	Description	Value
--jgt-upload-controlHeightLG	Dropzone minimum height	40px
--jgt-upload-fontSize	Dropzone font size	14px
--jgt-upload-lineHeight	Dropzone border line height	1.5714285714285714
--jgt-upload-lineWidth	Dropzone border line width	1px

Style

CSS Variable	Description	Value
--jgt-upload-lineType	Dropzone border line type	dashed
--jgt-upload-borderRadiusLG	Dropzone border radius	8px