linter fixes

Author: gdams

.github/linters/.stylelintrc.json

@@ -7,6 +7,9 @@
         "number-leading-zero": null,
         "color-function-notation": null,
         "no-descending-specificity": null,
-        "selector-class-pattern": null
+        "selector-class-pattern": null,
+        "scss/at-import-partial-extension": null,
+        "property-no-vendor-prefix": null,
+        "selector-pseudo-class-no-unknown": null
     }
 }

src/components/CodeBox/index.module.scss

@@ -1,8 +1,8 @@
-@import './light.module.scss';
+@import "./light.module.scss";
 
-%baseStyles {
+%base-styles {
   border-radius: 0.3rem;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   font-size: 1em;
 
   -webkit-hyphens: none;
@@ -25,15 +25,15 @@
 }
 
 .code {
-  @extend %baseStyles;
+  @extend %base-styles;
   font-weight: var(--font-weight-light);
   padding: 0 6px;
 
   white-space: break-spaces;
 }
 
 .pre {
-  @extend %baseStyles;
+  @extend %base-styles;
 
   padding: 0 !important;
 
@@ -54,7 +54,7 @@
 
     span {
       background-color: var(--black4);
-      border-radius: 0 0 0.3rem 0;
+      border-radius: 0 0 0.3rem;
       color: var(--black9);
     }
 
@@ -77,7 +77,7 @@
 
 :global(.light) {
   .pre {
-    @include lightStyles;
+    @include light-styles;
   }
 
   .code {

src/components/CodeBox/index.tsx

@@ -23,7 +23,6 @@ const CodeBox = ({ children: { props } }: Props): JSX.Element => {
   const [parsedCode, setParsedCode] = useState('');
   const [copied, copyText] = useCopyToClipboard();
 
-  // eslint-disable-next-line react/prop-types
   const className = props.className || 'text';
 
   // Language Matches in class
@@ -45,7 +44,6 @@ const CodeBox = ({ children: { props } }: Props): JSX.Element => {
     setParsedCode(
       highlight(stringCode, prismLanguage, language)
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -58,7 +56,6 @@ const CodeBox = ({ children: { props } }: Props): JSX.Element => {
       </div>
       <div
         className={styles.content}
-        // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: parsedCode }}
       />
     </pre>

src/components/CodeBox/light.module.scss

@@ -1,76 +1,77 @@
-@mixin lightStyles {
-    background: var(--black2);
-    color: black;
-  
-    :global .token {
-      &.comment,
-      &.prolog,
-      &.doctype,
-      &.cdata {
+@mixin light-styles {
+  background: var(--black2);
+  color: black;
+
+  :global .token {
+    &.comment,
+    &.prolog,
+    &.doctype,
+    &.cdata {
         color: slategray;
-      }
-  
-      &.namespace {
+    }
+
+    &.namespace {
         opacity: 0.7;
-      }
-  
-      &.property,
-      &.tag,
-      &.boolean,
-      &.number,
-      &.constant,
-      &.symbol,
-      &.deleted {
+    }
+
+    &.property,
+    &.tag,
+    &.boolean,
+    &.number,
+    &.constant,
+    &.symbol,
+    &.deleted {
         color: #905;
-      }
-  
-      &.selector,
-      &.attr-name,
-      &.char,
-      &.builtin,
-      &.inserted {
+    }
+
+    &.selector,
+    &.attr-name,
+    &.char,
+    &.builtin,
+    &.inserted {
         color: #690;
-      }
-  
-      &.entity,
-      &.url {
-        background: hsla(0, 0%, 100%, 0.5);
+    }
+
+    &.entity,
+    &.url {
+        background: hsla(0deg, 0%, 100%, 50%);
         color: #9a6e3a;
-      }
-  
-      &.atrule,
-      &.attr-value,
-      &.keyword {
+    }
+
+    &.atrule,
+    &.attr-value,
+    &.keyword {
         color: #07a;
-      }
-  
-      &.function,
-      &.class-name {
+    }
+
+    &.function,
+    &.class-name {
         color: #dd4a68;
-      }
-  
-      &.regex,
-      &.important,
-      &.variable {
+    }
+
+    &.regex,
+    &.important,
+    &.variable {
         color: #e90;
-      }
-  
-      &.important,
-      &.bold {
+    }
+
+    &.important,
+    &.bold {
         font-weight: var(--font-weight-vold);
-      }
-      &.italic {
+    }
+
+    &.italic {
         font-style: italic;
-      }
-  
-      &.entity {
+    }
+
+    &.entity {
         cursor: help;
-      }
-  
-      &.punctuation,
-      &.operator,
-      &.string {
+    }
+
+    &.punctuation,
+    &.operator,
+    &.string {
         background-color: var(--black2);
-      }
     }
-  }
+  }
+}

src/components/Layout/layout.scss

@@ -12,6 +12,7 @@ $secondary: #dadada;
 }
 
 body {
+  --black2: #e9edf0;
   --black4: #cbd4d9;
   --black9: #2c3437;
   --brand4: #c52158;
@@ -22,6 +23,7 @@ body {
   --color-fill-banner: #9992;
   --color-text-primary: var(--black9);
   --color-text-accent: var(--color-brand-primary);
+  --font-weight-light: 300;
 
   background-color: var(--bg);