Skip to content

Commit

Permalink
Create KrailTheme - custom design system
Browse files Browse the repository at this point in the history
  • Loading branch information
ksharma-xyz committed Sep 28, 2024
1 parent 9c4c2cb commit 0643e1e
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 87 deletions.
8 changes: 7 additions & 1 deletion app/src/main/kotlin/xyz/ksharma/krail/KrailApp.kt
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package xyz.ksharma.krail

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.material3.Text
Expand All @@ -9,6 +10,7 @@ import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import xyz.ksharma.krail.design.system.theme.KrailTheme

@Composable
internal fun KrailApp(
Expand All @@ -22,7 +24,11 @@ internal fun KrailApp(
.safeContentPadding()
) {
composable(route = AppScreen.DemoPage.name) {
Text("Krail App")
Column {
Text("Krail App", style = KrailTheme.typography.bodyLarge)
Text("Krail App", style = KrailTheme.typography.bodyMedium)
Text("Krail App", style = KrailTheme.typography.bodySmall)
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package xyz.ksharma.krail.design.system.theme

import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.graphics.Color

val md_theme_light_primary = Color(0xFF7D5800)
Expand Down Expand Up @@ -64,5 +66,135 @@ val md_theme_dark_surfaceTint = Color(0xFFFFBA29)
val md_theme_dark_outlineVariant = Color(0xFF4E4639)
val md_theme_dark_scrim = Color(0xFF000000)


val seed = Color(0xFFFFBA27)

@Immutable
data class KrailColors(
val primary: Color,
val onPrimary: Color,
val primaryContainer: Color,
val onPrimaryContainer: Color,
val secondary: Color,
val onSecondary: Color,
val secondaryContainer: Color,
val onSecondaryContainer: Color,
val tertiary: Color,
val onTertiary: Color,
val tertiaryContainer: Color,
val onTertiaryContainer: Color,
val error: Color,
val errorContainer: Color,
val onError: Color,
val onErrorContainer: Color,
val background: Color,
val onBackground: Color,
val surface: Color,
val onSurface: Color,
val surfaceVariant: Color,
val onSurfaceVariant: Color,
val outline: Color,
val inverseOnSurface: Color,
val inverseSurface: Color,
val inversePrimary: Color,
val surfaceTint: Color,
val outlineVariant: Color,
val scrim: Color,
)

internal val KrailLightColors = KrailColors(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
onPrimaryContainer = md_theme_light_onPrimaryContainer,
secondary = md_theme_light_secondary,
onSecondary = md_theme_light_onSecondary,
secondaryContainer = md_theme_light_secondaryContainer,
onSecondaryContainer = md_theme_light_onSecondaryContainer,
tertiary = md_theme_light_tertiary,
onTertiary = md_theme_light_onTertiary,
tertiaryContainer = md_theme_light_tertiaryContainer,
onTertiaryContainer = md_theme_light_onTertiaryContainer,
error = md_theme_light_error,
errorContainer = md_theme_light_errorContainer,
onError = md_theme_light_onError,
onErrorContainer = md_theme_light_onErrorContainer,
background = md_theme_light_background,
onBackground = md_theme_light_onBackground,
surface = md_theme_light_surface,
onSurface = md_theme_light_onSurface,
surfaceVariant = md_theme_light_surfaceVariant,
onSurfaceVariant = md_theme_light_onSurfaceVariant,
outline = md_theme_light_outline,
inverseOnSurface = md_theme_light_inverseOnSurface,
inverseSurface = md_theme_light_inverseSurface,
inversePrimary = md_theme_light_inversePrimary,
surfaceTint = md_theme_light_surfaceTint,
outlineVariant = md_theme_light_outlineVariant,
scrim = md_theme_light_scrim,
)

internal val KrailDarkColors = KrailColors(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
onPrimaryContainer = md_theme_dark_onPrimaryContainer,
secondary = md_theme_dark_secondary,
onSecondary = md_theme_dark_onSecondary,
secondaryContainer = md_theme_dark_secondaryContainer,
onSecondaryContainer = md_theme_dark_onSecondaryContainer,
tertiary = md_theme_dark_tertiary,
onTertiary = md_theme_dark_onTertiary,
tertiaryContainer = md_theme_dark_tertiaryContainer,
onTertiaryContainer = md_theme_dark_onTertiaryContainer,
error = md_theme_dark_error,
errorContainer = md_theme_dark_errorContainer,
onError = md_theme_dark_onError,
onErrorContainer = md_theme_dark_onErrorContainer,
background = md_theme_dark_background,
onBackground = md_theme_dark_onBackground,
surface = md_theme_dark_surface,
onSurface = md_theme_dark_onSurface,
surfaceVariant = md_theme_dark_surfaceVariant,
onSurfaceVariant = md_theme_dark_onSurfaceVariant,
outline = md_theme_dark_outline,
inverseOnSurface = md_theme_dark_inverseOnSurface,
inverseSurface = md_theme_dark_inverseSurface,
inversePrimary = md_theme_dark_inversePrimary,
surfaceTint = md_theme_dark_surfaceTint,
outlineVariant = md_theme_dark_outlineVariant,
scrim = md_theme_dark_scrim,
)

internal val LocalKrailColors = staticCompositionLocalOf {
KrailColors(
primary = Color.Unspecified,
onPrimary = Color.Unspecified,
primaryContainer = Color.Unspecified,
onPrimaryContainer = Color.Unspecified,
secondary = Color.Unspecified,
onSecondary = Color.Unspecified,
secondaryContainer = Color.Unspecified,
onSecondaryContainer = Color.Unspecified,
tertiary = Color.Unspecified,
onTertiary = Color.Unspecified,
tertiaryContainer = Color.Unspecified,
onTertiaryContainer = Color.Unspecified,
error = Color.Unspecified,
errorContainer = Color.Unspecified,
onError = Color.Unspecified,
onErrorContainer = Color.Unspecified,
background = Color.Unspecified,
onBackground = Color.Unspecified,
surface = Color.Unspecified,
onSurface = Color.Unspecified,
surfaceVariant = Color.Unspecified,
onSurfaceVariant = Color.Unspecified,
outline = Color.Unspecified,
inverseOnSurface = Color.Unspecified,
inverseSurface = Color.Unspecified,
inversePrimary = Color.Unspecified,
surfaceTint = Color.Unspecified,
outlineVariant = Color.Unspecified,
scrim = Color.Unspecified,
)
}
Original file line number Diff line number Diff line change
@@ -1,88 +1,33 @@
package xyz.ksharma.krail.design.system.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable

private val LightColorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
onPrimaryContainer = md_theme_light_onPrimaryContainer,
secondary = md_theme_light_secondary,
onSecondary = md_theme_light_onSecondary,
secondaryContainer = md_theme_light_secondaryContainer,
onSecondaryContainer = md_theme_light_onSecondaryContainer,
tertiary = md_theme_light_tertiary,
onTertiary = md_theme_light_onTertiary,
tertiaryContainer = md_theme_light_tertiaryContainer,
onTertiaryContainer = md_theme_light_onTertiaryContainer,
error = md_theme_light_error,
errorContainer = md_theme_light_errorContainer,
onError = md_theme_light_onError,
onErrorContainer = md_theme_light_onErrorContainer,
background = md_theme_light_background,
onBackground = md_theme_light_onBackground,
surface = md_theme_light_surface,
onSurface = md_theme_light_onSurface,
surfaceVariant = md_theme_light_surfaceVariant,
onSurfaceVariant = md_theme_light_onSurfaceVariant,
outline = md_theme_light_outline,
inverseOnSurface = md_theme_light_inverseOnSurface,
inverseSurface = md_theme_light_inverseSurface,
inversePrimary = md_theme_light_inversePrimary,
surfaceTint = md_theme_light_surfaceTint,
outlineVariant = md_theme_light_outlineVariant,
scrim = md_theme_light_scrim,
)

private val DarkColorScheme = darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
onPrimaryContainer = md_theme_dark_onPrimaryContainer,
secondary = md_theme_dark_secondary,
onSecondary = md_theme_dark_onSecondary,
secondaryContainer = md_theme_dark_secondaryContainer,
onSecondaryContainer = md_theme_dark_onSecondaryContainer,
tertiary = md_theme_dark_tertiary,
onTertiary = md_theme_dark_onTertiary,
tertiaryContainer = md_theme_dark_tertiaryContainer,
onTertiaryContainer = md_theme_dark_onTertiaryContainer,
error = md_theme_dark_error,
errorContainer = md_theme_dark_errorContainer,
onError = md_theme_dark_onError,
onErrorContainer = md_theme_dark_onErrorContainer,
background = md_theme_dark_background,
onBackground = md_theme_dark_onBackground,
surface = md_theme_dark_surface,
onSurface = md_theme_dark_onSurface,
surfaceVariant = md_theme_dark_surfaceVariant,
onSurfaceVariant = md_theme_dark_onSurfaceVariant,
outline = md_theme_dark_outline,
inverseOnSurface = md_theme_dark_inverseOnSurface,
inverseSurface = md_theme_dark_inverseSurface,
inversePrimary = md_theme_dark_inversePrimary,
surfaceTint = md_theme_dark_surfaceTint,
outlineVariant = md_theme_dark_outlineVariant,
scrim = md_theme_dark_scrim,
)
import androidx.compose.runtime.CompositionLocalProvider

@Composable
fun KrailTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
content: @Composable () -> Unit,
) {
val colorScheme = when {
darkTheme -> DarkColorScheme
else -> LightColorScheme
val krailColors = when {
darkTheme -> KrailDarkColors
else -> KrailLightColors
}

MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
CompositionLocalProvider(
LocalKrailColors provides krailColors,
LocalKrailTypography provides krailTypography,
content = content
)
}

object KrailTheme {

val colors: KrailColors
@Composable
get() = LocalKrailColors.current

val typography: KrailTypography
@Composable
get() = LocalKrailTypography.current
}
Loading

0 comments on commit 0643e1e

Please sign in to comment.