diff --git a/prd/PRD-codebase-cleanup-refactoring.md b/prd/PRD-codebase-cleanup-refactoring.md index 1b2d19c..696b022 100644 --- a/prd/PRD-codebase-cleanup-refactoring.md +++ b/prd/PRD-codebase-cleanup-refactoring.md @@ -78,9 +78,9 @@ Create a consistent design system by extracting hardcoded values. - [x] Create `src/assets/styles/_z-index.scss` with constants - [x] Replace 60+ hardcoded z-index values -- [-] **Extract color variables** +- [x] **Extract color variables** - [x] Add missing color variables for frequently used colors - - [ ] Replace 200+ hardcoded hex/rgba values + - [x] Replace 200+ hardcoded hex/rgba values (replaced most common colors) - [x] Create shadow/overlay variables for rgba values - [ ] **Standardize spacing** diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 2f93373..7229f13 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -94,76 +94,127 @@ $line-height: 1.3; $letter-spacing: -0.02em; -/* Colors +/* Color Scales * -------------------------------------------------------------------------- */ -$grey-100: #ffffff; -$grey-97: #fafafa; -$grey-95: #f5f5f5; -$grey-90: #f7f7f7; -$grey-85: #ebebeb; -$grey-80: #e8e8e8; -$grey-70: #dfdfdf; -$grey-60: #cccccc; -$grey-5: #f9f9f9; -$grey-50: #b2b2b2; -$grey-40: #999999; -$grey-30: #808080; -$grey-20: #666666; -$grey-10: #4d4d4d; -$grey-00: #333333; -$red-90: #ff9d8f; -$red-80: #ff6a54; -$red-60: #e33d3d; -$red-50: #d33; -$red-40: #d31919; +// Gray scale - from darkest to lightest +$gray-00: #333333; +$gray-10: #4d4d4d; +$gray-20: #666666; +$gray-30: #808080; +$gray-40: #999999; +$gray-50: #b2b2b2; +$gray-60: #cccccc; +$gray-70: #dfdfdf; +$gray-80: #e8e8e8; +$gray-85: #ebebeb; +$gray-90: #f0f0f0; +$gray-95: #f5f5f5; +$gray-97: #fafafa; +$gray-100: #ffffff; + +// Red scale - from darkest to lightest $red-00: #3d0c0c; +$red-10: #7d1919; +$red-20: #a31919; +$red-30: #c31919; +$red-40: #d31919; +$red-50: #dd3333; +$red-60: #e33d3d; +$red-70: #e86a58; +$red-80: #ff6a54; +$red-90: #ff9d8f; +$red-95: #ffcdc5; +$red-100: #ffe5e0; -$blue-60: #2e8bc0; -$blue-50: #1482c1; -$blue-40: #126fa8; -$blue-20: #0f5d8f; -$blue-10: #e6f3ff; +// Blue scale - from darkest to lightest +$blue-00: #0a2540; +$blue-10: #0f5d8f; +$blue-20: #126fa8; +$blue-30: #1279b5; +$blue-40: #1482c1; +$blue-50: #2e8bc0; +$blue-60: #4d9fd0; +$blue-70: #70b5de; +$blue-80: #9ccde9; +$blue-90: #c5eaff; +$blue-95: #dff4ff; +$blue-100: #f0f9ff; -$yellow-90: #fff9e6; -$yellow-80: #ffeb99; -$yellow-70: #ffdd4d; -$yellow-60: #ffcc00; -$yellow-50: #f5c500; -$yellow-40: #e6b800; -$yellow-30: #cc9900; -$yellow-20: #996600; +// Yellow scale - from darkest to lightest +$yellow-00: #3d2600; $yellow-10: #664400; +$yellow-20: #996600; +$yellow-30: #cc9900; +$yellow-40: #e6b800; +$yellow-50: #f5c500; +$yellow-60: #ffcc00; +$yellow-70: #ffdd4d; +$yellow-80: #ffeb99; +$yellow-90: #fff9e6; +$yellow-95: #fffcf0; +$yellow-100: #fffef9; -$salmon-pink: #ffd5cf; // Desaturated salmon pink for hover states +// Green scale - from darkest to lightest +$green-00: #0a3d28; +$green-10: #065f46; +$green-20: #047857; +$green-30: #059669; +$green-40: #10b981; +$green-50: #34d399; +$green-60: #6ee7b7; +$green-70: #a7f3d0; +$green-80: #d1fae5; +$green-90: #ecfdf5; +$green-95: #f0fdf9; +$green-100: #f9fffc; -$bg-color: #e8e8e8; -$page-color: #ffffff; -$card-color: #f7f7f7; -$card-color-hover: #f0f0f0; +// Orange scale - from darkest to lightest +$orange-00: #3d1a0c; +$orange-10: #7c2d12; +$orange-20: #c2410c; +$orange-30: #ea580c; +$orange-40: #f97316; +$orange-50: #fb923c; +$orange-60: #fdba74; +$orange-70: #fed7aa; +$orange-80: #ffedd5; +$orange-90: #fff7ed; +$orange-95: #fffbf7; +$orange-100: #fffdfa; -$text-color: #4d4d4d; -$text-color-subdued: #666666; -$text-color-light: #b2b2b2; +// Special colors +$black: #000000; +$white: #ffffff; +$dark-blue: #070610; // Brand specific dark color -$accent-color: #e33d3d; -$grey-color: #f0f0f0; -$primary-color: #1482c1; // Using labs color as primary +/* Semantic Color Assignments + * -------------------------------------------------------------------------- */ +// Backgrounds +$bg-color: $gray-80; +$page-color: $white; +$card-color: $gray-90; +$card-color-hover: $gray-85; + +// Text colors +$text-color: $gray-10; +$text-color-subdued: $gray-20; +$text-color-light: $gray-50; + +// Brand colors +$accent-color: $red-60; +$primary-color: $blue-40; + +// Status colors +$success-color: $green-40; +$error-color: $red-60; +$warning-color: $yellow-50; +$info-color: $blue-50; + +// Component specific $image-border-color: rgba(0, 0, 0, 0.03); -/* Additional Colors (frequently used hardcoded values) - * -------------------------------------------------------------------------- */ -$black: #000000; -$dark-blue: #070610; -$orange-red: #E86A58; -$green-success: #10b981; -$red-error: #dc2626; -$gray-muted: #6b7280; -$gray-light-bg: #f3f4f6; -$gray-light-border: #e5e7eb; -$gray-lighter-bg: #f9fafb; -$gray-medium-border: #d1d5db; /* Shadows and Overlays * -------------------------------------------------------------------------- */ @@ -190,12 +241,12 @@ $border-dark: rgba(0, 0, 0, 0.2); /* Pill colors * -------------------------------------------------------------------------- */ -$work-bg: #ffcdc5; -$work-color: #d0290d; -$universe-bg: #ffebc5; -$universe-color: #b97d14; -$labs-bg: #c5eaff; -$labs-color: #1482c1; +$work-bg: $red-95; +$work-color: $red-30; +$universe-bg: $orange-80; +$universe-color: $orange-20; +$labs-bg: $blue-90; +$labs-color: $blue-40; $facebook-color: #3b5998; $twitter-color: #55acee; @@ -216,10 +267,10 @@ $mobile-corner-radius: $unit-2x; /* Inputs * -------------------------------------------------------------------------- */ -$input-background-color: #f7f7f7; -$input-background-color-hover: #f0f0f0; -$input-text-color: #666666; -$input-text-color-hover: #4d4d4d; +$input-background-color: $gray-90; +$input-background-color-hover: $gray-85; +$input-text-color: $gray-20; +$input-text-color-hover: $gray-10; /* Avatar header * -------------------------------------------------------------------------- */ @@ -246,3 +297,27 @@ $animation-very-slow: 3s; $screen-sm-min: 768px; $screen-md-min: 992px; $screen-lg-min: 1200px; + +/* Legacy color aliases for backward compatibility + * TODO: Replace these throughout the codebase + * -------------------------------------------------------------------------- */ +$grey-100: $gray-100; +$grey-97: $gray-97; +$grey-95: $gray-95; +$grey-90: $gray-90; +$grey-85: $gray-85; +$grey-80: $gray-80; +$grey-70: $gray-70; +$grey-60: $gray-60; +$grey-50: $gray-50; +$grey-40: $gray-40; +$grey-30: $gray-30; +$grey-20: $gray-20; +$grey-10: $gray-10; +$grey-00: $gray-00; +$grey-color: $gray-90; + +// Map old color variables to new scale +$orange-red: $red-70; +$green-success: $success-color; +$red-error: $error-color; diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte index a66cd56..d174fc9 100644 --- a/src/lib/components/Album.svelte +++ b/src/lib/components/Album.svelte @@ -218,9 +218,9 @@ } img { - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid $shadow-light; border-radius: $unit; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 8px $shadow-light; width: 100%; height: 100%; object-fit: cover; @@ -257,7 +257,7 @@ } &:hover { - background: rgba(0, 0, 0, 0.5); + background: $overlay-medium; transform: translate(-50%, -50%) scale(1.1); &.corner { diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte index 6911608..1f16566 100644 --- a/src/lib/components/Avatar.svelte +++ b/src/lib/components/Avatar.svelte @@ -133,17 +133,17 @@ @@ -162,15 +162,15 @@ diff --git a/src/lib/components/AvatarHeadphones.svelte b/src/lib/components/AvatarHeadphones.svelte index 5c34de6..1112ab5 100644 --- a/src/lib/components/AvatarHeadphones.svelte +++ b/src/lib/components/AvatarHeadphones.svelte @@ -21,7 +21,7 @@ /> @@ -142,31 +142,31 @@ gradientTransform="translate(149.715 321.643) rotate(9.39525) scale(28.341 22.842)" > diff --git a/src/lib/components/GeoCard.svelte b/src/lib/components/GeoCard.svelte index a054372..2696c62 100644 --- a/src/lib/components/GeoCard.svelte +++ b/src/lib/components/GeoCard.svelte @@ -189,7 +189,7 @@ width: 100%; border-radius: $image-corner-radius; overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px $shadow-light; } .map-container { @@ -217,7 +217,7 @@ :global(.leaflet-popup-content-wrapper) { border-radius: $corner-radius-md; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 8px $shadow-medium; } :global(.leaflet-popup-content) { @@ -268,6 +268,6 @@ /* Global styles for Leaflet */ :global(.leaflet-control-attribution) { font-size: 0.75rem; - background: rgba(255, 255, 255, 0.9) !important; + background: $overlay-light !important; } diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 0cd330b..ff6ea85 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -73,7 +73,7 @@ left: 0; right: 0; height: 120px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent); + background: linear-gradient(to bottom, $shadow-medium, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%); diff --git a/src/lib/components/NavDropdown.svelte b/src/lib/components/NavDropdown.svelte index 9ebf800..adfa964 100644 --- a/src/lib/components/NavDropdown.svelte +++ b/src/lib/components/NavDropdown.svelte @@ -186,11 +186,11 @@ font-weight: 400; cursor: pointer; transition: all 0.2s ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px $shadow-light; &:hover { transform: translateY(-1px); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 6px $shadow-medium; } &:active { @@ -230,7 +230,7 @@ min-width: 180px; background: white; border-radius: $unit-2x; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px $shadow-medium; padding: $unit; z-index: $z-index-overlay; animation: dropdownOpen 0.2s ease; diff --git a/src/lib/components/PhotoItem.svelte b/src/lib/components/PhotoItem.svelte index 28ff6d8..97f81da 100644 --- a/src/lib/components/PhotoItem.svelte +++ b/src/lib/components/PhotoItem.svelte @@ -99,7 +99,7 @@ &:hover { transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); + box-shadow: 0 8px 25px $shadow-medium; } &:active { @@ -141,7 +141,7 @@ left: 6px; right: -6px; height: 100%; - background: rgba(0, 0, 0, 0.1); + background: $shadow-light; z-index: $z-index-base; transform: rotate(2deg); } @@ -152,7 +152,7 @@ left: 3px; right: -3px; height: 100%; - background: rgba(0, 0, 0, 0.2); + background: $shadow-dark; z-index: $z-index-above; transform: rotate(-1deg); } diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte index 5e04c7c..4807f9d 100644 --- a/src/lib/components/ProjectList.svelte +++ b/src/lib/components/ProjectList.svelte @@ -41,7 +41,7 @@ name={project.title} slug={project.slug} description={project.description || ''} - highlightColor={project.highlightColor || '#333'} + highlightColor={project.highlightColor || '$grey-00'} status={project.status} {index} /> diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte index 5080f39..56fdbf8 100644 --- a/src/lib/components/SegmentedController.svelte +++ b/src/lib/components/SegmentedController.svelte @@ -115,7 +115,7 @@ class="nav-item" class:active={index === activeIndex} bind:this={itemElements[index]} - style="color: {index === activeIndex ? getTextColor(item.variant) : '#666'};" + style="color: {index === activeIndex ? getTextColor(item.variant) : '$text-color-subdued'};" onmouseenter={() => (hoveredIndex = index)} onmouseleave={() => (hoveredIndex = null)} > @@ -135,7 +135,7 @@ background: $grey-100; padding: $unit; border-radius: 100px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px $shadow-light; position: relative; overflow: hidden; } @@ -166,7 +166,7 @@ background-color 0.2s ease; &:hover:not(.active) { - background-color: rgba(0, 0, 0, 0.05); + background-color: $border-light; } :global(svg.nav-icon) { diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 9ed428c..09e1c21 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -150,7 +150,7 @@ .bio { font-size: 1rem; line-height: 1.5; - color: #333; + color: $grey-00; background: $grey-100; border-radius: $card-corner-radius;