cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-05 20:34:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Define more border and input color variables

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-26 17:59:10 -04:00
parent 48f9ffc318
commit 6fbccfc543
5 changed files with 37 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

32
styles/less/global/elements.less
View file

@ -2,8 +2,6 @@
@import '../utils/fonts.less';
.dh-style {
border: 1px solid light-dark(@dark-blue, @golden);
input[type='text'],
input[type='number'],
textarea,
@ -14,12 +12,12 @@
box-shadow: 0 4px 30px @soft-shadow;
backdrop-filter: blur(9.5px);
outline: 2px solid transparent;
color: @color-text-emphatic;
border: 1px solid light-dark(@dark, @beige);
color: @input-text-color;
border: 1px solid @input-border-color;
transition: all 0.3s ease;
&::placeholder {
color: light-dark(@dark-40, @beige-50);
color: @color-text-subtle;
}
&:hover,
@ -30,7 +28,7 @@
&:focus[type='number'] {
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
box-shadow: none;
outline: 2px solid light-dark(@dark, @beige);
outline: 2px solid @input-border-color;
}
&:disabled[type='text'],
@ -47,7 +45,7 @@
.input[contenteditable] {
cursor: var(--cursor-text);
&:empty:before {
color: light-dark(@dark-40, @beige-50);
color: @color-text-subtle;
content: attr(placeholder);
}
}
@ -265,7 +263,7 @@
align-items: center;
margin-top: 5px;
border-radius: 6px;
border-color: light-dark(@dark-blue, @golden);
border-color: @color-fieldset-border;
&.glassy {
background-color: light-dark(@dark-blue-10, @golden-10);
@ -274,7 +272,7 @@
legend {
padding: 2px 12px;
border-radius: 3px;
background-color: light-dark(@dark-blue, @golden);
background-color: @color-fieldset-border;
color: light-dark(@beige, @dark-blue);
margin-bottom: var(--spacer-4);
}
@ -365,18 +363,6 @@
}
}
input[type='text'],
input[type='number'] {
color: light-dark(@dark, @beige);
transition: all 0.3s ease;
outline: 2px solid transparent;
&:focus,
&:hover {
outline: 2px solid light-dark(@dark, @beige);
}
}
&[disabled],
&.child-disabled .form-group,
select[disabled],
@ -514,7 +500,7 @@
display: block;
height: 1px;
width: 100%;
border-bottom: 1px solid light-dark(@dark-blue, @golden);
border-bottom: 1px solid @color-border;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
}
@ -522,7 +508,7 @@
display: block;
height: 1px;
width: 100%;
border-bottom: 1px solid light-dark(@dark-blue, @golden);
border-bottom: 1px solid @color-border;
mask-image: linear-gradient(270deg, transparent 0%, black 100%);
&.invert {

2
styles/less/global/sheet.less
View file

@ -4,7 +4,7 @@
// Theme handling
.appTheme({
background: @dark-blue-d0;
background: @dark-blue-c0;
backdrop-filter: blur(7px);
}, {
background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;

1
styles/less/sheets/actors/party/header.less
View file

@ -20,6 +20,7 @@
input.item-name[type='text'] {
backdrop-filter: none;
border: none;
color: @color-text-emphatic;
font-family: @font-title;
font-size: var(--font-size-32);
outline: 2px solid transparent;

23
styles/less/utils/colors.less
View file

@ -51,7 +51,7 @@
--dark-blue-50: #18162e50;
--dark-blue-60: #18162e60;
--dark-blue-90: #18162e90;
--dark-blue-d0: #18162ed0;
--dark-blue-c0: #18162ec0;
--semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
--dark: #222222;
@ -85,13 +85,23 @@
--primary-color-fear: rgba(9, 71, 179, 0.75);
}
/**
* Override core foundry color variables in theme scopes, and add some new theme specific variants.
* These are intended to be more representative of its use case, so avoid naming these after the color.
* Heavily scoped foundry variables (such as input-border-color, which is defined inside input) instead get a prefix.
*/
@scope (.theme-light) to (.themed) {
.dh-style :scope,
:scope.dh-style,
.dh-style,
.duality {
--color-border: @dark-blue;
--color-fieldset-border: @dark-blue;
--color-text-emphatic: @dark-blue;
--color-text-subtle: #555;
--dh-input-border-color: @dark;
--dh-input-text-color: @dark;
}
}
@scope (.theme-dark) to (.themed) {
@ -99,8 +109,13 @@
:scope.dh-style,
.dh-style,
.duality {
--color-border: @golden;
--color-fieldset-border: @golden;
--color-text-emphatic: @golden;
--color-text-subtle: #a29086;
--dh-input-border-color: @beige;
--dh-input-text-color: @beige;
}
}
@ -156,7 +171,7 @@
@dark-blue-50: var(--dark-blue-50, #18162e50);
@dark-blue-60: var(--dark-blue-60, #18162e60);
@dark-blue-90: var(--dark-blue-90, #18162e90);
@dark-blue-d0: var(--dark-blue-d0, #18162ed0);
@dark-blue-c0: var(--dark-blue-c0, #18162ec0);
@semi-transparent-dark-blue: var(--semi-transparent-dark-blue, rgba(24, 22, 46, 0.33));
@dark: var(--dark, #222222);
@ -211,6 +226,10 @@
}
// LESS variable versions of core foundry color variables
@color-border: var(--color-border);
@color-fieldset-border: var(--color-fieldset-border);
@color-text-emphatic: var(--color-text-emphatic);
@color-text-primary: var(--color-text-primary);
@color-text-subtle: var(--color-text-subtle);
@input-border-color: var(--dh-input-border-color);
@input-text-color: var(--dh-input-text-color);

7
styles/less/utils/mixin.less
View file

@ -50,15 +50,16 @@
*/
.dh-typography() {
h1 {
--dh-input-text-color: @color-text-emphatic;
font-family: @font-title;
margin: 0;
border: none;
font-weight: normal;
}
h1 input[type='text'] {
input[type='text'],
.input[contenteditable] {
font-family: @font-title;
}
}
h2,
h3 {