[feat]: add option to use a gradient or semi-transparent colours as the cell background

ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt

@@ -2,7 +2,6 @@ package com.composeuisuite.ohteepee
 
 import android.view.KeyEvent
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.PaddingValues
@@ -26,6 +25,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.focus.onFocusEvent
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.key
@@ -39,6 +39,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.composeuisuite.ohteepee.configuration.OhTeePeeConfigurations
+import com.composeuisuite.ohteepee.configuration.cellBackground
 import com.composeuisuite.ohteepee.utils.conditional
 
 private val MIN_HEIGHT_CELL_SIZE = 48.dp
@@ -88,7 +89,8 @@ internal fun OhTeePeeCell(
 
     SideEffect {
         if (textFieldValue.selection != textFieldValueState.selection ||
-            textFieldValue.composition != textFieldValueState.composition) {
+            textFieldValue.composition != textFieldValueState.composition
+        ) {
             textFieldValueState = textFieldValue
         }
     }
@@ -121,6 +123,8 @@ internal fun OhTeePeeCell(
         modifier = modifier
             .defaultMinSize(minHeight = MIN_HEIGHT_CELL_SIZE)
             .then(borderModifier),
+        color = Color.Transparent,
+        contentColor = Color.Unspecified,
         elevation = configurations.elevation,
         shape = if (configurations.enableBottomLine) RoundedCornerShape(0.dp) else cellConfiguration.shape,
     ) {
@@ -151,7 +155,7 @@ internal fun OhTeePeeCell(
                     }
                 }
                 .onFocusEvent { isFocused = it.isFocused }
-                .background(cellConfiguration.backgroundColor),
+                .cellBackground(cellConfiguration.cellBackground),
             keyboardOptions = KeyboardOptions(
                 keyboardType = keyboardType,
                 imeAction = ImeAction.Next,
@@ -180,7 +184,7 @@ internal fun OhTeePeeCell(
                     )
                 },
                 colors = TextFieldDefaults.textFieldColors(
-                    backgroundColor = cellConfiguration.backgroundColor
+                    backgroundColor = Color.Transparent,
                 ),
             )
         }

ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellBackground.kt

@@ -0,0 +1,36 @@
+package com.composeuisuite.ohteepee.configuration
+
+import androidx.annotation.FloatRange
+import androidx.compose.foundation.background
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+sealed class OhTeePeeCellBackground {
+
+    data class Gradient(
+        val brush: Brush,
+        @FloatRange(from = 0.0, to = 1.0)
+        val alpha: Float = 1f,
+    ) : OhTeePeeCellBackground()
+
+    data class Solid(
+        val color: Color,
+    ) : OhTeePeeCellBackground()
+}
+
+internal fun Modifier.cellBackground(
+    background: OhTeePeeCellBackground,
+): Modifier {
+    val backgroundModifier = when (background) {
+        is OhTeePeeCellBackground.Gradient -> {
+            this.background(brush = background.brush, alpha = background.alpha)
+        }
+
+        is OhTeePeeCellBackground.Solid -> {
+            this.background(color = background.color)
+        }
+    }
+
+    return backgroundModifier.then(this)
+}

ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellConfiguration.kt

@@ -10,26 +10,27 @@ import androidx.compose.ui.unit.dp
 
 data class OhTeePeeCellConfiguration(
     val shape: Shape,
-    val backgroundColor: Color,
+    val cellBackground: OhTeePeeCellBackground,
     val borderColor: Color,
     val borderWidth: Dp,
     val textStyle: TextStyle,
     val placeHolderTextStyle: TextStyle,
 ) {
+
     companion object {
         val BORDER_WIDTH = 1.dp
 
         @Composable
         fun withDefaults(
             shape: Shape = MaterialTheme.shapes.medium,
-            backgroundColor: Color = MaterialTheme.colors.surface,
+            cellBackground: OhTeePeeCellBackground = OhTeePeeCellBackground.Solid(MaterialTheme.colors.surface),
             borderColor: Color = MaterialTheme.colors.primary,
             borderWidth: Dp = BORDER_WIDTH,
             textStyle: TextStyle = TextStyle(),
             placeHolderTextStyle: TextStyle = textStyle,
         ) = OhTeePeeCellConfiguration(
             shape = shape,
-            backgroundColor = backgroundColor,
+            cellBackground = cellBackground,
             borderColor = borderColor,
             borderWidth = borderWidth,
             textStyle = textStyle,

sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt

@@ -33,8 +33,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.geometry.center
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RadialGradientShader
 import androidx.compose.ui.graphics.Shader
@@ -46,6 +48,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.composeuisuite.ohteepee.configuration.OhTeePeeCellBackground
 import com.composeuisuite.ohteepee.configuration.OhTeePeeCellConfiguration
 import com.composeuisuite.ohteepee.configuration.OhTeePeeConfigurations
 import com.composeuisuite.ohteepee.configuration.OhTeePeeErrorAnimationConfig
@@ -108,9 +111,10 @@ private fun Sample0(
     modifier: Modifier = Modifier,
 ) {
     val backgroundColor = Color(0xFF4F4F83)
+    val cellBackgroundColor = Color(0xFFFFE09A).copy(alpha = 0.2f)
     var otpValue: String by remember { mutableStateOf("") }
     val defaultConfig = OhTeePeeCellConfiguration.withDefaults(
-        backgroundColor = backgroundColor.copy(alpha = 0.6f),
+        cellBackground = OhTeePeeCellBackground.Solid(cellBackgroundColor),
         textStyle = TextStyle(
             color = Color.White,
             fontSize = 18.sp,
@@ -188,7 +192,7 @@ private fun Sample1(
     val surfaceColor = Color(0xFFFFE09A)
     var otpValue: String by remember { mutableStateOf("") }
     val defaultConfig = OhTeePeeCellConfiguration.withDefaults(
-        backgroundColor = backgroundColor.copy(alpha = 0.6f),
+        cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)),
         textStyle = TextStyle(
             color = Color.Black,
             fontSize = 18.sp,
@@ -307,7 +311,14 @@ private fun Sample2(
     val backgroundColor = Color(0xFF1A1E22)
     var otpValue: String by remember { mutableStateOf("") }
     val defaultConfig = OhTeePeeCellConfiguration.withDefaults(
-        backgroundColor = backgroundColor.copy(alpha = 0.6f),
+        cellBackground = OhTeePeeCellBackground.Gradient(
+            brush = Brush.linearGradient(
+                colors = listOf(Color(0xFFAB5EEE), Color(0xFF4F0995)),
+                start = Offset.Zero,
+                end = Offset.Infinite,
+            ),
+            alpha = 0.12f,
+        ),
         textStyle = TextStyle(
             color = Color.White,
             fontSize = 18.sp,
@@ -411,7 +422,7 @@ private fun Sample3(
     val defaultConfig = OhTeePeeCellConfiguration.withDefaults(
         borderColor = Color.Transparent,
         borderWidth = 0.dp,
-        backgroundColor = backgroundColor.copy(alpha = 0.6f),
+        cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)),
         textStyle = TextStyle(
             color = Color.Black,
         ),
@@ -439,10 +450,10 @@ private fun Sample3(
                     .padding(horizontal = 4.dp)
                     .size(48.dp),
                 filledCellConfig = defaultConfig.copy(
-                    backgroundColor = Color.White,
+                    cellBackground = OhTeePeeCellBackground.Solid(Color.White),
                 ),
                 activeCellConfig = defaultConfig.copy(
-                    backgroundColor = Color.White,
+                    cellBackground = OhTeePeeCellBackground.Solid(Color.White),
                 ),
                 errorCellConfig = defaultConfig,
             ),