refactor(schedules): use semantic tokens at the screen level.

GerardPaligot · Jan 18, 2024 · 4b79c16 · 4b79c16
1 parent 2372919
commit 4b79c16
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 17 deletions.
diff --git a/...ain/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/AgendaFiltersScreen.kt b/...ain/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/AgendaFiltersScreen.kt
@@ -12,14 +12,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import org.gdglille.devfest.android.theme.m3.schedules.ui.filters.CategoryListFilters
 import org.gdglille.devfest.android.theme.m3.schedules.ui.filters.FavoriteFilter
 import org.gdglille.devfest.android.theme.m3.schedules.ui.filters.FormatListFilters
 import org.gdglille.devfest.android.theme.m3.style.Conferences4HallTheme
 import org.gdglille.devfest.android.theme.m3.style.R
 import org.gdglille.devfest.android.theme.m3.style.Scaffold
+import org.gdglille.devfest.android.theme.m3.style.SpacingTokens
 import org.gdglille.devfest.android.theme.m3.style.appbars.AppBarIcons
+import org.gdglille.devfest.android.theme.m3.style.toDp
 import org.gdglille.devfest.models.ui.CategoryUi
 import org.gdglille.devfest.models.ui.FiltersUi
 import org.gdglille.devfest.models.ui.FormatUi
