mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-04 22:33:31 +08:00
9ba064174a
* feat: removing old webapp skills * feat: adding sync of skills from webapps to afv * feat: adding the first iteration of skills * feat: pin template deps to latest npm versions and flatten skill folders - Add pin-template-deps.js to resolve "*" deps to exact npm versions - Integrate pinning into sync-template-skills npm script - Remove check-template-skills-versions.js (no longer needed) - Simplify workflow to single sync step - Flatten skill output: one folder per skill with cleaned names Made-with: Cursor * fix: resolve skill validation errors - Move .template-versions.json from skills/ to root - Shorten skill names to meet 64-char limit: - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload - Expand descriptions to meet 20-word minimum with trigger context * Add webapp skills from template, sync script updates - Rename skill folders from salesforce-webapp-* to *-webapp-* convention - Update sync-template-skills.js: set SKILL.md front matter name to dest folder - Remove sync-template-skills workflow and pin-template-deps script - Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill - Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux Made-with: Cursor * Align SKILL.md front matter name with folder for all webapp skills Made-with: Cursor * Fix skill validation: description length and trigger context for configuring-webapp-metadata, creating-webapp Made-with: Cursor * Rename sync script to sync-webapp-skills, drop manifest file - Rename sync-template-skills.js to sync-webapp-skills.js - Update package.json script to sync-webapp-skills - Remove .synced-template-skills.json creation and add to .gitignore Made-with: Cursor * Revert sync-react-b2e-sample and sync-react-b2x-sample to upstream version Made-with: Cursor * Sync script: pin b2e and b2x to latest, sync skills from template - Pin both template packages to latest in sync-webapp-skills.js - Update package.json / package-lock.json (b2x 1.109.0) - Sync skills: managing-webapp-agentforce-conversation-client, bar-line-chart, remove building-webapp-analytics-charts and integrating-webapp-agentforce-conversation-client - Minor skill content updates Made-with: Cursor * Remove interactive map, weather widget, and Unsplash skills (no longer in template) Made-with: Cursor --------- Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>
102 lines
3.0 KiB
Markdown
102 lines
3.0 KiB
Markdown
# 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](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client)**
|
|
|
|
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
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
styleTokens={{
|
|
headerBlockBackground: "#0176d3",
|
|
headerBlockTextColor: "#ffffff",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Change message colors
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
styleTokens={{
|
|
messageBlockInboundBackgroundColor: "#4CAF50",
|
|
messageBlockInboundTextColor: "#ffffff",
|
|
messageBlockOutboundBackgroundColor: "#f5f5f5",
|
|
messageBlockOutboundTextColor: "#333333",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Apply brand colors
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
styleTokens={{
|
|
headerBlockBackground: "#1a73e8",
|
|
headerBlockTextColor: "#ffffff",
|
|
messageBlockInboundBackgroundColor: "#1a73e8",
|
|
messageBlockInboundTextColor: "#ffffff",
|
|
messageInputFooterSendButton: "#1a73e8",
|
|
messageInputFooterSendButtonHoverColor: "#1557b0",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Adjust spacing and fonts
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
styleTokens={{
|
|
messageInputFontSize: "16px",
|
|
messageBlockBorderRadius: "12px",
|
|
messageBlockPadding: "16px",
|
|
messageInputPadding: "12px",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## How to Find Token Names
|
|
|
|
1. Check the [@salesforce/agentforce-conversation-client npm package](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client) for the complete list of all tokens
|
|
|
|
2. 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
|