WIP

2019-02-05 18:03:03 -06:00 · 2019-02-05 18:03:03 -06:00 · ba2366c957
parent f7fb8ed949
commit ba2366c957
9 changed files with 410 additions and 24 deletions
--- a/dist/index.css
+++ b/dist/index.css
--- a/dist/index.css.map
+++ b/dist/index.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDtIgC,MCsIhC,aDrI+B,MCqI/B,YDpI8B,MCoI9B,YDnI8B,OCmI9B,YDlI8B,OCkI9B,aDjI+B,OCiI/B,cDhIgC,OCgIhC,sBD7HwC,eC6HxC,0BD1H4C,eC0H5C,kBDvHoC,ICuHpC,wBDpH0C,OEjB9C,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,yFAOE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MACE,yBACA,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,0BACA,4BACA,sBAGF,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sBACE,eAGF,gBACE,WAIJ,MACE,6BACA,cAEA,mBACE,cACA,WAGF,qBACE,cAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBAEA,yBACE,gBAMJ,aAEE,eAEE,iCACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,sBACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC1ON,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAIJ,gCACE,iBCiNc,QD/Md,iDACE,iBC+MY,QD9MZ,MCfU,QDmBd,aACE,iBCmEY,QDjEZ,8BACE,iBCiEU,QDhEV,MCxBU,QD4Bd,cACE,eACA,cAGF,aACE,iBC8Ga,QD5Gb,8BACE,iBC4GW,QD3GX,MCtCU,QD0Cd,gBACE,iBCSY,QDRZ,MC9CY,KCJd,QACE,kBACA,kBAIA,mBACE,0BAIJ,mBLWI,UKViB,KLanB,gBACA,uBACA,mBKZF,kBACE,WACA,oBAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MDtBY,KCuBZ,gCAEA,0BACE,mCAGF,oBACE,iBDuOW,QCpOb,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBD7BU,QC+BV,wCACE,sCAKN,cACE,qBAEA,iDACE,MDlBU,QCoBV,kEACE,MDvBQ,QC2BZ,2CACE,MD5BU,QC8BV,4DACE,MD9BQ,QCmCd,iBACE,2CACA,kBACA,mBACA,MD5FY,KC6FZ,gCAEA,6BACE,iBD1CU,QC6CZ,uBACE,iBDhDU,QCkDV,wCACE,iBDlDQ,QCuDd,mBACE,yBCjHF,WAEE,mBAGF,mBAKE,aACA,eACA,uBACA,oBAEA,gEAEE,cACA,mBACA,iBAEA,wNACE,OACA,mBACA,kBACA,sBAEA,wQACE,iBFtBM,QEuBN,+BACA,oBFxBM,QEyBN,kBFzBM,QE4BR,gPACE,iBFuBM,QEtBN,+BACA,oBFqBM,QEpBN,kBFoBM,QEhBV,wOAEE,MFxCQ,KEyCR,qBACA,oBACA,mBAEA,wUACE,iBF5CM,QE6CN,aF7CM,QEgDR,wRACE,iBFCM,qBAEA,QGxDd,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP8DA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHOrEF,uGAGE,gBAGF,oCACE,UAGF,iCACE,UAGF,kCACE,WAIJ,cACE,aACA,8BAEA,iCACE,+BAGF,2BACE,UACA,8BAGF,iCACE,yCACA,kBAGF,4BACE,UAGF,4BACE,YACA,iBAIJ,aACE,aAEA,gCACE,+BAGF,0BACE,yBACA,6BAGF,gCACE,2BACA,kBAGF,0BACE,6BAGF,2BACE,YAGF,2BACE,iBAQJ,gBACE,aACA,6BACA,gCASF,aACE,qBAEA,8BACE,kCAIJ,gBACE,yBACA,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAIA,8BACE,MHhLU,KJsJZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOsBJ,cACE,gBACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDvC8B,YCuC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MAEE,iBAKF,GAC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","file":"index.css"}
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Components by LBRY</title>
+
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
+    <link rel="stylesheet" href="./index.css"/>
+
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        font-family: var(--font-sans);
+        padding: var(--spacing-l);
+      }
+
+      header {
+        border-bottom: 1px solid var(--lbry-gray-1);
+        margin-bottom: var(--spacing-l);
+      }
+
+      main {
+        flex: 1;
+        min-height: 100vh;
+      }
+
+      section {
+        margin-bottom: var(--spacing-l);
+      }
+
+      h1 {
+        font-size: 3rem;
+        font-weight: bolder;
+      }
+
+      h2 {
+        font-size: 2rem;
+        padding-bottom: var(--spacing-s);
+      }
+
+      h3 {
+        font-size: 1.5rem;
+        font-weight: bolder;
+        margin-bottom: var(--spacing-xs);
+      }
+
+      p {
+        font-size: 1.25rem;
+        margin-bottom: var(--spacing-s);
+      }
+
+      hr {
+        margin-bottom: var(--spacing-s);
+      }
+
+      footer {
+        border-top: 1px solid var(--lbry-gray-1);
+        color: var(--lbry-gray-5);
+        padding-top: var(--spacing-l);
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <h1>@lbry/components</h1>
+      <h2>Styling for shared components across LBRY properties</h2>
+    </header>
+
+    <main>
+      <section>
+        <p>Hello and whaddup!</p>
+      </section>
+
+      <section>
+        <h3>Form</h3>
+
+        <form>
+          <fieldset>
+            <legend>Subscribe to our newsletter</legend>
+
+            <input-submit>
+              <input id="emailAddress" placeholder="you@domain.tld" type="text"/>
+              <button title="Subscribe to our technical newsletter" type="button">Subscribe</button>
+            </input-submit>
+          </fieldset>
+
+          <fieldset>
+            <legend>Click some buttons</legend>
+
+            <radio>
+              <input id="test-radio" type="radio">
+              <label for="test-radio">Radio button</label>
+              <check></check>
+            </radio>
+          </fieldset>
+        </form>
+      </section>
+
+      <section>
+        <h3>Table</h3>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Component</th>
+              <th>Language (Toolset)</th>
+              <th>What Is It</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td><a href="https://github.com/lbryio/lbrycrd" rel="noopener noreferrer" target="_blank">lbrycrd</a></td>
+              <td>C++</td>
+              <td>A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle <a class="link--glossary" href="/glossary#lbrycrd">lbrycrd</a> directly, and instead bundle <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
+            </tr>
+            <tr>
+              <td><a href="https://github.com/lbryio/lbry" rel="noopener noreferrer" target="_blank">lbry-sdk</a></td>
+              <td>Python (asyncio)</td>
+              <td>A daemon that can be used directly or to develop other applications. Provides convenience <a href="/api/sdk">APIs</a>, bundles an SPV wallet (<a class="link--glossary" href="/glossary#torba">torba</a>), and contains an implementation of the LBRY data network.</td>
+            </tr>
+            <tr>
+              <td><a href="https://github.com/lbryio/torba" rel="noopener noreferrer" target="_blank">torba</a></td>
+              <td>Python</td>
+              <td>An <a class="link--glossary" href="/glossary#SPV">SPV</a> (Simple Payment Verification) wallet. Bundled with <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
+            </tr>
+            <tr>
+              <td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/extras/wallet/server" rel="noopener noreferrer" target="_blank">wallet server</a></td>
+              <td>Protobuf, Python</td>
+              <td>The wallet server used by <a class="link--glossary" href="/glossary#torba">torba</a>.</td>
+            </tr>
+            <tr>
+              <td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/schema" rel="noopener noreferrer" target="_blank">schema</a></td>
+              <td>Protobuf, Python</td>
+              <td>Defines the structure of the metadata stored in the LBRY blockchain.</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </main>
+
+    <footer>Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.</footer>
+  </body>
+</html>
--- a/sass/form/_index.scss
+++ b/sass/form/_index.scss
@ -1,30 +1,39 @@
-form,
-.form {
+form {
  margin-bottom: 1rem;
 }

-fieldset,
-.fieldset {
+fieldset {
  // Flexbox is broken for fieldset elements in Chromium
  // Source: https://bugs.chromium.org/p/chromium/issues/detail?id=375693
  // Example: https://codepen.io/Garbee/pen/oYKMYp
-  display: flex;
+  // display: flex; //
+  // justify-content: center; //
+
  font-size: 1rem;
-  justify-content: center;
  margin-bottom: 0.5rem;
+  position: relative;
+
+  // @supports (not (-moz-appearance: none)) {
+  //   display: block;
+  // }

  button,
  input {
-    height: 2.5rem;
-    border-style: solid;
-    border-width: 1px;
+    // height: 2.5rem;
+    // border-style: solid;
+    // border-width: 1px;

-    &:not([type="button"]):not([type="submit"]) {
-      flex: 1;
+    &:not([type="button"]):not([type="radio"]):not([type="submit"]) {
+      // flex: 1; //
      padding-right: 1rem;
      padding-left: 1rem;
      transition: border 0.2s;

+      // @supports (not (-moz-appearance: none)) {
+      //   width: calc(100% - 10rem);
+      //   float: left;
+      // }
+
      &:not(:focus) {
        border-top-color: $lbry-black;
        border-right-color: transparent;
@ -47,6 +56,11 @@ fieldset,
      padding-left: 1.5rem;
      transition: all 0.2s;

+      // @supports (not (-moz-appearance: none)) {
+      //   width: 10rem;
+      //   float: right;
+      // }
+
      &:not(:hover) {
        background-color: $lbry-black;
        border-color: $lbry-black;
@ -59,3 +73,92 @@ fieldset,
    }
  }
 }
+
+
+
+radio {
+  min-height: 2rem;
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  position: relative;
+
+  &:hover {
+    label {
+      color: $lbry-teal-3;
+    }
+
+    check {
+      border-color: $lbry-teal-3;
+    }
+  }
+
+  label {
+    padding-left: 0.5rem;
+    transition: color 0.2s;
+  }
+
+  input {
+    &[type="radio"] {
+      width: 0; height: 0;
+      visibility: hidden;
+
+      &:not(:checked) {
+        + label + check::before {
+          background-color: transparent;
+        }
+      }
+
+      &:checked {
+        + label {
+          color: $lbry-teal-3;
+        }
+
+        + label + check::before {
+          background-color: $lbry-teal-3;
+        }
+      }
+    }
+  }
+}
+
+check {
+  width: 1.5rem; height: 1.5rem;
+  top: 0; left: 0;
+
+  border: 2px solid;
+  border-radius: 50%;
+  display: block;
+  position: relative;
+  transition: border 0.2s;
+  z-index: 5;
+
+  &::before {
+    width: 0.75rem; height: 0.75rem;
+    top: 0.24rem; left: 0.24rem;
+
+    border-radius: 50%;
+    content: "";
+    display: block;
+    position: absolute;
+    transition: background-color 0.2s;
+  }
+}
+
+
+
+.check {
+  @extend check;
+}
+
+.fieldset {
+  @extend fieldset;
+}
+
+.form {
+  @extend form;
+}
+
+.radio-group {
+  @extend radio;
+}
--- a/sass/index.scss
+++ b/sass/index.scss
@ -9,3 +9,4 @@
@import "button";
@import "form";
@import "media";
+@import "table";
--- a/sass/init/_mixins.scss
+++ b/sass/init/_mixins.scss
@ -58,11 +58,11 @@
 }

@mixin font-mono {
-  font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
+  font-family: "Fira Code", "Courier New", monospace;
 }

@mixin font-sans {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  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 {
--- a/sass/init/_reset.scss
+++ b/sass/init/_reset.scss
@ -2,6 +2,7 @@

 html {
  box-sizing: border-box;
+  font-size: 12px;
  text-rendering: optimizeLegibility;

  -moz-osx-font-smoothing: grayscale;
@ -28,6 +29,7 @@ html {
 }

 [for],
+[role="button"],
 [type="button"],
 [type="checkbox"],
 [type="file"],
@ -90,8 +92,10 @@ ul {
 }

 table {
-  border-collapse: collapse;
+  // border-collapse: collapse;
  border-spacing: 0;
+
+  // -webkit-appearance: none;
 }

 dd {
@ -134,6 +138,11 @@ button {
  }
 }

+hr {
+  width: 100%; height: 1px;
+  background-color: $lbry-gray-1;
+}
+
 input {
  background-color: transparent;
  color: inherit;
--- a/sass/init/_variables.scss
+++ b/sass/init/_variables.scss
@ -1,4 +1,5 @@
 :root {
+  // Spacing
  @include root-prop(--spacing-xxs, 0.2rem);
  @include root-prop(--spacing-xs, 0.4rem);
  @include root-prop(--spacing-s, 0.8rem);
@ -7,15 +8,93 @@
  @include root-prop(--spacing-xl, 3.2rem);
  @include root-prop(--spacing-xxl, 6.4rem);

-  // 12:5
-  @include root-prop(--aspect-ratio-bluray, 41.6666666667%);
+  // Aspect ratio
+  @include root-prop(--aspect-ratio-bluray, 41.6666666667%); // 12:5
+  @include root-prop(--aspect-ratio-panavision, 36.3636363636%); // 11:4
+  @include root-prop(--aspect-ratio-sd, 75%); // 4:3
+  @include root-prop(--aspect-ratio-standard, 56.25%); // 16:9

-  // 11:4
-  @include root-prop(--aspect-ratio-panavision, 36.3636363636%);
+  // Color
+  @include root-prop(--lbry-gray-1, $lbry-gray-1);
+  @include root-prop(--lbry-gray-2, $lbry-gray-2);
+  @include root-prop(--lbry-gray-3, $lbry-gray-3);
+  @include root-prop(--lbry-gray-4, $lbry-gray-4);
+  @include root-prop(--lbry-gray-5, $lbry-gray-5);

-  // 4:3
-  @include root-prop(--aspect-ratio-sd, 75%);
+  @include root-prop(--lbry-teal-1, $lbry-teal-1);
+  @include root-prop(--lbry-teal-2, $lbry-teal-2);
+  @include root-prop(--lbry-teal-3, $lbry-teal-3);
+  @include root-prop(--lbry-teal-4, $lbry-teal-4);
+  @include root-prop(--lbry-teal-5, $lbry-teal-5);

-  // 16:9
-  @include root-prop(--aspect-ratio-standard, 56.25%);
+  @include root-prop(--lbry-cyan-1, $lbry-cyan-1);
+  @include root-prop(--lbry-cyan-2, $lbry-cyan-2);
+  @include root-prop(--lbry-cyan-3, $lbry-cyan-3);
+  @include root-prop(--lbry-cyan-4, $lbry-cyan-4);
+  @include root-prop(--lbry-cyan-5, $lbry-cyan-5);
+
+  @include root-prop(--lbry-blue-1, $lbry-blue-1);
+  @include root-prop(--lbry-blue-2, $lbry-blue-2);
+  @include root-prop(--lbry-blue-3, $lbry-blue-3);
+  @include root-prop(--lbry-blue-4, $lbry-blue-4);
+  @include root-prop(--lbry-blue-5, $lbry-blue-5);
+
+  @include root-prop(--lbry-indigo-1, $lbry-indigo-1);
+  @include root-prop(--lbry-indigo-2, $lbry-indigo-2);
+  @include root-prop(--lbry-indigo-3, $lbry-indigo-3);
+  @include root-prop(--lbry-indigo-4, $lbry-indigo-4);
+  @include root-prop(--lbry-indigo-5, $lbry-indigo-5);
+
+  @include root-prop(--lbry-violet-1, $lbry-violet-1);
+  @include root-prop(--lbry-violet-2, $lbry-violet-2);
+  @include root-prop(--lbry-violet-3, $lbry-violet-3);
+  @include root-prop(--lbry-violet-4, $lbry-violet-4);
+  @include root-prop(--lbry-violet-5, $lbry-violet-5);
+
+  @include root-prop(--lbry-grape-1, $lbry-grape-1);
+  @include root-prop(--lbry-grape-2, $lbry-grape-2);
+  @include root-prop(--lbry-grape-3, $lbry-grape-3);
+  @include root-prop(--lbry-grape-4, $lbry-grape-4);
+  @include root-prop(--lbry-grape-5, $lbry-grape-5);
+
+  @include root-prop(--lbry-pink-1, $lbry-pink-1);
+  @include root-prop(--lbry-pink-2, $lbry-pink-2);
+  @include root-prop(--lbry-pink-3, $lbry-pink-3);
+  @include root-prop(--lbry-pink-4, $lbry-pink-4);
+  @include root-prop(--lbry-pink-5, $lbry-pink-5);
+
+  @include root-prop(--lbry-red-1, $lbry-red-1);
+  @include root-prop(--lbry-red-2, $lbry-red-2);
+  @include root-prop(--lbry-red-3, $lbry-red-3);
+  @include root-prop(--lbry-red-4, $lbry-red-4);
+  @include root-prop(--lbry-red-5, $lbry-red-5);
+
+  @include root-prop(--lbry-orange-1, $lbry-orange-1);
+  @include root-prop(--lbry-orange-2, $lbry-orange-2);
+  @include root-prop(--lbry-orange-3, $lbry-orange-3);
+  @include root-prop(--lbry-orange-4, $lbry-orange-4);
+  @include root-prop(--lbry-orange-5, $lbry-orange-5);
+
+  @include root-prop(--lbry-yellow-1, $lbry-yellow-1);
+  @include root-prop(--lbry-yellow-2, $lbry-yellow-2);
+  @include root-prop(--lbry-yellow-3, $lbry-yellow-3);
+  @include root-prop(--lbry-yellow-4, $lbry-yellow-4);
+  @include root-prop(--lbry-yellow-5, $lbry-yellow-5);
+
+  @include root-prop(--lbry-lime-1, $lbry-lime-1);
+  @include root-prop(--lbry-lime-2, $lbry-lime-2);
+  @include root-prop(--lbry-lime-3, $lbry-lime-3);
+  @include root-prop(--lbry-lime-4, $lbry-lime-4);
+  @include root-prop(--lbry-lime-5, $lbry-lime-5);
+
+  @include root-prop(--lbry-green-1, $lbry-green-1);
+  @include root-prop(--lbry-green-2, $lbry-green-2);
+  @include root-prop(--lbry-green-3, $lbry-green-3);
+  @include root-prop(--lbry-green-4, $lbry-green-4);
+  @include root-prop(--lbry-green-5, $lbry-green-5);
+
+  // Type
+  @include root-prop(--font-mono, "Fira Code");
+  @include root-prop(--font-sans, Inter);
+  @include root-prop(--font-serif, Georgia);
 }
--- a/sass/table/_index.scss
+++ b/sass/table/_index.scss
@ -0,0 +1,47 @@
+
+table {
+  width: 100%;
+
+  background-color: $lbry-white;
+  border: 1px solid $lbry-black;
+  position: relative;
+
+  thead {
+    background-color: $lbry-black;
+    color: $lbry-white;
+    cursor: default;
+    position: relative;
+
+    tr {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  tbody {
+    line-height: 1.55;
+  }
+
+  tr:nth-of-type(even) {
+    background-color: $lbry-gray-1;
+  }
+
+  th,
+  td {
+    padding: 0.5rem 1rem;
+  }
+
+  th {
+    letter-spacing: 0.1rem;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  tbody tr:not(:last-of-type) td {
+    border-bottom: 1px solid $lbry-gray-1;
+  }
+
+  a {
+    font-weight: bolder;
+  }
+}