ui: rework typography

Completely rework app typography.

Today I found out that inter has a tool that allowed you to generate
line spacings for a particular font size. Several hours later, I
regenerated the entirety of Auxio's typography to use this new system.

Moreso, I also tried to eliminate some of the non-standard text styles
that I was using prior. That failed. Mostly there's two edge-cases
regarding title bolding and the playback view that I simply cannot
work through right now, since M3's typography system is horribly
restrictive.

CHANGELOG.md

@@ -14,6 +14,10 @@
 - Fixed crash if settings was navigated away before playback state
 finished saving
 
+#### What's Changed
+- Reworked typography and iconography to be more aligned with material
+design guidelines
+
 #### Dev/Meta
 - Migrated preferences from shared object to utility
 - Removed 2.0.0 compat code

app/src/main/res/layout-sw600dp/fragment_playback_bar.xml

@@ -22,7 +22,7 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/spacing_small"
         android:layout_marginEnd="@dimen/spacing_small"
-        android:textAppearance="@style/TextAppearance.Auxio.LabelLarger"
+        android:textAppearance="@style/TextAppearance.Auxio.LabelLarge"
         app:layout_constraintBottom_toTopOf="@+id/playback_info"
         app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
         app:layout_constraintStart_toEndOf="@+id/playback_cover"
@@ -38,7 +38,7 @@
         android:layout_marginStart="@dimen/spacing_small"
         android:layout_marginEnd="@dimen/spacing_small"
         android:ellipsize="end"
-        android:textAppearance="@style/TextAppearance.Auxio.LabelLarge"
+        android:textAppearance="@style/TextAppearance.Auxio.LabelMedium"
         app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
         app:layout_constraintEnd_toStartOf="@+id/playback_play_pause"
         app:layout_constraintStart_toEndOf="@+id/playback_cover"

app/src/main/res/layout/dialog_accent.xml

@@ -4,11 +4,11 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/accent_recycler"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
     android:paddingStart="@dimen/spacing_medium"
     android:paddingEnd="@dimen/spacing_medium"
     app:layoutManager="org.oxycblt.auxio.ui.accent.AccentGridLayoutManager"
     app:layout_constraintBottom_toTopOf="@+id/accent_cancel"
     app:layout_constraintTop_toBottomOf="@+id/accent_header"
-    tools:itemCount="18"
+    tools:itemCount="16"
     tools:listitem="@layout/item_accent" />

app/src/main/res/layout/dialog_music_dirs.xml

@@ -33,7 +33,7 @@
             android:paddingBottom="@dimen/spacing_medium"
             android:text="@string/err_no_dirs"
             android:textAlignment="center"
-            android:textAppearance="@style/TextAppearance.Auxio.TitleMidLarge"
+            android:textAppearance="@style/TextAppearance.Auxio.LabelLarge"
             android:textColor="?android:attr/textColorSecondary" />
 
         <TextView

app/src/main/res/layout/fragment_home.xml

@@ -27,8 +27,7 @@
             android:background="@android:color/transparent"
             app:tabContentStart="@dimen/spacing_medium"
             app:tabGravity="start"
-            app:tabMode="scrollable"
+            app:tabMode="scrollable" />
-            app:tabTextAppearance="@style/TextAppearance.Auxio.LabelLarger" />
 
     </org.oxycblt.auxio.ui.EdgeAppBarLayout>
 

app/src/main/res/layout/fragment_main.xml

@@ -54,7 +54,7 @@
             android:gravity="center"
             android:padding="@dimen/spacing_medium"
             android:text="@string/err_too_small"
-            android:textAppearance="@style/TextAppearance.Auxio.TitleMidLarge"
+            android:textAppearance="@style/TextAppearance.Auxio.TitleMedium"
             android:textColor="?android:attr/textColorPrimary"
             android:textStyle="bold" />
 

app/src/main/res/values/styles_android.xml

@@ -8,7 +8,6 @@
     -->
     <style name="Theme.Auxio.Dialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
         <item name="android:checkedTextViewStyle">@style/Widget.Auxio.Dialog.CheckedTextView</item>
