Skip to content

feat(POM-530): Unify design system #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vitalii-vanziak-cko merged 30 commits into from
Nov 7, 2025
Merged

feat(POM-530): Unify design system #344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
f4e00eb
fix(ad-hoc): Disable telemetry in example app (#343)
vitalii-vanziak-cko Nov 4, 2025
9a7334b
Remove all labeled fields, layout, style
vitalii-vanziak-cko Nov 4, 2025
57fb8e5
Remove POCodeField2 and apply POCodeField
vitalii-vanziak-cko Nov 4, 2025
38195c2
Remove PODropdownField2 and apply PODropdownField
vitalii-vanziak-cko Nov 4, 2025
58ba386
Apply default field style
vitalii-vanziak-cko Nov 4, 2025
0f48838
POBasicTextField and POTextField
vitalii-vanziak-cko Nov 4, 2025
c36369f
contentPadding
vitalii-vanziak-cko Nov 4, 2025
cc8bf96
Remove PORadioGroup
vitalii-vanziak-cko Nov 5, 2025
a22729d
POMessageBox style
vitalii-vanziak-cko Nov 5, 2025
0b0b960
PORadioField style
vitalii-vanziak-cko Nov 5, 2025
905c3c5
POCheckboxField style
vitalii-vanziak-cko Nov 5, 2025
6e6fd06
POActionsContainer style
vitalii-vanziak-cko Nov 5, 2025
6fddec5
'secondary' button style
vitalii-vanziak-cko Nov 5, 2025
40d3f65
'primary' button style
vitalii-vanziak-cko Nov 5, 2025
617d1e8
Remove POTextPreview
vitalii-vanziak-cko Nov 5, 2025
26b219d
Remove unused text styles
vitalii-vanziak-cko Nov 5, 2025
51cc770
title style
vitalii-vanziak-cko Nov 5, 2025
a2221f8
subheading text style
vitalii-vanziak-cko Nov 5, 2025
dd2c00f
Remove body1 text style
vitalii-vanziak-cko Nov 5, 2025
b3d5944
Remove unused typography
vitalii-vanziak-cko Nov 5, 2025
c0e3c2f
s28 typography
vitalii-vanziak-cko Nov 5, 2025
3d39d79
Replace 'body1'
vitalii-vanziak-cko Nov 5, 2025
31e13dc
Replace 'body2'
vitalii-vanziak-cko Nov 5, 2025
6d8d085
Replace 'body3'
vitalii-vanziak-cko Nov 5, 2025
a54cf8e
borderDefault
vitalii-vanziak-cko Nov 5, 2025
f21225d
Deprecate PORadioButtonStyle
vitalii-vanziak-cko Nov 5, 2025
c08424d
Cleanup colors
vitalii-vanziak-cko Nov 5, 2025
c4643a0
Shapes
vitalii-vanziak-cko Nov 5, 2025
43db757
Spacing
vitalii-vanziak-cko Nov 5, 2025
33dd988
Theme imports
vitalii-vanziak-cko Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion example/src/main/kotlin/com/processout/example/ProcessOutExampleApplication.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ class ProcessOutExampleApplication : Application() {
ProcessOutConfiguration(
application = this,
projectId = BuildConfig.PROJECT_ID,
debug = true
debug = true,
enableTelemetry = false
).apply { privateKey = BuildConfig.PROJECT_KEY }
)
}
Expand Down
29 changes: 8 additions & 21 deletions ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import com.processout.sdk.ui.core.state.POActionState
import com.processout.sdk.ui.core.state.POImmutableList
import com.processout.sdk.ui.core.style.POActionsContainerStyle
import com.processout.sdk.ui.core.style.POAxis
import com.processout.sdk.ui.core.theme.ProcessOutTheme
import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing

Expand Down Expand Up @@ -127,26 +127,13 @@ object POActionsContainer {
)

val default: Style
@Composable get() = with(ProcessOutTheme) {
Style(
primary = POButton.primary,
secondary = POButton.secondary,
dividerColor = colors.border.border4,
backgroundColor = colors.surface.default,
axis = POAxis.Vertical
)
}

val default2: Style
@Composable get() = with(ProcessOutTheme) {
Style(
primary = POButton.primary2,
secondary = POButton.secondary2,
dividerColor = colors.border.border4,
backgroundColor = colors.surface.default,
axis = POAxis.Vertical
)
}
@Composable get() = Style(
primary = POButton.primary,
secondary = POButton.secondary,
dividerColor = colors.border.border4,
backgroundColor = colors.surface.default,
axis = POAxis.Vertical
)

@Composable
fun custom(style: POActionsContainerStyle) = with(style) {
Expand Down
232 changes: 82 additions & 150 deletions ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ import com.processout.sdk.ui.core.state.POActionState
import com.processout.sdk.ui.core.style.POButtonDefaults
import com.processout.sdk.ui.core.style.POButtonStateStyle
import com.processout.sdk.ui.core.style.POButtonStyle
import com.processout.sdk.ui.core.theme.ProcessOutTheme
import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
import com.processout.sdk.ui.core.theme.ProcessOutTheme.typography

/** @suppress */
@ProcessOutInternalApi
Expand Down Expand Up @@ -111,7 +113,7 @@ fun POButton(
contentDescription = null,
modifier = Modifier
.conditional(text.isNotBlank()) {
padding(end = spacing.small)
padding(end = spacing.space8)
}
.requiredSize(iconSize),
colorFilter = iconColorFilter
Expand Down Expand Up @@ -222,164 +224,94 @@ object POButton {
}

val primary: Style
@Composable get() = with(ProcessOutTheme) {
Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.inverse,
textStyle = typography.button
),
shape = shapes.roundedCornersSmall,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDefault,
elevation = 0.dp
@Composable get() = Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.inverse,
textStyle = typography.s15(FontWeight.Medium)
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.button
),
shape = shapes.roundedCornersSmall,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDisabled,
elevation = 0.dp
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDefault,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
highlighted = HighlightedStyle(
textColor = colors.text.inverse,
borderColor = Color.Transparent,
backgroundColor = colors.button.primaryBackgroundPressed
),
progressIndicatorColor = colors.text.inverse
)
}

