Spendesk · kelianClerc · Jan 31, 2025 · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025
diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/actionmenu/ActionMenuSection.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/actionmenu/ActionMenuSection.kt
@@ -43,7 +43,7 @@ fun ActionMenuSection(
     Card(
         modifier = modifier,
         colors = CardDefaults.cardColors(
-            containerColor = GrapesTheme.colors.structureSurface,
+            containerColor = GrapesTheme.colors.backgroundPrimaryDefault,
         ),
         shape = sectionShape,
     ) {
@@ -92,7 +92,7 @@ private fun ActionMenuSectionHeader(
             Text(
                 text = title,
                 style = GrapesTheme.typography.titleM,
-                color = GrapesTheme.colors.structureComplementary,
+                color = GrapesTheme.colors.contentPrimary,
                 maxLines = TITLE_MAX_LINES,
                 overflow = TextOverflow.Ellipsis,
             )

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesMediumTopAppBar.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesMediumTopAppBar.kt
@@ -63,7 +63,7 @@ fun GrapesMediumTopAppBar(
             title = {
                 Text(
                     text = title,
-                    color = GrapesTheme.colors.structureComplementary,
+                    color = GrapesTheme.colors.contentPrimary,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                     style = GrapesTheme.typography.titleXl,

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesNavigationBar.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesNavigationBar.kt
@@ -41,8 +41,8 @@ fun GrapesNavigationBar(
     windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
 ) {
     NavigationBar(
-        containerColor = GrapesTheme.colors.structureSurface,
-        contentColor = GrapesTheme.colors.primaryNormal,
+        containerColor = GrapesTheme.colors.backgroundPrimaryDefault,
+        contentColor = GrapesTheme.colors.contentSelected,
         windowInsets = windowInsets,
         modifier = modifier,
     ) {
@@ -64,9 +64,9 @@ private fun RowScope.GrapesNavigationBarItem(
 ) {
     val textStyle = GrapesTheme.typography.titleS
     val colors = NavigationBarItemDefaults.colors(
-        indicatorColor = GrapesTheme.colors.structureSurface,
-        selectedIconColor = GrapesTheme.colors.primaryNormal,
-        selectedTextColor = GrapesTheme.colors.primaryNormal,
+        indicatorColor = GrapesTheme.colors.backgroundPrimaryDefault,
+        selectedIconColor = GrapesTheme.colors.contentSelected,
+        selectedTextColor = GrapesTheme.colors.contentSelected,
         unselectedIconColor = GrapesTheme.colors.neutralDark,
         unselectedTextColor = GrapesTheme.colors.neutralDark,
     )

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBarDefaults.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBarDefaults.kt
@@ -11,11 +11,11 @@ object GrapesTopAppBarDefaults {
     @Composable
     @OptIn(ExperimentalMaterial3Api::class)
     fun mediumTopAppBarColors(
-        containerColor: Color = GrapesTheme.colors.structureBackground,
-        scrolledContainerColor: Color = GrapesTheme.colors.structureBackground,
-        navigationIconContentColor: Color = GrapesTheme.colors.structureComplementary,
-        titleContentColor: Color = GrapesTheme.colors.structureComplementary,
-        actionIconContentColor: Color = GrapesTheme.colors.structureComplementary,
+        containerColor: Color = GrapesTheme.colors.backgroundPrimaryDefault,
+        scrolledContainerColor: Color = GrapesTheme.colors.backgroundPrimaryDefault,
+        navigationIconContentColor: Color = GrapesTheme.colors.contentPrimary,
+        titleContentColor: Color = GrapesTheme.colors.contentPrimary,
+        actionIconContentColor: Color = GrapesTheme.colors.contentPrimary,
     ) = TopAppBarDefaults.mediumTopAppBarColors(
         containerColor = containerColor,
         scrolledContainerColor = scrolledContainerColor,
@@ -27,11 +27,11 @@ object GrapesTopAppBarDefaults {
     @Composable
     @OptIn(ExperimentalMaterial3Api::class)
     fun topAppBarColors(
-        containerColor: Color = GrapesTheme.colors.structureSurface,
-        scrolledContainerColor: Color = GrapesTheme.colors.structureSurface,
-        navigationIconContentColor: Color = GrapesTheme.colors.structureComplementary,
-        titleContentColor: Color = GrapesTheme.colors.structureComplementary,
-        actionIconContentColor: Color = GrapesTheme.colors.structureComplementary,
+        containerColor: Color = GrapesTheme.colors.backgroundPrimaryDefault,
+        scrolledContainerColor: Color = GrapesTheme.colors.backgroundPrimaryDefault,
+        navigationIconContentColor: Color = GrapesTheme.colors.contentPrimary,
+        titleContentColor: Color = GrapesTheme.colors.contentPrimary,
+        actionIconContentColor: Color = GrapesTheme.colors.contentPrimary,
     ) = TopAppBarDefaults.topAppBarColors(
         containerColor = containerColor,
         scrolledContainerColor = scrolledContainerColor,

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBarIcons.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBarIcons.kt
@@ -8,7 +8,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.unit.dp
 import com.spendesk.grapes.compose.R
 import com.spendesk.grapes.compose.theme.GrapesTheme
 
@@ -34,10 +33,10 @@ fun GrapesTopAppBarBackIcon(
     modifier: Modifier = Modifier,
 ) {
     Icon(
-        modifier = modifier.size(24.dp),
+        modifier = modifier.size(GrapesTheme.dimensions.sizeIconXl),
         imageVector = ImageVector.vectorResource(R.drawable.ic_grapes_icon_arrow_left),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_back_icon_description),
-        tint = GrapesTheme.colors.structureComplementary,
+        tint = GrapesTheme.colors.contentPrimary,
     )
 }
 
@@ -46,10 +45,10 @@ fun GrapesTopAppBarCloseIcon(
     modifier: Modifier = Modifier,
 ) {
     Icon(
-        modifier = modifier.size(24.dp),
+        modifier = modifier.size(GrapesTheme.dimensions.sizeIconXl),
         imageVector = ImageVector.vectorResource(R.drawable.ic_grapes_icon_cross_small),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_close_icon_description),
-        tint = GrapesTheme.colors.structureComplementary
+        tint = GrapesTheme.colors.contentPrimary
     )
 }
 
@@ -58,9 +57,9 @@ fun GrapesTopAppBarMoreIcon(
     modifier: Modifier = Modifier,
 ) {
     Icon(
-        modifier = modifier.size(24.dp),
+        modifier = modifier.size(GrapesTheme.dimensions.sizeIconXl),
         imageVector = ImageVector.vectorResource(R.drawable.ic_grapes_icon_ellipsis_vertical),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_more_icon_description),
-        tint = GrapesTheme.colors.structureComplementary
+        tint = GrapesTheme.colors.contentPrimary
     )
 }
diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/avatar/GrapesEditAvatar.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/avatar/GrapesEditAvatar.kt
@@ -39,7 +39,7 @@ fun GrapesEditAvatar(
     modifier: Modifier = Modifier,
     badgeOffset: DpOffset = EditAvatarDefaults.badgeOffset,
     badgeSize: DpSize = EditAvatarDefaults.badgeSize,
-    badgeTint: Color = GrapesTheme.colors.structureComplementary,
+    badgeTint: Color = GrapesTheme.colors.contentPrimary,
     enabled: Boolean = true,
     onClick: () -> Unit = {},
 ) {

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/badge/GrapesBadgeDefaults.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/badge/GrapesBadgeDefaults.kt
@@ -6,6 +6,7 @@ import androidx.compose.runtime.Stable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.spendesk.grapes.compose.theme.GrapesTheme
+
 @Stable
 interface GrapesBadgeColors {
 
@@ -48,19 +49,19 @@ object GrapesBadgeDefaults {
 
     @Composable
     fun neutralBadgeColors(): GrapesBadgeColors = DefaultBadgeColors(
-        textColor = GrapesTheme.colors.neutralDark,
-        backgroundColor = GrapesTheme.colors.neutralLightest,
+        textColor = GrapesTheme.colors.contentSecondaryBGPrimary,
+        backgroundColor = GrapesTheme.colors.backgroundSecondaryDefault,
     )
 
     @Composable
     fun primaryBadgeColors(): GrapesBadgeColors = DefaultBadgeColors(
-        textColor = GrapesTheme.colors.structureSurface,
-        backgroundColor = GrapesTheme.colors.primaryNormal,
+        textColor = GrapesTheme.colors.contentComplementary,
+        backgroundColor = GrapesTheme.colors.backgroundPrimaryBrandDefault,
     )
 
     @Composable
     fun alertBadgeColors(): GrapesBadgeColors = DefaultBadgeColors(
-        textColor = GrapesTheme.colors.structureSurface,
-        backgroundColor = GrapesTheme.colors.alertNormal,
+        textColor = GrapesTheme.colors.contentComplementary,
+        backgroundColor = GrapesTheme.colors.backgroundPrimaryAlertDefault,
     )
 }
diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/badge/LegacyBadge.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/badge/LegacyBadge.kt
@@ -4,37 +4,36 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import com.spendesk.grapes.compose.model.GrapesConfigurationStatus
 import com.spendesk.grapes.compose.theme.GrapesTheme
-import com.spendesk.grapes.compose.theme.extensions.contentColorFor
+import com.spendesk.grapes.compose.theme.extensions.backgroundColorFor
+import com.spendesk.grapes.compose.theme.extensions.neutralContentColorFor
 
 /**
  * @author Kélian CLERC
  * @since 02/12/2022
  */
 
-private const val CORNER_SHAPE_CONST = 100
-
 @Deprecated("Replaced by GrapesTag or new GrapesBadge")
 @Composable
 fun LegacyGrapesBadge(
     content: String,
     configuration: GrapesConfigurationStatus,
     modifier: Modifier = Modifier
 ) {
-    val backgroundColor = GrapesTheme.colors.contentColorFor(configuration)
+    val backgroundColor = GrapesTheme.colors.backgroundColorFor(configuration)
+    val contentColor = GrapesTheme.colors.neutralContentColorFor(configuration)
     Text(
         text = content,
         modifier = modifier
-            .background(backgroundColor, RoundedCornerShape(CORNER_SHAPE_CONST))
+            .background(backgroundColor, GrapesTheme.shapes.radius1000)
             .padding(horizontal = GrapesTheme.dimensions.unit16, vertical = GrapesTheme.dimensions.unit4),
         style = GrapesTheme.typography.titleM,
-        color = GrapesTheme.colors.mainWhite
+        color = contentColor
     )
 }
 
@@ -48,6 +47,7 @@ fun GrapesBadgePreview() {
             LegacyGrapesBadge(content = "Message Inline Neutral", configuration = GrapesConfigurationStatus.NEUTRAL)
             LegacyGrapesBadge(content = "Message Inline Alert", configuration = GrapesConfigurationStatus.ALERT)
             LegacyGrapesBadge(content = "Message Inline Warning", configuration = GrapesConfigurationStatus.WARNING)
+            LegacyGrapesBadge(content = "Message Inline Blocked", configuration = GrapesConfigurationStatus.BLOCKED)
         }
     }
 }
diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt
@@ -84,7 +84,7 @@ private fun GrapesBucketPreview() {
                 modifier = Modifier.padding(12.dp),
                 title = "Rick's bucket",
                 action = "Delete",
-                actionColor = GrapesTheme.colors.alertNormal,
+                actionColor = GrapesTheme.colors.contentAlertDefault,
                 onActionClicked = { println("Clicked") },
                 content = {
                     Column {
@@ -106,7 +106,7 @@ private fun GrapesBucketPreview() {
                         modifier = Modifier.background(Color.Yellow),
                         title = "Bucket de Rick Astley",
                         action = "Remove",
-                        actionColor = GrapesTheme.colors.alertNormal
+                        actionColor = GrapesTheme.colors.contentAlertDefault
                     )
                 }
             ) {

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketContainer.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketContainer.kt
@@ -32,8 +32,8 @@ fun GrapesBucketContainer(
 ) {
     Box(
         modifier = modifier
-            .background(GrapesTheme.colors.mainWhite, GrapesTheme.shapes.radius8)
-            .border(GrapesBucketBorderWidth, GrapesTheme.colors.neutralLight, GrapesTheme.shapes.radius8)
+            .background(GrapesTheme.colors.backgroundPrimaryDefault, GrapesTheme.shapes.radius8)
+            .border(GrapesBucketBorderWidth, GrapesTheme.colors.borderDefault, GrapesTheme.shapes.radius8)
             .clip(GrapesTheme.shapes.radius8)
     ) {
         content()

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt
@@ -35,13 +35,13 @@ fun GrapesBucketHeadline(
         Text(
             modifier = Modifier.weight(1f, fill = true),
             text = title,
-            color = GrapesTheme.colors.structureComplementary,
+            color = GrapesTheme.colors.contentPrimary,
             overflow = TextOverflow.Ellipsis,
             maxLines = 1,
             style = GrapesTheme.typography.titleS
         )
         if (action != null && actionColor != null) {
-            Spacer(modifier = Modifier.size(GrapesTheme.dimensions.sizing1))
+            Spacer(modifier = Modifier.size(GrapesTheme.dimensions.unit12))
             Text(
                 modifier = Modifier.clickable(onClick = onActionClicked ?: {}, onClickLabel = action, role = Role.Button),
                 text = action,
@@ -71,13 +71,13 @@ private fun GrapesBucketHeadlinePreview() {
             GrapesBucketHeadline(title = "Bucket de Rick Astley a bit longer than expecteeeeeeeeeeeeeed")
             Spacer(modifier = Modifier.size(GrapesTheme.dimensions.unit16))
 
-            GrapesBucketHeadline(title = "Bucket de Rick Astley a bit longer than expecteeeeeeeeeeeeeeeeeeed", action = "Remove", actionColor = GrapesTheme.colors.alertNormal)
+            GrapesBucketHeadline(title = "Bucket de Rick Astley a bit longer than expecteeeeeeeeeeeeeeeeeeed", action = "Remove", actionColor = GrapesTheme.colors.contentAlertDefault)
             Spacer(modifier = Modifier.size(GrapesTheme.dimensions.unit16))
 
-            GrapesBucketHeadline(title = "Bucket de Rick Astley", action = "Remove", actionColor = GrapesTheme.colors.alertNormal)
+            GrapesBucketHeadline(title = "Bucket de Rick Astley", action = "Remove", actionColor = GrapesTheme.colors.contentAlertDefault)
             Spacer(modifier = Modifier.size(GrapesTheme.dimensions.unit16))
 
-            GrapesBucketHeadline(title = "Bucket de Rick Astley", action = "Remooooooove with too many ooooooooooos", actionColor = GrapesTheme.colors.alertNormal)
+            GrapesBucketHeadline(title = "Bucket de Rick Astley", action = "Remooooooove with too many ooooooooooos", actionColor = GrapesTheme.colors.contentAlertDefault)
             Spacer(modifier = Modifier.size(GrapesTheme.dimensions.unit16))
         }
     }

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButton.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButton.kt
@@ -9,7 +9,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.spendesk.grapes.compose.button.atoms.GrapesButtonContentText
 import com.spendesk.grapes.compose.theme.GrapesTheme
 
@@ -67,10 +66,10 @@ fun ButtonPrimaryPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Primary Enabled",
@@ -137,10 +136,10 @@ fun ButtonSecondaryPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Secondary Enabled",
@@ -208,10 +207,10 @@ fun ButtonTextPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Text Enabled",
@@ -279,10 +278,10 @@ fun ButtonWarningPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Warning Enabled",
@@ -315,10 +314,10 @@ fun ButtonAlertPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Alert Enabled",
@@ -419,10 +418,10 @@ fun ButtonAlertOutlinedPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .padding(16.dp)
+                .padding(GrapesTheme.dimensions.unit16)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {
             GrapesButton(
                 text = "Button Alert Enabled",

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButtonBrand.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButtonBrand.kt
@@ -108,7 +108,7 @@ private fun GrapesButtonBrandPreview() {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .background(GrapesTheme.colors.structureBackground)
+                .background(GrapesTheme.colors.backgroundSecondaryDefault)
                 .padding(GrapesTheme.dimensions.unit16),
             verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.unit16)
         ) {