From 513b40bbc471bae18dddfe4406456690a363e9f3 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 25 Jun 2025 22:03:19 -0400 Subject: [PATCH] fix: update remaining $grey- variables in SCSS files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix themes.scss to use $gray- variables - Fix tooltip.scss to use $gray- variables - Resolves build error with undefined variables 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/assets/styles/themes.scss | 10 +++++----- src/lib/components/Album.svelte | 4 ++-- src/lib/components/AvatarHeadphones.svelte | 2 +- src/lib/components/Game.svelte | 2 +- src/lib/components/Header.svelte | 4 ++-- src/lib/components/Lightbox.svelte | 7 +++++-- src/lib/components/LinkCard.svelte | 2 +- src/lib/components/NavDropdown.svelte | 8 ++++---- src/lib/components/NowPlaying.svelte | 4 ++-- src/lib/components/PhotoViewEnhanced.svelte | 2 +- src/lib/components/SegmentedController.svelte | 2 +- src/lib/components/UniverseCard.svelte | 18 +++++++++--------- src/lib/components/admin/Button.svelte | 2 +- src/lib/components/admin/Input.svelte | 4 ++-- src/lib/components/admin/LoadingSpinner.svelte | 2 +- src/lib/components/admin/Modal.svelte | 7 +++++-- .../components/EmbedContextMenu.svelte | 5 ++++- .../headless/components/LinkContextMenu.svelte | 5 ++++- .../headless/components/LinkEditDialog.svelte | 5 ++++- .../components/UrlConvertDropdown.svelte | 5 ++++- src/lib/components/edra/tooltip.scss | 6 +++--- src/routes/+layout.svelte | 4 ++-- 22 files changed, 64 insertions(+), 46 deletions(-) diff --git a/src/assets/styles/themes.scss b/src/assets/styles/themes.scss index 73a1e90..4400a8c 100644 --- a/src/assets/styles/themes.scss +++ b/src/assets/styles/themes.scss @@ -1,10 +1,10 @@ :root { - --bg-color: #{$grey-80}; - --page-color: #{$grey-100}; - --card-color: #{$grey-90}; - --mention-bg-color: #{$grey-90}; + --bg-color: #{$gray-80}; + --page-color: #{$gray-100}; + --card-color: #{$gray-90}; + --mention-bg-color: #{$gray-90}; - --text-color: #{$grey-20}; + --text-color: #{$gray-20}; } [data-theme='dark'] { diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte index 54f3586..15d9eca 100644 --- a/src/lib/components/Album.svelte +++ b/src/lib/components/Album.svelte @@ -205,7 +205,7 @@ flex-direction: column; gap: $unit * 1.5; text-decoration: none; - transition: gap 0.125s ease-in-out; + transition: gap $transition-fast ease-in-out; width: 100%; height: 100%; @@ -243,7 +243,7 @@ align-items: center; justify-content: center; font-size: 24px; - transition: all 0.3s ease; + transition: all $transition-medium ease; backdrop-filter: blur(10px); &.corner { diff --git a/src/lib/components/AvatarHeadphones.svelte b/src/lib/components/AvatarHeadphones.svelte index 1112ab5..d86110e 100644 --- a/src/lib/components/AvatarHeadphones.svelte +++ b/src/lib/components/AvatarHeadphones.svelte @@ -85,7 +85,7 @@ svg { width: 100%; height: auto; - animation: fadeIn 0.3s ease-out; + animation: fadeIn $transition-medium ease-out; } } diff --git a/src/lib/components/Game.svelte b/src/lib/components/Game.svelte index bb76bba..42901e7 100644 --- a/src/lib/components/Game.svelte +++ b/src/lib/components/Game.svelte @@ -77,7 +77,7 @@ flex-direction: column; gap: $unit * 1.5; text-decoration: none; - transition: gap 0.125s ease-in-out; + transition: gap $transition-fast ease-in-out; img { border: 1px solid rgba(0, 0, 0, 0.1); diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index ff6ea85..20ed9a1 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -60,7 +60,7 @@ padding: calc($unit-5x - ($unit-5x - $unit-2x) * var(--padding-progress)) $unit-2x; pointer-events: none; // Add a very subtle transition to smooth out any remaining jitter - transition: padding 0.1s ease-out; + transition: padding $transition-instant ease-out; @include breakpoint('phone') { padding: calc($unit-3x - ($unit-3x - $unit-2x) * var(--padding-progress)) $unit-2x; @@ -82,7 +82,7 @@ z-index: -1; opacity: var(--gradient-opacity); // Add a very subtle transition to smooth out any remaining jitter - transition: opacity 0.1s ease-out; + transition: opacity $transition-instant ease-out; } } diff --git a/src/lib/components/Lightbox.svelte b/src/lib/components/Lightbox.svelte index e3b1bd7..0098889 100644 --- a/src/lib/components/Lightbox.svelte +++ b/src/lib/components/Lightbox.svelte @@ -2,6 +2,9 @@ import { onMount } from 'svelte' import { fade, scale } from 'svelte/transition' + // Convert CSS transition durations to milliseconds for Svelte transitions + const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s + let { images = [], selectedIndex = $bindable(0), @@ -76,7 +79,7 @@
@@ -85,7 +88,7 @@ {alt} {selectedIndex + 1}
diff --git a/src/lib/components/LinkCard.svelte b/src/lib/components/LinkCard.svelte index 9848d13..d9ec6a5 100644 --- a/src/lib/components/LinkCard.svelte +++ b/src/lib/components/LinkCard.svelte @@ -202,7 +202,7 @@ .skeleton { background: $gray-80; border-radius: 4px; - animation: pulse 1.5s ease-in-out infinite; + animation: pulse $animation-slow ease-in-out infinite; } .skeleton-meta { diff --git a/src/lib/components/NavDropdown.svelte b/src/lib/components/NavDropdown.svelte index 3294dc8..5eca792 100644 --- a/src/lib/components/NavDropdown.svelte +++ b/src/lib/components/NavDropdown.svelte @@ -185,7 +185,7 @@ font-size: $font-size; font-weight: 400; cursor: pointer; - transition: all 0.2s ease; + transition: all $transition-normal ease; box-shadow: 0 $unit-1px $unit-3px $shadow-light; &:hover { @@ -209,7 +209,7 @@ height: $unit-2x; margin-left: auto; flex-shrink: 0; - transition: transform 0.2s ease; + transition: transform $transition-normal ease; fill: none; stroke: currentColor; stroke-width: $unit-2px; @@ -233,7 +233,7 @@ box-shadow: 0 $unit-half $unit-12px $shadow-medium; padding: $unit; z-index: 10; - animation: dropdownOpen 0.2s ease; + animation: dropdownOpen $transition-normal ease; } .dropdown-section { @@ -254,7 +254,7 @@ text-decoration: none; color: $gray-20; font-size: $font-size; - transition: background-color 0.2s ease; + transition: background-color $transition-normal ease; &:hover:not(.section-header) { background-color: $gray-97; diff --git a/src/lib/components/NowPlaying.svelte b/src/lib/components/NowPlaying.svelte index 000a309..f89e11e 100644 --- a/src/lib/components/NowPlaying.svelte +++ b/src/lib/components/NowPlaying.svelte @@ -55,7 +55,7 @@ font-size: $font-size-small; backdrop-filter: blur(10px); z-index: $z-index-dropdown; - animation: fadeIn 0.3s ease-out; + animation: fadeIn $transition-medium ease-out; width: fit-content; } @@ -80,7 +80,7 @@ .bar { width: 3px; background: $accent-color; - animation: dance 0.6s ease-in-out infinite; + animation: dance $animation-fast ease-in-out infinite; transform-origin: bottom; } diff --git a/src/lib/components/PhotoViewEnhanced.svelte b/src/lib/components/PhotoViewEnhanced.svelte index 5508279..d17cef3 100644 --- a/src/lib/components/PhotoViewEnhanced.svelte +++ b/src/lib/components/PhotoViewEnhanced.svelte @@ -224,7 +224,7 @@ height: 100px; pointer-events: none; z-index: 10; - transition: opacity 0.3s ease; + transition: opacity $transition-medium ease; } &::before { diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte index f63fd28..e7ade56 100644 --- a/src/lib/components/SegmentedController.svelte +++ b/src/lib/components/SegmentedController.svelte @@ -146,7 +146,7 @@ left: $unit; height: calc(100% - #{$unit * 2}); border-radius: 100px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all $transition-medium cubic-bezier(0.4, 0, 0.2, 1); z-index: $z-index-base; } diff --git a/src/lib/components/UniverseCard.svelte b/src/lib/components/UniverseCard.svelte index f8f7f3a..822b46e 100644 --- a/src/lib/components/UniverseCard.svelte +++ b/src/lib/components/UniverseCard.svelte @@ -79,7 +79,7 @@ background: $gray-100; border-radius: $card-corner-radius; border: $unit-1px solid $gray-95; - transition: all 0.2s ease; + transition: all $transition-normal ease; cursor: pointer; outline: none; @@ -111,14 +111,14 @@ color: $gray-40; font-size: $font-size-small; font-weight: 400; - transition: color 0.2s ease; + transition: color $transition-normal ease; } :global(.card-icon) { width: $unit-2x; height: $unit-2x; fill: $gray-40; - transition: all 0.2s ease; + transition: all $transition-normal ease; } .universe-card--post { @@ -140,7 +140,7 @@ :global(.card-title-link) { color: $gray-10; text-decoration: none; - transition: all 0.2s ease; + transition: all $transition-normal ease; } } @@ -155,25 +155,25 @@ } :global(.card-icon rect:nth-child(1)) { - transition: all 0.3s ease; + transition: all $transition-medium ease; height: $unit-6px; y: $unit-2px; } :global(.card-icon rect:nth-child(2)) { - transition: all 0.3s ease; + transition: all $transition-medium ease; height: $unit-10px; y: $unit-2px; } :global(.card-icon rect:nth-child(3)) { - transition: all 0.3s ease; + transition: all $transition-medium ease; height: $unit; y: $unit-10px; } :global(.card-icon rect:nth-child(4)) { - transition: all 0.3s ease; + transition: all $transition-medium ease; height: $unit-half; y: $unit-14px; } @@ -191,7 +191,7 @@ :global(.card-title-link) { color: $gray-10; text-decoration: none; - transition: all 0.2s ease; + transition: all $transition-normal ease; } } diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte index 9ee5f2a..0cb31a4 100644 --- a/src/lib/components/admin/Button.svelte +++ b/src/lib/components/admin/Button.svelte @@ -174,7 +174,7 @@ font-weight: 400; border: none; cursor: pointer; - transition: all 0.15s ease; + transition: all $transition-fast ease; outline: none; position: relative; white-space: nowrap; diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte index 7048c79..6587f4b 100644 --- a/src/lib/components/admin/Input.svelte +++ b/src/lib/components/admin/Input.svelte @@ -252,7 +252,7 @@ border: 1px solid rgba(0, 0, 0, 0.1); z-index: 1; cursor: pointer; - transition: border-color 0.15s ease; + transition: border-color $transition-fast ease; &:hover { border-color: rgba(0, 0, 0, 0.2); @@ -265,7 +265,7 @@ border: 1px solid transparent; color: $input-text-color; background-color: $input-background-color; - transition: all 0.15s ease; + transition: all $transition-fast ease; &:hover { background-color: $input-background-color-hover; diff --git a/src/lib/components/admin/LoadingSpinner.svelte b/src/lib/components/admin/LoadingSpinner.svelte index c89d683..670616a 100644 --- a/src/lib/components/admin/LoadingSpinner.svelte +++ b/src/lib/components/admin/LoadingSpinner.svelte @@ -34,7 +34,7 @@ border: 3px solid $gray-80; border-top-color: $primary-color; border-radius: 50%; - animation: spin 0.8s linear infinite; + animation: spin $animation-normal linear infinite; } @keyframes spin { diff --git a/src/lib/components/admin/Modal.svelte b/src/lib/components/admin/Modal.svelte index c85cb87..2aec16e 100644 --- a/src/lib/components/admin/Modal.svelte +++ b/src/lib/components/admin/Modal.svelte @@ -3,6 +3,9 @@ import { fade } from 'svelte/transition' import Button from './Button.svelte' + // Convert CSS transition durations to milliseconds for Svelte transitions + const TRANSITION_FAST_MS = 150 // $transition-fast: 0.15s + interface Props { isOpen: boolean size?: 'small' | 'medium' | 'large' | 'jumbo' | 'full' @@ -77,8 +80,8 @@ {#if isOpen} -
-
+
+
{#if showCloseButton} diff --git a/src/lib/components/edra/tooltip.scss b/src/lib/components/edra/tooltip.scss index 12877d3..f476b1e 100644 --- a/src/lib/components/edra/tooltip.scss +++ b/src/lib/components/edra/tooltip.scss @@ -4,8 +4,8 @@ // Link tooltip styles - only apply to tooltips with the link-tooltip theme :global(.tippy-box[data-theme~='link-tooltip']) { - background-color: $grey-00; - color: $grey-100; + background-color: $gray-00; + color: $gray-100; font-size: $font-size-extra-small; font-family: $font-stack; font-weight: $font-weight; @@ -18,7 +18,7 @@ } :global(.tippy-box[data-theme~='link-tooltip'] .tippy-arrow) { - color: $grey-00; + color: $gray-00; } // Animation adjustments for link tooltips diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 917449f..a4798df 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -176,7 +176,7 @@ padding: $unit-half $unit-2x !important; font-size: $font-size-extra-small !important; font-weight: $font-weight-med !important; - transition: background-color 0.2s ease !important; + transition: background-color $transition-normal ease !important; &:hover { background: $blue-40 !important; @@ -191,7 +191,7 @@ padding: $unit-half $unit-2x !important; font-size: $font-size-extra-small !important; font-weight: $font-weight-med !important; - transition: all 0.2s ease !important; + transition: all $transition-normal ease !important; &:hover { background: $gray-95 !important;