@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
513 lines (512 loc) • 27.2 kB
JavaScript
;
module.exports = {
// Used as the background color for the active state on rows or items on list-like components.
colorBackgroundRowActive: 'rgb(236, 235, 234)',
// Brandable modal header
colorBackgroundModalBrand: 'rgb(0, 112, 210)',
// Background color for notification list item.
colorBackgroundNotification: 'rgb(255, 255, 255)',
// Background color for a new notification list item.
colorBackgroundNotificationNew: 'rgb(243, 242, 242)',
// Notifications badge background color.
colorBackgroundNotificationBadgeActive: 'rgb(0, 57, 107)',
// Notifications badge background color.
colorBackgroundNotificationBadgeHover: 'rgb(0, 95, 178)',
colorContrastPrimary: 'rgb(243, 242, 242)',
// Used as the background color for the hover state on rows or items on list-like components.
colorBackgroundRowHover: 'rgb(243, 242, 242)',
colorForegroundPrimary: 'rgb(255, 255, 255)',
// 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)',
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundTempModalTint: 'rgba(43, 40, 38, 0.6)',
// Background color for reminder notification on hover
colorBackgroundReminderHover: 'rgb(255, 255, 255)',
// 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)',
// Notifications badge background color.
colorBackgroundNotificationBadge: 'rgb(194, 57, 52)',
// Color of the indicator dot.
colorBackgroundIndicatorDot: 'rgb(22, 50, 92)',
cardWrapperColorBackground: 'rgb(255, 255, 255)',
// Alternative background color for dark portions of the app.
colorBackgroundAltInverse: 'rgb(22, 50, 92)',
popoverWalkthroughHeaderImage: '/assets/images/popovers/popover-header.png',
// Disabled input
colorBackgroundInputDisabled: 'rgb(236, 235, 234)',
// Used as the background color for the new state on rows or items on list-like components.
colorBackgroundRowNew: 'rgb(217, 255, 223)',
// Hovered toggle background color.
colorBackgroundToggleHover: 'rgb(150, 148, 146)',
popoverWalkthroughColorBackground: 'rgb(3, 46, 97)',
// Dark color for UI elements that have to do with success. Accessible with white text.
colorBackgroundSuccessDark: 'rgb(4, 132, 75)',
// Background color for reminder notification
colorBackgroundReminder: 'rgb(244, 246, 249)',
// Used as background for loading stencils on white background.
colorBackgroundStencil: 'rgb(243, 242, 242)',
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
colorBackgroundAlt2: 'rgb(243, 242, 242)',
// Color for UI elements that have to do with warning.
colorBackgroundWarning: 'rgb(255, 183, 93)',
// Hovered background color for success buttons
colorBackgroundButtonSuccessHover: 'rgb(4, 132, 75)',
popoverWalkthroughAltImage: '/assets/images/popovers/popover-action.png',
// Hover color for utility bar item.
colorBackgroundUtilityBarHover: 'rgb(236, 235, 234)',
progressColorBorderShade: 'rgb(243, 242, 242)',
// Background color for highlighting text in search results.
colorBackgroundHighlightSearch: 'rgb(255, 240, 63)',
// Toggle background color.
colorBackgroundToggle: 'rgb(176, 173, 171)',
// Use COLOR_BACKGROUND_PAGE_HEADER instead.
colorBackgroundAnchor: 'rgb(243, 242, 242)',
popoverWalkthroughAltNubbinColorBackground: 'rgb(33, 92, 160)',
// Hover color for UI elements related to destructive actions.
colorBackgroundDestructiveHover: 'rgb(166, 26, 20)',
progressColorBackgroundShade: 'rgb(243, 242, 242)',
// 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)',
// Background color for success buttons
colorBackgroundButtonSuccess: 'rgb(75, 202, 129)',
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundBackdrop: 'rgba(255, 255, 255, 0.75)',
// Our product brand blue.
colorBrand: 'rgb(21, 137, 238)',
// Background color for default desktop chrome (ex. global header)
colorBackgroundChromeDesktop: 'rgb(255, 255, 255)',
// Default Page Header background color
pageHeaderColorBackground: 'rgb(243, 242, 242)',
// Active button backgrounds on modal headers
colorBackgroundModalButtonActive: 'rgba(0, 0, 0, 0.16)',
// Color for UI elements related to destructive actions.
colorBackgroundDestructive: 'rgb(194, 57, 52)',
// Selected checkboxes
colorBackgroundInputCheckboxSelected: 'rgb(21, 137, 238)',
// Default checkboxes
colorBackgroundInputCheckbox: 'rgb(255, 255, 255)',
colorBackgroundPrimary: 'rgb(243, 242, 242)',
// Color for UI elements that have to do with success.
colorBackgroundSuccess: 'rgb(75, 202, 129)',
// Disabled checkboxes
colorBackgroundInputCheckboxDisabled: 'rgb(221, 219, 218)',
// Background color for pills.
colorBackgroundPill: 'rgb(255, 255, 255)',
// Color of the spinner dot.
colorBackgroundSpinnerDot: 'rgb(176, 173, 171)',
colorBackgroundBrandPrimaryFocus: 'rgb(0, 95, 178)',
// Color for UI elements related to the offline state.
colorBackgroundOffline: 'rgb(62, 62, 60)',
tableColorBackgroundHeaderHover: 'rgb(255, 255, 255)',
// The color of the mask overlay that provides user feedback on interaction.
colorBackgroundBackdropTint: 'rgb(250, 250, 249)',
colorBackgroundBrandPrimaryActive: 'rgb(0, 95, 178)',
// Selected input field (when user has clicked or tabbed into field)
colorBackgroundInputActive: 'rgb(255, 255, 255)',
popoverWalkthroughColorBackgroundAlt: 'rgb(22, 74, 133)',
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead.
brandBandColorBackgroundSecondary: 'rgb(253, 253, 253)',
tableColorBackgroundHeader: 'rgb(250, 250, 249)',
// Used as an alternate background for loading stencils on gray backgrounds.
colorBackgroundStencilAlt: 'rgb(236, 235, 234)',
// 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)',
colorBackgroundBrandPrimaryHover: 'rgb(0, 95, 178)',
// Background color for default mobile chrome (ex. global header)
colorBackgroundChromeMobile: 'rgb(0, 112, 210)',
// 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)',
// 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)',
colorContrastSecondary: 'rgb(243, 242, 242)',
// Secondary top bar background color (child browser, file preview, etc.)
colorBackgroundBrowser: 'rgb(112, 110, 107)',
// Second default background color for the app.
colorBackgroundAlt: 'rgb(255, 255, 255)',
// Background color of comment posts in the feed.
colorBackgroundPost: 'rgb(250, 250, 249)',
colorBackgroundBrandPrimary: 'rgb(0, 112, 210)',
// Used as the background color for selected rows or items on list-like components.
colorBackgroundRowSelected: 'rgb(236, 235, 234)',
// 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)',
// Our product brand blue, darkened even further.
colorBrandDarker: 'rgb(0, 95, 178)',
// Used as the default background color for temporary dialog elements, such as the progress spinner background.
colorBackgroundTempModal: 'rgb(150, 148, 146)',
// Background color for text selected with a mouse.
colorBackgroundSelection: 'rgb(216, 237, 255)',
// Used as gray background when more contrast is desired.
colorBackgroundShade: 'rgb(236, 235, 234)',
// Standard modal header
colorBackgroundModal: 'rgb(255, 255, 255)',
// Active color for UI elements related to destructive actions.
colorBackgroundDestructiveActive: 'rgb(135, 5, 0)',
// Hovered active toggle background color.
colorBackgroundToggleActiveHover: 'rgb(0, 95, 178)',
// Background color for payloads in the feed.
colorBackgroundPayload: 'rgb(250, 250, 249)',
// Button backgrounds on modal headers
colorBackgroundModalButton: 'rgba(0, 0, 0, 0.07)',
// Active color for utility bar item.
colorBackgroundUtilityBarActive: 'rgb(21, 137, 238)',
// Active background color for success buttons
colorBackgroundButtonSuccessActive: 'rgb(4, 132, 75)',
buttonColorBackgroundPrimary: 'rgb(255, 255, 255)',
// Background color for error toast messaging.
colorBackgroundToastError: 'rgb(194, 57, 52)',
// Stage left org switcher dropdown arrow background color.
colorBackgroundOrgSwitcherArrow: 'rgb(6, 28, 63)',
// Default background color for dark portions of the app (like Stage Left or tooltips).
colorBackgroundInverse: 'rgb(6, 28, 63)',
// Active toggle background color.
colorBackgroundToggleActive: 'rgb(0, 112, 210)',
colorPickerSliderThumbColorBackground: 'rgb(243, 242, 242)',
// 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)',
// Notifications badge background color.
colorBackgroundNotificationBadgeFocus: 'rgb(0, 95, 178)',
// Background for utility icons that live in the action bar on mobile.
colorBackgroundActionbarIconUtility: 'rgb(112, 110, 107)',
// The background color of an internal scrollbar track.
colorBackgroundScrollbarTrack: 'rgb(201, 199, 197)',
// Background color for input field that has encountered an error.
colorBackgroundInputError: 'rgb(255, 221, 225)',
// Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
brandBandColorBackgroundPrimary: 'rgb(253, 253, 253)',
// Background color for highlighting UI elements.
colorBackgroundHighlight: 'rgb(250, 255, 189)',
colorBackgroundSecondary: 'rgb(255, 255, 255)',
popoverWalkthroughHeaderColorBackground: 'rgb(22, 74, 133)',
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',
// The borders to create the checkmark
colorBorderInputCheckboxSelectedCheckmark: 'rgb(255, 255, 255)',
// 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)',
// Dark alternative border color for UI elements related to errors.
colorBorderErrorDark: 'rgb(234, 130, 136)',
// 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)',
// 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)',
// Border color for an active tab.
colorBorderTabActive: 'rgb(255, 255, 255)',
// Disabled stroke color.
colorStrokeDisabled: 'rgb(236, 235, 234)',
// 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)',
// Border color on disabled form elements.
colorBorderInputDisabled: 'rgb(201, 199, 197)',
// Dark alternative border color for UI elements that have to do with success.
colorBorderSuccessDark: 'rgb(4, 132, 75)',
// Border color on notification reminders.
colorBorderReminder: 'rgb(236, 235, 234)',
// Active stroke color for our product brand blue.
colorStrokeBrandActive: 'rgb(22, 50, 92)',
// Border color for brandable primary button - disabled state
colorBorderButtonBrandDisabled: 'rgba(0, 0, 0, 0)',
pageHeaderColorBorder: 'rgb(221, 219, 218)',
// Border color for UI elements that have to do with destructive actions.
colorBorderDestructive: 'rgb(194, 57, 52)',
colorBorderPrimary: 'rgb(221, 219, 218)',
// Border color for default secondary button
colorBorderButtonDefault: 'rgb(221, 219, 218)',
// 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)',
colorBorderBrandPrimaryFocus: 'rgb(0, 95, 178)',
// 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(243, 242, 242)',
// Our product brand blue.
colorBorderBrand: 'rgb(21, 137, 238)',
colorBorderBrandPrimaryHover: 'rgb(0, 95, 178)',
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
colorBorderSelectionActive: 'rgb(243, 242, 242)',
// Border color for brandable primary button
colorBorderButtonBrand: 'rgb(0, 112, 210)',
// 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)',
colorBorderBrandPrimaryActive: 'rgb(0, 95, 178)',
// Border color on active form elements.
colorBorderInputActive: 'rgb(21, 137, 238)',
// Border color on form elements.
colorBorderInput: 'rgb(221, 219, 218)',
colorBorderBrandPrimary: 'rgb(0, 112, 210)',
// These borders create the faux checkmark when the checkbox toggle is in the checked state.
colorBorderToggleChecked: 'rgb(255, 255, 255)',
// 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 to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
colorBorderCanvasElementSelectionHover: 'rgb(0, 95, 178)',
cardColorBorder: 'rgb(221, 219, 218)',
// Used as the border color for selected rows or items on list-like components.
colorBorderRowSelected: 'rgb(0, 112, 210)',
buttonColorBorderPrimary: 'rgb(221, 219, 218)',
// Medium separator color - used as default separator on light gray backgrounds.
colorBorderSeparatorAlt: 'rgb(221, 219, 218)',
// 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)',
// Border color to match UI elements using color-background-inverse.
colorBorderInverse: 'rgb(6, 28, 63)',
// Stroke color for our global header buttons.
colorStrokeHeaderButton: 'rgb(176, 173, 171)',
// 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)',
pageHeaderJoinedColorBorder: 'rgb(221, 219, 218)',
// Our product brand blue.
colorStrokeBrand: 'rgb(0, 112, 210)',
// Border color for a selected tab in a tab group.
colorBorderTabSelected: 'rgb(0, 112, 210)',
cardFooterColorBorder: 'rgb(221, 219, 218)',
// Used as a separator on dark backgrounds, such as stage left navigation.
colorBorderSeparatorInverse: 'rgb(42, 66, 108)',
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.1)',
shadowSoftPrimaryHover: 'rgba(0, 0, 0, 0.20) 0 3px 6px',
// Custom glow for focus states on UI elements with explicit containers.
shadowButtonFocus: '0 0 3px #0070D2',
// Shadow for header.
shadowHeader: '0 2px 4px rgba(0, 0, 0, 0.07)',
// Soft dropshadow found on general UI elements such as containers
shadowSoftPrimary: 'rgba(0, 0, 0, 0.1) 0 2px 2px',
// Hard dropshadow found on general UI elements such as containers
shadowHardPrimary: 'rgba(0, 0, 0, 0.1) 0 2px 0',
// Shadow above overflow menu close bar.
shadowActionOverflowFooter: '0 -2px 4px #fafaf9',
// Hard dropshadow found on outer cards
cardShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.1)',
// Shadow for notifications that should be elevated above other components but under modals.
shadowReminder: '0 2px 3px 0 rgba(0, 0, 0, 0.20)',
// Shadow on elements that are docked to the bottom of the viewport.
shadowDocked: '0 -2px 2px 0 rgba(0, 0, 0, 0.16)',
// Shadow to make inline edit card pop out.
shadowInlineEdit: '0 2px 4px 4px rgba(0, 0, 0, 0.16)',
// 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)',
// Inset shadow for editable grid
shadowFocusInset: '0 0 2px 2px #1589EE inset',
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',
// Shadow on images.
shadowImage: '0 1px 1px rgba(0, 0, 0, 0.16)',
formLabelFontSize: '.75rem',
inputStaticFontSize: '0.875rem',
inputStaticFontWeight: '400',
// Use for active tab.
tabsFontWeight: '700',
// Use for active tab.
cardFontWeight: '700',
pageHeaderTitleFontWeight: '700',
//
componentSpacingMargin: '0.75rem',
//
componentSpacingPadding: '1rem',
//
templateGutters: '0.75rem',
//
templateProfileGutters: '8rem 0.75rem 0.75rem',
//
tableCellSpacing: '0.25rem 0.5rem',
//
cardSpacingMargin: '0.75rem',
//
cardFooterPadding: '0.75rem 1rem',
cardFooterTextAlign: 'center',
// Icon color on dark background
colorTextIconInverse: 'rgb(255, 255, 255)',
// Action label text color
colorTextActionLabel: 'rgb(112, 110, 107)',
// Link color on dark background
colorTextLinkInverse: '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.15)',
// Hovered icon color for a button that has a parent element that has a hover state
colorTextIconInverseHintHover: 'rgba(255, 255, 255, 0.75)',
// Input icon
colorTextInputIcon: 'rgb(176, 173, 171)',
// Link color on dark background - active state
colorTextLinkInverseActive: 'rgba(255, 255, 255, 0.5)',
// Action label active text color
colorTextActionLabelActive: 'rgb(62, 62, 60)',
// Icon color on dark background - active state
colorTextIconInverseActive: 'rgb(255, 255, 255)',
// Color for text on a selected tab in a tab group.
colorTextTabLabelSelected: 'rgb(0, 112, 210)',
// Color for texts or icons that are related to warnings on a dark background.
colorTextWarning: 'rgb(255, 183, 93)',
// 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(236, 235, 234)',
// Text color for default secondary button - hover state
colorTextButtonDefaultHover: 'rgb(0, 112, 210)',
// Input disabled text
colorTextInputDisabled: 'rgb(112, 110, 107)',
// Tertiary body text color
colorTextTertiary: 'rgb(150, 148, 146)',
// Focus link text
colorTextLinkFocus: 'rgb(0, 95, 178)',
// Text color for default secondary button
colorTextButtonDefault: 'rgb(0, 112, 210)',
// Default icon color - disabled state
colorTextIconDefaultDisabled: 'rgb(221, 219, 218)',
// Disabled link text
colorTextLinkDisabled: 'rgb(22, 50, 92)',
// Body text color
colorTextDefault: 'rgb(62, 62, 60)',
// Active state on a standalone link on a dark background.
colorTextInverseActive: 'rgb(94, 180, 255)',
// Text color for brandable primary button - disabled state
colorTextButtonBrandDisabled: 'rgb(255, 255, 255)',
// Primary body text color
colorTextPrimary: 'rgb(62, 62, 60)',
colorTextLinkPrimaryFocus: 'rgb(0, 95, 178)',
// Text color for brandable primary button - hover state
colorTextButtonBrandHover: 'rgb(255, 255, 255)',
// Hover link text
colorTextLinkHover: 'rgb(0, 95, 178)',
// Color for text in focus state in a tab group.
colorTextTabLabelFocus: '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(112, 110, 107)',
// Input placeholder text on dark backgrounds.
colorTextPlaceholderInverse: 'rgb(236, 235, 234)',
// Default icon color - hover state.
colorTextIconDefaultHover: 'rgb(0, 112, 210)',
// 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)',
// Text color for pills.
colorTextPill: 'rgb(0, 112, 210)',
colorTextLinkPrimaryHover: 'rgb(0, 95, 178)',
// 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)',
// Text color for brandable primary button
colorTextButtonBrand: 'rgb(255, 255, 255)',
// Color for text in active state in a tab group.
colorTextTabLabelActive: 'rgb(0, 57, 107)',
// Default icon color.
colorTextIconDefault: 'rgb(112, 110, 107)',
// Our product brand blue.
colorTextBrand: 'rgb(21, 137, 238)',
// Color for text in hover state in a tab group.
colorTextTabLabelHover: 'rgb(0, 95, 178)',
// Text color for default secondary button - disabled state
colorTextButtonDefaultDisabled: 'rgb(221, 219, 218)',
// Color for text on toast messages.
colorTextToast: 'rgb(236, 235, 234)',
// Color for disabled toggles
colorTextToggleDisabled: 'rgb(221, 219, 218)',
// Top bar icon color
colorTextBrowser: 'rgb(255, 255, 255)',
colorTextLinkPrimaryActive: 'rgb(0, 95, 178)',
// Error text for inputs and error misc
colorTextError: 'rgb(194, 57, 52)',
colorTextLinkPrimary: 'rgb(0, 112, 210)',
// Top bar active icon color
colorTextBrowserActive: 'rgba(0, 0, 0, 0.4)',
// Color for default text in a tab group.
colorTextTabLabel: 'rgb(22, 50, 92)',
// Customer text used in anchor subtitle
colorTextCustomer: 'rgb(255, 154, 60)',
// Default icon color - active state.
colorTextIconDefaultActive: 'rgb(0, 57, 107)',
// Text color found on any primary brand color
colorTextBrandPrimary: 'rgb(255, 255, 255)',
// Active link text
colorTextLinkActive: '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(176, 173, 171)',
// Text color for brandable primary button - active state
colorTextButtonBrandActive: 'rgb(255, 255, 255)',
// Color of required field marker.
colorTextRequired: 'rgb(194, 57, 52)',
// 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(176, 173, 171)',
// Modal header title
colorTextModal: '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(236, 235, 234)',
buttonColorTextPrimary: 'rgb(255, 255, 255)',
// Modal header button text color
colorTextModalButton: 'rgb(112, 110, 107)',
// 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)',
// 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(176, 173, 171)',
// Color for interactive utility icons
colorTextIconUtility: 'rgb(176, 173, 171)',
// Icon color on dark background - hover state
colorTextIconInverseHover: 'rgb(255, 255, 255)',
// Input placeholder text.
colorTextPlaceholder: 'rgb(112, 110, 107)',
// Weak inverse text color for dark backgrounds
colorTextInverseWeak: 'rgb(176, 173, 171)',
// Secondary body text color
colorTextSecondary: 'rgb(112, 110, 107)',
// Typed input text
colorTextInputFocusInverse: 'rgb(22, 50, 92)',
// Text in stage left navigation.
colorTextStageLeft: 'rgb(236, 235, 234)',
// 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(112, 110, 107)'
};