val primary2: Style
@Composable get() = with(ProcessOutTheme) {
Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.inverse,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDefault,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.inverse,
borderColor = Color.Transparent,
backgroundColor = colors.button.primaryBackgroundPressed
),
progressIndicatorColor = colors.text.inverse
)
}
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.primaryBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.inverse,
borderColor = Color.Transparent,
backgroundColor = colors.button.primaryBackgroundPressed
),
progressIndicatorColor = colors.text.inverse
)

val secondary: Style
@Composable get() = with(ProcessOutTheme) {
Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.primary,
textStyle = typography.button
),
shape = shapes.roundedCornersSmall,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDefault,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.button
),
shape = shapes.roundedCornersSmall,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.primary,
borderColor = Color.Transparent,
backgroundColor = colors.button.secondaryBackgroundPressed
@Composable get() = Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.primary,
textStyle = typography.s15(FontWeight.Medium)
),
progressIndicatorColor = colors.text.primary
)
}

val secondary2: Style
@Composable get() = with(ProcessOutTheme) {
Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.primary,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDefault,
elevation = 0.dp
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDefault,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.primary,
borderColor = Color.Transparent,
backgroundColor = colors.button.secondaryBackgroundPressed
),
progressIndicatorColor = colors.text.primary
)
}
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.secondaryBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.primary,
borderColor = Color.Transparent,
backgroundColor = colors.button.secondaryBackgroundPressed
),
progressIndicatorColor = colors.text.primary
)

val ghost: Style
@Composable get() = with(ProcessOutTheme) {
Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.primary,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = Color.Transparent,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.ghostBackgroundDisabled,
elevation = 0.dp
@Composable get() = Style(
normal = StateStyle(
text = POText.Style(
color = colors.text.primary,
textStyle = typography.s15(FontWeight.Medium)
),
highlighted = HighlightedStyle(
textColor = colors.text.primary,
borderColor = Color.Transparent,
backgroundColor = colors.button.ghostBackgroundPressed
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = Color.Transparent,
elevation = 0.dp
),
disabled = StateStyle(
text = POText.Style(
color = colors.text.onButtonDisabled,
textStyle = typography.s15(FontWeight.Medium)
),
progressIndicatorColor = colors.text.primary
)
}
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 0.dp, color = Color.Transparent),
backgroundColor = colors.button.ghostBackgroundDisabled,
elevation = 0.dp
),
highlighted = HighlightedStyle(
textColor = colors.text.primary,
borderColor = Color.Transparent,
backgroundColor = colors.button.ghostBackgroundPressed
),
progressIndicatorColor = colors.text.primary
)

val ghostEqualPadding: Style
@Composable get() = ghost.let {
Expand Down
2 changes: 1 addition & 1 deletion ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POCopyButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ fun POCopyButton(
object POCopyButton {

val default: POButton.Style
@Composable get() = POButton.secondary2.let {
@Composable get() = POButton.secondary.let {
it.copy(
normal = it.normal.copy(
text = it.normal.text.copy(
Expand Down
12 changes: 6 additions & 6 deletions ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,16 @@ fun PODialog(
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(spacing.extraLarge),
shape = shapes.roundedCornersLarge,
.padding(spacing.space20),
shape = shapes.roundedCorners16,
color = style.backgroundColor,
contentColor = Color.Unspecified,
shadowElevation = 3.dp
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(spacing.extraLarge)
.padding(spacing.space20)
) {
POText(
text = title,
Expand All @@ -103,17 +103,17 @@ fun PODialog(
if (!message.isNullOrBlank()) {
POText(
text = message,
modifier = Modifier.padding(top = spacing.large),
modifier = Modifier.padding(top = spacing.space16),
color = style.message.color,
style = style.message.textStyle
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = spacing.extraLarge),
.padding(top = spacing.space20),
horizontalArrangement = Arrangement.spacedBy(
space = spacing.small,
space = spacing.space8,
alignment = Alignment.End
),
verticalAlignment = Alignment.CenterVertically
Expand Down
2 changes: 1 addition & 1 deletion ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODragHandle.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ fun PODragHandle(
)
.background(
color = color,
shape = shapes.roundedCornersSmall
shape = shapes.roundedCorners4
)
)
}
2 changes: 1 addition & 1 deletion ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POGroupedContent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ object POGroupedContent {
textStyle = typography.s16(FontWeight.Medium)
),
shape = shapes.roundedCorners6,
border = POBorderStroke(width = 1.5.dp, color = colors.input.borderDefault2),
border = POBorderStroke(width = 1.5.dp, color = colors.input.borderDefault),
dividerColor = colors.border.border1,
backgroundColor = colors.surface.default
)
Expand Down
Loading