@@ -46,8 +47,11 @@ fun AgendaFiltersScreen(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(top = it.calculateTopPadding()),
-            contentPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+            contentPadding = PaddingValues(
+                vertical = SpacingTokens.MediumSpacing.toDp(),
+                horizontal = SpacingTokens.LargeSpacing.toDp()
+            ),
+            verticalArrangement = Arrangement.spacedBy(SpacingTokens.LargeSpacing.toDp()),
         ) {
             item {
                 FavoriteFilter(isFavorite = filtersUi.onlyFavorites, onClick = onFavoriteClick)

diff --git a/...src/main/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/FeedbackScreen.kt b/...src/main/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/FeedbackScreen.kt
@@ -1,7 +1,6 @@
 package org.gdglille.devfest.android.theme.m3.schedules.screens
 
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -14,6 +13,8 @@ import androidx.compose.ui.unit.dp
 import io.openfeedback.android.viewmodels.OpenFeedbackFirebaseConfig
 import org.gdglille.devfest.android.theme.m3.schedules.ui.schedule.OpenFeedbackSection
 import org.gdglille.devfest.android.theme.m3.style.R
+import org.gdglille.devfest.android.theme.m3.style.SpacingTokens
+import org.gdglille.devfest.android.theme.m3.style.toDp
 
 @Composable
 fun FeedbackScreen(
@@ -26,7 +27,7 @@ fun FeedbackScreen(
     LazyColumn(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp)
+            .padding(horizontal = SpacingTokens.LargeSpacing.toDp())
     ) {
         item {
             if (openFeedbackProjectId != null && openFeedbackSessionId != null) {
@@ -43,7 +44,7 @@ fun FeedbackScreen(
                     style = MaterialTheme.typography.bodyMedium,
                     modifier = Modifier
                         .border(width = 1.dp, color = MaterialTheme.colorScheme.onBackground)
-                        .padding(12.dp)
+                        .padding(SpacingTokens.MediumSpacing.toDp())
                 )
             }
         }

diff --git a/...in/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/ScheduleDetailScreen.kt b/...in/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/ScheduleDetailScreen.kt
@@ -16,13 +16,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import io.openfeedback.android.viewmodels.OpenFeedbackFirebaseConfig
 import org.gdglille.devfest.android.theme.m3.schedules.ui.schedule.OpenFeedbackSection
 import org.gdglille.devfest.android.theme.m3.schedules.ui.schedule.TalkAbstract
 import org.gdglille.devfest.android.theme.m3.schedules.ui.schedule.TalkSection
 import org.gdglille.devfest.android.theme.m3.schedules.ui.speakers.SpeakerSection
 import org.gdglille.devfest.android.theme.m3.style.Conferences4HallTheme
+import org.gdglille.devfest.android.theme.m3.style.SpacingTokens
+import org.gdglille.devfest.android.theme.m3.style.toDp
 import org.gdglille.devfest.models.ui.TalkUi
 
 @ExperimentalMaterial3Api
@@ -33,18 +34,18 @@ fun ScheduleDetailScreen(
     onSpeakerClicked: (id: String) -> Unit,
     modifier: Modifier = Modifier,
     state: LazyListState = rememberLazyListState(),
-    contentPadding: PaddingValues = PaddingValues(0.dp),
+    contentPadding: PaddingValues = PaddingValues(SpacingTokens.None.toDp()),
 ) {
     LazyColumn(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp),
+            .padding(horizontal = SpacingTokens.LargeSpacing.toDp()),
         contentPadding = contentPadding,
-        verticalArrangement = Arrangement.spacedBy(24.dp),
+        verticalArrangement = Arrangement.spacedBy(SpacingTokens.LargeSpacing.toDp()),
         state = state
     ) {
         item {
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(SpacingTokens.LargeSpacing.toDp()))
             TalkSection(talk = talk)
         }
         item {
@@ -73,7 +74,7 @@ fun ScheduleDetailScreen(
             )
         }
         item {
-            Spacer(modifier = Modifier.height(32.dp))
+            Spacer(modifier = Modifier.height(SpacingTokens.ExtraLargeSpacing.toDp()))
         }
     }
 }

diff --git a/...main/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/ScheduleGridScreen.kt b/...main/kotlin/org/gdglille/devfest/android/theme/m3/schedules/screens/ScheduleGridScreen.kt
@@ -11,17 +11,18 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import org.gdglille.devfest.android.theme.m3.schedules.ui.talks.MediumScheduleItem
 import org.gdglille.devfest.android.theme.m3.schedules.ui.talks.NoFavoriteTalks
 import org.gdglille.devfest.android.theme.m3.schedules.ui.talks.SmallScheduleItem
 import org.gdglille.devfest.android.theme.m3.schedules.ui.talks.Time
 import org.gdglille.devfest.android.theme.m3.style.Conferences4HallTheme
+import org.gdglille.devfest.android.theme.m3.style.SpacingTokens
 import org.gdglille.devfest.android.theme.m3.style.placeholder
 import org.gdglille.devfest.android.theme.m3.style.previews.PHONE_LANDSCAPE
 import org.gdglille.devfest.android.theme.m3.style.schedules.findTimeImageVector
 import org.gdglille.devfest.android.theme.m3.style.schedules.pause.MediumPauseItem
 import org.gdglille.devfest.android.theme.m3.style.schedules.pause.SmallPauseItem
+import org.gdglille.devfest.android.theme.m3.style.toDp
 import org.gdglille.devfest.models.ui.AgendaUi
 import org.gdglille.devfest.models.ui.TalkItemUi
 
@@ -41,9 +42,9 @@ fun ScheduleGridScreen(
         LazyVerticalGrid(
             columns = GridCells.Fixed(count = columnCount),
             modifier = modifier,
-            contentPadding = PaddingValues(vertical = 24.dp),
-            verticalArrangement = Arrangement.spacedBy(8.dp),
-            horizontalArrangement = Arrangement.spacedBy(8.dp)
+            contentPadding = PaddingValues(vertical = SpacingTokens.LargeSpacing.toDp()),
+            verticalArrangement = Arrangement.spacedBy(SpacingTokens.MediumSpacing.toDp()),
+            horizontalArrangement = Arrangement.spacedBy(SpacingTokens.MediumSpacing.toDp())
         ) {
             agenda.talks.entries.forEach { slot ->
                 item(span = { GridItemSpan(columnCount) }) {

diff --git a/.../style/theme/src/main/kotlin/org/gdglille/devfest/android/theme/m3/style/SpacingTokens.kt b/.../style/theme/src/main/kotlin/org/gdglille/devfest/android/theme/m3/style/SpacingTokens.kt
@@ -6,18 +6,22 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 enum class SpacingTokens {
+    None,
     ExtraSmallSpacing,
     SmallSpacing,
     MediumSpacing,
-    LargeSpacing
+    LargeSpacing,
+    ExtraLargeSpacing
 }
 
 internal fun fromToken(value: SpacingTokens): Dp {
     return when (value) {
+        SpacingTokens.None -> 0.dp
         SpacingTokens.ExtraSmallSpacing -> 2.dp
         SpacingTokens.SmallSpacing -> 4.dp
         SpacingTokens.MediumSpacing -> 8.dp
         SpacingTokens.LargeSpacing -> 16.dp
+        SpacingTokens.ExtraLargeSpacing -> 32.dp
     }
 }