Define more border and input color variables

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;
+        color: @input-text-color;
-        border: 1px solid light-dark(@dark, @beige);
+        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 {

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;

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;

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);

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;
-    }
+        input[type='text'],
-
+        .input[contenteditable] {
-    h1 input[type='text'] {
+            font-family: @font-title;
-        font-family: @font-title;
+        }
     }
 
     h2,