From 7cc8a28181c15074558e456a9f4d491c08654b0c Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:55:26 -0600 Subject: [PATCH] Modify UI input colors to align with theme updates --- docs/pages/kselect.vue | 1 + lib/KSelect/KeenUiSelect.vue | 37 ++++++++++++---------------------- lib/keen/UiTextbox.vue | 27 ++++++++++++++++--------- lib/keen/styles/md-colors.scss | 2 +- lib/keen/styles/variables.scss | 9 +++++---- 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue index 65b68bfd9..63d0c53ba 100644 --- 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;" />

Value: {{ exampleData }}

diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue index fb1211c9b..c74534f63 100644 --- 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,7 +959,6 @@ &:not(.is-multiple) { .ui-select-display { height: $ui-input-height; - line-height: 1; } } @@ -969,20 +966,17 @@ .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 index a5f2fc958..a22c06629 100644 --- 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 } : {}" > {{ label }} @@ -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 index 2c7301cdf..6c17dc03b 100644 --- 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 index 59c9fa2f4..1bb32e97f 100644 --- 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;