Use CSS Variables for fonts, remove postcss-loader (#13204)

* Use CSS Variables for fonts, remove postcss-loader - Use CSS variables for fonts, making the fonts easier to customize - Remove postcss-loader, it's not doing anything useful and is actually applying strange transforms on our CSS. Fixes: #11045 * introduce helper variable, mark documented vars * work around case issue by always quoting specific fonts
go-gitea · Oct 19, 2020 · 3ddf3f9 · 3ddf3f9
1 parent d67172b
commit 3ddf3f9
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 662 deletions.
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -295,3 +295,15 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
 
 As of version 1.6.0 Gitea has built-in themes. The two built-in themes are, the default theme `gitea`, and a dark theme `arc-green`. To change the look of your Gitea install change the value of `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` to another one of the available options.  
 As of version 1.8.0 Gitea also has per-user themes. The list of themes a user can choose from can be configured with the `THEMES` value in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` (defaults to `gitea` and `arc-green`, light and dark respectively)
+
+## Customizing fonts
+
+Fonts can be customized using CSS variables:
+
+```css
+:root {
+  --fonts-proportional: /* custom proportional fonts */ !important;
+  --fonts-monospace: /* custom monospace fonts */ !important;
+  --fonts-emoji: /* custom emoji fonts */ !important;
+}
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,9 +32,6 @@
     "mini-css-extract-plugin": "0.11.1",
     "monaco-editor": "0.20.0",
     "monaco-editor-webpack-plugin": "1.9.0",
-    "postcss": "7.0.32",
-    "postcss-loader": "4.0.1",
-    "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.1",
     "sortablejs": "1.10.2",
     "swagger-ui": "3.32.5",

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -1,85 +1,98 @@
+:root {
+  /* documented customizable variables */
+  --fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial";
+  --fonts-monospace: "SF Mono", "Consolas", "Menlo", "Liberation Mono", "Monaco", "Lucida Console", monospace;
+  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
+  /* other variables */
+  --fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
+}
+
+:root:lang(ja) {
+  --fonts-proportional: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Source Han Sans JP", "Noto Sans CJK JP", "Droid Sans Japanese", "Meiryo", "MS PGothic";
+}
+
+:root:lang(zh-CN) {
+  --fonts-proportional: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", "SimHei";
+}
+
+:root:lang(zh-TW) {
+  --fonts-proportional: "PingFang TC", "Hiragino Sans TC", "Source Han Sans TW", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU";
+}
+
+:root:lang(zh-HK) {
+  --fonts-proportional: "PingFang HK", "Hiragino Sans TC", "Source Han Sans HK", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU_HKSCS", "PMingLiU";
+}
+
+:root:lang(ko) {
+  --fonts-proportional: "Apple SD Gothic Neo", "NanumBarunGothic", "Malgun Gothic", "Gulim", "Dotum", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR";
+}
+
 @font-face {
-  font-family: 'Yu Gothic';
-  src: local('Yu Gothic Medium');
+  font-family: "Yu Gothic";
+  src: local("Yu Gothic Medium");
   font-weight: 400;
 }
 
 @font-face {
-  font-family: 'Yu Gothic';
-  src: local('Yu Gothic Bold');
+  font-family: "Yu Gothic";
+  src: local("Yu Gothic Bold");
   font-weight: 700;
 }
 
 @font-face {
-  font-family: 'Noto Color Emoji';
+  font-family: "Noto Color Emoji";
   src:
-    local('Noto Color Emoji'),
-    local('Noto-Color-Emoji'),
-    url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
-}
-
-@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
-
-.override-fonts(@fonts) {
-  textarea {
-    font-family: @fonts;
-  }
-
-  .markdown:not(code) {
-    font-family: @fonts;
-  }
-
-  /* We're going to just override the semantic fonts here */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-family: @fonts;
-  }
-
-  .ui.accordion .title:not(.ui),
-  .ui.button,
-  .ui.card > .content > .header.ui.card > .content > .header,
-  .ui.category.search > .results .category > .name,
-  .ui.form input:not([type]),
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"],
-  .ui.header,
-  .ui.items > .item > .content > .header,
-  .ui.list .list > .item .header,
-  .ui.list > .item .header,
-  .ui.menu,
-  .ui.message .header,
-  .ui.modal > .header,
-  .ui.popup > .header,
-  .ui.search > .results .result .title,
-  .ui.search > .results > .message .header,
-  body,
-  .ui.input > input,
-  .ui.input input,
-  .ui.statistics .statistic > .value,
-  .ui.statistic > .value,
-  .ui.statistics .statistic > .label,
-  .ui.statistic > .label,
-  .ui.steps .step .title,
-  .ui.text.container,
-  .ui.language > .menu > .item& {
-    font-family: @fonts;
-  }
-}
-
-.override-fonts(@default-fonts, sans-serif;);
+    local("Noto Color Emoji"),
+    local("Noto-Color-Emoji"),
+    url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
+}
+
+/* Most of these selectors override fomantic ui */
+body,
+textarea,
+h1,
+h2,
+h3,
+h4,
+h5,
+.markdown:not(code),
+.ui.accordion .title:not(.ui),
+.ui.button,
+.ui.card > .content > .header.ui.card > .content > .header,
+.ui.category.search > .results .category > .name,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="file"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.header,
+.ui.items > .item > .content > .header,
+.ui.list .list > .item .header,
+.ui.list > .item .header,
+.ui.menu,
+.ui.message .header,
+.ui.modal > .header,
+.ui.popup > .header,
+.ui.search > .results .result .title,
+.ui.search > .results > .message .header,
+.ui.input > input,
+.ui.input input,
+.ui.statistics .statistic > .value,
+.ui.statistic > .value,
+.ui.statistics .statistic > .label,
+.ui.statistic > .label,
+.ui.steps .step .title,
+.ui.text.container,
+.ui.language > .menu > .item {
+  font-family: var(--fonts-regular);
+}
 
 body {
   background-color: #ffffff;
@@ -88,31 +101,6 @@ body {
   flex-direction: column;
 }
 
-@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
-:lang(ja) {
-  .override-fonts(@default-fonts, @ja-fonts, sans-serif;);
-}
-
-@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
-:lang(zh-CN) {
-  .override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
-}
-
-@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
-:lang(zh-TW) {
-  .override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
-}
-
-@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
-:lang(zh-HK) {
-  .override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
-}
-
-@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
-:lang(ko) {
-  .override-fonts(@default-fonts, @ko-fonts, sans-serif;);
-}
-
 img {
   border-radius: 3px;
 }
@@ -137,7 +125,7 @@ a {
 pre,
 code,
 .mono {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
 
   &.raw {
     padding: 7px 12px;
@@ -545,7 +533,7 @@ code,
   }
 
   .sha.label {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     font-size: 13px;
     padding: 6px 10px 4px;
     font-weight: normal;
@@ -694,7 +682,7 @@ code,
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 
@@ -1008,7 +996,7 @@ i.icon.centerlock {
   color: rgba(27, 31, 35, .3);
   width: 1%;
   user-select: none;
-  font-family: @monospaced-fonts, monospace;
+  font-family: var(--fonts-monospace);
 
   span {
     &.bottom-line {
@@ -1089,7 +1077,7 @@ i.icon.centerlock {
 
     .blame-data {
       display: flex;
-      font-family: @default-fonts, sans-serif;
+      font-family: var(--fonts-regular);
 
       .blame-message {
         flex-grow: 2;
@@ -1131,7 +1119,7 @@ i.icon.centerlock {
 
   *:not(.fa):not(.svg):not(.icon) {
     font-size: 12px;
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     line-height: 20px;
   }
 

diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
@@ -128,7 +128,7 @@
     }
 
     .commit-id {
-      font-family: @monospaced-fonts, monospace;
+      font-family: var(--fonts-monospace);
     }
 
     code {

diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
@@ -1,5 +1,5 @@
 .CodeMirror {
-  font: 14px @monospaced-fonts, monospace;
+  font: 14px var(--fonts-monospace);
 
   &.cm-s-default {
     border-radius: 3px;

diff --git a/web_src/less/_form.less b/web_src/less/_form.less
@@ -238,7 +238,7 @@
 
 .githook {
   textarea {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
   }
 }
 

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -545,7 +545,7 @@
           .branch-name {
             display: inline-block;
             padding: 3px 6px;
-            font: 12px @monospaced-fonts, monospace;
+            font: 12px var(--fonts-monospace);
             color: rgba(0, 0, 0, .65);
             background-color: rgba(209, 227, 237, .45);
             border-radius: 3px;
@@ -1162,7 +1162,7 @@
 
           textarea {
             height: 200px;
-            font-family: @monospaced-fonts, monospace;
+            font-family: var(--fonts-monospace);
           }
         }
 
@@ -1277,7 +1277,7 @@
 
       textarea {
         height: 200px;
-        font-family: @monospaced-fonts, monospace;
+        font-family: var(--fonts-monospace);
       }
     }
   }
@@ -2096,7 +2096,7 @@
     &.new {
       .CodeMirror {
         .CodeMirror-code {
-          font-family: @monospaced-fonts, monospace;
+          font-family: var(--fonts-monospace);
 
           .cm-comment {
             background: inherit;

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
@@ -129,7 +129,7 @@
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }