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 { .database-back-button {
border-radius: layout.$full-corner; border-radius: layout.$full-corner;
color: colors.$grey-50; color: var(--text-secondary);
font-size: typography.$font-small; font-size: typography.$font-small;
font-weight: typography.$medium; font-weight: typography.$medium;
text-decoration: none; text-decoration: none;

View file

@ -132,7 +132,7 @@
} }
&.grade-none { &.grade-none {
background: colors.$grey-85; background: colors.$grey-85;
color: colors.$grey-50; color: var(--text-secondary);
} }
} }
@ -159,7 +159,7 @@
.breakdown-label { .breakdown-label {
font-size: typography.$font-small; font-size: typography.$font-small;
color: colors.$grey-50; color: var(--text-secondary);
} }
.breakdown-value { .breakdown-value {
@ -211,7 +211,7 @@
.no-grade-text { .no-grade-text {
font-size: typography.$font-small; font-size: typography.$font-small;
color: colors.$grey-50; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }

View file

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

View file

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

View file

@ -62,16 +62,12 @@
{#if job} {#if job}
<img class="job-portrait" src={jobImageUrl} alt={job.name.en} /> <img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
<div class="overlay"></div> <div class="overlay"></div>
{:else} {:else if canEdit}
<div class="empty-portrait"> <div class="empty-portrait">
{#if canEdit} <button class="select-job-button" on:click={onSelectJob}>
<button class="select-job-button" on:click={onSelectJob}> <Icon name="plus" size={24} />
<Icon name="plus" size={24} /> <span>Select Job</span>
<span>Select Job</span> </button>
</button>
{:else}
<span>No Job Selected</span>
{/if}
</div> </div>
{/if} {/if}
@ -170,8 +166,8 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="no-job-message"> <div class="no-job-message" class:readonly={!canEdit}>
<p>Select a job to view skills and details</p> <p>{canEdit ? 'Select a job to view skills and details' : 'No job selected'}</p>
</div> </div>
{/if} {/if}
</div> </div>
@ -434,6 +430,10 @@
height: 100%; height: 100%;
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: typography.$font-regular; font-size: typography.$font-regular;
&.readonly {
color: var(--text-secondary);
}
} }
} }
</style> </style>

View file

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

View file

@ -175,7 +175,7 @@
.special-note { .special-note {
font-size: typography.$font-small; font-size: typography.$font-small;
color: colors.$grey-50; color: var(--text-secondary);
margin: 0; margin: 0;
padding-bottom: spacing.$unit; padding-bottom: spacing.$unit;
} }

View file

@ -137,12 +137,12 @@
} }
.no-data { .no-data {
color: colors.$grey-50; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }
.loading { .loading {
color: colors.$grey-50; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }

View file

@ -89,7 +89,7 @@
.boolean-indicator { .boolean-indicator {
font-size: typography.$font-regular; font-size: typography.$font-regular;
color: colors.$grey-50; color: var(--text-secondary);
&.yes { &.yes {
color: colors.$wind-bg-00; color: colors.$wind-bg-00;

View file

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

View file

@ -356,7 +356,7 @@
.empty { .empty {
text-align: center; text-align: center;
padding: spacing.$unit * 4; padding: spacing.$unit * 4;
color: colors.$grey-50; color: var(--text-secondary);
p { p {
margin: 0 0 spacing.$unit-2x 0; margin: 0 0 spacing.$unit-2x 0;
@ -374,7 +374,7 @@
.group-title { .group-title {
font-size: typography.$font-small; font-size: typography.$font-small;
font-weight: typography.$medium; font-weight: typography.$medium;
color: colors.$grey-50; color: var(--text-secondary);
margin: 0 0 spacing.$unit 0; margin: 0 0 spacing.$unit 0;
} }
@ -420,7 +420,7 @@
.skill-name-jp { .skill-name-jp {
font-size: typography.$font-small; font-size: typography.$font-small;
color: colors.$grey-50; color: var(--text-secondary);
} }
.skill-category { .skill-category {