Scale UI element font size based on editor font size

Created by lee-dohm
Last updated about 2 years ago
.theme-one-light-ui, .theme-one-dark-ui, .theme-atom-material-ui {
  .git-Panel,
  .modal,
  .status-bar,
  .tab-bar,
  .tree-view {
    font-size: e("calc(var(--editor-font-size) * 0.88888888889)");
  }

  .github-Git,
  .github-RecentCommit {
    font-size: e("calc(var(--editor-font-size) * 0.77777777778)");
  }
}

This uses the --editor-font-size CSS custom property that is equal to the font size in your editor to scale the font size used in various UI elements proportionally. The two scale factors are set so that if the editor font size is 18px, the Tree View font size will be 16px and the git panel font size will be 14px.

The e() function escapes the supplied text so that it is inserted literally into the CSS output. This is necessary because otherwise the Less compiler would try to evaluate the calc() values but the CSS custom properties aren’t available at the time the Less is compiled.