Remove interfont and use Open Sans + Poppins fonts instead. #1625

This commit is contained in:
Gabe Kangas 2022-06-24 16:27:45 -07:00
parent 5d65b4b3b1
commit b7df2949e4
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
8 changed files with 46 additions and 12 deletions

View file

@ -6,8 +6,9 @@
margin: 8px 5px;
border-left: 2px solid;
.user {
font-weight: bold;
font: var(--theme-header-font-family);
color: var(--color-owncast-grey-100);
font-weight: bold;
}
.message {
color: var(--color-owncast-grey-100);

22
web/package-lock.json generated
View file

@ -10,6 +10,8 @@
"dependencies": {
"@ant-design/icons": "4.7.0",
"@emoji-mart/data": "^1.0.1",
"@fontsource/open-sans": "^4.5.10",
"@fontsource/poppins": "^4.5.8",
"@storybook/react": "^6.4.22",
"@xstate/react": "^3.0.0",
"antd": "^4.20.4",
@ -2265,6 +2267,16 @@
"react": "^16.14.0 || ^17.0.0"
}
},
"node_modules/@fontsource/open-sans": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz",
"integrity": "sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA=="
},
"node_modules/@fontsource/poppins": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.8.tgz",
"integrity": "sha512-HE9yLDxYJEcxooVrYvvEhtyxaYU32hQIx1+npKegVefceE0l0zi0ePqKWWxYxkFpyy6WuZSQ+9rai3INnYKEJA=="
},
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@ -34235,6 +34247,16 @@
"@lit-labs/react": "^1.0.2"
}
},
"@fontsource/open-sans": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz",
"integrity": "sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA=="
},
"@fontsource/poppins": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.8.tgz",
"integrity": "sha512-HE9yLDxYJEcxooVrYvvEhtyxaYU32hQIx1+npKegVefceE0l0zi0ePqKWWxYxkFpyy6WuZSQ+9rai3INnYKEJA=="
},
"@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

View file

@ -14,6 +14,8 @@
"dependencies": {
"@ant-design/icons": "4.7.0",
"@emoji-mart/data": "^1.0.1",
"@fontsource/open-sans": "^4.5.10",
"@fontsource/poppins": "^4.5.8",
"@storybook/react": "^6.4.22",
"@xstate/react": "^3.0.0",
"antd": "^4.20.4",

View file

@ -16,6 +16,8 @@ theme:
value: '{color.owncast.purple.500.value}'
font-family:
value: '{font.owncast.family.value}'
header-font-family:
value: '{font.owncast.header-family.value}'
background:
value: '{color.owncast.background.value}'
comment: 'The main background color of the page.'

View file

@ -78,7 +78,11 @@ color:
font:
owncast:
family:
value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'"
header-family:
value: "'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'"

View file

@ -1,6 +1,6 @@
// Do not edit directly
// Generated on Fri, 27 May 2022 21:42:18 GMT
// Generated on Fri, 24 Jun 2022 23:11:54 GMT
@text-color: var(--theme-text-color);
@text-color-secondary: var(--theme-text-color-secondary);
@ -21,7 +21,8 @@
@theme-text-color: #d0d5dd; // The color of the text in the application.
@theme-text-color-secondary: #667085;
@theme-link-color: #9e77ed;
@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-background: #202232; // The main background color of the page.
@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@ -59,7 +60,8 @@
@color-owncast-logo-blue: #2086e1;
@color-owncast-background: #202232;
@color-owncast-background-secondary: #282a30;
@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@owncast-purple: #7871ff;
@owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5);

View file

@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Fri, 27 May 2022 21:42:18 GMT
* Generated on Fri, 24 Jun 2022 23:11:54 GMT
*/
:root {
@ -23,7 +23,8 @@
--theme-text-color: #d0d5dd; /* The color of the text in the application. */
--theme-text-color-secondary: #667085;
--theme-link-color: #9e77ed;
--theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background: #202232; /* The main background color of the page. */
--theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
@ -61,7 +62,8 @@
--color-owncast-logo-blue: #2086e1;
--color-owncast-background: #202232;
--color-owncast-background-secondary: #282a30;
--font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--owncast-purple: #7871ff;
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);

View file

@ -1,4 +1,5 @@
@import url('../public/fonts/inter/inter.css');
@import "@fontsource/open-sans";
@import "@fontsource/poppins";
// See theme.less for specific Ant Design overrides.
:root {
@ -90,7 +91,5 @@
--popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium);
--font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-family: var(--theme-font-family);
}