Feature: Font selector and ligature toggle.

This commit is contained in:
Paul 2021-07-04 17:56:18 +01:00
parent 652736c300
commit 1c80d5675f
19 changed files with 315 additions and 32 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 24766f8f5c2147ba866af922e3f5f42ad3ea44e4
Subproject commit 6ccd590846c35e8d3b948e9203510ccf8718a79c

View file

@ -25,8 +25,23 @@
"preact": "^10.5.13"
},
"devDependencies": {
"@fontsource/fira-mono": "^4.4.5",
"@fontsource/atkinson-hyperlegible": "^4.4.5",
"@fontsource/bree-serif": "^4.4.5",
"@fontsource/comic-neue": "^4.4.5",
"@fontsource/fira-code": "^4.4.5",
"@fontsource/inter": "^4.4.5",
"@fontsource/lato": "^4.4.5",
"@fontsource/montserrat": "^4.4.5",
"@fontsource/noto-sans": "^4.4.5",
"@fontsource/open-sans": "^4.4.5",
"@fontsource/poppins": "^4.4.5",
"@fontsource/raleway": "^4.4.5",
"@fontsource/roboto": "^4.4.5",
"@fontsource/roboto-mono": "^4.4.5",
"@fontsource/source-code-pro": "^4.4.5",
"@fontsource/space-mono": "^4.4.5",
"@fontsource/ubuntu": "^4.4.5",
"@fontsource/ubuntu-mono": "^4.4.5",
"@hcaptcha/react-hcaptcha": "^0.3.6",
"@preact/preset-vite": "^2.0.0",
"@rollup/plugin-replace": "^2.4.2",

View file

@ -24,14 +24,16 @@ const PermissionTooltipBase = styled.div`
display: flex;
align-items: center;
flex-direction: column;
span {
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
font-size: 11px;
}
code {
font-family: 'Fira Mono';
font-family: var(--monoscape-font);
}
`;

View file

@ -71,7 +71,7 @@
}
pre code {
font-family: "Fira Mono", sans-serif;
font-family: var(--monoscape-font), sans-serif;
}
&[data-loading="true"] {

View file

@ -1,5 +1,3 @@
@import "@fontsource/fira-mono/400.css";
.markdown {
:global(.emoji) {
height: 1.25em;
@ -89,7 +87,7 @@
font-size: 90%;
border-radius: 4px;
background: var(--block);
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
}
input[type="checkbox"] {
@ -136,7 +134,7 @@
}
:global(.code) {
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
:global(.lang) {
// height: 8px;

View file

@ -10,7 +10,7 @@ export default styled.button<Props>`
padding: 8px;
font-size: 16px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-family: inherit;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;

View file

@ -3,6 +3,7 @@ import styled from "styled-components";
export default styled.select`
padding: 8px;
border-radius: 2px;
font-family: inherit;
color: var(--secondary-foreground);
background: var(--secondary-background);

View file

@ -9,6 +9,7 @@ export default styled.input<Props>`
padding: 8px 16px;
border-radius: 6px;
font-family: inherit;
color: var(--foreground);
background: var(--primary-background);
transition: 0.2s ease background-color;

View file

@ -39,8 +39,10 @@ export default styled.textarea<TextAreaProps>`
}
${ props => props.code ? css`
font-family: 'Fira Mono', 'Courier New', Courier, monospace;
font-family: var(--monoscape-font-font), monospace;
` : css`
font-family: 'Open Sans', sans-serif;
font-family: inherit;
` }
font-variant-ligatures: var(--ligatures);
`;

View file

@ -32,18 +32,158 @@ export type Variables =
| "status-streaming"
| "status-invisible";
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
export type Theme = {
[variable in Variables]: string;
} & {
light?: boolean;
font?: Fonts;
css?: string;
monoscapeFont?: MonoscapeFonts;
};
export interface ThemeOptions {
preset?: string;
ligatures?: boolean;
custom?: Partial<Theme>;
}
export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
"Open Sans": {
name: "Open Sans",
load: async () => {
await import("@fontsource/open-sans/300.css");
await import("@fontsource/open-sans/400.css");
await import("@fontsource/open-sans/600.css");
await import("@fontsource/open-sans/700.css");
await import("@fontsource/open-sans/400-italic.css");
}
},
Inter: {
name: "Inter",
load: async () => {
await import("@fontsource/inter/300.css");
await import("@fontsource/inter/400.css");
await import("@fontsource/inter/600.css");
await import("@fontsource/inter/700.css");
}
},
"Atkinson Hyperlegible": {
name: "Atkinson Hyperlegible",
load: async () => {
await import("@fontsource/atkinson-hyperlegible/400.css");
await import("@fontsource/atkinson-hyperlegible/700.css");
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
}
},
"Roboto": {
name: "Roboto",
load: async () => {
await import("@fontsource/roboto/400.css");
await import("@fontsource/roboto/700.css");
await import("@fontsource/roboto/400-italic.css");
}
},
"Noto Sans": {
name: "Noto Sans",
load: async () => {
await import("@fontsource/noto-sans/400.css");
await import("@fontsource/noto-sans/700.css");
await import("@fontsource/noto-sans/400-italic.css");
}
},
"Bree Serif": {
name: "Bree Serif",
load: () => import("@fontsource/bree-serif/400.css")
},
"Lato": {
name: "Lato",
load: async () => {
await import("@fontsource/lato/300.css");
await import("@fontsource/lato/400.css");
await import("@fontsource/lato/700.css");
await import("@fontsource/lato/400-italic.css");
}
},
"Montserrat": {
name: "Montserrat",
load: async () => {
await import("@fontsource/montserrat/300.css");
await import("@fontsource/montserrat/400.css");
await import("@fontsource/montserrat/600.css");
await import("@fontsource/montserrat/700.css");
await import("@fontsource/montserrat/400-italic.css");
}
},
"Poppins": {
name: "Poppins",
load: async () => {
await import("@fontsource/poppins/300.css");
await import("@fontsource/poppins/400.css");
await import("@fontsource/poppins/600.css");
await import("@fontsource/poppins/700.css");
await import("@fontsource/poppins/400-italic.css");
}
},
"Raleway": {
name: "Raleway",
load: async () => {
await import("@fontsource/raleway/300.css");
await import("@fontsource/raleway/400.css");
await import("@fontsource/raleway/600.css");
await import("@fontsource/raleway/700.css");
await import("@fontsource/raleway/400-italic.css");
}
},
"Ubuntu": {
name: "Ubuntu",
load: async () => {
await import("@fontsource/ubuntu/300.css");
await import("@fontsource/ubuntu/400.css");
await import("@fontsource/ubuntu/500.css");
await import("@fontsource/ubuntu/700.css");
await import("@fontsource/ubuntu/400-italic.css");
}
},
"Comic Neue": {
name: "Comic Neue",
load: async () => {
await import("@fontsource/comic-neue/300.css");
await import("@fontsource/comic-neue/400.css");
await import("@fontsource/comic-neue/700.css");
await import("@fontsource/comic-neue/400-italic.css");
}
}
};
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
"Fira Code": {
name: "Fira Code",
load: () => import("@fontsource/fira-code/400.css")
},
"Roboto Mono": {
name: "Roboto Mono",
load: () => import("@fontsource/roboto-mono/400.css")
},
"Source Code Pro": {
name: "Source Code Pro",
load: () => import("@fontsource/source-code-pro/400.css")
},
"Space Mono": {
name: "Space Mono",
load: () => import("@fontsource/space-mono/400.css")
},
"Ubuntu Mono": {
name: "Ubuntu Mono",
load: () => import("@fontsource/ubuntu-mono/400.css")
}
};
export const FONT_KEYS = Object.keys(FONTS).sort();
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
// Generated from https://gitlab.insrt.uk/revolt/community/themes
export const PRESETS: { [key: string]: Theme } = {
light: {
@ -120,15 +260,32 @@ interface Props {
options?: ThemeOptions;
}
function Theme(props: Props) {
function Theme({ children, options }: Props) {
const theme: Theme = {
...PRESETS["dark"],
...(PRESETS as any)[props.options?.preset as any],
...props.options?.custom
...(PRESETS as any)[options?.preset as any],
...options?.custom
};
const root = document.documentElement.style;
useEffect(() => {
const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
const font = theme.font ?? 'Inter';
root.setProperty('--font', `"${font}"`);
FONTS[font].load();
}, [ theme.font ]);
useEffect(() => {
const font = theme.monoscapeFont ?? 'Fira Code';
root.setProperty('--monoscape-font', `"${font}"`);
MONOSCAPE_FONTS[font].load();
}, [ theme.monoscapeFont ]);
useEffect(() => {
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
}, [ options?.ligatures ]);
useEffect(() => {
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
resize();
window.addEventListener('resize', resize);
@ -151,7 +308,7 @@ function Theme(props: Props) {
{theme.css && (
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
)}
{props.children}
{ children }
</ThemeContext.Provider>
);
}

View file

@ -7,7 +7,7 @@
user-select: all;
font-size: 1.4em;
text-align: center;
font-family: "Fira Mono";
font-family: var(--monoscape-font);
}
}

View file

@ -93,7 +93,7 @@
margin: 1rem 12px 0;
font-size: 10px;
color: var(--secondary-foreground);
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
user-select: text;
display: grid;

View file

@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
import styles from "./Panes.module.scss";
import { debounce } from "../../../lib/debounce";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
// @ts-ignore
import pSBC from 'shade-blend-color';
@ -22,7 +25,6 @@ import mutantSVG from '../assets/mutant_emoji.svg';
import notoSVG from '../assets/noto_emoji.svg';
import openmojiSVG from '../assets/openmoji_emoji.svg';
import twemojiSVG from '../assets/twemoji_emoji.svg';
import CollapsibleSection from "../../../components/common/CollapsibleSection";
interface Props {
settings: Settings;
@ -130,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
</Radio>
</div>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
{
FONT_KEYS
.map(key =>
<option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
)
}
</ComboBox>
<p>
<Checkbox checked={props.settings.theme?.ligatures === true}
onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
@ -260,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
</div>
))}
</div>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
{
MONOSCAPE_FONT_KEYS
.map(key =>
<option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
)
}
</ComboBox>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>

View file

@ -65,7 +65,7 @@ export function settings(
return {
...state,
theme: {
...filter(state.theme, ["custom", "preset"]),
...filter(state.theme, ["custom", "preset", "ligatures"]),
...action.theme,
},
};

View file

@ -1,6 +0,0 @@
@import "@fontsource/open-sans/300.css";
@import "@fontsource/open-sans/400.css";
@import "@fontsource/open-sans/600.css";
@import "@fontsource/open-sans/700.css";
@import "@fontsource/open-sans/400-italic.css";

View file

@ -18,7 +18,9 @@ html,
body {
margin: 0;
height: 100%;
font-family: "Open Sans", sans-serif;
font-family: var(--font), sans-serif;
font-variant-ligatures: var(--ligatures);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
caret-color: var(--accent);

View file

@ -1,4 +1,7 @@
:root {
--ligatures: none;
--font: "Open Sans";
--app-height: 100vh;
--codeblock-font: "Fira Code";
--sidebar-active: var(--secondary-background);
}

View file

@ -1,7 +1,6 @@
@import "variables";
@import "context-menu";
@import "elements";
@import "fonts";
@import "page";
@import "react-overlapping-panels/dist";

View file

@ -912,16 +912,91 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@fontsource/fira-mono@^4.4.5":
"@fontsource/atkinson-hyperlegible@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/fira-mono/-/fira-mono-4.4.5.tgz#ceac70967cd3c4262195603aba567cd4582493f8"
integrity sha512-LWbsPhTr1JRV3zUgvMrOxQDn1BG9F4R0FPeBkqWP8/oqPxvVYAhEepg1DN9M1k6L9sRN2I2HWHBpt4QVbDGXpw==
resolved "https://registry.yarnpkg.com/@fontsource/atkinson-hyperlegible/-/atkinson-hyperlegible-4.4.5.tgz#4f2ecf34491d5798ec2a346d7de403d99ca82d39"
integrity sha512-HmhcEIWucTCfvl4qB/ucGIGjp7zMyOfGgfeY+n84Qz7x4sFosOpQlziPFmgO1MHiU1Quw9VGGj2t+zNU5EtBFQ==
"@fontsource/bree-serif@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/bree-serif/-/bree-serif-4.4.5.tgz#ac5dc36b9b96bcae17820d66eee7d9f64647fc76"
integrity sha512-/a8Ef8O5TTWcKSQKFs7kc/oVZddSFEunxgWJwt9f8q9Z9qSYNeUrBft0q8SGA+V6c4m0svaZSWICqBTg/aeDcQ==
"@fontsource/comic-neue@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/comic-neue/-/comic-neue-4.4.5.tgz#00cb5546ca2a9fe9cc2e0fa73349e9202c7b28d5"
integrity sha512-0oTyJMmWxiJaf1ZTyyK10RRHBqhYgatAqE0SJPCdithDTzETkHWINEi51lkd95evo418pqmjmjNHGYBgO5CN9w==
"@fontsource/fira-code@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.4.5.tgz#380c964676b1e873b192862ce03a7ad1c7838516"
integrity sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg==
"@fontsource/inter@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.4.5.tgz#bce26ff9dd83898bd610924cff1342cc30d0e89a"
integrity sha512-eRUmB54CbyC3MhAuw2VvTPEc3wy8sFi0/1mVHaC7ZXglXcrSWXY+p8Xad/Zy8AcmS9BuqCCEH2qJbOt9XdX65Q==
"@fontsource/lato@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/lato/-/lato-4.4.5.tgz#82c16ef01ab1a1039f74d774e89ef1f76111def6"
integrity sha512-pm9am2tdLnK+21PKCK060oY8R8OKFVzTVvM6pPS+mS7JOZKe3mmDgfB2DGzzyHG/Azj3Pn6onU72BrQsh3XjNw==
"@fontsource/montserrat@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/montserrat/-/montserrat-4.4.5.tgz#f97ebea605f4a2d6b9b23a19bc9bf8fc6f4c79d5"
integrity sha512-1F3cR9OIp4Qi1AJHFg/SeFeUWLYemMgI3ldetx0mrlHoWeMuK+p2YentYIIZVkV9ogXOIE2QEw7VnHlGBPo7iw==
"@fontsource/noto-sans@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans/-/noto-sans-4.4.5.tgz#0053bf374f8d5222908c825aa1db6a3078a79cf6"
integrity sha512-1P+AMhUvjfpMwuDsLHG1F95ij1SULGM8IiW/4RmdP7+ZHJuvBsSG465Ujps34IDio5bcv6OaLpGyU1YBVTTe+Q==
"@fontsource/open-sans@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.4.5.tgz#07b31617e62ed753c94cabcf552ebaed4de497ce"
integrity sha512-PDWEvO1/p8OAHHiielvEmwGXHNbZhrZn96ojV7+/mKgFu+cCUcGVJl9sFs97rCWLe3hKQsYLEsJs4EiLjwa+UQ==
"@fontsource/poppins@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/poppins/-/poppins-4.4.5.tgz#c75dcc453f7a9381de3f9b932366c2457887184c"
integrity sha512-pu675yvBGFhAHD8D7uj7C0NaHqDxD7mlgmLM8ziyYL4kYH79fil7rJ6U5X2oaKxoyRk3rxxb9k1fG0CCc7CquA==
"@fontsource/raleway@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/raleway/-/raleway-4.4.5.tgz#483871d82aa35e6a981b370b44dbae0b9d59ca6c"
integrity sha512-jUOBbqGDadtgjtxQe8YpaiRVy9WGIBUCfQoKlfyuBuI6BNHg1HdsBwL9qetru99uGTTy9L0fEwYoY9J8lhNXqw==
"@fontsource/roboto-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-4.4.5.tgz#63c54719a8d592d793632501a56d570572c17065"
integrity sha512-y9fbKH1eCCkcqtRGhevFlmR5schCRz1GiTT/VYz6z8Ij0WHW0tS26BhMyXhmSgEIiFt+254yS8teqP+cc7Xq0w==
"@fontsource/roboto@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.4.5.tgz#9ef1b9288ac4a97b97906da920c63c08dba97c89"
integrity sha512-e3s7BF8MDBLpkA2r6lnl5PMnllF0McVvpolK9h2zzvVJw2WPexP1GTgMKHISlglYZRij2lKg/ZjQcIUUYDsAXg==
"@fontsource/source-code-pro@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/source-code-pro/-/source-code-pro-4.4.5.tgz#927ac48da9a7de6054b44b2e1979abd908f00f47"
integrity sha512-PuoF6JHR+s3IaceWMZB02fHLIOehIAfYQUGHXBEyuPQ+BdonbbYpS+RIyduKsUYt7ajZURysbBFlg/N0cb/Jhw==
"@fontsource/space-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/space-mono/-/space-mono-4.4.5.tgz#2acc2f08c5060bc983bfbf14f8827770a5ce3c2a"
integrity sha512-QBU55UPj+JOzkwI/ezR1y1qBk+iJtYhjxBTHqXJMTrKCXIuWMD+NIXvVYHIJW8i6Aov+6kOksgVOqrU7rqOK8Q==
"@fontsource/ubuntu-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/ubuntu-mono/-/ubuntu-mono-4.4.5.tgz#2653f4eedf89f4efa3708b6cdc990c06f90b5faf"
integrity sha512-TvkybOBDDfZwrIE9imcoMMi4xhdZY+0Q1gmmdrGCG2xFxPM2/fuHXBcn6FKLvm5/regKKq93DO6JIPcH2G1r/w==
"@fontsource/ubuntu@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/ubuntu/-/ubuntu-4.4.5.tgz#4d386755a4f3f88bfbc6a9d517f33dcdf263f992"
integrity sha512-dK/WdBncYJAZrwhANBGYN7wKrB2+NsYX/QomNBkJuze9kel9uijz7cNQPYdUDogink/X8D4MF2PeLEhF565fSA==
"@hapi/address@^2.1.2":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"