npm i @refinitiv-ui/halo-theme


Element Framework

by Refinitiv

6.1.0 (see all)License:SEE LICENSE IN LICENSETypeScript:Not Found
npm i @refinitiv-ui/halo-theme

Element Framework (EF)

Testing Nightly Test Production Release

Element Framework is Refinitiv design system components that provides components and tooling with Refinitiv's design system to help product teams work faster and more efficiently.


Getting started and usage guide are available from this documentation.


PackageVersionChange Log
@refinitiv-ui/configurationsnpm versionchange log
@refinitiv-ui/corenpm versionchange log
@refinitiv-ui/demo-blocknpm versionchange log
@refinitiv-ui/elemental-themenpm versionchange log
@refinitiv-ui/elementsnpm versionchange log
@refinitiv-ui/halo-themenpm versionchange log
@refinitiv-ui/i18nnpm versionchange log
@refinitiv-ui/phrasebooknpm versionchange log
@refinitiv-ui/polyfillsnpm versionchange log
@refinitiv-ui/solar-themenpm versionchange log
@refinitiv-ui/test-helpersnpm versionchange log
@refinitiv-ui/theme-compilernpm versionchange log
@refinitiv-ui/translatenpm versionchange log
@refinitiv-ui/utilsnpm versionchange log

License Information

License details can be found in the LICENSE file. It's available in each package inside ./packages/ directory. Code is governed by the Apache License, Version 2.0 except following packages which has special license for font files.

  • ./packages/solar-theme
  • ./packages/halo-theme

The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text

Font styles in Halo theme are only Regular, Semi Bold and Bold. Do not use 'Itatic' style due to the license on Proxima Nova Fin font.


For questions or issues, please refer to documentation (see Documentation section above and Q&A forum on Developer Community which supported by an active developer community.


We welcome and ❤ contribution in all forms: create issues, opening pull requests to make elements even better, or just being part of our development community.

Create Issues

Issues are important to make the Element Framework better. If you discover any issues with this project, please feel free to create an Issue. Please search through open and closed issues to see if a similar issue already exists. If not, open an issue and try to provide a minimal reproduction if you can.

Pull Requests

In the event you have coding suggestions and you would like to create pull request to this repository, it is required that you read and sign the following:

  • Individual Contributor License Agreement (Download)
  • Entity Contributor License Agreement (Download)

Please email a signed and scanned copy to RefinitivUIDev@refinitiv.com. If you require that a signed agreement has to be physically mailed to us, please email the request for a mailing address and we will get back to you on where you can send the signed documents.

We will review issues and pull requests to determine any appropriate changes.


Element Framework is using monorepo. This repository has elements, supporting modules and tools. Each folder in packages is one NPM package.

  • packages/configurations - Configuration file for element development e.g. eslint, typescript
  • packages/core - Core module of element e.g. base classes, element registration
  • packages/demo-block - Use in demo page of each element to demonstrate element's features
  • packages/elemental-theme - Base theme to extend to design system theme e.g. Halo Theme
  • packages/elements - All elements in Element Framework
  • packages/halo-theme - Refinitiv design system theme
  • packages/i18n - Wrappers and APIs of formatjs
  • packages/phrasebook - All messages (english and non-english) that use within elements
  • packages/polyfills - Curated polyfills for browsers that are not support web component natively
  • packages/solar-theme - Legacy theme
  • packages/test-helpers - Helpers function for unit testing of each elements
  • packages/theme-compiler - LESS compiler for generating theme package
  • packages/translate - Decorator for translations (i18n) in each element
  • packages/utils - Utilities and shared functions

Setup development environment

Install npm@7 CLI:

npm install -g npm

Initialize project:

git clone git@github.com:Refinitiv/refinitiv-ui.git
cd refinitiv-ui
npm install

Build all packages:

npm run build

CLI Commands

The command-line interface tool that you can use to demo, develop, test, and maintain this repository. The command should be run at root level.

Run and serve the element or package:

npm run start button 
npm run start demo-block

Run the unit test in specific element or package:

npm run test button -- <options>

Run the unit test on all packages:

npm run test:all

Run linting tools in specific a element or package:

npm run lint button -- <options>
npm run lint demo-block -- <options>

Run linting tools in all elements or packages:

npm run lint:all

Options for unit test and linting command

--browsers or -bYou can specific browser(s) to run the unit test. List of available browsers are following: chrome, firefox and ie
You can check the list of available browsers by add option --help.
Usage: npm run test button -- --browsers chrome firefox
--browserstack or -bsYou can run test on BrowserStack with specific browser(s). List of available browsers are following: chrome, firefox, edge_previous, and aliases default, supported, and etc.
This command option required BrowserStack API Key you must setting the three environment variables BROWSERSTACK_USERNAME, BROWSERSTACK_ACCESS_KEY, and BROWSERSTACK_BUILD. You can create API key from here
Usage: npm run test button -- --browserstack chrome firefox_previous
--watch or -wRun test and watch file change.
Usage: npm run test button -- --watch
--snapshots or -sUpdate and prune snapshots (--browsers must be chrome).
Usage:npm run test button -- --snapshots --browsers chrome
--fix or -fRun linting and fix the issues that can lead to bugs or inconsistencies with code health and style.
Usage:npm run test button --fix

Commit prefixes

Commit prefixes must be written in a correct pattern when committing code into EF repositories. It will be used to determine running version when release the package and for generating changelogs.

PrefixIncremental VersionUsage
BREAKING CHANGE(<package-name>):MAJORChanges that breaking existing public API.
BREAKING CHANGE(coral-button): cta attribute has been removed
feat(<package-name>):MINORA new feature.
feat(coral-button): element sings a song every Sunday
fix(<package-name>):PATCHA bug fix.
fix(coral-button): auto-play issue (#39)
style(<package-name>):PATCHChanges that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
style(coral-button): removed trailing white space
docs(<package-name>):PATCHDocumentation only changes.
docs(coral-button): included complex sample to README
refactor(<package-name>):PATCHA code change that neither fixes a bug nor adds a feature.
refactor(coral-button): changed song picker algorithm
performance(<package-name>):PATCHA code change that improves performance.
performance(coral-button): lazy load internal DOM structure
test(<package-name>):PATCHAdd missing tests.
test(coral-button): increase code coverage to 85%
chore(<package-name>):PATCHChanges to the build process, dependency updates and other maintenance-related commits.
chore(coral-button): upgrade dependencies



GitHub Stars



4mos ago








13d ago
3d ago
1mo ago
4mos ago
No alternatives found
No tutorials found
Add a tutorial