@salesforce-ux/design-system/design-tokens/dist/components.json

Salesforce Lightning Design System

{
  "AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST": "rgb(255, 255, 255)",
  "AVATAR_GROUP_COLOR_BACKGROUND_INVERSE": "rgb(112, 110, 107)",
  "BADGE_COLOR_BACKGROUND_LIGHTEST": "rgb(255, 255, 255)",
  "BADGE_COLOR_BACKGROUND_INVERSE": "rgb(112, 110, 107)",
  "BRAND_BAND_DEFAULT_IMAGE": "",
  "BRAND_BAND_COLOR_BACKGROUND_PRIMARY": "rgba(0, 0, 0, 0)",
  "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT": "rgba(0, 0, 0, 0)",
  "BRAND_BAND_COLOR_BACKGROUND_SECONDARY": "rgba(0, 0, 0, 0)",
  "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT": "rgba(0, 0, 0, 0)",
  "BRAND_BAND_IMAGE_HEIGHT_SMALL": "6rem",
  "BRAND_BAND_IMAGE_HEIGHT_MEDIUM": "12.5rem",
  "BRAND_BAND_IMAGE_HEIGHT_LARGE": "18.75rem",
  "BRAND_BAND_SCRIM_HEIGHT": "3.125rem",
  "TEMPLATE_GUTTERS": "0",
  "TEMPLATE_PROFILE_GUTTERS": "0",
  "BUTTON_ICON_COLOR_BORDER_PRIMARY": "rgb(255, 255, 255)",
  "BUTTON_ICON_BOUNDARY_TOUCH": "2.75rem",
  "BUTTON_COLOR_BORDER_PRIMARY": "rgb(216, 221, 230)",
  "BUTTON_COLOR_BORDER_BRAND_PRIMARY": "rgb(0, 112, 210)",
  "BUTTON_COLOR_BORDER_SECONDARY": "rgba(255, 255, 255, 0.8)",
  "BUTTON_BORDER_RADIUS": ".25rem",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS": "rgb(244, 246, 249)",
  "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY": "rgb(0, 112, 210)",
  "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED": "rgba(0, 0, 0, 0)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER": "rgb(244, 246, 249)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_DISABLED": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_FOCUS": "rgb(244, 246, 249)",
  "BUTTON_COLOR_BACKGROUND_SECONDARY": "rgba(255, 255, 255, 0.8)",
  "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED": "rgb(224, 229, 238)",
  "COLOR_BACKGROUND_BUTTON_BRAND_HOVER": "rgb(0, 95, 178)",
  "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE": "rgba(0, 0, 0, 0.24)",
  "COLOR_BACKGROUND_BUTTON_ICON_HOVER": "rgb(244, 246, 249)",
  "COLOR_BACKGROUND_BUTTON_BRAND": "rgb(0, 112, 210)",
  "COLOR_BACKGROUND_BUTTON_ICON": "rgba(0, 0, 0, 0)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE": "rgb(238, 241, 246)",
  "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE": "rgb(0, 57, 107)",
  "COLOR_BACKGROUND_BUTTON_INVERSE": "rgba(0, 0, 0, 0)",
  "BUTTON_COLOR_BACKGROUND_PRIMARY": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE": "rgb(238, 241, 246)",
  "LINE_HEIGHT_BUTTON": "1.875rem",
  "LINE_HEIGHT_BUTTON_SMALL": "1.75rem",
  "BUTTON_LINE_HEIGHT_TOUCH": "2.65rem",
  "BUTTON_COLOR_TEXT_PRIMARY": "rgb(255, 255, 255)",
  "CARD_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "CARD_COLOR_BORDER": "rgb(221, 219, 218)",
  "CARD_FOOTER_COLOR_BORDER": "rgba(0, 0, 0, 0)",
  "CARD_SHADOW": "none",
  "CARD_FONT_WEIGHT": "400",
  "CARD_FOOTER_MARGIN": "0.75rem",
  "CARD_BODY_PADDING": "0 1rem",
  "CARD_WRAPPER_SPACING": "1rem",
  "CARD_HEADER_PADDING": "0.75rem 1rem 0",
  "CARD_SPACING_LARGE": "1.5rem",
  "CARD_HEADER_MARGIN": "0 0 0.75rem",
  "CARD_SPACING_MARGIN": "1rem",
  "CARD_FOOTER_PADDING": "0 1rem 0.75rem",
  "CARD_SPACING_SMALL": "0.75rem",
  "CARD_FOOTER_TEXT_ALIGN": "right",
  "CAROUSEL_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER": "rgb(250, 250, 249)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS": "rgb(0, 95, 178)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE": "rgb(0, 112, 210)",
  "CAROUSEL_INDICATOR_WIDTH": "1rem",
  "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND": "rgb(242, 242, 243)",
  "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND": "rgb(0, 95, 178)",
  "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT": "rgb(107, 109, 112)",
  "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS": "rgb(255, 255, 255)",
  "LINE_HEIGHT_TOGGLE": "1.3rem",
  "SQUARE_TOGGLE_SLIDER": "1.25rem",
  "WIDTH_TOGGLE": "3rem",
  "HEIGHT_TOGGLE": "1.5rem",
  "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND": "rgb(250, 250, 249)",
  "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR": "rgb(81, 79, 77)",
  "COLOR_PICKER_SWATCH_SHADOW": "inset 0 0 1px rgba(0,0,0,0.4)",
  "COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE": "0.75rem",
  "COLOR_PICKER_SELECTOR_WIDTH": "14rem",
  "COLOR_PICKER_SWATCHES_WIDTH": "13.3rem",
  "COLOR_PICKER_RANGE_HEIGHT": "5rem",
  "COLOR_PICKER_SLIDER_HEIGHT": "1.5rem",
  "COLOR_PICKER_THUMB_WIDTH": "0.375rem",
  "COLOR_PICKER_RANGE_INDICATOR_SIZE": "0.75rem",
  "COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH": "4.2rem",
  "COLOR_PICKER_SWATCH_SIZE": "1.25rem",
  "TABLE_COLOR_BACKGROUND_STRIPES": "rgb(250, 250, 249)",
  "TABLE_COLOR_BACKGROUND_HEADER": "rgb(255, 255, 255)",
  "TABLE_COLOR_BACKGROUND_HEADER_HOVER": "rgb(250, 250, 249)",
  "TABLE_COLOR_BACKGROUND_HEADER_FOCUS": "rgb(255, 255, 255)",
  "TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE": "rgb(176, 173, 171)",
  "TABLE_BORDER_RADIUS": "0",
  "TABLE_CELL_SPACING": "0.5rem",
  "TABLE_COLOR_TEXT_HEADER": "rgb(81, 79, 77)",
  "DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH": "rgb(112, 110, 107)",
  "COLOR_BACKGROUND_DOCKED_PANEL_HEADER": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_DOCKED_PANEL": "rgb(255, 255, 255)",
  "HEIGHT_DOCKED_BAR": "2.5rem",
  "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE": "rgb(212, 80, 76)",
  "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS": "rgb(201, 199, 197)",
  "DROP_ZONE_SLOT_HEIGHT": "0.25rem",
  "COLOR_BACKGROUND_ICON_WAFFLE": "rgb(112, 110, 107)",
  "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY": "rgb(221, 219, 218)",
  "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK": "rgb(201, 199, 197)",
  "GLOBAL_ACTION_FILL_HOVER": "rgb(0, 112, 210)",
  "GLOBAL_ACTION_ICON_SIZE": "1.5rem",
  "TYPING_ICON_DOT_SIZE": ".5rem",
  "EINSTEIN_HEADER_BACKGROUND": "/assets/images/einstein-headers/einstein-header-background.svg",
  "EINSTEIN_HEADER_FIGURE": "/assets/images/einstein-headers/einstein-figure.svg",
  "EINSTEIN_HEADER_BACKGROUND_COLOR": "rgb(149, 203, 252)",
  "EINSTEIN_HEADER_TEXT_SHADOW": "#9EDAFF",
  "FILES_Z_INDEX_HOVER": 5,
  "FORM_LABEL_FONT_SIZE": "0.75rem",
  "GLOBAL_HEADER_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "BRAND_LOGO_IMAGE": "/assets/images/logo-noname.svg",
  "SQUARE_ICON_GLOBAL_IDENTITY_ICON": "1.25rem",
  "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_CONTEXT_BAR": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_HOVER": "rgba(255, 255, 255, 0.2)",
  "COLOR_BACKGROUND_CONTEXT_BAR_SHADOW": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)",
  "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_ACTIVE": "rgba(255, 255, 255, 0.4)",
  "COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT": "rgb(0, 161, 223)",
  "COLOR_BACKGROUND_CONTEXT_BAR_ACTION_HIGHLIGHT": "rgba(255, 255, 255, 0.2)",
  "COLOR_BORDER_CONTEXT_BAR_DIVIDER": "rgba(255, 255, 255, 0.2)",
  "COLOR_BORDER_CONTEXT_BAR_ITEM": "rgba(0, 0, 0, 0.2)",
  "COLOR_BORDER_CONTEXT_BAR_INVERSE_ITEM": "rgba(255, 255, 255, 0.2)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT": "rgb(0, 161, 223)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ALT": "rgb(243, 242, 242)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_HOVER": "rgb(11, 35, 153)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ACTIVE": "rgb(243, 242, 242)",
  "HEIGHT_CONTEXT_BAR": "2.5rem",
  "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_ACTIVE": "3px",
  "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_FOCUS": "4px",
  "COLOR_TEXT_CONTEXT_BAR": "rgb(62, 62, 60)",
  "COLOR_TEXT_CONTEXT_BAR_INVERSE": "rgb(255, 255, 255)",
  "COLOR_TEXT_CONTEXT_BAR_ACTION_TRIGGER": "rgba(255, 255, 255, 0.4)",
  "ILLUSTRATION_COLOR_PRIMARY": "rgb(140, 211, 248)",
  "ILLUSTRATION_COLOR_SECONDARY": "rgb(194, 232, 255)",
  "INPUT_STATIC_FONT_SIZE": "0.8125rem",
  "INPUT_STATIC_FONT_WEIGHT": "400",
  "INPUT_READONLY_FONT_WEIGHT": "400",
  "INPUT_STATIC_COLOR": "rgb(8, 7, 7)",
  "PAGE_HEADER_COLOR_BACKGROUND": "rgb(250, 250, 249)",
  "PAGE_HEADER_COLOR_BACKGROUND_ALT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_ANCHOR": "rgb(250, 250, 249)",
  "COLOR_BACKGROUND_PAGE_HEADER": "rgb(255, 255, 255)",
  "PAGE_HEADER_COLOR_BORDER": "rgba(0, 0, 0, 0)",
  "PAGE_HEADER_JOINED_COLOR_BORDER": "rgb(221, 219, 218)",
  "PAGE_HEADER_BORDER_RADIUS": "0",
  "PAGE_HEADER_SHADOW": "none",
  "PAGE_HEADER_TITLE_FONT_SIZE": "1.125rem",
  "PAGE_HEADER_TITLE_FONT_WEIGHT": "400",
  "PAGE_HEADER_ICON_SIZE": "2.25rem",
  "PAGE_HEADER_SPACING_MARGIN": "0",
  "PAGE_HEADER_SPACING_PADDING": "1rem",
  "PAGE_HEADER_SPACING_ROW": "0.75rem 1rem",
  "PANEL_DOCKED_LEFT_SHADOW": "1px 0 3px rgba(0,0,0,0.25)",
  "PANEL_DOCKED_RIGHT_SHADOW": "-1px 0 3px 0 rgba(0,0,0,0.25)",
  "COLOR_BACKGROUND_PATH_INCOMPLETE_HOVER": "rgb(221, 219, 218)",
  "COLOR_BACKGROUND_PATH_STEP_ACTION_ACTIVE": "rgb(6, 28, 63)",
  "COLOR_BACKGROUND_PATH_INCOMPLETE": "rgb(236, 235, 234)",
  "COLOR_BACKGROUND_PATH_ACTIVE_HOVER": "rgb(0, 57, 107)",
  "COLOR_BACKGROUND_PATH_LOST": "rgb(194, 57, 52)",
  "COLOR_BACKGROUND_PATH_ACTIVE": "rgb(0, 95, 178)",
  "COLOR_BACKGROUND_GUIDANCE": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_WON": "rgb(4, 132, 75)",
  "COLOR_BACKGROUND_PATH_CURRENT_HOVER": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_CURRENT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_COMPLETE_HOVER": "rgb(4, 132, 75)",
  "COLOR_BACKGROUND_PATH_COMPLETE": "rgb(75, 202, 129)",
  "COLOR_BACKGROUND_PATH_STEP_ACTION_CURRENT": "rgb(0, 95, 178)",
  "COLOR_BACKGROUND_PATH_EXPANDED": "rgb(255, 255, 255)",
  "COLOR_BORDER_PATH_DIVIDER": "rgb(255, 255, 255)",
  "COLOR_BORDER_PATH_CURRENT": "rgb(0, 95, 178)",
  "COLOR_BORDER_PATH_CURRENT_HOVER": "rgb(0, 57, 107)",
  "LINE_HEIGHT_SALESPATH": "1.5rem",
  "HEIGHT_SALES_PATH": "2rem",
  "PATH_BUTTON_WIDTH_FIXED": "13rem",
  "WIDTH_PATH_BORDER_CURRENT": "0.125rem",
  "COLOR_TEXT_PATH_CURRENT": "rgb(0, 95, 178)",
  "COLOR_TEXT_PATH_CURRENT_HOVER": "rgb(0, 57, 107)",
  "POPOVER_WALKTHROUGH_COLOR_BACKGROUND": "rgb(6, 28, 63)",
  "POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND": "rgb(22, 50, 92)",
  "POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT": "rgb(0, 112, 210)",
  "POPOVER_WALKTHROUGH_HEADER_IMAGE": "",
  "POPOVER_WALKTHROUGH_ALT_IMAGE": "",
  "POPOVER_WALKTHROUGH_ALT_NUBBIN_COLOR_BACKGROUND": "rgb(0, 112, 210)",
  "NUBBIN_SIZE_DEFAULT": "1rem",
  "POPOVER_COLOR_TEXT": "rgb(217, 219, 221)",
  "PROGRESS_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "PROGRESS_COLOR_BACKGROUND_SHADE": "rgb(250, 250, 249)",
  "PROGRESS_BAR_COLOR_BACKGROUND": "rgb(221, 219, 218)",
  "PROGRESS_BAR_COLOR_BACKGROUND_FILL": "rgb(94, 180, 255)",
  "PROGRESS_BAR_COLOR_BACKGROUND_FILL_SUCCESS": "rgb(75, 202, 129)",
  "PROGRESS_COLOR_BORDER": "rgb(255, 255, 255)",
  "PROGRESS_COLOR_BORDER_SHADE": "rgb(250, 250, 249)",
  "PROGRESS_COLOR_BORDER_HOVER": "rgb(0, 112, 210)",
  "PROGRESS_COLOR_BORDER_ACTIVE": "rgb(21, 137, 238)",
  "PROGRESS_BAR_HEIGHT": "0.125rem",
  "COLOR_BACKGROUND_PROGRESS_RING_CONTENT": "rgb(255, 255, 255)",
  "PROGRESS_RING_WIDTH": "0.1875rem",
  "RADIO_BUTTON_GROUP_LINE_HEIGHT_TOUCH": "2.69rem",
  "NOTIFICATION_COLOR_BACKGROUND_INVERSE": "rgb(112, 110, 107)",
  "SLIDER_HANDLE_COLOR_BACKGROUND": "rgb(21, 137, 238)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_HOVER": "rgb(0, 112, 210)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_FOCUS": "rgb(0, 112, 210)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_ACTIVE": "rgb(0, 112, 210)",
  "SLIDER_TRACK_COLOR_BACKGROUND": "rgb(236, 235, 234)",
  "SLIDER_TRACK_COLOR_BACKGROUND_FILL": "rgb(21, 137, 238)",
  "SLIDER_COLOR_BACKGROUND_DISABLED": "rgb(236, 235, 234)",
  "SLIDER_HANDLE_SHADOW": "rgba(0, 0, 0, 0.16) 0 2px 3px",
  "SLIDER_HANDLE_SIZE": "1rem",
  "SLIDER_TRACK_HEIGHT": "4px",
  "SLIDER_TRACK_WIDTH": "100%",
  "SPINNER_SIZE_XX_SMALL": "0.5rem",
  "SPINNER_SIZE_X_SMALL": "1rem",
  "SPINNER_SIZE_SMALL": "1.25rem",
  "SPINNER_SIZE_MEDIUM": "2rem",
  "SPINNER_SIZE_LARGE": "2.75rem",
  "SPLIT_VIEW_COLOR_BACKGROUND": "rgb(250, 250, 249)",
  "SPLIT_VIEW_COLOR_BACKGROUND_ROW_HOVER": "rgb(255, 255, 255)",
  "SPLIT_VIEW_COLOR_BORDER": "rgb(221, 219, 218)",
  "SPLIT_VIEW_WIDTH": "25rem",
  "TABS_FONT_WEIGHT": "400",
  "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER": "rgb(243, 242, 242)",
  "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE": "rgb(236, 235, 234)",
  "WELCOME_MAT_TEXT_COLOR_INFO": "rgb(0, 57, 107)",
  "WELCOME_MAT_BACKGROUND_IMAGE_INFO": "/assets/images/welcome-mat/bg-info@2x.png",
  "WELCOME_MAT_BACKGROUND_COLOR_INFO": "rgb(202, 230, 241)",
  "WELCOME_MAT_COLOR_BACKGROUND_PROGRESS_BAR": "rgb(255, 255, 255)",
  "WELCOME_MAT_COLOR_ACTION_SHADOW": "rgba(0, 0, 0, 0.05)",
  "WELCOME_MAT_COLOR_ICON_COMPLETE": "rgb(201, 199, 197)",
  "WELCOME_MAT_FONT_SIZE_INFO_TITLE": "2.625rem",
  "WELCOME_MAT_WIDTH": "52.0625rem",
  "WELCOME_MAT_MIN_HEIGHT": "25rem",
  "WELCOME_MAT_MAX_HEIGHT": "37.5rem",
  "WELCOME_MAT_WIDTH_PROGRESS_BAR": "12.5rem",
  "WELCOME_MAT_COMPLETE_ICON_SIZE": "1.25rem",
  "WELCOME_MAT_CHECK_SIZE": "0.625rem",
  "WELCOME_MAT_SPACING_INFO": "7.75rem"
}