Task/migrate shape design tokens

library-compose/src/main/java/com/spendesk/grapes/compose/actionmenu/ActionMenuItem.kt

@@ -66,7 +66,7 @@ fun ActionMenuItem(
             top = verticalInnerPadding,
             bottom = verticalInnerPadding,
         ),
-        shape = GrapesTheme.shapes.small,
+        shape = GrapesTheme.shapes.shape2,
         modifier = modifier,
     ) {
         Row(

library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketContainer.kt

@@ -32,9 +32,9 @@ fun GrapesBucketContainer(
 ) {
     Box(
         modifier = modifier
-            .background(GrapesTheme.colors.mainWhite, GrapesTheme.shapes.small)
-            .border(GrapesBucketBorderWidth, GrapesTheme.colors.mainNeutralNormal, GrapesTheme.shapes.small)
-            .clip(GrapesTheme.shapes.small)
+            .background(GrapesTheme.colors.mainWhite, GrapesTheme.shapes.shape2)
+            .border(GrapesBucketBorderWidth, GrapesTheme.colors.mainNeutralNormal, GrapesTheme.shapes.shape2)
+            .clip(GrapesTheme.shapes.shape2)
     ) {
         content()
     }

library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButtonStyleDefaults.kt

@@ -32,7 +32,7 @@ object GrapesButtonStyleDefaults {
                     height = GrapesButtonDefaults.MinHeight.value
                 ),
                 iconSize = GrapesButtonDefaults.iconSize,
-                shape = GrapesTheme.shapes.small,
+                shape = GrapesTheme.shapes.shape2,
                 rippleColor = GrapesTheme.colors.mainPrimaryDark,
                 colors = ButtonColorDefaults.primary,
                 contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -50,7 +50,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = GrapesButtonDefaults.iconSizeSmall,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainPrimaryDark,
             colors = ButtonColorDefaults.primary,
             contentPadding = GrapesButtonDefaults.PaddingValuesSmall,
@@ -68,7 +68,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeight.value
             ),
             iconSize = GrapesButtonDefaults.iconSize,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralNormal,
             colors = ButtonColorDefaults.secondary,
             contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -86,7 +86,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = GrapesButtonDefaults.iconSizeSmall,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralNormal,
             colors = ButtonColorDefaults.secondary,
             contentPadding = GrapesButtonDefaults.PaddingValuesSmall,
@@ -104,7 +104,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeight.value
             ),
             iconSize = GrapesButtonDefaults.iconSize,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainPrimaryLight,
             colors = ButtonColorDefaults.text,
             contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -122,7 +122,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = GrapesButtonDefaults.iconSizeSmall,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainPrimaryLight,
             colors = ButtonColorDefaults.text,
             contentPadding = GrapesButtonDefaults.PaddingValuesSmall,
@@ -140,7 +140,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeight.value
             ),
             iconSize = GrapesButtonDefaults.iconSize,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainAlertDark,
             colors = ButtonColorDefaults.alert,
             contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -158,7 +158,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeight.value
             ),
             iconSize = GrapesButtonDefaults.iconSize,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainAlertDark,
             colors = ButtonColorDefaults.alertOutlined,
             contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -176,7 +176,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeight.value
             ),
             iconSize = GrapesButtonDefaults.iconSize,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainWarningDark,
             colors = ButtonColorDefaults.warning,
             contentPadding = GrapesButtonDefaults.PaddingValues,
@@ -194,7 +194,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = GrapesButtonDefaults.iconSizeSmall,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralLight,
             colors = ButtonColorDefaults.linkPrimary,
             contentPadding = GrapesButtonDefaults.PaddingValuesSmall,
@@ -212,7 +212,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = GrapesButtonDefaults.iconSizeSmall,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralLighter,
             colors = ButtonColorDefaults.linkSecondary,
             contentPadding = GrapesButtonDefaults.PaddingValuesSmall,
@@ -230,7 +230,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = 40.dp,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralLighter,
             colors = ButtonColorDefaults.google,
             contentPadding = GrapesButtonDefaults.PaddingValuesBrand,
