Merge pull request #5820 from ilzamcmed/LPD-19473

refactor(@clayui/treeview): LPD-19473 Improve TreeView Contrast on Active and Hover states
liferay · May 23, 2024 · 5fe7ccf · 5fe7ccf
2 parents 6b1fc77 + 0519433
commit 5fe7ccf
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 38 deletions.
diff --git 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,24 +216,35 @@ $cadmin-treeview-light: map-deep-merge(
 				),
 			),
 			hover: (
-				background-color: $cadmin-gray-100,
-				color: $cadmin-gray-900,
+				box-shadow: inset 0 0 0 1px $cadmin-secondary-l0,
+			),
+			focus: (
+				box-shadow: $cadmin-component-focus-inset-box-shadow,
 			),
 			active: (
-				background-color: $cadmin-gray-200,
-				color: $cadmin-gray-900,
+				background-color: $cadmin-primary-l3,
+				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-gray-200,
-				color: $cadmin-gray-900,
+				background-color: $cadmin-primary-l3,
+				box-shadow: inset 0 0 0 1px $cadmin-primary,
+				color: $cadmin-dark-l2,
+				focus: (
+					box-shadow: $cadmin-component-focus-inset-box-shadow,
+				),
 			),
 			disabled: (
 				background-color: transparent,
 				color: rgba($cadmin-gray-600, 0.5),
 			),
 			show: (
-				background-color: null,
-				color: null,
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: c-unset,
 			),
 		),
 	),
@@ -247,9 +256,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,19 +266,35 @@ $cadmin-treeview-dark: map-deep-merge(
 				),
 			),
 			hover: (
-				background-color: rgba($cadmin-white, 0.04),
+				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,
+				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: rgba($cadmin-white, 0.06),
-				color: $cadmin-white,
+				background-color: $cadmin-dark-l2,
+				box-shadow: inset 0 0 0 1px $cadmin-primary,
+				color: $cadmin-primary-l3,
+				focus: (
+					box-shadow: $cadmin-component-focus-inset-box-shadow,
+				),
 			),
 			disabled: (
 				background-color: transparent,
 				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
@@ -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,24 +217,35 @@ $treeview-light: map-deep-merge(
 				),
 			),
 			hover: (
-				background-color: $gray-100,
-				color: $gray-900,
+				box-shadow: inset 0 0 0 1px $secondary-l0,
+			),
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
 			),
 			active: (
-				background-color: $gray-200,
-				color: $gray-900,
+				background-color: $primary-l3,
+				box-shadow: inset 0 0 0 1px $primary,
+				color: $dark-l2,
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
 			),
 			active-class: (
-				background-color: $gray-200,
-				color: $gray-900,
+				background-color: $primary-l3,
+				box-shadow: inset 0 0 0 1px $primary,
+				color: $dark-l2,
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
 			),
 			disabled: (
 				background-color: transparent,
 				color: rgba($gray-600, 0.5),
 			),
 			show: (
-				background-color: null,
-				color: null,
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: c-unset,
 			),
 		),
 	),
@@ -248,9 +257,6 @@ $treeview-dark: map-deep-merge(
 	(
 		component-expander: (
 			color: $secondary-l1,
-			hover: (
-				color: $primary-l1,
-			),
 			disabled: (
 				color: $secondary-l1,
 				opacity: 0.5,
@@ -265,19 +271,35 @@ $treeview-dark: map-deep-merge(
 				),
 			),
 			hover: (
-				background-color: rgba($white, 0.04),
+				box-shadow: inset 0 0 0 1px $secondary-l0,
+			),
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
+			),
+			active: (
+				background-color: $dark-l2,
+				box-shadow: inset 0 0 0 1px $primary,
+				color: $primary-l3,
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
 			),
 			active-class: (
-				background-color: rgba($white, 0.06),
-				color: $white,
+				background-color: $dark-l2,
+				box-shadow: inset 0 0 0 1px $primary,
+				color: $primary-l3,
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
 			),
 			disabled: (
 				background-color: transparent,
 				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: (