Merge 36c2056 into f498390

heyjul3s · Feb 1, 2021 · 1207357 · 1207357
2 parents f498390 + 36c2056
commit 1207357
Show file tree

Hide file tree

Showing 113 changed files with 707 additions and 426 deletions.
diff --git a/docs/assets/BuildIcon.tsx b/docs/assets/BuildIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { theme } from '../theme';
+
+export function BuildIcon() {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+    >
+      <path
+        fill={theme.colors.primary}
+        d="M91.12,49.71a28.81,28.81,0,0,0,6.49-30.78L83.37,33.18l-16.51,0,0-16.51L81.15,2.48A28.81,28.81,0,0,0,43.53,38.81L3.85,78.5A11.72,11.72,0,0,0,3.85,95l1.21,1.21a11.72,11.72,0,0,0,16.53,0L61.27,56.56A28.84,28.84,0,0,0,91.12,49.71ZM8.85,91.24a7,7,0,1,1,9.92,0A7,7,0,0,1,8.85,91.24Z"
+      />
+    </svg>
+  );
+}
diff --git a/...components/Nav/Mobile/icons/CloseIcon.tsx → docs/assets/CloseIcon.tsx b/...components/Nav/Mobile/icons/CloseIcon.tsx → docs/assets/CloseIcon.tsx
@@ -1,3 +1,6 @@
+import React from 'react';
+import { theme } from '../theme';
+
 export function CloseIcon() {
   return (
     <svg
@@ -15,7 +18,7 @@ export function CloseIcon() {
       c3.8,3.8,3.8,9.9,0,13.7C92.7,96.2,90.3,97.1,87.8,97.1z"
             style={{
               fill: 'transparent',
-              stroke: '#fff',
+              stroke: `${theme.colors.white}`,
               strokeLinecap: 'round',
               strokeLinejoin: 'round',
               strokeWidth: '3.2px'
@@ -28,7 +31,7 @@ export function CloseIcon() {
       c3.8,3.8,3.8,9.9,0,13.7L19.2,94.3C17.3,96.2,14.8,97.1,12.3,97.1z"
             style={{
               fill: 'transparent',
-              stroke: '#fff',
+              stroke: `${theme.colors.white}`,
               strokeLinecap: 'round',
               strokeLinejoin: 'round',
               strokeWidth: '3.2px'

diff --git a/...nents/Nav/Mobile/icons/ComponentsIcon.tsx → docs/assets/ComponentsIcon.tsx b/...nents/Nav/Mobile/icons/ComponentsIcon.tsx → docs/assets/ComponentsIcon.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { SVGwrapper } from '../styles';
+import { theme } from '../theme';
 
 export function ComponentsIcon() {
   return (
-    <SVGwrapper
+    <svg
       version="1.1"
       id="Layer_1"
       xmlns="http://www.w3.org/2000/svg"
@@ -12,7 +12,14 @@ export function ComponentsIcon() {
       viewBox="0 0 100 100"
     >
       <style type="text/css">
-        {`.st0{fill:#FFFFFF;stroke:#F15E22;stroke-width:2.3472;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}`}
+        {`.st0{
+          fill: ${theme.colors.white};
+          stroke: ${theme.colors.primary};
+          stroke-width:2.3472;
+          stroke-linecap:round;
+          stroke-linejoin:round;
+          stroke-miterlimit:10;
+        }`}
       </style>
       <g>
         <polygon className="st0" points="50,98.2 9.1,74.2 9.1,23.7 50,47.7 	" />
@@ -25,6 +32,6 @@ export function ComponentsIcon() {
           points="25.9,39.2 50,26.3 74.1,39.2 50,53.4 	"
         />
       </g>
-    </SVGwrapper>
+    </svg>
   );
 }
diff --git a/docs/assets/ExtensibleIcon.tsx b/docs/assets/ExtensibleIcon.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { theme } from '../theme';
+
+export function ExtensibleIcon() {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <clipPath id="clip-path">
+          <rect
+            fill="none"
+            x="1694.39"
+            y="-45.12"
+            width="355.81"
+            height="354.97"
+          />
+        </clipPath>
+      </defs>
+
+      <g clipPath={'url(#clip-path)'}>
+        <line
+          fill="none"
+          stroke={`${theme.colors.primary}`}
+          strokeWidth={'0.88px'}
+          strokeMiterlimit={10}
+          x1="593.88"
+          y1="-66.58"
+          x2="75.37"
+          y2="331.31"
+        />
+        <line
+          fill="none"
+          stroke={`${theme.colors.primary}`}
+          strokeWidth={'0.88px'}
+          strokeMiterlimit={10}
+          x1="604.49"
+          y1="-66.58"
+          x2="85.98"
+          y2="331.31"
+        />
+        <line
+          fill="none"
+          stroke={`${theme.colors.primary}`}
+          strokeWidth={'0.88px'}
+          strokeMiterlimit={10}
+          x1="615.09"
+          y1="-66.58"
+          x2="96.58"
+          y2="331.31"
+        />
+      </g>
+      <circle fill={theme.colors.primary} cx="12.68" cy="50" r="12.1" />
+      <circle
+        fill="none"
+        strokeMiterlimit={10}
+        stroke={theme.colors.primary}
+        strokeWidth={'7.23px'}
+        cx="51.68"
+        cy="50"
+        r="12.1"
+      />
+      <circle fill={theme.colors.primary} cx="87.32" cy="50" r="12.1" />
+    </svg>
+  );
+}
diff --git a/.../components/Nav/Mobile/icons/HomeIcon.tsx → docs/assets/HomeIcon.tsx b/.../components/Nav/Mobile/icons/HomeIcon.tsx → docs/assets/HomeIcon.tsx
@@ -1,17 +1,30 @@
-import { SVGwrapper } from '../styles';
+import React from 'react';
+import { theme } from '../theme';
 
 export function HomeIcon() {
   return (
-    <SVGwrapper
+    <svg
       version="1.1"
       id="Layer_1"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 100 100"
     >
       <style type="text/css">
         {`
-          .st0{fill:none;stroke:#F15E22;stroke-width:1.9492;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	        .st1{fill:none;stroke:#F15E22;stroke-width:1.9492;stroke-miterlimit:10;}
+          .st0{
+            fill:none;
+            stroke:${theme.colors.primary};
+            stroke-width:1.9492;
+            stroke-linecap:round;
+            stroke-linejoin:round;
+            stroke-miterlimit:10;
+          }
+	        .st1{
+            fill:none;
+            stroke:${theme.colors.primary};
+            stroke-width:1.9492;
+            stroke-miterlimit:10;
+          }
         `}
       </style>
       <g>
@@ -27,6 +40,6 @@ export function HomeIcon() {
         />
         <circle className="st0" cx="50.5" cy="65.8" r="13.6" />
       </g>
-    </SVGwrapper>
+    </svg>
   );
 }
diff --git a/...components/Nav/Mobile/icons/HooksIcon.tsx → docs/assets/HooksIcon.tsx b/...components/Nav/Mobile/icons/HooksIcon.tsx → docs/assets/HooksIcon.tsx
@@ -1,8 +1,9 @@
-import { SVGwrapper } from '../styles';
+import React from 'react';
+import { theme } from '../theme';
 
 export function HooksIcon() {
   return (
-    <SVGwrapper
+    <svg
       id="Layer_1"
       data-name="Layer 1"
       xmlns="http://www.w3.org/2000/svg"
@@ -12,8 +13,8 @@ export function HooksIcon() {
         d="M58.73,49.68V39H40.64s0,11.17,0,11.17l17.11,17.1a10.1,10.1,0,0,1,0,14.23h0a10.1,10.1,0,0,1-14.23,0L26.63,64.58a25.29,25.29,0,1,0,32.1-14.9Z"
         transform="translate(-24.04 -0.56)"
         style={{
-          fill: '#fff',
-          stroke: '#f15f24',
+          fill: `${theme.colors.white}`,
+          stroke: `${theme.colors.primary}`,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
           strokeWidth: '1.8px'
@@ -25,8 +26,8 @@ export function HooksIcon() {
         width="18.38"
         height="3.84"
         style={{
-          fill: '#fff',
-          stroke: '#f15f24',
+          fill: `${theme.colors.white}`,
+          stroke: `${theme.colors.primary}`,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
           strokeWidth: '1.8px'
@@ -38,8 +39,8 @@ export function HooksIcon() {
         width="18.38"
         height="10.61"
         style={{
-          fill: '#fff',
-          stroke: '#f15f24',
+          fill: `${theme.colors.white}`,
+          stroke: `${theme.colors.primary}`,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
           strokeWidth: '1.8px'
@@ -50,8 +51,8 @@ export function HooksIcon() {
         cy="19.24"
         r="11.25"
         style={{
-          fill: '#fff',
-          stroke: '#f15f24',
+          fill: `${theme.colors.white}`,
+          stroke: `${theme.colors.primary}`,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
           strokeWidth: '1.8px'
@@ -62,13 +63,13 @@ export function HooksIcon() {
         cy="19.24"
         r="2.92"
         style={{
-          fill: '#fff',
-          stroke: '#f15f24',
+          fill: `${theme.colors.white}`,
+          stroke: `${theme.colors.primary}`,
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
           strokeWidth: '1.8px'
         }}
       />
-    </SVGwrapper>
+    </svg>
   );
 }
diff --git a/docs/assets/LightweightIcon.tsx b/docs/assets/LightweightIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { theme } from '../theme';
+
+export function LightweightIcon() {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+    >
+      <path
+        fill={theme.colors.primary}
+        d="M41.13,32.52,32.69,21.43V32.52H26.57V7.4h6.12v11l8.37-11h7.2L38.52,19.71,48.61,32.52Z"
+      />
+      <path
+        fill={theme.colors.primary}
+        d="M70.23,21.8a6.13,6.13,0,0,1,1.33,3.89,6.19,6.19,0,0,1-2.2,5,9.3,9.3,0,0,1-6.14,1.84H51.51V7.4H62.82a9.26,9.26,0,0,1,6,1.75A5.81,5.81,0,0,1,71,13.91a5.73,5.73,0,0,1-1.16,3.69,6,6,0,0,1-3.09,2A5.84,5.84,0,0,1,70.23,21.8Zm-12.6-4.24h4A3.57,3.57,0,0,0,64,16.9,2.37,2.37,0,0,0,64.76,15,2.42,2.42,0,0,0,64,13a3.52,3.52,0,0,0-2.31-.68h-4Zm6.89,9.33a2.49,2.49,0,0,0,.84-2,2.59,2.59,0,0,0-.87-2.07A3.61,3.61,0,0,0,62.07,22H57.63v5.54h4.51A3.65,3.65,0,0,0,64.52,26.89Z"
+      />
+      <path
+        fill={theme.colors.primary}
+        d="M49.93,92.6a7.58,7.58,0,0,1-5.4-2.24L8.74,54.58A7.65,7.65,0,0,1,19.55,43.76L55.34,79.55a7.65,7.65,0,0,1-5.41,13Z"
+      />
+      <path
+        fill={theme.colors.primary}
+        d="M50.07,92.6a7.65,7.65,0,0,1-5.41-13L80.45,43.76A7.65,7.65,0,0,1,91.26,54.58L55.47,90.36A7.58,7.58,0,0,1,50.07,92.6Z"
+      />
+    </svg>
+  );
+}
diff --git a/docs/assets/Logo.tsx b/docs/assets/Logo.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { theme } from '../theme';
+
+export function Logo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.21 185.3">
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            d="M1.68,162.65a12.43,12.43,0,0,1,4.56-5.16,11.89,11.89,0,0,1,6.45-1.81A11.09,11.09,0,0,1,18,156.92a9.11,9.11,0,0,1,3.53,3.25v-4.08h8.82v28.8H21.57v-4.08A9.51,9.51,0,0,1,18,184.06a11,11,0,0,1-5.34,1.24,11.73,11.73,0,0,1-6.4-1.83,12.64,12.64,0,0,1-4.56-5.21A17.37,17.37,0,0,1,0,170.44,17.15,17.15,0,0,1,1.68,162.65Zm18.06,2.63a6,6,0,0,0-4.47-1.91,6,6,0,0,0-4.46,1.88A7.15,7.15,0,0,0,9,170.44a7.32,7.32,0,0,0,1.83,5.24,5.91,5.91,0,0,0,4.46,1.93,5.93,5.93,0,0,0,4.47-1.91,8.33,8.33,0,0,0,0-10.42Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M49.49,157.15a10,10,0,0,1,5.16-1.37v9.34H52.22a7.46,7.46,0,0,0-4.95,1.42q-1.65,1.43-1.65,5v13.37H36.79v-28.8h8.83v4.8A11.61,11.61,0,0,1,49.49,157.15Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M74.93,177.41v7.48H70.44q-4.8,0-7.48-2.35c-1.79-1.56-2.69-4.12-2.69-7.66V163.42H56.76v-7.33h3.51v-7H69.1v7h5.78v7.33H69.1V175a2.4,2.4,0,0,0,.62,1.86,3,3,0,0,0,2.06.57Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M80.48,151.73A4.43,4.43,0,0,1,79,148.35a4.49,4.49,0,0,1,1.47-3.43,5.35,5.35,0,0,1,3.79-1.37A5.29,5.29,0,0,1,88,144.92a4.49,4.49,0,0,1,1.47,3.43A4.43,4.43,0,0,1,88,151.73a5.29,5.29,0,0,1-3.74,1.37A5.35,5.35,0,0,1,80.48,151.73Zm8.18,4.36v28.8H79.83v-28.8Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M109.5,163.42h-4.74v21.47H95.93V163.42h-3.2v-7.33h3.2v-.82q0-5.33,3-8.08t8.92-2.76c.66,0,1.14,0,1.45,0V152a5,5,0,0,0-3.56.73,4,4,0,0,0-1,3.14v.26h4.74Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M113.55,162.65a12.46,12.46,0,0,1,4.57-5.16,11.89,11.89,0,0,1,6.45-1.81,11,11,0,0,1,5.34,1.24,9.14,9.14,0,0,1,3.54,3.25v-4.08h8.82v28.8h-8.82v-4.08a9.51,9.51,0,0,1-3.59,3.25,11,11,0,0,1-5.34,1.24,11.73,11.73,0,0,1-6.4-1.83,12.66,12.66,0,0,1-4.57-5.21,17.5,17.5,0,0,1-1.67-7.82A17.28,17.28,0,0,1,113.55,162.65Zm18.07,2.63a6.21,6.21,0,0,0-8.93,0,7.15,7.15,0,0,0-1.83,5.19,7.32,7.32,0,0,0,1.83,5.24,6.15,6.15,0,0,0,8.93,0,8.33,8.33,0,0,0,0-10.42Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M166.27,184.89l-8.77-12.08v12.08h-8.83V146.7h8.83v21.11l8.72-11.72h10.89l-12,14.45,12.08,14.35Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M149,92.52A59.71,59.71,0,0,1,119,123h31.32V91.25Z"
+            fill={theme.colors.primary}
+          />
+          <path
+            d="M149.51,62.09h0V.15H91.72C90.35.06,89,0,87.57,0a61.94,61.94,0,1,0,61.94,62.09ZM87.57,75.71a13.77,13.77,0,1,1,13.77-13.77A13.77,13.77,0,0,1,87.57,75.71Z"
+            fill={theme.colors.primary}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}