start using styleguide

package.json

@@ -45,6 +45,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@frequency-chain/style-guide": "^0.1.5"
+    "@frequency-chain/style-guide": "^0.1.9"
   }
 }

src/components/FounderProfile.svelte

@@ -5,7 +5,7 @@
   export let linkedinUrl: string;
 </script>
 
-<div class="max-w-[100px] sm:text-indigo lg:text-cream">
+<div class="max-w-[100px] sm:text-brightBlue lg:text-cream">
   <a href={linkedinUrl} target="_blank">
     <div class="relative">
       <img src={imgSrc} alt="headshot" class="mb-4 h-[100px] rounded-full drop-shadow-lg" />

src/components/IconBtn.svelte

@@ -6,7 +6,7 @@
 
 <a
   aria-label={label}
-  class="h-[38px] w-[38px] rounded bg-black p-1 transition-colors duration-[0.3s] hover:bg-indigo"
+  class="hover:bg-indigo h-[38px] w-[38px] rounded bg-black p-1 transition-colors duration-[0.3s]"
   {href}
   target="_blank"
 >

src/components/JoinSocials.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div class="w-full max-w-[425px] pb-[80px] sm:pt-[80px] lg:pl-[140px] lg:pt-6">
-  <h3 class="text-base font-semibold">Join the Digital Revolution</h3>
+  <h3 class="text-normal font-semibold">Join the Digital Revolution</h3>
   <p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
   <div class="mt-4 flex gap-4" aria-label="Social Links">
     <IconBtn label="X/Twitter" imgSrc={XLogo} href={'https://twitter.com/one_frequency'} />

src/components/OpenCloseIcon.svelte

@@ -16,14 +16,14 @@
       y1="50%"
       x2="100%"
       y2="50%"
-      class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'rotate-0 stroke-indigo'}`}
+      class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'stroke-indigo rotate-0'}`}
     />
     <line
       x1="0"
       y1="50%"
       x2="100%"
       y2="50%"
-      class={`origin-left translate-y-[-20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45 stroke-cream' : 'rotate-0 stroke-indigo'}`}
+      class={`origin-left translate-y-[-20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45 stroke-cream' : 'stroke-indigo rotate-0'}`}
     />
   </svg>
 </button>

src/components/SectionNumber.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class={`absolute -rotate-90 text-[150px] font-black leading-none ${isLeft ? 'sm:-left-3' : 'sm:-right-3'} bottom-0 sm:text-[85px] md:text-100 lg:-right-6 lg:left-[auto] ${classes}`}
+  class={`absolute -rotate-90 text-[150px] font-black leading-none ${isLeft ? 'sm:-left-3' : 'sm:-right-3'} md:text-100 bottom-0 sm:text-[85px] lg:-right-6 lg:left-[auto] ${classes}`}
 >
   <slot />
 </div>

src/components/Sections/Section2.svelte

@@ -15,7 +15,7 @@
     <div class="flex gap-4 text-right sm:items-end lg:items-start">
       <!-- Desktop section number -->
       <SectionNumber
-        classes="md:text-100 lg:block lg:font-normal relative lg:bottom-auto lg:right-auto lg:top-[16px] sm:hidden"
+        classes="md:text-[100px] lg:block lg:font-normal relative lg:bottom-auto lg:right-auto lg:top-[16px] sm:hidden"
         >.02</SectionNumber
       >
       <SlideIn>

src/components/Sections/Section3.svelte

@@ -9,7 +9,7 @@
 
 <SectionWrapper
   id="section3"
-  classes="z-0 flex sm:justify-center md:justify-center overflow-hidden sm:pt-[40px]  vertical-lg:pt-0 text-cream"
+  classes="z-0 flex sm:justify-center md:justify-center overflow-hidden sm:pt-[40px]  vertical-lg:pt-0 text-white"
 >
   <!-- Desktop Wave -->
   <div class="absolute bottom-0 left-0 h-full w-[50%] sm:hidden lg:block vertical-lg:hidden">
@@ -40,5 +40,5 @@
       </SectionParagraph>
     </SplitSection>
   </section>
-  <SectionNumber classes="sm:bottom-4 lg:-bottom-[20px] lg:text-200 lg:-right-[80px]">.03</SectionNumber>
+  <SectionNumber classes="sm:bottom-4 lg:-bottom-[20px] lg:text-[200px] lg:-right-[80px]">.03</SectionNumber>
 </SectionWrapper>

