Skip to content

Commit 3e78335

Browse files
nsh07nsh07
committed
feat: Update theme and typography
The website now uses Inter as its font
1 parent 33f97bb commit 3e78335

File tree

4 files changed

+195
-38
lines changed

4 files changed

+195
-38
lines changed

‎composeApp/src/wasmJsMain/composeResources/font/inter_variable.ttf‎

843 KB
Binary file not shown.

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/theme/Color.kt‎

Lines changed: 70 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,74 @@
11
package org.nsh07.nsh07.ui.theme
2-
32
import androidx.compose.ui.graphics.Color
43

5-
val Purple80 = Color(0xFFD0BCFF)
6-
val PurpleGrey80 = Color(0xFFCCC2DC)
7-
val Pink80 = Color(0xFFEFB8C8)
4+
val primaryLight = Color(0xFF00696B)
5+
val onPrimaryLight = Color(0xFFFFFFFF)
6+
val primaryContainerLight = Color(0xFF9CF1F2)
7+
val onPrimaryContainerLight = Color(0xFF004F51)
8+
val secondaryLight = Color(0xFF4A6363)
9+
val onSecondaryLight = Color(0xFFFFFFFF)
10+
val secondaryContainerLight = Color(0xFFCCE8E8)
11+
val onSecondaryContainerLight = Color(0xFF324B4C)
12+
val tertiaryLight = Color(0xFF4C5F7C)
13+
val onTertiaryLight = Color(0xFFFFFFFF)
14+
val tertiaryContainerLight = Color(0xFFD4E3FF)
15+
val onTertiaryContainerLight = Color(0xFF354863)
16+
val errorLight = Color(0xFFBA1A1A)
17+
val onErrorLight = Color(0xFFFFFFFF)
18+
val errorContainerLight = Color(0xFFFFDAD6)
19+
val onErrorContainerLight = Color(0xFF93000A)
20+
val backgroundLight = Color(0xFFF4FBFA)
21+
val onBackgroundLight = Color(0xFF161D1D)
22+
val surfaceLight = Color(0xFFF4FBFA)
23+
val onSurfaceLight = Color(0xFF161D1D)
24+
val surfaceVariantLight = Color(0xFFDAE4E4)
25+
val onSurfaceVariantLight = Color(0xFF3F4949)
26+
val outlineLight = Color(0xFF6F7979)
27+
val outlineVariantLight = Color(0xFFBEC8C8)
28+
val scrimLight = Color(0xFF000000)
29+
val inverseSurfaceLight = Color(0xFF2B3232)
30+
val inverseOnSurfaceLight = Color(0xFFECF2F1)
31+
val inversePrimaryLight = Color(0xFF80D4D6)
32+
val surfaceDimLight = Color(0xFFD5DBDB)
33+
val surfaceBrightLight = Color(0xFFF4FBFA)
34+
val surfaceContainerLowestLight = Color(0xFFFFFFFF)
35+
val surfaceContainerLowLight = Color(0xFFEFF5F4)
36+
val surfaceContainerLight = Color(0xFFE9EFEF)
37+
val surfaceContainerHighLight = Color(0xFFE3E9E9)
38+
val surfaceContainerHighestLight = Color(0xFFDDE4E3)
839

9-
val Purple40 = Color(0xFF6650a4)
10-
val PurpleGrey40 = Color(0xFF625b71)
11-
val Pink40 = Color(0xFF7D5260)
40+
val primaryDark = Color(0xFF80D4D6)
41+
val onPrimaryDark = Color(0xFF003738)
42+
val primaryContainerDark = Color(0xFF004F51)
43+
val onPrimaryContainerDark = Color(0xFF9CF1F2)
44+
val secondaryDark = Color(0xFFB0CCCC)
45+
val onSecondaryDark = Color(0xFF1B3435)
46+
val secondaryContainerDark = Color(0xFF324B4C)
47+
val onSecondaryContainerDark = Color(0xFFCCE8E8)
48+
val tertiaryDark = Color(0xFFB4C8E9)
49+
val onTertiaryDark = Color(0xFF1D314C)
50+
val tertiaryContainerDark = Color(0xFF354863)
51+
val onTertiaryContainerDark = Color(0xFFD4E3FF)
52+
val errorDark = Color(0xFFFFB4AB)
53+
val onErrorDark = Color(0xFF690005)
54+
val errorContainerDark = Color(0xFF93000A)
55+
val onErrorContainerDark = Color(0xFFFFDAD6)
56+
val backgroundDark = Color(0xFF0E1415)
57+
val onBackgroundDark = Color(0xFFDDE4E3)
58+
val surfaceDark = Color(0xFF0E1415)
59+
val onSurfaceDark = Color(0xFFDDE4E3)
60+
val surfaceVariantDark = Color(0xFF3F4949)
61+
val onSurfaceVariantDark = Color(0xFFBEC8C8)
62+
val outlineDark = Color(0xFF899392)
63+
val outlineVariantDark = Color(0xFF3F4949)
64+
val scrimDark = Color(0xFF000000)
65+
val inverseSurfaceDark = Color(0xFFDDE4E3)
66+
val inverseOnSurfaceDark = Color(0xFF2B3232)
67+
val inversePrimaryDark = Color(0xFF00696B)
68+
val surfaceDimDark = Color(0xFF0E1415)
69+
val surfaceBrightDark = Color(0xFF343A3A)
70+
val surfaceContainerLowestDark = Color(0xFF090F0F)
71+
val surfaceContainerLowDark = Color(0xFF161D1D)
72+
val surfaceContainerDark = Color(0xFF1A2121)
73+
val surfaceContainerHighDark = Color(0xFF252B2B)
74+
val surfaceContainerHighestDark = Color(0xFF2F3636)

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/theme/Theme.kt‎

