Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Styling

How to customize and style UI5 Web Components. Covers CSS shadow parts, CSS custom states, CSS variables, and tag-level styling. Use when the user asks about changing component appearance, colors, spacing, theming, or overriding styles.
Success Message Strip
Customize UI5 Web Components appearance beyond defaults
Details
AuthorSAP SE

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

CategoryTagplatform
Classification
TagPlatformTagSAP
Trust Level
TagSAP Certified
Tags
TagcssTagshadow-partsTagthemingTagcss-variablesTagcustomization
RepositoryUI5/webcomponents

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

LicenseApache-2.0
Checks
Installation
Add to Joule Work Desktop
Add to Joule Work WebTagComing soon

How to add to Joule Work Web

  1. On the skill's GitHub page

    Link Disclaimer

    Some links are classified by an icon and/or a mouseover text. These links provide additional information.

    About the icons:

    Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

    • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
    • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

    Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

    , click Code → Download ZIP, then extract the archive.
  2. Open Joule Work Web.
  3. Go to your user settings and open Explore Skills.
  4. On the Skills Explorer page, click the Import button in the top-right corner.
  5. Follow the dialog to upload the extracted skill folder.
Install via CLI
npx skills add UI5/webcomponents --skill styling
Similar Skills
UI Theme Designer Design Tokens

SAP SE · Skill

TRIGGER: questions about the SAP Design System and SAP Fiori design tokens — which themes exist, what value a theme parameter (e.g. sapButton_Background, sapHighlightColor) has in a given theme, how parameters inherit/extend across the theme chain, which parameters a specific UI component (UI5 control, UI5 Web Component, Fundamental Styles component) consumes. SKIP: how-to questions about UI theme designer as a product (creating, publishing, transporting themes — use ui-theme-designer-help).

TagPlatformTagSAP Certified
UI Theme Designer Help

SAP SE · Skill

Provides customer-facing UI theme designer help from help.sap.com (BTP / Cloud Foundry edition). Use whenever you need to check what is — or is not — documented for customers about UI theme designer: setup, user/role management, themes and theme sets (creating, editing, publishing, transporting, fallback), quick/detailed/expert theming, writing themeable CSS for custom UI5 controls, best practices for custom control theme files, theming integrations with Build Work Zone / S/4HANA / SAPUI5 / SAP GUI, UI theme designer service constraints (rate limits, size limits, theming-specific security and permissions, accessibility), theming error messages and troubleshooting, what's-new. Also use for 'is X documented?' or 'what does the help say about Y?' questions. SKIP: questions about which themes or parameters exist or what values they have (use ui-theme-designer-design-tokens). SKIP: tenant-specific operational questions about a running system ("which themes do we have?", "which users are assigned?").

TagPlatformTagSAP Certified
Joule A2A Agent

SAP SE · Skill

Generate and deploy a pro-code AI agent using LangGraph and SAP GenAI Hub, deploy it to SAP BTP Cloud Foundry, create a Joule capability with A2A (Agent-to-Agent) action, and deploy it to Joule. Supports TypeScript (Express or CAP) and Python. Use this skill whenever the user mentions: building a custom agent for Joule, deploying an AI agent to BTP Cloud Foundry, A2A protocol integration with Joule, pro-code agent extensibility, LangGraph agent on SAP BTP, connecting an external agent to Joule, "bring your own agent" for Joule, creating a Joule capability with A2A action, CAP agent, MTA deployment, or any combination of LangGraph/A2A/Joule/BTP/Cloud Foundry/CAP in an agent development context. Also trigger when the user wants to scaffold, modify, or redeploy an existing A2A agent project.

TagPlatformTagSAP Certified
SAP Fiori Guidelines

SAP SE · Skill

SAP Fiori design guidelines for building enterprise applications. Use this skill when designing, building, or reviewing SAP Fiori applications, implementing SAPUI5 or UI5 Web Components, working with SAP enterprise UX patterns, or needing guidance on buttons, forms, tables, object pages, list reports, navigation, messaging, colors, typography, accessibility, AI/Joule integration, or any SAP Fiori UI element. Triggers on mentions of Fiori, SAPUI5, UI5, SAP UX, SAP design system, or enterprise application design following SAP standards.

TagPlatformTagSAP Certified

Checks — Styling — SkillSpector