# Chroma's Ecosystem ### `chroma-react` Defined set of form based components, patterns and layouts which are built and managed across IAG’s applications. ### Use case `chroma-react` is best suited for internal IAG brands building form based applications using Loki. ### Pros * Accessible components * Built-in analytics support * Managed branding and assets * Pre-built React components * Mature product * Highly Supported * Works with Loki ### Cons * Internal IAG brands only * Limited customisation of components * Highly dependant on Chroma team * Not scalable across other product channels ### `chroma-lite` Utility based design system that allows for greater flexibility within the front-end design and development of applications. ### Use case `chroma-lite` is best suited for brands that have custom layouts and components. ### Pros * Flexible components * Easy to manage branding * Open sourced contributions * Framework agnostic components * Scalable across multiple product channels * Fast onboarding * Smaller application sizes * Development speed * Internal and external brands supported ### Cons * Accessibility not built into components * No Loki support * Teams may need to build their own components * Ease of customisation may lead to inconsistencies ## Product Comparison ![](https://i.imgur.com/4NNGG1h.png) #### Build Size For a simple 3 page application the CSS file size within `chroma-react` is 28.5 KB. For the same application built within `chroma-lite` that file size will be 3 KB. This is due to the build in chroma-lite removing unused css from the generated file, which in turn minimised the file size. ![](https://i.imgur.com/9MSCFTQ.png) ### Build Times #### `chroma-react` All brands currently supported within `chroma-react` take around 18 seconds to generate all the required CSS. Each additional brand would add another 1 second to the overall build time. Multiple this by another 50 brands and the build times would likely increase to 68 seconds. Initially this does not seem like a huge increase but consider each change to the css triggers the build to run, this would mean a developer would have to wait 68 seconds each time before they can view their changes on the page. ![](https://i.imgur.com/2bCnhZT.png) #### `chroma-lite` Each brand within `chroma-lite` is generated individually and takes 9.09 seconds to build the required CSS. Additional brands can be added without impacting overall build times due to the seperation of brands. ![](https://i.imgur.com/zhL71Eo.png) ## Current Chroma Pain Points #### Chroma team manages all branding and assets (icons, fonts, logos) This is often a time consuming process as most brands require a UI kit setup and brand attributes have to be defined. Some brands require custom icon sets to be created and logos may also need to be converted into the correct format. Once the brand is setup it requires 2 releases within the Chroma build before an application can start using that brand. **Timeframe:** 1 - 2 weeks #### Limited customisation of components When brands require changes to existing or completely new components the review process is often very time consuming. Once a change is approved then it will be added into the UI kit and then updated within the build to be released. **Timeframe:** 1 - 3 weeks <!-- * Managed assets (icons, fonts, logos) * Chroma team handles all brand assets * Chroma team responsible for brand management * Limited customisation of components * Increase build time with additional brands * No scope for open source contributions * Only available for direct IAG brands * React framework specific * Dependance on the Chroma team * Initial learning curve of custom css classes (not industry standard) * No ability to add custom props for testing tools * Lengthy onboarding process * Chroma team responsible for asset management * Chroma team responsible for brand management * Limited ability to handle custom components * Increase build time with additional brands * No scope for open source contributions * Only available to IAG brands * React framework specific * Dependance on the Chroma team * Initial learning curve of custom css classes (not industry standard) * No ability to add custom props for testing tools * Lengthy onboarding process --> ## Architecture ### `chroma-react` ##### `Ui Kit` The UI kit is key to dictating the attributes and components for a brand. ##### `chroma-assets`, `chroma-core` and `chroma-react` All require versioned releases before applications can start using the published npm package. ![](https://i.imgur.com/2pKYZn3.png) ### `chroma-lite` ##### `Ui Kit` The UI kit is key to dictating the attributes and components for a brand. ##### `chroma-brand-attributes` Contains all direct brand attributes managed via a versioned npm package. Indirect brands will manage their own attributes within the application. ##### `chroma-docs` Refers to a product channel like `web`, `webforms` or `partners`. This area displays the available components for that specific channel. Applications can use the components defined in that area or create their own custom components. ![](https://i.imgur.com/TDjMdo3.png) ## Workflows ### `chroma-react` workflows #### New direct brand? * Add brand attributes and styling into UI kit * Add brand assets into `chroma-assets` and push a release * Setup brand config within `chroma-core` and push a release * Update `chroma-assets` and `chroma-core` version within `chroma-react` * Publish a new `chroma-react` npm package for applications to use **Timeframe:** 1 - 2 weeks #### New indirect brand? Strongly advised not adding indirect brands within `chroma-react`. Only direct brands will be managed. **Timeframe:** N/A #### New/update component? * Design and add/update component to UI kit * Build and style component within `chroma-core` and push a release * Update the `chroma-core` version within `chroma-react` * Build the new react component within `chroma-react `and publish a new npm package **Timeframe:** 1 - 2 weeks ### `chroma-lite` workfows #### New direct brand? * Add brand within UI kit * Setup brand config within `chroma-brand-attributes` and publish a new npm package **Timeframe:** 1 week #### New indirect brand? * Provide generic UI kit to the new indirect brand * Project team adds assets into their build * Project team adds brand attributes from the UI kit into their build config **Timeframe:** 1 day #### New/update direct component? * Design and add/update component within UI kit * Build component within `chroma-docs` channel (web, webforms or partner) for applications to use within their builds **Timeframe:** 1 - 3 days #### New indirect component? * Project teams will design and manage their own custom component **Timeframe:** N/A ## Asset Management ### `chroma-react` All brand assets are handled directly by the Chroma team and added to the `chroma-assets` respository. The repository then creates a versioned folder within the AWS assets bucket. This new bucket version is then referenced by `chroma-react` which makes those assets available in the next release. ![](https://i.imgur.com/UQumZsq.png) ### `chroma-lite` Brand assets will be handled differently for direct and indirect brands. #### Direct brands Direct brands already have assets stored within the AWS bucket which is currently used within `chroma-react`. This can still be referenced for direct brands within `chroma-lite`. The only change will be the release process and also how icons are included within the applications. ![](https://i.imgur.com/q8AEnGs.png) #### Indirect brands Indirect brands will not be managed by the Chroma team. These brands are external to the business therefore can be managed seperately. Brand specific assets can be included directly within each application and will be managed independently. ![](https://i.imgur.com/qAZCPNt.png) # Brand Management ### `chroma-react` Each brand within Chroma has it's own config file which allows configurable attributes for colours, fonts, icons and components. There are quite a few attributes defined within `chroma-core` that allows brands some flexibility in terms of the look and feel. Below is an example of an average brand setup. #### Brand workflow Workfow based on a brand change * UI kit update * Update `chroma-core` brand `config.json` then push a release * Update `chroma-core` version within `chroma-react` and push a release * Applications then update their `chroma-react` npm package version #### Example config.json ```json { "brand": "'nrma'", "colour": { "palette": { "primary": "#000E82", "secondary": "#141437", "tertiary": "#28F0B4" } }, "typography": { "body": { "font-family": "('Graphik', Helvetica, Arial)", "font-weight": "400", "color": "#4d4d4d" }, "heading": { "font-family": "('Graphik', Helvetica, Arial)", "font-weight": "400", "color": "#000E82", "h3": { "font-weight": "700" }, "h4": { "font-weight": "700" } } }, "icon": { "weight": "'solid'" }, "button": { "font-family": "('Graphik', Helvetica, Arial)", "font-weight": "400", "border-radius": ".125rem" }, "form": { "label": { "color": "#0d0d0d", "font-family": "('Graphik', Helvetica, Arial)" }, "input": { "border-radius": ".125rem" } }, "loader": { "color": "#00338d" }, "header": { "background-color": "#fff", "box-shadow": "(0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))", "height": { "xs": "70px", "sm": "80px", "md": "80px", "lg": "112px" }, "logo": { "width": "52px", "height": "40px", "src": "'logo.svg'", "sm": { "width": "73px", "height": "56px" }, "lg": { "width": "93px", "height": "72px" } }, "heading": { "color": "#00338d" }, "button": { "color": "#00338d" } }, "main": { "background-color": "#f6f6f6" }, "content": { "border-width": "0 1px 0 1px", "border-color": "#e6e6e6" }, "footer": { "background-color": "#141437", "color": "#fff", "font-family": "('Graphik', Helvetica, Arial)", "font-weight": "400", "link": { "color": "#fff", "font-weight": "700" } }, "banner": { "background-color": "#404040" } } ``` ### `chroma-lite` For brands defined within `chroma-brand-attributes` only colours are defined. There is no need to set font families, icons or component specific attributes as these will be defined within the front-end build. #### Brand workflow Workfow based on a brand change ##### Direct brand * UI kit update * Update brand config within `chroma-brand-attributes` then push a release * Application then update their `chroma-brand-attributes` npm package version ##### Indirect brand * Applications update their brand config setup within the build. #### Example brand config.js ```js import { status, grey } from '../global' const nrma = { colors: { primary: { 'lighten-90': '#e5e7f3', 'lighten-80': '#cccfe6', 'lighten-60': '#999fcd', 'lighten-40': '#666eb4', 'lighten-20': '#333e9b', DEFAULT: '#000E82', 'darken-5': '#000d7b', 'darken-10': '#000d75', 'darken-20': '#000b68' }, secondary: { 'lighten-90': '#e7e7eb', 'lighten-80': '#d0d0d7', 'lighten-60': '#a1a1af', 'lighten-40': '#727287', 'lighten-20': '#43435f', DEFAULT: '#141437', 'darken-5': '#131334', 'darken-10': '#121231', 'darken-20': '#10102c' }, tertiary: { 'lighten-90': '#e9fdf7', 'lighten-80': '#d4fcf0', 'lighten-60': '#a9f9e1', 'lighten-40': '#7ef6d2', 'lighten-20': '#53f3c3', DEFAULT: '#28f0b4', 'darken-5': '#26e4ab', 'darken-10': '#24d8a2', 'darken-20': '#20c090' }, grey: { ...grey }, status: { ...status } } } export default nrma ``` ## Decision Tree ![](https://i.imgur.com/981Wf9d.png) ## Product Repositories ### `chroma-assets` Contains common brand assets including: * favicons * logos * fonts * icons ### `chroma-core` Defined set of components, patterns and utility classes. * Brand configurations * Built using HTML + CSS * Compiled CSS deployed to AWS CDN ### `chroma-react` Defined set of react based components and patterns. * React specific framework * Built on top of `chroma-core` HTML + CSS * Deployed to a NPM package ### `chroma-brand-attributes` Brand specific config files * Defined brand colours * Deployed to a NPM package ### `chroma-web` Defined set of components and patterns specifc to retail based applications. * HTML based examples * Built using tailwindcss framework ## Services ### AWS https://aws.amazon.com/ Hosts branded CSS and assets for use within applications. The following repositories push assets to AWS, these include: * `chroma-assets` (icons, fonts, logos, favicons) * `chroma-core` (CSS) ### NPM https://www.npmjs.com/ Creates versioned build packages for use within applications. Currently 2 packages are managed: * `chroma-react` * `chroma-brand-attributes` ### Github https://github.com/ Hosts all code repositories listed within the `product repositories` section. ### Font Awesome https://fontawesome.com/ Icon library hosted via a CDN ### Bit https://bit.dev/ Shared component library hosted in the cloud.