From 06517042bdc30456782d7b5552e995f51c6e4fe5 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Mon, 1 Sep 2025 09:55:59 +0300
Subject: [PATCH] fix: update color values to #27FF64 in various components and
 demos

---
 src/constants/code/Animations/ribbonsCode.ts              | 2 +-
 src/constants/code/Components/folderCode.ts               | 2 +-
 src/content/Animations/Ribbons/Ribbons.vue                | 2 +-
 src/content/Backgrounds/GradientBlinds/GradientBlinds.vue | 2 +-
 src/content/Components/Folder/Folder.vue                  | 2 +-
 src/demo/Animations/CrosshairDemo.vue                     | 2 +-
 src/demo/Animations/RibbonsDemo.vue                       | 2 +-
 src/demo/Components/FolderDemo.vue                        | 4 ++--
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/constants/code/Animations/ribbonsCode.ts b/src/constants/code/Animations/ribbonsCode.ts
index 077f95c..078303c 100644
--- a/src/constants/code/Animations/ribbonsCode.ts
+++ b/src/constants/code/Animations/ribbonsCode.ts
@@ -5,7 +5,7 @@ export const ribbons = createCodeObject(code, 'Animations/Ribbons', {
   installation: `npm install ogl`,
   usage: `<template>
   <Ribbons
-    :colors="['#ff9346', '#7cff67', '#ffee51', '#5227FF']"
+    :colors="['#ff9346', '#7cff67', '#ffee51', '#27FF64']"
     :base-spring="0.03"
     :base-friction="0.9"
     :base-thickness="30"
diff --git a/src/constants/code/Components/folderCode.ts b/src/constants/code/Components/folderCode.ts
index 4403a9b..8a8ebe5 100644
--- a/src/constants/code/Components/folderCode.ts
+++ b/src/constants/code/Components/folderCode.ts
@@ -3,7 +3,7 @@ import { createCodeObject } from '../../../types/code';
 
 export const folder = createCodeObject(code, 'Components/Folder', {
   usage: `<template>
-  <Folder :items="items" :size="2" color="#5227FF" class="my-folder-class" />
+  <Folder :items="items" :size="2" color="#27FF64" class="my-folder-class" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/content/Animations/Ribbons/Ribbons.vue b/src/content/Animations/Ribbons/Ribbons.vue
index 9bf0fca..2caa103 100644
--- a/src/content/Animations/Ribbons/Ribbons.vue
+++ b/src/content/Animations/Ribbons/Ribbons.vue
@@ -22,7 +22,7 @@ interface RibbonsProps {
 }
 
 const props = withDefaults(defineProps<RibbonsProps>(), {
-  colors: () => ['#ff9346', '#7cff67', '#ffee51', '#5227FF'],
+  colors: () => ['#ff9346', '#7cff67', '#ffee51', '#27FF64'],
   baseSpring: 0.03,
   baseFriction: 0.9,
   baseThickness: 30,
diff --git a/src/content/Backgrounds/GradientBlinds/GradientBlinds.vue b/src/content/Backgrounds/GradientBlinds/GradientBlinds.vue
index 56a730e..67a69f9 100644
--- a/src/content/Backgrounds/GradientBlinds/GradientBlinds.vue
+++ b/src/content/Backgrounds/GradientBlinds/GradientBlinds.vue
@@ -32,7 +32,7 @@ const hexToRGB = (hex: string): [number, number, number] => {
 };
 
 const prepStops = (stops?: string[]) => {
-  const base = (stops && stops.length ? stops : ['#FF9FFC', '#5227FF']).slice(0, MAX_COLORS);
+  const base = (stops && stops.length ? stops : ['#FF9FFC', '#27FF64']).slice(0, MAX_COLORS);
   if (base.length === 1) base.push(base[0]);
   while (base.length < MAX_COLORS) base.push(base[base.length - 1]);
   const arr: [number, number, number][] = [];
diff --git a/src/content/Components/Folder/Folder.vue b/src/content/Components/Folder/Folder.vue
index e347b54..8d2fc46 100644
--- a/src/content/Components/Folder/Folder.vue
+++ b/src/content/Components/Folder/Folder.vue
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: '#5227FF',
+  color: '#27FF64',
   size: 1,
   items: () => [],
   class: ''
diff --git a/src/demo/Animations/CrosshairDemo.vue b/src/demo/Animations/CrosshairDemo.vue
index 966f6d7..051507e 100644
--- a/src/demo/Animations/CrosshairDemo.vue
+++ b/src/demo/Animations/CrosshairDemo.vue
@@ -8,7 +8,7 @@
           <a
             ref="linkRef"
             href="https://github.com/DavidHDev/vue-bits"
-            class="text-center font-black text-[2rem] md:text-[4rem] transition-all duration-300 ease-in-out hover:text-[#5227ff]"
+            class="text-center font-black text-[2rem] md:text-[4rem] transition-all duration-300 ease-in-out hover:text-[#27FF64]"
             :style="{ minWidth: minWidth + 'px' }"
             @mouseenter="handleMouseEnter"
             @mouseleave="handleMouseLeave"
diff --git a/src/demo/Animations/RibbonsDemo.vue b/src/demo/Animations/RibbonsDemo.vue
index 4bfb19b..e5b97ab 100644
--- a/src/demo/Animations/RibbonsDemo.vue
+++ b/src/demo/Animations/RibbonsDemo.vue
@@ -95,7 +95,7 @@ const propData = [
   {
     name: 'colors',
     type: 'string[]',
-    default: "['#5227FF']",
+    default: "['#27FF64']",
     description: 'An array of color strings to be used for the ribbons.'
   },
   {
diff --git a/src/demo/Components/FolderDemo.vue b/src/demo/Components/FolderDemo.vue
index 579bf33..8bfdd3a 100644
--- a/src/demo/Components/FolderDemo.vue
+++ b/src/demo/Components/FolderDemo.vue
@@ -36,14 +36,14 @@ import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PropTable from '@/components/common/PropTable.vue';
 import TabbedLayout from '@/components/common/TabbedLayout.vue';
 
-const color = ref('#5227FF');
+const color = ref('#27FF64');
 const size = ref(2);
 
 const propData = [
   {
     name: 'color',
     type: 'string',
-    default: '#5227FF',
+    default: '#27FF64',
     description: 'The color of the folder.'
   },
   {