Merge "Lock screen ui clean up" into udc-dev
diff --git a/res/drawable/carousel_item_card_background.xml b/res/drawable/carousel_item_card_background.xml
new file mode 100644
index 0000000..946d279
--- /dev/null
+++ b/res/drawable/carousel_item_card_background.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     Copyright (C) 2023 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/color_surface" />
+    <corners android:radius="16dp" />
+</shape>
\ No newline at end of file
diff --git a/res/drawable/ic_settings.xml b/res/drawable/ic_settings.xml
index 3b9076e..b4341a6 100644
--- a/res/drawable/ic_settings.xml
+++ b/res/drawable/ic_settings.xml
@@ -19,7 +19,7 @@
     android:viewportWidth="960"
     android:viewportHeight="960"
     android:tintMode="multiply"
-    android:tint="@color/color_accent_primary">
+    android:tint="@color/text_color_primary">
     <path
         android:fillColor="@android:color/white"
         android:pathData="M370,880L354,752Q341,747 329.5,740Q318,733 307,725L188,775L78,585L181,507Q180,500 180,493.5Q180,487 180,480Q180,473 180,466.5Q180,460 181,453L78,375L188,185L307,235Q318,227 330,220Q342,213 354,208L370,80L590,80L606,208Q619,213 630.5,220Q642,227 653,235L772,185L882,375L779,453Q780,460 780,466.5Q780,473 780,480Q780,487 780,493.5Q780,500 778,507L881,585L771,775L653,725Q642,733 630,740Q618,747 606,752L590,880L370,880ZM440,800L519,800L533,694Q564,686 590.5,670.5Q617,655 639,633L738,674L777,606L691,541Q696,527 698,511.5Q700,496 700,480Q700,464 698,448.5Q696,433 691,419L777,354L738,286L639,328Q617,305 590.5,289.5Q564,274 533,266L520,160L441,160L427,266Q396,274 369.5,289.5Q343,305 321,327L222,286L183,354L269,418Q264,433 262,448Q260,463 260,480Q260,496 262,511Q264,526 269,541L183,606L222,674L321,632Q343,655 369.5,670.5Q396,686 427,694L440,800ZM482,620Q540,620 581,579Q622,538 622,480Q622,422 581,381Q540,340 482,340Q423,340 382.5,381Q342,422 342,480Q342,538 382.5,579Q423,620 482,620ZM480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480Z"/>
diff --git a/res/layout/clock_carousel.xml b/res/layout/clock_carousel.xml
index dbeb4dd..25af031 100644
--- a/res/layout/clock_carousel.xml
+++ b/res/layout/clock_carousel.xml
@@ -22,7 +22,7 @@
     android:layout_height="match_parent"
     app:layoutDescription="@xml/carousel_scene">
 
-    <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+    <FrameLayout
         android:id="@+id/item_view_0"
         android:layout_width="@dimen/clock_carousel_item_width"
         android:layout_height="@dimen/clock_carousel_item_height"
@@ -30,14 +30,28 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@+id/item_view_1"
         app:layout_constraintTop_toTopOf="parent">
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_gravity="center"
-            android:clipChildren="false" />
-    </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
 
-    <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+        <View
+            android:id="@+id/item_card_0"
+            android:layout_width="@dimen/clock_carousel_item_card_width"
+            android:layout_height="@dimen/clock_carousel_item_card_height"
+            android:layout_gravity="center"
+            android:background="@drawable/carousel_item_card_background"/>
+
+        <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+            android:id="@+id/clock_scale_view_0"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <FrameLayout
+                android:id="@+id/clock_host_view_0"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:clipChildren="false" />
+        </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+    </FrameLayout>
+
+    <FrameLayout
         android:id="@+id/item_view_1"
         android:layout_width="@dimen/clock_carousel_item_width"
         android:layout_height="@dimen/clock_carousel_item_height"
@@ -45,14 +59,28 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@+id/item_view_2"
         app:layout_constraintTop_toTopOf="parent" >
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_gravity="center"
-            android:clipChildren="false"/>
-    </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
 
-    <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+        <View
+            android:id="@+id/item_card_1"
+            android:layout_width="@dimen/clock_carousel_item_card_width"
+            android:layout_height="@dimen/clock_carousel_item_card_height"
+            android:layout_gravity="center"
+            android:background="@drawable/carousel_item_card_background"/>
+
+        <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+            android:id="@+id/clock_scale_view_1"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <FrameLayout
+                android:id="@+id/clock_host_view_1"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:clipChildren="false"/>
+        </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+    </FrameLayout>
+
+    <FrameLayout
         android:id="@+id/item_view_2"
         android:layout_width="@dimen/clock_carousel_item_width"
         android:layout_height="@dimen/clock_carousel_item_height"
@@ -61,42 +89,85 @@
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_gravity="center"
-            android:clipChildren="false"/>
-    </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
 
-    <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+        <View
+            android:id="@+id/item_card_2"
+            android:layout_width="@dimen/clock_carousel_item_card_width"
+            android:layout_height="@dimen/clock_carousel_item_card_height"
+            android:alpha="0.0"
+            android:layout_gravity="center"
+            android:background="@drawable/carousel_item_card_background"/>
+
+        <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+            android:id="@+id/clock_scale_view_2"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <FrameLayout
+                android:id="@+id/clock_host_view_2"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:clipChildren="false"/>
+        </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+    </FrameLayout>
+
+    <FrameLayout
         android:id="@+id/item_view_3"
         android:layout_width="@dimen/clock_carousel_item_width"
         android:layout_height="@dimen/clock_carousel_item_height"
         android:layout_marginStart="@dimen/clock_carousel_item_margin"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@+id/item_view_2"
-        app:layout_constraintTop_toTopOf="parent" >
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_gravity="center"
-            android:clipChildren="false"/>
-    </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+        app:layout_constraintTop_toTopOf="parent">
 
-    <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+        <View
+            android:id="@+id/item_card_3"
+            android:layout_width="@dimen/clock_carousel_item_card_width"
+            android:layout_height="@dimen/clock_carousel_item_card_height"
+            android:layout_gravity="center"
+            android:background="@drawable/carousel_item_card_background"/>
+
+        <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+            android:id="@+id/clock_scale_view_3"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <FrameLayout
+                android:id="@+id/clock_host_view_3"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:clipChildren="false"/>
+        </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+    </FrameLayout>
+
+    <FrameLayout
         android:id="@+id/item_view_4"
         android:layout_width="@dimen/clock_carousel_item_width"
         android:layout_height="@dimen/clock_carousel_item_height"
         android:layout_marginStart="@dimen/clock_carousel_item_margin"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@+id/item_view_3"
-        app:layout_constraintTop_toTopOf="parent" >
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <View
+            android:id="@+id/item_card_4"
+            android:layout_width="@dimen/clock_carousel_item_card_width"
+            android:layout_height="@dimen/clock_carousel_item_card_height"
             android:layout_gravity="center"
-            android:clipChildren="false" />
-    </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+            android:background="@drawable/carousel_item_card_background"/>
+
+        <com.android.wallpaper.picker.DisplayAspectRatioFrameLayout
+            android:id="@+id/clock_scale_view_4"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <FrameLayout
+                android:id="@+id/clock_host_view_4"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:clipChildren="false" />
+        </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
+    </FrameLayout>
 
     <androidx.constraintlayout.helper.widget.Carousel
         android:id="@+id/carousel"
diff --git a/res/layout/clock_color_and_size_button.xml b/res/layout/clock_color_and_size_button.xml
index ff5a519..d54c33d 100644
--- a/res/layout/clock_color_and_size_button.xml
+++ b/res/layout/clock_color_and_size_button.xml
@@ -14,11 +14,13 @@
         android:layout_height="@dimen/clock_color_size_button_icon_size"
         android:src="@drawable/ic_settings"
         android:importantForAccessibility="no"
+        android:drawableTint="@color/text_color_primary"
         android:layout_marginEnd="@dimen/clock_color_size_button_icon_margin_end"/>
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:textColor="@color/color_accent_primary"
+        android:textColor="@color/text_color_primary"
         android:text="@string/clock_color_and_size_title" />
+
 </LinearLayout>
\ No newline at end of file
diff --git a/res/layout/clock_color_option.xml b/res/layout/clock_color_option.xml
new file mode 100644
index 0000000..4203a39
--- /dev/null
+++ b/res/layout/clock_color_option.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+     Copyright (C) 2023 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<!-- Content description is set programmatically on the parent FrameLayout -->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="@dimen/option_item_size"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:clipChildren="false">
+    <FrameLayout
+        android:id="@+id/icon_container"
+        android:layout_width="@dimen/option_item_size"
+        android:layout_height="@dimen/option_item_size"
+        android:clipChildren="false">
+
+        <ImageView
+            android:id="@id/selection_border"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@drawable/option_item_border"
+            android:alpha="0"
+            android:importantForAccessibility="no" />
+
+        <ImageView
+            android:id="@id/background"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@drawable/option_item_background"
+            android:importantForAccessibility="no" />
+
+        <FrameLayout
+            android:id="@id/foreground"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            <ImageView
+                android:id="@+id/color_preview_0"
+                android:layout_width="@dimen/component_color_chip_small_radius_default2"
+                android:layout_height="@dimen/component_color_chip_small_radius_default2"
+                android:layout_gravity="center"
+                android:layout_marginRight="@dimen/color_seed_chip_margin2"
+                android:layout_marginBottom="@dimen/color_seed_chip_margin2"
+                android:src="@drawable/color_chip_seed_filled0"
+                android:importantForAccessibility="no"/>
+
+            <ImageView
+                android:id="@+id/color_preview_1"
+                android:layout_width="@dimen/component_color_chip_small_radius_default2"
+                android:layout_height="@dimen/component_color_chip_small_radius_default2"
+                android:layout_gravity="center"
+                android:layout_marginLeft="@dimen/color_seed_chip_margin2"
+                android:layout_marginBottom="@dimen/color_seed_chip_margin2"
+                android:src="@drawable/color_chip_seed_filled2"
+                android:importantForAccessibility="no"/>
+
+            <ImageView
+                android:id="@+id/color_preview_2"
+                android:layout_width="@dimen/component_color_chip_small_radius_default2"
+                android:layout_height="@dimen/component_color_chip_small_radius_default2"
+                android:layout_gravity="center"
+                android:layout_marginRight="@dimen/color_seed_chip_margin2"
+                android:layout_marginTop="@dimen/color_seed_chip_margin2"
+                android:src="@drawable/color_chip_seed_filled1"
+                android:importantForAccessibility="no"/>
+
+            <ImageView
+                android:id="@+id/color_preview_3"
+                android:layout_width="@dimen/component_color_chip_small_radius_default2"
+                android:layout_height="@dimen/component_color_chip_small_radius_default2"
+                android:layout_gravity="center"
+                android:layout_marginLeft="@dimen/color_seed_chip_margin2"
+                android:layout_marginTop="@dimen/color_seed_chip_margin2"
+                android:src="@drawable/color_chip_seed_filled3"
+                android:importantForAccessibility="no" />
+        </FrameLayout>
+    </FrameLayout>
+
+    <TextView
+        android:id="@+id/text"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/option_bottom_margin"
+        android:textColor="@color/text_color_primary"
+        android:visibility="invisible"
+        android:gravity="center"
+        android:text="Placeholder for stable size calculation, please do not remove."
+        tools:ignore="HardcodedText" />
+</LinearLayout>
+
diff --git a/res/layout/clock_section_view.xml b/res/layout/clock_section_view.xml
index 31f08fc..0632601 100644
--- a/res/layout/clock_section_view.xml
+++ b/res/layout/clock_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
diff --git a/res/layout/dark_mode_section_view.xml b/res/layout/dark_mode_section_view.xml
index e1b4b81..27550e2 100644
--- a/res/layout/dark_mode_section_view.xml
+++ b/res/layout/dark_mode_section_view.xml
@@ -22,7 +22,7 @@
     android:clickable="true"
     android:gravity="center_vertical"
     android:orientation="horizontal"
-    android:paddingVertical="@dimen/section_vertical_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding">
 
     <TextView
diff --git a/res/layout/fragment_clock_settings.xml b/res/layout/fragment_clock_settings.xml
index 58232a7..d52ebdf 100644
--- a/res/layout/fragment_clock_settings.xml
+++ b/res/layout/fragment_clock_settings.xml
@@ -18,7 +18,9 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical">
+    android:orientation="vertical"
+    android:clipChildren="false">
+
     <FrameLayout
         android:id="@+id/section_header_container"
         android:layout_width="match_parent"
@@ -31,13 +33,13 @@
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1"
-        android:paddingTop="36dp"
+        android:paddingTop="20dp"
         android:paddingBottom="40dp">
 
         <include
             android:id="@+id/lock_preview"
             layout="@layout/wallpaper_preview_card"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_gravity="center" />
 
@@ -48,7 +50,6 @@
             android:layout_gravity="center" />
     </com.android.wallpaper.picker.DisplayAspectRatioFrameLayout>
 
-
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -123,7 +124,7 @@
                     without changing its size after the content is loaded into the RecyclerView.
                     -->
                     <include
-                        layout="@layout/color_option_2"
+                        layout="@layout/clock_color_option"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:visibility="invisible" />
diff --git a/res/layout/grid_section_view.xml b/res/layout/grid_section_view.xml
index ee7b76f..a90ee64 100644
--- a/res/layout/grid_section_view.xml
+++ b/res/layout/grid_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
diff --git a/res/layout/keyguard_quick_affordance_section_view.xml b/res/layout/keyguard_quick_affordance_section_view.xml
index 458f659..7c5babb 100644
--- a/res/layout/keyguard_quick_affordance_section_view.xml
+++ b/res/layout/keyguard_quick_affordance_section_view.xml
@@ -16,11 +16,11 @@
 -->
 <com.android.customization.picker.quickaffordance.ui.view.KeyguardQuickAffordanceSectionView
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_width="match_parent"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/option_section_vertical_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
@@ -28,7 +28,8 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:layout_gravity="center">
 
         <TextView
             android:layout_width="match_parent"
@@ -51,6 +52,7 @@
         android:importantForAccessibility="noHideDescendants"
         android:gravity="center"
         android:divider="@drawable/horizontal_divider_14dp"
+        android:layout_gravity="center"
         android:showDividers="middle">
 
         <ImageView
diff --git a/res/layout/more_settings_section_view.xml b/res/layout/more_settings_section_view.xml
index b60bb45..5745a27 100644
--- a/res/layout/more_settings_section_view.xml
+++ b/res/layout/more_settings_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="vertical">
 
diff --git a/res/layout/notification_section.xml b/res/layout/notification_section.xml
index 3975c9e..c20ffbf 100644
--- a/res/layout/notification_section.xml
+++ b/res/layout/notification_section.xml
@@ -22,7 +22,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal"
     android:gravity="center_vertical">
@@ -31,6 +31,7 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
+        android:layout_gravity="center"
         android:orientation="vertical">
 
         <TextView
@@ -45,6 +46,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:clickable="false"
+        android:layout_gravity="center"
         style="@style/Switch.SettingsLib"
         tools:ignore="UseSwitchCompatOrMaterialXml" />
 
diff --git a/res/layout/themed_icon_section_view.xml b/res/layout/themed_icon_section_view.xml
index 95be207..84ef3e8 100644
--- a/res/layout/themed_icon_section_view.xml
+++ b/res/layout/themed_icon_section_view.xml
@@ -22,7 +22,7 @@
     android:clickable="true"
     android:orientation="vertical"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
-    android:paddingVertical="@dimen/section_vertical_padding">
+    android:paddingVertical="@dimen/section_padding">
 
     <LinearLayout
         android:layout_width="match_parent"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index cb4876a..18b38c8 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -33,7 +33,7 @@
     <dimen name="options_container_width">0dp</dimen>
     <dimen name="option_bottom_margin">8dp</dimen>
     <dimen name="option_padding_horizontal">2dp</dimen>
-    <dimen name="option_tile_width">82dp</dimen>
+    <dimen name="option_tile_width">80dp</dimen>
     <dimen name="option_tile_radius">20dp</dimen>
     <dimen name="option_tile_margin_horizontal">6dp</dimen>
     <dimen name="option_tile_padding_vertical">12dp</dimen>
@@ -160,16 +160,14 @@
     <dimen name="clock_carousel_item_height">380dp</dimen>
     <dimen name="clock_carousel_item_margin">16dp</dimen>
     <dimen name="clock_carousel_guideline_margin">140dp</dimen>
-    <!-- Scale of the carousel items that are not selected and at the side -->
-    <dimen name="clock_carousel_scale" format="float">0.5</dimen>
-    <!-- Alpha of the carousel items that are not selected and at the side -->
-    <dimen name="clock_carousel_alpha" format="float">0.4</dimen>
+    <dimen name="clock_carousel_item_card_width">100dp</dimen>
+    <dimen name="clock_carousel_item_card_height">108dp</dimen>
 
     <!-- Clock color and size button -->
     <dimen name="clock_color_size_button_min_height">32dp</dimen>
     <dimen name="clock_color_size_button_horizontal_padding">12dp</dimen>
     <dimen name="clock_color_size_button_vertical_padding">6dp</dimen>
     <dimen name="clock_color_size_button_corner_radius">16dp</dimen>
-    <dimen name="clock_color_size_button_icon_size">24dp</dimen>
-    <dimen name="clock_color_size_button_icon_margin_end">8dp</dimen>
+    <dimen name="clock_color_size_button_icon_size">20dp</dimen>
+    <dimen name="clock_color_size_button_icon_margin_end">12dp</dimen>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 3991b65..87aae10 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -47,6 +47,7 @@
         <item name="colorAccent">@color/accent_color</item>
         <item name="colorSurface">@color/design_default_color_surface</item>
         <item name="colorOnSurface">@color/design_default_color_on_surface</item>
+        <item name="android:textAllCaps">false</item>
     </style>
 
     <!-- Snackbar margin -->
diff --git a/res/xml/carousel_scene.xml b/res/xml/carousel_scene.xml
index e26ee14..267f0a1 100644
--- a/res/xml/carousel_scene.xml
+++ b/res/xml/carousel_scene.xml
@@ -42,12 +42,10 @@
             android:id="@+id/item_view_0"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintEnd_toStartOf="@id/guideline_start"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_1"
             android:layout_width="@dimen/clock_carousel_item_width"
@@ -58,13 +56,11 @@
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_2"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintStart_toStartOf="@id/guideline_end"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -73,9 +69,6 @@
             android:id="@+id/item_view_3"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintStart_toEndOf="@+id/item_view_2"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -86,9 +79,6 @@
             android:id="@+id/item_view_0"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintEnd_toStartOf="@+id/item_view_1"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -97,12 +87,10 @@
             android:id="@+id/item_view_1"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintEnd_toStartOf="@id/guideline_start"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_2"
             android:layout_width="@dimen/clock_carousel_item_width"
@@ -113,13 +101,11 @@
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_3"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintStart_toStartOf="@id/guideline_end"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -128,9 +114,6 @@
             android:id="@+id/item_view_4"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintStart_toEndOf="@+id/item_view_3"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -141,9 +124,6 @@
             android:id="@+id/item_view_1"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintEnd_toStartOf="@+id/item_view_2"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
@@ -152,12 +132,10 @@
             android:id="@+id/item_view_2"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintEnd_toStartOf="@id/guideline_start"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_3"
             android:layout_width="@dimen/clock_carousel_item_width"
@@ -168,16 +146,13 @@
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
+
         <Constraint
             android:id="@+id/item_view_4"
             android:layout_width="@dimen/clock_carousel_item_width"
             android:layout_height="@dimen/clock_carousel_item_height"
-            android:scaleX="@dimen/clock_carousel_scale"
-            android:scaleY="@dimen/clock_carousel_scale"
-            android:alpha="@dimen/clock_carousel_alpha"
             motion:layout_constraintStart_toStartOf="@id/guideline_end"
             motion:layout_constraintTop_toTopOf="parent"
             motion:layout_constraintBottom_toBottomOf="parent" />
     </ConstraintSet>
-
 </MotionScene>
\ No newline at end of file
diff --git a/src/com/android/customization/model/color/ColorCustomizationManager.java b/src/com/android/customization/model/color/ColorCustomizationManager.java
index 29f6ba6..790c86f 100644
--- a/src/com/android/customization/model/color/ColorCustomizationManager.java
+++ b/src/com/android/customization/model/color/ColorCustomizationManager.java
@@ -181,7 +181,23 @@
         if (lockWallpaperColors != null && mLockWallpaperColors.equals(mHomeWallpaperColors)) {
             lockWallpaperColors = null;
         }
-        mProvider.fetch(callback, reload, mHomeWallpaperColors, lockWallpaperColors);
+        mProvider.fetch(callback, reload, mHomeWallpaperColors,
+                lockWallpaperColors,  /* shouldUseRevampedUi= */ false);
+    }
+
+    /**
+     * Fetch options function for the customization hub revamped UI
+     *
+     * TODO (b/276417460): refactor to reduce code repetition with the other fetch options function
+     */
+    public void fetchRevampedUIOptions(OptionsFetchedListener<ColorOption> callback,
+            boolean reload) {
+        WallpaperColors lockWallpaperColors = mLockWallpaperColors;
+        if (lockWallpaperColors != null && mLockWallpaperColors.equals(mHomeWallpaperColors)) {
+            lockWallpaperColors = null;
+        }
+        mProvider.fetch(callback, reload, mHomeWallpaperColors,
+                lockWallpaperColors,  /* shouldUseRevampedUi= */ true);
     }
 
     /**
diff --git a/src/com/android/customization/model/color/ColorOptionsProvider.java b/src/com/android/customization/model/color/ColorOptionsProvider.java
index 2803c7b..166b4da 100644
--- a/src/com/android/customization/model/color/ColorOptionsProvider.java
+++ b/src/com/android/customization/model/color/ColorOptionsProvider.java
@@ -70,8 +70,12 @@
      * @param homeWallpaperColors to get seed colors from
      * @param lockWallpaperColors WallpaperColors from the lockscreen wallpaper to get seeds from,
      *                            if different than homeWallpaperColors
+     * @param shouldUseRevampedUi fetches color options with new preview mappings for the revamped
+     *                            UI if set to true
      */
     void fetch(OptionsFetchedListener<ColorOption> callback, boolean reload,
             @Nullable WallpaperColors homeWallpaperColors,
-            @Nullable WallpaperColors lockWallpaperColors);
+            @Nullable WallpaperColors lockWallpaperColors,
+            boolean shouldUseRevampedUi
+    );
 }
diff --git a/src/com/android/customization/model/color/ColorProvider.kt b/src/com/android/customization/model/color/ColorProvider.kt
index f91ec6b..639a886 100644
--- a/src/com/android/customization/model/color/ColorProvider.kt
+++ b/src/com/android/customization/model/color/ColorProvider.kt
@@ -87,7 +87,8 @@
         callback: OptionsFetchedListener<ColorOption>?,
         reload: Boolean,
         homeWallpaperColors: WallpaperColors?,
-        lockWallpaperColors: WallpaperColors?
+        lockWallpaperColors: WallpaperColors?,
+        shouldUseRevampedUi: Boolean
     ) {
         val wallpaperColorsChanged =
             this.homeWallpaperColors != homeWallpaperColors ||
@@ -103,7 +104,11 @@
                         loadPreset()
                     }
                     if (wallpaperColorsChanged || reload) {
-                        loadSeedColors(homeWallpaperColors, lockWallpaperColors)
+                        loadSeedColors(
+                            homeWallpaperColors,
+                            lockWallpaperColors,
+                            shouldUseRevampedUi
+                        )
                     }
                 } catch (e: Throwable) {
                     colorsAvailable = false
@@ -127,7 +132,8 @@
 
     private fun loadSeedColors(
         homeWallpaperColors: WallpaperColors?,
-        lockWallpaperColors: WallpaperColors?
+        lockWallpaperColors: WallpaperColors?,
+        shouldUseRevampedUi: Boolean,
     ) {
         if (homeWallpaperColors == null) return
 
@@ -147,7 +153,8 @@
                 colorsPerSource,
                 if (shouldLockColorsGoFirst) COLOR_SOURCE_LOCK else COLOR_SOURCE_HOME,
                 true,
-                bundles
+                bundles,
+                shouldUseRevampedUi
             )
             // Second half of the colors
             buildColorSeeds(
@@ -155,10 +162,18 @@
                 MAX_SEED_COLORS - bundles.size / styleSize,
                 if (shouldLockColorsGoFirst) COLOR_SOURCE_HOME else COLOR_SOURCE_LOCK,
                 false,
-                bundles
+                bundles,
+                shouldUseRevampedUi
             )
         } else {
-            buildColorSeeds(homeWallpaperColors, colorsPerSource, COLOR_SOURCE_HOME, true, bundles)
+            buildColorSeeds(
+                homeWallpaperColors,
+                colorsPerSource,
+                COLOR_SOURCE_HOME,
+                true,
+                bundles,
+                shouldUseRevampedUi
+            )
         }
 
         bundles.addAll(colorBundles?.filterNot { it is ColorSeedOption } ?: emptyList())
@@ -170,13 +185,14 @@
         maxColors: Int,
         source: String,
         containsDefault: Boolean,
-        bundles: MutableList<ColorOption>
+        bundles: MutableList<ColorOption>,
+        shouldUseRevampedUi: Boolean,
     ) {
         val seedColors = ColorScheme.getSeedColors(wallpaperColors)
         val defaultSeed = seedColors.first()
-        buildBundle(defaultSeed, 0, containsDefault, source, bundles)
+        buildBundle(defaultSeed, 0, containsDefault, source, bundles, shouldUseRevampedUi)
         for ((i, colorInt) in seedColors.drop(1).take(maxColors - 1).withIndex()) {
-            buildBundle(colorInt, i + 1, false, source, bundles)
+            buildBundle(colorInt, i + 1, false, source, bundles, shouldUseRevampedUi)
         }
     }
 
@@ -185,7 +201,8 @@
         i: Int,
         isDefault: Boolean,
         source: String,
-        bundles: MutableList<ColorOption>
+        bundles: MutableList<ColorOption>,
+        shouldUseRevampedUi: Boolean,
     ) {
         // TODO(b/202145216): Measure time cost in the loop.
         for (style in styleList) {
@@ -193,8 +210,14 @@
             val lightColorScheme = ColorScheme(colorInt, /* darkTheme= */ false, style)
             val darkColorScheme = ColorScheme(colorInt, /* darkTheme= */ true, style)
             builder
-                .setLightColors(lightColorScheme.getLightColorPreview())
-                .setDarkColors(darkColorScheme.getDarkColorPreview())
+                .setLightColors(
+                    if (shouldUseRevampedUi) lightColorScheme.getRevampedUILightColorPreview()
+                    else lightColorScheme.getLightColorPreview()
+                )
+                .setDarkColors(
+                    if (shouldUseRevampedUi) darkColorScheme.getRevampedUIDarkColorPreview()
+                    else darkColorScheme.getDarkColorPreview()
+                )
                 .addOverlayPackage(
                     OVERLAY_CATEGORY_SYSTEM_PALETTE,
                     if (isDefault) "" else toColorString(colorInt)
@@ -247,6 +270,30 @@
         return getLightColorPreview()
     }
 
+    @ColorInt
+    private fun ColorScheme.getRevampedUILightColorPreview(): IntArray {
+        return intArrayOf(
+            setAlphaComponent(this.accent1.s600, ALPHA_MASK),
+            setAlphaComponent(this.accent1.s600, ALPHA_MASK),
+            setAlphaComponent(this.accent2.s100, ALPHA_MASK),
+            ColorStateList.valueOf(this.accent3.s500).withLStar(59f).colors[0],
+        )
+    }
+
+    /**
+     * Returns the color for the dark theme version of the preview of a ColorScheme based on this
+     * order: |-------| | 0 | 1 | |---+---| | 2 | 3 | |-------|
+     */
+    @ColorInt
+    private fun ColorScheme.getRevampedUIDarkColorPreview(): IntArray {
+        return intArrayOf(
+            setAlphaComponent(this.accent1.s200, ALPHA_MASK),
+            setAlphaComponent(this.accent1.s200, ALPHA_MASK),
+            setAlphaComponent(this.accent2.s700, ALPHA_MASK),
+            setAlphaComponent(this.accent3.s100, ALPHA_MASK),
+        )
+    }
+
     private fun ColorScheme.getPresetColorPreview(seed: Int): IntArray {
         return when (this.style) {
             Style.FRUIT_SALAD -> intArrayOf(seed, this.accent1.s100)
diff --git a/src/com/android/customization/model/color/ColorSeedOption.java b/src/com/android/customization/model/color/ColorSeedOption.java
index ba61ed1..ed38049 100644
--- a/src/com/android/customization/model/color/ColorSeedOption.java
+++ b/src/com/android/customization/model/color/ColorSeedOption.java
@@ -100,6 +100,7 @@
         /**
          * Returns the colors to be applied corresponding with the current
          * configuration's UI mode.
+         * @param res resources to read to the UI mode configuration from
          * @return one of {@link #lightColors} or {@link #darkColors}
          */
         @ColorInt
@@ -108,6 +109,17 @@
                     == Configuration.UI_MODE_NIGHT_YES;
             return night ? darkColors : lightColors;
         }
+
+        /**
+         * Returns the preview colors based on whether dark theme or light theme colors are
+         * requested.
+         * @param darkTheme if true, returns dark theme colors, otherwise returns light theme colors
+         * @return one of {@link #lightColors} or {@link #darkColors}
+         */
+        @ColorInt
+        public int[] resolveColors(boolean darkTheme) {
+            return darkTheme ? darkColors : lightColors;
+        }
     }
 
     /**
diff --git a/src/com/android/customization/picker/clock/data/repository/ClockPickerRepositoryImpl.kt b/src/com/android/customization/picker/clock/data/repository/ClockPickerRepositoryImpl.kt
index 880a00b..9537365 100644
--- a/src/com/android/customization/picker/clock/data/repository/ClockPickerRepositoryImpl.kt
+++ b/src/com/android/customization/picker/clock/data/repository/ClockPickerRepositoryImpl.kt
@@ -137,6 +137,7 @@
         secureSettingsRepository
             .intSetting(
                 name = Settings.Secure.LOCKSCREEN_USE_DOUBLE_LINE_CLOCK,
+                defaultValue = DEFAULT_CLOCK_SIZE,
             )
             .map { setting -> setting == 1 }
             .map { isDynamic -> if (isDynamic) ClockSize.DYNAMIC else ClockSize.SMALL }
@@ -189,5 +190,8 @@
 
         // The color tone to apply to the selected color
         private const val KEY_METADATA_COLOR_TONE_PROGRESS = "metadataColorToneProgress"
+
+        // The default clock size is 1, which means dynamic
+        private const val DEFAULT_CLOCK_SIZE = 1
     }
 }
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
index cf80dc1..8d5924e 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
@@ -30,14 +30,6 @@
 import kotlinx.coroutines.launch
 
 object ClockCarouselViewBinder {
-    /**
-     * The binding is used by the view where there is an action executed from another view, e.g.
-     * toggling show/hide of the view that the binder is holding.
-     */
-    interface Binding {
-        fun show()
-        fun hide()
-    }
 
     @JvmStatic
     fun bind(
@@ -46,7 +38,7 @@
         viewModel: ClockCarouselViewModel,
         clockViewFactory: ClockViewFactory,
         lifecycleOwner: LifecycleOwner,
-    ): Binding {
+    ) {
         val singleClockHostView =
             singleClockView.requireViewById<FrameLayout>(R.id.single_clock_host_view)
         lifecycleOwner.lifecycleScope.launch {
@@ -67,6 +59,12 @@
                 }
 
                 launch {
+                    viewModel.allClockIds.collect {
+                        it.forEach { clockId -> clockViewFactory.updateTimeFormat(clockId) }
+                    }
+                }
+
+                launch {
                     viewModel.selectedIndex.collect { selectedIndex ->
                         carouselView.setSelectedClockIndex(selectedIndex)
                     }
@@ -97,7 +95,9 @@
             LifecycleEventObserver { source, event ->
                 when (event) {
                     Lifecycle.Event.ON_RESUME -> {
-                        clockViewFactory.registerTimeTicker(source)
+                        clockViewFactory.registerTimeTicker(source) {
+                            !carouselView.isCarouselInTransition
+                        }
                     }
                     Lifecycle.Event.ON_PAUSE -> {
                         clockViewFactory.unregisterTimeTicker(source)
@@ -106,15 +106,5 @@
                 }
             }
         )
-
-        return object : Binding {
-            override fun show() {
-                viewModel.showClockCarousel(true)
-            }
-
-            override fun hide() {
-                viewModel.showClockCarousel(false)
-            }
-        }
     }
 }
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
index b358873..4664bd0 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
@@ -15,6 +15,7 @@
  */
 package com.android.customization.picker.clock.ui.binder
 
+import android.content.res.Configuration
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
@@ -63,11 +64,14 @@
         val colorOptionContainerView: RecyclerView = view.requireViewById(R.id.color_options)
         val colorOptionAdapter =
             OptionItemAdapter(
-                layoutResourceId = R.layout.color_option_2,
+                layoutResourceId = R.layout.clock_color_option,
                 lifecycleOwner = lifecycleOwner,
                 bindIcon = { foregroundView: View, colorIcon: ColorOptionIconViewModel ->
                     val viewGroup = foregroundView as? ViewGroup
-                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon) }
+                    val night =
+                        (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                            Configuration.UI_MODE_NIGHT_YES)
+                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon, night) }
                 }
             )
         colorOptionContainerView.adapter = colorOptionAdapter