@@ -248,7 +248,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = 40.dp,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralLighter,
             colors = ButtonColorDefaults.secondary,
             contentPadding = GrapesButtonDefaults.PaddingValuesBrand,
@@ -266,7 +266,7 @@ object GrapesButtonStyleDefaults {
                 height = GrapesButtonDefaults.MinHeightSmall.value
             ),
             iconSize = 40.dp,
-            shape = GrapesTheme.shapes.small,
+            shape = GrapesTheme.shapes.shape2,
             rippleColor = GrapesTheme.colors.mainNeutralLighter,
             colors = ButtonColorDefaults.secondary,
             contentPadding = GrapesButtonDefaults.PaddingValuesBrand,

library-compose/src/main/java/com/spendesk/grapes/compose/callout/GrapesCoreCallout.kt

@@ -32,7 +32,7 @@ fun GrapesCoreCallout(
 ) {
     Surface(
         modifier = modifier.fillMaxWidth(),
-        shape = GrapesTheme.shapes.small,
+        shape = GrapesTheme.shapes.shape2,
         color = colors.containerColor().value,
         contentColor = colors.contentColor().value,
         border = BorderStroke(GrapesCalloutDefaults.borderThickness, colors.borderStrokeColor().value),

library-compose/src/main/java/com/spendesk/grapes/compose/gauge/GrapesGauge.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Modifier
@@ -65,7 +64,7 @@ fun GrapesGauge(
     backgroundColor: Color,
     gauges: List<Gauge>,
     modifier: Modifier = Modifier,
-    clipShape: Shape = RoundedCornerShape(GrapesTheme.dimensions.borderRadiusNormal),
+    clipShape: Shape = GrapesTheme.shapes.shape1,
 ) {
     GrapesGaugeContainer(
         modifier = modifier,

library-compose/src/main/java/com/spendesk/grapes/compose/listitem/SectionItem.kt

@@ -61,7 +61,7 @@ private fun Preview() {
             icon = { modifier ->
                 Box(
                     modifier
-                        .clip(GrapesTheme.shapes.small)
+                        .clip(GrapesTheme.shapes.shape2)
                         .background(Color.Blue))
             },
             description = "85.99€ per month",

library-compose/src/main/java/com/spendesk/grapes/compose/message/Message.kt

@@ -49,7 +49,7 @@ fun GrapesMessage(
     GrapesSurface(
         modifier = modifier.width(IntrinsicSize.Max),
         configuration = configuration,
-        shape = GrapesTheme.shapes.small,
+        shape = GrapesTheme.shapes.shape2,
     ) {
         Column(modifier = Modifier.padding(contentPadding)) {
             Row(verticalAlignment = Alignment.CenterVertically) {

library-compose/src/main/java/com/spendesk/grapes/compose/selectors/GrapesSelectBlockContainer.kt

@@ -26,15 +26,30 @@ fun GrapesSelectBlockContainer(
     content: @Composable () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val borderModifier = if (isSelected) Modifier.border(GrapesTheme.dimensions.borderLarge, GrapesSelectBlockContainerDefaultColors.selectedBorderColor, GrapesTheme.shapes.small) else Modifier
-    val backgroundModifier = if (isSelected) Modifier.background(color = GrapesSelectBlockContainerDefaultColors.selectedBackgroundColor, GrapesTheme.shapes.small) else Modifier
+    val borderModifier = if (isSelected) {
+        Modifier.border(
+            width = GrapesTheme.dimensions.borderLarge,
+            color = GrapesSelectBlockContainerDefaultColors.selectedBorderColor,
+            shape = GrapesTheme.shapes.shape2
+        )
+    } else {
+        Modifier
+    }
+    val backgroundModifier = if (isSelected) {
+        Modifier.background(
+            color = GrapesSelectBlockContainerDefaultColors.selectedBackgroundColor,
+            GrapesTheme.shapes.shape2
+        )
+    } else {
+        Modifier
+    }
 
     Box(
         modifier = modifier
             .fillMaxWidth()
             .then(borderModifier)
             .then(backgroundModifier)
-            .clip(GrapesTheme.shapes.small)
+            .clip(GrapesTheme.shapes.shape2)
     ) {
         content()
     }

library-compose/src/main/java/com/spendesk/grapes/compose/textfield/GrapesPinTextFieldDecorationBox.kt

@@ -68,13 +68,13 @@ private fun PinText(
         modifier = modifier
             .width(GrapesPinTextFieldDefaults.PinCharWidth)
             .height(GrapesPinTextFieldDefaults.PinCharHeight)
-            .background(GrapesTheme.colors.mainWhite, shape = GrapesTheme.shapes.small)
+            .background(GrapesTheme.colors.mainWhite, shape = GrapesTheme.shapes.shape2)
             .border(
                 width = GrapesPinTextFieldDefaults.PinCharBorderWidth,
                 color = GrapesPinTextFieldDefaults
                     .pinFieldColors()
                     .borderColor(isEnabled = isEnabled, isError = isError, isSelected = isFocused),
-                shape = GrapesTheme.shapes.small
+                shape = GrapesTheme.shapes.shape2
             )
             .pointerInput(Unit) {
                 detectTapGestures(

library-compose/src/main/java/com/spendesk/grapes/compose/textfield/GrapesTextFieldDefaults.kt

@@ -44,7 +44,7 @@ object GrapesTextFieldDefaults {
     val TextFieldShape: Shape
         @Composable
         @ReadOnlyComposable
-        get() = GrapesTheme.shapes.small
+        get() = GrapesTheme.shapes.shape2
 
 
     fun textFieldPadding(

library-compose/src/main/java/com/spendesk/grapes/compose/theme/Dimensions.kt

@@ -16,9 +16,6 @@ data class GrapesDimensions(
 
     val borderLarge: Dp = 2.0.dp,
 
-    val borderRadiusSmall: Dp = 2.dp,
-    val borderRadiusNormal: Dp = 4.dp,
-
     @Deprecated("Grapes dimension deprecated", ReplaceWith("spacing1"))
     val paddingXSmall: Dp = 4.dp,
     @Deprecated("Grapes dimension deprecated", ReplaceWith("spacing2"))

library-compose/src/main/java/com/spendesk/grapes/compose/theme/Shapes.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 /**
@@ -14,6 +13,13 @@ import androidx.compose.ui.unit.dp
  */
 @Immutable
 data class GrapesShapes(
+    val shape0: CornerBasedShape = RoundedCornerShape(cornerRadius0Dp),
+    val shape1: CornerBasedShape = RoundedCornerShape(cornerRadius1Dp),
+    val shape2: CornerBasedShape = RoundedCornerShape(cornerRadius2Dp),
+    val shape3: CornerBasedShape = RoundedCornerShape(cornerRadius3Dp),
+    val shape4: CornerBasedShape = RoundedCornerShape(cornerRadiusRoundedPercent),
+
+    @Deprecated("Grapes shape deprecated", ReplaceWith("borderRadius1"))
     val xSmall: CornerBasedShape = RoundedCornerShape(XSmallShapeCornerRadius),
 
     /**
@@ -22,17 +28,26 @@ data class GrapesShapes(
      * the corner size to be 50%. [TextField] uses this shape with overriding the bottom corners
      * to zero.
      */
+    @Deprecated("Grapes shape deprecated", ReplaceWith("borderRadius2"))
     val small: CornerBasedShape = RoundedCornerShape(SmallShapeCornerRadius),
     /**
      * Shape used by medium components like [Card] or [AlertDialog].
      */
+    @Deprecated("Grapes shape deprecated - no longer use 12dp border radius.")
     val medium: CornerBasedShape = RoundedCornerShape(MediumShapeCornerRadius),
     /**
      * Shape used by large components like [ModalDrawer] or [ModalBottomSheetLayout].
      */
+    @Deprecated("Grapes shape deprecated", ReplaceWith("borderRadius0"))
     val large: CornerBasedShape = RoundedCornerShape(LargeShapeCornerRadius)
 )
 
+private val cornerRadius0Dp = 0.dp
+private val cornerRadius1Dp = 4.dp
+private val cornerRadius2Dp = 8.dp
+private val cornerRadius3Dp = 16.dp
+private const val cornerRadiusRoundedPercent = 50
+
 private val XSmallShapeCornerRadius = 4.dp
 private val SmallShapeCornerRadius = 8.dp
 private val MediumShapeCornerRadius = 12.dp