replace roboto font with inter and fix weight

This commit is contained in:
Ajay Bura 2023-10-07 09:49:38 +05:30
parent e64a16c681
commit 331cf92c9c
7 changed files with 36 additions and 17 deletions

6
package-lock.json generated
View file

@ -10,7 +10,6 @@
"license": "AGPL-3.0-only",
"dependencies": {
"@fontsource/inter": "4.5.14",
"@fontsource/roboto": "4.5.8",
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tanstack/react-virtual": "3.0.0-beta.54",
@ -875,11 +874,6 @@
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
"integrity": "sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q=="
},
"node_modules/@fontsource/roboto": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
"integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",

View file

@ -20,7 +20,6 @@
"license": "AGPL-3.0-only",
"dependencies": {
"@fontsource/inter": "4.5.14",
"@fontsource/roboto": "4.5.8",
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tanstack/react-virtual": "3.0.0-beta.54",

View file

@ -4,6 +4,7 @@ import appDispatcher from '../dispatcher';
import cons from './cons';
import { darkTheme, butterTheme, silverTheme } from '../../colors.css';
import { onLightFontWeight, onDarkFontWeight } from '../../config.css';
function getSettings() {
const settings = localStorage.getItem('settings');
@ -23,6 +24,7 @@ class Settings extends EventEmitter {
super();
this.themeClasses = [lightTheme, silverTheme, darkTheme, butterTheme];
this.fontWeightClasses = [onLightFontWeight, onLightFontWeight, onDarkFontWeight, onDarkFontWeight]
this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
this.themeIndex = this.getThemeIndex();
@ -59,6 +61,7 @@ class Settings extends EventEmitter {
this.themes.forEach((themeName, index) => {
if (themeName !== '') document.body.classList.remove(themeName);
document.body.classList.remove(this.themeClasses[index]);
document.body.classList.remove(this.fontWeightClasses[index]);
document.body.classList.remove('prism-light')
document.body.classList.remove('prism-dark')
});
@ -71,6 +74,7 @@ class Settings extends EventEmitter {
if (this.themes[themeIndex] === undefined) return
if (this.themes[themeIndex]) document.body.classList.add(this.themes[themeIndex]);
document.body.classList.add(this.themeClasses[themeIndex]);
document.body.classList.add(this.fontWeightClasses[themeIndex]);
document.body.classList.add(themeIndex < 2 ? 'prism-light' : 'prism-dark');
}

26
src/config.css.ts Normal file
View file

@ -0,0 +1,26 @@
import { createTheme } from '@vanilla-extract/css';
import { config } from 'folds';
export const onLightFontWeight = createTheme(config.fontWeight, {
W100: '100',
W200: '200',
W300: '300',
W400: '420',
W500: '500',
W600: '600',
W700: '700',
W800: '800',
W900: '900',
});
export const onDarkFontWeight = createTheme(config.fontWeight, {
W100: '100',
W200: '200',
W300: '300',
W400: '350',
W500: '450',
W600: '550',
W700: '650',
W800: '750',
W900: '850',
});

View file

@ -1,5 +0,0 @@
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/inter/variable.css';

View file

@ -8,7 +8,6 @@ import { configClass, varsClass } from 'folds';
enableMapSet();
import './font';
import './index.scss';
import settings from './client/state/settings';

View file

@ -158,7 +158,7 @@
/* font-weight */
--fw-light: 300;
--fw-normal: 400;
--fw-normal: 420;
--fw-medium: 500;
--fw-bold: 700;
@ -193,8 +193,8 @@
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
--font-emoji: 'Twemoji';
--font-primary: 'Roboto', var(--font-emoji), sans-serif;
--font-secondary: 'Roboto', var(--font-emoji), sans-serif;
--font-primary: 'InterVariable', var(--font-emoji), sans-serif;
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
}
.silver-theme {
@ -291,8 +291,10 @@
/* override normal font weight for dark mode */
--fw-normal: 350;
--fw-medium: 450;
--fw-bold: 550;
--font-secondary: 'InterVariable', 'Roboto', var(--font-emoji), sans-serif;
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
}
.butter-theme {