From a54790ec64dacc9853be8aee21a8558a83093cd4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 24 Jul 2020 13:17:43 -0400
Subject: [PATCH] bring in styles from @lbry/components

---
 package.json                       |   1 -
 ui/scss/all.scss                   |   8 +-
 ui/scss/component/_badge.scss      |  46 +++++
 ui/scss/component/_button.scss     | 101 ++++++++++-
 ui/scss/component/_form-field.scss | 276 ++++++++++++++++++++++++++++-
 ui/scss/component/_table.scss      |  83 +++++++++
 ui/scss/init/_color.scss           |  66 +++++++
 ui/scss/init/_gui.scss             |  10 ++
 ui/scss/init/_mixins.scss          | 206 +++++++++++++++++++++
 ui/scss/init/_reset.scss           | 245 +++++++++++++++++++++++++
 ui/scss/init/_vars.scss            |  36 ++++
 yarn.lock                          |   5 -
 12 files changed, 1064 insertions(+), 19 deletions(-)
 create mode 100644 ui/scss/component/_badge.scss
 create mode 100644 ui/scss/init/_color.scss
 create mode 100644 ui/scss/init/_reset.scss

diff --git a/package.json b/package.json
index 41cc03452..24f48a3ef 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,6 @@
     "@datapunt/matomo-tracker-js": "^0.1.4",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.2.5",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 8ff9863a0..60aa0ede8 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -1,13 +1,15 @@
 @charset "utf-8";
 
-@import '@lbry/components/sass/index.scss';
-@import 'themes/light.scss';
-@import 'themes/dark.scss';
+@import 'init/reset';
 @import 'init/vars';
 @import 'init/mixins';
 @import 'init/gui';
+@import 'init/color';
+@import 'themes/light.scss';
+@import 'themes/dark.scss';
 @import 'component/ads';
 @import 'component/animation';
+@import 'component/badge';
 @import 'component/button';
 @import 'component/card';
 @import 'component/channel';
diff --git a/ui/scss/component/_badge.scss b/ui/scss/component/_badge.scss
new file mode 100644
index 000000000..53c92d5d8
--- /dev/null
+++ b/ui/scss/component/_badge.scss
@@ -0,0 +1,46 @@
+.badge {
+  height: var(--height-badge);
+  border-radius: var(--border-radius);
+  font-size: var(--font-small);
+  padding: var(--spacing-xs) var(--spacing-xs);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  align-items: center;
+}
+
+.badge--tag {
+  @extend .badge;
+  background-color: var(--color-tag-bg);
+  color: var(--color-tag);
+
+  &:hover {
+    background-color: var(--color-tag-bg-hover);
+    color: var(--color-tag-hover);
+  }
+}
+
+.badge--tag-mature {
+  @extend .badge;
+  background-color: var(--color-tertiary-alt);
+  color: var(--color-tertiary);
+}
+
+.badge--cost {
+  @extend .badge;
+  background-color: var(--color-cost);
+  color: var(--color-black);
+  line-height: 1;
+}
+
+.badge--free {
+  @extend .badge;
+  background-color: var(--color-secondary-alt);
+  color: var(--color-secondary);
+}
+
+.badge--alert {
+  @extend .badge;
+  background-color: var(--color-danger-alt);
+  color: var(--color-danger);
+}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 9ac42dc2d..3390e43e1 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -1,21 +1,106 @@
-.button--primary,
-.button--secondary,
-.button--alt {
-  @media (max-width: $breakpoint-small) {
-    font-size: var(--font-small);
-  }
+.button {
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .button--primary,
 .button--secondary,
 .button--alt,
 .button--link {
+  border-radius: var(--border-radius);
+
   &:focus {
     @include focus;
     z-index: 2; // Ensure focus box-shadow is always visible on every button side
   }
 }
 
+.button--primary,
+.button--secondary,
+.button--alt {
+  height: var(--height-button);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-s) var(--spacing-m);
+  line-height: 1.2;
+  font-weight: var(--font-weight-bold);
+
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
+}
+
+.button--primary {
+  background-color: var(--color-button-primary-bg);
+  color: var(--color-button-primary-text);
+
+  &:hover {
+    color: var(--color-button-primary-hover-text);
+    background-color: var(--color-button-primary-bg-hover);
+  }
+}
+
+.button--secondary {
+  background-color: var(--color-button-secondary-bg);
+  color: var(--color-button-secondary-text);
+
+  &:hover {
+    background-color: var(--color-button-secondary-bg-hover);
+  }
+}
+
+.button--alt {
+  background-color: var(--color-button-alt-bg);
+  color: var(--color-button-alt-text);
+
+  &:hover {
+    background-color: var(--color-button-alt-bg-hover);
+  }
+}
+
+.button--icon {
+  width: 5rem;
+  height: 5rem;
+  background-repeat: no-repeat;
+  background-size: 50%;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+  background-color: var(--color-primary);
+
+  &:hover {
+    background-color: var(--color-button-primary-bg-hover);
+  }
+
+  &.button--play {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
+    background-position: calc(50% + 0.1rem) center;
+  }
+
+  &.button--view {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");
+    background-position: center calc(50% + 0.1rem);
+  }
+}
+
+.button--link {
+  color: var(--color-link);
+  transition: color 0.2s;
+  word-break: break-all;
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-link-hover);
+  }
+}
+
+.button--danger {
+  @extend .button--link;
+  color: var(--color-error);
+}
+
 .button--uri-indicator {
   @extend .button--link;
   color: var(--color-text-subtitle);
@@ -72,6 +157,10 @@
   }
 }
 
