diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 5b87d5cb5..1f0507845 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -1,47 +1,14 @@
// Generic html styles used accross the App
// component specific styling should go in the component scss file
-@font-face {
- font-family: 'metropolis-bold';
- src: url('../../../static/font/metropolis/bold.eot');
- src: url('../../../static/font/metropolis/bold.eot?#iefix') format('embedded-opentype'),
- url('../../../static/font/metropolis/bold.woff') format('woff'),
- url('../../../static/font/metropolis/bold.ttf') format('truetype'),
- url('../../../static/font/metropolis/bold.svg#metropolis-bold') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'metropolis-semibold';
- src: url('../../../static/font/metropolis/semibold.eot');
- src: url('../../../static/font/metropolis/semibold.eot?#iefix') format('embedded-opentype'),
- url('../../../static/font/metropolis/semibold.woff') format('woff'),
- url('../../../static/font/metropolis/semibold.ttf') format('truetype'),
- url('../../../static/font/metropolis/semibold.svg#metropolis-semibold') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'metropolis-medium';
- src: url('../../../static/font/metropolis/medium.eot');
- src: url('../../../static/font/metropolis/medium.eot?#iefix') format('embedded-opentype'),
- url('../../../static/font/metropolis/medium.woff') format('woff'),
- url('../../../static/font/metropolis/medium.ttf') format('truetype'),
- url('../../../static/font/metropolis/medium.svg#metropolis-medium') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
html {
background-color: $lbry-white;
+ font-family: 'Inter UI', sans-serif;
height: 100%;
}
body {
color: $lbry-black;
- font-family: 'metropolis-medium';
font-size: 16px;
font-weight: 400;
height: 100%;
@@ -51,7 +18,8 @@ body {
code {
background-color: $lbry-gray-1;
- font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace;
+ font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
+ font-size: 1.5em;
}
// Without this buttons do not have the app font
@@ -89,8 +57,8 @@ input {
}
&.input-copyable {
- background-color: $lbry-gray-1;
- border: 1px dashed $lbry-gray-3;
+ background-color: rgba($lbry-gray-1, 0.3);
+ border: 1px dashed $lbry-gray-1;
color: $lbry-gray-5;
flex: 1;
padding: 10px 16px;
@@ -176,9 +144,7 @@ p:not(:first-of-type) {
}
}
-/*
- Page content
-*/
+// Page content
.content {
flex: 1;
overflow: auto;
@@ -263,13 +229,13 @@ p:not(:first-of-type) {
}
.credit-amount--large {
- font-family: 'metropolis-semibold';
font-size: 36px;
+ font-weight: 600;
}
.credit-amount--file-page {
border-radius: 5px;
- font-family: 'metropolis-bold';
+ font-weight: 700;
padding: 5px;
}
diff --git a/src/renderer/scss/_type.scss b/src/renderer/scss/_type.scss
new file mode 100644
index 000000000..c2b17b631
--- /dev/null
+++ b/src/renderer/scss/_type.scss
@@ -0,0 +1,130 @@
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/400.woff2') format('woff2'),
+ url('../../../static/font/inter/400.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/400i.woff2') format('woff2'),
+ url('../../../static/font/inter/400i.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/500.woff2') format('woff2'),
+ url('../../../static/font/inter/500.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/500i.woff2') format('woff2'),
+ url('../../../static/font/inter/500i.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/600.woff2') format('woff2'),
+ url('../../../static/font/inter/600.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 600;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/600i.woff2') format('woff2'),
+ url('../../../static/font/inter/600i.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/700.woff2') format('woff2'),
+ url('../../../static/font/inter/700.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/700i.woff2') format('woff2'),
+ url('../../../static/font/inter/700i.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/800.woff2') format('woff2'),
+ url('../../../static/font/inter/800.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 800;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/800i.woff2') format('woff2'),
+ url('../../../static/font/inter/800i.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/900.woff2') format('woff2'),
+ url('../../../static/font/inter/900.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 900;
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/900i.woff2') format('woff2'),
+ url('../../../static/font/inter/900i.woff') format('woff');
+}
+
+/*
+Single variable font.
+Note that you may want to do something like this to make sure you are serving
+constant fonts to older browsers:
+
+html {
+ font-family: "Inter UI", sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+ html {
+ font-family: "Inter UI var", sans-serif;
+ }
+}
+*/
+
+@font-face {
+ font-family: 'Inter UI Variable';
+ font-weight: 400 900; // safe weight range
+ src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'),
+ url('../../../static/font/inter/variable.woff2') format('woff2');
+}
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index 01cb860f6..170d90d75 100644
--- a/src/renderer/scss/all.scss
+++ b/src/renderer/scss/all.scss
@@ -1,6 +1,6 @@
@charset "utf-8";
-@import '~@lbry/color/lbry-color', 'reset', 'vars', 'gui', 'component/syntax-highlighter',
+@import '~@lbry/color/lbry-color', 'reset', 'type', 'vars', 'gui', 'component/syntax-highlighter',
'component/table', 'component/button', 'component/card', 'component/file-download',
'component/form-field', 'component/header', 'component/menu', 'component/tooltip',
'component/load-screen', 'component/channel-indicator', 'component/notice', 'component/modal',
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index bb05df408..bb88c0305 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -18,7 +18,6 @@
transition: all var(--animation-duration) var(--animation-style);
&:not(:disabled) {
- // box-shadow: var(--box-shadow-button);
}
&:hover {
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 622d420f8..662a0f1f7 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -149,7 +149,7 @@
margin: $spacing-vertical * 1/3 0;
padding: $spacing-vertical * 1/3;
- background-color: $lbry-red-1;
+ background-color: rgba($lbry-red-1, 0.3);
border-left: 2px solid $lbry-red-5;
color: $lbry-red-5;
}
@@ -164,9 +164,8 @@
}
}
-/*
- How cards are displayed in lists
-*/
+// How cards are displayed in lists
+
.card__list {
.card {
display: inline-block;
@@ -221,8 +220,8 @@
.card__meta {
color: $lbry-gray-5;
- font-family: 'metropolis-medium';
font-size: 14px;
+ font-weight: 500;
padding-top: $spacing-vertical * 2/3;
}
@@ -254,7 +253,7 @@
margin: $spacing-vertical * 1/3 0;
padding: $spacing-vertical * 1/3;
- background-color: $lbry-green-1;
+ background-color: rgba($lbry-green-1, 0.3);
border-left: 2px solid mix($lbry-green-3, $lbry-blue-3, 50%);
color: $lbry-green-3;
}
@@ -286,11 +285,10 @@
}
}
-/*
- .card-row is used on the discover page
- It is a list of cards that extend past the right edge of the screen
- There are left/right arrows to scroll the cards and view hidden content
-*/
+// .card-row is used on the discover page
+// It is a list of cards that extend past the right edge of the screen
+// There are left/right arrows to scroll the cards and view hidden content
+
.card-row {
padding-top: $spacing-vertical;
white-space: nowrap;
@@ -360,8 +358,8 @@
.card-row__title {
align-items: center;
display: flex;
- font-family: 'metropolis-semibold';
font-size: 18px;
+ font-weight: 600;
line-height: 24px;
@media only screen and (min-width: $medium-breakpoint) {
diff --git a/src/renderer/scss/component/_dat-gui.scss b/src/renderer/scss/component/_dat-gui.scss
index 3b688c3ed..347e0525e 100644
--- a/src/renderer/scss/component/_dat-gui.scss
+++ b/src/renderer/scss/component/_dat-gui.scss
@@ -1,6 +1,4 @@
-/*
-* dat.gui component
-*/
+// dat.gui component
.gui-container {
top: 0;
@@ -15,10 +13,8 @@
overflow: inherit;
}
- /*
- * Light theme:
- * https://github.com/liabru/dat-gui-light-theme
- */
+ // Light theme:
+ // https://github.com/liabru/dat-gui-light-theme
&.light {
.dg.main.taller-than-window .close-button {
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 625a73af4..56032f191 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -88,7 +88,7 @@
.form-field__label,
.form-field__error {
font-size: 12px;
- font-family: 'metropolis-medium';
+ font-weight: 500;
}
.form-field__error {
@@ -106,7 +106,7 @@
.form-field__prefix,
.form-field__postfix {
- font-family: 'metropolis-medium';
+ font-weight: 500;
&.form-field--align-center {
align-self: center;
@@ -129,8 +129,10 @@
background-color: $lbry-gray-3;
border-radius: 8px;
color: $lbry-black;
- font: normal 12px/30px 'metropolis-medium';
+ font-size: 12px;
+ font-weight: 500;
height: 30px;
+ line-height: 30px;
min-width: 60px;
&:disabled {
diff --git a/src/renderer/scss/component/_load-screen.scss b/src/renderer/scss/component/_load-screen.scss
index 6e0ae0666..0ef48db17 100644
--- a/src/renderer/scss/component/_load-screen.scss
+++ b/src/renderer/scss/component/_load-screen.scss
@@ -16,8 +16,8 @@
}
.load-screen__title {
- font-family: 'metropolis-bold';
font-size: 60px;
+ font-weight: 700;
line-height: 100px;
margin-left: 40px; // width of "beta" superscript
}
@@ -28,15 +28,14 @@
}
.load-screen__message {
- font-family: 'metropolis-semibold';
font-size: 16px;
+ font-weight: 600;
line-height: 20px;
margin-top: $spacing-vertical * 2/3;
text-align: center;
}
.load-screen__details {
- font-family: 12px 'metropolis-medium';
font-size: 12px;
line-height: 1;
max-width: 400px;
diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss
index 27ef01cfa..0cbf8c3ea 100644
--- a/src/renderer/scss/component/_markdown-editor.scss
+++ b/src/renderer/scss/component/_markdown-editor.scss
@@ -72,9 +72,8 @@
&.active,
&:hover {
- opacity: 1;
- // background-color: var(--button-bg); // "--button-bg" does not exist
border-color: transparent;
+ opacity: 1;
}
}
diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss
index 1bddfa824..845609efe 100644
--- a/src/renderer/scss/component/_markdown-preview.scss
+++ b/src/renderer/scss/component/_markdown-preview.scss
@@ -8,7 +8,7 @@
h4,
h5,
h6 {
- font-family: 'metropolis-semibold';
+ font-weight: 600;
margin: 16px 0;
}
diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss
index 734aa236c..02cc40a82 100644
--- a/src/renderer/scss/component/_modal.scss
+++ b/src/renderer/scss/component/_modal.scss
@@ -86,7 +86,7 @@
margin: 0 $spacing-vertical * 1/3;
&.btn--link {
- // So the text isn"t bigger than the text inside the button
+ // So the text is not bigger than the text inside the button
font-size: 0.8em;
}
}
diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss
index 0a396bc68..51d8d3154 100644
--- a/src/renderer/scss/component/_nav.scss
+++ b/src/renderer/scss/component/_nav.scss
@@ -34,18 +34,22 @@
}
.btn {
- font: normal 400 16px/36px 'metropolis-semibold';
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 36px;
&:hover {
color: $lbry-black;
}
@media only screen and (min-width: $medium-breakpoint) {
- font: normal 400 18px/40px 'metropolis-semibold';
+ font-size: 18px;
+ line-height: 40px;
}
@media only screen and (min-width: $large-breakpoint) {
- font: normal 400 21px/50px 'metropolis-semibold';
+ font-size: 21px;
+ line-height: 50px;
}
}
}
@@ -55,14 +59,19 @@
padding-left: $spacing-vertical * 2/3;
.btn {
- font: normal 400 14px/30px 'metropolis-medium';
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 30px;
@media only screen and (min-width: $medium-breakpoint) {
- font: normal 400 15px/30px 'metropolis-semibold';
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 30px;
}
@media only screen and (min-width: $large-breakpoint) {
- font: normal 400 18px/40px 'metropolis-medium';
+ font-size: 18px;
+ line-height: 40px;
}
}
}
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index ad964126f..daa5b3781 100644
--- a/src/renderer/scss/component/_search.scss
+++ b/src/renderer/scss/component/_search.scss
@@ -39,11 +39,11 @@
}
.wunderbar__menu {
- background-color: transparent; // !important
- border-radius: 0 0 3px 3px; // !important
+ background-color: transparent;
+ border-radius: 0 0 3px 3px;
max-width: 100px;
overflow-x: hidden;
- padding: 0; // !important
+ padding: 0;
}
.wunderbar__suggestion {
diff --git a/src/renderer/scss/component/_syntax-highlighter.scss b/src/renderer/scss/component/_syntax-highlighter.scss
index 0dc5ba4c0..65bb8b608 100644
--- a/src/renderer/scss/component/_syntax-highlighter.scss
+++ b/src/renderer/scss/component/_syntax-highlighter.scss
@@ -1,10 +1,8 @@
-/*!
- Name: one-dark 1.1.1
- Author: Török Ádám (http://github.com/Aerobird98)
- Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
-*/
+// Name: one-dark 1.1.1
+// Author: Török Ádám (http://github.com/Aerobird98)
+// Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
-/* basic */
+// basic
.CodeMirror {
&.cm-s-one-dark {
color: #abb2bf;
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index 1ca482b15..2a1f3c82e 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -23,13 +23,13 @@ table.table,
th {
border: none;
- font-family: 'metropolis-semibold';
+ font-weight: 600;
padding: $spacing-vertical * 2/3 $spacing-vertical * 1/3;
}
td {
color: $lbry-gray-5;
- font-family: 'metropolis-medium';
+ font-weight: 500;
padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3;
.btn:not(.btn--link) {
@@ -47,17 +47,17 @@ table.table,
}
thead {
- border-bottom: 1px solid $lbry-gray-1;
+ border-bottom: 1px solid rgba($lbry-gray-1, 0.7);
color: $lbry-black;
}
tbody {
tr {
- border-bottom: 1px solid $lbry-gray-1; // "--table-item-border" does not exist
+ border-bottom: 1px solid rgba($lbry-gray-1, 0.3);
padding: 8px 0;
&:nth-child(even) {
- background-color: $lbry-gray-1;
+ background-color: rgba($lbry-gray-1, 0.3);
}
&:nth-child(odd) {
@@ -79,7 +79,7 @@ table {
&.table--help {
td:nth-of-type(1) {
color: $lbry-black;
- font-family: 'metropolis-semibold';
+ font-weight: 600;
min-width: 130px;
}
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index c9a475f62..ccf9567d0 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -24,8 +24,8 @@
background-color: $lbry-gray-5;
border-radius: 8px;
color: $lbry-white;
- font-family: 'metropolis-medium';
font-size: 12px;
+ font-weight: 500;
padding: $spacing-vertical * 1/3;
position: absolute;
text-align: center;
diff --git a/static/font/inter/400.woff b/static/font/inter/400.woff
new file mode 100644
index 000000000..913c72a56
Binary files /dev/null and b/static/font/inter/400.woff differ
diff --git a/static/font/inter/400.woff2 b/static/font/inter/400.woff2
new file mode 100644
index 000000000..cf1b2f9e9
Binary files /dev/null and b/static/font/inter/400.woff2 differ
diff --git a/static/font/inter/400i.woff b/static/font/inter/400i.woff
new file mode 100644
index 000000000..51524eabd
Binary files /dev/null and b/static/font/inter/400i.woff differ
diff --git a/static/font/inter/400i.woff2 b/static/font/inter/400i.woff2
new file mode 100644
index 000000000..95bb2aeef
Binary files /dev/null and b/static/font/inter/400i.woff2 differ
diff --git a/static/font/inter/500.woff b/static/font/inter/500.woff
new file mode 100644
index 000000000..e58faef04
Binary files /dev/null and b/static/font/inter/500.woff differ
diff --git a/static/font/inter/500.woff2 b/static/font/inter/500.woff2
new file mode 100644
index 000000000..bf044e255
Binary files /dev/null and b/static/font/inter/500.woff2 differ
diff --git a/static/font/inter/500i.woff b/static/font/inter/500i.woff
new file mode 100644
index 000000000..8f4cbc665
Binary files /dev/null and b/static/font/inter/500i.woff differ
diff --git a/static/font/inter/500i.woff2 b/static/font/inter/500i.woff2
new file mode 100644
index 000000000..94fb39bc3
Binary files /dev/null and b/static/font/inter/500i.woff2 differ
diff --git a/static/font/inter/600.woff b/static/font/inter/600.woff
new file mode 100644
index 000000000..4134abc3a
Binary files /dev/null and b/static/font/inter/600.woff differ
diff --git a/static/font/inter/600.woff2 b/static/font/inter/600.woff2
new file mode 100644
index 000000000..f6de6b863
Binary files /dev/null and b/static/font/inter/600.woff2 differ
diff --git a/static/font/inter/600i.woff b/static/font/inter/600i.woff
new file mode 100644
index 000000000..d1375d3fa
Binary files /dev/null and b/static/font/inter/600i.woff differ
diff --git a/static/font/inter/600i.woff2 b/static/font/inter/600i.woff2
new file mode 100644
index 000000000..cb3585b7d
Binary files /dev/null and b/static/font/inter/600i.woff2 differ
diff --git a/static/font/inter/700.woff b/static/font/inter/700.woff
new file mode 100644
index 000000000..10e1abcff
Binary files /dev/null and b/static/font/inter/700.woff differ
diff --git a/static/font/inter/700.woff2 b/static/font/inter/700.woff2
new file mode 100644
index 000000000..2a49c02db
Binary files /dev/null and b/static/font/inter/700.woff2 differ
diff --git a/static/font/inter/700i.woff b/static/font/inter/700i.woff
new file mode 100644
index 000000000..c1433f026
Binary files /dev/null and b/static/font/inter/700i.woff differ
diff --git a/static/font/inter/700i.woff2 b/static/font/inter/700i.woff2
new file mode 100644
index 000000000..f38628a40
Binary files /dev/null and b/static/font/inter/700i.woff2 differ
diff --git a/static/font/inter/800.woff b/static/font/inter/800.woff
new file mode 100644
index 000000000..4a4325601
Binary files /dev/null and b/static/font/inter/800.woff differ
diff --git a/static/font/inter/800.woff2 b/static/font/inter/800.woff2
new file mode 100644
index 000000000..d0ca0b8f9
Binary files /dev/null and b/static/font/inter/800.woff2 differ
diff --git a/static/font/inter/800i.woff b/static/font/inter/800i.woff
new file mode 100644
index 000000000..a0497079d
Binary files /dev/null and b/static/font/inter/800i.woff differ
diff --git a/static/font/inter/800i.woff2 b/static/font/inter/800i.woff2
new file mode 100644
index 000000000..112410afa
Binary files /dev/null and b/static/font/inter/800i.woff2 differ
diff --git a/static/font/inter/900.woff b/static/font/inter/900.woff
new file mode 100644
index 000000000..0ba580488
Binary files /dev/null and b/static/font/inter/900.woff differ
diff --git a/static/font/inter/900.woff2 b/static/font/inter/900.woff2
new file mode 100644
index 000000000..89f8071ee
Binary files /dev/null and b/static/font/inter/900.woff2 differ
diff --git a/static/font/inter/900i.woff b/static/font/inter/900i.woff
new file mode 100644
index 000000000..f7f936d04
Binary files /dev/null and b/static/font/inter/900i.woff differ
diff --git a/static/font/inter/900i.woff2 b/static/font/inter/900i.woff2
new file mode 100644
index 000000000..8a3dcaaaa
Binary files /dev/null and b/static/font/inter/900i.woff2 differ
diff --git a/static/font/inter/inter-ui.css b/static/font/inter/inter-ui.css
new file mode 100644
index 000000000..ba7c32640
--- /dev/null
+++ b/static/font/inter/inter-ui.css
@@ -0,0 +1,129 @@
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 400;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-Regular.woff2") format("woff2"),
+ url("Inter-UI-Regular.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 400;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-Italic.woff2") format("woff2"),
+ url("Inter-UI-Italic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 500;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-Medium.woff2") format("woff2"),
+ url("Inter-UI-Medium.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 500;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-MediumItalic.woff2") format("woff2"),
+ url("Inter-UI-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 600;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-SemiBold.woff2") format("woff2"),
+ url("Inter-UI-SemiBold.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 600;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-SemiBoldItalic.woff2") format("woff2"),
+ url("Inter-UI-SemiBoldItalic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 700;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-Bold.woff2") format("woff2"),
+ url("Inter-UI-Bold.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 700;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-BoldItalic.woff2") format("woff2"),
+ url("Inter-UI-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 800;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-ExtraBold.woff2") format("woff2"),
+ url("Inter-UI-ExtraBold.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 800;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"),
+ url("Inter-UI-ExtraBoldItalic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: normal;
+ font-weight: 900;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-Black.woff2") format("woff2"),
+ url("Inter-UI-Black.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Inter UI";
+ font-style: italic;
+ font-weight: 900;
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI-BlackItalic.woff2") format("woff2"),
+ url("Inter-UI-BlackItalic.woff") format("woff");
+}
+
+/*
+Single variable font.
+Note that you may want to do something like this to make sure you"re serving
+constant fonts to older browsers:
+
+html {
+ font-family: "Inter UI", sans-serif;
+}
+@supports (font-variation-settings: normal) {
+ html {
+ font-family: "Inter UI var", sans-serif;
+ }
+}
+
+*/
+@font-face {
+ font-family: "Inter UI var";
+ font-weight: 400 900; /* safe weight range */
+ src: url("Inter-UI.var.woff2") format("woff2-variations"),
+ url("Inter-UI.var.woff2") format("woff2");
+}
diff --git a/static/font/inter/variable.woff2 b/static/font/inter/variable.woff2
new file mode 100644
index 000000000..fe1920cc1
Binary files /dev/null and b/static/font/inter/variable.woff2 differ
diff --git a/static/font/metropolis/bold.eot b/static/font/metropolis/bold.eot
deleted file mode 100644
index 48ded273f..000000000
Binary files a/static/font/metropolis/bold.eot and /dev/null differ
diff --git a/static/font/metropolis/bold.otf b/static/font/metropolis/bold.otf
deleted file mode 100644
index 40a8a1682..000000000
Binary files a/static/font/metropolis/bold.otf and /dev/null differ
diff --git a/static/font/metropolis/bold.svg b/static/font/metropolis/bold.svg
deleted file mode 100644
index 92af03602..000000000
--- a/static/font/metropolis/bold.svg
+++ /dev/null
@@ -1,875 +0,0 @@
-
-
-
diff --git a/static/font/metropolis/bold.ttf b/static/font/metropolis/bold.ttf
deleted file mode 100644
index f67993325..000000000
Binary files a/static/font/metropolis/bold.ttf and /dev/null differ
diff --git a/static/font/metropolis/bold.woff b/static/font/metropolis/bold.woff
deleted file mode 100644
index f5508b97c..000000000
Binary files a/static/font/metropolis/bold.woff and /dev/null differ
diff --git a/static/font/metropolis/medium.eot b/static/font/metropolis/medium.eot
deleted file mode 100644
index b8d6eb90e..000000000
Binary files a/static/font/metropolis/medium.eot and /dev/null differ
diff --git a/static/font/metropolis/medium.otf b/static/font/metropolis/medium.otf
deleted file mode 100644
index aee4d98c4..000000000
Binary files a/static/font/metropolis/medium.otf and /dev/null differ
diff --git a/static/font/metropolis/medium.svg b/static/font/metropolis/medium.svg
deleted file mode 100644
index 42ae97670..000000000
--- a/static/font/metropolis/medium.svg
+++ /dev/null
@@ -1,876 +0,0 @@
-
-
-
diff --git a/static/font/metropolis/medium.ttf b/static/font/metropolis/medium.ttf
deleted file mode 100644
index 1bb9493cd..000000000
Binary files a/static/font/metropolis/medium.ttf and /dev/null differ
diff --git a/static/font/metropolis/medium.woff b/static/font/metropolis/medium.woff
deleted file mode 100644
index 6e8b41eed..000000000
Binary files a/static/font/metropolis/medium.woff and /dev/null differ
diff --git a/static/font/metropolis/semibold.eot b/static/font/metropolis/semibold.eot
deleted file mode 100644
index 8bb29729f..000000000
Binary files a/static/font/metropolis/semibold.eot and /dev/null differ
diff --git a/static/font/metropolis/semibold.otf b/static/font/metropolis/semibold.otf
deleted file mode 100644
index 2fb1be69d..000000000
Binary files a/static/font/metropolis/semibold.otf and /dev/null differ
diff --git a/static/font/metropolis/semibold.svg b/static/font/metropolis/semibold.svg
deleted file mode 100644
index 5181438f1..000000000
--- a/static/font/metropolis/semibold.svg
+++ /dev/null
@@ -1,875 +0,0 @@
-
-
-
diff --git a/static/font/metropolis/semibold.ttf b/static/font/metropolis/semibold.ttf
deleted file mode 100644
index febf889f3..000000000
Binary files a/static/font/metropolis/semibold.ttf and /dev/null differ
diff --git a/static/font/metropolis/semibold.woff b/static/font/metropolis/semibold.woff
deleted file mode 100644
index 2f50d16ad..000000000
Binary files a/static/font/metropolis/semibold.woff and /dev/null differ
diff --git a/static/themes/dark.css b/static/themes/dark.css
index e09860a49..0c2fccd77 100644
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -1,7 +1,7 @@
:root {
/* Colors */
- --color-divider: #53637C;;
+ --color-divider: #53637C;
--color-canvas: transparent;
--color-help: #8696AF;
--color-download: rgba(255, 255, 255, 0.75);