-        <item name="materialAlertDialogTitleTextStyle">@style/Widget.Auxio.Dialog.TextView</item>
         <item name="buttonBarPositiveButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog
         </item>
         <item name="buttonBarNegativeButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog
@@ -16,16 +15,9 @@
         <item name="buttonBarNeutralButtonStyle">@style/Widget.Auxio.Dialog.Button.Flush</item>
     </style>
 
-    <!-- Custom dialog title theme -->
-    <style name="Widget.Auxio.Dialog.TextView" parent="MaterialAlertDialog.Material3.Title.Text">
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.TitleLarge</item>
-    </style>
-
     <!-- The style for the checked text view in the custom dialog -->
     <style name="Widget.Auxio.Dialog.CheckedTextView" parent="Widget.Material3.CheckedTextView">
         <item name="android:textColor">?android:attr/textColorPrimary</item>
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.BodyLarge</item>
-        <item name="android:background">@null</item>
     </style>
 
     <!-- Custom button style that eliminates the weird margin that the neutral button has -->

app/src/main/res/values/styles_ui.xml

@@ -193,7 +193,7 @@
         <item name="android:paddingEnd">@dimen/spacing_medium</item>
         <item name="android:minHeight">@dimen/size_btn</item>
         <item name="android:gravity">center_vertical</item>
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarger</item>
+        <item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMediumEmphasis</item>
     </style>
 
     <style name="Widget.Auxio.TextView.Detail" parent="Widget.Auxio.TextView.Base">
@@ -216,11 +216,10 @@
     <!-- BUTTON STYLES -->
 
     <style name="Widget.Auxio.Button.Primary" parent="Widget.Material3.Button">
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarger</item>
+
     </style>
 
     <style name="Widget.Auxio.Button.Secondary" parent="Widget.Material3.Button.OutlinedButton">
-        <item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarger</item>
         <item name="strokeColor">?attr/colorOutline</item>
     </style>
 

app/src/main/res/values/typography.xml

@@ -13,18 +13,21 @@
         <item name="fontFamily">@font/inter_semibold</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">bold</item>
+        <item name="android:letterSpacing">-0.0192807018</item>
     </style>
 
     <style name="TextAppearance.Auxio.DisplayMedium" parent="TextAppearance.Material3.DisplayMedium">
         <item name="fontFamily">@font/inter</item>
-        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">normal</item>
+        <item name="android:letterSpacing">-0.0192222222</item>
     </style>
 
     <style name="TextAppearance.Auxio.DisplaySmall" parent="TextAppearance.Material3.DisplaySmall">
         <item name="fontFamily">@font/inter</item>
-        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">normal</item>
+        <item name="android:letterSpacing">-0.0189444444</item>
     </style>
 
     <!--
@@ -34,42 +37,38 @@
         <item name="fontFamily">@font/inter_semibold</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">bold</item>
+        <item name="android:letterSpacing">-0.0185625</item>
     </style>
 
     <style name="TextAppearance.Auxio.HeadlineMedium" parent="TextAppearance.Material3.HeadlineMedium">
-        <item name="fontFamily">@font/inter</item>
+        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">normal</item>
+        <item name="android:letterSpacing">-0.0180714286</item>
     </style>
 
     <style name="TextAppearance.Auxio.HeadlineSmall" parent="TextAppearance.Material3.HeadlineSmall">
-        <item name="fontFamily">@font/inter</item>
+        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="android:fontFamily">@font/inter</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">normal</item>
+        <item name="android:letterSpacing">-0.0165833333</item>
     </style>
 
     <!--
-    Title styles are often used for titles,
+    Title styles are often used for headers and dividing elements.
     -->
     <style name="TextAppearance.Auxio.TitleLarge" parent="TextAppearance.Material3.TitleLarge">
         <item name="fontFamily">@font/inter_semibold</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">bold</item>
