Element Framework

Theming

Applications in Refinitiv Workspace should use the Halo Design System theme to be fully compliant with branding guidelines. EF elements require their theme to initialize itself successfully in the application that they are used in.

Halo Theme

The Halo Deisgn System theme is provided with two variants; light and dark. An application can have only one variant while the app is running. See Theme Switching to learn how to toggle between light and dark themes in your application.

  • HTML
  • JS
  • CSS
<ef-header>52-WEEK RANGE</ef-header>
<coral-panel>
  <div id="wrapper">$75.25<ef-led-gauge id="led" top-label="$150.50" top-value="70.00"></ef-led-gauge>$205.25</div>
</coral-panel>

                  
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

#led {
  flex-basis: 80%;
}

                  

                

              

              
              
              
              
              
              
              
            

            

              

                

              

              

                

                  
    
                    
  • HTML
    • 
                    
  • JS
    • 
                    
  • CSS
    • 
                  

                

                

                  

                  
                

              

              

                

                  
<ef-header>52-WEEK RANGE</ef-header>
<coral-panel>
  <div id="wrapper">$75.25<ef-led-gauge id="led" top-label="$150.50" top-value="70.00"></ef-led-gauge>$205.25</div>
</coral-panel>

                  

                  
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

#led {
  flex-basis: 80%;
}

                  

                

              

              
              
              
              
              
              
              
            

            
Native Styles

            
The application is required to import native styles so that the correct typography and EF's global CSS variables are applied in an application.

            
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';

            
This package also includes some native element styles such as heading, a link, table, etc. They are prepended to a document's head section so they can be overridden later at the application level.