src/components/Sections/Section4.svelte

@@ -25,8 +25,9 @@
       </SectionParagraph>
     </section>
   </div>
-  <SectionNumber isLeft={true} classes="text-yellow sm:bottom-[100px] md:bottom-[120px] lg:text-200 lg:-right-[80px]"
-    >.04</SectionNumber
+  <SectionNumber
+    isLeft={true}
+    classes="text-yellow sm:bottom-[100px] md:bottom-[120px] lg:text-[200px] lg:-right-[80px]">.04</SectionNumber
   >
 
   <div class="absolute bottom-0 left-0 flex h-full w-full">

src/components/Sections/Section5.svelte

@@ -9,7 +9,7 @@
 
 <SectionWrapper
   id="section5"
-  classes="relative bg-indigo flex sm:flex-col vertical-lg:flex-col lg:flex-row sm:pt-[50px] vertical-lg:pt-[50px] lg:pt-0"
+  classes="relative bg-brightBlue flex sm:flex-col vertical-lg:flex-col lg:flex-row sm:pt-[50px] vertical-lg:pt-[50px] lg:pt-0"
 >
   <!-- Image -->
   <div class="absolute bottom-0 left-0 flex h-full w-full overflow-hidden sm:hidden lg:block vertical-lg:hidden">
@@ -25,23 +25,23 @@
       <SlideIn>
         <h2 class="title-75 text-yellow sm:pr-5 lg:max-w-[600px]">The Core of Our Technology</h2>
       </SlideIn>
-      <SectionParagraph classes="sm:pr-5 md:pr-[140px] lg:px-0 text-cream">
+      <SectionParagraph classes="sm:pr-5 md:pr-[140px] lg:px-0 text-white">
         The creators of Frequency are at the forefront of innovation. They've created the Decentralized Social
         Networking Protocol (DSNP), an open-source solution that establishes a shared social graph independent of
         specific applications or centralized platforms.
       </SectionParagraph>
       <a href="https://docs.frequency.xyz/" target="_blank"
         ><button
-          class="max-w-[200px] border-2 border-cream px-10 py-3 text-xs font-semibold text-cream transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
+          class="max-w-[200px] border-2 border-white px-10 py-3 text-xs font-semibold text-white transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
           >Learn More</button
         ></a
       >
-      <SectionNumber classes="text-cream sm:hidden lg:block mr-[70px] bottom-4 right-0 vertical-lg:hidden"
+      <SectionNumber classes="text-white sm:hidden lg:block mr-[70px] bottom-4 right-0 vertical-lg:hidden"
         >.05</SectionNumber
       >
     </section>
 
     <Founders />
   </div>
-  <SectionNumber classes="text-cream bottom-4 lg:hidden vertical-lg:block">.05</SectionNumber>
+  <SectionNumber classes="text-white bottom-4 lg:hidden vertical-lg:block">.05</SectionNumber>
 </SectionWrapper>

src/components/Sections/Section5Wave.svelte

@@ -4,7 +4,7 @@
   @keyframes wave {
     0%,
     100% {
-      margin-left: 20;
+      margin-left: 20px;
     }
     50% {
       margin-left: -20px;

src/routes/(home)/+page.svelte

@@ -12,14 +12,14 @@
 
   $: section = 1;
 
-  const indigo = '#5E69FF';
+  const brightBlue = '#5E69FF';
   const cream = '#FEFAF3';
 
   const logoMap = new Map([
-    [1, { logo: indigo, nav: 'navy' }],
+    [1, { logo: brightBlue, nav: 'navy' }],
     [2, { logo: cream, nav: 'cream' }],
-    [3, { logo: indigo, nav: 'cream' }],
-    [4, { logo: indigo, nav: 'navy' }],
+    [3, { logo: brightBlue, nav: 'cream' }],
+    [4, { logo: brightBlue, nav: 'navy' }],
     [5, { logo: cream, nav: 'cream' }],
   ]);
 

src/routes/+layout.ts

@@ -1,5 +1,6 @@
 import '../style/app.css';
-
+import * as styles from '@frequency-chain/style-guide';
+console.log(styles);
 // since there's no server side data here, we can prerender
 export const prerender = true;
 export const ssr = false;