+.button--disabled {
+  opacity: 0.5;
+}
+
 .button__content {
   display: flex;
   align-items: center;
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index ed9ef6833..9f6fa708b 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -1,7 +1,275 @@
-// lbry/components overrides and minor styles
-// Some items have very specific styling
-// This is because many styles inside `lbry/components/sass/form/` are very specific
-// As styles become hardened here, they _should_ slowly move over to that repo
+@import 'init/mixins';
+
+input,
+textarea,
+select {
+  height: var(--height-input);
+  border-radius: var(--border-radius);
+  border: 1px solid;
+  color: var(--color-input);
+  border-color: var(--color-input-border);
+  background-color: var(--color-input-bg);
+  padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+
+  &:focus {
+    @include focus;
+  }
+
+  &::placeholder {
+    color: var(--color-input-placeholder);
+    opacity: 0.4;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+
+    & + label {
+      opacity: 0.4;
+    }
+  }
+
+  &[type='range'] {
+    height: auto;
+    height: 0.5rem;
+    background-color: var(--color-secondary);
+  }
+}
+
+checkbox-element,
+radio-element,
+select {
+  cursor: pointer;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+  background-position: 99% center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-s);
+}
+
+fieldset-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  &.fieldset-group--smushed {
+    fieldset-section + fieldset-section {
+      margin-top: 0;
+    }
+  }
+}
+
+fieldset-section,
+fieldset-group,
+form,
+.checkbox,
+.radio,
+.form-field--SimpleMDE,
+.form-field__help {
+  + fieldset-section,
+  + fieldset-group,
+  + form,
+  + .checkbox,
+  + .radio,
+  + .form-field--SimpleMDE {
+    margin-top: var(--spacing-l);
+  }
+
+  + .form-field__help {
+    margin-top: var(--spacing-s);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  input,
+  select {
+    width: 100%;
+  }
+}
+
+fieldset-section,
+.checkbox,
+.radio {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  font-size: var(--font-small);
+  color: var(--color-input-label);
+  display: inline-block;
+  margin-bottom: var(--spacing-xxs);
+}
+
+input-submit {
+  display: flex;
+
+  & > *:first-child,
+  & > *:nth-child(2) {
+    margin: 0;
+  }
+
+  & > *:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+
+  & > *:nth-child(2) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border: 1px solid var(--color-border);
+  }
+}
+
+.checkbox,
+.radio {
+  position: relative;
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    height: var(--height-checkbox);
+    width: var(--height-checkbox);
+    position: absolute;
+    border: none;
+    left: 0;
+    padding: 0;
+    background-color: transparent;
+
+    &:disabled + label {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  label {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    font-size: var(--font-base);
+    padding-left: calc(var(--height-checkbox) + var(--spacing-s));
+    min-height: var(--height-checkbox);
+
+    &::before {
+      background-color: var(--color-input-toggle-bg);
+    }
+
+    &:hover {
+      &::before {
+        background-color: var(--color-input-toggle-bg-hover);
+      }
+    }
+  }
+
+  label::before,
+  label::after {
+    position: absolute;
+    content: '';
+  }
+
+  // Hide the checkmark by default
+  input[type='checkbox'] + label::after,
+  input[type='radio'] + label::after {
+    content: none;
+  }
+
+  // Unhide on the checked state
+  input[type='checkbox']:checked + label::after,
+  input[type='radio']:checked + label::after {
+    content: '';
+  }
+
+  input[type='checkbox']:focus + label::before,
+  input[type='radio']:focus + label::before {
+    @include focus;
+  }
+}
+
+.checkbox {
+  // Outer box of the fake checkbox
+  label::before {
+    height: var(--height-checkbox);
+    width: var(--height-checkbox);
+    border: 1px solid var(--color-input-border);
+    border-radius: var(--border-radius);
+    left: 0px;
+    top: -1px;
+  }
+
+  // Checkmark of the fake checkbox
+  label::after {
+    height: 6px;
+    width: 12px;
+    border-left: 2px solid;
+    border-bottom: 2px solid;
+    border-color: var(--color-input-toggle);
+    transform: rotate(-45deg);
+    left: 6px;
+    top: 6px;
+  }
+}
+
+.radio {
+  input[type='radio'] {
+    border-radius: 50%;
+  }
+
+  // Outer box of the fake radio
+  label::before {
+    height: var(--height-radio);
+    width: var(--height-radio);
+    border: 1px solid var(--color-input-border);
+    border-radius: calc(var(--height-radio) * 0.5);
+    left: 0px;
+    top: -1px;
+  }
+
+  // Checkmark of the fake radio
+  label::after {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: var(--color-secondary);
+    left: 6px;
+    top: 5px;
+  }
+}
+
+.range__label {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  > * {
+    width: 33%;
+    text-align: center;
+
+    &:first-of-type {
+      text-align: left;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+}
+
+.fieldset-group {
+  @extend fieldset-group;
+}
+
+.fieldset-section {
+  @extend fieldset-section;
+}
+
+.input-submit {
+  @extend input-submit;
+}
 
 input-submit {
   align-items: center;
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index c40da55a4..32f99b293 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -1,3 +1,86 @@
+.table {
+  width: 100%;
+  position: relative;
+
+  th,
+  td {
+    overflow: hidden;
+
+    &:first-of-type {
+      padding-left: var(--spacing-l);
+    }
+
+    &:last-of-type {
+      padding-right: var(--spacing-l);
+    }
+  }
+
+  thead {
+    cursor: default;
+    position: relative;
+
+    th {
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  tr {
+    &:not(:last-of-type) {
+      td {
+        border-bottom: 1px solid var(--color-border);
+      }
+    }
+
+    &:nth-child(2n) {
+      background-color: var(--color-table-highlight);
+    }
+  }
+
+  th,
+  td {
+    padding: 0.5rem 1rem;
+  }
+}
+
+th {
+  text-align: left;
+}
+
+.table--fixed {
+  table-layout: fixed;
+}
+
+.table--condensed {
+  td,
+  th {
+    padding: 0.5rem;
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+
+  tr {
+    &:nth-child(2n) {
+      background-color: transparent;
+    }
+  }
+}
+
+.table__item-label {
+  font-size: var(--font-multiplier-small);
+  font-weight: 300;
+  color: var(--color-text-subtitle);
+}
+
+.table__item--align-right {
+  text-align: right;
+}
+
 .table__wrapper {
   overflow-x: auto;
 }
diff --git a/ui/scss/init/_color.scss b/ui/scss/init/_color.scss
new file mode 100644
index 000000000..0435a8d04
--- /dev/null
+++ b/ui/scss/init/_color.scss
@@ -0,0 +1,66 @@
+:root {
+  // Generic colors
+  --color-primary: #257761;
+  --color-primary-alt: #e4f4ef;
+  --color-primary-alt-2: #4b8576;
+  --color-secondary: #295284;
+  --color-secondary-alt: #d9eaff;
+  --color-tertiary: #552470;
+  --color-tertiary-alt: #f7e8ff;
+  --color-danger: #9b2023;
+  --color-danger-alt: #fccdce;
+  --color-warning: #fff58c;
+  --color-cost: #ffd580;
+  --color-focus: #93cff2;
+
+  --color-black: #111;
+  --color-white: #fdfdfd;
+  --color-white-alt: #fafafa;
+  --color-gray-1: #eff1f4;
+  --color-gray-2: #d8dde1;
+  --color-gray-3: #ced4da;
+  --color-gray-4: #abb1b7;
+  --color-gray-5: #666a6d;
+
+  // Text
+  --color-text: var(--color-black);
+  --color-text-subtitle: var(--color-gray-5);
+  --color-text-inverse: #fdfdfd;
+
+  // Components
+
+  // Button
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: var(--color-secondary-alt);
+  --color-button-secondary-text: var(--color-secondary);
+  --color-button-secondary-bg-hover: #b9d0e9;
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-text: var(--color-text);
+  --color-button-alt-bg-hover: var(--color-gray-2);
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-black);
+
+  // Input
+  --color-input-color: #111111;
+  --color-input-label: var(--color-gray-5);
+  --color-input-placeholder: #212529;
+  --color-input-bg: #f2f2f2;
+  --color-input-bg-copyable: #434b53;
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
+  --color-input-toggle-bg-hover: var(--color-secondary-alt);
+
+  // Table
+  --color-table-highlight: var(--color-white-alt);
+
+  // Tag
+  --color-tag: var(--color-gray-5);
+  --color-tag-bg: var(--color-button-alt-bg);
+  --color-tag-hover: var(--color-button-alt-text);
+  --color-tag-bg-hover: var(--color-button-alt-bg-hover);
+}
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 372a6328c..d44b81da6 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -23,6 +23,16 @@ html {
 
 body {
   font-size: 1em;
+  cursor: default;
+  line-height: 1.5;
+  font-weight: 400;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+hr {
+  height: 1px;
+  background-color: var(--color-gray-2);
 }
 
 h1,
diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss
index 6d9d828dd..ed30af6ab 100644
--- a/ui/scss/init/_mixins.scss
+++ b/ui/scss/init/_mixins.scss
@@ -1,3 +1,209 @@
+@mixin between {
+  display: flex;
+  justify-content: space-between;
+}
+
+@mixin breakpoint-max($breakpoint) {
+  @media (max-width: #{$breakpoint}px) {
+    @content;
+  }
+}
+
+@mixin breakpoint-min($breakpoint) {
+  @media (min-width: #{$breakpoint}px) {
+    @content;
+  }
+}
+
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin clearfix {
+  clear: both;
+  content: '';
+  display: block;
+}
+
+// (Smart) text truncation
+// Pass in a width to customize how much text is allowed
+// Omit value for basic text truncation
+@mixin constrict($value: null) {
+  @if ($value) {
+    max-width: $value;
+  }
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin create-grid($items-per-row: 4) {
+  grid-template: repeat(1, 1fr) / repeat($items-per-row, 1fr);
+}
+
+// Smart font include
+// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
+// No more weighing down the front-end with references to unused weights
+@mixin font-face($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    // sass-lint:disable indentation
+    src: url('#{$relative-font-path}/#{$font-weight}.woff2') format('woff2'),
+      url('#{$relative-font-path}/#{$font-weight}.woff') format('woff');
+    // sass-lint:enable indentation
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    // sass-lint:disable indentation
+    src: url('#{$relative-font-path}/#{$font-weight}i.woff2') format('woff2'),
+      url('#{$relative-font-path}/#{$font-weight}i.woff') format('woff');
+    // sass-lint:enable indentation
+  }
+}
+
+@mixin font-mono {
+  font-family: 'Fira Code', 'Courier New', monospace;
+}
+
+@mixin font-sans {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+@mixin font-serif {
+  font-family: Georgia, serif;
+}
+
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
+
+// Cross-browser line-clamp support
+@mixin line-clamp($element-height: 2rem, $row-count: 2, $fade-color: var(--lbry-white), $computed-position: relative) {
+  height: $element-height;
+  overflow: hidden;
+  position: $computed-position;
+
+  &::after {
+    width: 50%;
+    height: calc(#{$element-height} / #{$row-count});
+    right: 0;
+    bottom: 0;
+
+    background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
+    content: '';
+    position: absolute;
+  }
+}
+
+@mixin no-user-select {
+  user-select: none;
+
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+// TODO: Make customizable
+// The `background-position` in `loading-animation` is the same width as this `background-size`
+// The same values can be passed to both
+@mixin placeholder {
+  animation-duration: 4s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: loading-animation;
+  animation-timing-function: linear;
+  background-color: transparent;
+  background-image: linear-gradient(to right, var(--color-gray-3) 10%, transparent 80%, var(--color-gray-3) 100%);
+  background-repeat: repeat;
+  background-size: 500px;
+
+  [data-mode='dark'] & {
+    background-image: linear-gradient(
+      to right,
+      rgba($lbry-white, 0.1) 10%,
+      transparent 80%,
+      rgba($lbry-white, 0.1) 100%
+    );
+  }
+}
+
+// Use CSS variables without upsetting Sass-Lint
+// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
+@mixin root-prop($prop: null, $value: null) {
+  @if ($prop and $value) {
+    #{$prop}: $value;
+  }
+}
+
+@mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+
+  &::-moz-selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+}
+
+@mixin thumbnail {
+  &::before,
+  &::after {
+    content: '';
+  }
+
+  &::before {
+    float: left;
+    padding-top: var(--aspect-ratio-standard);
+  }
+
+  &::after {
+    clear: both;
+    display: block;
+  }
+}
+
+@mixin focus {
+  box-shadow: 0 0 0 3px var(--color-focus);
+}
+
+@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
+  @include selection($text-color, $whitespace-color);
+
+  background-image: linear-gradient($whitespace-color, $whitespace-color),
+    linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
+  background-position: 0 88%, 100% 88%, 0 88%;
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
+  box-decoration-break: clone;
+  display: inline;
+  text-decoration: none;
+  text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color,
+    0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color,
+    -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color,
+    -0.15rem 0 $whitespace-color;
+
+  @-moz-document url-prefix() {
+    // sass-lint:disable-line empty-args
+    background-position: 0 90%, 100% 90%, 0 90%;
+  }
+}
+
 @mixin placeholder {
   animation: pulse 2s infinite ease-in-out;
   background-color: var(--color-placeholder-background);
diff --git a/ui/scss/init/_reset.scss b/ui/scss/init/_reset.scss
new file mode 100644
index 000000000..aff7dd756
--- /dev/null
+++ b/ui/scss/init/_reset.scss
@@ -0,0 +1,245 @@
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+
+  border: none;
+  box-sizing: inherit;
+  outline: 0;
+}
+
+[disabled] {
+  pointer-events: none;
+  resize: none;
+}
+
+[readonly] {
+  cursor: not-allowed;
+}
+
+[for],
+[role='button'],
+[type='button'],
+[type='checkbox'],
+[type='file'],
+[type='radio'],
+[type='select'],
+[type='submit'] {
+  cursor: pointer;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  // Remove touch delay on supported devices
+  touch-action: manipulation;
+}
+
+button,
+input,
+select,
+textarea {
+  background-color: transparent;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 1em;
+}
+
+ol,
+ul {
+  list-style-position: inside;
+
+  > li {
+    list-style-position: inside;
+  }
+}
+
+table {
+  border-spacing: 0;
+}
+
+dd {
+  width: 80%;
+  float: left;
+}
+
+dl {
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+dt {
+  width: 20%;
+  float: left;
+}
+
+img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  background-color: transparent;
+  line-height: inherit;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-gray-1);
+}
+
+input {
+  background-color: transparent;
+  color: inherit;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.2;
+  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+}
+
+select {
+  outline: none;
+}
+
+textarea {
+  width: 100%;
+  min-height: var(--spacing-xxl);
+  padding: var(--spacing-s);
+  // border-color should be added in apps for blur/focus
+  border: 1px solid;
+
+  &:not([disabled]) {
+    resize: vertical;
+  }
+}
+
+@media print {
+  // sass-lint:disable-block no-important
+  // Intelligent print styles
+  pre,
+  blockquote {
+    border: 1px solid var(--color-gray-5) !important;
+    page-break-inside: avoid !important;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid !important;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3 !important;
+    widows: 3 !important;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
+
+  // Faster, more stable printing
+  * {
+    background-color: transparent !important;
+    background-image: none !important;
+    color: var(--lbry-black) !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
+
+  p {
+    a {
+      &[href]::after {
+        // Show hypertext data for links and abbreviations
+        content: ' (' attr(href) ')' !important;
+      }
+
+      &[href^='javascript:'],
+      &[href^='#'] {
+        &::after {
+          content: '' !important;
+        }
+      }
+    }
+
+    abbr {
+      &[title]::after {
+        content: ' (' attr(title) ')' !important;
+      }
+    }
+
+    a,
+    abbr {
+      text-decoration: underline !important;
+      word-wrap: break-word !important;
+    }
+  }
+}
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 08664fa4b..137f669dd 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -7,6 +7,42 @@ $breakpoint-small: 900px;
 $breakpoint-medium: 1150px;
 
 :root {
+  --border-radius: 5px;
+  --height-input: 2.5rem;
+  --height-button: 2.5rem;
+  --height-checkbox: 24px;
+  --height-radio: 24px;
+  --height-badge: 24px;
+
+  // Spacing
+  --spacing-xxs: calc(2rem / 5);
+  --spacing-xs: calc(2rem / 4);
+  --spacing-s: calc(2rem / 3);
+  --spacing-m: calc(2rem / 2);
+  --spacing-l: 2rem;
+  --spacing-xl: 3rem;
+
+  // Aspect ratio
+  --aspect-ratio-bluray: 41.6666666667%; // 12:5
+  --aspect-ratio-panavision: 36.3636363636%; // 11:4
+  --aspect-ratio-sd: 75%; // 4:3
+  --aspect-ratio-standard: 56.25%; // 16:9
+
+  // Type
+  --font-mono: 'Fira Code';
+  --font-sans: Inter;
+  --font-serif: Georgia;
+  --font-weight-base: 400;
+  --font-weight-light: 300;
+  --font-weight-bold: 700;
+  --font-base: 14px;
+  --font-body: 1rem;
+  --font-xsmall: 0.7344rem;
+  --font-small: 0.8571rem;
+  --font-large: 1.3rem;
+  --font-title: 1.71rem;
+  --font-heading: 2.94rem;
+
   // Width & spacing
   --page-max-width: 1420px;
   --mac-titlebar-height: 1.5rem;
diff --git a/yarn.lock b/yarn.lock
index 8b479b0ba..ef7982d82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -957,11 +957,6 @@
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-"@lbry/components@^4.2.5":
-  version "4.2.5"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.2.5.tgz#21d2cad296c015c6300727e706a1456e72aae600"
-  integrity sha512-UmE4nkvTQnZX4obOiR650apXarRmvXW+Ieezu/M4LZNKL/CRmHJIRrqcSMtPugDf/Ijukx/4oqrq2M8Ww0sgyw==
-
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"