diff --git a/prd/PRD-codebase-cleanup-refactoring.md b/prd/PRD-codebase-cleanup-refactoring.md
index 696b022..fb0c7b8 100644
--- a/prd/PRD-codebase-cleanup-refactoring.md
+++ b/prd/PRD-codebase-cleanup-refactoring.md
@@ -83,7 +83,7 @@ Create a consistent design system by extracting hardcoded values.
- [x] Replace 200+ hardcoded hex/rgba values (replaced most common colors)
- [x] Create shadow/overlay variables for rgba values
-- [ ] **Standardize spacing**
+- [-] **Standardize spacing**
- [x] Add missing unit multipliers (added `$unit-7x` through `$unit-19x` and common pixel values)
- [ ] Replace 1,000+ hardcoded pixel values with unit variables
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 7229f13..5683069 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -298,26 +298,5 @@ $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 d174fc9..54f3586 100644
--- a/src/lib/components/Album.svelte
+++ b/src/lib/components/Album.svelte
@@ -213,7 +213,7 @@
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
- background-color: $grey-5;
+ background-color: $gray-5;
border-radius: $unit;
}
@@ -294,7 +294,7 @@
.artist-name {
font-size: $font-size-extra-small;
font-weight: $font-weight-med;
- color: $grey-40;
+ color: $gray-40;
}
}
}
diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte
index ab1bef8..629da73 100644
--- a/src/lib/components/DynamicPostContent.svelte
+++ b/src/lib/components/DynamicPostContent.svelte
@@ -235,8 +235,8 @@
:global(blockquote) {
margin: $unit-4x 0;
padding: $unit-3x;
- background: $grey-97;
- border-left: 4px solid $grey-80;
+ background: $gray-97;
+ border-left: 4px solid $gray-80;
border-radius: $unit;
color: $text-color;
font-style: italic;
@@ -247,7 +247,7 @@
}
:global(code) {
- background: $grey-95;
+ background: $gray-95;
padding: 2px 6px;
border-radius: 4px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
@@ -257,12 +257,12 @@
}
:global(pre) {
- background: $grey-95;
+ background: $gray-95;
padding: $unit-3x;
border-radius: $unit;
overflow-x: auto;
margin: 0 0 $unit-3x;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
:global(code) {
background: none;
@@ -283,7 +283,7 @@
:global(hr) {
border: none;
- border-top: 1px solid $grey-85;
+ border-top: 1px solid $gray-85;
margin: $unit-4x 0;
}
@@ -319,16 +319,16 @@
:global(.url-embed-link) {
display: flex;
flex-direction: column;
- background: $grey-97;
+ background: $gray-97;
border-radius: $card-corner-radius;
overflow: hidden;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
text-decoration: none;
transition: all 0.2s ease;
width: 100%;
&:hover {
- border-color: $grey-80;
+ border-color: $gray-80;
transform: translateY(-1px);
text-decoration: none;
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.08);
@@ -339,7 +339,7 @@
width: 100%;
aspect-ratio: 2 / 1;
overflow: hidden;
- background: $grey-90;
+ background: $gray-90;
}
:global(.url-embed-image img) {
@@ -362,7 +362,7 @@
align-items: center;
gap: $unit-half;
font-size: 0.8125rem;
- color: $grey-40;
+ color: $gray-40;
}
:global(.url-embed-favicon) {
@@ -382,7 +382,7 @@
margin: 0;
font-size: 1.125rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -393,7 +393,7 @@
:global(.url-embed-description) {
margin: 0;
font-size: 0.9375rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -406,7 +406,7 @@
margin: $unit-3x 0;
border-radius: $card-corner-radius;
overflow: hidden;
- background: $grey-95;
+ background: $gray-95;
}
:global(.youtube-embed-wrapper) {
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index bda9e7c..7195d73 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -52,14 +52,14 @@
.copyright {
margin: 0;
font-size: 0.875rem; // 14px
- color: $grey-40; // #999
+ color: $gray-40; // #999
.separator {
margin: 0 $unit-half;
}
.rss-link {
- color: $grey-40;
+ color: $gray-40;
text-decoration: none;
transition: color 0.2s ease;
@@ -76,7 +76,7 @@
font-size: 0.875rem; // 14px
a {
- color: $grey-40;
+ color: $gray-40;
text-decoration: none;
transition: color 0.2s ease;
@@ -86,7 +86,7 @@
}
.separator {
- color: $grey-40;
+ color: $gray-40;
}
}
diff --git a/src/lib/components/Game.svelte b/src/lib/components/Game.svelte
index 214faf1..bb76bba 100644
--- a/src/lib/components/Game.svelte
+++ b/src/lib/components/Game.svelte
@@ -106,7 +106,7 @@
.game-playtime {
font-size: $font-size-extra-small;
font-weight: $font-weight-med;
- color: $grey-40;
+ color: $gray-40;
}
}
}
diff --git a/src/lib/components/GeoCard.svelte b/src/lib/components/GeoCard.svelte
index 2696c62..cde0f2f 100644
--- a/src/lib/components/GeoCard.svelte
+++ b/src/lib/components/GeoCard.svelte
@@ -195,7 +195,7 @@
.map-container {
width: 100%;
position: relative;
- background: $grey-95;
+ background: $gray-95;
:global(.leaflet-container) {
font-family: inherit;
@@ -205,13 +205,13 @@
margin: 0 0 $unit-half;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
:global(.location-popup p) {
margin: 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.4;
}
@@ -230,7 +230,7 @@
display: flex;
align-items: center;
justify-content: center;
- background: $grey-95;
+ background: $gray-95;
padding: $unit-3x;
text-align: center;
}
@@ -239,19 +239,19 @@
h3 {
margin: 0 0 $unit;
font-size: 1.25rem;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
.coordinates {
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.875rem;
- color: $grey-60;
+ color: $gray-60;
margin-bottom: $unit-2x;
}
diff --git a/src/lib/components/HorizontalScrollPhotoGrid.svelte b/src/lib/components/HorizontalScrollPhotoGrid.svelte
index a13d7fe..a5468a9 100644
--- a/src/lib/components/HorizontalScrollPhotoGrid.svelte
+++ b/src/lib/components/HorizontalScrollPhotoGrid.svelte
@@ -70,7 +70,7 @@
margin: 0;
font-size: 0.875rem;
line-height: 1.4;
- color: $grey-20;
+ color: $gray-20;
padding: $unit 0;
}
diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte
index f92c189..acde8d4 100644
--- a/src/lib/components/LabCard.svelte
+++ b/src/lib/components/LabCard.svelte
@@ -176,7 +176,7 @@
diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 9ac7d18..ebaeb7c 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -76,7 +76,7 @@
.post-content {
padding: $unit-3x;
- background: $grey-100;
+ background: $gray-100;
border-radius: $card-corner-radius;
}
@@ -106,7 +106,7 @@
.post-excerpt {
margin: 0;
- color: $grey-00;
+ color: $gray-00;
font-size: 1rem;
line-height: 1.5;
display: -webkit-box;
@@ -132,7 +132,7 @@
.post-date {
display: block;
font-size: 1rem;
- color: $grey-40;
+ color: $gray-40;
font-weight: 400;
transition: all 0.2s ease;
}
@@ -146,6 +146,6 @@
:global(.universe-icon) {
width: 16px;
height: 16px;
- fill: $grey-40;
+ fill: $gray-40;
}
diff --git a/src/lib/components/ProjectHeaderContent.svelte b/src/lib/components/ProjectHeaderContent.svelte
index 787588c..6e755ae 100644
--- a/src/lib/components/ProjectHeaderContent.svelte
+++ b/src/lib/components/ProjectHeaderContent.svelte
@@ -53,7 +53,7 @@
letter-spacing: -0.025em;
font-weight: 500;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
@include breakpoint('phone') {
font-size: 2rem;
@@ -62,7 +62,7 @@
.project-subtitle {
font-size: 1.25rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0;
@include breakpoint('phone') {
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
index 8f91062..29039da 100644
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@@ -210,7 +210,7 @@
align-items: center;
gap: $unit-3x;
padding: $unit-3x;
- background: $grey-100;
+ background: $gray-100;
border-radius: $card-corner-radius;
transition:
transform 0.15s ease-out,
@@ -232,7 +232,7 @@
&.list-only {
opacity: 0.7;
- background: $grey-97;
+ background: $gray-97;
}
&.password-protected {
@@ -287,7 +287,7 @@
margin: 0;
font-size: 1rem; // 18px
line-height: 1.3;
- color: $grey-00;
+ color: $gray-00;
}
.status-indicator {
@@ -299,7 +299,7 @@
font-weight: 500;
&.list-only {
- color: $grey-60;
+ color: $gray-60;
}
&.password-protected {
diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte
index 4807f9d..a9fe4a1 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 || '$grey-00'}
+ highlightColor={project.highlightColor || '$gray-00'}
status={project.status}
{index}
/>
@@ -88,7 +88,7 @@
.intro-card {
padding: $unit-3x;
- background: $grey-100;
+ background: $gray-100;
border-radius: $card-corner-radius;
}
@@ -96,7 +96,7 @@
margin: 0;
font-size: 1rem; // 18px
line-height: 1.3;
- color: $grey-00;
+ color: $gray-00;
&:not(:last-child) {
margin-bottom: $unit-2x;
@@ -110,6 +110,6 @@
.no-projects {
padding: $unit-3x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
}
diff --git a/src/lib/components/ProjectPasswordProtection.svelte b/src/lib/components/ProjectPasswordProtection.svelte
index 25e23fa..3c29d96 100644
--- a/src/lib/components/ProjectPasswordProtection.svelte
+++ b/src/lib/components/ProjectPasswordProtection.svelte
@@ -140,7 +140,7 @@
width: 100%;
.lock-icon {
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit-3x;
svg {
@@ -152,7 +152,7 @@
h1 {
font-size: 2rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
margin: 0 0 $unit-2x;
@include breakpoint('phone') {
@@ -161,7 +161,7 @@
}
p {
- color: $grey-40;
+ color: $gray-40;
margin: 0;
line-height: 1.5;
font-size: 1rem;
@@ -195,7 +195,7 @@
.password-input {
flex: 1;
padding: $unit-2x;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $unit;
font-size: 1rem;
transition:
@@ -214,8 +214,8 @@
}
&:disabled {
- background: $grey-95;
- color: $grey-60;
+ background: $gray-95;
+ color: $gray-60;
cursor: not-allowed;
}
}
@@ -232,7 +232,7 @@
}
.back-link-wrapper {
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
padding-top: $unit-3x;
text-align: center;
width: 100%;
diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte
index 56fdbf8..f63fd28 100644
--- a/src/lib/components/SegmentedController.svelte
+++ b/src/lib/components/SegmentedController.svelte
@@ -132,7 +132,7 @@
display: flex;
align-items: center;
gap: 4px;
- background: $grey-100;
+ background: $gray-100;
padding: $unit;
border-radius: 100px;
box-shadow: 0 1px 3px $shadow-light;
diff --git a/src/lib/components/SingleColumnPhotoGrid.svelte b/src/lib/components/SingleColumnPhotoGrid.svelte
index 00ad899..803126f 100644
--- a/src/lib/components/SingleColumnPhotoGrid.svelte
+++ b/src/lib/components/SingleColumnPhotoGrid.svelte
@@ -45,7 +45,7 @@
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
- color: $grey-20;
+ color: $gray-20;
}
@include breakpoint('phone') {
diff --git a/src/lib/components/Slideshow.svelte b/src/lib/components/Slideshow.svelte
index 92ba3f2..592348e 100644
--- a/src/lib/components/Slideshow.svelte
+++ b/src/lib/components/Slideshow.svelte
@@ -276,7 +276,7 @@
}
&::after {
- border-color: $grey-100;
+ border-color: $gray-100;
}
}
@@ -286,12 +286,12 @@
}
&::after {
- border-color: $grey-100;
+ border-color: $gray-100;
}
}
&.placeholder {
- background: $grey-90;
+ background: $gray-90;
cursor: default;
&:hover {
diff --git a/src/lib/components/UniverseAlbumCard.svelte b/src/lib/components/UniverseAlbumCard.svelte
index 42e1e7a..be950b0 100644
--- a/src/lib/components/UniverseAlbumCard.svelte
+++ b/src/lib/components/UniverseAlbumCard.svelte
@@ -89,7 +89,7 @@
.album-description {
margin: 0;
- color: $grey-10;
+ color: $gray-10;
font-size: 1rem;
line-height: 1.5;
display: -webkit-box;
diff --git a/src/lib/components/UniverseCard.svelte b/src/lib/components/UniverseCard.svelte
index 3785c27..126ec5f 100644
--- a/src/lib/components/UniverseCard.svelte
+++ b/src/lib/components/UniverseCard.svelte
@@ -76,15 +76,15 @@
.card-content {
padding: $unit-3x;
- background: $grey-100;
+ background: $gray-100;
border-radius: $card-corner-radius;
- border: 1px solid $grey-95;
+ border: 1px solid $gray-95;
transition: all 0.2s ease;
cursor: pointer;
outline: none;
&:hover {
- border-color: $grey-85;
+ border-color: $gray-85;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@@ -108,7 +108,7 @@
}
.card-date {
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
font-weight: 400;
transition: color 0.2s ease;
@@ -117,7 +117,7 @@
:global(.card-icon) {
width: 16px;
height: 16px;
- fill: $grey-40;
+ fill: $gray-40;
transition: all 0.2s ease;
}
@@ -138,7 +138,7 @@
}
:global(.card-title-link) {
- color: $grey-10;
+ color: $gray-10;
text-decoration: none;
transition: all 0.2s ease;
}
@@ -189,7 +189,7 @@
}
:global(.card-title-link) {
- color: $grey-10;
+ color: $gray-10;
text-decoration: none;
transition: all 0.2s ease;
}
diff --git a/src/lib/components/UniverseFeed.svelte b/src/lib/components/UniverseFeed.svelte
index 4aae7c3..c2b1b43 100644
--- a/src/lib/components/UniverseFeed.svelte
+++ b/src/lib/components/UniverseFeed.svelte
@@ -48,12 +48,12 @@
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
diff --git a/src/lib/components/UniversePostCard.svelte b/src/lib/components/UniversePostCard.svelte
index 6025f6a..822b8f7 100644
--- a/src/lib/components/UniversePostCard.svelte
+++ b/src/lib/components/UniversePostCard.svelte
@@ -117,8 +117,8 @@
}
.link-preview {
- background: $grey-97;
- border: 1px solid $grey-90;
+ background: $gray-97;
+ border: 1px solid $gray-90;
border-radius: $card-corner-radius;
padding: $unit-2x;
margin-bottom: $unit-3x;
@@ -138,7 +138,7 @@
.link-description {
margin: 0;
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
line-height: 1.4;
}
@@ -147,7 +147,7 @@
.post-excerpt {
p {
margin: 0;
- color: $grey-10;
+ color: $gray-10;
font-size: 1rem;
line-height: 1.5;
}
@@ -163,7 +163,7 @@
// Styles for full content (non-essays)
:global(p) {
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
font-size: 1rem;
line-height: 1.5;
@@ -200,12 +200,12 @@
margin-bottom: $unit-3x;
.attachment-count {
- background: $grey-95;
- border: 1px solid $grey-85;
+ background: $gray-95;
+ border: 1px solid $gray-85;
border-radius: $unit;
padding: $unit $unit-2x;
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
display: inline-block;
}
}
@@ -230,9 +230,9 @@
padding-bottom: 56%; // 16:9 aspect ratio
height: 0;
overflow: hidden;
- background: $grey-95;
+ background: $gray-95;
border-radius: $card-corner-radius;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
iframe {
position: absolute;
@@ -249,16 +249,16 @@
.url-embed-preview {
display: flex;
flex-direction: column;
- background: $grey-97;
+ background: $gray-97;
border-radius: $card-corner-radius;
overflow: hidden;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
text-decoration: none;
transition: all 0.2s ease;
width: 100%;
&:hover {
- border-color: $grey-80;
+ border-color: $gray-80;
transform: translateY(-1px);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}
@@ -267,7 +267,7 @@
width: 100%;
aspect-ratio: 2 / 1;
overflow: hidden;
- background: $grey-90;
+ background: $gray-90;
img {
width: 100%;
@@ -290,7 +290,7 @@
align-items: center;
gap: $unit-half;
font-size: 0.8125rem;
- color: $grey-40;
+ color: $gray-40;
}
.embed-favicon {
@@ -310,7 +310,7 @@
margin: 0;
font-size: 1.125rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -321,7 +321,7 @@
.embed-description {
margin: 0;
font-size: 0.9375rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
diff --git a/src/lib/components/ViewModeSelector.svelte b/src/lib/components/ViewModeSelector.svelte
index fdbbe2f..83aca5e 100644
--- a/src/lib/components/ViewModeSelector.svelte
+++ b/src/lib/components/ViewModeSelector.svelte
@@ -82,7 +82,7 @@
diff --git a/src/lib/components/admin/AlbumSelector.svelte b/src/lib/components/admin/AlbumSelector.svelte
index 9ed8d93..732db45 100644
--- a/src/lib/components/admin/AlbumSelector.svelte
+++ b/src/lib/components/admin/AlbumSelector.svelte
@@ -318,13 +318,13 @@
.selector-header {
padding: $unit-3x;
- border-bottom: 1px solid $grey-85;
+ border-bottom: 1px solid $gray-85;
h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -358,7 +358,7 @@
justify-content: center;
padding: $unit-6x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
p {
margin: $unit-2x 0 0 0;
@@ -376,13 +376,13 @@
align-items: center;
gap: $unit-2x;
padding: $unit-2x;
- background: $grey-95;
+ background: $gray-95;
border-radius: $unit;
cursor: pointer;
transition: background 0.2s ease;
&:hover {
- background: $grey-90;
+ background: $gray-90;
}
input[type='checkbox'] {
@@ -401,7 +401,7 @@
.album-title {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -409,7 +409,7 @@
.album-meta {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
.create-new-form {
@@ -421,7 +421,7 @@
margin: 0;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -436,6 +436,6 @@
justify-content: flex-end;
gap: $unit-2x;
padding: $unit-3x;
- border-top: 1px solid $grey-85;
+ border-top: 1px solid $gray-85;
}
diff --git a/src/lib/components/admin/AlbumSelectorModal.svelte b/src/lib/components/admin/AlbumSelectorModal.svelte
index 8483789..2e87aa2 100644
--- a/src/lib/components/admin/AlbumSelectorModal.svelte
+++ b/src/lib/components/admin/AlbumSelectorModal.svelte
@@ -155,13 +155,13 @@
flex-direction: column;
gap: $unit;
padding: $unit-3x;
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -174,7 +174,7 @@
.modal-subtitle {
margin: 0;
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
}
.close-button {
@@ -182,7 +182,7 @@
height: 32px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -192,8 +192,8 @@
padding: 0;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
svg {
@@ -224,13 +224,13 @@
align-items: center;
gap: $unit-3x;
padding: $unit-3x;
- border-top: 1px solid $grey-90;
- background: $grey-95;
+ border-top: 1px solid $gray-90;
+ background: $gray-95;
}
.action-summary {
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
flex: 1;
}
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
index 00b34b0..c6579a6 100644
--- a/src/lib/components/admin/Button.svelte
+++ b/src/lib/components/admin/Button.svelte
@@ -283,17 +283,17 @@
}
.btn-secondary {
- background-color: $grey-10;
- color: $grey-80;
- border: 1px solid $grey-20;
+ background-color: $gray-10;
+ color: $gray-80;
+ border: 1px solid $gray-20;
&:hover:not(:disabled) {
- background-color: $grey-20;
- border-color: $grey-30;
+ background-color: $gray-20;
+ border-color: $gray-30;
}
&:active:not(:disabled) {
- background-color: $grey-30;
+ background-color: $gray-30;
}
}
@@ -312,35 +312,35 @@
.btn-ghost {
background-color: transparent;
- color: $grey-20;
+ color: $gray-20;
&:hover:not(:disabled) {
- background-color: $grey-5;
- color: $grey-00;
+ background-color: $gray-5;
+ color: $gray-00;
}
&:active:not(:disabled) {
- background-color: $grey-10;
+ background-color: $gray-10;
}
&.active {
- background-color: $grey-10;
- color: $grey-00;
+ background-color: $gray-10;
+ color: $gray-00;
}
}
.btn-text {
background: none;
- color: $grey-40;
+ color: $gray-40;
padding: $unit;
&:hover:not(:disabled) {
- color: $grey-20;
- background-color: $grey-5;
+ color: $gray-20;
+ background-color: $gray-5;
}
&:active:not(:disabled) {
- color: $grey-00;
+ color: $gray-00;
}
}
@@ -351,30 +351,30 @@
font-weight: 600;
&:hover:not(:disabled) {
- background-color: $grey-90;
+ background-color: $gray-90;
color: #dc2626;
}
&:active:not(:disabled) {
- background-color: $grey-80;
+ background-color: $gray-80;
color: #dc2626;
}
}
.btn-overlay {
background-color: white;
- color: $grey-20;
+ color: $gray-20;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
&:hover:not(:disabled) {
- background-color: $grey-5;
- color: $grey-00;
+ background-color: $gray-5;
+ color: $gray-00;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
&:active:not(:disabled) {
- background-color: $grey-10;
+ background-color: $gray-10;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
}
diff --git a/src/lib/components/admin/DeleteConfirmationModal.svelte b/src/lib/components/admin/DeleteConfirmationModal.svelte
index 12fa9d9..84a1944 100644
--- a/src/lib/components/admin/DeleteConfirmationModal.svelte
+++ b/src/lib/components/admin/DeleteConfirmationModal.svelte
@@ -79,12 +79,12 @@
margin: 0 0 $unit-2x;
font-size: 1.25rem;
font-weight: 700;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit-4x;
- color: $grey-20;
+ color: $gray-20;
line-height: 1.5;
}
}
diff --git a/src/lib/components/admin/DropdownItem.svelte b/src/lib/components/admin/DropdownItem.svelte
index a768e25..e579d80 100644
--- a/src/lib/components/admin/DropdownItem.svelte
+++ b/src/lib/components/admin/DropdownItem.svelte
@@ -34,12 +34,12 @@
border: none;
text-align: left;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover:not(:disabled) {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&.danger {
diff --git a/src/lib/components/admin/DropdownMenu.svelte b/src/lib/components/admin/DropdownMenu.svelte
index 4d1db25..b4b7789 100644
--- a/src/lib/components/admin/DropdownMenu.svelte
+++ b/src/lib/components/admin/DropdownMenu.svelte
@@ -212,7 +212,7 @@
.dropdown-menu {
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
@@ -229,7 +229,7 @@
border: none;
text-align: left;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
@@ -237,7 +237,7 @@
justify-content: space-between;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&.danger {
@@ -257,7 +257,7 @@
width: 16px;
height: 16px;
margin-left: $unit;
- color: $grey-40;
+ color: $gray-40;
flex-shrink: 0;
display: inline-flex;
align-items: center;
@@ -279,7 +279,7 @@
.dropdown-divider {
height: 1px;
- background-color: $grey-80;
+ background-color: $gray-80;
margin: $unit-half 0;
}
diff --git a/src/lib/components/admin/DropdownMenuContainer.svelte b/src/lib/components/admin/DropdownMenuContainer.svelte
index 8dbd2d1..54ef59d 100644
--- a/src/lib/components/admin/DropdownMenuContainer.svelte
+++ b/src/lib/components/admin/DropdownMenuContainer.svelte
@@ -18,7 +18,7 @@
top: calc(100% + $unit-half);
right: 0;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
diff --git a/src/lib/components/admin/EnhancedComposer.svelte b/src/lib/components/admin/EnhancedComposer.svelte
index 418ce83..39f346d 100644
--- a/src/lib/components/admin/EnhancedComposer.svelte
+++ b/src/lib/components/admin/EnhancedComposer.svelte
@@ -1070,7 +1070,7 @@
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
- background: $grey-95;
+ background: $gray-95;
}
.edra-editor {
@@ -1300,7 +1300,7 @@
justify-content: center;
padding: $unit-4x;
gap: $unit;
- color: $grey-30;
+ color: $gray-30;
}
:global(.animate-spin) {
@@ -1327,7 +1327,7 @@
cursor: grab;
opacity: 0;
transition: opacity 0.2s;
- color: $grey-40;
+ color: $gray-40;
z-index: 50;
}
diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
index 7ac6dac..2318f12 100644
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -368,14 +368,14 @@
// Custom styles for save/publish buttons to maintain grey color scheme
:global(.save-button.btn-primary) {
- background-color: $grey-10;
+ background-color: $gray-10;
&:hover:not(:disabled) {
- background-color: $grey-20;
+ background-color: $gray-20;
}
&:active:not(:disabled) {
- background-color: $grey-30;
+ background-color: $gray-30;
}
}
@@ -386,18 +386,18 @@
}
:global(.chevron-button.btn-primary) {
- background-color: $grey-10;
+ background-color: $gray-10;
&:hover:not(:disabled) {
- background-color: $grey-20;
+ background-color: $gray-20;
}
&:active:not(:disabled) {
- background-color: $grey-30;
+ background-color: $gray-30;
}
&.active {
- background-color: $grey-20;
+ background-color: $gray-20;
}
}
@@ -498,7 +498,7 @@
margin-bottom: $unit;
font-size: 14px;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
}
}
@@ -523,10 +523,10 @@
align-items: center;
gap: 4px;
padding: $unit $unit-2x;
- background: $grey-90;
+ background: $gray-90;
border-radius: 20px;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
:global(.btn) {
margin-left: 4px;
diff --git a/src/lib/components/admin/FormField.svelte b/src/lib/components/admin/FormField.svelte
index f7fd76c..16523f9 100644
--- a/src/lib/components/admin/FormField.svelte
+++ b/src/lib/components/admin/FormField.svelte
@@ -87,7 +87,7 @@
display: block;
margin-bottom: $unit;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: #c33;
@@ -99,7 +99,7 @@
textarea {
width: 100%;
padding: $unit-2x $unit-3x;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
@@ -112,7 +112,7 @@
}
&:disabled {
- background-color: $grey-95;
+ background-color: $gray-95;
cursor: not-allowed;
}
}
@@ -130,7 +130,7 @@
.help-text {
margin-top: $unit;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
}
diff --git a/src/lib/components/admin/FormFieldWrapper.svelte b/src/lib/components/admin/FormFieldWrapper.svelte
index 3084d61..89dcb34 100644
--- a/src/lib/components/admin/FormFieldWrapper.svelte
+++ b/src/lib/components/admin/FormFieldWrapper.svelte
@@ -50,7 +50,7 @@
display: block;
margin-bottom: $unit;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
font-size: 0.925rem;
.required {
@@ -67,7 +67,7 @@
.help-text {
margin-top: $unit;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
}
diff --git a/src/lib/components/admin/GalleryManager.svelte b/src/lib/components/admin/GalleryManager.svelte
index 50efaf6..5dc20f3 100644
--- a/src/lib/components/admin/GalleryManager.svelte
+++ b/src/lib/components/admin/GalleryManager.svelte
@@ -378,7 +378,7 @@
.input-label {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-60;
@@ -388,7 +388,7 @@
.items-count {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
font-weight: 500;
}
@@ -397,9 +397,9 @@
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: $unit-2x;
padding: $unit-2x;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $card-corner-radius;
- background-color: $grey-97;
+ background-color: $gray-97;
&.has-error {
border-color: $red-60;
@@ -414,7 +414,7 @@
cursor: move;
transition: all 0.2s ease;
background-color: white;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
&:hover {
transform: translateY(-2px);
@@ -467,8 +467,8 @@
justify-content: center;
width: 100%;
height: 100%;
- background-color: $grey-95;
- color: $grey-60;
+ background-color: $gray-95;
+ color: $gray-60;
}
.image-info {
@@ -543,10 +543,10 @@
justify-content: center;
gap: $unit;
aspect-ratio: 1;
- border: 2px dashed $grey-70;
+ border: 2px dashed $gray-70;
border-radius: $card-corner-radius;
background-color: transparent;
- color: $grey-50;
+ color: $gray-50;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
@@ -568,9 +568,9 @@
align-items: center;
justify-content: center;
min-height: 200px;
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $card-corner-radius;
- background-color: $grey-97;
+ background-color: $gray-97;
&.has-error {
border-color: $red-60;
@@ -587,13 +587,13 @@
}
.empty-icon {
- color: $grey-60;
+ color: $gray-60;
}
.empty-text {
margin: 0;
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
}
.add-more-container {
@@ -611,7 +611,7 @@
.help-text {
margin: 0;
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
text-align: center;
font-style: italic;
}
diff --git a/src/lib/components/admin/GalleryUploader.svelte b/src/lib/components/admin/GalleryUploader.svelte
index 090c643..99e4e1e 100644
--- a/src/lib/components/admin/GalleryUploader.svelte
+++ b/src/lib/components/admin/GalleryUploader.svelte
@@ -706,7 +706,7 @@
.uploader-label {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-60;
@@ -717,15 +717,15 @@
.help-text {
margin: 0;
font-size: 0.8rem;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.4;
}
// Drop Zone Styles
.drop-zone {
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $card-corner-radius;
- background-color: $grey-97;
+ background-color: $gray-97;
cursor: pointer;
transition: all 0.2s ease;
min-height: 120px;
@@ -761,8 +761,8 @@
cursor: not-allowed;
&:hover {
- border-color: $grey-80;
- background-color: $grey-97;
+ border-color: $gray-80;
+ background-color: $gray-97;
}
}
}
@@ -772,21 +772,21 @@
padding: $unit-3x;
.upload-icon {
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-2x;
}
.upload-main-text {
margin: 0 0 $unit 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
font-weight: 500;
}
.upload-sub-text {
margin: 0;
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
}
}
@@ -802,7 +802,7 @@
.upload-text {
margin: 0 0 $unit-2x 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
font-weight: 500;
}
@@ -822,7 +822,7 @@
.file-name {
flex: 1;
- color: $grey-30;
+ color: $gray-30;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
@@ -832,7 +832,7 @@
.progress-bar {
width: 60px;
height: 4px;
- background-color: $grey-90;
+ background-color: $gray-90;
border-radius: 2px;
overflow: hidden;
@@ -846,7 +846,7 @@
.progress-percent {
width: 30px;
text-align: right;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.7rem;
}
}
@@ -868,14 +868,14 @@
.gallery-item {
position: relative;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
border-radius: $card-corner-radius;
background-color: white;
overflow: hidden;
transition: all 0.2s ease;
&:hover {
- border-color: $grey-70;
+ border-color: $gray-70;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@@ -898,7 +898,7 @@
border-radius: 4px;
padding: $unit-half;
cursor: grab;
- color: $grey-40;
+ color: $gray-40;
opacity: 0;
transition: opacity 0.2s ease;
@@ -929,7 +929,7 @@
position: relative;
aspect-ratio: 1;
overflow: hidden;
- background-color: $grey-97;
+ background-color: $gray-97;
.image-button {
width: 100%;
@@ -969,7 +969,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
- color: $grey-40;
+ color: $gray-40;
opacity: 0;
transition: all 0.2s ease;
z-index: 1;
@@ -993,13 +993,13 @@
.file-info {
padding: $unit-2x;
padding-top: $unit;
- border-top: 1px solid $grey-95;
+ border-top: 1px solid $gray-95;
.filename {
margin: 0 0 $unit-half 0;
font-size: 0.75rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1008,7 +1008,7 @@
.file-meta {
margin: 0;
font-size: 0.7rem;
- color: $grey-40;
+ color: $gray-40;
}
}
diff --git a/src/lib/components/admin/GenericMetadataPopover.svelte b/src/lib/components/admin/GenericMetadataPopover.svelte
index 65b3c44..ab7aa94 100644
--- a/src/lib/components/admin/GenericMetadataPopover.svelte
+++ b/src/lib/components/admin/GenericMetadataPopover.svelte
@@ -274,7 +274,7 @@
.metadata-popover {
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $card-corner-radius;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
min-width: 420px;
@@ -296,13 +296,13 @@
font-size: 1.125rem;
font-weight: 600;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
}
}
.popover-footer {
padding: $unit-3x;
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
display: flex;
justify-content: flex-start;
}
@@ -318,7 +318,7 @@
display: block;
margin-bottom: $unit;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
font-size: 0.925rem;
}
}
@@ -333,7 +333,7 @@
align-self: flex-start;
margin-top: $unit-half;
padding: $unit $unit-2x;
- background: $grey-10;
+ background: $gray-10;
color: white;
border: none;
border-radius: 6px;
@@ -342,7 +342,7 @@
transition: background-color 0.15s ease;
&:hover {
- background: $grey-20;
+ background: $gray-20;
}
}
@@ -358,28 +358,28 @@
align-items: center;
gap: 4px;
padding: 4px $unit-2x;
- background: $grey-80;
+ background: $gray-80;
border-radius: 20px;
font-size: 0.75rem;
button {
background: none;
border: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
&:hover {
- color: $grey-10;
+ color: $gray-10;
}
}
}
.metadata {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
p {
margin: $unit-half 0;
@@ -418,7 +418,7 @@
position: relative;
width: 44px;
height: 24px;
- background-color: $grey-80;
+ background-color: $gray-80;
border-radius: 12px;
transition: background-color 0.2s ease;
flex-shrink: 0;
@@ -444,13 +444,13 @@
.toggle-title {
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
font-size: 0.875rem;
}
.toggle-description {
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
line-height: 1.4;
}
}
diff --git a/src/lib/components/admin/ImagePicker.svelte b/src/lib/components/admin/ImagePicker.svelte
index ebb4c4e..2ff491b 100644
--- a/src/lib/components/admin/ImagePicker.svelte
+++ b/src/lib/components/admin/ImagePicker.svelte
@@ -234,7 +234,7 @@
.input-label {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-60;
@@ -245,15 +245,15 @@
.image-preview-container {
position: relative;
width: 100%;
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $card-corner-radius;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
- background-color: $grey-95;
+ background-color: $gray-95;
&:hover {
- border-color: $grey-60;
+ border-color: $gray-60;
}
&:focus {
@@ -264,7 +264,7 @@
&.has-image {
border-style: solid;
- border-color: $grey-80;
+ border-color: $gray-80;
background-color: transparent;
&:hover {
@@ -328,20 +328,20 @@
}
.empty-icon {
- color: $grey-60;
+ color: $gray-60;
margin-bottom: $unit;
}
.empty-text {
margin: 0;
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit;
}
.image-details {
padding: $unit-2x;
- background-color: $grey-95;
+ background-color: $gray-95;
border-radius: $card-corner-radius;
display: flex;
flex-direction: column;
@@ -357,11 +357,11 @@
.detail-label {
font-weight: 500;
- color: $grey-30;
+ color: $gray-30;
}
.detail-value {
- color: $grey-10;
+ color: $gray-10;
text-align: right;
word-break: break-all;
}
diff --git a/src/lib/components/admin/ImageUploader.svelte b/src/lib/components/admin/ImageUploader.svelte
index 8ec669a..7faa083 100644
--- a/src/lib/components/admin/ImageUploader.svelte
+++ b/src/lib/components/admin/ImageUploader.svelte
@@ -540,7 +540,7 @@
.uploader-label {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-60;
@@ -551,7 +551,7 @@
.help-text {
margin: 0;
font-size: 0.8rem;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.4;
}
@@ -561,9 +561,9 @@
// Drop Zone Styles
.drop-zone {
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $card-corner-radius;
- background-color: $grey-97;
+ background-color: $gray-97;
cursor: pointer;
transition: all 0.2s ease;
min-height: 200px;
@@ -600,21 +600,21 @@
padding: $unit-4x;
.upload-icon {
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-2x;
}
.upload-main-text {
margin: 0 0 $unit 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
font-weight: 500;
}
.upload-sub-text {
margin: 0;
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
}
}
@@ -630,14 +630,14 @@
.upload-text {
margin: 0 0 $unit-2x 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
font-weight: 500;
}
.progress-bar {
width: 200px;
height: 4px;
- background-color: $grey-90;
+ background-color: $gray-90;
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
@@ -655,7 +655,7 @@
position: relative;
border-radius: $card-corner-radius;
overflow: hidden;
- background-color: $grey-95;
+ background-color: $gray-95;
min-height: 200px;
:global(.preview-image) {
@@ -696,13 +696,13 @@
margin: 0 0 $unit-half 0;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
}
.file-meta {
margin: 0;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
}
@@ -717,9 +717,9 @@
flex-direction: column;
gap: $unit-2x;
padding: $unit-3x;
- background-color: $grey-97;
+ background-color: $gray-97;
border-radius: $card-corner-radius;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
}
.error-message {
@@ -746,8 +746,8 @@
flex-shrink: 0;
border-radius: $card-corner-radius;
overflow: hidden;
- background-color: $grey-95;
- border: 1px solid $grey-90;
+ background-color: $gray-95;
+ border: 1px solid $gray-90;
:global(.preview-image) {
width: 100%;
diff --git a/src/lib/components/admin/InlineComposerModal.svelte b/src/lib/components/admin/InlineComposerModal.svelte
index 2488254..20b746e 100644
--- a/src/lib/components/admin/InlineComposerModal.svelte
+++ b/src/lib/components/admin/InlineComposerModal.svelte
@@ -653,8 +653,8 @@
justify-content: space-between;
align-items: center;
padding: calc($unit * 1.5) $unit-2x;
- border-top: 1px solid $grey-80;
- background-color: $grey-5;
+ border-top: 1px solid $gray-80;
+ background-color: $gray-5;
}
.footer-left,
@@ -666,7 +666,7 @@
.character-count {
font-size: 13px;
- color: $grey-50;
+ color: $gray-50;
font-weight: 400;
padding: 0 $unit;
min-width: 30px;
@@ -730,7 +730,7 @@
position: relative;
background: white;
border-radius: $unit-2x;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
overflow: hidden;
width: 100%;
@@ -747,7 +747,7 @@
z-index: $z-index-dropdown;
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(8px);
- border: 1px solid $grey-80 !important;
+ border: 1px solid $gray-80 !important;
&:hover {
background-color: rgba(255, 255, 255, 0.95) !important;
@@ -767,8 +767,8 @@
justify-content: space-between;
align-items: center;
padding: $unit-2x $unit-3x;
- border-top: 1px solid $grey-80;
- background-color: $grey-90;
+ border-top: 1px solid $gray-80;
+ background-color: $gray-90;
}
.attached-photos {
diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte
index 3c30420..7048c79 100644
--- a/src/lib/components/admin/Input.svelte
+++ b/src/lib/components/admin/Input.svelte
@@ -224,7 +224,7 @@
margin-bottom: $unit;
font-size: 14px;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
}
.required-indicator {
@@ -273,7 +273,7 @@
}
&::placeholder {
- color: $grey-50;
+ color: $gray-50;
}
&:focus {
@@ -283,13 +283,13 @@
}
&:disabled {
- background-color: $grey-95;
+ background-color: $gray-95;
cursor: not-allowed;
- color: $grey-40;
+ color: $gray-40;
}
&:read-only {
- background-color: $grey-97;
+ background-color: $gray-97;
cursor: default;
}
}
@@ -364,7 +364,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: $grey-40;
+ color: $gray-40;
pointer-events: none;
&.prefix-icon {
@@ -401,12 +401,12 @@
}
.input-help {
- color: $grey-40;
+ color: $gray-40;
}
.char-count {
font-size: 12px;
- color: $grey-50;
+ color: $gray-50;
font-variant-numeric: tabular-nums;
margin-left: auto;
diff --git a/src/lib/components/admin/LoadingSpinner.svelte b/src/lib/components/admin/LoadingSpinner.svelte
index 51b6b48..c89d683 100644
--- a/src/lib/components/admin/LoadingSpinner.svelte
+++ b/src/lib/components/admin/LoadingSpinner.svelte
@@ -31,7 +31,7 @@
}
.spinner {
- border: 3px solid $grey-80;
+ border: 3px solid $gray-80;
border-top-color: $primary-color;
border-radius: 50%;
animation: spin 0.8s linear infinite;
@@ -45,7 +45,7 @@
.loading-text {
margin: 0;
- color: $grey-40;
+ color: $gray-40;
font-size: 1rem;
}
diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte
index d35f372..8ce4eb6 100644
--- a/src/lib/components/admin/MediaDetailsModal.svelte
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@@ -641,7 +641,7 @@
font-size: 1.125rem;
font-weight: 500;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
word-break: break-all;
line-height: 1.5;
}
@@ -670,7 +670,7 @@
flex-direction: column;
gap: $unit-3x;
padding: $unit-3x;
- background-color: $grey-90;
+ background-color: $gray-90;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
@@ -692,14 +692,14 @@
.label {
font-size: 0.75rem;
font-weight: 500;
- color: $grey-50;
+ color: $gray-50;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.value {
font-size: 0.875rem;
- color: $grey-10;
+ color: $gray-10;
font-weight: 500;
&.color-value {
@@ -723,11 +723,11 @@
margin-top: $unit-2x;
justify-content: center;
background: transparent;
- border: 1px solid $grey-70;
+ border: 1px solid $gray-70;
&:hover {
background: rgba(0, 0, 0, 0.02);
- border-color: $grey-70;
+ border-color: $gray-70;
}
}
@@ -741,7 +741,7 @@
.metadata-divider {
border-radius: 1px;
height: 2px;
- background: $grey-80;
+ background: $gray-80;
margin: $unit-3x 0;
}
@@ -754,7 +754,7 @@
font-size: 1rem;
font-weight: 600;
margin: 0;
- color: $grey-20;
+ color: $gray-20;
}
}
@@ -791,7 +791,7 @@
position: relative;
width: 44px;
height: 24px;
- background-color: $grey-80;
+ background-color: $gray-80;
border-radius: 12px;
transition: background-color 0.2s ease;
flex-shrink: 0;
@@ -817,13 +817,13 @@
.toggle-title {
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
font-size: 0.875rem;
}
.toggle-description {
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
line-height: 1.4;
}
}
@@ -840,7 +840,7 @@
margin: 0;
font-size: 1rem;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
}
}
@@ -852,15 +852,15 @@
background: transparent;
border: none;
border-radius: 6px;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
font-weight: 500;
&:hover {
- background: $grey-95;
- color: $grey-20;
+ background: $gray-95;
+ color: $gray-20;
}
svg,
@@ -885,13 +885,13 @@
align-items: center;
gap: $unit-2x;
padding: $unit-2x;
- color: $grey-50;
+ color: $gray-50;
.spinner {
width: 16px;
height: 16px;
- border: 2px solid $grey-90;
- border-top: 2px solid $grey-50;
+ border: 2px solid $gray-90;
+ border-top: 2px solid $gray-50;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -899,9 +899,9 @@
.usage-item {
padding: $unit-3x;
- background: $grey-95;
+ background: $gray-95;
border-radius: 12px;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
.usage-content {
display: flex;
@@ -917,7 +917,7 @@
.usage-title {
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
text-decoration: none;
transition: color 0.2s ease;
@@ -927,8 +927,8 @@
}
.usage-type {
- background: $grey-85;
- color: $grey-30;
+ background: $gray-85;
+ color: $gray-30;
padding: $unit-half $unit;
border-radius: 6px;
font-size: 0.75rem;
@@ -945,20 +945,20 @@
gap: $unit-3x;
.usage-field {
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
font-weight: 500;
}
.usage-date {
- color: $grey-50;
+ color: $gray-50;
font-size: 0.75rem;
}
}
}
.no-usage {
- color: $grey-50;
+ color: $gray-50;
font-style: italic;
margin: $unit-2x 0 0 0;
}
@@ -971,7 +971,7 @@
h4 {
font-size: 1rem;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
margin: 0 0 $unit-2x 0;
}
}
@@ -986,19 +986,19 @@
display: inline-flex;
align-items: center;
padding: $unit-half $unit-2x;
- background: $grey-95;
- border: 1px solid $grey-90;
+ background: $gray-95;
+ border: 1px solid $gray-90;
border-radius: 20px;
- color: $grey-20;
+ color: $gray-20;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- border-color: $grey-85;
- color: $grey-10;
+ background: $gray-90;
+ border-color: $gray-85;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/admin/MediaInput.svelte b/src/lib/components/admin/MediaInput.svelte
index 9d4c6ec..d8aa829 100644
--- a/src/lib/components/admin/MediaInput.svelte
+++ b/src/lib/components/admin/MediaInput.svelte
@@ -256,7 +256,7 @@
.input-label {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-60;
@@ -266,9 +266,9 @@
.selected-media {
padding: $unit-2x;
- background-color: $grey-95;
+ background-color: $gray-95;
border-radius: $card-corner-radius;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
}
.media-preview {
@@ -290,7 +290,7 @@
height: 60px;
border-radius: calc($card-corner-radius - 2px);
overflow: hidden;
- background-color: $grey-90;
+ background-color: $gray-90;
flex-shrink: 0;
position: relative;
@@ -304,8 +304,8 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: $grey-80;
- color: $grey-30;
+ background-color: $gray-80;
+ color: $gray-30;
font-size: 0.75rem;
font-weight: 600;
}
@@ -317,7 +317,7 @@
justify-content: center;
width: 100%;
height: 100%;
- color: $grey-60;
+ color: $gray-60;
}
.media-info {
@@ -328,7 +328,7 @@
margin: 0 0 $unit-half 0;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -337,7 +337,7 @@
.file-meta {
margin: 0;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
}
@@ -350,7 +350,7 @@
.selection-summary {
margin: 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
font-weight: 500;
}
@@ -358,7 +358,7 @@
position: relative;
display: flex;
align-items: center;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $card-corner-radius;
background-color: white;
transition: border-color 0.2s ease;
@@ -384,14 +384,14 @@
border: none;
background: transparent;
font-size: 0.875rem;
- color: $grey-10;
+ color: $gray-10;
&:focus {
outline: none;
}
&.placeholder {
- color: $grey-50;
+ color: $gray-50;
}
&[readonly] {
diff --git a/src/lib/components/admin/MediaUploadModal.svelte b/src/lib/components/admin/MediaUploadModal.svelte
index 29ee43b..5a399e8 100644
--- a/src/lib/components/admin/MediaUploadModal.svelte
+++ b/src/lib/components/admin/MediaUploadModal.svelte
@@ -409,7 +409,7 @@
margin: 0;
font-size: 1.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -424,17 +424,17 @@
justify-content: space-between;
align-items: center;
padding: $unit-3x;
- border-top: 1px solid $grey-85;
- background: $grey-95;
+ border-top: 1px solid $gray-85;
+ background: $gray-95;
}
.drop-zone {
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $unit-2x;
padding: $unit-6x $unit-4x;
text-align: center;
position: relative;
- background: $grey-95;
+ background: $gray-95;
transition: all 0.2s ease;
&.active {
@@ -456,19 +456,19 @@
align-items: center;
justify-content: center;
gap: $unit-2x;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
.add-icon {
- color: $grey-50;
+ color: $gray-50;
}
}
}
}
&:hover {
- border-color: $grey-60;
- background: $grey-90;
+ border-color: $gray-60;
+ background: $gray-90;
}
&.uploading {
@@ -483,29 +483,29 @@
pointer-events: none;
.upload-icon {
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-2x;
}
h3 {
font-size: 1.25rem;
- color: $grey-20;
+ color: $gray-20;
margin-bottom: $unit;
}
p {
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit-half;
}
.upload-hint {
font-size: 0.875rem;
- color: $grey-50;
+ color: $gray-50;
}
.file-count {
strong {
- color: $grey-20;
+ color: $gray-20;
font-size: 1.1rem;
}
}
@@ -542,9 +542,9 @@
align-items: center;
gap: $unit-2x;
padding: $unit;
- background: $grey-95;
+ background: $gray-95;
border-radius: $image-corner-radius;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
}
.file-preview {
@@ -552,7 +552,7 @@
height: 60px;
border-radius: $unit;
overflow: hidden;
- background: $grey-90;
+ background: $gray-90;
display: flex;
align-items: center;
justify-content: center;
@@ -574,13 +574,13 @@
.file-name {
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
margin-bottom: $unit-half;
}
.file-size {
font-size: 0.875rem;
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-half;
}
}
@@ -595,10 +595,10 @@
.progress-bar {
flex-grow: 1;
height: $unit-2x;
- background: $grey-100;
+ background: $gray-100;
padding: $unit-half;
border-radius: $corner-radius-full;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
overflow: hidden;
.progress-fill {
@@ -648,14 +648,14 @@
}
.status-waiting {
- color: $grey-50;
+ color: $gray-50;
}
}
.remove-button {
background: none;
border: none;
- color: $grey-50;
+ color: $gray-50;
cursor: pointer;
padding: $unit;
border-radius: 50%;
@@ -669,7 +669,7 @@
.upload-results {
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit-2x;
padding: $unit-3x;
@@ -678,7 +678,7 @@
margin-bottom: $unit-2x;
small {
- color: $grey-50;
+ color: $gray-50;
}
}
diff --git a/src/lib/components/admin/MetadataPopover.svelte b/src/lib/components/admin/MetadataPopover.svelte
index d5da20b..6e5f138 100644
--- a/src/lib/components/admin/MetadataPopover.svelte
+++ b/src/lib/components/admin/MetadataPopover.svelte
@@ -195,7 +195,7 @@
.metadata-popover {
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $card-corner-radius;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
min-width: 420px;
@@ -215,13 +215,13 @@
font-size: 1.125rem;
font-weight: 600;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
}
}
.popover-footer {
padding: $unit-3x;
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
display: flex;
justify-content: flex-start;
}
@@ -236,7 +236,7 @@
align-self: flex-start;
margin-top: $unit-half;
padding: $unit $unit-2x;
- background: $grey-10;
+ background: $gray-10;
color: white;
border: none;
border-radius: 6px;
@@ -245,7 +245,7 @@
transition: background-color 0.15s ease;
&:hover {
- background: $grey-20;
+ background: $gray-20;
}
}
@@ -261,28 +261,28 @@
align-items: center;
gap: 4px;
padding: 4px $unit-2x;
- background: $grey-80;
+ background: $gray-80;
border-radius: 20px;
font-size: 0.75rem;
button {
background: none;
border: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
&:hover {
- color: $grey-10;
+ color: $gray-10;
}
}
}
.metadata {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
p {
margin: $unit-half 0;
diff --git a/src/lib/components/admin/PhotoPostForm.svelte b/src/lib/components/admin/PhotoPostForm.svelte
index 61614f6..db6f0a8 100644
--- a/src/lib/components/admin/PhotoPostForm.svelte
+++ b/src/lib/components/admin/PhotoPostForm.svelte
@@ -273,12 +273,12 @@
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 $unit-half 0;
- color: $grey-10;
+ color: $gray-10;
}
.subtitle {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0;
}
}
@@ -331,19 +331,19 @@
display: block;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
margin-bottom: $unit-half;
}
.editor-help {
font-size: 0.8rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0 0 $unit-2x 0;
line-height: 1.4;
}
.editor-container {
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $unit;
overflow: hidden;
diff --git a/src/lib/components/admin/PostDropdown.svelte b/src/lib/components/admin/PostDropdown.svelte
index a3348f5..57e153d 100644
--- a/src/lib/components/admin/PostDropdown.svelte
+++ b/src/lib/components/admin/PostDropdown.svelte
@@ -142,7 +142,7 @@
top: calc(100% + $unit);
right: 0;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit-2x;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
min-width: 140px;
@@ -166,7 +166,7 @@
text-align: left;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&:first-child {
@@ -183,7 +183,7 @@
}
.dropdown-icon {
- color: $grey-40;
+ color: $gray-40;
display: flex;
align-items: center;
flex-shrink: 0;
@@ -197,6 +197,6 @@
.dropdown-label {
font-size: 0.925rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
}
diff --git a/src/lib/components/admin/PostListItem.svelte b/src/lib/components/admin/PostListItem.svelte
index 0f43852..9ea61dc 100644
--- a/src/lib/components/admin/PostListItem.svelte
+++ b/src/lib/components/admin/PostListItem.svelte
@@ -202,7 +202,7 @@
gap: $unit-2x;
&:hover {
- background: $grey-95;
+ background: $gray-95;
}
}
@@ -218,7 +218,7 @@
font-size: 1rem;
font-weight: 600;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
line-height: 1.4;
}
@@ -239,7 +239,7 @@
margin: 0;
font-size: 0.925rem;
line-height: 1.5;
- color: $grey-30;
+ color: $gray-30;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -262,7 +262,7 @@
border: none;
border-radius: $unit;
cursor: pointer;
- color: $grey-30;
+ color: $gray-30;
transition: all 0.2s ease;
&:hover {
@@ -276,7 +276,7 @@
right: 0;
margin-top: $unit-half;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
@@ -291,12 +291,12 @@
border: none;
text-align: left;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&.danger {
@@ -306,7 +306,7 @@
.dropdown-divider {
height: 1px;
- background-color: $grey-80;
+ background-color: $gray-80;
margin: $unit-half 0;
}
diff --git a/src/lib/components/admin/ProjectBrandingForm.svelte b/src/lib/components/admin/ProjectBrandingForm.svelte
index d3c662f..6ed498f 100644
--- a/src/lib/components/admin/ProjectBrandingForm.svelte
+++ b/src/lib/components/admin/ProjectBrandingForm.svelte
@@ -149,7 +149,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 $unit-3x;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -166,7 +166,7 @@
font-size: 0.875rem;
font-weight: 600;
margin: 0;
- color: $grey-20;
+ color: $gray-20;
}
}
diff --git a/src/lib/components/admin/ProjectForm.svelte b/src/lib/components/admin/ProjectForm.svelte
index 490dd24..95844c6 100644
--- a/src/lib/components/admin/ProjectForm.svelte
+++ b/src/lib/components/admin/ProjectForm.svelte
@@ -321,7 +321,7 @@
height: 40px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -330,8 +330,8 @@
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -371,7 +371,7 @@
.error {
text-align: center;
padding: $unit-6x;
- color: $grey-40;
+ color: $gray-40;
}
.error {
diff --git a/src/lib/components/admin/ProjectGalleryForm.svelte b/src/lib/components/admin/ProjectGalleryForm.svelte
index 6fa40c6..eeb55d3 100644
--- a/src/lib/components/admin/ProjectGalleryForm.svelte
+++ b/src/lib/components/admin/ProjectGalleryForm.svelte
@@ -86,7 +86,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 $unit-3x;
- color: $grey-10;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/admin/ProjectImagesForm.svelte b/src/lib/components/admin/ProjectImagesForm.svelte
index f304c15..feed9c5 100644
--- a/src/lib/components/admin/ProjectImagesForm.svelte
+++ b/src/lib/components/admin/ProjectImagesForm.svelte
@@ -125,7 +125,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/admin/ProjectListItem.svelte b/src/lib/components/admin/ProjectListItem.svelte
index 707b64d..aa9be5e 100644
--- a/src/lib/components/admin/ProjectListItem.svelte
+++ b/src/lib/components/admin/ProjectListItem.svelte
@@ -156,7 +156,7 @@
text-align: left;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
}
@@ -189,7 +189,7 @@
.project-title {
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
margin: 0;
white-space: nowrap;
overflow: hidden;
@@ -212,7 +212,7 @@
border: none;
border-radius: $unit;
cursor: pointer;
- color: $grey-30;
+ color: $gray-30;
transition: all 0.2s ease;
&:hover {
@@ -226,7 +226,7 @@
right: 0;
margin-top: $unit-half;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
@@ -241,12 +241,12 @@
border: none;
text-align: left;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&.danger {
@@ -256,7 +256,7 @@
.dropdown-divider {
height: 1px;
- background-color: $grey-80;
+ background-color: $gray-80;
margin: $unit-half 0;
}
diff --git a/src/lib/components/admin/ProjectMetadataForm.svelte b/src/lib/components/admin/ProjectMetadataForm.svelte
index a2447ff..40a3e59 100644
--- a/src/lib/components/admin/ProjectMetadataForm.svelte
+++ b/src/lib/components/admin/ProjectMetadataForm.svelte
@@ -97,7 +97,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/admin/ProjectStylingForm.svelte b/src/lib/components/admin/ProjectStylingForm.svelte
index 971f164..b890aed 100644
--- a/src/lib/components/admin/ProjectStylingForm.svelte
+++ b/src/lib/components/admin/ProjectStylingForm.svelte
@@ -50,7 +50,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 $unit-3x;
- color: $grey-10;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/admin/ProjectTitleCell.svelte b/src/lib/components/admin/ProjectTitleCell.svelte
index 5d3873e..96267bc 100644
--- a/src/lib/components/admin/ProjectTitleCell.svelte
+++ b/src/lib/components/admin/ProjectTitleCell.svelte
@@ -32,6 +32,6 @@
}
.title {
- color: $grey-10;
+ color: $gray-10;
}
diff --git a/src/lib/components/admin/SegmentedControlField.svelte b/src/lib/components/admin/SegmentedControlField.svelte
index 673e4d0..2861496 100644
--- a/src/lib/components/admin/SegmentedControlField.svelte
+++ b/src/lib/components/admin/SegmentedControlField.svelte
@@ -93,7 +93,7 @@
&.active {
background-color: white;
- color: $grey-10;
+ color: $gray-10;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.04);
diff --git a/src/lib/components/admin/Select.svelte b/src/lib/components/admin/Select.svelte
index 8721db3..e1a3227 100644
--- a/src/lib/components/admin/Select.svelte
+++ b/src/lib/components/admin/Select.svelte
@@ -54,7 +54,7 @@
.select {
box-sizing: border-box;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
font-family: inherit;
transition: all 0.2s ease;
@@ -67,14 +67,14 @@
}
&:disabled {
- color: $grey-60;
+ color: $gray-60;
cursor: not-allowed;
opacity: 0.6;
}
// Default variant
&.select-default {
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
background: white;
font-weight: 500;
@@ -84,22 +84,22 @@
}
&:disabled {
- background: $grey-90;
+ background: $gray-90;
}
}
// Minimal variant
&.select-minimal {
border: none;
- background: $grey-90;
+ background: $gray-90;
font-weight: 500;
&:hover {
- background: $grey-80;
+ background: $gray-80;
}
&:focus {
- background: $grey-80;
+ background: $gray-80;
}
&:disabled {
@@ -196,7 +196,7 @@
top: 50%;
transform: translateY(-50%);
pointer-events: none;
- color: $grey-60;
+ color: $gray-60;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/lib/components/admin/SimplePostForm.svelte b/src/lib/components/admin/SimplePostForm.svelte
index 43e4419..4b98aac 100644
--- a/src/lib/components/admin/SimplePostForm.svelte
+++ b/src/lib/components/admin/SimplePostForm.svelte
@@ -222,7 +222,7 @@
font-size: 1.5rem;
font-weight: 700;
margin: 0;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -276,12 +276,12 @@
justify-content: flex-end;
margin-top: $unit-2x;
padding-top: $unit-2x;
- border-top: 1px solid $grey-80;
+ border-top: 1px solid $gray-80;
}
.char-count {
font-size: 0.875rem;
- color: $grey-50;
+ color: $gray-50;
&.over-limit {
color: $red-60;
@@ -297,11 +297,11 @@
border-radius: 0;
&:first-child {
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
}
&:last-child {
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
}
}
@@ -316,14 +316,14 @@
&:focus {
border: none;
- background: $grey-97;
+ background: $gray-97;
}
}
:global(.description-input) {
font-size: 1rem;
line-height: 1.5;
- color: $grey-20;
+ color: $gray-20;
padding: $unit-3x;
border: none;
border-radius: 0;
@@ -332,7 +332,7 @@
&:focus {
border: none;
- background: $grey-97;
+ background: $gray-97;
}
}
}
@@ -343,16 +343,16 @@
border: none;
background: transparent;
font-size: 1rem;
- color: $grey-10;
- border-bottom: 1px solid $grey-90;
+ color: $gray-10;
+ border-bottom: 1px solid $gray-90;
&:focus {
outline: none;
- background: $grey-97;
+ background: $gray-97;
}
&::placeholder {
- color: $grey-60;
+ color: $gray-60;
}
}
diff --git a/src/lib/components/admin/StatusDropdown.svelte b/src/lib/components/admin/StatusDropdown.svelte
index 43fc01e..93726bb 100644
--- a/src/lib/components/admin/StatusDropdown.svelte
+++ b/src/lib/components/admin/StatusDropdown.svelte
@@ -134,7 +134,7 @@
.dropdown-divider {
height: 1px;
- background-color: $grey-80;
+ background-color: $gray-80;
margin: $unit-half 0;
}
@@ -146,13 +146,13 @@
border: none;
text-align: left;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
}
diff --git a/src/lib/components/admin/Textarea.svelte b/src/lib/components/admin/Textarea.svelte
index cbc53cd..48351d7 100644
--- a/src/lib/components/admin/Textarea.svelte
+++ b/src/lib/components/admin/Textarea.svelte
@@ -151,7 +151,7 @@
margin-bottom: $unit;
font-size: 14px;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
.required {
color: $red-50;
@@ -181,7 +181,7 @@
}
&::placeholder {
- color: $grey-50;
+ color: $gray-50;
}
&:focus {
@@ -191,14 +191,14 @@
}
&:disabled {
- background-color: $grey-95;
+ background-color: $gray-95;
cursor: not-allowed;
- color: $grey-40;
+ color: $gray-40;
resize: none;
}
&:read-only {
- background-color: $grey-97;
+ background-color: $gray-97;
cursor: default;
resize: none;
}
@@ -246,13 +246,13 @@
.textarea-help {
font-size: 13px;
- color: $grey-40;
+ color: $gray-40;
flex: 1;
}
.char-count {
font-size: 12px;
- color: $grey-40;
+ color: $gray-40;
margin-left: $unit;
&.warning {
diff --git a/src/lib/components/admin/UnifiedMediaModal.svelte b/src/lib/components/admin/UnifiedMediaModal.svelte
index 7ff5ef1..3514de5 100644
--- a/src/lib/components/admin/UnifiedMediaModal.svelte
+++ b/src/lib/components/admin/UnifiedMediaModal.svelte
@@ -577,7 +577,7 @@
margin: 0;
font-size: 1.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
:global(.admin-filters) {
@@ -597,7 +597,7 @@
height: 32px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -607,8 +607,8 @@
padding: 0;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
svg {
@@ -641,11 +641,11 @@
justify-content: center;
padding: $unit-6x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
min-height: 400px;
svg {
- color: $grey-70;
+ color: $gray-70;
margin-bottom: $unit-2x;
}
@@ -653,12 +653,12 @@
margin: 0 0 $unit 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-30;
+ color: $gray-30;
}
p {
margin: 0;
- color: $grey-50;
+ color: $gray-50;
}
}
@@ -672,7 +672,7 @@
.media-item {
position: relative;
aspect-ratio: 1;
- background: $grey-95;
+ background: $gray-95;
border: none;
border-radius: $unit-2x;
overflow: hidden;
@@ -702,7 +702,7 @@
&.is-svg {
padding: $unit-2x;
box-sizing: border-box;
- background-color: $grey-95 !important;
+ background-color: $gray-95 !important;
:global(.svg-image) {
object-fit: contain !important;
@@ -716,7 +716,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: $grey-60;
+ color: $gray-60;
}
.hover-overlay {
@@ -760,23 +760,23 @@
padding: $unit-4x;
.error-text {
- color: $grey-40;
+ color: $gray-40;
margin: 0;
}
.retry-button {
padding: $unit $unit-2x;
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $unit;
- color: $grey-20;
+ color: $gray-20;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
- background: $grey-95;
- border-color: $grey-70;
+ background: $gray-95;
+ border-color: $gray-70;
}
}
}
@@ -789,7 +789,7 @@
align-items: center;
gap: $unit-3x;
padding: $unit-3x $unit-4x $unit-4x;
- border-top: 1px solid $grey-85;
+ border-top: 1px solid $gray-85;
background: white;
z-index: $z-index-dropdown;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
@@ -797,7 +797,7 @@
.action-summary {
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
flex: 1;
}
@@ -850,7 +850,7 @@
padding: $unit;
text-align: center;
font-size: 0.75rem;
- color: $grey-50;
+ color: $gray-50;
word-break: break-word;
}
diff --git a/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte b/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte
index 0cdb4b9..4b0957b 100644
--- a/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte
+++ b/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte
@@ -210,7 +210,7 @@
.geolocation-node {
margin: $unit-2x 0;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
border-radius: $corner-radius-md;
overflow: hidden;
background: white;
@@ -221,8 +221,8 @@
justify-content: space-between;
align-items: center;
padding: $unit $unit-2x;
- background: $grey-95;
- border-bottom: 1px solid $grey-90;
+ background: $gray-95;
+ border-bottom: 1px solid $gray-90;
font-size: 0.875rem;
}
@@ -237,12 +237,12 @@
.title {
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
}
.coordinates {
font-family: 'SF Mono', Monaco, monospace;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.75rem;
}
}
@@ -250,7 +250,7 @@
.action-button {
padding: 4px 8px;
background: transparent;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $corner-radius-sm;
cursor: pointer;
font-size: 0.875rem;
@@ -258,7 +258,7 @@
&:hover {
background: white;
- border-color: $grey-60;
+ border-color: $gray-60;
}
}
@@ -266,7 +266,7 @@
height: 400px;
width: 100%;
position: relative;
- background: $grey-95;
+ background: $gray-95;
&.editing {
opacity: 0.8;
@@ -282,13 +282,13 @@
margin: 0 0 $unit-half;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.4;
}
}
@@ -308,7 +308,7 @@
display: flex;
align-items: center;
justify-content: center;
- background: $grey-95;
+ background: $gray-95;
padding: $unit-3x;
text-align: center;
}
@@ -317,19 +317,19 @@
h3 {
margin: 0 0 $unit;
font-size: 1.25rem;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
.coordinates {
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.875rem;
- color: $grey-60;
+ color: $gray-60;
margin-bottom: $unit-2x;
}
diff --git a/src/lib/components/edra/extensions/geolocation/geolocation-placeholder.svelte b/src/lib/components/edra/extensions/geolocation/geolocation-placeholder.svelte
index 7299678..664d4ca 100644
--- a/src/lib/components/edra/extensions/geolocation/geolocation-placeholder.svelte
+++ b/src/lib/components/edra/extensions/geolocation/geolocation-placeholder.svelte
@@ -258,8 +258,8 @@
.geolocation-placeholder {
margin: $unit-2x 0;
- background: $grey-95;
- border: 2px dashed $grey-80;
+ background: $gray-95;
+ border: 2px dashed $gray-80;
border-radius: $corner-radius-md;
overflow: hidden;
}
@@ -275,7 +275,7 @@
.label {
margin: 0 0 $unit-2x;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
}
@@ -297,16 +297,16 @@
.quick-location {
padding: 4px 12px;
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $corner-radius-sm;
font-size: 0.75rem;
- color: $grey-30;
+ color: $gray-30;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
- border-color: $grey-60;
- color: $grey-10;
+ border-color: $gray-60;
+ color: $gray-10;
}
}
}
@@ -318,7 +318,7 @@
margin: 0 0 $unit-3x;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -350,14 +350,14 @@
gap: $unit;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
}
.color-input {
width: 40px;
height: 24px;
padding: 0;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: $corner-radius-sm;
cursor: pointer;
}
@@ -371,7 +371,7 @@
text-align: right;
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
.map-picker-modal {
@@ -402,13 +402,13 @@
justify-content: space-between;
align-items: center;
padding: $unit-2x $unit-3x;
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
diff --git a/src/lib/components/edra/headless/components/EmbedContextMenu.svelte b/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
index 3d4ca3e..6c7fd2d 100644
--- a/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
+++ b/src/lib/components/edra/headless/components/EmbedContextMenu.svelte
@@ -80,7 +80,7 @@
position: fixed;
z-index: 1050;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
@@ -92,7 +92,7 @@
.menu-url {
padding: $unit $unit-2x;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -100,7 +100,7 @@
.menu-divider {
height: 1px;
- background-color: $grey-90;
+ background-color: $gray-90;
margin: 4px 0;
}
@@ -113,12 +113,12 @@
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
text-align: left;
transition: background-color 0.2s;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&:focus {
diff --git a/src/lib/components/edra/headless/components/LinkContextMenu.svelte b/src/lib/components/edra/headless/components/LinkContextMenu.svelte
index 02f2b78..a29e3ab 100644
--- a/src/lib/components/edra/headless/components/LinkContextMenu.svelte
+++ b/src/lib/components/edra/headless/components/LinkContextMenu.svelte
@@ -80,7 +80,7 @@
position: fixed;
z-index: 1050;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
@@ -92,7 +92,7 @@
.menu-url {
padding: $unit $unit-2x;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -100,7 +100,7 @@
.menu-divider {
height: 1px;
- background-color: $grey-90;
+ background-color: $gray-90;
margin: 4px 0;
}
@@ -113,12 +113,12 @@
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
text-align: left;
transition: background-color 0.2s;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&:focus {
diff --git a/src/lib/components/edra/headless/components/LinkEditDialog.svelte b/src/lib/components/edra/headless/components/LinkEditDialog.svelte
index fa37c13..484f606 100644
--- a/src/lib/components/edra/headless/components/LinkEditDialog.svelte
+++ b/src/lib/components/edra/headless/components/LinkEditDialog.svelte
@@ -94,7 +94,7 @@
position: fixed;
z-index: 1051;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: $unit-2x;
@@ -111,10 +111,10 @@
.url-input {
flex: 1;
padding: $unit $unit-2x;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: 4px;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
background: white;
transition: border-color 0.2s;
@@ -141,11 +141,11 @@
height: 32px;
padding: 0;
background: transparent;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
- color: $grey-40;
+ color: $gray-40;
svg {
width: 16px;
@@ -153,8 +153,8 @@
}
&:hover:not(:disabled) {
- background-color: $grey-95;
- color: $grey-20;
+ background-color: $gray-95;
+ color: $gray-20;
}
&:disabled {
diff --git a/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte b/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
index f0a2e3f..ab07572 100644
--- a/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
+++ b/src/lib/components/edra/headless/components/UrlConvertDropdown.svelte
@@ -61,7 +61,7 @@
position: fixed;
z-index: 1050;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
@@ -78,13 +78,13 @@
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
white-space: nowrap;
transition: background-color 0.2s;
text-align: left;
&:hover {
- background-color: $grey-95;
+ background-color: $gray-95;
}
&:focus {
diff --git a/src/lib/components/edra/headless/components/UrlEmbedExtended.svelte b/src/lib/components/edra/headless/components/UrlEmbedExtended.svelte
index d43cce3..42db751 100644
--- a/src/lib/components/edra/headless/components/UrlEmbedExtended.svelte
+++ b/src/lib/components/edra/headless/components/UrlEmbedExtended.svelte
@@ -329,11 +329,11 @@
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
- color: $grey-40;
+ color: $gray-40;
&:hover:not(:disabled) {
- background: $grey-95;
- color: $grey-20;
+ background: $gray-95;
+ color: $gray-20;
}
&.delete:hover {
@@ -355,10 +355,10 @@
.edra-url-embed-content {
display: flex;
width: 100%;
- background: $grey-95;
+ background: $gray-95;
border-radius: $corner-radius;
overflow: hidden;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
padding: 0;
text-align: left;
cursor: pointer;
@@ -372,7 +372,7 @@
appearance: none;
&:hover {
- border-color: $grey-60;
+ border-color: $gray-60;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@@ -387,7 +387,7 @@
width: 200px;
height: 150px;
overflow: hidden;
- background: $grey-80;
+ background: $gray-80;
img {
width: 100%;
@@ -410,7 +410,7 @@
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
.edra-url-embed-favicon {
@@ -429,7 +429,7 @@
margin: 0;
font-size: 1rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -440,7 +440,7 @@
.edra-url-embed-description {
margin: 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -493,11 +493,11 @@
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
- color: $grey-40;
+ color: $gray-40;
&:hover {
- background: $grey-95;
- color: $grey-20;
+ background: $gray-95;
+ color: $gray-20;
}
svg {
@@ -511,9 +511,9 @@
padding-bottom: 56.25%; // 16:9 aspect ratio
height: 0;
overflow: hidden;
- background: $grey-95;
+ background: $gray-95;
border-radius: $corner-radius;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
iframe {
position: absolute;
@@ -529,10 +529,10 @@
.edra-youtube-embed-error {
padding: 3rem;
text-align: center;
- background: $grey-95;
- border: 1px solid $grey-85;
+ background: $gray-95;
+ border: 1px solid $gray-85;
border-radius: $corner-radius;
- color: $grey-40;
+ color: $gray-40;
}
.edra-url-embed-wrapper.selected {
diff --git a/src/lib/components/edra/headless/menus/link-menu.svelte b/src/lib/components/edra/headless/menus/link-menu.svelte
index 45240af..93a3602 100644
--- a/src/lib/components/edra/headless/menus/link-menu.svelte
+++ b/src/lib/components/edra/headless/menus/link-menu.svelte
@@ -165,7 +165,7 @@
gap: 0.25rem;
padding: 0.75rem;
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
min-width: 280px;
@@ -175,14 +175,14 @@
.link-url-display {
font-size: 0.8125rem;
- color: $grey-40;
+ color: $gray-40;
min-width: 120px;
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.375rem 0.5rem;
- background: $grey-80;
+ background: $gray-80;
border-radius: $unit-half;
font-family: $font-stack;
min-height: 32px;
@@ -194,7 +194,7 @@
transition: background-color 0.2s ease;
&:hover {
- background: $grey-85;
+ background: $gray-85;
}
&.copied {
@@ -208,8 +208,8 @@
color: white;
}
100% {
- background-color: $grey-80; // Decay to original gray
- color: $grey-40;
+ background-color: $gray-80; // Decay to original gray
+ color: $gray-40;
}
}
@@ -225,11 +225,11 @@
}
:global(.edra-command-button svg) {
- stroke: $grey-30;
+ stroke: $gray-30;
}
:global(.edra-command-button:hover svg) {
- stroke: $grey-10;
+ stroke: $gray-10;
}
:global(.edra-command-button.danger:hover svg) {
@@ -258,7 +258,7 @@
flex: 1;
min-width: 220px;
padding: 0.3125rem 0.75rem;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit-half;
font-size: 0.875rem;
font-family: $font-stack;
@@ -289,7 +289,7 @@
justify-content: center;
&:hover {
- background-color: $grey-80;
+ background-color: $gray-80;
}
&.danger {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2d34a93..917449f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -103,7 +103,7 @@
:global(.sonner-toast) {
background: var(--page-color) !important;
color: var(--text-color) !important;
- border: 1px solid $grey-85 !important;
+ border: 1px solid $gray-85 !important;
border-radius: $corner-radius-lg !important;
box-shadow: $card-shadow !important;
font-size: $font-size-small !important;
@@ -143,11 +143,11 @@
&[data-type='info'] {
background: var(--page-color) !important;
- border-color: $grey-70 !important;
+ border-color: $gray-70 !important;
color: var(--text-color) !important;
[data-icon] {
- color: $grey-40 !important;
+ color: $gray-40 !important;
}
}
@@ -185,8 +185,8 @@
:global(.sonner-toast-cancel) {
background: transparent !important;
- color: $grey-40 !important;
- border: 1px solid $grey-70 !important;
+ color: $gray-40 !important;
+ border: 1px solid $gray-70 !important;
border-radius: $corner-radius-sm !important;
padding: $unit-half $unit-2x !important;
font-size: $font-size-extra-small !important;
@@ -194,9 +194,9 @@
transition: all 0.2s ease !important;
&:hover {
- background: $grey-95 !important;
- color: $grey-20 !important;
- border-color: $grey-60 !important;
+ background: $gray-95 !important;
+ color: $gray-20 !important;
+ border-color: $gray-60 !important;
}
}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 09e1c21..dd87d91 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -150,8 +150,8 @@
.bio {
font-size: 1rem;
line-height: 1.5;
- color: $grey-00;
- background: $grey-100;
+ color: $gray-00;
+ background: $gray-100;
border-radius: $card-corner-radius;
p {
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 2b98f94..c97d63b 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -61,7 +61,7 @@
justify-content: center;
height: 100vh;
font-size: 1.125rem;
- color: $grey-40;
+ color: $gray-40;
}
.admin-container {
@@ -77,7 +77,7 @@
.admin-card-layout {
flex: 1;
- background: $grey-90;
+ background: $gray-90;
display: flex;
justify-content: center;
align-items: flex-start;
diff --git a/src/routes/admin/albums/+page.svelte b/src/routes/admin/albums/+page.svelte
index e6177f2..c33bd0d 100644
--- a/src/routes/admin/albums/+page.svelte
+++ b/src/routes/admin/albums/+page.svelte
@@ -361,13 +361,13 @@
.loading {
padding: $unit-8x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
.spinner {
width: 32px;
height: 32px;
- border: 3px solid $grey-80;
- border-top-color: $grey-40;
+ border: 3px solid $gray-80;
+ border-top-color: $gray-40;
border-radius: 50%;
margin: 0 auto $unit-2x;
animation: spin 0.8s linear infinite;
@@ -387,7 +387,7 @@
.empty-state {
padding: $unit-8x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
p {
margin: 0;
diff --git a/src/routes/admin/albums/[id]/edit/+page.svelte b/src/routes/admin/albums/[id]/edit/+page.svelte
index 173acf5..6a7ede5 100644
--- a/src/routes/admin/albums/[id]/edit/+page.svelte
+++ b/src/routes/admin/albums/[id]/edit/+page.svelte
@@ -61,7 +61,7 @@
.error {
text-align: center;
padding: $unit-6x;
- color: $grey-40;
+ color: $gray-40;
}
.error {
diff --git a/src/routes/admin/buttons/+page.svelte b/src/routes/admin/buttons/+page.svelte
index b11f284..64256de 100644
--- a/src/routes/admin/buttons/+page.svelte
+++ b/src/routes/admin/buttons/+page.svelte
@@ -141,7 +141,7 @@
h2 {
font-size: 18px;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
margin: 0;
}
}
diff --git a/src/routes/admin/form-components-test/+page.svelte b/src/routes/admin/form-components-test/+page.svelte
index 2bba19b..3ebc1cb 100644
--- a/src/routes/admin/form-components-test/+page.svelte
+++ b/src/routes/admin/form-components-test/+page.svelte
@@ -207,18 +207,18 @@
padding: $unit-4x;
background-color: white;
border-radius: $card-corner-radius;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
h2 {
margin: 0 0 $unit 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit-3x 0;
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
}
@@ -252,15 +252,15 @@
margin: 0 0 $unit 0;
font-size: 0.875rem;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
}
pre {
- background-color: $grey-95;
+ background-color: $gray-95;
padding: $unit-2x;
border-radius: $card-corner-radius;
font-size: 0.75rem;
- color: $grey-10;
+ color: $gray-10;
overflow-x: auto;
margin: 0;
white-space: pre-wrap;
diff --git a/src/routes/admin/image-uploader-test/+page.svelte b/src/routes/admin/image-uploader-test/+page.svelte
index 675a0ed..222a9f0 100644
--- a/src/routes/admin/image-uploader-test/+page.svelte
+++ b/src/routes/admin/image-uploader-test/+page.svelte
@@ -166,18 +166,18 @@
padding: $unit-4x;
background-color: white;
border-radius: $card-corner-radius;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
h2 {
margin: 0 0 $unit 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit-3x 0;
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
}
@@ -199,15 +199,15 @@
margin: 0 0 $unit 0;
font-size: 0.875rem;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
}
pre {
- background-color: $grey-95;
+ background-color: $gray-95;
padding: $unit-2x;
border-radius: $card-corner-radius;
font-size: 0.75rem;
- color: $grey-10;
+ color: $gray-10;
overflow-x: auto;
margin: 0;
white-space: pre-wrap;
@@ -243,11 +243,11 @@
&.btn-ghost {
background-color: transparent;
- color: $grey-20;
+ color: $gray-20;
&:hover {
- background-color: $grey-5;
- color: $grey-00;
+ background-color: $gray-5;
+ color: $gray-00;
}
}
}
diff --git a/src/routes/admin/inputs/+page.svelte b/src/routes/admin/inputs/+page.svelte
index 226f9d3..47cb1c5 100644
--- a/src/routes/admin/inputs/+page.svelte
+++ b/src/routes/admin/inputs/+page.svelte
@@ -228,7 +228,7 @@
h2 {
font-size: 18px;
font-weight: 600;
- color: $grey-20;
+ color: $gray-20;
margin: 0;
}
}
@@ -244,7 +244,7 @@
flex-direction: column;
gap: $unit-3x;
padding: $unit-3x;
- background-color: $grey-97;
+ background-color: $gray-97;
border-radius: 8px;
}
diff --git a/src/routes/admin/media-library-test/+page.svelte b/src/routes/admin/media-library-test/+page.svelte
index 1e1f7ba..bc3178c 100644
--- a/src/routes/admin/media-library-test/+page.svelte
+++ b/src/routes/admin/media-library-test/+page.svelte
@@ -141,32 +141,32 @@
padding: $unit-4x;
background-color: white;
border-radius: $card-corner-radius;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
h2 {
margin: 0 0 $unit 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0 0 $unit-3x 0;
- color: $grey-30;
+ color: $gray-30;
}
}
.selected-media {
margin-top: $unit-4x;
padding: $unit-3x;
- background-color: $grey-95;
+ background-color: $gray-95;
border-radius: $card-corner-radius;
h3 {
margin: 0 0 $unit-2x 0;
font-size: 1.125rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -180,7 +180,7 @@
height: 120px;
object-fit: cover;
border-radius: $card-corner-radius;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
}
.media-details {
@@ -189,11 +189,11 @@
p {
margin: 0 0 $unit-half 0;
font-size: 0.875rem;
- color: $grey-20;
+ color: $gray-20;
strong {
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
}
@@ -215,7 +215,7 @@
height: 80px;
object-fit: cover;
border-radius: $card-corner-radius;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
}
.media-info {
@@ -223,7 +223,7 @@
margin: 0;
font-size: 0.75rem;
font-weight: 500;
- color: $grey-10;
+ color: $gray-10;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -232,7 +232,7 @@
.size {
margin: 0;
font-size: 0.625rem;
- color: $grey-40;
+ color: $gray-40;
}
}
}
diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte
index a8fffb4..e067f53 100644
--- a/src/routes/admin/media/+page.svelte
+++ b/src/routes/admin/media/+page.svelte
@@ -635,21 +635,21 @@
cursor: pointer;
&.btn-primary {
- background-color: $grey-10;
+ background-color: $gray-10;
color: white;
&:hover {
- background-color: $grey-20;
+ background-color: $gray-20;
}
}
&.btn-secondary {
- background-color: $grey-95;
- color: $grey-20;
+ background-color: $gray-95;
+ color: $gray-20;
&:hover {
- background-color: $grey-90;
- color: $grey-10;
+ background-color: $gray-90;
+ color: $gray-10;
}
}
}
@@ -696,13 +696,13 @@
.loading {
text-align: center;
padding: $unit-6x;
- color: $grey-40;
+ color: $gray-40;
}
.empty-state {
text-align: center;
padding: $unit-8x;
- color: $grey-40;
+ color: $gray-40;
p {
margin-bottom: $unit-3x;
@@ -718,7 +718,7 @@
}
.media-item {
- background: $grey-95;
+ background: $gray-95;
border: 1px solid transparent;
border-radius: $unit-2x;
overflow: hidden;
@@ -729,7 +729,7 @@
padding: 0;
&:hover {
- background-color: $grey-90;
+ background-color: $gray-90;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
@@ -752,11 +752,11 @@
display: flex;
align-items: center;
justify-content: center;
- background: $grey-90;
+ background: $gray-90;
.file-type {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
}
}
@@ -768,7 +768,7 @@
.filename {
font-size: 1rem;
- color: $grey-20;
+ color: $gray-20;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
@@ -777,7 +777,7 @@
.filesize {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
.media-info-bottom {
@@ -808,7 +808,7 @@
align-items: center;
gap: $unit-3x;
padding: $unit-2x;
- background: $grey-95;
+ background: $gray-95;
border: none;
border-radius: $unit-2x;
transition: all 0.2s ease;
@@ -817,7 +817,7 @@
width: 100%;
&:hover {
- background-color: $grey-90;
+ background-color: $gray-90;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@@ -845,10 +845,10 @@
display: flex;
align-items: center;
justify-content: center;
- background: $grey-90;
+ background: $gray-90;
border-radius: $unit;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
}
@@ -866,7 +866,7 @@
.filename {
font-size: 0.925rem;
- color: $grey-20;
+ color: $gray-20;
font-weight: 500;
flex: 1;
}
@@ -881,12 +881,12 @@
.file-meta {
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
.alt-text-preview {
font-size: 0.75rem;
- color: $grey-30;
+ color: $gray-30;
font-style: italic;
}
@@ -898,7 +898,7 @@
}
.media-indicator {
- color: $grey-50;
+ color: $gray-50;
flex-shrink: 0;
}
@@ -909,16 +909,16 @@
.action-btn {
padding: $unit $unit-2x;
background: transparent;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: 50px;
font-size: 0.75rem;
- color: $grey-30;
+ color: $gray-30;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
- border-color: $grey-40;
- color: $grey-10;
+ border-color: $gray-40;
+ color: $gray-10;
}
}
}
@@ -933,17 +933,17 @@
.pagination-btn {
padding: $unit $unit-3x;
- background: $grey-95;
+ background: $gray-95;
border: none;
border-radius: 50px;
- color: $grey-20;
+ color: $gray-20;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
&:disabled {
@@ -954,7 +954,7 @@
.pagination-info {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
}
}
@@ -964,7 +964,7 @@
justify-content: space-between;
align-items: center;
padding: $unit-2x $unit-3x;
- background: $grey-95;
+ background: $gray-95;
border-radius: $unit;
margin-bottom: $unit-3x;
gap: $unit-2x;
diff --git a/src/routes/admin/media/audit/+page.svelte b/src/routes/admin/media/audit/+page.svelte
index 4fbd3f6..5ce9df1 100644
--- a/src/routes/admin/media/audit/+page.svelte
+++ b/src/routes/admin/media/audit/+page.svelte
@@ -519,7 +519,7 @@
margin: 0;
font-size: 1.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -534,7 +534,7 @@
height: 40px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -553,8 +553,8 @@
}
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -569,14 +569,14 @@
.spinner {
width: 40px;
height: 40px;
- border: 3px solid $grey-80;
+ border: 3px solid $gray-80;
border-top-color: $red-60;
border-radius: 50%;
animation: spin 1s linear infinite;
}
p {
- color: $grey-30;
+ color: $gray-30;
}
}
@@ -606,7 +606,7 @@
}
.summary-card {
- background: $grey-95;
+ background: $gray-95;
border-radius: 8px;
padding: 0;
display: flex;
@@ -623,7 +623,7 @@
h3 {
font-size: 0.875rem;
font-weight: 500;
- color: $grey-30;
+ color: $gray-30;
margin: 0 0 0.75rem 0;
letter-spacing: 0.01em;
text-transform: uppercase;
@@ -632,7 +632,7 @@
.value {
font-size: 2.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
margin: 0 0 0.5rem 0;
line-height: 1;
display: block;
@@ -640,7 +640,7 @@
.label {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0;
line-height: 1.2;
display: block;
@@ -668,12 +668,12 @@
justify-content: space-between;
align-items: center;
padding: 1rem;
- background: $grey-95;
+ background: $gray-95;
border-radius: 8px;
margin-bottom: 1rem;
.selection-info {
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
display: flex;
align-items: center;
@@ -693,7 +693,7 @@
.files-table {
background: white;
- border: 1px solid $grey-90;
+ border: 1px solid $gray-90;
border-radius: 8px;
overflow: hidden;
@@ -706,9 +706,9 @@
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-30;
- background: $grey-95;
- border-bottom: 1px solid $grey-90;
+ color: $gray-30;
+ background: $gray-95;
+ border-bottom: 1px solid $gray-90;
&.checkbox {
width: 40px;
@@ -717,7 +717,7 @@
td {
padding: 0.75rem 1rem;
- border-bottom: 1px solid $grey-95;
+ border-bottom: 1px solid $gray-95;
vertical-align: middle;
&.checkbox {
@@ -740,34 +740,34 @@
.svg-preview {
width: 40px;
height: 40px;
- background: $grey-90;
+ background: $gray-90;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
- color: $grey-40;
+ color: $gray-40;
}
}
&.file-path {
.folder {
- color: $grey-40;
+ color: $gray-40;
}
}
&.size {
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
&.dimensions {
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
&.date {
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
vertical-align: middle;
white-space: nowrap;
@@ -779,7 +779,7 @@
transition: background-color 0.15s ease;
&:hover {
- background: $grey-95;
+ background: $gray-95;
}
&.selected {
@@ -809,11 +809,11 @@
h2 {
margin: 1rem 0 0.5rem;
- color: $grey-10;
+ color: $gray-10;
}
p {
- color: $grey-30;
+ color: $gray-30;
max-width: 400px;
}
}
@@ -826,7 +826,7 @@
}
.size-info {
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
@@ -851,26 +851,26 @@
p {
margin: 0.25rem 0;
- color: $grey-30;
+ color: $gray-30;
}
}
.broken-references-section {
margin-top: 2rem;
padding: 1.5rem;
- background: $grey-95;
+ background: $gray-95;
border-radius: 8px;
border: 1px solid rgba($yellow-60, 0.2);
h2 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
- color: $grey-10;
+ color: $gray-10;
}
.broken-references-info {
margin: 0 0 1rem;
- color: $grey-30;
+ color: $gray-30;
}
}
@@ -888,7 +888,7 @@
p {
margin: 0.25rem 0;
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
}
}
@@ -910,7 +910,7 @@
margin: 0.75rem 0 0.75rem 1.5rem;
padding: 0;
list-style-type: disc;
- color: $grey-30;
+ color: $gray-30;
font-size: 0.875rem;
li {
@@ -926,7 +926,7 @@
margin: 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -943,7 +943,7 @@
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
}
@keyframes spin {
diff --git a/src/routes/admin/media/regenerate/+page.svelte b/src/routes/admin/media/regenerate/+page.svelte
index f78ac93..1a515d8 100644
--- a/src/routes/admin/media/regenerate/+page.svelte
+++ b/src/routes/admin/media/regenerate/+page.svelte
@@ -418,7 +418,7 @@
margin: 0;
font-size: 1.5rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -430,16 +430,16 @@
height: 36px;
padding: 0;
background: transparent;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
- color: $grey-30;
+ color: $gray-30;
&:hover {
- background: $grey-95;
- border-color: $grey-70;
- color: $grey-10;
+ background: $gray-95;
+ border-color: $gray-70;
+ color: $gray-10;
}
:global(svg) {
@@ -469,8 +469,8 @@
}
.stat-card {
- background: $grey-97;
- border: 1px solid $grey-90;
+ background: $gray-97;
+ border: 1px solid $gray-90;
border-radius: 8px;
padding: 1.5rem;
@@ -478,7 +478,7 @@
margin: 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 500;
- color: $grey-30;
+ color: $gray-30;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -487,7 +487,7 @@
margin: 0;
font-size: 2rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -499,8 +499,8 @@
}
.action-card {
- background: $grey-100;
- border: 1px solid $grey-90;
+ background: $gray-100;
+ border: 1px solid $gray-90;
border-radius: 12px;
padding: 2rem;
display: flex;
@@ -520,18 +520,18 @@
margin: 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
p {
margin: 0;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.6;
}
.action-details {
- background: $grey-97;
+ background: $gray-97;
border-radius: 8px;
padding: 1rem;
@@ -543,7 +543,7 @@
li {
margin: 0.25rem 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
}
}
}
@@ -564,7 +564,7 @@
margin: 0;
font-size: 1.25rem;
font-weight: 600;
- color: $grey-10;
+ color: $gray-10;
}
}
@@ -576,10 +576,10 @@
p {
margin: 0;
font-size: 0.875rem;
- color: $grey-30;
+ color: $gray-30;
strong {
- color: $grey-10;
+ color: $gray-10;
}
}
}
@@ -604,7 +604,7 @@
li {
font-size: 0.75rem;
- color: $grey-30;
+ color: $gray-30;
margin: 0.25rem 0;
}
}
@@ -615,6 +615,6 @@
justify-content: flex-end;
margin-top: 1.5rem;
padding-top: 1.5rem;
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
}
diff --git a/src/routes/admin/media/upload/+page.svelte b/src/routes/admin/media/upload/+page.svelte
index 2c3b2fb..3913ea4 100644
--- a/src/routes/admin/media/upload/+page.svelte
+++ b/src/routes/admin/media/upload/+page.svelte
@@ -411,12 +411,12 @@
}
.drop-zone {
- border: 2px dashed $grey-80;
+ border: 2px dashed $gray-80;
border-radius: $unit-2x;
padding: $unit-6x $unit-4x;
text-align: center;
position: relative;
- background: $grey-95;
+ background: $gray-95;
transition: all 0.2s ease;
margin-bottom: $unit-4x;
@@ -439,19 +439,19 @@
align-items: center;
justify-content: center;
gap: $unit-2x;
- color: $grey-40;
+ color: $gray-40;
font-size: 0.875rem;
.add-icon {
- color: $grey-50;
+ color: $gray-50;
}
}
}
}
&:hover {
- border-color: $grey-60;
- background: $grey-90;
+ border-color: $gray-60;
+ background: $gray-90;
}
&.uploading {
@@ -466,24 +466,24 @@
pointer-events: none;
.upload-icon {
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-2x;
}
h3 {
font-size: 1.25rem;
- color: $grey-20;
+ color: $gray-20;
margin-bottom: $unit;
}
p {
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit-half;
}
.upload-hint {
font-size: 0.875rem;
- color: $grey-50;
+ color: $gray-50;
}
}
@@ -508,7 +508,7 @@
.file-list {
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit-2x;
padding: $unit-3x;
margin-bottom: $unit-3x;
@@ -520,11 +520,11 @@
align-items: center;
margin-bottom: $unit-3x;
padding-bottom: $unit-2x;
- border-bottom: 1px solid $grey-85;
+ border-bottom: 1px solid $gray-85;
h3 {
margin: 0;
- color: $grey-20;
+ color: $gray-20;
}
.file-actions {
@@ -545,9 +545,9 @@
align-items: center;
gap: $unit-3x;
padding: $unit-2x;
- background: $grey-95;
+ background: $gray-95;
border-radius: $unit;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
}
.file-preview {
@@ -555,7 +555,7 @@
height: 60px;
border-radius: $unit;
overflow: hidden;
- background: $grey-90;
+ background: $gray-90;
display: flex;
align-items: center;
justify-content: center;
@@ -577,13 +577,13 @@
.file-name {
font-weight: 500;
- color: $grey-20;
+ color: $gray-20;
margin-bottom: $unit-half;
}
.file-size {
font-size: 0.875rem;
- color: $grey-50;
+ color: $gray-50;
margin-bottom: $unit-half;
}
}
@@ -591,7 +591,7 @@
.progress-bar {
width: 100%;
height: 6px;
- background: $grey-90;
+ background: $gray-90;
border-radius: 3px;
overflow: hidden;
margin-bottom: $unit-half;
@@ -642,14 +642,14 @@
}
.status-waiting {
- color: $grey-50;
+ color: $gray-50;
}
}
.remove-button {
background: none;
border: none;
- color: $grey-50;
+ color: $gray-50;
cursor: pointer;
padding: $unit;
border-radius: 50%;
@@ -663,7 +663,7 @@
.upload-results {
background: white;
- border: 1px solid $grey-85;
+ border: 1px solid $gray-85;
border-radius: $unit-2x;
padding: $unit-3x;
@@ -672,7 +672,7 @@
margin-bottom: $unit-2x;
small {
- color: $grey-50;
+ color: $gray-50;
}
}
diff --git a/src/routes/admin/posts/+page.svelte b/src/routes/admin/posts/+page.svelte
index b0dd162..899ebf3 100644
--- a/src/routes/admin/posts/+page.svelte
+++ b/src/routes/admin/posts/+page.svelte
@@ -391,7 +391,7 @@
.empty-state {
text-align: center;
padding: $unit-8x $unit-4x;
- color: $grey-40;
+ color: $gray-40;
.empty-icon {
font-size: 3rem;
@@ -402,7 +402,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 $unit-2x;
- color: $grey-20;
+ color: $gray-20;
}
p {
diff --git a/src/routes/admin/posts/[id]/edit/+page.svelte b/src/routes/admin/posts/[id]/edit/+page.svelte
index 4ddcc6c..246d88f 100644
--- a/src/routes/admin/posts/[id]/edit/+page.svelte
+++ b/src/routes/admin/posts/[id]/edit/+page.svelte
@@ -435,12 +435,12 @@
gap: $unit-2x;
h2 {
- color: $grey-20;
+ color: $gray-20;
margin: 0;
}
p {
- color: $grey-40;
+ color: $gray-40;
margin: 0;
}
}
@@ -462,7 +462,7 @@
height: 40px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -471,8 +471,8 @@
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -480,7 +480,7 @@
padding: $unit $unit-2x;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -490,8 +490,8 @@
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -500,7 +500,7 @@
top: calc(100% + $unit);
right: 0;
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 150px;
@@ -517,14 +517,14 @@
text-align: left;
transition: background 0.2s ease;
font-size: 0.875rem;
- color: $grey-10;
+ color: $gray-10;
&:hover {
- background: $grey-95;
+ background: $gray-95;
}
&:not(:last-child) {
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
}
}
@@ -547,7 +547,7 @@
border: none;
font-size: 2.5rem;
font-weight: 700;
- color: $grey-10;
+ color: $gray-10;
background: none;
&:focus {
@@ -555,7 +555,7 @@
}
&::placeholder {
- color: $grey-60;
+ color: $gray-60;
}
}
@@ -570,7 +570,7 @@
.error {
text-align: center;
- color: $grey-40;
+ color: $gray-40;
padding: 2rem;
}
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte
index 35d161d..8682f9e 100644
--- a/src/routes/admin/posts/new/+page.svelte
+++ b/src/routes/admin/posts/new/+page.svelte
@@ -226,7 +226,7 @@
height: 40px;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -235,8 +235,8 @@
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -244,7 +244,7 @@
padding: $unit $unit-2x;
border: none;
background: none;
- color: $grey-40;
+ color: $gray-40;
cursor: pointer;
display: flex;
align-items: center;
@@ -254,8 +254,8 @@
transition: all 0.2s ease;
&:hover {
- background: $grey-90;
- color: $grey-10;
+ background: $gray-90;
+ color: $gray-10;
}
}
@@ -281,7 +281,7 @@
top: calc(100% + $unit);
right: 0;
background: white;
- border: 1px solid $grey-80;
+ border: 1px solid $gray-80;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 150px;
@@ -298,14 +298,14 @@
text-align: left;
transition: background 0.2s ease;
font-size: 0.875rem;
- color: $grey-10;
+ color: $gray-10;
&:hover {
- background: $grey-95;
+ background: $gray-95;
}
&:not(:last-child) {
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
}
}
@@ -328,7 +328,7 @@
border: none;
font-size: 2.5rem;
font-weight: 700;
- color: $grey-10;
+ color: $gray-10;
background: none;
&:focus {
@@ -336,7 +336,7 @@
}
&::placeholder {
- color: $grey-60;
+ color: $gray-60;
}
}
diff --git a/src/routes/admin/projects/+page.svelte b/src/routes/admin/projects/+page.svelte
index 23f11e9..28f6074 100644
--- a/src/routes/admin/projects/+page.svelte
+++ b/src/routes/admin/projects/+page.svelte
@@ -337,12 +337,12 @@
.loading {
padding: $unit-8x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
.spinner {
width: 32px;
height: 32px;
- border: 3px solid $grey-80;
+ border: 3px solid $gray-80;
border-top-color: $primary-color;
border-radius: 50%;
margin: 0 auto $unit-2x;
@@ -363,7 +363,7 @@
.empty-state {
padding: $unit-8x;
text-align: center;
- color: $grey-40;
+ color: $gray-40;
p {
margin: 0;
diff --git a/src/routes/admin/projects/[id]/edit/+page.svelte b/src/routes/admin/projects/[id]/edit/+page.svelte
index 6b1e7b3..97f73ee 100644
--- a/src/routes/admin/projects/[id]/edit/+page.svelte
+++ b/src/routes/admin/projects/[id]/edit/+page.svelte
@@ -61,7 +61,7 @@
.error {
text-align: center;
padding: $unit-6x;
- color: $grey-40;
+ color: $gray-40;
}
.error {
diff --git a/src/routes/albums/+page.svelte b/src/routes/albums/+page.svelte
index b1a813f..e27f9ea 100644
--- a/src/routes/albums/+page.svelte
+++ b/src/routes/albums/+page.svelte
@@ -255,7 +255,7 @@
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
@include breakpoint('phone') {
font-size: 2rem;
@@ -264,7 +264,7 @@
.page-description {
font-size: 1.125rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0;
max-width: 600px;
margin-left: auto;
@@ -297,7 +297,7 @@
display: block;
text-decoration: none;
color: inherit;
- background: $grey-100;
+ background: $gray-100;
border-radius: $card-corner-radius;
overflow: hidden;
transition: all 0.3s ease;
@@ -319,7 +319,7 @@
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
- background: $grey-95;
+ background: $gray-95;
:global(img) {
width: 100%;
@@ -332,7 +332,7 @@
display: flex;
align-items: center;
justify-content: center;
- background: $grey-95;
+ background: $gray-95;
.empty-icon {
font-size: 3rem;
@@ -353,7 +353,7 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 $unit;
- color: $grey-10;
+ color: $gray-10;
@include breakpoint('phone') {
font-size: 1.125rem;
@@ -362,7 +362,7 @@
.album-description {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
margin: 0 0 $unit-2x;
line-height: 1.5;
display: -webkit-box;
@@ -376,7 +376,7 @@
flex-wrap: wrap;
gap: $unit-2x;
font-size: 0.8125rem;
- color: $grey-50;
+ color: $gray-50;
.meta-item {
display: flex;
@@ -407,12 +407,12 @@
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
@@ -437,7 +437,7 @@
p {
margin: 0;
- color: $grey-50;
+ color: $gray-50;
font-size: 1rem;
}
}
diff --git a/src/routes/albums/[slug]/+page.svelte b/src/routes/albums/[slug]/+page.svelte
index 651604b..adf2ee8 100644
--- a/src/routes/albums/[slug]/+page.svelte
+++ b/src/routes/albums/[slug]/+page.svelte
@@ -253,7 +253,7 @@
}
p {
- color: $grey-40;
+ color: $gray-40;
margin: 0 0 $unit-4x;
line-height: 1.5;
}
@@ -263,7 +263,7 @@
.album-header {
text-align: center;
padding-bottom: $unit-3x;
- border-bottom: 1px solid $grey-90;
+ border-bottom: 1px solid $gray-90;
margin-bottom: $unit-4x;
}
@@ -271,7 +271,7 @@
font-size: 2rem;
font-weight: 700;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
@include breakpoint('phone') {
font-size: 1.75rem;
@@ -280,7 +280,7 @@
.album-description {
font-size: 1rem;
- color: $grey-30;
+ color: $gray-30;
margin: 0 0 $unit-3x;
line-height: 1.5;
max-width: 600px;
@@ -296,7 +296,7 @@
.meta-item {
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
display: flex;
align-items: center;
gap: $unit-half;
@@ -318,7 +318,7 @@
.empty-album {
text-align: center;
padding: $unit-6x 0;
- color: $grey-40;
+ color: $gray-40;
}
.edra-rendered-content {
@@ -328,7 +328,7 @@
:global(p) {
margin: 0 0 $unit-3x;
line-height: 1.7;
- color: $grey-20;
+ color: $gray-20;
}
:global(h1),
@@ -336,7 +336,7 @@
:global(h3),
:global(h4) {
margin: $unit-4x 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
font-weight: 600;
}
@@ -368,10 +368,10 @@
:global(blockquote) {
margin: $unit-4x 0;
padding: $unit-3x;
- background: $grey-97;
- border-left: 4px solid $grey-80;
+ background: $gray-97;
+ border-left: 4px solid $gray-80;
border-radius: $unit;
- color: $grey-30;
+ color: $gray-30;
font-style: italic;
}
@@ -386,7 +386,7 @@
}
:global(code) {
- background: $grey-95;
+ background: $gray-95;
padding: 2px 6px;
border-radius: 3px;
font-family: 'SF Mono', Monaco, monospace;
@@ -394,7 +394,7 @@
}
:global(pre) {
- background: $grey-95;
+ background: $gray-95;
padding: $unit-3x;
border-radius: $unit;
overflow-x: auto;
@@ -404,7 +404,7 @@
:global(hr) {
margin: $unit-4x 0;
border: none;
- border-top: 1px solid $grey-90;
+ border-top: 1px solid $gray-90;
}
:global(figure) {
@@ -442,7 +442,7 @@
:global(figure figcaption) {
margin-top: $unit;
font-size: 0.875rem;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
@@ -487,7 +487,7 @@
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
@include breakpoint('phone') {
font-size: 1.5rem;
@@ -496,7 +496,7 @@
.photo-description {
font-size: 1rem;
- color: $grey-30;
+ color: $gray-30;
line-height: 1.6;
margin: 0;
max-width: 600px;
diff --git a/src/routes/labs/+page.svelte b/src/routes/labs/+page.svelte
index 98cc40c..4d83529 100644
--- a/src/routes/labs/+page.svelte
+++ b/src/routes/labs/+page.svelte
@@ -102,12 +102,12 @@
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
index f220737..b597133 100644
--- a/src/routes/labs/[slug]/+page.svelte
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -148,14 +148,14 @@
text-align: center;
p {
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit-2x;
}
}
.loading {
text-align: center;
- color: $grey-40;
+ color: $gray-40;
padding: $unit-4x;
}
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index f44a499..0e05395 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -345,12 +345,12 @@
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 $unit-2x;
- color: $grey-10;
+ color: $gray-10;
}
p {
margin: 0;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
@@ -373,7 +373,7 @@
position: fixed;
bottom: $unit-3x;
right: $unit-3x;
- background: $grey-100;
+ background: $gray-100;
padding: $unit-2x $unit-3x;
border-radius: $corner-radius-lg;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -386,7 +386,7 @@
p {
margin: 0;
- color: $grey-50;
+ color: $gray-50;
font-size: 1rem;
}
}
diff --git a/src/routes/photos/[id]/+page.svelte b/src/routes/photos/[id]/+page.svelte
index bc8b8ef..32c5448 100644
--- a/src/routes/photos/[id]/+page.svelte
+++ b/src/routes/photos/[id]/+page.svelte
@@ -451,7 +451,7 @@
p {
margin: 0 0 $unit-3x;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
@@ -514,7 +514,7 @@
position: absolute;
border: none;
padding: 0;
- background: $grey-100;
+ background: $gray-100;
cursor: pointer;
border-radius: 50%;
display: flex;
@@ -525,7 +525,7 @@
box-shadow 0.2s ease;
&:hover {
- background: $grey-95;
+ background: $gray-95;
}
&.hovering {
@@ -540,11 +540,11 @@
outline: none;
box-shadow:
0 0 0 3px $red-60,
- 0 0 0 5px $grey-100;
+ 0 0 0 5px $gray-100;
}
:global(svg) {
- stroke: $grey-10;
+ stroke: $gray-10;
width: 16px;
height: 16px;
fill: none;
diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte
index 0804b4a..ee4ef20 100644
--- a/src/routes/universe/[slug]/+page.svelte
+++ b/src/routes/universe/[slug]/+page.svelte
@@ -130,7 +130,7 @@
p {
margin: 0 0 $unit-3x;
- color: $grey-40;
+ color: $gray-40;
line-height: 1.5;
}
}
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index 5d21b39..c9113eb 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -209,14 +209,14 @@
text-align: center;
p {
- color: $grey-40;
+ color: $gray-40;
margin-bottom: $unit-2x;
}
}
.loading {
text-align: center;
- color: $grey-40;
+ color: $gray-40;
padding: $unit-4x;
}