From 59011ed12c342f7fe5ac1dbce19cb3c37eb7507b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 16 Jan 2025 11:40:47 +0100 Subject: [PATCH 1/2] fix(ThemingParameters): update css vars --- .../ThemeableThemingParameters.tsx | 18 ++- package.json | 3 +- .../base/src/styling/ThemingParameters.ts | 142 +++++++++++++++++- scripts/generate-theming-parameters.js | 2 +- 4 files changed, 159 insertions(+), 6 deletions(-) diff --git a/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx b/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx index 4c788a2aa84..feaf0ce9844 100644 --- a/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx +++ b/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx @@ -1,9 +1,9 @@ import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; +import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; import { useEffect, useReducer, useState } from 'react'; import type { CSSProperties } from 'react'; import { MAPPED_THEMES } from '../../.storybook/utils'; -import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react'; -import { ThemingParameters } from '@ui5/webcomponents-react-base'; const containerStyles = { display: 'grid', @@ -14,6 +14,7 @@ const containerStyles = { const FONTS = []; const COLORS = []; +const SPACING = []; const OTHERS = Object.entries(ThemingParameters).filter(([key, value]) => { if (key.includes('Font')) { if (key.includes('FontUrl')) { @@ -27,6 +28,10 @@ const OTHERS = Object.entries(ThemingParameters).filter(([key, value]) => { COLORS.push([key, value]); return false; } + if (key.includes('Space')) { + SPACING.push([key, value]); + return false; + } return true; }); @@ -37,7 +42,7 @@ const getStyleFonts = (val) => { } else if (val.includes('Size')) { style.fontSize = val; } else if (val.includes('Weight')) { - style.fontWeight; + style.fontWeight = val; } return style; }; @@ -161,6 +166,13 @@ export const ThemeableCSSVars = () => { })} + +
+ {SPACING.map(([key, value]) => { + return ; + })} +
+
{OTHERS.map(([key, value]) => { diff --git a/package.json b/package.json index a0ab68955a7..e6f73fa2305 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook", "postinstall": "husky && yarn setup", "create-cypress-commands-docs": "documentation build ./packages/cypress-commands/src/commands.ts -f json -o ./packages/cypress-commands/api-commands.json && documentation build ./packages/cypress-commands/src/queries.ts -f json -o ./packages/cypress-commands/api-queries.json", - "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json" + "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json", + "create-theming-parameters": "node scripts/generate-theming-parameters.js" }, "dependencies": { "@storybook/addon-a11y": "8.4.5", diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts index e54a2e8a8a2..f1a75e38d09 100644 --- a/packages/base/src/styling/ThemingParameters.ts +++ b/packages/base/src/styling/ThemingParameters.ts @@ -113,12 +113,14 @@ export const ThemingParameters = { sapContent_ForegroundTextColor: 'var(--sapContent_ForegroundTextColor)', sapContent_BadgeBackground: 'var(--sapContent_BadgeBackground)', sapContent_BadgeTextColor: 'var(--sapContent_BadgeTextColor)', + sapContent_BadgeBorderColor: 'var(--sapContent_BadgeBorderColor)', sapContent_DragAndDropActiveColor: 'var(--sapContent_DragAndDropActiveColor)', sapContent_Selected_TextColor: 'var(--sapContent_Selected_TextColor)', sapContent_Selected_Background: 'var(--sapContent_Selected_Background)', sapContent_Selected_Hover_Background: 'var(--sapContent_Selected_Hover_Background)', sapContent_Selected_ForegroundColor: 'var(--sapContent_Selected_ForegroundColor)', sapContent_ForcedColorAdjust: 'var(--sapContent_ForcedColorAdjust)', + sapContent_Lite_Shadow: 'var(--sapContent_Lite_Shadow)', sapContent_Illustrative_Color1: 'var(--sapContent_Illustrative_Color1)', sapContent_Illustrative_Color2: 'var(--sapContent_Illustrative_Color2)', sapContent_Illustrative_Color3: 'var(--sapContent_Illustrative_Color3)', @@ -139,6 +141,38 @@ export const ThemingParameters = { sapContent_Illustrative_Color18: 'var(--sapContent_Illustrative_Color18)', sapContent_Illustrative_Color19: 'var(--sapContent_Illustrative_Color19)', sapContent_Illustrative_Color20: 'var(--sapContent_Illustrative_Color20)', + sapContent_Illustrative_Color21: 'var(--sapContent_Illustrative_Color21)', + sapContent_Illustrative_Color22: 'var(--sapContent_Illustrative_Color22)', + sapContent_Illustrative_Color23: 'var(--sapContent_Illustrative_Color23)', + sapContent_Illustrative_Color24: 'var(--sapContent_Illustrative_Color24)', + sapContent_Illustrative_Color25: 'var(--sapContent_Illustrative_Color25)', + sapContent_Illustrative_Color26: 'var(--sapContent_Illustrative_Color26)', + sapContent_Illustrative_Color27: 'var(--sapContent_Illustrative_Color27)', + sapContent_Illustrative_Color28: 'var(--sapContent_Illustrative_Color28)', + sapContent_Illustrative_Color29: 'var(--sapContent_Illustrative_Color29)', + sapContent_Illustrative_Color30: 'var(--sapContent_Illustrative_Color30)', + sapContent_Illustrative_Color31: 'var(--sapContent_Illustrative_Color31)', + sapContent_Space_S: 'var(--sapContent_Space_S)', + sapContent_Space_M: 'var(--sapContent_Space_M)', + sapContent_Space_L: 'var(--sapContent_Space_L)', + sapContent_Space_XL: 'var(--sapContent_Space_XL)', + sapContent_Space_Tiny: 'var(--sapContent_Space_Tiny)', + sapContent_Space_Small: 'var(--sapContent_Space_Small)', + sapContent_Space_Medium: 'var(--sapContent_Space_Medium)', + sapContent_Space_Large: 'var(--sapContent_Space_Large)', + sapContent_Margin_Tiny: 'var(--sapContent_Margin_Tiny)', + sapContent_Margin_Small: 'var(--sapContent_Margin_Small)', + sapContent_Margin_Medium: 'var(--sapContent_Margin_Medium)', + sapContent_Margin_Large: 'var(--sapContent_Margin_Large)', + sapContent_Padding_S: 'var(--sapContent_Padding_S)', + sapContent_Padding_M: 'var(--sapContent_Padding_M)', + sapContent_Padding_L: 'var(--sapContent_Padding_L)', + sapContent_Padding_XL: 'var(--sapContent_Padding_XL)', + sapContent_Gap: 'var(--sapContent_Gap)', + sapContent_Success_HeaderShadow: 'var(--sapContent_Success_HeaderShadow)', + sapContent_Warning_HeaderShadow: 'var(--sapContent_Warning_HeaderShadow)', + sapContent_Error_HeaderShadow: 'var(--sapContent_Error_HeaderShadow)', + sapContent_Information_HeaderShadow: 'var(--sapContent_Information_HeaderShadow)', sapFontLightFamily: 'var(--sapFontLightFamily)', sapFontBoldFamily: 'var(--sapFontBoldFamily)', sapFontSemiboldFamily: 'var(--sapFontSemiboldFamily)', @@ -193,6 +227,7 @@ export const ThemingParameters = { sapShell_InformativeColor: 'var(--sapShell_InformativeColor)', sapShell_NeutralColor: 'var(--sapShell_NeutralColor)', sapShell_Assistant_ForegroundColor: 'var(--sapShell_Assistant_ForegroundColor)', + sapShell_SubBrand_TextColor: 'var(--sapShell_SubBrand_TextColor)', sapShell_Category_1_Background: 'var(--sapShell_Category_1_Background)', sapShell_Category_1_BorderColor: 'var(--sapShell_Category_1_BorderColor)', sapShell_Category_1_TextColor: 'var(--sapShell_Category_1_TextColor)', @@ -257,6 +292,18 @@ export const ThemingParameters = { sapShell_Category_16_BorderColor: 'var(--sapShell_Category_16_BorderColor)', sapShell_Category_16_TextColor: 'var(--sapShell_Category_16_TextColor)', sapShell_Category_16_TextShadow: 'var(--sapShell_Category_16_TextShadow)', + sapShell_Space_S: 'var(--sapShell_Space_S)', + sapShell_Space_M: 'var(--sapShell_Space_M)', + sapShell_Space_L: 'var(--sapShell_Space_L)', + sapShell_Space_XL: 'var(--sapShell_Space_XL)', + sapShell_Gap_S: 'var(--sapShell_Gap_S)', + sapShell_Gap_M: 'var(--sapShell_Gap_M)', + sapShell_Gap_L: 'var(--sapShell_Gap_L)', + sapShell_Gap_XL: 'var(--sapShell_Gap_XL)', + sapShell_GroupGap_S: 'var(--sapShell_GroupGap_S)', + sapShell_GroupGap_M: 'var(--sapShell_GroupGap_M)', + sapShell_GroupGap_L: 'var(--sapShell_GroupGap_L)', + sapShell_GroupGap_XL: 'var(--sapShell_GroupGap_XL)', sapAssistant_Color1: 'var(--sapAssistant_Color1)', sapAssistant_Color2: 'var(--sapAssistant_Color2)', sapAssistant_BackgroundGradient: 'var(--sapAssistant_BackgroundGradient)', @@ -278,38 +325,52 @@ export const ThemingParameters = { sapAvatar_1_Background: 'var(--sapAvatar_1_Background)', sapAvatar_1_BorderColor: 'var(--sapAvatar_1_BorderColor)', sapAvatar_1_TextColor: 'var(--sapAvatar_1_TextColor)', + sapAvatar_1_Hover_Background: 'var(--sapAvatar_1_Hover_Background)', sapAvatar_2_Background: 'var(--sapAvatar_2_Background)', sapAvatar_2_BorderColor: 'var(--sapAvatar_2_BorderColor)', sapAvatar_2_TextColor: 'var(--sapAvatar_2_TextColor)', + sapAvatar_2_Hover_Background: 'var(--sapAvatar_2_Hover_Background)', sapAvatar_3_Background: 'var(--sapAvatar_3_Background)', sapAvatar_3_BorderColor: 'var(--sapAvatar_3_BorderColor)', sapAvatar_3_TextColor: 'var(--sapAvatar_3_TextColor)', + sapAvatar_3_Hover_Background: 'var(--sapAvatar_3_Hover_Background)', sapAvatar_4_Background: 'var(--sapAvatar_4_Background)', sapAvatar_4_BorderColor: 'var(--sapAvatar_4_BorderColor)', sapAvatar_4_TextColor: 'var(--sapAvatar_4_TextColor)', + sapAvatar_4_Hover_Background: 'var(--sapAvatar_4_Hover_Background)', sapAvatar_5_Background: 'var(--sapAvatar_5_Background)', sapAvatar_5_BorderColor: 'var(--sapAvatar_5_BorderColor)', sapAvatar_5_TextColor: 'var(--sapAvatar_5_TextColor)', + sapAvatar_5_Hover_Background: 'var(--sapAvatar_5_Hover_Background)', sapAvatar_6_Background: 'var(--sapAvatar_6_Background)', sapAvatar_6_BorderColor: 'var(--sapAvatar_6_BorderColor)', sapAvatar_6_TextColor: 'var(--sapAvatar_6_TextColor)', + sapAvatar_6_Hover_Background: 'var(--sapAvatar_6_Hover_Background)', sapAvatar_7_Background: 'var(--sapAvatar_7_Background)', sapAvatar_7_BorderColor: 'var(--sapAvatar_7_BorderColor)', sapAvatar_7_TextColor: 'var(--sapAvatar_7_TextColor)', + sapAvatar_7_Hover_Background: 'var(--sapAvatar_7_Hover_Background)', sapAvatar_8_Background: 'var(--sapAvatar_8_Background)', sapAvatar_8_BorderColor: 'var(--sapAvatar_8_BorderColor)', sapAvatar_8_TextColor: 'var(--sapAvatar_8_TextColor)', + sapAvatar_8_Hover_Background: 'var(--sapAvatar_8_Hover_Background)', sapAvatar_9_Background: 'var(--sapAvatar_9_Background)', sapAvatar_9_BorderColor: 'var(--sapAvatar_9_BorderColor)', sapAvatar_9_TextColor: 'var(--sapAvatar_9_TextColor)', + sapAvatar_9_Hover_Background: 'var(--sapAvatar_9_Hover_Background)', sapAvatar_10_Background: 'var(--sapAvatar_10_Background)', sapAvatar_10_BorderColor: 'var(--sapAvatar_10_BorderColor)', sapAvatar_10_TextColor: 'var(--sapAvatar_10_TextColor)', + sapAvatar_10_Hover_Background: 'var(--sapAvatar_10_Hover_Background)', + sapAvatar_Lite_BorderColor: 'var(--sapAvatar_Lite_BorderColor)', + sapAvatar_Lite_Background: 'var(--sapAvatar_Lite_Background)', + sapAvatar_Hover_BorderColor: 'var(--sapAvatar_Hover_BorderColor)', sapButton_Background: 'var(--sapButton_Background)', sapButton_BorderColor: 'var(--sapButton_BorderColor)', sapButton_BorderWidth: 'var(--sapButton_BorderWidth)', sapButton_BorderCornerRadius: 'var(--sapButton_BorderCornerRadius)', sapButton_TextColor: 'var(--sapButton_TextColor)', + sapButton_FontFamily: 'var(--sapButton_FontFamily)', sapButton_Hover_Background: 'var(--sapButton_Hover_Background)', sapButton_Hover_BorderColor: 'var(--sapButton_Hover_BorderColor)', sapButton_Hover_TextColor: 'var(--sapButton_Hover_TextColor)', @@ -319,7 +380,9 @@ export const ThemingParameters = { sapButton_Active_TextColor: 'var(--sapButton_Active_TextColor)', sapButton_Emphasized_Background: 'var(--sapButton_Emphasized_Background)', sapButton_Emphasized_BorderColor: 'var(--sapButton_Emphasized_BorderColor)', + sapButton_Emphasized_BorderWidth: 'var(--sapButton_Emphasized_BorderWidth)', sapButton_Emphasized_TextColor: 'var(--sapButton_Emphasized_TextColor)', + sapButton_Emphasized_FontFamily: 'var(--sapButton_Emphasized_FontFamily)', sapButton_Emphasized_Hover_Background: 'var(--sapButton_Emphasized_Hover_Background)', sapButton_Emphasized_Hover_BorderColor: 'var(--sapButton_Emphasized_Hover_BorderColor)', sapButton_Emphasized_Hover_TextColor: 'var(--sapButton_Emphasized_Hover_TextColor)', @@ -470,6 +533,10 @@ export const ThemingParameters = { sapButton_Handle_Positive_Hover_BorderColor: 'var(--sapButton_Handle_Positive_Hover_BorderColor)', sapButton_TokenBackground: 'var(--sapButton_TokenBackground)', sapButton_TokenBorderColor: 'var(--sapButton_TokenBorderColor)', + sapButton_TokenBorderCornerRadius: 'var(--sapButton_TokenBorderCornerRadius)', + sapButton_Selected_TokenBorderWidth: 'var(--sapButton_Selected_TokenBorderWidth)', + sapButton_ReadOnly_TokenBackground: 'var(--sapButton_ReadOnly_TokenBackground)', + sapButton_Segment_BorderCornerRadius: 'var(--sapButton_Segment_BorderCornerRadius)', sapField_Background: 'var(--sapField_Background)', sapField_BackgroundStyle: 'var(--sapField_BackgroundStyle)', sapField_TextColor: 'var(--sapField_TextColor)', @@ -523,6 +590,20 @@ export const ThemingParameters = { sapField_InformationBorderWidth: 'var(--sapField_InformationBorderWidth)', sapField_InformationBorderStyle: 'var(--sapField_InformationBorderStyle)', sapField_InformationShadow: 'var(--sapField_InformationShadow)', + sapField_Selector_Hover_Background: 'var(--sapField_Selector_Hover_Background)', + sapField_Selector_Hover_InvalidBackground: 'var(--sapField_Selector_Hover_InvalidBackground)', + sapField_Selector_Hover_WarningBackground: 'var(--sapField_Selector_Hover_WarningBackground)', + sapField_Selector_Hover_SuccessBackground: 'var(--sapField_Selector_Hover_SuccessBackground)', + sapField_Selector_Hover_InformationBackground: 'var(--sapField_Selector_Hover_InformationBackground)', + sapField_Picker_BorderColor: 'var(--sapField_Picker_BorderColor)', + sapField_Picker_BorderWidth: 'var(--sapField_Picker_BorderWidth)', + sapField_Selector_BorderStyle: 'var(--sapField_Selector_BorderStyle)', + sapField_Selector_ReadOnly_BorderStyle: 'var(--sapField_Selector_ReadOnly_BorderStyle)', + sapField_Selector_InvalidBorderStyle: 'var(--sapField_Selector_InvalidBorderStyle)', + sapField_Selector_WarningBorderStyle: 'var(--sapField_Selector_WarningBorderStyle)', + sapField_Selector_SuccessBorderStyle: 'var(--sapField_Selector_SuccessBorderStyle)', + sapField_Selector_InformationBorderStyle: 'var(--sapField_Selector_InformationBorderStyle)', + sapGroup_TitleBorderWidth: 'var(--sapGroup_TitleBorderWidth)', sapGroup_TitleBackground: 'var(--sapGroup_TitleBackground)', sapGroup_TitleBorderColor: 'var(--sapGroup_TitleBorderColor)', sapGroup_TitleTextColor: 'var(--sapGroup_TitleTextColor)', @@ -558,10 +639,14 @@ export const ThemingParameters = { sapList_FooterTextColor: 'var(--sapList_FooterTextColor)', sapList_TableFooterBorder: 'var(--sapList_TableFooterBorder)', sapList_TableFixedBorderColor: 'var(--sapList_TableFixedBorderColor)', + sapList_TableFixedColumnBorderWidth: 'var(--sapList_TableFixedColumnBorderWidth)', + sapList_TableFixedRowBorderWidth: 'var(--sapList_TableFixedRowBorderWidth)', + sapMessage_BorderWidth: 'var(--sapMessage_BorderWidth)', sapMessage_ErrorBorderColor: 'var(--sapMessage_ErrorBorderColor)', sapMessage_WarningBorderColor: 'var(--sapMessage_WarningBorderColor)', sapMessage_SuccessBorderColor: 'var(--sapMessage_SuccessBorderColor)', sapMessage_InformationBorderColor: 'var(--sapMessage_InformationBorderColor)', + sapMessage_Button_Hover_Background: 'var(--sapMessage_Button_Hover_Background)', sapPopover_BorderCornerRadius: 'var(--sapPopover_BorderCornerRadius)', sapProgress_Background: 'var(--sapProgress_Background)', sapProgress_BorderColor: 'var(--sapProgress_BorderColor)', @@ -604,6 +689,7 @@ export const ThemingParameters = { sapSlider_BorderColor: 'var(--sapSlider_BorderColor)', sapSlider_Selected_Background: 'var(--sapSlider_Selected_Background)', sapSlider_Selected_BorderColor: 'var(--sapSlider_Selected_BorderColor)', + sapSlider_Selected_Dimension: 'var(--sapSlider_Selected_Dimension)', sapSlider_HandleBackground: 'var(--sapSlider_HandleBackground)', sapSlider_HandleBorderColor: 'var(--sapSlider_HandleBorderColor)', sapSlider_RangeHandleBackground: 'var(--sapSlider_RangeHandleBackground)', @@ -633,6 +719,33 @@ export const ThemingParameters = { sapObjectHeader_Title_FontFamily: 'var(--sapObjectHeader_Title_FontFamily)', sapObjectHeader_Subtitle_TextColor: 'var(--sapObjectHeader_Subtitle_TextColor)', sapBlockLayer_Background: 'var(--sapBlockLayer_Background)', + sapBlockLayer_Opacity: 'var(--sapBlockLayer_Opacity)', + sapTab_TextColor: 'var(--sapTab_TextColor)', + sapTab_ForegroundColor: 'var(--sapTab_ForegroundColor)', + sapTab_IconColor: 'var(--sapTab_IconColor)', + sapTab_Background: 'var(--sapTab_Background)', + sapTab_Selected_TextColor: 'var(--sapTab_Selected_TextColor)', + sapTab_Selected_IconColor: 'var(--sapTab_Selected_IconColor)', + sapTab_Selected_Background: 'var(--sapTab_Selected_Background)', + sapTab_Selected_Indicator_Dimension: 'var(--sapTab_Selected_Indicator_Dimension)', + sapTab_Positive_TextColor: 'var(--sapTab_Positive_TextColor)', + sapTab_Positive_ForegroundColor: 'var(--sapTab_Positive_ForegroundColor)', + sapTab_Positive_IconColor: 'var(--sapTab_Positive_IconColor)', + sapTab_Positive_Selected_TextColor: 'var(--sapTab_Positive_Selected_TextColor)', + sapTab_Positive_Selected_IconColor: 'var(--sapTab_Positive_Selected_IconColor)', + sapTab_Positive_Selected_Background: 'var(--sapTab_Positive_Selected_Background)', + sapTab_Negative_TextColor: 'var(--sapTab_Negative_TextColor)', + sapTab_Negative_ForegroundColor: 'var(--sapTab_Negative_ForegroundColor)', + sapTab_Negative_IconColor: 'var(--sapTab_Negative_IconColor)', + sapTab_Negative_Selected_TextColor: 'var(--sapTab_Negative_Selected_TextColor)', + sapTab_Negative_Selected_IconColor: 'var(--sapTab_Negative_Selected_IconColor)', + sapTab_Negative_Selected_Background: 'var(--sapTab_Negative_Selected_Background)', + sapTab_Critical_TextColor: 'var(--sapTab_Critical_TextColor)', + sapTab_Critical_ForegroundColor: 'var(--sapTab_Critical_ForegroundColor)', + sapTab_Critical_IconColor: 'var(--sapTab_Critical_IconColor)', + sapTab_Critical_Selected_TextColor: 'var(--sapTab_Critical_Selected_TextColor)', + sapTab_Critical_Selected_IconColor: 'var(--sapTab_Critical_Selected_IconColor)', + sapTab_Critical_Selected_Background: 'var(--sapTab_Critical_Selected_Background)', sapTile_Background: 'var(--sapTile_Background)', sapTile_Hover_Background: 'var(--sapTile_Hover_Background)', sapTile_Active_Background: 'var(--sapTile_Active_Background)', @@ -645,6 +758,8 @@ export const ThemingParameters = { sapTile_Interactive_BorderColor: 'var(--sapTile_Interactive_BorderColor)', sapTile_OverlayBackground: 'var(--sapTile_OverlayBackground)', sapTile_OverlayForegroundColor: 'var(--sapTile_OverlayForegroundColor)', + sapTile_Hover_ContentBackground: 'var(--sapTile_Hover_ContentBackground)', + sapTile_Active_ContentBackground: 'var(--sapTile_Active_ContentBackground)', sapAccentColor1: 'var(--sapAccentColor1)', sapAccentColor2: 'var(--sapAccentColor2)', sapAccentColor3: 'var(--sapAccentColor3)', @@ -677,6 +792,8 @@ export const ThemingParameters = { sapIndicationColor_1_Selected_BorderColor: 'var(--sapIndicationColor_1_Selected_BorderColor)', sapIndicationColor_1_Selected_TextColor: 'var(--sapIndicationColor_1_Selected_TextColor)', sapIndicationColor_1b: 'var(--sapIndicationColor_1b)', + sapIndicationColor_1b_TextColor: 'var(--sapIndicationColor_1b_TextColor)', + sapIndicationColor_1b_Background: 'var(--sapIndicationColor_1b_Background)', sapIndicationColor_1b_BorderColor: 'var(--sapIndicationColor_1b_BorderColor)', sapIndicationColor_1b_Hover_Background: 'var(--sapIndicationColor_1b_Hover_Background)', sapIndicationColor_2: 'var(--sapIndicationColor_2)', @@ -691,6 +808,8 @@ export const ThemingParameters = { sapIndicationColor_2_Selected_BorderColor: 'var(--sapIndicationColor_2_Selected_BorderColor)', sapIndicationColor_2_Selected_TextColor: 'var(--sapIndicationColor_2_Selected_TextColor)', sapIndicationColor_2b: 'var(--sapIndicationColor_2b)', + sapIndicationColor_2b_TextColor: 'var(--sapIndicationColor_2b_TextColor)', + sapIndicationColor_2b_Background: 'var(--sapIndicationColor_2b_Background)', sapIndicationColor_2b_BorderColor: 'var(--sapIndicationColor_2b_BorderColor)', sapIndicationColor_2b_Hover_Background: 'var(--sapIndicationColor_2b_Hover_Background)', sapIndicationColor_3: 'var(--sapIndicationColor_3)', @@ -705,6 +824,8 @@ export const ThemingParameters = { sapIndicationColor_3_Selected_BorderColor: 'var(--sapIndicationColor_3_Selected_BorderColor)', sapIndicationColor_3_Selected_TextColor: 'var(--sapIndicationColor_3_Selected_TextColor)', sapIndicationColor_3b: 'var(--sapIndicationColor_3b)', + sapIndicationColor_3b_TextColor: 'var(--sapIndicationColor_3b_TextColor)', + sapIndicationColor_3b_Background: 'var(--sapIndicationColor_3b_Background)', sapIndicationColor_3b_BorderColor: 'var(--sapIndicationColor_3b_BorderColor)', sapIndicationColor_3b_Hover_Background: 'var(--sapIndicationColor_3b_Hover_Background)', sapIndicationColor_4: 'var(--sapIndicationColor_4)', @@ -719,6 +840,8 @@ export const ThemingParameters = { sapIndicationColor_4_Selected_BorderColor: 'var(--sapIndicationColor_4_Selected_BorderColor)', sapIndicationColor_4_Selected_TextColor: 'var(--sapIndicationColor_4_Selected_TextColor)', sapIndicationColor_4b: 'var(--sapIndicationColor_4b)', + sapIndicationColor_4b_TextColor: 'var(--sapIndicationColor_4b_TextColor)', + sapIndicationColor_4b_Background: 'var(--sapIndicationColor_4b_Background)', sapIndicationColor_4b_BorderColor: 'var(--sapIndicationColor_4b_BorderColor)', sapIndicationColor_4b_Hover_Background: 'var(--sapIndicationColor_4b_Hover_Background)', sapIndicationColor_5: 'var(--sapIndicationColor_5)', @@ -733,6 +856,8 @@ export const ThemingParameters = { sapIndicationColor_5_Selected_BorderColor: 'var(--sapIndicationColor_5_Selected_BorderColor)', sapIndicationColor_5_Selected_TextColor: 'var(--sapIndicationColor_5_Selected_TextColor)', sapIndicationColor_5b: 'var(--sapIndicationColor_5b)', + sapIndicationColor_5b_TextColor: 'var(--sapIndicationColor_5b_TextColor)', + sapIndicationColor_5b_Background: 'var(--sapIndicationColor_5b_Background)', sapIndicationColor_5b_BorderColor: 'var(--sapIndicationColor_5b_BorderColor)', sapIndicationColor_5b_Hover_Background: 'var(--sapIndicationColor_5b_Hover_Background)', sapIndicationColor_6: 'var(--sapIndicationColor_6)', @@ -747,6 +872,8 @@ export const ThemingParameters = { sapIndicationColor_6_Selected_BorderColor: 'var(--sapIndicationColor_6_Selected_BorderColor)', sapIndicationColor_6_Selected_TextColor: 'var(--sapIndicationColor_6_Selected_TextColor)', sapIndicationColor_6b: 'var(--sapIndicationColor_6b)', + sapIndicationColor_6b_TextColor: 'var(--sapIndicationColor_6b_TextColor)', + sapIndicationColor_6b_Background: 'var(--sapIndicationColor_6b_Background)', sapIndicationColor_6b_BorderColor: 'var(--sapIndicationColor_6b_BorderColor)', sapIndicationColor_6b_Hover_Background: 'var(--sapIndicationColor_6b_Hover_Background)', sapIndicationColor_7: 'var(--sapIndicationColor_7)', @@ -761,6 +888,8 @@ export const ThemingParameters = { sapIndicationColor_7_Selected_BorderColor: 'var(--sapIndicationColor_7_Selected_BorderColor)', sapIndicationColor_7_Selected_TextColor: 'var(--sapIndicationColor_7_Selected_TextColor)', sapIndicationColor_7b: 'var(--sapIndicationColor_7b)', + sapIndicationColor_7b_TextColor: 'var(--sapIndicationColor_7b_TextColor)', + sapIndicationColor_7b_Background: 'var(--sapIndicationColor_7b_Background)', sapIndicationColor_7b_BorderColor: 'var(--sapIndicationColor_7b_BorderColor)', sapIndicationColor_7b_Hover_Background: 'var(--sapIndicationColor_7b_Hover_Background)', sapIndicationColor_8: 'var(--sapIndicationColor_8)', @@ -775,6 +904,8 @@ export const ThemingParameters = { sapIndicationColor_8_Selected_BorderColor: 'var(--sapIndicationColor_8_Selected_BorderColor)', sapIndicationColor_8_Selected_TextColor: 'var(--sapIndicationColor_8_Selected_TextColor)', sapIndicationColor_8b: 'var(--sapIndicationColor_8b)', + sapIndicationColor_8b_TextColor: 'var(--sapIndicationColor_8b_TextColor)', + sapIndicationColor_8b_Background: 'var(--sapIndicationColor_8b_Background)', sapIndicationColor_8b_BorderColor: 'var(--sapIndicationColor_8b_BorderColor)', sapIndicationColor_8b_Hover_Background: 'var(--sapIndicationColor_8b_Hover_Background)', sapIndicationColor_9: 'var(--sapIndicationColor_9)', @@ -789,6 +920,8 @@ export const ThemingParameters = { sapIndicationColor_9_Selected_BorderColor: 'var(--sapIndicationColor_9_Selected_BorderColor)', sapIndicationColor_9_Selected_TextColor: 'var(--sapIndicationColor_9_Selected_TextColor)', sapIndicationColor_9b: 'var(--sapIndicationColor_9b)', + sapIndicationColor_9b_TextColor: 'var(--sapIndicationColor_9b_TextColor)', + sapIndicationColor_9b_Background: 'var(--sapIndicationColor_9b_Background)', sapIndicationColor_9b_BorderColor: 'var(--sapIndicationColor_9b_BorderColor)', sapIndicationColor_9b_Hover_Background: 'var(--sapIndicationColor_9b_Hover_Background)', sapIndicationColor_10: 'var(--sapIndicationColor_10)', @@ -803,6 +936,8 @@ export const ThemingParameters = { sapIndicationColor_10_Selected_BorderColor: 'var(--sapIndicationColor_10_Selected_BorderColor)', sapIndicationColor_10_Selected_TextColor: 'var(--sapIndicationColor_10_Selected_TextColor)', sapIndicationColor_10b: 'var(--sapIndicationColor_10b)', + sapIndicationColor_10b_TextColor: 'var(--sapIndicationColor_10b_TextColor)', + sapIndicationColor_10b_Background: 'var(--sapIndicationColor_10b_Background)', sapIndicationColor_10b_BorderColor: 'var(--sapIndicationColor_10b_BorderColor)', sapIndicationColor_10b_Hover_Background: 'var(--sapIndicationColor_10b_Hover_Background)', sapLegend_WorkingBackground: 'var(--sapLegend_WorkingBackground)', @@ -1382,5 +1517,10 @@ export const ThemingParameters = { sapFontUrl_72Mono_Bold_woff2: 'var(--sapFontUrl_72Mono_Bold_woff2)', sapFontUrl_72Mono_Bold_woff: 'var(--sapFontUrl_72Mono_Bold_woff)', sapFontUrl_72Mono_Bold_full_woff2: 'var(--sapFontUrl_72Mono_Bold_full_woff2)', - sapFontUrl_72Mono_Bold_full_woff: 'var(--sapFontUrl_72Mono_Bold_full_woff)' + sapFontUrl_72Mono_Bold_full_woff: 'var(--sapFontUrl_72Mono_Bold_full_woff)', + sapSapThemeId: 'var(--sapSapThemeId)', + sapBreakpoint_S_Min: 'var(--sapBreakpoint_S_Min)', + sapBreakpoint_M_Min: 'var(--sapBreakpoint_M_Min)', + sapBreakpoint_L_Min: 'var(--sapBreakpoint_L_Min)', + sapBreakpoint_XL_Min: 'var(--sapBreakpoint_XL_Min)' }; diff --git a/scripts/generate-theming-parameters.js b/scripts/generate-theming-parameters.js index 92a6979cc27..a8ad325a3f5 100644 --- a/scripts/generate-theming-parameters.js +++ b/scripts/generate-theming-parameters.js @@ -1,5 +1,5 @@ import { writeFileSync } from 'fs'; -import ThemingParameters from '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/variables.json' assert { type: 'json' }; +import ThemingParameters from '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/variables.json' with { type: 'json' }; import PATHS from '../config/paths.js'; import path from 'path'; import prettier from 'prettier'; From 74ae9d0fdfb30ad15be5a5e4937232bab5de2b27 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 16 Jan 2025 11:44:43 +0100 Subject: [PATCH 2/2] Update ThemeableThemingParameters.tsx --- docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx b/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx index feaf0ce9844..2249330841c 100644 --- a/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx +++ b/docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx @@ -28,7 +28,13 @@ const OTHERS = Object.entries(ThemingParameters).filter(([key, value]) => { COLORS.push([key, value]); return false; } - if (key.includes('Space')) { + if ( + key.includes('Space') || + key.includes('Margin') || + key.includes('Padding') || + key.includes('Gap') || + key.includes('Breakpoint') + ) { SPACING.push([key, value]); return false; }