HexagonJS
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
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
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
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
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
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 action color to the border-color of the element.
hx-border-action
Applies the complementary 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.