From 844634e8c8d5197a5d284b8638857fa9c2e8fe5b Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 19 Jan 2024 14:31:42 +0100 Subject: [PATCH] :bug: Fix border color on inputs when hovering --- .../styles/common/refactor/basic-rules.scss | 43 ++++++++++++++++--- .../styles/common/refactor/design-tokens.scss | 12 +++++- .../main/ui/components/editable_select.scss | 2 +- .../src/app/main/ui/components/forms.scss | 7 ++- .../app/main/ui/components/search_bar.scss | 2 +- .../app/main/ui/workspace/sidebar/assets.scss | 23 +++++++--- .../app/main/ui/workspace/sidebar/layers.scss | 2 +- .../workspace/sidebar/options/menus/blur.scss | 2 +- .../sidebar/options/menus/frame_grid.scss | 8 ++-- .../sidebar/options/menus/interactions.scss | 15 ++++--- .../sidebar/options/menus/typography.scss | 2 +- .../sidebar/options/rows/color_row.scss | 18 +++++++- 12 files changed, 101 insertions(+), 35 deletions(-) diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 177be4e5c4..272577023d 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -316,7 +316,7 @@ height: $s-32; border-radius: $br-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color); span, label { @@ -336,14 +336,45 @@ } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); + background-color: var(--input-background-color-hover); span { - color: var(--input-foreground-color); + color: var(--input-foreground-color-hover); + } + input { + color: var(--input-foreground-color-hover); + } + } + &:active { + border: $s-1 solid var(--input-border-color-active); + background-color: var(--input-background-color-active); + span { + color: var(--input-foreground-color-active); } input { color: var(--input-foreground-color-active); } - background-color: var(--input-background-color-hover); + } + &:focus, + &:focus-within { + border: $s-1 solid var(--input-border-color-focus); + background-color: var(--input-background-color-focus); + span { + color: var(--input-foreground-color-focus); + } + input { + color: var(--input-foreground-color-focus); + } + &:hover { + border: $s-1 solid var(--input-border-color-focus); + background-color: var(--input-background-color-focus); + span { + color: var(--input-foreground-color-focus); + } + input { + color: var(--input-foreground-color-focus); + } + } } } @@ -362,7 +393,7 @@ width: 100%; margin: 0; border-radius: $br-8; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); } @@ -500,7 +531,7 @@ min-height: $s-32; margin-top: $s-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); &:focus-within, &:active { diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index daaa7c5a3d..03928cc3cb 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -143,11 +143,19 @@ --icon-foreground-discard: var(--error-color); // INPUTS, SELECTS, DROPDOWNS - --input-background-color: var(--color-background-tertiary); - --input-foreground-color: var(--color-foreground-secondary); + --input-placeholder-color: var(--color-foreground-secondary); + --input-background-color: var(--color-background-tertiary); // empty state + --input-foreground-color: var(--color-foreground-secondary); // empty state + --input-border-color: var(--color-background-tertiary); // empty state + --input-background-color-rest: var(--color-background-tertiary); + --input-foreground-color-rest: var(--color-foreground-primary); + --input-border-color-rest: var(--color-background-tertiary); --input-background-color-hover: var(--color-background-quaternary); + --input-foreground-color-hover: var(--color-foreground-primary); + --input-border-color-hover: var(--color-background-quaternary); --input-background-color-focus: var(--color-background-tertiary); + --input-foreground-color-focus: var(--color-foreground-primary); --input-border-color-focus: var(--color-accent-primary); --input-background-color-active: var(--color-background-primary); --input-foreground-color-active: var(--color-foreground-primary); diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index e3d038456f..6edb393932 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -10,7 +10,7 @@ @extend .asset-element; margin: 0; padding: 0; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); position: relative; display: flex; height: $s-32; diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 2ee39783a4..512ba312ee 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -46,7 +46,7 @@ input:-webkit-autofill:active { -webkit-text-fill-color: var(--input-foreground-color-active); -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); -webkit-background-clip: text; transition: background-color 5000s ease-in-out 0s; caret-color: var(--input-foreground-color-active); @@ -180,7 +180,7 @@ height: $s-32; width: 100%; border-radius: $br-8; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); .main-content { @@ -282,8 +282,7 @@ margin: 0; border-radius: $br-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); - color: var(--input-foreground-color-active); + border: $s-1 solid var(--input-border-color-active); &:focus { outline: none; border: $s-1 solid var(--input-border-color-focus); diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 850b8af221..ae5cbe1e1c 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -35,7 +35,7 @@ } } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); input { background-color: var(--input-background-color-hover); diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 0c73974ca1..27f8ca2180 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -56,30 +56,39 @@ height: $s-32; width: $s-32; margin: 0; - border: 1px solid var(--color-background-tertiary); + border: $s-1 solid var(--input-border-color-rest); border-radius: $br-8 $br-2 $br-2 $br-8; - background-color: var(--color-background-tertiary); + background-color: var(--input-background-color-rest); svg { height: $s-16; width: $s-16; stroke: var(--icon-foreground); } &:focus { - border: 1px solid var(--input-border-color-focus); + border: $s-1 solid var(--input-border-color-focus); outline: 0; - background-color: var(--input-background-color-active); - color: var(--input-foreground-color-active); + background-color: var(--input-background-color-focus); + color: var(--input-foreground-color-focus); svg { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); } } &:hover { - border: 1px solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); stroke: var(--button-foreground-hover); } + &:focus { + border: $s-1 solid var(--input-border-color-focus); + outline: 0; + background-color: var(--input-background-color-focus); + color: var(--input-foreground-color-focus); + svg { + background-color: var(--input-background-color-focus); + } + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index e46c73d23c..55811f1102 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -42,7 +42,7 @@ } } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index 6bed44856a..a7f64e93ba 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -67,7 +67,7 @@ background-color: var(--input-background-color); color: var(--menu-foreground-color); box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); } } .actions { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 4a23132e71..d1bb3aa4cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -45,7 +45,7 @@ width: $s-28; border-radius: $br-8 0 0 $br-8; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); svg { @extend .button-icon; } @@ -62,9 +62,9 @@ border-radius: 0; height: 100%; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); } } } @@ -90,7 +90,7 @@ height: $s-32; border-radius: 0 $br-8 $br-8 0; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); .numeric-input { @extend .input-base; margin: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index f3ca1d9775..e2f48a6e30 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -275,7 +275,7 @@ padding: 0; margin-right: 0; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color); .start-flow-btn { @include buttonStyle; @@ -315,22 +315,27 @@ &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); &:active { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-hover); .flow-input-wrapper { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-hover); } } } &:focus, &:focus-within { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + &:hover { + border: $s-1 solid var(--input-border-color-focus); + } } &.editing { background-color: var(--input-background-color-active); + border: $s-1 solid var(--input-border-color-active); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index e8a81f607f..1040e56752 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -278,7 +278,7 @@ width: $s-60; margin: 0; padding: 0; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); position: relative; .font-size-select { @include removeInputStyle; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index bfa232fdad..ed7f7bc3ae 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -85,7 +85,7 @@ } &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); .color-bullet-wrapper, .color-name, .detach-btn, @@ -107,14 +107,28 @@ background-color: var(--input-background-color-active); } } + &:focus, + &:focus-within { + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + } } + &:focus, &:focus-within { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + &:hover { + background-color: var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-focus); + } } &.editing { background-color: var(--input-background-color-active); + &:hover { + border: $s-1 solid var(--input-border-color-active); + } } } .gradient-name-wrapper {