Improve language font support

Saltssaumure · May 1, 2023 · 9b34c56 · 9b34c56
1 parent b5e45e1
commit 9b34c56
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,33 @@
     - [GitHub](https://github.com/Saltssaumure/pios-discord-theme/releases/latest)
     - [Replugged.dev](https://replugged.dev/install?identifier=Saltssaumure/pios-discord-theme&source=github)
 
-## Customisation
+### Vencord
+1. Install [Vencord](https://github.com/Vendicated/Vencord).
+2. Paste the following in `Settings` > `Vencord` > `Themes`:
+    - `https://saltssaumure.github.io/pios-discord-theme/piOS.theme.css`
+
+## How to customise
+
+### BetterDiscord
+1. Open `Settings` > `BetterDiscord` > `Themes`.
+2. Click the pencil icon on this theme.
+3. Edit the variable values and save changes.
+
+### Replugged
+1. Open `Settings` > `Replugged` > `Quick CSS`.
+3. Copy and paste line 30-36 of [`piOS.theme.css`](https://github.com/Saltssaumure/pios-discord-theme/blob/main/piOS.theme.css).
+3. Edit the variable values and apply changes.
+
+### Vencord
+#### Standard method
+1. Follow the instructions in `Settings` > `Vencord` > `Themes`.
+#### Recommended method
+1. Open `Settings` > `Vencord` > `Vencord`.
+2. Toggle on `Enable Custom CSS` and click `Open QuickCSS File`.
+3. Copy and paste line 30-36 of [`piOS.theme.css`](https://github.com/Saltssaumure/pios-discord-theme/blob/main/piOS.theme.css).
+4. Edit the variable values.
+
+## Customisation options
 
 ### Message display
 Cosy mode uses regular Discord layout, while Compact mode has piOS-style boxes.

diff --git a/manifest.json b/manifest.json
@@ -1,13 +1,13 @@
 {
     "id": "net.saltssaumure.piOS",
     "name": "piOS",
-    "description": "SUPERHOT piOS inspired Discord theme.",
+    "description": "A SUPERHOT piOS inspired Discord theme.",
     "author": {
         "name": "Saltssaumure",
         "discordID": "134142022092062720",
         "github": "Saltssaumure"
     },
-    "version": "9.1",
+    "version": "9.2",
     "updater": {
         "type": "github",
         "id": "Saltssaumure/pios-discord-theme"

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pios-discord-theme",
-    "version": "9.1",
-    "description": "SUPERHOT piOS inspired Discord theme.",
+    "version": "9.2",
+    "description": "A SUPERHOT piOS inspired Discord theme.",
     "repository": "https://github.com/Saltssaumure/pios-discord-theme.git",
     "author": "Saltssaumure <[email protected]>",
     "license": "GPL-3.0",

diff --git a/scss-compile.config.js b/scss-compile.config.js
@@ -8,6 +8,6 @@ export default {
         /** The name of your theme repository. */
         repo: "pios-discord-theme",
         /** The version of your theme. */
-        version: "9.1"
+        version: "9.2"
     }
 };
diff --git a/scss/part/_text.scss b/scss/part/_text.scss
@@ -1,3 +1,47 @@
+@use "../top/mixin";
+@use "../top/var-scss" as *;
+
+@font-face {
+    font-family: "FixedSysTrue";
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: grayscale;
+    src: url("https://saltssaumure.github.io/pios-discord-theme/font/FixedSysTrue.ttf");
+}
+
+@font-face {
+    font-family: "PerfectDOS";
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: grayscale;
+    src: url("https://saltssaumure.github.io/pios-discord-theme/font/PerfectDosVga.ttf");
+}
+
+:root {
+    // Set default fonts
+    @include mixin.lang-font($font-latin, $font-code);
+    letter-spacing: -0.04rem;
+}
+
+:lang(bg),
+:lang(el),
+:lang(ru),
+:lang(uk) {
+    @include mixin.lang-font($font-cyrillic, $font-code);
+}
+:lang(zh-CN) {
+    @include mixin.lang-font($font-chinese-simplified, $font-code);
+}
+:lang(zh-TW) {
+    @include mixin.lang-font($font-chinese-traditional, $font-code);
+}
+:lang(ja) {
+    @include mixin.lang-font($font-japanese, $font-code);
+}
+:lang(ko) {
+    @include mixin.lang-font($font-korean, $font-code);
+}
+
 // All caps on areas where case is not so important
 // importantly: excludes message text, searches, emoji, and status text
 .channelName-3KPsGw,

diff --git a/scss/top/_mixin.scss b/scss/top/_mixin.scss
@@ -0,0 +1,6 @@
+@mixin lang-font($font, $font-code) {
+    --font-display: #{$font}; // For server and channel title
+    --font-primary: #{$font}; // For almost everything else
+    --font-headline: #{$font}; // For discord ads
+    --font-code: #{$font-code}; // For code blocks
+}
diff --git a/scss/top/_var-css.scss b/scss/top/_var-css.scss
@@ -1,27 +1,5 @@
-@font-face {
-    font-family: "FixedSysTrue";
-    font-smooth: never;
-    -webkit-font-smoothing: none;
-    -moz-osx-font-smoothing: grayscale;
-    src: url("https://saltssaumure.github.io/pios-discord-theme/font/FixedSysTrue.ttf");
-}
-
-@font-face {
-    font-family: "PerfectDOS";
-    font-smooth: never;
-    -webkit-font-smoothing: none;
-    -moz-osx-font-smoothing: grayscale;
-    src: url("https://saltssaumure.github.io/pios-discord-theme/font/PerfectDosVga.ttf");
-}
-
-:lang(bg),
-:lang(el),
-:lang(ru),
-:lang(uk) {
-    --font-display: FixedSysTrue, monospace; // For server and channel title
-    --font-primary: FixedSysTrue, monospace; // For almost everything else
-    --font-headline: FixedSysTrue, monospace; // For discord ads
-}
+@use "mixin";
+@use "var-scss" as *;
 
 :root {
     // RadialStatus
@@ -54,23 +32,15 @@
 
 .theme-dark,
 .layerContainer-2v_Sit .theme-light // Modals that use theme-light while in dark mode
-
-    {
+{
     // Set customisable colour scheme
     --piOSaccenthue: var(--accent-color, 0); // default: 0 (red)
-    --piOSaccent: hsl(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%);
+    --piOSaccent: hsl(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%);
     --piOSwhite: white;
     --piOSlightgrey: lightgrey;
     --piOSgrey: grey;
     --piOSblack: black;
 
-    // Set default fonts
-    --font-display: PerfectDOS, monospace; // For server and channel title
-    --font-primary: PerfectDOS, monospace; // For almost everything else
-    --font-headline: PerfectDOS, monospace; // For discord ads
-    --font-code: "FixedSysTrue", monospace; // Code blocks
-    letter-spacing: -0.04rem;
-
     // Borders
     --borderColor: var(--piOSgrey);
     --borderCodeColor: var(--piOSwhite);
@@ -88,7 +58,7 @@
     --text-positive: var(--piOSwhite);
     --text-warning: var(--piOSwhite);
     --text-danger: var(--piOSaccent);
-    --text-brand: hsl(var(--piOSaccenthue), calc(var(--saturation-factor)*80%), 50%);
+    --text-brand: hsl(var(--piOSaccenthue), calc(var(--saturation-factor) * 80%), 50%);
     --interactive-normal: var(--piOSlightgrey);
     --interactive-muted: var(--piOSgrey);
     --interactive-active: var(--piOSwhite); // default: unread dot marker, current channel name
@@ -102,12 +72,12 @@
     --background-mobile-secondary: var(--piOSblack);
     --background-accent: var(--piOSaccent);
     --background-floating: var(--piOSblack);
-    --background-mentioned: hsla(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%, 0.2);
-    --background-modifier-hover: hsla(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%, 0.2);
-    --background-modifier-active: hsla(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%, 0.7);
-    --background-modifier-selected: hsla(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%, 0.3);
+    --background-mentioned: hsla(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%, 0.2);
+    --background-modifier-hover: hsla(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%, 0.2);
+    --background-modifier-active: hsla(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%, 0.7);
+    --background-modifier-selected: hsla(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%, 0.3);
     --background-modifier-accent: transparent;
-    --backgroundEmbed: hsla(var(--piOSaccenthue), calc(var(--saturation-factor)*100%), 50%, 0.3);
+    --backgroundEmbed: hsla(var(--piOSaccenthue), calc(var(--saturation-factor) * 100%), 50%, 0.3);
     --channeltextarea-background: transparent;
     --home-background: var(--piOSblack);
     --modal-background: var(--piOSblack);
@@ -171,17 +141,21 @@
 
     // Misc parts
     --status-danger: var(--piOSaccent); // Servers sidebar notification counter background
-    --divider-color: hsl(0, calc(var(--saturation-factor)*100%), 50%); // color of new messages divider
-    --info-warning-foreground: hsl(0, calc(var(--saturation-factor)*100%), 50%); // colour of @ping message left side indicator
-    --spoilerGradient: repeating-linear-gradient(-45deg,
-            transparent,
-            transparent 4px,
-            rgba(0, 255, 255, 0.2) 2px,
-            rgba(0, 255, 255, 0.2) 6px); // Spoiler stripe pattern
+    --divider-color: hsl(0, calc(var(--saturation-factor) * 100%), 50%); // color of new messages divider
+    --info-warning-foreground: hsl(0, calc(var(--saturation-factor) * 100%), 50%); // colour of @ping message left side indicator
+    --spoilerGradient: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 4px,
+        rgba(0, 255, 255, 0.2) 2px,
+        rgba(0, 255, 255, 0.2) 6px
+    ); // Spoiler stripe pattern
     --glowIntensity: var(--glow-intensity, 1);
     --true-compact-message-spacing: var(--compact-message-spacing, 1); // Space between messages in compact mode, user adjustable
-    --focus-primary: hsl(calc(var(--piOSaccenthue) + 180),
-            calc(var(--saturation-factor) * 100%),
-            50%); // Focus ring when navigating by keyboard
+    --focus-primary: hsl(
+        calc(var(--piOSaccenthue) + 180),
+        calc(var(--saturation-factor) * 100%),
+        50%
+    ); // Focus ring when navigating by keyboard
     --info-warning-foreground: var(--piOSaccent); // Mentioned message left bar
-}
+}
diff --git a/scss/top/_var-scss.scss b/scss/top/_var-scss.scss
@@ -0,0 +1,11 @@
+$font-code: FixedSysTrue, Consolas, monospace;
+
+$font-latin: PerfectDOS, FixedSysTrue, monospace;
+$font-cyrillic: FixedSysTrue, monospace;
+$font-japanese: PerfectDOS, FixedSysTrue, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka,
+    "MS PGothic", monospace;
+$font-chinese-simplified: PerfectDOS, FixedSysTrue, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun,
+    monospace;
+$font-chinese-traditional: PerfectDOS, FixedSysTrue, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑,
+    宋体, SimSun, monospace;
+$font-korean: PerfectDOS, FixedSysTrue, "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, monospace;