Sass Variables
Spark uses Sass variables to provide global settings for the system. These settings can be overridden if needed. You will need to create a new Sass file that is imported before the main Spark Sass file. In that file, you can assign a new value to any of the variables below.
| Variable | Default Value | Description |
|---|---|---|
| sprk-black | rgb(51, 51, 51) | Color value for black. |
| sprk-black-tint-75 | rgb(64, 64, 64) | Color value for black at 75%. |
| sprk-black-tint-50 | rgb(128, 128, 128) | Color value for black at 50%. |
| sprk-black-tint-25 | rgb(190, 190, 190) | Color value for black at 25%. |
| sprk-blue | rgb(0, 125, 186) | Color value for blue. |
| sprk-blue-tint-75 | rgb(73, 144, 195) | Color value for blue at 75%. |
| sprk-blue-tint-50 | rgb(118, 172, 210) | Color value for blue at 50%. |
| sprk-blue-tint-25 | rgb(164, 199, 225) | Color value for blue at 25%. |
| sprk-gray | rgb(247, 247, 247) | Color value for gray. |
| sprk-gray-dark | rgb(207, 207, 207) | Color value for dark gray. |
| sprk-green | rgb(0, 132, 115) | Color value for green. |
| sprk-green-dark | rgb(0, 118, 103) | Color value for dark green. |
| sprk-green-tint-75 | rgb(64, 198, 178) | Color value for green at 75%. |
| sprk-green-tint-50 | rgb(128, 217, 203) | Color value for green at 50%. |
| sprk-green-tint-25 | rgb(191, 236, 229) | Color value for green at 25%. |
| sprk-red | rgb(200, 16, 46) | Color value for red. |
| sprk-mid-red | rgb(157,34,53) | Color value for mid red. |
| sprk-deep-red | rgb(118,35,47) | Color value for deep red. |
| sprk-red-tint-75 | rgb(214, 76, 98) | Color value for red 75%. |
| sprk-red-tint-50 | rgb(227, 135, 150) | Color value for red at 50%. |
| sprk-red-tint-25 | rgb(241, 195, 203) | Color value for red at 25%. |
| sprk-selection-bg-color | $sprk-green-tint-50 | Setting for the background color of any text when selected. |
| sprk-selection-text-color | $sprk-black | Setting for the color of any text when selected. |
| sprk-pre-overflow | auto | Reset for the overflow property on pre elements. |
| sprk-blockquote-source-prefix | '-' | The content property value of the before pseudo-element on the Blockquote component. |
| sprk-blockquote-margin | 0 | Value for the margin property on Blockquote component. |
| sprk-blockquote-quote-margin | 0 | Value for the margin property on the quote in the Blockquote component. |
| sprk-blockquote-quote-last-margin | 0 | Value for the margin property on the last quote in in the Blockquote component. |
| sprk-space-inset-xs | 4px 4px 4px 4px | Value for the extra small inset space. |
| sprk-space-inset-s | 8px 8px 8px 8px | Value for the small inset space. |
| sprk-space-inset-m | 16px 16px 16px 16px | Value for the medium inset space. |
| sprk-space-inset-l | 32px 32px 32px 32px | Value for the large inset space. |
| sprk-space-inset-xl | 64px 64px 64px 64px | Value for the extra large inset space. |
| sprk-space-inset-short-xs | 2px 4px 2px 4px | Value for the extra small inset short space. |
| sprk-space-inset-short-s | 4px 8px 4px 8px | Value for the small inset short space. |
| sprk-space-inset-short-m | 8px 16px 8px 16px | Value for the medium inset short space. |
| sprk-space-inset-short-l | 16px 32px 16px 32px | Value for the large inset short space. |
| sprk-space-inset-short-xl | 32px 64px 32px 64px | Value for the extra large inset short space. |
| sprk-space-inset-tall-xs | 6px 4px 6px 4px | Value for the extra small inset tall space. |
| sprk-space-inset-tall-s | 12px 8px 12px 8px | Value for the small inset tall space. |
| sprk-space-inset-tall-m | 24px 16px 24px 16px | Value for the medium inset tall space. |
| sprk-space-inset-tall-l | 48px 32px 48px 32px | Value for the large inset tall space. |
| sprk-space-inset-tall-xl | 96px 64px 96px 64px | Value for the extra large inset tall space. |
| sprk-space-stack-xs | 0 0 4px 0 | Value for the extra small stack space. |
| sprk-space-stack-s | 0 0 8px 0 | Value for the small stack space. |
| sprk-space-stack-m | 0 0 16px 0 | Value for the medium stack space. |
| sprk-space-stack-l | 0 0 32px 0 | Value for the large stack space. |
| sprk-space-stack-xl | 0 0 64px 0 | Value for the extra large stack space. |
| sprk-space-xs | 4px | Value for the extra small space setting. |
| sprk-space-s | 8px | Value for the small space setting. |
| sprk-space-m | 16px | Value for the medium space setting. |
| sprk-space-l | 32px | Value for the large inset tall space setting. |
| sprk-space-xl | 64px | Value for the extra large space setting. |
| sprk-space-h | $sprk-space-xl | Value for the huge space setting. |
| sprk-space-misc-a | 24px | Value for the misc a space setting. |
| sprk-space-misc-b | 40px | Value for the misc b space setting. |
| sprk-space-misc-c | 48px | Value for the misc c space setting. |
| sprk-space-misc-d | 80px | Value for the misc d space setting. |
| sprk-flag-gutter | $sprk-space-m | Value for the gutters between body and figure in the Flag component. |
| sprk-flag-gutter-tiny | $sprk-space-xs | Value for the gutters between body and figure in the Tiny Flag component. |
| sprk-flag-gutter-small | $sprk-space-s | Value for the gutters between body and figure in the Small Flag component. |
| sprk-flag-gutter-large | $sprk-space-l | Value for the gutters between body and figure in the Large Flag component. |
| sprk-flag-gutter-huge | $sprk-space-xl | Value for the gutters between body and figure in the Huge Flag component. |
| sprk-flag-stacked-breakpoint | 25em | Value for the gutters between body and figure in the Stacked Flag component. |
| sprk-icon-m | 16px | Value for height and width of the Icon component. |
| sprk-icon-l | 32px | Value for height and width of the large Icon component. |
| sprk-icon-xl | 64px | Value for height and width of the extra large Icon component. |
| sprk-icon-xxl | 128px | Value for height and width of the extra extra large Icon component. |
| sprk-icon-fill-color | none | Value for the fill property of the Icon component. |
| sprk-icon-stroke-color | $sprk-black | Value for the stroke property of the Icon component. |
| sprk-icon-filled-fill-color | $sprk-black | Value for the fill property of the Filled Icon component. |
| sprk-icon-filled-stroke-color | none | Value for the stroke property of the Filled Icon component. |
| sprk-icon-using-custom-stroke | true | Boolean value for if a custom Icon stroke is desired. |
| sprk-icon-custom-stroke-width-s | 1px | Value for a small custom stroke width on the Icon component. |
| sprk-icon-custom-stroke-width-m | 1.5px | Value for a medium custom stroke width on the Icon component. |
| sprk-icon-custom-stroke-width-l | 2px | Value for a large custom stroke width on the Icon component. |
| sprk-icon-custom-stroke-width-xl | 3px | Value for an extra large custom stroke width on the Icon component. |
| sprk-centered-column-width | 1232px | Width value for the Centered Column layout container. |
| sprk-layer-height-xs | 1 | The extra small z-index value setting. |
| sprk-layer-height-s | 1000 | The small z-index value setting. |
| sprk-layer-height-m | 2000 | The medium z-index value setting. |
| sprk-layer-height-l | 3000 | The large z-index value setting. |
| sprk-layer-height-xl | 99999 | The extra large z-index value setting. |
| sprk-horizontal-list-spacing | $sprk-space-m | The default spacing value for Horizontal List components. |
| sprk-horizontal-list-spacing-tiny | $sprk-space-xs | The tiny spacing value for tiny Horizontal List components. |
| sprk-horizontal-list-spacing-small | $sprk-space-s | The small spacing value for small Horizontal List components. |
| sprk-horizontal-list-spacing-medium | $sprk-space-m | The medium spacing value for medium Horizontal List components. |
| sprk-horizontal-list-spacing-large | $sprk-space-l | The large spacing value for large Horizontal List components. |
| sprk-horizontal-list-spacing-huge | $sprk-space-xl | The huge spacing value for huge Horizontal List components. |
| sprk-horizontal-list-delimiter | ',' | The delimiter between delimited items in Horizonatal List components. |
| sprk-vertical-list-delimiter | ',\00A0' | The delimiter between delimited items in the Vertical List component. |
| sprk-pag-max-width | 26rem | The maximum width of the Pagination component. |
| sprk-pag-current-link-font-weight | 500 | The font weight of the current pagination link in the Pagination component. |
| sprk-pag-link-color | $sprk-black | The color of the pagination links in the Pagination component. |
| sprk-pag-link-color-hover | $sprk-pag-link-color | The color of the pagination links on hover in the Pagination component. |
| sprk-pag-link-font-weight | 400 | The font weight of the pagination links in the Pagination component. |
| sprk-pag-selection-color | $sprk-green | The accent color for selected pagination links in the Pagination component. |
| sprk-pag-selection-link-color | $sprk-white | The text color of the currently selected pagination link in the Pagination component. |
| sprk-pag-selection-link-color-hover | $sprk-white | The text color of the currently selected pagination link on hover in the Pagination component. |
| sprk-pag-circle-size | 2em | The width and height setting of the circle around the currently selected pagination link in the Pagination component. |
| sprk-measure | 40rem | The max-width value for the .sprk-u-Measure class. |
| sprk-narrow-measure | 25rem | The max-width value for the .sprk-u-Measure--narrow class. |
| sprk-typography-breakpoint | 54rem | The breakpoint used for typography. |
| sprk-using-webfonts | false | Boolean value for if the app is using webfonts. |
| sprk-font-display | swap | The supplied value will be set on all generated Font-face calls, as font-display. The default is 'swap.' |
| sprk-webfonts | '' | Expects a Sass List containing one or more nested Sass Lists. The nested lists should each contain: A List of urls to download a font, the name of the font and the weight of the font. |
| sprk-page-title-mark-color | $sprk-red | The color of the Page Title mark. |
| sprk-page-title-mark-width | 32px | The width of the Page Title mark. |
| sprk-page-title-mark-height | 5px | The height of the Page Title mark. |
| sprk-page-title-mark-height-wide-viewport | 6px | The height of the mark on a large viewport (using $sprk-typography-breakpoint). |
| sprk-page-title-mark-padding | 0 0 $sprk-space-misc-a | Amount of padding between the mark and the text. |
| sprk-page-title-mark-padding-wide-viewport | 0 0 $sprk-space-m | Amount of padding between the mark and the text on a large viewport (using $sprk-typography-breakpoint). |
| sprk-color-display-one | $sprk-black | The color of TypeDisplayOne. |
| sprk-font-family-display-one | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayOne. |
| sprk-font-size-display-one | 2.75rem | The size of TypeDisplayOne when the viewport is narrower than $sprk-font-size-display-one-breakpoint. |
| sprk-font-size-display-one-wide | 3.375rem | The size of the TypeDisplayOne font when the viewport is wider than $sprk-font-size-display-one-breakpoint. |
| sprk-type-display-one-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-one to $sprk-font-size-display-one-wide. |
| sprk-font-weight-display-one | bold | The weight of the TypeDisplayOne font. |
| sprk-line-height-display-one | 1.27 | The line-height of the TypeDisplayOne font when the viewport is narrower than $sprk-font-size-display-one-breakpoint. |
| sprk-line-height-display-one-wide | 1.03 | The line height of TypeDisplayOne when the viewport is wider than $sprk-font-size-display-one-breakpoint. |
| sprk-color-display-two | $sprk-black | The color of TypeDisplayTwo. |
| sprk-font-family-display-two | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayTwo. |
| sprk-font-size-display-two | 2rem | The size of TypeDisplayTwo when the viewport is narrower than $sprk-font-size-display-two-breakpoint. |
| sprk-font-size-display-two-wide | 2.5rem | The size of the TypeDisplayTwo font when the viewport is wider than $sprk-font-size-display-two-breakpoint. |
| sprk-type-display-two-breakpoint | 43.75rem | The width of the viewport at which to switch the TypeDisplayTwo font size from $sprk-font-size-display-two to $sprk-font-size-display-two-wide. |
| sprk-font-weight-display-two | bold | The font weight of TypeDisplayTwo. |
| sprk-line-height-display-two | 1 | The line height of TypeDisplayTwo when the viewport is narrower than $sprk-font-size-display-two-breakpoint. |
| sprk-line-height-display-two-wide | 1 | The line height of TypeDisplayTwo when the viewport is wider than $sprk-font-size-display-two-breakpoint. |
| sprk-color-display-three | $sprk-black | The color of TypeDisplayThree. |
| sprk-font-family-display-three | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayThree. |
| sprk-font-size-display-three | 1.75rem | The size of TypeDisplayThree when the viewport is narrower than $sprk-font-size-display-three-breakpoint. |
| sprk-font-size-display-three-wide | 2.125rem | The size of TypeDisplayThree when the viewport is wider than $sprk-font-size-display-three-breakpoint. |
| sprk-type-display-three-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-three to $sprk-font-size-display-three-wide. |
| sprk-font-weight-display-three | 300 | The font weight of TypeDisplayThree. |
| sprk-line-height-display-three | 1.6 | The line height of TypeDisplayThree when the viewport is narrower than $sprk-font-size-display-three-breakpoint. |
| sprk-line-height-display-three-wide | 1.32 | The line height of TypeDisplayThree when the viewport is wider than $sprk-font-size-display-three-breakpoint. |
| sprk-color-display-four | $sprk-black | The color of TypeDisplayFour. |
| sprk-font-family-display-four | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayFour. |
| sprk-font-size-display-four | 1.625rem | The font size of TypeDisplayFour. |
| sprk-font-weight-display-four | bold | The font weight of TypeDisplayFour. |
| sprk-line-height-display-four | 1.23 | The line height of TypeDisplayFour. |
| sprk-color-display-five | $sprk-black | The color of TypeDisplayFive. |
| sprk-font-family-display-five | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayFive. |
| sprk-font-size-display-five | 1.25rem | The font size of TypeDisplayFive. |
| sprk-font-weight-display-five | 500 | The font weight of TypeDisplayFive. |
| sprk-line-height-display-five | 1.2 | The line height of TypeDisplayFive. |
| sprk-color-display-six | $sprk-black | The color of TypeDisplaySix. |
| sprk-font-family-display-six | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplaySix. |
| sprk-font-size-display-six | 1.25rem | The font size of TypeDisplaySix. |
| sprk-font-weight-display-six | 300 | The font weight of TypeDisplaySix. |
| sprk-line-height-display-six | 1.2 | The line height of TypeDisplaySix. |
| sprk-font-family-display-seven | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplaySeven. |
| sprk-font-size-display-seven | 1rem | The font size of TypeDisplaySeven. |
| sprk-color-display-seven | $sprk-black | The color of TypeDisplaySeven. |
| sprk-line-height-display-seven | 1 | The line height of TypeDisplaySeven. |
| sprk-font-weight-display-seven | 500 | The font weight of TypeDisplaySeven. |
| sprk-font-family-body-one | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyOne. |
| sprk-font-size-body-one | 1rem | The font size of TypeBodyOne. |
| sprk-color-body-one | $sprk-black | The color of TypeBodyOne. |
| sprk-line-height-body-one | 1.6 | The line height of TypeBodyOne. |
| sprk-font-weight-body-one | 500 | The font weight of TypeBodyOne. |
| sprk-font-family-body-two | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyTwo. |
| sprk-font-size-body-two | 1rem | The font size of TypeBodyTwo. |
| sprk-color-body-two | $sprk-black | The color of TypeBodyTwo. |
| sprk-line-height-body-two | 1.6 | The line height of TypeBodyTwo. |
| sprk-font-weight-body-two | 300 | The font weight of TypeBodyTwo. |
| sprk-font-family-body-three | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyThree. |
| sprk-font-size-body-three | 1rem | The font size of TypeBodyThree. |
| sprk-color-body-three | $sprk-black | The color of TypeBodyThree. |
| sprk-line-height-body-three | 2 | The line height of TypeBodyThree. |
| sprk-font-weight-body-three | 300 | The font weight of TypeBodyThree. |
| sprk-font-family-body-four | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyFour. |
| sprk-font-size-body-four | 0.8125rem | The font size of TypeBodyFour. |
| sprk-color-body-four | $sprk-black | The color of the TypeBodyFour. |
| sprk-line-height-body-four | 1.84 | The line height of TypeBodyFour. |
| sprk-font-weight-body-four | 300 | The font weight of TypeBodyFour. |
| sprk-line-height-collision-top-crop | 5 | The top crop value for line height collision correction. |
| sprk-line-height-collision-bottom-crop | 5 | The bottom crop value for line height collision correction. |
| sprk-border-radius | 5px | Value used for border-radius across the system. |
| sprk-alert-border-radius | 4px | Value for border-radius on the Alert component. |
| sprk-alert-border | 1px solid $sprk-gray | Value for border on the Alert component. |
| sprk-alert-shadow | 0 3px 10px 1px rgba(0, 0, 0, 0.08) | Value for shadow on the Alert component. |
| sprk-alert-color | $sprk-black | Value for color of the Alert component. |
| sprk-alert-bg-color | $sprk-white | The background color of the default Alert component. |
| sprk-alert-icon-size | 32px | Sets the height and width of the two icons used in the Alert component. |
| sprk-alert-font-size | 1rem | The font size of the text in the content area of the Alert component. |
| sprk-alert-font-weight | 400 | The font weight of the text in the content area of the Alert component. |
| sprk-alert-line-height | 1.5 | The line height of the text in the content area of the Alert component. |
| sprk-alert-content-padding | $sprk-space-m $sprk-space-m $sprk-space-m $sprk-space-misc-a | The padding around the main content icon and message in the Alert component. |
| sprk-alert-dismiss-padding | $sprk-space-m 24px $sprk-space-m $sprk-space-m | The padding around the dismiss icon in the Alert component. |
| sprk-alert-icon-margin | 0 $sprk-space-misc-a 0 0 | The margin for the icon in the Alert component. |
| sprk-alert-dismiss-icon-color | $sprk-black | The color of the dimiss icon in the Alert component. |
| sprk-alert-dismiss-icon-size | $sprk-space-m | The size of the dimiss icon in the Alert component. |
| sprk-alert-icon-color-info | $sprk-blue | The icon color of the Information Alert component. |
| sprk-alert-border-info | 1px solid $sprk-blue | The border value of the Information Alert component. |
| sprk-alert-bg-color-info | rgb(241, 250, 255) | The background color of the Information Alert component. |
| sprk-alert-text-color-info | $sprk-black | The value for the color property in the Information Alert component. |
| sprk-alert-icon-color-success | $sprk-green | The icon color of the Success Alert component. |
| sprk-alert-border-success | 1px solid $sprk-green | The border value of the Success Alert component. |
| sprk-alert-bg-color-success | rgb(237, 253, 251) | The background color of the Success Alert component. |
| sprk-alert-text-color-success | $sprk-black | The value for the color property in the Success Alert component. |
| sprk-alert-icon-color-fail | $sprk-yellow | The icon color of the Fail Alert component. |
| sprk-alert-border-fail | 1px solid $sprk-yellow | The border value of the Fail Alert component. |
| sprk-alert-bg-color-fail | rgb(255, 248, 232) | The background color of the Fail Alert component. |
| sprk-alert-text-color-fail | $sprk-black | The value for the color property in the Fail Alert component. |
| sprk-promo-background-color | $sprk-white | The background color of the Promo component. |
| sprk-promo-border | 1px solid $sprk-gray | The border of the Promo component. |
| sprk-promo-max-width | 42.5rem | The maximum width of the Promo component. |
| sprk-promo-breakpoint | 42.5rem | The Promo component breakpoint at which large viewport styles begin. |
| sprk-promo-image-narrow-max-height | 20rem | The maximum width of the image in the Promo component on narrow viewports. |
| sprk-promo-image-narrow-max-width | 50% | The background color of the Promo component. |
| sprk-promo-title-font-color | $sprk-black | The background color of the Promo component. |
| sprk-promo-title-font-weight | $sprk-font-weight-display-four | The background color of the Promo component. |
| sprk-promo-subtitle-font-color | $sprk-black | The background color of the Promo component. |
| sprk-promo-subtitle-font-weight | $sprk-font-weight-body-one | The background color of the Promo component. |
| sprk-btn-background-color | $sprk-green | The background color of the Button component. |
| sprk-btn-shadow | 0 3px 10px rgba(20, 20, 20, 0.08) | The box shadow value of the Button component. |
| sprk-btn-border-style | solid | The border style of the Button component. |
| sprk-btn-border-color | $sprk-btn-background-color | The border color of the Button component. |
| sprk-btn-border-width | 2px | The border width of the Button component. |
| sprk-btn-font-weight | 500 | The font weight of the Button component. |
| sprk-btn-font-size | inherit | The font size of the Button component. |
| sprk-btn-font-family | inherit | The font family value of the Button component. |
| sprk-btn-line-height | normal | The line height of the Button component. |
| sprk-btn-text-color | $sprk-white | The text color of the Button component. |
| sprk-btn-border-radius | 4px | The border radius of the Button component. |
| sprk-btn-hover-background-color | $sprk-green-dark | The background color of the Button component on hover. |
| sprk-btn-hover-text-color | $sprk-white | The text color of the Button component on hover. |
| sprk-btn-padding | $sprk-space-m 24px | The padding of the Button component. |
| sprk-btn-breakpoint-xs | 30rem | The extra small breakpoint at which Full Width Buttons switch to normal width. |
| sprk-btn-breakpoint-s | 42.5rem | The small breakpoint at which Full Width Buttons switch to normal width. |
| sprk-btn-transition-speed | 0.3s | The transition speed setting for transitions on the Button component. |
| sprk-btn-letter-spacing | 0.62px | The letter spacing value of the Button component. |
| sprk-btn-disabled-opacity | 1 | The opacity value of the Button component. |
| sprk-btn-disabled-border-width | $sprk-btn-border-width | The border width of the Disabled Button component. |
| sprk-btn-disabled-border-style | $sprk-btn-border-style | The border style of the Disabled Button component. |
| sprk-btn-disabled-background-color | $sprk-gray-dark | The background color of the Disabled Button component. |
| sprk-btn-disabled-text-color | $sprk-white | The text color of the Disabled Button component. |
| sprk-btn-disabled-border-color | transparent | The border color of the Disabled Button component. |
| sprk-btn-disabled-shadow | none | The box shadow of the Disabled Button component. |
| sprk-btn-secondary-disabled-background-color | transparent | The background color of the Disabled Button component. |
| sprk-btn-secondary-disabled-text-color | $sprk-gray-dark | The text color of the Secondary Button component when disabled. |
| sprk-btn-secondary-disabled-border-color | $sprk-gray-dark | The border color of the Secondary Button component when disabled. |
| sprk-btn-secondary-disabled-shadow | none | The box shadow of the Secondary Button component when disabled. |
| sprk-btn-tertiary-disabled-shadow | none | The box shadow of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-border | none | The border value of the Tertiary Button component when disabled. |
| sprk-btn-secondary-background-color | $sprk-white | The background color of the Secondary Button component. |
| sprk-btn-secondary-border-color | $sprk-gray-dark | The border color of the Secondary Button component. |
| sprk-btn-secondary-text-color | $sprk-black | The text color of the Secondary Button component. |
| sprk-btn-secondary-hover-text-color | $sprk-black | The hover text color of the Secondary Button component. |
| sprk-btn-secondary-hover-background-color | $sprk-white | The background color of the Secondary Button component on hover. |
| sprk-btn-secondary-hover-border-color | $sprk-black | The border color of the Secondary Button component on hover. |
| sprk-btn-secondary-hover-shadow | 0 3px 10px rgba(20, 20, 20, 0.08) | The box shadow of the Secondary Button component on hover. |
| sprk-btn-secondary-letter-spacing | 0.62px | The letter spacing of the Secondary Button component. |
| sprk-btn-tertiary-background-color | transparent | The background color of the Tertiary Button component. |
| sprk-btn-tertiary-border | none | The border of the Tertiary Button component. |
| sprk-btn-tertiary-text-color | $sprk-black | The text color of the Tertiary Button component. |
| sprk-btn-tertiary-underline-width | 0.125em | The underline width of the Tertiary Button component. |
| sprk-btn-tertiary-underline-padding-top | 0.125em | The vertical distance between the underline and the text for the Tertiary Button component. |
| sprk-btn-tertiary-underline-color | $sprk-gray-dark | The color of the underline for the Tertiary Button component. |
| sprk-btn-tertiary-hover-text-color | $sprk-black | The text color of the Tertiary Button component on hover. |
| sprk-btn-tertiary-hover-underline-color | $sprk-black | The underline color of the Tertiary Button component on hover. |
| sprk-btn-tertiary-hover-background-color | transparent | The background color of the Tertiary Button component on hover. |
| sprk-btn-tertiary-hover-shadow | none | The box shadow of the Tertiary Button component on hover. |
| sprk-btn-tertiary-disabled-background-color | transparent | The background color of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-text-color | $sprk-gray-dark | The text color of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-letter-spacing | normal | The letter spacing of the Tertiary Button component. |
| sprk-link-transition | 0.3s | The transition timing for hover, active and focus styles on Links. |
| sprk-link-color | $sprk-black | The default color on Links. |
| sprk-link-font-weight | $sprk-font-weight-body-one | The font weight on Links. |
| sprk-link-text-decoration | none | The text decoration on Links. |
| sprk-link-underline-color | $sprk-gray-dark | The color of the underline on Links. |
| sprk-link-underline-width | 0.09375rem | The underline width on Links. |
| sprk-link-border-bottom-style | solid | The border style of the underline on Links. |
| sprk-link-border-bottom | $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-color | The style of the underline on Links. |
| sprk-link-hover-color | $sprk-black | The color of Links on hover. |
| sprk-link-hover-border-bottom | $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-hover-color | The underline style of Links on hover. |
| sprk-link-visited-color | $sprk-black-tint-75 | The color of visited Links. |
| sprk-link-underline-visited-color | $sprk-gray-dark | The color of the underline on visited Links. |
| sprk-link-visited-border-bottom | $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-visited-color | The style of the underline on visited Links. |
| sprk-link-simple-color | $sprk-black | The color value of Simple Links. |
| sprk-link-simple-underline-color | transparent | The underline color of Simple Links. |
| sprk-link-simple-underline-width | 0.0625rem | The underline width of Simple Links. |
| sprk-link-simple-font-weight | $sprk-font-weight-body-two | The font weight of Simple Links. |
| sprk-link-simple-hover-color | $sprk-black | The color of Simple Links on hover. |
| sprk-link-simple-hover-underline-width | 0.0625rem | The underline width of Simple Links on hover. |
| sprk-link-simple-hover-underline-color | $sprk-black | The underline color of Simple Links on hover. |
| sprk-link-simple-border-bottom | $sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-color | The underline style of Simple Links. |
| sprk-link-simple-visited-border-bottom | $sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-color | The underline style of visited Simple Links. |
| sprk-link-simple-hover-border-bottom | $sprk-link-simple-hover-underline-width $sprk-link-border-bottom-style $sprk-link-simple-hover-underline-color | The underline style of visited Simple Links on hover. |
| sprk-link-has-icon-color-icon | $sprk-green | The color of icons in Links containing icons. |
| sprk-link-has-icon-font-weight | $sprk-font-weight-body-one | The font weight of Links containing icons. |
| sprk-link-has-icon-underline-width | 0 | The underline width of Links containing icons. |
| sprk-link-has-icon-underline-color | transparent | The underline color of Links containing icons. |
| sprk-link-has-icon-fill | transparent | The fill color for icons contained in Links. |
| sprk-link-has-icon-border-bottom | $sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-color | The border settings for Links with icons. |
| sprk-link-has-icon-hover-border-bottom | $sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-color | The border settings for Links with icons in the hover state. |
| sprk-link-has-icon-hover-color-text | $sprk-green | The color value for Links with icons in the hover state. |
| sprk-link-plain-border | none | The border settings for Plain Links. |
| sprk-link-plain-visited-border | none | The border settings for Plain Links in the visited state |
| sprk-link-disabled-color | $sprk-gray-dark | The disabled Link color. |
| sprk-link-disabled-font-weight | $sprk-font-weight-body-one | The disabled Link font weight. |
| sprk-link-disabled-underline-width | 0 | The underline width for the disabled Link. |
| sprk-link-disabled-border-bottom | $sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-color | The underline settings for the disabled Link. |
| sprk-link-disabled-hover-border-bottom | $sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-color | The underline settings for the disabled Link on hover. |
| sprk-list-margin-left | $sprk-space-m | The default margin left indentation on Lists. |
| sprk-list-indented-margin-left | $sprk-space-l | The extended indentation (margin left) on Indented Lists. |
| sprk-monetary-symbol | '$' | The symbol used to denote currency for Monetary Inputs. |
| sprk-fieldset-padding | $sprk-space-m 0 0 0 | The value for padding applied to fieldset elements. |
| sprk-input-container-margin | 0 0 $sprk-space-l 0 | The value used for margin around Input containers. |
| sprk-input-container-narrow-max-width | 6.5rem | The value used for the maximum width of an icon container using the .sprk-b-InputContainer__icon-container--narrow modifier. |
| sprk-input-max-width | 27.5rem | The value used as a maximum width for Input containers. |
| sprk-input-max-width-full | 100% | The value used for the maximum width of an Input container using the .sprk-b-InputContainer--full modifier. |
| sprk-input-container-huge-max-width | 37.5rem | The max-width setting for Huge Inputs. |
| sprk-input-huge-height | $sprk-text-input-huge-height | The height value for Huge Inputs. |
| sprk-input-huge-font-size | $sprk-text-input-huge-font-size | The font size for Huge Inputs. |
| sprk-input-huge-label-font-size | $sprk-text-input-huge-label-font-size | The label font size for Huge Inputs. |
| sprk-input-huge-border-width | $sprk-text-input-huge-border-width | The border width for Huge Inputs. |
| sprk-input-huge-padding | $sprk-text-input-huge-padding | The padding for Huge Inputs. |
| sprk-select-input-huge-padding-right | 45px | The padding right value for Huge Inputs. |
| sprk-input-huge-label-padding | 0 ($sprk-space-misc-a + $sprk-input-huge-border-width) | The label padding value for Huge Inputs. |
| sprk-input-huge-focus-border-width | $sprk-text-input-huge-focus-border-width | The border width for Huge Inputs on focus. |
| sprk-input-huge-transition | $sprk-text-input-huge-transition | The transition value for Huge Inputs. |
| sprk-input-huge-transition-delay | $sprk-text-input-huge-transition-delay | The transition delay value for Huge Inputs. |
| sprk-input-huge-placeholder-transition-delay | $sprk-text-input-huge-placeholder-transition-delay | The transition placeholder delay value for Huge Inputs. |
| sprk-input-huge-placeholder-transition-property | $sprk-text-input-huge-placeholder-transition-property | The transition placeholder value for Huge Inputs. |
| sprk-input-huge-placeholder-opacity | $sprk-text-input-huge-placeholder-opacity | The placeholder opacity for Huge Inputs. |
| sprk-input-huge-placeholder-active-opacity | $sprk-text-input-huge-placeholder-active-opacity | The placeholder opacity for Huge Inputs when they are active. |
| sprk-input-huge-label-top | $sprk-text-input-huge-label-top | The top value for Huge Input labels. This adjusts how far the label is from the top of the container. |
| sprk-input-huge-label-active-top | $sprk-text-input-huge-label-active-top | The top value for Huge Input labels when they are active. This adjusts how far the label is from the top of the container. |
| sprk-input-huge-active-padding-top | $sprk-text-input-huge-active-padding-top | The padding top value of active Huge Inputs. |
| sprk-input-huge-focus-label-color | $sprk-text-input-huge-focus-label-color | The label color value of Huge Inputs on focus. |
| sprk-input-huge-error-focus-label-color | $sprk-text-input-huge-error-focus-label-color | The label color value of Huge Inputs when they have an error. |
| sprk-input-huge-complete-label-color | $sprk-text-input-huge-complete-label-color | The label color when the Huge Input has a value and is not focused. |
| sprk-input-huge-box-shadow | 0 3px 10px 1px rgba(0, 0, 0, 0.08) | The box shadow value on Huge Inputs. |
| sprk-input-huge-icon-offset-y | $sprk-space-misc-a | The margin-top value for icons in Huge Inputs. |
| sprk-input-huge-icon-offset-top | 50% | The top value for icons in Huge Inputs. |
| sprk-select-input-huge-icon-margin-top | -(( $sprk-input-huge-height - $sprk-icon-m ) / 2 + $sprk-icon-m) | The margin-top value for icons in Huge Select Inputs. |
| sprk-text-input-huge-has-text-icon-padding | 0 40px | The padding value for Huge Inputs with icons. |
| sprk-text-input-font-family | $sprk-font-family-body-two | The font family for Inputs. |
| sprk-text-input-font-size | 1rem | The font size for Inputs. |
| sprk-text-input-font-weight | 300 | The font weight for Inputs. |
| sprk-text-input-height | 48px | The height setting for Inputs. |
| sprk-text-input-line-height | 1.3 | The line height setting for Inputs. |
| sprk-text-input-outline | 0 | The outline setting for Inputs. |
| sprk-text-input-color | $sprk-black | The color setting for Inputs. |
| sprk-text-input-border | 2px solid $sprk-black-tint-50 | The border setting for Inputs. |
| sprk-text-input-border-radius | 4px | The border radius for Inputs. |
| sprk-text-input-box-shadow | none | The box shadow for Inputs. |
| sprk-text-input-padding | 0 $sprk-space-m | The padding for Inputs. |
| sprk-text-input-focus-border-color | $sprk-green | The border color on Inputs when focused. |
| sprk-text-input-error-border-color | $sprk-yellow | The border color on Inputs when there is an error. |
| sprk-text-input-disabled-border-color | $sprk-black-tint-50 | The border color on disabled Inputs. |
| sprk-text-input-disabled-background-color | $sprk-gray-dark | The background color on disabled Inputs. |
| sprk-text-input-disabled-box-shadow | none | The box shadow on disabled Inputs. |
| sprk-text-input-disabled-color | $sprk-black-tint-50 | The color setting on disabled Inputs. |
| sprk-text-input-readonly-border-color | $sprk-black-tint-50 | The border color setting on readonly Inputs. |
| sprk-text-input-readonly-color | $sprk-black-tint-50 | The color setting on readonly Inputs. |
| sprk-text-input-transition | border-color 0.15s ease | The transition setting Inputs. |
| sprk-select-appearance | none | The value for the appearance property for Selects. |
| sprk-select-background | none | The background setting for Selects. |
| sprk-select-border | $sprk-text-input-border | The border setting for Selects. |
| sprk-select-focus-border-color | $sprk-text-input-focus-border-color | The border color setting for Selects on focus. |
| sprk-select-error-border-color | $sprk-text-input-error-border-color | The border color setting for Selects when they have an error. |
| sprk-select-border-radius | $sprk-text-input-border-radius | The border radius setting for Selects. |
| sprk-select-box-shadow | $sprk-text-input-box-shadow | The box shadow setting for Selects. |
| sprk-select-color | $sprk-text-input-color | The value for the color property for Selects. |
| sprk-select-font-size | $sprk-text-input-font-size | The font size of Selects. |
| sprk-select-font-family | $sprk-text-input-font-family | The font family of Selects. |
| sprk-select-font-weight | $sprk-text-input-font-weight | The font weight of Selects. |
| sprk-select-line-height | $sprk-text-input-line-height | The line height of Selects. |
| sprk-select-outline | $sprk-text-input-outline | The outline setting for Selects. |
| sprk-select-padding | 12px 45px 12px 13px | The padding of Selects. |
| sprk-select-arrow-offset-y | -31px | The value for margin-top on the icon in Selects. |
| sprk-select-arrow-offset-x | 19px | The value for margin-right on the icon in Selects. |
| sprk-select-arrow-stroke-width | 6px | The stroke width of the icon in Selects. |
| sprk-select-disabled-border-color | $sprk-text-input-disabled-border-color | The border color of disabled Selects. |
| sprk-select-disabled-background-color | $sprk-text-input-disabled-background-color | The background color of disabled Selects. |
| sprk-select-disabled-color | $sprk-text-input-disabled-color | The color property value of disabled Selects. |
| sprk-select-moz-focusring-color | transparent | The value for the Firefox specific -moz-focusring color setting. |
| sprk-select-moz-focusring-text-shadow | 0 0 0 $sprk-select-color | The value for the Firefox specific -moz-focusring text-shadow setting. |
| sprk-textarea-min-height | 125px | The minimum height of Textarea. |
| sprk-textarea-margin | $sprk-space-stack-m | The margin surrounding Textarea. |
| sprk-textarea-padding | $sprk-space-m | The padding inside Textarea. |
| sprk-checkbox-input-opacity | 0 | The opacity of the native control checkbox. |
| sprk-checkbox-transition | all 0.2s ease-in-out | The transition for the checkbox when the input is checked or unchecked. |
| sprk-checkbox-input-huge-max-width | 500px | The max-width of the huge checkbox input. |
| sprk-checkbox-huge-container-transition | $sprk-checkbox-transition | The transition of the huge checkbox input. |
| sprk-checkbox-huge-container-border | 2px $sprk-black-tint-50 solid | The border settings of the huge checkbox input. |
| sprk-checkbox-huge-container-border-radius | 4px | The border-radius of the huge checkbox input. |
| sprk-checkbox-huge-container-padding | 20px $sprk-space-m 20px 55px | The padding of the huge checkbox input. |
| sprk-checkbox-huge-container-flex-basis | 100% | The flex-basis of the huge checkbox input. |
| sprk-checkbox-huge-container-line-height | 1rem | The line height of the huge checkbox input. |
| sprk-checkbox-huge-container-hover-border-color | $sprk-black | The border color of the huge checkbox input when hovered. |
| sprk-checkbox-huge-container-hover-box-shadow | $sprk-input-huge-box-shadow | The box shadow of the huge checkbox input when hovered. |
| sprk-checkbox-huge-container-disabled-box-shadow | none | The box shadow of the huge checkbox input when disabled. |
| sprk-checkbox-huge-container-disabled-border-color | $sprk-text-input-disabled-border-color | The border color of the huge checkbox input when disabled. |
| sprk-checkbox-huge-container-disabled-background | $sprk-text-input-disabled-background-color | The background of the huge checkbox input when disabled. |
| sprk-checkbox-huge-container-focus-border-color | $sprk-green | The border color of the huge checkbox input when focused. |
| sprk-checkbox-huge-container-focus-hover-border-color | $sprk-black | The border color of the huge checkbox input when focused and hovered. |
| sprk-checkbox-huge-container-checked-border-color | $sprk-green | The border color of the huge checkbox input when checked. |
| sprk-checkbox-huge-container-checked-hover-border-color | $sprk-black | The border color of the huge checkbox input when checked and hovered. |
| sprk-checkbox-huge-container-focus-checked-border-color | $sprk-black | The border color of the huge checkbox input when checked and focused. |
| sprk-checkbox-huge-custom-input-height | 1.5rem | The height of the custom checkbox element of the huge checkbox input. |
| sprk-checkbox-huge-custom-input-width | 1.5rem | The width of the custom checkbox element of the huge checkbox input. |
| sprk-checkbox-huge-custom-input-top | $sprk-space-m | The top value of the custom checkbox element of the huge checkbox input. |
| sprk-checkbox-huge-custom-input-left | $sprk-space-m | The left value of the custom checkbox element of the huge checkbox input. |
| sprk-checkbox-huge-custom-input-hover-border-color | $sprk-black | The border color of the custom checkbox element of the huge checkbox input when hovered. |
| sprk-checkbox-huge-custom-input-disabled-border-color | $sprk-black-tint-50 | The border color of the custom checkbox element of the huge checkbox input when disabled. |
| sprk-checkbox-huge-custom-input-checkbox-element-checked-border-color | $sprk-green | The border color of the custom checkbox element of the huge checkbox input when checked. |
| sprk-checkbox-huge-checkmark-icon-height | 0.5rem | The height of the checkmark inside of the huge checkbox input. |
| sprk-checkbox-huge-checkmark-icon-width | 0.75rem | The width of the checkmark inside of the huge checkbox input. |
| sprk-checkbox-huge-checkmark-icon-left | 22px | The left value of the checkmark inside of the huge checkbox input. |
| sprk-checkbox-huge-checkmark-icon-top | 22px | The top value of the checkmark inside of the huge checkbox input. |
| sprk-text-input-error-color | $sprk-yellow | Color setting for Inputs with errors. |
| sprk-input-error-text-color | $sprk-black | Value for color on Inputs with errors. |
| sprk-input-error-text-font-family | $sprk-font-family-body-two | The font family used for Input error text. |
| sprk-input-error-text-font-weight | 400 | The font weight used for Input error text. |
| sprk-input-error-text-font-size | 0.8125rem | The font size used for Input error text. |
| sprk-input-error-text-line-height | 1.4 | The line height used for Input error text. |
| sprk-input-error-text-margin | 0 0 0 6px | The margin for Input error text. |
| sprk-error-container-margin | $sprk-space-s 0 0 0 | The margin for Input containers that have an error. |
| sprk-error-icon-size | 1.25rem | The Input error icon size. |
| sprk-helper-color | $sprk-black-tint-75 | The color of the helper text for Inputs. |
| sprk-helper-font-size | 0.8125rem | The font size of the helper text for Inputs. |
| sprk-helper-font-family | $sprk-text-input-font-family | The font family of the helper text for Inputs. |
| sprk-helper-font-weight | $sprk-text-input-font-weight | The font weight of the helper text for Inputs. |
| sprk-helper-line-height | $sprk-text-input-line-height | The line height of the helper text for Inputs. |
| sprk-helper-margin | $sprk-error-container-margin | The margin of the helper text for Inputs. |
| sprk-placeholder-color | $sprk-black-tint-50 | The color of the placeholder for Inputs. |
| sprk-placeholder-font-size | $sprk-text-input-font-size | The font size of the placeholder for Inputs. |
| sprk-placeholder-font-family | $sprk-text-input-font-family | The font family of the placeholder for Inputs. |
| sprk-placeholder-font-weight | $sprk-text-input-font-weight | The font weight of the placeholder for Inputs. |
| sprk-selection-container-margin | 0 0 $sprk-space-m 0 | The margin of the selection container for Inputs. |
| sprk-selection-container-label-font-weight | 300 | The font weight of the label in the selection container for Inputs. |
| sprk-selection-container-input-height | auto | The height of the selection container for Inputs. |
| sprk-selection-container-input-width | auto | The width of Input inside the selection container. |
| sprk-selection-container-input-margin | 0 $sprk-space-s 0 0 | The margin of the Input inside the selection container. |
| sprk-date-picker-max-width | 20rem | The maximum width of the Date Picker popup. |
| sprk-date-picker-border-radius | 4px | The border radius applied to the Date Picker popup. |
| sprk-date-picker-button-size | 2.25rem | The size of the buttons used internally by the Date Picker popup. |
| sprk-date-picker-column-adjustment-x | 0.25rem | The offset applied to columns used internally by the Date Picker. |
| sprk-date-picker-box-shadow | 0 4px 16px rgba(51, 51, 51, 0.1) | The box shadow of the Date Picker. |
| sprk-date-picker-font-family | $sprk-font-family-body-two | The font family in the Date Picker popup. |
| sprk-date-picker-font-size | 1rem | The font size of the Date Picker popup. |
| sprk-date-picker-font-weight | 300 | The font weight of the Date Picker popup. |
| sprk-date-picker-day-interact-color | $sprk-green | Color used internally by Date Picker to highlight elements |
| sprk-date-picker-selected-day-font-weight | 500 | Font weight used by the currently selected day in the Date Picker popup. |
| sprk-date-picker-background | $sprk-white | The value for background in the Date Picker. |
| sprk-date-picker-padding | $sprk-space-inset-s | The value for padding in the Date Picker. |
| sprk-date-picker-padding-wide | $sprk-space-inset-m | The value for padding on wide viewports in the Date Picker. |
| sprk-date-picker-header-border | 1px solid $sprk-gray | The border setting for the header in the Date Picker. |
| sprk-date-picker-header-font-size | $sprk-font-size-body-three | The font size for the header in the Date Picker. |
| sprk-date-picker-header-font-weight | 700 | The font weight for the header in the Date Picker. |
| sprk-date-picker-header-padding | 0 0 $sprk-space-s 0 | The padding for the header in the Date Picker. |
| sprk-date-picker-col-header-padding | 10px | The padding around the month header in the Date Picker popup. |
| sprk-date-picker-day-padding | 6px | The padding around the day in the Date Picker popup. |
| sprk-date-picker-day-margin | 0 2px | The margin around the day in the Date Picker popup. |
| sprk-date-picker-day-color | $sprk-white | The color of the day in the Date Picker popup. |
| sprk-date-picker-day-hover-color | $sprk-black | The color of the day in the Date Picker popup on hover. |
| sprk-date-picker-day-edge-day-color | $sprk-black-tint-50 | The color of days in the Date Picker popup that are in the next month or disabled. |
| sprk-date-picker-month-year-font-size | $sprk-font-size-display-six | The font size of the month and year in the Date Picker popup. |
| sprk-date-picker-arrow-color | $sprk-black | The color of the prev/next arrows in the Date Picker popup. |
| sprk-date-picker-modal-margin | $sprk-space-m 0 0 0 | The margin applied to the Date Picker popup. |
| sprk-date-picker-modal-margin-wide | 2px | The margin applied to the Date Picker popup on wide viewports. |
| sprk-date-picker-modal-z-index | $sprk-layer-height-m | The z-index applied to the Date Picker popup. |
| sprk-date-picker-years-modal-max-height | 500px | The value for max-height applied to the Date Picker popup. |
| sprk-input-text-icon-offset-x | $sprk-space-m | The X offset of text icons inside Inputs. |
| sprk-input-text-icon-offset-y | 2em | The Y offset of text icons inside Inputs. |
| sprk-input-text-icon-font-size | 1rem | The font size of text icons inside Inputs. |
| sprk-input-text-icon-font-weight | 700 | The font weight of text icons inside Inputs. |
| sprk-input-has-icon-right-top | 38px | The top offset of the icon displayed on the right side of Inputs. |
| sprk-input-has-icon-right-left | 71px | The font size of text icons inside Inputs. |
| sprk-text-input-has-text-icon-padding | 0 0 1px 37px | The font size of text icons inside Inputs. |
| sprk-input-has-icon-padding-right | 0 37px 1px 12px | The font size of text icons inside Inputs. |
| sprk-text-input-huge-has-text-icon-padding | 0 40px | The font size of text icons inside Inputs. |
| sprk-input-text-icon-z-index | $sprk-layer-height-xs | The font size of text icons inside Inputs. |
| sprk-input-icon-offset-x | $sprk-space-m | The X offset of icons inside Inputs. |
| sprk-input-icon-offset-y | $sprk-space-m | The Y offset of icons inside Inputs. |
| sprk-text-input-has-icon-padding | 12px 0 12px 40px | The padding inside Inputs that contain icons. |
| sprk-input-icon-z-index | $sprk-layer-height-xs | The z-index applied to the icon inside Inputs. |
| sprk-label-padding | 0 | The padding applied to Input labels. |
| sprk-label-font-family | $sprk-font-family-body-two | The font family applied to Input labels. |
| sprk-label-font-size | 0.875rem | The font size applied to Input labels. |
| sprk-label-font-weight | 400 | The font weight applied to Input labels. |
| sprk-label-line-height | 1 | The line height applied to Input labels. |
| sprk-label-margin | 0 0 $sprk-space-s 0 | The margin applied to Input labels. |
| sprk-visibility-control-margin | 6px 0 0 0 | The margin surrounding visibility controls (Ex. 'Show SSN'). |
| sprk-visibility-control-label-font-size | $sprk-label-font-size | The font size used for visibility controls. |
| sprk-label-disabled-color | $sprk-black-tint-50 | The color of the disabled Input labels. |
| sprk-radio-input-opacity | 0 | The opacity value for the radio input. |
| sprk-radio-input-transition | all 0.2s ease-in-out | The transition for the radio input. |
| sprk-radio-input-outer-circle-hover-border | 2px solid $sprk-black-tint-75 | The border of the outer circle in the radio input on hover. |
| sprk-radio-input-outer-circle-focus-border | 2px solid $sprk-green | The border of the outer circle in the radio input on focus. |
| sprk-radio-input-outer-circle-focus-border-disabled | 2px solid $sprk-black-tint-50 | The border of the outer circle in the disabled radio input on focus. |
| sprk-radio-input-border-radius | 50% | The border radius of the circle in the radio input. |
| sprk-radio-input-inner-circle-background-color | $sprk-green | The background color of the inner circle in the radio input. |
| sprk-radio-input-outer-circle-border-checked | 2px solid $sprk-green | The border of the outer circle in the radio input when checked. |
| sprk-radio-input-outer-circle-border | 2px solid $sprk-black-tint-50 | The border of the outer circle in the radio input. |
| sprk-radio-input-outer-circle-border-hover-disabled | 2px solid $sprk-black-tint-50 | The border of the outer circle in the disabled radio input on hover. |
| sprk-radio-input-outer-circle-height | 1rem | The height of the outer circle in the radio input. |
| sprk-radio-input-outer-circle-width | 1rem | The width of the outer circle in the radio input. |
| sprk-radio-input-outer-circle-top | 0 | The top value of the outer circle in the radio input. |
| sprk-radio-input-outer-circle-left | -1.375rem | The left value of the outer circle in the radio input. |
| sprk-radio-input-inner-circle-height | 0.5rem | The height of the inner circle in the radio input. |
| sprk-radio-input-inner-circle-width | 0.5rem | The width of the inner circle in the radio input. |
| sprk-radio-input-inner-circle-top | 0.25rem | The top value of the inner circle in the radio input. |
| sprk-radio-input-inner-circle-left | -1.125rem | The left value of the inner circle in the radio input. |
| sprk-radio-input-huge-max-width | 31.25rem | The max-width of the huge radio input. |
| sprk-radio-input-huge-transition | $sprk-radio-input-transition | The transition for the huge radio input. |
| sprk-radio-input-huge-label-border | 2px $sprk-black-tint-50 solid | The border for the huge radio input label. |
| sprk-radio-input-huge-label-border-radius | 4px | The border-radius for the huge radio input label. |
| sprk-radio-input-huge-label-padding | 1.25rem 1rem 1.25rem 3.4375rem | The padding for the huge radio input label. |
| sprk-radio-input-huge-label-flex-basis | 100% | The flex-basis for the huge radio input label. |
| sprk-radio-input-huge-label-line-height | 1rem | The line-height for the huge radio input label. |
| sprk-radio-input-huge-label-hover-border-color | $sprk-black | The border color of the huge radio input label on hover. |
| sprk-radio-input-huge-label-hover-box-shadow | $sprk-input-huge-box-shadow | The box shadow of the huge radio input label on hover. |
| sprk-radio-input-huge-outer-circle-border-hover-background-color | $sprk-gray | The background color of the outer circle of the huge radio input on hover. |
| sprk-radio-input-huge-outer-circle-width | 1.5rem | The width of the outer circle of the huge radio input. |
| sprk-radio-input-huge-outer-circle-height | 1.5rem | The height of the outer circle of the huge radio input. |
| sprk-radio-input-huge-outer-circle-top | 1rem | The top value of the outer circle of the huge radio input. |
| sprk-radio-input-huge-outer-circle-left | 1rem | The left value of the outer circle of the huge radio input. |
| sprk-radio-input-huge-focused-label-border | $sprk-green | The border color of the huge radio input label when it has focus. |
| sprk-radio-input-huge-focused-outer-circle-border-background-color | $sprk-gray | The background color of the outer circle of the huge radio input when it has focus. |
| sprk-radio-input-huge-checked-label-border | $sprk-green | The border color of the huge radio input label when it is selected. |
| sprk-radio-input-huge-checked-hover-label-border-color | $sprk-black | The border color of the huge radio input label when it is selected and hovered. |
| sprk-radio-input-huge-checked-hover-outer-circle-border-color | $sprk-green | The border color of the outer circle of the huge when it is selected and hovered. |
| sprk-radio-input-huge-inner-circle-height | 1rem | The height of the inner circle of the huge radio input. |
| sprk-radio-input-huge-inner-circle-width | 1rem | The width of the inner circle of the huge radio input. |
| sprk-radio-input-huge-inner-circle-left | 1.25rem | The left value of the inner circle of the huge radio input. |
| sprk-radio-input-huge-inner-circle-top | 1.25rem | The top value of the inner circle of the huge radio input. |
| sprk-radio-input-huge-outer-circle-border-hover-disabled | $sprk-radio-input-outer-circle-border-hover-disabled | The border of the outer circle of the huge radio input when it is disabled and hovered. |
| sprk-radio-input-huge-outer-circle-box-shadow-hover-disabled | none | The box shadow of the outer circle of the huge radio input when it is disabled and hovered. |
| sprk-table-padding-small | $sprk-space-inset-s | The small Table padding. |
| sprk-table-padding-medium | $sprk-space-inset-m | The medium Table padding. |
| sprk-table-padding-large | $sprk-space-inset-l | The large Table padding. |
| sprk-table-cell-alignment | center | The Table cell alignment. |
| sprk-table-stripe-color | $sprk-gray | The stripe color or the striped Table. |
| sprk-table-highlight-color | $sprk-red | The highlight background color of the sprk-b-TableHighlight. |
| sprk-table-highlight-text-color | $sprk-white | The highlight text color of the sprk-b-TableHighlight. |
| sprk-table-heading-alignment | center | The heading alignment of in Tables. |
| sprk-table-border-width | 1px | The border width on Tables. |
| sprk-table-border-style | solid | The border style of Tables. |
| sprk-table-border-color | $sprk-black | The border color of Tables. |
| sprk-table-border-collapse | collapse | The border collapse setting of Tables. |
| sprk-table-row-border-width | 1px | The width of the bottom border on Table rows. |
| sprk-table-row-border-style | solid | The style of the bottom border on Table rows. |
| sprk-table-row-border-color | $sprk-gray | The color of the bottom border on Table rows. |
| sprk-table-header-background-color | $sprk-black | The background color of the Table header. |
| sprk-table-header-font-color | $sprk-white | The font color of the Table header. |
| sprk-table-header-font-size | $sprk-font-size-body-one | The font size of the Table header. |
| sprk-table-header-font-weight | $sprk-font-weight-body-one | The font weight of the Table header. |
| sprk-table-header-border-spacing | 2px | The width of the right border on the Table header. |
| sprk-table-header-border-color | $sprk-white | The color of the right border on the Table header. |
| sprk-table-empty-heading-background-color | $sprk-white | The background color of empty Table headers. |
| sprk-table-secondary-header-background-color | $sprk-white | The background color of Secondary Table headers. |
| sprk-table-secondary-header-font-color | $sprk-black | The font color of Secondary Table headers. |
| sprk-table-secondary-header-text-alignment | left | The text alignment of Secondary Table headers. |
| sprk-table-secondary-cell-text-alignment | left | The text alignment of Secondary Table cells. |
| sprk-table-secondary-header-border-spacing | 0 | The width of the right border on the Secondary Table header. |
| sprk-table-secondary-header-border-color | $sprk-white | The color of the right border on the Secondary Table header. |
| sprk-table-grouped-header-background-color | $sprk-black | The background color of the header in the Grouped Columns Table variant. |
| sprk-table-grouped-header-font-size | $sprk-font-size-body-four | The font size of the header in the Grouped Columns Table variant. |
| sprk-table-grouped-header-font-weight | normal | The font weight of the header in the Grouped Columns Table variant. |
| sprk-table-secondary-row-comp-row-spacing | 0 15px | The distance between the borders of adjacent cells in the Secondary Row Comparison Table (horizontal | vertical). |
| sprk-table-secondary-row-comp-border-width | 1px | The width of the borders in the Secondary Row Comparison Table cells. |
| sprk-table-secondary-row-comp-border-style | solid | The style of the borders in the Secondary Row Comparison Table cells. |
| sprk-table-secondary-row-comp-border-color | $sprk-gray | The color of the borders in the Secondary Row Comparison Table cells. |
| sprk-box-padding-tiny | $sprk-space-inset-xs | The padding of the tiny Box object. |
| sprk-box-padding-small | $sprk-space-inset-s | The padding of the small Box object. |
| sprk-box-padding | $sprk-space-inset-m | The padding of the default (medium) Box object. |
| sprk-box-padding-large | $sprk-space-inset-l | The padding of the large Box object. |
| sprk-box-padding-huge | $sprk-space-inset-xl | The padding of the huge Box object. |
| sprk-media-gutter-tiny | $sprk-space-xs | The gutter of the tiny Media object. |
| sprk-media-gutter-small | $sprk-space-s | The gutter of the small Media object. |
| sprk-media-gutter | $sprk-space-m | The gutter of the default (medium) Media object. |
| sprk-media-gutter-large | $sprk-space-l | The gutter of the large Media object. |
| sprk-media-gutter-huge | $sprk-space-xl | The gutter of the huge Media object. |
| sprk-stack-spacing-tiny | $sprk-space-xs | The spacing of the tiny Stack object. |
| sprk-stack-spacing-small | $sprk-space-s | The spacing of the small Stack object. |
| sprk-stack-spacing-medium | $sprk-space-m | The spacing of the medium Stack object. |
| sprk-stack-spacing-large | $sprk-space-l | The spacing of the large Stack object. |
| sprk-stack-spacing-huge | $sprk-space-xl | The spacing of the huge Stack object. |
| sprk-stack-spacing-misc-a | $sprk-space-misc-a | The spacing of the Misc A Stack object. |
| sprk-stack-spacing-misc-b | $sprk-space-misc-b | The spacing of the Misc B Stack object. |
| sprk-stack-spacing-misc-c | $sprk-space-misc-c | The spacing of the Misc C Stack object. |
| sprk-stack-spacing-misc-d | $sprk-space-misc-d | The spacing of the Misc D Stack object. |
| sprk-split-breakpoint-xxs | 20rem | The breakpoint for Stack objects that split at the extra extra small point. |
| sprk-split-breakpoint-xs | 30rem | The breakpoint for Stack objects that split at the extra small point. |
| sprk-split-breakpoint-s | 42.5rem | The breakpoint for Stack objects that split at the small point. |
| sprk-split-breakpoint-m | 55rem | The breakpoint for Stack objects that split at the medium point. |
| sprk-split-breakpoint-l | 67.5rem | The breakpoint for Stack objects that split at the large point. |
| sprk-split-breakpoint-xl | 80rem | The breakpoint for Stack objects that split at the extra large point. |
| sprk-divider-color | rgb(230, 230, 230) | The value for color of Dividers. |
| sprk-divider-border | 2px solid $sprk-divider-color | The value of border for Dividers. |
| sprk-accordion-max-width | 53.125rem | The maximum width of Accordions. |
| sprk-accordion-border | $sprk-divider-border | The border of Accordions. |
| sprk-accordion-summary-color | $sprk-black | The font color of the Accordion item summary. |
| sprk-accordion-summary-background-color | transparent | The background color of the Accordion item summary. |
| sprk-accordion-summary-text-align | left | The text-align value of the Accordion item summary. |
| sprk-accordion-summary-border | none | The border of the Accordion item summary. |
| sprk-accordion-summary-active-color | $sprk-green | The color of the icon in the summary when the Accordion item is open or hovered. |
| sprk-accordion-summary-padding | $sprk-space-misc-a 0 | The padding of the Accordion summary. |
| sprk-accordion-content-padding | 0 0 $sprk-space-l | The padding of the Accordion content. |
| sprk-accordion-active-background-color | $sprk-gray | The background color used for hover and active on items in the Accordion. |
| sprk-accordion-summary-text-decoration | none | The text decoration of the Accordion item summary. |
| sprk-accordion-summary-active-text-decoration | none | The text decoration of the Accordion item summary when active. |
| sprk-toggle-trigger-border-top | none | The top border style for Toggle Trigger. |
| sprk-toggle-trigger-border-right | none | The right border style for Toggle Trigger. |
| sprk-toggle-trigger-border-bottom | $sprk-link-has-icon-border-bottom | The bottom border style for Toggle Trigger. |
| sprk-toggle-trigger-border-left | none | The left border style for Toggle Trigger. |
| sprk-toggle-trigger-text-decoration | $sprk-link-text-decoration | The text decoration style Toggle Trigger. |
| sprk-toggle-trigger-transition | $sprk-link-transition | The transition for Toggle Trigger. |
| sprk-toggle-trigger-hover-border-bottom | $sprk-link-has-icon-hover-border-bottom | The hover border bottom style for Toggle Trigger. |
| sprk-toggle-trigger-hover-color | $sprk-link-has-icon-hover-color-text | The hover text color for Toggle Trigger. |
| sprk-toggle-trigger-background-color | transparent | The background color for Toggle Trigger. |
| sprk-toggle-trigger-padding-top | 0 | The padding top for Toggle Trigger. |
| sprk-toggle-trigger-padding-right | 0 | The padding right for Toggle Trigger. |
| sprk-toggle-trigger-padding-bottom | 0 | The padding bottom for Toggle Trigger. |
| sprk-toggle-trigger-padding-left | 0 | The padding left for Toggle Trigger. |
| sprk-toggle-trigger-text-align | left | The text alignment for Toggle Trigger. |
| sprk-toggle-trigger-font-size-small | $sprk-font-size-body-four | The font size for small Toggle Trigger. |
| sprk-toggle-trigger-font-weight-small | normal | The font weight for small Toggle Trigger. |
| sprk-toggle-transition-timing | 0.3s ease | The transition timing for the rotation of the icon when the Toggle is opened. |
| sprk-tooltip-trigger-border | none | The border for the tooltip trigger. |
| sprk-tooltip-trigger-background-color | transparent | The background color for the tooltip trigger. |
| sprk-tooltip-trigger-padding | 0 | The padding for the tooltip trigger. |
| sprk-tooltip-trigger-text-align | left | The text align for the tooltip trigger. |
| sprk-tooltip-background-color | $sprk-black | The background color for the tooltip. |
| sprk-tooltip-font-color | $sprk-white | The font color for the tooltip. |
| sprk-tooltip-text-align | left | The text align for the tooltip. |
| sprk-tooltip-font-weight | 300 | The font weight for the tooltip |
| sprk-tooltip-padding | $sprk-space-inset-short-m | The padding for the tooltip. |
| sprk-tooltip-border-radius | 4px | The border radius for the tooltip. |
| sprk-tooltip-font-size | $sprk-font-size-body-four | The font size for the tooltip. |
| sprk-tooltip-caret-background-color | $sprk-black | The background color for the tooltip caret. |
| sprk-tooltip-toggled-icon-background-color | $sprk-green | The background color for the tooltip icon while toggled. |
| sprk-tooltip-z-index | $sprk-layer-height-xs | The z-index of the tooltip. |
| sprk-tooltip-max-width | 328px | The max-width of the tooltip. |
| sprk-tooltip-min-width | 60px | The min-width of the tooltip. |
| sprk-tooltip-caret-width | 17px | The width of the tooltip caret. |
| sprk-dropdown-active-background-color | $sprk-gray | Background color of the Dropdown items that are active or hovered. |
| sprk-dropdown-active-border | 2.5px solid $sprk-green | The left border of the Dropdown item that is active. |
| sprk-dropdown-active-box-shadow | -1px 0 0 0 $sprk-green | The box-shadow of the Dropdown item that is active. |
| sprk-dropdown-border | 1px solid $sprk-gray | The border of the Dropdown. |
| sprk-dropdown-font-size | $sprk-font-size-body-one | The font size of the Dropdown. |
| sprk-dropdown-font-weight | 400 | The font weight of the Dropdown. |
| sprk-dropdown-footer-padding | $sprk-space-inset-short-l | The padding around the Informational Dropdown footer. |
| sprk-dropdown-line-height | 1 | The line height of the Dropdown. |
| sprk-dropdown-max-width | 24rem | The max-width of the Dropdown. |
| sprk-dropdown-padding | $sprk-space-misc-a | The padding around the Dropdown items. |
| sprk-dropdown-shadow | 0 0 40px 2px rgba(0, 0, 0, 0.1) | The box shadow of the Dropdown. |
| sprk-dropdown-title-color | $sprk-black-tint-25 | The color of the Dropdown title. |
| sprk-dropdown-title-font-size | $sprk-dropdown-font-size | The font size of the Dropdown title. |
| sprk-dropdown-title-font-weight | 300 | The font weight of the Dropdown title. |
| sprk-modal-mask-color | rgba(34, 34, 34, 0.35) | The color of the mask overlay that is shown behind the Modal. |
| sprk-modal-color | $sprk-white | The background color of the Modal. |
| sprk-modal-max-width | 43.75rem | The maximum width of the Modal. |
| sprk-modal-height | 70% | The maximum height of the Modal. |
| sprk-modal-breakpoint-small | 25rem | Determines how far down from the top of the page the Modal renders at the small breakpoint. |
| sprk-modal-breakpoint-medium | 37.5rem | Determines how far down from the top of the page the Modal renders at the medium breakpoint. |
| sprk-modal-shadow | 0 4px 5px rgba(0, 0, 0, 0.6) | The box shadow on the Modal. |
| sprk-modal-border-radius | 8px | The border radius on the Modal. |
| sprk-masthead-menu-icon-width | $sprk-icon-l | The width of the menu icon on narrow viewports in the Masthead. |
| sprk-masthead-menu-icon-height | $sprk-icon-l | The height of the menu icon on narrow viewports in the Masthead. |
| sprk-masthead-bg-color | $sprk-white | The background color of the Masthead. |
| sprk-masthead-content-padding | $sprk-space-s | The padding of the Masthead content, menu, and branding sections. |
| sprk-masthead-content-item-padding-top | $sprk-space-s | The padding top around the content items in the content section of the Masthead. |
| sprk-masthead-content-item-padding-bottom | $sprk-space-s | The padding bottom around the content items in the content section of the Masthead. |
| sprk-masthead-content-item-padding-right | $sprk-space-s | The padding right around the content items in the content section of the Masthead. |
| sprk-masthead-content-padding-wide | $sprk-space-m | The padding around the content section in the Masthead on wide viewports. |
| sprk-masthead-content-item-padding-top-wide | $sprk-space-s | The padding top of the content items in the content section in the Masthead on wide viewports. |
| sprk-masthead-content-item-padding-bottom-wide | $sprk-space-s | The padding bottom of the content items in the content section in the Masthead on wide viewports. |
| sprk-masthead-content-item-padding-right-wide | $sprk-space-m | The padding right of the content items in the content section in the Masthead on wide viewports. |
| sprk-masthead-content-item-padding-left-wide | $sprk-space-m | The padding left of the content items in the content section in the Masthead on wide viewports. |
| sprk-masthead-link-visited-color | $sprk-black | The visited state color of Masthead links. |
| sprk-masthead-link-hover-color | $sprk-green | The hover state color of Masthead links. |
| sprk-masthead-link-font-weight | 500 | The font weight for Masthead links. |
| sprk-masthead-border-bottom-size | 1px | The size of the bottom border on the Masthead. |
| sprk-masthead-border-bottom | $sprk-masthead-border-bottom-size solid $sprk-gray | The bottom border on the Masthead. |
| sprk-masthead-border-bottom-wide | 0 | The bottom border on the Masthead on wide viewports. |
| sprk-masthead-site-links-border-right | 2px solid $sprk-black-tint-25 | The right border on the site links in the Masthead. |
| sprk-masthead-breakpoint | 54rem | The point at which the Masthead navigation switches from narrow viewport style to large viewport style. |
| sprk-masthead-column-width | 89rem | The maximum width of the Masthead. |
| sprk-masthead-logo-max-width | 192px | The maximum width of the logo in the Masthead. |
| sprk-masthead-logo-min-width | 174px | The minimum width of the logo in the Masthead. |
| sprk-masthead-shadow | none | The box shadow of the Masthead. |
| sprk-masthead-shadow-wide | none | The box shadow of the Masthead in wide viewports. |
| sprk-masthead-shadow-scroll | 0 0 40px rgba(0, 0, 0, 0.1) | The Masthead shadow that gets applied when the page is scrolled. |
| sprk-masthead-selector-border | 2px solid $sprk-black-tint-25 | The border of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-selector-border-radius | 5px | The border radius of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-border-bottom-mask-open | 2px solid $sprk-gray | The bottom border that gets applied to the selector dropdown when open in the Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-box-shadow-mask-open | 0 5px 10px rgba(0, 0, 0, 0.1) | The box shadow that gets applied to the selector dropdown when open in the Masthead with Extended Navigation. |
| sprk-masthead-selector-border-color-mask-open | $sprk-white | The border color that gets applied to the selector dropdown when open in the Masthead with Extended Navigation. |
| sprk-masthead-selector-font-color | $sprk-black | The font color of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-selector-bg-color | $sprk-white | The background color of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-selector-padding | $sprk-space-inset-short-m | The padding of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-padding | 0 | The padding of the selector dropdown in the Masthead with Extended Navigation. |
| sprk-masthead-selector-min-width | 17rem | The minimum width of the selector in the Masthead with Extended Navigation. |
| sprk-masthead-narrow-height | 81px | This is the height of the Masthead on narrow viewports and is used to calculate how far from the top the narrow navigation items should be displayed. |
| sprk-masthead-mask-color | rgba(0, 0, 0, 0.5) | The color of the mask that gets applied when the Masthead selector dropdown is open on narrow screens. |
| sprk-masthead-transition | all 0.3s ease-in | The transition applied to the Masthead. |
| sprk-masthead-translateY | translateY(-100%) | The transform length that gets applied when the Masthead scrolls out of view on narrow screens. |
| sprk-big-nav-column-width | 64rem | The maximum width of the big navigation items in the navigation bar in the Masthead Extended. |
| sprk-big-nav-bg | $sprk-white | The background color of the big navigation bar in the Masthead Extended. |
| sprk-big-nav-link-font-weight | 400 | The font weight of the big navigation link in the Masthead Extended. |
| sprk-big-nav-link-padding | 0 $sprk-space-s | The padding of the big navigation link in the Masthead Extended. |
| sprk-big-nav-link-color | $sprk-black | The color of the big navigation link in the Masthead Extended. |
| sprk-big-nav-active-color | $sprk-big-nav-link-color | The text and underline color of the active big navigation item in the Masthead Extended. |
| sprk-big-nav-item-line-height | 53px | The line height of the big navigation items in the Masthead Extended. |
| sprk-masthead-accordion-active-left-border | 3px solid $sprk-black | The left border of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-heading-font-weight | 400 | The font weight of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-heading-color | $sprk-black | The color of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-heading-color | $sprk-black | The color of the heading in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-heading-font-weight | 400 | The font weight of the heading in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-details-font-weight | 300 | The font weight of the details in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-details-font-color | $sprk-black | The font color of the details in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-background-color | $sprk-gray | The background color of the active in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-font-color | $sprk-black | The font color of the active in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-font-color | $sprk-black | The font color of the text in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-open-line-background-color | $sprk-black-tint-25 | The color of the line on open items in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-open-line-height | 2px | The height of the line on open navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-padding | $sprk-space-m | The padding of the items in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-text-align | left | The text alignment of an item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-border | 0 | The border of an item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-background | transparent | The background of an item in the navigation links when masthead is on narrow viewports. |
| sprk-spinner-size | 1.3rem | The height and width of Spinners. |
| sprk-spinner-size-large | 3rem | The height and width of large Spinners. |
| sprk-spinner-speed | 1s | The speed of the animation for Spinners. |
| sprk-spinner-thickness | 0.18rem | The thickness of Spinners. |
| sprk-spinner-color | $sprk-white | The color of Spinners. |
| sprk-spinner-color-dark | $sprk-black | The color of the dark Spinner. |
| sprk-tab-navigation-breakpoint | 46rem | The breakpoint at which the tabs go from stacked layout to side by side in Tabbed Navigation. |
| sprk-tab-navigation-btn-color | $sprk-black | The tab button text color in Tabbed Navigation. |
| sprk-tab-navigation-btn-bg-color | $sprk-gray | The tab button background color in Tabbed Navigation. |
| sprk-tab-navigation-btn-border-top | 3px solid $sprk-gray | The border on the top of the button tabs in Tabbed Navigation. |
| sprk-tab-navigation-btn-hover-border-top | 3px solid $sprk-red | The border on the top of the button tabs on hover in Tabbed Navigation. |
| sprk-tab-navigation-btn-active-color | $sprk-red | The button tab text color of the currently active tab in Tabbed Navigation. |
| sprk-tab-navigation-btn-active-border-top | 3px solid $sprk-red | The button tab top border of the currently active tab in Tabbed Navigation. |
| sprk-tab-navigation-btn-active-bg-color | $sprk-white | The button tab background color of the currently active tab in Tabbed Navigation. |
| sprk-stepper-bg | transparent | The background color of the Stepper. |
| sprk-stepper-breakpoint | $sprk-split-breakpoint-xl | The minimum width at which the Stepper switches between narrow and wide layouts. |
| sprk-stepper-max-width | 480px | The maximum width of the Stepper. |
| sprk-stepper-icon-border-width | 2px | The border width of the Stepper icons. |
| sprk-stepper-icon-border-color | $sprk-black-tint-50 | The color of the border around the Stepper icon. |
| sprk-stepper-icon-border-color-selected | $sprk-green | The color of the step icon when the step is selected in the Stepper. |
| sprk-stepper-icon-border-color-selected-dark-bg | $sprk-green-tint-75 | The color of the step icon in front of a dark background when the step is selected in the Stepper. |
| sprk-stepper-dark-icon-border-color | $sprk-white | The color of the icon border when the Stepper is on a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-stepper-icon-height | 16px | The height of the step icon in the Stepper. |
| sprk-stepper-icon-width | 16px | The width of the step icon in the Stepper. |
| sprk-stepper-icon-color | $sprk-white | The color of the step icon in the Stepper. |
| sprk-stepper-icon-color-hover | $sprk-black-tint-50 | The color of the step icon in the Stepper when hovered. |
| sprk-stepper-icon-color-selected | $sprk-white | The color of the Stepper step icon when the step is selected. |
| sprk-stepper-dark-icon-color | $sprk-blue | The color of the step icon when the Stepper has a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-stepper-dark-icon-color-selected | $sprk-white | The color of the Stepper step icon when the step is selected and the Stepper has a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-stepper-dark-icon-color-hover | $sprk-white | The color of the step icon on hover when the Stepper has a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-stepper-icon-transition | 0.3s all ease-in-out | The transition of the Stepper step icon. |
| sprk-stepper-icon-z-index | $sprk-layer-height-xs | The z-index of the Stepper step icon. |
| sprk-stepper-icon-box-shadow-selected-spread | 8px | The spread value of the icon box shadow when the Stepper step is selected. |
| sprk-stepper-icon-box-shadow-selected | 0 0 0 $sprk-stepper-icon-box-shadow-selected-spread $sprk-stepper-icon-border-color-selected | The box shadow of the Stepper step icon when the icon is selected. |
| sprk-stepper-icon-box-shadow-selected-dark-bg | 0 0 0 $sprk-stepper-icon-box-shadow-selected-spread $sprk-stepper-icon-border-color-selected-dark-bg | The box shadow of the Stepper step icon on a dark background. when the icon is selected. |
| sprk-stepper-step-content-bg | transparent | The background color of the content in the Stepper step. |
| sprk-stepper-step-description-border-radius | 5px | The border radius of the Stepper step content box when it has a description. |
| sprk-stepper-step-description-box-shadow | 0 3px 18px 1px rgba(0, 0, 0, 0.08) | The box shadow of the Stepper step content box when it has a description. |
| sprk-stepper-step-description-top-spacing | $sprk-space-m | The spacing between the Stepper step heading and description. |
| sprk-stepper-step-heading-font-weight | 400 | The font weight of the Stepper step heading. |
| sprk-stepper-step-heading-size | $sprk-font-size-display-six | The font size of the Stepper step heading. |
| sprk-stepper-step-heading-color | $sprk-black | The color of the Stepper step heading. |
| sprk-stepper-dark-step-heading-color | $sprk-white | The color of the Stepper step heading when the Stepper is on a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-stepper-step-heading-color-selected | $sprk-black | The color of the Stepper step heading when the step is selected. |
| sprk-stepper-step-padding | $sprk-space-misc-a | The padding value for the Stepper step. |
| sprk-stepper-step-content-bg-selected | transparent | The background color of the Stepper step content box when the step is selected. |
| sprk-stepper-step-description-bg-selected | $sprk-white | The background color of the Stepper step content box when it has a description and when the step is selected. |
| sprk-stepper-dark-step-description-selected | $sprk-black | The text color of a selected Stepper step's content and header when it has a description. This applies to steppers with the sprk-c-Stepper--has-dark-bg class. |
| sprk-stepper-bar-color | $sprk-black-tint-50 | The color of the bar that connects the steps in the Stepper. |
| sprk-stepper-dark-bar-color | $sprk-white | The color of the bar that connects the steps when the Stepper is on a dark background (sprk-c-Stepper--has-dark-bg). |
| sprk-carousel-dot-border | $sprk-stepper-icon-border-width solid $sprk-stepper-dark-icon-border-color | The border value for the Carousel component. |
| sprk-carousel-dot-height | 10px | The height of the dots in the Carousel component. |
| sprk-carousel-dot-width | 10px | The width of the dots in the Carousel component. |
| sprk-carousel-wide-dot-height | 10px | The height of the dots in the Carousel component on wide viewports. |
| sprk-carousel-wide-dot-width | 10px | The width of the dots in the Carousel component on wide viewports. |
| sprk-carousel-dot-spacing | $sprk-space-m | The spacing between dots in the Carousel component. |
| sprk-carousel-wide-dot-spacing | $sprk-carousel-dot-spacing | The spacing between dots in the Carousel component on wide viewports. |
| sprk-carousel-dot-selected | $sprk-stepper-icon-box-shadow-selected-dark-bg | The box shadow of the active dot in the Carousel component. |
| sprk-carousel-arrow-color | $sprk-white | The color of the arrows in the Carousel component. |
| sprk-carousel-arrow-spacing | $sprk-space-m | The spacing for the arrows in the Carousel component. |
| sprk-carousel-arrow-edge-spacing | 0 | The left and right values of the arrows in the Carousel component. |
| sprk-carousel-arrow-padding | $sprk-space-m | The padding value of the arrows in the Carousel component. |
| sprk-carousel-narrow-image-max-width | 18.75rem | The maximum width of the image in the Carousel component. |
| sprk-carousel-arrow-position-breakpoint | 31.25rem | The breakpoint for the arrows in the Carousel component. |
| sprk-carousel-dot-container-padding | $sprk-space-xs | The padding value for the dots container in the Carousel component. |
| sprk-carousel-breakpoint | $sprk-split-breakpoint-xl | The breakpoint for the Carousel component. |
| sprk-card-max-width | 26.5625rem | The maximum width of the Card. |
| sprk-card-breakpoint | $sprk-split-breakpoint-s | The main Card breakpoint. |
| sprk-card-shadow | 0 3px 10px 1px rgba(0, 0, 0, 0.08) | The box shadow of the Card on narrow viewports. |
| sprk-card-shadow-wide-viewport | 0 3px 18px 1px rgba(0, 0, 0, 0.08) | The box shadow of the Card on wide viewports. |
| sprk-card-shadow-standout | 0 4px 20px 2px rgba(0, 0, 0, 0.1) | The box shadow of the Standout Card variant on narrow viewports. |
| sprk-card-shadow-standout-wide-viewport | 0 4px 40px 2px rgba(0, 0, 0, 0.1) | The box shadow of the Standout Card variant on wide viewports. |
| sprk-card-border-radius | 8px | The border radius of the Card. |
| sprk-card-content-padding | $sprk-space-misc-a | The padding of the content inside the Card. |
| sprk-card-header-bg-color | $sprk-green | The background color of the header area for the Highlighted Header Card. |
| sprk-card-header-text-color | $sprk-white | The text color for the Highlighted Header Card. |
| sprk-dictionary-border | 1px solid $sprk-gray | The border surrounding the Dictionary. |
| sprk-dictionary-stripe-color | $sprk-gray | The background color of the key value pairs in the striped Dictionary. |
| sprk-dictionary-breakpoint | 38.4375rem | The breakpoint of the Dictionary component. |
| sprk-dictionary-label-font-size | $sprk-font-size-body-one | The font size of the labels in the Dictionary. |
| sprk-dictionary-label-font-weight | $sprk-font-weight-body-one | The font weight of the labels in the Dictionary. |
| sprk-dictionary-label-line-height | $sprk-line-height-body-one | The line height of the labels in the Dictionary. |
| sprk-highlight-board-breakpoint | 30rem | The Highlight Board breakpoint at which styles change for padding, font size and button width. |
| sprk-highlight-board-content-width | 30rem | The maximum width of the content for the Highlight Board when it has an image. |
| sprk-highlight-board-type-reduction-percentage | 0.8 | Percentage reduction value for the font size in the Highlight Board in narrow viewports. |
| sprk-highlight-board-height | 31.25rem | The height of the Highlight Board image. |
| sprk-highlight-board-color | $sprk-white | The background color of the Highlight Board. |
| sprk-highlight-board-content-box-color | $sprk-white | The background color of the content box in the Highlight Board. |
| sprk-white | rgb(255, 255, 255) | Color value for white. |
| sprk-yellow | rgb(245, 190, 64) | Color value for yellow. |
| sprk-yellow-tint-75 | rgb(237, 163, 2) | Color value for yellow at 75%. |
| sprk-yellow-tint-50 | rgb(244, 199, 102) | Color value for yellow at 50%. |
| sprk-yellow-tint-25 | rgb(247, 218, 154) | Color value for yellow at 25%. |