From dc2157904ac305b93340f78fab1ae4902dbee966 Mon Sep 17 00:00:00 2001
From: OxygenCobalt <oxycblt@abstractr.net>
Date: Fri, 11 Jun 2021 08:13:52 -0600
Subject: [PATCH] styles: refactor styles

Completely refactor styles once again to improve resource sharing and
styling maintainability.
---
 .../org/oxycblt/auxio/songs/SongsFragment.kt  |   2 +-
 .../layout-land/fragment_compact_playback.xml |  42 +--
 .../res/layout-land/fragment_playback.xml     |  42 +--
 .../res/layout-land/item_album_header.xml     |   3 +-
 .../res/layout-land/item_artist_header.xml    |   3 +-
 .../res/layout-land/item_genre_header.xml     |   3 +-
 .../res/layout-large/item_album_header.xml    |   3 +-
 .../res/layout-large/item_artist_header.xml   |   3 +-
 .../res/layout-large/item_genre_header.xml    |   3 +-
 .../layout-xlarge-land/fragment_playback.xml  |  43 +--
 .../res/layout-xlarge/fragment_playback.xml   |  41 +--
 app/src/main/res/layout/activity_main.xml     |   3 +-
 app/src/main/res/layout/dialog_accent.xml     |   3 +-
 app/src/main/res/layout/dialog_blacklist.xml  |   3 +-
 app/src/main/res/layout/fragment_about.xml    |  53 +---
 .../res/layout/fragment_compact_playback.xml  |  37 +--
 app/src/main/res/layout/fragment_detail.xml   |   4 +-
 app/src/main/res/layout/fragment_library.xml  |   2 -
 app/src/main/res/layout/fragment_loading.xml  |  16 +-
 app/src/main/res/layout/fragment_playback.xml |  47 +---
 app/src/main/res/layout/fragment_queue.xml    |   4 +-
 app/src/main/res/layout/fragment_search.xml   |   2 +-
 app/src/main/res/layout/fragment_settings.xml |   2 -
 app/src/main/res/layout/fragment_songs.xml    |   2 -
 app/src/main/res/layout/item_album_header.xml |   3 +-
 .../main/res/layout/item_artist_header.xml    |   3 +-
 app/src/main/res/layout/item_genre_header.xml |   3 +-
 .../{styles.xml => styles_component.xml}      |   0
 .../{styles.xml => styles_core.xml}           |   0
 .../{styles.xml => styles_core.xml}           |   0
 app/src/main/res/values/styles.xml            | 265 ------------------
 app/src/main/res/values/styles_android.xml    |  64 +++++
 app/src/main/res/values/styles_component.xml  | 173 ++++++++++++
 app/src/main/res/values/styles_core.xml       |  39 +++
 app/src/main/res/values/styles_ui.xml         | 102 +++++++
 35 files changed, 445 insertions(+), 573 deletions(-)
 rename app/src/main/res/values-large/{styles.xml => styles_component.xml} (100%)
 rename app/src/main/res/values-night-v27/{styles.xml => styles_core.xml} (100%)
 rename app/src/main/res/values-v27/{styles.xml => styles_core.xml} (100%)
 delete mode 100644 app/src/main/res/values/styles.xml
 create mode 100644 app/src/main/res/values/styles_android.xml
 create mode 100644 app/src/main/res/values/styles_component.xml
 create mode 100644 app/src/main/res/values/styles_core.xml
 create mode 100644 app/src/main/res/values/styles_ui.xml

