v4.2.5

more form style consistency improvements
v4.2.4
2020-06-30 22:45:38 -04:00 · 2020-06-30 22:45:24 -04:00 · 2020-06-30 12:35:20 -04:00 · 2020-06-30 12:35:14 -04:00 · 2020-06-18 15:01:07 -04:00 · 2020-06-18 15:00:58 -04:00
31 changed files with 5377 additions and 1234 deletions
--- a/README.md
+++ b/README.md
@ -17,7 +17,7 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/

 ### Demo

-Check out `index.html` in the `dist` folder.
+[https://lbryio.github.io/components](https://lbryio.github.io/components)



@ -49,6 +49,16 @@ They are nearly identical, save for `--watch` and `--update`. Please refer to th



+### Note
+
+To use with Webpack, you have to make use of the tilde character when referencing a file inside your `node_modules` folder. Like so:
+
+```scss
+@import "~@lbry/components/sass/";
+```
+
+
+
 ### License

 [BSD 3-Clause](LICENSE) Copyright © LBRY Inc.
--- a/dist/badge.css
+++ b/dist/badge.css
@ -0,0 +1 @@
+.badge,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{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{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}/*# sourceMappingURL=badge.css.map */
--- a/dist/badge.css.map
+++ b/dist/badge.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/badge.scss"],"names":[],"mappings":"AAAA,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA","file":"badge.css"}
--- a/dist/button.css
+++ b/dist/button.css
@ -0,0 +1 @@
+.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link,.button--danger{border-radius:var(--border-radius)}.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)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary: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)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt: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 .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.button--icon.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--icon.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,.button--danger{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover,.button--danger:hover{text-decoration:underline;color:var(--color-link-hover)}.button--danger{color:var(--color-error)}/*# sourceMappingURL=button.css.map */
--- a/dist/button.css.map
+++ b/dist/button.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+EAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,8BACE,wBACA,qBACA,qBACA,oCAEA,0CACE,0BACA,8BAIJ,gBAEE","file":"button.css"}
--- a/dist/form.css
+++ b/dist/form.css
--- a/dist/form.css.map
+++ b/dist/form.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/form.scss","../sass/init/_mixins.scss"],"names":[],"mappings":"AAEA,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAYJ,++DAME,4BAGF,mSACE,4BAGF,oOACE,gBAGF,uXAEE,WAIJ,oDAGE,aACA,sBAGF,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCYA,wCDJA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE","file":"form.css"}
--- a/dist/index.css
+++ b/dist/index.css
--- a/dist/index.css.map
+++ b/dist/index.css.map
--- a/dist/index.html
+++ b/dist/index.html
@ -1,388 +0,0 @@
-<!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-top: var(--spacing-l);
-      }
-
-      header {
-        border-bottom: 1px solid var(--lbry-gray-1);
-        margin-bottom: var(--spacing-l);
-      }
-
-      drawer-navigation,
-      drawer-wrap {
-        padding-right: var(--spacing-l);
-        padding-left: var(--spacing-l);
-      }
-
-      drawer-navigation {
-        font-size: 1.25rem;
-      }
-
-      main {
-        flex: 1;
-        min-height: 100vh;
-        padding-right: var(--spacing-l);
-        padding-left: var(--spacing-l);
-      }
-
-      section {
-        border-bottom: 1px solid var(--lbry-gray-1);
-        margin-bottom: var(--spacing-l);
-      }
-
-      h1 {
-        font-size: 3rem;
-        font-weight: bolder;
-        padding-right: var(--spacing-l);
-        padding-left: var(--spacing-l);
-      }
-
-      h2 {
-        font-size: 2rem;
-        padding-right: var(--spacing-l);
-        padding-left: var(--spacing-l);
-        padding-bottom: var(--spacing-s);
-      }
-
-      h3 {
-        background-color: var(--lbry-black);
-        color: var(--lbry-white);
-        display: inline-block;
-        font-size: 1.5rem;
-        font-weight: bolder;
-        margin-bottom: var(--spacing-s);
-        padding: 0.25rem 1rem;
-        pointer-events: none;
-      }
-
-      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: var(--spacing-l);
-      }
-
-      .social-links a {
-        width: 1.25rem; height: 1.25rem;
-
-        background-color: var(--lbry-black);
-        color: transparent;
-        display: inline-block;
-        font-size: 0;
-        border-radius: 50%;
-        line-height: 0;
-      }
-
-      .social-links a:not(:last-of-type) {
-        margin-right: 0.5rem;
-      }
-    </style>
-  </head>
-
-  <body>
-    <header>
-      <h1>@lbry/components</h1>
-      <h2>Styling for shared components across LBRY properties</h2>
-
-      <drawer-navigation>
-        <drawer-section>
-          <drawer-title>Link I</drawer-title>
-
-          <drawer-wrap>
-            <drawer-children>
-              <drawer-child>
-                <a href="">
-                  <strong>Use LBRY</strong>
-                  <span>Get the most out of LBRY</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>FAQ</strong>
-                  <span>Got questions? We might have answers!</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Blockchain Explorer</strong>
-                  <span>The history of LBRY’s blockchain</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child class="social-links">
-                <div>
-                  <strong>Social</strong>
-                  <span>
-                    <a href="">Network 1</a>
-                    <a href="">Network 2</a>
-                    <a href="">Network 3</a>
-                    <a href="">Network 4</a>
-                    <a href="">Network 5</a>
-                  </span>
-                </div>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Tour</strong>
-                  <span>Do you want to learn how to publish content to the LBRY network?</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>News</strong>
-                  <span>The latest happenings with the LBRY team and community</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Chat</strong>
-                  <span>Chat with other LBRY users and LBRY team members</span>
-                </a>
-              </drawer-child>
-            </drawer-children>
-          </drawer-wrap>
-        </drawer-section>
-
-        <drawer-section>
-          <drawer-title>Link II</drawer-title>
-
-          <drawer-wrap>
-            <drawer-children>
-              <drawer-child>
-                <a href="">
-                  <strong>YouTube Partner Program</strong>
-                  <span>Bring all your content to LBRY with just a few clicks</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Creator FAQ</strong>
-                  <span>Like the FAQ, but for Creators</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Fund a Project</strong>
-                  <span>How to to get some LBC for your latest idea or project</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Makers</strong>
-                  <span>Would you like to share and sell 3D printable files?</span>
-                </a>
-              </drawer-child>
-            </drawer-children>
-          </drawer-wrap>
-        </drawer-section>
-
-        <drawer-section>
-          <drawer-title>Link III</drawer-title>
-
-          <drawer-wrap>
-            <drawer-children>
-              <drawer-child>
-                <a href="">
-                  <strong>Team / About</strong>
-                  <span>Meet the people building LBRY and find out why they’re doing it</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Join Us</strong>
-                  <span>Work with the LBRY team</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Contact</strong>
-                  <span>Have a question or want to connect with the LBRY, Inc. team?</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Credit Reports</strong>
-                  <span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span>
-                </a>
-              </drawer-child>
-            </drawer-children>
-          </drawer-wrap>
-        </drawer-section>
-
-        <drawer-section>
-          <drawer-title>Link IV</drawer-title>
-
-          <drawer-wrap>
-            <drawer-children>
-              <drawer-child>
-                <a href="">
-                  <strong>LBRY.tech</strong>
-                  <span>Find out how the heck all of this works</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>GitHub</strong>
-                  <span>The LBRY code is open source, check out the repos</span>
-                </a>
-              </drawer-child>
-
-              <drawer-child>
-                <a href="">
-                  <strong>Contributor's Guide</strong>
-                  <span>Tips and guidelines for being a contributor to the LBRY projects</span>
-                </a>
-              </drawer-child>
-            </drawer-children>
-          </drawer-wrap>
-        </drawer-section>
-      </drawer-navigation>
-    </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>Become a Gym Leader</legend>
-
-            <fieldset-group>
-              <fieldset-section>
-                <label for="name">Name</label>
-                <input id="name" placeholder="Will Smith" type="text"/>
-              </fieldset-section>
-
-              <fieldset-section>
-                <label for="starter">Pokémon</label>
-                <select id="starter">
-                  <option disabled selected>Choose a Pokémon</option>
-                  <option>Bulbasaur</option>
-                  <option>Charmander</option>
-                  <option>Squirtle</option>
-                </select>
-              </fieldset-section>
-            </fieldset-group>
-
-            <fieldset-section class="full-width">
-              <label for="notes">Notes</label>
-              <textarea id="notes"></textarea>
-            </fieldset-section>
-          </fieldset>
-
-          <fieldset>
-            <legend>Click some buttons</legend>
-
-            <radio-element>
-              <input id="test-radio-1" name="toggle" type="radio">
-              <label for="test-radio-1">Radio button 1</label>
-              <radio-toggle/>
-            </radio-element>
-
-            <radio-element>
-              <input id="test-radio-2" name="toggle" type="radio">
-              <label for="test-radio-2">Radio button 2</label>
-              <radio-toggle/>
-            </radio-element>
-
-            <checkbox-element>
-              <input id="test-checkbox-1" name="check" type="checkbox">
-              <label for="test-checkbox-1">Checkbox</label>
-              <checkbox-toggle/>
-            </checkbox-element>
-          </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/dist/section.css
+++ b/dist/section.css
@ -0,0 +1 @@
+/*# sourceMappingURL=section.css.map */
--- a/dist/section.css.map
+++ b/dist/section.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"section.css"}
--- a/dist/table.css
+++ b/dist/table.css
@ -0,0 +1 @@
+.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed 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}/*# sourceMappingURL=table.css.map */
--- a/dist/table.css.map
+++ b/dist/table.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE","file":"table.css"}
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,298 @@
+<!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="../dist/index.css" /> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
+
+    <style>
+      body {
+        padding: 5rem;
+        max-width: 110rem;
+        margin: auto;
+      }
+
+      li {
+        font-size: 1.3em;
+      }
+
+      .docs__color-row {
+        margin-bottom: var(--spacing-s);
+      }
+
+      .docs__color {
+        display: inline-block;
+        height: 100px;
+        width: 250px;
+        border-radius: 5px;
+        padding: var(--spacing-s);
+        margin-right: var(--spacing-s);
+        color: var(--color-text-inverse);
+      }
+
+      .docs__color h3 {
+        margin-bottom: var(--spacing-s);
+      }
+
+      .docs__color.docs__color--primary {
+        background-color: var(--color-primary);
+        color: var(--color-primary-alt);
+      }
+      .docs__color.docs__color--primary-alt {
+        color: var(--color-primary);
+        background-color: var(--color-primary-alt);
+      }
+      .docs__color.docs__color--secondary {
+        background-color: var(--color-secondary);
+      }
+      .docs__color.docs__color--secondary-alt {
+        background-color: var(--color-secondary-alt);
+        color: var(--color-secondary);
+      }
+      .docs__color.docs__color--tertiary {
+        background-color: var(--color-tertiary);
+      }
+      .docs__color.docs__color--tertiary-alt {
+        background-color: var(--color-tertiary-alt);
+        color: var(--color-tertiary);
+      }
+      .docs__color.docs__color--danger {
+        background-color: var(--color-danger);
+      }
+      .docs__color.docs__color--danger-alt {
+        background-color: var(--color-danger-alt);
+        color: var(--color-danger);
+      }
+      .docs__color.docs__color--warning {
+        background-color: var(--color-warning);
+        color: var(--color-text);
+      }
+
+      .title {
+        font-size: 2rem;
+      }
+
+      .title--large {
+        font-size: 3rem;
+      }
+
+      .title--section {
+        font-weight: 700;
+        font-size: 2rem;
+      }
+
+      .card--inline {
+        border-radius: 5px;
+        border: 1px solid var(--color-gray-3);
+        margin-top: var(--spacing-s);
+      }
+
+      .card__header {
+        border-bottom: 1px solid #ddd;
+      }
+
+      .card__header,
+      .card__body {
+        padding: var(--spacing-l);
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <h1 class="title--large">@lbry/components</h1>
+      <p class="section__subtitle">
+        Styling for shared components across LBRY properties
+      </p>
+    </header>
+
+    <section class="section">
+      <h2 class="title--section">Font</h2>
+      <div class="card--inline">
+        <div class="card__header">
+          <h3 class="title">Inter</h3>
+          <p class="subtitle">
+            <a href="https://github.com/rsms/inter" class="button--link"
+              >https://github.com/rsms/inter</a
+            >
+          </p>
+        </div>
+        <div class="card__body">
+          <ul>
+            <li style="font-weight: 300;">Inter Light - 300</li>
+            <li style="font-weight: 400;">Inter Regular - 400</li>
+            <li style="font-weight: 700;">Inter Bold - 700</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="title--section">Color</h2>
+      <div class="card--inline">
+        <div class="card__body">
+          <div class="docs__color-row">
+            <div class="docs__color docs__color--primary">
+              <h3>Primary</h3>
+              <code>#xxx</code><br />
+              <code>--color-primary</code>
+            </div>
+            <div class="docs__color docs__color--primary-alt">
+              <h3>Primary Alt</h3>
+              <code>#xxx</code><br />
+              <code>--color-primary-alt</code>
+            </div>
+            <div class="docs__color docs__color--secondary">
+              <h3>Secondary</h3>
+              <code>#xxx</code><br />
+              <code>--color-secondary</code>
+            </div>
+            <div class="docs__color docs__color--secondary-alt">
+              <h3>Secondary Alt</h3>
+              <code>#xxx</code><br />
+              <code>--color-secondary-alt</code>
+            </div>
+          </div>
+          <div class="docs__color-row">
+            <div class="docs__color docs__color--tertiary">
+              <h3>Tertiary</h3>
+              <code>#xxx</code><br />
+              <code>--color-tertiary</code>
+            </div>
+            <div class="docs__color docs__color--tertiary-alt">
+              <h3>Tertiary Alt</h3>
+              <code>#xxx</code><br />
+              <code>--color-tertiary-alt</code>
+            </div>
+            <div class="docs__color docs__color--danger">
+              <h3>Danger</h3>
+              <code>#xxx</code><br />
+              <code>--color-danger</code>
+            </div>
+            <div class="docs__color docs__color--danger-alt">
+              <h3>Danger Alt</h3>
+              <code>#xxx</code><br />
+              <code>--color-danger-alt</code>
+            </div>
+          </div>
+          <div>
+            <div class="docs__color docs__color--warning">
+              <h3>Warning</h3>
+              <code>#xxx</code><br />
+              <code>--color-warning</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="title--section">Buttons</h2>
+      <div class="card--inline">
+        <div class="card__body">
+          <button class="button button--primary">Primary</button>
+          <button class="button button--secondary">Secondary</button>
+          <button class="button button--link">A Link</button>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="title--section">Badges</h2>
+      <div class="card--inline">
+        <div class="card__body">
+          <button class="button badge--tag">gaming</button>
+          <button class="button badge--tag-mature">pr0n</button>
+          <button class="button badge--cost">12 LBC</button>
+          <button class="button badge--alert">Warning</button>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="title--section">Form Elements</h2>
+      <div class="card--inline">
+        <div class="card__body">
+          <fieldset-section>
+            <label for="name">Name</label>
+            <input id="name" placeholder="Cool guy Sean" type="text" />
+          </fieldset-section>
+
+          <fieldset-section>
+            <label for="emailAddress">Subscribe to our newsletter</label>
+
+            <input-submit>
+              <input
+                id="emailAddress"
+                placeholder="you@domain.tld"
+                type="text"
+              />
+              <button
+                class="button button--secondary"
+                title="Subscribe to our technical newsletter"
+              >
+                Subscribe
+              </button>
+            </input-submit>
+          </fieldset-section>
+
+          <fieldset-section>
+            <label for="starter">Pokémon</label>
+            <select id="starter">
+              <option disabled selected>Choose a Pokémon</option>
+              <option>Bulbasaur</option>
+              <option>Charmander</option>
+              <option>Squirtle</option>
+            </select>
+          </fieldset-section>
+        </div>
+      </div>
+
+      <div class="card--inline">
+        <div class="card__body">
+          <fieldset-section>
+            <fieldset-section class="checkbox">
+              <label for="test-checkbox-1">Checkbox</label>
+              <input id="test-checkbox-1" name="check" type="checkbox" />
+            </fieldset-section>
+            <fieldset-section class="checkbox">
+              <label for="test-checkbox-2">Another</label>
+              <input id="test-checkbox-2" name="check-2" type="checkbox" />
+            </fieldset-section>
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-1">Radio</label>
+            <input id="test-radio-1" name="check" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-1">Radio</label>
+            <input id="test-radio-1" name="check" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+          <fieldset-section class="radio">
+            <label for="test-radio-2">Another Radio</label>
+            <input id="test-radio-2" name="check-2" type="radio" />
+          </fieldset-section>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -1,20 +1,19 @@
 {
  "author": {
-    "email": "paul+github@lbry.io",
-    "name": "Paul Anthony Webb"
+    "email": "sean@lbry.com",
+    "name": "Sean Yesmunt"
  },
  "bugs": {
    "url": "https://github.com/lbryio/components/issues"
  },
  "description": "Styling for shared components across LBRY properties",
  "devDependencies": {
-    "@inc/sasslint-config": "^1.1.3",
-    "@lbry/color": "^1.1.0",
-    "husky": "^1.3.1",
+    "@inc/sasslint-config": "^2019.6.22",
+    "husky": "^3.0.1",
    "npm-run-all": "^4.1.5",
-    "sass": "^1.17.0",
-    "sass-lint": "^1.12.1",
-    "updates": "^7.0.0"
+    "sass": "^1.22.7",
+    "sass-lint": "^1.13.1",
+    "updates": "^8.5.1"
  },
  "files": [
    "dist/style.css",
@ -23,7 +22,7 @@
  "homepage": "https://github.com/lbryio/components#readme",
  "husky": {
    "hooks": {
-      "pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
+      "pre-commit": "npm run build && git add -A :/"
    }
  },
  "license": "BSD-3-Clause",
@ -34,12 +33,12 @@
    "url": "https://github.com/lbryio/components.git"
  },
  "scripts": {
-    "sass:dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
-    "sass:prod": "sass --load-path=node_modules --update sass:dist --style compressed",
+    "dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
+    "build": "sass --load-path=node_modules --update sass:dist --style compressed",
    "test": "run-s test:*",
    "test:dependencies": "updates --update ./",
-    "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose --no-exit",
+    "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose",
    "watch": "npm run sass:dev"
  },
-  "version": "2.1.0"
+  "version": "4.2.5"
 }
--- a/sass/badge.scss
+++ b/sass/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);
+}
--- a/sass/badge/_index.scss
+++ b/sass/badge/_index.scss
@ -1,57 +0,0 @@
-.badge {
-  font-weight: 600;
-  vertical-align: top;
-  white-space: nowrap;
-
-  &:not(.badge--large) {
-    border-radius: 0.2rem;
-    display: inline-block;
-    font-size: 0.8rem;
-    letter-spacing: 0.05rem;
-    line-height: 2;
-    padding-right: var(--spacing-xs);
-    padding-left: var(--spacing-xs);
-  }
-}
-
-.badge--cost:not(.badge--large) {
-  background-color: $lbry-yellow-2;
-  color: $lbry-black;
-
-  [data-mode="dark"] & {
-    background-color: $lbry-yellow-3;
-  }
-}
-
-.badge--free {
-  background-color: $lbry-blue-2;
-
-  [data-mode="dark"] & {
-    background-color: $lbry-blue-3;
-    color: $lbry-black;
-  }
-}
-
-.badge--large {
-  font-size: 4rem;
-  line-height: 1;
-}
-
-.badge--nsfw {
-  background-color: $lbry-grape-2;
-
-  [data-mode="dark"] & {
-    background-color: $lbry-grape-3;
-    color: $lbry-black;
-  }
-}
-
-.badge--primary {
-  background-color: $lbry-teal-5;
-  color: $lbry-white;
-}
-
-.badge--alert {
-  background-color: $lbry-red-2;
-  color: $lbry-white;
-}
--- a/sass/button/_index.scss
+++ b/sass/button/_index.scss
@ -1,38 +1,71 @@
 .button {
-  fill: currentColor;
+  display: inline-block;
  position: relative;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.button--primary,
+.button--secondary,
+.button--alt,
+.button--link {
+  border-radius: var(--border-radius);
+}
+
+.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);
+}
+
+.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 {
-    text-decoration: underline;
+    background-color: var(--color-button-alt-bg-hover);
  }
 }

