@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(116, 116, 116)",
  "BADGE_COLOR_BACKGROUND_LIGHTEST": "rgb(255, 255, 255)",
  "BADGE_COLOR_BACKGROUND_INVERSE": "rgb(116, 116, 116)",
  "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(243, 243, 243)",
  "BUTTON_COLOR_BORDER_BRAND_PRIMARY": "rgb(1, 118, 211)",
  "BUTTON_COLOR_BORDER_SECONDARY": "rgba(255, 255, 255, 0.8)",
  "BUTTON_BORDER_RADIUS": ".25rem",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS": "rgb(243, 243, 243)",
  "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY": "rgb(1, 118, 211)",
  "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED": "rgba(0, 0, 0, 0)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_DISABLED": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_FOCUS": "rgb(243, 243, 243)",
  "BUTTON_COLOR_BACKGROUND_SECONDARY": "rgba(255, 255, 255, 0.8)",
  "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_BUTTON_BRAND_HOVER": "rgb(1, 68, 134)",
  "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE": "rgba(0, 0, 0, 0.24)",
  "COLOR_BACKGROUND_BUTTON_ICON_HOVER": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_BUTTON_BRAND": "rgb(1, 118, 211)",
  "COLOR_BACKGROUND_BUTTON_ICON": "rgba(0, 0, 0, 0)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE": "rgb(3, 45, 96)",
  "COLOR_BACKGROUND_BUTTON_INVERSE": "rgba(0, 0, 0, 0)",
  "BUTTON_COLOR_BACKGROUND_PRIMARY": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE": "rgb(243, 243, 243)",
  "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(201, 201, 201)",
  "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(243, 243, 243)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS": "rgb(1, 68, 134)",
  "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE": "rgb(1, 118, 211)",
  "CAROUSEL_INDICATOR_WIDTH": "1rem",
  "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND": "rgb(243, 243, 243)",
  "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND": "rgb(1, 68, 134)",
  "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT": "rgb(116, 116, 116)",
  "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(243, 243, 243)",
  "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR": "rgb(68, 68, 68)",
  "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(243, 243, 243)",
  "TABLE_COLOR_BACKGROUND_HEADER": "rgb(255, 255, 255)",
  "TABLE_COLOR_BACKGROUND_HEADER_HOVER": "rgb(243, 243, 243)",
  "TABLE_COLOR_BACKGROUND_HEADER_FOCUS": "rgb(255, 255, 255)",
  "TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE": "rgb(174, 174, 174)",
  "TABLE_BORDER_RADIUS": "0",
  "TABLE_CELL_SPACING": "0.5rem",
  "TABLE_COLOR_TEXT_HEADER": "rgb(68, 68, 68)",
  "DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH": "rgb(116, 116, 116)",
  "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(254, 92, 76)",
  "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS": "rgb(201, 201, 201)",
  "DROP_ZONE_SLOT_HEIGHT": "0.25rem",
  "COLOR_BACKGROUND_ICON_WAFFLE": "rgb(116, 116, 116)",
  "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY": "rgb(201, 201, 201)",
  "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK": "rgb(201, 201, 201)",
  "GLOBAL_ACTION_FILL_HOVER": "rgb(1, 68, 134)",
  "GLOBAL_ACTION_ICON_SIZE": "1.5rem",
  "TYPING_ICON_DOT_SIZE": ".5rem",
  "EINSTEIN_HEADER_BACKGROUND": "/einstein-headers/einstein-header-background.svg",
  "EINSTEIN_HEADER_FIGURE": "/einstein-headers/einstein-figure.svg",
  "EINSTEIN_HEADER_BACKGROUND_COLOR": "rgb(144, 208, 254)",
  "EINSTEIN_HEADER_TEXT_SHADOW": "#cfe9fe",
  "FILES_Z_INDEX_HOVER": 5,
  "FORM_LABEL_FONT_SIZE": "0.75rem",
  "GLOBAL_HEADER_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "BRAND_LOGO_IMAGE": "/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(13, 157, 218)",
  "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(13, 157, 218)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ALT": "rgb(243, 243, 243)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_HOVER": "rgb(50, 29, 113)",
  "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ACTIVE": "rgb(243, 243, 243)",
  "HEIGHT_CONTEXT_BAR": "2.5rem",
  "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_ACTIVE": "3px",
  "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_FOCUS": "4px",
  "COLOR_TEXT_CONTEXT_BAR": "rgb(68, 68, 68)",
  "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(144, 208, 254)",
  "ILLUSTRATION_COLOR_SECONDARY": "rgb(207, 233, 254)",
  "INPUT_STATIC_FONT_SIZE": "0.8125rem",
  "INPUT_STATIC_FONT_WEIGHT": "400",
  "INPUT_READONLY_FONT_WEIGHT": "400",
  "INPUT_STATIC_COLOR": "rgb(24, 24, 24)",
  "PAGE_HEADER_COLOR_BACKGROUND": "rgb(243, 243, 243)",
  "PAGE_HEADER_COLOR_BACKGROUND_ALT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_ANCHOR": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_PAGE_HEADER": "rgb(255, 255, 255)",
  "PAGE_HEADER_COLOR_BORDER": "rgba(0, 0, 0, 0)",
  "PAGE_HEADER_JOINED_COLOR_BORDER": "rgb(201, 201, 201)",
  "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(201, 201, 201)",
  "COLOR_BACKGROUND_PATH_STEP_ACTION_ACTIVE": "rgb(0, 22, 57)",
  "COLOR_BACKGROUND_PATH_INCOMPLETE": "rgb(243, 243, 243)",
  "COLOR_BACKGROUND_PATH_ACTIVE_HOVER": "rgb(3, 45, 96)",
  "COLOR_BACKGROUND_PATH_LOST": "rgb(234, 0, 30)",
  "COLOR_BACKGROUND_PATH_ACTIVE": "rgb(1, 68, 134)",
  "COLOR_BACKGROUND_GUIDANCE": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_WON": "rgb(46, 132, 74)",
  "COLOR_BACKGROUND_PATH_CURRENT_HOVER": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_CURRENT": "rgb(255, 255, 255)",
  "COLOR_BACKGROUND_PATH_COMPLETE_HOVER": "rgb(46, 132, 74)",
  "COLOR_BACKGROUND_PATH_COMPLETE": "rgb(59, 167, 85)",
  "COLOR_BACKGROUND_PATH_STEP_ACTION_CURRENT": "rgb(1, 68, 134)",
  "COLOR_BACKGROUND_PATH_EXPANDED": "rgb(255, 255, 255)",
  "COLOR_BORDER_PATH_DIVIDER": "rgb(255, 255, 255)",
  "COLOR_BORDER_PATH_CURRENT": "rgb(1, 68, 134)",
  "COLOR_BORDER_PATH_CURRENT_HOVER": "rgb(3, 45, 96)",
  "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(1, 68, 134)",
  "COLOR_TEXT_PATH_CURRENT_HOVER": "rgb(3, 45, 96)",
  "POPOVER_WALKTHROUGH_COLOR_BACKGROUND": "rgb(0, 22, 57)",
  "POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND": "rgb(3, 45, 96)",
  "POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT": "rgb(1, 118, 211)",
  "POPOVER_WALKTHROUGH_HEADER_IMAGE": "",
  "POPOVER_WALKTHROUGH_ALT_IMAGE": "",
  "POPOVER_WALKTHROUGH_ALT_NUBBIN_COLOR_BACKGROUND": "rgb(1, 118, 211)",
  "NUBBIN_SIZE_DEFAULT": "1rem",
  "NUBBIN_TRIANGLE_OFFSET": "-0.1875rem",
  "POPOVER_BRAND_BORDER_WIDTH": "0.25rem",
  "POPOVER_COLOR_TEXT": "rgb(201, 201, 201)",
  "PROGRESS_COLOR_BACKGROUND": "rgb(255, 255, 255)",
  "PROGRESS_COLOR_BACKGROUND_SHADE": "rgb(243, 243, 243)",
  "PROGRESS_BAR_COLOR_BACKGROUND": "rgb(201, 201, 201)",
  "PROGRESS_BAR_COLOR_BACKGROUND_FILL": "rgb(26, 185, 255)",
  "PROGRESS_BAR_COLOR_BACKGROUND_FILL_SUCCESS": "rgb(46, 132, 74)",
  "PROGRESS_COLOR_BORDER": "rgb(255, 255, 255)",
  "PROGRESS_COLOR_BORDER_SHADE": "rgb(243, 243, 243)",
  "PROGRESS_COLOR_BORDER_HOVER": "rgb(1, 118, 211)",
  "PROGRESS_COLOR_BORDER_ACTIVE": "rgb(27, 150, 255)",
  "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(116, 116, 116)",
  "SLIDER_HANDLE_COLOR_BACKGROUND": "rgb(27, 150, 255)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_HOVER": "rgb(1, 118, 211)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_FOCUS": "rgb(1, 118, 211)",
  "SLIDER_HANDLE_COLOR_BACKGROUND_ACTIVE": "rgb(1, 118, 211)",
  "SLIDER_TRACK_COLOR_BACKGROUND": "rgb(243, 243, 243)",
  "SLIDER_TRACK_COLOR_BACKGROUND_FILL": "rgb(27, 150, 255)",
  "SLIDER_COLOR_BACKGROUND_DISABLED": "rgb(243, 243, 243)",
  "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(243, 243, 243)",
  "SPLIT_VIEW_COLOR_BACKGROUND_ROW_HOVER": "rgb(255, 255, 255)",
  "SPLIT_VIEW_COLOR_BORDER": "rgb(201, 201, 201)",
  "SPLIT_VIEW_WIDTH": "25rem",
  "TABS_FONT_WEIGHT": "400",
  "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER": "rgb(243, 243, 243)",
  "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE": "rgb(243, 243, 243)",
  "WELCOME_MAT_TEXT_COLOR_INFO": "rgb(3, 45, 96)",
  "WELCOME_MAT_BACKGROUND_IMAGE_INFO": "/welcome-mat/bg-info@2x.png",
  "WELCOME_MAT_BACKGROUND_COLOR_INFO": "rgb(207, 233, 254)",
  "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, 201, 201)",
  "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"
}