[Refactor] Define more border and input color variables (#1937)

* Define more border and input color variables

* Rename custom color variables

* Fix assignment of variables

* Apply border color variable to matching borders

* Add trait header colors and shadow contrast
This commit is contained in:
Carlos Fernandez 2026-05-27 16:20:16 -04:00 committed by GitHub
parent 48f9ffc318
commit 1ab8170d2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 120 additions and 200 deletions

View file

@ -43,7 +43,7 @@
text-align: center;
font-size: var(--font-size-16);
margin: 0 4px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url('../assets/parchments/dh-parchment-dark.png');
@ -58,7 +58,7 @@
position: relative;
display: flex;
justify-content: center;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
cursor: pointer;
width: 120px;
@ -164,7 +164,7 @@
.hybrid-data {
padding: 0 2px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url('../assets/parchments/dh-parchment-dark.png');
@ -191,7 +191,7 @@
flex-direction: column;
gap: 4px;
padding: 0 4px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url('../assets/parchments/dh-parchment-dark.png');
@ -226,7 +226,7 @@
gap: 4px;
.trait-card {
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
padding: 2px;
opacity: 0.4;

View file

@ -79,7 +79,7 @@
font-weight: bold;
padding: 0 2px;
background-image: url(../assets/parchments/dh-parchment-light.png);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@beige, @dark);
opacity: 0.4;
@ -203,7 +203,7 @@
height: 16px;
width: 110px;
min-height: unset;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
color: light-dark(@beige, @beige);
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
@ -230,7 +230,7 @@
.suggested-trait-container {
width: 56px;
white-space: nowrap;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@beige, @dark);
background-image: url('../assets/parchments/dh-parchment-light.png');
@ -345,7 +345,7 @@
display: flex;
justify-content: center;
position: relative;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
.nav-section-text {
@ -383,7 +383,7 @@
width: 56px;
text-align: center;
line-height: 1;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@beige, @dark);
background-image: url(../assets/parchments/dh-parchment-light.png);
@ -447,7 +447,7 @@
height: 100%;
.simple-equipment {
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 8px;
position: relative;
display: flex;
@ -466,7 +466,7 @@
top: -8px;
font-size: var(--font-size-12);
white-space: nowrap;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: @dark;
background-image: url('../assets/parchments/dh-parchment-light.png');

View file

@ -81,7 +81,7 @@
.mark-container {
cursor: pointer;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
height: 26px;
padding: 0 1px;
@ -126,7 +126,7 @@
width: 100%;
.chip-inner-container {
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
height: 26px;
padding: 0 4px;

View file

@ -55,7 +55,7 @@
.activity-selected-marker {
font-size: var(--font-size-14);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url(../assets/parchments/dh-parchment-dark.png);
@ -78,7 +78,7 @@
}
.refreshable-container {
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url('../assets/parchments/dh-parchment-dark.png');

View file

@ -12,7 +12,7 @@
img {
width: 136px;
height: 136px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
opacity: 0.4;

View file

@ -57,7 +57,7 @@
display: flex;
flex-wrap: wrap;
font-style: italic;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
padding: 4px 4px;
}

View file

@ -36,7 +36,7 @@
align-items: stretch;
justify-content: center;
border-radius: 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
overflow: hidden;
height: 11.5rem;
width: 122px;

View file

@ -42,7 +42,7 @@
img {
height: 64px;
border-radius: 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
}
.member-name {