feat(POM-384): Update design system

build.gradle

@@ -40,7 +40,7 @@ ext {
     androidxAppCompatVersion = '1.7.0'
     androidxConstraintLayoutVersion = '2.1.4'
     androidxActivityVersion = '1.9.0'
-    androidxFragmentVersion = '1.7.1'
+    androidxFragmentVersion = '1.8.1'
     androidxLifecycleVersion = '2.7.0'
     androidxRecyclerViewVersion = '1.3.2'
     androidxSwipeRefreshLayoutVersion = '1.1.0'

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt

@@ -11,7 +11,6 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
 import com.processout.sdk.ui.core.state.POActionState
@@ -45,10 +44,8 @@ fun POActionsContainer(
     ) {
         Column(modifier = modifier) {
             HorizontalDivider(thickness = 1.dp, color = containerStyle.dividerColor)
-
-            val padding = POActionsContainer.containerPadding
-            val spacing = POActionsContainer.actionSpacing
-
+            val padding = ProcessOutTheme.spacing.extraLarge
+            val spacing = ProcessOutTheme.spacing.small
             when (containerStyle.axis) {
                 POAxis.Vertical -> Column(
                     modifier = Modifier
@@ -155,7 +152,7 @@ object POActionsContainer {
                 primary = POButton.primary,
                 secondary = POButton.secondary,
                 dividerColor = colors.border.subtle,
-                backgroundColor = colors.surface.level1,
+                backgroundColor = colors.surface.default,
                 axis = POAxis.Vertical
             )
         }
@@ -170,13 +167,4 @@ object POActionsContainer {
             axis = axis
         )
     }
-
-    internal val containerPadding: PaddingValues
-        @Composable get() = PaddingValues(
-            horizontal = ProcessOutTheme.spacing.extraLarge,
-            vertical = ProcessOutTheme.spacing.large
-        )
-
-    internal val actionSpacing: Dp
-        @Composable get() = ProcessOutTheme.spacing.large
 }

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt

@@ -1,3 +1,5 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package com.processout.sdk.ui.core.component
 
 import androidx.compose.foundation.BorderStroke
@@ -6,10 +8,7 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.LocalRippleTheme
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonColors
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ButtonElevation
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -44,11 +43,14 @@ fun POButton(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
     val pressed by interactionSource.collectIsPressedAsState()
-    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
+    CompositionLocalProvider(
+        LocalRippleTheme provides NoRippleTheme,
+        LocalMinimumInteractiveComponentEnforcement provides false
+    ) {
         Button(
             onClick = onClick,
             modifier = modifier.requiredHeightIn(
-                min = ProcessOutTheme.dimensions.formComponentMinSize
+                min = ProcessOutTheme.dimensions.interactiveComponentMinSize
             ),
             enabled = enabled && !loading,
             colors = colors(style = style, enabled = enabled, loading = loading, pressed = pressed),
@@ -114,30 +116,30 @@ object POButton {
             Style(
                 normal = StateStyle(
                     text = POText.Style(
-                        color = colors.text.onColor,
-                        textStyle = typography.fixed.button
+                        color = colors.text.inverse,
+                        textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
                     border = POBorderStroke(width = 0.dp, color = Color.Transparent),
-                    backgroundColor = colors.action.primaryDefault,
-                    elevation = 2.dp
+                    backgroundColor = colors.button.primaryBackgroundDefault,
+                    elevation = 0.dp
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
                         color = colors.text.disabled,
-                        textStyle = typography.fixed.button
+                        textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
                     border = POBorderStroke(width = 0.dp, color = Color.Transparent),
-                    backgroundColor = colors.action.primaryDisabled,
+                    backgroundColor = colors.button.primaryBackgroundDisabled,
                     elevation = 0.dp
                 ),
                 highlighted = HighlightedStyle(
-                    textColor = colors.text.onColor,
+                    textColor = colors.text.inverse,
                     borderColor = Color.Transparent,
-                    backgroundColor = colors.action.primaryPressed
+                    backgroundColor = colors.button.primaryBackgroundPressed
                 ),
-                progressIndicatorColor = colors.text.onColor
+                progressIndicatorColor = colors.text.inverse
             )
         }
 
@@ -146,30 +148,30 @@ object POButton {
             Style(
                 normal = StateStyle(
                     text = POText.Style(
-                        color = colors.text.secondary,
-                        textStyle = typography.fixed.button
+                        color = colors.text.primary,
+                        textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
-                    border = POBorderStroke(width = 1.dp, color = colors.border.default),
-                    backgroundColor = colors.action.secondaryDefault,
+                    border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDefault),
+                    backgroundColor = colors.button.secondaryBackgroundDefault,
                     elevation = 0.dp
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
                         color = colors.text.disabled,
-                        textStyle = typography.fixed.button
+                        textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
-                    border = POBorderStroke(width = 1.dp, color = colors.border.disabled),
-                    backgroundColor = colors.action.secondaryDefault,
+                    border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDisabled),
+                    backgroundColor = colors.button.secondaryBackgroundDisabled,
                     elevation = 0.dp
                 ),
                 highlighted = HighlightedStyle(
-                    textColor = colors.text.secondary,
-                    borderColor = colors.border.default,
-                    backgroundColor = colors.action.secondaryPressed
+                    textColor = colors.text.primary,
+                    borderColor = colors.button.secondaryBorderPressed,
+                    backgroundColor = colors.button.secondaryBackgroundPressed
                 ),
-                progressIndicatorColor = colors.text.secondary
+                progressIndicatorColor = colors.text.primary
             )
         }
 
@@ -178,32 +180,32 @@ object POButton {
             Style(
                 normal = StateStyle(
                     text = POText.Style(
-                        color = colors.action.primaryDefault,
-                        textStyle = typography.medium.body
+                        color = colors.text.primary,
+                        textStyle = typography.body1
                     ),
                     shape = shapes.roundedCornersSmall,
                     border = POBorderStroke(width = 0.dp, color = Color.Transparent),
                     backgroundColor = Color.Transparent,
                     elevation = 0.dp,
-                    paddingHorizontal = spacing.medium
+                    paddingHorizontal = spacing.large
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
                         color = colors.text.disabled,
-                        textStyle = typography.medium.body
+                        textStyle = typography.body1
                     ),
                     shape = shapes.roundedCornersSmall,
                     border = POBorderStroke(width = 0.dp, color = Color.Transparent),
                     backgroundColor = Color.Transparent,
                     elevation = 0.dp,
-                    paddingHorizontal = spacing.medium
+                    paddingHorizontal = spacing.large
                 ),
                 highlighted = HighlightedStyle(
-                    textColor = colors.action.primaryPressed,
+                    textColor = colors.text.primary,
                     borderColor = Color.Transparent,
-                    backgroundColor = colors.action.secondaryPressed
+                    backgroundColor = colors.button.tertiaryBackgroundPressed
                 ),
-                progressIndicatorColor = colors.action.primaryDefault
+                progressIndicatorColor = colors.text.primary
             )
         }
 

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt

@@ -54,12 +54,7 @@ fun PODialog(
                     Column(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .padding(
-                                start = spacing.extraLarge,
-                                top = spacing.extraLarge,
-                                end = spacing.extraLarge,
-                                bottom = spacing.large
-                            )
+                            .padding(spacing.extraLarge)
                     ) {
                         POText(
                             text = title,
@@ -123,7 +118,7 @@ object PODialog {
             message = POText.body,
             confirmButton = POButton.tertiary,
             dismissButton = POButton.tertiary,
-            backgroundColor = ProcessOutTheme.colors.surface.level1
+            backgroundColor = ProcessOutTheme.colors.surface.default
         )
 
     @Composable

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt

@@ -18,7 +18,7 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme
 @Composable
 fun PODragHandle(
     modifier: Modifier = Modifier,
-    color: Color = ProcessOutTheme.colors.border.disabled
+    color: Color = ProcessOutTheme.colors.border.subtle
 ) = with(ProcessOutTheme) {
     Box(
         modifier = modifier

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POHeader.kt

@@ -25,7 +25,7 @@ fun POHeader(
     modifier: Modifier = Modifier,
     style: POText.Style = POText.title,
     dividerColor: Color = ProcessOutTheme.colors.border.subtle,
-    dragHandleColor: Color = ProcessOutTheme.colors.border.disabled,
+    dragHandleColor: Color = ProcessOutTheme.colors.border.subtle,
     withDragHandle: Boolean = true,
     animationDurationMillis: Int = 0
 ) {
@@ -66,9 +66,6 @@ private fun titlePadding(
         start = spacing.extraLarge,
         end = spacing.extraLarge,
         top = 0.dp,
-        bottom = spacing.large
-    ) else PaddingValues(
-        horizontal = spacing.extraLarge,
-        vertical = spacing.large
-    )
+        bottom = spacing.extraLarge
+    ) else PaddingValues(spacing.extraLarge)
 }

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POText.kt

@@ -24,7 +24,7 @@ fun POText(
     text: String,
     modifier: Modifier = Modifier,
     color: Color = Color.Unspecified,
-    style: TextStyle = ProcessOutTheme.typography.fixed.body,
+    style: TextStyle = ProcessOutTheme.typography.body2,
     fontStyle: FontStyle? = null,
     textAlign: TextAlign? = null,
     onTextLayout: (TextLayoutResult) -> Unit = {},
@@ -59,25 +59,25 @@ object POText {
     val title: Style
         @Composable get() = Style(
             color = ProcessOutTheme.colors.text.primary,
-            textStyle = ProcessOutTheme.typography.medium.title
+            textStyle = ProcessOutTheme.typography.title
         )
 
     val body: Style
         @Composable get() = Style(
             color = ProcessOutTheme.colors.text.primary,
-            textStyle = ProcessOutTheme.typography.fixed.body
+            textStyle = ProcessOutTheme.typography.body2
         )
 
-    val labelHeading: Style
+    val label1: Style
         @Composable get() = Style(
-            color = ProcessOutTheme.colors.text.secondary,
-            textStyle = ProcessOutTheme.typography.fixed.labelHeading
+            color = ProcessOutTheme.colors.text.primary,
+            textStyle = ProcessOutTheme.typography.label1
         )
 
     val errorLabel: Style
         @Composable get() = Style(
             color = ProcessOutTheme.colors.text.error,
-            textStyle = ProcessOutTheme.typography.fixed.label
+            textStyle = ProcessOutTheme.typography.label2
         )
 
     @Composable