Element variables

Highcharts Grid includes a set of predefined CSS variables for theming interactive elements such as inputs, icon controls, and buttons used in headers, body cells, and pagination.

For table surfaces such as rows, columns, headers, and cells, see Grid variables.

Variable naming and fallback

Most element variables follow this pattern:

  1. Start from global element variables.
  2. Override with section-specific variables where needed.
  3. Fall back to global values when section variables are not defined.

Example:

.theme-elements {
    --hcg-input-border-radius: 6px;
    --hcg-pagination-input-border-radius: 0;
}

In this case, all inputs use 6px radius globally, while inputs in pagination are overridden to 0.

Inputs

Globals

VariableDefault ValueValid Values
--hcg-input-padding5pxpadding
--hcg-input-font-weightinheritfont-weight
--hcg-input-font-sizeinheritfont-size
--hcg-input-font-familyinheritfont-family
--hcg-input-colorinheritcolor
--hcg-input-text-align--hcg-text-aligntext-align
--hcg-input-border-radius0border-radius
--hcg-input-border-width1pxborder-width
--hcg-input-border-stylesolidborder-style
--hcg-input-border-color--hcg-input-colorborder-color
--hcg-input-background#ffffff/#141414background
--hcg-input-hover-color--hcg-input-colorcolor
--hcg-input-hover-background--hcg-input-backgroundbackground
--hcg-input-hover-border-color--hcg-input-border-colorborder-color

Inputs inherit surrounding typography by default. That means header inputs follow header typography, body-cell inputs follow cell typography, and pagination inputs follow pagination typography unless input-specific font variables are set. When input-specific color tokens are unset, resting text color inherits the surrounding section color and the resting border follows that same color via currentColor.

Section prefixes

Variable PrefixApplies ToFallback
--hcg-header-inputInputs inside header cellsGlobal
--hcg-cell-inputInputs inside body cellsGlobal
--hcg-pagination-inputInputs inside pagination UIGlobal

Example

.theme-inputs {
    --hcg-input-font-size: 13px;
    --hcg-input-padding: 8px;
    --hcg-input-border-radius: 2px;
    --hcg-input-border-color: #c9c9c9;
    --hcg-input-hover-border-color: #8e8e8e;
    --hcg-pagination-input-border-color: #676767;
}

Buttons

Globals

VariableDefault ValueValid Values
--hcg-button-padding6pxpadding
--hcg-button-font-weightinheritfont-weight
--hcg-button-font-sizeinheritfont-size
--hcg-button-font-familyinheritfont-family
--hcg-button-colorinheritcolor
--hcg-button-border-radius0border-radius
--hcg-button-border-width1pxborder-width
--hcg-button-border-stylesolidborder-style
--hcg-button-border-color--hcg-button-colorborder-color
--hcg-button-backgroundtransparentbackground
--hcg-button-hover-color#ffffff/#000000color
--hcg-button-hover-background#000000/#ffffffbackground
--hcg-button-hover-border-color--hcg-button-border-colorborder-color
--hcg-button-selected-color#ffffff/#000000color
--hcg-button-selected-background#000000/#ffffffbackground
--hcg-button-selected-border-color--hcg-button-border-colorborder-color

Buttons inherit surrounding typography by default. That means body-cell buttons follow cell typography and pagination buttons follow pagination typography unless button-specific font variables are set. When button-specific color tokens are unset, resting text color inherits the surrounding section color and the resting border follows that same color via currentColor. Theme classes can still override those defaults.

Section prefixes

Variable PrefixApplies ToFallback
--hcg-cell-buttonButtons inside body cellsGlobal
--hcg-pagination-buttonButtons inside pagination UIGlobal

Example

.theme-buttons {
    --hcg-button-font-weight: 600;
    --hcg-button-font-size: 13px;
    --hcg-button-border-radius: 2px;
    --hcg-button-padding: 5px;
    --hcg-button-border-color: #d0d0d0;
    --hcg-button-hover-background: #ececec;
    --hcg-cell-button-selected-background: #1a7f37;
    --hcg-cell-button-selected-color: #ffffff;
    --hcg-pagination-button-selected-background: #000000;
    --hcg-pagination-button-selected-color: #ffffff;
}

Header toolbar controls use the dedicated --hcg-icon-* variables described below, not the button token family.

Icons

Globals

VariableDefault ValueValid Values
--hcg-icon-padding6pxpadding
--hcg-icon-font-weightinheritfont-weight
--hcg-icon-font-sizeinheritfont-size
--hcg-icon-font-familyinheritfont-family
--hcg-icon-colorinheritcolor
--hcg-icon-border-radius0border-radius
--hcg-icon-border-width1pxborder-width
--hcg-icon-border-stylesolidborder-style
--hcg-icon-border-colortransparentborder-color
--hcg-icon-backgroundtransparentbackground
--hcg-icon-hover-color--hcg-icon-colorcolor
--hcg-icon-hover-backgroundblack/white tint source colorcolor
--hcg-icon-hover-border-color--hcg-icon-border-colorborder-color

Resting background is transparent by default. The hover background token expects a source color, not a pre-mixed translucent background. Grid applies its own transparent mix to that source, so --hcg-icon-hover-background: green produces a translucent green hover surface rather than a solid fill. Hovered and highlighted icon controls reuse that hover tint, while selected icon controls keep the resting surface styling unless they are also hovered.

Section prefixes

Variable PrefixApplies ToFallback
--hcg-header-iconIcons inside header cellsGlobal
--hcg-cell-iconIcons inside body cellsGlobal

Example

.theme-icons {
    --hcg-icon-padding: 3px;
    --hcg-icon-font-size: 15px;
    --hcg-header-icon-color: red;
    --hcg-cell-icon-background: gray;
}

Focus ring

Globals

VariableDefault ValueValid Values
--hcg-focus-ring-color--hcg-colorcolor
--hcg-focus-ring-width2pxlength

Example

.theme-focus {
    --hcg-focus-ring-color: #5b6ee1;
    --hcg-focus-ring-width: 1px;
}

Summary

  1. Define global input, icon, and button variables first.
  2. Override by section using --hcg-header-*, --hcg-cell-*, and --hcg-pagination-*.
  3. Use shared focus ring variables for accessible focus styling.
  4. Combine with Grid variables for full table and element theming.
Edit this page