-.button--constrict {
-  @include constrict(20vw);
-}
-
-.button--disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
 .button--icon {
-  width: 5rem; height: 5rem;
-
+  width: 5rem;
+  height: 5rem;
  background-repeat: no-repeat;
  background-size: 50%;
  border-radius: 50%;
-  color: $lbry-white;
  transition: background-color 0.2s;
-
-  &:not(:hover) {
-    background-color: rgba($lbry-black, 0.7);
-  }
+  background-color: var(--color-primary);

  &:hover {
-    background-color: $lbry-green-3;
+    background-color: var(--color-button-primary-bg-hover);
  }

  &.button--play {
@ -46,70 +79,19 @@
  }
 }

-.button--inverse {
-  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
-  border: 1px solid $lbry-gray-1;
-  border-radius: 1rem;
-  color: inherit;
-  transition: background-color 0.2s;
-
-  [data-mode="dark"] & {
-    border-color: rgba($lbry-white, 0.1);
-  }
-
-  &:not(:hover) {
-    background-color: transparent;
-  }
-
-  &:hover {
-    background-color: $lbry-gray-1;
-
-    [data-mode="dark"] & {
-      background-color: rgba($lbry-white, 0.1);
-    }
-  }
-}
-
 .button--link {
+  color: var(--color-link);
  transition: color 0.2s;
-
-  &:not(.button--disabled):not(:hover) {
-    color: $lbry-teal-5;
-
-    [data-mode="dark"] & {
-      color: $lbry-teal-3;
-    }
-  }
-
-  &:not(.button--disabled):hover {
-    color: $lbry-teal-3;
-
-    [data-mode="dark"] & {
-      color: $lbry-teal-4;
-    }
-  }
-}
-
-.button--primary {
-  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
-  align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
-  border-radius: 1rem;
-  color: $lbry-white;
-  transition: background-color 0.2s;
-
-  &:not(:hover) {
-    background-color: $lbry-teal-5;
-  }
+  word-break: break-all;
+  font-weight: var(--font-weight-bold);

  &:hover {
-    background-color: $lbry-teal-3;
-
-    [data-mode="dark"] & {
-      background-color: $lbry-teal-4;
-    }
+    text-decoration: underline;
+    color: var(--color-link-hover);
  }
 }

