Sirio Design Tokens 7.0.1

design/build.gradle.kts

@@ -28,7 +28,7 @@ android {
         compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.4.7"
+        kotlinCompilerExtensionVersion = libs.versions.composeCompiler.get()
     }
     packaging {
         resources.excludes.add("/META-INF/{AL2.0,LGPL2.1}")

design/src/main/java/it/inps/sirio/styleDictionary/StyleDictionaryBoxShadow.kt

@@ -8,8 +8,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shadow
 
 object StyleDictionaryBoxShadow {
-    val elevationElevation01 = Shadow(Color(0xB3E3E5E8), Offset(0f, 0f), 16f)
-    val elevationElevation02 = Shadow(Color(0xB3E3E5E8), Offset(0f, 0f), 24f)
-    val elevationElevation03 = Shadow(Color(0xB3E3E5E8), Offset(0f, 0f), 32f)
-    val elevationElevation04 = Shadow(Color(0xB3E3E5E8), Offset(0f, 0f), 40f)
+    val elevationElevation01 = Shadow(Color(0xFFE3E5E8), Offset(0f, 0f), 16f)
+    val elevationElevation02 = Shadow(Color(0xFFE3E5E8), Offset(0f, 0f), 24f)
+    val elevationElevation03 = Shadow(Color(0xFFE3E5E8), Offset(0f, 0f), 32f)
+    val elevationElevation04 = Shadow(Color(0xFFE3E5E8), Offset(0f, 0f), 40f)
 }

design/src/main/java/it/inps/sirio/theme/Size.kt

@@ -163,9 +163,8 @@ internal val tabHeight = 44.dp
 internal val tabIndicatorHeight = 4.dp
 internal val tabIconSize = 16.dp
 internal val tabEdgePadding = 0.dp
-internal val tabHorizontalTextPadding = 12.dp
-internal val tabWithIconHorizontalPadding = 40.dp
-internal val tabDividerWidth = 2.dp
+internal const val tabHorizontalPadding = 16
+internal const val tabWithIconHorizontalSpacing = 4
 
 internal val searchBarQueriesVerticalPadding = 9.dp
 internal val searchBarQueriesPadding = 8.dp
@@ -191,4 +190,4 @@ internal const val cardImageHeight = 220
 internal const val cardImagePaddingBottom = 8
 
 internal const val badgeBorderSize = 1.5
-internal const val badgeSize = 8
+internal const val badgeSize = 8

design/src/main/java/it/inps/sirio/theme/Theme.kt

@@ -13,7 +13,11 @@ import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.material.ripple.RippleAlpha
 import androidx.compose.material.ripple.RippleTheme
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
@@ -44,7 +48,7 @@ fun SirioTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable
 //    }
 
     CompositionLocalProvider(
-        LocalSirioColors provides colors,
+        localSirioColors provides colors,
         LocalSirioTypography provides Typography,
         LocalRippleTheme provides ClearRippleTheme,
 //        LocalSirioElevation provides Elevation,
@@ -55,7 +59,7 @@ fun SirioTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable
 object SirioTheme {
     val colors: SirioColors
         @Composable
-        get() = LocalSirioColors.current
+        get() = localSirioColors.current
 
     val typography: SirioTypography
         @Composable
@@ -282,7 +286,7 @@ data class SirioColorState(
     }
 }
 
-private val LocalSirioColors = staticCompositionLocalOf {
+private val localSirioColors = staticCompositionLocalOf {
     SirioColors(
         brand = Color.Unspecified,
         fabDefaultBackground = Color.Unspecified,

design/src/main/java/it/inps/sirio/ui/card/SirioCardCommon.kt

@@ -12,6 +12,7 @@
 
 package it.inps.sirio.ui.card
 
+import androidx.annotation.DrawableRes
 import androidx.annotation.Keep
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -49,7 +50,7 @@ import it.inps.sirio.ui.button.SirioButtonCommon
 import it.inps.sirio.ui.tag.SirioTagColors
 import it.inps.sirio.ui.tag.TagCommon
 import it.inps.sirio.ui.text.SirioText
-import it.inps.sirio.utils.SirioFaIcon
+import it.inps.sirio.utils.SirioIcon
 
 /**
  * Sirio Card common implementation
@@ -63,6 +64,7 @@ import it.inps.sirio.utils.SirioFaIcon
  * @param imageContentDescriptor The content descriptor associated with the image
  * @param category The category of the card (optional).
  * @param icon The FA icon of the card (optional), used if no category is provided.
+ * @param iconResId The resource id of the image to be used as the icon if no [icon] is provided
  * @param date The date of the card (optional).
  * @param subtitle The subtitle of the card (optional).
  * @param signature The signature of the card (optional).
@@ -83,6 +85,7 @@ internal fun SirioCardCommon(
     imageContentDescriptor: String? = null,
     category: String? = null,
     icon: FaIconType? = null,
+    @DrawableRes iconResId: Int? = null,
     date: String? = null,
     subtitle: String? = null,
     signature: String? = null,
@@ -96,7 +99,7 @@ internal fun SirioCardCommon(
         modifier = Modifier
             .shadow(
                 ambientColor = StyleDictionaryBoxShadow.elevationElevation01.color,
-                elevation = 0.dp
+                elevation = StyleDictionaryBoxShadow.elevationElevation01.blurRadius.dp
             )
             .then(modifier),
         shape = Shapes.small,
@@ -135,11 +138,12 @@ internal fun SirioCardCommon(
                         colors = colors.category,
                     )
                 } ?: run {
-                    icon?.let {
-                        SirioFaIcon(
+                    if (icon != null || iconResId != null) {
+                        SirioIcon(
                             faIcon = icon,
+                            iconResId = iconResId,
+                            iconColor = colors.icon,
                             size = cardIconSize.dp,
-                            tint = colors.icon,
                         )
                     }
                 }
@@ -324,4 +328,4 @@ fun SirioCardCommonPreview() {
             )
         )
     }
-}
+}

design/src/main/java/it/inps/sirio/ui/card/SirioProcessCard.kt

@@ -7,6 +7,7 @@
 //
 package it.inps.sirio.ui.card
 
+import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -29,6 +30,7 @@ import it.inps.sirio.theme.SirioTheme
  * @param modifier The [Modifier] for the card (optional).
  * @param category The category of the card (optional).
  * @param icon The FA icon of the card (optional), used if no category is provided.
+ * @param iconResId The resource id of the image to be used as the icon if no [icon] is provided
  * @param date The date of the card (optional).
  * @param buttonText The text for the button (optional).
  * @param onClickButton The action to be performed when the button is clicked (optional).
@@ -44,6 +46,7 @@ fun SirioProcessCard(
     modifier: Modifier = Modifier,
     category: String? = null,
     icon: FaIconType? = null,
+    @DrawableRes iconResId: Int? = null,
     date: String? = null,
     item: SirioCardItemData? = null,
     onClickCard: () -> Unit,
@@ -59,6 +62,7 @@ fun SirioProcessCard(
         type = SirioCardType.PROCESS,
         category = category,
         icon = icon,
+        iconResId = iconResId,
         date = date,
         items = buildList { item?.let { add(it) } },
         onClickCard = onClickCard,
@@ -270,4 +274,4 @@ fun SirioProcessCardPreview() {
             }
         }
     }
-}
+}

design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckbox.kt

@@ -10,6 +10,7 @@ package it.inps.sirio.ui.checkbox
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
 import it.inps.sirio.theme.SirioTheme
 
@@ -36,6 +37,29 @@ fun SirioCheckbox(
     )
 }
 
+/**
+ * The Sirio checkbox
+ *
+ * @param text The string on the checkbox right
+ * @param checked Whether the checkbox is checked
+ * @param enabled Whether the checkbox is enabled
+ * @param onCheckedChange The callback when the checkbox state change
+ */
+@Composable
+fun SirioCheckbox(
+    text: AnnotatedString,
+    checked: Boolean,
+    enabled: Boolean = true,
+    onCheckedChange: (Boolean) -> Unit,
+) {
+    SirioCheckboxCommon(
+        text = text,
+        checked = checked,
+        enabled = enabled,
+        onCheckedChange = onCheckedChange,
+    )
+}
+
 @Preview
 @Composable
 private fun CheckboxPreview() {
@@ -49,4 +73,4 @@ private fun CheckboxPreview() {
             )
         }
     }
-}
+}

design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckboxCommon.kt

@@ -15,7 +15,12 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.interaction.collectIsPressedAsState
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.selection.toggleable
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -26,9 +31,17 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
 import com.guru.fontawesomecomposelib.FaIcons
-import it.inps.sirio.theme.*
+import it.inps.sirio.theme.SirioTheme
+import it.inps.sirio.theme.checkboxBorderWidth
+import it.inps.sirio.theme.checkboxCheckSize
+import it.inps.sirio.theme.checkboxCornerRadius
+import it.inps.sirio.theme.checkboxFocusBorderPadding
+import it.inps.sirio.theme.checkboxFocusExtraBorderWidth
+import it.inps.sirio.theme.checkboxSafeAreaPadding
+import it.inps.sirio.theme.checkboxSize
 import it.inps.sirio.ui.text.SirioTextCommon
 import it.inps.sirio.utils.SirioIcon
 
@@ -94,6 +107,66 @@ internal fun SirioCheckboxCommon(
     }
 }
 
+/**
+ * Sirio checkbox implementation
+ *
+ * @param text The string on the checkbox right
+ * @param checked Whether the checkbox is checked
+ * @param enabled Whether the checkbox is enabled
+ * @param onCheckedChange The callback when the checkbox state change
+ */
+@Composable
+internal fun SirioCheckboxCommon(
+    text: AnnotatedString,
+    checked: Boolean,
+    enabled: Boolean = true,
+    onCheckedChange: (Boolean) -> Unit,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val isFocused by interactionSource.collectIsFocusedAsState()
+    val isHovered by interactionSource.collectIsHoveredAsState()
+
+    val borderColor = if (!enabled) SirioTheme.colors.checkboxDisabled else when {
+        isFocused -> SirioTheme.colors.checkboxFocusContent
+        isPressed -> SirioTheme.colors.checkboxPressed
+        isHovered -> SirioTheme.colors.checkboxHoverContent
+        else -> SirioTheme.colors.checkboxPressed
+    }
+    val textColor =
+        if (!enabled) SirioTheme.colors.checkboxDisabledContent else if (checked) SirioTheme.colors.checkboxPressedText else borderColor
+    val checkColor =
+        if (enabled) SirioTheme.colors.checkboxPressed else SirioTheme.colors.checkboxDisabledContent
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .focusable(enabled = enabled, interactionSource = interactionSource)
+            .toggleable(
+                value = checked,
+                interactionSource = interactionSource,
+                indication = null,
+                role = Role.Checkbox,
+                enabled = enabled
+            ) {
+                onCheckedChange(it)
+            }
+    )
+    {
+        CustomCheckbox(
+            checked = checked,
+            checkColor = checkColor,
+            isFocused = isFocused,
+            borderColor = borderColor
+        )
+        SirioTextCommon(
+            text = text,
+            color = textColor,
+            typography = SirioTheme.typography.checkboxLabelText,
+        )
+    }
+}
+
 /**
  * The custom checkbox
  *
@@ -167,4 +240,4 @@ private fun CheckboxCommonPreview() {
             SirioCheckboxCommon(text = text, checked = true, onCheckedChange = {}, enabled = false)
         }
     }
-}
+}

design/src/main/java/it/inps/sirio/ui/slider/SirioSliderCommon.kt

@@ -112,7 +112,7 @@ internal fun SirioSliderCommon(
             Spacer(modifier = Modifier.height(sliderTextPaddingBottom))
         }
         Row {
-            var currentValue by remember(value) { mutableStateOf(value) }
+            var currentValue by remember(value) { mutableIntStateOf(value) }
             val focusManager = LocalFocusManager.current
             Column(Modifier.weight(1f)) {
                 Slider(
@@ -246,4 +246,4 @@ private fun SliderCommonPreview() {
                 onValueChange = {})
         }
     }
-}
+}

design/src/main/java/it/inps/sirio/ui/tabs/SirioTab.kt

@@ -31,7 +31,7 @@ import it.inps.sirio.theme.SirioTheme
  * @param icon The tab optional FA icon [FaIcons]
  * @param enabled Whether the tab can be selected by user
  * @param selected Whether the tab is the selected one
- * @param selection A [TabSelectionIndicator] for top or bottom selection indicator
+ * @param selection A [TabSelectionIndicatorPosition] for top or bottom selection indicator
  * @param onSelect The selection callback
  */
 @Composable
@@ -40,7 +40,7 @@ fun SirioTab(
     icon: FaIconType? = null,
     enabled: Boolean = true,
     selected: Boolean = false,
-    selection: TabSelectionIndicator = TabSelectionIndicator.TOP,
+    selection: TabSelectionIndicatorPosition = TabSelectionIndicatorPosition.TOP,
     onSelect: () -> Unit,
 ) {
     SirioTabCommon(
@@ -71,8 +71,8 @@ private fun TabsPreview() {
                 enabled = true,
                 selected = true,
                 onSelect = {},
-                selection = TabSelectionIndicator.TOP,
+                selection = TabSelectionIndicatorPosition.TOP,
             )
         }
     }
-}
+}