use text color css vars in ui components

This commit is contained in:
Justin Edmund 2025-12-20 20:58:16 -08:00
parent 1a511461e5
commit d238754d8b
7 changed files with 13 additions and 13 deletions

View file

@ -61,7 +61,7 @@
.unit { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: $unit; }
.image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; background: var(--extra-purple-card-bg); }
.name { font-size: $font-small; text-align: center; color: $grey-50; }
.name { font-size: $font-small; text-align: center; color: var(--text-secondary); }
.remove, .add { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: white; border: none; border-radius: 12px; width: 24px; height: 24px; line-height: 24px; cursor: pointer; }
.add { right: 6px; }
</style>

View file

@ -179,12 +179,12 @@
.label {
font-weight: typography.$medium;
color: colors.$grey-50;
color: var(--text-secondary);
}
.sublabel {
font-size: typography.$font-small;
color: colors.$grey-60;
color: var(--text-tertiary);
font-weight: typography.$normal;
}
@ -223,7 +223,7 @@
border: none;
border-radius: layout.$item-corner;
background: transparent;
color: colors.$grey-50;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
@include effects.smooth-transition(effects.$duration-quick, background-color, color, opacity);

View file

@ -201,7 +201,7 @@
.job-tier {
font-size: typography.$font-small;
color: colors.$grey-50;
color: var(--text-secondary);
}
}
}

View file

@ -101,7 +101,7 @@
.sublabel {
font-size: typography.$font-small;
color: colors.$grey-60;
color: var(--text-tertiary);
font-weight: typography.$normal;
}
@ -109,13 +109,13 @@
display: flex;
align-items: center;
gap: spacing.$unit-half;
color: colors.$grey-50;
color: var(--text-secondary);
flex-shrink: 0;
}
.value {
font-size: typography.$font-regular;
color: colors.$grey-50;
color: var(--text-secondary);
}
// Element-colored value

View file

@ -135,7 +135,7 @@
.suggestion-label {
font-size: calc($font-small * 0.9);
color: $grey-50;
color: var(--text-secondary);
font-weight: $normal;
}

View file

@ -228,12 +228,12 @@
.label {
font-weight: typography.$medium;
color: colors.$grey-50;
color: var(--text-secondary);
}
.sublabel {
font-size: typography.$font-small;
color: colors.$grey-60;
color: var(--text-tertiary);
font-weight: typography.$normal;
}
@ -270,7 +270,7 @@
border: none;
border-radius: layout.$item-corner;
background: transparent;
color: colors.$grey-50;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
@include effects.smooth-transition(effects.$duration-quick, background-color, color, opacity);

View file

@ -89,7 +89,7 @@
.option-label {
font-size: $font-small;
color: $grey-50;
color: var(--text-secondary);
user-select: none;
transition: color 0.15s ease;
}