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):

  1. Create a new Sass file.
  2. Import it before Spark's main sass file.
  3. 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 NameDefault ValueDescription
sprk-purple-navyrgb(28, 1, 82)Color value for Purple Navy.
sprk-lavenderrgb(190, 132, 247)Color value for Lavender.
sprk-wisteriargb(222, 177, 253)Color value for Wisteria.
sprk-magnoliargb(240, 218, 255)Color value for Magnolia.
sprk-whitergb(255, 255, 255)White for floods of color and accents, like backgrounds and cards.
sprk-blackrgb(28, 27, 26)Black for main text color, specifically in headline and body copy.
sprk-black-tint-10rgb(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-20rgb(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-30rgb(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-40rgb(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-50rgb(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-60rgb(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-70rgb(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-80rgb(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-90rgb(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-grayrgb(247, 247, 247)Lightest gray. Use in combination with content hierarchy, font-weight and background color to create AA accessible text.
sprk-redrgb(200, 16, 46)Red for key branded moments throughout the product as our primary brand color.
sprk-deep-redrgb(118, 35, 47)Darkest red for key branded moments throughout the product.
sprk-mid-redrgb(157, 34, 53)Mid red for key branded moments throughout the product.
sprk-purplergb(96, 58, 161)Main purple for secondary actions and brand elements.
sprk-purple-darkrgb(60, 49, 116)Dark purple for interactive elements. Can also be used for limited floods of color.
sprk-purple-deeprgb(46, 17, 102)Deep purple for interactive elements. Can also be used for limited floods of color.
sprk-purple-lightrgb(146, 101, 211)Light purple for interactive elements.
sprk-purple-lightestrgb(231, 226, 242)Lightest purple for interactive elements. Can also be used for limited floods of color.
sprk-greenrgb(41, 133, 64)Use to communicate a positive status or message.
sprk-bluergb(28, 110, 242)Use to communicate an informative status or message.
sprk-pinkrgb(229, 1, 88)Use to communicate an error status or message.
sprk-yellowrgb(237, 163, 2)Use 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-bgThe 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-colorThe border value for the Carousel component.
sprk-carousel-dot-border-dark-bg$sprk-stepper-icon-border-width solid $sprk-purple-deepThe 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-xs1The extra small z-index value setting.
sprk-layer-height-s1000The small z-index value setting.
sprk-layer-height-m2000The medium z-index value setting.
sprk-layer-height-l3000The large z-index value setting.
sprk-layer-height-xl9999The extra large z-index value setting.
sprk-stack-spacing-tiny$sprk-space-xsThe spacing of the tiny Stack object.
sprk-stack-spacing-small$sprk-space-sThe spacing of the small Stack object.
sprk-stack-spacing-medium$sprk-space-mThe spacing of the medium Stack object.
sprk-stack-spacing-large$sprk-space-lThe spacing of the large Stack object.
sprk-stack-spacing-huge$sprk-space-xlThe spacing of the huge Stack object.
sprk-stack-spacing-misc-a$sprk-space-misc-aThe spacing of the Misc A Stack object.
sprk-stack-spacing-misc-b$sprk-space-misc-bThe spacing of the Misc B Stack object.
sprk-stack-spacing-misc-c$sprk-space-misc-cThe spacing of the Misc C Stack object.
sprk-stack-spacing-misc-d$sprk-space-misc-dThe spacing of the Misc D Stack object.
sprk-split-breakpoint-xxs20remThe breakpoint for Stack objects that split at the extra extra small point.
sprk-split-breakpoint-xs30remThe breakpoint for Stack objects that split at the extra small point.
sprk-split-breakpoint-s42.5remThe breakpoint for Stack objects that split at the small point.
sprk-split-breakpoint-m55remThe breakpoint for Stack objects that split at the medium point.
sprk-split-breakpoint-l67.5remThe breakpoint for Stack objects that split at the large point.
sprk-split-breakpoint-xl80remThe breakpoint for Stack objects that split at the extra large point.
sprk-space-inset-xs4px 4px 4px 4pxValue for the extra small inset space.
sprk-space-inset-s8px 8px 8px 8pxValue for the small inset space.
sprk-space-inset-m16px 16px 16px 16pxValue for the medium inset space.
sprk-space-inset-l32px 32px 32px 32pxValue for the large inset space.
sprk-space-inset-xl64px 64px 64px 64pxValue for the extra large inset space.
sprk-space-inset-short-xs2px 4px 2px 4pxValue for the extra small inset short space.
sprk-space-inset-short-s4px 8px 4px 8pxValue for the small inset short space.
sprk-space-inset-short-m8px 16px 8px 16pxValue for the medium inset short space.
sprk-space-inset-short-l16px 32px 16px 32pxValue for the large inset short space.
sprk-space-inset-short-xl32px 64px 32px 64pxValue for the extra large inset short space.
sprk-space-inset-tall-xs6px 4px 6px 4pxValue for the extra small inset tall space.
sprk-space-inset-tall-s12px 8px 12px 8pxValue for the small inset tall space.
sprk-space-inset-tall-m24px 16px 24px 16pxValue for the medium inset tall space.
sprk-space-inset-tall-l48px 32px 48px 32pxValue for the large inset tall space.
sprk-space-inset-tall-xl96px 64px 96px 64pxValue for the extra large inset tall space.
sprk-space-xs4pxValue for the extra small space setting.
sprk-space-s8pxValue for the small space setting.
sprk-space-m16pxValue for the medium space setting.
sprk-space-l32pxValue for the large space setting.
sprk-space-xl64pxValue for the extra large space setting.
sprk-space-h$sprk-space-xlValue for the huge space setting.
sprk-space-misc-a24pxValue for the misc a space setting.
sprk-space-misc-b40pxValue for the misc b space setting.
sprk-space-misc-c48pxValue for the misc c space setting.
sprk-space-misc-d80pxValue for the misc d large space setting.
sprk-space-stack-xs0 0 4px 0Value for the extra small inset short space.
sprk-space-stack-s0 0 8px 0Value for the small inset short space.
sprk-space-stack-m0 0 16px 0Value for the medium inset short space.
sprk-space-stack-l0 0 32px 0Value for the large inset short space.
sprk-space-stack-xl0 0 64px 0Value for the extra large inset short space.
sprk-typography-breakpoint54remThe breakpoint used for typography.
sprk-measure40remThe max-width value for the .sprk-u-Measure class.
sprk-narrow-measure25remThe 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-webfontsfalseBoolean value for if the app is using webfonts.
sprk-page-title-mark-color$sprk-redThe color of the Page Title mark.
sprk-page-title-mark-width32pxThe width of the Page Title mark.
sprk-page-title-mark-height5pxThe height of the Page Title mark.
sprk-page-title-mark-height-wide-viewport6pxThe height of the mark on a large viewport (using $sprk-typography-breakpoint).
sprk-page-title-mark-padding0 0 $sprk-space-misc-aAmount of padding between the mark and the text on the page title mark.
sprk-page-title-mark-padding-wide-viewport0 0 $sprk-space-mAmount of padding between the mark and the text on a large viewport (using $sprk-typography-breakpoint).
sprk-font-family-display-oneRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayOne.
sprk-font-family-display-twoRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayTwo.
sprk-font-family-display-threeRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayThree.
sprk-font-family-display-fourRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayFour.
sprk-font-family-display-fiveRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayFive.
sprk-font-family-display-sixRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplaySix.
sprk-font-family-display-sevenRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplaySeven.
sprk-font-family-body-oneRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyOne.
sprk-font-family-body-twoRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyTwo.
sprk-font-family-body-threeRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyThree.
sprk-font-family-body-fourRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyFour.
sprk-font-size-display-one2.75remThe size of TypeDisplayOne when the viewport is narrower than $sprk-font-size-display-one-breakpoint.
sprk-font-size-display-one-wide3.375remThe size of TypeDisplayOne when the viewport is wider than $sprk-font-size-display-one-breakpoint.
sprk-font-size-display-two2remThe size of TypeDisplayTwo when the viewport is narrower than $sprk-font-size-display-two-breakpoint.
sprk-font-size-display-two-wide2.5remThe size of TypeDisplayTwo when the viewport is wider than $sprk-font-size-display-two-breakpoint.
sprk-font-size-display-three1.75remThe size of TypeDisplayThree when the viewport is narrower than $sprk-font-size-display-three-breakpoint.
sprk-font-size-display-three-wide2.125remThe size of TypeDisplayThree when the viewport is wider than $sprk-font-size-display-three-breakpoint.
sprk-font-size-display-four1.625remThe size of TypeDisplayFour.
sprk-font-size-display-five1.25remThe size of TypeDisplayFive.
sprk-font-size-display-six1.25remThe size of TypeDisplaySix.
sprk-font-size-display-seven1remThe size of TypeDisplaySeven.
sprk-font-size-body-one1remThe size of TypeBodyOne.
sprk-font-size-body-two1remThe size of TypeBodyTwo.
sprk-font-size-body-three1remThe font size of TypeBodyThree.
sprk-font-size-body-four0.8125remThe font size of TypeBodyFour.
sprk-font-weight-display-oneboldThe weight of the TypeDisplayOne font.
sprk-font-weight-display-twoboldThe weight of the TypeDisplayTwo font.
sprk-font-weight-display-three300The weight of the TypeDisplayThree font.
sprk-font-weight-display-fourboldThe weight of the TypeDisplayFour font.
sprk-font-weight-display-five500The weight of the TypeDisplayFive font.
sprk-font-weight-display-six300The weight of the TypeDisplaySix font.
sprk-font-weight-display-seven500The weight of the TypeDisplaySeven font.
sprk-font-weight-body-one500The weight of the TypeBodyOne font.
sprk-font-weight-body-two300The weight of the TypeBodyTwo font.
sprk-font-weight-body-three300The weight of the TypeBodyThree font.
sprk-font-weight-body-four300The weight of the TypeBodyFour font.
sprk-font-displayswapThe supplied value will be set on all generated Font-face calls, as font-display. The default is 'swap.'
sprk-color-display-one$sprk-blackThe color of TypeDisplayOne.
sprk-color-display-two$sprk-blackThe color of TypeDisplayTwo.
sprk-color-display-three$sprk-blackThe color of TypeDisplayThree.
sprk-color-display-four$sprk-blackThe color of TypeDisplayFour.
sprk-color-display-five$sprk-blackThe color of TypeDisplayFive.
sprk-color-display-six$sprk-blackThe color of TypeDisplaySix.
sprk-color-display-seven$sprk-blackThe color of TypeDisplaySeven.
sprk-color-body-one$sprk-blackThe color of TypeBodyOne.
sprk-color-body-two$sprk-blackThe color of TypeBodyTwo.
sprk-color-body-three$sprk-blackThe color of TypeBodyThree.
sprk-color-body-four$sprk-blackThe color of TypeBodyFour.
sprk-line-height-display-one1.27The line-height of the TypeDisplayOne font when the viewport is narrower than $sprk-font-size-display-one-breakpoint.
sprk-line-height-display-one-wide1.03The line-height of the TypeDisplayOne font when the viewport is wider than $sprk-font-size-display-one-breakpoint.
sprk-line-height-display-two1The line-height of the TypeDisplayTwo font when the viewport is narrower than $sprk-font-size-display-two-breakpoint.
sprk-line-height-display-two-wide1The line-height of the TypeDisplayTwo font when the viewport is wider than $sprk-font-size-display-two-breakpoint.
sprk-line-height-display-three1.6The line-height of the TypeDisplayThree font when the viewport is narrower than $sprk-font-size-display-three-breakpoint.
sprk-line-height-display-three-wide1.32The line-height of the TypeDisplayThree font when the viewport is wider than $sprk-font-size-display-three-breakpoint.
sprk-line-height-display-four1.23The line-height of the TypeDisplayFour.
sprk-line-height-display-five1.2The line-height of the TypeDisplayFive.
sprk-line-height-display-six1.2The line-height of the TypeDisplaySix.
sprk-line-height-display-seven1The line-height of the TypeDisplaySeven.
sprk-line-height-body-one1.6The line-height of the TypeBodyOne.
sprk-line-height-body-two1.6The line-height of the TypeBodyTwo.
sprk-line-height-body-three2The line-height of the TypeBodyThree.
sprk-line-height-body-four1.84The line-height of the TypeBodyFour.
sprk-line-height-collision-top-crop5The top crop value for line height collision correction.
sprk-line-height-collision-bottom-crop5The bottom crop value for line height collision correction.
sprk-type-display-one-breakpoint43.75remThe 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-breakpoint43.75remThe 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-breakpoint43.75remThe 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-accordion-max-width53.125remThe maximum width of Accordions.
sprk-accordion-border2px solid rgb(230, 230, 230)The border of Accordions.
sprk-accordion-summary-text-decorationnoneThe text decoration of the Accordion item summary.
sprk-accordion-summary-text-alignleftThe text-align value of the Accordion item summary.
sprk-accordion-summary-active-text-decorationnoneThe text decoration of the Accordion item summary when active.
sprk-accordion-summary-color$sprk-blackThe font color of the Accordion item summary.
sprk-accordion-summary-background-colortransparentThe background color of the Accordion item summary.
sprk-accordion-summary-bordernoneThe border of the Accordion item summary.
sprk-accordion-summary-active-color$sprk-purpleThe 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-colorThe fill color of the icon when the Accordion item is hovered.
sprk-accordion-summary-padding$sprk-space-misc-a 0The padding of the Accordion summary.
sprk-accordion-content-padding0 0 $sprk-space-lThe padding of the Accordion content.
sprk-accordion-active-background-color$sprk-grayThe background color used for hover and active on items in the Accordion.
sprk-alert-border-radius4pxValue for border-radius on the Alert component.
sprk-alert-border-color$sprk-grayValue for border color on the Alert component.
sprk-alert-border-width2pxValue for border size on the Alert component.
sprk-alert-border-stylesolidValue for border style on the Alert component.
sprk-alert-border$sprk-alert-border-width $sprk-alert-border-style $sprk-alert-border-colorValue for border on the Alert component.
sprk-alert-shadow-colorrgba(0, 0, 0, 0.08)Value for shadow color on the Alert component.
sprk-alert-shadow0 3px 10px 1px $sprk-alert-shadow-colorValue for shadow on the Alert component.
sprk-alert-color$sprk-blackValue for color of the Alert component.
sprk-alert-font-size1remThe font size of the text in the content area of the Alert component.
sprk-alert-font-weight400The font weight of the text in the content area of the Alert component.
sprk-alert-line-height1.5The 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-aThe 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-mThe padding around the dismiss icon in the Alert component.
sprk-alert-dismiss-icon-color$sprk-blackThe color of the dismiss icon in the Alert component.
sprk-alert-dismiss-icon-size$sprk-space-mThe size of the dismiss icon in the Alert component.
sprk-alert-icon-margin-top0The margin top for the icon in the Alert component.
sprk-alert-icon-margin-bottom0The margin bottom for the icon in the Alert component.
sprk-alert-icon-margin-left0The 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-leftThe margin for the icon in the Alert component.
sprk-alert-icon-size32pxSets the height and width of the two icons used in the Alert component.
sprk-alert-icon-color-info$sprk-blueThe icon color of the Information Alert component.
sprk-alert-icon-color-success$sprk-greenThe icon color of the Success Alert component.
sprk-alert-icon-color-fail$sprk-pinkThe icon color of the Fail Alert component.
sprk-alert-border-info2px solid $sprk-blueThe border value of the Information Alert component.
sprk-alert-border-success2px solid $sprk-greenThe border value of the Success Alert component.
sprk-alert-border-fail2px solid $sprk-pinkThe border value of the Fail Alert component.
sprk-alert-bg-color$sprk-whiteThe background color of the default Alert component.
sprk-alert-bg-color-fail$sprk-alert-bg-colorThe background color of the Fail Alert component.
sprk-alert-bg-color-success$sprk-alert-bg-colorThe background color of the Success Alert component.
sprk-alert-bg-color-info$sprk-alert-bg-colorThe background color of the Information Alert component.
sprk-alert-text-color-fail$sprk-blackThe value for the color property in the Fail Alert component.
sprk-alert-text-color-success$sprk-blackThe value for the color property in the Success Alert component.
sprk-alert-text-color-info$sprk-blackThe value for the color property in the Information Alert component.
sprk-autocomplete-results-list-style-typenoneThe list style type of the Autocomplete results.
sprk-autocomplete-results-positionabsoluteThe position style of the Autocomplete results.
sprk-autocomplete-results-background-color$sprk-whiteBackground color of the Autocomplete results.
sprk-autocomplete-results-border-width1pxThe border size of the Autocomplete results.
sprk-autocomplete-results-border-stylesolidThe border style of the Autocomplete results.
sprk-autocomplete-results-border-color$sprk-grayThe border color of the Autocomplete results.
sprk-autocomplete-results-border-radius4pxThe border radius of the Autocomplete results.
sprk-autocomplete-results-border$sprk-autocomplete-results-border-width $sprk-autocomplete-results-border-style $sprk-autocomplete-results-border-colorThe border of the Autocomplete results.
sprk-autocomplete-results-width100%The width of the Autocomplete results.
sprk-autocomplete-results-max-width27.5remThe max-width of the Autocomplete results.
sprk-autocomplete-results-max-height18remThe max-height of the Autocomplete results.
sprk-autocomplete-results-overflow-yscrollThe overflow-y behavior of the Autocomplete results.
sprk-autocomplete-results-shadow0 0 40px 2px rgba(0, 0, 0, 0.1)The box shadow of the Autocomplete results.
sprk-autocomplete-results-z-index$sprk-layer-height-mThe z-index of the Autocomplete results.
sprk-autocomplete-results-huge-max-width37.5remThe max-width of the huge Autocomplete results.
sprk-autocomplete-results-last-child-border-bottomnoneThe border-bottom of the last Autocomplete result.
sprk-autocomplete-result-font-size$sprk-font-size-body-oneThe font size of the Autocomplete results.
sprk-autocomplete-result-padding$sprk-space-mThe padding around the Autocomplete results.
sprk-autocomplete-result-border-bottom1px solid $sprk-black-tint-20The border-bottom of the Autocomplete results.
sprk-autocomplete-result-hover-background-color$sprk-black-tint-10The background color of the hovered Autocomplete results.
sprk-autocomplete-result-hover-cursorpointerThe cursor of the hovered Autocomplete results.
sprk-autocomplete-result-active-background-color$sprk-black-tint-10Background color of the active Autocomplete result.
sprk-blockquote-source-prefix'-'Before pseudo-element on the Blockquote component.
sprk-blockquote-margin0Value for the margin property on Blockquote component.
sprk-blockquote-quote-margin0Value for the margin property on the quote in the Blockquote component.
sprk-blockquote-quote-last-margin0Value for the margin property on the last quote in the Blockquote component.
sprk-box-padding-tiny$sprk-space-inset-xsThe padding of the tiny Box object.
sprk-box-padding-small$sprk-space-inset-sThe padding of the small Box object.
sprk-box-padding$sprk-space-inset-mThe padding of the default (medium) Box object.
sprk-box-padding-large$sprk-space-inset-lThe padding of the large Box object.
sprk-box-padding-huge$sprk-space-inset-xlThe padding of the huge Box object.
sprk-btn-background-color$sprk-redThe background color of the Button component.
sprk-btn-shadow-colorrgba(20, 20, 20, 0.08)The box shadow color value for the Button component.
sprk-btn-shadow0 3px 10px $sprk-btn-shadow-colorThe box shadow value of the Button component.
sprk-btn-border-stylesolidThe border style of the Button component.
sprk-btn-border-color$sprk-btn-background-colorThe border color of the Button component.
sprk-btn-border-width2pxThe border width of the Button component.
sprk-btn-border$sprk-btn-border-width $sprk-btn-border-style $sprk-btn-border-colorThe border of the Button component.
sprk-btn-font-weight500The font weight of the Button component.
sprk-btn-font-sizeinheritThe font size of the Button component.
sprk-btn-font-familyinheritThe font family of the Button component.
sprk-btn-line-heightnormalThe line height of the Button component.
sprk-btn-text-color$sprk-whiteThe text color of the Button component.
sprk-btn-visited-text-color$sprk-whiteThe visited text color of the Button component.
sprk-btn-border-radius4pxThe border radius of the Button component.
sprk-btn-hover-background-color$sprk-mid-redThe background color of the Button component on hover.
sprk-btn-hover-text-color$sprk-whiteThe text color of the Button component on hover.
sprk-btn-padding$sprk-space-m 24pxThe padding of the Button component.
sprk-btn-padding-top$sprk-space-mThe top padding of the Button component.
sprk-btn-padding-bottom$sprk-space-mThe bottom padding of the Button component.
sprk-btn-padding-right$sprk-space-misc-aThe right padding of the Button component.
sprk-btn-padding-left$sprk-space-misc-aThe left padding of the Button component.
sprk-btn-breakpoint-xs30remThe extra small breakpoint at which Full Width Buttons switch to normal width.
sprk-btn-breakpoint-s42.5remThe small breakpoint at which Full Width Buttons switch to normal width.
sprk-btn-transition-speed0.3sThe transition speed setting for transitions on the Button component.
sprk-btn-letter-spacing0.62pxThe letter spacing value of the Button component.
sprk-btn-disabled-opacity1The opacity value of the Disabled Button component.
sprk-btn-disabled-border-width$sprk-btn-border-widthThe border width of the Disabled Button component.
sprk-btn-disabled-border-style$sprk-btn-border-styleThe border style of the Disabled Button component.
sprk-btn-disabled-background-color$sprk-black-tint-50The background color of the Disabled Button component.
sprk-btn-disabled-text-color$sprk-whiteThe text color of the Disabled Button component.
sprk-btn-disabled-border-colortransparentThe 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-colorThe border of the Disabled Button component.
sprk-btn-disabled-shadownoneThe 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-colorThe border of the Button component when disabled on hover.
sprk-btn-secondary-disabled-border-width$sprk-btn-disabled-border-widthThe border width of the Secondary Button component when disabled.
sprk-btn-secondary-disabled-border-style$sprk-btn-disabled-border-styleThe border style of the Secondary Button component when disabled.
sprk-btn-secondary-disabled-background-colortransparentThe background color of the Disabled Button component.
sprk-btn-secondary-disabled-text-color$sprk-black-tint-50The text color of the Secondary Button component when disabled.
sprk-btn-secondary-disabled-border-color$sprk-btn-secondary-disabled-text-colorThe border color of the Secondary Button component when disabled.
sprk-btn-secondary-disabled-shadownoneThe 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-colorThe border of the Secondary Button component when disabled on hover.
sprk-btn-secondary-background-colortransparentThe background color of the Secondary Button component.
sprk-btn-secondary-border-color$sprk-redThe border color of the Secondary Button component.
sprk-btn-secondary-border$sprk-btn-border-width $sprk-btn-border-style $sprk-btn-border-colorThe border of the Secondary Button component.
sprk-btn-secondary-text-color$sprk-redThe text color of the Secondary Button component.
sprk-btn-secondary-visited-text-color$sprk-redThe text color of the Secondary Button component when visited.
sprk-btn-secondary-hover-text-color$sprk-redThe hover text color of the Secondary Button component.
sprk-btn-secondary-hover-background-color#f9e7eaThe background color of the Secondary Button component on hover.
sprk-btn-secondary-hover-border-color$sprk-redThe border color of the Secondary Button component on hover.
sprk-btn-secondary-hover-shadow$sprk-btn-shadowThe 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-colorThe border of the Secondary Button component on hover.
sprk-btn-secondary-letter-spacing$sprk-btn-letter-spacingThe letter spacing of the Secondary Button component.
sprk-btn-tertiary-disabled-background-colortransparentThe background color of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-border-width$sprk-btn-disabled-border-widthThe border width of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-border-style$sprk-btn-disabled-border-styleThe border style of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-border-color$sprk-black-tint-50The border color of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-shadownoneThe 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-colorThe border of the Tertiary Button component when disabled on hover.
sprk-btn-tertiary-disabled-text-color$sprk-black-tint-50The text color of the Tertiary Button component when disabled.
sprk-btn-tertiary-background-colortransparentThe background color of the Tertiary Button component.
sprk-btn-tertiary-border-color$sprk-purple-darkThe border color of the Tertiary Button component.
sprk-btn-tertiary-border$sprk-btn-border-width $sprk-btn-border-style $sprk-btn-tertiary-border-colorThe border of the Tertiary Button component.
sprk-btn-tertiary-text-color$sprk-purple-darkThe text color of the Tertiary Button component.
sprk-btn-tertiary-visited-text-color$sprk-purple-darkThe text color of the Tertiary Button component when visited.
sprk-btn-tertiary-hover-text-color$sprk-purpleThe text color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-background-color$sprk-purple-lightestThe background color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-border-color$sprk-purpleThe border color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-shadow$sprk-btn-shadowThe 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-colorThe border of the Tertiary Button component when disabled on hover.
sprk-btn-tertiary-letter-spacing$sprk-btn-letter-spacingThe letter spacing of the Tertiary Button component.
sprk-btn-quaternary-disabled-border-width$sprk-btn-disabled-border-widthThe border width of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-border-style$sprk-btn-disabled-border-styleThe border style of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-border-color$sprk-black-tint-50The border color of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-text-color$sprk-black-tint-50The text color of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-background-colortransparentThe background color of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-shadownoneThe box shadow of the Quaternary Button component when disabled.
sprk-btn-quaternary-disabled-hover-border$sprk-btn-quaternary-disabled-border-width $sprk-btn-quaternary-disabled-border-style $sprk-btn-quaternary-disabled-border-colorThe border of the Quaternary Button component when disabled on hover.
sprk-btn-quaternary-background-colortransparentThe background color of the Quaternary Button component.
sprk-btn-quaternary-border-color$sprk-black-tint-50The border color of the Quaternary Button component.
sprk-btn-quaternary-border$sprk-btn-border-width $sprk-btn-border-style $sprk-btn-quaternary-border-colorThe border of the Quaternary Button component.
sprk-btn-quaternary-text-color$sprk-blackThe text color of the Quaternary Button component.
sprk-btn-quaternary-visited-text-color$sprk-blackThe text color of the Quaternary Button component when visited.
sprk-btn-quaternary-box-shadownoneThe box-shadow of the Quaternary Button component.
sprk-btn-quaternary-hover-text-color$sprk-blackThe text color of the Quaternary Button component on hover.
sprk-btn-quaternary-hover-background-colortransparentThe background color of the Quaternary Button component on hover.
sprk-btn-quaternary-hover-border-color$sprk-blackThe border color of the Quaternary Button component on hover.
sprk-btn-quaternary-hover-shadow$sprk-btn-shadowThe box shadow of the Quaternary Button component on hover.
sprk-btn-quaternary-letter-spacing$sprk-btn-letter-spacingThe letter spacing of the Quaternary Button component.
sprk-card-max-width26.5625remThe maximum width of the Card.
sprk-card-breakpoint$sprk-split-breakpoint-sThe main Card breakpoint.
sprk-card-shadow0 3px 10px 1px rgba(0, 0, 0, 0.08)The box shadow of the Card on narrow viewports.
sprk-card-shadow-color-wide-viewportrgba(0, 0, 0, 0.08)The box shadow color of the Card on wide viewports.
sprk-card-shadow-wide-viewport0 3px 18px $sprk-card-shadow-color-wide-viewportThe box shadow of the Card on wide viewports.
sprk-card-shadow-color-standoutrgba(0, 0, 0, 0.1)The box shadow color of the Standout Card variant on narrow viewports.
sprk-card-shadow-color-standout-wide-viewportrgba(0, 0, 0, 0.1)The box shadow color of the Standout Card variant on wide viewports.
sprk-card-shadow-standout0 4px 20px 2px $sprk-card-shadow-color-standoutThe box shadow of the Standout Card variant on narrow viewports.
sprk-card-shadow-standout-wide-viewport0 4px 40px 2px $sprk-card-shadow-color-standout-wide-viewportThe box shadow of the Standout Card variant on wide viewports.
sprk-card-border-radius8pxThe border radius of the Card.
sprk-card-content-padding$sprk-space-misc-aThe padding of the content inside the Card.
sprk-card-header-bg-color$sprk-purpleThe background color of the header area for the Highlighted Header Card.
sprk-card-header-text-color$sprk-whiteThe text color for the Highlighted Header Card.
sprk-carousel-dot-spacing$sprk-space-mThe spacing between the dots in the Carousel component.
sprk-carousel-dot-width10pxThe width of the dots in the Carousel component.
sprk-carousel-dot-height10pxThe height of the dots in the Carousel component.
sprk-carousel-dot-selected-bg-color$sprk-whiteThe background color of the active dot in the Carousel component.
sprk-carousel-dot-selected-bg-color-dark-bg$sprk-purpleThe background color of the active dot in the Carousel component on a dark background.
sprk-carousel-dot-container-padding$sprk-space-xsThe padding value for the dots container in the Carousel component.
sprk-carousel-wide-dot-width10pxThe spacing between the dots in the Carousel component.
sprk-carousel-wide-dot-height10pxThe spacing between the dots in the Carousel component.
sprk-carousel-wide-dot-spacing$sprk-carousel-dot-spacingThe wide viewport spacing between the dots in the Carousel component.
sprk-carousel-arrow-padding$sprk-space-mThe padding value of the arrows in the Carousel component.
sprk-carousel-arrow-edge-spacing0The left and right values of the arrows in the Carousel component.
sprk-carousel-arrow-spacing$sprk-space-mThe spacing for the arrows in the Carousel component.
sprk-carousel-arrow-color$sprk-whiteThe color of the arrows in the Carousel component.
sprk-carousel-arrow-position-breakpoint31.25remThe breakpoint for the arrows in the Carousel component.
sprk-carousel-breakpoint$sprk-split-breakpoint-xlThe breakpoint for the Carousel component.
sprk-carousel-narrow-image-max-width18.75remThe maximum width of the image in the Carousel component.
sprk-centered-column-width1232pxWidth value for the Centered Column layout container.
sprk-dictionary-border1px solid $sprk-grayThe border surrounding the Dictionary.
sprk-dictionary-stripe-color$sprk-grayThe background color of the key value pairs in the striped Dictionary.
sprk-dictionary-breakpoint38.4375remThe breakpoint of the Dictionary component.
sprk-dictionary-label-font-size$sprk-font-size-body-oneThe font size of the labels in the Dictionary.
sprk-dictionary-label-font-weight$sprk-font-weight-body-oneThe font weight of the labels in the Dictionary.
sprk-dictionary-label-line-height$sprk-line-height-body-oneThe line height of the labels in the Dictionary.
sprk-divider-colorrgb(230, 230, 230)The value for color of Dividers.
sprk-divider-border-width2pxThe size value of border for Dividers.
sprk-divider-border-stylesolidThe style value of border for Dividers.
sprk-divider-border$sprk-divider-border-width $sprk-divider-border-style $sprk-divider-colorThe value of border for Dividers.
sprk-dropdown-active-background-color$sprk-grayBackground color of the Dropdown items that are active or hovered.
sprk-dropdown-active-border2.5px solid $sprk-purpleThe left border of the Dropdown item that is active.
sprk-dropdown-active-box-shadow-1px 0 0 0 $sprk-purpleThe box-shadow of the Dropdown item that is active.
sprk-dropdown-border-width1pxThe border size of the Dropdown.
sprk-dropdown-border-stylesolidThe border style of the Dropdown.
sprk-dropdown-border-color$sprk-grayThe border color of the Dropdown.
sprk-dropdown-border$sprk-dropdown-border-width $sprk-dropdown-border-style $sprk-dropdown-border-colorThe border of the Dropdown.
sprk-dropdown-padding$sprk-space-misc-aThe padding around the Dropdown items.
sprk-dropdown-footer-padding$sprk-space-inset-short-lThe padding around the Informational Dropdown footer.
sprk-dropdown-max-width24remThe max-width of the Dropdown.
sprk-dropdown-link-color$sprk-blackThe color of the Dropdown links.
sprk-dropdown-line-height1The line height of the Dropdown.
sprk-dropdown-shadow0 0 40px 2px rgba(0, 0, 0, 0.1)The box shadow of the Dropdown.
sprk-dropdown-font-size$sprk-font-size-body-oneThe font size of the Dropdown.
sprk-dropdown-font-weight400The font weight of the Dropdown.
sprk-dropdown-trigger-color$sprk-blackThe color of the Dropdown trigger.
sprk-dropdown-trigger-color-active$sprk-blackThe color of the Dropdown trigger on hover, active, focus.
sprk-dropdown-trigger-color-visited$sprk-blackThe color of the Dropdown trigger for the visited state.
sprk-dropdown-title-font-size$sprk-dropdown-font-sizeThe font size of the Dropdown title.
sprk-dropdown-title-font-weight300The font weight of the Dropdown title.
sprk-dropdown-title-color$sprk-black-tint-30The color of the Dropdown title.
sprk-flag-gutter$sprk-space-mValue for the gutters between body and figure in the Flag component.
sprk-flag-gutter-tiny$sprk-space-xsValue for the gutters between body and figure in the Tiny Flag component.
sprk-flag-gutter-small$sprk-space-sValue for the gutters between body and figure in the Small Flag component.
sprk-flag-gutter-large$sprk-space-lValue for the gutters between body and figure in the Large Flag component.
sprk-flag-gutter-huge$sprk-space-xlValue for the gutters between body and figure in the Huge Flag component.
sprk-flag-stacked-breakpoint25emValue for the gutters between body and figure in the Stacked Flag component.
sprk-footer-background-color$sprk-blackBackground color of the Footer.
sprk-footer-text-color$sprk-whiteText color on the Footer.
sprk-footer-link-color$sprk-whiteLink color on the Footer.
sprk-footer-link-font-weightnormalLink font-weight on the Footer.
sprk-footer-icon-color$sprk-whiteIcon color on the Footer.
sprk-footer-trigger-color$sprk-whiteToggle trigger color on the Footer.
sprk-footer-trigger-font-weightnormalToggle trigger font-weight on the Footer.
sprk-footer-trigger-hover-color$sprk-purple-lightToggle trigger hover color on the Footer.
sprk-footer-toggle-transition0.3sToggle transition timing on the Footer.
sprk-highlight-board-breakpoint30remThe Highlight Board breakpoint at which styles change for padding, font size and button width.
sprk-highlight-board-content-width30remThe maximum width of the content for the Highlight Board when it has an image.
sprk-highlight-board-type-reduction-percentage0.8Percentage reduction value for the font size in the Highlight Board in narrow viewports.
sprk-highlight-board-height31.25remThe height of the Highlight Board image.
sprk-highlight-board-color$sprk-whiteThe background color of the Highlight Board.
sprk-highlight-board-content-box-color$sprk-whiteThe background color of the content box in the Highlight Board.
sprk-horizontal-list-spacing$sprk-space-mThe default spacing value for Horizontal List components.
sprk-horizontal-list-spacing-tiny$sprk-space-xsThe default spacing value for the tiny Horizontal List components.
sprk-horizontal-list-spacing-small$sprk-space-sThe default spacing value for the small Horizontal List components.
sprk-horizontal-list-spacing-medium$sprk-space-mThe default spacing value for the medium Horizontal List components.
sprk-horizontal-list-spacing-large$sprk-space-lThe default spacing value for the large Horizontal List components.
sprk-horizontal-list-spacing-huge$sprk-space-xlThe default spacing value for the huge Horizontal List components.
sprk-horizontal-list-delimiter','The delimiter between delimited items in Horizontal List components.
sprk-icon-m16pxValue for height and width of the Icon component.
sprk-icon-l24pxValue for height and width of the large Icon component.
sprk-icon-xl32pxValue for height and width of the extra-large Icon component.
sprk-icon-fill-color$sprk-blackValue for the fill property of the Icon component.
sprk-icon-stroke-color$sprk-blackValue for the stroke property of the Icon component.
sprk-icon-stroke-width1.25Value for the stroke-width property of the Icon component.
sprk-icon-l-strokenoneValue for the stroke property of the large Icon component.
sprk-icon-custom-stroke-width-l0Value for the stroke-width property of the large Icon component.
sprk-icon-xl-strokenoneValue for the stroke property of the extra large Icon component.
sprk-icon-custom-stroke-width-xl0Value for the stroke-width property of the extra large Icon component.
sprk-icon-filled-fill-color$sprk-blackValue for the fill property of the Filled Icon component.
sprk-icon-filled-stroke-colornoneValue for the stroke property of the Filled Icon component.
sprk-text-input-huge-height64pxTodo deprecate, The height value for Huge Inputs.
sprk-input-huge-height$sprk-text-input-huge-heightThe height value for Huge Inputs.
sprk-text-input-has-text-icon-padding0 0 1px 37pxThe font size of text icons inside Inputs.
sprk-text-input-has-icon-padding12px 0 12px 40pxThe padding inside Inputs that contain icons.
sprk-text-input-font-family$sprk-font-family-body-twoThe font family for Inputs.
sprk-text-input-font-size1remThe font size for Inputs.
sprk-text-input-font-weight300The font weight for Inputs.
sprk-text-input-error-color$sprk-pinkColor setting for Inputs with errors.
sprk-text-input-height48pxThe height setting for Inputs.
sprk-text-input-line-height1.3The line height setting for Inputs.
sprk-text-input-outline0The outline setting for Inputs.
sprk-text-input-color$sprk-blackThe color setting for Inputs.
sprk-text-input-border2px solid $sprk-black-tint-50The border setting for Inputs.
sprk-text-input-border-radius4pxThe border radius setting for Inputs.
sprk-text-input-box-shadownoneThe box shadow setting for Inputs.
sprk-text-input-padding0 $sprk-space-mThe padding setting for Inputs.
sprk-text-input-focus-border-color$sprk-purpleThe border color on Inputs when focused.
sprk-text-input-error-border-color$sprk-pinkThe border color on Inputs when there is an error.
sprk-text-input-disabled-border-color$sprk-black-tint-50The border color on disabled Inputs.
sprk-text-input-disabled-color$sprk-black-tint-50The color on disabled Inputs.
sprk-text-input-readonly-border-color$sprk-black-tint-50The border color on readonly Inputs.
sprk-text-input-readonly-color$sprk-black-tint-50The color on readonly Inputs.
sprk-text-input-disabled-background-color$sprk-black-tint-40The background color on disabled Inputs.
sprk-text-input-disabled-box-shadownoneThe box shadow on disabled Inputs.
sprk-text-input-transitionborder-color 0.15s easeThe transition setting on Inputs.
sprk-text-input-huge-focus-border-width2pxTodo deprecate, The border width for Huge Inputs on focus.
sprk-text-input-huge-focus-label-color$sprk-purpleTodo deprecate, The label color value of Huge Inputs on focus.
sprk-text-input-huge-has-text-icon-padding0 40pxThe padding value for Huge Inputs with icons.
sprk-text-input-huge-error-focus-label-color$sprk-blackTodo deprecate, The label color value of Huge Inputs when they have an error.
sprk-text-input-huge-complete-label-color$sprk-blackTodo 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-fiveTodo deprecate, The font size for Huge Inputs.
sprk-text-input-huge-label-font-size$sprk-font-size-body-fourTodo deprecate, The label font size for Huge Inputs.
sprk-text-input-huge-active-label-top10pxTodo 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-width2pxTodo deprecate, The border width for Huge Inputs.
sprk-text-input-huge-padding0 $sprk-space-misc-aTodo deprecate, The padding for Huge Inputs.
sprk-text-input-huge-transitiontop 0.3s, color 0.3s, font-size 0.3sTodo deprecate, The transition value for Huge Inputs.
sprk-text-input-huge-transition-delay0sTodo deprecate, The transition delay value for Huge Inputs.
sprk-text-input-huge-placeholder-transition-delay100msTodo deprecate, The transition delay placeholder value for Huge Inputs.
sprk-text-input-huge-placeholder-transition-propertyopacityTodo deprecate, The transition property placeholder value for Huge Inputs.
sprk-text-input-huge-placeholder-opacity0Todo deprecate, The placeholder opacity value for Huge Inputs.
sprk-text-input-huge-active-placeholder-opacity1Todo deprecate, The placeholder opacity value for Huge Inputs.
sprk-text-input-huge-label-top$sprk-input-huge-height / 3Todo 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 / 4Todo deprecate, The padding top value of active Huge Inputs.
sprk-input-container-margin0 0 $sprk-space-l 0The value for padding applied to fieldset elements.
sprk-input-container-narrow-max-width6.5remThe value used for the maximum width of an icon container using the icon container narrow modifier.
sprk-input-container-huge-max-width37.5remThe max-width setting for Huge Inputs.
sprk-input-max-width27.5remThe value used as a maximum width for Input containers.
sprk-input-max-width-full100%The value used for the maximum width of an Input container using the .sprk-b-InputContainer--full modifier.
sprk-input-huge-error-focus-label-color$sprk-text-input-huge-error-focus-label-colorThe label color value of Huge Inputs when they have an error.
sprk-input-huge-complete-label-color$sprk-text-input-huge-complete-label-colorThe label color when the Huge Input has a value and is not focused.
sprk-input-huge-font-size$sprk-text-input-huge-font-sizeThe font size for Huge Inputs.
sprk-input-huge-label-font-size$sprk-text-input-huge-label-font-sizeThe label font size for Huge Inputs.
sprk-input-huge-label-top$sprk-text-input-huge-label-topThe 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-topThe 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-topThe padding top value of active Huge Inputs.
sprk-input-huge-border-width$sprk-text-input-huge-border-widthThe border width for Huge Inputs.
sprk-input-huge-padding$sprk-text-input-huge-paddingThe padding for Huge Inputs.
sprk-input-huge-label-padding0 ($sprk-space-misc-a + $sprk-input-huge-border-width)The label padding for Huge Inputs.
sprk-input-huge-focus-border-width$sprk-text-input-huge-focus-border-widthThe border width for Huge Inputs on focus.
sprk-input-huge-focus-label-color$sprk-text-input-huge-focus-label-colorThe label color value of Huge Inputs on focus.
sprk-input-huge-transition$sprk-text-input-huge-transitionThe transition value for Huge Inputs.
sprk-input-huge-transition-delay$sprk-text-input-huge-transition-delayThe transition delay value for Huge Inputs.
sprk-input-huge-placeholder-transition-delay$sprk-text-input-huge-placeholder-transition-delayThe transition delay placeholder value for Huge Inputs.
sprk-input-huge-placeholder-transition-property$sprk-text-input-huge-placeholder-transition-propertyThe transition property placeholder value for Huge Inputs.
sprk-input-huge-placeholder-opacity$sprk-text-input-huge-placeholder-opacityThe placeholder opacity value for Huge Inputs.
sprk-input-huge-placeholder-active-opacity$sprk-text-input-huge-active-placeholder-opacityThe placeholder opacity value for Huge Inputs.
sprk-input-huge-box-shadow0 3px 10px 1px rgba(0, 0, 0, 0.08)The box shadow value on Huge Inputs.
sprk-input-huge-icon-offset-y$sprk-space-misc-aThe margin-top value for icons in Huge Inputs.
sprk-input-huge-icon-offset-top50%The top value for icons in Huge Inputs.
sprk-input-huge-has-icon-padding0 0 0 42pxThe padding value for Huge Inputs that contains an icon.
sprk-input-error-text-color$sprk-blackValue for color on Inputs with errors.
sprk-input-error-text-line-height1.4The line height used for Input error text.
sprk-input-error-text-margin0 0 0 6pxThe margin used for Input error text.
sprk-input-error-text-font-family$sprk-font-family-body-twoThe font family used for Input error text.
sprk-input-error-text-font-size0.8125remThe font size used for Input error text.
sprk-input-error-text-font-weight400The font weight used for Input error text.
sprk-input-has-icon-right-top38pxThe top offset of the icon displayed on the right side of Inputs.
sprk-input-has-icon-right-left71pxThe top offset of the icon displayed on the left side of Inputs.
sprk-input-has-icon-padding-right0 37px 1px 12pxThe padding of the icon displayed inside of Inputs.
sprk-input-text-icon-z-index$sprk-layer-height-xsThe font size of text icons inside Inputs.
sprk-input-text-icon-offset-x$sprk-space-mThe X offset of text icons inside Inputs.
sprk-input-text-icon-offset-y2emThe XY offset of text icons inside Inputs.
sprk-input-text-icon-font-size1emThe font size of text icons inside Inputs.
sprk-input-text-icon-font-weight700The font weight of text icons inside Inputs.
sprk-input-icon-offset-x$sprk-space-mThe X offset of icons inside Inputs.
sprk-input-icon-offset-y$sprk-space-mThe Y offset of icons inside Inputs.
sprk-input-icon-z-index$sprk-layer-height-xsThe z-index applied to the icon inside Inputs.
sprk-error-container-margin$sprk-space-s 0 0 0The margin for Input containers that have an error.
sprk-error-icon-size1.25remThe Input error icon size.
sprk-monetary-symbol'$'The symbol used to denote currency for Monetary Inputs.
sprk-fieldset-padding$sprk-space-m 0 0 0The value for padding applied to fieldset elements.
sprk-select-input-huge-padding-right45pxThe padding right for Huge Inputs.
sprk-select-appearancenoneThe value for the appearance property for Selects.
sprk-select-backgroundnoneThe background setting for Selects.
sprk-select-font-family$sprk-text-input-font-familyThe font family for Selects.
sprk-select-font-size$sprk-text-input-font-sizeThe font size for Selects.
sprk-select-font-weight$sprk-text-input-font-weightThe font weight for Selects.
sprk-select-line-height$sprk-text-input-line-heightThe line height setting for Selects.
sprk-select-outline$sprk-text-input-outlineThe outline setting for Selects.
sprk-select-color$sprk-text-input-colorThe color setting for Selects.
sprk-select-border$sprk-text-input-borderThe border setting for Selects.
sprk-select-border-radius$sprk-text-input-border-radiusThe border radius setting for Selects.
sprk-select-box-shadow$sprk-text-input-box-shadowThe box shadow setting for Selects.
sprk-select-padding12px 45px 12px 13pxThe padding setting for Selects.
sprk-select-focus-border-color$sprk-text-input-focus-border-colorThe border color on Selects when focused.
sprk-select-error-border-color$sprk-text-input-error-border-colorThe border color on Selects when there is an error.
sprk-select-disabled-border-color$sprk-text-input-disabled-border-colorThe border color on disabled Selects.
sprk-select-disabled-color$sprk-text-input-disabled-colorThe color on disabled Selects.
sprk-select-moz-focusring-colortransparentThe value for the Firefox specific -moz-focusring color setting.
sprk-select-moz-focusring-text-shadow0 0 0 $sprk-select-colorThe value for the Firefox specific -moz-focusring text-shadow setting.
sprk-select-disabled-background-color$sprk-text-input-disabled-background-colorThe background color on disabled Selects.
sprk-select-arrow-offset-y-31pxThe value for margin-top on the icon in Selects.
sprk-select-arrow-offset-x19pxThe value for margin-right on the icon in Selects.
sprk-textarea-min-height125pxThe minimum height of Textarea.
sprk-textarea-margin$sprk-space-stack-mThe margin surrounding Textarea.
sprk-textarea-padding$sprk-space-mThe padding inside Textarea.
sprk-helper-color$sprk-black-tint-70The color of the helper text for Inputs.
sprk-helper-line-height$sprk-text-input-line-heightThe line height of the helper text for Inputs.
sprk-helper-margin$sprk-error-container-marginThe margin of the helper text for Inputs.
sprk-helper-font-size0.8125remThe font size of the helper text for Inputs.
sprk-helper-font-weight$sprk-text-input-font-weightThe font weight of the helper text for Inputs.
sprk-helper-font-family$sprk-text-input-font-familyThe font family of the helper text for Inputs.
sprk-placeholder-color$sprk-black-tint-50The color of the placeholder for Inputs.
sprk-placeholder-font-size$sprk-text-input-font-sizeThe font size of the placeholder for Inputs.
sprk-placeholder-font-weight$sprk-text-input-font-weightThe font weight of the placeholder for Inputs.
sprk-placeholder-font-family$sprk-text-input-font-familyThe font family of the placeholder for Inputs.
sprk-selection-container-margin0 0 $sprk-space-m 0The margin of the selection container for Inputs.
sprk-selection-container-label-font-weight300The font weight of the label in the selection container for Inputs.
sprk-selection-container-input-heightautoThe height of Input inside the selection container.
sprk-selection-container-input-widthautoThe width of Input inside the selection container.
sprk-selection-container-input-margin0 $sprk-space-s 0 0The margin of the Input inside the selection container.
sprk-date-picker-max-width20remThe maximum width of the Date Picker popup.
sprk-date-picker-border-radius4pxThe border radius applied to the Date Picker popup.
sprk-date-picker-button-size2.25remThe size of the buttons used internally by the Date Picker popup.
sprk-date-picker-column-adjustment-x0.25remThe offset applied to columns used internally by the Date Picker.
sprk-date-picker-box-shadow0 4px 16px rgba(51, 51, 51, 0.1)The box shadow of the Date Picker.
sprk-date-picker-font-family$sprk-font-family-body-twoThe font family in the Date Picker popup.
sprk-date-picker-font-size1remThe font size of the Date Picker popup.
sprk-date-picker-font-weight300The font weight of the Date Picker popup.
sprk-date-picker-day-interact-color$sprk-purpleColor used internally by Date Picker to highlight elements.
sprk-date-picker-day-padding6pxThe padding around the day in the Date Picker popup.
sprk-date-picker-day-margin0 2pxThe margin around the day in the Date Picker popup.
sprk-date-picker-day-color$sprk-whiteThe color of the day in the Date Picker popup.
sprk-date-picker-day-hover-color$sprk-blackThe color of the day in the Date Picker popup on hover.
sprk-date-picker-day-edge-day-color$sprk-black-tint-50The 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-sixThe font size of the month and year in the Date Picker popup.
sprk-date-picker-arrow-color$sprk-blackThe color of the prev/next arrows in the Date Picker popup.
sprk-date-picker-modal-margin$sprk-space-m 0 0 0The margin applied to the Date Picker popup.
sprk-date-picker-modal-margin-wide2pxThe margin applied to the Date Picker popup on wide viewports.
sprk-date-picker-modal-z-index$sprk-layer-height-mThe z-index applied to the Date Picker popup.
sprk-date-picker-years-modal-max-height500pxThe value for max-height applied to the Date Picker popup.
sprk-date-picker-selected-day-font-weight500Font weight used by the currently selected day in the Date Picker popup.
sprk-date-picker-background$sprk-whiteThe value for background in the Date Picker.
sprk-date-picker-padding$sprk-space-inset-sThe value for padding in the Date Picker.
sprk-date-picker-padding-wide$sprk-space-inset-mThe value for padding in the Date Picker on wide viewports.
sprk-date-picker-header-border1px solid $sprk-grayThe border setting for the header in the Date Picker.
sprk-date-picker-header-padding0 0 $sprk-space-s 0The padding setting for the header in the Date Picker.
sprk-date-picker-header-font-weight700The font weight for the header in the Date Picker.
sprk-date-picker-header-font-size$sprk-font-size-body-threeThe font size for the header in the Date Picker.
sprk-date-picker-col-header-padding10pxThe padding around the month header in the Date Picker popup.
sprk-label-padding0The padding applied to Input labels.
sprk-label-font-size0.875remThe font size applied to Input labels.
sprk-label-font-weight400The font weight applied to Input labels.s.
sprk-label-font-family$sprk-font-family-body-twoThe font family applied to Input labels.
sprk-label-line-height1The line height applied to Input labels
sprk-label-margin0 0 $sprk-space-s 0The margin applied to Input labels.
sprk-label-disabled-color$sprk-black-tint-50The color of the disabled Input labels.
sprk-visibility-control-label-font-size$sprk-label-font-sizeThe font size used for visibility controls.
sprk-visibility-control-margin6px 0 0 0The margin surrounding visibility controls (Ex. 'Show SSN').
sprk-radio-input-outer-circle-hover-border2px solid $sprk-black-tint-70The border of the outer circle in the radio input on hover.
sprk-radio-input-outer-circle-focus-border2px solid $sprk-purpleThe border of the outer circle in the radio input on focus.
sprk-radio-input-outer-circle-focus-border-disabled2px solid $sprk-black-tint-50The border of the outer circle in the disabled radio input on focus.
sprk-radio-input-outer-circle-border-hover-disabled2px solid $sprk-black-tint-50The border of the outer circle in the disabled radio input on hover.
sprk-radio-input-outer-circle-border-checked2px solid $sprk-purpleThe border of the outer circle in the radio input when checked.
sprk-radio-input-outer-circle-border2px solid $sprk-black-tint-50The border of the outer circle in the radio input.
sprk-radio-input-outer-circle-width1remThe width of the outer circle in the radio input.
sprk-radio-input-outer-circle-height1remThe height of the outer circle in the radio input.
sprk-radio-input-outer-circle-top0The top value of the outer circle in the radio input.
sprk-radio-input-outer-circle-left-1.375remThe left value of the outer circle in the radio input.
sprk-radio-input-inner-circle-width0.5remThe width of the inner circle in the radio input.
sprk-radio-input-inner-circle-background-color$sprk-purpleThe background color of the inner circle in the radio input.
sprk-radio-input-inner-circle-height0.5remThe height of the inner circle in the radio input.
sprk-radio-input-inner-circle-top0.25remThe top value of the inner circle in the radio input.
sprk-radio-input-inner-circle-left-1.125remThe left value of the inner circle in the radio input.
sprk-radio-input-opacity0The opacity value for the radio input.
sprk-radio-input-transitionall 0.2s ease-in-outThe transition for the radio input.
sprk-radio-input-border-radius50%The border radius of the circle in the radio input.
sprk-radio-input-cursor-hover-disableddefaultThe cursor style of the disabled radio on hover.
sprk-radio-input-huge-max-width31.25remThe max-width of the huge radio input.
sprk-radio-input-huge-transition$sprk-radio-input-transitionThe transition for the huge radio input.
sprk-radio-input-huge-label-border2px solid $sprk-black-tint-50The border for the huge radio input label.
sprk-radio-input-huge-label-border-radius4pxThe border-radius for the huge radio input label.
sprk-radio-input-huge-label-padding1.25rem 1rem 1.25rem 3.4375remThe padding for the huge radio input label.
sprk-radio-input-huge-label-flex-basis100%he flex-basis for the huge radio input label.
sprk-radio-input-huge-label-line-height1remThe line-height for the huge radio input label.
sprk-radio-input-huge-label-hover-border-color$sprk-blackThe border color of the huge radio input label on hover.
sprk-radio-input-huge-label-hover-box-shadow$sprk-input-huge-box-shadowThe box shadow of the huge radio input label on hover.
sprk-radio-input-huge-focused-label-border$sprk-grayThe border color of the huge radio input label when it has focus.
sprk-radio-input-huge-checked-label-border$sprk-purpleThe border color of the huge radio input label when it is selected.
sprk-radio-input-huge-checked-hover-label-border6px 0 0 0The margin surrounding visibility controls (Ex. 'Show SSN').
sprk-radio-input-huge-checked-hover-label-border-color$sprk-blackThe 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-purpleThe border color of the outer circle of the huge when it is selected and hovered.
sprk-radio-input-huge-inner-circle-height1remThe height of the inner circle of the huge radio input.
sprk-radio-input-huge-inner-circle-width1remThe width of the inner circle of the huge radio input.
sprk-radio-input-huge-inner-circle-left1.25remThe left value of the inner circle of the huge radio input.
sprk-radio-input-huge-inner-circle-top1.25remThe top value of the inner circle of the huge radio input.
sprk-radio-input-huge-focused-outer-circle-border-background-color$sprk-grayThe 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-grayThe 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-disabledThe border of the outer circle of the huge radio input when it is disabled and hovered.
sprk-radio-input-huge-outer-circle-width1.5remThe width of the outer circle of the huge radio input.
sprk-radio-input-huge-outer-circle-height1.5remThe height of the outer circle of the huge radio input.
sprk-radio-input-huge-outer-circle-top1remThe top value of the outer circle of the huge radio input.
sprk-radio-input-huge-outer-circle-left1remThe left value of the outer circle of the huge radio input.
sprk-radio-input-huge-outer-circle-box-shadow-hover-disablednoneThe 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-colorThe background color of the huge radio input when it is disabled.
sprk-checkbox-input-opacity0The opacity of the native control checkbox.
sprk-checkbox-transitionall 0.2s ease-in-outThe transition for the checkbox when the input is checked or unchecked.
sprk-checkbox-huge-container-transition$sprk-checkbox-transitionThe transition of the huge checkbox input.
sprk-checkbox-huge-container-border2px solid $sprk-black-tint-50The border settings of the huge checkbox input.
sprk-checkbox-huge-container-border-radius4pxThe border-radius of the huge checkbox input.
sprk-checkbox-huge-container-padding20px $sprk-space-m 20px 55pxThe padding of the huge checkbox input.
sprk-checkbox-huge-container-flex-basis100%The flex-basis of the huge checkbox input.
sprk-checkbox-huge-container-line-height1remThe line height of the huge checkbox input.
sprk-checkbox-huge-container-hover-border-color$sprk-blackThe border color of the huge checkbox input when hovered.
sprk-checkbox-huge-container-hover-box-shadow$sprk-input-huge-box-shadowThe box shadow of the huge checkbox input when hovered.
sprk-checkbox-huge-container-disabled-border-color$sprk-text-input-disabled-border-colorThe border color of the huge checkbox input when disabled.
sprk-checkbox-huge-container-disabled-box-shadownoneThe box shadow of the huge checkbox input when disabled.
sprk-checkbox-huge-container-disabled-background$sprk-text-input-disabled-background-colorThe background of the huge checkbox input when disabled.
sprk-checkbox-huge-container-focus-border-color$sprk-purpleThe border color of the huge checkbox input when focused.
sprk-checkbox-huge-container-focus-hover-border-color$sprk-blackThe border color of the huge checkbox input when focused and hovered.
sprk-checkbox-huge-container-checked-border-color$sprk-purpleThe border color of the huge checkbox input when checked.
sprk-checkbox-huge-container-focus-checked-border-color$sprk-blackThe border color of the huge checkbox input when checked and focused.
sprk-checkbox-huge-container-checked-hover-border-color$sprk-blackThe border color of the huge checkbox input when checked and hovered.
sprk-checkbox-input-huge-max-width500pxThe max-width of the huge checkbox input.
sprk-checkbox-custom-input-height1remThe height of the custom checkbox input.
sprk-checkbox-custom-input-width1remThe width of the custom checkbox input.
sprk-checkbox-custom-input-border2px solid $sprk-black-tint-50The border of the custom checkbox input.
sprk-checkbox-custom-input-border-focus2px solid $sprk-purpleThe border of the custom checkbox input when focused.
sprk-checkbox-custom-input-border-focus-checked2px solid $sprk-blackThe border of the custom checkbox input when it is checked and focused.
sprk-checkbox-custom-input-background-color-focus$sprk-grayThe background of the custom checkbox input when focused.
sprk-checkbox-custom-input-background-color-hover$sprk-grayThe background color of the custom checkbox input when hovered.
sprk-checkbox-custom-input-background-color-checked$sprk-purpleThe background color of the custom checkbox input when checked.
sprk-checkbox-custom-input-background-color-disabledtransparentThe background color of the custom checkbox input when disabled.
sprk-checkbox-custom-input-border-color-checked$sprk-purpleThe border color of the custom checkbox input when checked.
sprk-checkbox-custom-input-border-color-hover$sprk-black-tint-70The border color of the custom checkbox input when hovered.
sprk-checkbox-custom-input-border-color-disabled$sprk-black-tint-50The border color of the custom checkbox input when disabled.
sprk-checkbox-custom-input-cursor-disableddefaultThe cursor for the custom checkbox input when disabled.
sprk-checkbox-custom-input-border-radius3pxThe border radius of the custom checkbox input.
sprk-checkbox-custom-input-top0The top positioning of the custom checkbox input.
sprk-checkbox-custom-input-left-22pxThe left positioning of the custom checkbox input.
sprk-checkbox-huge-custom-input-height1.5remThe height of the custom checkbox element of the huge checkbox input.
sprk-checkbox-huge-custom-input-width1.5remThe width of the custom checkbox element of the huge checkbox input.
sprk-checkbox-huge-custom-input-hover-border-color$sprk-blackThe border color of the custom checkbox element of the huge checkbox input when hovered.
sprk-checkbox-huge-custom-input-top$sprk-space-mThe top value of the custom checkbox element of the huge checkbox input.
sprk-checkbox-huge-custom-input-left$sprk-space-mThe left value of the custom checkbox element of the huge checkbox input.
sprk-checkbox-huge-custom-input-disabled-border-color$sprk-black-tint-50The border color of the custom checkbox element of the huge checkbox input when disabled.
sprk-checkbox-huge-custom-input-checkbox-element-checked-border-color$sprk-purpleThe border color of the custom checkbox element of the huge checkbox input when checked.
sprk-checkbox-huge-checkmark-icon-height0.5remThe height of the huge checkmark icon.
sprk-checkbox-huge-checkmark-icon-width0.75remThe width of the huge checkmark icon.
sprk-checkbox-huge-checkmark-icon-top22pxThe top positioning of the huge checkmark icon.
sprk-checkbox-huge-checkmark-icon-left22pxThe left positioning of the huge checkmark icon.
sprk-checkbox-checkmark-icon-height0.45remThe height of the checkmark icon.
sprk-checkbox-checkmark-icon-width0.65remThe width of the checkmark icon.
sprk-checkbox-checkmark-icon-top3pxThe top positioning of the checkmark icon.
sprk-checkbox-checkmark-icon-left-19pxThe left positioning of the checkmark icon.
sprk-checkbox-checkmark-border-left2px solid $sprk-whiteThe border settings to create the bottom portion of the checkmark.
sprk-checkbox-checkmark-border-bottom2px solid $sprk-whiteThe border settings to create the right portion of the checkmark.
sprk-checkbox-checkmark-transformrotate(-45deg)The rotation setting to create the checkmark.
sprk-link-transition0.3sThe transition timing for hover, active and focus styles on Links.
sprk-link-color$sprk-purpleThe default color on Links.
sprk-link-underline-color$sprk-purpleThe color of the underline on Links.
sprk-link-underline-width0.125remThe width of the underline on Links.
sprk-link-underline-visited-color$sprk-black-tint-50The color of the underline on visited Links.
sprk-link-text-decorationnoneThe text decoration on Links.
sprk-link-font-weight$sprk-font-weight-body-oneThe font weight on Links.
sprk-link-border-bottom-stylesolidThe border style of the underline on Links.
sprk-link-border-bottom$sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-visited-colorThe style of the underline on Links.
sprk-link-hover-color$sprk-purple-deepThe color of Links on hover.
sprk-link-hover-border-bottom$sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-hover-colorThe underline style of Links on hover.
sprk-link-visited-border-bottom$sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-visited-colorThe style of the underline on visited Links.
sprk-link-simple-color$sprk-blackThe color value of Simple Links.
sprk-link-simple-hover-color$sprk-blackThe color of Simple Links on hover.
sprk-link-simple-hover-underline-color$sprk-redThe underline color value of Simple Links on hover.
sprk-link-simple-hover-underline-width0.125remThe 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-colorThe underline style of visited Simple Links on hover.
sprk-link-simple-underline-colortransparentThe underline color value of Simple Links.
sprk-link-simple-underline-width0.125remThe underline width value of Simple Links.
sprk-link-simple-font-weight$sprk-font-weight-body-twoThe font weight of Simple Links.
sprk-link-simple-border-bottom$sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-colorThe 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-colorThe underline style of visited Simple Links.
sprk-link-light-color$sprk-whiteThe color value of Light Links.
sprk-link-light-hover-font-weight$sprk-font-weight-body-oneThe font weight of Light Links on hover.
sprk-link-light-hover-color$sprk-whiteThe color of Light Links on hover
sprk-link-light-hover-underline-color$sprk-whiteThe underline color value of Light Links on hover.
sprk-link-light-hover-underline-width0.125remThe underline width value of Light Links on hover.
sprk-link-light-hover-after-left0%The left position of the after element of Light Links on hover.
sprk-link-light-hover-after-width100%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-colorThe underline style of Light Links on hover.
sprk-link-light-underline-colortransparentThe underline color value of Light Links.
sprk-link-light-underline-width0.125remThe underline width value of Light Links.
sprk-link-light-font-weight$sprk-font-weight-body-twoThe font weight of Light Links.
sprk-link-light-border-bottom$sprk-link-light-underline-width $sprk-link-border-bottom-style $sprk-link-light-underline-colorThe 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-colorThe underline style of visited Light Links.
sprk-link-plain-bordernoneThe border settings for Plain Links.
sprk-link-plain-visited-bordernoneThe border settings for Plain Links in the visited state.
sprk-link-has-icon-color-icon$sprk-purpleThe color of icons in Links containing icons.
sprk-link-has-icon-fill$sprk-link-has-icon-color-iconThe fill color for icons contained in Links.
sprk-link-has-icon-stroke$sprk-link-has-icon-color-iconThe stroke color for icons contained in Links.
sprk-link-has-icon-underline-colortransparentThe underline color of Links containing icons.
sprk-link-has-icon-underline-width0The underline width of Links containing icons.
sprk-link-has-icon-font-weight$sprk-font-weight-body-oneThe 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-colorThe border settings for Links with icons.
sprk-link-has-icon-hover-color-text$sprk-purple-deepThe color value for Links with icons in the hover state.
sprk-link-has-icon-hover-fill$sprk-link-has-icon-hover-color-textThe fill color for icons contained in Links on hover.
sprk-link-has-icon-hover-stroke$sprk-link-has-icon-hover-color-textThe 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-colorThe border settings for Links with icons in the hover state.
sprk-link-disabled-color$sprk-black-tint-50The disabled Link.
sprk-link-disabled-border-bottom-color$sprk-link-disabled-colorThe Disabled Link border-bottom.
sprk-link-disabled-underline-width0The underline width for the disabled Link.
sprk-link-disabled-border-bottom$sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-colorThe underline settings for the disabled Link.
sprk-link-disabled-hover-color$sprk-black-tint-50The disabled Link color on hover.
sprk-link-disabled-hover-border-bottom-color$sprk-link-disabled-colorThe disabled Link hover border-bottom.
sprk-link-disabled-hover-border-bottom$sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-colorThe underline settings for the disabled Link.
sprk-list-margin-left$sprk-space-mThe default margin left indentation on Lists.
sprk-list-indented-margin-left$sprk-space-lThe default margin left indentation on Lists.
sprk-masthead-menu-icon-width$sprk-icon-xlThe width of the menu icon on narrow viewports in the Masthead.
sprk-masthead-menu-icon-height$sprk-icon-xlThe height of the menu icon on narrow viewports in the Masthead.
sprk-masthead-bg-color$sprk-whiteThe background color of the Masthead.
sprk-masthead-content-padding$sprk-space-sThe padding around the content section in the Masthead on wide viewports.
sprk-masthead-content-padding-wide$sprk-space-mThe padding of the Masthead content, menu, and branding sections.
sprk-masthead-content-item-padding-top$sprk-space-sThe padding top around the content items in the content section of the Masthead.
sprk-masthead-content-item-padding-top-wide$sprk-space-sThe padding top around the content items in the content section of the Masthead in wide viewports.
sprk-masthead-content-item-padding-bottom$sprk-space-sThe padding bottom around the content items in the content section of the Masthead.
sprk-masthead-content-item-padding-bottom-wide$sprk-space-mThe padding bottom around the content items in the content section of the Masthead in wide viewports.
sprk-masthead-content-item-padding-right$sprk-space-sThe padding right around the content items in the content section of the Masthead.
sprk-masthead-content-item-padding-right-wide$sprk-space-mThe padding right around the content items in the content section of the Masthead in wide viewports.
sprk-masthead-content-item-padding-left$sprk-space-sThe padding left around the content items in the content section of the Masthead.
sprk-masthead-content-item-padding-left-wide$sprk-space-mThe padding left around the content items in the content section of the Masthead in wide viewports.
sprk-masthead-link-color$sprk-blackThe color of Masthead links.
sprk-masthead-link-visited-color$sprk-blackThe visited state color of Masthead links.
sprk-masthead-link-icon-hover-color$sprk-purpleThe color of Masthead Icon Links on hover.
sprk-masthead-link-font-weight500The font weight for Masthead links.
sprk-masthead-border-bottom-size1pxThe size of the bottom border on the Masthead.
sprk-masthead-border-bottom-stylesolidThe bottom border style on the Masthead.
sprk-masthead-border-bottom$sprk-masthead-border-bottom-size $sprk-masthead-border-bottom-style $sprk-grayThe bottom border on the Masthead.
sprk-masthead-border-bottom-wide0The bottom border on the Masthead on wide viewports.
sprk-masthead-site-links-border-right2px solid $sprk-black-tint-30The right border on the site links in the Masthead.
sprk-masthead-breakpoint54remThe point at which the Masthead navigation switches from narrow viewport style to large viewport style.
sprk-masthead-column-width89remThe maximum width of the Masthead.
sprk-masthead-logo-max-width192pxThe maximum width of the logo in the Masthead.
sprk-masthead-logo-min-width174pxThe minimum width of the logo in the Masthead.
sprk-masthead-shadownoneThe box shadow of the Masthead.
sprk-masthead-shadow-widenoneThe box shadow of the Masthead in wide viewports.
sprk-masthead-shadow-scroll0 0 40px rgba(0, 0, 0, 0.1)The Masthead shadow that gets applied when the page is scrolled.
sprk-masthead-selector-border2px solid $sprk-black-tint-30The border of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-padding$sprk-space-inset-short-mThe padding of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-dropdown-padding0The padding of the selector dropdown in the Masthead with Extended Navigation.
sprk-masthead-selector-min-width17remThe minimum width of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-font-color$sprk-blackThe font color of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-bg-color$sprk-whiteThe background color of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-border-color-mask-open$sprk-whiteThe bottom color that gets applied to the selector dropdown when open in the Masthead with Extended Navigation.
sprk-masthead-selector-border-radius5pxThe border radius of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-font-weight300The font weight of the selector in the Masthead with Extended Navigation.
sprk-masthead-selector-dropdown-border-bottom-mask-open2px solid $sprk-grayThe bottom border that gets applied to the selector dropdown when open in the Masthead with Extended Navigation.
sprk-masthead-selector-dropdown-box-shadow-mask-open0 5px 10px rgba(0, 0, 0, 0.1)The box shadow that gets applied to the selector dropdown when open in the Masthead with Extended Navigation.
sprk-masthead-narrow-height81pxThis 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-colorrgba(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-transitionall 0.3s ease-inThe transition applied to the Masthead.
sprk-masthead-translateYtranslateY(-100%)The transform length that gets applied when the Masthead scrolls out of view on narrow screens.
sprk-masthead-accordion-active-left-border3px solid $sprk-redThe left border of the active item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-background-color$sprk-grayThe background color of the active item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-heading-font-weight400The font weight of the active item heading in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-font-color$sprk-blackThe font color of the active item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-heading-color$sprk-blackThe font color of the active item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-font-color$sprk-blackThe font color of the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-open-line-background-color$sprk-black-tint-30The color of the line on open items in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-open-line-height2pxThe height of the line on open navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-padding$sprk-space-mThe padding of the items in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-text-alignleftThe text alignment of the items in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-border0The border of the items in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-backgroundtransparentThe background of the items in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-heading-font-weight400The font weight of the heading in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-heading-color$sprk-blackThe color of the heading in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-details-font-weight300The font weight of the details in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-details-font-color$sprk-blackThe font color of the details in the navigation links when masthead is on narrow viewports.
sprk-masthead-simple-link-icon-hover-color$sprk-blackThe color of Simple Masthead Icon Links on hover.
sprk-big-nav-column-width64remThe maximum width of the big navigation items in the navigation bar in the Masthead Extended.
sprk-big-nav-bg$sprk-whiteThe background color of the big navigation bar in the Masthead Extended.
sprk-big-nav-link-font-weight400The font weight of the big navigation link in the Masthead Extended.
sprk-big-nav-link-hover-border-bottomtransparentThe 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-padding0The padding of the big navigation links in the Masthead Extended.
sprk-big-nav-active-color$sprk-redThe underline color of the active big navigation item in the Masthead Extended.
sprk-big-nav-item-active-border-bottom0.125rem solid $sprk-redThe border bottom of the active big navigation items in the Masthead Extended.
sprk-big-nav-item-open-border-bottom$sprk-big-nav-item-active-border-bottomThe border bottom of open big navigation items in the Masthead Extended.
sprk-big-nav-item-line-height53pxThe line height of the big navigation items in the Masthead Extended.
sprk-media-gutter-tiny$sprk-space-xsThe gutter of the tiny Media object.
sprk-media-gutter-small$sprk-space-sThe gutter of the small Media object.
sprk-media-gutter$sprk-space-mThe gutter of the default (medium) Media object.
sprk-media-gutter-large$sprk-space-lThe gutter of the large Media object.
sprk-media-gutter-huge$sprk-space-xlThe gutter of the huge Media object.
sprk-menu-icon-bg-color$sprk-whiteThe background color of the menu icon.
sprk-menu-icon-stroke-width2pxThe stroke width of the menu icon.
sprk-menu-icon-stroke$sprk-blackThe stroke of the menu icon.
sprk-menu-icon-transitiontransform 0.3s ease-in-out, opacity 0.2s ease-in-outThe transition on the menu icon that turns the menu icon into an 'X'.
sprk-menu-icon-line-one-transform-origin1rem 1.5remThe 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-origin1rem 2.5remThe 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-small25remDetermines how far down from the top of the page the Modal renders at the small breakpoint.
sprk-modal-breakpoint-medium37.5remDetermines how far down from the top of the page the Modal renders at the medium breakpoint.
sprk-modal-mask-colorrgba(34, 34, 34, 0.35)The color of the mask overlay that is shown behind the Modal.
sprk-modal-color$sprk-whiteThe background color of the Modal.
sprk-modal-max-width43.75remThe maximum width of the Modal.
sprk-modal-height70%The maximum height of the Modal.
sprk-modal-shadow0 4px 5px rgba(0, 0, 0, 0.6)The box shadow on the Modal.
sprk-modal-border-radius8pxThe border radius on the Modal.
sprk-pag-max-width26remThe maximum width of the Pagination component.
sprk-pag-current-link-font-weight500The font weight of the current pagination link in the Pagination component.
sprk-pag-link-color$sprk-blackThe color of the pagination links in the Pagination component.
sprk-pag-link-font-weight400The font weight of the pagination links in the Pagination component.
sprk-pag-link-color-hover$sprk-pag-link-colorThe color of the pagination links on hover in the Pagination component.
sprk-pag-selection-color$sprk-purpleThe accent color for selected pagination links in the Pagination component.
sprk-pag-selection-link-color$sprk-whiteThe text color of the currently selected pagination link in the Pagination component.
sprk-pag-selection-link-color-hover$sprk-whiteThe text color of the currently selected pagination link on hover in the Pagination component.
sprk-pag-circle-size2emThe width and height setting of the circle around the currently selected pagination link in the Pagination component.
sprk-promo-background-color$sprk-whiteThe background color of the Promo component.
sprk-promo-border1px solid $sprk-black-tint-40The border of the Promo component.
sprk-promo-max-width42.5remThe maximum width of the Promo component.
sprk-promo-breakpoint42.5remThe Promo component breakpoint at which large viewport styles begin.
sprk-promo-image-narrow-max-height20remThe maximum height of the image in the Promo component on narrow viewports.
sprk-promo-image-narrow-max-width50%The maximum width of the image in the Promo component on narrow viewports.
sprk-promo-title-font-color$sprk-blackThe title font color of the Promo component.
sprk-promo-title-font-weight$sprk-font-weight-display-fourThe title font weight of the Promo component.
sprk-promo-subtitle-font-color$sprk-blackThe subtitle font color of the Promo component.
sprk-promo-subtitle-font-weight$sprk-font-weight-body-oneThe subtitle font weight of the Promo component.
sprk-selection-bg-color$sprk-purple-lightestBackground color of any text when selected.
sprk-selection-text-color$sprk-blackText color of any text when selected.
sprk-pre-overflowautoReset for the overflow property on pre elements.
sprk-border-radius5pxValue used for border-radius across the system.
sprk-spinner-size1.2remThe height and width of Spinners.
sprk-spinner-size-large3remThe height and width of large Spinners.
sprk-spinner-speed1sThe speed of the animation for Spinners.
sprk-spinner-thickness0.18remThe thickness of Spinners.
sprk-spinner-color$sprk-whiteThe color of Spinners.
sprk-spinner-color-dark$sprk-blackThe color of the dark Spinner.
sprk-spinner-color-primary$sprk-redThe color of the primary Spinner.
sprk-spinner-color-secondary$sprk-purpleThe color of the secondary Spinner.
sprk-stepper-bgtransparentThe background color of the Stepper.
sprk-stepper-breakpoint$sprk-split-breakpoint-xlThe minimum width at which the Stepper switches between narrow and wide layouts.
sprk-stepper-max-width480pxThe maximum width of the Stepper.
sprk-stepper-bar-color$sprk-black-tint-50The color of the bar that connects the steps in the Stepper.
sprk-stepper-bar-width2pxThe width of the bar that connects the steps in the Stepper.
sprk-stepper-bar-left-inset$sprk-space-lThe left inset of the bar that connects the steps in the Stepper.
sprk-stepper-dark-bar-color$sprk-whiteThe 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-width2pxThe border width of the Stepper icons.
sprk-stepper-icon-border-color$sprk-black-tint-50The color of the border around the Stepper icon.
sprk-stepper-icon-border-color-selected$sprk-purple-darkThe color of the step icon when the step is selected in the Stepper.
sprk-stepper-icon-border-color-selected-dark-bg$sprk-purple-lightestThe color of the step icon in front of a dark background when the step is selected in the Stepper.
sprk-stepper-icon-height16pxThe height of the step icon in the Stepper.
sprk-stepper-icon-width16pxThe width of the step icon in the Stepper.
sprk-stepper-icon-color$sprk-whiteThe color of the step icon in the Stepper.
sprk-stepper-icon-color-hover$sprk-black-tint-50The color of the step icon in the Stepper when hovered.
sprk-stepper-icon-color-selected$sprk-whiteThe color of the Stepper step icon when the step is selected.
sprk-stepper-icon-transition0.3s all ease-in-outThe transition of the Stepper step icon.
sprk-stepper-icon-z-index$sprk-layer-height-xsThe z-index of the Stepper step icon.
sprk-stepper-icon-box-shadow-selected-spread8pxThe spread value of the icon box shadow when the Stepper step is selected.
sprk-stepper-icon-box-shadow-selected0 0 0 $sprk-stepper-icon-box-shadow-selected-spread $sprk-stepper-icon-border-color-selectedThe box shadow of the Stepper step icon when the icon is selected.
sprk-stepper-icon-box-shadow-selected-dark-bg0 0 0 $sprk-stepper-icon-box-shadow-selected-spread $sprk-stepper-icon-border-color-selected-dark-bgThe 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-widthThe diameter of the step icon in the Stepper.
sprk-stepper-icon-radius$sprk-stepper-icon-diameter / 2The 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-whiteThe 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-darkThe 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-darkThe 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-whiteThe color of the step icon on hover when the Stepper has a dark background (sprk-c-Stepper--has-dark-bg).
sprk-stepper-step-content-bgtransparentThe background color of the content in the Stepper step.
sprk-stepper-step-content-bg-selectedtransparentThe 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-widthThe margin-left of the content in the Stepper step.
sprk-stepper-step-description-border-radius5pxThe border radius of the Stepper step content box when it has a description.
sprk-stepper-step-description-box-shadow0 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-mThe spacing between the Stepper step heading and description.
sprk-stepper-step-description-bg-selected$sprk-whiteThe background color of the Stepper step content box when it has a description and when the step is selected.
sprk-stepper-step-heading-font-weight400The font weight of the Stepper step heading.
sprk-stepper-step-heading-size$sprk-font-size-display-sixThe font size of the Stepper step heading.
sprk-stepper-step-heading-color$sprk-blackThe color of the Stepper step heading.
sprk-stepper-step-heading-color-selected$sprk-blackThe color of the Stepper step heading when the step is selected.
sprk-stepper-step-padding$sprk-space-misc-aThe padding value for the Stepper step.
sprk-stepper-dark-step-heading-color$sprk-whiteThe 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-blackThe 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-timing0.3sThe timing setting for the slides of the Stepper.
sprk-stepper-slider-text-fade-in-timing0.6sThe text fade in timing for the Stepper.
sprk-stepper-slider-text-fade-in-delay0.2sThe text fade in delay for the Stepper.
sprk-table-padding-small$sprk-space-inset-sThe small Table padding.
sprk-table-padding-medium$sprk-space-inset-mThe medium Table padding.
sprk-table-padding-large$sprk-space-inset-lThe large Table padding.
sprk-table-cell-alignmentcenterThe Table cell alignment.
sprk-table-stripe-color$sprk-grayThe stripe color or the striped Table.
sprk-table-highlight-color$sprk-redThe highlight background color of the sprk-b-TableHighlight.
sprk-table-highlight-text-color$sprk-whiteThe highlight text color of the sprk-b-TableHighlight.
sprk-table-heading-alignmentcenterThe heading alignment of in Tables.
sprk-table-border-width1pxThe border width on Tables.
sprk-table-border-stylesolidThe border style on Tables.
sprk-table-border-color$sprk-blackThe border color on Tables.
sprk-table-border-collapsecollapseThe border collapse setting on Tables.
sprk-table-row-border-width1pxThe border width on Table rows.
sprk-table-row-border-stylesolidThe border style on Table rows.
sprk-table-row-border-color$sprk-grayThe border color on Table rows.
sprk-table-header-background-color$sprk-blackThe background color of the Table header.
sprk-table-header-font-color$sprk-whiteThe font color of the Table header.
sprk-table-header-font-size$sprk-font-size-body-oneThe font size of the Table header.
sprk-table-header-font-weight$sprk-font-weight-body-oneThe font weight of the Table header.
sprk-table-header-border-spacing2pxThe width of the right border on the Table header.
sprk-table-header-border-color$sprk-whiteThe color of the right border on the Table header.
sprk-table-empty-heading-background-color$sprk-whiteThe background color of empty Table headers.
sprk-table-secondary-header-background-color$sprk-whiteThe background color of Secondary Table headers.
sprk-table-secondary-header-font-color$sprk-blackThe font color of Secondary Table headers.
sprk-table-secondary-header-text-alignmentleftThe text alignment of Secondary Table headers.
sprk-table-secondary-header-border-spacing0The width of the right border on the Secondary Table header.
sprk-table-secondary-header-border-color$sprk-whiteThe color of the right border on the Secondary Table header.
sprk-table-secondary-cell-text-alignmentleftThe text alignment of Secondary Table cells.
sprk-table-grouped-header-background-color$sprk-blackThe background color of the header in the Grouped Columns Table variant.
sprk-table-grouped-header-font-size$sprk-font-size-body-fourThe font size of the header in the Grouped Columns Table variant.
sprk-table-grouped-header-font-weightnormalThe font weight of the header in the Grouped Columns Table variant.
sprk-table-secondary-row-comp-row-spacing0 15pxThe distance between the borders of adjacent cells in the Secondary Row Comparison Table (horizontal | vertical).
sprk-table-secondary-row-comp-border-color$sprk-grayThe color of the borders in the Secondary Row Comparison Table cells.
sprk-table-secondary-row-comp-border-width1pxThe width of the borders in the Secondary Row Comparison Table cells.
sprk-table-secondary-row-comp-border-stylesolidThe style of the borders in the Secondary Row Comparison Table cells.
sprk-tab-navigation-btn-active-color$sprk-redThe button tab text color of the currently active tab in Tabbed Navigation.
sprk-tab-navigation-btn-active-border-bottom3px solid $sprk-redThe button tab bottom border of the currently active tab in Tabbed Navigation.
sprk-tab-navigation-btn-active-bg-color$sprk-whiteThe button tab background color of the currently active tab in Tabbed Navigation.
sprk-tab-navigation-btn-color$sprk-blackThe tab button text color in Tabbed Navigation.
sprk-tab-navigation-btn-bg-color$sprk-grayThe tab button background color in Tabbed Navigation.
sprk-tab-navigation-btn-border-bottom3px solid $sprk-grayThe border on the bottom of the button tabs in Tabbed Navigation.
sprk-tab-navigation-btn-hover-border-bottom3px solid $sprk-purpleThe border on the bottom of the button tabs on hover in Tabbed Navigation.
sprk-tab-navigation-btn-hover-color$sprk-purpleThe button tab text color of the button tabs on hover in Tabbed Navigation.
sprk-tab-navigation-breakpoint46remThe breakpoint at which the tabs go from stacked layout to side by side in Tabbed Navigation.
sprk-toggle-trigger-border-topnoneThe top border style for Toggle Trigger.
sprk-toggle-trigger-border-rightnoneThe right border style for Toggle Trigger.
sprk-toggle-trigger-border-bottom$sprk-link-has-icon-border-bottomThe bottom border style for Toggle Trigger.
sprk-toggle-trigger-border-leftnoneThe left border style for Toggle Trigger.
sprk-toggle-trigger-text-decoration$sprk-link-text-decorationThe text decoration style Toggle Trigger.
sprk-toggle-trigger-transition$sprk-link-transitionThe transition for Toggle Trigger.
sprk-toggle-trigger-hover-border-bottom$sprk-link-has-icon-hover-border-bottomThe hover border bottom style for Toggle Trigger.
sprk-toggle-trigger-hover-color$sprk-purpleThe hover text color for Toggle Trigger.
sprk-toggle-trigger-background-colortransparentThe background color for Toggle Trigger.
sprk-toggle-trigger-padding-top0The padding top for Toggle Trigger.
sprk-toggle-trigger-padding-right0The padding right for Toggle Trigger.
sprk-toggle-trigger-padding-bottom0The padding bottom for Toggle Trigger.
sprk-toggle-trigger-padding-left0The padding left for Toggle Trigger.
sprk-toggle-trigger-text-alignleftThe text alignment for Toggle Trigger.
sprk-toggle-trigger-font-size-small$sprk-font-size-body-fourThe font size for small Toggle Trigger.
sprk-toggle-trigger-font-weight-smallnormalThe font weight for small Toggle Trigger.
sprk-toggle-icon-hover-fill$sprk-toggle-trigger-hover-colorThe hover fill color for Toggle icon.
sprk-toggle-transition-timing0.3s easeThe transition timing for the rotation of the icon when the Toggle is opened.
sprk-tooltip-caret-offset1remThe space that the Tooltip's caret is offset from the edge.
sprk-tooltip-caret-background-color$sprk-blackThe background color for the tooltip caret.
sprk-tooltip-caret-width16pxThe width of the tooltip caret.
sprk-tooltip-trigger-hover-offset1remThe surrounding hover area around the trigger when the Tooltip is visible.
sprk-tooltip-trigger-bordernoneThe border for the tooltip trigger.
sprk-tooltip-trigger-background-colortransparentThe background color for the tooltip trigger.
sprk-tooltip-trigger-padding0The padding for the tooltip trigger.
sprk-tooltip-trigger-text-alignleftThe text align for the tooltip trigger.
sprk-tooltip-background-color$sprk-blackThe background color for the tooltip.
sprk-tooltip-text-alignleftThe text align for the tooltip.
sprk-tooltip-padding$sprk-space-inset-short-mThe padding for the tooltip.
sprk-tooltip-font-color$sprk-whiteThe font color for the tooltip.
sprk-tooltip-font-weight300The font weight for the tooltip.
sprk-tooltip-font-size$sprk-font-size-body-fourThe font size for the tooltip.
sprk-tooltip-border-radius4pxThe border radius for the tooltip.
sprk-tooltip-toggled-icon-background-color$sprk-purpleThe background color for the tooltip icon while toggled.
sprk-tooltip-z-index$sprk-layer-height-xsThe z-index of the tooltip.
sprk-tooltip-max-width328pxThe 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-widthmax-contentThe preferred width of the tooltip.
sprk-tooltip-min-width60pxThe min-width of the tooltip.
sprk-tooltip-transitionall 200ms ease-outThe transition applied to the tooltip.
sprk-tooltip-animation-offset0.5remThe distance the tooltip should move during its animation.
sprk-vertical-list-delimiter',\00A0'The delimiter between delimited items in Vertical List components.