use text color css vars in ui components
This commit is contained in:
parent
1a511461e5
commit
d238754d8b
7 changed files with 13 additions and 13 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@
|
|||
|
||||
.job-tier {
|
||||
font-size: typography.$font-small;
|
||||
color: colors.$grey-50;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
.suggestion-label {
|
||||
font-size: calc($font-small * 0.9);
|
||||
color: $grey-50;
|
||||
color: var(--text-secondary);
|
||||
font-weight: $normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue