From e910ab072ac6265b527569d11679a98a8533326b Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Fri, 19 May 2023 04:05:17 +0000
Subject: [PATCH 1/6] fix: remove spectrum community dead link

---
 README.md                                     |   4 -
 components/Nav/Social.js                      |  18 --
 .../__snapshots__/MobileNavbar.spec.js.snap   |  30 +--
 .../NavBar/__snapshots__/Navbar.spec.js.snap  | 107 +++------
 .../NavBar/__snapshots__/index.spec.js.snap   | 211 +++++------------
 .../__snapshots__/DocsLayout.spec.js.snap     | 223 ++++++------------
 6 files changed, 165 insertions(+), 428 deletions(-)

diff --git a/README.md b/README.md
index 13d4e734f..2976995c3 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,3 @@ styled-components-website
 ├── utils/       # Various utilities use across the site
 └── vendor/      # Cached dependencies
 ```
-
-### Got stuck?
-
-Feel free to ping us on [Spectrum](https://spectrum.chat/styled-components/website) if you get stuck somewhere while trying to make this website better, let's resolve it together!
diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index d0e8eaff7..2b9a300b6 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -41,11 +41,6 @@ const SocialLink = styled(Link).attrs((/* props */) => ({
   }
 `;
 
-const Svg = styled.svg`
-  width: ${p => rem(Number(p.width))};
-  height: ${p => rem(Number(p.height))};
-`;
-
 const StyledIcon = styled.div`
   && {
     width: ${p => rem(Number(p.width))};
@@ -63,21 +58,8 @@ const StyledIcon = styled.div`
 //   </Svg>
 // )
 
-const Spectrum = () => (
-  <Svg width="14" height="14" viewBox="0 0 15 15">
-    <title>spectrum</title>
-    <path
-      fill="#FFF"
-      d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-    />
-  </Svg>
-);
-
 const Social = props => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/">
