From 103a027ae5ef64bd56666d66f15fc664e47b58d2 Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Fri, 17 May 2024 16:55:06 -0300 Subject: [PATCH 1/3] refactor(@clayui/treeview): LPD-19473 Improve TreeView Contrast on Active and Hover states --- .../src/scss/cadmin/variables/_treeview.scss | 27 +++++++++---------- .../src/scss/variables/_treeview.scss | 27 +++++++++---------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss index d23172706c..deee98dd02 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss @@ -128,6 +128,7 @@ $cadmin-treeview: map-merge( ), ), component-icon: ( + color: $cadmin-secondary, display: inline-block, font-size: 16px, height: auto, @@ -198,9 +199,6 @@ $cadmin-treeview-light: map-deep-merge( ( component-expander: ( color: $cadmin-secondary, - hover: ( - color: $cadmin-primary, - ), disabled: ( color: $cadmin-secondary, opacity: 0.5, @@ -218,16 +216,17 @@ $cadmin-treeview-light: map-deep-merge( ), ), hover: ( - background-color: $cadmin-gray-100, - color: $cadmin-gray-900, + border: 1px solid $cadmin-secondary-l0, ), active: ( - background-color: $cadmin-gray-200, - color: $cadmin-gray-900, + background-color: $cadmin-primary-l3, + border: 1px solid $cadmin-primary, + color: $cadmin-dark-l2, ), active-class: ( - background-color: $cadmin-gray-200, - color: $cadmin-gray-900, + background-color: $cadmin-primary-l3, + border: 1px solid $cadmin-primary, + color: $cadmin-dark-l2, ), disabled: ( background-color: transparent, @@ -247,9 +246,6 @@ $cadmin-treeview-dark: map-deep-merge( ( component-expander: ( color: $cadmin-secondary-l1, - hover: ( - color: $cadmin-primary-l1, - ), ), treeview-link: ( color: $cadmin-secondary-l1, @@ -260,11 +256,12 @@ $cadmin-treeview-dark: map-deep-merge( ), ), hover: ( - background-color: rgba($cadmin-white, 0.04), + border: 1px solid $cadmin-secondary-l0, ), active-class: ( - background-color: rgba($cadmin-white, 0.06), - color: $cadmin-white, + background-color: $cadmin-dark-l2, + border: 1px solid $cadmin-primary, + color: $cadmin-primary-l3, ), disabled: ( background-color: transparent, diff --git a/packages/clay-css/src/scss/variables/_treeview.scss b/packages/clay-css/src/scss/variables/_treeview.scss index c1fe9a8f0a..bacbeb2af8 100644 --- a/packages/clay-css/src/scss/variables/_treeview.scss +++ b/packages/clay-css/src/scss/variables/_treeview.scss @@ -128,6 +128,7 @@ $treeview: map-merge( ), ), component-icon: ( + color: $secondary, display: inline-block, font-size: 16px, height: auto, @@ -199,9 +200,6 @@ $treeview-light: map-deep-merge( ( component-expander: ( color: $secondary, - hover: ( - color: $primary, - ), disabled: ( color: $secondary, opacity: 0.5, @@ -219,16 +217,17 @@ $treeview-light: map-deep-merge( ), ), hover: ( - background-color: $gray-100, - color: $gray-900, + border: 1px solid $secondary-l0, ), active: ( - background-color: $gray-200, - color: $gray-900, + background-color: $primary-l3, + border: 1px solid $primary, + color: $dark-l2, ), active-class: ( - background-color: $gray-200, - color: $gray-900, + background-color: $primary-l3, + border: 1px solid $primary, + color: $dark-l2, ), disabled: ( background-color: transparent, @@ -248,9 +247,6 @@ $treeview-dark: map-deep-merge( ( component-expander: ( color: $secondary-l1, - hover: ( - color: $primary-l1, - ), disabled: ( color: $secondary-l1, opacity: 0.5, @@ -265,11 +261,12 @@ $treeview-dark: map-deep-merge( ), ), hover: ( - background-color: rgba($white, 0.04), + border: 1px solid $secondary-l0, ), active-class: ( - background-color: rgba($white, 0.06), - color: $white, + background-color: $dark-l2, + border: 1px solid $primary, + color: $primary-l3, ), disabled: ( background-color: transparent, From 4e7f7734d26439da05a4b6526cb2b93a5aae29cb Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Wed, 22 May 2024 16:01:15 -0300 Subject: [PATCH 2/3] refactor(@clayui/treeview): LPD-19473 Handle with focus on active class --- .../src/scss/cadmin/variables/_treeview.scss | 17 +++++++++++++---- .../clay-css/src/scss/variables/_treeview.scss | 17 +++++++++++++---- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss index deee98dd02..94dd48d12b 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss @@ -224,9 +224,11 @@ $cadmin-treeview-light: map-deep-merge( color: $cadmin-dark-l2, ), active-class: ( - background-color: $cadmin-primary-l3, - border: 1px solid $cadmin-primary, - color: $cadmin-dark-l2, + focus: ( + background-color: $cadmin-primary-l3, + border: 1px solid $cadmin-primary, + color: $cadmin-dark-l2, + ), ), disabled: ( background-color: transparent, @@ -258,11 +260,18 @@ $cadmin-treeview-dark: map-deep-merge( hover: ( border: 1px solid $cadmin-secondary-l0, ), - active-class: ( + active: ( background-color: $cadmin-dark-l2, border: 1px solid $cadmin-primary, color: $cadmin-primary-l3, ), + active-class: ( + focus: ( + background-color: $cadmin-dark-l2, + border: 1px solid $cadmin-primary, + color: $cadmin-primary-l3, + ), + ), disabled: ( background-color: transparent, color: rgba($cadmin-secondary-l1, 0.5), diff --git a/packages/clay-css/src/scss/variables/_treeview.scss b/packages/clay-css/src/scss/variables/_treeview.scss index bacbeb2af8..1ab5f25aa1 100644 --- a/packages/clay-css/src/scss/variables/_treeview.scss +++ b/packages/clay-css/src/scss/variables/_treeview.scss @@ -225,9 +225,11 @@ $treeview-light: map-deep-merge( color: $dark-l2, ), active-class: ( - background-color: $primary-l3, - border: 1px solid $primary, - color: $dark-l2, + focus: ( + background-color: $primary-l3, + border: 1px solid $primary, + color: $dark-l2, + ), ), disabled: ( background-color: transparent, @@ -263,11 +265,18 @@ $treeview-dark: map-deep-merge( hover: ( border: 1px solid $secondary-l0, ), - active-class: ( + active: ( background-color: $dark-l2, border: 1px solid $primary, color: $primary-l3, ), + active-class: ( + focus: ( + background-color: $dark-l2, + border: 1px solid $primary, + color: $primary-l3, + ), + ), disabled: ( background-color: transparent, color: rgba($secondary-l1, 0.5), From 05194335e5c9f7af8144971166733b763c86722d Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 22 May 2024 16:05:07 -0700 Subject: [PATCH 3/3] refactor(@clayui/css): Treeview use box-shadow instead of border to keep state changes looking consistent --- .../src/scss/cadmin/variables/_treeview.scss | 44 +++++++++++++------ .../src/scss/variables/_treeview.scss | 44 +++++++++++++------ 2 files changed, 60 insertions(+), 28 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss index 94dd48d12b..fa43f7ddc4 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss @@ -216,18 +216,25 @@ $cadmin-treeview-light: map-deep-merge( ), ), hover: ( - border: 1px solid $cadmin-secondary-l0, + box-shadow: inset 0 0 0 1px $cadmin-secondary-l0, + ), + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, ), active: ( background-color: $cadmin-primary-l3, - border: 1px solid $cadmin-primary, + box-shadow: inset 0 0 0 1px $cadmin-primary, color: $cadmin-dark-l2, + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, + ), ), active-class: ( + background-color: $cadmin-primary-l3, + box-shadow: inset 0 0 0 1px $cadmin-primary, + color: $cadmin-dark-l2, focus: ( - background-color: $cadmin-primary-l3, - border: 1px solid $cadmin-primary, - color: $cadmin-dark-l2, + box-shadow: $cadmin-component-focus-inset-box-shadow, ), ), disabled: ( @@ -235,8 +242,9 @@ $cadmin-treeview-light: map-deep-merge( color: rgba($cadmin-gray-600, 0.5), ), show: ( - background-color: null, - color: null, + background-color: c-unset, + box-shadow: c-unset, + color: c-unset, ), ), ), @@ -258,18 +266,25 @@ $cadmin-treeview-dark: map-deep-merge( ), ), hover: ( - border: 1px solid $cadmin-secondary-l0, + box-shadow: inset 0 0 0 1px $cadmin-secondary-l0, + ), + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, ), active: ( background-color: $cadmin-dark-l2, - border: 1px solid $cadmin-primary, + box-shadow: inset 0 0 0 1px $cadmin-primary, color: $cadmin-primary-l3, + focus: ( + box-shadow: $cadmin-component-focus-inset-box-shadow, + ), ), active-class: ( + background-color: $cadmin-dark-l2, + box-shadow: inset 0 0 0 1px $cadmin-primary, + color: $cadmin-primary-l3, focus: ( - background-color: $cadmin-dark-l2, - border: 1px solid $cadmin-primary, - color: $cadmin-primary-l3, + box-shadow: $cadmin-component-focus-inset-box-shadow, ), ), disabled: ( @@ -277,8 +292,9 @@ $cadmin-treeview-dark: map-deep-merge( color: rgba($cadmin-secondary-l1, 0.5), ), show: ( - background-color: null, - color: null, + background-color: c-unset, + box-shadow: c-unset, + color: c-unset, ), ), component-action: ( diff --git a/packages/clay-css/src/scss/variables/_treeview.scss b/packages/clay-css/src/scss/variables/_treeview.scss index 1ab5f25aa1..bb88fec61a 100644 --- a/packages/clay-css/src/scss/variables/_treeview.scss +++ b/packages/clay-css/src/scss/variables/_treeview.scss @@ -217,18 +217,25 @@ $treeview-light: map-deep-merge( ), ), hover: ( - border: 1px solid $secondary-l0, + box-shadow: inset 0 0 0 1px $secondary-l0, + ), + focus: ( + box-shadow: $component-focus-inset-box-shadow, ), active: ( background-color: $primary-l3, - border: 1px solid $primary, + box-shadow: inset 0 0 0 1px $primary, color: $dark-l2, + focus: ( + box-shadow: $component-focus-inset-box-shadow, + ), ), active-class: ( + background-color: $primary-l3, + box-shadow: inset 0 0 0 1px $primary, + color: $dark-l2, focus: ( - background-color: $primary-l3, - border: 1px solid $primary, - color: $dark-l2, + box-shadow: $component-focus-inset-box-shadow, ), ), disabled: ( @@ -236,8 +243,9 @@ $treeview-light: map-deep-merge( color: rgba($gray-600, 0.5), ), show: ( - background-color: null, - color: null, + background-color: c-unset, + box-shadow: c-unset, + color: c-unset, ), ), ), @@ -263,18 +271,25 @@ $treeview-dark: map-deep-merge( ), ), hover: ( - border: 1px solid $secondary-l0, + box-shadow: inset 0 0 0 1px $secondary-l0, + ), + focus: ( + box-shadow: $component-focus-inset-box-shadow, ), active: ( background-color: $dark-l2, - border: 1px solid $primary, + box-shadow: inset 0 0 0 1px $primary, color: $primary-l3, + focus: ( + box-shadow: $component-focus-inset-box-shadow, + ), ), active-class: ( + background-color: $dark-l2, + box-shadow: inset 0 0 0 1px $primary, + color: $primary-l3, focus: ( - background-color: $dark-l2, - border: 1px solid $primary, - color: $primary-l3, + box-shadow: $component-focus-inset-box-shadow, ), ), disabled: ( @@ -282,8 +297,9 @@ $treeview-dark: map-deep-merge( color: rgba($secondary-l1, 0.5), ), show: ( - background-color: null, - color: null, + background-color: c-unset, + box-shadow: c-unset, + color: c-unset, ), ), component-action: (