Flexera Component Styles

CSS and SASS files for branding Flexera products.

Why

Certain legacy products can not be integrated into the ui-fusion repo but it's important to maintain a common UI/UX between all products. Common UI/UX patterns will reduce the cognitive overhead for the customer switching between Flexera capabilities. The repo provider a few light weight utility files for styling legacy products to match the ui-fusion repo.

What

The assets folder contains utility files which can be used to style legacy products:

• flexera-colors.scss: Flexera color pallet scss/sass variables.
• flexera-mixins.scss: scss/sass mixins which can be used to extend current selectors with Flexera styles.
• flexera-styles.css: list of css classes which can be used with legacy html to add Flexera styles.

How

The repo uses ui-react-components to generate all asset files. The BaseTheme is imported and a list of "matchers" map the top level BaseTheme property into a flattened object.

• key: Built from the BaseTheme object hierarchy - { space: { xl } } becomes space-xl
• value: Array of css property and value objects - { margin: "2rem" }

{ [key]: [{ property: value }] }

The "converts" convert the flattened property objects into a string based on the targeted language.

build.js generates the assets and commits all the files to the repo. Will need to integrate with some CI to update the assets when a new version of the ui-react-components is released.

CI Idea

• ui-react-components releases a new version
• github fires a webhook to a AWS Lambda function
• AWS Lambda runs the build scripts, generates the files, adds the files to the repo, bumps up the package.json version and pushes all the changes to the repo.
• Deploy as a npm package? 😀