Updating Clarity's Theme and Styling

Leveraging design elements to match your branding requirements is imperative for creating a robust business website. While Liferay provides out-of-the-box themes and style books to maintain styling consistency, extending those functionalities becomes necessary in some scenarios. Clarity wants to start a new sub-brand with unique visual identity called Clarity Kids. Clarity’s current theme uses a style book, and rather than starting from scratch for Clarity Kids, they want to use the theme CSS client extension to add new frontend tokens and update the typography.

Exercise: Updating Clarity’s Frontend Tokens

Here, you’ll add a new frontend token definition to Clarity’s current Theme CSS client extension. You’ll also import a new font family to override the current one.

1. Open a file explorer and navigate to the /exercises/module-2/exercise-1 folder in your course workspace.

2. Open the frontend-token-definition.json file and examine its contents.

3. Move the frontend-token-definition.json file to the /client-extensions/clarity-theme/src/ folder in your course workspace.

4. From the clarity-theme folder, open the client-extension.yaml file in a text editor or IDE.

5. Add this line above the nameproperty under the clarity-theme definition block:

   frontendTokenDefinitionJSON: src/frontend-token-definition.json
   

   Copy

   For example.

   assemble:
       - from: build/buildTheme/img
         into: static/img
       - from: assets
         into: static
   clarity-theme:
       clayURL: css/clay.css
       mainURL: css/main.css
       frontendTokenDefinitionJSON: src/frontend-token-definition.json
       name: Clarity Theme CSS
       type: themeCSS
   

   Copy

6. Save the file.

7. From the client-extensions/clarity-theme/src/css/dialect/variables/ folder, open the _color_scheme.scss file and update the following variables by replacing their values with the following frontend token definition variables.

   --color-action-primary-default: var(--btn-primary-bg),
   --color-action-primary-hover: var(--btn-primary-bg),
   --color-action-primary-inverted: var(--btn-primary-color),
   --color-brand-primary: var(--card-category-color),
   --color-neutral-10: var(--card-title-color),
   

   Copy

   This change maps the theme’s variables to the corresponding tokens in the frontend-token-definitions.json file.

8. Save the file.

9. From the client-extensions/clarity-theme/src/css/ folder, open the _imports.scss file and append this snippet:

   @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
   * {
       font-family: 'Roboto Slab', serif;
   }
   

   Copy

   This imports a font family from an external URL to override the current font.

10. Save the file.

11. Open a terminal and navigate to the client-extensions/clarity-theme/ project folder in your course workspace.

12. Run this command to build and deploy the client extension:

    blade gw clean deploy
    

    Copy

13. Verify it deploys successfully.

    2025-01-24 14:08:34.676 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED claritytheme_7.4.13 [1463]
    

    Copy

14. In your Liferay instance, sign in as the Clarity Admin user.

    • Username: admin@clarityvisionsolutions.com

    • Password: learn

15. Open the Site Menu (), expand Design, and click Style Books.

16. Select Clarity Kids Style Book to start editing it.

17. In the right side bar’s dropdown menu, select clarity-kids-components.

18. Verify that the following tokens are available.

19. Modify the colors using the available tokens and observe the real-time changes on your page.
    
     

20. Return to the Home page and confirm that it stays with the same style.

21. Confirm that the fonts were changed after you deployed the client extension.

Conclusion

Great! You’ve used the theme CSS client extension to add new frontend tokens to Clarity’s style book. The client extension approach enables you to create distinct visual identities for sub-brands quickly and efficiently. Next, you’ll learn more about implementing custom functionality with global JS client extensions.