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(19, 164, 142)Color value for green.
sprk-green-darkrgb(1, 148, 126)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-greenSetting 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-width64remWidth 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-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-gray-darkThe 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-gray-darkThe 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-25The border color setting on readonly Inputs.
sprk-text-input-readonly-color$sprk-grayThe 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-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-50The 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-gray-darkThe color of the disabled Input labels.
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-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-toggle-transition-timing0.3s easeThe transition timing for the rotation of the icon when the Toggle is opened.
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 narrow viewport Masthead Accordion.
sprk-masthead-accordion-active-heading-font-weight400The font weight of the active item in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-active-heading-color$sprk-blackThe color of the active item in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-heading-color$sprk-blackThe color of the heading in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-heading-font-weight400The font weight of the heading in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-details-font-weight300The font weight of the details in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-details-font-color$sprk-blackThe font color of the details in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-active-background-color$sprk-grayThe background color of the active item in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-active-font-color$sprk-blackThe font color of the active item in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-font-color$sprk-blackThe font color of the text in items in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-item-open-line-background-color$sprk-black-tint-25The color of the line on open items in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-item-open-line-height2pxThe height of the line on open items in the narrow viewport Masthead Accordion.
sprk-masthead-accordion-item-padding$sprk-space-mThe padding of the items in the narrow viewport Masthead Accordion.
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-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-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-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-selectedThe 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%.