Merge pull request #109 from otegami/remove-import-from-styles

Use sass-migrator to update our stylesheets without `@import` rules

_assets/css/base/_elements.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 // scss-lint:disable unknownProperties
 
 * {
@@ -15,24 +17,24 @@ body {
   padding: 0;
   position: relative;
   overflow-x: hidden;
-  color: $color-text;
-  font-family: $serif-stack;
-  font-size: $font-base-small;
+  color: mixins.$color-text;
+  font-family: mixins.$serif-stack;
+  font-size: mixins.$font-base-small;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
 
-  @include media(large) {
-    font-size: $font-base-medium;
+  @include mixins.media(large) {
+    font-size: mixins.$font-base-medium;
   }
 
-  @include media(x-large) {
-    font-size: $font-base-large;
+  @include mixins.media(x-large) {
+    font-size: mixins.$font-base-large;
   }
 }
 
 a {
-  color: $color-text;
+  color: mixins.$color-text;
   font-weight: 550;
   margin: -.2rem;
   padding: .2rem;
@@ -41,27 +43,27 @@ a {
   text-decoration-width: 0.1rem;
 
   &:visited {
-    color: $color-text;
+    color: mixins.$color-text;
   }
 
   @media (hover: hover) {
 
     &:hover {
-      text-decoration-color: $color-accent;
+      text-decoration-color: mixins.$color-accent;
       text-decoration-thickness: 0.2em;
       text-decoration-width: 0.2em;
     }
   }
 
   &:active {
-    color: $color-text;
+    color: mixins.$color-text;
   }
 }
 
 h1, h2, h3 {
   margin-top: 1.5em;
   margin-bottom: 0.75em;
-  font-family: $sans-stack;
+  font-family: mixins.$sans-stack;
   font-weight: 600;
   letter-spacing: -.01em;
   line-height: 1.1em;
@@ -71,19 +73,19 @@ h1, h2, h3 {
 
 h1 {
   margin-top: 2em;
-  font-size: $font-xxx-large;
+  font-size: mixins.$font-xxx-large;
   font-weight: 700;
 }
 
 h2 {
   margin-top: 2.5em;
-  font-size: $font-xx-large;
+  font-size: mixins.$font-xx-large;
   text-align: center;
 }
 
 h3 {
   margin-top: 2.5em;
-  font-size: $font-x-large;
+  font-size: mixins.$font-x-large;
   font-weight: 500;
   letter-spacing: 0.01em;
 }
@@ -118,7 +120,7 @@ blockquote {
   position: relative;
   margin-bottom: 1.5em;
   padding: 0 0 0 2em;
-  border-left: 2px solid $color-text;
+  border-left: 2px solid mixins.$color-text;
   text-align: left;
 
   &:before {
@@ -150,10 +152,10 @@ hr {
 
 code,
 pre {
-  font-family: $mono-stack;
+  font-family: mixins.$mono-stack;
   line-height: 1.25;
   padding:  0 0.1em;
-  background-color: $color-tint;
+  background-color: mixins.$color-tint;
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -176,9 +178,9 @@ pre {
   margin-top: 0;
   margin-bottom: 2em;
   font-weight: 400;
-  background: $color-tint;
+  background: mixins.$color-tint;
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     margin: 0 0 2em 0;
   }
 
@@ -191,7 +193,7 @@ pre {
     bottom: 0;
     right: 0;
     width: 2em;
-    background: linear-gradient(to right, rgba($color-tint, 0), $color-tint);
+    background: linear-gradient(to right, rgba(mixins.$color-tint, 0), mixins.$color-tint);
   }
 }
 
@@ -216,12 +218,12 @@ table {
 }
 
 thead {
-  background-color: $color-tint;
-  font-family: $sans-stack;
+  background-color: mixins.$color-tint;
+  font-family: mixins.$sans-stack;
 }
 
 tr {
-  border-bottom: 0.125em solid $color-tint;
+  border-bottom: 0.125em solid mixins.$color-tint;
 }
 
 th,

_assets/css/components/_anchor.scss

@@ -1,8 +1,10 @@
+@use "../base/mixins";
+
 .anchor {
   float: left;
   margin: 0 0 0 -1em;
   padding: 0;
-  font-size: $font-x-small;
+  font-size: mixins.$font-x-small;
   text-decoration: none;
   opacity: 0.5;
 }

_assets/css/components/_button.scss

@@ -1,27 +1,29 @@
+@use "../base/mixins";
+
 .button {
   transition: font-weight 0.1s ease, clip-path 0.2s ease, background-color 0.2s ease;
   display: inline-block;
   padding: 1em 1.5em;
-  color: $color-text;
-  font-family: $sans-stack;
+  color: mixins.$color-text;
+  font-family: mixins.$sans-stack;
   text-decoration: none;
   text-align: center;
   line-height: normal;
   -webkit-appearance: none;
-  background-color: $color-brand;
+  background-color: mixins.$color-brand;
   border: 0;
   box-shadow: none;
   clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%);
 
   &:visited {
-    color: $color-text;
+    color: mixins.$color-text;
   }
 
   @media (hover: hover) {
 
     &:hover {
-      color: $color-text;
-      background-color: $color-accent;
+      color: mixins.$color-text;
+      background-color: mixins.$color-accent;
       cursor: pointer;
       text-decoration: none;
       font-weight: 800;

_assets/css/components/_docs.scss

@@ -1,3 +1,5 @@
+@use "../base/mixins";
+
 // docs layout ////////////////////////////////////////////////////////////
 
 .docs {
@@ -7,11 +9,11 @@
 .docs__content {
   grid-column-start: 2;
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     grid-column: 6 / span 8;
   }
 
-  @include media(large) {
+  @include mixins.media(large) {
     grid-column: 5 / span 8;
   }
 
@@ -34,14 +36,14 @@
   text-align: left;
   overflow-y: auto;
 
-  @include media(small) {
+  @include mixins.media(small) {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1em 0;
   }
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     grid-column: 2 / span 4;
     position: -webkit-sticky;
     position: sticky;
@@ -51,7 +53,7 @@
     padding: 3.25em 0 0 0;
   }
 
-  @include media(large) {
+  @include mixins.media(large) {
     grid-column: 2 / span 3;
   }
 }
@@ -63,7 +65,7 @@
 .docs__screenshot {
   max-width: 100%;
   height: auto;
-  border: 0.2rem solid $color-background;
+  border: 0.2rem solid mixins.$color-background;
   border-radius: 5px;
-  box-shadow: 0 0 1em rgba($color-text, 0.1);
+  box-shadow: 0 0 1em rgba(mixins.$color-text, 0.1);
 }

_assets/css/components/_grid.scss

@@ -1,9 +1,12 @@
+@use "sass:string";
+@use "../base/mixins";
+
 // grid system ////////////////////////////////////////////////////////////////
 .grid {
   display: grid;
   grid-template-columns: 1fr minmax(80vw, 100%) 1fr;
   align-items: start;
-  column-gap: unquote("min(5vw, 4rem)");
+  column-gap: string.unquote("min(5vw, 4rem)");
 
   > .grid {
     grid-column: 1 / -1;
@@ -13,16 +16,16 @@
     grid-column: 2;
   }
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     grid-template-columns: 1fr repeat(12, minmax(2rem, 100%)) 1fr;
-    column-gap: unquote("min(3vw, 5rem)");
+    column-gap: string.unquote("min(3vw, 5rem)");
 
     > *:not([class*="grid"]) {
       grid-column: 4 / span 8;
     }
   }
 
-  @include media(x-large) {
+  @include mixins.media(x-large) {
     grid-template-columns: 1fr repeat(12, 7.5rem) 1fr;
     column-gap: 4rem;
   }
@@ -36,7 +39,7 @@
   &--bleed-right { grid-column-end: -1; }
   &--bleed-full { grid-column: 1 / -1; }
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     //grid-column: 4 / span 8;
 
     &--span-3 { grid-column-end: span 3; }

_assets/css/components/_jump.scss

@@ -1,19 +1,21 @@
+@use "../base/mixins";
+
 // jump nav ///////////////////////////////////////////////////////////////
 
 .jump {
   width: 100%;
   margin: 0;
   padding: 0 1em;
-  color: $color-background;
-  background-color: $color-brand;
+  color: mixins.$color-background;
+  background-color: mixins.$color-brand;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: $sans-stack;
+  font-family: mixins.$sans-stack;
   text-transform: uppercase;
   font-style: italic;
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     justify-content: flex-start;
   }
 }
@@ -44,21 +46,21 @@
   display: inline-block;
   margin: 0;
   padding: 0.5em 0.125em;
-  color: $color-background;
+  color: mixins.$color-background;
   font-weight: 500;
   text-decoration: none;
 
-  @include media(medium) {
+  @include mixins.media(medium) {
     padding: 0.125em;
-    font-size: $font-small;
+    font-size: mixins.$font-small;
   }
 
   &:visited {
-    color: $color-background;
+    color: mixins.$color-background;
   }
 
   &:hover {
-    color: $color-accent;
+    color: mixins.$color-accent;
   }
 }
 
@@ -68,7 +70,7 @@
 }
 
 .jump__list-link--active {
-  color: $color-accent !important;
+  color: mixins.$color-accent !important;
   text-decoration: none;
   pointer-events: none;
 }
@@ -81,7 +83,7 @@
 
 .jump__list-info {
 
-  @include media(small) {
+  @include mixins.media(small) {
     clip: rect(1px, 1px, 1px, 1px);
     position: absolute !important;
     height: 1px;