From 8d2f580d2cbd61543b073e84ab72d4c51b518c7f Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Fri, 4 Nov 2022 10:33:54 -0700
Subject: [PATCH 1/2] feat(List): Clockface 4 Updates)

---
 src/Components/Dropdowns/Dropdown.scss |  2 +-
 src/Components/List/List.scss          | 11 +++++++----
 src/Components/List/ListIndicator.scss | 10 +++++-----
 src/Styles/variables.scss              |  6 ++++++
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss
index ff50f89d..36d31ffa 100644
--- a/src/Components/Dropdowns/Dropdown.scss
+++ b/src/Components/Dropdowns/Dropdown.scss
@@ -305,7 +305,7 @@ $dropdown-item--padding-v: $cf-space-2xs;
 
   .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) {
     background-color: #2a2649;
-    border: 1px $cf-lavender solid;
+    border: $cf-item-selected-border;
     border-radius: $cf-border;
   }
 }
diff --git a/src/Components/List/List.scss b/src/Components/List/List.scss
index 69c1ca88..b8d5a0fb 100644
--- a/src/Components/List/List.scss
+++ b/src/Components/List/List.scss
@@ -5,16 +5,17 @@ $list-item--text-opacity: 0.666;
 
 $list-item--divider-color--light: $cf-grey-25;
 $list-item--divider-text--light: rgba($g20-white, 0.4);
-$list-item--background-light: $c-pool;
+$list-item--background-light: $cf-dark-lavender;
 
 $list-item--divider-color--dark: $cf-grey-55;
 $list-item--divider-text--dark: rgba($g0-obsidian, 0.4);
-$list-item--background-dark: $c-pool;
+$list-item--background-dark: $cf-dark-lavender;
 
 .cf-list {
   overflow: hidden;
   border-radius: $cf-radius;
   padding: $cf-border;
+  background: $cf-grey-2;
 
   .cf-dapper-scrollbars--track-y {
     z-index: 2;
@@ -85,19 +86,21 @@ $list-item--background-dark: $c-pool;
 
 .cf-list-item:hover .cf-list-item--highlight,
 .cf-list-item:focus .cf-list-item--highlight {
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-3;
 }
 
 .cf-list-item__active .cf-list-item--highlight__light,
 .cf-list-item__active:hover .cf-list-item--highlight__light,
 .cf-list-item__active:focus .cf-list-item--highlight__light {
   background-color: $list-item--background-light;
+  border: $cf-item-selected-border;
 }
 
 .cf-list-item__active .cf-list-item--highlight__dark,
 .cf-list-item__active:hover .cf-list-item--highlight__dark,
 .cf-list-item__active:focus .cf-list-item--highlight__dark {
   background-color: $list-item--background-dark;
+  border: $cf-item-selected-border;
 }
 
 .cf-list-item__light {
@@ -146,7 +149,7 @@ $list-item--background-dark: $c-pool;
 */
 
 .cf-list-divider {
-  color: $cf-grey-35;
+  color: $cf-grey-5;
   border-radius: $cf-radius-sm;
   border-bottom: $cf-border solid $list-item--divider-color--light;
   white-space: nowrap;
diff --git a/src/Components/List/ListIndicator.scss b/src/Components/List/ListIndicator.scss
index 5c591566..21d01754 100644
--- a/src/Components/List/ListIndicator.scss
+++ b/src/Components/List/ListIndicator.scss
@@ -18,20 +18,20 @@
 
 .cf-list-indicator__dot {
   border-radius: 50%;
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-4;
 
   .cf-list-indicator--element {
     border-radius: 50%;
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.25, 0.25);
     transition: transform $cf-transition-default, opacity $cf-transition-default;
-    background-color: $g20-white;
+    background-color: $cf-white;
     width: 0.5em;
     height: 0.5em;
   }
 
   &.cf-list-indicator__selected {
-    background-color: $cf-grey-35;
+    background-color: $cf-lavender;
 
     .cf-list-indicator--element {
       transform: translate(-50%, -50%) scale(1, 1);
@@ -47,7 +47,7 @@
 
 .cf-list-indicator__checkbox {
   border-radius: $cf-border;
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-4;
 
   .cf-list-indicator--element {
     width: 0.5em;
@@ -60,7 +60,7 @@
   }
 
   &.cf-list-indicator__selected {
-    background-color: $cf-grey-25;
+    background-color: $cf-lavender;
 
     .cf-list-indicator--element {
       opacity: 1;
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a4abf7b5..53ee93e8 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -112,6 +112,12 @@ $c-daisy: #fff6b8;
 $c-magenta: #bf2fe5;
 $c-galaxy: #9394ff;
 
+
+/*
+  List item variables
+*/
+$cf-item-selected-border: 1px $cf-lavender solid;
+
 /*
   State change variables
 */

From ed003bb4cb00d823a025f3799d1aed7003032cf2 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Fri, 4 Nov 2022 10:41:10 -0700
Subject: [PATCH 2/2] chore: prettier

---
 src/Styles/variables.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index 53ee93e8..61c9d60d 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -112,7 +112,6 @@ $c-daisy: #fff6b8;
 $c-magenta: #bf2fe5;
 $c-galaxy: #9394ff;
 
-
 /*
   List item variables
 */