-.button--uppercase {
-  text-transform: uppercase;
+.button--danger {
+  @extend .button--link;
+  color: var(--color-error);
 }
--- a/sass/form.scss
+++ b/sass/form.scss
@ -0,0 +1,272 @@
+@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;
+}
--- a/sass/form/_index.scss
+++ b/sass/form/_index.scss
@ -1,267 +0,0 @@
-form {
-  // setting the font size here sizes everything within
-  &:not(:last-child) {
-    margin-bottom: var(--spacing-s);
-  }
-
-  button:not(.button--link),
-  input,
-  select {
-    height: var(--spacing-l);
-    border: 1px solid;
-  }
-
-  checkbox-element,
-  radio-element,
-  select {
-    cursor: pointer;
-  }
-
-  [type="email"],
-  [type="number"],
-  [type="password"]
-  [type="text"] {
-    padding-right: var(--spacing-s);
-    padding-left: var(--spacing-s);
-    transition: border 0.2s;
-  }
-
-  [type="submit"],
-  .button--primary {
-    color: $lbry-white;
-    padding-right: var(--spacing-m);
-    padding-left: var(--spacing-m);
-    transition: all 0.2s;
-
-    &:not(:hover) {
-      background-color: $lbry-black;
-      border-color: $lbry-black;
-    }
-
-    &:hover {
-      background-color: $lbry-teal-3;
-      border-color: $lbry-teal-5;
-    }
-  }
-
-  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 {
-  border-top: 1px solid $lbry-gray-1;
-  margin-bottom: var(--spacing-m);
-  position: relative;
-}
-
-fieldset-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-fieldset-section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: var(--spacing-m);
-
-  &.full-width {
-    width: 100%;
-  }
-
-  fieldset-group &,
-  .fieldset-group & {
-    width: 49%;
-  }
-
-  label {
-    color: $lbry-gray-4;
-    display: inline-block;
-    font-size: smaller;
-    margin-bottom: var(--spacing-xxs);
-    text-transform: uppercase;
-  }
-
-  [type="email"],
-  [type="text"],
-  select,
-  textarea {
-    &:not(:focus) {
-      border-color: $lbry-black;
-    }
-
-    &:focus {
-      border-color: $lbry-teal-5;
-    }
-  }
-
-  input,
-  select {
-    width: 100%;
-  }
-}
-
-legend {
-  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
-  border: 1px solid $lbry-gray-1;
-  margin-bottom: var(--spacing-s);
-  pointer-events: none;
-}
-
-input-submit {
-  display: flex;
-
-  [type="email"],
-  [type="text"] {
-    flex: 1;
-
-    &:not(:focus) {
-      border-top-color: $lbry-black;
-      border-right-color: transparent;
-      border-bottom-color: $lbry-black;
-      border-left-color: $lbry-black;
-    }
-
-    &:focus {
-      border-top-color: $lbry-teal-5;
-      border-right-color: transparent;
-      border-bottom-color: $lbry-teal-5;
-      border-left-color: $lbry-teal-5;
-    }
-  }
-}
-
-checkbox-element {
-  @include tick;
-
-  &:hover {
-    checkbox-toggle,
-    .checkbox-toggle {
-      border-color: $lbry-teal-4;
-    }
-  }
-
-  input {
-    &[type="checkbox"] {
-      width: 0; height: 0;
-      visibility: hidden;
-
-      &:not(:checked) {
-        + label + checkbox-toggle::before,
-        + label + .checkbox-toggle::before {
-          opacity: 0;
-          visibility: hidden;
-        }
-      }
-
-      &:checked {
-        + label {
-          color: $lbry-teal-4;
-        }
-      }
-    }
-  }
-}
-
-checkbox-toggle {
-  @include tick-toggle;
-
-  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
-    background-position: center left;
-    background-repeat: no-repeat;
-    background-size: 130%;
-    transition: all 0.2s;
-  }
-}
-
-radio-element {
-  @include tick;
-
-  &:hover {
-    radio-toggle,
-    .radio-toggle {
-      border-color: $lbry-teal-4;
-    }
-  }
-
-  input {
-    &[type="radio"] {
-      width: 0; height: 0;
-      visibility: hidden;
-
-      &:not(:checked) {
-        + label + radio-toggle::before,
-        + label + .radio-toggle::before {
-          background-color: transparent;
-        }
-      }
-
-      &:checked {
-        + label {
-          color: $lbry-teal-4;
-        }
-
-        + label + radio-toggle::before,
-        + label + .radio-toggle::before {
-          background-color: $lbry-teal-4;
-        }
-      }
-    }
-  }
-}
-
-radio-toggle {
-  @include tick-toggle;
-  border-radius: 50%;
-
-  &::before {
-    border-radius: 50%;
-    transform: scale(0.6);
-    transition: background-color 0.2s;
-  }
-}
-
-// Custom elements are apparently difficult to use in React, so use classes
-
-.checkbox-element {
-  @extend checkbox-element;
-}
-
-.checkbox-toggle {
-  @extend checkbox-toggle;
-}
-
-.fieldset {
-  @extend fieldset;
-}
-
-.fieldset-group {
-  @extend fieldset-group;
-}
-
-.fieldset-section {
-  @extend fieldset-section;
-}
-
-.form {
-  @extend form;
-}
-
-.input-submit {
-  @extend input-submit;
-}
-
-.radio-element {
-  @extend radio-element;
-}
-
-.radio-toggle {
-  @extend radio-toggle;
-}
--- a/sass/index.scss
+++ b/sass/index.scss
@ -1,6 +1,6 @@
@charset "utf-8";

