Color Override workflow

How to override the theme in your project using the Design System

To handle the color design system (i.e., theme/style overriding) in your project, follow these steps:

1. Obtain color Design Tokens

The design team must provide you with the following color design token files:

• brandColorTokens.json
• semanticColorTokens.json
• componentColorTokens.json

2. Generate CSS Variables

1. Clone Product repo: https://github.com/deltatre-vxp/axis-app-web in your local.
2. Run

   yarn install

3. Navigate to:
   axis-app-web/node_modules/@deltatre-vxp/axis-design-system/tokens
4. Replace the existing color token files (brandColorTokens.json, sematicColorTokens.json, componentColorTokens.json) with the new ones provided by your project's design team.
5. Open axis-app-web/src/packages/build/script/buildCss.cjs
6. Set the parameter isClientOverride: true in the buildWebPlatform method.
7. Ensure that only the color token files are provided as input to the buildWebPlatform method.
8. Open terminal and run following command:

   yarn run gen:ds:vars

   This will generate the CSS variables. The terminal will display a file path—open this file and copy its content.

Note: Do not commit anything in Product repo. These steps are just to generate project's css variables, As currently build script is part of Product repo. Our future plan is to move it somewhere in common repo.

5. Apply the generated CSS to your project

1. Go to your project repository.
2. Locate the design.css file (typically found at projectrepo/src/design.css).
3. Paste the copied CSS variable content into this file.

6. Run and Verify

Start your project.

yarn start

You should now see the theme updated with your project's brand colors.