feat: remove font bold (#665)

* feat: remove font bold * fix: native header element font-weight * docs: fix font-weight in demo pages * chore: update LICENSE removing `bold` font reference * fix: remove font bold from elements --------- Co-authored-by: Sarin Udompanish <[email protected]> Co-authored-by: wsuwt <[email protected]> Co-authored-by: Wasuwat Limsuparhat <[email protected]>
Refinitiv · May 2, 2023 · a8f9015 · a8f9015
1 parent b5045f5
commit a8f9015
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 38 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -5,4 +5,4 @@ License details can be found in the `LICENSE` file. It's available in each packa
 
 >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 'Italic' style due to the license on Proxima Nova Fin font.
+>Do not use 'Italic' style due to the license on Proxima Nova Fin font.
diff --git a/documents/src/pages/elements/heatmap.md b/documents/src/pages/elements/heatmap.md
@@ -408,7 +408,7 @@ const generateData = (r, c) => {
 
 el.tooltipCallback = (cell) => {
   const tooltip = document.createElement('div');
-  const template = "<div style='font-weight: bold'>Actual value:</div><div style='color:"+ cell.color +"'>" + cell.value + "</div>";
+  const template = "<div style='font-weight: 600'>Actual value:</div><div style='color:"+ cell.color +"'>" + cell.value + "</div>";
   tooltip.innerHTML = template;
   return tooltip;
 };
@@ -435,7 +435,7 @@ const el = document.querySelector("ef-heatmap");
 el.tooltipCallback = (cell) => {
   const tooltip = document.createElement("div");
   const template = `
-    <div style="font-weight: bold">Actual value:</div>
+    <div style="font-weight: 600">Actual value:</div>
     <div style="color:${cell.color}">${cell.value}</div>
   `;
   tooltip.innerHTML = template;

diff --git a/documents/src/pages/elements/tooltip.md b/documents/src/pages/elements/tooltip.md
@@ -254,7 +254,7 @@ const tooltip = document.getElementById('symbol-tooltip');
 tooltip.renderer = (target) => {
   const ret = document.createElement('div');
   const title = document.createElement('div');
-  title.style.fontWeight = 'bold';
+  title.style.fontWeight = '600';
   title.style.paddingBottom = '3px';
   const price = document.createElement('div');
   ret.appendChild(title);
@@ -310,7 +310,7 @@ const tooltip = document.getElementById('symbol-tooltip');
 tooltip.renderer = (target) => {
   const ret = document.createElement('div');
   const title = document.createElement('div');
-  title.style.fontWeight = 'bold';
+  title.style.fontWeight = '600';
   title.style.paddingBottom = '3px';
   const price = document.createElement('div');
   ret.appendChild(title);

diff --git a/documents/src/pages/styles/typography.md b/documents/src/pages/styles/typography.md
@@ -11,16 +11,13 @@ In accordance with Refinitiv's Halo Design System, the default font in your appl
 
 *>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
 
-x> Font styles in Halo theme are only Regular, Semi Bold and Bold. Do not use 'Italic' style due to the license on Proxima Nova Fin font.
+x> Font styles in Halo theme are only Regular and Semi Bold. Do not use 'Italic' style due to the license on Proxima Nova Fin font.
 
 ::
 ```css
 .semibold {
   font-weight: 500;
 }
-.bold {
-  font-weight: 600;
-}
 .fonts {
   font-size: 24px;
 }
@@ -32,18 +29,12 @@ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
 a b c d e f g h i j k l m n o p q r s t u v w x y z
 0 1 2 3 4 5 6 7 8 9
 </div>
-<h6>Proxima Nova Fin Semibold (500)</h6>
+<h6>Proxima Nova Fin Semibold (500, 600)</h6>
 <div class="fonts semibold">
 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
 a b c d e f g h i j k l m n o p q r s t u v w x y z
 0 1 2 3 4 5 6 7 8 9
 </div>
-<h6>Proxima Nova Fin Bold (600)</h6>
-<div class="fonts bold">
-A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
-a b c d e f g h i j k l m n o p q r s t u v w x y z
-0 1 2 3 4 5 6 7 8 9
-</div>
 ```
 ```javascript
 import { halo } from '/theme-loader.js';

diff --git a/packages/demo-block/src/demo-block.ts b/packages/demo-block/src/demo-block.ts
@@ -106,7 +106,7 @@ themeLabel.style.fontSize = '15px';
 themeLabel.style.left = '10px';
 themeLabel.style.top = '10px';
 themeLabel.style.padding = '2px 4px';
-themeLabel.style.fontWeight = 'bold';
+themeLabel.style.fontWeight = '600';
 themeLabel.style.textTransform = 'uppercase';
 themeLabel.innerHTML = removePrefixName(currentTheme);
 

diff --git a/packages/elements/src/heatmap/__demo__/color.html b/packages/elements/src/heatmap/__demo__/color.html
@@ -108,7 +108,7 @@ <h3>EF Heatmap - Colors</h3>
         el.tooltipCallback = function (cell) {
           var tooltip = document.createElement('div');
           var template = `
-                <div style="font-weight: bold">Actual value:</div>
+                <div style="font-weight: 600">Actual value:</div>
                 <div style="color:${cell.color}">${cell.value}</div>
                 <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>
               `;

diff --git a/packages/elements/src/heatmap/__demo__/custom-cell.html b/packages/elements/src/heatmap/__demo__/custom-cell.html
@@ -99,7 +99,7 @@ <h3>EF Heatmap - Custom cell</h3>
         el.tooltipCallback = function (cell) {
           var tooltip = document.createElement('div');
           var template = `
-                <div style="font-weight: bold">Actual value:</div>
+                <div style="font-weight: 600">Actual value:</div>
                 <div style="color:${cell.color}">${cell.value}</div>
                 <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>
               `;

diff --git a/packages/elements/src/heatmap/__demo__/event.html b/packages/elements/src/heatmap/__demo__/event.html
@@ -51,7 +51,7 @@ <h3>Sapphire Heatmap</h3>
   </code>
 
   <demo-block layout="normal" header="Click" tags="event, click">
-    <ef-heatmap id="click-test"></ef-heatmap>    
+    <ef-heatmap id="click-test"></ef-heatmap>
   </demo-block>
 
   <demo-block layout="normal" header="Double Click" tags="event, dblclick">
@@ -64,14 +64,14 @@ <h3>Sapphire Heatmap</h3>
       <ef-item value="menu1">Menu 1</ef-item>
       <ef-item value="menu2" disabled>Menu 2</ef-item>
       <ef-item type="divider"></ef-item>
-      <ef-item value="show-cell" >Show Cell Data</ef-item>      
+      <ef-item value="show-cell" >Show Cell Data</ef-item>
     </ef-overlay-menu>
   </demo-block>
 
   <ef-dialog id="dlg" header="Heatmap Cell"></ef-dialog>
-
 
-  <script>    
+
+  <script>
     const isIE = (/Trident/g).test(navigator.userAgent);
 
     var generateData = function (r, c, minPoint = -1, maxPoint = 1) {
@@ -108,7 +108,7 @@ <h3>Sapphire Heatmap</h3>
       el.tooltipCallback = function (cell) {
         var tooltip = document.createElement('div');
         var template = `
-            <div style="font-weight: bold">Actual value:</div>
+            <div style="font-weight: 600">Actual value:</div>
             <div style="color:${cell.color}">${cell.value}</div>
             <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>
           `;
@@ -196,4 +196,4 @@ <h3>Sapphire Heatmap</h3>
     initEl('contextmenu-test');
   </script>
 </body>
-</html>
+</html>
diff --git a/packages/elements/src/heatmap/__demo__/index.html b/packages/elements/src/heatmap/__demo__/index.html
@@ -96,7 +96,7 @@ <h3>EF Heatmap</h3>
       el.tooltipCallback = function (cell) {
         var tooltip = document.createElement('div');
         var template = `
-              <div style="font-weight: bold">Actual value:</div>
+              <div style="font-weight: 600">Actual value:</div>
               <div style="color:${cell.color}">${cell.value}</div>
               <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>
             `;

diff --git a/packages/halo-theme/src/custom-elements/ef-tornado-item.less b/packages/halo-theme/src/custom-elements/ef-tornado-item.less
@@ -1 +1,12 @@
 @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-tornado-item';
+
+:host {
+  &[highlighted] {
+    [part=label],
+    [part=primary-bar],
+    [part=secondary-bar] {
+        font-weight: 600;
+    }
+  }  
+}
+
diff --git a/packages/halo-theme/src/fonts.less b/packages/halo-theme/src/fonts.less
@@ -15,12 +15,3 @@
   src: url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-semibold.woff2') format('woff2'),
   url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-semibold.woff') format('woff');
 }
-
-@font-face {
-  font-family: 'Proxima Nova Fin';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-bold.woff2') format('woff2'),
-  url('https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/fonts/proximanovafin/proximanovafin-bold.woff') format('woff');
-}
diff --git a/packages/halo-theme/src/native-elements/h4.less b/packages/halo-theme/src/native-elements/h4.less
@@ -4,6 +4,6 @@ h4 {
   font-size: 24px;
   margin-bottom: 10px;
   text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 600;
   line-height: calc(30/24);
 }
diff --git a/packages/halo-theme/src/native-elements/h5.less b/packages/halo-theme/src/native-elements/h5.less
@@ -4,6 +4,6 @@ h5 {
   font-size: 18px;
   margin-bottom: 10px;
   text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 600;
   line-height: calc(24/18);
 }
diff --git a/packages/halo-theme/src/native-elements/h6.less b/packages/halo-theme/src/native-elements/h6.less
@@ -4,6 +4,6 @@ h6 {
   font-size: 16px;
   margin-bottom: 10px;
   text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 600;
   line-height: calc(22/16);
 }