From 5eefcc0bc7b9fea4c5a0355766336bcb20ca1463 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 20 Dec 2025 20:58:51 -0800
Subject: [PATCH] use text color css vars in remaining components

---
 src/lib/components/Navigation.svelte          |  2 +-
 .../artifact/ArtifactGradeDisplay.svelte      |  6 ++---
 .../artifact/ArtifactModifierList.svelte      |  2 +-
 .../artifact/ArtifactSkillRow.svelte          |  2 +-
 src/lib/components/job/JobSection.svelte      | 22 +++++++++----------
 .../sidebar/AddArtifactSidebar.svelte         |  2 +-
 .../sections/CharacterUncapSection.svelte     |  2 +-
 .../detail/tabs/EntityRawDataTab.svelte       |  4 ++--
 .../jobs/sections/JobFeaturesSection.svelte   |  2 +-
 .../database/jobs/tabs/JobImagesTab.svelte    |  2 +-
 .../database/jobs/tabs/JobSkillsTab.svelte    |  6 ++---
 11 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index ba978190..fdfba269 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -522,7 +522,7 @@
 
 				.database-back-button {
 					border-radius: layout.$full-corner;
-					color: colors.$grey-50;
+					color: var(--text-secondary);
 					font-size: typography.$font-small;
 					font-weight: typography.$medium;
 					text-decoration: none;
diff --git a/src/lib/components/artifact/ArtifactGradeDisplay.svelte b/src/lib/components/artifact/ArtifactGradeDisplay.svelte
index 2251a6ef..7df2c490 100644
--- a/src/lib/components/artifact/ArtifactGradeDisplay.svelte
+++ b/src/lib/components/artifact/ArtifactGradeDisplay.svelte
@@ -132,7 +132,7 @@
 		}
 		&.grade-none {
 			background: colors.$grey-85;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 		}
 	}
 
@@ -159,7 +159,7 @@
 
 	.breakdown-label {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.breakdown-value {
@@ -211,7 +211,7 @@
 
 	.no-grade-text {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
diff --git a/src/lib/components/artifact/ArtifactModifierList.svelte b/src/lib/components/artifact/ArtifactModifierList.svelte
index 9ec7543d..2f2ad65c 100644
--- a/src/lib/components/artifact/ArtifactModifierList.svelte
+++ b/src/lib/components/artifact/ArtifactModifierList.svelte
@@ -75,7 +75,7 @@
 	.empty-state {
 		padding: spacing.$unit-4x;
 		text-align: center;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.skill-options {
diff --git a/src/lib/components/artifact/ArtifactSkillRow.svelte b/src/lib/components/artifact/ArtifactSkillRow.svelte
index 59c226a9..1c45655e 100644
--- a/src/lib/components/artifact/ArtifactSkillRow.svelte
+++ b/src/lib/components/artifact/ArtifactSkillRow.svelte
@@ -191,6 +191,6 @@
 
 	.control-label {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 </style>
diff --git a/src/lib/components/job/JobSection.svelte b/src/lib/components/job/JobSection.svelte
index 65b6300d..dd9afd5c 100644
--- a/src/lib/components/job/JobSection.svelte
+++ b/src/lib/components/job/JobSection.svelte
@@ -62,16 +62,12 @@
 		{#if job}
 			<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
 			<div class="overlay"></div>
-		{:else}
+		{:else if canEdit}
 			<div class="empty-portrait">
-				{#if canEdit}
-					<button class="select-job-button" on:click={onSelectJob}>
-						<Icon name="plus" size={24} />
-						<span>Select Job</span>
-					</button>
-				{:else}
-					<span>No Job Selected</span>
-				{/if}
+				<button class="select-job-button" on:click={onSelectJob}>
+					<Icon name="plus" size={24} />
+					<span>Select Job</span>
+				</button>
 			</div>
 		{/if}
 
@@ -170,8 +166,8 @@
 				</div>
 			{/if}
 		{:else}
-			<div class="no-job-message">
-				<p>Select a job to view skills and details</p>
+			<div class="no-job-message" class:readonly={!canEdit}>
+				<p>{canEdit ? 'Select a job to view skills and details' : 'No job selected'}</p>
 			</div>
 		{/if}
 	</div>
@@ -434,6 +430,10 @@
 			height: 100%;
 			color: var(--text-tertiary);
 			font-size: typography.$font-regular;
+
+			&.readonly {
+				color: var(--text-secondary);
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/sidebar/AddArtifactSidebar.svelte b/src/lib/components/sidebar/AddArtifactSidebar.svelte
index dc784546..d6847301 100644
--- a/src/lib/components/sidebar/AddArtifactSidebar.svelte
+++ b/src/lib/components/sidebar/AddArtifactSidebar.svelte
@@ -444,7 +444,7 @@
 	.empty {
 		padding: spacing.$unit-2x;
 		text-align: center;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.error {
diff --git a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
index 90f19c98..f4ba0c07 100644
--- a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
@@ -175,7 +175,7 @@
 
 	.special-note {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		margin: 0;
 		padding-bottom: spacing.$unit;
 	}
diff --git a/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte b/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
index c5dc49da..4ac3399b 100644
--- a/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
+++ b/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
@@ -137,12 +137,12 @@
 	}
 
 	.no-data {
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
 	.loading {
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
diff --git a/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte b/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
index 4e1fc8f9..637c29e1 100644
--- a/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
+++ b/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
@@ -89,7 +89,7 @@
 
 	.boolean-indicator {
 		font-size: typography.$font-regular;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 
 		&.yes {
 			color: colors.$wind-bg-00;
diff --git a/src/lib/features/database/jobs/tabs/JobImagesTab.svelte b/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
index 552a17b7..7b708183 100644
--- a/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
+++ b/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
@@ -157,7 +157,7 @@
 
 	.image-sublabel {
 		font-size: typography.$font-tiny;
-		color: colors.$grey-60;
+		color: var(--text-tertiary);
 		text-align: center;
 	}
 </style>
diff --git a/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte b/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
index cd78f150..dab153a1 100644
--- a/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
+++ b/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
@@ -356,7 +356,7 @@
 	.empty {
 		text-align: center;
 		padding: spacing.$unit * 4;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 
 		p {
 			margin: 0 0 spacing.$unit-2x 0;
@@ -374,7 +374,7 @@
 	.group-title {
 		font-size: typography.$font-small;
 		font-weight: typography.$medium;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		margin: 0 0 spacing.$unit 0;
 	}
 
@@ -420,7 +420,7 @@
 
 	.skill-name-jp {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.skill-category {