feat(ThemingParameters): Switch to offical Theme Designer Parameters (#348)

Closes #240

Author: MarcusNotheis

config/jest.config.js

@@ -6,19 +6,20 @@ module.exports = {
   coverageReporters: ['lcov', 'text'],
   collectCoverage: false,
   collectCoverageFrom: [
-    'packages/**/*.{ts,tsx}',
+    'packages/{base,charts,main}/src/**/*.{ts,tsx}',
     '!**/src/lib/*',
     '!**/src/interfaces/*',
     '!**/src/enums/*',
     '!**/*.stories.tsx',
     '!**/*.jss.ts',
     '!**/node_modules/**',
     '!packages/*/src/index.ts',
-    '!packages/*/index.ts',
-    '!packages/cra-template/**/*',
     '!packages/**/demo/*',
     '!packages/base/src/polyfill/*', // no polyfills
-    '!packages/main/src/components/AnalyticalTable/types/*' // no table enums
+    '!packages/main/src/components/AnalyticalTable/types/*', // no table enums
+    '!packages/base/src/styling/sap_fiori_3.ts', // no old theming parameters
+    '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
+    '!packages/base/src/styling/font72.ts' // no deprecated font
   ],
   setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./config/jestsetup.ts'],

docs/styling/MyCustomElement.jsx

@@ -3,16 +3,16 @@ import { createUseStyles } from 'react-jss';
 
 const styles = ({ parameters }) => ({
   container: {
-    backgroundColor: parameters.sapUiGlobalBackgroundColor,
-    fontFamily: parameters.sapUiFontFamily,
+    backgroundColor: parameters.sapBackgroundColor,
+    fontFamily: parameters.sapFontFamily,
     height: '50px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
   },
   text: {
-    color: parameters.sapUiNegativeText,
-    fontSize: parameters.sapUiFontLargeSize
+    color: parameters.sapNegativeTextColor,
+    fontSize: parameters.sapFontLargeSize
   }
 });
 

docs/styling/MyCustomElement.tsx

@@ -1,19 +1,19 @@
-import { JSSTheme } from '@ui5/webcomponents-react/src/interfaces/JSSTheme';
+import { JSSTheme } from '@ui5/webcomponents-react/interfaces/JSSTheme';
 import React from 'react';
 import { createUseStyles } from 'react-jss';
 
 const styles = ({ parameters }: JSSTheme) => ({
   container: {
-    backgroundColor: parameters.sapUiGlobalBackgroundColor,
-    fontFamily: parameters.sapUiFontFamily,
+    backgroundColor: parameters.sapBackgroundColor,
+    fontFamily: parameters.sapFontFamily,
     height: '50px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
   },
   text: {
-    color: parameters.sapUiNegativeText,
-    fontSize: parameters.sapUiFontLargeSize
+    color: parameters.sapNegativeTextColor,
+    fontSize: parameters.sapFontLargeSize
   }
 });
 

docs/welcome/Styling.stories.mdx

@@ -14,7 +14,7 @@ Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into
 If you want to change e.g. the color of all texts, you can do that by creating another `style` element with the following content:
 ```html
 <style>
-    --sapUiBaseText: limegreen;
+    --sapTextColor: limegreen;
 </style>
 ```
 As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in `limegreen` instead of `#32363a` which would be the default value for Fiori 3.
@@ -46,16 +46,16 @@ import { createUseStyles } from 'react-jss';
 
 const styles = ({ parameters }) => ({
     container: {
-        backgroundColor: parameters.sapUiGlobalBackgroundColor,
-        fontFamily: parameters.sapUiFontFamily,
+        backgroundColor: parameters.sapBackgroundColor,
+        fontFamily: parameters.sapFontFamily,
         height: '50px',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center'
     },
     text: {
-        color: parameters.sapUiNegativeText,
-        fontSize: parameters.sapUiFontLargeSize
+        color: parameters.sapNegativeTextColor,
+        fontSize: parameters.sapFontLargeSize
     }
 })
 

packages/base/scripts/cssVariables/parse.js

@@ -1,26 +1,24 @@
 const { writeFileSync } = require('fs');
-const {
-  _: Fiori3ThemingVariables
-} = require('@ui5/webcomponents/dist/assets/themes/sap_fiori_3/parameters-bundle.css.json');
+const { root } = require('./themeDesignerVariables');
 const PATHS = require('../../../../config/paths');
 const path = require('path');
 
-const variables = Fiori3ThemingVariables.replace(':root{', '')
-  .replace(/}$/, '')
-  .split(';')
-  .filter((variable) => !/^--_?ui5/.test(variable))
-  .map((value) => value.split(':')[0]);
+const variables = Object.keys(root);
 
-let fileContent = `/* 
+let fileContent = `/* eslint-disable camelcase */
+
+/* 
  * ### WARNING ### 
  * This is an autogenerated file, do not change manually. 
  * In order to recreate this file, please run 'node packages/base/scripts/cssVariables/parse.js'
  */
 
 `;
 
+fileContent += 'export const ThemingParameters = {\n';
 for (const variable of variables) {
-  fileContent += `export const ${variable.replace('--', '')} = 'var(${variable})';\n`;
+  fileContent += `  '${variable}': 'var(--${variable})',\n`;
 }
+fileContent += '}\n';
 
-writeFileSync(path.join(PATHS.packages, 'base', 'src', 'styling', 'sap_fiori_3.ts'), fileContent);
+writeFileSync(path.join(PATHS.packages, 'base', 'src', 'styling', 'ThemingParameters.ts'), fileContent);