Lines changed: 84 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,103 @@
11
package org.nsh07.nsh07.ui.theme
2-
32
import androidx.compose.foundation.isSystemInDarkTheme
43
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
54
import androidx.compose.material3.MaterialExpressiveTheme
6-
import androidx.compose.material3.MaterialTheme.typography
75
import androidx.compose.material3.darkColorScheme
86
import androidx.compose.material3.lightColorScheme
97
import androidx.compose.runtime.Composable
108

11-
private val DarkColorScheme = darkColorScheme(
12-
primary = Purple80,
13-
secondary = PurpleGrey80,
14-
tertiary = Pink80
9+
private val lightScheme = lightColorScheme(
10+
primary = primaryLight,
11+
onPrimary = onPrimaryLight,
12+
primaryContainer = primaryContainerLight,
13+
onPrimaryContainer = onPrimaryContainerLight,
14+
secondary = secondaryLight,
15+
onSecondary = onSecondaryLight,
16+
secondaryContainer = secondaryContainerLight,
17+
onSecondaryContainer = onSecondaryContainerLight,
18+
tertiary = tertiaryLight,
19+
onTertiary = onTertiaryLight,
20+
tertiaryContainer = tertiaryContainerLight,
21+
onTertiaryContainer = onTertiaryContainerLight,
22+
error = errorLight,
23+
onError = onErrorLight,
24+
errorContainer = errorContainerLight,
25+
onErrorContainer = onErrorContainerLight,
26+
background = backgroundLight,
27+
onBackground = onBackgroundLight,
28+
surface = surfaceLight,
29+
onSurface = onSurfaceLight,
30+
surfaceVariant = surfaceVariantLight,
31+
onSurfaceVariant = onSurfaceVariantLight,
32+
outline = outlineLight,
33+
outlineVariant = outlineVariantLight,
34+
scrim = scrimLight,
35+
inverseSurface = inverseSurfaceLight,
36+
inverseOnSurface = inverseOnSurfaceLight,
37+
inversePrimary = inversePrimaryLight,
38+
surfaceDim = surfaceDimLight,
39+
surfaceBright = surfaceBrightLight,
40+
surfaceContainerLowest = surfaceContainerLowestLight,
41+
surfaceContainerLow = surfaceContainerLowLight,
42+
surfaceContainer = surfaceContainerLight,
43+
surfaceContainerHigh = surfaceContainerHighLight,
44+
surfaceContainerHighest = surfaceContainerHighestLight,
1545
)
1646

17-
private val LightColorScheme = lightColorScheme(
18-
primary = Purple40,
19-
secondary = PurpleGrey40,
20-
tertiary = Pink40
21-
22-
/* Other default colors to override
23-
background = Color(0xFFFFFBFE),
24-
surface = Color(0xFFFFFBFE),
25-
onPrimary = Color.White,
26-
onSecondary = Color.White,
27-
onTertiary = Color.White,
28-
onBackground = Color(0xFF1C1B1F),
29-
onSurface = Color(0xFF1C1B1F),
30-
*/
47+
private val darkScheme = darkColorScheme(
48+
primary = primaryDark,
49+
onPrimary = onPrimaryDark,
50+
primaryContainer = primaryContainerDark,
51+
onPrimaryContainer = onPrimaryContainerDark,
52+
secondary = secondaryDark,
53+
onSecondary = onSecondaryDark,
54+
secondaryContainer = secondaryContainerDark,
55+
onSecondaryContainer = onSecondaryContainerDark,
56+
tertiary = tertiaryDark,
57+
onTertiary = onTertiaryDark,
58+
tertiaryContainer = tertiaryContainerDark,
59+
onTertiaryContainer = onTertiaryContainerDark,
60+
error = errorDark,
61+
onError = onErrorDark,
62+
errorContainer = errorContainerDark,
63+
onErrorContainer = onErrorContainerDark,
64+
background = backgroundDark,
65+
onBackground = onBackgroundDark,
66+
surface = surfaceDark,
67+
onSurface = onSurfaceDark,
68+
surfaceVariant = surfaceVariantDark,
69+
onSurfaceVariant = onSurfaceVariantDark,
70+
outline = outlineDark,
71+
outlineVariant = outlineVariantDark,
72+
scrim = scrimDark,
73+
inverseSurface = inverseSurfaceDark,
74+
inverseOnSurface = inverseOnSurfaceDark,
75+
inversePrimary = inversePrimaryDark,
76+
surfaceDim = surfaceDimDark,
77+
surfaceBright = surfaceBrightDark,
78+
surfaceContainerLowest = surfaceContainerLowestDark,
79+
surfaceContainerLow = surfaceContainerLowDark,
80+
surfaceContainer = surfaceContainerDark,
81+
surfaceContainerHigh = surfaceContainerHighDark,
82+
surfaceContainerHighest = surfaceContainerHighestDark,
3183
)
3284

3385
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
3486
@Composable
3587
fun Nsh07Theme(
3688
darkTheme: Boolean = isSystemInDarkTheme(),
3789
// Dynamic color is available on Android 12+
38-
content: @Composable () -> Unit
90+
content: @Composable() () -> Unit
3991
) {
40-
val colorScheme = when (darkTheme) {
41-
true -> DarkColorScheme
42-
else -> LightColorScheme
43-
}
92+
val colorScheme = when (darkTheme) {
93+
true -> darkScheme
94+
else -> lightScheme
95+
}
96+
97+
MaterialExpressiveTheme(
98+
colorScheme = colorScheme,
99+
typography = AppTypography(),
100+
content = content
101+
)
102+
}
44103

45-
MaterialExpressiveTheme(
46-
colorScheme = colorScheme,
47-
typography = typography,
48-
content = content
49-
)
50-
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/theme/Type.kt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
package org.nsh07.nsh07.ui.theme
2+
3+
import androidx.compose.material3.Typography
4+
import androidx.compose.runtime.Composable
5+
import androidx.compose.ui.text.font.FontFamily
6+
import androidx.compose.ui.text.font.FontWeight
7+
import nsh07.composeapp.generated.resources.Res
8+
import nsh07.composeapp.generated.resources.inter_variable
9+
import org.jetbrains.compose.resources.Font
10+
11+
// Default Material 3 typography values
12+
val baseline = Typography()
13+
14+
@Composable
15+
fun AppTypography() = Typography().run {
16+
val fontFamily = FontFamily(
17+
Font(Res.font.inter_variable, weight = FontWeight.Light),
18+
Font(Res.font.inter_variable, weight = FontWeight.Normal),
19+
Font(Res.font.inter_variable, weight = FontWeight.Medium),
20+
Font(Res.font.inter_variable, weight = FontWeight.SemiBold),
21+
Font(Res.font.inter_variable, weight = FontWeight.Bold),
22+
)
23+
24+
copy(
25+
displayLarge = baseline.displayLarge.copy(fontFamily = fontFamily),
26+
displayMedium = baseline.displayMedium.copy(fontFamily = fontFamily),
27+
displaySmall = baseline.displaySmall.copy(fontFamily = fontFamily),
28+
headlineLarge = baseline.headlineLarge.copy(fontFamily = fontFamily),
29+
headlineMedium = baseline.headlineMedium.copy(fontFamily = fontFamily),
30+
headlineSmall = baseline.headlineSmall.copy(fontFamily = fontFamily),
31+
titleLarge = baseline.titleLarge.copy(fontFamily = fontFamily),
32+
titleMedium = baseline.titleMedium.copy(fontFamily = fontFamily),
33+
titleSmall = baseline.titleSmall.copy(fontFamily = fontFamily),
34+
bodyLarge = baseline.bodyLarge.copy(fontFamily = fontFamily),
35+
bodyMedium = baseline.bodyMedium.copy(fontFamily = fontFamily),
36+
bodySmall = baseline.bodySmall.copy(fontFamily = fontFamily),
37+
labelLarge = baseline.labelLarge.copy(fontFamily = fontFamily),
38+
labelMedium = baseline.labelMedium.copy(fontFamily = fontFamily),
39+
labelSmall = baseline.labelSmall.copy(fontFamily = fontFamily)
40+
)
41+
}

0 commit comments

Comments
 (0)