moved font size levels to css

packages/toc/src/generators/markdowndocgenerator/itemrenderer.tsx

@@ -11,30 +11,21 @@ export function markdownDocItemRenderer(
   options: MarkdownDocGeneratorOptionsManager,
   item: INumberedHeading
 ) {
-  const levelsSizes: { [level: number]: string } = {
-    1: '18.74',
-    2: '16.02',
-    3: '13.69',
-    4: '12',
-    5: '11',
-    6: '10'
-  };
-  let fontSize = '9px';
+  let fontSizeClass = 'toc-level-size-default';
 
   // Render numbering if needed
   let numbering = item.numbering && options.numbering ? item.numbering : '';
-  fontSize = levelsSizes[item.level] + 'px';
+  fontSizeClass = 'toc-level-size-' + item.level;
   let jsx;
   if (item.html) {
     jsx = (
       <span
         dangerouslySetInnerHTML={{ __html: numbering + item.html }}
-        className={'toc-markdown-cell'}
-        style={{ fontSize }}
+        className={'toc-markdown-cell ' + fontSizeClass}
       />
     );
   } else {
-    jsx = <span style={{ fontSize }}> {numbering + item.text}</span>;
+    jsx = <span className={fontSizeClass}> {numbering + item.text}</span>;
   }
   return jsx;
 }

packages/toc/src/generators/notebookgenerator/itemrenderer.tsx

@@ -19,14 +19,6 @@ export function notebookItemRenderer(
   options: NotebookGeneratorOptionsManager,
   item: INotebookHeading
 ) {
-  const levelsSizes: { [level: number]: string } = {
-    1: '18.74',
-    2: '16.02',
-    3: '13.69',
-    4: '12',
-    5: '11',
-    6: '10'
-  };
   let jsx;
   if (
     item.type === INotebookHeadingTypes.markdown ||
@@ -40,10 +32,10 @@ export function notebookItemRenderer(
       cellRef!.model.metadata.set('toc-hr-collapsed', !collapsed);
       options.updateWidget();
     };
-    let fontSize = '9px';
+    let fontSizeClass = 'toc-level-size-default';
     let numbering = item.numbering && options.numbering ? item.numbering : '';
     if (item.type === INotebookHeadingTypes.header) {
-      fontSize = levelsSizes[item.level] + 'px';
+      fontSizeClass = 'toc-level-size-' + item.level;
     }
     if (
       item.html &&
@@ -56,8 +48,7 @@ export function notebookItemRenderer(
               numbering +
               options.sanitizer.sanitize(item.html, sanitizerOptions)
           }}
-          className={item.type + '-cell toc-cell-item'}
-          style={{ fontSize }}
+          className={item.type + '-cell toc-cell-item ' + fontSizeClass}
         />
       );
       // Render the headers
@@ -109,10 +100,7 @@ export function notebookItemRenderer(
     ) {
       // Render headers/markdown for plain text
       jsx = (
-        <span
-          className={item.type + '-cell toc-cell-item'}
-          style={{ fontSize }}
-        >
+        <span className={item.type + '-cell toc-cell-item ' + fontSizeClass}>
           {numbering + item.text}
         </span>
       );

packages/toc/style/index.css

@@ -406,3 +406,33 @@
   padding-left: 9px;
   padding-top: 6px;
 }
+
+/* Font level sizes */
+
+.toc-level-size-1 {
+  font-size: 18.74px;
+}
+
+.toc-level-size-2 {
+  font-size: 16.02px;
+}
+
+.toc-level-size-3 {
+  font-size: 13.69px;
+}
+
+.toc-level-size-4 {
+  font-size: 12px;
+}
+
+.toc-level-size-5 {
+  font-size: 11px;
+}
+
+.toc-level-size-6 {
+  font-size: 10px;
+}
+
+.toc-level-size-default {
+  font-size: 9px;
+}