Design Tokens
Our Design Tokens are a catalog from which we base all our visual and branding choices. It's a central database of our core style attributes.
These tokens describe branding decisions in color, typography, spacing, sizing, and much more.
Design Tokens are a future-friendly way to create visual consistency between platforms.
Benefits
Design Tokens allow more projects to incorporate our design decisions.
Designer Perks
- Encourages visual consistency and design consensus across products.
- Creates easier syncing with brand guidelines.
- Encourages better support for multi-platform projects.
- Promotes clear communication with developers and other designers.
Developer Perks
- Maintains sync with current style updates while minimizing impact to code.
- Enables Android and iOS projects to access style variables from Spark.
- Supports future-friendly development. Design Tokens can generate style files for any possible platform in the future.
How to Use Our Design Tokens
For Designers
Use token names to communicate the specific style values of your design.
Token names depict style choices that portray color, spacing, typography, and more.
For example, the token sprk-purple-deep represents a specific shade of purple. Style consensus makes it clear to everyone which purple you mean.
For Developers
For HTML, React, and Angular projects, follow our install guides. They show you how to import the correct Sass file.
How to Change Spark's Default Style Settings in Web (Sass):
- Create a new Sass file.
- Import it before Spark's main sass file.
- Assign a new value to the variable you want to override.
These make global changes to your project. Changing a variable affects all instances of its relevant components. For one-off modifications, use CSS utilities.
For iOS and Android projects, please email the Spark team and we'll get you started.
Design Token List
| Token Name | Default Value | Description |
|---|---|---|
| sprk-purple-navy | rgb(28, 1, 82) | Color value for Purple Navy. |
| sprk-lavender | rgb(190, 132, 247) | Color value for Lavender. |
| sprk-wisteria | rgb(222, 177, 253) | Color value for Wisteria. |
| sprk-magnolia | rgb(240, 218, 255) | Color value for Magnolia. |
| sprk-white | rgb(255, 255, 255) | White for floods of color and accents, like backgrounds and cards. |
| sprk-black | rgb(28, 27, 26) | Black for main text color, specifically in headline and body copy. |
| sprk-black-tint-10 | rgb(232, 232, 232) | Black at 10%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-15 | rgb(221, 221, 221) | Black at 15%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-20 | rgb(210, 209, 209) | Black at 20%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-30 | rgb(186, 186, 186) | Black at 30%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-40 | rgb(164, 164, 163) | Black at 40%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-50 | rgb(141, 141, 140) | Black at 50%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-60 | rgb(119, 118, 118) | Black at 60%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-70 | rgb(96, 95, 94) | Black at 70%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-80 | rgb(73, 73, 72) | Black at 80%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-black-tint-90 | rgb(50, 49, 48) | Black at 90%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-gray | rgb(247, 247, 247) | Lightest gray. Use in combination with content hierarchy, font-weight and background color to create AA accessible text. |
| sprk-red | rgb(200, 16, 46) | Red for key branded moments throughout the product as our primary brand color. |
| sprk-deep-red | rgb(118, 35, 47) | Darkest red for key branded moments throughout the product. |
| sprk-mid-red | rgb(157, 34, 53) | Mid red for key branded moments throughout the product. |
| sprk-purple | rgb(96, 58, 161) | Main purple for secondary actions and brand elements. |
| sprk-purple-dark | rgb(60, 49, 116) | Dark purple for interactive elements. Can also be used for limited floods of color. |
| sprk-purple-deep | rgb(46, 17, 102) | Deep purple for interactive elements. Can also be used for limited floods of color. |
| sprk-purple-light | rgb(146, 101, 211) | Light purple for interactive elements. |
| sprk-purple-lightest | rgb(231, 226, 242) | Lightest purple for interactive elements. Can also be used for limited floods of color. |
| sprk-green | rgb(41, 133, 64) | Use to communicate a positive status or message. |
| sprk-blue | rgb(28, 110, 242) | Use to communicate an informative status or message. |
| sprk-orange | rgb(212, 117, 0) | Use to communicate error, warning, urgency or attention needed. |
| sprk-pink | rgb(229, 1, 88) | Deprecated. Use orange instead to communicate an error status or message. |
| sprk-yellow | rgb(237, 163, 2) | Deprecated. Use orange instead to communicate an urgent status or message. Be sure to follow accessibility guidelines when using this color. |
| 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-dot-border | $sprk-stepper-icon-border-width solid $sprk-stepper-dark-icon-border-color | The border value for the Carousel component. |
| sprk-carousel-dot-border-dark-bg | $sprk-stepper-icon-border-width solid $sprk-purple-deep | The border value for the Carousel component on dark background. |
| 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-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 | 9999 | The extra large z-index value setting. |
| 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-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-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 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 large space setting. |
| sprk-space-stack-xs | 0 0 4px 0 | Value for the extra small inset short space. |
| sprk-space-stack-s | 0 0 8px 0 | Value for the small inset short space. |
| sprk-space-stack-m | 0 0 16px 0 | Value for the medium inset short space. |
| sprk-space-stack-l | 0 0 32px 0 | Value for the large inset short space. |
| sprk-space-stack-xl | 0 0 64px 0 | Value for the extra large inset short space. |
| sprk-typography-breakpoint | 54rem | The breakpoint used for typography. |
| sprk-measure | 40rem | The max-width value for the .sprk-u-Measure class. |
| sprk-narrow-measure | 25rem | The max-width value for the narrow measure. |
| 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-using-webfonts | false | Boolean value for if the app is using webfonts. |
| 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 on the page title mark. |
| 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-font-family-display-one | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayOne. |
| sprk-font-family-display-two | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayTwo. |
| sprk-font-family-display-three | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayThree. |
| sprk-font-family-display-four | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayFour. |
| sprk-font-family-display-five | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplayFive. |
| sprk-font-family-display-six | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplaySix. |
| sprk-font-family-display-seven | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeDisplaySeven. |
| sprk-font-family-body-one | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyOne. |
| sprk-font-family-body-two | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyTwo. |
| sprk-font-family-body-three | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyThree. |
| sprk-font-family-body-four | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font-family, including fallbacks of TypeBodyFour. |
| sprk-font-size-display-one | 2.5rem | 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 TypeDisplayOne when the viewport is wider than $sprk-font-size-display-one-breakpoint. |
| 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 TypeDisplayTwo when the viewport is wider than $sprk-font-size-display-two-breakpoint. |
| 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-font-size-display-four | 1.5rem | The size of TypeDisplayFour when the viewport is narrower than $sprk-font-size-display-four-breakpoint. |
| sprk-font-size-display-four-wide | 1.625rem | The size of TypeDisplayFour when the viewport is wider than $sprk-font-size-display-four-breakpoint. |
| sprk-font-size-display-five | 1.25rem | The size of TypeDisplayFive when the viewport is narrower than $sprk-font-size-display-five-breakpoint. |
| sprk-font-size-display-five-wide | 1.25rem | The size of TypeDisplayFive when the viewport is wider than $sprk-font-size-display-five-breakpoint. |
| sprk-font-size-display-six | 1.25rem | The size of TypeDisplaySix when the viewport is narrower than $sprk-font-size-display-six-breakpoint. |
| sprk-font-size-display-six-wide | 1.25rem | The size of TypeDisplaySix when the viewport is wider than $sprk-font-size-display-six-breakpoint. |
| sprk-font-size-display-seven | 1rem | The size of TypeDisplaySeven when the viewport is narrower than $sprk-font-size-display-seven-breakpoint. |
| sprk-font-size-display-seven-wide | 1rem | The size of TypeDisplaySeven when the viewport is wider than $sprk-font-size-display-seven-breakpoint. |
| sprk-font-size-body-one | 1rem | The size of TypeBodyOne when the viewport is narrower than $sprk-font-size-body-one-breakpoint. |
| sprk-font-size-body-one-wide | 1rem | The size of TypeBodyOne when the viewport is wider than $sprk-font-size-body-one-breakpoint. |
| sprk-font-size-body-two | 1rem | The size of TypeBodyTwo when the viewport is narrower than $sprk-font-size-body-two-breakpoint. |
| sprk-font-size-body-two-wide | 1rem | The size of TypeBodyTwo when the viewport is wider than $sprk-font-size-body-two-breakpoint. |
| sprk-font-size-body-three | 0.875rem | The font size of TypeBodyThree when the viewport is narrower than $sprk-font-size-body-three-breakpoint. |
| sprk-font-size-body-three-wide | 0.875rem | The size of TypeBodyThree when the viewport is wider than $sprk-font-size-body-three-breakpoint. |
| sprk-font-size-body-four | 0.813rem | The font size of TypeBodyFour when the viewport is narrower than $sprk-font-size-body-four-breakpoint. |
| sprk-font-size-body-four-wide | 0.813rem | The size of TypeBodyFour when the viewport is wider than $sprk-font-size-body-four-breakpoint. |
| sprk-font-weight-display-one | 700 | The weight of the TypeDisplayOne font. |
| sprk-font-weight-display-two | 700 | The weight of the TypeDisplayTwo font. |
| sprk-font-weight-display-three | 300 | The weight of the TypeDisplayThree font. |
| sprk-font-weight-display-four | 700 | The weight of the TypeDisplayFour font. |
| sprk-font-weight-display-five | 500 | The weight of the TypeDisplayFive font. |
| sprk-font-weight-display-six | 300 | The weight of the TypeDisplaySix font. |
| sprk-font-weight-display-seven | 700 | The weight of the TypeDisplaySeven font. |
| sprk-font-weight-body-one | 500 | The weight of the TypeBodyOne font. |
| sprk-font-weight-body-two | 300 | The weight of the TypeBodyTwo font. |
| sprk-font-weight-body-three | 300 | The weight of the TypeBodyThree font. |
| sprk-font-weight-body-four | 300 | The weight of the TypeBodyFour font. |
| sprk-font-display | swap | The supplied value will be set on all generated Font-face calls, as font-display. The default is 'swap.' |
| sprk-color-display-one | $sprk-black | The color of TypeDisplayOne. |
| sprk-color-display-two | $sprk-black | The color of TypeDisplayTwo. |
| sprk-color-display-three | $sprk-black | The color of TypeDisplayThree. |
| sprk-color-display-four | $sprk-black | The color of TypeDisplayFour. |
| sprk-color-display-five | $sprk-black | The color of TypeDisplayFive. |
| sprk-color-display-six | $sprk-black | The color of TypeDisplaySix. |
| sprk-color-display-seven | $sprk-black | The color of TypeDisplaySeven. |
| sprk-color-body-one | $sprk-black | The color of TypeBodyOne. |
| sprk-color-body-two | $sprk-black | The color of TypeBodyTwo. |
| sprk-color-body-three | $sprk-black | The color of TypeBodyThree. |
| sprk-color-body-four | $sprk-black | The color of TypeBodyFour. |
| sprk-line-height-display-one | 2.75rem | 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 | 3.75rem | The line-height of the TypeDisplayOne font when the viewport is wider than $sprk-font-size-display-one-breakpoint. |
| sprk-line-height-display-two | 2.25rem | The line-height of the TypeDisplayTwo font when the viewport is narrower than $sprk-font-size-display-two-breakpoint. |
| sprk-line-height-display-two-wide | 3rem | The line-height of the TypeDisplayTwo font when the viewport is wider than $sprk-font-size-display-two-breakpoint. |
| sprk-line-height-display-three | 2.25rem | The line-height of the TypeDisplayThree font when the viewport is narrower than $sprk-font-size-display-three-breakpoint. |
| sprk-line-height-display-three-wide | 2.75rem | The line-height of the TypeDisplayThree font when the viewport is wider than $sprk-font-size-display-three-breakpoint. |
| sprk-line-height-display-four | 2rem | The line-height of the TypeDisplayFour font when the viewport is narrower than $sprk-font-size-display-four-breakpoint. |
| sprk-line-height-display-four-wide | 2rem | The line-height of the TypeDisplayFour font when the viewport is wider than $sprk-font-size-display-four-breakpoint. |
| sprk-line-height-display-five | 1.625rem | The line-height of the TypeDisplayFive font when the viewport is narrower than $sprk-font-size-display-five-breakpoint. |
| sprk-line-height-display-five-wide | 1.625rem | The line-height of the TypeDisplayFive font when the viewport is wider than $sprk-font-size-display-five-breakpoint. |
| sprk-line-height-display-six | 1.5rem | The line-height of the TypeDisplaySix font when the viewport is narrower than $sprk-font-size-display-six-breakpoint. |
| sprk-line-height-display-six-wide | 1.5rem | The line-height of the TypeDisplaySix font when the viewport is wider than $sprk-font-size-display-six-breakpoint. |
| sprk-line-height-display-seven | 1.375rem | The line-height of the TypeDisplaySeven font when the viewport is narrower than $sprk-font-size-display-seven-breakpoint. |
| sprk-line-height-display-seven-wide | 1.25rem | The line-height of the TypeDisplaySeven font when the viewport is wider than $sprk-font-size-display-seven-breakpoint. |
| sprk-line-height-body-one | 1.5rem | The line-height of the TypeBodyOne font when the viewport is narrower than $sprk-font-size-body-one-breakpoint. |
| sprk-line-height-body-one-wide | 1.5rem | The line-height of the TypeBodyOne font when the viewport is wider than $sprk-font-size-body-one-breakpoint. |
| sprk-line-height-body-two | 1.5rem | The line-height of the TypeBodyTwo font when the viewport is narrower than $sprk-font-size-body-two-breakpoint. |
| sprk-line-height-body-two-wide | 1.5rem | The line-height of the TypeBodyTwo font when the viewport is wider than $sprk-font-size-body-two-breakpoint. |
| sprk-line-height-body-three | 1.25rem | The line-height of the TypeBodyThree font when the viewport is narrower than $sprk-font-size-body-three-breakpoint. |
| sprk-line-height-body-three-wide | 1.25rem | The line-height of the TypeBodyThree font when the viewport is wider than $sprk-font-size-body-three-breakpoint. |
| sprk-line-height-body-four | 1.25rem | The line-height of the TypeBodyFour font when the viewport is narrower than $sprk-font-size-body-four-breakpoint. |
| sprk-line-height-body-four-wide | 1.25rem | The line-height of the TypeBodyFour font when the viewport is wider than $sprk-font-size-body-four-breakpoint. |
| 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-type-right | right | The text align right value. |
| sprk-type-crop-none-content | none | The content value for the crop none helper class. |
| sprk-type-crop-none-margin-bottom | 0 | The margin bottom value for the crop none helper class. |
| sprk-type-crop-none-margin-top | 0 | The margin top value for the crop none helper class. |
| sprk-type-left | left | The text align left value. |
| sprk-type-center | center | The text align center value. |
| 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-type-display-two-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-two to $sprk-font-size-display-two-wide. |
| 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-type-display-four-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-four to $sprk-font-size-display-four-wide. |
| sprk-type-display-five-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-five to $sprk-font-size-display-five-wide. |
| sprk-type-display-six-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-six to $sprk-font-size-display-six-wide. |
| sprk-type-display-seven-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-display-seven to $sprk-font-size-display-seven-wide. |
| sprk-type-body-one-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-body-one to $sprk-font-size-body-one-wide. |
| sprk-type-body-two-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-body-two to $sprk-font-size-body-two-wide. |
| sprk-type-body-three-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-body-three to $sprk-font-size-body-three-wide. |
| sprk-type-body-four-breakpoint | 43.75rem | The width of the viewport at which to switch the font size from $sprk-font-size-body-four to $sprk-font-size-body-four-wide. |
| sprk-accordion-max-width | 53.125rem | The maximum width of Accordions. |
| sprk-accordion-border | 2px solid rgb(230, 230, 230) | The border of Accordions. |
| sprk-accordion-border-top-none | none | The value of the top border of the Accordion when there is no top border. |
| sprk-accordion-icon-leading-margin | 0 $sprk-space-s 0 0 | The margin of leading icon in Accordions. |
| sprk-accordion-summary-text-decoration | none | The text decoration of the Accordion item summary. |
| sprk-accordion-summary-text-align | left | The text-align value of the Accordion item summary. |
| sprk-accordion-summary-active-text-decoration | none | The text decoration of the Accordion item summary when active. |
| 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-border | none | The border of the Accordion item summary. |
| sprk-accordion-summary-active-color | $sprk-purple | The color of the icon in the summary when the Accordion item is open or hovered. |
| sprk-accordion-summary-hover-icon-fill | $sprk-accordion-summary-active-color | The fill color of the icon when the Accordion item is 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-alert-border-radius | 4px | Value for border-radius on the Alert component. |
| sprk-alert-display-hidden | none | Value for display for the hidden Alert component. |
| sprk-alert-border-color | $sprk-gray | Value for border color on the Alert component. |
| sprk-alert-border-width | 2px | Value for border size on the Alert component. |
| sprk-alert-border-style | solid | Value for border style on the Alert component. |
| sprk-alert-border | $sprk-alert-border-width $sprk-alert-border-style $sprk-alert-border-color | Value for border on the Alert component. |
| sprk-alert-shadow-color | rgba(0, 0, 0, 0.08) | Value for shadow color on the Alert component. |
| sprk-alert-shadow | 0 3px 10px 1px $sprk-alert-shadow-color | Value for shadow on the Alert component. |
| sprk-alert-color | $sprk-black | Value for color of 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 $sprk-space-misc-a $sprk-space-m $sprk-space-m | The padding around the dismiss icon in the Alert component. |
| sprk-alert-dismiss-icon-color | $sprk-black | The color of the dismiss icon in the Alert component. |
| sprk-alert-dismiss-icon-size | $sprk-space-m | The size of the dismiss icon in the Alert component. |
| sprk-alert-icon-margin-top | 0 | The margin top for the icon in the Alert component. |
| sprk-alert-icon-margin-bottom | 0 | The margin bottom for the icon in the Alert component. |
| sprk-alert-icon-margin-left | 0 | The margin left for the icon in the Alert component. |
| sprk-alert-icon-margin | $sprk-alert-icon-margin-top $sprk-space-misc-a $sprk-alert-icon-margin-bottom $sprk-alert-icon-margin-left | The margin for the icon in the Alert component. |
| sprk-alert-icon-size | 32px | Sets the height and width of the two icons used in the Alert component. |
| sprk-alert-icon-color-info | $sprk-blue | The icon color of the Information Alert component. |
| sprk-alert-icon-color-success | $sprk-green | The icon color of the Success Alert component. |
| sprk-alert-icon-color-fail | $sprk-orange | The icon color of the Fail Alert component. |
| sprk-alert-border-info | 2px solid $sprk-blue | The border value of the Information Alert component. |
| sprk-alert-border-success | 2px solid $sprk-green | The border value of the Success Alert component. |
| sprk-alert-border-fail | 2px solid $sprk-orange | The border value of the Fail Alert component. |
| sprk-alert-bg-color | $sprk-white | The background color of the default Alert component. |
| sprk-alert-bg-color-fail | $sprk-alert-bg-color | The background color of the Fail Alert component. |
| sprk-alert-bg-color-success | $sprk-alert-bg-color | The background color of the Success Alert component. |
| sprk-alert-bg-color-info | $sprk-alert-bg-color | The background color of the Information Alert component. |
| sprk-alert-text-color-fail | $sprk-black | The value for the color property in the Fail Alert component. |
| sprk-alert-text-color-success | $sprk-black | The value for the color property in the Success Alert component. |
| sprk-alert-text-color-info | $sprk-black | The value for the color property in the Information Alert component. |
| sprk-autocomplete-results-list-style-type | none | The list style type of the Autocomplete results. |
| sprk-autocomplete-results-position | absolute | The position style of the Autocomplete results. |
| sprk-autocomplete-results-background-color | $sprk-white | Background color of the Autocomplete results. |
| sprk-autocomplete-results-border-width | 1px | The border size of the Autocomplete results. |
| sprk-autocomplete-results-border-style | solid | The border style of the Autocomplete results. |
| sprk-autocomplete-results-border-color | $sprk-gray | The border color of the Autocomplete results. |
| sprk-autocomplete-results-border-radius | 4px | The border radius of the Autocomplete results. |
| sprk-autocomplete-results-border | $sprk-autocomplete-results-border-width $sprk-autocomplete-results-border-style $sprk-autocomplete-results-border-color | The border of the Autocomplete results. |
| sprk-autocomplete-results-width | 100% | The width of the Autocomplete results. |
| sprk-autocomplete-results-max-width | 27.5rem | The max-width of the Autocomplete results. |
| sprk-autocomplete-results-max-height | 18rem | The max-height of the Autocomplete results. |
| sprk-autocomplete-results-overflow-y | scroll | The overflow-y behavior of the Autocomplete results. |
| sprk-autocomplete-results-shadow | 0 0 40px 2px rgba(0, 0, 0, 0.1) | The box shadow of the Autocomplete results. |
| sprk-autocomplete-results-z-index | $sprk-layer-height-xs | The z-index of the Autocomplete results. |
| sprk-autocomplete-results-huge-max-width | 37.5rem | The max-width of the huge Autocomplete results. |
| sprk-autocomplete-results-last-child-border-bottom | none | The border-bottom of the last Autocomplete result. |
| sprk-autocomplete-results-margin-top | 1px | The margin-top of the Autocomplete results. |
| sprk-autocomplete-results-hidden-display | none | The display value of the Autocomplete results. |
| sprk-autocomplete-result-font-size | $sprk-font-size-body-one | The font size of the Autocomplete results. |
| sprk-autocomplete-result-padding | $sprk-space-m | The padding around the Autocomplete results. |
| sprk-autocomplete-result-border-bottom | 1px solid $sprk-black-tint-20 | The border-bottom of the Autocomplete results. |
| sprk-autocomplete-result-hover-background-color | $sprk-black-tint-10 | The background color of the hovered Autocomplete results. |
| sprk-autocomplete-result-hover-cursor | pointer | The cursor of the hovered Autocomplete results. |
| sprk-autocomplete-result-active-background-color | $sprk-black-tint-10 | Background color of the active Autocomplete result. |
| sprk-blockquote-source-prefix | '-' | 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 the Blockquote component. |
| 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-btn-background-color | $sprk-red | The background color of the Button component. |
| sprk-btn-shadow-color | rgba(20, 20, 20, 0.08) | The box shadow color value for the Button component. |
| sprk-btn-shadow | 0 3px 10px $sprk-btn-shadow-color | 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-border | $sprk-btn-border-width $sprk-btn-border-style $sprk-btn-border-color | The border of the Button component. |
| sprk-btn-font-weight | 500 | The font weight of the Button component. |
| sprk-btn-font-size | 1rem | The font size of the Button component. |
| sprk-btn-font-family | RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif | The font family 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-visited-text-color | $sprk-white | The visited text color of the Button component. |
| sprk-btn-border-radius | 4px | The border radius of the Button component. |
| sprk-btn-hover-background-color | $sprk-mid-red | 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-padding-top | $sprk-space-m | The top padding of the Button component. |
| sprk-btn-padding-bottom | $sprk-space-m | The bottom padding of the Button component. |
| sprk-btn-padding-right | $sprk-space-misc-a | The right padding of the Button component. |
| sprk-btn-padding-left | $sprk-space-misc-a | The left 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 Disabled 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-black-tint-50 | 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-border | $sprk-btn-disabled-border-width $sprk-btn-disabled-border-style $sprk-btn-disabled-border-color | The border of the Disabled Button component. |
| sprk-btn-disabled-shadow | none | The shadow color of the Disabled Button component. |
| sprk-btn-disabled-hover-border | $sprk-btn-disabled-border-width $sprk-btn-disabled-border-style $sprk-btn-disabled-border-color | The border of the Button component when disabled on hover. |
| sprk-btn-secondary-disabled-border-width | $sprk-btn-disabled-border-width | The border width of the Secondary Button component when disabled. |
| sprk-btn-secondary-disabled-border-style | $sprk-btn-disabled-border-style | The border style of the Secondary Button component when disabled. |
| sprk-btn-secondary-disabled-background-color | $sprk-gray | The background color of the Disabled Button component. |
| sprk-btn-secondary-disabled-text-color | $sprk-black-tint-50 | The text color of the Secondary Button component when disabled. |
| sprk-btn-secondary-disabled-border-color | $sprk-btn-secondary-disabled-text-color | 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-secondary-disabled-hover-border | $sprk-btn-secondary-disabled-border-width $sprk-btn-secondary-disabled-border-style $sprk-btn-secondary-disabled-border-color | The border of the Secondary Button component when disabled on hover. |
| sprk-btn-secondary-background-color | $sprk-white | The background color of the Secondary Button component. |
| sprk-btn-secondary-border-color | $sprk-purple-dark | The border color of the Secondary Button component. |
| sprk-btn-secondary-border | $sprk-btn-border-width $sprk-btn-border-style $sprk-purple-dark | The border of the Secondary Button component. |
| sprk-btn-secondary-text-color | $sprk-purple-dark | The text color of the Secondary Button component. |
| sprk-btn-secondary-visited-text-color | $sprk-purple-dark | The text color of the Secondary Button component when visited. |
| sprk-btn-secondary-hover-text-color | $sprk-purple | The hover text color of the Secondary Button component. |
| sprk-btn-secondary-hover-background-color | $sprk-purple-lightest | The background color of the Secondary Button component on hover. |
| sprk-btn-secondary-hover-border-color | $sprk-purple | The border color of the Secondary Button component on hover. |
| sprk-btn-secondary-hover-shadow | $sprk-btn-shadow | The box shadow of the Secondary Button component on hover. |
| sprk-btn-secondary-hover-border | $sprk-btn-border-width $sprk-btn-border-style $sprk-btn-secondary-hover-border-color | The border of the Secondary Button component on hover. |
| sprk-btn-secondary-letter-spacing | $sprk-btn-letter-spacing | The letter spacing of the Secondary Button component. |
| sprk-btn-tertiary-disabled-background-color | $sprk-black-tint-10 | The background color of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-border-width | $sprk-btn-disabled-border-width | The border width of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-border-style | $sprk-btn-disabled-border-style | The border style of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-border-color | $sprk-btn-tertiary-disabled-background-color | The border color of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-shadow | none | The box shadow of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-disabled-hover-border | $sprk-btn-tertiary-disabled-border-width $sprk-btn-tertiary-disabled-border-style $sprk-btn-tertiary-disabled-border-color | The border of the Tertiary Button component when disabled on hover. |
| sprk-btn-tertiary-disabled-text-color | $sprk-black-tint-50 | The text color of the Tertiary Button component when disabled. |
| sprk-btn-tertiary-background-color | $sprk-white | The background color of the Tertiary Button component. |
| sprk-btn-tertiary-border-color | $sprk-btn-tertiary-background-color | The border color of the Tertiary Button component. |
| sprk-btn-tertiary-border | $sprk-btn-border-width $sprk-btn-border-style $sprk-btn-tertiary-border-color | The border of the Tertiary Button component. |
| sprk-btn-tertiary-text-color | $sprk-purple-dark | The text color of the Tertiary Button component. |
| sprk-btn-tertiary-visited-text-color | $sprk-purple-dark | The text color of the Tertiary Button component when visited. |
| sprk-btn-tertiary-hover-text-color | $sprk-purple | The text color of the Tertiary Button component on hover. |
| sprk-btn-tertiary-hover-background-color | $sprk-purple-lightest | The background color of the Tertiary Button component on hover. |
| sprk-btn-tertiary-hover-border-color | $sprk-btn-tertiary-hover-background-color | The border 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-hover-border | $sprk-btn-tertiary-disabled-border-width $sprk-btn-tertiary-disabled-border-style $sprk-btn-tertiary-disabled-border-color | The border of the Tertiary Button component when disabled on hover. |
| sprk-btn-tertiary-letter-spacing | $sprk-btn-letter-spacing | The letter spacing of the Tertiary Button 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-color-wide-viewport | rgba(0, 0, 0, 0.08) | The box shadow color of the Card on wide viewports. |
| sprk-card-shadow-wide-viewport | 0 3px 18px $sprk-card-shadow-color-wide-viewport | The box shadow of the Card on wide viewports. |
| sprk-card-shadow-color-standout | rgba(0, 0, 0, 0.1) | The box shadow color of the Standout Card variant on narrow viewports. |
| sprk-card-shadow-color-standout-wide-viewport | rgba(0, 0, 0, 0.1) | The box shadow color of the Standout Card variant on wide viewports. |
| sprk-card-shadow-standout | 0 4px 20px 2px $sprk-card-shadow-color-standout | The box shadow of the Standout Card variant on narrow viewports. |
| sprk-card-shadow-standout-wide-viewport | 0 4px 40px 2px $sprk-card-shadow-color-standout-wide-viewport | 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-purple | The background color of the header area for the Highlighted Header Card. |
| sprk-card-highlighted-heading-color | $sprk-white | The color of the highlighted heading for the Highlighted Header Card. |
| sprk-card-header-text-color | $sprk-white | The text color for the Highlighted Header Card. |
| sprk-carousel-dot-spacing | $sprk-space-m | The spacing between the dots in the Carousel component. |
| sprk-carousel-dot-width | 10px | The width of the dots in the Carousel component. |
| sprk-carousel-dot-height | 10px | The height of the dots in the Carousel component. |
| sprk-carousel-dot-selected-bg-color | $sprk-white | The background color of the active dot in the Carousel component. |
| sprk-carousel-dot-selected-bg-color-dark-bg | $sprk-purple | The background color of the active dot in the Carousel component on a dark background. |
| sprk-carousel-dot-container-padding | $sprk-space-xs | The padding value for the dots container in the Carousel component. |
| sprk-carousel-wide-dot-width | 10px | The spacing between the dots in the Carousel component. |
| sprk-carousel-wide-dot-height | 10px | The spacing between the dots in the Carousel component. |
| sprk-carousel-wide-dot-spacing | $sprk-carousel-dot-spacing | The wide viewport spacing between the dots in the Carousel component. |
| sprk-carousel-arrow-padding | $sprk-space-m | The padding value of 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-spacing | $sprk-space-m | The spacing for the arrows in the Carousel component. |
| sprk-carousel-arrow-color | $sprk-white | The color of the arrows in the Carousel component. |
| sprk-carousel-arrow-position-breakpoint | 31.25rem | The breakpoint for the arrows in the Carousel component. |
| sprk-carousel-breakpoint | $sprk-split-breakpoint-xl | The breakpoint for the Carousel component. |
| sprk-carousel-narrow-image-max-width | 18.75rem | The maximum width of the image in the Carousel component. |
| sprk-centered-column-width | 1232px | Width value for the Centered Column layout container. |
| 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-divider-color | rgb(230, 230, 230) | The value for color of Dividers. |
| sprk-divider-border-width | 2px | The size value of border for Dividers. |
| sprk-divider-border-style | solid | The style value of border for Dividers. |
| sprk-divider-border | $sprk-divider-border-width $sprk-divider-border-style $sprk-divider-color | The value of border for Dividers. |
| sprk-dropdown-display-hidden | none | The display value of Dropdown when hidden. |
| 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-purple | The left border of the Dropdown item that is active. |
| sprk-dropdown-active-box-shadow | -1px 0 0 0 $sprk-purple | The box-shadow of the Dropdown item that is active. |
| sprk-dropdown-border-width | 1px | The border size of the Dropdown. |
| sprk-dropdown-border-style | solid | The border style of the Dropdown. |
| sprk-dropdown-border-color | $sprk-gray | The border color of the Dropdown. |
| sprk-dropdown-border | $sprk-dropdown-border-width $sprk-dropdown-border-style $sprk-dropdown-border-color | The border of the Dropdown. |
| sprk-dropdown-padding | $sprk-space-misc-a | The padding around the Dropdown items. |
| sprk-dropdown-footer-padding | $sprk-space-inset-short-l | The padding around the Informational Dropdown footer. |
| sprk-dropdown-max-width | 24rem | The max-width of the Dropdown. |
| sprk-dropdown-link-color | $sprk-black | The color of the Dropdown links. |
| sprk-dropdown-line-height | 1 | The line height of the Dropdown. |
| sprk-dropdown-shadow | 0 0 40px 2px rgba(0, 0, 0, 0.1) | The box shadow 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-trigger-icon-margin | 0 0 0 $sprk-space-s | The default margin on the icon inside the Dropdown trigger. |
| sprk-dropdown-trigger-informational-margin | 0 $sprk-space-s 0 0 | The default margin on the informational trigger for the Dropdown. |
| sprk-dropdown-trigger-color | $sprk-black | The color of the Dropdown trigger. |
| sprk-dropdown-trigger-color-active | $sprk-purple | The color of the Dropdown trigger on hover, active, focus. |
| sprk-dropdown-trigger-color-visited | $sprk-black | The color of the Dropdown trigger for the visited state. |
| 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-dropdown-title-color | $sprk-black-tint-30 | The color of the Dropdown title. |
| 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-footer-background-color | $sprk-black | Background color of the Footer. |
| sprk-footer-text-color | $sprk-white | Text color on the Footer. |
| sprk-footer-awards-media-margin | 0 0 $sprk-space-m 0 | Margin setting for the awards media section in the Footer. |
| sprk-footer-global-links-padding | $sprk-space-m $sprk-space-h $sprk-space-m $sprk-space-m | Padding setting for the global links section in the Footer. |
| sprk-footer-local-links-padding | $sprk-space-m $sprk-space-misc-a $sprk-space-m $sprk-space-m | Padding setting for the local links section in the Footer. |
| sprk-footer-awards-padding | $sprk-space-misc-b $sprk-space-m $sprk-space-m $sprk-space-m | Padding setting for the awards section in the Footer. |
| sprk-footer-divider-margin | 0 $sprk-space-m 0 $sprk-space-m | Margin value for the Divider in the Footer. |
| sprk-footer-link-color | $sprk-white | Link color on the Footer. |
| sprk-footer-link-font-weight | 300 | Link font-weight on the Footer. |
| sprk-footer-icon-color | $sprk-white | Icon color on the Footer. |
| sprk-footer-trigger-color | $sprk-white | Toggle trigger color on the Footer. |
| sprk-footer-trigger-font-weight | normal | Toggle trigger font-weight on the Footer. |
| sprk-footer-trigger-hover-color | $sprk-white | Toggle trigger hover color on the Footer. |
| sprk-footer-trigger-hover-font-weight | normal | Toggle trigger hover font-weight on the Footer. |
| sprk-footer-trigger-hover-text-decoration | underline | Toggle trigger hover text decoration on the Footer. |
| sprk-footer-toggle-transition | 0.3s | Toggle transition timing on the Footer. |
| 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-horizontal-list-spacing | $sprk-space-m | The default spacing value for Horizontal List components. |
| sprk-horizontal-list-spacing-tiny | $sprk-space-xs | The default spacing value for the tiny Horizontal List components. |
| sprk-horizontal-list-spacing-small | $sprk-space-s | The default spacing value for the small Horizontal List components. |
| sprk-horizontal-list-spacing-medium | $sprk-space-m | The default spacing value for the medium Horizontal List components. |
| sprk-horizontal-list-spacing-large | $sprk-space-l | The default spacing value for the large Horizontal List components. |
| sprk-horizontal-list-spacing-huge | $sprk-space-xl | The default spacing value for the huge Horizontal List components. |
| sprk-horizontal-list-delimiter | ',' | The delimiter between delimited items in Horizontal List components. |
| sprk-icon-m | 16px | Value for height and width of the Icon component. |
| sprk-icon-l | 24px | Value for height and width of the large Icon component. |
| sprk-icon-xl | 32px | Value for height and width of the extra-large Icon component. |
| sprk-icon-fill-color | $sprk-black | 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-stroke-width | 1.25 | Value for the stroke-width property of the Icon component. |
| sprk-icon-l-stroke | none | Value for the stroke property of the large Icon component. |
| sprk-icon-custom-stroke-width-l | 0 | Value for the stroke-width property of the large Icon component. |
| sprk-icon-xl-stroke | none | Value for the stroke property of the extra large Icon component. |
| sprk-icon-custom-stroke-width-xl | 0 | Value for the stroke-width property of the extra large 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-text-input-huge-height | 64px | Todo deprecate, The height value for Huge Inputs. |
| sprk-input-huge-height | $sprk-text-input-huge-height | The height value for Huge Inputs. |
| sprk-text-input-has-text-icon-padding | 0 0 1px 37px | The font size of text icons inside Inputs. |
| sprk-text-input-has-icon-padding | 12px 0 12px 40px | The padding inside Inputs that contain 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-error-color | $sprk-orange | Color setting for Inputs with errors. |
| 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 | 1px solid $sprk-black-tint-80 | The border setting for Inputs. |
| sprk-text-input-border-radius | 4px | The border radius setting for Inputs. |
| sprk-text-input-box-shadow | none | The box shadow setting for Inputs. |
| sprk-text-input-padding | 0 $sprk-space-m | The padding setting for Inputs. |
| sprk-text-input-focus-border-color | $sprk-purple | The border color on Inputs when focused. |
| sprk-text-input-focus-box-shadow | 0 0 0 1px $sprk-purple, 0 2px 8px $sprk-black-tint-30 | The box shadow setting for Inputs on focus. |
| sprk-text-input-error-focus-box-shadow | 0 0 0 1px $sprk-orange, 0 2px 8px $sprk-black-tint-30 | The box shadow setting for Inputs on focus when there is an error. |
| sprk-text-input-error-border-color | $sprk-orange | The border color on Inputs when there is an error. |
| sprk-text-input-disabled-border-color | $sprk-black-tint-15 | The border color on disabled Inputs. |
| sprk-text-input-disabled-color | $sprk-black-tint-50 | The color on disabled Inputs. |
| sprk-text-input-disabled-cursor | not-allowed | The cursor style of disabled inputs on hover. |
| sprk-text-input-readonly-border-color | $sprk-black-tint-50 | The border color on readonly Inputs. |
| sprk-text-input-readonly-color | $sprk-black-tint-50 | The color on readonly Inputs. |
| sprk-text-input-disabled-background-color | $sprk-black-tint-15 | The background color on disabled Inputs. |
| sprk-text-input-disabled-box-shadow | none | The box shadow on disabled Inputs. |
| sprk-text-input-transition | all 0.15s ease | The transition setting on Inputs. |
| sprk-text-input-width | 100% | The width setting on Inputs. |
| sprk-text-input-huge-focus-border-width | 2px | Todo deprecate, The border width for Huge Inputs on focus. |
| sprk-text-input-huge-focus-label-color | $sprk-purple | Todo deprecate, The label color value of Huge Inputs on focus. |
| sprk-text-input-huge-has-text-icon-padding | 0 40px | The padding value for Huge Inputs with icons. |
| sprk-text-input-huge-error-focus-label-color | $sprk-black | Todo deprecate, The label color value of Huge Inputs when they have an error. |
| sprk-text-input-huge-complete-label-color | $sprk-black | Todo deprecate, The label color when the Huge Input has a value and is not focused. |
| sprk-text-input-huge-font-size | $sprk-font-size-display-five | Todo deprecate, The font size for Huge Inputs. |
| sprk-text-input-huge-label-font-size | $sprk-font-size-body-four | Todo deprecate, The label font size for Huge Inputs. |
| sprk-text-input-huge-active-label-top | 10px | Todo deprecate, 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-text-input-huge-border-width | 2px | Todo deprecate, The border width for Huge Inputs. |
| sprk-text-input-huge-padding | 0 $sprk-space-misc-a | Todo deprecate, The padding for Huge Inputs. |
| sprk-text-input-huge-transition | top 0.3s, color 0.3s, font-size 0.3s | Todo deprecate, The transition value for Huge Inputs. |
| sprk-text-input-huge-transition-delay | 0s | Todo deprecate, The transition delay value for Huge Inputs. |
| sprk-text-input-huge-placeholder-transition-delay | 100ms | Todo deprecate, The transition delay placeholder value for Huge Inputs. |
| sprk-text-input-huge-placeholder-transition-property | opacity | Todo deprecate, The transition property placeholder value for Huge Inputs. |
| sprk-text-input-huge-placeholder-opacity | 0 | Todo deprecate, The placeholder opacity value for Huge Inputs. |
| sprk-text-input-huge-active-placeholder-opacity | 1 | Todo deprecate, The placeholder opacity value for Huge Inputs. |
| sprk-text-input-huge-label-top | $sprk-input-huge-height / 3 | Todo deprecate, The top value for Huge Input labels. This adjusts how far the label is from the top of the container. |
| sprk-text-input-huge-active-padding-top | $sprk-input-huge-height / 4 | Todo deprecate, The padding top value of active Huge Inputs. |
| sprk-input-container-margin | 0 0 $sprk-space-l 0 | The value for padding applied to fieldset elements. |
| sprk-input-container-narrow-max-width | 6.5rem | The value used for the maximum width of an icon container using the icon container narrow modifier. |
| sprk-input-container-huge-max-width | 37.5rem | The max-width setting for Huge Inputs. |
| 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-huge-error-border-color | $sprk-orange | The border color on huge Inputs when there is an error. |
| sprk-input-huge-error-focus-box-shadow | $sprk-text-input-error-focus-box-shadow | The box shadow on huge Inputs when it is focused and there is an error. |
| sprk-input-huge-border-color | $sprk-black-tint-80 | The border color on Huge Inputs. |
| 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-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-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-active-label-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-border-width | 1px | The border width for Huge Inputs. |
| sprk-input-huge-padding | $sprk-text-input-huge-padding | The padding for Huge Inputs. |
| sprk-input-huge-label-padding | 0 ($sprk-space-misc-a + $sprk-input-huge-border-width) | The label padding for Huge Inputs. |
| sprk-input-huge-focus-border-color | $sprk-text-input-focus-border-color | The label color value of Huge Inputs on focus. |
| 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-focus-box-shadow | $sprk-text-input-focus-box-shadow | The box shadow value on 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 delay placeholder value for Huge Inputs. |
| sprk-input-huge-placeholder-transition-property | $sprk-text-input-huge-placeholder-transition-property | The transition property placeholder value for Huge Inputs. |
| sprk-input-huge-placeholder-opacity | $sprk-text-input-huge-placeholder-opacity | The placeholder opacity value for Huge Inputs. |
| sprk-input-huge-placeholder-active-opacity | $sprk-text-input-huge-active-placeholder-opacity | The placeholder opacity value for Huge Inputs. |
| sprk-input-huge-color-disabled | $sprk-text-input-disabled-color | The color on disabled Huge Inputs. |
| sprk-input-huge-cursor-disabled | $sprk-text-input-disabled-cursor | The cursor on disabled Huge Inputs. |
| sprk-input-huge-box-shadow-disabled | none | The box shadow value on disabled Huge Inputs. |
| sprk-input-huge-box-shadow | 0 2px 8px $sprk-black-tint-30 | 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-input-huge-has-icon-padding | 0 0 0 42px | The padding value for Huge Inputs that contains an icon. |
| sprk-input-error-text-color | $sprk-black | Value for color on Inputs with errors. |
| 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 used for Input error text. |
| sprk-input-error-text-font-family | $sprk-font-family-body-two | The font family 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-font-weight | 400 | The font weight used for Input error text. |
| sprk-input-has-icon-margin-right-top | 16px | The margin top of the icon displayed on the right side of Inputs. |
| sprk-input-has-icon-margin-right-left | 71px | The margin left of the icon displayed on the left side of Inputs. |
| sprk-input-has-icon-padding-right | 0 37px 1px 12px | The padding of the icon displayed inside of Inputs. |
| sprk-input-text-icon-z-index | $sprk-layer-height-xs | The z-index of text icons inside Inputs. |
| 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 XY offset of text icons inside Inputs. |
| sprk-input-text-icon-font-size | 1em | 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-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-input-icon-z-index | 0 | The z-index applied to the icon inside Inputs. |
| 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-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-select-input-huge-padding-right | 45px | The padding right for Huge Inputs. |
| sprk-select-width | 100% | The value for the width property for Selects. |
| sprk-select-appearance | none | The value for the appearance property for Selects. |
| sprk-select-background | none | The background setting for Selects. |
| sprk-select-font-family | $sprk-text-input-font-family | The font family for Selects. |
| sprk-select-font-size | $sprk-text-input-font-size | The font size for Selects. |
| sprk-select-font-weight | $sprk-text-input-font-weight | The font weight for Selects. |
| sprk-select-line-height | $sprk-text-input-line-height | The line height setting for Selects. |
| sprk-select-outline | $sprk-text-input-outline | The outline setting for Selects. |
| sprk-select-color | $sprk-text-input-color | The color setting for Selects. |
| sprk-select-border | $sprk-text-input-border | The border setting for Selects. |
| 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-padding | 12px 45px 12px 13px | The padding setting for Selects. |
| sprk-select-focus-border-color | $sprk-text-input-focus-border-color | The border color on Selects when focused. |
| sprk-select-focus-box-shadow | $sprk-text-input-focus-box-shadow | The box shadow of the outer circle in the radio input on focus. |
| sprk-select-error-border-color | $sprk-text-input-error-border-color | The border color on Selects when there is an error. |
| sprk-select-error-box-shadow | 0 0 0 1px $sprk-text-input-error-border-color | The box shadow of the outer circle in the radio input when there is an error. |
| sprk-select-disabled-border-color | $sprk-text-input-disabled-border-color | The border color on disabled Selects. |
| sprk-select-disabled-cursor | $sprk-text-input-disabled-cursor | The cursor on disabled Selects. |
| sprk-select-disabled-color | $sprk-text-input-disabled-color | The color on 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-select-disabled-background-color | $sprk-text-input-disabled-background-color | The background color on disabled 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-position | relative | The position style of the icon in Selects. |
| sprk-textarea-width | 100% | The width of Textarea. |
| 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-helper-color | $sprk-black-tint-70 | The color 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-helper-font-size | 0.8125rem | The font size 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-font-family | $sprk-text-input-font-family | The font family 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-weight | $sprk-text-input-font-weight | The font weight of the placeholder for Inputs. |
| sprk-placeholder-font-family | $sprk-text-input-font-family | The font family 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 Input inside the selection container. |
| 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-purple | Color used internally by Date Picker to highlight elements. |
| 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-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 in the Date Picker on wide viewports. |
| sprk-date-picker-header-border | 1px solid $sprk-gray | The border setting for the header in the Date Picker. |
| sprk-date-picker-header-padding | 0 0 $sprk-space-s 0 | The padding setting 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-font-size | $sprk-font-size-body-three | The font size 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-label-color | $sprk-black-tint-80 | Color setting for Input label. |
| sprk-label-padding | 0 | The padding 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.s. |
| sprk-label-font-family | $sprk-font-family-body-two | The font family 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-label-disabled-color | $sprk-black-tint-50 | The color of the disabled Input labels. |
| sprk-visibility-control-label-font-size | $sprk-label-font-size | The font size used for visibility controls. |
| sprk-visibility-control-margin | 6px 0 0 0 | The margin surrounding visibility controls (Ex. 'Show SSN'). |
| sprk-radio-input-outer-circle-hover-border | 1px solid $sprk-black | The border of the outer circle in the radio input on hover. |
| sprk-radio-input-outer-circle-hover-box-shadow | 0 0 0 1px $sprk-black | The box shadow of the outer circle in the radio input on hover. |
| sprk-radio-input-outer-circle-focus-border | 1px solid $sprk-purple | The border of the outer circle in the radio input on focus. |
| sprk-radio-input-outer-circle-focus-box-shadow | 0 0 0 1px $sprk-purple | The box shadow of the outer circle in the radio input on focus. |
| sprk-radio-input-outer-circle-border-disabled | 1px solid $sprk-black-tint-50 | The border of the outer circle in the disabled radio input. |
| sprk-radio-input-outer-circle-background-color-disabled | $sprk-text-input-disabled-background-color | The background-color of the outer circle in the disabled radio input. |
| 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-outer-circle-focus-box-shadow-disabled | $sprk-text-input-disabled-box-shadow | The box-shadow of the outer circle in the disabled radio input on focus. |
| sprk-radio-input-outer-circle-border-hover-disabled | 1px solid $sprk-black-tint-50 | The border of the outer circle in the disabled radio input on hover. |
| sprk-radio-input-outer-circle-box-shadow-hover-disabled | $sprk-text-input-disabled-box-shadow | The box-shadow of the outer circle in the disabled radio input on hover. |
| sprk-radio-input-outer-circle-border-checked | 1px solid $sprk-purple | The border of the outer circle in the radio input when checked. |
| sprk-radio-input-outer-circle-box-shadow-checked | 0 0 0 1px $sprk-purple | The box shadow of the outer circle in the radio input when checked. |
| sprk-radio-input-outer-circle-border | 1px solid $sprk-black-tint-80 | The border 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-height | 1rem | The height 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-width | 0.5rem | The width of the inner circle in the radio input. |
| sprk-radio-input-inner-circle-background-color | $sprk-purple | The background color of the inner 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-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-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-border-radius | 50% | The border radius of the circle in the radio input. |
| sprk-radio-input-cursor-hover-disabled | $sprk-text-input-disabled-cursor | The cursor style of the disabled radio on hover. |
| 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 | 1px solid $sprk-black-tint-80 | 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% | he 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-disabled-border-color | $sprk-black-tint-50 | The border color of the huge radio input label when disabled. |
| sprk-radio-input-huge-label-disabled-box-shadow | $sprk-text-input-disabled-box-shadow | The box shadow of the huge radio input label when disabled. |
| 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 | 0 0 0 1px $sprk-black ,$sprk-input-huge-box-shadow | The box shadow of the huge radio input label on hover. |
| sprk-radio-input-huge-focused-label-border | $sprk-purple | The border color of the huge radio input label when it has focus. |
| sprk-radio-input-huge-focused-label-box-shadow | 0 0 0 1px $sprk-purple | The box shadow of the huge radio input label when it is focused. |
| sprk-radio-input-huge-checked-label-border | $sprk-purple | The border color of the huge radio input label when it is selected. |
| sprk-radio-input-huge-checked-label-box-shadow | 0 0 0 1px $sprk-purple | The box shadow of the huge radio input label when it is selected. |
| sprk-radio-input-huge-checked-hover-label-border | 6px 0 0 0 | The margin surrounding visibility controls (Ex. 'Show SSN'). |
| 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-purple | 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-focused-outer-circle-box-shadow | 0 0 0 1px $sprk-purple | The box-shadow of the outer circle of the huge radio input 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-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-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-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-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-radio-input-huge-disabled-background-color | $sprk-text-input-disabled-background-color | The background color of the huge radio input when it is disabled. |
| 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-huge-container-transition | $sprk-checkbox-transition | The transition of the huge checkbox input. |
| sprk-checkbox-huge-container-border | 1px solid $sprk-black-tint-80 | 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 | 0 0 0 1px $sprk-black, $sprk-input-huge-box-shadow | The box shadow of the huge checkbox input when hovered. |
| sprk-checkbox-huge-container-disabled-border-color | $sprk-black-tint-50 | The border color of the huge checkbox input when disabled. |
| sprk-checkbox-huge-container-disabled-box-shadow | none | The box shadow 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-purple | The border color of the huge checkbox input when focused. |
| sprk-checkbox-huge-container-focus-box-shadow | 0 0 0 1px $sprk-purple, $sprk-input-huge-box-shadow | The box shadow 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-box-shadow | 0 0 0 1px $sprk-purple | The box-shadow of the huge checkbox input when checked. |
| sprk-checkbox-huge-container-checked-border-color | $sprk-purple | The border color of the huge checkbox input when checked. |
| 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-container-focus-checked-box-shadow | 0 0 0 1px $sprk-black, $sprk-input-huge-box-shadow | The box-shadow of the huge checkbox input when checked and focused. |
| sprk-checkbox-huge-container-checked-hover-border-color | $sprk-black | The border color of the huge checkbox input when checked and hovered. |
| sprk-checkbox-input-huge-max-width | 500px | The max-width of the huge checkbox input. |
| sprk-checkbox-custom-input-height | 1rem | The height of the custom checkbox input. |
| sprk-checkbox-custom-input-width | 1rem | The width of the custom checkbox input. |
| sprk-checkbox-custom-input-border | 1px solid $sprk-black-tint-80 | The border of the custom checkbox input. |
| sprk-checkbox-custom-input-border-focus | 1px solid $sprk-purple | The border of the custom checkbox input when focused. |
| sprk-checkbox-custom-input-box-shadow-focus | 0 0 0 1px $sprk-purple | The box shadow of the custom checkbox input when focused. |
| sprk-checkbox-custom-input-border-focus-checked | 1px solid $sprk-black | The border of the custom checkbox input when it is checked and focused. |
| sprk-checkbox-custom-input-box-shadow-focus-checked | 0 0 0 1px $sprk-black | The box-shadow of the custom checkbox input when it is checked and focused. |
| sprk-checkbox-custom-input-background-color-focus | $sprk-gray | The background of the custom checkbox input when focused. |
| sprk-checkbox-custom-input-background-color-hover | $sprk-gray | The background color of the custom checkbox input when hovered. |
| sprk-checkbox-custom-input-background-color-checked | $sprk-purple | The background color of the custom checkbox input when checked. |
| sprk-checkbox-custom-input-background-color-disabled | $sprk-black-tint-15 | The background color of the custom checkbox input when disabled. |
| sprk-checkbox-custom-input-border-color-checked | $sprk-purple | The border color of the custom checkbox input when checked. |
| sprk-checkbox-custom-input-border-hover | 1px solid $sprk-black | The border of the custom checkbox input when hovered. |
| sprk-checkbox-custom-input-box-shadow-hover | 0 0 0 1px $sprk-black | The box shadow of the custom checkbox input when hovered. |
| sprk-checkbox-custom-input-box-shadow-hover-disabled | $sprk-text-input-disabled-box-shadow | The box-shadow of the custom checkbox input when disabled and hovered. |
| sprk-checkbox-custom-input-border-color-disabled | $sprk-black-tint-50 | The border color of the custom checkbox input when disabled. |
| sprk-checkbox-custom-input-border-hover-disabled | 1px solid $sprk-black-tint-50 | The border of the custom checkbox input when hovered. |
| sprk-checkbox-custom-input-cursor-disabled | $sprk-text-input-disabled-cursor | The cursor for the custom checkbox input when disabled. |
| sprk-checkbox-custom-input-border-radius | 3px | The border radius of the custom checkbox input. |
| sprk-checkbox-custom-input-top | 0 | The top positioning of the custom checkbox input. |
| sprk-checkbox-custom-input-left | -22px | The left positioning of the custom checkbox input. |
| 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-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-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-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-disabled-box-shadow | none | The box-shadow of the custom checkbox element of the huge checkbox input when disabled. |
| sprk-checkbox-huge-custom-input-checkbox-element-checked-border-color | $sprk-purple | 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 huge checkmark icon. |
| sprk-checkbox-huge-checkmark-icon-width | 0.75rem | The width of the huge checkmark icon. |
| sprk-checkbox-huge-checkmark-icon-top | 22px | The top positioning of the huge checkmark icon. |
| sprk-checkbox-huge-checkmark-icon-left | 22px | The left positioning of the huge checkmark icon. |
| sprk-checkbox-checkmark-icon-height | 0.45rem | The height of the checkmark icon. |
| sprk-checkbox-checkmark-icon-width | 0.65rem | The width of the checkmark icon. |
| sprk-checkbox-checkmark-icon-top | 3px | The top positioning of the checkmark icon. |
| sprk-checkbox-checkmark-icon-left | -19px | The left positioning of the checkmark icon. |
| sprk-checkbox-checkmark-border-left | 2px solid $sprk-white | The border settings to create the bottom portion of the checkmark. |
| sprk-checkbox-checkmark-border-bottom | 2px solid $sprk-white | The border settings to create the right portion of the checkmark. |
| sprk-checkbox-checkmark-transform | rotate(-45deg) | The rotation setting to create the checkmark. |
| sprk-link-transition | 0.3s | The transition timing for hover, active and focus styles on Links. |
| sprk-link-icon-margin | 0 $sprk-space-s 0 0 | The default margin on icons inside Links. |
| sprk-link-color | $sprk-purple | The default color on Links. |
| sprk-link-underline-color | $sprk-purple | The color of the underline on Links. |
| sprk-link-underline-width | 0.125rem | The width of the underline on Links. |
| sprk-link-underline-visited-color | $sprk-purple | The color of the underline on visited Links. |
| sprk-link-text-decoration | none | The text decoration on Links. |
| sprk-link-font-weight | $sprk-font-weight-body-one | The font weight on Links. |
| sprk-link-border-bottom-style | solid | The border style of the underline on Links. |
| sprk-link-border-bottom-color | $sprk-purple | The border color of the underline on Links. |
| sprk-link-border-bottom | $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-border-bottom-color | The style of the underline on Links. |
| sprk-link-hover-color | $sprk-red | 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-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-hover-color | $sprk-black | The color of Simple Links on hover. |
| sprk-link-simple-hover-underline-color | $sprk-red | The underline color value of Simple Links on hover. |
| sprk-link-simple-hover-underline-width | 0.125rem | The underline width value of Simple Links on hover. |
| 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-simple-underline-color | transparent | The underline color value of Simple Links. |
| sprk-link-simple-underline-width | 0.125rem | The underline width value of Simple Links. |
| sprk-link-simple-font-weight | $sprk-font-weight-body-two | The font weight of Simple Links. |
| 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-light-color | $sprk-white | The color value of Light Links. |
| sprk-link-light-hover-font-weight | $sprk-font-weight-body-two | The font weight of Light Links on hover. |
| sprk-link-light-hover-color | $sprk-white | The color of Light Links on hover. |
| sprk-link-light-hover-underline-color | $sprk-white | The underline color value of Light Links on hover. |
| sprk-link-light-hover-underline-width | 0.125rem | The underline width value of Light Links on hover. |
| sprk-link-light-hover-after-left | 0% | The left position of the after element of Light Links on hover. |
| sprk-link-light-hover-after-width | 100% | The width of the after element of Light Links on hover. |
| sprk-link-light-hover-border-bottom | $sprk-link-light-hover-underline-width $sprk-link-border-bottom-style $sprk-link-light-hover-underline-color | The underline style of Light Links on hover. |
| sprk-link-light-underline-color | transparent | The underline color value of Light Links. |
| sprk-link-light-underline-width | 0.125rem | The underline width value of Light Links. |
| sprk-link-light-font-weight | $sprk-font-weight-body-two | The font weight of Light Links. |
| sprk-link-light-border-bottom | $sprk-link-light-underline-width $sprk-link-border-bottom-style $sprk-link-light-underline-color | The underline style of Light Links. |
| sprk-link-light-visited-border-bottom | $sprk-link-light-underline-width $sprk-link-border-bottom-style $sprk-link-light-underline-color | The underline style of visited Light Links. |
| sprk-link-inline-light-color | $sprk-white | The color value of inline Links on a dark background. |
| sprk-link-inline-light-hover-cursor | pointer | The cursor of inline Links on a dark background on hover. |
| sprk-link-inline-light-hover-font-weight | $sprk-font-weight-body-two | The font weight of inline Links on a dark background on hover. |
| sprk-link-inline-light-hover-color | $sprk-wisteria | The color of inline Links on a dark background on hover. |
| sprk-link-inline-light-hover-underline-color | $sprk-wisteria | The underline color value of inline Links on a dark background on hover. |
| sprk-link-inline-light-hover-underline-width | 0.125rem | The underline width value inline Links on a dark background on hover. |
| sprk-link-inline-light-hover-border-bottom | $sprk-link-inline-light-hover-underline-width $sprk-link-border-bottom-style $sprk-link-inline-light-hover-underline-color | The underline style of inline Links on a dark background on hover. |
| sprk-link-inline-light-underline-color | $sprk-white | The underline color value of inline Links on a dark background |
| sprk-link-inline-light-underline-width | 0.125rem | The underline width value inline Links on a dark background. |
| sprk-link-inline-light-font-weight | $sprk-font-weight-body-two | The font weight of inline Links on a dark background. |
| sprk-link-inline-light-border-bottom | $sprk-link-inline-light-underline-width $sprk-link-border-bottom-style $sprk-link-inline-light-underline-color | The underline style of inline Links on a dark background. |
| sprk-link-inline-light-visited-border-bottom | $sprk-link-light-underline-width $sprk-link-border-bottom-style $sprk-link-light-underline-color | The underline style of visited inline Links on a dark background. |
| 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-has-icon-transition | 0.3s | The transition timing for hover, active and focus styles on Links that have icon. |
| sprk-link-has-icon-color-icon | $sprk-purple | The color of icons in Links containing icons. |
| sprk-link-has-icon-fill | $sprk-link-has-icon-color-icon | The fill color for icons contained in Links. |
| sprk-link-has-icon-stroke | $sprk-link-has-icon-color-icon | The stroke color for icons contained in Links. |
| sprk-link-has-icon-underline-color | transparent | The underline color of Links containing icons. |
| sprk-link-has-icon-underline-width | 0 | The underline width of 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-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-color-text | $sprk-red | The color value for Links with icons in the hover state. |
| sprk-link-has-icon-hover-fill | $sprk-link-has-icon-hover-color-text | The fill color for icons contained in Links on hover. |
| sprk-link-has-icon-hover-stroke | $sprk-link-has-icon-hover-color-text | The stroke color for icons contained in Links on hover. |
| 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-visited-color-text | $sprk-purple | The color value for Links with icons in the visited state. |
| sprk-link-has-icon-visited-fill | $sprk-link-has-icon-visited-color-text | The fill color for icons contained in Links in the visited state. |
| sprk-link-has-icon-visited-stroke | $sprk-link-has-icon-visited-color-text | The stroke color for icons contained in Links in the visited state. |
| sprk-link-has-icon-visited-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-disabled-color | $sprk-black-tint-50 | The disabled Link. |
| sprk-link-disabled-border-bottom-color | $sprk-link-disabled-color | The Disabled Link border-bottom. |
| 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-color | $sprk-black-tint-50 | The disabled Link color on hover. |
| sprk-link-disabled-hover-border-bottom-color | $sprk-link-disabled-color | The disabled Link hover border-bottom. |
| 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. |
| sprk-list-margin-left | $sprk-space-m | The default margin left indentation on Lists. |
| sprk-list-indented-margin-left | $sprk-space-l | The default margin left indentation on Lists. |
| sprk-masthead-menu-icon-width | $sprk-icon-xl | The width of the menu icon on narrow viewports in the Masthead. |
| sprk-masthead-menu-icon-height | $sprk-icon-xl | 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-dropdown-margin | 0 $sprk-space-m 0 0 | The margin color of the dropdown in the Masthead. |
| sprk-masthead-dropdown-right | 0 | The right value of the dropdown in the Masthead. |
| sprk-masthead-content-padding | $sprk-space-s | The padding around the content section in the Masthead on wide viewports. |
| sprk-masthead-content-padding-wide | $sprk-space-m | 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-top-wide | $sprk-space-s | The padding top around the content items in the content section of the Masthead in wide viewports. |
| 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-bottom-wide | $sprk-space-s | The padding bottom around the content items in the content section of the Masthead in wide viewports. |
| 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-item-padding-right-wide | $sprk-space-m | The padding right around the content items in the content section of the Masthead in wide viewports. |
| sprk-masthead-content-item-padding-left | $sprk-space-s | The padding left around the content items in the content section of the Masthead. |
| sprk-masthead-content-item-padding-left-wide | $sprk-space-m | The padding left around the content items in the content section of the Masthead in wide viewports. |
| sprk-masthead-link-color | $sprk-black | The color of Masthead links. |
| sprk-masthead-link-visited-color | $sprk-black | The visited state color of Masthead links. |
| sprk-masthead-link-hover-color | $sprk-red | The color of Masthead Links on hover. |
| sprk-masthead-link-icon-hover-color | $sprk-red | The color of Masthead Icon Links on hover. |
| 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-style | solid | The bottom border style on the Masthead. |
| sprk-masthead-border-bottom | $sprk-masthead-border-bottom-size $sprk-masthead-border-bottom-style $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-30 | 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-30 | The border of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-icon-margin | 0 $sprk-space-s 0 $sprk-space-s | The margin for the icon in the selector in the Masthead. |
| sprk-masthead-selector-container-position | relative | The position setting of the Selector in the Masthead. |
| sprk-masthead-selector-padding | $sprk-space-inset-short-m | The padding of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-min-width | 17rem | The minimum width of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-font-color | $sprk-black | The font color of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-bg-color | $sprk-white | The background color of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-border-color-mask-open | $sprk-white | The bottom color that gets applied to the Selector Dropdown when open, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-border-radius | 5px | The border radius of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-font-weight | 300 | The font weight of the Selector, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-background-color | $sprk-white | The background color of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-z-index | $sprk-layer-height-m | The z-index of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-font-size | $sprk-font-size-body-one | The font size of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-font-weight | 400 | The font weight of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-margin | 0 | The margin of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-padding | 0 | The padding of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-item-padding | $sprk-space-misc-a | The padding around the Selector Dropdown items, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-title-font-size | $sprk-masthead-selector-dropdown-font-size | The font size of the Selector Dropdown title, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-title-font-weight | 300 | The font weight of the Selector Dropdown title, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-title-color | $sprk-black | The color of the Selector Dropdown title, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-link-color | $sprk-black | The color of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-link-padding | $sprk-space-m $sprk-space-misc-a | The padding of the Selector Dropdown links, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-text-decoration | none | The text decoration of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-line-height | 1 | The line height of the Selector Dropdown, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-active-background-color | $sprk-gray | The background color of the Selector Dropdown items that are active or hovered. Found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-active-border | 2.5px solid $sprk-purple | The left border of the Selector Dropdown item that is active. Found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-active-box-shadow | -1px 0 0 0 $sprk-purple | The box-shadow of the Selector Dropdown item that is active. Found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-footer-padding | $sprk-space-inset-short-l | The padding around the Selector Dropdown footer, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-dropdown-footer-text-align | center | The text-align of the Selector Dropdown, found in a 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, found in a 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, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-hover-font-color | $sprk-purple | The font color of the Selector when hovered, found in a Masthead with Extended Navigation. |
| sprk-masthead-selector-hover-border | 2px solid $sprk-purple | The border of the Selector when hovered, found in a 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-masthead-accordion-icon-leading-margin | 0 $sprk-space-s 0 0 | The margin for the leading Masthead accordion icon |
| sprk-masthead-accordion-active-left-border | 3px solid $sprk-red | The left border of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-background-color | $sprk-gray | The background color 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 heading in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-font-color | $sprk-black | The font color of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-active-heading-color | $sprk-black | The font color of the active item in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-font-color | $sprk-black | The font color of the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-open-line-background-color | $sprk-black-tint-30 | 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 the items in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-border | 0 | The border of the items in the navigation links when masthead is on narrow viewports. |
| sprk-masthead-accordion-item-background | transparent | The background of the items 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-heading-color | $sprk-black | The color 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-simple-link-icon-hover-color | $sprk-black | The color of Simple Masthead Icon Links on hover. |
| 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-hover-border-bottom | transparent | The border-bottom of the links in the big nav item when the big nav item is hovered in the Masthead Extended. |
| sprk-big-nav-link-padding | 0 | The padding of the big navigation links in the Masthead Extended. |
| sprk-big-nav-active-color | $sprk-red | The underline color of the active big navigation item in the Masthead Extended. |
| sprk-big-nav-item-active-border-bottom | 0.125rem solid $sprk-red | The border bottom of the active big navigation items in the Masthead Extended. |
| sprk-big-nav-item-active-color | $sprk-red | The color of active big navigation items in the Extended Masthead. |
| sprk-big-nav-item-border-bottom | 0.125rem solid transparent | The border bottom of the big navigation items in the Masthead Extended. |
| sprk-big-nav-item-open-border-bottom | $sprk-big-nav-item-active-border-bottom | The border bottom of open big navigation items in the Masthead Extended. |
| sprk-big-nav-item-line-height | 53px | The line height of the big navigation items in the Masthead Extended. |
| 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-menu-icon-bg-color | $sprk-white | The background color of the menu icon. |
| sprk-menu-icon-stroke-width | 2px | The stroke width of the menu icon. |
| sprk-menu-icon-stroke | $sprk-black | The stroke of the menu icon. |
| sprk-menu-icon-transition | transform 0.3s ease-in-out, opacity 0.2s ease-in-out | The transition on the menu icon that turns the menu icon into an 'X'. |
| sprk-menu-icon-line-one-transform-origin | 1rem 1.5rem | The transform origin of the 'X' state of the menu for the first menu line. Only needs to be changed if using a custom width and height. |
| sprk-menu-icon-line-three-transform-origin | 1rem 2.5rem | The transform origin of the 'X' state of the menu for the third menu line. Only needs to be changed if using a custom width and height. |
| 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-mask-color | rgba(34, 34, 34, 0.35) | The color of the mask overlay that is shown behind the Modal. |
| sprk-modal-display-hidden | none | The value for the display property when Modal is hidden. |
| 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-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-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-font-weight | 400 | The font weight 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-selection-color | $sprk-purple | 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-promo-background-color | $sprk-white | The background color of the Promo component. |
| sprk-promo-border | 1px solid $sprk-black-tint-40 | The border of the Promo component. |
| sprk-promo-margin | 0 auto | The margin of the Promo component. |
| sprk-promo-max-width | 42.5rem | The maximum width of the Promo component. |
| sprk-promo-content-padding | $sprk-space-inset-l | The padding for the content in the Promo component. |
| sprk-promo-flag-content-padding | $sprk-space-inset-m | The padding for the content in the Flag Promo component. |
| sprk-promo-max-width-full | 100% | Sets the maximum width of the Promo component to be full width. |
| sprk-promo-breakpoint | 42.5rem | The Promo component breakpoint at which large viewport styles begin. |
| sprk-promo-image-narrow-max-height | 20rem | The maximum height of the image in the Promo component on narrow viewports. |
| sprk-promo-image-object-fit | cover | The object-fit setting of the image in the Promo component. |
| sprk-promo-image-height | 100% | The height for the image in the Promo component. |
| sprk-promo-image-width | 100% | The width for the image in the Promo component. |
| sprk-promo-image-flag-narrow-max-width | 50% | The maximum width of the Flag image in the Promo component on narrow viewports. |
| sprk-promo-image-flag-padding | $sprk-space-inset-m | The padding for the Flag image in the Promo component. |
| sprk-promo-image-flag-height | auto | The height for the Flag image in the Promo component. |
| sprk-promo-image-flag-width | auto | The width for the Flag image in the Promo component. |
| sprk-promo-title-font-color | $sprk-black | The title font color of the Promo component. |
| sprk-promo-title-font-weight | $sprk-font-weight-display-four | The title font weight of the Promo component. |
| sprk-promo-subtitle-font-color | $sprk-black | The subtitle font color of the Promo component. |
| sprk-promo-subtitle-font-weight | $sprk-font-weight-body-one | The subtitle font weight of the Promo component. |
| sprk-selection-bg-color | $sprk-purple-lightest | Background color of any text when selected. |
| sprk-selection-text-color | $sprk-black | Text color of any text when selected. |
| sprk-pre-overflow | auto | Reset for the overflow property on pre elements. |
| sprk-border-radius | 5px | Value used for border-radius across the system. |
| sprk-spinner-size | 1.2rem | 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-spinner-color-primary | $sprk-red | The color of the primary Spinner. |
| sprk-spinner-color-secondary | $sprk-purple | The color of the secondary Spinner. |
| sprk-stepper-bg | transparent | The background color of the Stepper. |
| sprk-stepper-dark-bg | $sprk-purple-dark | The background color of the Stepper with a dark background. |
| 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-bar-color | $sprk-black-tint-50 | The color of the bar that connects the steps in the Stepper. |
| sprk-stepper-bar-width | 2px | The width of the bar that connects the steps in the Stepper. |
| sprk-stepper-bar-left-inset | $sprk-space-l | The left inset 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-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-purple-dark | The color of the step icon when the step is selected in the Stepper. |
| sprk-stepper-icon-border-color-selected-dark-bg | $sprk-purple-lightest | The color of the step icon in front of a dark background when the step is selected in the Stepper. |
| 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-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-icon-diameter | $sprk-stepper-icon-width + $sprk-stepper-icon-border-width | The diameter of the step icon in the Stepper. |
| sprk-stepper-icon-radius | $sprk-stepper-icon-diameter / 2 | The radius of the step icon in the Stepper. |
| sprk-stepper-icon-left | -(($sprk-stepper-bar-left-inset+$sprk-stepper-icon-radius)) | The left setting of the step icon 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-dark-icon-color | $sprk-purple-dark | 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-purple-dark | 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-step-content-bg | transparent | The background color of the content in 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-content-margin-left | ($sprk-stepper-bar-left-inset * 2) + $sprk-stepper-bar-width | The margin-left 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-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-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-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-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-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-slide-timing | 0.3s | The timing setting for the slides of the Stepper. |
| sprk-stepper-slider-text-fade-in-timing | 0.6s | The text fade in timing for the Stepper. |
| sprk-stepper-slider-text-fade-in-delay | 0.2s | The text fade in delay for the Stepper. |
| 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 on Tables. |
| sprk-table-border-color | $sprk-black | The border color on Tables. |
| sprk-table-border-collapse | collapse | The border collapse setting on Tables. |
| sprk-table-row-border-width | 1px | The border width on Table rows. |
| sprk-table-row-border-style | solid | The border style on Table rows. |
| sprk-table-row-border-color | $sprk-gray | The border color 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-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-secondary-cell-text-alignment | left | The text alignment of Secondary Table cells. |
| 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-color | $sprk-gray | The color of the borders in the Secondary Row Comparison Table cells. |
| 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-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-bottom | 3px solid $sprk-red | The button tab bottom 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-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-bottom | 3px solid $sprk-gray | The border on the bottom of the button tabs in Tabbed Navigation. |
| sprk-tab-navigation-btn-hover-border-bottom | 3px solid $sprk-purple | The border on the bottom of the button tabs on hover in Tabbed Navigation. |
| sprk-tab-navigation-btn-hover-color | $sprk-purple | The button tab text color of the button tabs on hover in Tabbed Navigation. |
| sprk-tab-navigation-breakpoint | 46rem | The breakpoint at which the tabs go from stacked layout to side by side in Tabbed Navigation. |
| sprk-toggle-trigger-icon-margin | 0 $sprk-space-s 0 0 | The default margin on the icon inside the Toggle trigger. |
| 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-purple | 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-icon-hover-fill | $sprk-toggle-trigger-hover-color | The hover fill color for Toggle icon. |
| sprk-toggle-content-padding-top | $sprk-space-s | The padding top for the content in the Toggle. |
| sprk-toggle-content-padding-bottom | $sprk-space-s | The padding bottom for the content in the Toggle. |
| sprk-toggle-transition-timing | 0.3s ease | The transition timing for the rotation of the icon when the Toggle is opened. |
| sprk-tooltip-caret-offset | 1rem | The space that the Tooltip's caret is offset from the edge. |
| sprk-tooltip-caret-background-color | $sprk-black | The background color for the tooltip caret. |
| sprk-tooltip-caret-width | 16px | The width of the tooltip caret. |
| sprk-tooltip-trigger-hover-offset | 1rem | The surrounding hover area around the trigger when the Tooltip is visible. |
| 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-text-align | left | The text align for the tooltip. |
| sprk-tooltip-padding | $sprk-space-inset-short-m | The padding for the tooltip. |
| sprk-tooltip-font-color | $sprk-white | The font color for the tooltip. |
| sprk-tooltip-font-weight | 300 | The font weight for the tooltip. |
| sprk-tooltip-font-size | $sprk-font-size-body-four | The font size for the tooltip. |
| sprk-tooltip-border-radius | 4px | The border radius for the tooltip. |
| sprk-tooltip-toggled-icon-background-color | $sprk-purple | The background color for the tooltip icon while toggled. |
| sprk-tooltip-z-index | $sprk-layer-height-s | The z-index of the tooltip. |
| sprk-tooltip-max-width | 328px | The max-width of the tooltip. This is used as a fallback if the preferred width is invalid, e.g. for IE 11. |
| sprk-tooltip-preferred-width | max-content | The preferred width of the tooltip. |
| sprk-tooltip-min-width | 60px | The min-width of the tooltip. |
| sprk-tooltip-transition | all 200ms ease-out | The transition applied to the tooltip. |
| sprk-tooltip-animation-offset | 0.5rem | The distance the tooltip should move during its animation. |
| sprk-vertical-list-delimiter | ',\00A0' | The delimiter between delimited items in Vertical List components. |