diff --git a/app/src/main/java/org/oxycblt/auxio/songs/SongsFragment.kt b/app/src/main/java/org/oxycblt/auxio/songs/SongsFragment.kt
index c84c6a138..c0ae625de 100644
--- a/app/src/main/java/org/oxycblt/auxio/songs/SongsFragment.kt
+++ b/app/src/main/java/org/oxycblt/auxio/songs/SongsFragment.kt
@@ -71,7 +71,7 @@ class SongsFragment : Fragment() {
      * semantics when it comes to articles.
      */
     private val String.first: Char get() {
-        // If the name actually starts with "The" or "A", get the character *after* that word.
+        // If the name actually starts with "The"/"A"/"An", get the character *after* that word.
         // Yes, this is stupidly english centric but it wont run with other languages.
         if (length > 5 && startsWith("the ", true)) {
             return get(4).uppercaseChar()
diff --git a/app/src/main/res/layout-land/fragment_compact_playback.xml b/app/src/main/res/layout-land/fragment_compact_playback.xml
index 79d25815d..f993ef49e 100644
--- a/app/src/main/res/layout-land/fragment_compact_playback.xml
+++ b/app/src/main/res/layout-land/fragment_compact_playback.xml
@@ -26,31 +26,18 @@
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="@dimen/size_cover_compact"
-            android:layout_height="@dimen/size_cover_compact"
-            android:layout_marginStart="@dimen/spacing_small"
-            android:layout_marginTop="@dimen/spacing_small"
-            android:layout_marginBottom="@dimen/spacing_small"
+            style="@style/CompactImageView"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintDimensionRatio="1:1"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             tools:src="@drawable/ic_song" />
 
         <TextView
             android:id="@+id/playback_song"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/spacing_small"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter_semibold"
-            android:singleLine="true"
+            style="@style/Widget.TextView.Compact.Primary"
             android:text="@{song.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.SmallHeader"
             app:layout_constraintBottom_toTopOf="@+id/playback_info"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -60,15 +47,8 @@
 
         <TextView
             android:id="@+id/playback_info"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/spacing_small"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:ellipsize="end"
-            android:singleLine="true"
+            style="@style/Widget.TextView.Compact.Secondary"
             android:text="@{@string/format_info(song.album.artist.name, song.album.name)}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
             app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -77,14 +57,9 @@
 
         <org.oxycblt.auxio.playback.PlayPauseButton
             android:id="@+id/playback_play_pause"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="@dimen/size_play_pause_compact"
-            android:layout_height="@dimen/size_play_pause_compact"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:background="@drawable/ui_unbounded_ripple"
+            style="@style/Widget.Button.Unbounded.PlayPause"
             android:contentDescription="@string/description_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
-            android:tint="@color/control_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -92,14 +67,11 @@
 
         <ProgressBar
             android:id="@+id/playback_progress"
-            style="?android:attr/progressBarStyleHorizontal"
-            android:layout_width="match_parent"
-            android:layout_height="@dimen/height_compact_progress"
-            android:clickable="false"
+            style="@style/Widget.Seekbar.Compact"
             android:progress="@{playbackModel.positionAsProgress}"
-            android:progressBackgroundTint="?attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
             tools:progress="70" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout-land/fragment_playback.xml b/app/src/main/res/layout-land/fragment_playback.xml
index eb536b73c..3ef26d1a2 100644
--- a/app/src/main/res/layout-land/fragment_playback.xml
+++ b/app/src/main/res/layout-land/fragment_playback.xml
@@ -29,21 +29,18 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/playback_toolbar"
-            style="@style/Toolbar.Style.Icon"
+            style="@style/Toolbar.Style.Icon.Down"
+            android:elevation="0dp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:menu="@menu/menu_playback"
-            app:navigationIcon="@drawable/ic_down"
             app:title="@string/label_playback" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
+            style="@style/ElevatedImageView"
             android:layout_margin="@dimen/spacing_large"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintDimensionRatio="1"
@@ -68,33 +65,22 @@
 
             <TextView
                 android:id="@+id/playback_song"
+                style="@style/Widget.TextView.Playback.Primary"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:ellipsize="marquee"
-                android:fontFamily="@font/inter_semibold"
-                android:marqueeRepeatLimit="marquee_forever"
                 android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
-                android:singleLine="true"
                 android:text="@{song.name}"
-                android:textAlignment="viewStart"
-                android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
                 tools:text="Song Name" />
 
         </FrameLayout>
 
         <TextView
             android:id="@+id/playback_artist"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
-            android:singleLine="true"
             android:text="@{song.album.artist.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_album"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -103,17 +89,11 @@
 
         <TextView
             android:id="@+id/playback_album"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
-            android:singleLine="true"
             android:text="@{song.album.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -124,16 +104,8 @@
             android:id="@+id/playback_seek_bar"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
+            style="@style/Widget.SeekBar.Full"
             android:layout_marginTop="@dimen/spacing_medium"
-            android:clickable="true"
-            android:focusable="true"
-            android:paddingStart="@dimen/spacing_mid_large"
-            android:paddingEnd="@dimen/spacing_mid_large"
-            android:progressBackgroundTint="?android:attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
-            android:splitTrack="false"
-            android:thumbOffset="@dimen/offset_thumb"
-            android:thumbTint="?attr/colorPrimary"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
diff --git a/app/src/main/res/layout-land/item_album_header.xml b/app/src/main/res/layout-land/item_album_header.xml
index 35a434b1e..495731e20 100644
--- a/app/src/main/res/layout-land/item_album_header.xml
+++ b/app/src/main/res/layout-land/item_album_header.xml
@@ -30,8 +30,7 @@
             android:layout_marginStart="@dimen/spacing_medium"
             android:layout_marginTop="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_album_cover(album.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:albumArt="@{album}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-land/item_artist_header.xml b/app/src/main/res/layout-land/item_artist_header.xml
index 69aa71243..4c5d413e6 100644
--- a/app/src/main/res/layout-land/item_artist_header.xml
+++ b/app/src/main/res/layout-land/item_artist_header.xml
@@ -25,8 +25,7 @@
             android:layout_height="@dimen/size_cover_detail_land"
             android:layout_margin="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_artist_image(artist.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:artistImage="@{artist}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-land/item_genre_header.xml b/app/src/main/res/layout-land/item_genre_header.xml
index 06a4d4f71..252dbb5db 100644
--- a/app/src/main/res/layout-land/item_genre_header.xml
+++ b/app/src/main/res/layout-land/item_genre_header.xml
@@ -29,8 +29,7 @@
             android:layout_height="@dimen/size_cover_detail_land"
             android:layout_margin="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_genre_image(genre.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:genreImage="@{genre}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-large/item_album_header.xml b/app/src/main/res/layout-large/item_album_header.xml
index f13a463f9..119a9d456 100644
--- a/app/src/main/res/layout-large/item_album_header.xml
+++ b/app/src/main/res/layout-large/item_album_header.xml
@@ -30,8 +30,7 @@
             android:layout_marginStart="@dimen/spacing_medium"
             android:layout_marginTop="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_album_cover(album.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:albumArt="@{album}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-large/item_artist_header.xml b/app/src/main/res/layout-large/item_artist_header.xml
index 0d0abd2d3..f62688e08 100644
--- a/app/src/main/res/layout-large/item_artist_header.xml
+++ b/app/src/main/res/layout-large/item_artist_header.xml
@@ -25,8 +25,7 @@
             android:layout_height="@dimen/size_cover_detail"
             android:layout_margin="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_artist_image(artist.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:artistImage="@{artist}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-large/item_genre_header.xml b/app/src/main/res/layout-large/item_genre_header.xml
index d3cb8e705..f81d2164f 100644
--- a/app/src/main/res/layout-large/item_genre_header.xml
+++ b/app/src/main/res/layout-large/item_genre_header.xml
@@ -29,8 +29,7 @@
             android:layout_height="@dimen/size_cover_detail"
             android:layout_margin="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_genre_image(genre.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:genreImage="@{genre}"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout-xlarge-land/fragment_playback.xml b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
index e86b9de65..ecf869ff0 100644
--- a/app/src/main/res/layout-xlarge-land/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge-land/fragment_playback.xml
@@ -29,23 +29,20 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/playback_toolbar"
-            style="@style/Toolbar.Style.Icon"
+            style="@style/Toolbar.Style.Icon.Down"
+            android:elevation="0dp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:menu="@menu/menu_playback"
-            app:navigationIcon="@drawable/ic_down"
             app:title="@string/label_playback" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
+            style="@style/ElevatedImageView"
             android:layout_marginStart="@dimen/spacing_large"
             android:layout_marginTop="@dimen/spacing_insane"
             android:layout_marginBottom="@dimen/spacing_insane"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintDimensionRatio="1"
@@ -63,40 +60,28 @@
             android:layout_marginEnd="@dimen/spacing_mid_large"
             app:layout_constraintBottom_toTopOf="@+id/playback_artist"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
             app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
             app:layout_constraintVertical_chainStyle="packed">
 
             <TextView
                 android:id="@+id/playback_song"
+                style="@style/Widget.TextView.Playback.Primary"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:ellipsize="marquee"
-                android:fontFamily="@font/inter_semibold"
-                android:marqueeRepeatLimit="marquee_forever"
                 android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
-                android:singleLine="true"
                 android:text="@{song.name}"
-                android:textAlignment="viewStart"
-                android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
                 tools:text="Song Name" />
 
         </FrameLayout>
 
         <TextView
             android:id="@+id/playback_artist"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
-            android:singleLine="true"
             android:text="@{song.album.artist.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_album"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -105,17 +90,11 @@
 
         <TextView
             android:id="@+id/playback_album"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
-            android:singleLine="true"
             android:text="@{song.album.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -126,16 +105,8 @@
             android:id="@+id/playback_seek_bar"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
+            style="@style/Widget.SeekBar.Full"
             android:layout_marginTop="@dimen/spacing_medium"
-            android:clickable="true"
-            android:focusable="true"
-            android:paddingStart="@dimen/spacing_mid_large"
-            android:paddingEnd="@dimen/spacing_mid_large"
-            android:progressBackgroundTint="?android:attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
-            android:splitTrack="false"
-            android:thumbOffset="@dimen/offset_thumb"
-            android:thumbTint="?attr/colorPrimary"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
diff --git a/app/src/main/res/layout-xlarge/fragment_playback.xml b/app/src/main/res/layout-xlarge/fragment_playback.xml
index 3c50bc5ff..f269cd854 100644
--- a/app/src/main/res/layout-xlarge/fragment_playback.xml
+++ b/app/src/main/res/layout-xlarge/fragment_playback.xml
@@ -29,22 +29,18 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/playback_toolbar"
-            style="@style/Toolbar.Style.Icon"
+            style="@style/Toolbar.Style.Icon.Down"
             android:elevation="0dp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:menu="@menu/menu_playback"
-            app:navigationIcon="@drawable/ic_down"
             app:title="@string/label_playback" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
+            style="@style/ElevatedImageView"
             android:layout_margin="@dimen/spacing_mid_huge"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toTopOf="@+id/playback_song"
             app:layout_constraintDimensionRatio="1:1"
@@ -55,18 +51,11 @@
 
         <TextView
             android:id="@+id/playback_song"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Primary"
             android:layout_marginStart="@dimen/spacing_mid_huge"
             android:layout_marginEnd="@dimen/spacing_mid_huge"
-            android:ellipsize="marquee"
-            android:fontFamily="@font/inter_semibold"
-            android:marqueeRepeatLimit="marquee_forever"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
-            android:singleLine="true"
             android:text="@{song.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
             app:layout_constraintBottom_toTopOf="@+id/playback_artist"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -75,17 +64,11 @@
 
         <TextView
             android:id="@+id/playback_artist"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_huge"
             android:layout_marginEnd="@dimen/spacing_mid_huge"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
-            android:singleLine="true"
             android:text="@{song.album.artist.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_album"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -93,18 +76,12 @@
 
         <TextView
             android:id="@+id/playback_album"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_huge"
             android:layout_marginEnd="@dimen/spacing_mid_huge"
             android:layout_marginBottom="@dimen/spacing_medium"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
-            android:singleLine="true"
             android:text="@{song.album.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -114,15 +91,9 @@
             android:id="@+id/playback_seek_bar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:clickable="true"
-            android:focusable="true"
+            style="@style/Widget.SeekBar.Full"
             android:paddingStart="@dimen/spacing_mid_huge"
             android:paddingEnd="@dimen/spacing_mid_huge"
-            android:progressBackgroundTint="?android:attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
-            android:splitTrack="false"
-            android:thumbOffset="@dimen/offset_thumb"
-            android:thumbTint="?attr/colorPrimary"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index b53fbfe59..f53ad602b 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -10,5 +10,6 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:defaultNavHost="true"
-        app:navGraph="@navigation/nav_main" />
+        app:navGraph="@navigation/nav_main"
+        tools:layout="@layout/fragment_main" />
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/dialog_accent.xml b/app/src/main/res/layout/dialog_accent.xml
index 2ca02c53f..eb9cf294f 100644
--- a/app/src/main/res/layout/dialog_accent.xml
+++ b/app/src/main/res/layout/dialog_accent.xml
@@ -7,9 +7,8 @@
         android:id="@+id/accent_recycler"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:foregroundGravity="center"
         android:overScrollMode="never"
-        android:paddingTop="@dimen/spacing_medium"
+        android:paddingTop="@dimen/spacing_small"
         app:layoutManager="org.oxycblt.auxio.settings.accent.AutoGridLayoutManager"
         app:layout_constraintBottom_toTopOf="@+id/accent_cancel"
         app:layout_constraintTop_toBottomOf="@+id/accent_header"
diff --git a/app/src/main/res/layout/dialog_blacklist.xml b/app/src/main/res/layout/dialog_blacklist.xml
index 5354944b9..afeba3541 100644
--- a/app/src/main/res/layout/dialog_blacklist.xml
+++ b/app/src/main/res/layout/dialog_blacklist.xml
@@ -3,13 +3,12 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools">
 
-
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="?attr/colorSurface"
         android:orientation="vertical"
-        android:paddingTop="@dimen/spacing_medium"
+        android:paddingTop="@dimen/spacing_small"
         android:theme="@style/Theme.Neutral">
 
         <androidx.recyclerview.widget.RecyclerView
diff --git a/app/src/main/res/layout/fragment_about.xml b/app/src/main/res/layout/fragment_about.xml
index 9dc3e64e2..c30694c3a 100644
--- a/app/src/main/res/layout/fragment_about.xml
+++ b/app/src/main/res/layout/fragment_about.xml
@@ -13,10 +13,7 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/about_toolbar"
-            style="@style/Toolbar.Style.Icon"
-            android:background="?android:attr/windowBackground"
-            android:elevation="@dimen/elevation_normal"
-            app:navigationIcon="@drawable/ic_down"
+            style="@style/Toolbar.Style.Icon.Down"
             app:title="@string/label_about" />
 
         <com.google.android.material.card.MaterialCardView
@@ -101,22 +98,14 @@
                         app:layout_constraintBottom_toBottomOf="@+id/about_version_icon"
                         app:layout_constraintStart_toEndOf="@+id/about_version_icon"
                         app:layout_constraintTop_toBottomOf="@+id/about_version_title"
-                        tools:text="0.0.0" />
+                        tools:text="16.16.16" />
 
                 </androidx.constraintlayout.widget.ConstraintLayout>
 
                 <TextView
                     android:id="@+id/about_code"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="@drawable/ui_ripple"
-                    android:clickable="true"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:focusable="true"
-                    android:padding="@dimen/spacing_medium"
+                    style="@style/Widget.TextView.About.Clickable"
                     android:text="@string/label_code"
-                    android:textAlignment="viewStart"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                     app:drawableStartCompat="@drawable/ic_code"
                     app:layout_constraintBottom_toTopOf="@+id/about_faq"
                     app:layout_constraintEnd_toEndOf="parent"
@@ -125,16 +114,8 @@
 
                 <TextView
                     android:id="@+id/about_licenses"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="@drawable/ui_ripple"
-                    android:clickable="true"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:focusable="true"
-                    android:padding="@dimen/spacing_medium"
+                    style="@style/Widget.TextView.About.Clickable"
                     android:text="@string/label_licenses"
-                    android:textAlignment="viewStart"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                     app:drawableStartCompat="@drawable/ic_license"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
@@ -142,16 +123,8 @@
 
                 <TextView
                     android:id="@+id/about_faq"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="@drawable/ui_ripple"
-                    android:clickable="true"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:focusable="true"
-                    android:padding="@dimen/spacing_medium"
+                    style="@style/Widget.TextView.About.Clickable"
                     android:text="@string/label_faq"
-                    android:textAlignment="viewStart"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                     app:drawableStartCompat="@drawable/ic_about"
                     app:layout_constraintBottom_toTopOf="@+id/about_licenses"
                     app:layout_constraintEnd_toEndOf="parent"
@@ -160,26 +133,18 @@
 
                 <TextView
                     android:id="@+id/about_song_count"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:padding="@dimen/spacing_medium"
-                    android:textAlignment="viewStart"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
+                    style="@style/Widget.TextView.About"
                     android:theme="@style/Theme.Neutral"
                     app:drawableStartCompat="@drawable/ic_song"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@+id/about_licenses"
                     tools:text="Songs Loaded: 1616" />
 
                 <TextView
                     android:id="@+id/about_author"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:drawablePadding="@dimen/spacing_medium"
-                    android:padding="@dimen/spacing_medium"
+                    style="@style/Widget.TextView.About"
                     android:text="@string/label_author"
-                    android:textAlignment="viewStart"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                     app:drawableStartCompat="@drawable/ic_author"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/fragment_compact_playback.xml b/app/src/main/res/layout/fragment_compact_playback.xml
index 94b64e93b..28dc2de19 100644
--- a/app/src/main/res/layout/fragment_compact_playback.xml
+++ b/app/src/main/res/layout/fragment_compact_playback.xml
@@ -26,22 +26,15 @@
 
         <ProgressBar
             android:id="@+id/playback_progress"
-            style="?android:attr/progressBarStyleHorizontal"
-            android:layout_width="match_parent"
-            android:layout_height="@dimen/height_compact_progress"
-            android:clickable="false"
+            style="@style/Widget.Seekbar.Compact"
             android:progress="@{playbackModel.positionAsProgress}"
-            android:progressBackgroundTint="?attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             tools:progress="70" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="@dimen/size_cover_compact"
-            android:layout_height="@dimen/size_cover_compact"
-            android:layout_margin="@dimen/spacing_small"
+            style="@style/CompactImageView"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toBottomOf="parent"
@@ -51,16 +44,8 @@
 
         <TextView
             android:id="@+id/playback_song"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/spacing_small"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:ellipsize="end"
-            android:fontFamily="@font/inter_semibold"
-            android:singleLine="true"
+            style="@style/Widget.TextView.Compact.Primary"
             android:text="@{song.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.SmallHeader"
             app:layout_constraintBottom_toTopOf="@+id/playback_info"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -70,15 +55,8 @@
 
         <TextView
             android:id="@+id/playback_info"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/spacing_small"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:ellipsize="end"
-            android:singleLine="true"
+            style="@style/Widget.TextView.Compact.Secondary"
             android:text="@{@string/format_info(song.album.artist.name, song.album.name)}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
             app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -87,14 +65,9 @@
 
         <org.oxycblt.auxio.playback.PlayPauseButton
             android:id="@+id/playback_play_pause"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="@dimen/size_play_pause_compact"
-            android:layout_height="@dimen/size_play_pause_compact"
-            android:layout_marginEnd="@dimen/spacing_small"
-            android:background="@drawable/ui_unbounded_ripple"
+            style="@style/Widget.Button.Unbounded.PlayPause"
             android:contentDescription="@string/description_play_pause"
             android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
-            android:tint="@color/control_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout/fragment_detail.xml b/app/src/main/res/layout/fragment_detail.xml
index 10ce8813e..6d23bb01d 100644
--- a/app/src/main/res/layout/fragment_detail.xml
+++ b/app/src/main/res/layout/fragment_detail.xml
@@ -17,9 +17,7 @@
 
             <androidx.appcompat.widget.Toolbar
                 android:id="@+id/detail_toolbar"
-                style="@style/Toolbar.Style.Icon"
-                android:background="?attr/colorSurface"
-                android:elevation="@dimen/elevation_normal" />
+                style="@style/Toolbar.Style.Icon" />
 
         </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/layout/fragment_library.xml b/app/src/main/res/layout/fragment_library.xml
index 6fa5e9023..0815df1c9 100644
--- a/app/src/main/res/layout/fragment_library.xml
+++ b/app/src/main/res/layout/fragment_library.xml
@@ -13,8 +13,6 @@
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/library_toolbar"
             style="@style/Toolbar.Style"
-            android:background="?android:attr/windowBackground"
-            android:elevation="@dimen/elevation_normal"
             app:menu="@menu/menu_library"
             app:title="@string/label_library" />
 
diff --git a/app/src/main/res/layout/fragment_loading.xml b/app/src/main/res/layout/fragment_loading.xml
index 54cdde730..b3b5fdec4 100644
--- a/app/src/main/res/layout/fragment_loading.xml
+++ b/app/src/main/res/layout/fragment_loading.xml
@@ -22,8 +22,6 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_margin="@dimen/spacing_small"
-            android:indeterminateTint="?attr/colorPrimary"
-            android:indeterminateTintMode="src_in"
             android:paddingBottom="@dimen/spacing_tiny" />
 
         <ImageView
@@ -32,8 +30,6 @@
             android:layout_height="@dimen/size_error_icon"
             android:layout_margin="@dimen/spacing_small"
             android:contentDescription="@string/description_error"
-            android:indeterminateTint="?attr/colorPrimary"
-            android:indeterminateTintMode="src_in"
             android:src="@drawable/ic_error"
             android:visibility="gone"
             tools:visibility="visible" />
@@ -50,25 +46,17 @@
 
         <Button
             android:id="@+id/loading_retry_button"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:fontFamily="@font/inter_semibold"
+            style="@style/Widget.Button.Unbounded.Text"
             android:onClick="@{() -> loadingModel.load(context)}"
             android:text="@string/label_retry"
-            android:textColor="?attr/colorPrimary"
             android:visibility="gone"
             tools:visibility="visible" />
 
         <Button
             android:id="@+id/loading_grant_button"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:fontFamily="@font/inter_semibold"
+            style="@style/Widget.Button.Unbounded.Text"
             android:onClick="@{() -> loadingModel.grant()}"
             android:text="@string/label_grant"
-            android:textColor="?attr/colorPrimary"
             android:visibility="gone"
             tools:visibility="visible" />
 
diff --git a/app/src/main/res/layout/fragment_playback.xml b/app/src/main/res/layout/fragment_playback.xml
index 91a051fe6..979fd9e96 100644
--- a/app/src/main/res/layout/fragment_playback.xml
+++ b/app/src/main/res/layout/fragment_playback.xml
@@ -19,7 +19,6 @@
             type="org.oxycblt.auxio.detail.DetailViewModel" />
     </data>
 
-
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/playback_layout"
         android:layout_width="match_parent"
@@ -29,22 +28,18 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/playback_toolbar"
-            style="@style/Toolbar.Style.Icon"
+            style="@style/Toolbar.Style.Icon.Down"
             android:elevation="0dp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:menu="@menu/menu_playback"
-            app:navigationIcon="@drawable/ic_down"
             app:title="@string/label_playback" />
 
         <ImageView
             android:id="@+id/playback_cover"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
+            style="@style/ElevatedImageView"
             android:layout_margin="@dimen/spacing_mid_large"
             android:contentDescription="@{@string/description_album_cover(song.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
             app:albumArt="@{song}"
             app:layout_constraintBottom_toTopOf="@+id/playback_song"
             app:layout_constraintDimensionRatio="1:1"
@@ -55,18 +50,11 @@
 
         <TextView
             android:id="@+id/playback_song"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Primary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="marquee"
-            android:fontFamily="@font/inter_semibold"
-            android:marqueeRepeatLimit="marquee_forever"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song)}"
-            android:singleLine="true"
             android:text="@{song.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
             app:layout_constraintBottom_toTopOf="@+id/playback_artist"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -75,17 +63,11 @@
 
         <TextView
             android:id="@+id/playback_artist"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album.artist)}"
-            android:singleLine="true"
             android:text="@{song.album.artist.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_album"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -93,18 +75,11 @@
 
         <TextView
             android:id="@+id/playback_album"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            style="@style/Widget.TextView.Playback.Secondary"
             android:layout_marginStart="@dimen/spacing_mid_large"
             android:layout_marginEnd="@dimen/spacing_mid_large"
             android:layout_marginBottom="@dimen/spacing_medium"
-            android:ellipsize="end"
             android:onClick="@{() -> detailModel.navToItem(playbackModel.song.album)}"
-            android:singleLine="true"
-            android:text="@{song.album.name}"
-            android:textAlignment="viewStart"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="?android:attr/textColorSecondary"
             app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -112,17 +87,9 @@
 
         <SeekBar
             android:id="@+id/playback_seek_bar"
-            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:clickable="true"
-            android:focusable="true"
-            android:paddingStart="@dimen/spacing_mid_large"
-            android:paddingEnd="@dimen/spacing_mid_large"
-            android:progressBackgroundTint="?android:attr/colorControlNormal"
-            android:progressTint="?attr/colorPrimary"
-            android:splitTrack="false"
-            android:thumbOffset="@dimen/offset_thumb"
-            android:thumbTint="?attr/colorPrimary"
+            android:layout_width="match_parent"
+            style="@style/Widget.SeekBar.Full"
             app:layout_constraintBottom_toTopOf="@+id/playback_duration_current"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/fragment_queue.xml b/app/src/main/res/layout/fragment_queue.xml
index 6a79d07e5..45d0ec08c 100644
--- a/app/src/main/res/layout/fragment_queue.xml
+++ b/app/src/main/res/layout/fragment_queue.xml
@@ -13,9 +13,7 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/queue_toolbar"
-            style="@style/Toolbar.Style.Icon"
-            android:background="?android:attr/windowBackground"
-            android:elevation="@dimen/elevation_normal"
+            style="@style/Toolbar.Style.Icon.Down"
             app:navigationIcon="@drawable/ic_down"
             app:title="@string/label_queue" />
 
diff --git a/app/src/main/res/layout/fragment_search.xml b/app/src/main/res/layout/fragment_search.xml
index 3ac746ef9..7b3c7d701 100644
--- a/app/src/main/res/layout/fragment_search.xml
+++ b/app/src/main/res/layout/fragment_search.xml
@@ -17,7 +17,7 @@
             <androidx.appcompat.widget.Toolbar
                 android:id="@+id/search_toolbar"
                 style="@style/Toolbar.Style"
-                android:background="?attr/colorSurface"
+                android:elevation="0dp"
                 app:layout_scrollFlags="scroll|enterAlways"
                 app:menu="@menu/menu_search"
                 app:title="@string/label_search" />
diff --git a/app/src/main/res/layout/fragment_settings.xml b/app/src/main/res/layout/fragment_settings.xml
index da72ded99..d0e2bc8eb 100644
--- a/app/src/main/res/layout/fragment_settings.xml
+++ b/app/src/main/res/layout/fragment_settings.xml
@@ -12,8 +12,6 @@
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/settings_toolbar"
             style="@style/Toolbar.Style"
-            android:background="?android:attr/windowBackground"
-            android:elevation="@dimen/elevation_normal"
             app:menu="@menu/menu_settings"
             app:title="@string/setting_title" />
 
