chore(docs): Separate Code and CodeBlock into separate folders

Author: mlaursen

packages/documentation/src/_everything.scss

@@ -5,21 +5,3 @@
     $rmd-theme-secondary: $rmd-pink-a-200,
     $rmd-utils-auto-dense: true
   );
-
-$solarized-base-03: #002b36;
-$solarized-base-02: #073642;
-$solarized-base-01: #586e75;
-$solarized-base-00: #657b83;
-$solarized-base-0: #839496;
-$solarized-base-1: #93a1a1;
-$solarized-base-2: #eee8d5;
-$solarized-base-3: #fdf6e3;
-
-$solarized-yellow: #b58900;
-$solarized-orange: #cb4b16;
-$solarized-red: #d30102;
-$solarized-magenta: #d33682;
-$solarized-violet: #6c71c4;
-$solarized-blue: #268bd2;
-$solarized-cyan: #2aa198;
-$solarized-green: #859900;

packages/documentation/src/components/Code/Code.module.scss

@@ -1,4 +1,4 @@
-@use '../../everything' as *;
+@use 'react-md' as *;
 
 .code {
   @include rmd-typography(body-1);

packages/documentation/src/components/Code/index.ts

@@ -1,2 +1 @@
-export { default as Code } from "./Code";
-export { default as CodeBlock } from "./CodeBlock";
+export { default } from "./Code";

packages/documentation/src/components/Code/CodeBlock.module.scss renamed to packages/documentation/src/components/CodeBlock/CodeBlock.module.scss

@@ -1,10 +1,11 @@
-@use '../../everything' as *;
+@use 'react-md' as *;
+@use './solarized';
 
 .block {
   @include rmd-typography(body-1);
 
-  background-color: $solarized-base-03;
-  color: $solarized-base-1;
+  background-color: solarized.$base-03;
+  color: solarized.$base-1;
 
   // always enforce ltr for blocked code
   direction: ltr;
@@ -15,7 +16,7 @@
 
   &::selection,
   *::selection {
-    background-color: $solarized-base-02;
+    background-color: solarized.$base-02;
   }
 
   // to help with the collapse transition on expandable code, update it so
@@ -34,45 +35,45 @@
 
       &.comment,
       &.doctype {
-        color: $solarized-base-01;
+        color: solarized.$base-01;
       }
 
       &.keyword {
-        color: $solarized-green;
+        color: solarized.$green;
       }
 
       &.punctuation {
-        color: $solarized-base-01;
+        color: solarized.$base-01;
       }
 
       &.inserted,
       &.string,
       .language-tsx &.attr-value {
-        color: $solarized-cyan;
+        color: solarized.$cyan;
       }
 
       &.tag,
       &.selector,
       &.class-name {
-        color: $solarized-blue;
+        color: solarized.$blue;
       }
 
       &.attr-name,
       &.property,
       &.builtin {
-        color: $solarized-yellow;
+        color: solarized.$yellow;
       }
 
       &.script,
       &.interpolation {
-        color: $solarized-base-1;
+        color: solarized.$base-1;
       }
 
       &.deleted,
       &.boolean,
       &.number,
       &.interpolation-punctuation {
-        color: $solarized-red;
+        color: solarized.$red;
       }
 
       &.important,
@@ -92,16 +93,16 @@
 
   &:global(.language-scss) :global .token.function,
   &:global(.language-scss) :global .token.variable {
-    color: $solarized-blue;
+    color: solarized.$blue;
   }
 
   &:global(.language-ts) :global .token + .class-name {
-    color: $solarized-base-1;
+    color: solarized.$base-1;
   }
 
   &:global(.language-scss) :global .token.function,
   &:global(.language-shell) :global .token.function {
-    color: $solarized-orange;
+    color: solarized.$orange;
   }
 }
 

packages/documentation/src/components/Code/CodeBlock.tsx renamed to packages/documentation/src/components/CodeBlock/CodeBlock.tsx

@@ -6,8 +6,8 @@ import React, {
 } from "react";
 import cn from "classnames";
 
+import Code from "../Code";
 import styles from "./CodeBlock.module.scss";
-import Code from "./Code";
 import LineNumbers from "./LineNumbers";
 import { highlightCode } from "./utils";
 

packages/documentation/src/components/Code/LineNumbers.module.scss renamed to packages/documentation/src/components/CodeBlock/LineNumbers.module.scss

@@ -1,7 +1,7 @@
-@use '../../everything' as *;
+@use './solarized';
 
 .container {
-  border-right: 1px solid $solarized-base-01;
+  border-right: 1px solid solarized.$base-01;
   counter-reset: line-numbers;
   display: flex;
   flex-direction: column;

packages/documentation/src/components/Code/LineNumbers.tsx renamed to packages/documentation/src/components/CodeBlock/LineNumbers.tsx

@@ -0,0 +1,17 @@
+$base-03: #002b36;
+$base-02: #073642;
+$base-01: #586e75;
+$base-00: #657b83;
+$base-0: #839496;
+$base-1: #93a1a1;
+$base-2: #eee8d5;
+$base-3: #fdf6e3;
+
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #d30102;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;

packages/documentation/src/components/CodeBlock/_solarized.scss

@@ -0,0 +1 @@
+export { default } from "./CodeBlock";