UX: change to input field + label styling (#24060)

chapoi · web-flow · commit e2d9117378ea · 2023-10-23T17:36:36.000+02:00
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
@@ -135,6 +135,11 @@ label {
   display: flex;
   margin-bottom: 5px;
   align-items: flex-start;
+  color: var(--primary-high);
+
+  &:not(.checkbox-label) {
+    font-weight: bold;
+  }
   > .d-icon {
     align-self: center;
     margin-right: 4px;
@@ -225,7 +230,7 @@ input {
     margin-bottom: 9px;
     color: var(--primary);
     background-color: var(--secondary);
-    border: 1px solid var(--primary-medium);
+    border: 1px solid var(--primary-400);
     border-radius: var(--d-input-border-radius);
     &:focus {
       @include default-focus;
@@ -269,7 +274,7 @@ textarea {
   box-sizing: border-box;
   height: auto;
   background-color: var(--secondary);
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--primary-400);
   border-radius: 0;
 
   &:focus {
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -27,7 +27,7 @@
 
     .select-kit-header {
       background: var(--secondary);
-      border-color: var(--primary-medium);
+      border-color: var(--primary-400);
 
       &.is-focused {
         @include default-focus;
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -47,7 +47,7 @@
 
     .multi-select-header {
       background: var(--secondary);
-      border-color: var(--primary-medium);
+      border-color: var(--primary-400);
 
       .formatted-selection {
         margin: 0;
