Overview

The Style Pane is an essential feature for Salesforce of the Avonni Components Package for Salesforce Flow Builder. This powerful pane enables Salesforce Admins to apply detailed stylistic customizations to each Avonni component, ensuring a tailored and brand-aligned user interface within their Salesforce environment.

Key Benefits:

• Branding Alignment: Maintain consistency with your corporate branding across all Salesforce screens.

• User Engagement: Enhanced styling leads to a more engaging and intuitive user experience.

• Design Efficiency: Quickly implement design changes without extensive coding, saving time and resources

Accessing the Style Panel

The Styles Panel is accessible directly from the Component Builder.

• Select an Avonni Flow Screen Component from your Flow Screen Canvas.

• Click on the "Open Component Builder" button.

• Click on the "Style" panel

Adding Margin

Overview

Margins are used to create space around elements, outside of any defined borders.

By default, margins are customizable by using SLDS tokens. For specific needs, margins can be customizable manually.

How to add a margin

Adding a margin value allows for adjusting the overall size of the component.

• Select the component to adjust.

• Open the Component Builder to get access to the Styles Panel.

• Under the Margin section, enter the desired value.

• The Preview canvas will automatically adjust

Styling Text

Using various properties you can customize the Text of a lot of components. Text can be customized on the Title, Label, Header and more. Here are the Text attributes you can style:

• Color : Define a color

• Font Size : Define a font size

• Font Weight : Define a font weight to change how thin or heavy the weight is for your font.

• Font Style : Define a font style

• Font Family : Define a font family

• Line Height : Define a line height for changing the line-height of text

• Horizontal Alignment : Define horizontal alignment

Adding Border

• Open the Component Builder to access advanced settings

• Click on the Styles Panel

• Find the Border Color property if the component has one

• Add a Border Radius property, enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the corner icon () to each corner separately.

• Add a Border Color.

• Set a Border Size.

• Change Border Style if needed.

Changing component size

You may want to change the default size of some components to match your size constraints. You can do so using the Size styling property.

To change the size of a component:

• Open the Component Builder to access advanced settings

• Click on the Styles Panel

• Find the Size property, if the component has one

• Adjust width and height to fit your needs

• Overflow attributes allow you to clip content or add scrollbars when an element's content is too big to fit in a specified area.

• Advanced Options gives you the ability to specify max and min height/width.

Tokens

Capture the essential values of your styling attributes into named tokens. Use the defined token values and reuse them throughout your components' styling. Lightning Tokens make ensuring that your components' look and feel are consistent and even easier to update.

Lightning Tokens can be found for some components under the tokens menu.

Styling glossary

Foreground color

The foreground color is the color that an element appears in. For example, when the avatar icon is styled to appear green, the foreground color of the avatar icon has been set to green.

Overflow

The overflow property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Block Start

The margin-block-start property in CSS defines the amount of space along the outer starting edge of an element in the block direction.

Block End

The Block End styling settings provide a convenient way to customize the appearance of the final element within a design block.

Block Between

The Block Between styling settings enable you to effortlessly customize the appearance of elements positioned between the beginning and end of a design block.

Inline Start

The inline-start CSS property defines an element's logical start margin, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Inline End

Inline Between