mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
replace roboto font with inter and fix weight
This commit is contained in:
parent
e64a16c681
commit
331cf92c9c
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
26
src/config.css.ts
Normal 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',
|
||||
});
|
|
@ -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';
|
|
@ -8,7 +8,6 @@ import { configClass, varsClass } from 'folds';
|
|||
|
||||
enableMapSet();
|
||||
|
||||
import './font';
|
||||
import './index.scss';
|
||||
|
||||
import settings from './client/state/settings';
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue