Created the Typography file to manage the Material design guidelines for our textView

This commit is contained in:
MohitMaliFtechiz 2025-03-03 14:44:55 +05:30 committed by Kelson
parent 000f9bfe1d
commit fb4dec2b51
4 changed files with 88 additions and 13 deletions

View File

@ -21,18 +21,22 @@ package org.kiwix.kiwixmobile.core.ui.theme
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EXTRA_LARGE_ROUND_SHAPE_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EXTRA_SMALL_ROUND_SHAPE_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.LARGE_ROUND_SHAPE_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.MEDIUM_ROUND_SHAPE_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SMALL_ROUND_SHAPE_SIZE
/**
* Most of the shares we are using in round corners.
* So we are defining the shapes here so that we can directly use these
* shapes in our code from Material theme.
* Defines the shape styles used throughout the app, primarily with rounded corners.
* These shapes are applied consistently via the Material theme to ensure uniformity.
*
* @see KiwixTheme
*/
val shapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(16.dp),
large = RoundedCornerShape(24.dp),
extraLarge = RoundedCornerShape(32.dp)
extraSmall = RoundedCornerShape(EXTRA_SMALL_ROUND_SHAPE_SIZE),
small = RoundedCornerShape(SMALL_ROUND_SHAPE_SIZE),
medium = RoundedCornerShape(MEDIUM_ROUND_SHAPE_SIZE),
large = RoundedCornerShape(LARGE_ROUND_SHAPE_SIZE),
extraLarge = RoundedCornerShape(EXTRA_LARGE_ROUND_SHAPE_SIZE)
)

View File

@ -63,6 +63,7 @@ fun KiwixTheme(
MaterialTheme(
colorScheme = colorScheme,
content = content,
shapes = shapes
shapes = shapes,
typography = KiwixTypography
)
}

View File

@ -0,0 +1,55 @@
/*
* Kiwix Android
* Copyright (c) 2025 Kiwix <android.kiwix.org>
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
package org.kiwix.kiwixmobile.core.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.LARGE_BODY_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.LARGE_HEADLINE_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.LARGE_LABEL_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.LARGE_TITLE_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.MEDIUM_BODY_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.MEDIUM_HEADLINE_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.MEDIUM_LABEL_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.MEDIUM_TITLE_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SMALL_BODY_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SMALL_HEADLINE_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SMALL_LABEL_TEXT_SIZE
import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SMALL_TITLE_TEXT_SIZE
/**
* Defines the typography styles used throughout the app.
* These text styles follow Material Design guidelines and ensure consistency in font sizes.
*
* @see KiwixTheme
*/
val KiwixTypography = Typography(
headlineLarge = TextStyle(fontSize = LARGE_HEADLINE_TEXT_SIZE),
headlineMedium = TextStyle(fontSize = MEDIUM_HEADLINE_TEXT_SIZE),
headlineSmall = TextStyle(fontSize = SMALL_HEADLINE_TEXT_SIZE),
titleLarge = TextStyle(fontSize = LARGE_TITLE_TEXT_SIZE),
titleMedium = TextStyle(fontSize = MEDIUM_TITLE_TEXT_SIZE),
titleSmall = TextStyle(fontSize = SMALL_TITLE_TEXT_SIZE),
bodyLarge = TextStyle(fontSize = LARGE_BODY_TEXT_SIZE),
bodyMedium = TextStyle(fontSize = MEDIUM_BODY_TEXT_SIZE),
bodySmall = TextStyle(fontSize = SMALL_BODY_TEXT_SIZE),
labelLarge = TextStyle(fontSize = LARGE_LABEL_TEXT_SIZE),
labelMedium = TextStyle(fontSize = MEDIUM_LABEL_TEXT_SIZE),
labelSmall = TextStyle(fontSize = SMALL_LABEL_TEXT_SIZE),
)

View File

@ -56,8 +56,23 @@ object ComposeDimens {
val DEFAULT_LETTER_SPACING = 0.0333.em
// Shape configuration sizes. See Shape.kt
val EXTRA_SMALL = 4.dp
val SMALL = 8.dp
val MEDIUM = 16.dp
val LARGE = 16.dp
val EXTRA_SMALL_ROUND_SHAPE_SIZE = 4.dp
val SMALL_ROUND_SHAPE_SIZE = 8.dp
val MEDIUM_ROUND_SHAPE_SIZE = 16.dp
val LARGE_ROUND_SHAPE_SIZE = 24.dp
val EXTRA_LARGE_ROUND_SHAPE_SIZE = 32.dp
// Typography configuration sizes. See Typography.kt
val LARGE_HEADLINE_TEXT_SIZE = 32.sp
val MEDIUM_HEADLINE_TEXT_SIZE = 28.sp
val SMALL_HEADLINE_TEXT_SIZE = 24.sp
val LARGE_TITLE_TEXT_SIZE = 22.sp
val MEDIUM_TITLE_TEXT_SIZE = 18.sp
val SMALL_TITLE_TEXT_SIZE = 16.sp
val LARGE_BODY_TEXT_SIZE = 16.sp
val MEDIUM_BODY_TEXT_SIZE = 14.sp
val SMALL_BODY_TEXT_SIZE = 12.sp
val LARGE_LABEL_TEXT_SIZE = 14.sp
val MEDIUM_LABEL_TEXT_SIZE = 12.sp
val SMALL_LABEL_TEXT_SIZE = 10.sp
}