diff --git a/config/jest.config.js b/config/jest.config.js
index c8f73ef9321..6d209225af5 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
coverageReporters: ['lcov', 'text'],
collectCoverage: false,
collectCoverageFrom: [
- 'packages/**/*.{ts,tsx}',
+ 'packages/{base,charts,main}/src/**/*.{ts,tsx}',
'!**/src/lib/*',
'!**/src/interfaces/*',
'!**/src/enums/*',
@@ -14,11 +14,12 @@ module.exports = {
'!**/*.jss.ts',
'!**/node_modules/**',
'!packages/*/src/index.ts',
- '!packages/*/index.ts',
- '!packages/cra-template/**/*',
'!packages/**/demo/*',
'!packages/base/src/polyfill/*', // no polyfills
- '!packages/main/src/components/AnalyticalTable/types/*' // no table enums
+ '!packages/main/src/components/AnalyticalTable/types/*', // no table enums
+ '!packages/base/src/styling/sap_fiori_3.ts', // no old theming parameters
+ '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
+ '!packages/base/src/styling/font72.ts' // no deprecated font
],
setupFiles: ['jest-canvas-mock'],
setupFilesAfterEnv: ['./config/jestsetup.ts'],
diff --git a/docs/styling/MyCustomElement.jsx b/docs/styling/MyCustomElement.jsx
index bc3b39b25c9..ed18acc9319 100644
--- a/docs/styling/MyCustomElement.jsx
+++ b/docs/styling/MyCustomElement.jsx
@@ -3,16 +3,16 @@ import { createUseStyles } from 'react-jss';
const styles = ({ parameters }) => ({
container: {
- backgroundColor: parameters.sapUiGlobalBackgroundColor,
- fontFamily: parameters.sapUiFontFamily,
+ backgroundColor: parameters.sapBackgroundColor,
+ fontFamily: parameters.sapFontFamily,
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
text: {
- color: parameters.sapUiNegativeText,
- fontSize: parameters.sapUiFontLargeSize
+ color: parameters.sapNegativeTextColor,
+ fontSize: parameters.sapFontLargeSize
}
});
diff --git a/docs/styling/MyCustomElement.tsx b/docs/styling/MyCustomElement.tsx
index 68be39d17d4..12c6979071c 100644
--- a/docs/styling/MyCustomElement.tsx
+++ b/docs/styling/MyCustomElement.tsx
@@ -1,19 +1,19 @@
-import { JSSTheme } from '@ui5/webcomponents-react/src/interfaces/JSSTheme';
+import { JSSTheme } from '@ui5/webcomponents-react/interfaces/JSSTheme';
import React from 'react';
import { createUseStyles } from 'react-jss';
const styles = ({ parameters }: JSSTheme) => ({
container: {
- backgroundColor: parameters.sapUiGlobalBackgroundColor,
- fontFamily: parameters.sapUiFontFamily,
+ backgroundColor: parameters.sapBackgroundColor,
+ fontFamily: parameters.sapFontFamily,
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
text: {
- color: parameters.sapUiNegativeText,
- fontSize: parameters.sapUiFontLargeSize
+ color: parameters.sapNegativeTextColor,
+ fontSize: parameters.sapFontLargeSize
}
});
diff --git a/docs/welcome/Styling.stories.mdx b/docs/welcome/Styling.stories.mdx
index 596ed9c31e2..1f0d5d84fcc 100644
--- a/docs/welcome/Styling.stories.mdx
+++ b/docs/welcome/Styling.stories.mdx
@@ -14,7 +14,7 @@ Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into
If you want to change e.g. the color of all texts, you can do that by creating another `style` element with the following content:
```html
```
As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in `limegreen` instead of `#32363a` which would be the default value for Fiori 3.
@@ -46,16 +46,16 @@ import { createUseStyles } from 'react-jss';
const styles = ({ parameters }) => ({
container: {
- backgroundColor: parameters.sapUiGlobalBackgroundColor,
- fontFamily: parameters.sapUiFontFamily,
+ backgroundColor: parameters.sapBackgroundColor,
+ fontFamily: parameters.sapFontFamily,
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
text: {
- color: parameters.sapUiNegativeText,
- fontSize: parameters.sapUiFontLargeSize
+ color: parameters.sapNegativeTextColor,
+ fontSize: parameters.sapFontLargeSize
}
})
diff --git a/packages/base/scripts/cssVariables/parse.js b/packages/base/scripts/cssVariables/parse.js
index c7c83dc1f11..a998fdb0d7f 100644
--- a/packages/base/scripts/cssVariables/parse.js
+++ b/packages/base/scripts/cssVariables/parse.js
@@ -1,17 +1,13 @@
const { writeFileSync } = require('fs');
-const {
- _: Fiori3ThemingVariables
-} = require('@ui5/webcomponents/dist/assets/themes/sap_fiori_3/parameters-bundle.css.json');
+const { root } = require('./themeDesignerVariables');
const PATHS = require('../../../../config/paths');
const path = require('path');
-const variables = Fiori3ThemingVariables.replace(':root{', '')
- .replace(/}$/, '')
- .split(';')
- .filter((variable) => !/^--_?ui5/.test(variable))
- .map((value) => value.split(':')[0]);
+const variables = Object.keys(root);
-let fileContent = `/*
+let fileContent = `/* eslint-disable camelcase */
+
+/*
* ### WARNING ###
* This is an autogenerated file, do not change manually.
* In order to recreate this file, please run 'node packages/base/scripts/cssVariables/parse.js'
@@ -19,8 +15,10 @@ let fileContent = `/*
`;
+fileContent += 'export const ThemingParameters = {\n';
for (const variable of variables) {
- fileContent += `export const ${variable.replace('--', '')} = 'var(${variable})';\n`;
+ fileContent += ` '${variable}': 'var(--${variable})',\n`;
}
+fileContent += '}\n';
-writeFileSync(path.join(PATHS.packages, 'base', 'src', 'styling', 'sap_fiori_3.ts'), fileContent);
+writeFileSync(path.join(PATHS.packages, 'base', 'src', 'styling', 'ThemingParameters.ts'), fileContent);
diff --git a/packages/base/scripts/cssVariables/themeDesignerVariables.json b/packages/base/scripts/cssVariables/themeDesignerVariables.json
new file mode 100644
index 00000000000..5122c1c03b0
--- /dev/null
+++ b/packages/base/scripts/cssVariables/themeDesignerVariables.json
@@ -0,0 +1,336 @@
+{
+ "root": {
+ "sapBrandColor": "#0a6ed1",
+ "sapHighlightColor": "#0854a0",
+ "sapBaseColor": "#fff",
+ "sapShellColor": "#354a5f",
+ "sapBackgroundColor": "#f7f7f7",
+ "sapFontFamily": "\"72\", \"72full\", Arial, Helvetica, sans-serif",
+ "sapFontHeaderFamily": "\"72\", \"72full\", Arial, Helvetica, sans-serif",
+ "sapFontSize": ".875rem",
+ "sapFontSmallSize": ".75rem",
+ "sapFontLargeSize": "1rem",
+ "sapFontHeader1Size": "2.25rem",
+ "sapFontHeader2Size": "1.5rem",
+ "sapFontHeader3Size": "1.25rem",
+ "sapFontHeader4Size": "1.125rem",
+ "sapFontHeader5Size": "1rem",
+ "sapFontHeader6Size": ".875rem",
+ "sapTextColor": "#32363a",
+ "sapLinkColor": "#0a6ed1",
+ "sapLink_Hover_Color": "#0854a0",
+ "sapLink_Active_Color": "#0a6ed1",
+ "sapLink_Visited_Color": "#0a6ed1",
+ "sapLink_InvertedColor": "#d3e8fd",
+ "sapCompanyLogo": "none",
+ "sapBackgroundImage": "none",
+ "sapBackgroundImageOpacity": "1.0",
+ "sapBackgroundImageRepeat": "false",
+ "sapSelectedColor": "#0854a0",
+ "sapActiveColor": "#0854a0",
+ "sapHighlightTextColor": "#fff",
+ "sapTitleColor": "#32363a",
+ "sapNegativeColor": "#bb0000",
+ "sapCriticalColor": "#e9730c",
+ "sapPositiveColor": "#107e3e",
+ "sapInformativeColor": "#0a6ed1",
+ "sapNeutralColor": "#6a6d70",
+ "sapNegativeElementColor": "#bb0000",
+ "sapCriticalElementColor": "#e9730c",
+ "sapPositiveElementColor": "#107e3e",
+ "sapInformativeElementColor": "#0a6ed1",
+ "sapNeutralElementColor": "#6a6d70",
+ "sapNegativeTextColor": "#bb0000",
+ "sapPositiveTextColor": "#107e3e",
+ "sapCriticalTextColor": "#e9730c",
+ "sapInformativeTextColor": "#053b70",
+ "sapNeutralTextColor": "#6a6d70",
+ "sapNeutralBorderColor": "#6a6d70",
+ "sapErrorColor": "#bb0000",
+ "sapErrorBorderColor": "#bb0000",
+ "sapWarningColor": "#e9730c",
+ "sapWarningBorderColor": "#e9730c",
+ "sapSuccessColor": "#107e3e",
+ "sapSuccessBorderColor": "#107e3e",
+ "sapInformationColor": "#0a6ed1",
+ "sapInformationBorderColor": "#0a6ed1",
+ "sapErrorBackground": "#ffebeb",
+ "sapWarningBackground": "#fef7f1",
+ "sapSuccessBackground": "#f1fdf6",
+ "sapInformationBackground": "#f5faff",
+ "sapNeutralBackground": "#f4f4f4",
+ "sapIndicationColor_1": "#880000",
+ "sapIndicationColor_2": "#bb0000",
+ "sapIndicationColor_3": "#e9730c",
+ "sapIndicationColor_4": "#107e3e",
+ "sapIndicationColor_5": "#0a6ed1",
+ "sapElement_LineHeight": "2.75rem",
+ "sapElement_Height": "2.25rem",
+ "sapElement_BorderWidth": ".0625rem",
+ "sapElement_BorderCornerRadius": ".25rem",
+ "sapElement_Compact_LineHeight": "2rem",
+ "sapElement_Compact_Height": "1.625rem",
+ "sapElement_Condensed_LineHeight": "1.5rem",
+ "sapElement_Condensed_Height": "1.375rem",
+ "sapContent_LineHeight": "1.4",
+ "sapContent_IconHeight": "1rem",
+ "sapContent_IconColor": "#0854a0",
+ "sapContent_ContrastIconColor": "#fff",
+ "sapContent_NonInteractiveIconColor": "#6a6d70",
+ "sapContent_MarkerIconColor": "#286eb4",
+ "sapContent_MarkerTextColor": "#0f828f",
+ "sapContent_ImagePlaceholderBackground": "#ccc",
+ "sapContent_ImagePlaceholderForegroundColor": "#fff",
+ "sapContent_RatedColor": "#d08014",
+ "sapContent_UnratedColor": "#89919a",
+ "sapContent_FocusColor": "#000",
+ "sapContent_FocusStyle": "dotted",
+ "sapContent_FocusWidth": ".0625rem",
+ "sapContent_ContrastFocusColor": "#fff",
+ "sapContent_ShadowColor": "#000",
+ "sapContent_ContrastShadowColor": "#fff",
+ "sapContent_Shadow0": "0 0 0 0.0625rem rgba(0,0,0,0.1), 0 0.125rem 0.5rem 0 rgba(0,0,0,0.1)",
+ "sapContent_Shadow1": "0 0 0 0.0625rem rgba(0,0,0,0.15), 0 0.125rem 0.5rem 0 rgba(0,0,0,0.3)",
+ "sapContent_Shadow2": "0 0 0 0.0625rem rgba(0,0,0,0.15), 0 0.625rem 1.875rem 0 rgba(0,0,0,0.3)",
+ "sapContent_Shadow3": "0 0 0 0.0625rem rgba(0,0,0,0.15), 0 1.25rem 5rem 0 rgba(0,0,0,0.3)",
+ "sapContent_TextShadow": "0 0 0.125rem #fff",
+ "sapContent_HeaderShadow": "0 0 0.25rem 0 rgba(0,0,0,0.15), inset 0 -0.0625rem 0 0 #d9d9d9",
+ "sapContent_SearchHighlightColor": "#d4f7db",
+ "sapContent_HelpColor": "#3f8600",
+ "sapContent_LabelColor": "#6a6d70",
+ "sapContent_MonospaceFontFamily": "lucida console, monospace",
+ "sapContent_DisabledTextColor": "rgba(50,54,58,0.6)",
+ "sapContent_DisabledOpacity": "0.4",
+ "sapContent_ContrastTextThreshold": "0.65",
+ "sapContent_ContrastTextColor": "#fff",
+ "sapContent_ForegroundColor": "#efefef",
+ "sapContent_ForegroundBorderColor": "#89919a",
+ "sapContent_ForegroundTextColor": "#32363a",
+ "sapContent_BadgeBackground": "#d04343",
+ "sapContent_DragAndDropActiveColor": "#0854a0",
+ "sapShell_Background": "#edeff0",
+ "sapShell_BackgroundImage": "linear-gradient(to bottom, #dfe3e4, #f3f4f5)",
+ "sapShell_BackgroundGradient": "linear-gradient(to bottom, #dfe3e4, #f3f4f5)",
+ "sapShell_BackgroundImageOpacity": "1.0",
+ "sapShell_BackgroundImageRepeat": "false",
+ "sapShell_BorderColor": "#354a5f",
+ "sapShell_TextColor": "#fff",
+ "sapShell_InteractiveTextColor": "#d1e8ff",
+ "sapShell_InteractiveBorderColor": "#7996b4",
+ "sapShell_GroupTitleTextColor": "#32363a",
+ "sapShell_Hover_Background": "#283848",
+ "sapShell_Active_Background": "#23303e",
+ "sapShell_Active_TextColor": "#fff",
+ "sapShell_Selected_Background": "#23303e",
+ "sapShell_Selected_TextColor": "#fff",
+ "sapShell_Selected_Hover_Background": "#23303e",
+ "sapShell_Favicon": "none",
+ "sapShell_Navigation_Background": "#fff",
+ "sapShell_Navigation_SelectedColor": "#0854a0",
+ "sapShell_Navigation_Selected_TextColor": "#0854a0",
+ "sapShell_Navigation_TextColor": "#32363a",
+ "sapShell_Shadow": "0 0 0.25rem 0 rgba(0,0,0,0.15), inset 0 -0.0625rem 0 0 rgba(0,0,0,0.15)",
+ "sapButton_BorderWidth": ".0625rem",
+ "sapButton_BorderCornerRadius": ".25rem",
+ "sapButton_Background": "#fff",
+ "sapButton_BorderColor": "#0854a0",
+ "sapButton_TextColor": "#0854a0",
+ "sapButton_Hover_Background": "#ebf5fe",
+ "sapButton_Hover_BorderColor": "#0854a0",
+ "sapButton_Hover_TextColor": "#0854a0",
+ "sapButton_IconColor": "#0854a0",
+ "sapButton_Active_Background": "#0854a0",
+ "sapButton_Active_BorderColor": "#0854a0",
+ "sapButton_Active_TextColor": "#fff",
+ "sapButton_Emphasized_Background": "#0a6ed1",
+ "sapButton_Emphasized_BorderColor": "#0a6ed1",
+ "sapButton_Emphasized_TextColor": "#fff",
+ "sapButton_Emphasized_Hover_Background": "#085caf",
+ "sapButton_Emphasized_Hover_BorderColor": "#085caf",
+ "sapButton_Emphasized_Hover_TextColor": "#fff",
+ "sapButton_Emphasized_Active_Background": "#0854a0",
+ "sapButton_Emphasized_Active_BorderColor": "#0854a0",
+ "sapButton_Emphasized_TextShadow": "transparent",
+ "sapButton_Accept_Background": "#fff",
+ "sapButton_Accept_BorderColor": "#107e3e",
+ "sapButton_Accept_Hover_Background": "#f1fdf6",
+ "sapButton_Accept_Hover_BorderColor": "#107e3e",
+ "sapButton_Accept_Hover_TextColor": "#107e3e",
+ "sapButton_Accept_Active_Background": "#0d6733",
+ "sapButton_Accept_Active_BorderColor": "#0d6733",
+ "sapButton_Accept_TextColor": "#107e3e",
+ "sapButton_Reject_Background": "#fff",
+ "sapButton_Reject_BorderColor": "#bb0000",
+ "sapButton_Reject_Hover_Background": "#ffebeb",
+ "sapButton_Reject_Hover_BorderColor": "#bb0000",
+ "sapButton_Reject_Hover_TextColor": "#b00",
+ "sapButton_Reject_Active_Background": "#a20000",
+ "sapButton_Reject_Active_BorderColor": "#a20000",
+ "sapButton_Reject_TextColor": "#b00",
+ "sapButton_Lite_Background": "transparent",
+ "sapButton_Lite_BorderColor": "transparent",
+ "sapButton_Lite_TextColor": "#0854a0",
+ "sapButton_Lite_Hover_Background": "#ebf5fe",
+ "sapButton_Lite_Hover_BorderColor": "#0854a0",
+ "sapButton_Lite_Hover_TextColor": "#0854a0",
+ "sapButton_Lite_Active_Background": "#0854a0",
+ "sapButton_Lite_Active_BorderColor": "#0854a0",
+ "sapButton_Selected_Background": "#0854a0",
+ "sapButton_Selected_BorderColor": "#0854a0",
+ "sapButton_Selected_TextColor": "#fff",
+ "sapButton_Selected_Hover_Background": "#095caf",
+ "sapButton_Selected_Hover_BorderColor": "#095caf",
+ "sapField_Background": "#fff",
+ "sapField_TextColor": "#32363a",
+ "sapField_PlaceholderTextColor": "#74777a",
+ "sapField_BorderColor": "#89919a",
+ "sapField_HelpBackground": "#fff",
+ "sapField_BorderWidth": ".0625rem",
+ "sapField_BorderCornerRadius": ".125rem",
+ "sapField_Hover_Background": "#fff",
+ "sapField_Hover_BorderColor": "#0854a0",
+ "sapField_Hover_HelpBackground": "#ebf5fe",
+ "sapField_Active_BorderColor": "#0854a0",
+ "sapField_Focus_Background": "#fff",
+ "sapField_Focus_BorderColor": "#89919a",
+ "sapField_Focus_HelpBackground": "#fff",
+ "sapField_ReadOnly_Background": "rgba(242,242,242,0.5)",
+ "sapField_ReadOnly_BorderColor": "#89919a",
+ "sapField_ReadOnly_HelpBackground": "rgba(242,242,242,0.5)",
+ "sapField_RequiredColor": "#ce3b3b",
+ "sapField_InvalidColor": "#bb0000",
+ "sapField_InvalidBackground": "#fff",
+ "sapField_WarningColor": "#e9730c",
+ "sapField_WarningBackground": "#fff",
+ "sapField_SuccessColor": "#107e3e",
+ "sapField_SuccessBackground": "#fff",
+ "sapField_InformationColor": "#0a6ed1",
+ "sapField_InformationBackground": "#fff",
+ "sapGroup_TitleBackground": "transparent",
+ "sapGroup_TitleBorderColor": "#d9d9d9",
+ "sapGroup_TitleTextColor": "#32363a",
+ "sapGroup_ContentBackground": "#fff",
+ "sapGroup_ContentBorderColor": "#d9d9d9",
+ "sapGroup_BorderWidth": ".0625rem",
+ "sapGroup_BorderCornerRadius": "0",
+ "sapGroup_FooterBackground": "transparent",
+ "sapToolbar_Background": "transparent",
+ "sapToolbar_SeparatorColor": "#d9d9d9",
+ "sapList_HeaderBackground": "#f2f2f2",
+ "sapList_HeaderBorderColor": "#e4e4e4",
+ "sapList_HeaderTextColor": "#32363a",
+ "sapList_BorderColor": "#e4e4e4",
+ "sapList_TextColor": "#32363a",
+ "sapList_Active_TextColor": "#fff",
+ "sapList_BorderWidth": ".0625rem",
+ "sapList_Active_Background": "#0854a0",
+ "sapList_SelectionBackgroundColor": "#e5f0fa",
+ "sapList_SelectionBorderColor": "#0854a0",
+ "sapList_Hover_SelectionBackground": "#d8e9f8",
+ "sapList_Background": "#fff",
+ "sapList_Hover_Background": "#f5f5f5",
+ "sapList_GroupHeaderBackground": "#fff",
+ "sapList_GroupHeaderBorderColor": "#d8d8d8",
+ "sapList_GroupHeaderTextColor": "#32363a",
+ "sapList_FooterBackground": "#fafafa",
+ "sapList_FooterTextColor": "#32363a",
+ "sapList_TableGroupHeaderBackground": "#efefef",
+ "sapList_TableGroupHeaderBorderColor": "#d8d8d8",
+ "sapList_TableGroupHeaderTextColor": "#32363a",
+ "sapList_TableFooterBorder": "#d8d8d8",
+ "sapList_TableFixedBorderColor": "#d8d8d8",
+ "sapScrollBar_FaceColor": "#949494",
+ "sapScrollBar_TrackColor": "#fff",
+ "sapScrollBar_BorderColor": "#949494",
+ "sapScrollBar_SymbolColor": "#0854a0",
+ "sapScrollBar_Dimension": ".75rem",
+ "sapScrollBar_Hover_FaceColor": "#8c8c8c",
+ "sapPageHeader_Background": "#fff",
+ "sapPageHeader_BorderColor": "#d9d9d9",
+ "sapPageHeader_TextColor": "#32363a",
+ "sapPageFooter_Background": "#fff",
+ "sapPageFooter_BorderColor": "#d9d9d9",
+ "sapPageFooter_TextColor": "#32363a",
+ "sapInfobar_Background": "#0f828f",
+ "sapInfobar_Hover_Background": "#0e7581",
+ "sapInfobar_Active_Background": "#0a545c",
+ "sapObjectHeader_Background": "#fff",
+ "sapObjectHeader_BorderColor": "#d9d9d9",
+ "sapBlockLayer_Background": "#000",
+ "sapTile_Background": "#fff",
+ "sapTile_Hover_Background": "#f5f5f5",
+ "sapTile_Active_Background": "#f5f5f5",
+ "sapTile_BorderColor": "transparent",
+ "sapTile_TitleTextColor": "#32363a",
+ "sapTile_TextColor": "#6a6d70",
+ "sapTile_IconColor": "#5a7da0",
+ "sapAccentColor1": "#d08014",
+ "sapAccentColor2": "#d04343",
+ "sapAccentColor3": "#db1f77",
+ "sapAccentColor4": "#c0399f",
+ "sapAccentColor5": "#6367de",
+ "sapAccentColor6": "#286eb4",
+ "sapAccentColor7": "#0f828f",
+ "sapAccentColor8": "#7ca10c",
+ "sapAccentColor9": "#925ace",
+ "sapAccentColor10": "#647987",
+ "sapLegendColor1": "#d58215",
+ "sapLegendColor2": "#dc5b5b",
+ "sapLegendColor3": "#db1f77",
+ "sapLegendColor4": "#9b3b3b",
+ "sapLegendColor5": "#cf5db3",
+ "sapLegendColor6": "#478fd6",
+ "sapLegendColor7": "#1193a2",
+ "sapLegendColor8": "#8b9668",
+ "sapLegendColor9": "#6c8298",
+ "sapLegendColor10": "#892971",
+ "sapLegendColor11": "#725a3a",
+ "sapLegendColor12": "#bb2f2f",
+ "sapLegendColor13": "#bc1b66",
+ "sapLegendColor14": "#8b714f",
+ "sapLegendColor15": "#606190",
+ "sapLegendColor16": "#597da1",
+ "sapLegendColor17": "#49797e",
+ "sapLegendColor18": "#687a33",
+ "sapLegendColor19": "#295989",
+ "sapLegendColor20": "#5154bd",
+ "sapChart_OrderedColor_1": "#5899da",
+ "sapChart_OrderedColor_2": "#e8743b",
+ "sapChart_OrderedColor_3": "#19a979",
+ "sapChart_OrderedColor_4": "#ed4a7b",
+ "sapChart_OrderedColor_5": "#945ecf",
+ "sapChart_OrderedColor_6": "#13a4b4",
+ "sapChart_OrderedColor_7": "#525df4",
+ "sapChart_OrderedColor_8": "#bf399e",
+ "sapChart_OrderedColor_9": "#6c8893",
+ "sapChart_OrderedColor_10": "#ee6868",
+ "sapChart_OrderedColor_11": "#2f6497",
+ "sapChart_Bad": "#dc0d0e",
+ "sapChart_Critical": "#de890d",
+ "sapChart_Good": "#3fa45b",
+ "sapChart_Neutral": "#848f94",
+ "sapChart_Sequence_1": "#5899da",
+ "sapChart_Sequence_2": "#e8743b",
+ "sapChart_Sequence_3": "#19a979",
+ "sapChart_Sequence_4": "#ed4a7b",
+ "sapChart_Sequence_5": "#945ecf",
+ "sapChart_Sequence_6": "#13a4b4",
+ "sapChart_Sequence_7": "#525df4",
+ "sapChart_Sequence_8": "#bf399e",
+ "sapChart_Sequence_9": "#6c8893",
+ "sapChart_Sequence_10": "#ee6868",
+ "sapChart_Sequence_11": "#2f6497",
+ "sapChart_Sequence_Neutral": "#848f94",
+ "sapFontUrl_SAP-icons_ttf": "url('../../../Base/baseLib/sap_fiori_3/fonts/SAP-icons.ttf')",
+ "sapFontUrl_SAP-icons_woff": "url('../../../Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')",
+ "sapFontUrl_SAP-icons_woff2": "url('../../../Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')",
+ "sapFontUrl_72_Regular_woff2": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Regular.woff2')",
+ "sapFontUrl_72_Regular_woff": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Regular.woff')",
+ "sapFontUrl_72_Bold_woff2": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Bold.woff2')",
+ "sapFontUrl_72_Bold_woff": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Bold.woff')",
+ "sapFontUrl_72_Regular_full_woff2": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')",
+ "sapFontUrl_72_Regular_full_woff": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')",
+ "sapFontUrl_72_Bold_full_woff2": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')",
+ "sapFontUrl_72_Bold_full_woff": "url('../../../Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')"
+ }
+}
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
index 50157ac87c5..5dd3609dc95 100644
--- a/packages/base/src/index.ts
+++ b/packages/base/src/index.ts
@@ -11,6 +11,7 @@ import { HSLColor } from './lib/HSLColor';
import { LOG_LEVEL, Logger } from './lib/Logger';
import { Optional } from './lib/Optional';
import * as sap_fiori_3 from './lib/sap_fiori_3';
+import { ThemingParameters } from './lib/ThemingParameters';
import * as spacing from './lib/spacing';
import { StyleClassHelper } from './lib/StyleClassHelper';
import { useConsolidatedRef } from './lib/useConsolidatedRef';
@@ -36,5 +37,6 @@ export {
usePassThroughHtmlProps,
CssSizeVariablesNames,
CssSizeVariables,
- cssVariablesStyles
+ cssVariablesStyles,
+ ThemingParameters
};
diff --git a/packages/base/src/lib/ThemingParameters.ts b/packages/base/src/lib/ThemingParameters.ts
new file mode 100644
index 00000000000..ae2fb40b7f7
--- /dev/null
+++ b/packages/base/src/lib/ThemingParameters.ts
@@ -0,0 +1,3 @@
+import { ThemingParameters } from '../styling/ThemingParameters';
+
+export { ThemingParameters };
diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts
new file mode 100644
index 00000000000..52f67a5ea0d
--- /dev/null
+++ b/packages/base/src/styling/ThemingParameters.ts
@@ -0,0 +1,342 @@
+/* eslint-disable camelcase */
+
+/*
+ * ### WARNING ###
+ * This is an autogenerated file, do not change manually.
+ * In order to recreate this file, please run 'node packages/base/scripts/cssVariables/parse.js'
+ */
+
+export const ThemingParameters = {
+ sapBrandColor: 'var(--sapBrandColor)',
+ sapHighlightColor: 'var(--sapHighlightColor)',
+ sapBaseColor: 'var(--sapBaseColor)',
+ sapShellColor: 'var(--sapShellColor)',
+ sapBackgroundColor: 'var(--sapBackgroundColor)',
+ sapFontFamily: 'var(--sapFontFamily)',
+ sapFontHeaderFamily: 'var(--sapFontHeaderFamily)',
+ sapFontSize: 'var(--sapFontSize)',
+ sapFontSmallSize: 'var(--sapFontSmallSize)',
+ sapFontLargeSize: 'var(--sapFontLargeSize)',
+ sapFontHeader1Size: 'var(--sapFontHeader1Size)',
+ sapFontHeader2Size: 'var(--sapFontHeader2Size)',
+ sapFontHeader3Size: 'var(--sapFontHeader3Size)',
+ sapFontHeader4Size: 'var(--sapFontHeader4Size)',
+ sapFontHeader5Size: 'var(--sapFontHeader5Size)',
+ sapFontHeader6Size: 'var(--sapFontHeader6Size)',
+ sapTextColor: 'var(--sapTextColor)',
+ sapLinkColor: 'var(--sapLinkColor)',
+ sapLink_Hover_Color: 'var(--sapLink_Hover_Color)',
+ sapLink_Active_Color: 'var(--sapLink_Active_Color)',
+ sapLink_Visited_Color: 'var(--sapLink_Visited_Color)',
+ sapLink_InvertedColor: 'var(--sapLink_InvertedColor)',
+ sapCompanyLogo: 'var(--sapCompanyLogo)',
+ sapBackgroundImage: 'var(--sapBackgroundImage)',
+ sapBackgroundImageOpacity: 'var(--sapBackgroundImageOpacity)',
+ sapBackgroundImageRepeat: 'var(--sapBackgroundImageRepeat)',
+ sapSelectedColor: 'var(--sapSelectedColor)',
+ sapActiveColor: 'var(--sapActiveColor)',
+ sapHighlightTextColor: 'var(--sapHighlightTextColor)',
+ sapTitleColor: 'var(--sapTitleColor)',
+ sapNegativeColor: 'var(--sapNegativeColor)',
+ sapCriticalColor: 'var(--sapCriticalColor)',
+ sapPositiveColor: 'var(--sapPositiveColor)',
+ sapInformativeColor: 'var(--sapInformativeColor)',
+ sapNeutralColor: 'var(--sapNeutralColor)',
+ sapNegativeElementColor: 'var(--sapNegativeElementColor)',
+ sapCriticalElementColor: 'var(--sapCriticalElementColor)',
+ sapPositiveElementColor: 'var(--sapPositiveElementColor)',
+ sapInformativeElementColor: 'var(--sapInformativeElementColor)',
+ sapNeutralElementColor: 'var(--sapNeutralElementColor)',
+ sapNegativeTextColor: 'var(--sapNegativeTextColor)',
+ sapPositiveTextColor: 'var(--sapPositiveTextColor)',
+ sapCriticalTextColor: 'var(--sapCriticalTextColor)',
+ sapInformativeTextColor: 'var(--sapInformativeTextColor)',
+ sapNeutralTextColor: 'var(--sapNeutralTextColor)',
+ sapNeutralBorderColor: 'var(--sapNeutralBorderColor)',
+ sapErrorColor: 'var(--sapErrorColor)',
+ sapErrorBorderColor: 'var(--sapErrorBorderColor)',
+ sapWarningColor: 'var(--sapWarningColor)',
+ sapWarningBorderColor: 'var(--sapWarningBorderColor)',
+ sapSuccessColor: 'var(--sapSuccessColor)',
+ sapSuccessBorderColor: 'var(--sapSuccessBorderColor)',
+ sapInformationColor: 'var(--sapInformationColor)',
+ sapInformationBorderColor: 'var(--sapInformationBorderColor)',
+ sapErrorBackground: 'var(--sapErrorBackground)',
+ sapWarningBackground: 'var(--sapWarningBackground)',
+ sapSuccessBackground: 'var(--sapSuccessBackground)',
+ sapInformationBackground: 'var(--sapInformationBackground)',
+ sapNeutralBackground: 'var(--sapNeutralBackground)',
+ sapIndicationColor_1: 'var(--sapIndicationColor_1)',
+ sapIndicationColor_2: 'var(--sapIndicationColor_2)',
+ sapIndicationColor_3: 'var(--sapIndicationColor_3)',
+ sapIndicationColor_4: 'var(--sapIndicationColor_4)',
+ sapIndicationColor_5: 'var(--sapIndicationColor_5)',
+ sapElement_LineHeight: 'var(--sapElement_LineHeight)',
+ sapElement_Height: 'var(--sapElement_Height)',
+ sapElement_BorderWidth: 'var(--sapElement_BorderWidth)',
+ sapElement_BorderCornerRadius: 'var(--sapElement_BorderCornerRadius)',
+ sapElement_Compact_LineHeight: 'var(--sapElement_Compact_LineHeight)',
+ sapElement_Compact_Height: 'var(--sapElement_Compact_Height)',
+ sapElement_Condensed_LineHeight: 'var(--sapElement_Condensed_LineHeight)',
+ sapElement_Condensed_Height: 'var(--sapElement_Condensed_Height)',
+ sapContent_LineHeight: 'var(--sapContent_LineHeight)',
+ sapContent_IconHeight: 'var(--sapContent_IconHeight)',
+ sapContent_IconColor: 'var(--sapContent_IconColor)',
+ sapContent_ContrastIconColor: 'var(--sapContent_ContrastIconColor)',
+ sapContent_NonInteractiveIconColor: 'var(--sapContent_NonInteractiveIconColor)',
+ sapContent_MarkerIconColor: 'var(--sapContent_MarkerIconColor)',
+ sapContent_MarkerTextColor: 'var(--sapContent_MarkerTextColor)',
+ sapContent_ImagePlaceholderBackground: 'var(--sapContent_ImagePlaceholderBackground)',
+ sapContent_ImagePlaceholderForegroundColor: 'var(--sapContent_ImagePlaceholderForegroundColor)',
+ sapContent_RatedColor: 'var(--sapContent_RatedColor)',
+ sapContent_UnratedColor: 'var(--sapContent_UnratedColor)',
+ sapContent_FocusColor: 'var(--sapContent_FocusColor)',
+ sapContent_FocusStyle: 'var(--sapContent_FocusStyle)',
+ sapContent_FocusWidth: 'var(--sapContent_FocusWidth)',
+ sapContent_ContrastFocusColor: 'var(--sapContent_ContrastFocusColor)',
+ sapContent_ShadowColor: 'var(--sapContent_ShadowColor)',
+ sapContent_ContrastShadowColor: 'var(--sapContent_ContrastShadowColor)',
+ sapContent_Shadow0: 'var(--sapContent_Shadow0)',
+ sapContent_Shadow1: 'var(--sapContent_Shadow1)',
+ sapContent_Shadow2: 'var(--sapContent_Shadow2)',
+ sapContent_Shadow3: 'var(--sapContent_Shadow3)',
+ sapContent_TextShadow: 'var(--sapContent_TextShadow)',
+ sapContent_HeaderShadow: 'var(--sapContent_HeaderShadow)',
+ sapContent_SearchHighlightColor: 'var(--sapContent_SearchHighlightColor)',
+ sapContent_HelpColor: 'var(--sapContent_HelpColor)',
+ sapContent_LabelColor: 'var(--sapContent_LabelColor)',
+ sapContent_MonospaceFontFamily: 'var(--sapContent_MonospaceFontFamily)',
+ sapContent_DisabledTextColor: 'var(--sapContent_DisabledTextColor)',
+ sapContent_DisabledOpacity: 'var(--sapContent_DisabledOpacity)',
+ sapContent_ContrastTextThreshold: 'var(--sapContent_ContrastTextThreshold)',
+ sapContent_ContrastTextColor: 'var(--sapContent_ContrastTextColor)',
+ sapContent_ForegroundColor: 'var(--sapContent_ForegroundColor)',
+ sapContent_ForegroundBorderColor: 'var(--sapContent_ForegroundBorderColor)',
+ sapContent_ForegroundTextColor: 'var(--sapContent_ForegroundTextColor)',
+ sapContent_BadgeBackground: 'var(--sapContent_BadgeBackground)',
+ sapContent_DragAndDropActiveColor: 'var(--sapContent_DragAndDropActiveColor)',
+ sapShell_Background: 'var(--sapShell_Background)',
+ sapShell_BackgroundImage: 'var(--sapShell_BackgroundImage)',
+ sapShell_BackgroundGradient: 'var(--sapShell_BackgroundGradient)',
+ sapShell_BackgroundImageOpacity: 'var(--sapShell_BackgroundImageOpacity)',
+ sapShell_BackgroundImageRepeat: 'var(--sapShell_BackgroundImageRepeat)',
+ sapShell_BorderColor: 'var(--sapShell_BorderColor)',
+ sapShell_TextColor: 'var(--sapShell_TextColor)',
+ sapShell_InteractiveTextColor: 'var(--sapShell_InteractiveTextColor)',
+ sapShell_InteractiveBorderColor: 'var(--sapShell_InteractiveBorderColor)',
+ sapShell_GroupTitleTextColor: 'var(--sapShell_GroupTitleTextColor)',
+ sapShell_Hover_Background: 'var(--sapShell_Hover_Background)',
+ sapShell_Active_Background: 'var(--sapShell_Active_Background)',
+ sapShell_Active_TextColor: 'var(--sapShell_Active_TextColor)',
+ sapShell_Selected_Background: 'var(--sapShell_Selected_Background)',
+ sapShell_Selected_TextColor: 'var(--sapShell_Selected_TextColor)',
+ sapShell_Selected_Hover_Background: 'var(--sapShell_Selected_Hover_Background)',
+ sapShell_Favicon: 'var(--sapShell_Favicon)',
+ sapShell_Navigation_Background: 'var(--sapShell_Navigation_Background)',
+ sapShell_Navigation_SelectedColor: 'var(--sapShell_Navigation_SelectedColor)',
+ sapShell_Navigation_Selected_TextColor: 'var(--sapShell_Navigation_Selected_TextColor)',
+ sapShell_Navigation_TextColor: 'var(--sapShell_Navigation_TextColor)',
+ sapShell_Shadow: 'var(--sapShell_Shadow)',
+ sapButton_BorderWidth: 'var(--sapButton_BorderWidth)',
+ sapButton_BorderCornerRadius: 'var(--sapButton_BorderCornerRadius)',
+ sapButton_Background: 'var(--sapButton_Background)',
+ sapButton_BorderColor: 'var(--sapButton_BorderColor)',
+ sapButton_TextColor: 'var(--sapButton_TextColor)',
+ sapButton_Hover_Background: 'var(--sapButton_Hover_Background)',
+ sapButton_Hover_BorderColor: 'var(--sapButton_Hover_BorderColor)',
+ sapButton_Hover_TextColor: 'var(--sapButton_Hover_TextColor)',
+ sapButton_IconColor: 'var(--sapButton_IconColor)',
+ sapButton_Active_Background: 'var(--sapButton_Active_Background)',
+ sapButton_Active_BorderColor: 'var(--sapButton_Active_BorderColor)',
+ sapButton_Active_TextColor: 'var(--sapButton_Active_TextColor)',
+ sapButton_Emphasized_Background: 'var(--sapButton_Emphasized_Background)',
+ sapButton_Emphasized_BorderColor: 'var(--sapButton_Emphasized_BorderColor)',
+ sapButton_Emphasized_TextColor: 'var(--sapButton_Emphasized_TextColor)',
+ 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)',
+ sapButton_Emphasized_Active_Background: 'var(--sapButton_Emphasized_Active_Background)',
+ sapButton_Emphasized_Active_BorderColor: 'var(--sapButton_Emphasized_Active_BorderColor)',
+ sapButton_Emphasized_TextShadow: 'var(--sapButton_Emphasized_TextShadow)',
+ sapButton_Accept_Background: 'var(--sapButton_Accept_Background)',
+ sapButton_Accept_BorderColor: 'var(--sapButton_Accept_BorderColor)',
+ sapButton_Accept_Hover_Background: 'var(--sapButton_Accept_Hover_Background)',
+ sapButton_Accept_Hover_BorderColor: 'var(--sapButton_Accept_Hover_BorderColor)',
+ sapButton_Accept_Hover_TextColor: 'var(--sapButton_Accept_Hover_TextColor)',
+ sapButton_Accept_Active_Background: 'var(--sapButton_Accept_Active_Background)',
+ sapButton_Accept_Active_BorderColor: 'var(--sapButton_Accept_Active_BorderColor)',
+ sapButton_Accept_TextColor: 'var(--sapButton_Accept_TextColor)',
+ sapButton_Reject_Background: 'var(--sapButton_Reject_Background)',
+ sapButton_Reject_BorderColor: 'var(--sapButton_Reject_BorderColor)',
+ sapButton_Reject_Hover_Background: 'var(--sapButton_Reject_Hover_Background)',
+ sapButton_Reject_Hover_BorderColor: 'var(--sapButton_Reject_Hover_BorderColor)',
+ sapButton_Reject_Hover_TextColor: 'var(--sapButton_Reject_Hover_TextColor)',
+ sapButton_Reject_Active_Background: 'var(--sapButton_Reject_Active_Background)',
+ sapButton_Reject_Active_BorderColor: 'var(--sapButton_Reject_Active_BorderColor)',
+ sapButton_Reject_TextColor: 'var(--sapButton_Reject_TextColor)',
+ sapButton_Lite_Background: 'var(--sapButton_Lite_Background)',
+ sapButton_Lite_BorderColor: 'var(--sapButton_Lite_BorderColor)',
+ sapButton_Lite_TextColor: 'var(--sapButton_Lite_TextColor)',
+ sapButton_Lite_Hover_Background: 'var(--sapButton_Lite_Hover_Background)',
+ sapButton_Lite_Hover_BorderColor: 'var(--sapButton_Lite_Hover_BorderColor)',
+ sapButton_Lite_Hover_TextColor: 'var(--sapButton_Lite_Hover_TextColor)',
+ sapButton_Lite_Active_Background: 'var(--sapButton_Lite_Active_Background)',
+ sapButton_Lite_Active_BorderColor: 'var(--sapButton_Lite_Active_BorderColor)',
+ sapButton_Selected_Background: 'var(--sapButton_Selected_Background)',
+ sapButton_Selected_BorderColor: 'var(--sapButton_Selected_BorderColor)',
+ sapButton_Selected_TextColor: 'var(--sapButton_Selected_TextColor)',
+ sapButton_Selected_Hover_Background: 'var(--sapButton_Selected_Hover_Background)',
+ sapButton_Selected_Hover_BorderColor: 'var(--sapButton_Selected_Hover_BorderColor)',
+ sapField_Background: 'var(--sapField_Background)',
+ sapField_TextColor: 'var(--sapField_TextColor)',
+ sapField_PlaceholderTextColor: 'var(--sapField_PlaceholderTextColor)',
+ sapField_BorderColor: 'var(--sapField_BorderColor)',
+ sapField_HelpBackground: 'var(--sapField_HelpBackground)',
+ sapField_BorderWidth: 'var(--sapField_BorderWidth)',
+ sapField_BorderCornerRadius: 'var(--sapField_BorderCornerRadius)',
+ sapField_Hover_Background: 'var(--sapField_Hover_Background)',
+ sapField_Hover_BorderColor: 'var(--sapField_Hover_BorderColor)',
+ sapField_Hover_HelpBackground: 'var(--sapField_Hover_HelpBackground)',
+ sapField_Active_BorderColor: 'var(--sapField_Active_BorderColor)',
+ sapField_Focus_Background: 'var(--sapField_Focus_Background)',
+ sapField_Focus_BorderColor: 'var(--sapField_Focus_BorderColor)',
+ sapField_Focus_HelpBackground: 'var(--sapField_Focus_HelpBackground)',
+ sapField_ReadOnly_Background: 'var(--sapField_ReadOnly_Background)',
+ sapField_ReadOnly_BorderColor: 'var(--sapField_ReadOnly_BorderColor)',
+ sapField_ReadOnly_HelpBackground: 'var(--sapField_ReadOnly_HelpBackground)',
+ sapField_RequiredColor: 'var(--sapField_RequiredColor)',
+ sapField_InvalidColor: 'var(--sapField_InvalidColor)',
+ sapField_InvalidBackground: 'var(--sapField_InvalidBackground)',
+ sapField_WarningColor: 'var(--sapField_WarningColor)',
+ sapField_WarningBackground: 'var(--sapField_WarningBackground)',
+ sapField_SuccessColor: 'var(--sapField_SuccessColor)',
+ sapField_SuccessBackground: 'var(--sapField_SuccessBackground)',
+ sapField_InformationColor: 'var(--sapField_InformationColor)',
+ sapField_InformationBackground: 'var(--sapField_InformationBackground)',
+ sapGroup_TitleBackground: 'var(--sapGroup_TitleBackground)',
+ sapGroup_TitleBorderColor: 'var(--sapGroup_TitleBorderColor)',
+ sapGroup_TitleTextColor: 'var(--sapGroup_TitleTextColor)',
+ sapGroup_ContentBackground: 'var(--sapGroup_ContentBackground)',
+ sapGroup_ContentBorderColor: 'var(--sapGroup_ContentBorderColor)',
+ sapGroup_BorderWidth: 'var(--sapGroup_BorderWidth)',
+ sapGroup_BorderCornerRadius: 'var(--sapGroup_BorderCornerRadius)',
+ sapGroup_FooterBackground: 'var(--sapGroup_FooterBackground)',
+ sapToolbar_Background: 'var(--sapToolbar_Background)',
+ sapToolbar_SeparatorColor: 'var(--sapToolbar_SeparatorColor)',
+ sapList_HeaderBackground: 'var(--sapList_HeaderBackground)',
+ sapList_HeaderBorderColor: 'var(--sapList_HeaderBorderColor)',
+ sapList_HeaderTextColor: 'var(--sapList_HeaderTextColor)',
+ sapList_BorderColor: 'var(--sapList_BorderColor)',
+ sapList_TextColor: 'var(--sapList_TextColor)',
+ sapList_Active_TextColor: 'var(--sapList_Active_TextColor)',
+ sapList_BorderWidth: 'var(--sapList_BorderWidth)',
+ sapList_Active_Background: 'var(--sapList_Active_Background)',
+ sapList_SelectionBackgroundColor: 'var(--sapList_SelectionBackgroundColor)',
+ sapList_SelectionBorderColor: 'var(--sapList_SelectionBorderColor)',
+ sapList_Hover_SelectionBackground: 'var(--sapList_Hover_SelectionBackground)',
+ sapList_Background: 'var(--sapList_Background)',
+ sapList_Hover_Background: 'var(--sapList_Hover_Background)',
+ sapList_GroupHeaderBackground: 'var(--sapList_GroupHeaderBackground)',
+ sapList_GroupHeaderBorderColor: 'var(--sapList_GroupHeaderBorderColor)',
+ sapList_GroupHeaderTextColor: 'var(--sapList_GroupHeaderTextColor)',
+ sapList_FooterBackground: 'var(--sapList_FooterBackground)',
+ sapList_FooterTextColor: 'var(--sapList_FooterTextColor)',
+ sapList_TableGroupHeaderBackground: 'var(--sapList_TableGroupHeaderBackground)',
+ sapList_TableGroupHeaderBorderColor: 'var(--sapList_TableGroupHeaderBorderColor)',
+ sapList_TableGroupHeaderTextColor: 'var(--sapList_TableGroupHeaderTextColor)',
+ sapList_TableFooterBorder: 'var(--sapList_TableFooterBorder)',
+ sapList_TableFixedBorderColor: 'var(--sapList_TableFixedBorderColor)',
+ sapScrollBar_FaceColor: 'var(--sapScrollBar_FaceColor)',
+ sapScrollBar_TrackColor: 'var(--sapScrollBar_TrackColor)',
+ sapScrollBar_BorderColor: 'var(--sapScrollBar_BorderColor)',
+ sapScrollBar_SymbolColor: 'var(--sapScrollBar_SymbolColor)',
+ sapScrollBar_Dimension: 'var(--sapScrollBar_Dimension)',
+ sapScrollBar_Hover_FaceColor: 'var(--sapScrollBar_Hover_FaceColor)',
+ sapPageHeader_Background: 'var(--sapPageHeader_Background)',
+ sapPageHeader_BorderColor: 'var(--sapPageHeader_BorderColor)',
+ sapPageHeader_TextColor: 'var(--sapPageHeader_TextColor)',
+ sapPageFooter_Background: 'var(--sapPageFooter_Background)',
+ sapPageFooter_BorderColor: 'var(--sapPageFooter_BorderColor)',
+ sapPageFooter_TextColor: 'var(--sapPageFooter_TextColor)',
+ sapInfobar_Background: 'var(--sapInfobar_Background)',
+ sapInfobar_Hover_Background: 'var(--sapInfobar_Hover_Background)',
+ sapInfobar_Active_Background: 'var(--sapInfobar_Active_Background)',
+ sapObjectHeader_Background: 'var(--sapObjectHeader_Background)',
+ sapObjectHeader_BorderColor: 'var(--sapObjectHeader_BorderColor)',
+ sapBlockLayer_Background: 'var(--sapBlockLayer_Background)',
+ sapTile_Background: 'var(--sapTile_Background)',
+ sapTile_Hover_Background: 'var(--sapTile_Hover_Background)',
+ sapTile_Active_Background: 'var(--sapTile_Active_Background)',
+ sapTile_BorderColor: 'var(--sapTile_BorderColor)',
+ sapTile_TitleTextColor: 'var(--sapTile_TitleTextColor)',
+ sapTile_TextColor: 'var(--sapTile_TextColor)',
+ sapTile_IconColor: 'var(--sapTile_IconColor)',
+ sapAccentColor1: 'var(--sapAccentColor1)',
+ sapAccentColor2: 'var(--sapAccentColor2)',
+ sapAccentColor3: 'var(--sapAccentColor3)',
+ sapAccentColor4: 'var(--sapAccentColor4)',
+ sapAccentColor5: 'var(--sapAccentColor5)',
+ sapAccentColor6: 'var(--sapAccentColor6)',
+ sapAccentColor7: 'var(--sapAccentColor7)',
+ sapAccentColor8: 'var(--sapAccentColor8)',
+ sapAccentColor9: 'var(--sapAccentColor9)',
+ sapAccentColor10: 'var(--sapAccentColor10)',
+ sapLegendColor1: 'var(--sapLegendColor1)',
+ sapLegendColor2: 'var(--sapLegendColor2)',
+ sapLegendColor3: 'var(--sapLegendColor3)',
+ sapLegendColor4: 'var(--sapLegendColor4)',
+ sapLegendColor5: 'var(--sapLegendColor5)',
+ sapLegendColor6: 'var(--sapLegendColor6)',
+ sapLegendColor7: 'var(--sapLegendColor7)',
+ sapLegendColor8: 'var(--sapLegendColor8)',
+ sapLegendColor9: 'var(--sapLegendColor9)',
+ sapLegendColor10: 'var(--sapLegendColor10)',
+ sapLegendColor11: 'var(--sapLegendColor11)',
+ sapLegendColor12: 'var(--sapLegendColor12)',
+ sapLegendColor13: 'var(--sapLegendColor13)',
+ sapLegendColor14: 'var(--sapLegendColor14)',
+ sapLegendColor15: 'var(--sapLegendColor15)',
+ sapLegendColor16: 'var(--sapLegendColor16)',
+ sapLegendColor17: 'var(--sapLegendColor17)',
+ sapLegendColor18: 'var(--sapLegendColor18)',
+ sapLegendColor19: 'var(--sapLegendColor19)',
+ sapLegendColor20: 'var(--sapLegendColor20)',
+ sapChart_OrderedColor_1: 'var(--sapChart_OrderedColor_1)',
+ sapChart_OrderedColor_2: 'var(--sapChart_OrderedColor_2)',
+ sapChart_OrderedColor_3: 'var(--sapChart_OrderedColor_3)',
+ sapChart_OrderedColor_4: 'var(--sapChart_OrderedColor_4)',
+ sapChart_OrderedColor_5: 'var(--sapChart_OrderedColor_5)',
+ sapChart_OrderedColor_6: 'var(--sapChart_OrderedColor_6)',
+ sapChart_OrderedColor_7: 'var(--sapChart_OrderedColor_7)',
+ sapChart_OrderedColor_8: 'var(--sapChart_OrderedColor_8)',
+ sapChart_OrderedColor_9: 'var(--sapChart_OrderedColor_9)',
+ sapChart_OrderedColor_10: 'var(--sapChart_OrderedColor_10)',
+ sapChart_OrderedColor_11: 'var(--sapChart_OrderedColor_11)',
+ sapChart_Bad: 'var(--sapChart_Bad)',
+ sapChart_Critical: 'var(--sapChart_Critical)',
+ sapChart_Good: 'var(--sapChart_Good)',
+ sapChart_Neutral: 'var(--sapChart_Neutral)',
+ sapChart_Sequence_1: 'var(--sapChart_Sequence_1)',
+ sapChart_Sequence_2: 'var(--sapChart_Sequence_2)',
+ sapChart_Sequence_3: 'var(--sapChart_Sequence_3)',
+ sapChart_Sequence_4: 'var(--sapChart_Sequence_4)',
+ sapChart_Sequence_5: 'var(--sapChart_Sequence_5)',
+ sapChart_Sequence_6: 'var(--sapChart_Sequence_6)',
+ sapChart_Sequence_7: 'var(--sapChart_Sequence_7)',
+ sapChart_Sequence_8: 'var(--sapChart_Sequence_8)',
+ sapChart_Sequence_9: 'var(--sapChart_Sequence_9)',
+ sapChart_Sequence_10: 'var(--sapChart_Sequence_10)',
+ sapChart_Sequence_11: 'var(--sapChart_Sequence_11)',
+ sapChart_Sequence_Neutral: 'var(--sapChart_Sequence_Neutral)',
+ 'sapFontUrl_SAP-icons_ttf': 'var(--sapFontUrl_SAP-icons_ttf)',
+ 'sapFontUrl_SAP-icons_woff': 'var(--sapFontUrl_SAP-icons_woff)',
+ 'sapFontUrl_SAP-icons_woff2': 'var(--sapFontUrl_SAP-icons_woff2)',
+ sapFontUrl_72_Regular_woff2: 'var(--sapFontUrl_72_Regular_woff2)',
+ sapFontUrl_72_Regular_woff: 'var(--sapFontUrl_72_Regular_woff)',
+ sapFontUrl_72_Bold_woff2: 'var(--sapFontUrl_72_Bold_woff2)',
+ sapFontUrl_72_Bold_woff: 'var(--sapFontUrl_72_Bold_woff)',
+ sapFontUrl_72_Regular_full_woff2: 'var(--sapFontUrl_72_Regular_full_woff2)',
+ sapFontUrl_72_Regular_full_woff: 'var(--sapFontUrl_72_Regular_full_woff)',
+ sapFontUrl_72_Bold_full_woff2: 'var(--sapFontUrl_72_Bold_full_woff2)',
+ sapFontUrl_72_Bold_full_woff: 'var(--sapFontUrl_72_Bold_full_woff)'
+};
diff --git a/packages/base/src/styling/sap_fiori_3.ts b/packages/base/src/styling/sap_fiori_3.ts
index a229ec3b1c0..bf493ccd153 100644
--- a/packages/base/src/styling/sap_fiori_3.ts
+++ b/packages/base/src/styling/sap_fiori_3.ts
@@ -1,3 +1,5 @@
+import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
+
/*
* ### WARNING ###
* This is an autogenerated file, do not change manually.
@@ -6,6 +8,11 @@
/* eslint-disable camelcase */
+deprecationNotice(
+ 'sap_fiori_3',
+ "'@ui5/webcomponents-react-base/lib/sap_fiori_3' is deprecated and will be removed in the next major release.\n. Please use the '@ui5/webcomponents-react-base/lib/ThemingParameters' instead."
+);
+
export const sapFontFamily = 'var(--sapFontFamily)';
export const sapFontSize = 'var(--sapFontSize)';
export const sapCompanyLogo = 'var(--sapCompanyLogo)';
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 78392253849..7c4ba647dc6 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -1,5 +1,5 @@
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { BarChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/BarChartPlaceholder';
import { useInitialize } from '@ui5/webcomponents-react-charts/lib/initialize';
@@ -48,7 +48,7 @@ const BarChart: FC = forwardRef((props: BarChartProps, ref: Ref {
height={145}
width={165}
speed={2}
- backgroundColor={parameters.sapContent_ImagePlaceholderBackground}
- foregroundColor={parameters.sapContent_ImagePlaceholderForegroundColor}
- backgroundOpacity={parameters.sapContent_DisabledOpacity as any}
+ backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+ foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+ backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
>
diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx
index 7ea60a66933..2d6ea610b43 100644
--- a/packages/charts/src/components/BarChart/index.tsx
+++ b/packages/charts/src/components/BarChart/index.tsx
@@ -90,8 +90,8 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref) =
const datasetMeta = context.chart.getDatasetMeta(context.datasetIndex);
const dataMeta = datasetMeta.data[context.dataIndex];
return bestContrast(dataMeta._view.backgroundColor, [
- getCssVariableValue('--sapUiBaseText', '#32363a'),
- getCssVariableValue('--sapUiContentContrastTextColor', '#fff')
+ getCssVariableValue('--sapTextColor', '#32363a'),
+ getCssVariableValue('--sapContent_ContrastTextColor', '#fff')
]);
}
}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index ce472358bb3..de364d47690 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -1,5 +1,5 @@
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { ColumnChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/ColumnChartPlaceholder';
import { useInitialize } from '@ui5/webcomponents-react-charts/lib/initialize';
@@ -48,7 +48,7 @@ const ColumnChart: FC = forwardRef((props: ColumnChartProps, r
xAxisVisible: true,
xAxisUnit: '',
yAxisUnit: '',
- gridStroke: ThemingParameters.sapUiListTableFooterBorder,
+ gridStroke: ThemingParameters.sapList_TableFooterBorder,
gridHorizontal: true,
gridVertical: false,
yAxisColor: ThemingParameters.sapNeutralBorderColor,
diff --git a/packages/charts/src/components/ColumnChart/Placeholder.tsx b/packages/charts/src/components/ColumnChart/Placeholder.tsx
index 9cd99e6a29b..0da0584ad66 100644
--- a/packages/charts/src/components/ColumnChart/Placeholder.tsx
+++ b/packages/charts/src/components/ColumnChart/Placeholder.tsx
@@ -1,4 +1,4 @@
-import * as parameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React from 'react';
import ContentLoader from 'react-content-loader';
@@ -8,9 +8,9 @@ export const ColumnChartPlaceholder = (props) => {
height={145}
width={165}
speed={2}
- backgroundColor={parameters.sapContent_ImagePlaceholderBackground}
- foregroundColor={parameters.sapContent_ImagePlaceholderForegroundColor}
- backgroundOpacity={parameters.sapContent_DisabledOpacity as any}
+ backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+ foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+ backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
{...props}
>
diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx
index e051194f9f2..a2b72099eb9 100644
--- a/packages/charts/src/components/ColumnChart/index.tsx
+++ b/packages/charts/src/components/ColumnChart/index.tsx
@@ -97,8 +97,8 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref = forwardRef((props: ComposedChartPr
yAxisUnit: '',
yAxisVisible: false,
xAxisVisible: true,
- gridStroke: ThemingParameters.sapUiListTableFooterBorder,
+ gridStroke: ThemingParameters.sapList_TableFooterBorder,
gridHorizontal: true,
gridVertical: false,
yAxisId: '',
diff --git a/packages/charts/src/components/DonutChart/index.tsx b/packages/charts/src/components/DonutChart/index.tsx
index d96330ebbdb..37b1f3d8d6d 100644
--- a/packages/charts/src/components/DonutChart/index.tsx
+++ b/packages/charts/src/components/DonutChart/index.tsx
@@ -45,7 +45,7 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref = forwardRef((props: LineChartProps, ref: Re
chartConfig = {
yAxisVisible: false,
xAxisVisible: true,
- gridStroke: ThemingParameters.sapUiListTableFooterBorder,
+ gridStroke: ThemingParameters.sapList_TableFooterBorder,
gridHorizontal: true,
gridVertical: false,
yAxisColor: ThemingParameters.sapNeutralBorderColor,
diff --git a/packages/charts/src/components/LineChart/Placeholder.tsx b/packages/charts/src/components/LineChart/Placeholder.tsx
index a4437ffd05a..6244d59dcc3 100644
--- a/packages/charts/src/components/LineChart/Placeholder.tsx
+++ b/packages/charts/src/components/LineChart/Placeholder.tsx
@@ -1,4 +1,4 @@
-import * as parameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React from 'react';
import ContentLoader from 'react-content-loader';
@@ -8,9 +8,9 @@ export const LineChartPlaceholder = (props) => {
height={300}
width={300}
speed={2}
- backgroundColor={parameters.sapContent_ImagePlaceholderBackground}
- foregroundColor={parameters.sapContent_ImagePlaceholderForegroundColor}
- backgroundOpacity={parameters.sapContent_DisabledOpacity as any}
+ backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+ foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+ backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
{...props}
>
{/**/}
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
index 594c6cb8e8e..c2f43cd96c2 100644
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
+++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
@@ -1,5 +1,5 @@
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { useInitialize } from '@ui5/webcomponents-react-charts/lib/initialize';
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
@@ -30,7 +30,7 @@ const MicroBarChart: FC = forwardRef((props: MicroBarChartPr
yAxisUnit: '',
yAxisVisible: false,
xAxisVisible: false,
- gridStroke: ThemingParameters.sapUiListTableFooterBorder,
+ gridStroke: ThemingParameters.sapList_TableFooterBorder,
yAxisColor: ThemingParameters.sapNeutralBorderColor,
barSize: 5,
barGap: 3,
diff --git a/packages/charts/src/components/PieChart/Placeholder.tsx b/packages/charts/src/components/PieChart/Placeholder.tsx
index 6cd51c6a74a..a45c4563ce9 100644
--- a/packages/charts/src/components/PieChart/Placeholder.tsx
+++ b/packages/charts/src/components/PieChart/Placeholder.tsx
@@ -1,4 +1,4 @@
-import * as parameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React from 'react';
import ContentLoader from 'react-content-loader';
@@ -8,9 +8,9 @@ export const PieChartPlaceholder = (props) => {
height={150}
width={150}
speed={2}
- backgroundColor={parameters.sapContent_ImagePlaceholderBackground}
- foregroundColor={parameters.sapContent_ImagePlaceholderForegroundColor}
- backgroundOpacity={parameters.sapContent_DisabledOpacity as any}
+ backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+ foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+ backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
{...props}
>
diff --git a/packages/charts/src/components/PieChart/index.tsx b/packages/charts/src/components/PieChart/index.tsx
index 814483fdef9..554373663cd 100644
--- a/packages/charts/src/components/PieChart/index.tsx
+++ b/packages/charts/src/components/PieChart/index.tsx
@@ -44,7 +44,7 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref) =
datalabels: {
anchor: 'end',
align: 'end',
- color: getCssVariableValue('--sapUiBaseText', '#32363a'),
+ color: getCssVariableValue('--sapTextColor', '#32363a'),
formatter: (val, context) => {
return valueAxisFormatter(val, context.dataset, context);
}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 40481fe62ca..40e934d5c88 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -1,5 +1,5 @@
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { useInitialize } from '@ui5/webcomponents-react-charts/lib/initialize';
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
index 2dcfd243717..baffe179f0f 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -1,5 +1,5 @@
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { useInitialize } from '@ui5/webcomponents-react-charts/lib/initialize';
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
diff --git a/packages/charts/src/config.ts b/packages/charts/src/config.ts
index 78e0bb7cd61..49732f7e5e0 100644
--- a/packages/charts/src/config.ts
+++ b/packages/charts/src/config.ts
@@ -54,8 +54,8 @@ export const DEFAULT_OPTIONS = {
gridLines: {
display: false,
lineWidth: 2,
- color: getCssVariableValue('--sapUiBaseText', '#32363a'),
- fontColor: getCssVariableValue('--sapUiBaseText', '#32363a')
+ color: getCssVariableValue('--sapTextColor', '#32363a'),
+ fontColor: getCssVariableValue('--sapTextColor', '#32363a')
}
}
]
diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
index 754f7d92dd0..bec6a3204e6 100644
--- a/packages/charts/src/hooks/useLabelElements.ts
+++ b/packages/charts/src/hooks/useLabelElements.ts
@@ -1,6 +1,6 @@
import { useCallback, useMemo } from 'react';
import { DataLabel } from '../internal/CustomElements';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { renderAxisTicks } from '../util/Utils';
export const useDataLabel = (dataLabel, dataLabelCustomElement, dataLabelFormatter, stacked?, bar?) =>
diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
index 7370a9c3b6e..e3ae5861b94 100644
--- a/packages/charts/src/internal/ChartContainer.tsx
+++ b/packages/charts/src/internal/ChartContainer.tsx
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { Loader } from '@ui5/webcomponents-react/lib/Loader';
import React, { ComponentType, CSSProperties, FC, forwardRef, ReactNode, Ref, useMemo } from 'react';
import { ResponsiveContainer } from 'recharts';
@@ -25,7 +25,7 @@ const ChartContainer: FC = forwardRef((props: ContainerProps, re
const internalStyles = useMemo(() => {
const styles: CSSProperties = {};
- styles.fontSize = ThemingParameters.sapUiFontSmallSize;
+ styles.fontSize = ThemingParameters.sapFontSmallSize;
if (width) {
styles.width = width;
diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
index 9619792c0ea..5f330ffb9ac 100644
--- a/packages/charts/src/internal/CustomElements.tsx
+++ b/packages/charts/src/internal/CustomElements.tsx
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React from 'react';
export const AxisTicks = (props, formatter, unit = '', rotate) => {
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
index 0f7d4079b88..cca30ca2570 100644
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
+++ b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
@@ -1,17 +1,16 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import * as spacing from '@ui5/webcomponents-react-base/lib/spacing';
const styles = {
card: {
- backgroundColor: ThemingParameters.sapUiTileBackground,
- // TODO There is a border mentioned in the specs, but this one looks weird.
- // border: `0.625rem solid ${ThemingParameters.sapUiTileBorderColor}`,
- boxShadow: ThemingParameters.sapUiShadowLevel0,
- borderRadius: '0.25rem',
+ backgroundColor: ThemingParameters.sapTile_Background,
+ border: `0.625rem solid ${ThemingParameters.sapTile_BorderColor}`,
+ boxShadow: ThemingParameters.sapContent_Shadow0,
+ borderRadius: '0.25rem', // ThemingParameters.sapElement_BorderCornerRadius,
textAlign: 'start',
overflow: 'hidden',
position: 'relative',
- fontFamily: ThemingParameters.sapUiFontFamily,
+ fontFamily: ThemingParameters.sapFontFamily,
boxSizing: 'border-box'
},
content: spacing.sapUiContentPadding
diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
index ea1e37d401f..d465d104d9b 100644
--- a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
@@ -1,24 +1,24 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
helpText: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiBaseText
+ color: ThemingParameters.sapTextColor
},
cardHeader: {
paddingTop: '1rem',
paddingBottom: '1rem',
outlineOffset: '-0.125rem',
- borderBottom: `0.0625rem solid ${ThemingParameters.sapUiTileBackgroundDarken20}`,
- backgroundColor: ThemingParameters.sapUiTileBackground,
- fontFamily: ThemingParameters.sapUiFontHeaderFamily,
+ borderBottom: `0.0625rem solid ${ThemingParameters.sapTile_BorderColor}`,
+ backgroundColor: ThemingParameters.sapTile_Background,
+ fontFamily: ThemingParameters.sapFontHeaderFamily,
'&:hover': {
- backgroundColor: ThemingParameters.sapUiListHoverBackground // TODO sapUiTileHoverBackground '#fafafa'
+ backgroundColor: ThemingParameters.sapList_Hover_Background
},
'&:active': {
- backgroundColor: ThemingParameters.sapUiListHoverBackground // TODO sapUiTileHoverBackground '#fafafa'
+ backgroundColor: ThemingParameters.sapList_Hover_Background
}
},
arrowIndicatorShape: {
@@ -55,10 +55,10 @@ const styles = {
wordWrap: 'break-word'
},
headerText: {
- fontFamily: ThemingParameters.sapUiFontHeaderFamily,
- fontWeight: ThemingParameters.sapUiFontHeaderWeight,
- fontSize: ThemingParameters.sapMFontHeader5Size,
- color: ThemingParameters.sapUiTileTitleTextColor,
+ fontFamily: ThemingParameters.sapFontHeaderFamily,
+ fontWeight: 'normal', // was ThemingParameters.sapUiFontHeaderWeight
+ fontSize: ThemingParameters.sapFontHeader5Size,
+ color: ThemingParameters.sapTile_TitleTextColor,
overflow: 'hidden',
display: '-webkit-box',
lineHeight: '18px',
@@ -68,10 +68,10 @@ const styles = {
},
subHeaderText: {
overflow: 'hidden',
- fontFamily: ThemingParameters.sapUiFontFamily,
+ fontFamily: ThemingParameters.sapFontFamily,
fontWeight: 'normal',
- fontSize: ThemingParameters.sapMFontMediumSize,
- color: ThemingParameters.sapUiTileTextColor,
+ fontSize: ThemingParameters.sapFontSize,
+ color: ThemingParameters.sapTile_TextColor,
textAlign: 'left',
whiteSpace: 'normal',
wordWrap: 'break-word',
@@ -85,16 +85,16 @@ const styles = {
WebkitBoxOrient: 'vertical'
},
counter: {
- fontSize: ThemingParameters.sapMFontSmallSize,
+ fontSize: ThemingParameters.sapFontSmallSize,
margin: '0.188rem 0 0 1rem',
lineHeight: 'normal',
textAlign: 'right'
},
currency: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiTileTextColor,
+ color: ThemingParameters.sapTile_TextColor,
overflow: 'hidden',
marginLeft: '0.25rem',
textAlign: 'right'
@@ -107,14 +107,14 @@ const styles = {
kpiContent: {
fontWeight: 'normal',
marginTop: '0.5rem',
- color: ThemingParameters.sapUiTileTextColor,
+ color: ThemingParameters.sapTile_TextColor,
width: '100%',
boxSizing: 'border-box'
},
valueAndUnit: {
display: 'flex',
alignItems: 'end',
- color: ThemingParameters.sapUiNeutralText
+ color: ThemingParameters.sapNeutralTextColor
},
value: {
fontSize: '2rem',
@@ -139,24 +139,24 @@ const styles = {
width: '60%',
paddingBottom: '0.25rem',
textAlign: 'right',
- fontSize: ThemingParameters.sapMFontSmallSize,
- color: ThemingParameters.sapUiTileTextColor
+ fontSize: ThemingParameters.sapFontSmallSize,
+ color: ThemingParameters.sapTile_TextColor
},
targetAndDeviationColumn: {
maxWidth: '45%',
marginLeft: '1rem'
},
targetAndDeviationValue: {
- color: ThemingParameters.sapUiTileTitleTextColor,
+ color: ThemingParameters.sapTile_TitleTextColor,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
description: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontSmallSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSmallSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiTileTextColor,
+ color: ThemingParameters.sapTile_TextColor,
whiteSpace: 'normal',
overflow: 'hidden',
textAlign: 'left',
@@ -170,16 +170,16 @@ const styles = {
WebkitBoxOrient: 'vertical'
},
good: {
- color: ThemingParameters.sapUiPositiveText
+ color: ThemingParameters.sapPositiveTextColor
},
error: {
- color: ThemingParameters.sapUiNegativeText
+ color: ThemingParameters.sapNegativeTextColor
},
critical: {
- color: ThemingParameters.sapUiCriticalText
+ color: ThemingParameters.sapCriticalTextColor
},
none: {
- color: ThemingParameters.sapUiNeutralText
+ color: ThemingParameters.sapNeutralTextColor
}
};
diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
index 15aa02a6406..ff5c2fa4f74 100644
--- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
+++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
@@ -1,5 +1,5 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
tableContainer: {
@@ -20,47 +20,47 @@ const styles = {
position: 'relative'
},
th: {
- backgroundColor: ThemingParameters.sapUiListHeaderBackground,
+ backgroundColor: ThemingParameters.sapList_HeaderBackground,
height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiListHeaderTextColor,
- borderTop: `1px solid ${ThemingParameters.sapUiListBorderColor}`,
- borderBottom: `1px solid ${ThemingParameters.sapUiListBorderColor}`,
- borderRight: `1px solid ${ThemingParameters.sapUiListVerticalBorderColor}`,
+ color: ThemingParameters.sapList_HeaderTextColor,
+ borderTop: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+ borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+ borderRight: `1px solid ${ThemingParameters.sapList_BorderColor}`,
textAlign: 'start',
boxSizing: 'border-box',
'&:first-child': {
- borderLeft: `1px solid ${ThemingParameters.sapUiListVerticalBorderColor}`
+ borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
}
},
tbody: {
position: 'relative',
zIndex: 0,
- backgroundColor: ThemingParameters.sapUiListBackground,
+ backgroundColor: ThemingParameters.sapList_Background,
overflowX: 'hidden !important',
overflowY: 'auto !important'
},
alternateRowColor: {
- backgroundColor: ThemingParameters.sapUiListHeaderBackground
+ backgroundColor: ThemingParameters.sapList_HeaderBackground
},
emptyRow: {},
tr: {
zIndex: 0,
- color: ThemingParameters.sapUiListTextColor,
+ color: ThemingParameters.sapList_TextColor,
'&[data-is-selected]': {
- backgroundColor: `${ThemingParameters.sapUiListSelectionBackgroundColor} !important`
+ backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`
},
'&[data-is-selected]:hover': {
- backgroundColor: `${ThemingParameters.sapUiListSelectionHoverBackground} !important`
+ backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`
}
},
tableGroupHeader: {
'&$tr': {
- backgroundColor: `${ThemingParameters.sapUiListTableGroupHeaderBackground} !important`,
- border: `1px solid ${ThemingParameters.sapUiListTableGroupHeaderBorderColor}`,
- color: ThemingParameters.sapUiListTextColor,
+ backgroundColor: `${ThemingParameters.sapList_TableGroupHeaderBackground} !important`,
+ border: `1px solid ${ThemingParameters.sapList_TableGroupHeaderBorderColor}`,
+ color: ThemingParameters.sapList_TextColor,
'& $tableCell': {
borderRight: 'none'
}
@@ -68,30 +68,30 @@ const styles = {
},
selectable: {
'& $tr:hover:not($emptyRow)': {
- backgroundColor: ThemingParameters.sapUiListHoverBackground,
+ backgroundColor: ThemingParameters.sapList_Hover_Background,
cursor: 'pointer'
},
'& $tr:active:not([data-is-selected]):not($tableGroupHeader):not($emptyRow)': {
- backgroundColor: ThemingParameters.sapUiListActiveBackground,
+ backgroundColor: ThemingParameters.sapList_Active_Background,
'& $tableCell': {
- borderRight: `1px solid ${ThemingParameters.sapUiListActiveBackground}`,
- color: `${ThemingParameters.sapUiListActiveTextColor}`,
- '--sapUiBaseText': ThemingParameters.sapUiListActiveTextColor
+ borderRight: `1px solid ${ThemingParameters.sapList_Active_Background}`,
+ color: `${ThemingParameters.sapList_Active_TextColor}`,
+ '--sapTextColor': ThemingParameters.sapList_Active_TextColor
}
}
},
tableCell: {
height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- borderBottom: `1px solid ${ThemingParameters.sapUiListBorderColor}`,
+ borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
boxSizing: 'border-box',
- borderRight: `1px solid ${ThemingParameters.sapUiListVerticalBorderColor}`,
+ borderRight: `1px solid ${ThemingParameters.sapList_BorderColor}`,
display: 'flex',
padding: '0 0.5rem',
'&:first-child': {
- borderLeft: `1px solid ${ThemingParameters.sapUiListVerticalBorderColor}`
+ borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
},
overflow: 'hidden',
position: 'relative',
@@ -104,14 +104,14 @@ const styles = {
justifyContent: 'center',
alignItems: 'center',
height: '100%',
- backgroundColor: ThemingParameters.sapUiListBackground,
+ backgroundColor: ThemingParameters.sapList_Background,
width: '100%',
boxSizing: 'border-box',
- color: ThemingParameters.sapUiListTextColor,
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ color: ThemingParameters.sapList_TextColor,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- borderBottom: `1px solid ${ThemingParameters.sapUiListBorderColor}`
+ borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
},
modifiedRowHeight: {
'& $tableCell': {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 47d3dcf64a5..bf1d4360f48 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -4,7 +4,7 @@ import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
import '@ui5/webcomponents-icons/dist/icons/sort-descending';
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
@@ -45,11 +45,11 @@ const styles = {
justifyContent: 'begin',
alignItems: 'center',
textAlign: 'left',
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiListTextColor,
- background: ThemingParameters.sapUiListHeaderBackground,
+ color: ThemingParameters.sapList_TextColor,
+ background: ThemingParameters.sapList_HeaderBackground,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '100%',
@@ -58,7 +58,7 @@ const styles = {
iconContainer: {
display: 'inline-block',
position: 'absolute',
- color: ThemingParameters.sapUiContentIconColor,
+ color: ThemingParameters.sapContent_IconColor,
right: '0',
marginRight: '0.5rem',
'& :last-child': {
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
index 976e361ecd1..fec74ae33cc 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -4,7 +4,7 @@ import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionM
import React, { CSSProperties } from 'react';
const tableGroupExpandCollapseIcon = {
- color: 'var(--sapUiContentIconColor)',
+ color: 'var(--sapContent_IconColor)',
height: '0.75rem',
width: '0.75rem',
padding: '0.625rem',
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
index bed0c6b6264..ed51969dbd2 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
@@ -3,7 +3,7 @@ import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
import React, { CSSProperties } from 'react';
const tableGroupExpandCollapseIcon = {
- color: 'var(--sapUiContentIconColor)',
+ color: 'var(--sapContent_IconColor)',
height: '0.75rem',
width: '0.75rem',
padding: '0.625rem',
diff --git a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx
index c2400ce877f..73fe5d720c6 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React, { CSSProperties, FC, useMemo } from 'react';
import ContentLoader from 'react-content-loader';
@@ -36,10 +36,10 @@ export const TablePlaceholder: FC = (props: Props) => {
const innerStyles = useMemo(() => {
return {
- backgroundColor: ThemingParameters.sapUiListBackground,
+ backgroundColor: ThemingParameters.sapList_Background,
...style
};
- }, [style, ThemingParameters.sapUiListBackground]);
+ }, [style, ThemingParameters.sapList_Background]);
return (
({
@@ -14,15 +14,15 @@ const styles = {
// outer flexbox
avatar: {
backgroundColor: ThemingParameters.sapAccentColor7,
- color: ThemingParameters.sapUiContentContrastTextColor,
- fontFamily: ThemingParameters.sapUiFontFamily,
+ color: ThemingParameters.sapContent_ContrastTextColor,
+ fontFamily: ThemingParameters.sapFontFamily,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundSize: 'cover',
backgroundPosition: 'center',
borderRadius: '0.25rem',
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapContent_ContrastIconColor
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapContent_ContrastIconColor
},
// borderRadius 100%
circle: {
diff --git a/packages/main/src/components/Bar/Bar.jss.ts b/packages/main/src/components/Bar/Bar.jss.ts
index 508ebdaf981..d980fdba703 100644
--- a/packages/main/src/components/Bar/Bar.jss.ts
+++ b/packages/main/src/components/Bar/Bar.jss.ts
@@ -1,5 +1,5 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
// outer container, controlling height and width
@@ -47,16 +47,16 @@ const styles = {
},
auto: {
height: CssSizeVariables.sapWcrBarHeight,
- background: ThemingParameters.sapUiPageHeaderBackground,
- boxShadow: ThemingParameters.sapUiShadowHeader,
+ background: ThemingParameters.sapPageHeader_Background,
+ boxShadow: ThemingParameters.sapContent_HeaderShadow,
'& $inner': {
height: CssSizeVariables.sapWcrBarHeight
}
},
subHeader: {
height: CssSizeVariables.sapWcrSubHeaderBarHeight,
- background: ThemingParameters.sapUiPageHeaderBackground,
- boxShadow: ThemingParameters.sapUiShadowHeader,
+ background: ThemingParameters.sapPageHeader_Background,
+ boxShadow: ThemingParameters.sapContent_HeaderShadow,
paddingBottom: ' 0.25rem',
'& $inner': {
height: CssSizeVariables.sapWcrSubHeaderBarHeight
@@ -64,17 +64,17 @@ const styles = {
},
footer: {
height: CssSizeVariables.sapWcrBarHeight,
- background: ThemingParameters.sapUiPageFooterBackground,
- borderTop: `0.0625rem solid ${ThemingParameters.sapUiPageFooterBorderColor}`,
+ background: ThemingParameters.sapPageFooter_Background,
+ borderTop: `0.0625rem solid ${ThemingParameters.sapPageFooter_BorderColor}`,
'& $inner': {
height: CssSizeVariables.sapWcrBarHeight
}
},
floatingFooter: {
height: CssSizeVariables.sapWcrBarHeight,
- background: ThemingParameters.sapUiPageFooterBackground,
- // borderRadius: ThemingParameters.sapUiElementBorderCornerRadius,
- boxShadow: ThemingParameters.sapUiShadowLevel1,
+ background: ThemingParameters.sapPageFooter_Background,
+ // borderRadius: ThemingParameters.sapElement_BorderCornerRadius,
+ boxShadow: ThemingParameters.sapContent_Shadow1,
border: 'none',
opacity: 1,
'& $inner': {
diff --git a/packages/main/src/components/Carousel/Carousel.jss.ts b/packages/main/src/components/Carousel/Carousel.jss.ts
index 6631251d892..c0444ab33c0 100644
--- a/packages/main/src/components/Carousel/Carousel.jss.ts
+++ b/packages/main/src/components/Carousel/Carousel.jss.ts
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
carousel: {
@@ -8,8 +8,8 @@ const styles = {
border: '1px solid transparent',
touchAction: 'pan-y',
minWidth: '15.5rem',
- fontFamily: ThemingParameters.sapUiFontFamily,
- backgroundColor: ThemingParameters.sapUiBaseBG,
+ fontFamily: ThemingParameters.sapFontFamily,
+ backgroundColor: ThemingParameters.sapBackgroundColor,
'&:focus': {
outline: 'none',
'&:before': {
diff --git a/packages/main/src/components/Carousel/CarouselPagination.jss.ts b/packages/main/src/components/Carousel/CarouselPagination.jss.ts
index f7ebf84a296..9ef525114c4 100644
--- a/packages/main/src/components/Carousel/CarouselPagination.jss.ts
+++ b/packages/main/src/components/Carousel/CarouselPagination.jss.ts
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { ZIndex } from '../../enums/ZIndex';
const styles = {
@@ -9,13 +9,13 @@ const styles = {
alignItems: 'center',
height: '3.5rem',
padding: '0 1rem',
- backgroundColor: ThemingParameters.sapUiPageFooterBackground
+ backgroundColor: ThemingParameters.sapPageFooter_Background
},
paginationTop: {
- borderBottom: `1px solid ${ThemingParameters.sapUiPageFooterBorderColor}`
+ borderBottom: `1px solid ${ThemingParameters.sapPageFooter_BorderColor}`
},
paginationBottom: {
- borderTop: `1px solid ${ThemingParameters.sapUiPageFooterBorderColor}`
+ borderTop: `1px solid ${ThemingParameters.sapPageFooter_BorderColor}`
},
paginationIndicator: {
padding: '0rem 1rem',
@@ -39,19 +39,19 @@ const styles = {
borderRadius: '50%',
alignSelf: 'center',
boxSizing: 'border-box',
- backgroundColor: ThemingParameters.sapUiContentNonInteractiveIconColor
+ backgroundColor: ThemingParameters.sapContent_NonInteractiveIconColor
},
paginationIconActive: {
margin: '0 0.25rem',
width: '0.5rem',
height: '0.5rem',
- backgroundColor: ThemingParameters.sapUiSelected
+ backgroundColor: ThemingParameters.sapSelectedColor
},
paginationArrow: {
boxShadow: 'none',
- border: `1px solid ${ThemingParameters.sapUiButtonBorderColor}`,
- backgroundColor: ThemingParameters.sapUiButtonBackground,
- color: ThemingParameters.sapUiButtonBorderColor,
+ border: `1px solid ${ThemingParameters.sapButton_BorderColor}`,
+ backgroundColor: ThemingParameters.sapButton_Background,
+ color: ThemingParameters.sapButton_BorderColor,
height: '2rem',
width: '2rem',
borderRadius: '50%',
@@ -60,9 +60,9 @@ const styles = {
alignItems: 'center',
cursor: 'pointer',
'&:active': {
- border: `1px solid ${ThemingParameters.sapUiButtonEmphasizedActiveBorderColor}`,
- backgroundColor: ThemingParameters.sapUiButtonEmphasizedActiveBackground,
- color: ThemingParameters.sapUiButtonEmphasizedTextColor
+ border: `1px solid ${ThemingParameters.sapButton_Emphasized_Active_BorderColor}`,
+ backgroundColor: ThemingParameters.sapButton_Emphasized_Active_Background,
+ color: ThemingParameters.sapButton_Emphasized_TextColor
}
},
'@global html[dir="rtl"] div[data-value="paginationArrow"] ui5-icon': {
@@ -70,7 +70,7 @@ const styles = {
},
paginationArrowContent: {
'& $paginationArrow': {
- boxShadow: ThemingParameters.sapUiShadowLevel1,
+ boxShadow: ThemingParameters.sapContent_Shadow1,
'&:first-child': {
position: 'absolute',
top: 'calc(50% - 2.75rem)',
diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 2ad42dc5793..c696b1c210f 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
outerContainer: {
@@ -6,13 +6,13 @@ const styles = {
paddingLeft: '2rem',
paddingRight: '2rem',
paddingBottom: '1px',
- background: ThemingParameters.sapUiObjectHeaderBackground,
- boxShadow: ThemingParameters.sapUiShadowHeader
+ background: ThemingParameters.sapObjectHeader_Background,
+ boxShadow: ThemingParameters.sapContent_HeaderShadow
},
filterBarHeader: {
alignItems: 'center',
display: 'flex',
- background: ThemingParameters.sapUiObjectHeaderBackground,
+ background: ThemingParameters.sapObjectHeader_Background,
minHeight: '3rem',
paddingBottom: '0.5rem',
boxShadow: 'none',
@@ -27,7 +27,7 @@ const styles = {
flexWrap: 'wrap',
paddingTop: '1rem',
paddingBottom: '1rem',
- background: ThemingParameters.sapUiObjectHeaderBackground,
+ background: ThemingParameters.sapObjectHeader_Background,
transition: 'max-height 0.2s ease-out, opacity 0.2s ease-in'
},
filterAreaClosed: {
@@ -48,8 +48,8 @@ const styles = {
},
// is being applied to the span which represents the InfoLabel Text
label: {
- fontSize: ThemingParameters.sapMFontSmallSize,
- fontFamily: ThemingParameters.sapUiFontFamily,
+ fontSize: ThemingParameters.sapFontSmallSize,
+ fontFamily: ThemingParameters.sapFontFamily,
lineHeight: '1.125rem',
fontWeight: 600,
letterSpacing: '0.0125rem',
@@ -59,7 +59,7 @@ const styles = {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'inline-block',
- color: ThemingParameters.sapUiBaseText
+ color: ThemingParameters.sapTextColor
},
// specific padding needed for purely numeric input
numeric: {},
diff --git a/packages/main/src/components/Form/Form.jss.ts b/packages/main/src/components/Form/Form.jss.ts
index 961a6db695e..2c1ac493c86 100644
--- a/packages/main/src/components/Form/Form.jss.ts
+++ b/packages/main/src/components/Form/Form.jss.ts
@@ -1,8 +1,8 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
formTitle: {
- borderBottom: `1px solid ${ThemingParameters.sapUiGroupTitleBorderColor}`
+ borderBottom: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`
},
formTitlePaddingBottom: {
paddingBottom: '2em'
diff --git a/packages/main/src/components/Loader/Loader.jss.ts b/packages/main/src/components/Loader/Loader.jss.ts
index 14446f23d0c..0f85fb1e2d0 100644
--- a/packages/main/src/components/Loader/Loader.jss.ts
+++ b/packages/main/src/components/Loader/Loader.jss.ts
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
//todo use theme colors when available
export const styles = {
@@ -10,7 +10,7 @@ export const styles = {
height: '0.25rem',
width: '100%',
'&$loaderDeterminate': {
- background: `linear-gradient(to right, ${ThemingParameters.sapUiContentIconColor}, ${ThemingParameters.sapUiContentIconColor})`,
+ background: `linear-gradient(to right, ${ThemingParameters.sapContent_IconColor}, ${ThemingParameters.sapContent_IconColor})`,
backgroundColor: 'rgba(8, 84, 160, 0.15)',
backgroundRepeat: 'repeat-y'
},
@@ -19,8 +19,8 @@ export const styles = {
to right,
rgba(8, 84, 160, 0) 0px,
rgba(8, 84, 160, 1) calc(50% - 2rem),
- ${ThemingParameters.sapUiContentIconColor} calc(50% - 2rem),
- ${ThemingParameters.sapUiContentIconColor} calc(50% + 2rem),
+ ${ThemingParameters.sapContent_IconColor} calc(50% - 2rem),
+ ${ThemingParameters.sapContent_IconColor} calc(50% + 2rem),
rgba(8, 84, 160, 1) calc(50% + 2rem),
rgba(8, 84, 160, 0) 100%
)`,
diff --git a/packages/main/src/components/MessageBox/MessageBox.jss.ts b/packages/main/src/components/MessageBox/MessageBox.jss.ts
index 41253ef323f..5b16f970f5a 100644
--- a/packages/main/src/components/MessageBox/MessageBox.jss.ts
+++ b/packages/main/src/components/MessageBox/MessageBox.jss.ts
@@ -1,5 +1,5 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const style = {
header: {
@@ -18,48 +18,48 @@ const style = {
padding: '0.25rem 1rem',
boxSizing: 'border-box',
borderBottom: `1px solid var(--messageBoxBorderColor)`,
- color: ThemingParameters.sapUiContentLabelColor,
+ color: ThemingParameters.sapContent_LabelColor,
fontSize: '1rem',
'&[data-type="Error"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiErrorBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiErrorBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapErrorBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapErrorBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiNegativeElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNegativeElementColor
}
},
'&[data-type="Warning"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiWarningBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiWarningBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapWarningBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapWarningBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiCriticalElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapCriticalElementColor
}
},
'&[data-type="Success"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiSuccessBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiSuccessBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapSuccessBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapSuccessBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiPositiveElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapPositiveElementColor
}
},
'&[data-type="Confirm"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiNeutralBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiNeutralBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapNeutralBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapNeutralBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiNeutralElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
}
},
'&[data-type="Information"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiNeutralBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiNeutralBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapNeutralBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapNeutralBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiNeutralElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
}
},
'&[data-type="Highlight"]': {
- '--sapUiPageFooterBorderColor': ThemingParameters.sapUiInformationBorder,
- '--messageBoxBorderColor': ThemingParameters.sapUiInformationBorder,
+ '--sapPageFooter_BorderColor': ThemingParameters.sapInformationBorderColor,
+ '--messageBoxBorderColor': ThemingParameters.sapInformationBorderColor,
'& $icon': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiInformativeElement
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapInformativeElementColor
}
}
},
diff --git a/packages/main/src/components/MessageToast/MessageToast.jss.ts b/packages/main/src/components/MessageToast/MessageToast.jss.ts
index deaf9b3c24c..62dce21718e 100644
--- a/packages/main/src/components/MessageToast/MessageToast.jss.ts
+++ b/packages/main/src/components/MessageToast/MessageToast.jss.ts
@@ -1,28 +1,28 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
export default {
messageToast: {
padding: '0 !important',
borderRadius: '0.25rem !important',
textAlign: 'center !important',
- boxShadow: ThemingParameters.sapUiShadowLevel2,
+ boxShadow: ThemingParameters.sapContent_Shadow2,
cursor: 'text',
minHeight: 'auto !important',
- background: `${ThemingParameters.sapUiListBackground} !important`
+ background: `${ThemingParameters.sapList_Background} !important`
},
messageToastContainer: {
maxWidth: '15rem !important'
},
messageToastBody: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
textAlign: 'center',
textOverflow: 'ellipsis',
whiteSpace: 'pre-line',
wordWrap: 'break-word',
padding: '1rem !important',
- color: `${ThemingParameters.sapUiListTextColor} !important`,
+ color: `${ThemingParameters.sapList_TextColor} !important`,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
diff --git a/packages/main/src/components/MessageToast/index.tsx b/packages/main/src/components/MessageToast/index.tsx
index 65dd2c00065..0da358c79a1 100644
--- a/packages/main/src/components/MessageToast/index.tsx
+++ b/packages/main/src/components/MessageToast/index.tsx
@@ -1,7 +1,7 @@
import '@ui5/webcomponents-icons/dist/icons/message-error';
import '@ui5/webcomponents-icons/dist/icons/message-warning';
import '@ui5/webcomponents-icons/dist/icons/sys-enter';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
import React from 'react';
@@ -19,13 +19,13 @@ const coloredStyles = {
minHeight: '1.375rem'
},
Success: {
- color: ThemingParameters.sapUiPositiveElement
+ color: ThemingParameters.sapPositiveElementColor
},
Error: {
- color: ThemingParameters.sapUiNegativeElement
+ color: ThemingParameters.sapNegativeElementColor
},
Warning: {
- color: ThemingParameters.sapUiCriticalElement
+ color: ThemingParameters.sapCriticalElementColor
}
};
diff --git a/packages/main/src/components/Notification/Notification.jss.ts b/packages/main/src/components/Notification/Notification.jss.ts
index 829c2dca2f0..0aaac16a9d3 100644
--- a/packages/main/src/components/Notification/Notification.jss.ts
+++ b/packages/main/src/components/Notification/Notification.jss.ts
@@ -1,29 +1,29 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const style = {
notificationContainer: {
width: '100%',
maxWidth: '60rem',
- backgroundColor: ThemingParameters.sapUiListBackground,
- boxShadow: ThemingParameters.sapUiShadowLevel0,
+ backgroundColor: ThemingParameters.sapList_Background,
+ boxShadow: ThemingParameters.sapContent_Shadow0,
display: 'flex',
flexDirection: 'row',
position: 'relative',
overflow: 'hidden',
'&:hover': {
- backgroundColor: ThemingParameters.sapUiListHoverBackground
+ backgroundColor: ThemingParameters.sapList_Hover_Background
},
'&:active': {
- backgroundColor: ThemingParameters.sapUiListHoverBackground
+ backgroundColor: ThemingParameters.sapList_Hover_Background
}
},
notificationContainerChild: {
- backgroundColor: ThemingParameters.sapUiListHeaderBackground
+ backgroundColor: ThemingParameters.sapList_HeaderBackground
},
header: {
display: 'flex',
flexDirection: 'row',
- boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapUiPageHeaderBorderColor}`,
+ boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapPageHeader_BorderColor}`,
padding: '1rem 0 1rem 1.25rem',
alignItems: 'center'
},
@@ -38,9 +38,9 @@ const style = {
paddingRight: '40px'
},
title: {
- color: ThemingParameters.sapUiGroupTitleTextColor,
- fontFamily: ThemingParameters.sapUiFontHeaderFamily,
- textShadow: ThemingParameters.sapUiShadowText,
+ color: ThemingParameters.sapGroup_TitleTextColor,
+ fontFamily: ThemingParameters.sapFontHeaderFamily,
+ textShadow: ThemingParameters.sapContent_TextShadow,
fontSize: '14px',
paddingRight: '40px'
},
@@ -69,7 +69,7 @@ const style = {
paddingRight: '0.375rem'
},
descriptionEllipsised: {
- color: ThemingParameters.sapUiContentLabelColor,
+ color: ThemingParameters.sapContent_LabelColor,
overflow: 'hidden',
textAlign: 'left',
textOverflow: 'ellipsis',
@@ -80,13 +80,13 @@ const style = {
WebkitBoxOrient: 'vertical'
},
descriptionFull: {
- color: ThemingParameters.sapUiContentLabelColor
+ color: ThemingParameters.sapContent_LabelColor
},
metadata: {
paddingTop: '0.375rem',
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
- color: ThemingParameters.sapUiContentLabelColor,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
+ color: ThemingParameters.sapContent_LabelColor,
fontWeight: 'normal',
display: 'flex',
flexWrap: 'wrap',
@@ -100,23 +100,23 @@ const style = {
minWidth: '0.375rem',
height: 'auto'
},
- high: { backgroundColor: ThemingParameters.sapUiErrorBorder },
- medium: { backgroundColor: ThemingParameters.sapUiWarningBorder },
- low: { backgroundColor: ThemingParameters.sapUiSuccessBorder },
- none: { backgroundColor: ThemingParameters.sapUiNeutralBorder },
+ high: { backgroundColor: ThemingParameters.sapErrorBorderColor },
+ medium: { backgroundColor: ThemingParameters.sapWarningBorderColor },
+ low: { backgroundColor: ThemingParameters.sapSuccessBorderColor },
+ none: { backgroundColor: ThemingParameters.sapNeutralBorderColor },
semanticIcon: {
paddingRight: '0.375rem',
width: '1rem',
display: 'flex'
},
error: {
- color: ThemingParameters.sapUiNegativeElement
+ color: ThemingParameters.sapNegativeElementColor
},
warning: {
- color: ThemingParameters.sapUiCriticalElement
+ color: ThemingParameters.sapCriticalElementColor
},
success: {
- color: ThemingParameters.sapUiPositiveElement
+ color: ThemingParameters.sapPositiveElementColor
},
contentAction: {
display: 'flex',
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
index 9c01ebf86ce..79bec696f0b 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
+++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
objectPage: {
@@ -9,8 +9,8 @@ const styles = {
flexDirection: 'column',
isolation: 'isolate',
whiteSpace: 'normal',
- fontFamily: ThemingParameters.sapUiFontFamily,
- backgroundColor: ThemingParameters.sapUiBaseBG
+ fontFamily: ThemingParameters.sapFontFamily,
+ backgroundColor: ThemingParameters.sapBackgroundColor
},
contentContainer: {
overflowX: 'hidden',
@@ -28,8 +28,8 @@ const styles = {
},
anchorBar: {
paddingLeft: '2rem',
- backgroundColor: ThemingParameters.sapUiObjectHeaderBackground,
- boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapUiObjectHeaderBorderColor}, inset 0 0.0625rem ${ThemingParameters.sapUiObjectHeaderBorderColor}`,
+ backgroundColor: ThemingParameters.sapObjectHeader_Background,
+ boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}, inset 0 0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}`,
display: 'flex',
height: '2.75rem',
minHeight: '2.75rem',
@@ -48,7 +48,7 @@ const styles = {
// overflowX: 'hidden',
// overflowY: 'auto',
overflow: 'hidden',
- backgroundColor: ThemingParameters.sapUiBaseBG,
+ backgroundColor: ThemingParameters.sapBackgroundColor,
'&:after': {
clear: 'both',
display: 'table',
@@ -56,13 +56,13 @@ const styles = {
}
},
fillerDiv: {
- backgroundColor: ThemingParameters.sapUiBaseBG
+ backgroundColor: ThemingParameters.sapBackgroundColor
},
// header
header: {
flexShrink: 0,
position: 'relative',
- backgroundColor: ThemingParameters.sapUiObjectHeaderBackground,
+ backgroundColor: ThemingParameters.sapObjectHeader_Background,
'&$stickied': {
'& $image': {
opacity: '1',
@@ -73,7 +73,7 @@ const styles = {
}
},
contentHeader: {
- backgroundColor: ThemingParameters.sapUiObjectHeaderBackground,
+ backgroundColor: ThemingParameters.sapObjectHeader_Background,
position: 'relative'
},
titleBar: {
@@ -97,7 +97,7 @@ const styles = {
display: 'inline-block',
margin: '0',
fontWeight: 'normal',
- color: ThemingParameters.sapUiBaseText
+ color: ThemingParameters.sapTextColor
},
subTitle: {
display: 'inline-block',
@@ -106,7 +106,7 @@ const styles = {
paddingTop: '0.5rem',
paddingBottom: '0.5rem',
fontSize: '0.875rem',
- color: ThemingParameters.sapUiContentLabelColor
+ color: ThemingParameters.sapContent_LabelColor
},
actions: {
position: 'absolute',
diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
index aa91b9f2cba..b0a604d1114 100644
--- a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
@@ -1,6 +1,6 @@
import '@ui5/webcomponents-icons/dist/icons/slim-arrow-down';
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { ScrollLink } from '@ui5/webcomponents-react-base/lib/ScrollLink';
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
import { List } from '@ui5/webcomponents-react/lib/List';
@@ -32,18 +32,18 @@ const anchorButtonStyles = {
}
},
button: {
- color: ThemingParameters.sapUiContentLabelColor,
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ color: ThemingParameters.sapContent_LabelColor,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
cursor: 'pointer'
},
selected: {
- color: ThemingParameters.sapUiSelected,
+ color: ThemingParameters.sapSelectedColor,
minWidth: '2rem',
textAlign: 'center',
'&:after': {
content: '""',
- borderBottom: `0.188rem solid ${ThemingParameters.sapUiSelected}`,
+ borderBottom: `0.188rem solid ${ThemingParameters.sapSelectedColor}`,
width: '100%',
position: 'absolute',
bottom: 0,
diff --git a/packages/main/src/components/ObjectPage/ObjectPageScrollBar.tsx b/packages/main/src/components/ObjectPage/ObjectPageScrollBar.tsx
index b64929c12f3..47f5cc0a3c8 100644
--- a/packages/main/src/components/ObjectPage/ObjectPageScrollBar.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPageScrollBar.tsx
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import React, { FC, RefObject, useMemo } from 'react';
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
import { ZIndex } from '../../enums/ZIndex';
@@ -16,7 +16,7 @@ const styles = {
overflow: 'hidden',
height: '100%',
zIndex: ZIndex.ResponsivePopover,
- backgroundColor: ThemingParameters.sapUiObjectHeaderBackground,
+ backgroundColor: ThemingParameters.sapObjectHeader_Background,
'& ::-webkit-scrollbar': {
backgroundColor: '#ffffff'
},
diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
index 25cc2ebc785..6b8e33b6f4c 100644
--- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
+++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
@@ -1,23 +1,23 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
header: {
padding: '0 3rem 0 2.5rem',
- borderBottom: `1px solid ${ThemingParameters.sapUiGroupTitleBorderColor}`,
+ borderBottom: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`,
boxSizing: 'border-box',
height: '2.75rem'
},
title: {
height: '2.75rem',
- color: ThemingParameters.sapUiBaseText,
- fontSize: ThemingParameters.sapMFontHeader4Size,
- borderBottom: `1px solid ${ThemingParameters.sapUiActive}`,
+ color: ThemingParameters.sapTextColor,
+ fontSize: ThemingParameters.sapFontHeader4Size,
+ borderBottom: `1px solid ${ThemingParameters.sapActiveColor}`,
display: 'inline-block',
maxWidth: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
- fontFamily: ThemingParameters.sapUiFontFamily
+ fontFamily: ThemingParameters.sapFontFamily
},
uppercase: {
textTransform: 'uppercase'
@@ -27,7 +27,7 @@ const styles = {
},
sectionContentInner: {
padding: '1rem 2rem 2rem 2.5rem',
- fontFamily: ThemingParameters.sapUiFontFamily
+ fontFamily: ThemingParameters.sapFontFamily
}
};
diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx
index b9a169305e2..9181be676fa 100644
--- a/packages/main/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSubSection/index.tsx
@@ -1,4 +1,4 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
@@ -18,13 +18,13 @@ const styles = {
objectPageSubSection: {
padding: '1rem 0',
'&:focus': {
- outline: `1px dotted ${ThemingParameters.sapUiContentFocusColor}`,
+ outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`,
outlineOffset: '-1px'
}
},
objectPageSubSectionHeaderTitle: {
- fontSize: ThemingParameters.sapMFontHeader5Size,
- color: ThemingParameters.sapUiGroupTitleTextColor,
+ fontSize: ThemingParameters.sapFontHeader5Size,
+ color: ThemingParameters.sapGroup_TitleTextColor,
marginBottom: '0.5rem'
},
subSectionContent: {
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
index e9591cedfa1..fa851f6870c 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
@@ -1,35 +1,35 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
objectStatus: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
position: 'relative',
display: 'flex'
},
iconSuccess: {
'& ui5-icon': {
- color: ThemingParameters.sapUiPositiveText
+ color: ThemingParameters.sapPositiveTextColor
}
},
iconWarning: {
'& ui5-icon': {
- color: ThemingParameters.sapUiCriticalText
+ color: ThemingParameters.sapCriticalTextColor
}
},
iconError: {
'& ui5-icon': {
- color: ThemingParameters.sapUiNegativeText
+ color: ThemingParameters.sapNegativeTextColor
}
},
iconNone: {
'& ui5-icon': {
- color: ThemingParameters.sapUiNeutralText
+ color: ThemingParameters.sapNeutralTextColor
}
},
iconInformation: {
- color: ThemingParameters.sapUiInformativeElement
+ color: ThemingParameters.sapInformativeElementColor
},
icon: {
marginRight: '0.5rem',
@@ -38,19 +38,19 @@ const styles = {
lineHeight: 'inherit'
},
textSuccess: {
- color: ThemingParameters.sapUiPositiveText
+ color: ThemingParameters.sapPositiveTextColor
},
textError: {
- color: ThemingParameters.sapUiNegativeText
+ color: ThemingParameters.sapNegativeTextColor
},
textWarning: {
- color: ThemingParameters.sapUiCriticalText
+ color: ThemingParameters.sapCriticalTextColor
},
textInformation: {
- color: ThemingParameters.sapUiInformativeText
+ color: ThemingParameters.sapInformativeTextColor
},
textNone: {
- color: ThemingParameters.sapUiNeutralText
+ color: ThemingParameters.sapNeutralTextColor
}
};
diff --git a/packages/main/src/components/Page/Page.jss.ts b/packages/main/src/components/Page/Page.jss.ts
index de9e0589e44..44cfddf794c 100644
--- a/packages/main/src/components/Page/Page.jss.ts
+++ b/packages/main/src/components/Page/Page.jss.ts
@@ -1,5 +1,5 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
/**
* Style Class Generator Function
@@ -83,13 +83,13 @@ const styles = {
}
},
backgroundStandard: {
- background: ThemingParameters.sapUiBaseBG
+ background: ThemingParameters.sapBackgroundColor
},
backgroundSolid: {
- background: ThemingParameters.sapUiShellBackground
+ background: ThemingParameters.sapShell_Background
},
backgroundList: {
- background: ThemingParameters.sapUiGroupContentBackground
+ background: ThemingParameters.sapGroup_ContentBackground
},
backgroundTransparent: {
background: 'transparent'
@@ -113,10 +113,10 @@ const styles = {
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
- background: ThemingParameters.sapUiPageHeaderBackground,
+ background: ThemingParameters.sapPageHeader_Background,
'& >*': {
- background: ThemingParameters.sapUiPageHeaderBackground,
- boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapUiPageHeaderBorderColor}`
+ background: ThemingParameters.sapPageHeader_Background,
+ boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapPageHeader_BorderColor}`
}
},
contentSection: {
@@ -130,7 +130,7 @@ const styles = {
// marginTop: '1px',
// marginBottom: '1px',
boxSizing: 'border-box'
- // backgroundColor: ThemingParameters.sapUiBaseBG
+ // backgroundColor: ThemingParameters.sapBackgroundColor
},
pageWithHeader: {
'& $contentSection': {
@@ -147,11 +147,11 @@ const styles = {
bottom: '0',
left: '0',
width: '100%',
- borderTop: `1px solid ${ThemingParameters.sapUiPageFooterBorderColor}`,
+ borderTop: `1px solid ${ThemingParameters.sapPageFooter_BorderColor}`,
'& >*': {
height: CssSizeVariables.sapWcrBarHeight,
- background: ThemingParameters.sapUiPageFooterBackground,
- borderTop: `0.0625rem solid ${ThemingParameters.sapUiPageFooterBorderColor}`
+ background: ThemingParameters.sapPageFooter_Background,
+ borderTop: `0.0625rem solid ${ThemingParameters.sapPageFooter_BorderColor}`
}
}
};
diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts
index 7e968e9378c..008ea8c5f74 100644
--- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts
+++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts
@@ -1,5 +1,5 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
progressBarRemaining: {
@@ -21,14 +21,14 @@ const styles = {
WebkitFlexDirection: 'row',
boxSizing: 'border-box',
outline: 'none',
- background: ThemingParameters.sapUiFieldBackground,
+ background: ThemingParameters.sapField_Background,
width: '100%',
height: CssSizeVariables.sapWcrProgressIndicatorHeight,
minWidth: '4rem',
minHeight: '1rem',
padding: '0',
margin: CssSizeVariables.sapWcrProgressIndicatorMargin,
- border: `1px solid ${ThemingParameters.sapUiFieldBorderColor}`,
+ border: `1px solid ${ThemingParameters.sapField_BorderColor}`,
borderRadius: '0.5rem',
overflow: 'hidden'
},
@@ -42,30 +42,30 @@ const styles = {
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontSmallSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSmallSize,
fontWeight: 'normal'
},
progressBarTextColorLow: {
- color: ThemingParameters.sapUiBaseText
+ color: ThemingParameters.sapTextColor
},
progressBarTextColorHigh: {
- color: ThemingParameters.sapUiContentContrastTextColor
+ color: ThemingParameters.sapContent_ContrastTextColor
},
stateNone: {
- backgroundColor: ThemingParameters.sapUiNeutralElement
+ backgroundColor: ThemingParameters.sapNeutralElementColor
},
stateSuccess: {
- backgroundColor: ThemingParameters.sapUiPositiveElement
+ backgroundColor: ThemingParameters.sapPositiveElementColor
},
stateWarning: {
- backgroundColor: ThemingParameters.sapUiCriticalElement
+ backgroundColor: ThemingParameters.sapCriticalElementColor
},
stateError: {
- backgroundColor: ThemingParameters.sapUiNegativeElement
+ backgroundColor: ThemingParameters.sapNegativeElementColor
},
stateInformation: {
- backgroundColor: ThemingParameters.sapUiInformativeElement
+ backgroundColor: ThemingParameters.sapInformativeElementColor
}
};
diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
index d4902e8a126..6a4d8850ec5 100644
--- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
+++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
@@ -1,9 +1,9 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
const styles = {
segmentedButtonItem: {
- fontFamily: ThemingParameters.sapUiFontFamily,
+ fontFamily: ThemingParameters.sapFontFamily,
listStyle: 'none',
overflow: 'hidden',
WebkitTapHighlightColor: 'rgba(255, 255, 255, 0)',
@@ -16,7 +16,7 @@ const styles = {
display: 'inline-block',
fontSize: '0.875rem',
'&:focus': {
- outline: `1px dotted ${ThemingParameters.sapUiContentFocusColor}`
+ outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`
},
height: CssSizeVariables.sapWcrSegmentedButtonItemHeight,
lineHeight: CssSizeVariables.sapWcrSegmentedButtonItemLineHeight,
@@ -29,26 +29,26 @@ const styles = {
'&:last-child': {
borderTopRightRadius: '0.25rem',
borderBottomRightRadius: '0.25rem',
- borderRightColor: ThemingParameters.sapUiSegmentedButtonBorderColor
+ borderRightColor: ThemingParameters.sapButton_BorderColor
},
- color: ThemingParameters.sapUiSegmentedButtonTextColor,
- border: `1px solid ${ThemingParameters.sapUiSegmentedButtonBorderColor}`,
+ color: ThemingParameters.sapButton_TextColor,
+ border: `1px solid ${ThemingParameters.sapButton_BorderColor}`,
borderRightColor: 'transparent',
- backgroundColor: ThemingParameters.sapUiSegmentedButtonBackground
+ backgroundColor: ThemingParameters.sapButton_Background
},
selected: {
- background: ThemingParameters.sapUiSegmentedButtonSelectedBackground,
- color: ThemingParameters.sapUiSegmentedButtonSelectedTextColor,
- borderColor: ThemingParameters.sapUiSegmentedButtonSelectedHoverBorderColor,
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiContentContrastIconColor,
+ background: ThemingParameters.sapButton_Selected_Background,
+ color: ThemingParameters.sapButton_Selected_TextColor,
+ borderColor: ThemingParameters.sapButton_Selected_BorderColor,
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapContent_ContrastIconColor,
'$:active': {
- background: ThemingParameters.sapUiButtonActiveBackground,
- color: ThemingParameters.sapUiButtonActiveTextColor
+ background: ThemingParameters.sapButton_Active_Background,
+ color: ThemingParameters.sapButton_Active_TextColor
}
},
focusableItem: {
'&:not($selected):hover': {
- background: ThemingParameters.sapUiSegmentedButtonHoverBackground
+ background: ThemingParameters.sapButton_Hover_Background
}
},
disabled: { textShadow: 'none', cursor: 'default', opacity: '0.4' },
diff --git a/packages/main/src/components/SideNavigation/SideNavigation.jss.ts b/packages/main/src/components/SideNavigation/SideNavigation.jss.ts
index bdf5b9a6c26..a5c4836fa17 100644
--- a/packages/main/src/components/SideNavigation/SideNavigation.jss.ts
+++ b/packages/main/src/components/SideNavigation/SideNavigation.jss.ts
@@ -1,10 +1,10 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
export const sideNavigationStyles = {
sideNavigation: {
height: '100%',
- borderRight: `0.0625rem solid ${ThemingParameters.sapUiGroupContentBorderColor}`,
- backgroundColor: ThemingParameters.sapUiListBackground,
+ borderRight: `0.0625rem solid ${ThemingParameters.sapGroup_ContentBorderColor}`,
+ backgroundColor: ThemingParameters.sapList_Background,
display: 'flex',
flexDirection: 'column',
transition: 'width 500ms'
@@ -30,6 +30,6 @@ export const sideNavigationStyles = {
footerItemsSeparator: {
margin: '0.25rem 0.875rem',
height: '0.125rem',
- backgroundColor: ThemingParameters.sapUiListBorderColor
+ backgroundColor: ThemingParameters.sapList_BorderColor
}
};
diff --git a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts
index f288950acc2..8fd50c80f73 100644
--- a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts
+++ b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts
@@ -1,12 +1,12 @@
import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
export const sideNavigationListItemStyles = {
listItem: {
'&:active': {
- '--sapUiBaseText': ThemingParameters.sapUiListActiveTextColor,
+ '--sapTextColor': ThemingParameters.sapList_Active_TextColor,
'& $icon, & $expandArrow': {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiListActiveTextColor
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapList_Active_TextColor
}
}
},
@@ -22,7 +22,7 @@ export const sideNavigationListItemStyles = {
},
icon: {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiContentIconColor,
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapContent_IconColor,
width: CssSizeVariables.sapWcrSideNavigationItemIconSize,
height: CssSizeVariables.sapWcrSideNavigationItemIconSize,
padding: CssSizeVariables.sapWcrSideNavigationItemIconPadding,
@@ -32,7 +32,7 @@ export const sideNavigationListItemStyles = {
text: {},
expandArrow: {
- '--sapUiContentNonInteractiveIconColor': ThemingParameters.sapUiContentIconColor,
+ '--sapContent_NonInteractiveIconColor': ThemingParameters.sapContent_IconColor,
width: '0.875rem',
height: '0.875rem',
padding: CssSizeVariables.sapWcrSideNavigationItemExpandedArrowPadding,
@@ -48,7 +48,7 @@ export const sideNavigationListItemStyles = {
height: '0',
borderStyle: 'solid',
borderWidth: '0 0 6px 6px',
- borderColor: `transparent transparent ${ThemingParameters.sapUiContentIconColor} transparent`,
+ borderColor: `transparent transparent ${ThemingParameters.sapContent_IconColor} transparent`,
position: 'absolute',
right: '0.125rem',
bottom: '0.1875rem'
diff --git a/packages/main/src/components/Text/Text.jss.ts b/packages/main/src/components/Text/Text.jss.ts
index c6db1ad2687..39568cd4e80 100644
--- a/packages/main/src/components/Text/Text.jss.ts
+++ b/packages/main/src/components/Text/Text.jss.ts
@@ -1,12 +1,12 @@
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
export const TextStyles = {
// Text Style
text: {
- fontFamily: ThemingParameters.sapUiFontFamily,
- fontSize: ThemingParameters.sapMFontMediumSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ fontSize: ThemingParameters.sapFontSize,
fontWeight: 'normal',
- color: ThemingParameters.sapUiBaseText,
+ color: ThemingParameters.sapTextColor,
display: 'inline-block',
boxSizing: 'border-box',
whiteSpace: 'pre-line',
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
index c233dad2bb3..742b778d765 100644
--- a/packages/main/src/components/ThemeProvider/index.tsx
+++ b/packages/main/src/components/ThemeProvider/index.tsx
@@ -2,7 +2,7 @@ import { getCompactSize } from '@ui5/webcomponents-base/dist/config/CompactSize'
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
import { createGenerateClassName } from '@ui5/webcomponents-react-base/lib/createGenerateClassName';
import { cssVariablesStyles } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import * as sap_fiori_3 from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
import { MessageToast } from '@ui5/webcomponents-react/lib/MessageToast';
import { Jss } from 'jss';
@@ -55,7 +55,7 @@ const ThemeProvider: FC = (props) => {
return {
theme,
contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
- parameters: sap_fiori_3
+ parameters: ThemingParameters
};
}, [theme, isCompactSize]);
diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx
index 528472412b8..080fb1f3c23 100644
--- a/packages/main/src/components/VariantManagement/index.tsx
+++ b/packages/main/src/components/VariantManagement/index.tsx
@@ -1,6 +1,6 @@
import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import * as ThemingParameters from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
import { Button } from '@ui5/webcomponents-react/lib/Button';
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
@@ -41,22 +41,22 @@ const styles = {
},
VariantManagementText: {
cursor: 'pointer',
- color: ThemingParameters.sapUiButtonTextColor,
+ color: ThemingParameters.sapButton_TextColor,
'&:hover': {
- color: ThemingParameters.sapUiHighlight
+ color: ThemingParameters.sapHighlightColor
},
'&:active': {
- color: ThemingParameters.sapUiHighlight
+ color: ThemingParameters.sapHighlightColor
}
},
disabled: {
- color: ThemingParameters.sapUiGroupTitleTextColor,
+ color: ThemingParameters.sapGroup_TitleTextColor,
cursor: 'default',
'&:hover': {
- color: ThemingParameters.sapUiGroupTitleTextColor
+ color: ThemingParameters.sapGroup_TitleTextColor
},
'&:active': {
- color: ThemingParameters.sapUiGroupTitleTextColor
+ color: ThemingParameters.sapGroup_TitleTextColor
}
},
footer: {
diff --git a/packages/main/src/interfaces/JSSTheme.ts b/packages/main/src/interfaces/JSSTheme.ts
index 95e43775103..fa7c3de6865 100644
--- a/packages/main/src/interfaces/JSSTheme.ts
+++ b/packages/main/src/interfaces/JSSTheme.ts
@@ -1,9 +1,9 @@
-import * as sap_fiori_3 from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { ContentDensity } from '../enums/ContentDensity';
import { Themes } from '../enums/Themes';
export interface JSSTheme {
theme: Themes;
contentDensity: ContentDensity;
- parameters: typeof sap_fiori_3;
+ parameters: typeof ThemingParameters;
}