Add border radius to lightning-accordion header using styling hooks

csslightning-design-systemlightning-web-componentsslds-styling-hooks

I'm trying to add border-radius property to lightning-accordion-section header but the following syntax seems to work with background color but not with border radius. What is the right combination of css styling here?

.accLabel
{
    --slds-c-accordion-summary-color-background : rgb(243,243,243);
    --slds-c-accordion-summary-radius-border : 0.5rem;
}

LWC html

<lightning-accordion active-section-name="alwaysOpen">
    <lightning-accordion-section name="alwaysOpen" label="Description" class="accLabel">
    </lightning-accordion-section>
</lightning-accordion>

Best Answer

You can only use the hooks that are defined for a component. For lightning-accordion, your options currently are:

Category	Hook Name	Value Type	Fallback Value
Color	--slds-c-accordion-color-border	Color	#e5e5e5
Color	--slds-c-accordion-heading-text-color	Color	#181818
Color	--slds-c-accordion-summary-color-background	Color	transparent
Font	--slds-c-accordion-heading-font-size	Dimension	1rem
Sizing	--slds-c-accordion-sizing-border	Dimension	1px
Spacing	--slds-c-accordion-section-spacing-block-end	Dimension	0.75rem
Spacing	--slds-c-accordion-section-spacing-block-start	Dimension	0.75rem
Spacing	--slds-c-accordion-section-spacing-inline-end	Dimension	0.75rem
Spacing	--slds-c-accordion-section-spacing-inline-start	Dimension	0.75rem
Text	--slds-c-accordion-heading-line-height	Number	1.25

Because you can't "reach in" to modify the contents of a component directly, you can't actually do what you're trying to accomplish with out of the box style hooks or any combination of CSS.

If you really want to do this, you're stuck writing a custom component.

Conceptually, you could try just pulling out the pieces you need from lightning-base-components. I did some research on this, and well, it's a lot of code to dig through. If you care about 100% replicating the functionality, you should be able to pull out what you need with some effort, probably a few hours. I'll leave it up to you to decide if the amount of effort you'd have to put in would be worth it just to achieve rounded borders.

You could also just copy-paste the blueprint and customize it as you desire. There's really not a lot of JavaScript involved to make a minimally viable version.

Finally, you might look to open-source solutions. I didn't find any that are LWC, just Aura, but you might want to do further research on the topic.

Related Solutions

[SalesForce] Lightning Design System is overridden by styles from app.css

First on the font. one.app should be serving Salesforce Sans. What version are you currently in?

Are you scoping your component? (This means putting the .slds class on the top level of your component.) Are you using the CSS provided in the download that ends in -ltng.css?

I'm assuming you're using ui:button to get your button style? The SLDS styles are not built onto the Ligtning components yet. You can either use a simple or you can write your own button component with SLDS styles.

The scoping will give your SLDS CSS a level higher of specificity. I would not recommend using IDs or !important in your CSS.

Hope that helps.

[SalesForce] Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

So here is my two cents

Note Per comments this does not seem to completely answer the question as OP is looking to keep classic look while providing a look that also appears well under Lightning using a single solution.

For VF components that you want to style as SLDS without having to modify the controller you need to de-componetize them. Adding styles after the DOM has been rendered as pointed out above is not great because it relies on implementation level details you have no control over. Not to mention it is just hacky...

Also, VF components just do a lot of the work for us. Unfortunately, with SLDS we are again going to need to do much of the HTML work ourselves but it is not really that bad.

Using a template approach like mentioned What is suggested approach to transfer VF pages to be lightning ready

So the idea for the code you posted would be to:

Pageblocktable becomes an HTML table
Use an apex repeat to build the table rows using the controller variable
Use an input/output field with the appropriate slds styleclass in each table row

You can maintain controller and page functionality while doing this.

Bottom line is you will need to break these compound tags into HTML elements. Simple tags like input field can be used as is with the appropriate styleclass and surrounding HTML elements thus allowing you to keep built in functionality

Original Markup

