Merge pull request #3533 from ellisonbg/font-size-fixes

Fix font sizing

packages/application/style/sidepanel.css

@@ -17,6 +17,12 @@
 |----------------------------------------------------------------------------*/
 
 
+.jp-SideBar {
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
+}
+
 .jp-SideBar.p-TabBar {
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color2);

packages/apputils/style/commandpalette.css

@@ -21,6 +21,9 @@
   padding-bottom: 0px;
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
 }
 
 /*-----------------------------------------------------------------------------

packages/apputils/style/dialog.css

@@ -20,7 +20,6 @@
   width: 100%;
   height: 100%;
   background: var(--jp-dialog-background);
-  color: var(--jp-ui-font-color1);
 }
 
 
@@ -40,6 +39,10 @@
   box-shadow: var(--jp-elevation-z20);
   word-wrap: break-word;
   border-radius: var(--jp-border-radius);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
 }
 
 
@@ -56,7 +59,7 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
-  font-size: var(--jp-ui-font-size2);
+  font-size: var(--jp-ui-font-size1);
   background: var(--jp-layout-color1);
   overflow: auto;
 }
@@ -67,7 +70,6 @@
   flex-direction: row;
   justify-content: flex-end;
   flex: 0 0 auto;
-  margin-top: 12px;
   margin-left: -12px;
   margin-right: -12px;
   padding: 12px;
@@ -93,8 +95,7 @@
 
 .jp-Dialog-body > label {
   padding-top: 4px;
-  padding-bottom: 4px;
+  padding-bottom: 8px;
   line-height: 1.4;
-  font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color0);
 }

packages/csvviewer/style/index.css

@@ -12,6 +12,9 @@
   display: flex;
   flex-direction: column;
   outline: none;
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
 }
 
 .jp-CSVToolbar {

packages/filebrowser/style/index.css

@@ -25,6 +25,8 @@
   flex-direction: column;
   color: var(--jp-ui-font-color1);
   background:var(--jp-layout-color1);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
   font-size: var(--jp-ui-font-size1);
 }
 

packages/help-extension/style/index.css

@@ -31,6 +31,8 @@
 .jp-About-body {
   display: flex;
   font-family: var(--jp-ui-font-family);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
   font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color1);
   text-align: left;

packages/launcher/style/index.css

@@ -28,6 +28,9 @@
   box-sizing: border-box;
   min-width: 120px;
   min-height: 120px;
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
 }
 
 

packages/notebook/style/index.css

@@ -221,6 +221,8 @@
   min-width: 300px;
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
   font-size: var(--jp-ui-font-size1);
 }
 

packages/running/style/index.css

@@ -14,13 +14,17 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+
+
 .jp-RunningSessions {
   display: flex;
   flex-direction: column;
   min-width: 300px;
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
-  font-size: var(--jp-ui-font-size0);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
 }
 
 
@@ -99,11 +103,12 @@
 .jp-RunningSessions-sectionHeader {
   flex: 0 0 auto;
   margin: 4px 0px;
-  padding: 4px 12px;
+  padding: 12px 0 4px 12px;
   font-weight: 600;
   text-transform: uppercase;
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
   letter-spacing: 1px;
+  font-size: var(--jp-ui-font-size0);
 }
 
 
@@ -135,7 +140,7 @@
   flex: 0 0 auto;
   padding: 0px 8px;
   margin-right: 4px;
-  margin-left: 8px;
+  margin-left: 12px;
   vertical-align: baseline;
   background-size: 16px;
   background-repeat: no-repeat;

packages/settingeditor/style/settingeditor.css

@@ -22,6 +22,9 @@
   border-top: var(--jp-border-width) solid var(--jp-border-color1);
   margin-top: -1px;
   outline: none;
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
 }
 
 

packages/tabmanager-extension/style/index.css

@@ -9,7 +9,7 @@
 
 :root {
   --jp-private-tab-manager-active-top-border: 2px;
-  --jp-private-tab-manager-tab-height: 32px;
+  --jp-private-tab-manager-tab-height: 24px;
   --jp-private-tab-manager-tab-padding-top: 8px;
 }
 
@@ -22,6 +22,8 @@
   background: var(--jp-layout-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
   font-size: var(--jp-ui-font-size1);
 }
 
@@ -39,11 +41,9 @@
 
 
 #tab-manager .p-TabBar-tab {
-  margin-left: calc(-1*var(--jp-border-width));
   height: var(--jp-private-tab-manager-tab-height);
-  padding: 0px 8px;
-  border-top: var(--jp-border-width) solid transparent;
-  border-bottom: var(--jp-border-width) solid transparent;
+  padding: 0px 12px;
+  border: none;
   position: relative;
   overflow: visible;
 }
@@ -73,7 +73,7 @@
 
 
 #tab-manager .p-TabBar-tabLabel {
-  padding-top: var(--jp-private-tab-manager-tab-padding-top);
+  line-height: var(--jp-private-tab-manager-tab-height);
   padding-left: 4px;
 }
 
@@ -85,13 +85,9 @@
   margin-right: 2px;
 }
 
-#tab-manager .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {
-  margin-bottom: var(--jp-border-width);
-}
 
 #tab-manager .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  margin-left: 4px;
-  padding-top: 12px;
+  padding: 4px 0px 4px 4px;
   background-size: 16px;
   height: 16px;
   width: 16px;

packages/theme-dark-extension/style/variables.css

@@ -86,6 +86,10 @@ all of MD as it is not optimized for dense, information rich UIs.
    *
    * The UI font CSS variables are used for the typography all of the JupyterLab
    * user interface elements that are not directly user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
    */
 
   --jp-ui-font-scale-factor: 1.2;

packages/theme-light-extension/style/variables.css

@@ -84,6 +84,10 @@ all of MD as it is not optimized for dense, information rich UIs.
    *
    * The UI font CSS variables are used for the typography all of the JupyterLab
    * user interface elements that are not directly user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
    */
 
   --jp-ui-font-scale-factor: 1.2;