Theming: Use UI5 Web Components CSS Variables

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: ['<rootDir>/**/?(*.)(spec|test).{js,jsx,ts,tsx}'],
   moduleNameMapper: {
     '^@shared/(.*)$': '<rootDir>/shared/$1',
@@ -37,6 +36,8 @@ module.exports = {
       'mock',
       'webComponentConfigMock.js'
     ),
+    '^@ui5/webcomponents-base/src/boot': '<rootDir>/shared/tests/mock/WebComponentsBoot',
+    '^@ui5/webcomponents-base/src/theming/StyleInjection': '<rootDir>/shared/tests/mock/StyleInjection',
     '\\.(css|less)$': 'identity-obj-proxy'
   },
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],

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",

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);

packages/main/__karma_snapshots__/ObjectPageSubSection.md

@@ -3,6 +3,6 @@
 #### `Render without Crashing`
 
 ```
-<div class="ObjectPageSubSection-objectPageSubSectionHeader---"><div class="ObjectPageSubSection-objectPageSubSectionHeaderTitle---"></div></div><div class="ObjectPageSubSection-subSectionContent---"></div>
+<div class="ObjectPageSubSection-objectPageSubSectionHeaderTitle---"></div><div class="ObjectPageSubSection-subSectionContent---"></div>
 ```
 

packages/main/__karma_snapshots__/ProgressIndicator.md

@@ -9,7 +9,7 @@
       <WithStyles(ProgressIndicator) displayValue="sdf" width="50%" height="50%" percentValue={40} visible={true} state="None">
         <ProgressIndicator displayValue="sdf" width="50%" height="50%" percentValue={40} visible={true} state="None" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateNone---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 
@@ -34,8 +34,8 @@
       <WithStyles(ProgressIndicator) percentValue={85} state="Error" displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator percentValue={85} state="Error" displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}}>
-              <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorHigh--- ProgressIndicator-progressBarTextColorHigh---- ProgressIndicator-progressBarTextLeft---">
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateError---" style={{...}}>
+              <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorHigh--- ProgressIndicator-progressBarTextLeft---">
 
 
               </span>
@@ -58,7 +58,7 @@
       <WithStyles(ProgressIndicator) state="Error" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Error" percentValue={0} displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateError---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 
@@ -82,7 +82,7 @@
       <WithStyles(ProgressIndicator) state="None" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="None" percentValue={0} displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateNone---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 
@@ -106,7 +106,7 @@
       <WithStyles(ProgressIndicator) state="Success" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Success" percentValue={0} displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateSuccess---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 
@@ -130,7 +130,7 @@
       <WithStyles(ProgressIndicator) state="Warning" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Warning" percentValue={0} displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateWarning---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 
@@ -154,7 +154,7 @@
       <WithStyles(ProgressIndicator) state="Information" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Information" percentValue={0} displayValue="" visible={true} width="auto" height="" classes={{...}} theme={{...}}>
           <div className="ProgressIndicator-wrapper--- " style={{...}} title={[undefined]} data-ui5-slot={[undefined]}>
-            <div className="ProgressIndicator-progressbar--- ProgressIndicator-progressbar----" style={{...}} />
+            <div className="ProgressIndicator-progressbar--- ProgressIndicator-stateInformation---" style={{...}} />
             <div className="ProgressIndicator-progressBarRemaining---">
               <span className="ProgressIndicator-progressBarText--- ProgressIndicator-progressBarTextColorLow--- ProgressIndicator-progressBarTextRight---">
 

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: {

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', () => {
       <Avatar size={AvatarSize.XL} customDisplaySize="5rem" customFontSize="2rem" initials="JD" />
     );
     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', () => {

packages/main/src/components/Avatar/index.tsx

@@ -68,6 +68,8 @@ export class Avatar extends PureComponent<AvatarPropTypes> {
       cssClasses.push(classes[`size${size}`]);
     }
 
+    inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)';
+
     if (shape === AvatarShape.Circle) {
       cssClasses.push(classes.circle);
     }

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: {},

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 (
+    <span onClick={eventWrapper} className={classNames.valueOf()}>
+      {children}
+    </span>
+  );
+});

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: {},