feat: add theme, colors and shapes

composeApp/src/commonMain/kotlin/App.kt

@@ -1,16 +1,16 @@
-import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import coil3.annotation.ExperimentalCoilApi
 import coil3.compose.setSingletonImageLoaderFactory
 import com.aslansari.spiritvisor.SpiritVisorApp
 import com.aslansari.spiritvisor.getAsyncImageLoader
+import com.aslansari.spiritvisor.theme.SpiritVisorTheme
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @OptIn(ExperimentalCoilApi::class)
 @Composable
 @Preview
 fun App() {
-    MaterialTheme {
+    SpiritVisorTheme {
         setSingletonImageLoaderFactory { context ->
             getAsyncImageLoader(context)
         }

composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/home/HomeScreen.kt

@@ -15,6 +15,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -86,10 +87,15 @@ private fun RowScope.FlavorCategoryButton(
     modifier: Modifier = Modifier,
 ) {
     Button(
-        modifier = modifier.weight(1f),
+        modifier = modifier.height(60.dp).weight(1f),
         shape = MaterialTheme.shapes.medium,
         onClick = onClick,
     ) {
-        Text(text, style = MaterialTheme.typography.h6)
+        Text(
+            text = text,
+            style = MaterialTheme.typography.h6,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
     }
 }

composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/theme/Color.kt

@@ -0,0 +1,226 @@
+package com.aslansari.spiritvisor.theme
+
+import androidx.compose.ui.graphics.Color
+
+val primaryLight = Color(0xFF1A6B51)
+val onPrimaryLight = Color(0xFFFFFFFF)
+val primaryContainerLight = Color(0xFFA6F2D2)
+val onPrimaryContainerLight = Color(0xFF002116)
+val secondaryLight = Color(0xFF4C6359)
+val onSecondaryLight = Color(0xFFFFFFFF)
+val secondaryContainerLight = Color(0xFFCEE9DB)
+val onSecondaryContainerLight = Color(0xFF092017)
+val tertiaryLight = Color(0xFF3F6375)
+val onTertiaryLight = Color(0xFFFFFFFF)
+val tertiaryContainerLight = Color(0xFFC2E8FD)
+val onTertiaryContainerLight = Color(0xFF001F2A)
+val errorLight = Color(0xFFBA1A1A)
+val onErrorLight = Color(0xFFFFFFFF)
+val errorContainerLight = Color(0xFFFFDAD6)
+val onErrorContainerLight = Color(0xFF410002)
+val backgroundLight = Color(0xFFFFFFFF)
+val onBackgroundLight = Color(0xFF171D1A)
+val surfaceLight = Color(0xFFF5FBF5)
+val onSurfaceLight = Color(0xFF171D1A)
+val surfaceVariantLight = Color(0xFFDBE5DE)
+val onSurfaceVariantLight = Color(0xFF404944)
+val outlineLight = Color(0xFF707974)
+val outlineVariantLight = Color(0xFFBFC9C2)
+val scrimLight = Color(0xFF000000)
+val inverseSurfaceLight = Color(0xFF2C322E)
+val inverseOnSurfaceLight = Color(0xFFECF2ED)
+val inversePrimaryLight = Color(0xFF8AD6B6)
+val surfaceDimLight = Color(0xFFD6DBD6)
+val surfaceBrightLight = Color(0xFFF5FBF5)
+val surfaceContainerLowestLight = Color(0xFFFFFFFF)
+val surfaceContainerLowLight = Color(0xFFEFF5F0)
+val surfaceContainerLight = Color(0xFFE9EFEA)
+val surfaceContainerHighLight = Color(0xFFE4EAE4)
+val surfaceContainerHighestLight = Color(0xFFDEE4DF)
+
+val primaryLightMediumContrast = Color(0xFF004D38)
+val onPrimaryLightMediumContrast = Color(0xFFFFFFFF)
+val primaryContainerLightMediumContrast = Color(0xFF368167)
+val onPrimaryContainerLightMediumContrast = Color(0xFFFFFFFF)
+val secondaryLightMediumContrast = Color(0xFF31483E)
+val onSecondaryLightMediumContrast = Color(0xFFFFFFFF)
+val secondaryContainerLightMediumContrast = Color(0xFF627A6E)
+val onSecondaryContainerLightMediumContrast = Color(0xFFFFFFFF)
+val tertiaryLightMediumContrast = Color(0xFF214758)
+val onTertiaryLightMediumContrast = Color(0xFFFFFFFF)
+val tertiaryContainerLightMediumContrast = Color(0xFF55798C)
+val onTertiaryContainerLightMediumContrast = Color(0xFFFFFFFF)
+val errorLightMediumContrast = Color(0xFF8C0009)
+val onErrorLightMediumContrast = Color(0xFFFFFFFF)
+val errorContainerLightMediumContrast = Color(0xFFDA342E)
+val onErrorContainerLightMediumContrast = Color(0xFFFFFFFF)
+val backgroundLightMediumContrast = Color(0xFFF5FBF5)
+val onBackgroundLightMediumContrast = Color(0xFF171D1A)
+val surfaceLightMediumContrast = Color(0xFFF5FBF5)
+val onSurfaceLightMediumContrast = Color(0xFF171D1A)
+val surfaceVariantLightMediumContrast = Color(0xFFDBE5DE)
+val onSurfaceVariantLightMediumContrast = Color(0xFF3C4540)
+val outlineLightMediumContrast = Color(0xFF58615C)
+val outlineVariantLightMediumContrast = Color(0xFF737D77)
+val scrimLightMediumContrast = Color(0xFF000000)
+val inverseSurfaceLightMediumContrast = Color(0xFF2C322E)
+val inverseOnSurfaceLightMediumContrast = Color(0xFFECF2ED)
+val inversePrimaryLightMediumContrast = Color(0xFF8AD6B6)
+val surfaceDimLightMediumContrast = Color(0xFFD6DBD6)
+val surfaceBrightLightMediumContrast = Color(0xFFF5FBF5)
+val surfaceContainerLowestLightMediumContrast = Color(0xFFFFFFFF)
+val surfaceContainerLowLightMediumContrast = Color(0xFFEFF5F0)
+val surfaceContainerLightMediumContrast = Color(0xFFE9EFEA)
+val surfaceContainerHighLightMediumContrast = Color(0xFFE4EAE4)
+val surfaceContainerHighestLightMediumContrast = Color(0xFFDEE4DF)
+
+val primaryLightHighContrast = Color(0xFF00281C)
+val onPrimaryLightHighContrast = Color(0xFFFFFFFF)
+val primaryContainerLightHighContrast = Color(0xFF004D38)
+val onPrimaryContainerLightHighContrast = Color(0xFFFFFFFF)
+val secondaryLightHighContrast = Color(0xFF10261E)
+val onSecondaryLightHighContrast = Color(0xFFFFFFFF)
+val secondaryContainerLightHighContrast = Color(0xFF31483E)
+val onSecondaryContainerLightHighContrast = Color(0xFFFFFFFF)
+val tertiaryLightHighContrast = Color(0xFF002633)
+val onTertiaryLightHighContrast = Color(0xFFFFFFFF)
+val tertiaryContainerLightHighContrast = Color(0xFF214758)
+val onTertiaryContainerLightHighContrast = Color(0xFFFFFFFF)
+val errorLightHighContrast = Color(0xFF4E0002)
+val onErrorLightHighContrast = Color(0xFFFFFFFF)
+val errorContainerLightHighContrast = Color(0xFF8C0009)
+val onErrorContainerLightHighContrast = Color(0xFFFFFFFF)
+val backgroundLightHighContrast = Color(0xFFF5FBF5)
+val onBackgroundLightHighContrast = Color(0xFF171D1A)
+val surfaceLightHighContrast = Color(0xFFF5FBF5)
+val onSurfaceLightHighContrast = Color(0xFF000000)
+val surfaceVariantLightHighContrast = Color(0xFFDBE5DE)
+val onSurfaceVariantLightHighContrast = Color(0xFF1D2622)
+val outlineLightHighContrast = Color(0xFF3C4540)
+val outlineVariantLightHighContrast = Color(0xFF3C4540)
+val scrimLightHighContrast = Color(0xFF000000)
+val inverseSurfaceLightHighContrast = Color(0xFF2C322E)
+val inverseOnSurfaceLightHighContrast = Color(0xFFFFFFFF)
+val inversePrimaryLightHighContrast = Color(0xFFAFFCDB)
+val surfaceDimLightHighContrast = Color(0xFFD6DBD6)
+val surfaceBrightLightHighContrast = Color(0xFFF5FBF5)
+val surfaceContainerLowestLightHighContrast = Color(0xFFFFFFFF)
+val surfaceContainerLowLightHighContrast = Color(0xFFEFF5F0)
+val surfaceContainerLightHighContrast = Color(0xFFE9EFEA)
+val surfaceContainerHighLightHighContrast = Color(0xFFE4EAE4)
+val surfaceContainerHighestLightHighContrast = Color(0xFFDEE4DF)
+
+val primaryDark = Color(0xFF8AD6B6)
+val onPrimaryDark = Color(0xFF003828)
+val primaryContainerDark = Color(0xFF00513B)
+val onPrimaryContainerDark = Color(0xFFA6F2D2)
+val secondaryDark = Color(0xFFB3CCBF)
+val onSecondaryDark = Color(0xFF1E352C)
+val secondaryContainerDark = Color(0xFF354B41)
+val onSecondaryContainerDark = Color(0xFFCEE9DB)
+val tertiaryDark = Color(0xFFA6CCE0)
+val onTertiaryDark = Color(0xFF0A3545)
+val tertiaryContainerDark = Color(0xFF264B5C)
+val onTertiaryContainerDark = Color(0xFFC2E8FD)
+val errorDark = Color(0xFFFFB4AB)
+val onErrorDark = Color(0xFF690005)
+val errorContainerDark = Color(0xFF93000A)
+val onErrorContainerDark = Color(0xFFFFDAD6)
+val backgroundDark = Color(0xFF0F1512)
+val onBackgroundDark = Color(0xFFDEE4DF)
+val surfaceDark = Color(0xFF0F1512)
+val onSurfaceDark = Color(0xFFDEE4DF)
+val surfaceVariantDark = Color(0xFF404944)
+val onSurfaceVariantDark = Color(0xFFBFC9C2)
+val outlineDark = Color(0xFF89938D)
+val outlineVariantDark = Color(0xFF404944)
+val scrimDark = Color(0xFF000000)
+val inverseSurfaceDark = Color(0xFFDEE4DF)
+val inverseOnSurfaceDark = Color(0xFF2C322E)
+val inversePrimaryDark = Color(0xFF1A6B51)
+val surfaceDimDark = Color(0xFF0F1512)
+val surfaceBrightDark = Color(0xFF343B37)
+val surfaceContainerLowestDark = Color(0xFF0A0F0D)
+val surfaceContainerLowDark = Color(0xFF171D1A)
+val surfaceContainerDark = Color(0xFF1B211E)
+val surfaceContainerHighDark = Color(0xFF252B28)
+val surfaceContainerHighestDark = Color(0xFF303633)
+
+val primaryDarkMediumContrast = Color(0xFF8FDABB)
+val onPrimaryDarkMediumContrast = Color(0xFF001B11)
+val primaryContainerDarkMediumContrast = Color(0xFF549E82)
+val onPrimaryContainerDarkMediumContrast = Color(0xFF000000)
+val secondaryDarkMediumContrast = Color(0xFFB7D1C3)
+val onSecondaryDarkMediumContrast = Color(0xFF041A12)
+val secondaryContainerDarkMediumContrast = Color(0xFF7E968A)
+val onSecondaryContainerDarkMediumContrast = Color(0xFF000000)
+val tertiaryDarkMediumContrast = Color(0xFFABD0E4)
+val onTertiaryDarkMediumContrast = Color(0xFF001923)
+val tertiaryContainerDarkMediumContrast = Color(0xFF7196A9)
+val onTertiaryContainerDarkMediumContrast = Color(0xFF000000)
+val errorDarkMediumContrast = Color(0xFFFFBAB1)
+val onErrorDarkMediumContrast = Color(0xFF370001)
+val errorContainerDarkMediumContrast = Color(0xFFFF5449)
+val onErrorContainerDarkMediumContrast = Color(0xFF000000)
+val backgroundDarkMediumContrast = Color(0xFF0F1512)
+val onBackgroundDarkMediumContrast = Color(0xFFDEE4DF)
+val surfaceDarkMediumContrast = Color(0xFF0F1512)
+val onSurfaceDarkMediumContrast = Color(0xFFF6FCF7)
+val surfaceVariantDarkMediumContrast = Color(0xFF404944)
+val onSurfaceVariantDarkMediumContrast = Color(0xFFC3CDC6)
+val outlineDarkMediumContrast = Color(0xFF9BA59F)
+val outlineVariantDarkMediumContrast = Color(0xFF7C8580)
+val scrimDarkMediumContrast = Color(0xFF000000)
+val inverseSurfaceDarkMediumContrast = Color(0xFFDEE4DF)
+val inverseOnSurfaceDarkMediumContrast = Color(0xFF252B28)
+val inversePrimaryDarkMediumContrast = Color(0xFF00533C)
+val surfaceDimDarkMediumContrast = Color(0xFF0F1512)
+val surfaceBrightDarkMediumContrast = Color(0xFF343B37)
+val surfaceContainerLowestDarkMediumContrast = Color(0xFF0A0F0D)
+val surfaceContainerLowDarkMediumContrast = Color(0xFF171D1A)
+val surfaceContainerDarkMediumContrast = Color(0xFF1B211E)
+val surfaceContainerHighDarkMediumContrast = Color(0xFF252B28)
+val surfaceContainerHighestDarkMediumContrast = Color(0xFF303633)
+
+val primaryDarkHighContrast = Color(0xFFEDFFF4)
+val onPrimaryDarkHighContrast = Color(0xFF000000)
+val primaryContainerDarkHighContrast = Color(0xFF8FDABB)
+val onPrimaryContainerDarkHighContrast = Color(0xFF000000)
+val secondaryDarkHighContrast = Color(0xFFEDFFF4)
+val onSecondaryDarkHighContrast = Color(0xFF000000)
+val secondaryContainerDarkHighContrast = Color(0xFFB7D1C3)
+val onSecondaryContainerDarkHighContrast = Color(0xFF000000)
+val tertiaryDarkHighContrast = Color(0xFFF7FBFF)
+val onTertiaryDarkHighContrast = Color(0xFF000000)
+val tertiaryContainerDarkHighContrast = Color(0xFFABD0E4)
+val onTertiaryContainerDarkHighContrast = Color(0xFF000000)
+val errorDarkHighContrast = Color(0xFFFFF9F9)
+val onErrorDarkHighContrast = Color(0xFF000000)
+val errorContainerDarkHighContrast = Color(0xFFFFBAB1)
+val onErrorContainerDarkHighContrast = Color(0xFF000000)
+val backgroundDarkHighContrast = Color(0xFF0F1512)
+val onBackgroundDarkHighContrast = Color(0xFFDEE4DF)
+val surfaceDarkHighContrast = Color(0xFF0F1512)
+val onSurfaceDarkHighContrast = Color(0xFFFFFFFF)
+val surfaceVariantDarkHighContrast = Color(0xFF404944)
+val onSurfaceVariantDarkHighContrast = Color(0xFFF3FDF6)
+val outlineDarkHighContrast = Color(0xFFC3CDC6)
+val outlineVariantDarkHighContrast = Color(0xFFC3CDC6)
+val scrimDarkHighContrast = Color(0xFF000000)
+val inverseSurfaceDarkHighContrast = Color(0xFFDEE4DF)
+val inverseOnSurfaceDarkHighContrast = Color(0xFF000000)
+val inversePrimaryDarkHighContrast = Color(0xFF003123)
+val surfaceDimDarkHighContrast = Color(0xFF0F1512)
+val surfaceBrightDarkHighContrast = Color(0xFF343B37)
+val surfaceContainerLowestDarkHighContrast = Color(0xFF0A0F0D)
+val surfaceContainerLowDarkHighContrast = Color(0xFF171D1A)
+val surfaceContainerDarkHighContrast = Color(0xFF1B211E)
+val surfaceContainerHighDarkHighContrast = Color(0xFF252B28)
+val surfaceContainerHighestDarkHighContrast = Color(0xFF303633)
+
+
+
+
+
+
+

composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/theme/Shape.kt

@@ -0,0 +1,11 @@
+package com.aslansari.spiritvisor.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val shapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(8.dp),
+    large = RoundedCornerShape(16.dp),
+)

composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/theme/Theme.kt

@@ -0,0 +1,30 @@
+package com.aslansari.spiritvisor.theme
+
+import androidx.compose.material.Colors
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+
+val lightThemeColors = Colors(
+    primary = primaryLight,
+    primaryVariant = primaryContainerLight,
+    secondary = secondaryLight,
+    secondaryVariant = secondaryContainerLight,
+    background = backgroundLight,
+    surface = surfaceLight,
+    error= errorLight,
+    onPrimary = onPrimaryLight,
+    onSecondary = onSecondaryLight,
+    onBackground = onBackgroundLight,
+    onSurface = onSurfaceLight,
+    onError = onErrorLight,
+    isLight = true
+)
+@Composable
+fun SpiritVisorTheme(content: @Composable () -> Unit) {
+    MaterialTheme(
+        colors = lightThemeColors,
+        typography = typography,
+        shapes = shapes,
+        content = content,
+    )
+}