Modify UI input colors to align with theme updates

learningequality · Feb 28, 2024 · 7cc8a28 · 7cc8a28
1 parent ad4984d
commit 7cc8a28
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 38 deletions.
diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue
@@ -9,6 +9,7 @@
           :options="options"
           label="Who are you?"
           placeholder="Nobody"
+          style="width:300px;"
         />
         <p>Value: {{ exampleData }}</p>
       </DocsShow>

diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue
@@ -902,31 +902,29 @@
     display: flex;
     align-items: flex-start;
     margin-bottom: $ui-input-margin-bottom;
+    background: $md-grey-100;
+    border-bottom-color: $ui-input-border-color;
+    border-bottom-style: solid;
+    border-bottom-width: $ui-input-border-width;
+    border-radius: 2px 2px 0 0;
     outline: none;
 
     &:hover:not(.is-disabled) {
+      border-bottom-color: $ui-input-border-color--hover;
+      border-bottom-width: $ui-input-border-width--active;
       .ui-select-label-text {
         color: $ui-input-label-color--hover;
       }
 
-      .ui-select-display {
-        border-bottom-color: $ui-input-border-color--hover;
-      }
-
       .ui-select-dropdown-button {
         color: $ui-input-button-color--hover;
       }
     }
 
     &.is-active:not(.is-disabled) {
-      .ui-select-display {
-        border-bottom-width: $ui-input-border-width--active;
-      }
-    }
-
-    &.is-active {
-      .ui-select-display {
-        border-bottom-width: $ui-input-border-width--active;
+      border-bottom-color: $ui-input-border-color--active;
+      .ui-icon {
+        color: $ui-input-icon-color--active;
       }
     }
 
@@ -961,28 +959,24 @@
     &:not(.is-multiple) {
       .ui-select-display {
         height: $ui-input-height;
-        line-height: 1;
       }
     }
 
     &.is-multiple {
       .ui-select-display {
         padding-top: rem-calc(4px);
         padding-bottom: rem-calc(4px);
-        line-height: 1.4;
       }
     }
 
     &.is-invalid:not(.is-disabled) {
+      border-bottom-color: $ui-input-border-color--invalid;
       .ui-select-label-text,
+      .ui-select-dropdown-button,
       .ui-select-icon-wrapper .ui-icon {
         color: $ui-input-label-color--invalid;
       }
 
-      .ui-select-display {
-        border-bottom-color: $ui-input-border-color--invalid;
-      }
-
       .ui-select-feedback {
         color: $ui-input-feedback-color--invalid;
       }
@@ -1050,13 +1044,11 @@
     padding: 0;
     font-size: $ui-input-text-font-size;
     font-weight: normal;
+    line-height: 1.4;
     color: $ui-input-text-color;
     cursor: pointer;
     user-select: none;
     border: 0;
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
     transition: border 0.1s ease;
   }
 
@@ -1110,9 +1102,6 @@
     cursor: auto;
     background: none;
     border: 0;
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
     border-radius: 0;
     outline: none;
     transition: border 0.1s ease;

diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue
@@ -84,7 +84,6 @@
           v-if="label || $slots.default"
           class="ui-textbox-label-text"
           :class="labelClasses"
-          :style="isActive ? { color: $themeTokens.primaryDark } : {}"
         >
           <slot>{{ label }}</slot>
         </div>
@@ -403,17 +402,20 @@
         color: $ui-input-label-color--hover;
       }
 
-      .ui-textbox-input,
+      .ui-textbox-label,
       .ui-textbox-textarea {
         border-bottom-color: $ui-input-border-color--hover;
+        border-bottom-width: $ui-input-border-width--active;
       }
     }
 
     &.is-active:not(.is-disabled) {
-      .ui-textbox-input,
+      .ui-textbox-label-text {
+        color: $ui-input-border-color--active;
+      }
+      .ui-textbox-label,
       .ui-textbox-textarea {
         border-bottom-color: $ui-input-border-color--active;
-        border-bottom-width: $ui-input-border-width--active;
       }
     }
 
@@ -465,7 +467,7 @@
         color: $ui-input-label-color--invalid;
       }
 
-      .ui-textbox-input,
+      .ui-textbox-label,
       .ui-textbox-textarea {
         border-bottom-color: $ui-input-border-color--invalid;
       }
@@ -477,6 +479,7 @@
 
     &.is-disabled {
       .ui-textbox-input,
+      .ui-textbox-label,
       .ui-textbox-textarea {
         color: $ui-input-text-color--disabled;
         border-bottom-style: $ui-input-border-style--disabled;
@@ -499,8 +502,11 @@
     width: 100%;
     padding: 4px 0 0 0;
     margin: 0;
-    background: #F5F5F5;
+    background: $md-grey-100;
     border-radius: 4px 4px 0 0;
+    border-bottom-color: $ui-input-border-color;
+    border-bottom-style: solid;
+    border-bottom-width: $ui-input-border-width;
   }
 
   .ui-textbox-icon-wrapper {
@@ -539,14 +545,17 @@
     cursor: auto;
     background: none;
     border: none;
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
     border-radius: 0;
     outline: none;
     transition: border 0.1s ease;
   }
 
+    .ui-textbox-textarea {
+    border-bottom-color: $ui-input-border-color;
+    border-bottom-style: solid;
+    border-bottom-width: $ui-input-border-width;
+  }
+
   .ui-textbox-input {
     height: $ui-input-height;
   }

diff --git a/lib/keen/styles/md-colors.scss b/lib/keen/styles/md-colors.scss
@@ -78,7 +78,7 @@ $md-indigo-a200: #536dfe;
 $md-indigo-a400: #3d5afe;
 $md-indigo-a700: #304ffe;
 
-$md-blue: #2196f3;
+$md-blue: #2547F3;
 $md-blue-50: #e3f2fd;
 $md-blue-100: #bbdefb;
 $md-blue-200: #90caf9;

diff --git a/lib/keen/styles/variables.scss b/lib/keen/styles/variables.scss
@@ -49,16 +49,17 @@ $ui-input-text-color--disabled: $disabled-text-color !default;
 $ui-input-text-color--invalid: $md-red !default;
 
 // Input border
-$ui-input-border-color: $divider-color !default;
-$ui-input-border-color--hover: rgba(black, 0.3) !default;
+$ui-input-border-color: $secondary-text-color !default;
+$ui-input-border-color--hover: rgba(black, 0.75) !default;
 $ui-input-border-color--active: $brand-primary-color !default;
 $ui-input-border-color--invalid: $md-red !default;
 $ui-input-border-width: 1px !default;
-$ui-input-border-width--active: 2px !default;
+$ui-input-border-width--active: 1.5px !default;
 $ui-input-border-style--disabled: dotted !default;
 
 // Input icons
 $ui-input-icon-color: $secondary-text-color !default;
+$ui-input-icon-color--active: $brand-primary-color !default;
 $ui-input-icon-opacity--disabled: 0.6 !default;
 $ui-input-icon-margin-right: rem(12px) !default;
 $ui-input-icon-margin-top: rem(4px) !default;
@@ -68,7 +69,7 @@ $ui-input-icon-margin-top--with-label: rem(24px) !default;
 $ui-input-button-color: $secondary-text-color !default;
 $ui-input-button-color--hover: $primary-text-color !default;
 $ui-input-button-opacity--disabled: 0.6 !default;
-$ui-input-button-size: rem(18px) !default;
+$ui-input-button-size: rem(24px) !default;
 $ui-input-button-margin-top: rem(7px) !default;
 $ui-input-button-margin-top--with-label: rem(27px) !default;