From ce2aed9e2a649a29900f300dc3495a85f46e04c9 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Mon, 1 Jul 2019 16:37:31 +0200 Subject: [PATCH] refactor(Theming): Use UI5 Web Components CSS Variables (#46) Drop own styling layer and reuse UI5 Web Components CSS Variables Closes #37, Closes #45 --- config/jest.config.js | 5 +- package.json | 2 +- packages/base/scripts/cssVariables/parse.js | 22 + packages/base/src/HSLColor.test.ts | 19 - packages/base/src/sap_fiori_3.ts | 1862 +++++------------ .../main/__karma_snapshots__/ObjectPage.md | 1024 +++++---- .../ObjectPageSubSection.md | 2 +- .../__karma_snapshots__/ProgressIndicator.md | 16 +- .../header/AnalyticalCardHeader.jss.ts | 4 +- .../src/components/Avatar/Avatar.karma.tsx | 4 +- packages/main/src/components/Avatar/index.tsx | 2 + .../Carousel/CarouselPagination.jss.ts | 18 +- .../components/ObjectPage/AnchorButton.tsx | 41 + .../components/ObjectPage/ObjectPage.jss.ts | 51 +- .../ObjectPage/ObjectPageAnchor.tsx | 79 +- .../ObjectPage/ObjectPageContent.tsx | 39 + .../main/src/components/ObjectPage/index.tsx | 228 +- .../ObjectPageSection.jss.ts | 16 +- .../components/ObjectPageSubSection/index.tsx | 30 +- .../ObjectStatus/ObjectStatus.jss.ts | 16 +- .../ProgressIndicator.jss.ts | 46 +- .../ProgressIndicator/demo.stories.tsx | 8 +- .../components/ProgressIndicator/index.tsx | 23 +- .../SegmentedButtonItem.jss.ts | 2 +- .../components/SegmentedButtonItem/index.tsx | 3 +- .../src/components/ThemeProvider/index.tsx | 11 + shared/tests/mock/StyleInjection.js | 3 + shared/tests/mock/WebComponentsBoot.js | 5 + yarn.lock | 94 +- 29 files changed, 1428 insertions(+), 2247 deletions(-) create mode 100644 packages/base/scripts/cssVariables/parse.js delete mode 100644 packages/base/src/HSLColor.test.ts create mode 100644 packages/main/src/components/ObjectPage/AnchorButton.tsx create mode 100644 packages/main/src/components/ObjectPage/ObjectPageContent.tsx create mode 100644 shared/tests/mock/StyleInjection.js create mode 100644 shared/tests/mock/WebComponentsBoot.js diff --git a/config/jest.config.js b/config/jest.config.js index b541cef337e..add2b52f84f 100644 --- a/config/jest.config.js +++ b/config/jest.config.js @@ -1,6 +1,5 @@ const PATHS = require('./paths'); const path = require('path'); -// const webComponentConfigMock = require('./webComponentConfigMock'); module.exports = { preset: 'ts-jest', @@ -26,7 +25,7 @@ module.exports = { '!**/webComponents/**/*' ], setupFilesAfterEnv: ['./config/jestsetup.ts'], - testEnvironment: 'jsdom-fourteen', + testEnvironment: 'jsdom-fifteen', testMatch: ['/**/?(*.)(spec|test).{js,jsx,ts,tsx}'], moduleNameMapper: { '^@shared/(.*)$': '/shared/$1', @@ -37,6 +36,8 @@ module.exports = { 'mock', 'webComponentConfigMock.js' ), + '^@ui5/webcomponents-base/src/boot': '/shared/tests/mock/WebComponentsBoot', + '^@ui5/webcomponents-base/src/theming/StyleInjection': '/shared/tests/mock/StyleInjection', '\\.(css|less)$': 'identity-obj-proxy' }, moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], diff --git a/package.json b/package.json index d865b3b5655..09010325e5a 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "istanbul-instrumenter-loader": "^3.0.1", "jest": "^24.8.0", "jest-canvas-mock": "^2.0.0-beta.1", - "jest-environment-jsdom-fourteen": "^0.1.0", + "jest-environment-jsdom-fifteen": "^1.0.0", "jest-enzyme": "^7.0.2", "jss-snapshot-serializer": "^1.0.0", "karma": "^4.0.1", diff --git a/packages/base/scripts/cssVariables/parse.js b/packages/base/scripts/cssVariables/parse.js new file mode 100644 index 00000000000..35c9f1d801b --- /dev/null +++ b/packages/base/scripts/cssVariables/parse.js @@ -0,0 +1,22 @@ +const { writeFileSync } = require('fs'); +const { _: Fiori3ThemingVariables } = require('@ui5/webcomponents/dist/themes/sap_fiori_3/parameters-bundle.css.json'); + +const variables = Fiori3ThemingVariables.replace(':root{', '') + .replace(/}$/, '') + .split(';') + .filter((variable) => !/^--_?ui5/.test(variable)) + .map((value) => value.split(':')[0]); + +let fileContent = `/* + * ### 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' + */ + +`; + +for (const variable of variables) { + fileContent += `export const ${variable.replace('--', '')} = 'var(${variable});';\n`; +} + +writeFileSync('test.ts', fileContent); diff --git a/packages/base/src/HSLColor.test.ts b/packages/base/src/HSLColor.test.ts deleted file mode 100644 index 0c7a8b17ad0..00000000000 --- a/packages/base/src/HSLColor.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { HSLColor } from './HSLColor'; -import { sapColorSemanticNegative, sapUiBrand, sapUiHighlight } from './sap_fiori_3'; - -describe('HSL Color', () => { - test('lighten', () => { - const color = HSLColor.of(sapUiHighlight).lighten(63).hsl; - expect(color).toEqual('hsl(209.8, 90.9%, 95%)'); //hsl(208.4, 90.5%, 95.9%) - }); - - test('darken', () => { - const color = HSLColor.of(sapUiBrand).darken(10).hsl; - expect(color).toEqual('hsl(209.8, 90.9%, 32.9%)'); //hsl(210, 90.5%, 32.9%) - }); - - test('border bg colors', () => { - const color = HSLColor.of(sapColorSemanticNegative).lighten(59.5).hsl; - expect(color).toEqual('hsl(0, 100%, 95.5%)'); //hsl(0, 100%, 96.1%) - }); -}); diff --git a/packages/base/src/sap_fiori_3.ts b/packages/base/src/sap_fiori_3.ts index 0868110730e..d020a7d99c0 100644 --- a/packages/base/src/sap_fiori_3.ts +++ b/packages/base/src/sap_fiori_3.ts @@ -1,1312 +1,552 @@ -import { HSLColor } from './HSLColor'; +/* + * ### 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' + */ -// Primary Colors -export const sapColorPrimary2 = 'hsl(210, 91%, 43%)'; -export const sapColorPrimary1 = `hsl(${HSLColor.of(sapColorPrimary2).getHue()}, 28%, 29%)`; -export const sapColorPrimary3 = `hsl(${HSLColor.of(sapColorPrimary2).getHue()}, 0%, 100%)`; -export const sapColorPrimary4 = `hsl(${HSLColor.of(sapColorPrimary2).getHue()}, 9%, 93.7%`; -export const sapColorPrimary5 = `hsl(${HSLColor.of(sapColorPrimary2).getHue()}, 8%, 57%`; -export const sapColorPrimary6 = `hsl(${HSLColor.of(sapColorPrimary2).getHue()}, 7.5%, 21%`; - -// Accent Colors -export const sapAccentColor1 = '#d08014'; //'hsl(34, 82%, 49%)'; -export const sapAccentColor2 = '#d04343'; //'hsl(0, 60%, 66%)'; -export const sapAccentColor3 = '#db1f77'; //'hsl(332, 75%, 49%)'; -export const sapAccentColor4 = '#c0399f'; //'hsl(315, 54%, 49%)'; -export const sapAccentColor5 = '#6367de'; //'hsl(238, 65%, 63%)'; -export const sapAccentColor6 = '#286eb4'; //'hsl(210, 64%, 60%)'; -export const sapAccentColor7 = '#0f828f'; //'hsl(186, 81%, 39%)'; -export const sapAccentColor8 = '#7ca10c'; //'hsl(75, 86%, 34%)'; -export const sapAccentColor9 = '#925ace'; //'hsl(269, 54%, 58%)'; -export const sapAccentColor10 = '#647987'; //'hsl(205, 15%, 58%)'; - -// Semantic Colors -export const sapColorSemanticPositive = 'hsl(145, 77%, 28%)'; -export const sapColorSemanticCritical = 'hsl(28, 90%, 48%)'; -export const sapColorSemanticNegative = 'hsl(0, 100%, 36.7%)'; -export const sapColorSemanticNeutral = 'hsl(210, 3%, 42.7%)'; - -/** The color which builds your brand */ -export const sapUiBrand = '#0a6ed1'; -/** The color which is used to highlight screen elements */ -export const sapUiHighlight = HSLColor.darken(sapUiBrand, 10).hsl; -/** The color which is used to derive the most dominant background colors */ -export const sapUiBaseColor = '#ffffff'; -/** The color of the shell header bar */ -export const sapUiShellColor = '#354a5f'; -/** The main background color of the screen */ -export const sapUiBaseBG = '#fafafa'; -/** The main background color of the screen */ -export const sapUiGlobalBackgroundColor = '#fafafa'; -/** The preferred text color */ -export const sapUiBaseText = '#32363a'; -/** The color of the link text */ -export const sapUiLink = '#0a6ed1'; -/** The URI to the logo of your company */ -export const sapUiGlobalLogo = 'none'; -/** The URI to the image which is shown as background */ -export const sapUiGlobalBackgroundImage = 'none'; -/** The URI to the image which is shown as background */ -export const sapUiBackgroundImage = 'none'; -/** The URI to the image which is shown as background */ -export const sapUiUx3ShellBackgroundImageURL = 'none'; -/** A value between 0.0 and 1.0 to control the opacity of the background image */ -export const sapUiGlobalBackgroundImageOpacity = '1'; -/** The switch to turn on/off the repetition of the background image. Chose 'true' or 'false' as value. */ -export const sapUiGlobalBackgroundRepeat = 'false'; -/** The color of selected elements */ -export const sapUiSelected = '#0a6ed1'; -/** The color of activated elements */ -export const sapUiActive = '#0854a0'; -/** The text color of highlighted screen elements */ -export const sapUiHighlightTextColor = '#ffffff'; -/** The text color of the application title */ -export const sapUiTextTitle = '#32363a'; -/** The color of icons. */ -export const sapUiContentIconColor = '#0a6ed1'; -/** The alternative icon color switched to by a threshold to keep contrast for icons. */ -export const sapUiContentContrastIconColor = '#ffffff'; -/** The color of noninteractive icons. */ -export const sapUiContentNonInteractiveIconColor = '#6a6d70'; -/** The color of marker icons. */ -export const sapUiContentMarkerIconColor = '#2b78c4'; -/** The color of Marker Texts. */ -export const sapUiContentMarkerTextColor = '#0f828f'; -/** The background color of Image Placeholders. */ -export const sapUiContentImagePlaceholderBackground = '#cccccc'; -/** The foreground color of Image Placeholders. */ -export const sapUiContentImagePlaceholderForegroundColor = '#ffffff'; -/** The color of the focus. */ -export const sapUIContentFocusColor = '#000000'; -/** The alternative focus color. */ -export const sapUiContentContrastFocusColor = '#ffffff'; -/** The shadow color. */ -export const sapUiContentShadowColor = '#000000'; -/** The alternative shadow color. */ -export const sapUiContentContrastShadowColor = '#ffffff'; -/** The color of found search results in the content. */ -export const sapUiContentSearchHighlightColor = '#ebf5fe'; -/** The color which indicates that the element has help content. */ -export const sapUiContentHelpColor = '#3f8600'; -/** The color of labels in the content area. */ -export const sapUiContentLabelColor = '#6a6d70'; -/** The color of texts on disabled screen elements in the content area. */ -export const sapUiContentDisabledTextColor = 'rgba(50, 54, 58, 0.5)'; -/** The color of texts on disabled screen elements in the content area. */ -export const sapUiContentDisabledOpacity = '0.5'; -/** The threshold to switch to alternative text color to keep contrast for texts */ -export const sapUiContentContrastTextThreshold = '0.65'; -/** The alternative text color switched to by a threshold to keep contrast for texts */ -export const sapUiContentContrastTextColor = '#ffffff'; -/** The foreground color of the content area. */ -export const sapUiContentForegroundColor = '#6a6d70'; -/** The foreground color of the borders of the content area. */ -export const sapUiContentForegroundBorderColor = '#89919a'; -/** The foreground color of texts in the content area. */ -export const sapUiContentForegroundTextColor = '#ffffff'; -/** The background color of the shell. */ -export const sapUiShellBackground = '#edeff0'; -/** The background image or gradient of the shell. */ -export const sapUiShellBackgroundImage = 'none'; -/** A value between 0.0 and 1.0 to control the opacity of the shell background image */ -export const sapUiShellBackgroundImageOpacity = '1'; -/** The switch to turn on/off the repetition of the shell background image. Chose 'true' or 'false' as value. */ -export const sapUiShellBackgroundImageRepeat = 'false'; -/** The background gradient of the shell. */ -export const sapUiShellBackgroundGradient = 'none'; -/** The color of the borders of the shell. */ -export const sapUiShellBorderColor = '#354a5f'; -/** The color of texts in the shell. */ -export const sapUiShellTextColor = '#ffffff'; -/** The URI to the favorite or shortcut icon displayed for the shell. */ -export const sapUiShellFavicon = 'none'; -/** The background color of buttons. */ -export const sapUiButtonBackground = '#ffffff'; -/** The color of a button's borders. */ -export const sapUiButtonBorderColor = '#0a6ed1'; -/** The color of texts on buttons. */ -export const sapUiButtonTextColor = '#0a6ed1'; -/** The color of texts on buttons. */ -export const sapUiButtonDisabledBackground = '#ffffff'; -/** The color of texts on buttons. */ -export const sapUiButtonDisabledBorderColor = '#666666'; -/** The color of texts on buttons. */ -export const sapUiButtonDisabledTextColor = '#666666'; -/** The background color of buttons on hover. */ -export const sapUiButtonHoverBackground = HSLColor.lighten(sapUiHighlight, 63).hsl; -/** The color of a button's borders on hover. */ -export const sapUiButtonHoverBorderColor = '#0a6ed1'; -/** The color of texts on buttons on hover. */ -export const sapUiButtonHoverTextColor = '#0a6ed1'; -/** The background color of emphasized buttons. */ -export const sapUiButtonEmphasizedBackground = '#0a6ed1'; -/** The border color of emphasized buttons. */ -export const sapUiButtonEmphasizedBorderColor = '#0a6ed1'; -/** The color of texts on emphasized buttons. */ -export const sapUiButtonEmphasizedTextColor = '#ffffff'; -/** The background color of "Reject" buttons. */ -export const sapUiButtonRejectBackground = '#ffffff'; -/** The background color of "Accept" buttons. */ -export const sapUiButtonAcceptBackground = '#ffffff'; -/** The background color of input fields. */ -export const sapUiFieldBackground = '#ffffff'; -/** The color of an input field's borders. */ -export const sapUiFieldBorderColor = '#89919a'; -/** The text color of input fields. */ -export const sapUiFieldTextColor = '#32363a'; -/** The color of the value help icon. */ -export const sapUiFieldHelpBackground = '#ffffff'; -/** The background color of input fields on hover. */ -export const sapUiFieldHoverBackground = '#ffffff'; -/** The color of an input field's borders on hover. */ -export const sapUiFieldHoverBorderColor = '#0854a0'; -/** The color of the value help icon on hover. */ -export const sapUiFieldHoverHelpBackground = '#fafafa'; -/** The background color of focused input fields. */ -export const sapUiFieldFocusBackground = '#ffffff'; -/** The color of a focused input field's borders. */ -export const sapUiFieldFocusBorderColor = '#89919a'; -/** The background color of a focused input field's value help icon. */ -export const sapUiFieldFocusHelpBackground = '#ffffff'; -/** The background color of a read-only input field. */ -export const sapUiFieldReadOnlyBackground = 'rgba(242, 242, 242, 0.5)'; -/** The color of a read-only input field's borders. */ -export const sapUiFieldReadOnlyBorderColor = '#979ea6'; -/** The background color of a read-only input field's value help icon. */ -export const sapUiFieldReadOnlyHelpBackground = 'rgba(242, 242, 242, 0.5)'; -/** The background color of a read-only input field's value help icon. */ -export const sapUiFieldDisabledBackground = '#959595'; -/** The background color of a read-only input field's value help icon. */ -export const sapUiFieldDisabledBorderColor = '#4f4f4f'; -/** The background color of a read-only input field's value help icon. */ -export const sapUiFieldDisabledTextColor = 'rgba(50, 54, 58, 0.5)'; -/** The background color of a read-only input field's value help icon. */ -export const sapUiFieldDisabledHelpBackground = '#959595'; -/** The color of the asterisk next to required input fields. */ -export const sapUiFieldRequiredColor = '#a5175a'; -/** The base color of input fields with an invalid value. */ -export const sapUiFieldInvalidColor = '#bb0000'; -/** The background color of input fields with an invalid value. */ -export const sapUiFieldInvalidBackground = '#ffffff'; -/** The base color of an input field indicating a warning. */ -export const sapUiFieldWarningColor = '#e9730c'; -/** The background color of an input field indicating a warning. */ -export const sapUiFieldWarningBackground = '#ffffff'; -/** The base color an input field indicating a successful user action. */ -export const sapUiFieldSuccessColor = '#107e3e'; -/** The background color of an input field indicating a successful user action. */ -export const sapUiFieldSuccessBackground = '#ffffff'; -/** The background color of the group header area. */ -export const sapUiGroupTitleBackground = 'transparent'; -/** The color of the borders of the group header area. */ -export const sapUiGroupTitleBorderColor = '#d9d9d9'; -/** The text color of the group title. The text color of the title of a group. */ -export const sapUiGroupTitleTextColor = '#32363a'; -/** The background color of the content area of a group. */ -export const sapUiGroupContentBackground = '#ffffff'; -/** The color of the borders of a group's content area. */ -export const sapUiGroupContentBorderColor = '#ededed'; -/** The background color of the footer area of a group. */ -export const sapUiGroupFooterBackground = 'transparent'; -/** The background color of the toolbar. */ -export const sapUiToolbarBackground = 'transparent'; -/** The color of a toolbar's separators. */ -export const sapUiToolbarSeparatorColor = '#ededed'; -/** The color of the borders of the list column header area. */ -export const sapUiListHeaderBorderColor = '#ededed'; -/** The color of texts on the list column header area. */ -export const sapUiListHeaderTextColor = '#32363a'; -/** The color of the border in a list separating the entries. */ -export const sapUiListBorderColor = '#ededed'; -/** The color of highlighted elements in lists. */ -export const sapUiListHighlightColor = '#0854a0'; -/** The background color of selected elements in lists. */ -export const sapUiListSelectionBackgroundColor = '#e5f0fa'; -/** The background color of lists. */ -export const sapUiListBackground = '#ffffff'; -/** The background color of the column header area of lists. */ -export const sapUiListHeaderBackground = HSLColor.of(sapUiListBackground).darken(5).hsl; -/** The background color of lists on hover. */ -export const sapUiListHoverBackground = '#fafafa'; -/** The color of the surface of a scrollbar. */ -export const sapUiScrollBarFaceColor = '#b3b3b3'; -/** The color of the track of a scrollbar. */ -export const sapUiScrollBarTrackColor = '#ffffff'; -/** The color of the borders of a scrollbar. */ -export const sapUiScrollBarBorderColor = '#b3b3b3'; -/** The color of the scroll arrows in a scrollbar. */ -export const sapUiScrollBarSymbolColor = '#0a6ed1'; -/** The hover color of the surface of a scrollbar. */ -export const sapUiScrollBarHoverFaceColor = '#ababab'; -/** The background color of page headers. */ -export const sapUiPageHeaderBackground = '#ffffff'; -/** The border color of page headers. */ -export const sapUiPageHeaderBorderColor = '#c4c4c4'; -/** The color of texts on page headers. */ -export const sapUiPageHeaderTextColor = '#505559'; -/** The background color of page footers. */ -export const sapUiPageFooterBackground = '#ffffff'; -/** The color of texts on page footers. */ -export const sapUiPageFooterTextColor = '#505559'; -/** The background color of infobars. */ -export const sapUiInfobarBackground = '#0f828f'; -/** The background color of object headers. */ -export const sapUiObjectHeaderBackground = '#ffffff'; -/** The background color of blocklayers. */ -export const sapUiBlockLayerBackground = '#000000'; -/** The background color of tiles. */ -export const sapUiTileBackground = '#ffffff'; -/** The border color of tiles. */ -export const sapUiTileBorderColor = 'transparent'; -/** The color of title texts on tiles. */ -export const sapUiTileTitleTextColor = '#32363a'; -/** The color of texts on tiles. */ -export const sapUiTileTextColor = '#6a6d70'; -/** The color of icons on tiles. */ -export const sapUiTileIconColor = '#6a6d70'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart1 = '#5899da'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart2 = '#e8743b'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart3 = '#19a979'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart4 = '#ed4a7b'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart5 = '#945ecf'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart6 = '#13a4b4'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart7 = '#525df4'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart8 = '#bf399e'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart9 = '#6c8893'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart10 = '#ee6868'; -/** This color is used as a ordered color of a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. */ -export const sapUiChart11 = '#2f6497'; -/** This color is to visualize a 'Bad' value. */ -export const sapUiChartBad = '#dc0d0e'; -/** This color is to visualize a 'Critical' value. */ -export const sapUiChartCritical = '#de890d'; -/** This color is to visualize a 'Good' value. */ -export const sapUiChartGood = '#3fa45b'; -/** This color is to visualize a 'Neutral' value. */ -export const sapUiChartNeutral = '#848f94'; -/** This color is the base chart color of the sequence 1 */ -export const sapUiChartSequence1 = '#5899da'; -/** This color is the base chart color of the sequence 2 */ -export const sapUiChartSequence2 = '#e8743b'; -/** This color is the base chart color of the sequence 3 */ -export const sapUiChartSequence3 = '#19a979'; -/** This color is the base chart color of the sequence 4 */ -export const sapUiChartSequence4 = '#ed4a7b'; -/** This color is the base chart color of the sequence 5 */ -export const sapUiChartSequence5 = '#945ecf'; -/** This color is the base chart color of the sequence 6 */ -export const sapUiChartSequence6 = '#13a4b4'; -/** This color is the base chart color of the sequence 7 */ -export const sapUiChartSequence7 = '#525df4'; -/** This color is the base chart color of the sequence 8 */ -export const sapUiChartSequence8 = '#bf399e'; -/** This color is the base chart color of the sequence 9 */ -export const sapUiChartSequence9 = '#6c8893'; -/** This color is the base chart color of the sequence 10 */ -export const sapUiChartSequence10 = '#ee6868'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiChartSequence11 = '#2f6497'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiChartSequenceNeutral = '#848f94'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent1 = '#e38b16'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent2 = '#dc7474'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent3 = '#db1f77'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent4 = '#c0399f'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent5 = '#6367de'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent6 = '#5899da'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent7 = '#13a4b4'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiAccent8 = '#7ca10c'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiErrorBG = '#ffebeb'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiWarningBG = '#fef7f1'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiSuccessBG = '#f1fdf6'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiInformationBG = '#f5faff'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiNeutralBG = '#f4f4f4'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiErrorBorder = '#bb0000'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiWarningBorder = '#e9730c'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiSuccessBorder = '#107e3e'; -/** This color is the base chart color of the sequence 11 */ -export const sapUiInformationBorder = '#0a6ed1'; -/** The color for elements showing neutral state */ -export const sapUiNeutralBorder = '#6a6d70'; -/** The color for elements showing neutral state */ -export const sapUiNegativeElement = '#bb0000'; -/** The color for elements showing neutral state */ -export const sapUiCriticalElement = '#e9730c'; -/** The color for elements showing neutral state */ -export const sapUiPositiveElement = '#107e3e'; -/** The color for elements showing neutral state */ -export const sapUiInformativeElement = '#0a6ed1'; -/** The color for elements showing neutral state */ -export const sapUiNeutralElement = '#6a6d70'; -/** The color for elements showing neutral state */ -export const sapUiNegativeText = '#bb0000'; -/** The color for elements showing neutral state */ -export const sapUiCriticalText = '#e9730c'; -/** The color for elements showing neutral state */ -export const sapUiPositiveText = '#107e3e'; -/** The color for elements showing neutral state */ -export const sapUiInformativeText = '#0a6ed1'; -/** The color for elements showing neutral state */ -export const sapUiNeutralText = '#6a6d70'; -/** The color for elements showing negative state */ -export const sapUiNegative = '#bb0000'; -/** The color for elements showing critical state */ -export const sapUiCritical = '#e9730c'; -/** The color for elements showing positive state */ -export const sapUiPositive = '#107e3e'; -/** The color for elements showing informative state */ -export const sapUiInformative = '#0a6ed1'; -/** The color for elements showing informative state */ -export const sapUiNeutral = '#6a6d70'; -/** The color for elements showing informative state */ -export const sapUiErrorColor = '#ee0000'; -/** The color for elements showing informative state */ -export const sapUiWarningColor = '#f58d33'; -/** The color for elements showing informative state */ -export const sapUiSuccessColor = '#16ab54'; -/** undefined */ -export const sapUiIndication1 = '#880000'; -/** undefined */ -export const sapUiIndication2 = '#bb0000'; -/** undefined */ -export const sapUiIndication3 = '#e9730c'; -/** undefined */ -export const sapUiIndication4 = '#107e3e'; -/** undefined */ -export const sapUiIndication5 = '#0a6ed1'; -/** The preferred font family */ -export const sapUiFontFamily = '72", Arial, Helvetica, sans-serif'; -/** The preferred font family */ -export const sapUiFontSize = '16px'; -/** The preferred font family */ -export const sapUiFontCondensedFamily = - '"72 Condensed", \'Arial Narrow\', HelveticaNeue-CondensedBold, Arial, sans-serif'; -/** The preferred font family */ -export const sapUiFontHeaderFamily = '"72", Arial, Helvetica, sans-serif'; -/** The preferred font family */ -export const sapUiFontHeaderWeight = 'normal'; -/** The preferred font family */ -export const sapUiTranslucentBGOpacity = '0'; -/** The preferred font family */ -export const sapUiDesktopFontFamily = '"72", Arial, Helvetica, sans-serif'; -/** The preferred font family */ -export const sapUiDesktopFontSize = '12px'; -/** The preferred font family */ -export const sapUiFontLargeSize = '13px'; -/** The preferred font family */ -export const sapUiFontSmallSize = '11px'; -/** The preferred font family */ -export const sapUiFontHeader1Size = '26px'; -/** The preferred font family */ -export const sapUiFontHeader2Size = '20px'; -/** The preferred font family */ -export const sapUiFontHeader3Size = '18px'; -/** The preferred font family */ -export const sapUiFontHeader4Size = '16px'; -/** The preferred font family */ -export const sapUiFontHeader5Size = '14px'; -/** The preferred font family */ -export const sapUiFontHeader6Size = '13px'; -/** The preferred font family */ -export const sapUiLineHeight = '18px'; -/** The preferred font family */ -export const sapUiChartLabelHoverColor = '#fafafa'; -/** The preferred font family */ -export const sapUiChartLabelPressedColor = '#d4d4d4'; -/** The preferred font family */ -export const sapUiChartCategoryAxisLabelFontColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartValueAxisLabelFontColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartCategoryAxisLabelFontSize = '0.75rem'; -/** The preferred font family */ -export const sapUiChartValueAxisLabelFontSize = '0.75rem'; -/** The preferred font family */ -export const sapUiChartCategoryAxisLineColor = '#979ea6'; -/** The preferred font family */ -export const sapUiChartValueAxisLineColor = '#979ea6'; -/** The preferred font family */ -export const sapUiChartCategoryAxisTickColor = '#979ea6'; -/** The preferred font family */ -export const sapUiChartValueAxisTickColor = '#979ea6'; -/** The preferred font family */ -export const sapUiChartBackgroundColor = 'transparent'; -/** The preferred font family */ -export const sapUiChartLabelFontWeight = 'normal'; -/** The preferred font family */ -export const sapUiChartLegendLabelFontColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartLegendTitleFontColor = '#32363a'; -/** The preferred font family */ -export const sapUiChartLegendTitleFontSize = '0.875rem'; -/** The preferred font family */ -export const sapUiChartLegendLabelFontSize = '0.75rem'; -/** The preferred font family */ -export const sapUiChartPaletteUndefinedColor = '#030303'; -/** The preferred font family */ -export const sapUiChartGridlineColor = '#b2b7bd'; -/** The preferred font family */ -export const sapUiChartReferenceLineColor = '#050506'; -/** The preferred font family */ -export const sapUiChartDataLabelFontColor = '#030303'; -/** The preferred font family */ -export const sapUiChartReferenceLineLabelColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartDataLabelFontSize = '0.75rem'; -/** The preferred font family */ -export const sapUiChartPopoverDataItemFontColor = '#030303'; -/** The preferred font family */ -export const sapUiChartPopoverGroupFontColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartPopoverDataItemFontSize = '0.875rem'; -/** The preferred font family */ -export const sapUiChartPopoverGroupFontSize = '0.875rem'; -/** The preferred font family */ -export const sapUiChartPopoverGroupFontWeight = 'bold'; -/** The preferred font family */ -export const sapUiChartScrollBarThumbColor = '#b3b3b3'; -/** The preferred font family */ -export const sapUiChartScrollBarTrackColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartScrollBarThumbHoverColor = '#ababab'; -/** The preferred font family */ -export const sapUiChartMainTitleFontColor = '#32363a'; -/** The preferred font family */ -export const sapUiChartAxisTitleFontColor = '#32363a'; -/** The preferred font family */ -export const sapUiChartMainTitleFontSize = '1rem'; -/** The preferred font family */ -export const sapUiChartAxisTitleFontSize = '0.75rem'; -/** The preferred font family */ -export const sapUiChartTitleFontWeight = 'bold'; -/** The preferred font family */ -export const sapUiChartAxisTitleFontWeight = 'regular'; -/** The preferred font family */ -export const sapUiChartLightText = '#ffffff'; -/** The preferred font family */ -export const sapUiChartZeroAxisColor = '#34383d'; -/** The preferred font family */ -export const sapUiChartDataPointBorderColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartDataPointBorderHoverSelectedColor = '#34383d'; -/** The preferred font family */ -export const sapUiChartDataPointNotSelectedBackgroundOpacity = '0.6'; -/** The preferred font family */ -export const sapUiChartValueAxisLineOpacity = '0'; -/** The preferred font family */ -export const sapUiChartCategoryAxisLabelFontHoverColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartCategoryAxisLabelFontPressedColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartTargetColor = '#050506'; -/** The preferred font family */ -export const sapUiChartTargetShadowColor = '#ffffff'; -/** The preferred font family */ -export const sapUiChartBubbleBGOpacity = '0.8'; -/** The preferred font family */ -export const sapUiChartScrollbarBorderColor = '#f2f2f2'; -/** The preferred font family */ -export const sapUiChartScrollbarBorderSize = '0'; -/** The preferred font family */ -export const sapUiChartScrollbarThumbPadding = '0'; -/** The preferred font family */ -export const sapUiChartNegativeLargeText = '#dc0d0e'; -/** The preferred font family */ -export const sapUiChartCriticalLargeText = '#de890d'; -/** The preferred font family */ -export const sapUiChartPositiveLargeText = '#3fa45b'; -/** The preferred font family */ -export const sapUiChartNeutralLargeText = '#69767c'; -/** The preferred font family */ -export const sapUiChartDataPointBG = '#d5dadc'; -/** The preferred font family */ -export const sapUiChartDataPointBGBorderColor = '#d5dadc'; -/** The preferred font family */ -export const sapUiChartDataLineColorWithBG = '#050506'; -/** The preferred font family */ -export const sapUiChartDataLineColor = '#050506'; -/** The preferred font family */ -export const sapUiChartRadialRemainingCircle = '#e3e6e7'; -/** The preferred font family */ -export const sapUiChartRadialRemainingCircleBorderColor = '#e3e6e7'; -/** The preferred font family */ -export const sapUiChartRadialBG = '#ffffff'; -/** The preferred font family */ -export const sapUiChartLegendHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiChartLegendSelectionBackground = '#e5f0fa'; -/** The preferred font family */ -export const sapUiChartLegendSelectionHoverBackground = '#d8e8f7'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue1 = '#5899da'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue2 = '#e8743b'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue3 = '#19a979'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue4 = '#ed4a7b'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue5 = '#945ecf'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue6 = '#13a4b4'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue7 = '#525df4'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue8 = '#bf399e'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue9 = '#6c8893'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue10 = '#ee6868'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue11 = '#2f6497'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue12 = '#1866b4'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue13 = '#cc4300'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue14 = '#03734d'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue15 = '#d70947'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue16 = '#772acb'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue17 = '#087682'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue18 = '#2531d4'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue19 = '#921473'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue20 = '#3c6372'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue21 = '#d62f2f'; -/** The preferred font family */ -export const sapUiChartPaletteQualitativeHue22 = '#144b7f'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBadLight3 = '#f99494'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBadLight2 = '#f66364'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBadLight1 = '#f33334'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBad = '#dc0d0e'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBadDark1 = '#b90c0d'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticBadDark2 = '#930a0a'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCriticalLight3 = '#f8cc8c'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCriticalLight2 = '#f5b04d'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCriticalLight1 = '#f29b1d'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCritical = '#de890d'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCriticalDark1 = '#c67a0c'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticCriticalDark2 = '#a4650a'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGoodLight3 = '#a1dbb1'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGoodLight2 = '#71c989'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGoodLight1 = '#4cba6b'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGood = '#3fa45b'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGoodDark1 = '#358a4d'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticGoodDark2 = '#2a6d3c'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutralLight3 = '#d5dadc'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutralLight2 = '#bac1c4'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutralLight1 = '#9ea8ad'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutral = '#848f94'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutralDark1 = '#69767c'; -/** The preferred font family */ -export const sapUiChartPaletteSemanticNeutralDark2 = '#596468'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1Light3 = '#b2d4f5'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1Light2 = '#93bfeb'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1Light1 = '#74abe2'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1 = '#5899da'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1Dark1 = '#367dc4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue1Dark2 = '#1866b4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2Light3 = '#ffb18a'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2Light2 = '#f3b89b'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2Light1 = '#f08956'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2 = '#e8743b'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2Dark1 = '#da5a1b'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue2Dark2 = '#cc4300'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3Light3 = '#8fd1bb'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3Light2 = '#66c2a3'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3Light1 = '#3fb68e'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3 = '#19a979'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3Dark1 = '#0e8c62'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue3Dark2 = '#03734d'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4Light3 = '#f8b4c9'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4Light2 = '#f490ae'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4Light1 = '#f06a93'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4 = '#ed4a7b'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4Dark1 = '#e32b62'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue4Dark2 = '#d70947'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5Light3 = '#d3bdeb'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5Light2 = '#be9de2'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5Light1 = '#a97dd8'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5 = '#945ecf'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5Dark1 = '#8746ce'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue5Dark2 = '#772acb'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6Light3 = '#81d1da'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6Light2 = '#5ac2ce'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6Light1 = '#38b4c2'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6 = '#13a4b4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6Dark1 = '#0d8d9c'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue6Dark2 = '#087682'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7Light3 = '#99a0f9'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7Light2 = '#828af7'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7Light1 = '#6973f6'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7 = '#525df4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7Dark1 = '#3945e4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue7Dark2 = '#2531d4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8Light3 = '#e597d2'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8Light2 = '#d876c0'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8Light1 = '#cd59b1'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8 = '#bf399e'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8Dark1 = '#a92689'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue8Dark2 = '#921473'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9Light3 = '#d1d9dc'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9Light2 = '#adbcc3'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9Light1 = '#8ca2ab'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9 = '#6c8893'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9Dark1 = '#547582'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue9Dark2 = '#3c6372'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10Light3 = '#fccaca'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10Light2 = '#f8a6a6'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10Light1 = '#f38787'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10 = '#ee6868'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10Dark1 = '#e24c4c'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue10Dark2 = '#d62f2f'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11Light3 = '#85a1bb'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11Light2 = '#698caf'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11Light1 = '#4d78a2'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11 = '#2f6497'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11Dark1 = '#245a8e'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialHue11Dark2 = '#144b7f'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutralLight3 = '#d5dadc'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutralLight2 = '#bac1c4'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutralLight1 = '#9ea8ad'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutral = '#848f94'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutralDark1 = '#69767c'; -/** The preferred font family */ -export const sapUiChartPaletteSequentialNeutralDark2 = '#596468'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1Light3 = '#f3dec9'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1Light2 = '#e3cbb3'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1Light1 = '#c8ab8e'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1 = '#b08e6d'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1Dark1 = '#8e6c4b'; -/** The preferred font family */ -export const sapUiChartPaletteNoSemDiv1Dark2 = '#754f2a'; -/** The preferred font family */ -export const sapUiChartPaletteMidArea = '#f2f2f2'; -/** The preferred font family */ -export const sapUiChoroplethBG = '#f7f7f8'; -/** The preferred font family */ -export const sapUiChoroplethRegionBorder = '#ced1d5'; -/** The preferred font family */ -export const sapUiChoroplethRegionBG = '#bac1c4'; -/** The preferred font family */ -export const sapUiMapLegendBG = '#ffffff'; -/** The preferred font family */ -export const sapUiMapLegendBorderColor = '#979ea6'; -/** The preferred font family */ -export const sapUiShellHoverBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiShellActiveBackground = '#06427e'; -/** The preferred font family */ -export const sapUiShellActiveTextColor = '#f5faff'; -/** The preferred font family */ -export const sapUiShellHoverToggleBackground = '#031c35'; -/** The preferred font family */ -export const sapUiShellContainerBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiShellAltContainerBackground = '#9aacb4'; -/** The preferred font family */ -export const sapUiShellGroupTextColor = '#d5d5d5'; -/** The preferred font family */ -export const sapUiUx3ShellHeaderColor = '#354a5f'; -/** The preferred font family */ -export const sapUiUx3ShellBackgroundColor = '#ffffff'; -/** The preferred font family */ -export const sapUiUx3ShellHoverColor = '#b0b2b4'; -/** The preferred font family */ -export const sapUiUx3ShellGradientBottom = '#557698'; -/** The preferred font family */ -export const sapUiUx3ShellGradientTop = '#93a5c5'; -/** The preferred font family */ -export const sapUiUx3ShellToolPaletteIconFontColor = '#7996b4'; -/** The preferred font family */ -export const sapUiUx3ExactLstExpandOffset = '-1 -2'; -/** The preferred font family */ -export const sapUiUx3ExactLstRootExpandOffset = '0 3'; -/** The preferred font family */ -export const sapUiUx3ExactLstContentTop = '25px'; -/** The preferred font family */ -export const sapUiLinkActive = '#0a6ed1'; -/** The preferred font family */ -export const sapUiLinkVisited = '#925ace'; -/** The preferred font family */ -export const sapUiLinkHover = '#0854a0'; -/** The preferred font family */ -export const sapUiLinkInverted = '#acd4fb'; -/** The preferred font family */ -export const sapUiNotificationBarBG = 'rgba(106, 109, 112, 0.98)'; -/** The preferred font family */ -export const sapUiNotifierSeparator = '#383a3c'; -/** The preferred font family */ -export const sapUiNotifierSeparatorWidth = '1px'; -/** The preferred font family */ -export const sapUiNotificationBarBorder = '#9da0a3'; -/** The preferred font family */ -export const sapUiUx3ToolPopupInverted = 'false'; -/** The preferred font family */ -export const sapUiUx3ToolPopupArrowRightMarginCorrection = '-1px'; -/** The preferred font family */ -export const sapUiUx3ToolPopupShadow = '0px 6px 12px 0px rgba(0, 0, 0, 0.3)'; -/** The preferred font family */ -export const sapUiCalloutShadow = '0px 6px 12px 0px rgba(0, 0, 0, 0.3)'; -/** The preferred font family */ -export const sapUiButtonIconColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonActiveBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonActiveTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiButtonEmphasizedHoverBackground = '#085caf'; -/** The preferred font family */ -export const sapUiButtonEmphasizedHoverBorderColor = '#085caf'; -/** The preferred font family */ -export const sapUiButtonEmphasizedActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonEmphasizedActiveBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonEmphasizedTextShadow = 'transparent'; -/** The preferred font family */ -export const sapUiButtonAcceptBorderColor = '#107e3e'; -/** The preferred font family */ -export const sapUiButtonAcceptHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiButtonAcceptHoverBorderColor = '#107e3e'; -/** The preferred font family */ -export const sapUiButtonAcceptActiveBackground = '#0d6733'; -/** The preferred font family */ -export const sapUiButtonAcceptActiveBorderColor = '#0d6733'; -/** The preferred font family */ -export const sapUiButtonAcceptTextColor = '#107e3e'; -/** The preferred font family */ -export const sapUiButtonRejectBorderColor = '#bb0000'; -/** The preferred font family */ -export const sapUiButtonRejectHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiButtonRejectHoverBorderColor = '#bb0000'; -/** The preferred font family */ -export const sapUiButtonRejectActiveBackground = '#a20000'; -/** The preferred font family */ -export const sapUiButtonRejectActiveBorderColor = '#a20000'; -/** The preferred font family */ -export const sapUiButtonRejectTextColor = '#bb0000'; -/** The preferred font family */ -export const sapUiButtonLiteBackground = 'transparent'; -/** The preferred font family */ -export const sapUiButtonLiteBorderColor = 'transparent'; -/** The preferred font family */ -export const sapUiButtonLiteTextColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonLiteHoverBackground = 'rgba(224, 224, 224, 0.5)'; -/** The preferred font family */ -export const sapUiButtonLiteHoverBorderColor = 'rgba(224, 224, 224, 0.5)'; -/** The preferred font family */ -export const sapUiButtonLiteActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonLiteActiveBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiButtonHeaderTextColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonHeaderDisabledTextColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonFooterTextColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonFooterHoverBackground = 'rgba(224, 224, 224, 0.5)'; -/** The preferred font family */ -export const sapUiButtonActionSelectBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiButtonActionSelectBorderColor = '#ededed'; -/** The preferred font family */ -export const sapUiButtonLiteActionSelectHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiToggleButtonPressedBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiToggleButtonPressedBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiToggleButtonPressedTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiToggleButtonPressedHoverBackground = '#085caf'; -/** The preferred font family */ -export const sapUiToggleButtonPressedHoverBorderColor = '#085caf'; -/** The preferred font family */ -export const sapUiSegmentedButtonBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiSegmentedButtonBorderColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiSegmentedButtonTextColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiSegmentedButtonHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiSegmentedButtonActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiSegmentedButtonActiveTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiSegmentedButtonSelectedBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiSegmentedButtonSelectedTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiSegmentedButtonSelectedHoverBackground = '#085caf'; -/** The preferred font family */ -export const sapUiSegmentedButtonSelectedHoverBorderColor = '#085caf'; -/** The preferred font family */ -export const sapUiSegmentedButtonIconColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiSegmentedButtonActiveIconColor = '#ffffff'; -/** The preferred font family */ -export const sapUiSegmentedButtonSelectedIconColor = '#ffffff'; -/** The preferred font family */ -export const sapUiSegmentedButtonFooterBorderColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiSegmentedButtonFooterHoverBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiFieldActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiFieldActiveBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiFieldActiveTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiFieldPlaceholderTextColor = '#74777a'; -/** The preferred font family */ -export const sapUiListTextColor = '#32363a'; -/** The preferred font family */ -export const sapUiListVerticalBorderColor = '#ededed'; -/** The preferred font family */ -export const sapUiListActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiListActiveTextColor = '#ffffff'; -/** The preferred font family */ -export const sapUiListSelectionHoverBackground = '#d8e8f7'; -/** The preferred font family */ -export const sapUiListFooterBackground = '#fafafa'; -/** The preferred font family */ -export const sapUiListFooterTextColor = '#32363a'; -/** The preferred font family */ -export const sapUiListGroupHeaderBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiListTableGroupHeaderBackground = '#f7f7f7'; -/** The preferred font family */ -export const sapUiListTableGroupHeaderBorderColor = '#ededed'; -/** The preferred font family */ -export const sapUiListTableGroupHeaderTextColor = '#32363a'; -/** The preferred font family */ -export const sapUiListTableFooterBorder = '#ededed'; -/** The preferred font family */ -export const sapUiListTableFixedBorder = '#d9d9d9'; -/** The preferred font family */ -export const sapUiListTableTextSize = '0.875rem'; -/** The preferred font family */ -export const sapUiListTableIconSize = '1rem'; -/** The preferred font family */ -export const sapUiPageFooterBorderColor = '#ebebeb'; -/** The preferred font family */ -export const sapUiInfobarHoverBackground = '#0e7681'; -/** The preferred font family */ -export const sapUiInfobarActiveBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiObjectHeaderBorderColor = '#969696'; -/** The preferred font family */ -export const sapUiCalendarColorToday = '#c0399f'; -/** The preferred font family */ -export const sapUiDragAndDropColor = '#6a6d70'; -/** The preferred font family */ -export const sapUiDragAndDropBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiDragAndDropBorderColor = '#89919a'; -/** The preferred font family */ -export const sapUiDragAndDropActiveColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiDragAndDropActiveBackground = 'rgba(10, 110, 209, 0.05)'; -/** The preferred font family */ -export const sapUiDragAndDropActiveBorderColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiShadowLevel0 = '0 0 0 1px rgba(0, 0, 0, 0.15)'; -/** The preferred font family */ -export const sapUiShadowLevel1 = '0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15)'; -/** The preferred font family */ -export const sapUiShadowLevel2 = '0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15)'; -/** The preferred font family */ -export const sapUiShadowLevel3 = '0 1.25rem 5rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15)'; -/** The preferred font family */ -export const sapUiShadowText = '0 0 0.125rem #ffffff'; -/** The preferred font family */ -export const sapUiShadowHeader = '0 1px 0.5rem 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 0 #969696'; -/** The preferred font family */ -export const sapUiUx3ShellHeaderImageURL = ''; -/** The preferred font family */ -export const sapUiUx3ShellApplicationImageURL = 'none'; -/** The preferred font family */ -export const sapUiPurple = '#800080'; -/** The preferred font family */ -export const sapUiOrange = '#ffa500'; -/** The preferred font family */ -export const sapUiGreen = '#008000'; -/** The preferred font family */ -export const sapUiBlue = '#0000ff'; -/** The preferred font family */ -export const sapUiRed = '#ff0000'; -/** The preferred font family */ -export const sapUiYellow = '#ffff00'; -/** The preferred font family */ -export const sapUiBase = '#000000'; -/** The preferred font family */ -export const sapUiBaseBorder = '#000000'; -/** The preferred font family */ -export const sapUiBaseLine = '#000000'; -/** The preferred font family */ -export const sapUiWhite = '#ffffff'; -/** The preferred font family */ -export const sapUiWhiteBG = '#ffffff'; -/** The preferred font family */ -export const sapUiExtraLightBG = '#fafafa'; -/** The preferred font family */ -export const sapUiLightBG = '#d3d3d3'; -/** The preferred font family */ -export const sapUiMediumBG = '#808080'; -/** The preferred font family */ -export const sapUiDarkBG = '#a9a9a9'; -/** The preferred font family */ -export const sapUiDeepBG = '#000000'; -/** The preferred font family */ -export const sapUiBlackBG = '#000000'; -/** The preferred font family */ -export const sapUiHoverBG = '#808080'; -/** The preferred font family */ -export const sapUiMediumAltBG = '#808080'; -/** The preferred font family */ -export const sapUiDarkAltBG = '#a9a9a9'; -/** The preferred font family */ -export const sapUiButtonStandardBG = '#fafafa'; -/** The preferred font family */ -export const sapUiButtonEmphasizedBG = '#ffff00'; -/** The preferred font family */ -export const sapUiButtonNegativeBG = '#ff0000'; -/** The preferred font family */ -export const sapUiButtonPositiveBG = '#008000'; -/** The preferred font family */ -export const sapUiReadOnlyBG = '#808080'; -/** The preferred font family */ -export const sapUiExtraLightText = '#d3d3d3'; -/** The preferred font family */ -export const sapUiLightText = '#d3d3d3'; -/** The preferred font family */ -export const sapUiMediumText = '#808080'; -/** The preferred font family */ -export const sapUiDarkText = '#a9a9a9'; -/** The preferred font family */ -export const sapUiDeepText = '#000000'; -/** The preferred font family */ -export const sapUiText = '#32363a'; -/** The preferred font family */ -export const sapUiTextInverted = '#ffffff'; -/** The preferred font family */ -export const sapUiWhiteBorder = '#ffffff'; -/** The preferred font family */ -export const sapUiExtraLightBorder = '#d3d3d3'; -/** The preferred font family */ -export const sapUiLightBorder = '#808080'; -/** The preferred font family */ -export const sapUiMediumBorder = '#000000'; -/** The preferred font family */ -export const sapUiDarkBorder = '#000000'; -/** The preferred font family */ -export const sapUiBlackBorder = '#000000'; -/** The preferred font family */ -export const sapUiElement = '#d3d3d3'; -/** The preferred font family */ -export const sapUiInvertedElement = '#ffffff'; -/** The preferred font family */ -export const sapUiLightLine = '#d3d3d3'; -/** The preferred font family */ -export const sapUiMediumLine = '#808080'; -/** The preferred font family */ -export const sapUiEmphasizedLine = '#0a6ed1'; -/** The preferred font family */ -export const sapUiDarkLine = '#a9a9a9'; -/** The preferred font family */ -export const sapUiLightShadowTint = '#ffffff'; -/** The preferred font family */ -export const sapUiDarkShadowTint = '#000000'; -/** The preferred font family */ -export const sapUiFocus = '#000000'; -/** The preferred font family */ -export const sapUiInvertedFocus = '#ffffff'; -/** The preferred font family */ -export const sapUiTableRowBG = '#ffffff'; -/** The preferred font family */ -export const sapUiTableRowAlternatingBG = '#ffffff'; -/** The preferred font family */ -export const sapUiTableRowSelectionBG = '#0a6ed1'; -/** The preferred font family */ -export const sapUiTableRowSelectionReadOnlyBG = '#0a6ed1'; -/** The preferred font family */ -export const sapUiTableRowHoverBG = '#808080'; -/** The preferred font family */ -export const sapUiListBG = '#f7f7f7'; -/** The preferred font family */ -export const sapUiTextColor = '#008000'; -/** The preferred font family */ -export const sapUiTextTitleColor = '#008000'; -/** The preferred font family */ -export const sapUiTextSelectionColor = '#008000'; -/** The preferred font family */ -export const sapUiTextDisabled = '#cbcfd3'; -/** The preferred font family */ -export const sapUiTextSelection = '#ffffff'; -/** The preferred font family */ -export const sapUiTextfieldBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiFontMonospaceFamily = 'Lucida Console'; -/** The preferred font family */ -export const sapUiUx3ShellSideBarBaseWidth = '40px'; -/** The preferred font family */ -export const sapUiUx3ShellPaneOverflowButtonHeight = '120px'; -/** The preferred font family */ -export const sapUiUx3ExactLstCollapseWidth = '24px'; -/** The preferred font family */ -export const sapUiUx3ExactLstHeaderHeight = '25px'; -/** The preferred font family */ -export const sapUiNotificationBarBG_IE = '#808080'; -/** The preferred font family */ -export const sapUiNotifierHoverColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiNotificationText = '#ffffff'; -/** The preferred font family */ -export const sapUiNotificationTimestamp = '#ffff57'; -/** The preferred font family */ -export const sapUiNotificationBarCalloutBorder = 'rgba(128, 128, 128, 0)'; -/** The preferred font family */ -export const sapUiNotificationBarCalloutBorder_IE = '#808080'; -/** The preferred font family */ -export const sapUiNotificationBarCalloutArr = 'rgba(106, 109, 112, 0.98)'; -/** The preferred font family */ -export const sapUiNotificationBarHeight = '40px'; -/** The preferred font family */ -export const sapUiNotificationBarHeightMinimized = '0px'; -/** The preferred font family */ -export const sapUiNotificationBarHeightMaximized = '40%'; -/** The preferred font family */ -export const sapUiNotifierWidth = '40px'; -/** The preferred font family */ -export const sapUiRIIconPaddingXS = '1px'; -/** The preferred font family */ -export const sapUiRIIconPaddingS = '0.125rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingM = '0.1875rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingL = '0.25rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingCozy = '0.1875rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingCompact = '0.125rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingCondensed = '0.125rem'; -/** The preferred font family */ -export const sapUiRIIconPaddingDisplayOnly = '0.125rem'; -/** The preferred font family */ -export const sapUiRIIconSizeCozy = '1.375rem'; -/** The preferred font family */ -export const sapUiRIIconSizeCompact = '1rem'; -/** The preferred font family */ -export const sapUiRIIconSizeCondensed = '1rem'; -/** The preferred font family */ -export const sapUiRIIconSizeDisplayOnly = '1rem'; -/** The preferred font family */ -export const sapUiUx3ToolPopupArrowWidth = '13px'; -/** The preferred font family */ -export const sapUiUx3ToolPopupArrowHeight = '24px'; -/** The preferred font family */ -export const sapUiUx3ToolPopupArrowRightMarginCorrectionInverted = '-7px'; -/** The preferred font family */ -export const sapUiUx3TPPaddingBottom = '50px'; -/** The preferred font family */ -export const sapUiButtonEmphasizedDisabledBorderColor = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonEmphasizedDisabledBackground = '#0a6ed1'; -/** The preferred font family */ -export const sapUiButtonAcceptDisabledBorderColor = '#107e3e'; -/** The preferred font family */ -export const sapUiButtonAcceptDisabledBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiButtonRejectDisabledBorderColor = '#bb0000'; -/** The preferred font family */ -export const sapUiButtonRejectDisabledBackground = '#ffffff'; -/** The preferred font family */ -export const sapUiToggleButtonPressedDisabledBackground = '#0854a0'; -/** The preferred font family */ -export const sapUiToggleButtonPressedDisabledBorderColor = '#0854a0'; -/** The preferred font family */ -export const sapUiToggleButtonPressedDisabledTextColor = '#c2dbf4'; -/** The preferred font family */ -export const sapUiPositiveBG = '#107e3e'; -/** The preferred font family */ -export const sapUiShadowTint = '#000000'; -/** The preferred font family */ -export const sapUiShadow = '5px 5px 10px rgba(0, 0, 0, 0.5)'; -/** The preferred font family */ -export const sapUiThemeDesignerCustomCss = 'false'; -/** The preferred font family */ -export const sapUiMarginTiny = '0.5rem'; -/** The preferred font family */ -export const sapUiMarginSmall = '1rem'; -/** The preferred font family */ -export const sapUiMarginMedium = '2rem'; -/** The preferred font family */ -export const sapUiMarginLarge = '3rem'; -/** The preferred font family */ -export const sapUiEscapedEmptyString = ''; -/** The preferred font family */ -export const sapUiLightBoxMagnifyingGlassBorder = 'none'; -/** The preferred font family */ -export const sapUiLightBoxMagnifyingGlassBackgroundColor = '#0a6ed1'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiShellBackgroundPatternColor = 'transparent'; - -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary1 = '#354a5f'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary2 = '#0a6ed1'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary3 = '#ffffff'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary4 = '#edeff0'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary5 = '#89919a'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary6 = '#32363a'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiPrimary7 = '#6a6d70'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiAccent9 = '#925ace'; -/** The background pattern color of the shell. To turn off the pattern set the value to 'transparent' */ -export const sapUiAccent10 = '#8497a4'; +export const sapFontFamily = 'var(--sapFontFamily);'; +export const sapFontSize = 'var(--sapFontSize);'; +export const sapCompanyLogo = 'var(--sapCompanyLogo);'; +export const sapBackgroundImage = 'var(--sapBackgroundImage);'; +export const sapBackgroundImageOpacity = 'var(--sapBackgroundImageOpacity);'; +export const sapBackgroundImageRepeat = 'var(--sapBackgroundImageRepeat);'; +export const sapContent_GridSize = 'var(--sapContent_GridSize);'; +export const sapPrimary1 = 'var(--sapPrimary1);'; +export const sapPrimary2 = 'var(--sapPrimary2);'; +export const sapPrimary3 = 'var(--sapPrimary3);'; +export const sapPrimary4 = 'var(--sapPrimary4);'; +export const sapPrimary5 = 'var(--sapPrimary5);'; +export const sapPrimary6 = 'var(--sapPrimary6);'; +export const sapPrimary7 = 'var(--sapPrimary7);'; +export const sapAccentColor1 = 'var(--sapAccentColor1);'; +export const sapAccentColor2 = 'var(--sapAccentColor2);'; +export const sapAccentColor3 = 'var(--sapAccentColor3);'; +export const sapAccentColor4 = 'var(--sapAccentColor4);'; +export const sapAccentColor5 = 'var(--sapAccentColor5);'; +export const sapAccentColor6 = 'var(--sapAccentColor6);'; +export const sapAccentColor7 = 'var(--sapAccentColor7);'; +export const sapAccentColor8 = 'var(--sapAccentColor8);'; +export const sapAccentColor9 = 'var(--sapAccentColor9);'; +export const sapAccentColor10 = 'var(--sapAccentColor10);'; +export const sapNegativeColor = 'var(--sapNegativeColor);'; +export const sapCriticalColor = 'var(--sapCriticalColor);'; +export const sapPositiveColor = 'var(--sapPositiveColor);'; +export const sapInformativeColor = 'var(--sapInformativeColor);'; +export const sapNeutralColor = 'var(--sapNeutralColor);'; +export const sapIndicationColor_1 = 'var(--sapIndicationColor_1);'; +export const sapIndicationColor_2 = 'var(--sapIndicationColor_2);'; +export const sapIndicationColor_3 = 'var(--sapIndicationColor_3);'; +export const sapIndicationColor_4 = 'var(--sapIndicationColor_4);'; +export const sapIndicationColor_5 = 'var(--sapIndicationColor_5);'; +export const sapElement_LineHeight = 'var(--sapElement_LineHeight);'; +export const sapElement_Height = 'var(--sapElement_Height);'; +export const sapElement_BorderWidth = 'var(--sapElement_BorderWidth);'; +export const sapContent_LineHeight = 'var(--sapContent_LineHeight);'; +export const sapContent_ElementHeight = 'var(--sapContent_ElementHeight);'; +export const sapContent_ElementHeight_PX = 'var(--sapContent_ElementHeight_PX);'; +export const sapContent_FocusColor = 'var(--sapContent_FocusColor);'; +export const sapContent_ContrastFocusColor = 'var(--sapContent_ContrastFocusColor);'; +export const sapContent_ShadowColor = 'var(--sapContent_ShadowColor);'; +export const sapContent_ContrastShadowColor = 'var(--sapContent_ContrastShadowColor);'; +export const sapContent_SearchHighlightColor = 'var(--sapContent_SearchHighlightColor);'; +export const sapContent_HelpColor = 'var(--sapContent_HelpColor);'; +export const sapContent_MonospaceFontFamily = 'var(--sapContent_MonospaceFontFamily);'; +export const sapContent_DisabledOpacity = 'var(--sapContent_DisabledOpacity);'; +export const sapContent_ContrastTextThreshold = 'var(--sapContent_ContrastTextThreshold);'; +export const sapContent_ContrastTextColor = 'var(--sapContent_ContrastTextColor);'; +export const sapShell_BackgroundImage = 'var(--sapShell_BackgroundImage);'; +export const sapShell_BackgroundImageOpacity = 'var(--sapShell_BackgroundImageOpacity);'; +export const sapShell_BackgroundImageRepeat = 'var(--sapShell_BackgroundImageRepeat);'; +export const sapShell_BackgroundPatternColor = 'var(--sapShell_BackgroundPatternColor);'; +export const sapShell_BackgroundGradient = 'var(--sapShell_BackgroundGradient);'; +export const sapShell_InteractiveTextColor = 'var(--sapShell_InteractiveTextColor);'; +export const sapShell_Favicon = 'var(--sapShell_Favicon);'; +export const sapButton_BorderCornerRadius = 'var(--sapButton_BorderCornerRadius);'; +export const sapField_BorderCornerRadius = 'var(--sapField_BorderCornerRadius);'; +export const sapGroup_TitleBackground = 'var(--sapGroup_TitleBackground);'; +export const sapGroup_BorderCornerRadius = 'var(--sapGroup_BorderCornerRadius);'; +export const sapGroup_FooterBackground = 'var(--sapGroup_FooterBackground);'; +export const sapToolbar_Background = 'var(--sapToolbar_Background);'; +export const sapScrollBar_Dimension = 'var(--sapScrollBar_Dimension);'; +export const sapBlockLayer_Background = 'var(--sapBlockLayer_Background);'; +export const sapTile_BorderColor = 'var(--sapTile_BorderColor);'; +export const sapUiFontSize = 'var(--sapUiFontSize);'; +export const sapUiFontCondensedFamily = 'var(--sapUiFontCondensedFamily);'; +export const sapUiFontHeaderWeight = 'var(--sapUiFontHeaderWeight);'; +export const sapMFontHeader1Size = 'var(--sapMFontHeader1Size);'; +export const sapMFontHeader2Size = 'var(--sapMFontHeader2Size);'; +export const sapMFontHeader3Size = 'var(--sapMFontHeader3Size);'; +export const sapMFontHeader4Size = 'var(--sapMFontHeader4Size);'; +export const sapMFontHeader5Size = 'var(--sapMFontHeader5Size);'; +export const sapMFontHeader6Size = 'var(--sapMFontHeader6Size);'; +export const sapMFontSmallSize = 'var(--sapMFontSmallSize);'; +export const sapMFontMediumSize = 'var(--sapMFontMediumSize);'; +export const sapMFontLargeSize = 'var(--sapMFontLargeSize);'; +export const sapUiTranslucentBGOpacity = 'var(--sapUiTranslucentBGOpacity);'; +export const sapMPlatformDependent = 'var(--sapMPlatformDependent);'; +export const sapUiDesktopFontSize = 'var(--sapUiDesktopFontSize);'; +export const sapUiFontLargeSize = 'var(--sapUiFontLargeSize);'; +export const sapUiFontSmallSize = 'var(--sapUiFontSmallSize);'; +export const sapUiFontHeader1Size = 'var(--sapUiFontHeader1Size);'; +export const sapUiFontHeader2Size = 'var(--sapUiFontHeader2Size);'; +export const sapUiFontHeader3Size = 'var(--sapUiFontHeader3Size);'; +export const sapUiFontHeader4Size = 'var(--sapUiFontHeader4Size);'; +export const sapUiFontHeader5Size = 'var(--sapUiFontHeader5Size);'; +export const sapUiLineHeight = 'var(--sapUiLineHeight);'; +export const sapUiNotifierSeparatorWidth = 'var(--sapUiNotifierSeparatorWidth);'; +export const sapUiButtonEmphasizedTextShadow = 'var(--sapUiButtonEmphasizedTextShadow);'; +export const sapUiButtonLiteBackground = 'var(--sapUiButtonLiteBackground);'; +export const sapUiButtonLiteBorderColor = 'var(--sapUiButtonLiteBorderColor);'; +export const sapUiListTableTextSize = 'var(--sapUiListTableTextSize);'; +export const sapUiListTableIconSize = 'var(--sapUiListTableIconSize);'; +export const sap_wc_input_icon_min_width = 'var(--sap_wc_input_icon_min_width);'; +export const sap_wc_input_compact_min_width = 'var(--sap_wc_input_compact_min_width);'; +export const sap_wc_input_disabled_opacity = 'var(--sap_wc_input_disabled_opacity);'; +export const sapShellColor = 'var(--sapShellColor);'; +export const sapBrandColor = 'var(--sapBrandColor);'; +export const sapLinkColor = 'var(--sapLinkColor);'; +export const sapBaseColor = 'var(--sapBaseColor);'; +export const sapTextColor = 'var(--sapTextColor);'; +export const sapErrorBorderColor = 'var(--sapErrorBorderColor);'; +export const sapNegativeElementColor = 'var(--sapNegativeElementColor);'; +export const sapNegativeTextColor = 'var(--sapNegativeTextColor);'; +export const sapWarningBorderColor = 'var(--sapWarningBorderColor);'; +export const sapCriticalElementColor = 'var(--sapCriticalElementColor);'; +export const sapCriticalTextColor = 'var(--sapCriticalTextColor);'; +export const sapSuccessBorderColor = 'var(--sapSuccessBorderColor);'; +export const sapPositiveElementColor = 'var(--sapPositiveElementColor);'; +export const sapPositiveTextColor = 'var(--sapPositiveTextColor);'; +export const sapInformationBorderColor = 'var(--sapInformationBorderColor);'; +export const sapInformativeElementColor = 'var(--sapInformativeElementColor);'; +export const sapNeutralBorderColor = 'var(--sapNeutralBorderColor);'; +export const sapNeutralElementColor = 'var(--sapNeutralElementColor);'; +export const sapNeutralTextColor = 'var(--sapNeutralTextColor);'; +export const sapErrorColor = 'var(--sapErrorColor);'; +export const sapWarningColor = 'var(--sapWarningColor);'; +export const sapSuccessColor = 'var(--sapSuccessColor);'; +export const sapInformationColor = 'var(--sapInformationColor);'; +export const sapContent_IconHeight = 'var(--sapContent_IconHeight);'; +export const sapContent_NonInteractiveIconColor = 'var(--sapContent_NonInteractiveIconColor);'; +export const sapContent_LabelColor = 'var(--sapContent_LabelColor);'; +export const sapContent_ContrastIconColor = 'var(--sapContent_ContrastIconColor);'; +export const sapContent_ForegroundBorderColor = 'var(--sapContent_ForegroundBorderColor);'; +export const sapShell_Background = 'var(--sapShell_Background);'; +export const sapButton_BorderWidth = 'var(--sapButton_BorderWidth);'; +export const sapField_BorderColor = 'var(--sapField_BorderColor);'; +export const sapField_BorderWidth = 'var(--sapField_BorderWidth);'; +export const sapGroup_Title_FontSize = 'var(--sapGroup_Title_FontSize);'; +export const sapGroup_BorderWidth = 'var(--sapGroup_BorderWidth);'; +export const sapList_BorderWidth = 'var(--sapList_BorderWidth);'; +export const sapUiFontFamily = 'var(--sapUiFontFamily);'; +export const sapUiGlobalLogo = 'var(--sapUiGlobalLogo);'; +export const sapUiGlobalBackgroundImage = 'var(--sapUiGlobalBackgroundImage);'; +export const sapUiBackgroundImage = 'var(--sapUiBackgroundImage);'; +export const sapUiUx3ShellBackgroundImageURL = 'var(--sapUiUx3ShellBackgroundImageURL);'; +export const sapUiGlobalBackgroundImageOpacity = 'var(--sapUiGlobalBackgroundImageOpacity);'; +export const sapUiGlobalBackgroundRepeat = 'var(--sapUiGlobalBackgroundRepeat);'; +export const sapUiElementLineHeight = 'var(--sapUiElementLineHeight);'; +export const sapUiElementHeight = 'var(--sapUiElementHeight);'; +export const sapUiElementBorderWidth = 'var(--sapUiElementBorderWidth);'; +export const sapUiContentLineHeight = 'var(--sapUiContentLineHeight);'; +export const sapUiContentElementHeight = 'var(--sapUiContentElementHeight);'; +export const sapUiContentElementHeightPX = 'var(--sapUiContentElementHeightPX);'; +export const sapUiContentFocusColor = 'var(--sapUiContentFocusColor);'; +export const sapUiContentContrastFocusColor = 'var(--sapUiContentContrastFocusColor);'; +export const sapUiContentShadowColor = 'var(--sapUiContentShadowColor);'; +export const sapUiContentContrastShadowColor = 'var(--sapUiContentContrastShadowColor);'; +export const sapUiContentSearchHighlightColor = 'var(--sapUiContentSearchHighlightColor);'; +export const sapUiContentHelpColor = 'var(--sapUiContentHelpColor);'; +export const sapUiContentDisabledOpacity = 'var(--sapUiContentDisabledOpacity);'; +export const sapUiContentContrastTextThreshold = 'var(--sapUiContentContrastTextThreshold);'; +export const sapUiContentContrastTextColor = 'var(--sapUiContentContrastTextColor);'; +export const sapUiShellBackgroundImage = 'var(--sapUiShellBackgroundImage);'; +export const sapUiShellBackgroundImageOpacity = 'var(--sapUiShellBackgroundImageOpacity);'; +export const sapUiShellBackgroundImageRepeat = 'var(--sapUiShellBackgroundImageRepeat);'; +export const sapUiShellBackgroundPatternColor = 'var(--sapUiShellBackgroundPatternColor);'; +export const sapUiShellBackgroundGradient = 'var(--sapUiShellBackgroundGradient);'; +export const sapUiShellInteractiveTextColor = 'var(--sapUiShellInteractiveTextColor);'; +export const sapUiShellFavicon = 'var(--sapUiShellFavicon);'; +export const sapUiButtonBorderCornerRadius = 'var(--sapUiButtonBorderCornerRadius);'; +export const sapUiFieldBorderCornerRadius = 'var(--sapUiFieldBorderCornerRadius);'; +export const sapUiGroupTitleBackground = 'var(--sapUiGroupTitleBackground);'; +export const sapUiGroupFooterBackground = 'var(--sapUiGroupFooterBackground);'; +export const sapUiToolbarBackground = 'var(--sapUiToolbarBackground);'; +export const sapUiScrollBarDimension = 'var(--sapUiScrollBarDimension);'; +export const sapUiBlockLayerBackground = 'var(--sapUiBlockLayerBackground);'; +export const sapUiTileBorderColor = 'var(--sapUiTileBorderColor);'; +export const sapUiContentGridSize = 'var(--sapUiContentGridSize);'; +export const sapUiPrimary1 = 'var(--sapUiPrimary1);'; +export const sapUiPrimary2 = 'var(--sapUiPrimary2);'; +export const sapUiPrimary3 = 'var(--sapUiPrimary3);'; +export const sapUiPrimary4 = 'var(--sapUiPrimary4);'; +export const sapUiPrimary5 = 'var(--sapUiPrimary5);'; +export const sapUiPrimary6 = 'var(--sapUiPrimary6);'; +export const sapUiPrimary7 = 'var(--sapUiPrimary7);'; +export const sapUiAccent1 = 'var(--sapUiAccent1);'; +export const sapUiAccent2 = 'var(--sapUiAccent2);'; +export const sapUiAccent3 = 'var(--sapUiAccent3);'; +export const sapUiAccent4 = 'var(--sapUiAccent4);'; +export const sapUiAccent5 = 'var(--sapUiAccent5);'; +export const sapUiAccent6 = 'var(--sapUiAccent6);'; +export const sapUiAccent7 = 'var(--sapUiAccent7);'; +export const sapUiAccent8 = 'var(--sapUiAccent8);'; +export const sapUiAccent9 = 'var(--sapUiAccent9);'; +export const sapUiAccent10 = 'var(--sapUiAccent10);'; +export const sapUiNeutralBorder = 'var(--sapUiNeutralBorder);'; +export const sapUiNegative = 'var(--sapUiNegative);'; +export const sapUiCritical = 'var(--sapUiCritical);'; +export const sapUiPositive = 'var(--sapUiPositive);'; +export const sapUiInformative = 'var(--sapUiInformative);'; +export const sapUiNeutral = 'var(--sapUiNeutral);'; +export const sapUiIndication1 = 'var(--sapUiIndication1);'; +export const sapUiIndication2 = 'var(--sapUiIndication2);'; +export const sapUiIndication3 = 'var(--sapUiIndication3);'; +export const sapUiIndication4 = 'var(--sapUiIndication4);'; +export const sapUiIndication5 = 'var(--sapUiIndication5);'; +export const sapUiFontHeader6Size = 'var(--sapUiFontHeader6Size);'; +export const sapShell_BorderColor = 'var(--sapShell_BorderColor);'; +export const sapUiShellColor = 'var(--sapUiShellColor);'; +export const sapButton_Emphasized_Background = 'var(--sapButton_Emphasized_Background);'; +export const sapUiBrand = 'var(--sapUiBrand);'; +export const sapUiLink = 'var(--sapUiLink);'; +export const sapContent_ImagePlaceholderForegroundColor = 'var(--sapContent_ImagePlaceholderForegroundColor);'; +export const sapButton_Background = 'var(--sapButton_Background);'; +export const sapField_Background = 'var(--sapField_Background);'; +export const sapGroup_ContentBackground = 'var(--sapGroup_ContentBackground);'; +export const sapList_Background = 'var(--sapList_Background);'; +export const sapPageHeader_Background = 'var(--sapPageHeader_Background);'; +export const sapPageFooter_Background = 'var(--sapPageFooter_Background);'; +export const sapObjectHeader_Background = 'var(--sapObjectHeader_Background);'; +export const sapTile_Background = 'var(--sapTile_Background);'; +export const sapUiBaseColor = 'var(--sapUiBaseColor);'; +export const sapTitleColor = 'var(--sapTitleColor);'; +export const sapField_TextColor = 'var(--sapField_TextColor);'; +export const sapUiBaseText = 'var(--sapUiBaseText);'; +export const sapField_InvalidColor = 'var(--sapField_InvalidColor);'; +export const sapUiErrorBorder = 'var(--sapUiErrorBorder);'; +export const sapUiNegativeElement = 'var(--sapUiNegativeElement);'; +export const sapUiNegativeText = 'var(--sapUiNegativeText);'; +export const sapField_WarningColor = 'var(--sapField_WarningColor);'; +export const sapUiWarningBorder = 'var(--sapUiWarningBorder);'; +export const sapUiCriticalElement = 'var(--sapUiCriticalElement);'; +export const sapUiCriticalText = 'var(--sapUiCriticalText);'; +export const sapField_SuccessColor = 'var(--sapField_SuccessColor);'; +export const sapUiSuccessBorder = 'var(--sapUiSuccessBorder);'; +export const sapUiPositiveElement = 'var(--sapUiPositiveElement);'; +export const sapUiPositiveText = 'var(--sapUiPositiveText);'; +export const sapUiInformationBorder = 'var(--sapUiInformationBorder);'; +export const sapUiInformativeElement = 'var(--sapUiInformativeElement);'; +export const sapUiNeutralElement = 'var(--sapUiNeutralElement);'; +export const sapUiNeutralText = 'var(--sapUiNeutralText);'; +export const sapUiContentIconHeight = 'var(--sapUiContentIconHeight);'; +export const sapUiContentNonInteractiveIconColor = 'var(--sapUiContentNonInteractiveIconColor);'; +export const sapUiContentLabelColor = 'var(--sapUiContentLabelColor);'; +export const sapUiContentContrastIconColor = 'var(--sapUiContentContrastIconColor);'; +export const sapUiContentForegroundBorderColor = 'var(--sapUiContentForegroundBorderColor);'; +export const sapUiShellBackground = 'var(--sapUiShellBackground);'; +export const sapUiButtonBorderWidth = 'var(--sapUiButtonBorderWidth);'; +export const sapField_Focus_BorderColor = 'var(--sapField_Focus_BorderColor);'; +export const sapField_ReadOnly_BorderColor = 'var(--sapField_ReadOnly_BorderColor);'; +export const sapUiFieldBorderColor = 'var(--sapUiFieldBorderColor);'; +export const sapUiFieldBorderWidth = 'var(--sapUiFieldBorderWidth);'; +export const sapUiGroupBorderWidth = 'var(--sapUiGroupBorderWidth);'; +export const sapUiListBorderWidth = 'var(--sapUiListBorderWidth);'; +export const sapUiFontHeaderFamily = 'var(--sapUiFontHeaderFamily);'; +export const sapUiDesktopFontFamily = 'var(--sapUiDesktopFontFamily);'; +export const sapUiShadowText = 'var(--sapUiShadowText);'; +export const sapUiFieldActiveTextColor = 'var(--sapUiFieldActiveTextColor);'; +export const sapUiCalendarColorToday = 'var(--sapUiCalendarColorToday);'; +export const sapUiShellBorderColor = 'var(--sapUiShellBorderColor);'; +export const sapButton_Emphasized_BorderColor = 'var(--sapButton_Emphasized_BorderColor);'; +export const sapUiButtonEmphasizedBackground = 'var(--sapUiButtonEmphasizedBackground);'; +export const sapUiLinkActive = 'var(--sapUiLinkActive);'; +export const sapUiLinkVisited = 'var(--sapUiLinkVisited);'; +export const sapUiDragAndDropActiveColor = 'var(--sapUiDragAndDropActiveColor);'; +export const sapUiDragAndDropActiveBorderColor = 'var(--sapUiDragAndDropActiveBorderColor);'; +export const sapUiContentImagePlaceholderForegroundColor = 'var(--sapUiContentImagePlaceholderForegroundColor);'; +export const sapButton_Reject_Background = 'var(--sapButton_Reject_Background);'; +export const sapButton_Accept_Background = 'var(--sapButton_Accept_Background);'; +export const sapUiButtonBackground = 'var(--sapUiButtonBackground);'; +export const sapField_HelpBackground = 'var(--sapField_HelpBackground);'; +export const sapField_Hover_Background = 'var(--sapField_Hover_Background);'; +export const sapField_Focus_Background = 'var(--sapField_Focus_Background);'; +export const sapField_InvalidBackground = 'var(--sapField_InvalidBackground);'; +export const sapField_WarningBackground = 'var(--sapField_WarningBackground);'; +export const sapField_SuccessBackground = 'var(--sapField_SuccessBackground);'; +export const sapUiFieldBackground = 'var(--sapUiFieldBackground);'; +export const sapUiGroupContentBackground = 'var(--sapUiGroupContentBackground);'; +export const sapUiListBackground = 'var(--sapUiListBackground);'; +export const sapUiPageHeaderBackground = 'var(--sapUiPageHeaderBackground);'; +export const sapUiPageFooterBackground = 'var(--sapUiPageFooterBackground);'; +export const sapUiObjectHeaderBackground = 'var(--sapUiObjectHeaderBackground);'; +export const sapUiTileBackground = 'var(--sapUiTileBackground);'; +export const sapUiTextTitle = 'var(--sapUiTextTitle);'; +export const sapUiFieldTextColor = 'var(--sapUiFieldTextColor);'; +export const sapUiListTextColor = 'var(--sapUiListTextColor);'; +export const sapUiFieldInvalidColor = 'var(--sapUiFieldInvalidColor);'; +export const sapUiButtonRejectBorderColor = 'var(--sapUiButtonRejectBorderColor);'; +export const sapUiFieldWarningColor = 'var(--sapUiFieldWarningColor);'; +export const sapUiFieldSuccessColor = 'var(--sapUiFieldSuccessColor);'; +export const sapUiButtonAcceptBorderColor = 'var(--sapUiButtonAcceptBorderColor);'; +export const sapUiDragAndDropColor = 'var(--sapUiDragAndDropColor);'; +export const sapUiDragAndDropBorderColor = 'var(--sapUiDragAndDropBorderColor);'; +export const sapUiFieldFocusBorderColor = 'var(--sapUiFieldFocusBorderColor);'; +export const sapUiFieldReadOnlyBorderColor = 'var(--sapUiFieldReadOnlyBorderColor);'; +export const sapUiButtonEmphasizedBorderColor = 'var(--sapUiButtonEmphasizedBorderColor);'; +export const sapUiButtonRejectBackground = 'var(--sapUiButtonRejectBackground);'; +export const sapUiButtonAcceptBackground = 'var(--sapUiButtonAcceptBackground);'; +export const sapUiSegmentedButtonBackground = 'var(--sapUiSegmentedButtonBackground);'; +export const sapUiFieldHelpBackground = 'var(--sapUiFieldHelpBackground);'; +export const sapUiFieldHoverBackground = 'var(--sapUiFieldHoverBackground);'; +export const sapField_Focus_HelpBackground = 'var(--sapField_Focus_HelpBackground);'; +export const sapUiFieldFocusBackground = 'var(--sapUiFieldFocusBackground);'; +export const sapUiFieldInvalidBackground = 'var(--sapUiFieldInvalidBackground);'; +export const sapUiFieldWarningBackground = 'var(--sapUiFieldWarningBackground);'; +export const sapUiFieldSuccessBackground = 'var(--sapUiFieldSuccessBackground);'; +export const sapUiShellContainerBackground = 'var(--sapUiShellContainerBackground);'; +export const sapUiDragAndDropBackground = 'var(--sapUiDragAndDropBackground);'; +export const sapUiButtonActionSelectBackground = 'var(--sapUiButtonActionSelectBackground);'; +export const sapUiListGroupHeaderBackground = 'var(--sapUiListGroupHeaderBackground);'; +export const sapUiShellGroupTextColor = 'var(--sapUiShellGroupTextColor);'; +export const sapUiListFooterTextColor = 'var(--sapUiListFooterTextColor);'; +export const sapUiButtonRejectHoverBorderColor = 'var(--sapUiButtonRejectHoverBorderColor);'; +export const sapUiButtonAcceptHoverBorderColor = 'var(--sapUiButtonAcceptHoverBorderColor);'; +export const sapUiFieldFocusHelpBackground = 'var(--sapUiFieldFocusHelpBackground);'; +export const sapUiShellAltContainerBackground = 'var(--sapUiShellAltContainerBackground);'; +export const sapHighlightColor = 'var(--sapHighlightColor);'; +export const sapBackgroundColorDefault = 'var(--sapBackgroundColorDefault);'; +export const sapBackgroundColor = 'var(--sapBackgroundColor);'; +export const sapErrorBackground = 'var(--sapErrorBackground);'; +export const sapWarningBackground = 'var(--sapWarningBackground);'; +export const sapSuccessBackground = 'var(--sapSuccessBackground);'; +export const sapInformationBackground = 'var(--sapInformationBackground);'; +export const sapNeutralBackground = 'var(--sapNeutralBackground);'; +export const sapInformativeTextColor = 'var(--sapInformativeTextColor);'; +export const sapContent_MarkerIconColor = 'var(--sapContent_MarkerIconColor);'; +export const sapContent_MarkerTextColor = 'var(--sapContent_MarkerTextColor);'; +export const sapContent_ImagePlaceholderBackground = 'var(--sapContent_ImagePlaceholderBackground);'; +export const sapContent_DisabledTextColor = 'var(--sapContent_DisabledTextColor);'; +export const sapContent_ForegroundColor = 'var(--sapContent_ForegroundColor);'; +export const sapContent_BadgeBackground = 'var(--sapContent_BadgeBackground);'; +export const sapButton_BorderColor = 'var(--sapButton_BorderColor);'; +export const sapField_RequiredColor = 'var(--sapField_RequiredColor);'; +export const sapGroup_TitleBorderColor = 'var(--sapGroup_TitleBorderColor);'; +export const sapScrollBar_FaceColor = 'var(--sapScrollBar_FaceColor);'; +export const sapInfobar_Background = 'var(--sapInfobar_Background);'; +export const sapToolbar_SeparatorColor = 'var(--sapToolbar_SeparatorColor);'; +export const sapUiNotificationBarBG = 'var(--sapUiNotificationBarBG);'; +export const sapUiNotifierSeparator = 'var(--sapUiNotifierSeparator);'; +export const sapUiNotificationBarBorder = 'var(--sapUiNotificationBarBorder);'; +export const sapUiContentShadowColorFade30 = 'var(--sapUiContentShadowColorFade30);'; +export const sapUiContentShadowColorFade5 = 'var(--sapUiContentShadowColorFade5);'; +export const sapUiContentShadowColorFade15 = 'var(--sapUiContentShadowColorFade15);'; +export const sapUiAccent1Lighten50 = 'var(--sapUiAccent1Lighten50);'; +export const sapUiAccent2Lighten40 = 'var(--sapUiAccent2Lighten40);'; +export const sapUiAccent3Lighten46 = 'var(--sapUiAccent3Lighten46);'; +export const sapUiAccent4Lighten46 = 'var(--sapUiAccent4Lighten46);'; +export const sapUiAccent5Lighten32 = 'var(--sapUiAccent5Lighten32);'; +export const sapUiAccent6Lighten52 = 'var(--sapUiAccent6Lighten52);'; +export const sapUiAccent7Lighten64 = 'var(--sapUiAccent7Lighten64);'; +export const sapUiAccent8Lighten61 = 'var(--sapUiAccent8Lighten61);'; +export const sapUiAccent9Lighten37 = 'var(--sapUiAccent9Lighten37);'; +export const sapUiAccent10Lighten49 = 'var(--sapUiAccent10Lighten49);'; +export const sapUiShellHoverBackground = 'var(--sapUiShellHoverBackground);'; +export const sapUiShellActiveBackground = 'var(--sapUiShellActiveBackground);'; +export const sapUiShellHoverToggleBackground = 'var(--sapUiShellHoverToggleBackground);'; +export const sapUiLinkHover = 'var(--sapUiLinkHover);'; +export const sapUiDragAndDropActiveBackground = 'var(--sapUiDragAndDropActiveBackground);'; +export const sapUiLinkDarken15 = 'var(--sapUiLinkDarken15);'; +export const sapGroup_ContentBorderColor = 'var(--sapGroup_ContentBorderColor);'; +export const sapList_BorderColor = 'var(--sapList_BorderColor);'; +export const sapList_HeaderBackground = 'var(--sapList_HeaderBackground);'; +export const sapPageHeader_BorderColor = 'var(--sapPageHeader_BorderColor);'; +export const sapUiButtonRejectActiveBackground = 'var(--sapUiButtonRejectActiveBackground);'; +export const sapUiButtonAcceptActiveBackground = 'var(--sapUiButtonAcceptActiveBackground);'; +export const sapUiFieldPlaceholderTextColor = 'var(--sapUiFieldPlaceholderTextColor);'; +export const sapSelectedColor = 'var(--sapSelectedColor);'; +export const sapActiveColor = 'var(--sapActiveColor);'; +export const sapContent_IconColor = 'var(--sapContent_IconColor);'; +export const sapField_Hover_BorderColor = 'var(--sapField_Hover_BorderColor);'; +export const sapList_HighlightColor = 'var(--sapList_HighlightColor);'; +export const sapUiHighlight = 'var(--sapUiHighlight);'; +export const sapUiBaseBG = 'var(--sapUiBaseBG);'; +export const sapUiGlobalBackgroundColor = 'var(--sapUiGlobalBackgroundColor);'; +export const sapUiErrorBG = 'var(--sapUiErrorBG);'; +export const sapUiWarningBG = 'var(--sapUiWarningBG);'; +export const sapUiSuccessBG = 'var(--sapUiSuccessBG);'; +export const sapUiInformationBG = 'var(--sapUiInformationBG);'; +export const sapUiNeutralBG = 'var(--sapUiNeutralBG);'; +export const sapUiInformativeText = 'var(--sapUiInformativeText);'; +export const sapUiContentMarkerIconColor = 'var(--sapUiContentMarkerIconColor);'; +export const sapUiContentMarkerTextColor = 'var(--sapUiContentMarkerTextColor);'; +export const sapUiContentImagePlaceholderBackground = 'var(--sapUiContentImagePlaceholderBackground);'; +export const sapUiContentDisabledTextColor = 'var(--sapUiContentDisabledTextColor);'; +export const sapUiContentForegroundColor = 'var(--sapUiContentForegroundColor);'; +export const sapUiContentBadgeBackground = 'var(--sapUiContentBadgeBackground);'; +export const sapButton_Hover_BorderColor = 'var(--sapButton_Hover_BorderColor);'; +export const sapUiButtonBorderColor = 'var(--sapUiButtonBorderColor);'; +export const sapUiFieldRequiredColor = 'var(--sapUiFieldRequiredColor);'; +export const sapUiGroupTitleBorderColor = 'var(--sapUiGroupTitleBorderColor);'; +export const sapScrollBar_BorderColor = 'var(--sapScrollBar_BorderColor);'; +export const sapUiScrollBarFaceColor = 'var(--sapUiScrollBarFaceColor);'; +export const sapUiInfobarBackground = 'var(--sapUiInfobarBackground);'; +export const sapUiToolbarSeparatorColor = 'var(--sapUiToolbarSeparatorColor);'; +export const sapUiShellBorderColorLighten30 = 'var(--sapUiShellBorderColorLighten30);'; +export const sapUiButtonEmphasizedHoverBackground = 'var(--sapUiButtonEmphasizedHoverBackground);'; +export const sapUiButtonEmphasizedActiveBackground = 'var(--sapUiButtonEmphasizedActiveBackground);'; +export const sapUiButtonBackgroundDarken24 = 'var(--sapUiButtonBackgroundDarken24);'; +export const sapUiButtonBackgroundDarken7 = 'var(--sapUiButtonBackgroundDarken7);'; +export const sapUiButtonBackgroundDarken2 = 'var(--sapUiButtonBackgroundDarken2);'; +export const sapUiButtonBackgroundDarken10 = 'var(--sapUiButtonBackgroundDarken10);'; +export const sapUiGroupContentBorderColor = 'var(--sapUiGroupContentBorderColor);'; +export const sapUiListFooterBackground = 'var(--sapUiListFooterBackground);'; +export const sapUiListTableGroupHeaderBackground = 'var(--sapUiListTableGroupHeaderBackground);'; +export const sapUiListBackgroundDarken3 = 'var(--sapUiListBackgroundDarken3);'; +export const sapUiListBackgroundDarken10 = 'var(--sapUiListBackgroundDarken10);'; +export const sapUiListBackgroundDarken13 = 'var(--sapUiListBackgroundDarken13);'; +export const sapUiListBackgroundDarken15 = 'var(--sapUiListBackgroundDarken15);'; +export const sapUiListBackgroundDarken20 = 'var(--sapUiListBackgroundDarken20);'; +export const sapList_HeaderBorderColor = 'var(--sapList_HeaderBorderColor);'; +export const sapUiListBorderColor = 'var(--sapUiListBorderColor);'; +export const sapUiListHeaderBackground = 'var(--sapUiListHeaderBackground);'; +export const sapUiPageHeaderBorderColor = 'var(--sapUiPageHeaderBorderColor);'; +export const sapUiObjectHeaderBorderColor = 'var(--sapUiObjectHeaderBorderColor);'; +export const sapUiTileBackgroundDarken20 = 'var(--sapUiTileBackgroundDarken20);'; +export const sapUiButtonRejectActiveBorderColor = 'var(--sapUiButtonRejectActiveBorderColor);'; +export const sapUiFieldWarningColorDarken100 = 'var(--sapUiFieldWarningColorDarken100);'; +export const sapUiButtonAcceptActiveBorderColor = 'var(--sapUiButtonAcceptActiveBorderColor);'; +export const sapUiSelected = 'var(--sapUiSelected);'; +export const sapUiActive = 'var(--sapUiActive);'; +export const sapScrollBar_SymbolColor = 'var(--sapScrollBar_SymbolColor);'; +export const sapUiContentIconColor = 'var(--sapUiContentIconColor);'; +export const sapUiFieldHoverBorderColor = 'var(--sapUiFieldHoverBorderColor);'; +export const sapUiListHighlightColor = 'var(--sapUiListHighlightColor);'; +export const sapUiButtonRejectHoverBackground = 'var(--sapUiButtonRejectHoverBackground);'; +export const sapUiButtonAcceptHoverBackground = 'var(--sapUiButtonAcceptHoverBackground);'; +export const sapUiButtonHoverBorderColor = 'var(--sapUiButtonHoverBorderColor);'; +export const sapUiSegmentedButtonBorderColor = 'var(--sapUiSegmentedButtonBorderColor);'; +export const sapUiScrollBarBorderColor = 'var(--sapUiScrollBarBorderColor);'; +export const sapUiButtonEmphasizedHoverBorderColor = 'var(--sapUiButtonEmphasizedHoverBorderColor);'; +export const sapUiButtonEmphasizedActiveBorderColor = 'var(--sapUiButtonEmphasizedActiveBorderColor);'; +export const sapUiListHeaderBorderColor = 'var(--sapUiListHeaderBorderColor);'; +export const sapUiButtonActionSelectBorderColor = 'var(--sapUiButtonActionSelectBorderColor);'; +export const sapUiListVerticalBorderColor = 'var(--sapUiListVerticalBorderColor);'; +export const sapUiListTableFooterBorder = 'var(--sapUiListTableFooterBorder);'; +export const sapUiToggleButtonPressedBackground = 'var(--sapUiToggleButtonPressedBackground);'; +export const sapUiButtonActiveBackground = 'var(--sapUiButtonActiveBackground);'; +export const sapUiFieldActiveBackground = 'var(--sapUiFieldActiveBackground);'; +export const sapUiFieldActiveBorderColor = 'var(--sapUiFieldActiveBorderColor);'; +export const sapUiScrollBarSymbolColor = 'var(--sapUiScrollBarSymbolColor);'; +export const sapUiListActiveBackground = 'var(--sapUiListActiveBackground);'; +export const sapUiSegmentedButtonFooterBorderColor = 'var(--sapUiSegmentedButtonFooterBorderColor);'; +export const sapUiToggleButtonPressedBorderColor = 'var(--sapUiToggleButtonPressedBorderColor);'; +export const sapUiSegmentedButtonSelectedBackground = 'var(--sapUiSegmentedButtonSelectedBackground);'; +export const sapUiButtonActiveBorderColor = 'var(--sapUiButtonActiveBorderColor);'; +export const sapUiButtonLiteActiveBackground = 'var(--sapUiButtonLiteActiveBackground);'; +export const sapUiSegmentedButtonActiveBackground = 'var(--sapUiSegmentedButtonActiveBackground);'; +export const sapUiInfobarActiveBackground = 'var(--sapUiInfobarActiveBackground);'; +export const sapUiLinkInverted = 'var(--sapUiLinkInverted);'; +export const sapField_ReadOnly_Background = 'var(--sapField_ReadOnly_Background);'; +export const sapUiButtonLiteActiveBorderColor = 'var(--sapUiButtonLiteActiveBorderColor);'; +export const sapField_ReadOnly_HelpBackground = 'var(--sapField_ReadOnly_HelpBackground);'; +export const sapUiFieldReadOnlyBackground = 'var(--sapUiFieldReadOnlyBackground);'; +export const sapButton_Hover_Background = 'var(--sapButton_Hover_Background);'; +export const sapBackgroundColorFade72 = 'var(--sapBackgroundColorFade72);'; +export const sapScrollBar_TrackColor = 'var(--sapScrollBar_TrackColor);'; +export const sapScrollBar_Hover_FaceColor = 'var(--sapScrollBar_Hover_FaceColor);'; +export const sapUiFieldReadOnlyHelpBackground = 'var(--sapUiFieldReadOnlyHelpBackground);'; +export const sapUiButtonRejectActiveBackgroundDarken5 = 'var(--sapUiButtonRejectActiveBackgroundDarken5);'; +export const sapUiButtonRejectActiveBackgroundLighten5 = 'var(--sapUiButtonRejectActiveBackgroundLighten5);'; +export const sapUiButtonAcceptActiveBackgroundDarken5 = 'var(--sapUiButtonAcceptActiveBackgroundDarken5);'; +export const sapUiButtonAcceptActiveBackgroundLighten5 = 'var(--sapUiButtonAcceptActiveBackgroundLighten5);'; +export const sapField_Hover_HelpBackground = 'var(--sapField_Hover_HelpBackground);'; +export const sapUiButtonHoverBackground = 'var(--sapUiButtonHoverBackground);'; +export const sapUiErrorBGLighten4 = 'var(--sapUiErrorBGLighten4);'; +export const sapUiSuccessBGLighten5 = 'var(--sapUiSuccessBGLighten5);'; +export const sapUiContentForegroundColorLighten5 = 'var(--sapUiContentForegroundColorLighten5);'; +export const sapUiContentForegroundColorLighten7 = 'var(--sapUiContentForegroundColorLighten7);'; +export const sapUiContentForegroundColorDarken3 = 'var(--sapUiContentForegroundColorDarken3);'; +export const sapUiContentForegroundColorDarken5 = 'var(--sapUiContentForegroundColorDarken5);'; +export const sapUiContentForegroundColorDarken10 = 'var(--sapUiContentForegroundColorDarken10);'; +export const sapUiScrollBarTrackColor = 'var(--sapUiScrollBarTrackColor);'; +export const sapUiScrollBarHoverFaceColor = 'var(--sapUiScrollBarHoverFaceColor);'; +export const sapUiInfobarHoverBackground = 'var(--sapUiInfobarHoverBackground);'; +export const sapUiListTableGroupHeaderBorderColor = 'var(--sapUiListTableGroupHeaderBorderColor);'; +export const sapUiListTableFixedBorder = 'var(--sapUiListTableFixedBorder);'; +export const sapUiListBorderColorLighten10 = 'var(--sapUiListBorderColorLighten10);'; +export const sapUiSelectedDarken10 = 'var(--sapUiSelectedDarken10);'; +export const sapUiActiveLighten3 = 'var(--sapUiActiveLighten3);'; +export const sapUiFieldHoverHelpBackground = 'var(--sapUiFieldHoverHelpBackground);'; +export const sapUiButtonLiteHoverBackground = 'var(--sapUiButtonLiteHoverBackground);'; +export const sapUiSegmentedButtonHoverBackground = 'var(--sapUiSegmentedButtonHoverBackground);'; +export const sapUiButtonHoverBorderColorLighten30 = 'var(--sapUiButtonHoverBorderColorLighten30);'; +export const sapUiCalloutShadow = 'var(--sapUiCalloutShadow);'; +export const sapUiShadowHeader = 'var(--sapUiShadowHeader);'; +export const sapUiShadowLevel0 = 'var(--sapUiShadowLevel0);'; +export const sapUiToggleButtonPressedHoverBackground = 'var(--sapUiToggleButtonPressedHoverBackground);'; +export const sapUiButtonLiteHoverBorderColor = 'var(--sapUiButtonLiteHoverBorderColor);'; +export const sapUiButtonFooterHoverBackground = 'var(--sapUiButtonFooterHoverBackground);'; +export const sapUiSegmentedButtonFooterHoverBackground = 'var(--sapUiSegmentedButtonFooterHoverBackground);'; +export const sapUiToggleButtonPressedHoverBorderColor = 'var(--sapUiToggleButtonPressedHoverBorderColor);'; +export const sapUiSegmentedButtonSelectedHoverBackground = 'var(--sapUiSegmentedButtonSelectedHoverBackground);'; +export const sapList_Hover_Background = 'var(--sapList_Hover_Background);'; +export const sapUiSegmentedButtonSelectedHoverBorderColor = 'var(--sapUiSegmentedButtonSelectedHoverBorderColor);'; +export const sapList_SelectionBackgroundColor = 'var(--sapList_SelectionBackgroundColor);'; +export const sapUiListHoverBackground = 'var(--sapUiListHoverBackground);'; +export const sapUiListSelectionBackgroundColor = 'var(--sapUiListSelectionBackgroundColor);'; +export const sapUiButtonLiteActionSelectHoverBackground = 'var(--sapUiButtonLiteActionSelectHoverBackground);'; +export const sapUiToggleButtonPressedBackgroundLighten50Desaturate47 = + 'var(--sapUiToggleButtonPressedBackgroundLighten50Desaturate47);'; +export const sapUiButtonHoverBackgroundDarken2 = 'var(--sapUiButtonHoverBackgroundDarken2);'; +export const sapUiButtonHoverBackgroundDarken5 = 'var(--sapUiButtonHoverBackgroundDarken5);'; +export const sapUiToggleButtonPressedBorderColorLighten19Desaturate46 = + 'var(--sapUiToggleButtonPressedBorderColorLighten19Desaturate46);'; +export const sapShell_TextColor = 'var(--sapShell_TextColor);'; +export const sapButton_Emphasized_TextColor = 'var(--sapButton_Emphasized_TextColor);'; +export const sapButton_TextColor = 'var(--sapButton_TextColor);'; +export const sapPageHeader_TextColor = 'var(--sapPageHeader_TextColor);'; +export const sapPageFooter_TextColor = 'var(--sapPageFooter_TextColor);'; +export const sapTile_TitleTextColor = 'var(--sapTile_TitleTextColor);'; +export const sapTile_TextColor = 'var(--sapTile_TextColor);'; +export const sapTile_IconColor = 'var(--sapTile_IconColor);'; +export const sapUiShellTextColor = 'var(--sapUiShellTextColor);'; +export const sapUiShadowLevel1 = 'var(--sapUiShadowLevel1);'; +export const sapUiShadowLevel2 = 'var(--sapUiShadowLevel2);'; +export const sapUiShadowLevel3 = 'var(--sapUiShadowLevel3);'; +export const sapUiButtonEmphasizedTextColor = 'var(--sapUiButtonEmphasizedTextColor);'; +export const sapUiButtonTextColor = 'var(--sapUiButtonTextColor);'; +export const sapUiPageHeaderTextColor = 'var(--sapUiPageHeaderTextColor);'; +export const sapUiPageFooterBorderColor = 'var(--sapUiPageFooterBorderColor);'; +export const sapUiPageFooterTextColor = 'var(--sapUiPageFooterTextColor);'; +export const sapUiTileTitleTextColor = 'var(--sapUiTileTitleTextColor);'; +export const sapUiTileTextColor = 'var(--sapUiTileTextColor);'; +export const sapUiTileIconColor = 'var(--sapUiTileIconColor);'; +export const sapUiButtonRejectTextColor = 'var(--sapUiButtonRejectTextColor);'; +export const sapUiButtonAcceptTextColor = 'var(--sapUiButtonAcceptTextColor);'; +export const sapUiButtonLiteTextColor = 'var(--sapUiButtonLiteTextColor);'; +export const sapUiButtonHeaderTextColor = 'var(--sapUiButtonHeaderTextColor);'; +export const sapUiButtonIconColor = 'var(--sapUiButtonIconColor);'; +export const sapUiSegmentedButtonIconColor = 'var(--sapUiSegmentedButtonIconColor);'; +export const sapUiButtonHeaderDisabledTextColor = 'var(--sapUiButtonHeaderDisabledTextColor);'; +export const sapHighlightTextColor = 'var(--sapHighlightTextColor);'; +export const sapGroup_TitleTextColor = 'var(--sapGroup_TitleTextColor);'; +export const sapContent_ForegroundTextColor = 'var(--sapContent_ForegroundTextColor);'; +export const sapUiShellActiveTextColor = 'var(--sapUiShellActiveTextColor);'; +export const sapList_HeaderTextColor = 'var(--sapList_HeaderTextColor);'; +export const sapUiHighlightTextColor = 'var(--sapUiHighlightTextColor);'; +export const sapUiGroupTitleTextColor = 'var(--sapUiGroupTitleTextColor);'; +export const sapUiContentForegroundTextColor = 'var(--sapUiContentForegroundTextColor);'; +export const sapUiListTableGroupHeaderTextColor = 'var(--sapUiListTableGroupHeaderTextColor);'; +export const sapUiListHeaderTextColor = 'var(--sapUiListHeaderTextColor);'; +export const sapUiListActiveTextColor = 'var(--sapUiListActiveTextColor);'; +export const sapUiSegmentedButtonSelectedIconColor = 'var(--sapUiSegmentedButtonSelectedIconColor);'; +export const sapUiSegmentedButtonActiveIconColor = 'var(--sapUiSegmentedButtonActiveIconColor);'; +export const sapButton_Hover_TextColor = 'var(--sapButton_Hover_TextColor);'; +export const sapUiListSelectionHoverBackground = 'var(--sapUiListSelectionHoverBackground);'; +export const sapUiButtonHoverTextColor = 'var(--sapUiButtonHoverTextColor);'; +export const sapUiButtonFooterTextColor = 'var(--sapUiButtonFooterTextColor);'; +export const sapUiSegmentedButtonTextColor = 'var(--sapUiSegmentedButtonTextColor);'; +export const sapUiToggleButtonPressedTextColor = 'var(--sapUiToggleButtonPressedTextColor);'; +export const sapUiButtonActiveTextColor = 'var(--sapUiButtonActiveTextColor);'; +export const sapUiSegmentedButtonSelectedTextColor = 'var(--sapUiSegmentedButtonSelectedTextColor);'; +export const sapUiSegmentedButtonActiveTextColor = 'var(--sapUiSegmentedButtonActiveTextColor);'; diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md index b55185bc907..882edc690ef 100644 --- a/packages/main/__karma_snapshots__/ObjectPage.md +++ b/packages/main/__karma_snapshots__/ObjectPage.md @@ -66,65 +66,49 @@ -
- - +
+ - - -
- - -
-
-
- Test 1 + + + +
+ + +
+
+
+ Test 1 +
-
-
-
- +
+
+ +
-
-
- - - - -
-
-
- Test 2 +
+ + + + +
+
+
+ Test 2 +
- -
-
-
- Test2 +
+
+
+ Test2 +
-
-
- - - - -
-
-
- Test 3 +
+ + + + +
+
+
+ Test 3 +
- -
-
- Test1 +
+
+ Test1 +
-
-
- - - - -
-
-
- Test 4 +
+ + + + +
+
+
+ Test 4 +
- -
-
-

- Section 4 -

- - -
-
+
+
+

+ Section 4 +

+ + +
SubSection 4.1
+
+ Test 4 SubSection 1 +
-
- Test 4 SubSection 1 -
-
- - - - -
-
+ + + + +
SubSection 4.2
+
+ Test 4 SubSection 2 +
-
- Test 4 SubSection 2 -
-
- - + + +
-
-
- - - - -
-
-
- Test 5 +
+ + + + +
+
+
+ Test 5 +
- -
-
- - -
-
+
+
+ + +
SubSection 5.1
+
+ Content of SubSection 5.1 +
-
- Content of SubSection 5.1 -
-
- - - - -
-
+ + + + +
SubSection 5.2
+
+ Content of SubSection 5.2 +
-
- Content of SubSection 5.2 -
-
- - + + +
-
-
- - -
-
- - + + + +
+ + + +
@@ -454,121 +388,111 @@
-
- - +
+ - - -
- - -
-
-
- Test 1 + + + +
+ + +
+
+
+ Test 1 +
-
-
-
- +
+
+ +
-
-
- - - - -
-
-
- Test 2 +
+ + + + +
+
+
+ Test 2 +
- -
-
- +
+
+ +
-
-
- - - - -
-
-
- Test 3 +
+ + + + +
+
+
+ Test 3 +
- -
-
- +
+
+ +
-
-
- - -
-
- - + + + +
+ + + +
@@ -643,41 +567,49 @@ -
- -
- -
+
+ - - -
- - -
-
-
- Test 1 + + + +
+ + +
+
+
+ Test 1 +
-
-
-
- +
+
+ +
-
-
- - -
-
- - + + + +
+ + + +
@@ -819,7 +715,7 @@ #### `Just Some Sections` ``` -

Test
+

Test
``` #### `Not crashing with 1 section` @@ -843,37 +739,41 @@
-
- -
- -
+
    + +
  • + + + + + +
    • -
+ - - -
- - -
-
-
-
-
-
- Test + + + +
+ + +
+
+
-
-
- - -
-
- - +
+
+ Test +
+
+
+ + +
+
+ + +
@@ -903,15 +803,17 @@
-
+
    - - -
    -
    -
    -     -     + + + +
    +
    +
    +     +     +
@@ -941,44 +843,50 @@
-
- -
- -
+
    + +
  • + + + + + +
    • - -
    - -
    + +
  • + + + + + +
    • -
+ - - -
- - -
-
-
-
-
-
- Test 2 + + + +
+ + +
+
+
+
+
+
+ Test 2 +
-
-
- - -
-
- - +
+ + +
+
+ + +
diff --git a/packages/main/__karma_snapshots__/ObjectPageSubSection.md b/packages/main/__karma_snapshots__/ObjectPageSubSection.md index e890c3bed74..f6f1bebc31e 100644 --- a/packages/main/__karma_snapshots__/ObjectPageSubSection.md +++ b/packages/main/__karma_snapshots__/ObjectPageSubSection.md @@ -3,6 +3,6 @@ #### `Render without Crashing` ``` -
+
``` diff --git a/packages/main/__karma_snapshots__/ProgressIndicator.md b/packages/main/__karma_snapshots__/ProgressIndicator.md index 022104fce71..d7f5008fde6 100644 --- a/packages/main/__karma_snapshots__/ProgressIndicator.md +++ b/packages/main/__karma_snapshots__/ProgressIndicator.md @@ -9,7 +9,7 @@
-
+
@@ -34,8 +34,8 @@
-
- +
+ @@ -58,7 +58,7 @@
-
+
@@ -82,7 +82,7 @@
-
+
@@ -106,7 +106,7 @@
-
+
@@ -130,7 +130,7 @@
-
+
@@ -154,7 +154,7 @@
-
+
diff --git a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts b/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts index f6aa5ed042a..02a985ec2b0 100644 --- a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts +++ b/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts @@ -1,4 +1,4 @@ -import { fonts, HSLColor } from '@ui5/webcomponents-react-base'; +import { fonts } from '@ui5/webcomponents-react-base'; import { JSSTheme } from '../../../interfaces/JSSTheme'; const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ @@ -17,7 +17,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ backgroundColor: parameters.sapUiTileBackground, fontFamily: fonts.sapUiFontHeaderFamily, '&:hover': { - backgroundColor: HSLColor.darken(parameters.sapUiTileBackground, 2).toString() + backgroundColor: parameters.sapUiTileBackgroundDarken20 } }, arrowIndicatorShape: { diff --git a/packages/main/src/components/Avatar/Avatar.karma.tsx b/packages/main/src/components/Avatar/Avatar.karma.tsx index 8253f9eaa03..f80ce72c5b4 100644 --- a/packages/main/src/components/Avatar/Avatar.karma.tsx +++ b/packages/main/src/components/Avatar/Avatar.karma.tsx @@ -6,7 +6,7 @@ import React from 'react'; import sinon from 'sinon'; import { AvatarShape } from '../../lib/AvatarShape'; import { AvatarSize } from '../../lib/AvatarSize'; -import { Avatar } from './index'; +import { Avatar } from '../../lib/Avatar'; use(matchSnapshot); @@ -48,7 +48,7 @@ describe('Avatar', () => { ); const el = wrapper.find(Avatar).getDOMNode() as HTMLElement; - expect(el.style.length).to.equal(0); + expect(el.style.fontSize).not.to.equal('2rem'); }); it('with Image', () => { diff --git a/packages/main/src/components/Avatar/index.tsx b/packages/main/src/components/Avatar/index.tsx index 248d9248af2..38b5bdb8c5b 100644 --- a/packages/main/src/components/Avatar/index.tsx +++ b/packages/main/src/components/Avatar/index.tsx @@ -68,6 +68,8 @@ export class Avatar extends PureComponent { cssClasses.push(classes[`size${size}`]); } + inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)'; + if (shape === AvatarShape.Circle) { cssClasses.push(classes.circle); } diff --git a/packages/main/src/components/Carousel/CarouselPagination.jss.ts b/packages/main/src/components/Carousel/CarouselPagination.jss.ts index d5b579ad8b8..86349585040 100644 --- a/packages/main/src/components/Carousel/CarouselPagination.jss.ts +++ b/packages/main/src/components/Carousel/CarouselPagination.jss.ts @@ -1,10 +1,7 @@ -import { HSLColor } from '@ui5/webcomponents-react-base'; import { ZIndex } from '../../enums/ZIndex'; import { JSSTheme } from '../../interfaces/JSSTheme'; -const lighten = HSLColor.lighten; - -const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ +const styles = ({ parameters }: JSSTheme) => ({ pagination: { display: 'flex', width: 'calc(100% - 2rem)', @@ -40,16 +37,19 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ textDecoration: 'none', overflow: 'hidden', display: 'inline-block', - width: '0.5rem', - height: '0.5rem', - margin: '0 0.25rem', + margin: '0 0.375rem', + width: '0.25rem', + height: '0.25rem', transition: 'background-color 0.1s ease-in', borderRadius: '50%', alignSelf: 'center', boxSizing: 'border-box', - backgroundColor: lighten(parameters.sapUiContentForegroundColor, 50).hsl, + backgroundColor: parameters.sapUiContentNonInteractiveIconColor, '&$paginationIconActive': { - backgroundColor: parameters.sapUiContentNonInteractiveIconColor + margin: '0 0.25rem', + width: '0.5rem', + height: '0.5rem', + backgroundColor: parameters.sapUiSelected } }, paginationIconActive: {}, diff --git a/packages/main/src/components/ObjectPage/AnchorButton.tsx b/packages/main/src/components/ObjectPage/AnchorButton.tsx new file mode 100644 index 00000000000..79256614ba6 --- /dev/null +++ b/packages/main/src/components/ObjectPage/AnchorButton.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Event, fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; +import { JSSTheme } from '../../interfaces/JSSTheme'; + +const anchorButtonStyles = ({ parameters }: JSSTheme) => ({ + button: { + color: parameters.sapUiContentLabelColor, + fontFamily: fonts.sapUiFontFamily, + fontSize: fonts.sapMFontMediumSize + }, + selected: { + color: parameters.sapUiSelected, + minWidth: '2rem', + textAlign: 'center', + '&:after': { + content: '""', + borderBottom: `0.188rem solid ${parameters.sapUiSelected}`, + width: '100%', + position: 'absolute', + bottom: 0, + left: 0 + } + } +}); + +export const AnchorButton = withStyles(anchorButtonStyles)(({ onClick, children, classes, selected }) => { + const classNames = StyleClassHelper.of(classes.button); + if (selected) { + classNames.put(classes.selected); + } + + const eventWrapper = (e) => { + onClick(Event.of(null, e, { text: true })); + }; + + return ( + + {children} + + ); +}); diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts index 52e703089bc..4c5fefce8b8 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts +++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts @@ -1,8 +1,7 @@ -import { fonts, HSLColor } from '@ui5/webcomponents-react-base'; -import { ZIndex } from '../../enums/ZIndex'; +import { fonts } from '@ui5/webcomponents-react-base'; import { JSSTheme } from '../../interfaces/JSSTheme'; -const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ +const styles = ({ parameters }: JSSTheme) => ({ objectPage: { width: '100%', height: '100%', @@ -104,7 +103,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ hideHeaderContent: { paddingTop: '0.5rem', marginBottom: '0.5rem', - boxShadow: `inset 0 -1px 0 0 ${parameters.sapUiShellBorderColor}`, + boxShadow: `inset 0 -1px 0 0 ${parameters.sapUiObjectHeaderBorderColor}`, display: 'flex', justifyContent: 'center', alignItems: 'center' @@ -113,50 +112,20 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ paddingLeft: '2rem', backgroundColor: parameters.sapUiObjectHeaderBackground, boxShadow: `inset 0 0.125rem ${parameters.sapUiObjectHeaderBackground}`, + display: 'flex', + margin: '0px', + height: '2.75rem', + padding: '0px', + listStyle: 'none', '& $anchorButtonContainer': { + position: 'relative', display: 'inline-flex', - '& $anchorButton': { - textTransform: 'uppercase', - '& > span:hover, & > span:active': { - backgroundColor: 'transparent', - borderColor: 'transparent', - color: parameters.sapUiButtonLiteTextColor, - '& span[data-icon-content]': { - color: parameters.sapUiButtonLiteTextColor - } - } - }, + alignItems: 'center', '&:not(:first-child)': { marginLeft: '2rem' } - }, - '& $active': { - color: HSLColor.of(parameters.sapUiGroupTitleTextColor).lighten(20).hsl, - borderBottom: `0.125rem solid ${parameters.sapUiSelected}` - }, - '& $active + div': { - color: HSLColor.of(parameters.sapUiGroupTitleTextColor).lighten(20).hsl, - borderBottom: `0.125rem solid ${parameters.sapUiSelected}` } }, - anchorButtonModal: { - position: 'absolute', - minWidth: '6.25rem', - boxSizing: 'border-box', - outline: 'none', - maxWidth: '100%', - maxHeight: '100%', - border: 'none', - boxShadow: '0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15)', - borderRadius: '0.25rem', - minHeight: '2rem', - margin: '0', - zIndex: ZIndex.InputModal - }, - iconTabModeSelected: { - color: HSLColor.of(parameters.sapUiGroupTitleTextColor).lighten(20).hsl, - borderBottom: `0.125rem solid ${parameters.sapUiSelected}` - }, titleBar: {}, image: {}, container: {}, diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx index b0dd40c16c9..1ab16c69927 100644 --- a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx @@ -1,23 +1,16 @@ import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base'; import React, { Component, RefObject } from 'react'; -import { Link } from 'react-scroll'; import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys'; -import { Button } from '../../lib/Button'; -import { ButtonDesign } from '../../lib/ButtonDesign'; -import { CustomListItem } from '../../lib/CustomListItem'; import { Icon } from '../../lib/Icon'; -import { Label } from '../../lib/Label'; import { List } from '../../lib/List'; -import { ListItemTypes } from '../../lib/ListItemTypes'; -import { ObjectPageMode } from '../../lib/ObjectPageMode'; import { PlacementType } from '../../lib/PlacementType'; import { Popover } from '../../lib/Popover'; +import { StandardListItem } from '../../lib/StandardListItem'; +import { AnchorButton } from './AnchorButton'; export interface ObjectPageAnchorPropTypes { section: any; - index: number; classes: ObjectWithVariableKeys; - mode: ObjectPageMode; onAnchorSelected: (event: Event) => void; onSubSectionSelected: (event: Event) => void; selected: boolean; @@ -44,23 +37,16 @@ export class ObjectPageAnchor extends Component { - const { section, onAnchorSelected } = this.props; - if (this.state.open && onAnchorSelected) { - onAnchorSelected(Event.of(this, new CustomEvent('subSectionSelected'), section)); - } - this.closeModal(); - }; - private onSubSectionClick = (e) => { const { section, onSubSectionSelected } = this.props; const selectedId = e.getParameter('item').dataset.key; const subSection = section.props.children .filter((item) => item.props && item.props.isSubSection) .find((item) => item.props.id === selectedId); - if (this.state.open && subSection && typeof onSubSectionSelected === 'function') { - onSubSectionSelected(Event.of(this, new CustomEvent('subSectionSelected'), subSection)); + if (this.state.open && subSection) { + onSubSectionSelected(Event.of(this, e.getOriginalEvent(), subSection)); } + this.closeModal(); }; private subSectionsAvailable() { @@ -74,22 +60,14 @@ export class ObjectPageAnchor extends Component { return ( - - - - - + + {item.props.title} + ); }; private handleAnchorButtonClick = (e) => { - const isIconClicked = e.getHtmlSourceElement().constructor.getMetadata().metadata.tag === 'ui5-icon'; + const isIconClicked = !e.getParameter('text'); const { section, onAnchorSelected } = this.props; if (isIconClicked) { this.openModal(); @@ -99,47 +77,34 @@ export class ObjectPageAnchor extends Component + {section.props.title} - - ); - - let anchorContent = ( - - {titleButton} - + ); const navigationIcon = ( ); - if (mode === ObjectPageMode.IconTabBar) { - anchorContent = titleButton; - if (selected) { - containerClasses.put(classes.iconTabModeSelected); - } - } - return ( -
- {anchorContent} +
  • + {titleButton} {subSectionsAvailable && ( )} -
    • + ); } } diff --git a/packages/main/src/components/ObjectPage/ObjectPageContent.tsx b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx new file mode 100644 index 00000000000..fe50df08ad5 --- /dev/null +++ b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx @@ -0,0 +1,39 @@ +import React, { forwardRef, ReactNode, RefObject } from 'react'; +import { withStyles } from '@ui5/webcomponents-react-base'; +import { JSSTheme } from '../../interfaces/JSSTheme'; + +const objectPageContentStyles = ({ parameters }: JSSTheme) => ({ + sectionsContainer: { + '&:before': { + display: 'table', + content: '""' + }, + '& :first-child > div[role="heading"]': { + display: 'none' + }, + position: 'relative', + height: '100%', + overflowX: 'hidden', + overflowY: 'auto', + backgroundColor: parameters.sapUiBaseBG, + '&:after': { + clear: 'both', + display: 'table', + content: '""' + } + } +}); + +interface Props { + children: ReactNode | ReactNode[]; +} + +export const ObjectPageContent = forwardRef(({ children }: Props, ref: RefObject) => { + const ObjectPageInner = withStyles(objectPageContentStyles)(({ classes }) => ( +
    + {children} +
    +
    + )); + return ; +}); diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index aeac63da660..3c6c1bba8f9 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -1,56 +1,13 @@ import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; -import React, { - Children, - cloneElement, - PureComponent, - ReactElement, - ReactNode, - ReactNodeArray, - RefObject -} from 'react'; +import React, { Children, createRef, PureComponent, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react'; import { scroller } from 'react-scroll'; import { ClassProps } from '../../interfaces/ClassProps'; import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; -import { JSSTheme } from '../../interfaces/JSSTheme'; import { Button } from '../../lib/Button'; import { ObjectPageMode } from '../../lib/ObjectPageMode'; import styles from './ObjectPage.jss'; import { ObjectPageAnchor } from './ObjectPageAnchor'; - -const objectPageContentStyles = ({ parameters }: JSSTheme) => ({ - sectionsContainer: { - '&:before': { - display: 'table', - content: '""' - }, - '& :first-child > div[role="heading"]': { - display: 'none' - }, - position: 'relative', - height: '100%', - overflowX: 'hidden', - overflowY: 'auto', - backgroundColor: parameters.sapUiBaseBG, - '&:after': { - clear: 'both', - display: 'table', - content: '""' - } - } -}); - -const ObjectPageContent = withStyles(objectPageContentStyles)( - React.forwardRef((props: any, ref: RefObject) => { - const { children, classes } = props; - - return ( -
    - {children} -
    -
    - ); - }) -); +import { ObjectPageContent } from './ObjectPageContent'; export interface ObjectPagePropTypes extends Fiori3CommonProps { title?: string; @@ -90,8 +47,8 @@ export class ObjectPage extends PureComponent = React.createRef(); - private fillerDivDomRef: RefObject = React.createRef(); + private objectPage: RefObject = createRef(); + private fillerDivDomRef: RefObject = createRef(); static getDerivedStateFromProps(nextProps: ObjectPagePropTypes, prevState: ObjectPageState) { if (nextProps.selectedSectionId !== prevState.prevProps.selectedSectionId) { @@ -117,33 +74,47 @@ export class ObjectPage extends PureComponent { + scroller.scrollTo(`ObjectPageSection-${id}`, { + containerId: 'ObjectPageSections', + smooth: true, + offset: this.state.selectedSectionIndex > 0 ? 45 : 0 + }); + }; + componentDidMount() { this.adjustDummyDivHeight(); if (this.props.mode !== ObjectPageMode.IconTabBar) { window.addEventListener('resize', this.adjustDummyDivHeight); - if (this.props.selectedSectionId && this.state.selectedSectionIndex >= 0) { - scroller.scrollTo(`ObjectPageSection-${this.props.selectedSectionId}`, { - containerId: 'ObjectPageSections', - smooth: true - }); + if (this.props.selectedSectionId && this.state.selectedSectionIndex > 0) { + this.scrollToSectionWithId(this.props.selectedSectionId); } } } + getSnapshotBeforeUpdate(prevProps: Readonly, prevState: Readonly): any | null { + const scrollPosition = this.objectPage.current.querySelector('section').scrollTop; + const fillerDivHeight = this.fillerDivDomRef.current.style.height; + return { + scrollPosition, + fillerDivHeight + }; + } + componentDidUpdate( prevProps: Readonly, prevState: Readonly, snapshot?: any ): void { + this.objectPage.current.querySelector('section').scrollTop = snapshot.scrollPosition; + this.fillerDivDomRef.current.style.height = snapshot.fillerDivHeight; if ( this.props.selectedSectionId !== prevProps.selectedSectionId && this.props.mode === ObjectPageMode.Default && this.state.selectedSectionIndex >= 0 ) { requestAnimationFrame(() => { - scroller.scrollTo(`ObjectPageSection-${this.props.selectedSectionId}`, { - containerId: 'ObjectPageSections' - }); + this.scrollToSectionWithId(this.props.selectedSectionId); }); } } @@ -155,35 +126,82 @@ export class ObjectPage extends PureComponent { + if (!this.objectPage.current) { + // in case componentWillUnmount didn´t fire + window.removeEventListener('resize', this.adjustDummyDivHeight); + return; + } + if (this.props.mode !== ObjectPageMode.Default) { + return; + } - const sections = this.objectPage.current.querySelectorAll('[id^="ObjectPageSection"]'); - if (!sections || sections.length < 1) { - return; - } + const sections = this.objectPage.current.querySelectorAll('[id^="ObjectPageSection"]'); + if (!sections || sections.length < 1) { + return; + } - const lastSectionDomRef = sections[sections.length - 1]; - const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]'); + const lastSectionDomRef = sections[sections.length - 1]; + const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]'); - let domRef = null; - if (subSections.length > 0) { - domRef = subSections[subSections.length - 1]; - } else { - domRef = lastSectionDomRef; - } + let domRef = null; + if (subSections.length > 0) { + domRef = subSections[subSections.length - 1]; + } else { + domRef = lastSectionDomRef; + } - let heightDiff = lastSectionDomRef.parentElement.offsetHeight - domRef.offsetHeight; - heightDiff = heightDiff > 0 ? heightDiff : 0; - this.fillerDivDomRef.current.style.height = `${heightDiff}px`; + let heightDiff = lastSectionDomRef.parentElement.offsetHeight - domRef.offsetHeight; + heightDiff = heightDiff > 0 ? heightDiff : 0; + this.fillerDivDomRef.current.style.height = `${heightDiff}px`; + }); } + private changeHeader = () => { + this.setState({ showHeader: !this.state.showHeader }); + }; + + private handleOnSubSectionSelected = (index) => (e) => { + const scrollId = e.getParameter('props').id; + + this.setState( + { + selectedSectionIndex: index + }, + () => { + scroller.scrollTo(`ObjectPageSubSection-${scrollId}`, { + containerId: 'ObjectPageSections', + smooth: true, + offset: 36 + }); + } + ); + }; + + private handleOnAnchorSelected = (index) => (e) => { + this.setState( + { + selectedSectionIndex: index + }, + () => { + if (this.props.mode === ObjectPageMode.Default) { + const { id } = e.getParameter('props'); + requestAnimationFrame(() => { + this.scrollToSectionWithId(id); + }); + } + } + ); + + this.props.onSelectedSectionChanged( + Event.of(this, e.getOriginalEvent(), { + selectedSectionIndex: index, + selectedSectionId: e.getParameter('props').id, + section: e.getParameters() + }) + ); + }; + render() { const { title, @@ -239,13 +257,7 @@ export class ObjectPage extends PureComponent{title} {subTitle}     - - {headerActions.map((action, index) => - cloneElement(action, { - key: index - }) - )} - + {headerActions} {/* Header Content */}
    @@ -266,68 +278,28 @@ export class ObjectPage extends PureComponent {this.props.showHideHeaderButton && (
    -
    +
      {Children.map(children, (section, index) => ( ))} -
    + {content}
    ); } - - private changeHeader = () => { - this.setState({ showHeader: !this.state.showHeader }); - }; - - private handleOnSubSectionSelected = (index) => (e) => { - if (this.props.mode === ObjectPageMode.IconTabBar) { - const scrollId = e.getParameter('props').id; - this.setState( - { - selectedSectionIndex: index - }, - () => { - scroller.scrollTo(`ObjectPageSection-${scrollId}`, { - containerId: 'ObjectPageSections', - smooth: true - }); - } - ); - } - }; - - private handleOnAnchorSelected = (index) => (e) => { - if (this.props.mode !== ObjectPageMode.Default) { - this.setState({ - selectedSectionIndex: index - }); - } - - this.props.onSelectedSectionChanged( - Event.of(this, e.getOriginalEvent(), { - selectedSectionIndex: index, - selectedSectionId: e.getParameter('props').id, - section: e.getParameters() - }) - ); - }; } diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts index f7dd4b4a3a7..cc12f1e4e1a 100644 --- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts +++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts @@ -1,22 +1,18 @@ -import { fonts, HSLColor } from '@ui5/webcomponents-react-base'; +import { fonts } from '@ui5/webcomponents-react-base'; import { JSSTheme } from '../../interfaces/JSSTheme'; const styles = ({ theme, parameters }: JSSTheme) => ({ header: { padding: '0 3rem 0 2.5rem', - borderBottom: `0.125rem solid ${HSLColor.of(parameters.sapUiListBorderColor).lighten(5).hsl}`, + borderBottom: `1px solid ${parameters.sapUiGroupTitleBorderColor}`, boxSizing: 'border-box', - height: '2.5rem', - lineHeight: '2rem' + height: '2.75rem' }, title: { - height: '2.5rem', - lineHeight: '2rem', - paddingBottom: '0.5rem', + height: '2.75rem', color: parameters.sapUiBaseText, - fontSize: '1.375rem', - borderBottom: `0.125rem solid ${HSLColor.of(parameters.sapUiListBorderColor).darken(30).hsl}`, - boxSizing: 'border-box', + fontSize: parameters.sapMFontHeader4Size, + borderBottom: `1px solid ${parameters.sapUiActive}`, display: 'inline-block', maxWidth: '100%', overflow: 'hidden', diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index be0fb082c2e..d007cd51c96 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -1,12 +1,10 @@ -import { fonts, HSLColor, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; +import { fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; import React, { PureComponent, ReactNode, ReactNodeArray } from 'react'; import { ClassProps } from '../../interfaces/ClassProps'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException'; -const lighten = (amount, color) => HSLColor.of(color).lighten(amount * 100).hsl; - export interface ObjectPageSubSectionPropTypes extends CommonProps { title?: string; id: string; @@ -17,28 +15,18 @@ export interface ObjectPageSubSectionInternalProps extends ObjectPageSubSectionP isSubSection?: boolean; } -const styles = ({ theme, parameters }: JSSTheme) => ({ +const styles = ({ parameters }: JSSTheme) => ({ objectPageSubSection: { - 'padding-bottom': 0, - borderBottom: `0.125rem solid ${lighten(0.05, parameters.sapUiListBorderColor)}`, + padding: '1rem 0', '&:focus': { - outline: `1px dotted ${parameters.sapUIContentFocusColor}`, + outline: `1px dotted ${parameters.sapUiContentFocusColor}`, outlineOffset: '-1px' } }, - objectPageSubSectionHeader: { - height: 'auto', - overflow: 'auto', - wordWrap: 'break-word', - padding: '1rem 0 0 0' - }, objectPageSubSectionHeaderTitle: { - whiteSpace: 'normal', - float: 'left', - lineHeight: '3rem', - fontSize: fonts.sapMFontHeader4Size, - fontWeight: 'normal', - color: parameters.sapUiGroupTitleTextColor + fontSize: fonts.sapMFontHeader5Size, + color: parameters.sapUiGroupTitleTextColor, + marginBottom: '0.5rem' }, subSectionContent: { padding: '1rem 2rem 3rem 0' @@ -72,9 +60,7 @@ export class ObjectPageSubSection extends PureComponent -
    -
    {title}
    -
    +
    {title}
    {children}
    ); diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts index 5021f5d8e73..95129f65669 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts @@ -10,16 +10,24 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ display: 'flex' }, iconSuccess: { - color: parameters.sapUiPositiveText + '& ui5-icon': { + color: parameters.sapUiPositiveText + } }, iconWarning: { - color: parameters.sapUiCriticalText + '& ui5-icon': { + color: parameters.sapUiCriticalText + } }, iconError: { - color: parameters.sapUiNegativeText + '& ui5-icon': { + color: parameters.sapUiNegativeText + } }, iconNone: { - color: parameters.sapUiNeutralText + '& ui5-icon': { + color: parameters.sapUiNeutralText + } }, iconInformation: { color: parameters.sapUiInformativeElement diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts index 52aa514eebd..8859ecc8025 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts @@ -1,21 +1,8 @@ -import { fonts, HSLColor } from '@ui5/webcomponents-react-base'; +import { fonts } from '@ui5/webcomponents-react-base'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { ValueState } from '../../lib/ValueState'; -function getBackgroundColor(state) { - switch (state) { - case ValueState.Success: - return 'sapUiPositiveElement'; - case ValueState.Warning: - return 'sapUiCriticalElement'; - case ValueState.Error: - return 'sapUiNegativeElement'; - default: - return 'sapUiNeutralElement'; - } -} - -const styles = ({ theme, contentDensity, parameters }: JSSTheme) => { +const styles = ({ parameters }: JSSTheme) => { return { progressBarRemaining: { height: '100%', @@ -51,13 +38,10 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => { overflow: 'hidden' }, progressbar: { - WebkitTransition: 'flex-basis 2s', transition: 'flex-basis 1s', justifyContent: 'flex-end', display: 'flex', - alignItems: 'center', - WebkitAlignItems: 'center', - background: (props) => parameters[getBackgroundColor(props.state)] + alignItems: 'center' }, progressBarText: { textOverflow: 'ellipsis', @@ -71,14 +55,22 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => { color: parameters.sapUiBaseText }, progressBarTextColorHigh: { - color: (props) => { - const backgroundColor = parameters[getBackgroundColor(props.state)]; - return HSLColor.of(backgroundColor).contrast( - parameters.sapUiContentForegroundTextColor, - parameters.sapUiContentContrastTextColor, - (parameters.sapUiContentContrastTextThreshold as any) as number - ); - } + color: parameters.sapUiContentContrastTextColor + }, + [`state${ValueState.None}`]: { + backgroundColor: parameters.sapUiNeutralElement + }, + [`state${ValueState.Success}`]: { + backgroundColor: parameters.sapUiPositiveElement + }, + [`state${ValueState.Warning}`]: { + backgroundColor: parameters.sapUiCriticalElement + }, + [`state${ValueState.Error}`]: { + backgroundColor: parameters.sapUiNegativeElement + }, + [`state${ValueState.Information}`]: { + backgroundColor: parameters.sapUiInformativeElement } }; }; diff --git a/packages/main/src/components/ProgressIndicator/demo.stories.tsx b/packages/main/src/components/ProgressIndicator/demo.stories.tsx index 36f221b14d0..a48e30e5e52 100644 --- a/packages/main/src/components/ProgressIndicator/demo.stories.tsx +++ b/packages/main/src/components/ProgressIndicator/demo.stories.tsx @@ -1,5 +1,6 @@ import { storiesOf } from '@storybook/react'; import React from 'react'; +import { ValueState } from '../..'; import { ProgressIndicator } from '../../lib/ProgressIndicator'; function renderStory() { @@ -7,9 +8,10 @@ function renderStory() {
    - - - + + + +
    ); } diff --git a/packages/main/src/components/ProgressIndicator/index.tsx b/packages/main/src/components/ProgressIndicator/index.tsx index f17ade49c9c..35c0e2cf0f8 100644 --- a/packages/main/src/components/ProgressIndicator/index.tsx +++ b/packages/main/src/components/ProgressIndicator/index.tsx @@ -1,5 +1,6 @@ import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; import React, { PureComponent } from 'react'; +import { ValueState } from '../../lib/ValueState'; import { ClassProps } from '../../interfaces/ClassProps'; import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -34,7 +35,7 @@ export interface ProgressIndicatorPropTypes extends Fiori3CommonProps { /* * State of indicator (using ValueState) */ - state?: string; + state?: ValueState; } interface ProgressIndicatorInternalProps extends ProgressIndicatorPropTypes, ClassProps { @@ -53,14 +54,24 @@ export class ProgressIndicator extends PureComponent }; render() { - const { percentValue, displayValue, visible, width, height, classes, theme, className, style, tooltip } = this - .props as ProgressIndicatorInternalProps; + const { + percentValue, + displayValue, + visible, + width, + height, + classes, + theme, + className, + style, + tooltip, + state + } = this.props as ProgressIndicatorInternalProps; // CSS classes const wrapperClasses = StyleClassHelper.of(classes.wrapper); const progressBarClasses = StyleClassHelper.of(classes.progressbar); const progressBarTextClasses = StyleClassHelper.of(classes.progressBarText); - const progressBarRemainingClasses = StyleClassHelper.of(classes.progressBarRemaining); const progressBarContainerStyle = { width, height }; const progressBarStyle = { flexBasis: `${percentValue}%` }; @@ -89,6 +100,8 @@ export class ProgressIndicator extends PureComponent const progressBarTextSpan = {displayValue} ; + progressBarClasses.put(classes[`state${state}`]); + if (className) { wrapperClasses.put(className); } @@ -107,7 +120,7 @@ export class ProgressIndicator extends PureComponent
    {percentValue <= 50 ? null : progressBarTextSpan}
    -
    {percentValue <= 50 ? progressBarTextSpan : null}
    +
    {percentValue <= 50 ? progressBarTextSpan : null}
    ); } diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts index 931641a4371..2ea91544ac7 100644 --- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts +++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts @@ -17,7 +17,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ display: 'inline-block', fontSize: '0.875rem', '&:focus': { - outline: `1px dotted ${parameters.sapUIContentFocusColor}` + outline: `1px dotted ${parameters.sapUiContentFocusColor}` }, height: contentDensity === ContentDensity.Compact ? '1.625rem' : '2.25rem', lineHeight: contentDensity === ContentDensity.Compact ? '1.5rem' : '2.25rem', diff --git a/packages/main/src/components/SegmentedButtonItem/index.tsx b/packages/main/src/components/SegmentedButtonItem/index.tsx index 5aa5c7f502b..b3eebe429f1 100644 --- a/packages/main/src/components/SegmentedButtonItem/index.tsx +++ b/packages/main/src/components/SegmentedButtonItem/index.tsx @@ -55,15 +55,16 @@ export class SegmentedButtonItem extends PureComponent { withToastContainer: false }; + constructor(props) { + super(props); + // inject default CSS custom parameters in head + boot().then((_) => { + injectThemeProperties(fiori3ThemeProperties); + }); + } + private static getTheme = (theme: Themes) => { if (theme === Themes.sap_fiori_3) return sap_fiori_3; return null; diff --git a/shared/tests/mock/StyleInjection.js b/shared/tests/mock/StyleInjection.js new file mode 100644 index 00000000000..e185385541b --- /dev/null +++ b/shared/tests/mock/StyleInjection.js @@ -0,0 +1,3 @@ +module.exports = { + injectThemeProperties: function(args) {} +}; diff --git a/shared/tests/mock/WebComponentsBoot.js b/shared/tests/mock/WebComponentsBoot.js new file mode 100644 index 00000000000..9d570a830ba --- /dev/null +++ b/shared/tests/mock/WebComponentsBoot.js @@ -0,0 +1,5 @@ +module.exports = function() { + return new Promise((resolve) => { + setTimeout(resolve, 100); + }); +}; diff --git a/yarn.lock b/yarn.lock index 0477ca5bc17..f43c72cbe5b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1205,7 +1205,7 @@ rimraf "^2.5.4" strip-ansi "^5.0.0" -"@jest/environment@^24.8.0": +"@jest/environment@^24.3.0", "@jest/environment@^24.8.0": version "24.8.0" resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.8.0.tgz#0342261383c776bdd652168f68065ef144af0eac" integrity sha512-vlGt2HLg7qM+vtBrSkjDxk9K0YtRBi7HfRFaDxoRtyi+DyVChzhF20duvpdAnKVBV6W5tym8jm0U9EfXbDk1tw== @@ -1215,7 +1215,7 @@ "@jest/types" "^24.8.0" jest-mock "^24.8.0" -"@jest/fake-timers@^24.8.0": +"@jest/fake-timers@^24.3.0", "@jest/fake-timers@^24.8.0": version "24.8.0" resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.8.0.tgz#2e5b80a4f78f284bcb4bd5714b8e10dd36a8d3d1" integrity sha512-2M4d5MufVXwi6VzZhJ9f5S/wU4ud2ck0kxPof1Iz3zWx6Y+V2eJrES9jEktB6O3o/oEyk+il/uNu9PvASjWXQw== @@ -1300,7 +1300,7 @@ source-map "^0.6.1" write-file-atomic "2.4.1" -"@jest/types@^24.8.0": +"@jest/types@^24.3.0", "@jest/types@^24.8.0": version "24.8.0" resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.8.0.tgz#f31e25948c58f0abd8c845ae26fcea1491dea7ad" integrity sha512-g17UxVr2YfBtaMUxn9u/4+siG1ptg9IGYAYwvpwn61nBg779RXnjE/m7CxYcIzEt0AbHZZAHSEZNhkE2WxURVg== @@ -3007,7 +3007,7 @@ acorn-dynamic-import@^4.0.0: resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948" integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw== -acorn-globals@^4.1.0, acorn-globals@^4.3.0: +acorn-globals@^4.1.0, acorn-globals@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006" integrity sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ== @@ -3025,7 +3025,7 @@ acorn@^5.5.3: resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279" integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw== -acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.1.1: +acorn@^6.0.1, acorn@^6.0.5, acorn@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f" integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA== @@ -3456,7 +3456,7 @@ async-each@^1.0.1: resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf" integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== -async-limiter@~1.0.0: +async-limiter@^1.0.0, async-limiter@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg== @@ -5576,12 +5576,12 @@ csso@^3.5.1: dependencies: css-tree "1.0.0-alpha.29" -cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4: +cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.6.tgz#f85206cee04efa841f3c5982a74ba96ab20d65ad" integrity sha512-DtUeseGk9/GBW0hl0vVPpU22iHL6YB5BUX7ml1hB+GMpo0NX5G4voX3kdWiMSEguFtcW3Vh3djqNF4aIe6ne0A== -cssstyle@^1.0.0, cssstyle@^1.1.1: +cssstyle@^1.0.0, cssstyle@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.2.2.tgz#427ea4d585b18624f6fdbf9de7a2a1a3ba713077" integrity sha512-43wY3kl1CVQSvL7wUY1qXkxVGkStjpkDmVjiIKX8R97uhajy8Bybay78uOtqvh7Q5GK75dNPfW0geWjE6qQQow== @@ -6408,7 +6408,7 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1 resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= -escodegen@^1.11.0, escodegen@^1.9.1: +escodegen@^1.11.1, escodegen@^1.9.1: version "1.11.1" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.1.tgz#c485ff8d6b4cdb89e27f4a856e91f118401ca510" integrity sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw== @@ -8190,6 +8190,11 @@ invert-kv@^2.0.0: resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02" integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA== +ip-regex@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" + integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk= + ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" @@ -8926,14 +8931,17 @@ jest-environment-enzyme@^7.0.2: dependencies: jest-environment-jsdom "^24.0.0" -jest-environment-jsdom-fourteen@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-0.1.0.tgz#aad6393a9d4b565b69a609109bf469f62bf18ccc" - integrity sha512-4vtoRMg7jAstitRzL4nbw83VmGH8Rs13wrND3Ud2o1fczDhMUF32iIrNKwYGgeOPUdfvZU4oy8Bbv+ni1fgVCA== +jest-environment-jsdom-fifteen@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.0.tgz#9634f78d7cedcc1fdf55b4052051c422935a68ab" + integrity sha512-TNGpp8HUzpvrpweantzipQo6M2YbvmKkj1WGsdf29xpU0fgSa8nrL2fQgZDxpvrh77AexXtuXuwee0cl2iiLvg== dependencies: - jest-mock "^24.5.0" - jest-util "^24.5.0" - jsdom "^14.0.0" + "@jest/environment" "^24.3.0" + "@jest/fake-timers" "^24.3.0" + "@jest/types" "^24.3.0" + jest-mock "^24.0.0" + jest-util "^24.0.0" + jsdom "^15.1.0" jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.8.0: version "24.8.0" @@ -9044,7 +9052,7 @@ jest-message-util@^24.8.0: slash "^2.0.0" stack-utils "^1.0.1" -jest-mock@^24.5.0, jest-mock@^24.8.0: +jest-mock@^24.0.0, jest-mock@^24.8.0: version "24.8.0" resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.8.0.tgz#2f9d14d37699e863f1febf4e4d5a33b7fdbbde56" integrity sha512-6kWugwjGjJw+ZkK4mDa0Df3sDlUTsV47MSrT0nGQ0RBWJbpODDQ8MHDVtGtUYBne3IwZUhtB7elxHspU79WH3A== @@ -9158,7 +9166,7 @@ jest-snapshot@^24.8.0: pretty-format "^24.8.0" semver "^5.5.0" -jest-util@^24.5.0, jest-util@^24.8.0: +jest-util@^24.0.0, jest-util@^24.8.0: version "24.8.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.8.0.tgz#41f0e945da11df44cc76d64ffb915d0716f46cd1" integrity sha512-DYZeE+XyAnbNt0BG1OQqKy/4GVLPtzwGx5tsnDrFcax36rVE3lTA5fbvgmbVPUZf9w77AJ8otqR4VBbfFJkUZA== @@ -9277,36 +9285,36 @@ jsdom@^11.5.1: ws "^5.2.0" xml-name-validator "^3.0.0" -jsdom@^14.0.0: - version "14.1.0" - resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b" - integrity sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng== +jsdom@^15.1.0: + version "15.1.1" + resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.1.1.tgz#21ed01f81d95ef4327f3e564662aef5e65881252" + integrity sha512-cQZRBB33arrDAeCrAEWn1U3SvrvC8XysBua9Oqg1yWrsY/gYcusloJC3RZJXuY5eehSCmws8f2YeliCqGSkrtQ== dependencies: abab "^2.0.0" - acorn "^6.0.4" - acorn-globals "^4.3.0" + acorn "^6.1.1" + acorn-globals "^4.3.2" array-equal "^1.0.0" - cssom "^0.3.4" - cssstyle "^1.1.1" + cssom "^0.3.6" + cssstyle "^1.2.2" data-urls "^1.1.0" domexception "^1.0.1" - escodegen "^1.11.0" + escodegen "^1.11.1" html-encoding-sniffer "^1.0.2" - nwsapi "^2.1.3" + nwsapi "^2.1.4" parse5 "5.1.0" pn "^1.1.0" request "^2.88.0" - request-promise-native "^1.0.5" + request-promise-native "^1.0.7" saxes "^3.1.9" symbol-tree "^3.2.2" - tough-cookie "^2.5.0" + tough-cookie "^3.0.1" w3c-hr-time "^1.0.1" w3c-xmlserializer "^1.1.2" webidl-conversions "^4.0.2" whatwg-encoding "^1.0.5" whatwg-mimetype "^2.3.0" whatwg-url "^7.0.0" - ws "^6.1.2" + ws "^7.0.0" xml-name-validator "^3.0.0" jsesc@^1.3.0: @@ -11219,7 +11227,7 @@ number-is-nan@^1.0.0: resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0= -nwsapi@^2.0.7, nwsapi@^2.1.3: +nwsapi@^2.0.7, nwsapi@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f" integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw== @@ -13623,7 +13631,7 @@ request-promise-core@1.1.2: dependencies: lodash "^4.17.11" -request-promise-native@^1.0.5: +request-promise-native@^1.0.5, request-promise-native@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59" integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w== @@ -15220,7 +15228,7 @@ touch@^2.0.1: dependencies: nopt "~1.0.10" -tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0: +tough-cookie@^2.3.3, tough-cookie@^2.3.4: version "2.5.0" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g== @@ -15228,6 +15236,15 @@ tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0: psl "^1.1.28" punycode "^2.1.1" +tough-cookie@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2" + integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg== + dependencies: + ip-regex "^2.1.0" + psl "^1.1.28" + punycode "^2.1.1" + tough-cookie@~2.4.3: version "2.4.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781" @@ -16246,13 +16263,20 @@ ws@^5.2.0: dependencies: async-limiter "~1.0.0" -ws@^6.1.0, ws@^6.1.2: +ws@^6.1.0: version "6.2.1" resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb" integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA== dependencies: async-limiter "~1.0.0" +ws@^7.0.0: + version "7.0.1" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.0.1.tgz#1a04e86cc3a57c03783f4910fdb090cf31b8e165" + integrity sha512-ILHfMbuqLJvnSgYXLgy4kMntroJpe8hT41dOVWM8bxRuw6TK4mgMp9VJUNsZTEc5Bh+Mbs0DJT4M0N+wBG9l9A== + dependencies: + async-limiter "^1.0.0" + ws@~3.3.1: version "3.3.3" resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"