diff --git a/app/src/main/res/layout/fragment_songs.xml b/app/src/main/res/layout/fragment_songs.xml
index c6d23a922..5c89cae1b 100644
--- a/app/src/main/res/layout/fragment_songs.xml
+++ b/app/src/main/res/layout/fragment_songs.xml
@@ -13,8 +13,6 @@
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/song_toolbar"
             style="@style/Toolbar.Style"
-            android:background="?android:attr/windowBackground"
-            android:elevation="@dimen/elevation_normal"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:menu="@menu/menu_songs"
diff --git a/app/src/main/res/layout/item_album_header.xml b/app/src/main/res/layout/item_album_header.xml
index 8c347f32c..4e803e6ee 100644
--- a/app/src/main/res/layout/item_album_header.xml
+++ b/app/src/main/res/layout/item_album_header.xml
@@ -25,12 +25,11 @@
 
         <ImageView
             android:id="@+id/album_cover"
+            style="@style/ElevatedImageView"
             android:layout_width="@dimen/size_cover_detail"
             android:layout_height="@dimen/size_cover_detail"
             android:layout_marginTop="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_album_cover(album.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
             app:albumArt="@{album}"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/item_artist_header.xml b/app/src/main/res/layout/item_artist_header.xml
index b60e3d514..101bf9b9b 100644
--- a/app/src/main/res/layout/item_artist_header.xml
+++ b/app/src/main/res/layout/item_artist_header.xml
@@ -25,8 +25,7 @@
             android:layout_height="@dimen/size_cover_detail"
             android:layout_marginTop="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_artist_image(artist.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:artistImage="@{artist}"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/item_genre_header.xml b/app/src/main/res/layout/item_genre_header.xml
index fe6f238b1..5f8c2d08b 100644
--- a/app/src/main/res/layout/item_genre_header.xml
+++ b/app/src/main/res/layout/item_genre_header.xml
@@ -30,8 +30,7 @@
             android:layout_height="@dimen/size_cover_detail"
             android:layout_marginTop="@dimen/spacing_medium"
             android:contentDescription="@{@string/description_genre_image(genre.name)}"
-            android:elevation="@dimen/elevation_normal"
-            android:outlineProvider="bounds"
+            style="@style/ElevatedImageView"
             app:genreImage="@{genre}"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/values-large/styles.xml b/app/src/main/res/values-large/styles_component.xml
