ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests 1 Projects Releases Activity

refactor: update cyan accent colors from cyan-500 to cyan-400 across Button, Text, and multiple page components for consistent branding

Browse Source 
- Changed Button solid cyan variant hover from bg-cyan-600 to bg-cyan-400 and active from bg-cyan-600 to bg-cyan-500
- Changed Button outline variants hover/active states from cyan-500 to cyan-400 across cyan, gray, and white variants
- Changed Button link dark variant hover from text-cyan-500 to text-cyan-400
- Changed Text component accent and cyan color variants
This commit is contained in:
sasha-astiadi
2025-11-21 16:16:46 +01:00
parent c68b4e5de9
commit 5d7272ff6c
9 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Button.tsx
View File

@@ -12,21 +12,21 @@ const baseStyles = {
const variantStyles = {
solid: {
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 active:text-white/80 before:transition-colors',
white:
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
green: 'bg-green-500 text-white hover:bg-green-600',
},
outline: {
cyan: 'border-cyan-500 text-cyan-500',
gray: 'border-gray-200 text-gray-600 hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
white: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
},
link: {
cyan: 'text-cyan-400 underline hover:text-cyan-300',
white: 'text-white underline hover:text-cyan-300',
dark: 'text-gray-900 underline hover:text-cyan-500',
dark: 'text-gray-900 underline hover:text-cyan-400',
},
}

4
src/components/Texts.tsx
View File

@@ -12,8 +12,8 @@ const colorVariants = {
primary: 'text-gray-900',
secondary: 'text-gray-600',
light: 'text-gray-50',
accent: 'text-cyan-500',
cyan: 'text-cyan-50',
accent: 'text-cyan-400',
cyan: 'text-cyan-400',
white: 'text-white',
dark: 'text-gray-950',
tertiary: 'text-gray-700',

2
src/pages/cloud/CloudBluePrint.tsx
View File

@@ -20,7 +20,7 @@ export function CloudBluePrint() {
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
<Eyebrow className="text-cyan-400">Featured Blueprint</Eyebrow>
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
Your Personal Sovereign Cloud Workspace

4
src/pages/cloud/CloudFeatures.tsx
View File

@@ -254,8 +254,8 @@ function CloudFeaturesDesktop() {
className={clsx(
'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
selectedIndex === featureIndex
? 'outline-cyan-500'
: 'outline-transparent hover:outline-cyan-500',
? 'outline-cyan-400'
: 'outline-transparent hover:outline-cyan-400',
)}
>
{featureIndex === selectedIndex && (

4
src/pages/cloud/CloudFeaturesLight.tsx
View File

@@ -153,8 +153,8 @@ function CloudFeaturesDesktop() {
className={clsx(
'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-100',
selectedIndex === featureIndex
? 'outline-cyan-500'
: 'outline-transparent hover:outline-cyan-500',
? 'outline-cyan-400'
: 'outline-transparent hover:outline-cyan-400',
)}
>
{featureIndex === selectedIndex && (

2
src/pages/cloud/CloudPros.tsx
View File

@@ -37,7 +37,7 @@ export function CloudPros() {
{/* Intro Block */}
<div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
<div className="px-8 py-12 max-w-4xl">
<Eyebrow className="uppercase tracking-[0.16em] text-cyan-500">
<Eyebrow className="uppercase tracking-[0.16em] text-cyan-400">
Cloud Advantages
</Eyebrow>

2
src/pages/cloud/CloudUseCases.tsx
View File

@@ -48,7 +48,7 @@ export function CloudUseCases() {
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
<Eyebrow className="text-cyan-400">USE CASES</Eyebrow>
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Built for intelligent workloads across every edge.

2
src/pages/compute/ComputeCapabilities.tsx
View File

@@ -47,7 +47,7 @@ export function ComputeCapabilities() {
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">CAPABILITIES</Eyebrow>
<Eyebrow className="text-cyan-400">CAPABILITIES</Eyebrow>
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
What You Can Run
</H3>

2
src/pages/pods/PodsPro.tsx
View File

@@ -57,7 +57,7 @@ export function PodsPro() {
<div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
<div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
<Eyebrow className="text-cyan-500">
<Eyebrow className="text-cyan-400">
{product.subtitle}
</Eyebrow>