Add emphatic color variable and set up scoped based overrides for core variables (#1932)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run

This commit is contained in:
Carlos Fernandez 2026-05-26 16:18:52 -04:00 committed by GitHub
parent c2f8b34ef2
commit fa6f9d56b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 86 additions and 71 deletions

View file

@ -127,7 +127,7 @@
.title-name {
text-align: start;
font-size: var(--font-size-28);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
text-align: center;
}
}
@ -180,7 +180,7 @@
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -194,7 +194,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.domain {
@ -206,7 +206,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
img {
@ -230,7 +230,7 @@
padding: 10px;
border-radius: 5px;
min-width: 90px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
background-color: light-dark(@dark-blue-10, @golden-40);
}
}

View file

@ -65,7 +65,7 @@
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -77,7 +77,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.threshold-value {
color: light-dark(@dark, @beige);

View file

@ -103,7 +103,7 @@
padding: 5px 0;
margin-bottom: 8px;
font-size: var(--font-size-12);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.missing-header-feature {
opacity: 0.5;
@ -170,7 +170,7 @@
display: flex;
gap: 4px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -182,7 +182,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin-right: 4px;
}
@ -195,7 +195,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
img {

View file

@ -54,7 +54,7 @@
span {
margin: 1px;
width: 26px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.list-icon {
i {

View file

@ -286,7 +286,7 @@
h4,
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}
@ -314,7 +314,7 @@
z-index: 1;
background: @dark-blue;
justify-content: center;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.armor-slot {
cursor: pointer;
@ -348,7 +348,7 @@
.label,
.value,
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
@ -513,7 +513,7 @@
align-self: center;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -525,7 +525,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.threshold-value {
color: light-dark(@dark, @beige);

View file

@ -79,7 +79,7 @@
display: flex;
gap: 4px;
background-color: light-dark(var(--color-light-1), @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 4px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
@ -93,7 +93,7 @@
&.threshold-label {
font-size: var(--font-size-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
&.threshold-value {
@ -116,7 +116,7 @@
width: 100%;
z-index: 1;
font-size: var(--font-size-20);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-weight: bold;
}
@ -132,7 +132,7 @@
.hope-section {
display: flex;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 3px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
@ -144,7 +144,7 @@
font-size: var(--font-size-12);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin-right: 3px;
}
@ -212,7 +212,7 @@
gap: 4px;
background-color: light-dark(@dark-blue-10, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 2px 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 0 6px 6px 0;
@ -260,7 +260,7 @@
justify-content: space-between;
gap: 3px;
.label {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.value {
font-weight: 600;