@salesforce-ux/sds-metadata/current/designTokenMappings.csv

This package simplifies the management, distribution, and usage of Salesforce Design System metadata, ensuring that developers and designers can easily access and integrate design system metadata into their workflows.

"⚠️ Use this spreadsheet to figure out which Styling Hook you should replace your existing --lwc- specific custom property or Aura token with to accommodate the migration to Kondo. Please review the notes in Column E for some additional guidance. If you had previously used a --lwc- custom property because it matched the value you needed, don't you fret, we will guide you to tie back into the design system. It is important to understand your context in which you are using a Styling Hook, so if you have any questions or concerns about the mappings, please reach out to #help-kondo-theme-update on Slack. Please make sure you post an image of the rendered component so we understand the context of the component. Context matters!",,,,
LWC Custom Property,Styling Hook or CSS Value,SLDS Value,Kondo Value,Notes
"
--lwc-avatarGroupColorBackgroundInverse",--slds-g-color-on-surface-inverse-2,,,Reserved for Avatars
"
--lwc-avatarGroupColorBackgroundLightest",--slds-g-color-surface-container-1,,,Reserved for Avatars
"
--lwc-badgeColorBackgroundInverse",--slds-g-color-surface-container-inverse-1,,,Reserved for Badges
"
--lwc-badgeColorBackgroundLightest",--slds-g-color-surface-container-2,,,Reserved for Badges
"
--lwc-bannerGroupDefaultImage",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-bannerUserDefaultImage",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-borderRadiusCircle",--slds-g-radius-border-circle,,,
"
--lwc-borderRadiusLarge",--slds-g-radius-border-3,,,
"
--lwc-borderRadiusMedium",--slds-g-radius-border-2,,,
"
--lwc-borderRadiusPill",--slds-g-radius-border-pill,,,
"
--lwc-borderRadiusSmall",--slds-g-radius-border-1,,,
"
--lwc-borderStrokeWidthThick",--slds-g-sizing-border-2,,,
"
--lwc-borderStrokeWidthThin",--slds-g-sizing-border-1,,,
"
--lwc-borderWidthThick",--slds-g-sizing-border-2,,,
"
--lwc-borderWidthThin",--slds-g-sizing-border-1,,,
"
--lwc-brandAccessible",--slds-g-color-accent-container-1,,,
"
--lwc-brandAccessibleActive",--slds-g-color-accent-container-2,,,
"
--lwc-brandBackgroundDark",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBackgroundDarkTransparent",transparent,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBackgroundPrimary",--slds-g-color-surface-2,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBackgroundPrimaryTransparent",transparent,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandColorBackgroundPrimary",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandColorBackgroundPrimaryTransparent",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandColorBackgroundSecondary",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandColorBackgroundSecondaryTransparent",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandDefaultImage",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandImageHeightLarge",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandImageHeightMedium",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandImageHeightSmall",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandBandScrimHeight",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandContrast",--slds-g-color-on-accent-1,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandContrastActive",--,,,"Do not use, deprecated"
"
--lwc-brandDark",--slds-g-color-accent-dark-1,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandDarkActive",--slds-g-color-accent-dark-2,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandDisabled",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeader",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrast",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastCool",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastCoolActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastInverse",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastInverseActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastWarm",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastWarmActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastWeak",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastWeakActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderContrastWeakDisabled",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderIcon",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderIconActive",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandHeaderIconDisabled",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandLight",--slds-g-color-accent-light-1,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandLightActive",--slds-g-color-accent-light-1,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandLogoImage",--,,,"Do not use, reserved for Theming & Branding"
"
--lwc-brandPrimary",--slds-g-color-accent-1,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandPrimaryActive",--slds-g-color-accent-2,,,"--lwc-brand* tie into the Theming & Branding feature. Only use if your component is intended to adapt to a customers brand. There are layers of abstraction that result in the resolved value, so please use wisely."
"
--lwc-brandPrimaryTransparent",transparent,,,
"
--lwc-brandPrimaryTransparent10","color-mix(in oklab, var(--slds-g-color-accent-1), transparent 90%)",,,
"
--lwc-brandPrimaryTransparent40","color-mix(in oklab, var(--slds-g-color-accent-1), transparent 60%)",,,
"
--lwc-brandTextLink",--slds-s-link-color,,,
"
--lwc-brandTextLinkActive",--slds-s-link-color-active,,,
"
--lwc-buttonBorderRadius",--slds-s-button-radius-border,,,
"
--lwc-buttonColorBackgroundBrandPrimary",--slds-g-color-accent-container-1,,,Reserved for Buttons
"
--lwc-buttonColorBackgroundPrimary",--slds-g-color-surface-container-1,,,Reserved for Buttons
"
--lwc-buttonColorBackgroundSecondary",--slds-g-color-surface-container-1,,,Reserved for Buttons
"
--lwc-buttonColorBorderBrandPrimary",--slds-g-color-border-accent-1,,,Reserved for Buttons
"
--lwc-buttonColorBorderPrimary",--slds-g-color-border-2,,,Reserved for Buttons
"
--lwc-buttonColorBorderSecondary",--,,,"Do not use, deprecated"
"
--lwc-buttonColorTextPrimary",--slds-g-color-on-accent-1,,,Reserved for Buttons
"
--lwc-buttonIconBoundaryTouch",--,,,Reserved for Mobile
"
--lwc-buttonIconColorBorderPrimary",--,,,"Do not use, deprecated"
"
--lwc-buttonLineHeightTouch",--,,,Reserved for Mobile
"
--lwc-cardBodyPadding",0 var(--slds-g-spacing-4),0 1rem,,Reserved for Cards
"
--lwc-cardColorBackground",--slds-g-color-surface-container-1,,,Reserved for Cards
"
--lwc-cardColorBorder",--slds-s-container-color-border,,,Reserved for Cards
"
--lwc-cardFontWeight",--slds-s-container-heading-font-weight,,,Reserved for Cards
"
--lwc-cardFooterColorBorder",--slds-s-container-color-border,,,Reserved for Cards
"
--lwc-cardFooterMargin",--slds-g-spacing-3,,,Reserved for Cards
"
--lwc-cardFooterPadding",var(--slds-g-spacing-4) var(--slds-g-spacing-3),1rem 0.75rem,,Reserved for Cards
"
--lwc-cardFooterTextAlign",--,,,"Do not use, deprecated"
"
--lwc-cardHeaderMargin",0 0 var(--slds-g-spacing-3),0 0 0.75rem,,Reserved for Cards
"
--lwc-cardHeaderPadding",var(--slds-g-spacing-3) var(--slds-g-spacing-4) 0,0.75rem 1rem 0,,Reserved for Cards
"
--lwc-cardShadow",--slds-s-container-shadow,,,Reserved for Cards
"
--lwc-cardSpacingLarge",--slds-g-spacing-6,,,Reserved for Cards
"
--lwc-cardSpacingMargin",--slds-g-spacing-3,,,Reserved for Cards
"
--lwc-cardSpacingSmall",--slds-g-spacing-3,,,Reserved for Cards
"
--lwc-cardWrapperSpacing",--slds-g-spacing-4,,,Reserved for Cards
"
--lwc-carouselColorBackground",,,,Reserved for Carousels
"
--lwc-carouselIndicatorColorBackground",,,,Reserved for Carousels
"
--lwc-carouselIndicatorColorBackgroundActive",,,,Reserved for Carousels
"
--lwc-carouselIndicatorColorBackgroundFocus",,,,Reserved for Carousels
"
--lwc-carouselIndicatorColorBackgroundHover",,,,Reserved for Carousels
"
--lwc-carouselIndicatorWidth",,,,Reserved for Carousels
"
--lwc-chatMessageColorBackgroundInbound",,,,Reserved for Chatter/Chat Bots
"
--lwc-chatMessageColorBackgroundOutbound",,,,Reserved for Chatter/Chat Bots
"
--lwc-chatMessageColorBackgroundOutboundAgent",,,,Reserved for Chatter/Chat Bots
"
--lwc-chatMessageColorBackgroundStatus",,,,Reserved for Chatter/Chat Bots
--lwc-colorBackground,--slds-g-color-surface-2 or --slds-g-color-surface-container-2 *,,,"* usage depends on what your component is. is your component a container of content, then use surface-container-2. if your component is a stacking layer, such as the app background, modal, panel, docked panel, then use surface-2."
"
--lwc-colorBackgroundActionbarIconUtility",--,,,"Do not use, reserved for Mobile"
--lwc-colorBackgroundAlt,--slds-g-color-surface-1 or --slds-g-color-surface-container-1 *,,,"* usage depends on what your component is. is your component a container of content, then use surface-container-1. if your component is a stacking layer, such as the app background, modal, panel, docked panel, then use surface-1."
"
--lwc-colorBackgroundAlt2",--slds-g-color-surface-1 or --slds-g-color-surface-container-1 ,,,"Deprecated, see guidance for --lwc-colorBackgroundAlt"
"
--lwc-colorBackgroundAltInverse",--slds-g-color-surface-container-inverse-1,,,
"
--lwc-colorBackgroundAnchor",--,,,
"
--lwc-colorBackgroundBackdrop",--slds-s-backdrop-color-background,,,
"
--lwc-colorBackgroundBackdropTint",--slds-g-color-surface-2,,,
"
--lwc-colorBackgroundBrandPrimary",--slds-g-color-accent-container-1,,,
"
--lwc-colorBackgroundBrandPrimaryActive",--slds-g-color-accent-container-2,,,
"
--lwc-colorBackgroundBrandPrimaryFocus",--slds-g-color-accent-container-2,,,
"
--lwc-colorBackgroundBrandPrimaryHover",--slds-g-color-accent-container-2,,,
"
--lwc-colorBackgroundBrowser",--slds-g-color-surface-container-3,,,
"
--lwc-colorBackgroundButtonBrand",--slds-g-color-accent-container-1,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonBrandActive",--slds-g-color-accent-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonBrandDisabled",--slds-g-color-disabled-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonBrandHover",--slds-g-color-accent-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonDefault",--slds-g-color-surface-container-1,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonDefaultActive",--slds-g-color-surface-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonDefaultDisabled",--slds-g-color-disabled-container-1,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonDefaultFocus",--slds-g-color-surface-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonDefaultHover",--slds-g-color-surface-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonIcon",--slds-g-color-surface-container-1,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonIconActive",--slds-g-color-surface-container-2,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonIconDisabled",--slds-g-color-disabled-container-1,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonIconFocus",--slds-g-color-surface-container-2,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonIconHover",--slds-g-color-surface-container-2,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonInverse",transparent,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonInverseActive","color-mix(in oklab, var(--slds-g-color-surface-inverse-1), transparent 80%)",,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonInverseDisabled",transparent,,,Reserved for Buttons Icons
"
--lwc-colorBackgroundButtonSuccess",--slds-g-color-success-container-1,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonSuccessActive",--slds-g-color-success-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundButtonSuccessHover",--slds-g-color-success-container-2,,,Reserved for Buttons
"
--lwc-colorBackgroundChromeDesktop",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundChromeMobile",--slds-g-color-accent-containter-1,,,"Do not use, deprecated"
"
--lwc-colorBackgroundContextBar",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarActionHighlight",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarBrandAccent",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarInverseItemActive",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarInverseItemHover",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarItemActive",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarItemHover",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextBarShadow",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundContextTabBarItem",--,,,Reserved for Global Navigation
"
--lwc-colorBackgroundCustomer",--slds-g-color-palette-orange-70,,,
"
--lwc-colorBackgroundDark",--slds-g-color-surface-2,,,"Reserved for App Background, Modals, Panels, Docked Panels"
"
--lwc-colorBackgroundDestructive",--slds-g-color-error-container-1,,,
"
--lwc-colorBackgroundDestructiveActive",--slds-g-color-error-container-2,,,
"
--lwc-colorBackgroundDestructiveHover",--slds-g-color-error-container-2,,,
"
--lwc-colorBackgroundDockedPanel",--slds-g-color-surface-1,,,Reserved for Docked Panels/Composer
"
--lwc-colorBackgroundDockedPanelHeader",--slds-g-color-surface-container-1,,,Reserved for Docked Panels/Composer
"
--lwc-colorBackgroundError",--slds-g-color-error-container-1,,,
"
--lwc-colorBackgroundErrorAlt",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundErrorDark",--slds-g-color-error-container-2,,,
"
--lwc-colorBackgroundGuidance",--slds-g-color-surface-container-1,,,
"
--lwc-colorBackgroundHighlight",--slds-g-color-palette-yellow-90,,,
"
--lwc-colorBackgroundHighlightSearch",--slds-g-color-palette-yellow-80,,,
"
--lwc-colorBackgroundIconWaffle",--slds-g-color-surface-container-1,,,Reserved for Global Navigation
"
--lwc-colorBackgroundImageOverlay","color-mix(in oklab, var(--slds-g-color-neutral-base-10), transparent 80%)",,,Reserved for Files
"
--lwc-colorBackgroundIndicatorDot",--slds-g-color-brand-base-20,,,
"
--lwc-colorBackgroundInfo",--slds-g-color-info-container-1,,,
"
--lwc-colorBackgroundInput",--slds-s-input-color-background,,,Reserved for Text Inputs
"
--lwc-colorBackgroundInputActive",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundInputCheckbox",--slds-s-mark-color-background,,,Reserved for Checkbox
"
--lwc-colorBackgroundInputCheckboxDisabled",--slds-g-color-disabled-container-2,,,Reserved for Checkbox
"
--lwc-colorBackgroundInputCheckboxSelected",--slds-s-mark-color-background-checked,,,Reserved for Checkbox
"
--lwc-colorBackgroundInputDisabled",--slds-s-input-color-background-disabled,,,Reserved for Text Inputs
"
--lwc-colorBackgroundInputError",--slds-s-input-color-background-invalid,,,Reserved for Text Inputs
"
--lwc-colorBackgroundInputSearch",--slds-s-input-color-background,,,Reserved for Text Inputs such as search
"
--lwc-colorBackgroundInverse",--slds-g-color-surface-inverse-2,,,
"
--lwc-colorBackgroundInverseLight",--slds-g-color-surface-inverse-1,,,
--lwc-colorBackgroundLight,--slds-g-color-surface-1 or --slds-g-color-surface-container-1 *,,,"* usage depends on what your component is. is your component a container of content, then use surface-container-2. if your component is a stacking layer, such as the app background, modal, panel, docked panel, then use surface-2."
"
--lwc-colorBackgroundModal",--slds-g-color-surface-1,,,Reserved for Modals
"
--lwc-colorBackgroundModalBrand",--slds-g-color-accent-container-1,,,Reserved for Modals
"
--lwc-colorBackgroundModalButton",--slds-g-color-accent-container-1,,,Reserved for Modals
"
--lwc-colorBackgroundModalButtonActive",--slds-g-color-accent-container-2,,,Reserved for Modals
"
--lwc-colorBackgroundNotification",--slds-g-color-surface-container-1,,,Reserved for Notifications
"
--lwc-colorBackgroundNotificationBadge",--slds-g-color-error-base-50,,,Reserved for Notifications
"
--lwc-colorBackgroundNotificationBadgeActive",--slds-g-color-accent-container-3,,,Reserved for Notifications
"
--lwc-colorBackgroundNotificationBadgeFocus",--slds-g-color-accent-container-3,,,Reserved for Notifications
"
--lwc-colorBackgroundNotificationBadgeHover",--slds-g-color-accent-container-3,,,Reserved for Notifications
"
--lwc-colorBackgroundNotificationNew",--slds-g-color-surface-container-3,,,Reserved for Notifications
"
--lwc-colorBackgroundOffline",--slds-g-color-info-container-1,,,
"
--lwc-colorBackgroundOrgSwitcherArrow",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundPathActive",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathActiveHover",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathComplete",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathCompleteHover",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathCurrent",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathCurrentHover",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathExpanded",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathIncomplete",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathIncompleteHover",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathLost",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathStepActionActive",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathStepActionCurrent",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPathWon",--,,,Reserved for Sales Path
"
--lwc-colorBackgroundPayload",--slds-g-color-surface-container-2,,,Reserved for Chatter/Chat Bot
"
--lwc-colorBackgroundPill",--slds-g-color-surface-container-1,,,Reserved for Pills
"
--lwc-colorBackgroundPost",--slds-g-color-surface-container-2,,,Reserved for Chatter/Chat Bot
"
--lwc-colorBackgroundPrimary",--slds-g-color-surface-container-1,,,
"
--lwc-colorBackgroundProgressRingContent",--slds-g-color-surface-container-1,,,Reserved for Progress Ring
"
--lwc-colorBackgroundReminder",--slds-g-color-surface-container-2,,,
"
--lwc-colorBackgroundReminderHover",--slds-g-color-surface-container-1,,,
"
--lwc-colorBackgroundRowActive",--slds-g-color-surface-container-2,,,Reserved for Data Tables
"
--lwc-colorBackgroundRowHover",--slds-g-color-surface-container-2,,,Reserved for Data Tables
"
--lwc-colorBackgroundRowNew",--slds-g-color-success-base-90,,,Reserved for Data Tables
"
--lwc-colorBackgroundRowSelected",--slds-s-table-row-color-background-selected,,,Reserved for Data Tables
"
--lwc-colorBackgroundScrollbar",--slds-g-color-surface-2,,,"Do not use, reserved for One.app"
"
--lwc-colorBackgroundScrollbarTrack",--slds-g-color-on-surface-1,,,"Do not use, reserved for One.app"
"
--lwc-colorBackgroundSecondary",--slds-g-color-surface-container-2,,,
"
--lwc-colorBackgroundSelection",--,,,"Do not use, reserved for One.app"
"
--lwc-colorBackgroundShade",--slds-g-color-surface-2,,,
"
--lwc-colorBackgroundShadeDark",--slds-g-color-surface-3,,,
"
--lwc-colorBackgroundSpinnerDot",--,,,Reserved for loading indicator/spinner
"
--lwc-colorBackgroundStencil",--slds-g-color-surface-2,,,Reserved for loading stencils
"
--lwc-colorBackgroundStencilAlt",--slds-g-color-surface-3,,,Reserved for loading stencils
"
--lwc-colorBackgroundSuccess",--slds-g-color-success-container-1,,,
"
--lwc-colorBackgroundSuccessDark",--slds-g-color-success-container-2,,,
"
--lwc-colorBackgroundSuccessDarker",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundTempModal",--slds-g-color-surface-3,,,Reserved for Modals
"
--lwc-colorBackgroundTempModalTint",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundTempModalTintAlt",--,,,"Do not use, deprecated"
"
--lwc-colorBackgroundToast",--slds-g-color-info-container-1,,,Reserved for Toasts
"
--lwc-colorBackgroundToastError",--slds-g-color-error-container-1,,,Reserved for Toasts
"
--lwc-colorBackgroundToastSuccess",--slds-g-color-success-container-1,,,Reserved for Toasts
"
--lwc-colorBackgroundToggle",--slds-g-color-neutral-base-60,,,Reserved for Checkbox Toggles
"
--lwc-colorBackgroundToggleActive",--slds-g-color-accent-3,,,Reserved for Checkbox Toggles
"
--lwc-colorBackgroundToggleActiveHover",--slds-g-color-accent-3,,,Reserved for Checkbox Toggles
"
--lwc-colorBackgroundToggleDisabled",--slds-g-color-disabled-container-2,,,Reserved for Checkbox Toggles
"
--lwc-colorBackgroundToggleHover",--slds-g-color-accent-2,,,Reserved for Checkbox Toggles
"
--lwc-colorBackgroundUtilityBarActive",--slds-g-color-accent-container-1,,,Reserved for Docked Utility Bar
"
--lwc-colorBackgroundUtilityBarHover",--slds-g-color-surface-container-1,,,Reserved for Docked Utility Bar
"
--lwc-colorBackgroundWarning",--slds-g-color-warning-container-1,,,
"
--lwc-colorBackgroundWarningDark",--,,,"Do not use, deprecated"
"
--lwc-colorBorder",--slds-g-color-border-1,,,
"
--lwc-colorBorderBrand",--slds-g-color-border-accent-1,,,
"
--lwc-colorBorderBrandDark",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderBrandPrimary",--slds-g-color-border-accent-1,,,
"
--lwc-colorBorderBrandPrimaryActive",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderBrandPrimaryFocus",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderBrandPrimaryHover",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderButtonBrand",--slds-g-color-border-accent-1,,,Reserved for Brand Buttons
"
--lwc-colorBorderButtonBrandDisabled",--slds-g-color-border-disabled-1,,,Reserved for Brand Buttons
"
--lwc-colorBorderButtonDefault",--slds-g-color-border-2,,,Reserved for Buttons
"
--lwc-colorBorderButtonFocusInverse",--slds-g-color-border-inverse-1,,,Reserved for Inversed Buttons
"
--lwc-colorBorderButtonInverseDisabled","color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%)",,,Reserved for Inversed Buttons
"
--lwc-colorBorderCanvasElementSelection",--,,,"Do not use, deprecated"
"
--lwc-colorBorderCanvasElementSelectionHover",--,,,"Do not use, deprecated"
"
--lwc-colorBorderContextBarDivider",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarInverseItem",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarItem",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarThemeDefault",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarThemeDefaultActive",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarThemeDefaultAlt",--,,,Reserved for Global Navigation
"
--lwc-colorBorderContextBarThemeDefaultHover",--,,,Reserved for Global Navigation
"
--lwc-colorBorderCustomer",--slds-g-color-warning-base-70,,,
"
--lwc-colorBorderDestructive",--slds-g-color-border-error-1,,,
"
--lwc-colorBorderDestructiveActive",--slds-g-color-border-error-2,,,
"
--lwc-colorBorderDestructiveHover",--slds-g-color-border-error-2,,,
"
--lwc-colorBorderError",--slds-g-color-border-error-1,,,
"
--lwc-colorBorderErrorAlt",--slds-g-color-border-error-2,,,
"
--lwc-colorBorderErrorDark",--slds-g-color-border-error-2,,,
"
--lwc-colorBorderHint",--slds-g-color-border-inverse-2,,,
"
--lwc-colorBorderIconInverseHint","color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 50%)",,,Reserved for Icons on dark background with borders
"
--lwc-colorBorderIconInverseHintHover","color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%)",,,Reserved for Icons on dark background with borders
"
--lwc-colorBorderInfo",--slds-g-color-info-1,,,"TBD, might be info"
"
--lwc-colorBorderInput",--slds-s-input-color-border,,,Reserved for Text Inputs
"
--lwc-colorBorderInputActive",--slds-s-input-color-border-focus,,,Reserved for Text Inputs
"
--lwc-colorBorderInputCheckboxSelectedCheckmark",--slds-s-mark-color-foreground-checked,,,
"
--lwc-colorBorderInputDisabled",--slds-s-input-color-border-disabled,,,Reserved for Text Inputs
"
--lwc-colorBorderInverse",--slds-g-color-border-inverse-2,,,
"
--lwc-colorBorderLinkFocusInverse",--slds-g-color-border-inverse-1,,,
"
--lwc-colorBorderOffline",--slds-g-color-info-1,,,"TBD, might be info"
"
--lwc-colorBorderPathCurrent",--,,,Reserved for Sales Path
"
--lwc-colorBorderPathCurrentHover",--,,,Reserved for Sales Path
"
--lwc-colorBorderPathDivider",--,,,Reserved for Sales Path
"
--lwc-colorBorderPrimary",--slds-g-color-border-1,,,
"
--lwc-colorBorderReminder",--slds-g-color-neutral-base-95,,,
"
--lwc-colorBorderRowSelected",--slds-g-color-border-accent-1,,,
"
--lwc-colorBorderRowSelectedHover",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderSelection",--slds-g-color-border-accent-1,,,
"
--lwc-colorBorderSelectionActive",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderSelectionHover",--slds-g-color-border-accent-2,,,
"
--lwc-colorBorderSeparator",--slds-g-color-neutral-base-95,,,
"
--lwc-colorBorderSeparatorAlt",--slds-g-color-neutral-base-90,,,
"
--lwc-colorBorderSeparatorAlt2",--slds-g-color-border-1,,,
"
--lwc-colorBorderSeparatorInverse",--slds-g-color-border-1,,,
"
--lwc-colorBorderSuccess",--slds-g-color-border-success-1,,,
"
--lwc-colorBorderSuccessDark",--slds-g-color-border-success-2,,,
"
--lwc-colorBorderTabActive",--slds-g-color-neutral-base-100,,,Reserved for Tabs
"
--lwc-colorBorderTabSelected",--slds-g-color-border-accent-1,,,Reserved for Tabs
"
--lwc-colorBorderToggleChecked",--slds-g-color-neutral-base-100,,,
"
--lwc-colorBorderWarning",--slds-g-color-border-warning-1,,,
"
--lwc-colorBrand",--slds-g-color-accent-1,,,
"
--lwc-colorBrandDark",--slds-g-color-accent-2,,,
"
--lwc-colorBrandDarker",--slds-g-color-accent-3,,,
"
--lwc-colorContrastPrimary",--,,,"Do not use, deprecated"
"
--lwc-colorContrastSecondary",--,,,"Do not use, deprecated"
"
--lwc-colorForegroundPrimary",--slds-g-color-surface-container-1,,,
"
--lwc-colorGray1",--slds-g-color-neutral-base-100,,,
--lwc-colorGray2,--slds-g-color-neutral-base-95,,,
--lwc-colorGray3,--slds-g-color-neutral-base-90,,,
--lwc-colorGray4,--slds-g-color-neutral-base-80,,,
"
--lwc-colorGray5",--slds-g-color-neutral-base-70,,,
--lwc-colorGray6,--slds-g-color-neutral-base-65,,,
--lwc-colorGray7,--slds-g-color-neutral-base-60,,,
--lwc-colorGray8,--slds-g-color-neutral-base-50,,,
"
--lwc-colorGray9",--slds-g-color-neutral-base-40,,,
"
--lwc-colorGray10",--slds-g-color-neutral-base-30,,,
"
--lwc-colorGray11",--slds-g-color-neutral-base-20,,,
"
--lwc-colorGray12",--slds-g-color-neutral-base-15,,,
"
--lwc-colorGray13",--slds-g-color-neutral-base-10,,,
"
--lwc-colorPickerInputCustomHexFontSize",,,,Reserved for Input [type=color]
"
--lwc-colorPickerInputCustomHexWidth",,,,Reserved for Input [type=color]
"
--lwc-colorPickerRangeHeight",,,,Reserved for Input [type=color]
"
--lwc-colorPickerRangeIndicatorSize",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSelectorWidth",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSliderHeight",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSliderThumbBorderColor",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSliderThumbColorBackground",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSwatchesWidth",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSwatchShadow",,,,Reserved for Input [type=color]
"
--lwc-colorPickerSwatchSize",,,,Reserved for Input [type=color]
"
--lwc-colorPickerThumbWidth",,,,Reserved for Input [type=color]
"
--lwc-colorStrokeBrand",--slds-g-color-border-accent-1,,,Reserved for Icons
"
--lwc-colorStrokeBrandActive",--slds-g-color-border-accent-2,,,Reserved for Icons
"
--lwc-colorStrokeBrandHover",--slds-g-color-border-accent-2,,,Reserved for Icons
"
--lwc-colorStrokeDisabled",--slds-g-color-border-disabled-1,,,Reserved for Icons
"
--lwc-colorStrokeHeaderButton",--,,,"Do not use, deprecated"
"
--lwc-colorTextActionLabel",--slds-g-color-on-surface-2,,,
"
--lwc-colorTextActionLabelActive",--slds-g-color-on-surface-3,,,
"
--lwc-colorTextBrand",--slds-g-color-accent-1,,,
"
--lwc-colorTextBrandPrimary",--slds-g-color-on-accent-1,,,
"
--lwc-colorTextBrowser",--,,,"Do not use, deprecated"
"
--lwc-colorTextBrowserActive",--,,,"Do not use, deprecated"
"
--lwc-colorTextButtonBrand",--slds-g-color-on-accent-1,,,Reserved for Brand Buttons
"
--lwc-colorTextButtonBrandActive",--slds-g-color-on-accent-1,,,Reserved for Brand Buttons
"
--lwc-colorTextButtonBrandDisabled",--slds-g-color-on-disabled-2,,,Reserved for Brand Buttons
"
--lwc-colorTextButtonBrandHover",--slds-g-color-on-accent-1,,,Reserved for Brand Buttons
"
--lwc-colorTextButtonDefault",--slds-g-color-accent-2,,,Reserved for Buttons
"
--lwc-colorTextButtonDefaultActive",--slds-g-color-accent-3,,,Reserved for Buttons
"
--lwc-colorTextButtonDefaultDisabled",--slds-g-color-on-disabled-1,,,Reserved for Buttons
"
--lwc-colorTextButtonDefaultHint",--slds-g-color-on-surface-1,,,Reserved for Buttons
"
--lwc-colorTextButtonDefaultHover",--slds-g-color-accent-3,,,Reserved for Buttons
"
--lwc-colorTextButtonInverse",transparent,,,Reserved for Buttons on dark background
"
--lwc-colorTextButtonInverseDisabled","color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%)",,,Reserved for Buttons on dark background
"
--lwc-colorTextContextBar",--,,,Reserved for Global Navigation
"
--lwc-colorTextContextBarActionTrigger",--,,,Reserved for Global Navigation
"
--lwc-colorTextContextBarInverse",--,,,Reserved for Global Navigation
"
--lwc-colorTextCustomer",--slds-g-color-palette-orange-70,,,
"
--lwc-colorTextDefault",--slds-g-color-on-surface-3,,,
"
--lwc-colorTextDestructive",--slds-g-color-error-1,,,
"
--lwc-colorTextDestructiveHover",--slds-g-color-error-1,,,
"
--lwc-colorTextError",--slds-g-color-error-1,,,
"
--lwc-colorTextIconBrand",--slds-g-color-accent-1,,,Reserved for Icons
"
--lwc-colorTextIconDefault",--slds-g-color-on-surface-1,,,Reserved for Icons
"
--lwc-colorTextIconDefaultActive",--slds-g-color-on-surface-3,,,Reserved for Icons
"
--lwc-colorTextIconDefaultDisabled",--slds-g-color-disabled-2,,,Reserved for Icons
"
--lwc-colorTextIconDefaultHint",--slds-g-color-on-surface-1,,,Reserved for Icons
"
--lwc-colorTextIconDefaultHintBorderless",--slds-g-color-on-surface-1,,,Reserved for Icons
"
--lwc-colorTextIconDefaultHover",--slds-g-color-accent-1,,,Reserved for Icons
"
--lwc-colorTextIconInverse",--slds-g-color-on-surface-inverse-1,,,Reserved for Icons
"
--lwc-colorTextIconInverseActive",--slds-g-color-on-surface-inverse-1,,,Reserved for Icons
"
--lwc-colorTextIconInverseDisabled","color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%)",,,Reserved for Icons
"
--lwc-colorTextIconInverseHint","color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50%)",,,Reserved for Icons
"
--lwc-colorTextIconInverseHintHover","color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%)",,,Reserved for Icons
"
--lwc-colorTextIconInverseHover",--slds-g-color-on-surface-inverse-1,,,Reserved for Icons
"
--lwc-colorTextIconUtility",--slds-s-icon-color-foreground,,,Reserved for Icons
"
--lwc-colorTextInputDisabled",--slds-g-color-on-disabled-2,,,Reserved for Text Inputs
"
--lwc-colorTextInputFocusInverse",--slds-g-color-on-surface-inverse-1,,,Reserved for Text Inputs
"
--lwc-colorTextInputIcon",--slds-g-color-on-surface-1,,,Reserved for Icons in Text Inputs
"
--lwc-colorTextInverse",--slds-g-color-on-surface-inverse-1,,,Reserved for Text Inputs
"
--lwc-colorTextInverseActive",--slds-g-color-on-surface-inverse-2,,,Reserved for Text Inputs on dark background
"
--lwc-colorTextInverseHover",--slds-g-color-on-surface-inverse-2,,,Reserved for Text Inputs on dark background
"
--lwc-colorTextInverseWeak",--slds-g-color-on-surface-inverse-2,,,Reserved for Text Inputs on dark background
"
--lwc-colorTextLabel",--slds-g-color-on-surface-3,,,
"
--lwc-colorTextLink",--slds-s-link-color,,,
"
--lwc-colorTextLinkActive",--slds-s-link-color-active,,,
"
--lwc-colorTextLinkDisabled",--slds-g-color-disabled-1,,,
"
--lwc-colorTextLinkFocus",--slds-s-link-color-focus,,,
"
--lwc-colorTextLinkHover",--slds-s-link-color-hover,,,
"
--lwc-colorTextLinkInverse",--slds-g-color-on-surface-inverse-1,,,
"
--lwc-colorTextLinkInverseActive",--slds-g-color-on-surface-inverse-2,,,
"
--lwc-colorTextLinkInverseDisabled","color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%)",,,
"
--lwc-colorTextLinkInverseHover",--slds-g-color-on-surface-inverse-2,,,
"
--lwc-colorTextLinkPrimary",--slds-s-link-color,,,
"
--lwc-colorTextLinkPrimaryActive",--slds-s-link-color-active,,,
"
--lwc-colorTextLinkPrimaryFocus",--slds-s-link-color-focus,,,
"
--lwc-colorTextLinkPrimaryHover",--slds-s-link-color-hover,,,
"
--lwc-colorTextModal",--,,,Not used anywhere. Deprecated.
"
--lwc-colorTextModalButton",--,,,Not used anywhere. Deprecated.
"
--lwc-colorTextPathCurrent",--,,,Reserved for Sales Path
"
--lwc-colorTextPathCurrentHover",--,,,Reserved for Sales Path
"
--lwc-colorTextPill",--slds-g-color-accent-1,,,Reserved for Pills
"
--lwc-colorTextPlaceholder",--slds-s-input-color-placeholder,,,Reserved for placeholder text in Inputs
"
--lwc-colorTextPlaceholderInverse",--slds-g-color-on-surface-inverse-2,,,Reserved for placeholder text in Inputs on dark backgrounds
"
--lwc-colorTextPrimary",--slds-g-color-on-accent-1,,,
"
--lwc-colorTextRequired",--slds-g-color-error-1,,,Reserved for Form Elements
"
--lwc-colorTextSecondary",--slds-g-color-on-surface-1,,,
"
--lwc-colorTextStageLeft",--,,,"Do not use, deprecated"
"
--lwc-colorTextSuccess",--slds-g-color-success-1,,,
"
--lwc-colorTextSuccessInverse",--,,,"Do not use, deprecated"
"
--lwc-colorTextTabLabel",--slds-s-tabs-color,,,Reserved for Tabs
"
--lwc-colorTextTabLabelActive",--slds-s-tabs-color-active,,,Reserved for Tabs
"
--lwc-colorTextTabLabelDisabled",--slds-g-color-disabled-1,,,Reserved for Tabs
"
--lwc-colorTextTabLabelFocus",--slds-s-tabs-color-hover,,,Reserved for Tabs
"
--lwc-colorTextTabLabelHover",--slds-s-tabs-color-hover,,,Reserved for Tabs
"
--lwc-colorTextTabLabelSelected",--slds-s-tabs-color-active,,,Reserved for Tabs
"
--lwc-colorTextTertiary",--slds-g-color-on-surface-1,,,
"
--lwc-colorTextToast",--slds-g-color-on-surface-inverse-2,,,Reserved for temporary Toasts
"
--lwc-colorTextToggleDisabled",--slds-g-color-on-disabled-2,,,
"
--lwc-colorTextWarning",--slds-g-color-warning-1,,,
"
--lwc-colorTextWarningAlt",--,,,"Do not use, deprecated"
"
--lwc-colorTextWeak",--slds-g-color-on-surface-1,,,
"
--lwc-componentSpacingMargin",--,,,"Do not use, reserved for Flexipages"
"
--lwc-componentSpacingPadding",--,,,"Do not use, reserved for Flexipages"
"
--lwc-datepickerColorTextDayAdjacentMonth",--slds-g-color-on-surface-1,,,
"
--lwc-dropZoneSlotHeight",--slds-g-sizing-2,,,Reserved for Files
"
--lwc-durationImmediately",Continue to use,,,
"
--lwc-durationInstantly",Continue to use,,,
"
--lwc-durationPaused",Continue to use,,,
"
--lwc-durationPromptly",Continue to use,,,
"
--lwc-durationQuickly",Continue to use,,,
"
--lwc-durationSlowly",Continue to use,,,
"
--lwc-durationToastMedium",Continue to use,,,
"
--lwc-durationToastShort",Continue to use,,,
"
--lwc-einsteinHeaderBackground",--,,,"Do not use, Einstein is deprecated"
"
--lwc-einsteinHeaderBackgroundColor",--,,,"Do not use, Einstein is deprecated"
"
--lwc-einsteinHeaderFigure",--,,,"Do not use, Einstein is deprecated"
"
--lwc-einsteinHeaderTextShadow",--,,,"Do not use, Einstein is deprecated"
"
--lwc-elevation0",Continue to use,0,,
--lwc-elevation2,Continue to use,2,,
"
--lwc-elevation4",Continue to use,4,,
"
--lwc-elevation8",Continue to use,8,,
"
--lwc-elevation16",Continue to use,16,,
"
--lwc-elevation32",Continue to use,32,,
"
--lwc-elevation3Inset",Continue to use,-3,,
"
--lwc-elevationInverseShadow3Below",Continue to use,"0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",,
"
--lwc-elevationInverseShadow0",Continue to use,none,,
"
--lwc-elevationInverseShadow2",Continue to use,"0 -2px 2px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationInverseShadow4",Continue to use,"0 -4px 4px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationInverseShadow8",Continue to use,"0 -8px 8px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationInverseShadow16",Continue to use,"0 -16px 16px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationInverseShadow32",Continue to use,"0 -32px 32px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow0",Continue to use,none,,
"
--lwc-elevationShadow2",Continue to use,"0 2px 2px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow3Below",Continue to use,"0 3px 3px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow4",Continue to use,"0 4px 4px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow8",Continue to use,"0 8px 8px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow16",Continue to use,"0 16px 16px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-elevationShadow32",Continue to use,"0 32px 32px 0 rgba(0, 0, 0, 0.16)",,
"
--lwc-filesZIndexHover",<code>5</code>,,,"Reserved for Files. Deprecated, use raw value"
"
--lwc-fillBrand",--slds-g-color-accent-1,,,Reserved for Icons
"
--lwc-fillBrandActive",--slds-g-color-accent-2,,,Reserved for Icons
"
--lwc-fillBrandHover",--slds-g-color-accent-2,,,Reserved for Icons
"
--lwc-fillHeaderButton",--,,,Reserved for Global Header
"
--lwc-fillHeaderButtonFocus",--,,,Reserved for Global Header
"
--lwc-fillHeaderButtonHover",--,,,Reserved for Global Header
"
--lwc-fontFamily",--slds-g-font-family,,,Reserved for One.app
"
--lwc-fontFamilyHeading",--slds-g-font-family,,,Reserved for One.app
"
--lwc-fontFamilyMonospace",--slds-g-font-family-monospace,,,Reserved for One.app
"
--lwc-fontFamilyText",--slds-g-font-family,,,Reserved for One.app
"
--lwc-fontSize1",--slds-g-font-scale-neg-2,,,
"
--lwc-fontSize2",--slds-g-font-scale-neg-1,,,
"
--lwc-fontSize3",--slds-g-font-size-base,,,
"
--lwc-fontSize4",--slds-g-font-scale-1,,,
"
--lwc-fontSize5",--slds-g-font-scale-2,,,
"
--lwc-fontSize6",--slds-g-font-scale-3,,,
"
--lwc-fontSize7",--slds-g-font-scale-4,,,
"
--lwc-fontSize8",--slds-g-font-scale-5,,,
"
--lwc-fontSize9",--slds-g-font-scale-6,,,
"
--lwc-fontSize10",--slds-g-font-scale-7,,,
"
--lwc-fontSize11",--slds-g-font-scale-8,,,
"
--lwc-fontSizeHeadingXxSmall",--slds-g-font-scale-neg-2,,,
"
--lwc-fontSizeHeadingXSmall",--slds-g-font-scale-neg-1,,,
"
--lwc-fontSizeHeadingSmall",--slds-g-font-scale-1,,,
"
--lwc-fontSizeHeadingMedium",--slds-g-font-scale-3,,,
"
--lwc-fontSizeHeadingLarge",--slds-g-font-scale-5,,,
"
--lwc-fontSizeHeadingXLarge",--slds-g-font-scale-6,,,
"
--lwc-fontSizeXSmall",--slds-g-font-scale-neg-2,,,
"
--lwc-fontSizeSmall",--slds-g-font-scale-neg-1,,,
"
--lwc-fontSizeMedium",--slds-g-font-size-base,,,
"
--lwc-fontSizeMediumA",--slds-g-font-scale-1,,,
"
--lwc-fontSizeLarge",--slds-g-font-scale-2,,,
"
--lwc-fontSizeXLarge",--slds-g-font-scale-4,,,
"
--lwc-fontSizeXLargeA",--,,,"Do not use, deprecated"
"
--lwc-fontSizeXxLarge",--slds-g-font-scale-6,,,
"
--lwc-fontSizeTextXxSmall",--slds-g-font-scale-neg-2,,,
"
--lwc-fontSizeTextXSmall",--slds-g-font-scale-neg-1,,,
"
--lwc-fontSizeTextSmall",--slds-g-font-size-base,,,
"
--lwc-fontSizeTextMedium",--slds-g-font-scale-2,,,
"
--lwc-fontSizeTextLarge",--slds-g-font-scale-3,,,
"
--lwc-fontSizeTextXLarge",--slds-g-font-scale-4,,,
"
--lwc-fontWeightBold",--slds-g-font-weight-7,,,
"
--lwc-fontWeightLight",--slds-g-font-weight-3,,,
"
--lwc-fontWeightRegular",--slds-g-font-weight-4,,,
"
--lwc-formLabelFontSize",--slds-s-label-font-size,,,Reserved for Form Elements
"
--lwc-globalActionFillHover",--slds-g-color-accent-3,,,Reserved for Global Header
"
--lwc-globalActionIconSize",--slds-g-sizing-7,1.5rem,,Reserved for Global Header
"
--lwc-globalHeaderColorBackground",--slds-g-color-surface-container-1,,,Reserved for Global Header
"
--lwc-globalnavigationItemHeightAccentActive",--,,,Reserved for Global Navigation
"
--lwc-globalnavigationItemHeightAccentFocus",--,,,Reserved for Global Navigation
"
--lwc-groupDefaultAvatar",--,,,Reserved for Avatars
"
--lwc-groupDefaultAvatarMedium",--,,,Reserved for Avatars
"
--lwc-groupDefaultAvatarSmall",--,,,Reserved for Avatars
"
--lwc-heightContextBar","Use raw value, 2.5rem",2.5rem,,Reserved for Global Navigation
"
--lwc-heightDockedBar","Use raw value, 2.5rem",2.5rem,,Reserved for Docked Utility Bar
"
--lwc-heightFooter",--,,,"Do not use, deprecated"
"
--lwc-heightHeader","Use raw value, 3.125rem",3.125rem,,Reserved for Global Header
"
--lwc-heightInput",--slds-s-input-sizing-height,,,Reserved for Text Inputs
"
--lwc-heightPill","Use raw value, 1.625rem",1.625rem,,
"
--lwc-heightTappable",calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4)),2.75rem,,
"
--lwc-heightTappableSmall",--slds-g-sizing-9,2rem,,
"
--lwc-heightToggle",--slds-g-sizing-7,1.5rem,,
"
--lwc-illustrationColorPrimary",,,,"Do not use, deprecated"
"
--lwc-illustrationColorSecondary",,,,"Do not use, deprecated"
"
--lwc-illustrationEmptyStateAssistant",,,,"Do not use, deprecated"
"
--lwc-illustrationEmptyStateEvents",,,,"Do not use, deprecated"
"
--lwc-illustrationEmptyStateTasks",,,,"Do not use, deprecated"
"
--lwc-inputReadonlyFontWeight",Remove,,,"Do not use, deprecated"
"
--lwc-inputStaticColor",--slds-g-color-on-surface-3,,,Reserved for Text Inputs in read only state
"
--lwc-inputStaticFontSize",--slds-g-font-scale-neg-1,,,Reserved for Text Inputs in read only state
"
--lwc-inputStaticFontWeight",--slds-g-font-weight-4,,,Reserved for Text Inputs in read only state
"
--lwc-lineClamp",<code>3</code>,,,"Deprecated, use raw value"
"
--lwc-lineHeightButton",--slds-s-button-sizing-height,,,Reserved for Buttons
"
--lwc-lineHeightButtonSmall",--,,,"Do not use, deprecated"
"
--lwc-lineHeightHeading",--slds-g-font-lineheight-2,,,
"
--lwc-lineHeightReset",--slds-g-font-lineheight-1,,,
"
--lwc-lineHeightSalespath","Use raw value, 1.5rem",1.5rem,,Reserved for Sales Path
"
--lwc-lineHeightTab","Use raw value, 2.5rem",2.5rem,,Reserved for Tabs
"
--lwc-lineHeightText",--slds-g-font-lineheight-base,,,Reserved for One.app
"
--lwc-lineHeightToggle",--,,,"Do not use, deprecated"
"
--lwc-maxWidthActionOverflowMenu",--slds-g-sizing-16,,,
"
--lwc-mqHighRes",Continue to use,,,
"
--lwc-mqLarge",Continue to use,,,
"
--lwc-mqMediumLandscape",Continue to use,,,
"
--lwc-mqSingleColumnRecordLayout",Continue to use,,,
"
--lwc-mqSmall",Continue to use,,,
--lwc-mqMedium,Continue to use,,,
"
--lwc-neutrafaceDisplayWoff",--,,,"Do not use, deprecated"
"
--lwc-neutrafaceDisplayWoff2",--,,,"Do not use, deprecated"
"
--lwc-notificationColorBackgroundInverse",--slds-g-color-surface-container-2,,,
"
--lwc-nubbinSizeDefault",--slds-g-sizing-5,1rem,,Reserved for Tooltips
"
--lwc-nubbinTriangleOffset","Use raw value, -0.1875rem",-0.1875rem,,Reserved for Tooltips
"
--lwc-opacity5",<code>0.5</code>,,,"Deprecated, use raw value"
--lwc-opacity-8,<code>0.8</code>,,,"Deprecated, use raw value"
"
--lwc-pageColorBackgroundPrimary",--slds-g-color-surface-2,,,
"
--lwc-pageHeaderBorderRadius",--slds-s-pageheader-radius-border,,,Reserved for Record Highlights
"
--lwc-pageHeaderColorBackground",--slds-s-pageheader-row-color-background,,,Reserved for Record Highlights
"
--lwc-pageHeaderColorBackgroundAlt",--slds-s-pageheader-color-background,,,Reserved for Record Highlights
"
--lwc-pageHeaderColorBorder",--slds-g-color-border-1,,,Reserved for Record Highlights
"
--lwc-pageHeaderJoinedColorBorder",--slds-g-color-border-1,,,Reserved for Record Highlights
"
--lwc-pageHeaderShadow",--slds-s-pageheader-shadow,,,Reserved for Record Highlights
"
--lwc-pageHeaderSpacingMargin",<code>0</code>,,,Reserved for Record Highlights
"
--lwc-pageHeaderSpacingPadding",--slds-g-spacing-4,,,Reserved for Record Highlights
"
--lwc-pageHeaderSpacingRow",--slds-g-spacing-4,,,Reserved for Record Highlights
"
--lwc-pageHeaderTitleFontSize",--slds-s-pageheader-title-font-size,,,Reserved for Record Highlights
"
--lwc-pageHeaderTitleFontWeight",--slds-s-pageheader-title-font-weight,,,Reserved for Record Highlights
"
--lwc-paletteBlue10",--slds-g-color-palette-blue-10,,,
"
--lwc-paletteBlue15",--slds-g-color-palette-blue-15,,,
"
--lwc-paletteBlue20",--slds-g-color-palette-blue-20,,,
"
--lwc-paletteBlue30",--slds-g-color-palette-blue-30,,,
"
--lwc-paletteBlue40",--slds-g-color-palette-blue-40,,,
"
--lwc-paletteBlue50",--slds-g-color-palette-blue-50,,,
"
--lwc-paletteBlue60",--slds-g-color-palette-blue-60,,,
"
--lwc-paletteBlue65",--slds-g-color-palette-blue-65,,,
"
--lwc-paletteBlue70",--slds-g-color-palette-blue-70,,,
"
--lwc-paletteBlue80",--slds-g-color-palette-blue-80,,,
"
--lwc-paletteBlue90",--slds-g-color-palette-blue-90,,,
"
--lwc-paletteBlue95",--slds-g-color-palette-blue-95,,,
"
--lwc-paletteCloudBlue10",--slds-g-color-palette-cloud-blue-10,,,
"
--lwc-paletteCloudBlue15",--slds-g-color-palette-cloud-blue-15,,,
"
--lwc-paletteCloudBlue20",--slds-g-color-palette-cloud-blue-20,,,
"
--lwc-paletteCloudBlue30",--slds-g-color-palette-cloud-blue-30,,,
"
--lwc-paletteCloudBlue40",--slds-g-color-palette-cloud-blue-40,,,
"
--lwc-paletteCloudBlue50",--slds-g-color-palette-cloud-blue-50,,,
"
--lwc-paletteCloudBlue60",--slds-g-color-palette-cloud-blue-60,,,
"
--lwc-paletteCloudBlue65",--slds-g-color-palette-cloud-blue-65,,,
"
--lwc-paletteCloudBlue70",--slds-g-color-palette-cloud-blue-70,,,
"
--lwc-paletteCloudBlue80",--slds-g-color-palette-cloud-blue-80,,,
"
--lwc-paletteCloudBlue90",--slds-g-color-palette-cloud-blue-90,,,
"
--lwc-paletteCloudBlue95",--slds-g-color-palette-cloud-blue-95,,,
"
--lwc-paletteGreen10",--slds-g-color-palette-green-10,,,
"
--lwc-paletteGreen15",--slds-g-color-palette-green-15,,,
"
--lwc-paletteGreen20",--slds-g-color-palette-green-20,,,
"
--lwc-paletteGreen30",--slds-g-color-palette-green-30,,,
"
--lwc-paletteGreen40",--slds-g-color-palette-green-40,,,
"
--lwc-paletteGreen50",--slds-g-color-palette-green-50,,,
"
--lwc-paletteGreen60",--slds-g-color-palette-green-60,,,
"
--lwc-paletteGreen65",--slds-g-color-palette-green-65,,,
"
--lwc-paletteGreen70",--slds-g-color-palette-green-70,,,
"
--lwc-paletteGreen80",--slds-g-color-palette-green-80,,,
"
--lwc-paletteGreen90",--slds-g-color-palette-green-90,,,
"
--lwc-paletteGreen95",--slds-g-color-palette-green-95,,,
"
--lwc-paletteHotOrange10",--slds-g-color-palette-hot-orange-10,,,
"
--lwc-paletteHotOrange15",--slds-g-color-palette-hot-orange-15,,,
"
--lwc-paletteHotOrange20",--slds-g-color-palette-hot-orange-20,,,
"
--lwc-paletteHotOrange30",--slds-g-color-palette-hot-orange-30,,,
"
--lwc-paletteHotOrange40",--slds-g-color-palette-hot-orange-40,,,
"
--lwc-paletteHotOrange50",--slds-g-color-palette-hot-orange-50,,,
"
--lwc-paletteHotOrange60",--slds-g-color-palette-hot-orange-60,,,
"
--lwc-paletteHotOrange65",--slds-g-color-palette-hot-orange-65,,,
"
--lwc-paletteHotOrange70",--slds-g-color-palette-hot-orange-70,,,
"
--lwc-paletteHotOrange80",--slds-g-color-palette-hot-orange-80,,,
"
--lwc-paletteHotOrange90",--slds-g-color-palette-hot-orange-90,,,
"
--lwc-paletteHotOrange95",--slds-g-color-palette-hot-orange-95,,,
"
--lwc-paletteIndigo10",--slds-g-color-palette-indigo-10,,,
"
--lwc-paletteIndigo15",--slds-g-color-palette-indigo-15,,,
"
--lwc-paletteIndigo20",--slds-g-color-palette-indigo-20,,,
"
--lwc-paletteIndigo30",--slds-g-color-palette-indigo-30,,,
"
--lwc-paletteIndigo40",--slds-g-color-palette-indigo-40,,,
"
--lwc-paletteIndigo50",--slds-g-color-palette-indigo-50,,,
"
--lwc-paletteIndigo60",--slds-g-color-palette-indigo-60,,,
"
--lwc-paletteIndigo65",--slds-g-color-palette-indigo-65,,,
"
--lwc-paletteIndigo70",--slds-g-color-palette-indigo-70,,,
"
--lwc-paletteIndigo80",--slds-g-color-palette-indigo-80,,,
"
--lwc-paletteIndigo90",--slds-g-color-palette-indigo-90,,,
"
--lwc-paletteIndigo95",--slds-g-color-palette-indigo-95,,,
"
--lwc-paletteNeutral10",--slds-g-color-neutral-base-10,,,
"
--lwc-paletteNeutral20",--slds-g-color-neutral-base-20,,,
"
--lwc-paletteNeutral30",--slds-g-color-neutral-base-20,,,
"
--lwc-paletteNeutral40",--slds-g-color-neutral-base-40,,,
"
--lwc-paletteNeutral50",--slds-g-color-neutral-base-50,,,
"
--lwc-paletteNeutral60",--slds-g-color-neutral-base-60,,,
"
--lwc-paletteNeutral70",--slds-g-color-neutral-base-70,,,
"
--lwc-paletteNeutral80",--slds-g-color-neutral-base-80,,,
"
--lwc-paletteNeutral90",--slds-g-color-neutral-base-90,,,
"
--lwc-paletteNeutral95",--slds-g-color-neutral-base-95,,,
"
--lwc-paletteNeutral100",--slds-g-color-neutral-base-100,,,
"
--lwc-paletteOrange10",--slds-g-color-palette-orange-10,,,
"
--lwc-paletteOrange15",--slds-g-color-palette-orange-15,,,
"
--lwc-paletteOrange20",--slds-g-color-palette-orange-20,,,
"
--lwc-paletteOrange30",--slds-g-color-palette-orange-30,,,
"
--lwc-paletteOrange40",--slds-g-color-palette-orange-40,,,
"
--lwc-paletteOrange50",--slds-g-color-palette-orange-50,,,
"
--lwc-paletteOrange60",--slds-g-color-palette-orange-60,,,
"
--lwc-paletteOrange65",--slds-g-color-palette-orange-65,,,
"
--lwc-paletteOrange70",--slds-g-color-palette-orange-70,,,
"
--lwc-paletteOrange80",--slds-g-color-