similarity index 100%
rename from app/src/main/res/values-large/styles.xml
rename to app/src/main/res/values-large/styles_component.xml
diff --git a/app/src/main/res/values-night-v27/styles.xml b/app/src/main/res/values-night-v27/styles_core.xml
similarity index 100%
rename from app/src/main/res/values-night-v27/styles.xml
rename to app/src/main/res/values-night-v27/styles_core.xml
diff --git a/app/src/main/res/values-v27/styles.xml b/app/src/main/res/values-v27/styles_core.xml
similarity index 100%
rename from app/src/main/res/values-v27/styles.xml
rename to app/src/main/res/values-v27/styles_core.xml
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
deleted file mode 100644
index f96b5e0cc..000000000
--- a/app/src/main/res/values/styles.xml
+++ /dev/null
@@ -1,265 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <!-- Master parent theme based off of Theme.MaterialComponents.DayNight.NoActionBar.Bridge -->
-    <style name="Theme.Master" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" />
-    <!-- Template theme that handles edge-to-edge on other styles variants -->
-    <style name="Theme.Template" parent="Theme.Master" />
-
-    <!-- Refactor styles again to move more stuff into this -->
-
-    <!-- Base theme -->
-    <style name="Theme.Base" parent="Theme.Template">
-        <item name="android:windowBackground">?attr/colorSurface</item>
-        <item name="android:colorBackground">?attr/colorSurface</item>
-        <item name="android:fontFamily">@font/inter</item>
-        <item name="android:scrollbars">none</item>
-        <item name="android:windowIsFloating">false</item>
-        <item name="android:textCursorDrawable">@drawable/ui_cursor</item>
-
-        <!-- Default values for the accents. -->
-        <item name="colorPrimary">@color/design_default_color_primary</item>
-        <item name="colorSecondary">@color/design_default_color_primary</item>
-
-        <item name="popupMenuStyle">@style/Widget.CustomPopup</item>
-        <item name="colorControlNormal">@color/control_color</item>
-        <item name="colorControlHighlight">@color/selection_color</item>
-        <item name="colorControlActivated">?attr/colorPrimary</item>
-        <item name="cornerRadius">0dp</item>
-
-        <item name="colorSurface">@color/background</item>
-
-        <!--
-        These exact flags, in this exact order, in this exact formatting somehow make
-        the dialogs use the nicer material style. Please do not touch this or format it.
-        -->
-        <!-- @formatter:off -->
-        <item name="viewInflaterClass">com.google.android.material.theme.MaterialComponentsViewInflater</item>
-        <item name="alertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
-        <item name="materialAlertDialogTheme">@style/Theme.CustomDialog</item>
-        <!-- @formatter:on -->
-    </style>
-
-    <!-- Toolbar theme -->
-    <style name="Toolbar.Style" parent="ThemeOverlay.MaterialComponents.ActionBar">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">?android:attr/actionBarSize</item>
-        <item name="popupTheme">@style/AppThemeOverlay.ToolbarPopup</item>
-
-        <item name="titleTextAppearance">@style/TextAppearance.Toolbar.Header</item>
-        <item name="titleTextColor">?attr/colorPrimary</item>
-    </style>
-
-    <!-- Toolbar sub-style with a nav icon -->
-    <style name="Toolbar.Style.Icon" parent="Toolbar.Style">
-        <item name="navigationIcon">@drawable/ic_back</item>
-        <item name="contentInsetStartWithNavigation">0dp</item>
-    </style>
-
-    <!-- Toolbar popup menu -->
-    <style name="AppThemeOverlay.ToolbarPopup" parent="ThemeOverlay.AppCompat.DayNight">
-        <item name="android:colorBackground">@color/background</item>
-        <item name="colorControlHighlight">@color/selection_color</item>
-    </style>
-
-    <!-- Toolbar Title EntryNames -->
-    <style name="TextAppearance.Toolbar.Header" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
-        <item name="android:fontFamily">@font/inter_bold</item>
-        <item name="android:textSize">@dimen/text_size_toolbar_header</item>
-    </style>
-
-    <!-- Title theme for Detail Fragments -->
-    <style name="DetailTitleText">
-        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
-        <item name="android:textColor">?attr/colorPrimary</item>
-        <item name="android:fontFamily">@font/inter_bold</item>
-        <item name="android:textSize">@dimen/text_size_detail_header_max</item>
-        <item name="android:maxLines">1</item>
-        <item name="android:ellipsize">end</item>
-        <item name="android:textAlignment">viewStart</item>
-        <item name="android:gravity">center_vertical</item>
-
-        <item name="autoSizeMaxTextSize">@dimen/text_size_detail_header_max</item>
-        <item name="autoSizeMinTextSize">@dimen/text_size_min</item>
-        <item name="autoSizeStepGranularity">@dimen/text_size_increment</item>
-        <item name="autoSizeTextType">uniform</item>
-    </style>
-
-    <!-- Smaller Title theme that is used for headers -->
-    <style name="TextAppearance.SmallHeader" parent="TextAppearance.MaterialComponents.Body2">
-        <item name="android:fontFamily">@font/inter_semibold</item>
-    </style>
-
-    <!-- Custom popup menu theme -->
-    <style name="Widget.CustomPopup" parent="Widget.AppCompat.PopupMenu">
-        <item name="android:popupBackground">@color/background</item>
-        <item name="colorControlHighlight">@color/selection_color</item>
-        <item name="cornerRadius">0dp</item>
-    </style>
-
-    <!-- Custom Dialog EntryNames -->
-    <style name="Theme.CustomDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
-        <item name="android:colorControlHighlight">@color/selection_color</item>
-        <item name="android:checkedTextViewStyle">@style/Widget.CheckedTextView.Dialog</item>
-
-        <item name="materialAlertDialogTitleTextStyle">@style/Widget.TextView.Dialog.Title</item>
-        <item name="colorBackgroundFloating">@color/background</item>
-        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
-
-        <item name="buttonBarPositiveButtonStyle">@style/Widget.Button.Dialog</item>
-        <item name="buttonBarNegativeButtonStyle">@style/Widget.Button.Dialog</item>
-        <item name="buttonBarNeutralButtonStyle">@style/Widget.Button.Dialog.Neutral</item>
-    </style>
-
-    <!-- Baseline dialog style -->
-    <style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
-        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.Angular</item>
-    </style>
-
-    <!-- Dialog shape with no rounded corners -->
-    <style name="ShapeAppearance.Angular" parent="ShapeAppearance.MaterialComponents.MediumComponent">
-        <item name="cornerFamily">cut</item>
-        <item name="cornerRadius">0dp</item>
-    </style>
-
-    <!-- Custom dialog title theme -->
-    <style name="Widget.TextView.Dialog.Title" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
-        <item name="android:fontFamily">@font/inter_bold</item>
-        <item name="android:textSize">@dimen/text_size_toolbar_header</item>
-    </style>
-
-    <!-- The style for the checked text view in the custom dialog -->
-    <style name="Widget.CheckedTextView.Dialog" parent="Widget.MaterialComponents.CheckedTextView">
-        <item name="android:textColor">?android:attr/textColorPrimary</item>
-        <item name="android:textSize">18sp</item>
-        <item name="android:background">@null</item>
-    </style>
-
-    <!-- Style for dialog buttons -->
-    <style name="Widget.Button.Dialog" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_width">wrap_content</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
-        <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
-        <item name="rippleColor">@color/selection_color</item>
-        <item name="cornerRadius">0dp</item>
-    </style>
-
-    <!-- Custom button style that eliminates the weird margin that the neutral button has -->
-    <style name="Widget.Button.Dialog.Neutral" parent="Widget.Button.Dialog">
-        <item name="android:layout_marginStart">0dp</item>
-    </style>
-
-    <!-- Style for the general item background -->
-    <style name="ItemSurroundings">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:background">@drawable/ui_ripple</item>
-        <item name="android:padding">@dimen/spacing_medium</item>
-        <item name="android:clickable">true</item>
-        <item name="android:focusable">true</item>
-    </style>
-
-    <!-- Base style for any item text -->
-    <style name="ItemText">
-        <item name="android:textAlignment">viewStart</item>
-        <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:ellipsize">end</item>
-        <item name="android:maxLines">1</item>
-        <item name="android:layout_marginStart">@dimen/spacing_medium</item>
-    </style>
-
-    <!-- Style for primary item text -->
-    <style name="ItemText.Primary" parent="ItemText">
-        <item name="android:textAppearance">?android:attr/textAppearanceListItem</item>
-        <item name="android:textColor">?android:attr/textColorPrimary</item>
-    </style>
-
-    <!-- Style for secondary item text -->
-    <style name="ItemText.Secondary" parent="ItemText">
-        <item name="android:textAppearance">?android:attr/textAppearanceListItemSecondary</item>
-        <item name="android:textColor">?android:attr/textColorSecondary</item>
-    </style>
-
-    <!-- Style for header text -->
-    <style name="HeaderText">
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:paddingStart">@dimen/spacing_medium</item>
-        <item name="android:paddingTop">@dimen/spacing_small</item>
-        <item name="android:paddingBottom">@dimen/spacing_small</item>
-        <item name="android:paddingEnd">@dimen/spacing_medium</item>
-        <item name="android:textSize">@dimen/text_size_header</item>
-        <item name="android:textColor">?android:attr/textColorPrimary</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
-        <item name="android:background">@drawable/ui_header_dividers</item>
-        <item name="android:textAlignment">viewStart</item>
-    </style>
-
-    <!-- Style for an action header -->
-    <style name="HeaderAction">
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_width">0dp</item>
-        <item name="android:paddingStart">@dimen/spacing_medium</item>
-        <item name="android:paddingTop">@dimen/spacing_small</item>
-        <item name="android:paddingBottom">@dimen/spacing_small</item>
-        <item name="android:paddingEnd">@dimen/spacing_medium</item>
-        <item name="android:background">@drawable/ui_small_unbounded_ripple</item>
-    </style>
-
-    <!-- Base style for the material buttons -->
-    <style name="Widget.MaterialComponents.Button.Base" parent="@style/Widget.MaterialComponents.Button.TextButton">
-        <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:clickable">true</item>
-        <item name="android:focusable">true</item>
-        <item name="rippleColor">?attr/colorControlHighlight</item>
-        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="textAllCaps">false</item>
-        <item name="cornerRadius">0dp</item>
-    </style>
-
-    <!-- An "Unimportant" material button, used for the "Play" button -->
-    <style name="Widget.MaterialComponents.Button.Unimportant" parent="@style/Widget.MaterialComponents.Button.Base">
-        <item name="android:layout_marginTop">@dimen/spacing_small</item>
-        <item name="android:layout_marginStart">@dimen/spacing_medium</item>
-        <item name="android:layout_marginEnd">@dimen/spacing_small</item>
-        <item name="strokeColor">@color/divider_color</item>
-        <item name="strokeWidth">@dimen/width_play_stroke</item>
-    </style>
-
-    <!-- An highlighted material button, used for the "Shuffle" button -->
-    <style name="Widget.MaterialComponents.Button.Highlighted" parent="@style/Widget.MaterialComponents.Button.Base">
-        <item name="android:layout_marginStart">@dimen/spacing_small</item>
-        <item name="android:layout_marginEnd">@dimen/spacing_medium</item>
-        <item name="rippleColor">?attr/colorControlHighlight</item>
-        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="textAllCaps">false</item>
-        <item name="android:textColor">@color/background</item>
-    </style>
-
-    <!-- Style for an unbounded button -->
-    <style name="Widget.Button.Unbounded" parent="Widget.AppCompat.Button.Borderless">
-        <item name="android:layout_width">@dimen/size_play_pause_compact</item>
-        <item name="android:layout_height">@dimen/size_play_pause_compact</item>
-        <item name="android:background">@drawable/ui_unbounded_ripple</item>
-        <item name="android:scaleType">fitCenter</item>
-        <item name="android:padding">@dimen/spacing_micro</item>
-    </style>
-
-    <!-- Style for the play/pause circle button -->
-    <style name="PlayPause">
-        <item name="android:layout_height">@dimen/size_play_pause</item>
-        <item name="android:layout_width">@dimen/size_play_pause</item>
-        <item name="android:background">@drawable/ui_circle_ripple</item>
-        <item name="android:backgroundTint">?attr/colorPrimary</item>
-        <item name="android:elevation">@dimen/elevation_normal</item>
-        <item name="android:contentDescription">@string/description_play_pause</item>
-        <item name="android:tint">?android:attr/windowBackground</item>
-        <item name="android:layout_marginStart">@dimen/spacing_large</item>
-        <item name="android:layout_marginTop">@dimen/spacing_medium</item>
-        <item name="android:layout_marginEnd">@dimen/spacing_large</item>
-        <item name="android:scaleType">fitCenter</item>
-        <item name="android:padding">@dimen/spacing_medium</item>
-    </style>
-</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles_android.xml b/app/src/main/res/values/styles_android.xml
new file mode 100644
index 000000000..93f7ebaaf
--- /dev/null
+++ b/app/src/main/res/values/styles_android.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- ANDROID COMPONENT-SPECIFIC STYLES. MOSTLY HACKS -->
+
+    <!-- Custom popup menu theme -->
+    <style name="Widget.CustomPopup" parent="Widget.AppCompat.PopupMenu">
+        <item name="android:popupBackground">@color/background</item>
+        <item name="colorControlHighlight">@color/selection_color</item>
+        <item name="cornerRadius">0dp</item>
+    </style>
+
+    <!-- Custom Dialog EntryNames -->
+    <style name="Theme.CustomDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
+        <item name="android:colorControlHighlight">@color/selection_color</item>
+        <item name="android:checkedTextViewStyle">@style/Widget.CheckedTextView.Dialog</item>
+
+        <item name="materialAlertDialogTitleTextStyle">@style/Widget.TextView.Dialog.Title</item>
+        <item name="colorBackgroundFloating">@color/background</item>
+        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
+
+        <item name="buttonBarPositiveButtonStyle">@style/Widget.Button.Dialog</item>
+        <item name="buttonBarNegativeButtonStyle">@style/Widget.Button.Dialog</item>
+        <item name="buttonBarNeutralButtonStyle">@style/Widget.Button.Dialog.Neutral</item>
+    </style>
+
+    <!-- Baseline dialog style -->
+    <style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
+        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.Angular</item>
+    </style>
+
+    <!-- Dialog shape with no rounded corners -->
+    <style name="ShapeAppearance.Angular" parent="ShapeAppearance.MaterialComponents.MediumComponent">
+        <item name="cornerFamily">cut</item>
+        <item name="cornerRadius">0dp</item>
+    </style>
+
+    <!-- Custom dialog title theme -->
+    <style name="Widget.TextView.Dialog.Title" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
+        <item name="android:fontFamily">@font/inter_bold</item>
+        <item name="android:textSize">@dimen/text_size_toolbar_header</item>
+    </style>
+
+    <!-- The style for the checked text view in the custom dialog -->
+    <style name="Widget.CheckedTextView.Dialog" parent="Widget.MaterialComponents.CheckedTextView">
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
+        <item name="android:textSize">18sp</item>
+        <item name="android:background">@null</item>
+    </style>
+
+    <!-- Style for dialog buttons -->
+    <style name="Widget.Button.Dialog" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
+        <item name="rippleColor">@color/selection_color</item>
+        <item name="cornerRadius">0dp</item>
+    </style>
+
+    <!-- Custom button style that eliminates the weird margin that the neutral button has -->
+    <style name="Widget.Button.Dialog.Neutral" parent="Widget.Button.Dialog">
+        <item name="android:layout_marginStart">0dp</item>
+    </style>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles_component.xml b/app/src/main/res/values/styles_component.xml
new file mode 100644
index 000000000..ab335b0f1
--- /dev/null
+++ b/app/src/main/res/values/styles_component.xml
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- COMPONENT-SPECIFIC STYLES. NOT RE-USABLE. -->
+
+    <!-- Title theme for Detail Fragments -->
+    <style name="DetailTitleText">
+        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
+        <item name="android:textColor">?attr/colorPrimary</item>
+        <item name="android:fontFamily">@font/inter_bold</item>
+        <item name="android:textSize">@dimen/text_size_detail_header_max</item>
+        <item name="android:maxLines">1</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:textAlignment">viewStart</item>
+        <item name="android:gravity">center_vertical</item>
+
+        <item name="autoSizeMaxTextSize">@dimen/text_size_detail_header_max</item>
+        <item name="autoSizeMinTextSize">@dimen/text_size_min</item>
+        <item name="autoSizeStepGranularity">@dimen/text_size_increment</item>
+        <item name="autoSizeTextType">uniform</item>
+    </style>
+
+    <!-- Style for an action header -->
+    <style name="HeaderAction">
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_width">0dp</item>
+        <item name="android:paddingStart">@dimen/spacing_medium</item>
+        <item name="android:paddingTop">@dimen/spacing_small</item>
+        <item name="android:paddingBottom">@dimen/spacing_small</item>
+        <item name="android:paddingEnd">@dimen/spacing_medium</item>
+        <item name="android:background">@drawable/ui_small_unbounded_ripple</item>
+    </style>
+
+    <!-- Style for the about textviews -->
+    <style name="Widget.TextView.About" parent="Widget.AppCompat.TextView">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:drawablePadding">@dimen/spacing_medium</item>
+        <item name="android:padding">@dimen/spacing_medium</item>
+        <item name="android:textAlignment">viewStart</item>
+        <item name="android:textAppearance">@style/TextAppearance.AppCompat.Subhead</item>
+    </style>
+
+    <!-- Style for clickable about textviews -->
+    <style name="Widget.TextView.About.Clickable" parent="Widget.TextView.About">
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+        <item name="android:background">@drawable/ui_ripple</item>
+    </style>
+
+    <!-- Style for the play/pause circle button -->
+    <style name="PlayPause">
+        <item name="android:layout_height">@dimen/size_play_pause</item>
+        <item name="android:layout_width">@dimen/size_play_pause</item>
+        <item name="android:background">@drawable/ui_circle_ripple</item>
+        <item name="android:backgroundTint">?attr/colorPrimary</item>
+        <item name="android:elevation">@dimen/elevation_normal</item>
+        <item name="android:contentDescription">@string/description_play_pause</item>
+        <item name="android:tint">?android:attr/windowBackground</item>
+        <item name="android:layout_marginStart">@dimen/spacing_large</item>
+        <item name="android:layout_marginTop">@dimen/spacing_medium</item>
+        <item name="android:layout_marginEnd">@dimen/spacing_large</item>
+        <item name="android:scaleType">fitCenter</item>
+        <item name="android:padding">@dimen/spacing_medium</item>
+    </style>
+
+    <style name="Widget.TextView.Compact.Base" parent="Widget.AppCompat.TextView">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginStart">@dimen/spacing_small</item>
+        <item name="android:layout_marginEnd">@dimen/spacing_small</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:singleLine">true</item>
+        <item name="android:textAlignment">viewStart</item>
+    </style>
+
+    <style name="Widget.TextView.Compact.Primary" parent="Widget.TextView.Compact.Base">
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Body2</item>
+    </style>
+
+    <style name="Widget.TextView.Compact.Secondary" parent="Widget.TextView.Compact.Base">
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Caption</item>
+    </style>
+
+    <style name="Widget.TextView.Playback.Base" parent="Widget.AppCompat.TextView">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:singleLine">true</item>
+        <item name="android:textAlignment">viewStart</item>
+    </style>
+
+    <style name="Widget.TextView.Playback.Primary" parent="Widget.TextView.Playback.Base">
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:ellipsize">marquee</item>
+        <item name="android:marqueeRepeatLimit">marquee_forever</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Headline6</item>
+    </style>
+
+    <style name="Widget.TextView.Playback.Secondary" parent="Widget.TextView.Playback.Base">
+        <item name="android:ellipsize">end</item>
+        <item name="android:textColor">?android:attr/textColorSecondary</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Subtitle1</item>
+    </style>
+
+    <style name="CompactImageView">
+        <item name="android:layout_width">@dimen/size_cover_compact</item>
+        <item name="android:layout_height">@dimen/size_cover_compact</item>
+        <item name="android:layout_margin">@dimen/spacing_small</item>
+        <item name="layout_constraintDimensionRatio">1:1</item>
+    </style>
+
+    <style name="ElevatedImageView">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">0dp</item>
+        <item name="android:elevation">@dimen/elevation_normal</item>
+        <item name="android:outlineProvider">bounds</item>
+    </style>
+
+    <style name="Widget.Seekbar.Compact" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">@dimen/height_compact_progress</item>
+        <item name="android:progressBackgroundTint">?attr/colorControlNormal</item>
+        <item name="android:progressTint">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Widget.SeekBar.Full" parent="@style/Widget.AppCompat.SeekBar">
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+        <item name="android:paddingStart">@dimen/spacing_mid_large</item>
+        <item name="android:paddingEnd">@dimen/spacing_mid_large</item>
+        <item name="android:progressBackgroundTint">?android:attr/colorControlNormal</item>
+        <item name="android:progressTint">?attr/colorPrimary</item>
+        <item name="android:splitTrack">false</item>
+        <item name="android:thumbOffset">@dimen/offset_thumb</item>
+        <item name="android:thumbTint">?attr/colorPrimary</item>
+    </style>
+
+    <style name="Widget.Button.Unbounded.PlayPause" parent="Widget.Button.Unbounded">
+        <item name="android:padding">0dp</item>
+        <item name="android:layout_marginEnd">@dimen/spacing_small</item>
+    </style>
+
+    <!-- Base style for the material buttons -->
+    <style name="Widget.MaterialComponents.Button.Base" parent="@style/Widget.MaterialComponents.Button.TextButton">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+        <item name="rippleColor">?attr/colorControlHighlight</item>
+        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="textAllCaps">false</item>
+        <item name="cornerRadius">0dp</item>
+    </style>
+
+    <!-- An "Unimportant" material button, used for the "Play" button -->
+    <style name="Widget.MaterialComponents.Button.Unimportant" parent="@style/Widget.MaterialComponents.Button.Base">
+        <item name="android:layout_marginTop">@dimen/spacing_small</item>
+        <item name="android:layout_marginStart">@dimen/spacing_medium</item>
+        <item name="android:layout_marginEnd">@dimen/spacing_small</item>
+        <item name="strokeColor">@color/divider_color</item>
+        <item name="strokeWidth">@dimen/width_play_stroke</item>
+    </style>
+
+    <!-- An highlighted material button, used for the "Shuffle" button -->
+    <style name="Widget.MaterialComponents.Button.Highlighted" parent="@style/Widget.MaterialComponents.Button.Base">
+        <item name="android:layout_marginStart">@dimen/spacing_small</item>
+        <item name="android:layout_marginEnd">@dimen/spacing_medium</item>
+        <item name="rippleColor">?attr/colorControlHighlight</item>
+        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="textAllCaps">false</item>
+        <item name="android:textColor">@color/background</item>
+    </style>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles_core.xml b/app/src/main/res/values/styles_core.xml
new file mode 100644
index 000000000..cbda76239
--- /dev/null
+++ b/app/src/main/res/values/styles_core.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Master parent theme based off of Theme.MaterialComponents.DayNight.NoActionBar.Bridge -->
+    <style name="Theme.Master" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" />
+    <!-- Template theme that handles edge-to-edge on other styles variants -->
+    <style name="Theme.Template" parent="Theme.Master" />
+
+    <!-- Base theme -->
+    <style name="Theme.Base" parent="Theme.Template">
+        <item name="android:windowBackground">?attr/colorSurface</item>
+        <item name="android:colorBackground">?attr/colorSurface</item>
+        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:scrollbars">none</item>
+        <item name="android:windowIsFloating">false</item>
+        <item name="android:textCursorDrawable">@drawable/ui_cursor</item>
+
+        <!-- Default values for the accents. -->
+        <item name="colorPrimary">@color/design_default_color_primary</item>
+        <item name="colorSecondary">@color/design_default_color_primary</item>
+
+        <item name="popupMenuStyle">@style/Widget.CustomPopup</item>
+        <item name="colorControlNormal">@color/control_color</item>
+        <item name="colorControlHighlight">@color/selection_color</item>
+        <item name="colorControlActivated">?attr/colorPrimary</item>
+        <item name="cornerRadius">0dp</item>
+
+        <item name="colorSurface">@color/background</item>
+
+        <!--
+        These exact flags, in this exact order, in this exact formatting somehow make
+        the dialogs use the nicer material style. Please do not touch this or format it.
+        -->
+        <!-- @formatter:off -->
+        <item name="viewInflaterClass">com.google.android.material.theme.MaterialComponentsViewInflater</item>
+        <item name="alertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
+        <item name="materialAlertDialogTheme">@style/Theme.CustomDialog</item>
+        <!-- @formatter:on -->
+    </style>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles_ui.xml b/app/src/main/res/values/styles_ui.xml
new file mode 100644
index 000000000..e8a95c93f
--- /dev/null
+++ b/app/src/main/res/values/styles_ui.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- SHARED RE-USABLE UI STYLES -->
+
+    <!-- Toolbar theme -->
+    <style name="Toolbar.Style" parent="ThemeOverlay.MaterialComponents.ActionBar">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">?android:attr/actionBarSize</item>
+        <item name="android:background">?attr/colorSurface</item>
+        <item name="android:elevation">@dimen/elevation_normal</item>
+        <item name="popupTheme">@style/AppThemeOverlay.ToolbarPopup</item>
+
+        <item name="titleTextAppearance">@style/TextAppearance.Toolbar.Header</item>
+        <item name="titleTextColor">?attr/colorPrimary</item>
+        <item name="contentInsetStartWithNavigation">0dp</item>
+    </style>
+
+    <!-- Toolbar sub-style with a nav icon -->
+    <style name="Toolbar.Style.Icon" parent="Toolbar.Style">
+        <item name="navigationIcon">@drawable/ic_back</item>
+    </style>
+
+    <!-- Toolbar sub-style with a downwards nav icon -->
+    <style name="Toolbar.Style.Icon.Down" parent="Toolbar.Style">
+        <item name="navigationIcon">@drawable/ic_down</item>
+    </style>
+
+    <!-- Toolbar popup menu -->
+    <style name="AppThemeOverlay.ToolbarPopup" parent="ThemeOverlay.AppCompat.DayNight">
+        <item name="android:colorBackground">@color/background</item>
+        <item name="colorControlHighlight">@color/selection_color</item>
+    </style>
+
+    <!-- Toolbar Title EntryNames -->
+    <style name="TextAppearance.Toolbar.Header" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
+        <item name="android:fontFamily">@font/inter_bold</item>
+        <item name="android:textSize">@dimen/text_size_toolbar_header</item>
+    </style>
+
+    <!-- Style for the general item background -->
+    <style name="ItemSurroundings">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:background">@drawable/ui_ripple</item>
+        <item name="android:padding">@dimen/spacing_medium</item>
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+    </style>
+
+    <!-- Base style for any item text -->
+    <style name="ItemText">
+        <item name="android:textAlignment">viewStart</item>
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:maxLines">1</item>
+        <item name="android:layout_marginStart">@dimen/spacing_medium</item>
+    </style>
+
+    <!-- Style for primary item text -->
+    <style name="ItemText.Primary" parent="ItemText">
+        <item name="android:textAppearance">?android:attr/textAppearanceListItem</item>
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
+    </style>
+
+    <!-- Style for secondary item text -->
+    <style name="ItemText.Secondary" parent="ItemText">
+        <item name="android:textAppearance">?android:attr/textAppearanceListItemSecondary</item>
+        <item name="android:textColor">?android:attr/textColorSecondary</item>
+    </style>
+
+    <!-- Style for header text -->
+    <style name="HeaderText">
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:paddingStart">@dimen/spacing_medium</item>
+        <item name="android:paddingTop">@dimen/spacing_small</item>
+        <item name="android:paddingBottom">@dimen/spacing_small</item>
+        <item name="android:paddingEnd">@dimen/spacing_medium</item>
+        <item name="android:textSize">@dimen/text_size_header</item>
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:background">@drawable/ui_header_dividers</item>
+        <item name="android:textAlignment">viewStart</item>
+    </style>
+
+    <!-- Style for an unbounded button -->
+    <style name="Widget.Button.Unbounded" parent="Widget.AppCompat.Button.Borderless">
+        <item name="android:layout_width">@dimen/size_play_pause_compact</item>
+        <item name="android:layout_height">@dimen/size_play_pause_compact</item>
+        <item name="android:background">@drawable/ui_unbounded_ripple</item>
+        <item name="android:scaleType">fitCenter</item>
+        <item name="android:padding">@dimen/spacing_micro</item>
+    </style>
+
+    <style name="Widget.Button.Unbounded.Text" parent="Widget.AppCompat.Button.Borderless.Colored">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:textColor">?attr/colorPrimary</item>
+    </style>
+</resources>
\ No newline at end of file