-      <Spectrum />
-    </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
diff --git a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
index 4768188be..5c1037bfb 100644
--- a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
@@ -78,12 +78,7 @@ exports[`MobileNavbar renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c17 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c18.c18 {
+.c17.c17 {
   width: NaNrem;
   height: 1rem;
 }
@@ -297,31 +292,12 @@ exports[`MobileNavbar renders correctly 1`] = `
       <nav
         className="c15"
       >
-        <a
-          className="c16"
-          href="https://spectrum.chat/styled-components/"
-        >
-          <svg
-            className="c17"
-            height="14"
-            viewBox="0 0 15 15"
-            width="14"
-          >
-            <title>
-              spectrum
-            </title>
-            <path
-              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-              fill="#FFF"
-            />
-          </svg>
-        </a>
         <a
           className="c16"
           href="https://github.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>
@@ -330,7 +306,7 @@ exports[`MobileNavbar renders correctly 1`] = `
           href="https://medium.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>
diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
index bc3ba5553..2a8c3c93f 100644
--- a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
@@ -70,12 +70,7 @@ exports[`Navbar renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c18 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c19.c19 {
+.c18.c18 {
   width: NaNrem;
   height: 1rem;
 }
@@ -91,7 +86,7 @@ exports[`Navbar renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -102,15 +97,15 @@ exports[`Navbar renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c23 svg {
+.c22 svg {
   display: inline-block;
 }
 
-.c23 svg path {
+.c22 svg path {
   fill: currentColor;
 }
 
-.c22 {
+.c21 {
   background: none;
   outline: none;
   border: none;
@@ -123,11 +118,11 @@ exports[`Navbar renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c26 {
+.c25 {
   background: none;
   outline: none;
   border: none;
@@ -140,15 +135,15 @@ exports[`Navbar renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c20 {
+.c19 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -168,27 +163,27 @@ exports[`Navbar renders correctly 1`] = `
   color: #868686;
 }
 
-.c24 {
+.c23 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
   transform-origin: center center;
   transform: rotate(180deg);
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -303,7 +298,7 @@ exports[`Navbar renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c20 {
+  .c19 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -507,31 +502,12 @@ exports[`Navbar renders correctly 1`] = `
       <nav
         className="c16 "
       >
-        <a
-          className="c17"
-          href="https://spectrum.chat/styled-components/"
-        >
-          <svg
-            className="c18"
-            height="14"
-            viewBox="0 0 15 15"
-            width="14"
-          >
-            <title>
-              spectrum
-            </title>
-            <path
-              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-              fill="#FFF"
-            />
-          </svg>
-        </a>
         <a
           className="c17"
           href="https://github.com/styled-components"
         >
           <svg
-            className="c19"
+            className="c18"
             height="18"
           />
         </a>
@@ -540,7 +516,7 @@ exports[`Navbar renders correctly 1`] = `
           href="https://medium.com/styled-components"
         >
           <svg
-            className="c19"
+            className="c18"
             height="18"
           />
         </a>
@@ -548,13 +524,13 @@ exports[`Navbar renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="c20"
+    className="c19"
   >
     <button
-      className="c21 c22"
+      className="c20 c21"
     >
       <svg
-        className="c23"
+        className="c22"
         height="15"
         width="15"
         xmlns="http://www.w3.org/2000/svg"
@@ -578,38 +554,38 @@ exports[`Navbar renders correctly 1`] = `
     </button>
     <a
       aria-label="styled components"
-      className="c24"
+      className="c23"
       href="/"
     >
       <div
-        className="c25"
+        className="c24"
       />
     </a>
     <div>
       <button
-        className="c21 c26"
+        className="c20 c25"
         onClick={[Function]}
       >
         <svg
-          className="c27"
+          className="c26"
           size={28}
         />
       </button>
       <button
-        className="c21 c22"
+        className="c20 c21"
       >
         <div
-          className="c28"
+          className="c27"
         >
           <div
-            className="c29"
+            className="c28"
             size={36}
           />
         </div>
       </button>
     </div>
     <div
-      className="c30"
+      className="c29"
     >
       <nav
         className="c5"
@@ -649,36 +625,17 @@ exports[`Navbar renders correctly 1`] = `
         </a>
       </nav>
       <div
-        className="c31"
+        className="c30"
       >
         <nav
           className="c16"
         >
-          <a
-            className="c17"
-            href="https://spectrum.chat/styled-components/"
-          >
-            <svg
-              className="c18"
-              height="14"
-              viewBox="0 0 15 15"
-              width="14"
-            >
-              <title>
-                spectrum
-              </title>
-              <path
-                d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                fill="#FFF"
-              />
-            </svg>
-          </a>
           <a
             className="c17"
             href="https://github.com/styled-components"
           >
             <svg
-              className="c19"
+              className="c18"
               height="18"
             />
           </a>
@@ -687,7 +644,7 @@ exports[`Navbar renders correctly 1`] = `
             href="https://medium.com/styled-components"
           >
             <svg
-              className="c19"
+              className="c18"
               height="18"
             />
           </a>
diff --git a/test/components/NavBar/__snapshots__/index.spec.js.snap b/test/components/NavBar/__snapshots__/index.spec.js.snap
index c144a7ee0..6118752f8 100644
--- a/test/components/NavBar/__snapshots__/index.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Nav renders correctly 1`] = `
-.c36 {
+.c35 {
   display: inline-block;
   color: inherit;
   cursor: pointer;
@@ -78,12 +78,7 @@ exports[`Nav renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c18 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c19.c19 {
+.c18.c18 {
   width: NaNrem;
   height: 1rem;
 }
@@ -99,7 +94,7 @@ exports[`Nav renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -110,15 +105,15 @@ exports[`Nav renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c23 svg {
+.c22 svg {
   display: inline-block;
 }
 
-.c23 svg path {
+.c22 svg path {
   fill: currentColor;
 }
 
-.c22 {
+.c21 {
   background: none;
   outline: none;
   border: none;
@@ -131,11 +126,11 @@ exports[`Nav renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c26 {
+.c25 {
   background: none;
   outline: none;
   border: none;
@@ -148,15 +143,15 @@ exports[`Nav renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c20 {
+.c19 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -176,27 +171,27 @@ exports[`Nav renders correctly 1`] = `
   color: #868686;
 }
 
-.c24 {
+.c23 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
   transform-origin: center center;
   transform: rotate(180deg);
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -310,7 +305,7 @@ exports[`Nav renders correctly 1`] = `
   margin-right: 1.9444444444444444rem;
 }
 
-.c32 {
+.c31 {
   position: fixed;
   transform: translateZ(0);
   display: block;
@@ -328,35 +323,35 @@ exports[`Nav renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c33 {
+.c32 {
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding-top: 3.3333333333333335rem;
 }
 
-.c34 {
+.c33 {
   margin-bottom: 1.1111111111111112rem;
 }
 
-.c35 {
+.c34 {
   display: block;
   margin: 0.5555555555555556rem 2.2222222222222223rem;
   font-weight: normal;
 }
 
 @media (min-width: 62.5em) {
-  .c36 {
+  .c35 {
     border-radius: 0.16666666666666666rem;
   }
 
-  .c36:hover {
+  .c35:hover {
     background: rgba(20, 20, 20, 0.1);
   }
 }
 
 @media (max-width: 62.5em) {
-  .c20 {
+  .c19 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -702,47 +697,6 @@ exports[`Nav renders correctly 1`] = `
                         <nav
                           className="c16 "
                         >
-                          <Styled(Link)
-                            href="https://spectrum.chat/styled-components/"
-                          >
-                            <Link
-                              className="c17"
-                              href="https://spectrum.chat/styled-components/"
-                              unstyled={true}
-                            >
-                              <Link
-                                href="https://spectrum.chat/styled-components/"
-                              >
-                                <a
-                                  className="c17"
-                                  href="https://spectrum.chat/styled-components/"
-                                >
-                                  <Spectrum>
-                                    <styled.svg
-                                      height="14"
-                                      viewBox="0 0 15 15"
-                                      width="14"
-                                    >
-                                      <svg
-                                        className="c18"
-                                        height="14"
-                                        viewBox="0 0 15 15"
-                                        width="14"
-                                      >
-                                        <title>
-                                          spectrum
-                                        </title>
-                                        <path
-                                          d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                          fill="#FFF"
-                                        />
-                                      </svg>
-                                    </styled.svg>
-                                  </Spectrum>
-                                </a>
-                              </Link>
-                            </Link>
-                          </Styled(Link)>
                           <Styled(Link)
                             href="https://github.com/styled-components"
                           >
@@ -763,11 +717,11 @@ exports[`Nav renders correctly 1`] = `
                                     height="18"
                                   >
                                     <DummyIcon
-                                      className="c19"
+                                      className="c18"
                                       height="18"
                                     >
                                       <svg
-                                        className="c19"
+                                        className="c18"
                                         height="18"
                                       />
                                     </DummyIcon>
@@ -796,11 +750,11 @@ exports[`Nav renders correctly 1`] = `
                                     height="18"
                                   >
                                     <DummyIcon
-                                      className="c19"
+                                      className="c18"
                                       height="18"
                                     >
                                       <svg
-                                        className="c19"
+                                        className="c18"
                                         height="18"
                                       />
                                     </DummyIcon>
@@ -822,13 +776,13 @@ exports[`Nav renders correctly 1`] = `
           >
             <styled.div>
               <div
-                className="c20"
+                className="c19"
               >
                 <styled.button
                   $active={true}
                 >
                   <button
-                    className="c21 c22"
+                    className="c20 c21"
                   >
                     <CloseIcon>
                       <styled.svg
@@ -838,7 +792,7 @@ exports[`Nav renders correctly 1`] = `
                         xmlnsXlink="http://www.w3.org/1999/xlink"
                       >
                         <svg
-                          className="c23"
+                          className="c22"
                           height="15"
                           width="15"
                           xmlns="http://www.w3.org/2000/svg"
@@ -866,7 +820,7 @@ exports[`Nav renders correctly 1`] = `
                 <Styled(Link)>
                   <Link
                     aria-label="styled components"
-                    className="c24"
+                    className="c23"
                     href="/"
                     unstyled={true}
                   >
@@ -875,14 +829,14 @@ exports[`Nav renders correctly 1`] = `
                     >
                       <a
                         aria-label="styled components"
-                        className="c24"
+                        className="c23"
                         href="/"
                       >
                         <styled.div
                           $compact={true}
                         >
                           <div
-                            className="c25"
+                            className="c24"
                           />
                         </styled.div>
                       </a>
@@ -894,7 +848,7 @@ exports[`Nav renders correctly 1`] = `
                     onClick={[Function]}
                   >
                     <button
-                      className="c21 c26"
+                      className="c20 c25"
                       onClick={[Function]}
                     >
                       <styled.div
@@ -902,11 +856,11 @@ exports[`Nav renders correctly 1`] = `
                         size={28}
                       >
                         <DummyIcon
-                          className="c27"
+                          className="c26"
                           size={28}
                         >
                           <svg
-                            className="c27"
+                            className="c26"
                             size={28}
                           />
                         </DummyIcon>
@@ -917,19 +871,19 @@ exports[`Nav renders correctly 1`] = `
                     $active={true}
                   >
                     <button
-                      className="c21 c22"
+                      className="c20 c21"
                     >
                       <styled.div
                         $shouldRotate={true}
                       >
                         <div
-                          className="c28"
+                          className="c27"
                         >
                           <styled.div
                             size={36}
                           >
                             <div
-                              className="c29"
+                              className="c28"
                               size={36}
                             />
                           </styled.div>
@@ -942,7 +896,7 @@ exports[`Nav renders correctly 1`] = `
                   $isOpen={true}
                 >
                   <div
-                    className="c30"
+                    className="c29"
                   >
                     <NavLinks>
                       <styled.nav>
@@ -1049,54 +1003,13 @@ exports[`Nav renders correctly 1`] = `
                     </NavLinks>
                     <styled.div>
                       <div
-                        className="c31"
+                        className="c30"
                       >
                         <Social>
                           <styled.nav>
                             <nav
                               className="c16"
                             >
-                              <Styled(Link)
-                                href="https://spectrum.chat/styled-components/"
-                              >
-                                <Link
-                                  className="c17"
-                                  href="https://spectrum.chat/styled-components/"
-                                  unstyled={true}
-                                >
-                                  <Link
-                                    href="https://spectrum.chat/styled-components/"
-                                  >
-                                    <a
-                                      className="c17"
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <Spectrum>
-                                        <styled.svg
-                                          height="14"
-                                          viewBox="0 0 15 15"
-                                          width="14"
-                                        >
-                                          <svg
-                                            className="c18"
-                                            height="14"
-                                            viewBox="0 0 15 15"
-                                            width="14"
-                                          >
-                                            <title>
-                                              spectrum
-                                            </title>
-                                            <path
-                                              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                              fill="#FFF"
-                                            />
-                                          </svg>
-                                        </styled.svg>
-                                      </Spectrum>
-                                    </a>
-                                  </Link>
-                                </Link>
-                              </Styled(Link)>
                               <Styled(Link)
                                 href="https://github.com/styled-components"
                               >
@@ -1117,11 +1030,11 @@ exports[`Nav renders correctly 1`] = `
                                         height="18"
                                       >
                                         <DummyIcon
-                                          className="c19"
+                                          className="c18"
                                           height="18"
                                         >
                                           <svg
-                                            className="c19"
+                                            className="c18"
                                             height="18"
                                           />
                                         </DummyIcon>
@@ -1150,11 +1063,11 @@ exports[`Nav renders correctly 1`] = `
                                         height="18"
                                       >
                                         <DummyIcon
-                                          className="c19"
+                                          className="c18"
                                           height="18"
                                         >
                                           <svg
-                                            className="c19"
+                                            className="c18"
                                             height="18"
                                           />
                                         </DummyIcon>
@@ -1179,7 +1092,7 @@ exports[`Nav renders correctly 1`] = `
     <CaptureScroll>
       <styled.nav>
         <nav
-          className="c32"
+          className="c31"
         >
           <withRouter(Unknown)>
             <Component
@@ -1187,7 +1100,7 @@ exports[`Nav renders correctly 1`] = `
             >
               <styled.div>
                 <div
-                  className="c33"
+                  className="c32"
                 >
                   <Folder
                     isOpenDefault={null}
@@ -1195,13 +1108,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1214,7 +1127,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/basics"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/basics"
                                   >
                                     Basics
@@ -1233,13 +1146,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1252,7 +1165,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/advanced"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/advanced"
                                   >
                                     Advanced
@@ -1271,13 +1184,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1290,7 +1203,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/api"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/api"
                                   >
                                     API Reference
@@ -1309,13 +1222,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1328,7 +1241,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/tooling"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/tooling"
                                   >
                                     Tooling
@@ -1347,13 +1260,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1366,7 +1279,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/faqs"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/faqs"
                                   >
                                     FAQs
diff --git a/test/components/__snapshots__/DocsLayout.spec.js.snap b/test/components/__snapshots__/DocsLayout.spec.js.snap
index f31b93fe7..4a2bc2da4 100644
--- a/test/components/__snapshots__/DocsLayout.spec.js.snap
+++ b/test/components/__snapshots__/DocsLayout.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DocsLayout renders correctly 1`] = `
-.c36 {
+.c35 {
   display: inline-block;
   color: inherit;
   cursor: pointer;
@@ -78,12 +78,7 @@ exports[`DocsLayout renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c19 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c20.c20 {
+.c19.c19 {
   width: NaNrem;
   height: 1rem;
 }
@@ -99,7 +94,7 @@ exports[`DocsLayout renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c26 {
+.c25 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -110,15 +105,15 @@ exports[`DocsLayout renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c24 svg {
+.c23 svg {
   display: inline-block;
 }
 
-.c24 svg path {
+.c23 svg path {
   fill: currentColor;
 }
 
-.c23 {
+.c22 {
   background: none;
   outline: none;
   border: none;
@@ -131,15 +126,15 @@ exports[`DocsLayout renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c22+.c22 {
+.c21+.c21 {
   padding-left: 0;
 }
 
-.c21 {
+.c20 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -159,25 +154,25 @@ exports[`DocsLayout renders correctly 1`] = `
   color: #868686;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -291,7 +286,7 @@ exports[`DocsLayout renders correctly 1`] = `
   margin-right: 1.9444444444444444rem;
 }
 
-.c32 {
+.c31 {
   position: fixed;
   transform: translateZ(0);
   display: block;
@@ -309,18 +304,18 @@ exports[`DocsLayout renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c33 {
+.c32 {
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding-top: 3.3333333333333335rem;
 }
 
-.c34 {
+.c33 {
   margin-bottom: 1.1111111111111112rem;
 }
 
-.c35 {
+.c34 {
   display: block;
   margin: 0.5555555555555556rem 2.2222222222222223rem;
   font-weight: normal;
@@ -330,7 +325,7 @@ exports[`DocsLayout renders correctly 1`] = `
   padding-left: 16.666666666666668rem;
 }
 
-.c37 {
+.c36 {
   max-width: 100%;
   margin: 0;
   padding: 5rem 3.3333333333333335rem 0 3.3333333333333335rem;
@@ -339,12 +334,12 @@ exports[`DocsLayout renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c37 p,
-.c37 li {
+.c36 p,
+.c36 li {
   max-width: 80ch;
 }
 
-.c38 {
+.c37 {
   text-align: left;
   width: 100%;
   color: rgb(66, 66, 66);
@@ -354,17 +349,17 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (min-width: 62.5em) {
-  .c36 {
+  .c35 {
     border-radius: 0.16666666666666666rem;
   }
 
-  .c36:hover {
+  .c35:hover {
     background: rgba(20, 20, 20, 0.1);
   }
 }
 
 @media (max-width: 62.5em) {
-  .c21 {
+  .c20 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -468,7 +463,7 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c32 {
+  .c31 {
     transform: translateX(-16.666666666666668rem);
   }
 }
@@ -480,7 +475,7 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c37 {
+  .c36 {
     padding: 5.555555555555555rem 1.1111111111111112rem 1.6666666666666667rem 1.1111111111111112rem;
     transform: translateX(0);
   }
@@ -765,47 +760,6 @@ exports[`DocsLayout renders correctly 1`] = `
                               <nav
                                 className="c17 "
                               >
-                                <Styled(Link)
-                                  href="https://spectrum.chat/styled-components/"
-                                >
-                                  <Link
-                                    className="c18"
-                                    href="https://spectrum.chat/styled-components/"
-                                    unstyled={true}
-                                  >
-                                    <Link
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <a
-                                        className="c18"
-                                        href="https://spectrum.chat/styled-components/"
-                                      >
-                                        <Spectrum>
-                                          <styled.svg
-                                            height="14"
-                                            viewBox="0 0 15 15"
-                                            width="14"
-                                          >
-                                            <svg
-                                              className="c19"
-                                              height="14"
-                                              viewBox="0 0 15 15"
-                                              width="14"
-                                            >
-                                              <title>
-                                                spectrum
-                                              </title>
-                                              <path
-                                                d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                                fill="#FFF"
-                                              />
-                                            </svg>
-                                          </styled.svg>
-                                        </Spectrum>
-                                      </a>
-                                    </Link>
-                                  </Link>
-                                </Styled(Link)>
                                 <Styled(Link)
                                   href="https://github.com/styled-components"
                                 >
@@ -826,11 +780,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                           height="18"
                                         >
                                           <DummyIcon
-                                            className="c20"
+                                            className="c19"
                                             height="18"
                                           >
                                             <svg
-                                              className="c20"
+                                              className="c19"
                                               height="18"
                                             />
                                           </DummyIcon>
@@ -859,11 +813,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                           height="18"
                                         >
                                           <DummyIcon
-                                            className="c20"
+                                            className="c19"
                                             height="18"
                                           >
                                             <svg
-                                              className="c20"
+                                              className="c19"
                                               height="18"
                                             />
                                           </DummyIcon>
@@ -889,14 +843,14 @@ exports[`DocsLayout renders correctly 1`] = `
                 >
                   <styled.div>
                     <div
-                      className="c21"
+                      className="c20"
                     >
                       <styled.button
                         $active={false}
                         onClick={[Function]}
                       >
                         <button
-                          className="c22 c23"
+                          className="c21 c22"
                           onClick={[Function]}
                         >
                           <FoldIcon>
@@ -907,7 +861,7 @@ exports[`DocsLayout renders correctly 1`] = `
                               xmlnsXlink="http://www.w3.org/1999/xlink"
                             >
                               <svg
-                                className="c24"
+                                className="c23"
                                 height="14"
                                 width="17"
                                 xmlns="http://www.w3.org/2000/svg"
@@ -935,7 +889,7 @@ exports[`DocsLayout renders correctly 1`] = `
                       <Styled(Link)>
                         <Link
                           aria-label="styled components"
-                          className="c25"
+                          className="c24"
                           href="/"
                           unstyled={true}
                         >
@@ -944,14 +898,14 @@ exports[`DocsLayout renders correctly 1`] = `
                           >
                             <a
                               aria-label="styled components"
-                              className="c25"
+                              className="c24"
                               href="/"
                             >
                               <styled.div
                                 $compact={true}
                               >
                                 <div
-                                  className="c26"
+                                  className="c25"
                                 />
                               </styled.div>
                             </a>
@@ -963,7 +917,7 @@ exports[`DocsLayout renders correctly 1`] = `
                           onClick={[Function]}
                         >
                           <button
-                            className="c22 c23"
+                            className="c21 c22"
                             onClick={[Function]}
                           >
                             <styled.div
@@ -971,11 +925,11 @@ exports[`DocsLayout renders correctly 1`] = `
                               size={28}
                             >
                               <DummyIcon
-                                className="c27"
+                                className="c26"
                                 size={28}
                               >
                                 <svg
-                                  className="c27"
+                                  className="c26"
                                   size={28}
                                 />
                               </DummyIcon>
@@ -987,20 +941,20 @@ exports[`DocsLayout renders correctly 1`] = `
                           onClick={[Function]}
                         >
                           <button
-                            className="c22 c23"
+                            className="c21 c22"
                             onClick={[Function]}
                           >
                             <styled.div
                               $shouldRotate={false}
                             >
                               <div
-                                className="c28"
+                                className="c27"
                               >
                                 <styled.div
                                   size={36}
                                 >
                                   <div
-                                    className="c29"
+                                    className="c28"
                                     size={36}
                                   />
                                 </styled.div>
@@ -1013,7 +967,7 @@ exports[`DocsLayout renders correctly 1`] = `
                         $isOpen={false}
                       >
                         <div
-                          className="c30"
+                          className="c29"
                         >
                           <NavLinks>
                             <styled.nav>
@@ -1120,54 +1074,13 @@ exports[`DocsLayout renders correctly 1`] = `
                           </NavLinks>
                           <styled.div>
                             <div
-                              className="c31"
+                              className="c30"
                             >
                               <Social>
                                 <styled.nav>
                                   <nav
                                     className="c17"
                                   >
-                                    <Styled(Link)
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <Link
-                                        className="c18"
-                                        href="https://spectrum.chat/styled-components/"
-                                        unstyled={true}
-                                      >
-                                        <Link
-                                          href="https://spectrum.chat/styled-components/"
-                                        >
-                                          <a
-                                            className="c18"
-                                            href="https://spectrum.chat/styled-components/"
-                                          >
-                                            <Spectrum>
-                                              <styled.svg
-                                                height="14"
-                                                viewBox="0 0 15 15"
-                                                width="14"
-                                              >
-                                                <svg
-                                                  className="c19"
-                                                  height="14"
-                                                  viewBox="0 0 15 15"
-                                                  width="14"
-                                                >
-                                                  <title>
-                                                    spectrum
-                                                  </title>
-                                                  <path
-                                                    d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                                    fill="#FFF"
-                                                  />
-                                                </svg>
-                                              </styled.svg>
-                                            </Spectrum>
-                                          </a>
-                                        </Link>
-                                      </Link>
-                                    </Styled(Link)>
                                     <Styled(Link)
                                       href="https://github.com/styled-components"
                                     >
@@ -1188,11 +1101,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                               height="18"
                                             >
                                               <DummyIcon
-                                                className="c20"
+                                                className="c19"
                                                 height="18"
                                               >
                                                 <svg
-                                                  className="c20"
+                                                  className="c19"
                                                   height="18"
                                                 />
                                               </DummyIcon>
@@ -1221,11 +1134,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                               height="18"
                                             >
                                               <DummyIcon
-                                                className="c20"
+                                                className="c19"
                                                 height="18"
                                               >
                                                 <svg
-                                                  className="c20"
+                                                  className="c19"
                                                   height="18"
                                                 />
                                               </DummyIcon>
@@ -1254,7 +1167,7 @@ exports[`DocsLayout renders correctly 1`] = `
               $isFolded={true}
             >
               <nav
-                className="c32"
+                className="c31"
               >
                 <withRouter(Unknown)
                   onRouteChange={[Function]}
@@ -1265,7 +1178,7 @@ exports[`DocsLayout renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c33"
+                        className="c32"
                       >
                         <Folder
                           isOpenDefault={null}
@@ -1275,14 +1188,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1295,7 +1208,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/basics"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/basics"
                                         >
                                           Basics
@@ -1316,14 +1229,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1336,7 +1249,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/advanced"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/advanced"
                                         >
                                           Advanced
@@ -1357,14 +1270,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1377,7 +1290,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/api"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/api"
                                         >
                                           API Reference
@@ -1398,14 +1311,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1418,7 +1331,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/tooling"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/tooling"
                                         >
                                           Tooling
@@ -1439,14 +1352,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1459,7 +1372,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/faqs"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/faqs"
                                         >
                                           FAQs
@@ -1486,12 +1399,12 @@ exports[`DocsLayout renders correctly 1`] = `
         data-e2e-id="content"
       >
         <div
-          className="c37"
+          className="c36"
           data-e2e-id="content"
         >
           <styled.h1>
             <h1
-              className="c38"
+              className="c37"
             />
           </styled.h1>
         </div>

From 45db8b4abc6481c072a1637505e34abf834ac074 Mon Sep 17 00:00:00 2001
From: Masha <nasonkina@yandex.ru>
Date: Sun, 14 May 2023 16:25:34 +0300
Subject: [PATCH 2/6] add type signatures

---
 components/{Layout.js => Layout.ts} | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)
 rename components/{Layout.js => Layout.ts} (84%)

diff --git a/components/Layout.js b/components/Layout.ts
similarity index 84%
rename from components/Layout.js
rename to components/Layout.ts
index 3c3b71f5c..727ac2238 100644
--- a/components/Layout.js
+++ b/components/Layout.ts
@@ -13,7 +13,7 @@ export const Container = styled.div`
   `)};
 `;
 
-export const Content = styled.div`
+export const Content = styled.div<{ $hero: boolean; $moveRight: boolean }>`
   max-width: 100%;
   margin: 0;
   padding: ${rem(90)} ${rem(60)} 0 ${rem(60)};
@@ -26,10 +26,11 @@ export const Content = styled.div`
     max-width: 80ch;
   }
 
-  ${mobile(css`
-    padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
-    transform: translateX(${p => (p.$moveRight ? rem(sidebarWidth) : 0)});
-  `)};
+  ${p =>
+    mobile(css`
+      padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
+      transform: translateX(${p.$moveRight ? rem(sidebarWidth) : 0});
+    `)};
 
   ${p =>
     p.$hero &&

From 9c2e8e6eb13554f9b1ae7a2aa4b150158a57c804 Mon Sep 17 00:00:00 2001
From: Masha <nasonkina@yandex.ru>
Date: Fri, 19 May 2023 16:27:33 +0300
Subject: [PATCH 3/6] add typings for media and rem utils

---
 utils/media.js           | 13 -------------
 utils/media.ts           | 14 ++++++++++++++
 utils/{rem.js => rem.ts} |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)
 delete mode 100644 utils/media.js
 create mode 100644 utils/media.ts
 rename utils/{rem.js => rem.ts} (57%)

diff --git a/utils/media.js b/utils/media.js
deleted file mode 100644
index 73db79e54..000000000
--- a/utils/media.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { css } from 'styled-components';
-
-export const mobile = inner => css`
-  @media (max-width: ${1000 / 16}em) {
-    ${inner};
-  }
-`;
-
-export const phone = inner => css`
-  @media (max-width: ${650 / 16}em) {
-    ${inner};
-  }
-`;
diff --git a/utils/media.ts b/utils/media.ts
new file mode 100644
index 000000000..dd3840c70
--- /dev/null
+++ b/utils/media.ts
@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+import { RuleSet } from 'styled-components/dist/types';
+
+export const mobile = (inner: ReturnType<typeof css>): RuleSet<object> => css`
+  @media (max-width: ${1000 / 16}em) {
+    ${inner};
+  }
+`;
+
+export const phone = (inner: RuleSet<object>): RuleSet<object> => css`
+  @media (max-width: ${650 / 16}em) {
+    ${inner};
+  }
+`;
diff --git a/utils/rem.js b/utils/rem.ts
similarity index 57%
rename from utils/rem.js
rename to utils/rem.ts
index 4f262cb9d..fd92582e5 100644
--- a/utils/rem.js
+++ b/utils/rem.ts
@@ -1,5 +1,5 @@
 import rem from 'polished/lib/helpers/rem';
 
-const _rem = size => rem(size, '18px');
+const _rem = (size: number) => rem(size, '18px');
 
 export default _rem;

From a08714f723e39bf4eeb2b10445b493584711c6f5 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Fri, 19 May 2023 14:04:49 +0000
Subject: [PATCH 4/6] fix: update css vocabulary url

---
 sections/tooling/stylelint.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/tooling/stylelint.md b/sections/tooling/stylelint.md
index 9654de944..c9ab30d9a 100644
--- a/sections/tooling/stylelint.md
+++ b/sections/tooling/stylelint.md
@@ -173,7 +173,7 @@ The full list of supported tags:
 - `sc-property`
 - `sc-value`
 
-> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](http://apps.workflower.fi/vocabs/css/en) with examples.
+> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](https://byui-cit.github.io/wdd130/activities/cssvocab.html) with examples.
 
 For example, when you interpolate another styled component, what you really interpolate is its unique selector. Since the processor doesn't know that, you can tell it to replace it with a selector when linting:
 

From c63915a7461afc0500a904b2d427ddb559fbca54 Mon Sep 17 00:00:00 2001
From: Masha <nasonkina@yandex.ru>
Date: Sat, 20 May 2023 12:13:53 +0300
Subject: [PATCH 5/6] fix mobile & phone typings (media.ts)

---
 utils/media.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/utils/media.ts b/utils/media.ts
index dd3840c70..adcd9fc5d 100644
--- a/utils/media.ts
+++ b/utils/media.ts
@@ -1,13 +1,14 @@
+type CSSUtilType = ReturnType<typeof css>;
+
 import { css } from 'styled-components';
-import { RuleSet } from 'styled-components/dist/types';
 
-export const mobile = (inner: ReturnType<typeof css>): RuleSet<object> => css`
+export const mobile = (inner: CSSUtilType): CSSUtilType => css`
   @media (max-width: ${1000 / 16}em) {
     ${inner};
   }
 `;
 
-export const phone = (inner: RuleSet<object>): RuleSet<object> => css`
+export const phone = (inner: CSSUtilType): CSSUtilType => css`
   @media (max-width: ${650 / 16}em) {
     ${inner};
   }

From b962b16557fe834cffdad6282d88864a97363fd1 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Sat, 20 May 2023 11:49:07 +0000
Subject: [PATCH 6/6] fix: update css vocabs link

---
 sections/tooling/stylelint.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/tooling/stylelint.md b/sections/tooling/stylelint.md
index c9ab30d9a..0b3a7f58d 100644
--- a/sections/tooling/stylelint.md
+++ b/sections/tooling/stylelint.md
@@ -173,7 +173,7 @@ The full list of supported tags:
 - `sc-property`
 - `sc-value`
 
-> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](https://byui-cit.github.io/wdd130/activities/cssvocab.html) with examples.
+> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) with examples.
 
 For example, when you interpolate another styled component, what you really interpolate is its unique selector. Since the processor doesn't know that, you can tell it to replace it with a selector when linting: