LogalDeveloper/owncast
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Gabe Kangas
2022-06-24 16:27:45 -07:00
parent 5d65b4b3b1
commit b7df2949e4
8 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

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

22
web/package-lock.json generated
View File

@@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "4.7.0", "@ant-design/icons": "4.7.0",
"@emoji-mart/data": "^1.0.1", "@emoji-mart/data": "^1.0.1",
"@fontsource/open-sans": "^4.5.10",
"@fontsource/poppins": "^4.5.8",
"@storybook/react": "^6.4.22", "@storybook/react": "^6.4.22",
"@xstate/react": "^3.0.0", "@xstate/react": "^3.0.0",
"antd": "^4.20.4", "antd": "^4.20.4",
@@ -2265,6 +2267,16 @@
"react": "^16.14.0 || ^17.0.0" "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": { "node_modules/@gar/promisify": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -34235,6 +34247,16 @@
"@lit-labs/react": "^1.0.2" "@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": { "@gar/promisify": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

2
web/package.json
View File

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

2
web/style-definitions/tokens/color/default-theme.yaml
View File

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

6
web/style-definitions/tokens/color/owncast-colors.yaml
View File

@@ -78,7 +78,11 @@ color:
font: font:
owncast: owncast:
family: 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', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'" 'Segoe UI Symbol', 'Noto Color Emoji'"

8
web/styles/theme.less
View File

@@ -1,6 +1,6 @@
// Do not edit directly // 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: var(--theme-text-color);
@text-color-secondary: var(--theme-text-color-secondary); @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: #d0d5dd; // The color of the text in the application.
@theme-text-color-secondary: #667085; @theme-text-color-secondary: #667085;
@theme-link-color: #9e77ed; @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: #202232; // The main background color of the page.
@theme-background-secondary: #282a30; // A secondary background color used in sections and controls. @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. @theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@@ -59,7 +60,8 @@
@color-owncast-logo-blue: #2086e1; @color-owncast-logo-blue: #2086e1;
@color-owncast-background: #202232; @color-owncast-background: #202232;
@color-owncast-background-secondary: #282a30; @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: #7871ff;
@owncast-purple-25: rgba(120, 113, 255, 0.25); @owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5); @owncast-purple-50: rgba(120, 113, 255, 0.5);

8
web/styles/variables.css
View File

@@ -1,6 +1,6 @@
/** /**
* Do not edit directly * 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 { :root {
@@ -23,7 +23,8 @@
--theme-text-color: #d0d5dd; /* The color of the text in the application. */ --theme-text-color: #d0d5dd; /* The color of the text in the application. */
--theme-text-color-secondary: #667085; --theme-text-color-secondary: #667085;
--theme-link-color: #9e77ed; --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: #202232; /* The main background color of the page. */
--theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */ --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. */ --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
@@ -61,7 +62,8 @@
--color-owncast-logo-blue: #2086e1; --color-owncast-logo-blue: #2086e1;
--color-owncast-background: #202232; --color-owncast-background: #202232;
--color-owncast-background-secondary: #282a30; --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: #7871ff;
--owncast-purple-25: rgba(120, 113, 255, 0.25); --owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5); --owncast-purple-50: rgba(120, 113, 255, 0.5);

7
web/styles/variables.scss
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. // See theme.less for specific Ant Design overrides.
:root { :root {
@@ -90,7 +91,5 @@
--popover-base-color: var(--gray); --popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium); --tooltip-base-color: var(--gray-medium);
--font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, --font-family: var(--theme-font-family);
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
} }