diff --git a/src/com/android/customization/picker/clock/ui/fragment/ClockSettingsFragment.kt b/src/com/android/customization/picker/clock/ui/fragment/ClockSettingsFragment.kt
index b5e7c18..fc1e018 100644
--- a/src/com/android/customization/picker/clock/ui/fragment/ClockSettingsFragment.kt
+++ b/src/com/android/customization/picker/clock/ui/fragment/ClockSettingsFragment.kt
@@ -66,51 +66,50 @@
         val colorViewModel = injector.getWallpaperColorsViewModel()
         val displayUtils = injector.getDisplayUtils(context)
         ScreenPreviewBinder.bind(
-                activity = activity,
-                previewView = lockScreenView,
-                viewModel =
-                    ScreenPreviewViewModel(
-                        previewUtils =
-                            PreviewUtils(
-                                context = context,
-                                authority =
-                                    resources.getString(
-                                        R.string.lock_screen_preview_provider_authority,
-                                    ),
-                            ),
-                        wallpaperInfoProvider = {
-                            suspendCancellableCoroutine { continuation ->
-                                injector
-                                    .getCurrentWallpaperInfoFactory(context)
-                                    .createCurrentWallpaperInfos(
-                                        { homeWallpaper, lockWallpaper, _ ->
-                                            continuation.resume(
-                                                homeWallpaper ?: lockWallpaper,
-                                                null,
-                                            )
-                                        },
-                                        /* forceRefresh= */ true,
-                                    )
-                            }
-                        },
-                        onWallpaperColorChanged = { colors ->
-                            colorViewModel.setLockWallpaperColors(colors)
-                        },
-                        initialExtrasProvider = {
-                            Bundle().apply {
-                                // Hide the clock from the system UI rendered preview so we can
-                                // place the carousel on top of it.
-                                putBoolean(
-                                    ClockPreviewConstants.KEY_HIDE_CLOCK,
-                                    true,
+            activity = activity,
+            previewView = lockScreenView,
+            viewModel =
+                ScreenPreviewViewModel(
+                    previewUtils =
+                        PreviewUtils(
+                            context = context,
+                            authority =
+                                resources.getString(
+                                    R.string.lock_screen_preview_provider_authority,
+                                ),
+                        ),
+                    wallpaperInfoProvider = {
+                        suspendCancellableCoroutine { continuation ->
+                            injector
+                                .getCurrentWallpaperInfoFactory(context)
+                                .createCurrentWallpaperInfos(
+                                    { homeWallpaper, lockWallpaper, _ ->
+                                        continuation.resume(
+                                            lockWallpaper ?: homeWallpaper,
+                                            null,
+                                        )
+                                    },
+                                    /* forceRefresh= */ true,
                                 )
-                            }
-                        },
-                    ),
-                lifecycleOwner = this,
-                offsetToStart = displayUtils.isSingleDisplayOrUnfoldedHorizontalHinge(activity),
-            )
-            .show()
+                        }
+                    },
+                    onWallpaperColorChanged = { colors ->
+                        colorViewModel.setLockWallpaperColors(colors)
+                    },
+                    initialExtrasProvider = {
+                        Bundle().apply {
+                            // Hide the clock from the system UI rendered preview so we can
+                            // place the carousel on top of it.
+                            putBoolean(
+                                ClockPreviewConstants.KEY_HIDE_CLOCK,
+                                true,
+                            )
+                        }
+                    },
+                ),
+            lifecycleOwner = this,
+            offsetToStart = displayUtils.isSingleDisplayOrUnfoldedHorizontalHinge(activity),
+        )
 
         ClockSettingsBinder.bind(
             view,
diff --git a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
index 3eae7aa..a27d019 100644
--- a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
+++ b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
@@ -23,9 +23,9 @@
 import android.widget.FrameLayout
 import androidx.constraintlayout.helper.widget.Carousel
 import androidx.constraintlayout.motion.widget.MotionLayout
-import androidx.core.view.get
 import com.android.systemui.plugins.ClockController
 import com.android.wallpaper.R
+import java.lang.Float.max
 
 class ClockCarouselView(
     context: Context,
@@ -36,11 +36,17 @@
         attrs,
     ) {
 
+    var isCarouselInTransition = false
+
     private val carousel: Carousel
     private val motionLayout: MotionLayout
     private lateinit var adapter: ClockCarouselAdapter
-    private lateinit var scalingUpClock: ClockController
-    private lateinit var scalingDownClock: ClockController
+    private lateinit var scalingUpClockController: ClockController
+    private lateinit var scalingDownClockController: ClockController
+    private var scalingUpClockView: View? = null
+    private var scalingDownClockView: View? = null
+    private var showingCardView: View? = null
+    private var hidingCardView: View? = null
 
     init {
         val clockCarousel = LayoutInflater.from(context).inflate(R.layout.clock_carousel, this)
@@ -65,13 +71,25 @@
                     startId: Int,
                     endId: Int
                 ) {
+                    isCarouselInTransition = true
                     val scalingDownClockId = adapter.clockIds[carousel.currentIndex]
                     val scalingUpIdx =
                         if (endId == R.id.next) (carousel.currentIndex + 1) % adapter.count()
                         else (carousel.currentIndex - 1 + adapter.count()) % adapter.count()
                     val scalingUpClockId = adapter.clockIds[scalingUpIdx]
-                    scalingDownClock = adapter.onGetClockController(scalingDownClockId)
-                    scalingUpClock = adapter.onGetClockController(scalingUpClockId)
+                    scalingDownClockController = adapter.onGetClockController(scalingDownClockId)
+                    scalingUpClockController = adapter.onGetClockController(scalingUpClockId)
+                    scalingDownClockView = motionLayout?.findViewById(R.id.clock_scale_view_2)
+                    scalingUpClockView =
+                        motionLayout?.findViewById(
+                            if (endId == R.id.next) R.id.clock_scale_view_3
+                            else R.id.clock_scale_view_1
+                        )
+                    showingCardView = motionLayout?.findViewById(R.id.item_card_2)
+                    hidingCardView =
+                        motionLayout?.findViewById(
+                            if (endId == R.id.next) R.id.item_card_3 else R.id.item_card_1
+                        )
                 }
 
                 override fun onTransitionChange(
@@ -80,14 +98,27 @@
                     endId: Int,
                     progress: Float
                 ) {
-                    scalingDownClock.animations.onPickerCarouselSwiping(
+                    scalingDownClockController.animations.onPickerCarouselSwiping(
                         1 - progress,
                         getPreviewRatio()
                     )
-                    scalingUpClock.animations.onPickerCarouselSwiping(progress, getPreviewRatio())
+                    scalingUpClockController.animations.onPickerCarouselSwiping(
+                        progress,
+                        getPreviewRatio()
+                    )
+                    val scalingUpScale = getScalingUpScale(progress)
+                    val scalingDownScale = getScalingDownScale(progress)
+                    scalingUpClockView?.scaleX = scalingUpScale
+                    scalingUpClockView?.scaleY = scalingUpScale
+                    scalingDownClockView?.scaleX = scalingDownScale
+                    scalingDownClockView?.scaleY = scalingDownScale
+                    showingCardView?.alpha = getShowingAlpha(progress)
+                    hidingCardView?.alpha = getHidingAlpha(progress)
                 }
 
-                override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {}
+                override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
+                    isCarouselInTransition = false
+                }
 
                 override fun onTransitionTrigger(
                     motionLayout: MotionLayout?,
@@ -117,20 +148,37 @@
         }
 
         override fun populate(view: View?, index: Int) {
-            val viewRoot = view as ViewGroup
-            val clockHostView = viewRoot[0] as ViewGroup
+            val viewRoot = view as? ViewGroup ?: return
+            val cardView =
+                getClockCardViewId(viewRoot.id)?.let { viewRoot.findViewById(it) as? View }
+                    ?: return
+            val clockScaleView =
+                getClockScaleViewId(viewRoot.id)?.let { viewRoot.findViewById(it) as? View }
+                    ?: return
+            val clockHostView =
+                getClockHostViewId(viewRoot.id)?.let { viewRoot.findViewById(it) as? ViewGroup }
+                    ?: return
+
             clockHostView.removeAllViews()
             val clockView = onGetClockController(clockIds[index]).largeClock.view
+            // Making sure the large clock tick to the correct time
+            onGetClockController(clockIds[index]).largeClock.events.onTimeTick()
             // The clock view might still be attached to an existing parent. Detach before adding to
             // another parent.
             (clockView.parent as? ViewGroup)?.removeView(clockView)
             clockHostView.addView(clockView)
             // initialize scaling state for all clocks
-            if (view.id != MIDDLE_VIEW_IN_START_STATE) {
+            if (!isMiddleView(viewRoot.id)) {
+                cardView.alpha = 1f
+                clockScaleView.scaleX = CLOCK_CAROUSEL_VIEW_SCALE
+                clockScaleView.scaleY = CLOCK_CAROUSEL_VIEW_SCALE
                 onGetClockController(clockIds[index])
                     .animations
                     .onPickerCarouselSwiping(0F, getPreviewRatio())
             } else {
+                cardView.alpha = 0f
+                clockScaleView.scaleX = 1f
+                clockScaleView.scaleY = 1f
                 onGetClockController(clockIds[index])
                     .animations
                     .onPickerCarouselSwiping(1F, getPreviewRatio())
@@ -143,6 +191,56 @@
     }
 
     companion object {
-        const val MIDDLE_VIEW_IN_START_STATE = R.id.item_view_2
+        const val CLOCK_CAROUSEL_VIEW_SCALE = 0.5f
+
+        fun getScalingUpScale(progress: Float) =
+            CLOCK_CAROUSEL_VIEW_SCALE + progress * (1f - CLOCK_CAROUSEL_VIEW_SCALE)
+
+        fun getScalingDownScale(progress: Float) = 1f - progress * (1f - CLOCK_CAROUSEL_VIEW_SCALE)
+
+        // This makes the card only starts to reveal in the last quarter of the trip so
+        // the card won't overlap the preview.
+        fun getShowingAlpha(progress: Float) = max(progress - 0.75f, 0f) * 4
+
+        // This makes the card starts to hide in the first quarter of the trip so the
+        // card won't overlap the preview.
+        fun getHidingAlpha(progress: Float) = max(1f - progress * 4, 0f)
+
+        fun getClockHostViewId(rootViewId: Int): Int? {
+            return when (rootViewId) {
+                R.id.item_view_0 -> R.id.clock_host_view_0
+                R.id.item_view_1 -> R.id.clock_host_view_1
+                R.id.item_view_2 -> R.id.clock_host_view_2
+                R.id.item_view_3 -> R.id.clock_host_view_3
+                R.id.item_view_4 -> R.id.clock_host_view_4
+                else -> null
+            }
+        }
+
+        fun getClockScaleViewId(rootViewId: Int): Int? {
+            return when (rootViewId) {
+                R.id.item_view_0 -> R.id.clock_scale_view_0
+                R.id.item_view_1 -> R.id.clock_scale_view_1
+                R.id.item_view_2 -> R.id.clock_scale_view_2
+                R.id.item_view_3 -> R.id.clock_scale_view_3
+                R.id.item_view_4 -> R.id.clock_scale_view_4
+                else -> null
+            }
+        }
+
+        fun getClockCardViewId(rootViewId: Int): Int? {
+            return when (rootViewId) {
+                R.id.item_view_0 -> R.id.item_card_0
+                R.id.item_view_1 -> R.id.item_card_1
+                R.id.item_view_2 -> R.id.item_card_2
+                R.id.item_view_3 -> R.id.item_card_3
+                R.id.item_view_4 -> R.id.item_card_4
+                else -> null
+            }
+        }
+
+        fun isMiddleView(rootViewId: Int): Boolean {
+            return rootViewId == R.id.item_view_2
+        }
     }
 }
diff --git a/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt b/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
index 67c7002..cf154d5 100644
--- a/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
+++ b/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
@@ -21,6 +21,7 @@
 import androidx.annotation.ColorInt
 import androidx.lifecycle.LifecycleOwner
 import com.android.systemui.plugins.ClockController
+import com.android.systemui.plugins.WeatherData
 import com.android.systemui.shared.clocks.ClockRegistry
 import com.android.wallpaper.R
 import com.android.wallpaper.util.ScreenSizeCalculator
@@ -33,7 +34,7 @@
 ) {
     private val timeTickListeners: ConcurrentHashMap<Int, TimeTicker> = ConcurrentHashMap()
     private val clockControllers: HashMap<String, ClockController> = HashMap()
-    private var ticker: TimeTicker? = null
+
     fun getRatio(): Float {
         val screenSizeCalculator = ScreenSizeCalculator.getInstance()
         val screenSize = screenSizeCalculator.getScreenSize(activity.windowManager.defaultDisplay)
@@ -59,17 +60,34 @@
             .onSeedColorChanged(seedColor)
     }
 
+    fun updateTimeFormat(clockId: String) {
+        getController(clockId)
+            .events
+            .onTimeFormatChanged(android.text.format.DateFormat.is24HourFormat(activity))
+    }
+
     fun registerTimeTicker(owner: LifecycleOwner) {
+        registerTimeTicker(owner, null)
+    }
+
+    fun registerTimeTicker(owner: LifecycleOwner, shouldTimeTick: (() -> Boolean)?) {
         val hashCode = owner.hashCode()
         if (timeTickListeners.keys.contains(hashCode)) {
             return
         }
+
         timeTickListeners[hashCode] =
             TimeTicker.registerNewReceiver(activity.applicationContext) {
-                clockControllers.values.forEach { it.largeClock.events.onTimeTick() }
+                if (shouldTimeTick == null || shouldTimeTick()) {
+                    onTimeTick()
+                }
             }
     }
 
+    private fun onTimeTick() {
+        clockControllers.values.forEach { it.largeClock.events.onTimeTick() }
+    }
+
     fun unregisterTimeTicker(owner: LifecycleOwner) {
         val hashCode = owner.hashCode()
         timeTickListeners[hashCode]?.let {
@@ -94,7 +112,23 @@
             activity.resources.getDimensionPixelSize(R.dimen.large_clock_text_size).toFloat() *
                 getRatio()
         )
+        // Use placeholder for weather clock preview in picker
+        controller.events.onWeatherDataChanged(
+            WeatherData(
+                description = DESCRIPTION_PLACEHODLER,
+                state = WEATHERICON_PLACEHOLDER,
+                temperature = TEMPERATURE_PLACEHOLDER,
+                useCelsius = USE_CELSIUS_PLACEHODLER,
+            )
+        )
         clockControllers[clockId] = controller
         return controller
     }
+
+    companion object {
+        val DESCRIPTION_PLACEHODLER = ""
+        val TEMPERATURE_PLACEHOLDER = 58
+        val WEATHERICON_PLACEHOLDER = WeatherData.WeatherStateIcon.MOSTLY_SUNNY
+        val USE_CELSIUS_PLACEHODLER = false
+    }
 }
diff --git a/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModel.kt b/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModel.kt
index 60a9e85..c01f56a 100644
--- a/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModel.kt
+++ b/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModel.kt
@@ -19,8 +19,6 @@
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.map
@@ -44,14 +42,7 @@
 
     val seedColor: Flow<Int?> = interactor.seedColor
 
-    private val shouldShowCarousel = MutableStateFlow(false)
-    val isCarouselVisible: Flow<Boolean> =
-        combine(allClockIds.map { it.size > 1 }.distinctUntilChanged(), shouldShowCarousel) {
-                hasMoreThanOneClock,
-                shouldShowCarousel ->
-                hasMoreThanOneClock && shouldShowCarousel
-            }
-            .distinctUntilChanged()
+    val isCarouselVisible: Flow<Boolean> = allClockIds.map { it.size > 1 }.distinctUntilChanged()
 
     @OptIn(ExperimentalCoroutinesApi::class)
     val selectedIndex: Flow<Int> =
@@ -69,14 +60,8 @@
             .mapNotNull { it }
 
     // Handle the case when there is only one clock in the carousel
-    private val shouldShowSingleClock = MutableStateFlow(false)
     val isSingleClockViewVisible: Flow<Boolean> =
-        combine(allClockIds.map { it.size == 1 }.distinctUntilChanged(), shouldShowSingleClock) {
-                hasOneClock,
-                shouldShowSingleClock ->
-                hasOneClock && shouldShowSingleClock
-            }
-            .distinctUntilChanged()
+        allClockIds.map { it.size == 1 }.distinctUntilChanged()
 
     val clockId: Flow<String> =
         allClockIds
@@ -87,11 +72,6 @@
         interactor.setSelectedClock(clockId)
     }
 
-    fun showClockCarousel(shouldShow: Boolean) {
-        shouldShowCarousel.value = shouldShow
-        shouldShowSingleClock.value = shouldShow
-    }
-
     companion object {
         const val CLOCKS_EVENT_UPDATE_DELAY_MILLIS: Long = 100
     }
diff --git a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
index b66f977..a0ac370 100644
--- a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
+++ b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
@@ -145,10 +145,14 @@
                             key = MutableStateFlow(colorModel.colorId) as StateFlow<String>,
                             payload =
                                 ColorOptionIconViewModel(
-                                    colorModel.color,
-                                    colorModel.color,
-                                    colorModel.color,
-                                    colorModel.color,
+                                    lightThemeColor0 = colorModel.color,
+                                    lightThemeColor1 = colorModel.color,
+                                    lightThemeColor2 = colorModel.color,
+                                    lightThemeColor3 = colorModel.color,
+                                    darkThemeColor0 = colorModel.color,
+                                    darkThemeColor1 = colorModel.color,
+                                    darkThemeColor2 = colorModel.color,
+                                    darkThemeColor3 = colorModel.color,
                                 ),
                             text =
                                 Text.Loaded(
@@ -200,8 +204,26 @@
         val optionItemPayload =
             when (colorOption) {
                 is ColorSeedOption -> {
-                    val colors = colorOption.previewInfo.resolveColors(context.resources)
-                    ColorOptionIconViewModel(colors[0], colors[1], colors[2], colors[3])
+                    val lightThemeColors =
+                        colorOption.previewInfo.resolveColors(
+                            /** darkTheme= */
+                            false
+                        )
+                    val darkThemeColors =
+                        colorOption.previewInfo.resolveColors(
+                            /** darkTheme= */
+                            true
+                        )
+                    ColorOptionIconViewModel(
+                        lightThemeColor0 = lightThemeColors[0],
+                        lightThemeColor1 = lightThemeColors[1],
+                        lightThemeColor2 = lightThemeColors[2],
+                        lightThemeColor3 = lightThemeColors[3],
+                        darkThemeColor0 = darkThemeColors[0],
+                        darkThemeColor1 = darkThemeColors[1],
+                        darkThemeColor2 = darkThemeColors[2],
+                        darkThemeColor3 = darkThemeColors[3],
+                    )
                 }
                 is ColorBundle -> {
                     val primaryColor =
@@ -209,10 +231,14 @@
                     val secondaryColor =
                         colorOption.previewInfo.resolveSecondaryColor(context.resources)
                     ColorOptionIconViewModel(
-                        primaryColor,
-                        secondaryColor,
-                        primaryColor,
-                        secondaryColor
+                        lightThemeColor0 = primaryColor,
+                        lightThemeColor1 = secondaryColor,
+                        lightThemeColor2 = primaryColor,
+                        lightThemeColor3 = secondaryColor,
+                        darkThemeColor0 = primaryColor,
+                        darkThemeColor1 = secondaryColor,
+                        darkThemeColor2 = primaryColor,
+                        darkThemeColor3 = secondaryColor,
                     )
                 }
                 else -> null
diff --git a/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt b/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
index 512a500..a044174 100644
--- a/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
+++ b/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
@@ -52,7 +52,7 @@
             .map { (homeColors, lockColors) ->
                 suspendCancellableCoroutine { continuation ->
                     colorManager.setWallpaperColors(homeColors, lockColors)
-                    colorManager.fetchOptions(
+                    colorManager.fetchRevampedUIOptions(
                         object : CustomizationManager.OptionsFetchedListener<ColorOption?> {
                             override fun onOptionsLoaded(options: MutableList<ColorOption?>?) {
                                 val wallpaperColorOptions: MutableList<ColorOptionModel> =
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
index 1478cc4..d238180 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
@@ -28,14 +28,30 @@
     fun bind(
         view: ViewGroup,
         viewModel: ColorOptionIconViewModel,
+        darkTheme: Boolean,
     ) {
         val color0View: ImageView = view.requireViewById(R.id.color_preview_0)
         val color1View: ImageView = view.requireViewById(R.id.color_preview_1)
         val color2View: ImageView = view.requireViewById(R.id.color_preview_2)
         val color3View: ImageView = view.requireViewById(R.id.color_preview_3)
-        color0View.drawable.colorFilter = BlendModeColorFilter(viewModel.color0, BlendMode.SRC)
-        color1View.drawable.colorFilter = BlendModeColorFilter(viewModel.color1, BlendMode.SRC)
-        color2View.drawable.colorFilter = BlendModeColorFilter(viewModel.color2, BlendMode.SRC)
-        color3View.drawable.colorFilter = BlendModeColorFilter(viewModel.color3, BlendMode.SRC)
+        if (darkTheme) {
+            color0View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor0, BlendMode.SRC)
+            color1View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor1, BlendMode.SRC)
+            color2View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor2, BlendMode.SRC)
+            color3View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor3, BlendMode.SRC)
+        } else {
+            color0View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor0, BlendMode.SRC)
+            color1View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor1, BlendMode.SRC)
+            color2View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor2, BlendMode.SRC)
+            color3View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor3, BlendMode.SRC)
+        }
     }
 }
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
index 7623048..452e8b6 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
@@ -17,6 +17,7 @@
 
 package com.android.customization.picker.color.ui.binder
 
