mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-01 20:26:02 +08:00

Rename webapp/webapplication to UI bundle in skills (#129 )

* Split generating-webapp-metadata into single-purpose skills

Extract the deployment sequence into a new deploying-webapp skill so each
webapp skill describes exactly one actionable goal. This improves agent
skill selection accuracy by eliminating multi-concern descriptions.

- generating-webapp-metadata: now focused on scaffolding, bundle config, CSP
- deploying-webapp: new skill for the 7-step deployment sequence

* Rename -webapp- skill directories and references to -webapplication-

Rename all 7 webapp skill directories to use the full "webapplication"
entity name. Update frontmatter name fields, cross-skill references,
and descriptive prose. Package names and CLI commands are preserved
as-is since those are actual identifiers.

2026-03-30 11:49:19 -05:00

3.0 KiB

Raw Blame History

Style Tokens Reference

This document explains how to use styleTokens for theming and styling the AgentforceConversationClient.

Overview

The styleTokens prop is the ONLY way to customize the appearance of the Agentforce conversation client. It accepts an object with style token keys and CSS values.

Source of Truth

For the complete and always up-to-date list of all 60+ style tokens, see:

@salesforce/agentforce-conversation-client on npm

The npm package README contains the definitive documentation with all available style tokens.

Token Categories

Style tokens are organized by UI area:

Header (7 tokens): background, text color, hover, active, focus, border, font family
Messages (10 tokens): colors, padding, margins, border radius, fonts, body width
Inbound messages (5 tokens): background, text color, width, alignment, hover
Outbound messages (5 tokens): background, text color, width, alignment, margin
Input (33 tokens): colors, borders, fonts, padding, buttons, scrollbar, textarea, actions

Common Use Cases

Change header color

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
  }}
/>

Change message colors

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    messageBlockInboundBackgroundColor: "#4CAF50",
    messageBlockInboundTextColor: "#ffffff",
    messageBlockOutboundBackgroundColor: "#f5f5f5",
    messageBlockOutboundTextColor: "#333333",
  }}
/>

Apply brand colors

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#1a73e8",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#1a73e8",
    messageBlockInboundTextColor: "#ffffff",
    messageInputFooterSendButton: "#1a73e8",
    messageInputFooterSendButtonHoverColor: "#1557b0",
  }}
/>

Adjust spacing and fonts

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    messageInputFontSize: "16px",
    messageBlockBorderRadius: "12px",
    messageBlockPadding: "16px",
    messageInputPadding: "12px",
  }}
/>

How to Find Token Names

Check the @salesforce/agentforce-conversation-client npm package for the complete list of all tokens
Token names follow a pattern:
- headerBlock* - Header area
- messageBlock* - Message bubbles
- messageBlockInbound* - Messages from customer to agent
- messageBlockOutbound* - Messages from agent to customer
- messageInput* - Input field and send button

Important Notes

You do NOT need to provide all tokens - only override the ones you want to change
Token values are CSS strings (e.g., "#FF0000", "16px", "bold")
Invalid token names are silently ignored
The component uses default values for any tokens you don't specify

3.0 KiB Raw Blame History