feat(font): change opensans to inter font

static/web/fonts/inter/inter.css

@@ -1,197 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-Thin.woff2?v=3.19') format('woff2'), url('Inter-Thin.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-ThinItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ThinItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-ExtraLight.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraLight.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-ExtraLightItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraLightItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-Light.woff2?v=3.19') format('woff2'),
-    url('Inter-Light.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-LightItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-LightItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-Regular.woff2?v=3.19') format('woff2'),
-    url('Inter-Regular.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-Italic.woff2?v=3.19') format('woff2'),
-    url('Inter-Italic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-Medium.woff2?v=3.19') format('woff2'),
-    url('Inter-Medium.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-MediumItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-MediumItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-SemiBold.woff2?v=3.19') format('woff2'),
-    url('Inter-SemiBold.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-SemiBoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-SemiBoldItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-Bold.woff2?v=3.19') format('woff2'), url('Inter-Bold.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-BoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-BoldItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url('Inter-ExtraBold.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraBold.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url('Inter-ExtraBoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraBoldItalic.woff?v=3.19') format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url('Inter-Black.woff2?v=3.19') format('woff2'),
-    url('Inter-Black.woff?v=3.19') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url('Inter-BlackItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-BlackItalic.woff?v=3.19') format('woff');
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('Inter-roman.var.woff2?v=3.19') format('woff2');
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('Inter-italic.var.woff2?v=3.19') format('woff2');
-}
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url('Inter.var.woff2?v=3.19') format('woff2');
-}

web/package-lock.json

@@ -14,7 +14,7 @@
 				"@codemirror/lang-javascript": "^6.1.2",
 				"@codemirror/lang-markdown": "6.1.1",
 				"@codemirror/language-data": "6.2.1",
-				"@fontsource/open-sans": "4.5.14",
+				"@fontsource/inter": "^4.5.15",
 				"@fontsource/poppins": "4.5.10",
 				"@next/bundle-analyzer": "^13.1.1",
 				"@uiw/codemirror-theme-bbedit": "4.19.16",
@@ -2631,10 +2631,10 @@
 				"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
-		"node_modules/@fontsource/open-sans": {
-			"version": "4.5.14",
-			"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.14.tgz",
-			"integrity": "sha512-mBXIIETBlW8q/ocuUN0hyGow2iuf75hQEHQt8R/RJ/HcphVbLg8KB7pHYGbFGDqs75W+SWvTC7JkVeAjT65BuQ=="
+		"node_modules/@fontsource/inter": {
+			"version": "4.5.15",
+			"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+			"integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
 		},
 		"node_modules/@fontsource/poppins": {
 			"version": "4.5.10",

web/package.json

@@ -19,7 +19,7 @@
 		"@codemirror/lang-javascript": "^6.1.2",
 		"@codemirror/lang-markdown": "6.1.1",
 		"@codemirror/language-data": "6.2.1",
-		"@fontsource/open-sans": "4.5.14",
+		"@fontsource/inter": "^4.5.15",
 		"@fontsource/poppins": "4.5.10",
 		"@next/bundle-analyzer": "^13.1.1",
 		"@uiw/codemirror-theme-bbedit": "4.19.16",
@@ -123,4 +123,4 @@
 		"ts-jest": "^29.1.0",
 		"typescript": "4.9.5"
 	}
-}
+}

web/style-definitions/tokens/color/owncast-colors.yaml

@@ -90,7 +90,7 @@ color:
 font:
   owncast:
     body:
-      value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      value: "'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'"
     display:

web/styles/globals.scss

@@ -1,7 +1,7 @@
-@import '@fontsource/open-sans/300.css';
-@import '@fontsource/open-sans/400.css';
-@import '@fontsource/open-sans/600.css';
-@import '@fontsource/open-sans/800.css';
+@import '@fontsource/inter/300.css';
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/600.css';
+@import '@fontsource/inter/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
 @import './mixins.scss';

web/styles/theme.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sat, 01 Apr 2023 04:45:16 GMT
+// Generated on Sun, 23 Apr 2023 00:45:01 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory
@@ -131,5 +131,5 @@
 @color-owncast-palette-15: #eff1f4; // Lighter background
 @color-owncast-palette-error: #ff4b39; // Error
 @color-owncast-palette-warning: #ffc655; // Warning
-@font-owncast-body: '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-body: '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-display: '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';

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 01 Apr 2023 04:45:16 GMT
+ * Generated on Sun, 23 Apr 2023 00:45:01 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory
@@ -35,12 +35,8 @@
   --theme-rounded-corners: 9px; /* How much corners are rounded in places in the UI. */
   --theme-unknown-1: green; /* This should never be used and it means something is wrong. */
   --theme-unknown-2: red; /* This should never be used and it means something is wrong. */