-    </style>
+        <item name="android:letterSpacing">-0.01518181818</item>
-
-    <style name="TextAppearance.Auxio.TitleMidLarge" parent="TextAppearance.Material3.TitleMedium">
-        <item name="fontFamily">@font/inter_semibold</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
-        <item name="android:textStyle">bold</item>
-        <item name="android:textSize">@dimen/text_size_ext_title_mid_large</item>
-        <item name="android:letterSpacing">0</item>
     </style>
 
     <style name="TextAppearance.Auxio.TitleMedium" parent="TextAppearance.Material3.TitleMedium">
         <item name="fontFamily">@font/inter</item>
         <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">normal</item>
-        <item name="android:letterSpacing">0.01</item>
+        <item name="android:letterSpacing">-0.01125</item>
     </style>
 
     <style name="TextAppearance.Auxio.TitleSmall" parent="TextAppearance.Material3.TitleSmall">
@@ -79,32 +78,26 @@
         <item name="android:letterSpacing">0.01</item>
     </style>
 
-    <!--
+    <!-- Label styles are used for elements that can be interacted with. -->
-    The label styles are used for important interactive elements.
-    -->
-    <style name="TextAppearance.Auxio.LabelLarger" parent="TextAppearance.Auxio.LabelLarge">
-        <item name="android:textSize">@dimen/text_size_ext_label_larger</item>
-    </style>
-
     <style name="TextAppearance.Auxio.LabelLarge" parent="TextAppearance.Material3.LabelLarge">
         <item name="fontFamily">@font/inter_semibold</item>
         <item name="android:fontFamily">@font/inter_semibold</item>
         <item name="android:textStyle">bold</item>
-        <item name="android:letterSpacing">0.01</item>
+        <item name="android:letterSpacing">-0.003</item>
     </style>
 
     <style name="TextAppearance.Auxio.LabelMedium" parent="TextAppearance.Material3.LabelMedium">
-        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="fontFamily">@font/inter</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">bold</item>
-        <item name="android:letterSpacing">0.02</item>
+        <item name="android:letterSpacing">0.00</item>
     </style>
 
     <style name="TextAppearance.Auxio.LabelSmall" parent="TextAppearance.Material3.LabelSmall">
-        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="fontFamily">@font/inter</item>
-        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">bold</item>
-        <item name="android:letterSpacing">0.015</item>
+        <item name="android:letterSpacing">0.0045454545</item>
     </style>
 
     <!--
@@ -114,20 +107,41 @@
         <item name="fontFamily">@font/inter</item>
         <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">normal</item>
-        <item name="android:letterSpacing">0.015</item>
+        <item name="android:letterSpacing">-0.01125</item>
     </style>
 
     <style name="TextAppearance.Auxio.BodyMedium" parent="TextAppearance.Material3.BodyMedium">
         <item name="fontFamily">@font/inter</item>
         <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">normal</item>
-        <item name="android:letterSpacing">0.025</item>
+        <item name="android:letterSpacing">-0.0064285714</item>
     </style>
 
     <style name="TextAppearance.Auxio.BodySmall" parent="TextAppearance.Material3.BodySmall">
         <item name="fontFamily">@font/inter</item>
         <item name="android:fontFamily">@font/inter</item>
         <item name="android:textStyle">normal</item>
-        <item name="android:letterSpacing">0.020</item>
+        <item name="android:letterSpacing">0.0008333333</item>
+    </style>
+
+    <!--
+    Non-standard styles to work around typography system limitations.
+    A major issue with the typography system is how much it limits you into either
+    unusably tiny text or unusably large text, so these styles fill in the gap where
+    other elements fall short.
+    -->
+    <style name="TextAppearance.Auxio.TitleMediumEmphasis" parent="TextAppearance.Material3.TitleMedium">
+        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:textStyle">normal</item>
+        <item name="android:letterSpacing">-0.00825</item>
+    </style>
+
+    <style name="TextAppearance.Auxio.TitleMidLarge" parent="TextAppearance.Material3.TitleMedium">
+        <item name="fontFamily">@font/inter_semibold</item>
+        <item name="android:fontFamily">@font/inter_semibold</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:textSize">@dimen/text_size_ext_title_mid_large</item>
+        <item name="android:letterSpacing">-0.0114444444</item>
     </style>
 </resources>