@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,062 lines • 65.1 kB
JavaScript
module.exports = {
/* Used as the background color for the active state on rows or items on list-like components. */
colorBackgroundRowActive: "rgb(242, 242, 243)",
/* Light variant of COLOR_BACKGROUND. */
colorBackgroundLight: "rgb(255, 255, 255)",
/* Used as the background color for the hover state on rows or items on list-like components. */
colorBackgroundRowHover: "rgb(249, 249, 250)",
/* Dark color for UI elements related to errors. Accessible with white text. */
colorBackgroundErrorDark: "rgb(194, 57, 52)",
/* Background color for UI elements related to providing neutral information (not error, success, or warning). */
colorBackgroundInfo: "rgb(107, 109, 112)",
/* Alternative background color for dark portions of the app. */
colorBackgroundAltInverse: "rgb(22, 50, 92)",
/* Used as the background color for the new state on rows or items on list-like components. */
colorBackgroundRowNew: "rgb(217, 255, 223)",
/* Dark color for UI elements that have to do with success. Accessible with white text. */
colorBackgroundSuccessDark: "rgb(4, 132, 75)",
/* Used as background for loading stencils on white background. */
colorBackgroundStencil: "rgb(242, 242, 243)",
/* Color for UI elements that have to do with warning. */
colorBackgroundWarning: "rgb(255, 183, 93)",
/* Background color for highlighting text in search results. */
colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
/* Hover color for UI elements related to destructive actions. */
colorBackgroundDestructiveHover: "rgb(166, 26, 20)",
/* Default background color for the whole app. */
colorBackground: "rgb(249, 249, 250)",
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
colorBrandDark: "rgb(0, 112, 210)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundBackdrop: "rgba(255, 255, 255, 0.75)",
/* Dark variant of COLOR_BACKGROUND. */
colorBackgroundDark: "rgb(233, 234, 236)",
/* Our product brand blue. */
colorBrand: "rgb(21, 137, 238)",
/* Color for UI elements related to destructive actions. */
colorBackgroundDestructive: "rgb(194, 57, 52)",
/* Color for UI elements that have to do with success. */
colorBackgroundSuccess: "rgb(75, 202, 129)",
/* Dark Color for UI elements that have to do with warning. */
colorBackgroundWarningDark: "rgb(255, 158, 44)",
/* Color for UI elements related to the offline state. */
colorBackgroundOffline: "rgb(62, 64, 65)",
/* Used as an alternate background for loading stencils on gray backgrounds. */
colorBackgroundStencilAlt: "rgb(233, 234, 236)",
/* Light variant of COLOR_BACKGROUND_INVERSE. */
colorBackgroundInverseLight: "rgb(22, 50, 92)",
/* Background color for UI elements related to the concept of an external user or customer. */
colorBackgroundCustomer: "rgb(255, 154, 60)",
/* Color for UI elements related to errors. */
colorBackgroundError: "rgb(212, 80, 76)",
/* Second default background color for the app. */
colorBackgroundAlt: "rgb(255, 255, 255)",
/* Darker color for UI elements that have to do with success. Accessible with white text. */
colorBackgroundSuccessDarker: "rgb(0, 74, 41)",
/* Used as the background color for selected rows or items on list-like components. */
colorBackgroundRowSelected: "rgb(233, 234, 236)",
/* Our product brand blue, darkened even further. */
colorBrandDarker: "rgb(0, 95, 178)",
/* Background color for text selected with a mouse. */
colorBackgroundSelection: "rgb(216, 237, 255)",
/* Active color for UI elements related to destructive actions. */
colorBackgroundDestructiveActive: "rgb(135, 5, 0)",
/* Default background color for dark portions of the app (like Stage Left or tooltips). */
colorBackgroundInverse: "rgb(6, 28, 63)",
/* Background color for highlighting UI elements. */
colorBackgroundHighlight: "rgb(250, 255, 189)",
/* Dark alternative border color for UI elements related to errors. */
colorBorderErrorDark: "rgb(234, 130, 136)",
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
colorBorderBrandDark: "rgb(0, 112, 210)",
/* Border color for UI elements related to providing neutral information (not error, success, or warning). */
colorBorderInfo: "rgb(107, 109, 112)",
/* Border color for UI elements that have to do with warnings. */
colorBorderWarning: "rgb(255, 183, 93)",
/* Hover border color for UI elements that have to do with destructive actions. */
colorBorderDestructiveHover: "rgb(166, 26, 20)",
/* Default border color for UI elements. */
colorBorder: "rgb(217, 219, 221)",
/* Dark alternative border color for UI elements that have to do with success. */
colorBorderSuccessDark: "rgb(4, 132, 75)",
/* Border color for UI elements that have to do with destructive actions. */
colorBorderDestructive: "rgb(194, 57, 52)",
/* Darkest separator color - used as an alternate separator color when more differentiation is desired. */
colorBorderSeparatorAlt2: "rgb(196, 198, 202)",
/* Border color for UI elements related to the offline state. */
colorBorderOffline: "rgb(62, 64, 65)",
/* Border color for UI elements that have to do with success. */
colorBorderSuccess: "rgb(75, 202, 129)",
/* Lightest separator color - used as default separator on white backgrounds. */
colorBorderSeparator: "rgb(249, 249, 250)",
/* Our product brand blue. */
colorBorderBrand: "rgb(21, 137, 238)",
/* Used to delineate the boundary of a component that is being clicked. Specific to builders. */
colorBorderSelectionActive: "rgb(249, 249, 250)",
/* Border color for UI elements that have to do with errors. */
colorBorderError: "rgb(194, 57, 52)",
/* Used to delineate the boundary of a component that is being hovered over. Specific to builders. */
colorBorderSelectionHover: "rgb(21, 137, 238)",
/* Used as the border color for the hover state on selected rows or items on list-like components. */
colorBorderRowSelectedHover: "rgb(21, 137, 238)",
/* Border color for UI elements related to the concept of an external user or customer. */
colorBorderCustomer: "rgb(255, 154, 60)",
/* Used to delineate the boundary of a selected component. Specific to builders. */
colorBorderSelection: "rgb(0, 112, 210)",
/* Used as the border color for selected rows or items on list-like components. */
colorBorderRowSelected: "rgb(0, 112, 210)",
/* Medium separator color - used as default separator on light gray backgrounds. */
colorBorderSeparatorAlt: "rgb(217, 219, 221)",
/* Border color to match UI elements using color-background-inverse. */
colorBorderInverse: "rgb(6, 28, 63)",
/* Active border color for UI elements that have to do with destructive actions. */
colorBorderDestructiveActive: "rgb(135, 5, 0)",
/* Alternative border color for UI elements related to errors. */
colorBorderErrorAlt: "rgb(234, 130, 136)",
/* Used as a separator on dark backgrounds, such as stage left navigation. */
colorBorderSeparatorInverse: "rgb(42, 66, 108)",
borderRadiusSmall: "0.125rem",
/* Icons in lists, record home icon, unbound input elements */
borderRadiusMedium: "0.25rem",
borderRadiusLarge: "0.5rem",
/* Circle for global use, action icon bgd shape */
borderRadiusCircle: "50%",
borderWidthThin: "1px",
borderWidthThick: "2px",
/* Shadow for active states on interactive elements. */
shadowActive: "0 0 2px #0070d2",
/* Shadow for drag-n-drop. */
shadowDrag: "0 2px 4px 0 rgba(0, 0, 0, 0.40)",
/* Shadow for drop down. */
shadowDropDown: "0 2px 3px 0 rgba(0, 0, 0, 0.16)",
/* 0 seconds, 0 frames */
durationInstantly: "0s",
/* 0.05 seconds, 3 frames */
durationImmediately: "0.05s",
/* 0.1 seconds, 6 frames */
durationQuickly: "0.1s",
/* 0.2 seconds, 12 frames */
durationPromptly: "0.2s",
/* 0.4 seconds, 24 frames */
durationSlowly: "0.4s",
/* 3.2 seconds, 192 frames */
durationPaused: "3.2s",
/* Default font-family for Salesforce applications */
fontFamily: "'Salesforce Sans', Arial, sans-serif",
fontFamilyHeading: "'Salesforce Sans', Arial, sans-serif",
fontFamilyMonospace: "Consolas, Menlo, Monaco, Courier, monospace",
/* Constant typography token for font size 1 */
fontSize1: "0.625rem",
/* Constant typography token for font size 2 */
fontSize2: "0.75rem",
/* Constant typography token for font size 3 */
fontSize3: "0.8125rem",
/* Variable typography token for font size 10 */
varFontSize10: "2rem",
/* Constant typography token for font size 4 */
fontSize4: "0.875rem",
/* Variable typography token for font size 11 */
varFontSize11: "2.625rem",
/* Constant typography token for font size 5 */
fontSize5: "1rem",
/* Constant typography token for font size 6 */
fontSize6: "1.125rem",
/* Constant typography token for font size 7 */
fontSize7: "1.25rem",
/* Constant typography token for font size 8 */
fontSize8: "1.5rem",
/* Variable typography token for font size 1 */
varFontSize1: "0.625rem",
/* Constant typography token for font size 9 */
fontSize9: "1.75rem",
/* Variable typography token for font size 2 */
varFontSize2: "0.75rem",
/* Variable typography token for font size 3 */
varFontSize3: "0.8125rem",
/* Constant typography token for font size 10 */
fontSize10: "2rem",
/* Variable typography token for font size 4 */
varFontSize4: "0.875rem",
/* Constant typography token for font size 11 */
fontSize11: "2.625rem",
/* Variable typography token for font size 5 */
varFontSize5: "1rem",
/* Variable typography token for font size 6 */
varFontSize6: "1.125rem",
/* Variable typography token for font size 7 */
varFontSize7: "1.25rem",
/* Variable typography token for font size 8 */
varFontSize8: "1.5rem",
/* Variable typography token for font size 9 */
varFontSize9: "1.75rem",
/* Use for large headings only. */
fontWeightLight: "300",
/* Most all body copy. */
fontWeightRegular: "400",
/* Used sparingly for emphasized text within regular body copy. */
fontWeightBold: "700",
/* Unitless line-heights for reusability */
lineHeightHeading: "1.25",
/* Unitless line-heights for reusability */
lineHeightText: "1.5",
/* Remove extra leading. Unitless line-heights for reusability */
lineHeightReset: "1",
/* Variable unitless line-heights for reusability */
varLineHeightText: "1.5",
/* 50% transparency of an element */
opacity5: "0.5",
/* 80% transparency of an element */
opacity8: "0.8",
/* Disabled state of BRAND_HEADER_CONTRAST_WEAK */
brandHeaderContrastWeakDisabled: "rgba(166, 166, 166, 0.25)",
/* Gray Color 11 */
colorGray11: "rgb(62, 62, 60)",
/* Transparent value of BRAND_PRIMARY at 10% */
brandPrimaryTransparent10: "rgba(21, 137, 238, 0.1)",
/* Gray Color 12 */
colorGray12: "rgb(43, 40, 38)",
/* These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug */
brandBackgroundDarkTransparent: "rgba(221, 219, 218, 0)",
/* Gray Color 13 */
colorGray13: "rgb(8, 7, 7)",
/* Background color a branded app header */
brandHeader: "rgb(255, 255, 255)",
/* Active / Hover state of BRAND_LIGHT */
brandLightActive: "rgb(227, 229, 237)",
/* Variant of BRAND_HEADER_CONTRAST that provides a warm color */
brandHeaderContrastWarm: "rgb(191, 2, 1)",
/* Disabled state of BRAND_HEADER_ICON */
brandHeaderIconDisabled: "rgba(145, 145, 145, 0.25)",
/* Active / Hover state of BRAND_HEADER_CONTRAST */
brandHeaderContrastActive: "rgb(80, 80, 80)",
/* Primary page background color */
brandBackgroundPrimary: "rgb(250, 250, 249)",
/* Primary brand color */
brandPrimary: "rgb(21, 137, 238)",
/* Active / Hover state of BRAND_HEADER_CONTRAST_WEAK */
brandHeaderContrastWeakActive: "rgb(129, 129, 129)",
/* Active / Hover state of BRAND_CONTRAST */
brandContrastActive: "rgb(13, 14, 18)",
/* Variant of BRAND_HEADER_CONTRAST that provides a cool color */
brandHeaderContrastCool: "rgb(0, 85, 131)",
/* Variant of BRAND_HEADER that is accessible with BRAND_HEADER */
brandHeaderContrastInverse: "rgb(255, 255, 255)",
/* Dark variant of BRAND that is accessible with light colors */
brandDark: "rgb(24, 35, 55)",
/* Dark variant of BRAND that is accessible with white */
brandAccessible: "rgb(0, 112, 210)",
/* Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color */
brandBackgroundDark: "rgb(232, 232, 232)",
/* Active / Hover state of BRAND_TEXT_LINK */
brandTextLinkActive: "rgb(0, 95, 178)",
/* Gray Color 1 */
colorGray1: "rgb(255, 255, 255)",
/* Gray Color 2 */
colorGray2: "rgb(250, 250, 249)",
/* Active / Hover state of BRAND_HEADER_ICON */
brandHeaderIconActive: "rgb(129, 129, 129)",
/* Gray Color 3 */
colorGray3: "rgb(243, 242, 242)",
/* Icons of BRAND_HEADER that is accessible with BRAND_HEADER */
brandHeaderIcon: "rgb(145, 145, 145)",
/* Disabled state of BRAND_A11Y */
brandDisabled: "rgb(201, 199, 197)",
/* Primary text link brand color */
brandTextLink: "rgb(0, 109, 204)",
/* Gray Color 4 */
colorGray4: "rgb(236, 235, 234)",
/* Gray Color 5 */
colorGray5: "rgb(221, 219, 218)",
/* Gray Color 6 */
colorGray6: "rgb(201, 199, 197)",
/* Active / Hover state of BRAND_A11Y */
brandAccessibleActive: "rgb(0, 95, 178)",
/* Gray Color 7 */
colorGray7: "rgb(176, 173, 171)",
/* Active / Hover state of BRAND_DARK */
brandDarkActive: "rgb(37, 48, 69)",
/* Gray Color 8 */
colorGray8: "rgb(150, 148, 146)",
/* Active / Hover state of BRAND_HEADER_CONTRAST */
brandHeaderContrastInverseActive: "rgb(238, 238, 238)",
/* Active / Hover state of BRAND_HEADER_CONTRAST_COOL */
brandHeaderContrastCoolActive: "rgb(0, 85, 131)",
/* Gray Color 9 */
colorGray9: "rgb(112, 110, 107)",
/* Variant of BRAND that is accessible with BRAND */
brandContrast: "rgb(26, 27, 30)",
/* Weak contrast ratio, useful for iconography */
brandHeaderContrastWeak: "rgb(145, 145, 145)",
/* Active / Hover state of BRAND_PRIMARY */
brandPrimaryActive: "rgb(0, 122, 221)",
/* These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug */
brandBackgroundPrimaryTransparent: "rgba(250, 250, 249, 0)",
/* Variant of BRAND_HEADER that is accessible with BRAND_HEADER */
brandHeaderContrast: "rgb(94, 94, 94)",
/* Transparent value of BRAND_PRIMARY */
brandPrimaryTransparent: "rgba(21, 137, 238, 0.1)",
/* Active / Hover state of BRAND_HEADER_CONTRAST_WARM */
brandHeaderContrastWarmActive: "rgb(172, 0, 0)",
/* Transparent value of BRAND_PRIMARY at 40% */
brandPrimaryTransparent40: "rgba(21, 137, 238, 0.4)",
/* Light variant of BRAND that is accessible with dark colors */
brandLight: "rgb(244, 246, 254)",
/* Gray Color 10 */
colorGray10: "rgb(81, 79, 77)",
/* Generic sizing token scale for UI components. */
sizeXSmall: "12rem",
/* Generic sizing token scale for UI components. */
sizeXxxSmall: "3rem",
/* Large utility icon without border. */
squareIconUtilityLarge: "1.5rem",
/* Generic sizing token scale for UI components. */
sizeXxSmall: "6rem",
/* Search Results: Outer colored tile */
squareIconSmallBoundary: "1.5rem",
/* Generic sizing token scale for UI components. */
sizeSmall: "15rem",
/* Medium utility icon without border. */
squareIconUtilityMedium: "1.25rem",
/* Very small icon button boundary. */
squareIconXSmallBoundary: "1.25rem",
/* Small utility icon without border. */
squareIconUtilitySmall: "1rem",
/* Stage left & actions: Outer colored tile */
squareIconMediumBoundary: "2rem",
/* Anchor: Icon content (white shape) */
squareIconLargeContent: "2rem",
/* Anchor: Outer colored tile */
squareIconLargeBoundary: "3rem",
/* Generic sizing token scale for UI components. */
sizeMedium: "20rem",
/* Stage left & actions: Icon content (white shape) */
squareIconMediumContent: "1rem",
/* Generic sizing token scale for UI components. */
sizeXLarge: "40rem",
/* Very small icons in icon buttons. */
squareIconXSmallContent: "0.5rem",
/* Variable medium boundary for square icons */
varSquareIconMediumBoundary: "2rem",
/* Icon button boundary. */
squareIconMediumBoundaryAlt: "2.25rem",
/* Generic sizing token scale for UI components. */
sizeXxLarge: "60rem",
/* Anchor: avatar */
squareIconLargeBoundaryAlt: "5rem",
/* Generic sizing token scale for UI components. */
sizeLarge: "25rem",
/* Search Results: Icon content (white shape) */
squareIconSmallContent: "0.75rem",
/* Very very small icon button boundary. */
squareIconXxSmallBoundary: "1rem",
/* Alternate medium tap target size */
squareIconMediumContentAlt: "0.875rem",
/* Variable spacing token for size X Large */
varSpacingXLarge: "2rem",
/* Variable horizontal spacing token for size Small */
varSpacingHorizontalSmall: "0.75rem",
/* Variable horizontal spacing token for size XX Large */
varSpacingHorizontalXxLarge: "3rem",
/* Constant spacing token for size X small */
spacingXSmall: "0.5rem",
/* Constant spacing token for size XXX small */
spacingXxxSmall: "0.125rem",
/* Constant spacing token for size XX small */
spacingXxSmall: "0.25rem",
/* Variable vertical spacing token for size Large */
varSpacingVerticalLarge: "1.5rem",
/* Variable spacing token for size Large */
varSpacingLarge: "1.5rem",
/* Variable spacing token for size Medium */
varSpacingMedium: "1rem",
/* Variable vertical spacing token for size Medium */
varSpacingVerticalMedium: "1rem",
/* Variable vertical spacing token for size X Small */
varSpacingVerticalXSmall: "0.5rem",
/* Constant spacing token for size Small */
spacingSmall: "0.75rem",
/* Variable vertical spacing token for size XXX Small */
varSpacingVerticalXxxSmall: "0.125rem",
/* Variable spacing token for size X Small */
varSpacingXSmall: "0.5rem",
/* Variable spacing token for size XXX Small */
varSpacingXxxSmall: "0.125rem",
/* Variable horizontal spacing token for size X Large */
varSpacingHorizontalXLarge: "2rem",
/* Variable horizontal spacing token for size XX Small */
varSpacingHorizontalXxSmall: "0.25rem",
/* Variable spacing token for size XX Large */
varSpacingXxLarge: "3rem",
/* Constant spacing token for size Medium */
spacingMedium: "1rem",
/* Variable vertical spacing token for size XX Large */
varSpacingVerticalXxLarge: "3rem",
/* Variable vertical spacing token for size Small */
varSpacingVerticalSmall: "0.75rem",
/* Variable spacing token for size Small */
varSpacingSmall: "0.75rem",
/* Constant spacing token for 0 */
spacingNone: "0",
/* Variable horizontal spacing token for size Large */
varSpacingHorizontalLarge: "1.5rem",
/* Constant spacing token for size X Large */
spacingXLarge: "2rem",
/* Constant spacing token for size XX Large */
spacingXxLarge: "3rem",
/* Variable horizontal spacing token for size XXX Small */
varSpacingHorizontalXxxSmall: "0.125rem",
/* Variable horizontal spacing token for size X Small */
varSpacingHorizontalXSmall: "0.5rem",
/* Variable spacing token for size XX Small */
varSpacingXxSmall: "0.25rem",
/* Variable horizontal spacing token for size Medium */
varSpacingHorizontalMedium: "1rem",
/* Variable vertical spacing token for size XX Small */
varSpacingVerticalXxSmall: "0.25rem",
/* Variable vertical spacing token for size X Large */
varSpacingVerticalXLarge: "2rem",
/* Constant spacing token for size Large */
spacingLarge: "1.5rem",
/* Action label text color */
colorTextActionLabel: "rgb(107, 109, 112)",
/* Link color on dark background */
colorTextLinkInverse: "rgb(255, 255, 255)",
/* Link color on dark background - active state */
colorTextLinkInverseActive: "rgba(255, 255, 255, 0.5)",
/* Action label active text color */
colorTextActionLabelActive: "rgb(22, 50, 92)",
/* Color for texts or icons that are related to warnings on a dark background. */
colorTextWarning: "rgb(255, 183, 93)",
/* Focus link text */
colorTextLinkFocus: "rgb(0, 95, 178)",
/* Text color for destructive actions - hover state */
colorTextDestructiveHover: "rgb(161, 43, 43)",
/* Disabled link text */
colorTextLinkDisabled: "rgb(22, 50, 92)",
/* Body text color */
colorTextDefault: "rgb(22, 50, 92)",
/* Text color for destructive actions */
colorTextDestructive: "rgb(194, 57, 52)",
/* Hover link text */
colorTextLinkHover: "rgb(0, 95, 178)",
/* Text color for success text. */
colorTextSuccess: "rgb(2, 126, 70)",
/* Color for text that is purposefully de-emphasized to create visual hierarchy. */
colorTextWeak: "rgb(107, 109, 112)",
/* Input placeholder text on dark backgrounds. */
colorTextPlaceholderInverse: "rgb(233, 234, 236)",
/* Link text (508) */
colorTextLink: "rgb(0, 112, 210)",
/* Color for texts that are related to warnings on a light background. */
colorTextWarningAlt: "rgb(132, 72, 0)",
/* Default icon color. */
colorTextIconDefault: "rgb(107, 109, 112)",
/* Our product brand blue. */
colorTextBrand: "rgb(21, 137, 238)",
/* Error text for inputs and error misc */
colorTextError: "rgb(194, 57, 52)",
/* Customer text used in anchor subtitle */
colorTextCustomer: "rgb(255, 154, 60)",
/* Text color found on any primary brand color */
colorTextBrandPrimary: "rgb(255, 255, 255)",
/* Active link text */
colorTextLinkActive: "rgb(0, 57, 107)",
/* Color of required field marker. */
colorTextRequired: "rgb(194, 57, 52)",
/* Link color on dark background - disabled state */
colorTextLinkInverseDisabled: "rgba(255, 255, 255, 0.15)",
/* Inverse text color for dark backgrounds */
colorTextInverse: "rgb(255, 255, 255)",
/* Input placeholder text. */
colorTextPlaceholder: "rgb(107, 109, 112)",
/* Weak inverse text color for dark backgrounds */
colorTextInverseWeak: "rgb(171, 173, 176)",
/* Link color on dark background - hover state */
colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
/* Text color for success text on dark backgrounds. */
colorTextSuccessInverse: "rgb(75, 202, 129)",
/* Text color for field labels. */
colorTextLabel: "rgb(107, 109, 112)",
/* Tap target size for elements that rely on width and height dimensions */
squareTappable: "2.75rem",
/* Small tap target size for elements that rely on width and height dimensions */
squareTappableSmall: "2rem",
/* X-small tap target size for elements that rely on width and height dimensions */
squareTappableXSmall: "1.5rem",
/* Xx-small tap target size for elements that rely on width and height dimensions */
squareTappableXxSmall: "1.25rem",
/* Tap target size for elements that rely on height or line-height */
heightTappable: "2.75rem",
/* Small tap target size for elements that rely on height or line-height */
heightTappableSmall: "2rem",
/* Dropdown */
zIndexDropdown: "7000",
/* Docked element */
zIndexDocked: "4",
/* Notifications under modals */
zIndexReminder: "8500",
/* Spinner */
zIndexSpinner: "9050",
/* Default */
zIndexDefault: "1",
/* Deep dive */
zIndexDeepdive: "-99999",
/* Toasts */
zIndexToast: "10000",
/* Dialog */
zIndexDialog: "6000",
/* Popup */
zIndexPopup: "5000",
/* Modal */
zIndexModal: "9000",
/* Stickied element */
zIndexSticky: "100",
/* Overlay */
zIndexOverlay: "8000",
/* Brandable modal header */
colorBackgroundModalBrand: "rgb(0, 112, 210)",
/* Background color for notification list item. */
colorBackgroundNotification: "rgb(255, 255, 255)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeActive: "rgb(0, 57, 107)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeHover: "rgb(0, 95, 178)",
colorContrastPrimary: "rgb(249, 249, 250)",
colorForegroundPrimary: "rgb(255, 255, 255)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundTempModalTint: "rgba(126, 140, 153, 0.8)",
/* Color of the indicator dot. */
colorBackgroundIndicatorDot: "rgb(22, 50, 92)",
/* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
colorBackgroundAlt2: "rgb(242, 242, 243)",
/* Hover color for utility bar item. */
colorBackgroundUtilityBarHover: "rgb(233, 234, 236)",
/* Brand hover fill color */
fillBrandHover: "rgb(0, 95, 178)",
/* Brand fill color */
fillBrand: "rgb(0, 112, 210)",
/* Background color for default desktop chrome (ex. global header) */
colorBackgroundChromeDesktop: "rgb(255, 255, 255)",
/* Active button backgrounds on modal headers */
colorBackgroundModalButtonActive: "rgba(0, 0, 0, 0.16)",
/* Selected checkboxes */
colorBackgroundInputCheckboxSelected: "rgb(21, 137, 238)",
/* Default checkboxes */
colorBackgroundInputCheckbox: "rgb(255, 255, 255)",
colorBackgroundPrimary: "rgb(255, 255, 255)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundTempModalTintAlt: "rgba(255, 255, 255, 0.75)",
colorBackgroundBrandPrimaryFocus: "rgb(0, 95, 178)",
colorBackgroundBrandPrimaryActive: "rgb(0, 57, 107)",
colorBackgroundBrandPrimaryHover: "rgb(0, 95, 178)",
/* Background color for default mobile chrome (ex. global header) */
colorBackgroundChromeMobile: "rgb(0, 112, 210)",
/* Background color for search input fields. */
colorBackgroundInputSearch: "rgba(0, 0, 0, 0.16)",
colorContrastSecondary: "rgb(255, 255, 255)",
/* Secondary top bar background color (child browser, file preview, etc.) */
colorBackgroundBrowser: "rgb(107, 109, 112)",
colorBackgroundBrandPrimary: "rgb(0, 112, 210)",
/* Used as the default background color for temporary dialog elements, such as the progress spinner background. */
colorBackgroundTempModal: "rgba(126, 140, 153, 0.8)",
/* Used as gray background when more contrast is desired. */
colorBackgroundShade: "rgb(233, 234, 236)",
/* Standard modal header */
colorBackgroundModal: "rgb(255, 255, 255)",
/* Hovered active toggle background color. */
colorBackgroundToggleActiveHover: "rgb(0, 95, 178)",
/* Background color for payloads in the feed. */
colorBackgroundPayload: "rgb(249, 249, 250)",
/* Button backgrounds on modal headers */
colorBackgroundModalButton: "rgba(0, 0, 0, 0.07)",
/* Brand active fill color */
fillBrandActive: "rgb(22, 50, 92)",
/* Active color for utility bar item. */
colorBackgroundUtilityBarActive: "rgb(21, 137, 238)",
/* Stage left org switcher dropdown arrow background color. */
colorBackgroundOrgSwitcherArrow: "rgb(6, 28, 63)",
/* Active toggle background color. */
colorBackgroundToggleActive: "rgb(0, 112, 210)",
/* Alternative color for UI elements related to errors. */
colorBackgroundErrorAlt: "rgb(234, 130, 136)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
pageColorBackgroundPrimary: "rgb(255, 255, 255)",
/* Used as gray background in conjunction with Shade when more contrast is desired. */
colorBackgroundShadeDark: "rgb(217, 219, 221)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeFocus: "rgb(0, 95, 178)",
/* Background for utility icons that live in the action bar on mobile. */
colorBackgroundActionbarIconUtility: "rgb(107, 109, 112)",
colorBackgroundSecondary: "rgb(249, 249, 250)",
/* The borders to create the checkmark */
colorBorderInputCheckboxSelectedCheckmark: "rgb(255, 255, 255)",
/* Disabled stroke color. */
colorStrokeDisabled: "rgb(233, 234, 236)",
/* Active stroke color for our product brand blue. */
colorStrokeBrandActive: "rgb(22, 50, 92)",
colorBorderPrimary: "rgb(217, 219, 221)",
colorBorderBrandPrimaryFocus: "rgb(0, 112, 210)",
colorBorderBrandPrimaryHover: "rgb(0, 112, 210)",
/* Border color for brandable primary button */
colorBorderButtonBrand: "rgb(0, 112, 210)",
colorBorderBrandPrimaryActive: "rgb(0, 57, 107)",
colorBorderBrandPrimary: "rgb(21, 137, 238)",
colorBorderButtonFocusInverse: "rgb(233, 234, 236)",
/* Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders. */
colorBorderCanvasElementSelectionHover: "rgb(0, 95, 178)",
/* Used to delineate the boundary of a selected canvas element. Specific to builders. */
colorBorderCanvasElementSelection: "rgb(94, 180, 255)",
/* Hover stroke color for our product brand blue. */
colorStrokeBrandHover: "rgb(0, 112, 210)",
/* Stroke color for our global header buttons. */
colorStrokeHeaderButton: "rgb(171, 173, 176)",
colorBorderLinkFocusInverse: "rgb(233, 234, 236)",
/* Our product brand blue. */
colorStrokeBrand: "rgb(0, 112, 210)",
/* Used to delineate the boundary of a specific region. Specific to builders. */
colorBorderHint: "rgb(42, 66, 108)",
/* Deprecated */
elevation32: "32",
/* Deprecated */
elevationShadow16: "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationInverseShadow0: "none",
/* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowLinkFocusInverse: "0 0 3px #E9EAEC",
/* Deprecated: Use SHADOW_DOCKED */
elevationInverseShadow2: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationInverseShadow4: "0 -4px 4px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevation16: "16",
/* Deprecated */
elevationShadow3Below: "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",
shadowSoftPrimaryHover: "none",
/* Deprecated */
elevationInverseShadow8: "0 -8px 8px 0 rgba(0, 0, 0, 0.16)",
/* Soft dropshadow found on general UI elements such as containers */
shadowSoftPrimary: "none",
/* Deprecated */
elevationInverseShadow32: "0 -32px 32px 0 rgba(0, 0, 0, 0.16)",
/* Hard dropshadow found on general UI elements such as containers */
shadowHardPrimary: "none",
/* Shadow above overflow menu close bar. */
shadowActionOverflowFooter: "0 -2px 4px #F9F9FA",
/* Deprecated */
elevation0: "0",
/* Deprecated */
elevation3Inset: "-3",
/* Deprecated */
elevation2: "2",
/* Shadow for overlays. */
shadowOverlay: "0 -2px 4px rgba(0, 0, 0, 0.07)",
/* Shadow for buttons. */
shadowButton: "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
/* Deprecated */
elevation4: "4",
/* Deprecated */
elevationShadow0: "none",
/* Deprecated */
elevationInverseShadow16: "0 -16px 16px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationShadow2: "0 2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevation8: "8",
/* Deprecated */
elevationShadow4: "0 4px 4px 0 rgba(0, 0, 0, 0.16)",
/* Inset shadow for editable grid */
shadowFocusInset: "0 0 2px 2px #1589EE inset",
/* Deprecated */
elevationInverseShadow3Below: "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset",
shadowSoftPrimaryActive: "none",
/* Deprecated */
elevationShadow8: "0 8px 8px 0 rgba(0, 0, 0, 0.16)",
/* Shadow on images. */
shadowImage: "0 1px 1px rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationShadow32: "0 32px 32px 0 rgba(0, 0, 0, 0.16)",
/* Medium headings. */
fontSizeHeadingMedium: "1.125rem",
fontSizeMedium: "1rem",
/* Small body text. */
fontSizeTextSmall: "0.8125rem",
fontSizeMediumA: "1.125rem",
fontSizeXLarge: "1.5rem",
fontSizeXLargeA: "1.57rem",
/* Extra large headings. */
fontSizeHeadingXLarge: "1.75rem",
fontSizeXxLarge: "2rem",
/* Extra extra small text. */
fontSizeTextXxSmall: "0.625rem",
fontSizeLarge: "1.25rem",
/* Large headings. */
fontSizeHeadingLarge: "1.5rem",
/* Extra large body text. */
fontSizeTextXLarge: "1.25rem",
fontSizeXSmall: "0.625rem",
/* Extra Extra small headings. */
fontSizeHeadingXxSmall: "0.625rem",
/* Extra small headings. */
fontSizeHeadingXSmall: "0.75rem",
/* Large body text. */
fontSizeTextLarge: "1.125rem",
fontSizeSmall: "0.875rem",
/* Medium body text. */
fontSizeTextMedium: "1rem",
/* Extra small body text. */
fontSizeTextXSmall: "0.75rem",
/* Small headings. */
fontSizeHeadingSmall: "0.875rem",
/* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */
fontFamilyText: "'Salesforce Sans', Arial, sans-serif",
/* Use squareIconMediumBoundary */
squareIconMedium: "2.375rem",
/* Small tap target size */
squareIconSmall: "1rem",
/* Very small icons to replace force font with temporary override. */
squareIconXxSmallContent: ".875rem",
/* Large tap target size. */
squareIconLarge: "3.125rem",
componentSpacingMargin: "0",
componentSpacingPadding: "1rem",
/* Hovered icon color for a button that has a parent element that has a hover state */
colorTextIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
/* Color for text on a selected tab in a tab group. */
colorTextTabLabelSelected: "rgb(0, 112, 210)",
/* Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextIconInverseHint: "rgba(255, 255, 255, 0.5)",
/* Color for disabled text in a tab group. */
colorTextTabLabelDisabled: "rgb(233, 234, 236)",
/* Tertiary body text color */
colorTextTertiary: "rgb(107, 109, 112)",
/* Active state on a standalone link on a dark background. */
colorTextInverseActive: "rgb(94, 180, 255)",
/* Primary body text color */
colorTextPrimary: "rgb(22, 50, 92)",
colorTextLinkPrimaryFocus: "rgb(0, 112, 210)",
/* Color for text in focus state in a tab group. */
colorTextTabLabelFocus: "rgb(0, 95, 178)",
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextIconDefaultHintBorderless: "rgb(233, 234, 236)",
/* Text color for pills. */
colorTextPill: "rgb(0, 112, 210)",
colorTextLinkPrimaryHover: "rgb(0, 112, 210)",
/* Color for text in active state in a tab group. */
colorTextTabLabelActive: "rgb(0, 57, 107)",
/* Color for text in hover state in a tab group. */
colorTextTabLabelHover: "rgb(0, 95, 178)",
/* Color for text on toast messages. */
colorTextToast: "rgb(233, 234, 236)",
/* Color for disabled toggles */
colorTextToggleDisabled: "rgb(217, 219, 221)",
/* Top bar icon color */
colorTextBrowser: "rgb(255, 255, 255)",
colorTextLinkPrimaryActive: "rgb(0, 57, 107)",
colorTextLinkPrimary: "rgb(0, 112, 210)",
/* Top bar active icon color */
colorTextBrowserActive: "rgba(0, 0, 0, 0.4)",
/* Color for non-interactive icons that represent a selected item in a list */
colorTextIconBrand: "rgb(0, 112, 210)",
/* Hover state on a standalone link on a dark background. */
colorTextInverseHover: "rgb(171, 173, 176)",
/* Modal header title */
colorTextModal: "rgb(255, 255, 255)",
/* Modal header button text color */
colorTextModalButton: "rgb(107, 109, 112)",
/* Color for interactive utility icons */
colorTextIconUtility: "rgb(171, 173, 176)",
/* Secondary body text color */
colorTextSecondary: "rgb(107, 109, 112)",
/* Text in stage left navigation. */
colorTextStageLeft: "rgb(233, 234, 236)",
/* Default value for text-transform */
textTransform: "none",
/* Background color for a new notification list item. */
colorBackgroundNotificationNew: "rgb(249, 249, 250)",
/* Focused header button icon color */
fillHeaderButtonFocus: "rgb(0, 112, 210)",
/* Background color for reminder notification on hover */
colorBackgroundReminderHover: "rgb(255, 255, 255)",
/* Notifications badge background color. */
colorBackgroundNotificationBadge: "rgb(194, 57, 52)",
/* Hovered header button icon color */
fillHeaderButtonHover: "rgb(0, 95, 178)",
/* Disabled input */
colorBackgroundInputDisabled: "rgb(233, 234, 236)",
/* Hovered toggle background color. */
colorBackgroundToggleHover: "rgb(145, 146, 151)",
/* Background color for reminder notification */
colorBackgroundReminder: "rgb(244, 246, 249)",
/* Hovered background color for success buttons */
colorBackgroundButtonSuccessHover: "rgb(4, 132, 75)",
/* Header button icon color */
fillHeaderButton: "rgb(176, 173, 171)",
/* Toggle background color. */
colorBackgroundToggle: "rgb(171, 173, 176)",
/* Background color for success buttons */
colorBackgroundButtonSuccess: "rgb(75, 202, 129)",
/* Disabled checkboxes */
colorBackgroundInputCheckboxDisabled: "rgb(217, 219, 221)",
/* Background color for pills. */
colorBackgroundPill: "rgb(255, 255, 255)",
/* Color of the spinner dot. */
colorBackgroundSpinnerDot: "rgb(171, 173, 176)",
/* The color of the mask overlay that provides user feedback on interaction. */
colorBackgroundBackdropTint: "rgb(249, 249, 250)",
/* Selected input field (when user has clicked or tabbed into field) */
colorBackgroundInputActive: "rgb(255, 255, 255)",
/* The background color of an internal scrollbar. */
colorBackgroundScrollbar: "rgb(233, 234, 236)",
/* Disabled toggle background color. */
colorBackgroundToggleDisabled: "rgb(171, 173, 176)",
/* Background color for toast messaging. */
colorBackgroundToast: "rgb(107, 109, 112)",
/* Background color of comment posts in the feed. */
colorBackgroundPost: "rgb(249, 249, 250)",
/* Default input field */
colorBackgroundInput: "rgb(255, 255, 255)",
/* Background color for success toast messaging. */
colorBackgroundToastSuccess: "rgb(4, 132, 75)",
/* Color of mask overlay that sits on top of an image when text is present. */
colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.4)",
/* Active background color for success buttons */
colorBackgroundButtonSuccessActive: "rgb(4, 132, 75)",
/* Background color for error toast messaging. */
colorBackgroundToastError: "rgb(194, 57, 52)",
/* The background color of an internal scrollbar track. */
colorBackgroundScrollbarTrack: "rgb(196, 198, 202)",
/* Background color for input field that has encountered an error. */
colorBackgroundInputError: "rgb(255, 221, 225)",
/* Border color for disabled inverse button. */
colorBorderButtonInverseDisabled: "rgba(255, 255, 255, 0.15)",
/* Hovered border color for a button with an icon that has a parent element that has a hover state */
colorBorderIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
/* Border color for a button with an icon that has a parent element that has a hover state */
colorBorderIconInverseHint: "rgba(255, 255, 255, 0.5)",
/* Border color for an active tab. */
colorBorderTabActive: "rgb(255, 255, 255)",
/* Border color on disabled form elements. */
colorBorderInputDisabled: "rgb(196, 198, 202)",
/* Border color on notification reminders. */
colorBorderReminder: "rgb(236, 235, 234)",
/* Border color for brandable primary button - disabled state */
colorBorderButtonBrandDisabled: "rgba(0, 0, 0, 0)",
/* Border color for default secondary button */
colorBorderButtonDefault: "rgb(217, 219, 221)",
/* Border color on active form elements. */
colorBorderInputActive: "rgb(21, 137, 238)",
/* Border color on form elements. */
colorBorderInput: "rgb(217, 219, 221)",
/* These borders create the faux checkmark when the checkbox toggle is in the checked state. */
colorBorderToggleChecked: "rgb(255, 255, 255)",
/* Border color for a selected tab in a tab group. */
colorBorderTabSelected: "rgb(0, 112, 210)",
borderStrokeWidthThin: "1px",
borderStrokeWidthThick: "2px",
/* Shadow for notifications that should be elevated above other components but under modals. */
shadowReminder: "0 2px 3px 0 rgba(0, 0, 0, 0.20)",
/* Custom glow for focus states on UI elements with explicit containers. */
shadowButtonFocus: "0 0 3px #0070D2",
/* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowButtonFocusInverse: "0 0 3px #E9EAEC",
/* Shadow to make inline edit card pop out. */
shadowInlineEdit: "0 2px 4px 4px rgba(0, 0, 0, 0.16)",
/* Shadow on elements that are docked to the bottom of the viewport. */
shadowDocked: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Shadow for header. */
shadowHeader: "0 2px 4px rgba(0, 0, 0, 0.07)",
/* 4.8 seconds */
durationToastShort: "4.8s",
/* 9.6 seconds */
durationToastMedium: "9.6s",
illustrationEmptyStateAssistant: "/assets/images/illustrations/empty-state-assistant.svg",
illustrationEmptyStateEvents: "/assets/images/illustrations/empty-state-events.svg",
illustrationEmptyStateTasks: "/assets/images/illustrations/empty-state-tasks.svg",
bannerUserDefaultImage: "",
bannerGroupDefaultImage: "",
userDefaultAvatar: "/assets/images/profile_avatar_200.png",
userDefaultAvatarMedium: "/assets/images/profile_avatar_160.png",
userDefaultAvatarSmall: "/assets/images/profile_avatar_96.png",
groupDefaultAvatar: "/assets/images/group_avatar_200.png",
groupDefaultAvatarMedium: "/assets/images/group_avatar_160.png",
groupDefaultAvatarSmall: "/assets/images/group_avatar_96.png",
/* Line heights for tabs */
lineHeightTab: "2.5rem",
borderRadiusPill: "15rem",
/* Minimum height of a pill. */
heightPill: "1.625rem",
/* Brand header. Phone 44px; Tablet 50px */
heightHeader: "2.75rem",
/* Action footer menu. Phone 44px; Tablet 50px */
heightFooter: "3.75rem",
/* Text input height */
heightInput: "1.875rem",
/* Stage left for desktop when closed (showing icons only). */
widthStageLeftCollapsed: "4rem",
/* Stage left for desktop when open. */
widthStageLeftExpanded: "15rem",
/* Maximum width for action overflow menu so that it's not full-screen for tablet. */
maxWidthActionOverflowMenu: "512px",
/* Default amount of line breaks before text is truncated */
lineClamp: 3,
/* Icon color on dark background */
colorTextIconInverse: "rgb(255, 255, 255)",
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextButtonInverseDisabled: "rgba(255, 255, 255, 0.5)",
/* Input icon */
colorTextInputIcon: "rgb(171, 173, 176)",
/* Icon color on dark background - active state */
colorTextIconInverseActive: "rgb(255, 255, 255)",
/* Text color for default secondary button - hover state */
colorTextButtonDefaultHover: "rgb(0, 112, 210)",
/* Input disabled text */
colorTextInputDisabled: "rgb(107, 109, 112)",
/* Text color for default secondary button */
colorTextButtonDefault: "rgb(0, 112, 210)",
/* Default icon color - disabled state */
colorTextIconDefaultDisabled: "rgb(217, 219, 221)",
/* Text color for brandable primary button - disabled state */
colorTextButtonBrandDisabled: "rgb(255, 255, 255)",
/* Text color for brandable primary button - hover state */
colorTextButtonBrandHover: "rgb(255, 255, 255)",
/* Default icon color - hover state. */
colorTextIconDefaultHover: "rgb(0, 112, 210)",
/* Text color for brandable primary button */
colorTextButtonBrand: "rgb(255, 255, 255)",
/* Text color for default secondary button - disabled state */
colorTextButtonDefaultDisabled: "rgb(217, 219, 221)",
/* Color for default text in a tab group. */
colorTextTabLabel: "rgb(22, 50, 92)",
/* Default icon color - active state. */
colorTextIconDefaultActive: "rgb(0, 57, 107)",
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextIconDefaultHint: "rgb(171, 173, 176)",
/* Text color for brandable primary button - active state */
colorTextButtonBrandActive: "rgb(255, 255, 255)",
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextButtonInverse: "rgb(233, 234, 236)",
/* Text color for default secondary button - active state */
colorTextButtonDefaultActive: "rgb(0, 112, 210)",
/* Icon color on dark background - disabled state */
colorTextIconInverseDisabled: "rgba(255, 255, 255, 0.15)",
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextButtonDefaultHint: "rgb(171, 173, 176)",
/* Icon color on dark background - hover state */
colorTextIconInverseHover: "rgb(255, 255, 255)",
/* Typed input text */
colorTextInputFocusInverse: "rgb(22, 50, 92)",
/* White avatar group background color. */
avatarGroupColorBackgroundLightest: "rgb(255, 255, 255)",
/* Dark gray avatar group background color. */
avatarGroupColorBackgroundInverse: "rgb(112, 110, 107)",
/* White badge background color. */
badgeColorBackgroundLightest: "rgb(255, 255, 255)",
/* Dark gray badge background color. */
badgeColorBackgroundInverse: "rgb(112, 110, 107)",
brandBandDefaultImage: "",
brandBandColorBackgroundPrimary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundPrimaryTransparent: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondaryTransparent: "rgba(0, 0, 0, 0)",
brandBandImageHeightSmall: "6rem",
brandBandImageHeightMedium: "12.5rem",
brandBandImageHeightLarge: "18.75rem",
brandBandScrimHeight: "3.125rem",
templateGutters: "0",
templateProfileGutters: "0",
buttonIconColorBorderPrimary: "rgb(255, 255, 255)",
buttonIconBoundaryTouch: "2.75rem",
buttonColorBorderPrimary: "rgb(216, 221, 230)",
buttonColorBorderBrandPrimary: "rgb(0, 112, 210)",
buttonColorBorderSecondary: "rgba(255, 255, 255, 0.8)",
buttonBorderRadius: ".25rem",
/* Default secondary button - focus state */
colorBackgroundButtonDefaultFocus: "rgb(244, 246, 249)",
/* Use BRAND_ACCESSIBLE to pick up theming capabilities */
buttonColorBackgroundBrandPrimary: "rgb(0, 112, 210)",
/* Disabled button backgrounds on inverse/dark backgrounds */
colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
/* Default secondary button - hover state */
colorBackgroundButtonDefaultHover: "rgb(244, 246, 249)",
/* Default secondary button */
colorBackgroundButtonDefault: "rgb(255, 255, 255)",
/* Background color for icon-only button - disabled state */
colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
/* Background color for icon-only button - focus state */
colorBackgroundButtonIconFocus: "rgb(244, 246, 249)",
buttonColorBackgroundSecondary: "rgba(255, 255, 255, 0.8)",
/* Brandable primary button - disabled state */
colorBackgroundButtonBrandDisabled: "rgb(224, 229, 238)",
/* Brandable primary button - hover state */
colorBackgroundButtonBrandHover: "rgb(0, 95, 178)",
/* Active button backgrounds on inverse backgrounds on mobile */
colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
/* Background color for icon-only button - hover state */
colorBackgroundButtonIconHover: "rgb(244, 246, 249)",
/* Brandable primary button */
colorBackgroundButtonBrand: "rgb(0, 112, 210)",
/* Background color for icon-only button */
colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
/* Default secondary button - disabled state */
colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
/* Background color for icon-only button - active state */
colorBackgroundButtonIconActive: "rgb(238, 241, 246)",
/* Brandable primary button - active state */
colorBackgroundButtonBrandActive: "rgb(0, 57, 107)",
/* Button backgrounds on inverse/dark backgrounds */
colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
buttonColorBackgroundPrimary: "rgb(255, 255, 255)",
/* Default secondary button - active state */
colorBackgroundButtonDefaultActive: "rgb(238, 241, 246)",
/* Line heights for regular buttons */
lineHeightButton: "1.875rem",
/* Line heights for small buttons */
lineHeightButtonSmall: "1.75rem",
/* Line height for touch screens */
buttonLineHeightTouch: "2.65rem",
buttonColorTextPrimary: "rgb(255, 255, 255)",
/* Default Card component background color. */
cardColorBackground: "rgb(255, 255, 255)",
cardColorBorder: "rgb(221, 219, 218)",
cardFooterColorBorder: "rgba(0, 0, 0, 0)",
cardShadow: "none",
/* Use for active tab. */
cardFontWeight: "400",
/* */
cardFooterMargin: "0.75rem",
/* */
cardBodyPadding: "0 1rem",
/* */
cardWrapperSpacing: "1rem",
/* */
cardHeaderPadding: "0.75rem 1rem 0",
/* */
cardSpacingLarge: "1.5rem",
/* */
cardHeaderMargin: "0 0 0.75rem",
/* Use for vertical spacing between cards */
cardSpacingMargin: "1rem",
/* */
cardFooterPadding: "0 1rem 0.75rem",
/* */
cardSpacingSmall: "0.75rem",
cardFooterTextAlign: "right",
/* Default background for carousel card */
carouselColorBackground: "rgb(255, 255, 255)",
/* Default background for carousel navigation indicators */
carouselIndicatorColorBackground: "rgb(255, 255, 255)",
/* Default hover background for carousel navigation indicators */
carouselIndicatorColorBackgroundHover: "rgb(250, 250, 249)",
/* Default focus background for carousel navigation indicators */
carouselIndicatorColorBackgroundFocus: "rgb(0, 95, 178)",
/* Default background for active state on carousel navigation indicators */
carouselIndicatorColorBackgroundActive: "rgb(0, 112, 210)",
/* Default width for carousel indicator width */
carouselIndicatorWidth: "1rem",
/* Inbound chat message background color. */
chatMessageColorBackgroundInbound: "rgb(242, 242, 243)",
/* Outbound chat message background color. */
chatMessageColorBackgroundOutbound: "rgb(0, 95, 178)",
/* Outbound agent chat message background color. */
chatMessageColorBackgroundOutboundAgent: "rgb(107, 109, 112)",
/* S