-  --theme-text-body-font-family: var(
-    --font-owncast-body
-  ); /* The font family used for the body text. */
-  --theme-text-display-font-family: var(
-    --font-owncast-display
-  ); /* The font family used for the display/header text. */
+  --theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */
+  --theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */
   --theme-color-users-0: var(--color-owncast-user-0);
   --theme-color-users-1: var(--color-owncast-user-1);
   --theme-color-users-2: var(--color-owncast-user-2);
@@ -77,72 +73,38 @@
   --theme-color-warning: var(--theme-color-palette-warning); /* Warning */
   --theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */
-  --theme-color-components-primary-button-background: var(
-    --theme-color-action
-  ); /* Text link/secondary light text */
-  --theme-color-components-primary-button-background-disabled: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
+  --theme-color-components-primary-button-background: var(--theme-color-action); /* Text link/secondary light text */
+  --theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); /* Disabled background */
   --theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */
-  --theme-color-components-primary-button-text-disabled: var(
-    --theme-color-palette-10
-  ); /* Neutral gray light */
+  --theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */
   --theme-color-components-primary-button-border: var(--theme-color-action); /* Light secondary */
-  --theme-color-components-primary-button-border-disabled: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
-  --theme-color-components-secondary-button-background: var(
-    --theme-color-palette-4
-  ); /* Light secondary */
+  --theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
+  --theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */
   --theme-color-components-secondary-button-background-disabled: transparent;
-  --theme-color-components-secondary-button-text: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
-  --theme-color-components-secondary-button-text-disabled: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
-  --theme-color-components-secondary-button-border: var(
-    --theme-color-action
-  ); /* Text link/secondary light text */
-  --theme-color-components-secondary-button-border-disabled: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
+  --theme-color-components-secondary-button-text: var(--theme-color-action-disabled); /* Disabled background */
+  --theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); /* Disabled background */
+  --theme-color-components-secondary-button-border: var(--theme-color-action); /* Text link/secondary light text */
+  --theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
   --theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark primary */
   --theme-color-components-chat-text: var(--theme-color-palette-15); /* Lighter background */
-  --theme-color-components-content-background: var(
-    --theme-color-palette-15
-  ); /* Lighter background */
-  --theme-color-components-modal-header-background: var(
-    --theme-color-palette-1
-  ); /* Dark secondary */
+  --theme-color-components-content-background: var(--theme-color-palette-15); /* Lighter background */
+  --theme-color-components-modal-header-background: var(--theme-color-palette-1); /* Dark secondary */
   --theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */
-  --theme-color-components-modal-content-background: var(
-    --theme-color-palette-3
-  ); /* Light primary */
+  --theme-color-components-modal-content-background: var(--theme-color-palette-3); /* Light primary */
   --theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */
   --theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-menu-item-bg: transparent;
   --theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
   --theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
-  --theme-color-components-form-field-background: var(
-    --theme-color-palette-4
-  ); /* Light secondary */
-  --theme-color-components-form-field-placeholder: var(
-    --theme-color-action-disabled
-  ); /* Disabled background */
+  --theme-color-components-form-field-background: var(--theme-color-palette-4); /* Light secondary */
+  --theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); /* Disabled background */
   --theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */
-  --theme-color-components-video-live-indicator: var(
-    --theme-color-action
-  ); /* The Live dot indicator in the control bar of the video player */
-  --theme-color-components-video-status-bar-background: var(
-    --theme-color-palette-2
-  ); /* The background color of the video status bar */
-  --theme-color-components-video-status-bar-foreground: var(
-    --theme-color-palette-4
-  ); /* The foreground color of the video status bar */
+  --theme-color-components-video-live-indicator: var(--theme-color-action); /* The Live dot indicator in the control bar of the video player */
+  --theme-color-components-video-status-bar-background: var(--theme-color-palette-2); /* The background color of the video status bar */
+  --theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); /* The foreground color of the video status bar */
   --color-unknown: #7a5cf3;
   --color-unknown-2: #fffffe;
   --color-owncast-user-0: #ff717b;
@@ -171,10 +133,6 @@
   --color-owncast-palette-15: #eff1f4; /* Lighter background */
   --color-owncast-palette-error: #ff4b39; /* Error */
   --color-owncast-palette-warning: #ffc655; /* Warning */
-  --font-owncast-body: '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-display: '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';
+  --font-owncast-body: '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-display: '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';
 }