HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Palette
Gives access to the theme's color palette and adds classes for coloring elements with the theme colors.
Examples

Text Classes

hx-text-default
hx-text-action
hx-text-positive
hx-text-warning
hx-text-negative
hx-text-info
hx-text-complement
hx-text-contrast
hx-text-disabled

Background Classes

hx-background-default
hx-background-action
hx-background-positive
hx-background-warning
hx-background-negative
hx-background-info
hx-background-complement
hx-background-contrast
hx-background-disabled

Border Classes

hx-border-default
hx-border-action
hx-border-positive
hx-border-warning
hx-border-negative
hx-border-info
hx-border-complement
hx-border-contrast
hx-border-disabled
Api
Change Log
Objects
hx.theme.palette
Properties
complementColStringThecomplementarycolorusedbythecurrenttheme
complimentColStringThecomplimentarycolorusedbythecurrenttheme
contrastColStringThecontrastingcolorusedbythecurrenttheme
darkTextColStringThedarktextcolorusedbythecurrenttheme
defaultColStringThedefaultcolorusedbythecurrenttheme
infoColStringTheinfocolorusedbythecurrenttheme
lightTextColStringThelighttextcolorusedbythecurrenttheme
negativeColStringThenegativecolorusedbythecurrenttheme
positiveColStringThepositivecolorusedbythecurrenttheme
warningColStringThewarningcolorusedbythecurrenttheme
Functions
hx.palette.backgroundContextselectorElement / StringcontextString
Adds a background context class to an element. 
// adds the 'hx-background-positive' class to the element, and removes all other background context classes
hx.palette.context('.my-element', 'positive')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
contextString
The context to apply. May be one of: 
hx.palette.backgroundContext('.my-element', undefined) // removes the background context class
hx.palette.backgroundContext('.my-element', 'default')
hx.palette.backgroundContext('.my-element', 'positive')
hx.palette.backgroundContext('.my-element', 'warning')
hx.palette.backgroundContext('.my-element', 'negative')
hx.palette.backgroundContext('.my-element', 'info')
hx.palette.backgroundContext('.my-element', 'action')
hx.palette.backgroundContext('.my-element', 'complement')
hx.palette.backgroundContext('.my-element', 'contrast')
hx.palette.backgroundContext('.my-element', 'disabled')
hx.palette.backgroundContextselectorElement / StringString
Gets the background context class of an element. 
// gets the context of the element (by looking at the class of the element)
hx.palette.backgroundContext('.my-element')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
Returns
String
The background context of the element. May be one of:
  • undefined- if the element has no context class
  • 'default'- the element has the 'hx-background-default' class
  • 'positive'- the element has the 'hx-background-positive' class
  • 'warning'- the element has the 'hx-background-warning' class
  • 'negative'- the element has the 'hx-background-negatibe' class
  • 'info'- the element has the 'hx-background-info' class
  • 'action'- the element has the 'hx-background-action' class
  • 'complement'- the element has the 'hx-background-complement' class
  • 'contrast'- the element has the 'hx-background-contrast' class
  • 'disabled'- the element has the 'hx-background-disabled' class
hx.palette.borderContextselectorElement / StringcontextString
Adds a border context class to an element. 
// adds the 'hx-border-positive' class to the element, and removes all other border context classes
hx.palette.context('.my-element', 'positive')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
contextString
The context to apply. May be one of: 
hx.palette.borderContext('.my-element', undefined) // removes the border context class
hx.palette.borderContext('.my-element', 'default')
hx.palette.borderContext('.my-element', 'positive')
hx.palette.borderContext('.my-element', 'warning')
hx.palette.borderContext('.my-element', 'negative')
hx.palette.borderContext('.my-element', 'info')
hx.palette.borderContext('.my-element', 'action')
hx.palette.borderContext('.my-element', 'complement')
hx.palette.borderContext('.my-element', 'contrast')
hx.palette.borderContext('.my-element', 'disabled')
hx.palette.borderContextselectorElement / StringString
Gets the border context class of an element. 
// gets the context of the element (by looking at the class of the element)
hx.palette.borderContext('.my-element')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
Returns
String
The border context of the element. May be one of:
  • undefined- if the element has no context class
  • 'default'- the element has the 'hx-border-default' class
  • 'positive'- the element has the 'hx-border-positive' class
  • 'warning'- the element has the 'hx-border-warning' class
  • 'negative'- the element has the 'hx-border-negatibe' class
  • 'info'- the element has the 'hx-border-info' class
  • 'action'- the element has the 'hx-border-action' class
  • 'complement'- the element has the 'hx-border-complement' class
  • 'contrast'- the element has the 'hx-border-contrast' class
  • 'disabled'- the element has the 'hx-border-disabled' class
