[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

@ -172,7 +172,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;
@ -226,7 +226,6 @@
padding-left: 0.5rem;
.trait {
--color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
cursor: pointer;
position: relative;
@ -238,10 +237,10 @@
.trait-name {
position: relative;
background-color: light-dark(@semi-transparent-dark-blue, @golden-40);
border: 1px solid var(--color-border);
background-color: @trait-color-bg;
border: 1px solid @trait-color-border;
border-radius: 3px;
color: light-dark(var(--color-light-1), @golden);
color: @color-text-emphatic;
font-size: var(--font-size-12);
font-weight: 600;
height: 1rem;
@ -250,7 +249,7 @@
width: 100%;
padding: 0 0.1876px 0 0.375rem;
margin-right: 0.125rem; /* makes it center SLIGHTLY */
text-shadow: 1px 1px 2px @light-black;
text-shadow: 1px 1px 3px @color-text-shadow-contrast;
display: flex;
align-items: center;
@ -259,7 +258,7 @@
.tier-mark {
position: absolute;
background-color: @dark-blue;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 50%;
width: 1rem;
height: 1rem;
@ -279,6 +278,7 @@
}
.trait-value-area {
--color-border: @trait-color-border;
--background: light-dark(#e8e6e3, @dark-blue);
display: flex;
position: relative;
@ -298,7 +298,7 @@
.spellcasting-mark {
position: absolute;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
color: @golden;
left: 0;
right: 0;

View file

@ -45,7 +45,7 @@
.btn-toggle-view {
background: light-dark(@dark-blue-10, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 15px;
padding: 0;
gap: 0;

View file

@ -40,7 +40,7 @@
.application.sheet.dh-style .character-sidebar-sheet {
width: 275px;
min-width: 275px;
border-right: 1px solid light-dark(@dark-blue, @golden);
border-right: 1px solid @color-border;
.portrait {
position: relative;
@ -168,7 +168,7 @@
appearance: none;
width: 100px;
height: 40px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
@ -282,7 +282,7 @@
&:hover {
background: light-dark(@light-black, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
h4,
i {
@ -309,7 +309,7 @@
flex-wrap: wrap;
gap: 4px;
padding: 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
@ -343,7 +343,7 @@
&:hover {
background: light-dark(@light-black, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
.label,
.value,
@ -375,7 +375,7 @@
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
@ -411,7 +411,7 @@
appearance: none;
width: 80px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: light-dark(transparent, @dark-blue);
@ -450,7 +450,7 @@
display: flex;
width: 50px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;
@ -515,7 +515,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;