-@import "@lbry/color/lbry-color";
+@import "init/color";
@import "init/mixins";
@import "init/variables";
@import "init/reset";
@ -8,6 +8,23 @@
@import "badge";
@import "button";
@import "form";
-@import "media";
-@import "navigation";
@import "table";
+
+// OLD - Deprecated
+@import "./navigation/index";
+
+body {
+  cursor: default;
+  font-weight: var(--font-weight-base);
+  font-size: var(--font-base);
+  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);
+}
--- a/sass/init/_color.scss
+++ b/sass/init/_color.scss
@ -0,0 +1,67 @@
+: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-border: #ddd;
+
+  --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);
+}
--- a/sass/init/_mixins.scss
+++ b/sass/init/_mixins.scss
@ -3,6 +3,18 @@
  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;
@ -42,7 +54,7 @@
    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");
+      url("#{$relative-font-path}/#{$font-weight}.woff") format("woff");
    // sass-lint:enable indentation
  }

@ -52,7 +64,7 @@
    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");
+      url("#{$relative-font-path}/#{$font-weight}i.woff") format("woff");
    // sass-lint:enable indentation
  }
 }
@ -62,7 +74,9 @@
 }

@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";
+  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 {
@ -80,7 +94,7 @@
@mixin line-clamp(
  $element-height: 2rem,
  $row-count: 2,
-  $fade-color: $lbry-white,
+  $fade-color: var(--lbry-white),
  $computed-position: relative
 ) {
  height: $element-height;
@ -88,10 +102,16 @@
  position: $computed-position;

  &::after {
-    width: 50%; height: calc(#{$element-height} / #{$row-count});
-    right: 0; bottom: 0;
+    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%);
+    background-image: linear-gradient(
+      to right,
+      rgba($lbry-white, 0),
+      #{$fade-color} 80%
+    );
    content: "";
    position: absolute;
  }
@ -115,7 +135,12 @@
  animation-name: loading-animation;
  animation-timing-function: linear;
  background-color: transparent;
-  background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%);
+  background-image: linear-gradient(
+    to right,
+    var(--color-gray-3) 10%,
+    transparent 80%,
+    var(--color-gray-3) 100%
+  );
  background-repeat: repeat;
  background-size: 500px;

@ -137,7 +162,10 @@
  }
 }