hx.palette.contextselectorElement / StringcontextString
Adds a context class to an element. 
// adds the 'hx-positive' class to the element, and removes all other context classes
hx.palette.context('.my-element', 'positive')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
contextString
The context to apply. May be one of: 
hx.palette.context('.my-element', 'positive')
hx.palette.context('.my-element', 'warning')
hx.palette.context('.my-element', 'negative')
hx.palette.context('.my-element', 'info')
hx.palette.context('.my-element', 'action')
hx.palette.context('.my-element', 'complement')
hx.palette.context('.my-element', 'contrast')
hx.palette.context('.my-element', 'disabled')
hx.palette.contextselectorElement / StringString
Gets a context class of an element. 
// gets the context of the element (by looking at the class of the element)
hx.palette.context('.my-element')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
Returns
String
The context of the element. May be one of:
  • undefined- if the element has no context class
  • 'positive'- the element has the 'hx-positive' class
  • 'warning'- the element has the 'hx-warning' class
  • 'negative'- the element has the 'hx-negatibe' class
  • 'info'- the element has the 'hx-info' class
  • 'action'- the element has the 'hx-action' class
  • 'complement'- the element has the 'hx-complement' class
  • 'contrast'- the element has the 'hx-contrast' class
  • 'disabled'- the element has the 'hx-disabled' class
hx.palette.textContextselectorElement / StringcontextString
Adds a text context class to an element. 
// adds the 'hx-text-positive' class to the element, and removes all other text context classes
hx.palette.context('.my-element', 'positive')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
contextString
The context to apply. May be one of: 
hx.palette.textContext('.my-element', undefined) // removes the text context class
hx.palette.textContext('.my-element', 'default')
hx.palette.textContext('.my-element', 'positive')
hx.palette.textContext('.my-element', 'warning')
hx.palette.textContext('.my-element', 'negative')
hx.palette.textContext('.my-element', 'info')
hx.palette.textContext('.my-element', 'action')
hx.palette.textContext('.my-element', 'complement')
hx.palette.textContext('.my-element', 'contrast')
hx.palette.textContext('.my-element', 'disabled')
hx.palette.textContextselectorElement / StringString
Gets the text context class of an element. 
// gets the context of the element (by looking at the class of the element)
hx.palette.textContext('.my-element')
Arguments
selectorElement / String
The element to add the context class to (or a css selector that selects it)
Returns
String
The text context of the element. May be one of:
  • undefined- if the element has no context class
  • 'default'- the element has the 'hx-text-default' class
  • 'positive'- the element has the 'hx-text-positive' class
  • 'warning'- the element has the 'hx-text-warning' class
  • 'negative'- the element has the 'hx-text-negatibe' class
  • 'info'- the element has the 'hx-text-info' class
  • 'action'- the element has the 'hx-text-action' class
  • 'complement'- the element has the 'hx-text-complement' class
  • 'contrast'- the element has the 'hx-text-contrast' class
  • 'disabled'- the element has the 'hx-text-disabled' class
Classes
hx-background-action
Applies the action color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-complement
Applies the complementary color to the background of the element. The text color will also be set so that it works well with the background color.
hx-background-contrast
Applies the contrasting color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-default
Applies the default color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-disabled
Applies the disabled color to the background of the element.
hx-background-info
Applies the info color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-negative
Applies the negative color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-positive
Applies the positive color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-background-warning
Applies the warning color to the background of the element. The text color will also be set so that it works well with the background color.
Classes
hx-background-text-color
Applies the text color to a child element of any element with a background class.
hx-border-action
Applies the complementary color to the border-color of the element.
hx-border-action
Applies the action color to the border-color of the element.
hx-border-compliment
Applies the compliment color to the border-color of the element.
hx-border-contrast
Applies the contrast color to the border-color of the element.
hx-border-default
Applies the default color to the border-color of the element.
hx-border-disabled
Applies the disabled color to the border-color of the element.
hx-border-info
Applies the info color to the border-color of the element.
hx-border-negative
Applies the negative color to the border-color of the element.
hx-border-positive
Applies the positive color to the border-color of the element.
hx-border-warning
Applies the warning color to the border-color of the element.
hx-text-action
Applies the action color to the text in the element.
hx-text-complement
Applies the complement color to the text in the element.
hx-text-contrast
Applies the contrast color to the text in the element.
hx-text-default
Applies the default color to the text in the element.
hx-text-disabled
Applies the disabled color to the text of the element.
hx-text-info
Applies the info color to the text in the element.
hx-text-negative
Applies the negative color to the text in the element.
hx-text-positive
Applies the positive color to the text in the element.
hx-text-warning
Applies the warning color to the text in the element.