Update dependencies and colors

Author: wilwade

package-lock.json

@@ -18,36 +18,34 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.48.2",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.8.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "9.6.1",
-    "@types/node": "^22.8.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
+    "@types/node": "^22.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.0",
     "jsdom": "^25.0.1",
-    "npm-check-updates": "^17.1.6",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-svelte": "^3.2.8",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "sv": "^0.5.9",
-    "svelte": "^5.1.3",
-    "svelte-check": "^4.0.5",
-    "tailwindcss": "^3.4.14",
+    "svelte": "^5.2.0",
+    "svelte-check": "^4.0.8",
+    "tailwindcss": "^3.4.15",
     "tailwindcss-debug-screens": "^2.2.1",
-    "tslib": "^2.8.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vitest": "2.1.3"
+    "vite": "^5.4.11",
+    "vitest": "2.1.5"
   },
   "type": "module",
   "dependencies": {
-    "@frequency-chain/style-guide": "^0.1.17"
+    "@frequency-chain/style-guide": "^0.1.18"
   }
 }

package.json

@@ -12,7 +12,7 @@
     <!-- Text content -->
     <SectionContent class="mx-auto sm:pb-f56 sm:pt-0 md:py-f56">
       <SlideIn>
-        <h2 class="title-70 pb-f24 text-navy">What is<br /> Frequency?</h2>
+        <h2 class="title-70 pb-f24 text-primary">What is<br /> Frequency?</h2>
       </SlideIn>
 
       <SectionParagraph class="text-sm md:max-w-[415px] lg:max-w-[415px]">

src/components/Sections/About.svelte

@@ -9,7 +9,7 @@
 
   const sectionParagraphClasses = 'text-sm mt-f8';
   const sectionClasses = 'ml-[30px]';
-  const stepTitleClasses = 'text-h3 font-bold text-navy';
+  const stepTitleClasses = 'text-h3 font-bold text-primary';
 </script>
 
 <div class="hidden lg:block">

src/components/Sections/DeveloperSteps.svelte

@@ -8,7 +8,7 @@
   import { DeveloperStepsText } from '$lib/consts';
 
   const sectionParagraphClasses = 'text-normal mt-f12 leading-[20px]';
-  const stepTitleClasses = 'text-h3 font-bold text-navy';
+  const stepTitleClasses = 'text-h3 font-bold text-primary';
   const circleWidth = '60';
   const sectionClasses = 'flex flex-col px-[36px]';
   const stepClasses = 'py-[12px] flex flex-col';

src/components/Sections/DeveloperStepsMobile.svelte

@@ -9,7 +9,7 @@
 
   const sectionParagraphClasses = 'text-[12px] mt-[16px]';
   const stepTextClasses = '';
-  const stepTitleClasses = 'text-[40px] font-bold text-navy';
+  const stepTitleClasses = 'text-[40px] font-bold text-primary';
   const stepClasses = 'flex flex-col';
   const circleWidth = '60';
 </script>

src/components/Sections/DeveloperStepsTablet.svelte

@@ -37,7 +37,7 @@
     </section>
   </div>
   <section class="freq-container py-10">
-    <Typography tag="h1" class="h1 mb-6 text-center font-title text-navyLight">
+    <Typography tag="h1" class="h1 mb-6 text-center font-title text-primary">
       Companies in the Frequency Ecosystem
     </Typography>
     <div class="flex w-full flex-wrap justify-around p-2 md:p-6">

src/components/Sections/Ecosystem.svelte

@@ -4,7 +4,7 @@
 
 <div class="pl-f32 lg:pl-f48">
   <SlideIn>
-    <h2 class="title-70 pb-f24 text-navy">Frequency’s Mission</h2>
+    <h2 class="title-70 pb-f24 text-primary">Frequency’s Mission</h2>
   </SlideIn>
   <SlideIn>
     <h5

src/components/Sections/Mission/MissionHeader.svelte

@@ -9,7 +9,7 @@
     <SectionContent>
       <div class="">
         <SlideIn>
-          <h2 class="title-100 text-navy">Bringing Humanity Internet of People</h2>
+          <h2 class="title-100 text-primary">Bringing Humanity Internet of People</h2>
         </SlideIn>
       </div>
     </SectionContent>

src/components/Sections/Top.svelte

@@ -7,7 +7,7 @@
     <DocsMainImage />
   </div>
   <div class="flex flex-col gap-6 pt-f32 lg:w-1/2 lg:pt-f224 vertical-md:pt-f224">
-    <h2 class=" title-70 text-h2 text-navy">Get Started with Frequency Development</h2>
+    <h2 class=" title-70 text-h2 text-primary">Get Started with Frequency Development</h2>
     <p class="body text-h5 font-bold text-black sm:text-normal">
       Frequency offers a variety of open source tools and documentation in the Developers Portal to help you rapidly get
       applications up and running on Frequency.