**TRIGGER（このスキルが対応する質問）:** SAP Design System（SAP社の統一的なデザイン基準）とSAP Fioriデザイントークン（UIの見た目を定義する値）についての質問。具体的には： - どのようなテーマが存在するか - 特定のテーマパラメータ（例：sapButton_Background、sapHighlightColor）が各テーマでどのような値を持つか - パラメータがテーマチェーン（テーマの継承構造）でどのように継承・拡張されるか - 特定のUIコンポーネント（UI5コントロール、UI5ウェブコンポーネント、Fundamental Stylesコンポーネント）がどのパラメータを使用しているか **SKIP（対応しない質問）:** UI Theme Designer製品についての使い方に関する質問（テーマの作成、公開、移行など）。 → これらはui-theme-designer-helpを使用してください。
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).
$THIS はこのSKILL.mdファイルを含むフォルダです：
$THIS/node_modules/ が存在し、作成から7日以内である必要があります。そうでない場合は cd $THIS && npm ci を実行してください。
デザイン トークンはテーマ基盤コンテンツのLESSファイルで定義され、異なるフレームワーク（UI技術）のLESSおよびCSSファイルで使用されます。$THIS/node_modules/ には以下のものが含まれています：
UI5：（$LIBRARY は例えば sap.ui.core、$THEME は例えば sap_horizon）
$THIS/node_modules/@openui5/$LIBRARY/src/${LIBRARY/./\//}/**/themes/base に各ライブラリの基本テーマが含まれます$THIS/node_modules/@openui5/themelib_$THEME/src/${LIBRARY/./\//}/themes/ に各ライブラリの $THEME が含まれますUI5 ウェブ コンポーネント：（$THEME は例えば sap_horizon、$COMPONENT は例えば Button）
$THIS/node_modules/@ui5/*/src/themes/$COMPONENT.css はテーマに依存しないコンポーネント基本CSSを含みます。テーマ基盤コンテンツのパラメータをCSS変数として、および base/ で定義されたCSS変数を使用します（以下を参照）$THIS/node_modules/@ui5/*/src/themes/base/$COMPONENT-parameters.css はコンポーネント用のCSS変数定義を含みます。UI5 ウェブ コンポーネント固有の内部CSS変数は報告しないでください$THIS/node_modules/@ui5/*/src/themes/$THEME/$COMPONENT-parameters.css には base/ のCSS変数定義に対するテーマ依存値が含まれます（上記を参照）ファンダメンタル スタイル：
$THIS/node_modules/fundamental-styles/dist/*.css はテーマに依存しないコンポーネント基本CSSを含みます。テーマ基盤コンテンツのパラメータをCSS変数として、および theming/ で定義されたCSS変数を使用します（以下を参照）$THIS/node_modules/fundamental-styles/dist/theming/$THEME.css には dist/*.css で使用されるCSS変数定義に対するテーマ依存値が含まれます（上記を参照）。ファンダメンタル スタイル固有の内部CSS変数は報告しないでください$THIS/node_modules/@fundamental-styles/common-css/dist/*.css テーマに依存しないヘルパーCSS。テーマ基盤コンテンツのパラメータをCSS変数として使用しますベース：（$LIBRARY は例えば baseLib、$THEME は例えば sap_horizon）
$THIS/node_modules/@sap-theming/theming-base-content/content は以下で説明されているテーマリポジトリです（https://raw.githubusercontent.com/SAP-docs/btp-ui-theme-designer/main/docs/cf/About-Themes/overview-of-sap-theming-content-91ebfe2.md）。`Base/` を含み、全フレームワークで使用されます$THIS/node_modules/@sap-theming/theming-base-content/content/Base/.theming は Base フレームワークのメタデータを含みます$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/.theming はライブラリのメタデータを含みます$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/$THEME/.theming はテーマのメタデータを含みますsEntity：「Framework」「Library」または「Theme」sType（テーマ用）：「STANDARD」（単一テーマ）または「SET」（CSS不要。sType=STANDARD の異なるテーマへの参照のみ）aFiles：LESSソースファイルaBuildFiles：aFiles からビルドされたCSSファイル*sBase{Library,Theme,File}Id：最も重要なライブラリ・テーマ・ファイルのIDoExtends：親エンティティの $FRAMEWORK[.$LIBRARY[.$THEME[.$FILE]]] 「オブジェクト パス」sSourcePathPattern：オブジェクト パスをファイル パスに解決するパターンbIgnore=true：エンティティはテーマから無視されますユーザーの質問が対象とするSAPテーマを特定します。不明な場合は、$THIS/node_modules/@sap-theming/theming-base-content/content/Base/baseLib から利用可能なテーマIDを選択肢として提示します。デフォルトは sap_horizon です
ユーザーの質問が対象とするフレームワークを特定します。不明な場合は「背景説明」のフレームワークを選択肢として提示し、以下のデフォルトを適用します：
sap$COMPONENT_* に一致するパラメータを検索します。UI5 ウェブ コンポーネント CSS内で既に参照されていないそのようなパラメータは補足情報として報告し、「テーマ基盤コンテンツで定義されているが、UI5 ウェブ コンポーネント CSSではまだ参照されていない」というラベルを付けますユーザーの質問が対象とするフレームワークの .theming ファイルを読み取り、sBaseLibraryId と sSourcePathPattern を特定します
ステップ3で特定したフレームワークの .theming ファイルの sSourcePathPattern に基づいて、当該フレームワークのベース ライブラリのテーマの .theming ファイルを読み取ります
oExtends が存在する限り、以下を繰り返します：
oExtends で参照されているテーマの .theming ファイルを読み取ります。以前にそのフレームワーク（オブジェクト パスの最初のセクション）に遭遇していない場合は、先にフレームワーク .theming を読み取り、その sSourcePathPattern を特定します.theming JSONをテーマ .theming ファイルから既に取得したものとマージします。キーが既に存在する場合は変更しません。キーがまだ存在しない場合はキーと値を追加しますマージされた .theming ファイル内で ${sBaseFileId}.less ファイル（sBaseFileId はマージされた .theming ファイルから取得）を読み取ります
各LESS @import ステートメントについて、再帰的に以下を実行します：
@import ステートメントを読み取った内容に置き換えますマージされたLESSファイル内で、パラメータ定義の直前の行 // [<Annotation> <required: Value> <optional: More Values>] をそのパラメータにマップします：
ユーザーが「UI5 ウェブ コンポーネント」を対象としている場合、関連する各コンポーネントについて3つのCSSソースを調べます：
webcomponents/packages/*/src/themes/<component>.css のテーマに依存しないスケルトンとマージし、webcomponents/packages/*/src/themes/base/<component>-parameters.css とマージした後、webcomponents/packages/*/src/themes/<theme>/<component>-parameters.css のテーマ固有の差分とマージしますユーザーが「ファンダメンタル スタイル」を対象としている場合、関連するコンポーネントについて fundamental-styles/packages/*/src/**/*.scss を検索します。テーマ固有の値は theming-base-content/content/Base/baseLib/<theme>/css_variables.css のCSS変数から取得します
収集した情報に基づいてユーザーの質問に答えます
With $THIS being the folder that contains this SKILL.md:
$THIS/node_modules/ exists and is not older than 7 days; if not: cd $THIS && npm ci
Design Tokens are defined in LESS files of the theming-base-content, and consumed in LESS and CSS files of different frameworks (= UI technologies). In $THIS/node_modules/ you find the following:
$LIBRARY being e.g. sap.ui.core, and $THEME being e.g. sap_horizon)
$THIS/node_modules/@openui5/$LIBRARY/src/${LIBRARY/./\//}/**/themes/base contains the baseTheme of the different libraries$THIS/node_modules/@openui5/themelib_$THEME/src/${LIBRARY/./\//}/themes/ contains the $THEME of the different libraries$THEME being e.g. sap_horizon, and $COMPONENT being e.g. Button)
$THIS/node_modules/@ui5/*/src/themes/$COMPONENT.css contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in base/ (see below)$THIS/node_modules/@ui5/*/src/themes/base/$COMPONENT-parameters.css contains CSS custom property definitions for components; never report those UI5 Web Components-specific internal CSS custom properties.$THIS/node_modules/@ui5/*/src/themes/$THEME/$COMPONENT-parameters.css contains theme-dependent values for the custom property definitions from base/ (see above)$THIS/node_modules/fundamental-styles/dist/*.css contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in theming/ (see below)$THIS/node_modules/fundamental-styles/dist/theming/$THEME.css contains theme-dependent values for the custom property definitions used in dist/*.css (see above); never report those Fundamental Styles-specific internal CSS custom properties$THIS/node_modules/@fundamental-styles/common-css/dist/*.css theme-independent helper CSS, using parameters from theming-base-content as CSS custom properties$LIBRARY being e.g. baseLib, and $THEME being e.g. sap_horizon)
$THIS/node_modules/@sap-theming/theming-base-content/content is a theme repository as described in https://raw.githubusercontent.com/SAP-docs/btp-ui-theme-designer/main/docs/cf/About-Themes/overview-of-sap-theming-content-91ebfe2.md, containing Base/; used by all frameworks$THIS/node_modules/@sap-theming/theming-base-content/content/Base/.theming contains metadata about the Base framework$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/.theming contains metadata about libraries$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/$THEME/.theming contains metadata about themessEntity: "Framework", "Library" or "Theme"sType (for themes): "STANDARD" (= single theme) or "SET" (= no CSS, just references to different themes of sType=STANDARD)aFiles: LESS source filesaBuildFiles: CSS files built from aFiles*sBase{Library,Theme,File}Id: ID of the most important library/theme/fileoExtends: the $FRAMEWORK[.$LIBRARY[.$THEME[.$FILE]]] "object path" of the parent entitysSourcePathPattern: pattern to resolve object paths to file pathsbIgnore=true: entity is ignored from theming$THIS/node_modules/@sap-theming/theming-base-content/content/Base/baseLib as select options if unclear, default to sap_horizonsap$COMPONENT_*: report any such parameters not already referenced in UI5 Web Components as supplementary, labelled "defined in theming-base-content, not yet referenced in UI5 Web Components CSS".theming file of the framework the users question targets, determine sBaseLibraryId and sSourcePathPattern.theming file of the theme of the sBaseLibrary of the framework the users question targets, based on sSourcePathPattern of the frameworks .theming fileoExtends:
.theming file of the theme referenced by oExtends; if you haven't encountered the framework (the first section of the Object Path) before, read the framework .theming first to determine its sSourcePathPattern.theming JSON with what you already have from the theme .theming files: if a key already exists, leave it untouched; add key+value if the key does not yet exist${sBaseFileId}.less file (sBaseFileId comes from the merged .theming files) of the theme of the sBaseLibrary of the framework the users question targets@import statement, recursively:
@import statement with the read content// [<Annotation> <required: Value> <optional: More Values>] that precede parameter definitions to that parameter:
!, e.g. "Protected" and "!Protected"), remove both values from the values listwebcomponents/packages/*/src/themes/<component>.css, merged withwebcomponents/packages/*/src/themes/base/<component>-parameters.css, then withwebcomponents/packages/*/src/themes/<theme>/<component>-parameters.cssfundamental-styles/packages/*/src/**/*.scss for the relevant component; theme-specific values come from the CSS custom properties in theming-base-content/content/Base/baseLib/<theme>/css_variables.css原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。