# Custom Properties
HiQ is built on a series of custom properties, all of which you can customize to theme elements for your project. You can find the full list of custom properties used in HiQ below.
Property Name (global/local) | Description |
---|---|
--hiq-color-gray-1 | The first gray in the grayscale palette. |
--hiq-color-gray-2 | The second gray in the grayscale palette. By default, used as the document text color. |
--hiq-color-gray-3 | The third gray in the grayscale palette. |
--hiq-color-gray-4 | The fourth gray in the grayscale palette. |
--hiq-color-gray-5 | The fifth gray in the grayscale palette. By default, used as the disabled color. |
--hiq-color-gray-6 | The sixth gray in the grayscale palette. By default, used as the border color. |
--hiq-color-gray-7 | The seventh gray in the grayscale palette. |
--hiq-color-gray-8 | The eight gray in the grayscale palette. |
--hiq-color-primary | The primary color, often defined as the 'brand' color. By default, used for links and buttons. |
--hiq-color-success | The color used to define success states in meter elements. |
--hiq-color-warning | The color used to define warning states in meter elements. |
--hiq-color-danger | The color used to define danger states in meter elements and invalid inputs. |
--hiq-html-background-color | Sets the background color on the html element, which is visible when scrolling past the beginning and end of the document. |
--hiq-body-background-color | Sets the background color on the document body. |
--hiq-disabled-border-color | Sets the border color for buttons and inputs that have the disabled attribute. |
--hiq-disabled-background-color | Sets the border color for buttons and inputs that have the disabled attribute. |
--hiq-disabled-text-color | Sets the text color for buttons and inputs that have the disabled attribute. |
--hiq-max-container-width | Sets the maximum width of elements with the .container class. |
--hiq-container-horizontal-gap | Sets the left and right gap between the container edge and the parent element. |
--hiq-block-element-margin-bottom | Sets the bottom margin on numerous block-level elements. |
--hiq-border-radius | Sets the base border radius that is applied to buttons, inputs, code blocks and other elements by default. |
--hiq-outline-width | Sets the width of the outline that appears on focusable elements when focused (this is actually created with box-shadow). |
--hiq-outline-color | Sets the color of the outline that appears on focusable elements when focused. |
--hiq-speed | Sets the default transition speed for hover, focus and active states on links, buttons and inputs. |
--hiq-easing | Defines the default easing curve for hover, focus, and active states on links, buttons and inputs. |
--hiq-text-rendering | Sets the text-rendering property that tells the browser what to optimize for when rendering text. |
--hiq-letter-spacing-base | The default letter-spacing assigned to the entire document. |
--hiq-text-color | Sets the default color for all text in the document, including body copy and headings. |
--hiq-font-family-base | Sets the default font family used for all elements, except for code, kbd, samp and pre. |
--hiq-font-family-monospace | Sets the default monospaced font family, used in code, kbd, samp and pre elements. |
--hiq-unitless-min-font-size | The minimum font size in pixels. Type will be no smaller than this. Must not include the term 'px'. |
--hiq-unitless-max-font-size | The maximum font size in pixels. Type will be no larger than this. Must not include the term 'px'. |
--hiq-unitless-lower-font-range | The viewport width in pixels at which font size starts increasing. At smaller widths, type remains static. Must not include the term 'px'. |
--hiq-unitless-upper-font-range | The viewport width in pixels at which font size stops increasing. At larger widths, type remains static. Must not include the term 'px'. |
--hiq-font-size-1 | First and largest size in the type scale. Applied by default to the h1 element. |
--hiq-font-size-2 | Second size in the type scale. Applied by default to the h2 element. |
--hiq-font-size-3 | Third size in the type scale. Applied by default to the h3 element. |
--hiq-font-size-4 | Fourth size in the type scale. Applied by default to the h4 element. |
--hiq-font-size-5 | Fifth size in the type scale. Applied by default to the h5 element. |
--hiq-font-size-6 | Sixth size in the type scale. Applied by default to the h6 element. |
--hiq-font-size-base | Base font size for document. All inline elements and paragraphs receive this type size by default. |
--hiq-font-size-large | Size slightly larger than the base font size. Set to the fourth font size by default. |
--hiq-font-size-small | Size slightly smaller than the base font size. The small element is assigned this size. Set to the sixth font size by default. |
--hiq-min-font-size-1 | The minimum size (in px) that the first font size can reach. Set to the primary first font size by default. |
--hiq-max-font-size-1 | The maximum size (in px) that the first font size can reach. Set to the primary first font size by default. |
--hiq-min-font-size-2 | The minimum size (in px) that the second font size can reach. Set to the primary second font size by default. |
--hiq-max-font-size-2 | The maximum size (in px) that the second font size can reach. Set to the primary second font size by default. |
--hiq-min-font-size-3 | The minimum size (in px) that the third font size can reach. Set to the primary third font size by default. |
--hiq-max-font-size-3 | The maximum size (in px) that the third font size can reach. Set to the primary third font size by default. |
--hiq-min-font-size-4 | The minimum size (in px) that the fourth font size can reach. Set to the primary fourth font size by default. |
--hiq-max-font-size-4 | The maximum size (in px) that the fourth font size can reach. Set to the primary fourth font size by default. |
--hiq-min-font-size-5 | The minimum size (in px) that the fifth font size can reach. Set to the primary fifth font size by default. |
--hiq-max-font-size-5 | The maximum size (in px) that the fifth font size can reach. Set to the primary fifth font size by default. |
--hiq-min-font-size-6 | The minimum size (in px) that the sixth font size can reach. Set to the primary sixth font size by default. |
--hiq-max-font-size-6 | The maximum size (in px) that the sixth font size can reach. Set to the primary sixth font size by default. |
--hiq-heading-font-weight | The font weight assigned to h1, h2, h3, h4, h5, and h6 elements. |
--hiq-line-height-base | Base line height for all elements, except for headings. |
--hiq-heading-line-height | Line height for h1, h2, h3, h4, h5, and h6 elements. |
--hiq-font-weight-light | The lightest weight in the default font weight range. |
--hiq-font-weight-normal | Corresponds to a 'normal' font weight. The majority of elements receive this weight by default. |
--hiq-font-weight-medium | A slightly heavier weight than normal. |
--hiq-font-weight-semibold | The second-to-heaviest weight in the default font weight range. |
--hiq-font-weight-bold | The heaviest weight in the default font weight range. |
--hiq-font-weight-base | The font weight assigned to the majority of elements. This is set to the normal font weight by default. |
--hiq-mark-color | Sets the background color for the mark element, which represents highlighted text. |
--hiq-deleted-color | Sets the background color for the del element, which represents a range of text that has been deleted for the document. |
--hiq-inserted-color | Sets the background color for the ins element, which represents a range of text that has been added to the document. |
--hiq-selection-color | Sets the background color for a user selection within the document. |
--hiq-list-margin-left --list-margin-left | Sets the left margin for ul and ol elements. |
--hiq-unordered-list-style --unordered-list-style | Sets the bullet style for ul elements. |
--hiq-description-list-title-font-weight --description-list-title-font-weight | The font weight assigned to the dt element. |
--hiq-blockquote-font-size --blockquote-font-size | Sets the font-size for the p element within a blockquote. |
--hiq-blockquote-line-height --blockquote-line-height | Sets the line-height for the p element within a blockquote. |
--hiq-blockquote-citation-color --blockquote-citation-color | Sets the color for the cite element within a blockquote. |
--hiq-horizontal-rule-height --horizontal-rule-height | Sets the thickness of a horizontal rule. |
--hiq-horizontal-rule-color --horizontal-rule-color | Sets the color of a horizontal rule. |
--hiq-link-color --link-color | Sets the text color for static state anchor elements. |
--hiq-link-hover-color --link-hover-color | Sets the text color for hovered anchor elements. |
--hiq-link-active-color --link-active-color | Sets the text color for active anchor elements. |
--hiq-link-visited-color --link-visited-color | Sets the text color for visited anchor elements. |
--hiq-link-visited-hover-color --link-visited-hover-color | Sets the text color for hovered visited anchor elements. |
--hiq-link-visited-active-color --link-visited-active-color | Sets the text color for active visited anchor elements. |
--hiq-link-text-decoration --link-text-decoration | Sets the text decoration (underlined or otherwise) for anchor elements. |
--hiq-button-height --button-height | Sets the height for buttons and button-like elements. |
--hiq-button-vertical-padding --button-vertical-padding | Sets the top and bottom padding for buttons. |
--hiq-button-horizontal-padding --button-horizontal-padding | Sets the left and right padding for buttons. |
--hiq-button-border-width --button-border-width | Sets the border width for buttons. |
--hiq-button-border-radius --button-border-radius | Sets the border-radius for buttons. |
--hiq-button-font-weight --button-font-weight | Sets the font weight for button text. |
--hiq-button-border-color --button-border-color | Sets the border color for static state buttons. |
--hiq-button-background-color --button-background-color | Sets the background color for static state buttons. |
--hiq-button-text-color --button-text-color | Sets the text color for static state buttons. |
--hiq-button-hover-border-color --button-hover-border-color | Sets the border color for hovered buttons. |
--hiq-button-hover-background-color --button-hover-background-color | Sets the background color for hovered buttons. |
--hiq-button-hover-text-color --button-hover-text-color | Sets the text color for hovered buttons. |
--hiq-button-focus-border-color --button-focus-border-color | Sets the border color for focused buttons. |
--hiq-button-focus-background-color --button-focus-background-color | Sets the background color for focused buttons. |
--hiq-button-focus-text-color --button-focus-text-color | Sets the text color for focused buttons. |
--hiq-button-active-border-color --button-active-border-color | Sets the border color for active buttons. |
--hiq-button-active-background-color --button-active-background-color | Sets the background color for active buttons. |
--hiq-button-active-text-color --button-active-text-color | Sets the text color for active buttons. |
--hiq-code-padding-vertical --code-padding-vertical | Sets the top and bottom padding for code elements. |
--hiq-code-padding-horizontal --code-padding-horizontal | Sets the left and right padding for code elements. |
--hiq-code-border-color --code-border-color | Sets the border color for code elements. |
--hiq-code-font-size --code-font-size | Sets the font size for code, kbd, pre, and samp elements. |
--hiq-code-background-color --code-background-color | Sets the background color for code elements. |
--hiq-code-text-color --code-text-color | Sets the text color for code elements. |
--hiq-pre-padding-vertical --pre-padding-vertical | Sets the top and bottom padding for pre elements. |
--hiq-pre-padding-horizontal --pre-padding-horizontal | Sets the left and right padding for pre elements. |
--hiq-pre-border-color --pre-border-color | Sets the border color for pre elements. |
--hiq-pre-background-color --pre-background-color | Sets the background color for pre elements. |
--hiq-pre-text-color --pre-text-color | Sets the text color for pre elements. |
--hiq-kbd-padding-vertical --kbd-padding-vertical | Sets the top and bottom padding for kbd elements. |
--hiq-kbd-padding-horizontal --kbd-padding-horizontal | Sets the left and right padding for kbd elements. |
--hiq-kbd-border-color --kbd-border-color | Sets the border color for kbd elements. |
--hiq-nested-kbd-font-weight --nested-kbd-font-weight | Sets the font weight for kbd elements that are nested within other kbd elements. |
--hiq-kbd-background-color --kbd-background-color | Sets the background-color for kbd elements. |
--hiq-kbd-text-color --kbd-text-color | Sets the text color for kbd elements. |
--hiq-figcaption-margin-top --figcaption-margin-top | Sets the top margin for figcaptions to separate them from the content of the figure. |
--hiq-figcaption-font-weight --figcaption-font-weight | Sets the font weight for figcaptions. |
--hiq-figcaption-text-color --figcaption-text-color | Sets the text color for figcaptions. |
--hiq-image-border-radius --image-border-radius | Sets the border radius for img elements. |
--hiq-table-head-border-width --table-head-border-width | Sets the width of the bottom border on cells within the thead element. |
--hiq-table-foot-border-width --table-foot-border-width | Sets the width of the top border on cells within the tfoot element. |
--hiq-table-caption-padding-vertical --table-caption-padding-vertical | Sets the top and bottom padding on the caption element with a table. |
--hiq-table-caption-text-color --table-caption-text-color | Sets the text color on the caption element within a table. |
--hiq-table-caption-font-weight --table-caption-font-weight | Sets the font weight for the caption element within a table. |
--hiq-table-cell-padding-vertical --table-cell-padding-vertical | Sets the top and bottom padding for th and td elements. |
--hiq-table-cell-padding-horizontal --table-cell-padding-horizontal | Sets the left and right padding for th and td elements. |
--hiq-table-cell-border-width --table-cell-border-width | Sets the border width for th and td elements. |
--hiq-table-cell-border-color --table-cell-border-color | Sets the border color for th and td elements. |
--hiq-table-heading-background-color --table-heading-background-color | Sets the background color for th elements. |
--hiq-table-heading-text-color --table-heading-text-color | Sets the text color for th elements. |
--hiq-table-heading-font-weight --table-heading-font-weight | Sets the font weight for th elements. |
--hiq-fieldset-padding-vertical --fieldset-padding-vertical | Sets the top and bottom padding for the fieldset element. |
--hiq-fieldset-padding-horizontal --fieldset-padding-horizontal | Sets the left and right margin for the fieldset element. |
--hiq-fieldset-border-width --fieldset-border-width | Sets the border width for the fieldset element. |
--hiq-fieldset-border-color --fieldset-border-color | Sets the border color for the fieldset element. |
--hiq-legend-margin-bottom --legend-margin-bottom | Sets the bottom margin for the legend element used within a form. |
--hiq-legend-font-weight --legend-font-weight | Sets the font weight for the legend element used within a form. |
--hiq-label-margin-bottom --label-margin-bottom | Sets the bottom margin for the label element used within a form to separate it from its related input. |
--hiq-label-font-weight --label-font-weight | Sets the font weight for the label element used within a form. |
--hiq-input-invalid-border-color --input-invalid-border-color | Sets the border color for invalid inputs. |
--hiq-input-valid-border-color --input-valid-border-color | Sets the border color for valid inputs. |
--hiq-input-height --input-height | Sets the default height on text inputs. |
--hiq-input-padding-vertical --input-padding-vertical | Sets the top and bottom padding on text inputs. |
--hiq-input-padding-horizontal --input-padding-horizontal | Sets the left and right padding on text inputs. |
--hiq-input-border-width --input-border-width | Sets the border width on text inputs, selects and textareas. |
--hiq-input-border-radius --input-border-radius | Sets the border radius on text inputs, selects and textareas. |
--hiq-input-border-color --input-border-color | Sets the border color on static state text inputs, selects and textareas. |
--hiq-input-background-color --input-background-color | Sets the background color on static state text inputs, selects and textareas. |
--hiq-input-text-color --input-text-color | Sets the text color on static state text inputs, selects and textareas. |
--hiq-input-placeholder-color --input-placeholder-color | Sets the placeholder text color on static state text inputs, selects and textareas. |
--hiq-input-hover-border-color --input-hover-border-color | Sets the border color on hovered text inputs, selects and textareas. |
--hiq-input-hover-background-color --input-hover-background-color | Sets the background color on hovered text inputs, selects and textareas. |
--hiq-input-hover-text-color --input-hover-text-color | Sets the text color on hovered text inputs, selects and textareas. |
--hiq-input-focus-border-color --input-focus-border-color | Sets the border color on focused text inputs, selects and textareas. |
--hiq-input-focus-background-color --input-focus-background-color | Sets the background color on focused text inputs, selects and textareas. |
--hiq-input-focus-text-color --input-focus-text-color | Sets the text color on focused text inputs, selects and textareas. |
--hiq-textarea-padding-vertical --textarea-padding-vertical | Sets the top and bottom padding on textareas. |
--hiq-textarea-padding-horizontal --textarea-padding-horizontal | Sets the left and right padding on textareas. |
--hiq-select-background-image --select-background-image | Sets the background image on select elements. This controls the display of the down caret. By default, this is set to an inline svg. |
--hiq-select-background-position --select-background-position | Sets the positioning of the caret with relation to the select element. |
--hiq-select-background-size --select-background-size | Sets the size of the caret within the select element. |
--hiq-select-multiple-checked-background-color --select-multiple-checked-background-color | Sets the background color on a selected option in a select element with the multiple attribute. |
--hiq-select-multiple-padding-vertical --select-multiple-padding-vertical | Sets the top and bottom padding on a select element with the multiple attribute. |
--hiq-checkbox-margin-bottom --checkbox-margin-bottom | Sets the bottom margin on HiQ's custom checkboxes. |
--hiq-checkbox-label-padding-horizontal --checkbox-label-padding-horizontal | Sets the left and right padding of the label following a checkbox input. |
--hiq-checkbox-label-font-weight --checkbox-label-font-weight | Sets the font weight of the label following a checkbox input. |
--hiq-checkbox-width --checkbox-width | Sets the width of the visual checkbox element. |
--hiq-checkbox-height --checkbox-height | Sets the height of the visual checkbox element. |
--hiq-checkbox-border-width --checkbox-border-width | Sets the width of the visual checkbox element. |
--hiq-checkbox-border-color --checkbox-border-color | Sets the border color of the visual checkbox element. |
--hiq-checkbox-border-radius --checkbox-border-radius | Sets the border radius of the visual checkbox element. |
--hiq-checkbox-background-color --checkbox-background-color | Sets the background color of the visual checkbox element. |
--hiq-checkbox-hover-background-color --checkbox-hover-background-color | Sets the background color of the visual checkbox element when hovered. |
--hiq-checkbox-focus-background-color --checkbox-focus-background-color | Sets the background color of the visual checkbox element when focused. |
--hiq-checkbox-checked-border-color --checkbox-checked-border-color | Sets the border color of the visual checkbox element when the input is checked. |
--hiq-checkbox-checked-background-color --checkbox-checked-background-color | Sets the background color of the visual checkbox element when the input is checked. |
--hiq-checkbox-check-width --checkbox-check-width | Sets the width of the check mark within the checkbox. |
--hiq-checkbox-check-height --checkbox-check-height | Sets the height of the check mark within the checkbox. |
--hiq-checkbox-check-border-width --checkbox-check-border-width | Sets the border width of the check mark within the checkbox. |
--hiq-checkbox-check-color --checkbox-check-color | Sets the color of the check mark within the checkbox. |
--hiq-checkbox-indeterminate-width --checkbox-indeterminate-width | Sets the width of the mark within an indeterminate checkbox. |
--hiq-radio-margin-bottom --radio-margin-bottom | Sets the bottom margin on HiQ's custom radio buttons. |
--hiq-radio-label-padding-horizontal --radio-label-padding-horizontal | Sets the left and right padding of the label following a radio input. |
--hiq-radio-label-font-weight --radio-label-font-weight | Sets the font weight of the label following a radio input. |
--hiq-radio-width --radio-width | Sets the width of the visual radio element. |
--hiq-radio-height --radio-height | Sets the height of the visual radio element. |
--hiq-radio-border-width --radio-border-width | Sets the border width of the visual radio element. |
--hiq-radio-border-color --radio-border-color | Sets the border color of the visual radio element. |
--hiq-radio-border-radius --radio-border-radius | Sets the border radius of the visual radio element. |
--hiq-radio-background-color --radio-background-color | Sets the background color of the visual radio element. |
--hiq-radio-hover-background-color --radio-hover-background-color | Sets the background color of the visual radio element when hovered. |
--hiq-radio-focus-background-color --radio-focus-background-color | Sets the background color of the visual radio element when focused. |
--hiq-radio-checked-border-color --radio-checked-border-color | Sets the border color of the visual radio element when the input is checked. |
--hiq-radio-checked-background-color --radio-checked-background-color | Sets the background color of the visual radio element when the input is checked. |
--hiq-radio-check-width --radio-check-width | Sets the width of the circle within the radio button. |
--hiq-radio-check-height --radio-check-height | Sets the height of the circle within the radio button. |
--hiq-radio-check-border-radius --radio-check-border-radius | Sets the border-radius of the circle within the radio button. |
--hiq-radio-check-background-color --radio-check-background-color | Sets the background color of the circle within the radio button. |
--hiq-range-input-thumb-width --range-input-thumb-width | Sets the width of the range input draggable handle. |
--hiq-range-input-thumb-height --range-input-thumb-height | Sets the height of the range input draggable handle. |
--hiq-range-input-thumb-border-radius --range-input-thumb-border-radius | Sets the border radius of the range input draggable handle. |
--hiq-range-input-thumb-background-color --range-input-thumb-background-color | Sets the background color of the range input draggable handle. |
--hiq-range-input-track-height --range-input-track-height | Sets the height of the range input track. |
--hiq-range-input-track-border-radius --range-input-track-border-radius | Sets the border radius of the range input track. |
--hiq-range-input-track-background-color --range-input-track-background-color | Sets the background color of the range input track. |
--hiq-color-input-background-color --color-input-background-color | Sets the background color of color inputs. |
--hiq-meter-background-color --meter-background-color | Sets the background color of the meter element track. |
--hiq-meter-strong-color --meter-strong-color | Sets the background color of the meter bar with an optimum value. |
--hiq-meter-good-color --meter-good-color | Sets the background color of the meter bar with a sub-optimum value. |
--hiq-meter-weak-color --meter-weak-color | Sets the background color of the meter bar with a weak value. |
--hiq-progress-height --progress-height | Sets the height of the progress element. |
--hiq-progress-background-color --progress-background-color | Sets the background color of the progress element track. |
--hiq-progress-filled-color --progress-filled-color | Sets the background color of the filled portion of the progress element. |
--hiq-dialog-border-radius --dialog-border-radius | Sets the border radius for dialog elements. |