-@mixin selection($background-color: $lbry-white, $text-color: $lbry-black) {
+@mixin selection(
+  $background-color: var(--lbry-white),
+  $text-color: var(--lbry-black)
+) {
  &::selection {
    background-color: $background-color;
    color: $text-color;
@ -168,61 +196,34 @@
  }
 }

-@mixin tick {
-  min-height: 2rem;
-  align-items: center;
-  align-self: start;
-  display: inline-flex;
-  flex-direction: row-reverse;
-  margin-right: var(--spacing-s);
-  margin-bottom: var(--spacing-s);
-  position: relative;
-
-  &:hover {
-    label {
-      color: $lbry-teal-4;
-    }
-  }
-
-  label {
-    padding-left: var(--spacing-xs);
-    transition: color 0.2s;
-  }
+@mixin focus {
+  box-shadow: 0 0 0 3px var(--color-focus);
 }

-@mixin tick-toggle {
-  width: var(--spacing-m); height: var(--spacing-m);
-  top: 0; left: 0;
-
-  border: 2px solid;
-  display: block;
-  position: relative;
-  transition: border 0.2s;
-  z-index: 5;
-
-  &::before {
-    width: 100%; height: 100%;
-    top: 0; left: 0;
-
-    content: "";
-    display: block;
-    position: absolute;
-  }
-}
-
-@mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) {
+@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-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;
+  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
+  @-moz-document url-prefix() {
+    // sass-lint:disable-line empty-args
    background-position: 0 90%, 100% 90%, 0 90%;
  }
 }
--- a/sass/init/_reset.scss
+++ b/sass/init/_reset.scss
@ -1,6 +1,5 @@
 html {
  box-sizing: border-box;
-  font-size: 12px;
  text-rendering: optimizeLegibility;

  -moz-osx-font-smoothing: grayscale;
@ -10,7 +9,8 @@ html {
 *,
 *::before,
 *::after {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;

  border: none;
  box-sizing: inherit;
@ -55,6 +55,7 @@ input,
 select,
 textarea {
  background-color: transparent;
+  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
@ -74,6 +75,7 @@ h4,
 h5,
 h6 {
  font-weight: normal;
+  font-size: 1em;
 }

 ol,
@ -85,10 +87,6 @@ ul {
  }
 }

-ul {
-  list-style-type: none;
-}
-
 table {
  border-spacing: 0;
 }
@ -110,19 +108,20 @@ dt {
 }

 img {
-  width: auto; max-width: 100%;
-  height: auto; max-height: 100%;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
  vertical-align: middle;
 }

 a {
-  color: inherit;
  text-decoration: none;
 }

 button {
  background-color: transparent;
-  color: inherit;
+  line-height: inherit;

  &:not(:disabled) {
    cursor: pointer;
@ -134,8 +133,9 @@ button {
 }

 hr {
-  width: 100%; height: 1px;
-  background-color: $lbry-gray-1;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-gray-1);
 }

 input {
@ -147,17 +147,12 @@ input {
    opacity: 0.2;
  }

-  &:not(:disabled) {
-    color: inherit;
-  }
-
  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
 }

 select {
-  border-radius: 0;
  outline: none;
 }

@ -173,14 +168,12 @@ textarea {
  }
 }

-
-
@media print {
  // sass-lint:disable-block no-important
  // Intelligent print styles
  pre,
  blockquote {
-    border: 1px solid $lbry-gray-5 !important;
+    border: 1px solid var(--color-gray-5) !important;
    page-break-inside: avoid !important;
  }

@ -217,14 +210,15 @@ textarea {
  * {
    background-color: transparent !important;
    background-image: none !important;
-    color: $lbry-black !important;
+    color: var(--lbry-black) !important;
    filter: none !important;
    text-shadow: none !important;
  }

  p {
    a {
-      &[href]::after { // Show hypertext data for links and abbreviations
+      &[href]::after {
+        // Show hypertext data for links and abbreviations
        content: " (" attr(href) ")" !important;
      }

--- a/sass/init/_variables.scss
+++ b/sass/init/_variables.scss
@ -1,103 +1,37 @@
 :root {
+  --border-radius: 5px;
+  --height-input: 2.5rem;
+  --height-button: 2.5rem;
+  --height-checkbox: 24px;
+  --height-radio: 24px;
+  --height-badge: 24px;
+
  // Spacing
-  @include root-prop(--spacing-xxs, 0.2rem);
-  @include root-prop(--spacing-xs, 0.4rem);
-  @include root-prop(--spacing-s, 0.8rem);
-  @include root-prop(--spacing-m, 1.6rem);
-  @include root-prop(--spacing-l, 2.4rem);
-  @include root-prop(--spacing-xl, 3.2rem);
-  @include root-prop(--spacing-xxl, 6.4rem);
+  --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
-  @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
-
-  // Color
-  @include root-prop(--lbry-black, $lbry-black);
-  @include root-prop(--lbry-white, $lbry-white);
-
-  @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);
-
-  @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);
-
-  @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);
+  --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
-  @include root-prop(--font-mono, "Fira Code");
-  @include root-prop(--font-sans, Inter);
-  @include root-prop(--font-serif, Georgia);
+  --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;
 }
--- a/sass/media/_index.scss
+++ b/sass/media/_index.scss
@ -1,192 +0,0 @@
-//  C O N T A I N E R S
-
-.media-grid {
-  display: grid;
-
-  // set your own grid-gap
-  // example → grid-gap: var(--spacing-s);
-
-  // set your own grid-template
-  // example → @include create-grid(4);
-
-  .media {
-    width: 100%;
-    cursor: pointer;
-    vertical-align: top;
-  }
-}
-
-.media-list { // sass-lint:disable-line no-empty-rulesets
-}
-
-.media-row { // sass-lint:disable-line no-empty-rulesets
-}
-
-
-
-.media {
-  position: relative;
-}
-
-
-
-//  M O D I F I E R S
-
-.media--large {
-  display: flex;
-
-  .media__info {
-    width: calc(100% - 20rem);
-    margin-left: var(--spacing-s);
-  }
-
-  .media__thumb {
-    width: 40rem;
-    margin-bottom: var(--spacing-s);
-  }
-}
-
-.media--placeholder {
-  > * {
-    @include placeholder;
-  }
-
-  .media__channel,
-  .media__date,
-  .media__title {
-    min-height: 1rem;
-  }
-
-  .media__channel {
-    width: 70%;
-  }
-
-  .media__date {
-    width: 30%;
-  }
-
-  .media__title {
-    width: 100%;
-  }
-}
-
-.media--small {
-  display: flex;
-  justify-content: space-between;
-
-  &:not(:last-of-type) {
-    margin-bottom: var(--spacing-s);
-  }
-
-  .media__info {
-    width: 50%;
-    padding-left: var(--spacing-s);
-  }
-
-  .media__properties {
-    bottom: -1.5rem; left: calc(-100% - 1.5rem);
-    position: absolute;
-  }
-
-  .media__thumb {
-    width: 50%;
-  }
-
-  .media__title {
-    height: 3rem;
-    line-height: 1.33;
-  }
-}
-
-.media--wide { // .media--search-result
-  display: flex;
-
-  &:not(:last-of-type) {
-    margin-bottom: var(--spacing-m);
-  }
-
-  .media__info {
-    width: calc(100% - 20rem);
-    margin-left: var(--spacing-s);
-  }
-
-  .media__properties {
-    bottom: -5.5rem; left: -20rem;
-    position: absolute;
-  }
-
-  .media__text { // .media__subtext
-    padding-top: var(--spacing-s);
-  }
-
-  .media__thumb {
-    width: 20rem;
-  }
-
-  .media__title {
-    font-size: 1.5rem;
-  }
-}
-
-
-
-//  C H I L D R E N
-
-.media__actions {
-  display: flex;
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
-}
-
-.media__content { // sass-lint:disable-line no-empty-rulesets
-}
-
-.media__date { // sass-lint:disable-line no-empty-rulesets
-}
-
-.media__info {
-  word-wrap: break-word;
-
-  [data-mode="dark"] & {
-    border-color: rgba($lbry-gray-5, 0.2);
-  }
-}
-
-.media__message {
-  padding: var(--spacing-s);
-  white-space: normal;
-}
-
-.media__properties {
-  vertical-align: top;
-
-  > *:not(:last-child) {
-    margin-right: var(--spacing-xs);
-  }
-
-  &:not(:empty) {
-    display: inline-block;
-  }
-}
-
-.media__property { // sass-lint:disable-line no-empty-rulesets
-}
-
-.media__subtitle {
-  position: relative;
-}
-
-.media__text {
-  [data-mode="dark"] & {
-    color: $lbry-white;
-  }
-}
-
-.media__thumb {
-  @include thumbnail;
-}
-
-.media__title {
-  font-weight: 600;
-  white-space: normal;
-}
--- a/sass/navigation/_index.scss
+++ b/sass/navigation/_index.scss
@ -1,30 +1,49 @@
 drawer-navigation {
-  width: 100%; height: 5rem;
+  width: 100%;
+  height: 5rem;

  display: inline-flex;
  flex: 1;
+  font-size: inherit;
+  justify-content: center;
  position: relative;
  z-index: 10;
 }

-drawer-section {
-  &:not(:last-of-type) {
-    padding-right: 1rem;
-  }
+drawer-navigation-helper {
+  // This is to make mouse movement forgiving
+  width: 0;
+  height: 0;
+  top: 3rem;
+  left: -5rem;

-  &:not(:hover) {
+  border-right: 8rem solid transparent;
+  border-bottom: 5rem solid transparent;
+  border-left: 8rem solid transparent;
+  position: absolute;
+}
+
+drawer-section {
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  &:not(:hover):not(.active) {
    drawer-title::after {
      background-color: transparent;
    }

+    drawer-navigation-helper,
    drawer-wrap {
      display: none;
    }
  }

-  &:hover {
+  &:hover,
+  &.active {
+    z-index: 3;
+
    drawer-title::after {
-      background-color: $lbry-teal-4;
+      background-color: var(--color-primary);
    }
  }
 }
@ -36,10 +55,13 @@ drawer-title {
  display: flex;
  line-height: 3;
  position: relative;
+  z-index: 1;

  &::after {
-    width: 100%; height: 1px;
-    bottom: -1px; left: 0;
+    width: 100%;
+    height: 1px;
+    bottom: -1px;
+    left: 0;

    content: "";
    position: absolute;
@ -49,19 +71,22 @@ drawer-title {

 drawer-wrap {
  width: 100%;
-  top: 5rem; left: 0;
+  top: 5rem;
+  left: 0;

-  background-color: $lbry-white;
-  border-top: 1px solid $lbry-gray-1;
+  background-color: var(--color-white);
+  border-top: 1px solid var(--color-gray-1);
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: absolute;

  &::after {
-    width: 100vw; height: calc(100vh - 5rem);
-    top: 5rem; left: 0;
+    width: 100vw;
+    height: calc(100vh - 5rem);
+    top: 5rem;
+    left: 0;

-    background-color: $lbry-black;
+    background-color: var(--color-black);
    content: "";
    opacity: 0.3;
    pointer-events: none;
@ -86,11 +111,11 @@ drawer-child {
  }

  &:hover {
-    border-color: $lbry-gray-1;
+    border-color: var(--color-gray-1);
    padding-left: var(--spacing-m);

    > a {
-      color: $lbry-teal-4;
+      color: var(--lbry-primary);
    }
  }

--- a/sass/table.scss
+++ b/sass/table.scss
@ -0,0 +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;
+}
+
+td {
+  // white-space: nowrap;
+}
+
+.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;
+}
--- a/sass/table/_index.scss
+++ b/sass/table/_index.scss
@ -1,44 +0,0 @@
-
-table {
-  width: 100%;
-  background-color: $lbry-white;
-  position: relative;
-
-  thead {
-    cursor: default;
-    position: relative;
-
-    tr {
-      position: relative;
-      z-index: 1;
-    }
-  }
-
-  tbody {
-    line-height: 1.55;
-  }
-
-  tr {
-    &:not(:last-of-type) {
-      td {
-        border-bottom: 1px solid $lbry-gray-1;
-      }
-    }
-  }
-
-  th,
-  td {
-    padding: 0.5rem 1rem;
-  }
-
-  th {
-    border-bottom: 2px solid $lbry-black;
-    letter-spacing: 0.1rem;
-    text-align: left;
-    text-transform: uppercase;
-  }
-
-  a {
-    font-weight: bolder;
-  }
-}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Sean Yesmunt	828bfbedb2	v4.2.5	2020-06-30 22:45:38 -04:00
Sean Yesmunt	ac1f0ff7ce	more form style consistency improvements	2020-06-30 22:45:24 -04:00
Sean Yesmunt	59b8a42319	v4.2.4	2020-06-30 12:35:20 -04:00
Sean Yesmunt	b981d3be37	add markdown editor to form margin styles	2020-06-30 12:35:14 -04:00
Sean Yesmunt	af571c112c	v4.2.3	2020-06-18 15:01:07 -04:00
Sean Yesmunt	2fabd94365	increase form element spacing	2020-06-18 15:00:58 -04:00
Sean Yesmunt	a024303f89	v4.2.2	2020-05-19 11:07:36 -04:00
Sean Yesmunt	b47b6c648d	use alt button style for tags	2020-05-19 11:07:29 -04:00
Sean Yesmunt	0bfdce101a	v4.2.1	2020-05-14 16:56:20 -04:00
Sean Yesmunt	cdcbbbe9ef	fix spacing on buttons	2020-05-14 16:56:13 -04:00
Sean Yesmunt	f593332d3b	v4.2.0	2020-05-14 12:21:21 -04:00
Sean Yesmunt	3b665fc31e	update button spacing and update spacing variables	2020-05-13 17:31:25 -04:00
Sean Yesmunt	b2e5a0cf84	v4.1.5	2020-05-11 12:35:39 -04:00
Sean Yesmunt	fccebdb253	update cost color	2020-05-11 12:35:30 -04:00
Sean Yesmunt	7e09adf4cd	v4.1.4	2020-05-04 10:51:45 -04:00
Sean Yesmunt	e283e51b20	improve alt button hover style	2020-05-04 10:51:37 -04:00
Sean Yesmunt	a43ecd4f04	v4.1.3	2020-05-01 13:30:56 -04:00
Sean Yesmunt	3aa08812ff	bold links	2020-05-01 13:30:47 -04:00
Sean Yesmunt	adb594ecc2	v4.1.2	2020-04-13 13:32:46 -04:00
Sean Yesmunt	917977a6f4	remove display: flex from form elements	2020-04-13 13:32:41 -04:00
Sean Yesmunt	ea2b50bbe4	4.1.1	2020-04-03 15:03:39 -04:00
Sean Yesmunt	8362dfa918	remove .section styles	2020-04-03 15:03:20 -04:00
Sean Yesmunt	c03c6fbeff	4.0.1	2020-03-31 15:27:07 -04:00
Sean Yesmunt	93dfa9e4b0	update button styles	2020-03-31 15:26:26 -04:00
Sean Yesmunt	cf56206189	4.0	2020-03-25 10:48:22 -04:00
Sean Yesmunt	66d27b72de	update range styles	2020-03-25 10:47:56 -04:00
jessopb	b72734ee54	Merge pull request #18 from jessopb/patch-2 fix demo	2020-03-05 17:58:01 -05:00
jessopb	90dfdd4d9f	fix demo	2020-03-05 17:54:17 -05:00
Sean Yesmunt	d4d9b810e0	v3.0.12	2020-02-24 14:22:54 -05:00
Sean Yesmunt	256268e5c9	fix disabled style for radio/checkbox	2020-02-24 14:22:40 -05:00
Sean Yesmunt	b055e2cef2	3.0.11	2020-02-21 16:51:56 -05:00
Sean Yesmunt	f4a4eb42b6	add radio/checkbox bg color variable	2020-02-21 16:51:39 -05:00
Sean Yesmunt	8a97ecb84f	3.0.10	2020-02-21 14:23:10 -05:00
Sean Yesmunt	b869ee26ea	fix disabled style	2020-02-21 14:22:49 -05:00
Sean Yesmunt	5c42bdbf1d	v3.0.9	2020-02-06 17:06:51 -05:00
Sean Yesmunt	7b0e5ad3d4	add variables for checkbox and radio inputs	2020-02-06 17:06:42 -05:00
Sean Yesmunt	0d8631aaf4	3.0.8	2020-01-23 14:55:51 -05:00
Sean Yesmunt	e710f80bac	remove stupid rule that I added	2020-01-23 14:55:36 -05:00
Sean Yesmunt	d684c9ee04	3.0.7	2020-01-15 12:57:49 -05:00
Sean Yesmunt	264159728f	prevent button stretching inside forms	2020-01-15 12:57:34 -05:00
Sean Yesmunt	fcb3d1a993	3.0.6	2020-01-14 12:35:13 -05:00
Sean Yesmunt	c0a5dcf26d	include form in stacked input style margins	2020-01-14 12:34:48 -05:00
Sean Yesmunt	be6f9ea538	remove p style	2020-01-06 13:34:23 -05:00
Sean Yesmunt	ab89c745aa	bump version	2019-12-19 15:14:38 -05:00
Sean Yesmunt	c1570dce2d	remove focus outline from components repo (#17 ) remove focus outline from components repo	2019-12-19 15:14:18 -05:00
Sean Yesmunt	4457e82ceb	fixes	2019-12-19 15:12:54 -05:00
Sean Yesmunt	47943181eb	bump version	2019-12-09 10:53:24 -05:00
Sean Yesmunt	f31f40b9e4	remove table__item--actionable from styles	2019-12-09 10:52:54 -05:00
Sean Yesmunt	bf22f352a0	3.0.2	2019-11-22 19:46:00 -05:00
Sean Yesmunt	67db5c582f	quick fix for cost badge	2019-11-22 19:45:48 -05:00
Sean Yesmunt	e208cd4e73	3.0.1	2019-11-22 19:33:50 -05:00
Sean Yesmunt	f130231660	fix radio styles	2019-11-22 19:33:24 -05:00
Sean Yesmunt	c4568592f2	bump version	2019-11-22 16:07:17 -05:00
Sean Yesmunt	a1f3b66b82	Merge pull request #16 from lbryio/styleguide Third times a charm! accessible components - v3	2019-11-22 16:05:59 -05:00
Sean Yesmunt	0fe7d15541	accessible components - v3	2019-11-22 16:04:26 -05:00
Sean Yesmunt	43666f869e	Revert "v3 - accessible components" (#15 ) Revert "v3 - accessible components"	2019-11-20 13:52:41 -05:00
Sean Yesmunt	0643daf9d3	Revert "v3 - accessible components"	2019-11-20 13:52:13 -05:00
Sean Yesmunt	e76431fc97	Merge pull request #14 from lbryio/styleguide v3 - accessible components	2019-11-19 23:42:45 -05:00
Sean Yesmunt	c3020a733f	v3 - accessible components	2019-11-19 23:40:28 -05:00
Sean Yesmunt	ff2759e4fa	Revert "v3 - accessible components" (#13 ) Revert "v3 - accessible components"	2019-11-01 11:59:22 -04:00
Sean Yesmunt	bf97e34c0f	Revert "v3 - accessible components"	2019-11-01 11:59:12 -04:00
Sean Yesmunt	d4864b1547	v3 - accessible components (#12 ) v3 - accessible components	2019-10-31 13:44:38 -04:00
Sean Yesmunt	1d7bc624a5	v3 - accessible components	2019-10-31 13:41:34 -04:00
Sean Yesmunt	996d983c55	version bump	2019-10-25 13:39:22 -04:00
Sean Yesmunt	d7f0d987a4	remove specificity/important rules	2019-10-25 13:36:41 -04:00
netop://ウエハ	58d40e645d	Updated deps and removed :not rule	2019-07-22 11:50:54 -05:00
netop://ウエハ	f3685d73b6	Updated deps	2019-06-27 11:31:49 -05:00
netop://ウエハ	5fdb86d406	Version bump	2019-06-27 11:30:48 -05:00
netop://ウエハ	5792f8dbec	Merge pull request #11 from lbryio/form remove form specificity form input styling	2019-06-27 11:29:07 -05:00
Sean Yesmunt	32902d35b7	remove form specificity form input styling	2019-06-25 22:57:02 -04:00
netop://ウエハ	f6c4d5c439	Updated deps	2019-06-10 13:13:41 -05:00
netop:// ウェッブ	afd70b0d1d	Merge pull request #10 from lbryio/tags Remove unused style and allow input borders to be changed with less code	2019-06-10 12:18:04 -05:00
Sean Yesmunt	ac332278a5	make input border easier to overide	2019-06-10 00:16:19 -04:00
Sean Yesmunt	bf98d38e75	remove badge--large	2019-06-10 00:15:04 -04:00
ポールウェッブ	267c2636eb	2.7.1	2019-05-07 10:56:07 -05:00
ポールウェッブ	5c47c17183	Checkboxes and radio buttons, now with enhanced clickability!	2019-05-07 10:55:38 -05:00
ポールウェッブ	b4dee0beba	2.7.0	2019-04-30 11:37:00 -05:00
netop:// ウェッブ	3c5702e0a0	Merge pull request #9 from lbryio/form-button only style submit buttons for forms	2019-04-29 11:09:42 -05:00
ポールウェッブ	6165f09572	Rebase	2019-04-29 11:08:55 -05:00
Sean Yesmunt	9d3d456e0a	only style submit buttons inside forms	2019-04-29 11:07:36 -05:00
netop:// ウェッブ	b263bcde05	Merge pull request #8 from lbryio/z-index remove z-index on checkbox toggle	2019-04-29 11:05:41 -05:00
Sean Yesmunt	c19b6b7616	only style submit buttons inside forms	2019-04-28 15:39:07 -04:00
Sean Yesmunt	a582b9053b	remove z-index on checkbox toggle	2019-04-28 13:45:22 -04:00
ポールウェッブ	cf350bb24b	2.6.0	2019-04-25 15:48:55 -05:00
ポールウェッブ	029474641f	Disabled inputs will not change on hover now	2019-04-25 15:48:32 -05:00
ポールウェッブ	a587adc149	2.5.0	2019-04-24 14:57:02 -05:00
ポールウェッブ	aaa5dc54aa	Updated deps and updated table header size	2019-04-24 14:56:26 -05:00
ポールウェッブ	847d206acd	2.4.0	2019-03-25 17:58:19 -05:00
ポールウェッブ	2838c5a3e1	Updated [disabled] state	2019-03-25 17:57:32 -05:00
ポールウェッブ	fac5d5c446	2.3.3	2019-03-20 14:57:38 -05:00
ポールウェッブ	f4b56000d8	Added active class rule to `drawer-section`	2019-03-20 14:56:53 -05:00
ポールウェッブ	bcde1c9131	2.3.2	2019-03-18 12:46:45 -05:00
ポールウェッブ	bafc9a5a8d	Updated pacakges	2019-03-18 12:46:07 -05:00
ポールウェッブ	29963bd810	2.3.1	2019-03-18 12:35:20 -05:00
ポールウェッブ	c6e286fd13	Updated email	2019-03-18 12:34:55 -05:00
ポールウェッブ	05690be96b	2.3.0	2019-03-11 10:42:27 -05:00
ポールウェッブ	76950be713	Styles for disabled buttons and changed all opaque colors to use CSS variables instead	2019-03-11 10:41:27 -05:00
netop:// ウェッブ	b6ab46d999	Merge pull request #7 from lbryio/button--link-1 Make links easier to override	2019-03-11 10:20:15 -05:00
Sean Yesmunt	00c88430c2	simpler button--link style rules	2019-03-08 18:30:24 -05:00
ポールウェッブ	8dce6d8242	2.2.6	2019-03-05 15:11:23 -06:00
ポールウェッブ	85a5be5635	Added compiled Sass file	2019-03-05 15:11:05 -06:00
ポールウェッブ	3cd08a1faa	Fixed Sass issues	2019-03-05 15:09:30 -06:00
ポールウェッブ	f477e725ca	Updated deps	2019-03-05 15:05:35 -06:00
ポールウェッブ	6fb7c3e321	Updated drawer-navigation	2019-03-05 15:02:41 -06:00
ポールウェッブ	2940659d1d	2.2.5	2019-02-26 15:54:07 -06:00
ポールウェッブ	9d299a7847	Added mixins	2019-02-26 15:53:50 -06:00
ポールウェッブ	d7c450cdc5	2.2.4	2019-02-20 16:22:31 -06:00
ポールウェッブ	6a427834e6	Compile	2019-02-20 16:22:18 -06:00
netop:// ウェッブ	4e081fb01a	Update _index.scss	2019-02-20 16:20:32 -06:00
netop:// ウェッブ	6bfd7cc992	Update _index.scss	2019-02-20 16:20:15 -06:00
Sean Yesmunt	d9307bc024	Don't turn links black inside forms	2019-02-20 17:16:33 -05:00
ポールウェッブ	cdd8fe15fb	2.2.3	2019-02-20 09:51:14 -06:00
ポールウェッブ	6c1268158c	Added button type to submit styling	2019-02-20 09:50:59 -06:00
ポールウェッブ	443563c17b	2.2.2	2019-02-20 09:30:12 -06:00
ポールウェッブ	28f5f1f5aa	Removed default border radius for some browsers	2019-02-20 09:29:51 -06:00
netop:// ウェッブ	d7480e9402	Merge pull request #6 from lbryio/typo typos	2019-02-20 09:06:58 -06:00
netop:// ウェッブ	6c14a80abb	Update _index.scss	2019-02-20 09:06:49 -06:00
Sean Yesmunt	0db60f36eb	update select caret for dark mode	2019-02-20 00:12:38 -05:00
Sean Yesmunt	717faf9f8f	format	2019-02-19 23:45:40 -05:00
Sean Yesmunt	8fc9613fea	typos	2019-02-19 23:44:38 -05:00
ポールウェッブ	bf41d17fca	2.2.1	2019-02-14 11:38:49 -06:00
netop:// ウェッブ	f9c0fccaf1	Merge pull request #5 from lbryio/app-fixes Changes for lbry-desktop	2019-02-13 17:33:39 -06:00
netop:// ウェッブ	99165ccdf1	Update README.md	2019-02-11 11:57:11 -06:00
netop:// ウェッブ	41c57c1a7b	Updated styling source for production	2019-02-11 11:55:31 -06:00
ポールウェッブ	6ea08a306e	Moved index.html to docs folder	2019-02-11 11:51:14 -06:00
ポールウェッブ	27174d7123	Added docs folder	2019-02-11 11:48:42 -06:00
ポールウェッブ	03c74b93b5	Updated README	2019-02-11 11:19:32 -06:00
ポールウェッブ	e1a66a4bb2	2.2.0	2019-02-11 10:51:15 -06:00
ポールウェッブ	bbc6365dc3	Removed @lbry/color and brought it in-house	2019-02-11 10:50:58 -06:00
				`@ -0,0 +1 @@`
				.badge,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{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{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}/# sourceMappingURL=badge.css.map /
				`@ -0,0 +1 @@`
				`{"version":3,"sourceRoot":"","sources":["../sass/badge.scss"],"names":[],"mappings":"AAAA,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA","file":"badge.css"}`
				`@ -0,0 +1 @@`
				.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link,.button--danger{border-radius:var(--border-radius)}.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)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary: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)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt: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 .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.button--icon.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--icon.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,.button--danger{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover,.button--danger:hover{text-decoration:underline;color:var(--color-link-hover)}.button--danger{color:var(--color-error)}/# sourceMappingURL=button.css.map /
				`@ -0,0 +1 @@`
				{"version":3,"sourceRoot":"","sources":["../sass/form.scss","../sass/init/_mixins.scss"],"names":[],"mappings":"AAEA,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAYJ,++DAME,4BAGF,mSACE,4BAGF,oOACE,gBAGF,uXAEE,WAIJ,oDAGE,aACA,sBAGF,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCYA,wCDJA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE","file":"form.css"}
				`@ -0,0 +1 @@`
				.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed 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}/# sourceMappingURL=table.css.map /