<apex:page standardController="Contact" recordSetVar="cs">
    <div class="slds cv">
        <apex:form>
            <apex:sectionHeader title="{!$ObjectType.Contact.labelPlural}" subtitle="All"/>
            <apex:pageMessages />
            <apex:pageBlock title="{!$ObjectType.Contact.labelPlural}">
                <apex:pageBlockTable value="{!cs}" var="c">
                    <apex:column value="{!c.FirstName}"/>
                    <apex:column value="{!c.LastName}"/>
                    <apex:column value="{!c.Birthdate}"/>
                    <apex:column value="{!c.CreatedDate}"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:form>
    </div>
</apex:page>

Output

SLDS Pageblock / Pageblocktable Markup

A bit more markup but the way it is done ensures that it continues working and does not rely on the "implementation level details" of the old VF components

<apex:page id="dummySLDSPage" standardController="Contact" recordSetVar="cs" showHeader="false"
           standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

    <head>

        <apex:stylesheet
                value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"/>

    </head>


    <div class="SLDS">

        <body>

        <apex:form>
            <apex:pageMessages/>

            <!-- Replaces the Standard Pageblock Table Header-->
            <div class="slds-page-header" role="banner" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <div class="slds-grid">
                    <div class="slds-col">
                        <div class="slds-media slds-no-space slds-grow">
                            <div class="slds-media__figure">
                                <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
                                    <use xlink:href="{!URLFOR($Resource.AppFrontier_Assets, '/assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
                                </svg>
                            </div>
                            <div class="slds-media__body">
                                <p class="slds-text-title--caps slds-line-height--reset">{!$ObjectType.Contact.labelPlural}</p>
                                <p class="slds-page-header__title slds-truncate"
                                   title="ALL">ALL</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Replaces the Pageblocktable Table -->
            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
                <!-- Use a caption if desired
                    <caption class="slds-text-heading&#45;&#45;label slds-p-bottom&#45;&#45;medium">{!$ObjectType.Contact.labelPlural}</caption>
                -->
                <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.FirstName.Label}">
                                {!$ObjectType.Contact.fields.FirstName.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.LastName.Label}">
                                {!$ObjectType.Contact.fields.LastName.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.BirthDate.Label}">
                                {!$ObjectType.Contact.fields.BirthDate.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.CreatedDate.Label}">
                                {!$ObjectType.Contact.fields.CreatedDate.Label}
                        </div>
                    </th>

                </tr>

                </thead>
                <tbody>
                <apex:repeat value="{!cs}" var="c"> <!-- Build the columns -->
                    <tr>
                        <th scope="row" data-label="{!$ObjectType.Contact.fields.FirstName.Label}">
                            <div class="slds-truncate" title="{!c.FirstName}">
                                <apex:outputField value="{!c.FirstName}"/> <!-- Standard VF component -->
                            </div>
                        </th>
                        <td data-label="{!c.LastName}">
                            <div class="slds-truncate"
                                 title="{!c.LastName}">
                                <apex:outputField value="{!c.LastName}"/>
                            </div>
                        </td>
                        <td data-label="{!c.Birthdate}">
                            <div class="slds-truncate"
                                 title="{!c.Birthdate}">
                                <apex:outputField value="{!c.Birthdate}"/>
                            </div>
                        </td>
                        <td data-label="{!c.CreatedDate}">
                            <div class="slds-truncate"
                                 title="{!c.CreatedDate}">
                                <apex:outputField value="{!c.CreatedDate}"/>
                            </div>
                        </td>
                    </tr>
                </apex:repeat>
                </tbody>
            </table>

        </apex:form>


        </body>

    </div>
</apex:page>

Output

The general idea would apply to the rest of the items you would like to convert. You could even go so far as spending a bit of time to make VF Components that are done in SLDS styling and used to replace existing VF components. If the project is large this could be beneficial as it would save a lot of time.

Maybe I should put a package of reusable replacement SLDS components for VF components together...hmm...There is already a library out there but it had way too much overhead and really hacked the styling.

Some additional resources:

VF SLDS Checkbox: SLDS and inputField checkbox

VF SLDS Lookup with autocomplete: Lookup Field Dual Keyboard Focus (Answered with working Autocomplete lookup component and JS example for VF/SLDS)

VF SLDS Select Checkboxes: Convert apex:selectCheckboxes into slds style

VF Page Messages Replacement: How to convert a Visualforce apex:pageMessages to be lightning style

Best Answer

Related Solutions

[SalesForce] Lightning Design System is overridden by styles from app.css

[SalesForce] Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

Related Topic