From 6fbccfc5438ca74aaecf6635d161212818c7dfa7 Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Tue, 26 May 2026 17:59:10 -0400 Subject: [PATCH] Define more border and input color variables --- styles/less/global/elements.less | 32 ++++++--------------- styles/less/global/sheet.less | 2 +- styles/less/sheets/actors/party/header.less | 1 + styles/less/utils/colors.less | 23 +++++++++++++-- styles/less/utils/mixin.less | 9 +++--- 5 files changed, 37 insertions(+), 30 deletions(-) diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index d918e809..3d913b3b 100755 --- a/styles/less/global/elements.less +++ b/styles/less/global/elements.less @@ -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 { diff --git a/styles/less/global/sheet.less b/styles/less/global/sheet.less index e04c7573..e3072da1 100755 --- a/styles/less/global/sheet.less +++ b/styles/less/global/sheet.less @@ -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; diff --git a/styles/less/sheets/actors/party/header.less b/styles/less/sheets/actors/party/header.less index 18d69834..aca246d8 100644 --- a/styles/less/sheets/actors/party/header.less +++ b/styles/less/sheets/actors/party/header.less @@ -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; diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less index dd626358..80752577 100755 --- a/styles/less/utils/colors.less +++ b/styles/less/utils/colors.less @@ -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); \ No newline at end of file diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less index b37bfc06..a8527e68 100644 --- a/styles/less/utils/mixin.less +++ b/styles/less/utils/mixin.less @@ -50,14 +50,15 @@ */ .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'] { - font-family: @font-title; + input[type='text'], + .input[contenteditable] { + font-family: @font-title; + } } h2,