37 update theme with the one from the style guide (#38)

# Description

Update theme to use the styleguide.

- Closes #37 

## Type of change

- [x] New Feature

# How to Test?

Pull branch and see that styles look the same and are not broken in any
screen size.

1. Pull and run locally
2. See that css is coming through as well as the theme. Best examples
are the underline on hover in the nav (showing css) and the colors
properly coming through (tailwind config)

# Checklist:

- [x] I have performed a self-review of my code
- [x] I have commented my code & PR, particularly in hard-to-understand
areas
- [x] I have checked at all the breakpoints to make sure it works on all
screen sizes

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

.gitignore

@@ -11,3 +11,4 @@ test-results
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 _site
+.idea

package.json

@@ -43,5 +43,8 @@
     "vite": "^5.4.10",
     "vitest": "2.1.3"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@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'} bottom-0 sm:text-[85px] md:text-[100px] 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,4 @@
 import '../style/app.css';
-
 // since there's no server side data here, we can prerender
 export const prerender = true;
 export const ssr = false;

src/style/app.css

@@ -21,16 +21,16 @@
     @apply font-title leading-[1] tracking-wider sm:text-[40px] md:text-[44px] lg:text-[44px];
   }
   .title-75 {
-    @apply font-title leading-[1] tracking-wide sm:text-[40px] md:text-[55px] lg:text-75;
+    @apply font-title leading-[1] tracking-wide sm:text-[40px] md:text-[55px] lg:text-[75px];
   }
   .title-100 {
-    @apply font-title leading-[1] tracking-wide sm:text-[55px] md:text-75 lg:text-100;
+    @apply font-title leading-[1] tracking-wide sm:text-[55px] md:text-[75px] lg:text-[100px];
   }
   .subtitle {
     @apply font-semibold sm:text-lg md:text-lg lg:text-xl;
   }
   .body {
-    @apply sm:text-xs md:text-sm lg:text-base;
+    @apply sm:text-xs md:text-sm lg:text-normal;
   }
 
   /* Layout */
@@ -50,25 +50,6 @@
     @apply w-full;
   }
 
-  /* Underline on hover animation */
-  .underline-on-hover {
-    @apply relative block cursor-pointer overflow-hidden px-0 py-1;
-  }
-
-  .underline-on-hover::after {
-    @apply absolute bottom-0 left-0 h-[0.1em] w-full opacity-0 transition-opacity content-[''];
-    transition:
-      opacity 300ms,
-      transform 300ms;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  .underline-on-hover:hover::after,
-  .underline-on-hover:focus::after {
-    @apply opacity-100;
-    transform: translate3d(0, 0, 0);
-  }
-
   @keyframes slide-from-right {
     0% {
       opacity: 0;
@@ -89,14 +70,14 @@
 
 @layer base {
   body {
-    @apply flex flex-col items-center bg-cream text-base text-black;
+    @apply flex flex-col items-center bg-white text-normal text-black;
   }
 
   button {
     @apply select-none;
   }
 
   ::placeholder {
-    @apply text-disabled !important;
+    @apply text-gray2 !important;
   }
 }

tailwind.config.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import frequencyConfig from '@frequency-chain/style-guide/tailwind.config';
 
 import { MAX_PAGE_WIDTH } from './src/lib/consts';
 
@@ -10,23 +11,8 @@ export default {
       sans: ['Poppins', 'sans-serif'],
     },
     colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-      disabled: '#BCBAC0',
-      cream: '#FEFAF3',
-      navy: '#19455E',
-      yellow: '#FFD747',
-      teal: '#4BA0A5',
-      tealBright: '#00B6AF',
-      purple: '#2B2F6E',
-      orange: '#F87C48',
-      indigo: '#5E69FF',
       darkIndigo: '#445BC3',
-      rose: '#A06B87',
-      red: '#EB5757',
-      gray: '#C8CDD0',
+      tealBright: '#00B6AF',
     },
     width: {
       page: `${MAX_PAGE_WIDTH}px`,
@@ -40,19 +26,6 @@ export default {
       page: `${MAX_PAGE_WIDTH}px`,
       full: '100%',
     },
-    extend: {
-      fontSize: {
-        xs: '14px',
-        sm: '16px',
-        base: '18px',
-        lg: '20px',
-        xl: '25px',
-        '2xl': '30px',
-        75: '75px',
-        100: '100px',
-        200: '200px',
-      },
-    },
     screens: {
       sm: '0px',
       md: '900px',
@@ -65,4 +38,5 @@ export default {
     },
   },
   safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'],
+  presets: [frequencyConfig],
 };