![]() It is the sensible default of the design system. In styling hooks, this value is defined by the design system using a token and is not changeable. This is the fallback value if the CSS custom property is not valid. This example is referencing the background property. This is the semantic user interface property being customized. In this instance, -color identifies the category that this CSS custom property falls under.įor a full list of our categories, see Naming Convention categories -background To provide predictability, we’ve defined several categories that classify our naming conventions. In our example, our component is named badge so we include badge in the name of our custom property. It is specific to the component it resides in and does not affect unrelated components.Ĭurious about themed customizations? See the Theming FAQ -badgeīadge refers to the name of the component that is being targeted by the custom property. This identifier indicates that the custom property is a component-level customization within SLDS. slds is a namespace reserved for the Salesforce Lightning Design System. Learn more about the var() function on MDN -sldsĭeclaring a custom property requires that the name begins with double hyphens ( -). In our example, -slds-c-badge-color-background is our first argument, the CSS custom property, and #ECEBEA is our second argument, the fallback value. ![]() It accepts two arguments: a CSS custom property and an optional fallback value. This is a CSS function that enables you to use the stored value of a CSS custom property. ![]() Lets take the background color property and break down its associated styling hooks implementation, piece by piece. Styling hooks use CSS custom properties which make it easy to customize component styling and express your brand, especially when working with web components and shadow DOM.īelow is an example of the brand button and the brand button using styling hooks. For the most up-to-date information on available component styling hooks, please visit the Blueprint Overview page and select your desired component. For all of your existing -sds declarations, migrating them to -slds will put you on the long-term support path. Migration should be a straightforward process, as no other part of the styling hooks syntax has changed. ![]() The old namespace, -sds, will continue to function in the short term however, it is best to migrate if you have existing declarations using the old namespace. From here on out, the official styling hooks namespace for SLDS will be -slds. Developers can now use all of the existing styling hooks in a fully supported way to customize the look and feel of their Lightning components! Migrating NamespacesĪs mentioned above, we changed the styling hooks namespace as part of the GA effort. General Audience (GA)Īs of the 2.17.0 (Spring '22) release, styling hooks is officially designated for General Audience (GA) use! This release adds CSS Custom Property capabilities throughout our supported components, creates a legacy stylesheet for browsers that do not support CSS Custom Properties (e.g., IE11), and updates the namespace of these hooks. Understanding these topics beforehand is extremely beneficial when reading our documentation. These topics include concepts that are core to styling hooks. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |