Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Sass Variables

Spark uses Sass variables to provide global settings for the system. These settings can be overridden if needed. You will need to create a new Sass file that is imported before the main Spark Sass file. In that file, you can assign a new value to any of the variables below.

VariableDefault ValueDescription
sprk-blackrgb(51, 51, 51)Color value for black.
sprk-black-tint-75rgb(64, 64, 64)Color value for black at 75%.
sprk-black-tint-50rgb(128, 128, 128)Color value for black at 50%.
sprk-black-tint-25rgb(190, 190, 190)Color value for black at 25%.
sprk-bluergb(0, 125, 186)Color value for blue.
sprk-blue-tint-75rgb(73, 144, 195)Color value for blue at 75%.
sprk-blue-tint-50rgb(118, 172, 210)Color value for blue at 50%.
sprk-blue-tint-25rgb(164, 199, 225)Color value for blue at 25%.
sprk-grayrgb(247, 247, 247)Color value for gray.
sprk-gray-darkrgb(207, 207, 207)Color value for dark gray.
sprk-greenrgb(0, 132, 115)Color value for green.
sprk-green-darkrgb(0, 118, 103)Color value for dark green.
sprk-green-tint-75rgb(64, 198, 178)Color value for green at 75%.
sprk-green-tint-50rgb(128, 217, 203)Color value for green at 50%.
sprk-green-tint-25rgb(191, 236, 229)Color value for green at 25%.
sprk-redrgb(200, 16, 46)Color value for red.
sprk-mid-redrgb(157,34,53)Color value for mid red.
sprk-deep-redrgb(118,35,47)Color value for deep red.
sprk-red-tint-75rgb(214, 76, 98)Color value for red 75%.
sprk-red-tint-50rgb(227, 135, 150)Color value for red at 50%.
sprk-red-tint-25rgb(241, 195, 203)Color value for red at 25%.
sprk-selection-bg-color$sprk-green-tint-50Setting for the background color of any text when selected.
sprk-selection-text-color$sprk-blackSetting for the color of any text when selected.
sprk-pre-overflowautoReset for the overflow property on pre elements.
sprk-blockquote-source-prefix'-'The content property value of the before pseudo-element on the Blockquote component.
sprk-blockquote-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 in the Blockquote component.
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-stack-xs0 0 4px 0Value for the extra small stack space.
sprk-space-stack-s0 0 8px 0Value for the small stack space.
sprk-space-stack-m0 0 16px 0Value for the medium stack space.
sprk-space-stack-l0 0 32px 0Value for the large stack space.
sprk-space-stack-xl0 0 64px 0Value for the extra large stack 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 inset tall 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 space setting.
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-icon-m16pxValue for height and width of the Icon component.
sprk-icon-l32pxValue for height and width of the large Icon component.
sprk-icon-xl64pxValue for height and width of the extra large Icon component.
sprk-icon-xxl128pxValue for height and width of the extra extra large Icon component.
sprk-icon-fill-colornoneValue for the fill property of the Icon component.
sprk-icon-stroke-color$sprk-blackValue for the stroke property of the 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-icon-using-custom-stroketrueBoolean value for if a custom Icon stroke is desired.
sprk-icon-custom-stroke-width-s1pxValue for a small custom stroke width on the Icon component.
sprk-icon-custom-stroke-width-m1.5pxValue for a medium custom stroke width on the Icon component.
sprk-icon-custom-stroke-width-l2pxValue for a large custom stroke width on the Icon component.
sprk-icon-custom-stroke-width-xl3pxValue for an extra large custom stroke width on the Icon component.
sprk-centered-column-width1232pxWidth value for the Centered Column layout container.
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-xl99999The extra large z-index value setting.
sprk-horizontal-list-spacing$sprk-space-mThe default spacing value for Horizontal List components.
sprk-horizontal-list-spacing-tiny$sprk-space-xsThe tiny spacing value for tiny Horizontal List components.
sprk-horizontal-list-spacing-small$sprk-space-sThe small spacing value for small Horizontal List components.
sprk-horizontal-list-spacing-medium$sprk-space-mThe medium spacing value for medium Horizontal List components.
sprk-horizontal-list-spacing-large$sprk-space-lThe large spacing value for large Horizontal List components.
sprk-horizontal-list-spacing-huge$sprk-space-xlThe huge spacing value for huge Horizontal List components.
sprk-horizontal-list-delimiter','The delimiter between delimited items in Horizonatal List components.
sprk-vertical-list-delimiter',\00A0'The delimiter between delimited items in the Vertical List component.
sprk-pag-max-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-color-hover$sprk-pag-link-colorThe color of the pagination links on hover in the Pagination component.
sprk-pag-link-font-weight400The font weight of the pagination links in the Pagination component.
sprk-pag-selection-color$sprk-greenThe 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-measure40remThe max-width value for the .sprk-u-Measure class.
sprk-narrow-measure25remThe max-width value for the .sprk-u-Measure--narrow class.
sprk-typography-breakpoint54remThe breakpoint used for typography.
sprk-using-webfontsfalseBoolean value for if the app is using webfonts.
sprk-font-displayswapThe supplied value will be set on all generated Font-face calls, as font-display. The default is 'swap.'
sprk-webfonts''Expects a Sass List containing one or more nested Sass Lists. The nested lists should each contain: A List of urls to download a font, the name of the font and the weight of the font.
sprk-page-title-mark-color$sprk-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.
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-color-display-one$sprk-blackThe color of TypeDisplayOne.
sprk-font-family-display-oneRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayOne.
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 the TypeDisplayOne font when the viewport is wider than $sprk-font-size-display-one-breakpoint.
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-font-weight-display-oneboldThe weight of the TypeDisplayOne font.
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 TypeDisplayOne when the viewport is wider than $sprk-font-size-display-one-breakpoint.
sprk-color-display-two$sprk-blackThe color of TypeDisplayTwo.
sprk-font-family-display-twoRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayTwo.
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 the TypeDisplayTwo font when the viewport is wider than $sprk-font-size-display-two-breakpoint.
sprk-type-display-two-breakpoint43.75remThe width of the viewport at which to switch the TypeDisplayTwo font size from $sprk-font-size-display-two to $sprk-font-size-display-two-wide.
sprk-font-weight-display-twoboldThe font weight of TypeDisplayTwo.
sprk-line-height-display-two1The line height of TypeDisplayTwo when the viewport is narrower than $sprk-font-size-display-two-breakpoint.
sprk-line-height-display-two-wide1The line height of TypeDisplayTwo when the viewport is wider than $sprk-font-size-display-two-breakpoint.
sprk-color-display-three$sprk-blackThe color of TypeDisplayThree.
sprk-font-family-display-threeRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayThree.
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-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-font-weight-display-three300The font weight of TypeDisplayThree.
sprk-line-height-display-three1.6The line height of TypeDisplayThree when the viewport is narrower than $sprk-font-size-display-three-breakpoint.
sprk-line-height-display-three-wide1.32The line height of TypeDisplayThree when the viewport is wider than $sprk-font-size-display-three-breakpoint.
sprk-color-display-four$sprk-blackThe color of TypeDisplayFour.
sprk-font-family-display-fourRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayFour.
sprk-font-size-display-four1.625remThe font size of TypeDisplayFour.
sprk-font-weight-display-fourboldThe font weight of TypeDisplayFour.
sprk-line-height-display-four1.23The line height of TypeDisplayFour.
sprk-color-display-five$sprk-blackThe color of TypeDisplayFive.
sprk-font-family-display-fiveRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplayFive.
sprk-font-size-display-five1.25remThe font size of TypeDisplayFive.
sprk-font-weight-display-five500The font weight of TypeDisplayFive.
sprk-line-height-display-five1.2The line height of TypeDisplayFive.
sprk-color-display-six$sprk-blackThe color of TypeDisplaySix.
sprk-font-family-display-sixRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplaySix.
sprk-font-size-display-six1.25remThe font size of TypeDisplaySix.
sprk-font-weight-display-six300The font weight of TypeDisplaySix.
sprk-line-height-display-six1.2The line height of TypeDisplaySix.
sprk-font-family-display-sevenRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeDisplaySeven.
sprk-font-size-display-seven1remThe font size of TypeDisplaySeven.
sprk-color-display-seven$sprk-blackThe color of TypeDisplaySeven.
sprk-line-height-display-seven1The line height of TypeDisplaySeven.
sprk-font-weight-display-seven500The font weight of TypeDisplaySeven.
sprk-font-family-body-oneRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyOne.
sprk-font-size-body-one1remThe font size of TypeBodyOne.
sprk-color-body-one$sprk-blackThe color of TypeBodyOne.
sprk-line-height-body-one1.6The line height of TypeBodyOne.
sprk-font-weight-body-one500The font weight of TypeBodyOne.
sprk-font-family-body-twoRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyTwo.
sprk-font-size-body-two1remThe font size of TypeBodyTwo.
sprk-color-body-two$sprk-blackThe color of TypeBodyTwo.
sprk-line-height-body-two1.6The line height of TypeBodyTwo.
sprk-font-weight-body-two300The font weight of TypeBodyTwo.
sprk-font-family-body-threeRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyThree.
sprk-font-size-body-three1remThe font size of TypeBodyThree.
sprk-color-body-three$sprk-blackThe color of TypeBodyThree.
sprk-line-height-body-three2The line height of TypeBodyThree.
sprk-font-weight-body-three300The font weight of TypeBodyThree.
sprk-font-family-body-fourRocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serifThe font-family, including fallbacks of TypeBodyFour.
sprk-font-size-body-four0.8125remThe font size of TypeBodyFour.
sprk-color-body-four$sprk-blackThe color of the TypeBodyFour.
sprk-line-height-body-four1.84The line height of TypeBodyFour.
sprk-font-weight-body-four300The font weight of 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-border-radius5pxValue used for border-radius across the system.
sprk-alert-border-radius4pxValue for border-radius on the Alert component.
sprk-alert-border1px solid $sprk-grayValue for border on the Alert component.
sprk-alert-shadow0 3px 10px 1px rgba(0, 0, 0, 0.08)Value for shadow on the Alert component.
sprk-alert-color$sprk-blackValue for color of the Alert component.
sprk-alert-bg-color$sprk-whiteThe background color of the default Alert component.
sprk-alert-icon-size32pxSets the height and width of the two icons used in 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 24px $sprk-space-m $sprk-space-mThe padding around the dismiss icon in the Alert component.
sprk-alert-icon-margin0 $sprk-space-misc-a 0 0The margin for the icon in the Alert component.
sprk-alert-dismiss-icon-color$sprk-blackThe color of the dimiss icon in the Alert component.
sprk-alert-dismiss-icon-size$sprk-space-mThe size of the dimiss icon in the Alert component.
sprk-alert-icon-color-info$sprk-blueThe icon color of the Information Alert component.
sprk-alert-border-info1px solid $sprk-blueThe border value of the Information Alert component.
sprk-alert-bg-color-inforgb(241, 250, 255)The background color of the Information Alert component.
sprk-alert-text-color-info$sprk-blackThe value for the color property in the Information Alert component.
sprk-alert-icon-color-success$sprk-greenThe icon color of the Success Alert component.
sprk-alert-border-success1px solid $sprk-greenThe border value of the Success Alert component.
sprk-alert-bg-color-successrgb(237, 253, 251)The background color of the Success Alert component.
sprk-alert-text-color-success$sprk-blackThe value for the color property in the Success Alert component.
sprk-alert-icon-color-fail$sprk-yellowThe icon color of the Fail Alert component.
sprk-alert-border-fail1px solid $sprk-yellowThe border value of the Fail Alert component.
sprk-alert-bg-color-failrgb(255, 248, 232)The background color of the Fail Alert component.
sprk-alert-text-color-fail$sprk-blackThe value for the color property in the Fail Alert component.
sprk-promo-background-color$sprk-whiteThe background color of the Promo component.
sprk-promo-border1px solid $sprk-grayThe 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 width of the image in the Promo component on narrow viewports.
sprk-promo-image-narrow-max-width50%The background color of the Promo component.
sprk-promo-title-font-color$sprk-blackThe background color of the Promo component.
sprk-promo-title-font-weight$sprk-font-weight-display-fourThe background color of the Promo component.
sprk-promo-subtitle-font-color$sprk-blackThe background color of the Promo component.
sprk-promo-subtitle-font-weight$sprk-font-weight-body-oneThe background color of the Promo component.
sprk-btn-background-color$sprk-greenThe background color of the Button component.
sprk-btn-shadow0 3px 10px rgba(20, 20, 20, 0.08)The 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-font-weight500The font weight of the Button component.
sprk-btn-font-sizeinheritThe font size of the Button component.
sprk-btn-font-familyinheritThe font family value 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-border-radius4pxThe border radius of the Button component.
sprk-btn-hover-background-color$sprk-green-darkThe 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-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 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-gray-darkThe 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-shadownoneThe box shadow of the Disabled Button component.
sprk-btn-secondary-disabled-background-colortransparentThe background color of the Disabled Button component.
sprk-btn-secondary-disabled-text-color$sprk-gray-darkThe text color of the Secondary Button component when disabled.
sprk-btn-secondary-disabled-border-color$sprk-gray-darkThe 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-tertiary-disabled-shadownoneThe box shadow of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-bordernoneThe border value of the Tertiary Button component when disabled.
sprk-btn-secondary-background-color$sprk-whiteThe background color of the Secondary Button component.
sprk-btn-secondary-border-color$sprk-gray-darkThe border color of the Secondary Button component.
sprk-btn-secondary-text-color$sprk-blackThe text color of the Secondary Button component.
sprk-btn-secondary-hover-text-color$sprk-blackThe hover text color of the Secondary Button component.
sprk-btn-secondary-hover-background-color$sprk-whiteThe background color of the Secondary Button component on hover.
sprk-btn-secondary-hover-border-color$sprk-blackThe border color of the Secondary Button component on hover.
sprk-btn-secondary-hover-shadow0 3px 10px rgba(20, 20, 20, 0.08)The box shadow of the Secondary Button component on hover.
sprk-btn-secondary-letter-spacing0.62pxThe letter spacing of the Secondary Button component.
sprk-btn-tertiary-background-colortransparentThe background color of the Tertiary Button component.
sprk-btn-tertiary-bordernoneThe border of the Tertiary Button component.
sprk-btn-tertiary-text-color$sprk-blackThe text color of the Tertiary Button component.
sprk-btn-tertiary-underline-width0.125emThe underline width of the Tertiary Button component.
sprk-btn-tertiary-underline-padding-top0.125emThe vertical distance between the underline and the text for the Tertiary Button component.
sprk-btn-tertiary-underline-color$sprk-gray-darkThe color of the underline for the Tertiary Button component.
sprk-btn-tertiary-hover-text-color$sprk-blackThe text color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-underline-color$sprk-blackThe underline color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-background-colortransparentThe background color of the Tertiary Button component on hover.
sprk-btn-tertiary-hover-shadownoneThe box shadow of the Tertiary Button component on hover.
sprk-btn-tertiary-disabled-background-colortransparentThe background color of the Tertiary Button component when disabled.
sprk-btn-tertiary-disabled-text-color$sprk-gray-darkThe text color of the Tertiary Button component when disabled.
sprk-btn-tertiary-letter-spacingnormalThe letter spacing of the Tertiary Button component.
sprk-link-transition0.3sThe transition timing for hover, active and focus styles on Links.
sprk-link-color$sprk-blackThe default color on Links.
sprk-link-font-weight$sprk-font-weight-body-oneThe font weight on Links.
sprk-link-text-decorationnoneThe text decoration on Links.
sprk-link-underline-color$sprk-gray-darkThe color of the underline on Links.
sprk-link-underline-width0.09375remThe underline width 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-colorThe style of the underline on Links.
sprk-link-hover-color$sprk-blackThe 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-color$sprk-black-tint-75The color of visited Links.
sprk-link-underline-visited-color$sprk-gray-darkThe color of the underline on visited Links.
sprk-link-visited-border-bottom$sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-visited-colorThe style of the underline on visited Links.
sprk-link-simple-color$sprk-blackThe color value of Simple Links.
sprk-link-simple-underline-colortransparentThe underline color of Simple Links.
sprk-link-simple-underline-width0.0625remThe underline width of Simple Links.
sprk-link-simple-font-weight$sprk-font-weight-body-twoThe font weight of Simple Links.
sprk-link-simple-hover-color$sprk-blackThe color of Simple Links on hover.
sprk-link-simple-hover-underline-width0.0625remThe underline width of Simple Links on hover.
sprk-link-simple-hover-underline-color$sprk-blackThe underline color of Simple Links on hover.
sprk-link-simple-border-bottom$sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-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-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-has-icon-color-icon$sprk-greenThe color of icons in Links containing icons.
sprk-link-has-icon-font-weight$sprk-font-weight-body-oneThe font weight of Links containing icons.
sprk-link-has-icon-underline-width0The underline width of Links containing icons.
sprk-link-has-icon-underline-colortransparentThe underline color of Links containing icons.
sprk-link-has-icon-filltransparentThe fill color for icons contained in Links.
sprk-link-has-icon-border-bottom$sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-colorThe border settings for Links with icons.
sprk-link-has-icon-hover-border-bottom$sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-colorThe border settings for Links with icons in the hover state.
sprk-link-has-icon-hover-color-text$sprk-greenThe color value for Links with icons in the hover state.
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-disabled-color$sprk-gray-darkThe disabled Link color.
sprk-link-disabled-font-weight$sprk-font-weight-body-oneThe disabled Link font weight.
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-border-bottom$sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-colorThe underline settings for the disabled Link on hover.
sprk-list-margin-left$sprk-space-mThe default margin left indentation on Lists.
sprk-list-indented-margin-left$sprk-space-lThe extended indentation (margin left) on Indented Lists.
sprk-monetary-symbol'$'The symbol used to denote currency for Monetary Inputs.
sprk-fieldset-padding$sprk-space-m 0 0 0The value for padding applied to fieldset elements.
sprk-input-container-margin0 0 $sprk-space-l 0The value used for margin around Input containers.
sprk-input-container-narrow-max-width6.5remThe value used for the maximum width of an icon container using the .sprk-b-InputContainer__icon-container--narrow modifier.
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-container-huge-max-width37.5remThe max-width setting for Huge Inputs.
sprk-input-huge-height$sprk-text-input-huge-heightThe height value for Huge Inputs.
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-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-select-input-huge-padding-right45pxThe padding right value for Huge Inputs.
sprk-input-huge-label-padding0 ($sprk-space-misc-a + $sprk-input-huge-border-width)The label padding value for Huge Inputs.
sprk-input-huge-focus-border-width$sprk-text-input-huge-focus-border-widthThe border width for 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 placeholder delay value for Huge Inputs.
sprk-input-huge-placeholder-transition-property$sprk-text-input-huge-placeholder-transition-propertyThe transition placeholder value for Huge Inputs.
sprk-input-huge-placeholder-opacity$sprk-text-input-huge-placeholder-opacityThe placeholder opacity for Huge Inputs.
sprk-input-huge-placeholder-active-opacity$sprk-text-input-huge-placeholder-active-opacityThe placeholder opacity for Huge Inputs when they are active.
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-label-active-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-focus-label-color$sprk-text-input-huge-focus-label-colorThe label color value of Huge Inputs on focus.
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-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-select-input-huge-icon-margin-top-(( $sprk-input-huge-height - $sprk-icon-m ) / 2 + $sprk-icon-m)The margin-top value for icons in Huge Select Inputs.
sprk-text-input-huge-has-text-icon-padding0 40pxThe padding value for Huge Inputs with 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-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 for Inputs.
sprk-text-input-box-shadownoneThe box shadow for Inputs.
sprk-text-input-padding0 $sprk-space-mThe padding for Inputs.
sprk-text-input-focus-border-color$sprk-greenThe border color on Inputs when focused.
sprk-text-input-error-border-color$sprk-yellowThe 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-background-color$sprk-gray-darkThe background color on disabled Inputs.
sprk-text-input-disabled-box-shadownoneThe box shadow on disabled Inputs.
sprk-text-input-disabled-color$sprk-black-tint-50The color setting on disabled Inputs.
sprk-text-input-readonly-border-color$sprk-black-tint-50The border color setting on readonly Inputs.
sprk-text-input-readonly-color$sprk-black-tint-50The color setting on readonly Inputs.
sprk-text-input-transitionborder-color 0.15s easeThe transition setting Inputs.
sprk-select-appearancenoneThe value for the appearance property for Selects.
sprk-select-backgroundnoneThe background setting for Selects.
sprk-select-border$sprk-text-input-borderThe border setting for Selects.
sprk-select-focus-border-color$sprk-text-input-focus-border-colorThe border color setting for Selects on focus.
sprk-select-error-border-color$sprk-text-input-error-border-colorThe border color setting for Selects when they have an error.
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-color$sprk-text-input-colorThe value for the color property for Selects.
sprk-select-font-size$sprk-text-input-font-sizeThe font size of Selects.
sprk-select-font-family$sprk-text-input-font-familyThe font family of Selects.
sprk-select-font-weight$sprk-text-input-font-weightThe font weight of Selects.
sprk-select-line-height$sprk-text-input-line-heightThe line height of Selects.
sprk-select-outline$sprk-text-input-outlineThe outline setting for Selects.
sprk-select-padding12px 45px 12px 13pxThe padding of 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-select-arrow-stroke-width6pxThe stroke width of the icon in Selects.
sprk-select-disabled-border-color$sprk-text-input-disabled-border-colorThe border color of disabled Selects.
sprk-select-disabled-background-color$sprk-text-input-disabled-background-colorThe background color of disabled Selects.
sprk-select-disabled-color$sprk-text-input-disabled-colorThe color property value of 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-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-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-input-huge-max-width500px The max-width of the huge checkbox input.
sprk-checkbox-huge-container-transition$sprk-checkbox-transitionThe transition of the huge checkbox input.
sprk-checkbox-huge-container-border2px $sprk-black-tint-50 solidThe 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-box-shadownoneThe box shadow of the huge checkbox input when disabled.
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-background$sprk-text-input-disabled-background-colorThe background of the huge checkbox input when disabled.
sprk-checkbox-huge-container-focus-border-color$sprk-greenThe 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-greenThe border color of the huge checkbox input when checked.
sprk-checkbox-huge-container-checked-hover-border-color$sprk-blackThe border color of the huge checkbox input when checked and hovered.
sprk-checkbox-huge-container-focus-checked-border-color$sprk-blackThe border color of the huge checkbox input when checked and focused.
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-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-hover-border-color$sprk-blackThe border color of the custom checkbox element of the huge checkbox input when hovered.
sprk-checkbox-huge-custom-input-disabled-border-color$sprk-black-tint-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-greenThe border color of the custom checkbox element of the huge checkbox input when checked.
sprk-checkbox-huge-checkmark-icon-height0.5remThe height of the checkmark inside of the huge checkbox input.
sprk-checkbox-huge-checkmark-icon-width0.75remThe width of the checkmark inside of the huge checkbox input.
sprk-checkbox-huge-checkmark-icon-left22pxThe left value of the checkmark inside of the huge checkbox input.
sprk-checkbox-huge-checkmark-icon-top22pxThe top value of the checkmark inside of the huge checkbox input.
sprk-text-input-error-color$sprk-yellowColor setting for Inputs with errors.
sprk-input-error-text-color$sprk-blackValue for color on Inputs with errors.
sprk-input-error-text-font-family$sprk-font-family-body-twoThe font family used for Input error text.
sprk-input-error-text-font-weight400The font weight used for Input error text.
sprk-input-error-text-font-size0.8125remThe font size used for Input error text.
sprk-input-error-text-line-height1.4The line height used for Input error text.
sprk-input-error-text-margin0 0 0 6pxThe margin for Input error text.
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-helper-color$sprk-black-tint-75The color of the helper text for Inputs.
sprk-helper-font-size0.8125remThe font size of the helper text for Inputs.
sprk-helper-font-family$sprk-text-input-font-familyThe font family 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-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-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-family$sprk-text-input-font-familyThe font family of the placeholder for Inputs.
sprk-placeholder-font-weight$sprk-text-input-font-weightThe font weight 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 the selection container for Inputs.
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-greenColor used internally by Date Picker to highlight elements
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 on wide viewports in the Date Picker.
sprk-date-picker-header-border1px solid $sprk-grayThe border setting 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-header-font-weight700The font weight for the header in the Date Picker.
sprk-date-picker-header-padding0 0 $sprk-space-s 0The padding for the header in the Date Picker.
sprk-date-picker-col-header-padding10pxThe padding around the month header in the Date Picker popup.
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-input-text-icon-offset-x$sprk-space-mThe X offset of text icons inside Inputs.
sprk-input-text-icon-offset-y2emThe Y offset of text icons inside Inputs.
sprk-input-text-icon-font-size1remThe font size of text icons inside Inputs.
sprk-input-text-icon-font-weight700The font weight of text icons inside Inputs.
sprk-input-has-icon-right-top38pxThe top offset of the icon displayed on the right side of Inputs.
sprk-input-has-icon-right-left71pxThe font size of text icons inside Inputs.
sprk-text-input-has-text-icon-padding0 0 1px 37pxThe font size of text icons inside Inputs.
sprk-input-has-icon-padding-right0 37px 1px 12pxThe font size of text icons inside Inputs.
sprk-text-input-huge-has-text-icon-padding0 40pxThe font size of text icons inside Inputs.
sprk-input-text-icon-z-index$sprk-layer-height-xsThe font size 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-text-input-has-icon-padding12px 0 12px 40pxThe padding inside Inputs that contain icons.
sprk-input-icon-z-index$sprk-layer-height-xsThe z-index applied to the icon inside Inputs.
sprk-label-padding0The padding applied to Input labels.
sprk-label-font-family$sprk-font-family-body-twoThe font family 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.
sprk-label-line-height1The line height applied to Input labels.
sprk-label-margin0 0 $sprk-space-s 0The margin applied to Input labels.
sprk-visibility-control-margin6px 0 0 0The margin surrounding visibility controls (Ex. 'Show SSN').
sprk-visibility-control-label-font-size$sprk-label-font-sizeThe font size used for visibility controls.
sprk-label-disabled-color$sprk-black-tint-50The color of the disabled Input labels.
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-outer-circle-hover-border2px solid $sprk-black-tint-75The border of the outer circle in the radio input on hover.
sprk-radio-input-outer-circle-focus-border2px solid $sprk-greenThe 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-border-radius50%The border radius of the circle in the radio input.
sprk-radio-input-inner-circle-background-color$sprk-greenThe background color of the inner circle in the radio input.
sprk-radio-input-outer-circle-border-checked2px solid $sprk-greenThe 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-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-height1remThe height 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-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-height0.5remThe height of the inner 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-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-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 $sprk-black-tint-50 solidThe 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%The 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-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-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-focused-label-border$sprk-greenThe border color of the huge radio input label when it has focus.
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-checked-label-border$sprk-greenThe border color of the huge radio input label when it is selected.
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-greenThe 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-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-box-shadow-hover-disablednoneThe box shadow of the outer circle of the huge radio input when it is disabled and hovered.
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 of Tables.
sprk-table-border-color$sprk-blackThe border color of Tables.
sprk-table-border-collapsecollapseThe border collapse setting of Tables.
sprk-table-row-border-width1pxThe width of the bottom border on Table rows.
sprk-table-row-border-stylesolidThe style of the bottom border on Table rows.
sprk-table-row-border-color$sprk-grayThe color of the bottom border 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-cell-text-alignmentleftThe text alignment of Secondary Table cells.
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-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-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-table-secondary-row-comp-border-color$sprk-grayThe color of the borders in the Secondary Row Comparison Table cells.
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-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-stack-spacing-tiny$sprk-space-xs The 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-divider-colorrgb(230, 230, 230)The value for color of Dividers.
sprk-divider-border2px solid $sprk-divider-colorThe value of border for Dividers.
sprk-accordion-max-width53.125remThe maximum width of Accordions.
sprk-accordion-border$sprk-divider-borderThe border of Accordions.
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-text-alignleftThe text-align value of the Accordion item summary.
sprk-accordion-summary-bordernoneThe border of the Accordion item summary.
sprk-accordion-summary-active-color$sprk-greenThe color of the icon in the summary when the Accordion item is open or 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-accordion-summary-text-decorationnoneThe text decoration of the Accordion item summary.
sprk-accordion-summary-active-text-decorationnoneThe text decoration of the Accordion item summary when active.
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-link-has-icon-hover-color-textThe 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-transition-timing0.3s easeThe transition timing for the rotation of the icon when the Toggle is opened.
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-font-color$sprk-whiteThe font color for the tooltip.
sprk-tooltip-text-alignleftThe text align for the tooltip.
sprk-tooltip-font-weight300The font weight for the tooltip
sprk-tooltip-padding$sprk-space-inset-short-mThe padding for the tooltip.
sprk-tooltip-border-radius4pxThe border radius for the tooltip.
sprk-tooltip-font-size$sprk-font-size-body-fourThe font size for the tooltip.
sprk-tooltip-caret-background-color$sprk-blackThe background color for the tooltip caret.
sprk-tooltip-toggled-icon-background-color$sprk-greenThe 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.
sprk-tooltip-min-width60pxThe min-width of the tooltip.
sprk-tooltip-caret-width17pxThe width of the tooltip caret.
sprk-dropdown-active-background-color$sprk-grayBackground color of the Dropdown items that are active or hovered.
sprk-dropdown-active-border2.5px solid $sprk-greenThe left border of the Dropdown item that is active.
sprk-dropdown-active-box-shadow-1px 0 0 0 $sprk-greenThe box-shadow of the Dropdown item that is active.
sprk-dropdown-border1px solid $sprk-grayThe border 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-footer-padding$sprk-space-inset-short-lThe padding around the Informational Dropdown footer.
sprk-dropdown-line-height1The line height of the Dropdown.
sprk-dropdown-max-width24remThe max-width of the Dropdown.
sprk-dropdown-padding$sprk-space-misc-aThe padding around the Dropdown items.
sprk-dropdown-shadow0 0 40px 2px rgba(0, 0, 0, 0.1)The box shadow of the Dropdown.
sprk-dropdown-title-color$sprk-black-tint-25The color of the Dropdown title.
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-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-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-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-masthead-menu-icon-width$sprk-icon-lThe width of the menu icon on narrow viewports in the Masthead.
sprk-masthead-menu-icon-height$sprk-icon-lThe 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 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-bottom$sprk-space-sThe padding bottom around the content items in the content section of the Masthead.
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-padding-wide$sprk-space-mThe padding around the content section in the Masthead on wide viewports.
sprk-masthead-content-item-padding-top-wide$sprk-space-sThe padding top of the content items in the content section in the Masthead on wide viewports.
sprk-masthead-content-item-padding-bottom-wide$sprk-space-sThe padding bottom of the content items in the content section in the Masthead on wide viewports.
sprk-masthead-content-item-padding-right-wide$sprk-space-mThe padding right of the content items in the content section in the Masthead on wide viewports.
sprk-masthead-content-item-padding-left-wide$sprk-space-mThe padding left of the content items in the content section in the Masthead on wide viewports.
sprk-masthead-link-visited-color$sprk-blackThe visited state color of Masthead links.
sprk-masthead-link-hover-color$sprk-greenThe hover state color of Masthead links.
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$sprk-masthead-border-bottom-size solid $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-25The 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-25The border of the selector 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-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-selector-border-color-mask-open$sprk-whiteThe border color that gets applied to the selector dropdown when open 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-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-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-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-padding0 $sprk-space-sThe padding of the big navigation link in the Masthead Extended.
sprk-big-nav-link-color$sprk-blackThe color of the big navigation link in the Masthead Extended.
sprk-big-nav-active-color$sprk-big-nav-link-colorThe text and underline color of the active big navigation item in the Masthead Extended.
sprk-big-nav-item-line-height53pxThe line height of the big navigation items in the Masthead Extended.
sprk-masthead-accordion-active-left-border3px solid $sprk-blackThe left border 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 in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-heading-color$sprk-blackThe color of the active item 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-heading-font-weight400The font weight 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-accordion-active-background-color$sprk-grayThe background color of the active in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-active-font-color$sprk-blackThe font color of the active in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-font-color$sprk-blackThe font color of the text in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-open-line-background-color$sprk-black-tint-25The 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 an item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-border0The border of an item in the navigation links when masthead is on narrow viewports.
sprk-masthead-accordion-item-backgroundtransparentThe background of an item in the navigation links when masthead is on narrow viewports.
sprk-spinner-size1.3remThe 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-tab-navigation-breakpoint46remThe breakpoint at which the tabs go from stacked layout to side by side 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-top3px solid $sprk-grayThe border on the top of the button tabs in Tabbed Navigation.
sprk-tab-navigation-btn-hover-border-top3px solid $sprk-redThe border on the top of the button tabs on hover in Tabbed Navigation.
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-top3px solid $sprk-redThe button tab top 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-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-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-greenThe color of the step icon when the step is selected in the Stepper.
sprk-stepper-icon-border-color-selected-dark-bg$sprk-green-tint-75The color of the step icon in front of a dark background when the step is selected in the Stepper.
sprk-stepper-dark-icon-border-color$sprk-whiteThe color of the icon border when the Stepper is on a dark background (sprk-c-Stepper--has-dark-bg).
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-dark-icon-color$sprk-blueThe 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-whiteThe 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-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-step-content-bgtransparentThe background color 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-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-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-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-step-content-bg-selectedtransparentThe background color of the Stepper step content box when the step is selected.
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-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-bar-color$sprk-black-tint-50The color 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-carousel-dot-border$sprk-stepper-icon-border-width solid $sprk-stepper-dark-icon-border-colorThe border value for the Carousel component.
sprk-carousel-dot-height10pxThe height of the dots in the Carousel component.
sprk-carousel-dot-width10pxThe width of the dots in the Carousel component.
sprk-carousel-wide-dot-height10pxThe height of the dots in the Carousel component on wide viewports.
sprk-carousel-wide-dot-width10pxThe width of the dots in the Carousel component on wide viewports.
sprk-carousel-dot-spacing$sprk-space-mThe spacing between dots in the Carousel component.
sprk-carousel-wide-dot-spacing$sprk-carousel-dot-spacingThe spacing between dots in the Carousel component on wide viewports.
sprk-carousel-dot-selected$sprk-stepper-icon-box-shadow-selected-dark-bgThe box shadow of the active dot in the Carousel component.
sprk-carousel-arrow-color$sprk-whiteThe color 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-edge-spacing0The left and right values of the arrows in the Carousel component.
sprk-carousel-arrow-padding$sprk-space-mThe padding value of the arrows in the Carousel component.
sprk-carousel-narrow-image-max-width18.75remThe maximum width of the image in the Carousel component.
sprk-carousel-arrow-position-breakpoint31.25remThe breakpoint for the arrows in the Carousel component.
sprk-carousel-dot-container-padding$sprk-space-xsThe padding value for the dots container in the Carousel component.
sprk-carousel-breakpoint$sprk-split-breakpoint-xlThe breakpoint for the Carousel 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-wide-viewport0 3px 18px 1px rgba(0, 0, 0, 0.08)The box shadow of the Card on wide viewports.
sprk-card-shadow-standout0 4px 20px 2px rgba(0, 0, 0, 0.1)The box shadow of the Standout Card variant on narrow viewports.
sprk-card-shadow-standout-wide-viewport0 4px 40px 2px rgba(0, 0, 0, 0.1)The 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-greenThe 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-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-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-whitergb(255, 255, 255)Color value for white.
sprk-yellowrgb(245, 190, 64)Color value for yellow.
sprk-yellow-tint-75rgb(237, 163, 2)Color value for yellow at 75%.
sprk-yellow-tint-50rgb(244, 199, 102)Color value for yellow at 50%.
sprk-yellow-tint-25rgb(247, 218, 154)Color value for yellow at 25%.