use text color css vars in remaining components

This commit is contained in:
Justin Edmund 2025-12-20 20:58:51 -08:00
parent 662c60a51c
commit 5eefcc0bc7
11 changed files with 26 additions and 26 deletions

View file

@ -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;

View file

@ -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;
}

View file

@ -75,7 +75,7 @@
.empty-state {
padding: spacing.$unit-4x;
text-align: center;
color: colors.$grey-50;
color: var(--text-secondary);
}
.skill-options {

View file

@ -191,6 +191,6 @@
.control-label {
font-size: typography.$font-small;
color: colors.$grey-50;
color: var(--text-secondary);
}
</style>

View file

@ -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>

View file

@ -444,7 +444,7 @@
.empty {
padding: spacing.$unit-2x;
text-align: center;
color: colors.$grey-50;
color: var(--text-secondary);
}
.error {

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;

View file

@ -157,7 +157,7 @@
.image-sublabel {
font-size: typography.$font-tiny;
color: colors.$grey-60;
color: var(--text-tertiary);
text-align: center;
}
</style>

View file

@ -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 {