UNPKG

@salesforce-ux/design-system

Version:
698 lines 33.6 kB
module.exports = { /* Used as the background color for the active state on rows or items on list-like components. */ colorBackgroundRowActive: "rgb(236, 235, 234)", /* 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(243, 242, 242)", /* 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(112, 110, 107)", /* 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(243, 242, 242)", /* 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(243, 242, 242)", /* 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(236, 235, 234)", /* 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, 62, 60)", /* Used as an alternate background for loading stencils on gray backgrounds. */ colorBackgroundStencilAlt: "rgb(236, 235, 234)", /* 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(236, 235, 234)", /* 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(112, 110, 107)", /* 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(221, 219, 218)", /* 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(201, 199, 197)", /* Border color for UI elements related to the offline state. */ colorBorderOffline: "rgb(62, 62, 60)", /* 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(250, 250, 249)", /* 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(250, 250, 249)", /* 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(221, 219, 218)", /* 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(25, 85, 148, 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(176, 196, 223)", /* 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(25, 85, 148)", /* 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(176, 196, 223, 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(62, 62, 60)", /* 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(8, 7, 7)", /* 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(8, 7, 7)", /* 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(62, 62, 60)", /* Input placeholder text on dark backgrounds. */ colorTextPlaceholderInverse: "rgb(236, 235, 234)", /* Link text (508) */ colorTextLink: "rgb(0, 109, 204)", /* Color for texts that are related to warnings on a light background. */ colorTextWarningAlt: "rgb(132, 72, 0)", /* Default icon color. */ colorTextIconDefault: "rgb(112, 110, 107)", /* 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(112, 110, 107)", /* Weak inverse text color for dark backgrounds */ colorTextInverseWeak: "rgb(176, 173, 171)", /* 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(62, 62, 60)", /* 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", colorContrastPrimary: "rgb(243, 242, 242)", /* The color of the mask overlay that appears when you enter a modal state. */ colorBackgroundTempModalTint: "rgba(8, 7, 7, 0.6)", /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_DARK_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug */ brandBandColorBackgroundSecondaryTransparent: "rgba(253, 253, 253, 0)", /* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */ colorBackgroundAlt2: "rgb(243, 242, 242)", /* Hover color for utility bar item. */ colorBackgroundUtilityBarHover: "rgb(236, 235, 234)", /* Use COLOR_BACKGROUND_PAGE_HEADER instead. */ colorBackgroundAnchor: "rgb(243, 242, 242)", colorBackgroundPrimary: "rgb(243, 242, 242)", /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead. */ brandBandColorBackgroundSecondary: "rgb(253, 253, 253)", /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug */ brandBandColorBackgroundPrimaryTransparent: "rgba(253, 253, 253, 0)", colorContrastSecondary: "rgb(243, 242, 242)", /* Secondary top bar background color (child browser, file preview, etc.) */ colorBackgroundBrowser: "rgb(112, 110, 107)", /* Used as the default background color for temporary dialog elements, such as the progress spinner background. */ colorBackgroundTempModal: "rgb(150, 148, 146)", /* Used as gray background when more contrast is desired. */ colorBackgroundShade: "rgb(236, 235, 234)", /* Background color for payloads in the feed. */ colorBackgroundPayload: "rgb(250, 250, 249)", /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */ pageColorBackgroundPrimary: "rgb(253, 253, 253)", /* Used as gray background in conjunction with Shade when more contrast is desired. */ colorBackgroundShadeDark: "rgb(221, 219, 218)", /* Background for utility icons that live in the action bar on mobile. */ colorBackgroundActionbarIconUtility: "rgb(112, 110, 107)", /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */ brandBandColorBackgroundPrimary: "rgb(253, 253, 253)", colorBackgroundSecondary: "rgb(255, 255, 255)", colorBorderPrimary: "rgb(221, 219, 218)", /* Our product brand blue. */ colorStrokeBrand: "rgb(0, 112, 210)", /* Hover stroke color for our product brand blue. */ colorStrokeBrandHover: "rgb(0, 112, 210)", /* Active stroke color for our product brand blue. */ colorStrokeBrandActive: "rgb(22, 50, 92)", /* Disabled stroke color. */ colorStrokeDisabled: "rgb(236, 235, 234)", /* Stroke color for our global header buttons. */ colorStrokeHeaderButton: "rgb(176, 173, 171)", /* Hard dropshadow found on general UI elements such as containers */ shadowHardPrimary: "rgba(0, 0, 0, 0.10) 0 2px 0", /* Soft dropshadow found on general UI elements such as containers */ shadowSoftPrimary: "rgba(0, 0, 0, 0.10) 0 2px 2px", shadowSoftPrimaryHover: "rgba(0, 0, 0, 0.20) 0 3px 6px", shadowSoftPrimaryActive: "rgba(0, 0, 0, 0.20) 0 1px 1px", /* Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds. */ shadowButtonFocusInverse: "0 0 3px #ecebea", /* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */ shadowLinkFocusInverse: "0 0 3px #ecebea", /* */ componentSpacingMargin: "0.75rem", /* */ componentSpacingPadding: "1rem", /* */ cardSpacingMargin: "0.75rem", /* */ cardFooterPadding: "0.75rem 1rem", /* Tertiary body text color */ colorTextTertiary: "rgb(150, 148, 146)", /* Active state on a standalone link on a dark background. */ colorTextInverseActive: "rgb(94, 180, 255)", /* 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(236, 235, 234)", /* Color for text on toast messages. */ colorTextToast: "rgb(236, 235, 234)", /* Hover state on a standalone link on a dark background. */ colorTextInverseHover: "rgb(176, 173, 171)", /* Modal header button text color */ colorTextModalButton: "rgb(62, 62, 60)", /* Color for interactive utility icons */ colorTextIconUtility: "rgb(176, 173, 171)", /* Secondary body text color */ colorTextSecondary: "rgb(62, 62, 60)", /* Text in stage left navigation. */ colorTextStageLeft: "rgb(236, 235, 234)", /* Background color for a new notification list item. */ colorBackgroundNotificationNew: "rgb(243, 242, 242)", popoverWalkthroughHeaderImage: "/assets/images/popovers/popover-header.png", /* Disabled input */ colorBackgroundInputDisabled: "rgb(236, 235, 234)", /* Hovered toggle background color. */ colorBackgroundToggleHover: "rgb(150, 148, 146)", popoverWalkthroughColorBackground: "rgb(3, 46, 97)", popoverWalkthroughAltImage: "/assets/images/popovers/popover-action.png", progressColorBorderShade: "rgb(243, 242, 242)", /* Toggle background color. */ colorBackgroundToggle: "rgb(176, 173, 171)", popoverWalkthroughAltNubbinColorBackground: "rgb(33, 92, 160)", progressColorBackgroundShade: "rgb(243, 242, 242)", /* Default Page Header background color */ pageHeaderColorBackground: "rgb(243, 242, 242)", /* Disabled checkboxes */ colorBackgroundInputCheckboxDisabled: "rgb(221, 219, 218)", /* Color of the spinner dot. */ colorBackgroundSpinnerDot: "rgb(176, 173, 171)", tableColorBackgroundHeaderHover: "rgb(255, 255, 255)", /* The color of the mask overlay that provides user feedback on interaction. */ colorBackgroundBackdropTint: "rgb(250, 250, 249)", popoverWalkthroughColorBackgroundAlt: "rgb(22, 74, 133)", tableColorBackgroundHeader: "rgb(250, 250, 249)", /* The background color of an internal scrollbar. */ colorBackgroundScrollbar: "rgb(236, 235, 234)", /* Disabled toggle background color. */ colorBackgroundToggleDisabled: "rgb(176, 173, 171)", /* Background color for toast messaging. */ colorBackgroundToast: "rgb(112, 110, 107)", /* Background color of comment posts in the feed. */ colorBackgroundPost: "rgb(243, 242, 242)", /* Color of mask overlay that sits on top of an image when text is present. */ colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.6)", colorPickerSliderThumbColorBackground: "rgb(243, 242, 242)", /* The background color of an internal scrollbar track. */ colorBackgroundScrollbarTrack: "rgb(201, 199, 197)", popoverWalkthroughHeaderColorBackground: "rgb(22, 74, 133)", /* Border color on disabled form elements. */ colorBorderInputDisabled: "rgb(201, 199, 197)", /* Border color on notification reminders. */ colorBorderReminder: "rgb(236, 235, 234)", pageHeaderColorBorder: "rgb(221, 219, 218)", /* Border color for default secondary button */ colorBorderButtonDefault: "rgb(221, 219, 218)", /* Border color on form elements. */ colorBorderInput: "rgb(221, 219, 218)", colorBorderButtonFocusInverse: "rgb(236, 235, 234)", cardColorBorder: "rgb(221, 219, 218)", buttonColorBorderPrimary: "rgb(221, 219, 218)", colorBorderLinkFocusInverse: "rgb(236, 235, 234)", pageHeaderJoinedColorBorder: "rgb(221, 219, 218)", cardFooterColorBorder: "rgb(221, 219, 218)", pageHeaderBorderRadius: "0.25rem", tableBorderRadius: "0 0 0.25rem 0.25rem", /* Hard dropshadow on page header */ pageHeaderShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)", /* Hard dropshadow found on outer cards */ cardShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)", formLabelFontSize: "0.75rem", inputStaticFontSize: "0.875rem", inputStaticFontWeight: "400", /* Use for active tab. */ tabsFontWeight: "700", /* Use for active tab. */ cardFontWeight: "700", pageHeaderTitleFontWeight: "700", brandBandDefaultImage: "/assets/images/themes/oneSalesforce/banner-brand-default.png", bannerUserDefaultImage: "/assets/images/themes/oneSalesforce/banner-user-default.png", bannerGroupDefaultImage: "/assets/images/themes/oneSalesforce/banner-group-public-default.png", templateGutters: "0.75rem", templateProfileGutters: "8rem 0.75rem 0.75rem", tableCellSpacing: "0.25rem 0.5rem", cardFooterTextAlign: "center", /* Icon color on dark background */ colorTextIconInverse: "rgb(255, 255, 255)", /* Input icon */ colorTextInputIcon: "rgb(176, 173, 171)", /* Icon color on dark background - active state */ colorTextIconInverseActive: "rgb(255, 255, 255)", /* Color for disabled text in a tab group. */ colorTextTabLabelDisabled: "rgb(236, 235, 234)", /* Input disabled text */ colorTextInputDisabled: "rgb(62, 62, 60)", /* Default icon color - disabled state */ colorTextIconDefaultDisabled: "rgb(221, 219, 218)", /* Text color for default secondary button - disabled state */ colorTextButtonDefaultDisabled: "rgb(221, 219, 218)", /* Color for disabled toggles */ colorTextToggleDisabled: "rgb(221, 219, 218)", /* Color for default text in a tab group. */ colorTextTabLabel: "rgb(43, 40, 38)", /* 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(176, 173, 171)", /* 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(236, 235, 234)", /* 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(176, 173, 171)", /* Icon color on dark background - hover state */ colorTextIconInverseHover: "rgb(255, 255, 255)", };