+import android.content.res.Configuration
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
@@ -32,7 +33,6 @@
 import com.android.customization.picker.common.ui.view.ItemSpacing
 import com.android.wallpaper.R
 import com.android.wallpaper.picker.option.ui.adapter.OptionItemAdapter
-import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.launch
 
@@ -64,7 +64,10 @@
                 lifecycleOwner = lifecycleOwner,
                 bindIcon = { foregroundView: View, colorIcon: ColorOptionIconViewModel ->
                     val viewGroup = foregroundView as? ViewGroup
-                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon) }
+                    val night =
+                        (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                            Configuration.UI_MODE_NIGHT_YES)
+                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon, night) }
                 }
             )
         colorOptionContainerView.adapter = colorOptionAdapter
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
index 05b0916..10013e6 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
@@ -17,6 +17,7 @@
 
 package com.android.customization.picker.color.ui.binder
 
+import android.content.res.Configuration
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -91,10 +92,15 @@
                 })
                 .let { if (it < 0) 0 else it }
         options.subList(0, colorOptionSlotSize).forEach { item ->
+            val night =
+                (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                    Configuration.UI_MODE_NIGHT_YES)
             val itemView =
                 LayoutInflater.from(view.context)
                     .inflate(R.layout.color_option_no_background, view, false)
-            item.payload?.let { ColorOptionIconBinder.bind(itemView as ViewGroup, item.payload) }
+            item.payload?.let {
+                ColorOptionIconBinder.bind(itemView as ViewGroup, item.payload, night)
+            }
             val optionSelectedView = itemView.findViewById<ImageView>(R.id.option_selected)
 
             lifecycleOwner.lifecycleScope.launch {
diff --git a/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt b/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
index d32538d..8723c8c 100644
--- a/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
+++ b/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
@@ -20,8 +20,12 @@
 import android.annotation.ColorInt
 
 data class ColorOptionIconViewModel(
-    @ColorInt val color0: Int,
-    @ColorInt val color1: Int,
-    @ColorInt val color2: Int,
-    @ColorInt val color3: Int,
+    @ColorInt val lightThemeColor0: Int,
+    @ColorInt val lightThemeColor1: Int,
+    @ColorInt val lightThemeColor2: Int,
+    @ColorInt val lightThemeColor3: Int,
+    @ColorInt val darkThemeColor0: Int,
+    @ColorInt val darkThemeColor1: Int,
+    @ColorInt val darkThemeColor2: Int,
+    @ColorInt val darkThemeColor3: Int,
 )
diff --git a/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt b/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
index 73c1ac6..97dbba6 100644
--- a/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
+++ b/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
@@ -101,8 +101,14 @@
                                 colorOptionEntry.value.map { colorOptionModel ->
                                     val colorSeedOption: ColorSeedOption =
                                         colorOptionModel.colorOption as ColorSeedOption
-                                    val colors =
-                                        colorSeedOption.previewInfo.resolveColors(context.resources)
+                                    val lightThemeColors =
+                                        colorSeedOption.previewInfo.resolveColors(
+                                            /* darkTheme= */ false
+                                        )
+                                    val darkThemeColors =
+                                        colorSeedOption.previewInfo.resolveColors(
+                                            /* darkTheme= */ true
+                                        )
                                     val isSelectedFlow: StateFlow<Boolean> =
                                         interactor.activeColorOption
                                             .map {
@@ -118,10 +124,14 @@
                                                 as StateFlow<String>,
                                         payload =
                                             ColorOptionIconViewModel(
-                                                colors[0],
-                                                colors[1],
-                                                colors[2],
-                                                colors[3]
+                                                lightThemeColor0 = lightThemeColors[0],
+                                                lightThemeColor1 = lightThemeColors[1],
+                                                lightThemeColor2 = lightThemeColors[2],
+                                                lightThemeColor3 = lightThemeColors[3],
+                                                darkThemeColor0 = darkThemeColors[0],
+                                                darkThemeColor1 = darkThemeColors[1],
+                                                darkThemeColor2 = darkThemeColors[2],
+                                                darkThemeColor3 = darkThemeColors[3],
                                             ),
                                         text =
                                             Text.Loaded(
@@ -173,10 +183,14 @@
                                                 as StateFlow<String>,
                                         payload =
                                             ColorOptionIconViewModel(
-                                                primaryColor,
-                                                secondaryColor,
-                                                primaryColor,
-                                                secondaryColor
+                                                lightThemeColor0 = primaryColor,
+                                                lightThemeColor1 = secondaryColor,
+                                                lightThemeColor2 = primaryColor,
+                                                lightThemeColor3 = secondaryColor,
+                                                darkThemeColor0 = primaryColor,
+                                                darkThemeColor1 = secondaryColor,
+                                                darkThemeColor2 = primaryColor,
+                                                darkThemeColor3 = secondaryColor,
                                             ),
                                         text =
                                             Text.Loaded(
diff --git a/src/com/android/customization/picker/preview/ui/section/PreviewWithClockCarouselSectionController.kt b/src/com/android/customization/picker/preview/ui/section/PreviewWithClockCarouselSectionController.kt
index 0303b41..43fb85b 100644
--- a/src/com/android/customization/picker/preview/ui/section/PreviewWithClockCarouselSectionController.kt
+++ b/src/com/android/customization/picker/preview/ui/section/PreviewWithClockCarouselSectionController.kt
@@ -22,7 +22,6 @@
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStub
-import androidx.core.view.isVisible
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.lifecycleScope
 import com.android.customization.picker.clock.ui.binder.ClockCarouselViewBinder
@@ -46,7 +45,7 @@
 class PreviewWithClockCarouselSectionController(
     activity: Activity,
     private val lifecycleOwner: LifecycleOwner,
-    private val initialScreen: CustomizationSections.Screen,
+    private val screen: CustomizationSections.Screen,
     wallpaperInfoFactory: CurrentWallpaperInfoFactory,
     colorViewModel: WallpaperColorsViewModel,
     displayUtils: DisplayUtils,
@@ -59,7 +58,7 @@
     ScreenPreviewSectionController(
         activity,
         lifecycleOwner,
-        initialScreen,
+        screen,
         wallpaperInfoFactory,
         colorViewModel,
         displayUtils,
@@ -67,32 +66,31 @@
         wallpaperInteractor,
     ) {
 
-    private var clockCarouselBinding: ClockCarouselViewBinder.Binding? = null
     private var clockColorAndSizeButton: View? = null
 
     override val hideLockScreenClockPreview = true
 
     override fun createView(context: Context): ScreenPreviewView {
         val view = super.createView(context)
+        if (screen == CustomizationSections.Screen.LOCK_SCREEN) {
+            val clockColorAndSizeButtonStub: ViewStub =
+                view.requireViewById(R.id.clock_color_and_size_button)
+            clockColorAndSizeButtonStub.layoutResource = R.layout.clock_color_and_size_button
+            clockColorAndSizeButton = clockColorAndSizeButtonStub.inflate() as View
+            clockColorAndSizeButton?.setOnClickListener {
+                navigationController.navigateTo(ClockSettingsFragment())
+            }
 
-        val clockColorAndSizeButtonStub: ViewStub =
-            view.requireViewById(R.id.clock_color_and_size_button)
-        clockColorAndSizeButtonStub.layoutResource = R.layout.clock_color_and_size_button
-        clockColorAndSizeButton = clockColorAndSizeButtonStub.inflate() as View
-        clockColorAndSizeButton?.setOnClickListener {
-            navigationController.navigateTo(ClockSettingsFragment())
-        }
+            val carouselViewStub: ViewStub = view.requireViewById(R.id.clock_carousel_view_stub)
+            carouselViewStub.layoutResource = R.layout.clock_carousel_view
+            val carouselView = carouselViewStub.inflate() as ClockCarouselView
 
-        val carouselViewStub: ViewStub = view.requireViewById(R.id.clock_carousel_view_stub)
-        carouselViewStub.layoutResource = R.layout.clock_carousel_view
-        val carouselView = carouselViewStub.inflate() as ClockCarouselView
-
-        // TODO (b/270716937) We should handle the single clock case in the clock carousel itself
-        val singleClockViewStub: ViewStub = view.requireViewById(R.id.single_clock_view_stub)
-        singleClockViewStub.layoutResource = R.layout.single_clock_view
-        val singleClockView = singleClockViewStub.inflate() as ViewGroup
-        lifecycleOwner.lifecycleScope.launch {
-            clockCarouselBinding =
+            // TODO (b/270716937) We should handle the single clock case in the clock carousel
+            // itself
+            val singleClockViewStub: ViewStub = view.requireViewById(R.id.single_clock_view_stub)
+            singleClockViewStub.layoutResource = R.layout.single_clock_view
+            val singleClockView = singleClockViewStub.inflate() as ViewGroup
+            lifecycleOwner.lifecycleScope.launch {
                 ClockCarouselViewBinder.bind(
                     carouselView = carouselView,
                     singleClockView = singleClockView,
@@ -100,20 +98,9 @@
                     clockViewFactory = clockViewFactory,
                     lifecycleOwner = lifecycleOwner,
                 )
-            onScreenSwitched(
-                isOnLockScreen = initialScreen == CustomizationSections.Screen.LOCK_SCREEN
-            )
+            }
         }
-        return view
-    }
 
-    override fun onScreenSwitched(isOnLockScreen: Boolean) {
-        super.onScreenSwitched(isOnLockScreen)
-        clockColorAndSizeButton?.isVisible = isOnLockScreen
-        if (isOnLockScreen) {
-            clockCarouselBinding?.show()
-        } else {
-            clockCarouselBinding?.hide()
-        }
+        return view
     }
 }
diff --git a/tests/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModelTest.kt b/tests/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModelTest.kt
index 63f77bd..5bc7461 100644
--- a/tests/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModelTest.kt
+++ b/tests/src/com/android/customization/picker/clock/ui/viewmodel/ClockCarouselViewModelTest.kt
@@ -75,46 +75,22 @@
     }
 
     @Test
-    fun setShouldShowCarousel() = runTest {
+    fun multipleClockCase() = runTest {
         underTest = ClockCarouselViewModel(ClockPickerInteractor(repositoryWithMultipleClocks))
         val observedIsCarouselVisible = collectLastValue(underTest.isCarouselVisible)
+        val observedIsSingleClockViewVisible = collectLastValue(underTest.isSingleClockViewVisible)
         advanceTimeBy(ClockCarouselViewModel.CLOCKS_EVENT_UPDATE_DELAY_MILLIS)
-        underTest.showClockCarousel(false)
-        assertThat(observedIsCarouselVisible()).isFalse()
-        underTest.showClockCarousel(true)
         assertThat(observedIsCarouselVisible()).isTrue()
+        assertThat(observedIsSingleClockViewVisible()).isFalse()
     }
 
     @Test
-    fun shouldNotShowCarouselWhenSingleClock() = runTest {
+    fun singleClockCase() = runTest {
         underTest = ClockCarouselViewModel(ClockPickerInteractor(repositoryWithSingleClock))
         val observedIsCarouselVisible = collectLastValue(underTest.isCarouselVisible)
-        advanceTimeBy(ClockCarouselViewModel.CLOCKS_EVENT_UPDATE_DELAY_MILLIS)
-        underTest.showClockCarousel(false)
-        assertThat(observedIsCarouselVisible()).isFalse()
-        underTest.showClockCarousel(true)
-        assertThat(observedIsCarouselVisible()).isFalse()
-    }
-
-    @Test
-    fun setShouldShowSingleClock() = runTest {
-        underTest = ClockCarouselViewModel(ClockPickerInteractor(repositoryWithSingleClock))
         val observedIsSingleClockViewVisible = collectLastValue(underTest.isSingleClockViewVisible)
         advanceTimeBy(ClockCarouselViewModel.CLOCKS_EVENT_UPDATE_DELAY_MILLIS)
-        underTest.showClockCarousel(false)
-        assertThat(observedIsSingleClockViewVisible()).isFalse()
-        underTest.showClockCarousel(true)
+        assertThat(observedIsCarouselVisible()).isFalse()
         assertThat(observedIsSingleClockViewVisible()).isTrue()
     }
-
-    @Test
-    fun shouldNotShowSingleClockWhenMultipleClocks() = runTest {
-        underTest = ClockCarouselViewModel(ClockPickerInteractor(repositoryWithMultipleClocks))
-        val observedIsSingleClockViewVisible = collectLastValue(underTest.isSingleClockViewVisible)
-        advanceTimeBy(ClockCarouselViewModel.CLOCKS_EVENT_UPDATE_DELAY_MILLIS)
-        underTest.showClockCarousel(false)
-        assertThat(observedIsSingleClockViewVisible()).isFalse()
-        underTest.showClockCarousel(true)
-        assertThat(observedIsSingleClockViewVisible()).isFalse()
-    }
 }