From 6ea2f5f3d43f0b85936f71f074d18c7190e5556b Mon Sep 17 00:00:00 2001 From: Waitara Date: Sat, 17 Aug 2024 16:37:32 +0300 Subject: [PATCH 1/2] Updated the Chai Color primitive tokens naming and added more colors --- .../java/com/droidconke/chai/atoms/Color.kt | 27 +++--- .../com/droidconke/chai/colors/ChaiColors.kt | 90 +++++++++---------- .../com/droidconke/chai/components/CText.kt | 4 +- 3 files changed, 61 insertions(+), 60 deletions(-) diff --git a/chai/src/main/java/com/droidconke/chai/atoms/Color.kt b/chai/src/main/java/com/droidconke/chai/atoms/Color.kt index 1cf1b9e..4efc6bc 100755 --- a/chai/src/main/java/com/droidconke/chai/atoms/Color.kt +++ b/chai/src/main/java/com/droidconke/chai/atoms/Color.kt @@ -20,28 +20,29 @@ import androidx.compose.ui.graphics.Color /** * these are the Primary colours from Chai's Design spec document */ - val ChaiBlue = Color(0xFF000CEB) -val ChaiWhite = Color(0xFFFFFFFF) +val ChaiBlueSubtle = Color(0xFFBABDF2) /** * these are the Secondary colours from Chai's Design spec document */ +val ChaiOrange = Color(0xFFFF6E4D) +val ChaiOrangeSubtle = Color(0xFFF7D4CC) -val ChaiRed = Color(0xFFFF6E4D) val ChaiTeal = Color(0xFF00E2C3) +val ChaiSubtle = Color(0xFF93EDE1) +val ChaiTealLight = Color(0xFF7DE1C3) /** * these are the Neutrals from the Chai's Design spec document */ - -val ChaiLightGrey90 = Color(0xFFF6F6F8) -val ChaiLightGrey = Color(0xFFF5F5F5) -val ChaiGrey = Color(0xFFB1B1B1) -val ChaiSmokeyGrey = Color(0xFF707070) -val ChaiDarkGrey = Color(0xFF5A5A5A) -val ChaiCoal = Color(0xFF191D1D) val ChaiBlack = Color(0xFF000000) -val ChaiGrey90 = Color(0xFF20201E) -val ChaiTeal90 = Color(0xFF7DE1C3) -val ChaiSubtleGrey = Color(0xFF383836) \ No newline at end of file +val ChaiCoal = Color(0xFF191D1D) +val ChaiSteal = Color(0xFF20201E) +val ChaiDarkerGrey = Color(0xFF383836) +val ChaiDarkGrey = Color(0xFF5A5A5A) +val ChaiSubtleGrey = Color(0xFF707070) +val ChaiGrey = Color(0xFFB1B1B1) +val ChaiSilver = Color(0xFFF5F5F5) +val ChaiLightGrey = Color(0xFFF6F6F8) +val ChaiWhite = Color(0xFFFFFFFF) \ No newline at end of file diff --git a/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt b/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt index 8ce28f7..69df3e1 100755 --- a/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt +++ b/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt @@ -23,14 +23,14 @@ import com.droidconke.chai.atoms.ChaiBlue import com.droidconke.chai.atoms.ChaiCoal import com.droidconke.chai.atoms.ChaiDarkGrey import com.droidconke.chai.atoms.ChaiGrey -import com.droidconke.chai.atoms.ChaiGrey90 +import com.droidconke.chai.atoms.ChaiSteal +import com.droidconke.chai.atoms.ChaiSilver import com.droidconke.chai.atoms.ChaiLightGrey -import com.droidconke.chai.atoms.ChaiLightGrey90 -import com.droidconke.chai.atoms.ChaiRed -import com.droidconke.chai.atoms.ChaiSmokeyGrey +import com.droidconke.chai.atoms.ChaiOrange import com.droidconke.chai.atoms.ChaiSubtleGrey +import com.droidconke.chai.atoms.ChaiDarkerGrey import com.droidconke.chai.atoms.ChaiTeal -import com.droidconke.chai.atoms.ChaiTeal90 +import com.droidconke.chai.atoms.ChaiTealLight import com.droidconke.chai.atoms.ChaiWhite @Immutable @@ -80,81 +80,81 @@ val LocalChaiColorsPalette = staticCompositionLocalOf { ChaiColors() } val ChaiLightColorPalette = ChaiColors( primary = ChaiBlue, background = ChaiWhite, - surfaces = ChaiLightGrey, + surfaces = ChaiSilver, cardsBackground = ChaiWhite, - cardsBorderColor = ChaiLightGrey, - bottomNavBorderColor = ChaiLightGrey, + cardsBorderColor = ChaiSilver, + bottomNavBorderColor = ChaiSilver, activeBottomNavIconColor = ChaiBlue, - inactiveBottomNavIconColor = ChaiGrey90, + inactiveBottomNavIconColor = ChaiSteal, bottomNavBackgroundColor = ChaiWhite, - activeBottomNavTextColor = ChaiRed, + activeBottomNavTextColor = ChaiOrange, textTitlePrimaryColor = ChaiBlue, - textBoldColor = ChaiGrey90, - textNormalColor = ChaiGrey90, - textWeakColor = ChaiSmokeyGrey, + textBoldColor = ChaiSteal, + textNormalColor = ChaiSteal, + textWeakColor = ChaiSubtleGrey, textLabelAndHeadings = ChaiBlue, linkTextColorPrimary = ChaiBlue, secondaryButtonColor = ChaiBlue, - secondaryButtonTextColor = ChaiLightGrey90, + secondaryButtonTextColor = ChaiLightGrey, outlinedButtonBackgroundColor = ChaiWhite, outlinedButtonTextColor = ChaiCoal, textButtonColor = ChaiBlue, - radioButtonColors = ChaiSmokeyGrey, - toggleOffBackgroundColor = ChaiGrey90, + radioButtonColors = ChaiSubtleGrey, + toggleOffBackgroundColor = ChaiSteal, toggleOffIconBackgroundColor = ChaiWhite, - toggleOffIconColor = ChaiGrey90, - toggleOnBackgroundColor = ChaiRed, + toggleOffIconColor = ChaiSteal, + toggleOnBackgroundColor = ChaiOrange, toggleOnIconBackgroundColor = ChaiWhite, - toggleOnIconColor = ChaiRed, + toggleOnIconColor = ChaiOrange, loadingStateOnCardsColor = ChaiGrey, - eventDaySelectorActiveSurfaceColor = ChaiRed, - eventDaySelectorInactiveSurfaceColor = ChaiTeal90, + eventDaySelectorActiveSurfaceColor = ChaiOrange, + eventDaySelectorInactiveSurfaceColor = ChaiTealLight, eventDaySelectorActiveTextColor = ChaiWhite, - eventDaySelectorInactiveTextColor = ChaiGrey90, + eventDaySelectorInactiveTextColor = ChaiSteal, badgeBackgroundColor = ChaiCoal, - textFieldBackgroundColor = ChaiLightGrey, - textFieldBorderColor = ChaiLightGrey, - bottomSheetBackgroundColor = ChaiLightGrey90, - inactiveMultiSelectButtonBorderColor = ChaiGrey90 + textFieldBackgroundColor = ChaiSilver, + textFieldBorderColor = ChaiSilver, + bottomSheetBackgroundColor = ChaiLightGrey, + inactiveMultiSelectButtonBorderColor = ChaiSteal ) val ChaiDarkColorPalette = ChaiColors( primary = ChaiBlack, - background = ChaiGrey90, + background = ChaiSteal, surfaces = ChaiBlack, cardsBackground = ChaiBlack, - cardsBorderColor = ChaiSubtleGrey, - bottomNavBorderColor = ChaiGrey90, + cardsBorderColor = ChaiDarkerGrey, + bottomNavBorderColor = ChaiSteal, activeBottomNavIconColor = ChaiTeal, inactiveBottomNavIconColor = ChaiWhite, bottomNavBackgroundColor = ChaiBlack, - activeBottomNavTextColor = ChaiRed, + activeBottomNavTextColor = ChaiOrange, textTitlePrimaryColor = ChaiWhite, - textBoldColor = ChaiLightGrey, + textBoldColor = ChaiSilver, textNormalColor = ChaiWhite, textWeakColor = ChaiGrey, - textLabelAndHeadings = ChaiTeal90, - linkTextColorPrimary = ChaiLightGrey, - secondaryButtonColor = ChaiTeal90, - secondaryButtonTextColor = ChaiGrey90, + textLabelAndHeadings = ChaiTealLight, + linkTextColorPrimary = ChaiSilver, + secondaryButtonColor = ChaiTealLight, + secondaryButtonTextColor = ChaiSteal, outlinedButtonBackgroundColor = ChaiBlack, - outlinedButtonTextColor = ChaiTeal90, - textButtonColor = ChaiLightGrey, + outlinedButtonTextColor = ChaiTealLight, + textButtonColor = ChaiSilver, radioButtonColors = ChaiWhite, - toggleOffBackgroundColor = ChaiLightGrey, + toggleOffBackgroundColor = ChaiSilver, toggleOffIconBackgroundColor = ChaiWhite, - toggleOffIconColor = ChaiGrey90, - toggleOnBackgroundColor = ChaiRed, + toggleOffIconColor = ChaiSteal, + toggleOnBackgroundColor = ChaiOrange, toggleOnIconBackgroundColor = ChaiWhite, - toggleOnIconColor = ChaiRed, + toggleOnIconColor = ChaiOrange, loadingStateOnCardsColor = ChaiDarkGrey, - eventDaySelectorActiveSurfaceColor = ChaiRed, - eventDaySelectorInactiveSurfaceColor = ChaiTeal90, + eventDaySelectorActiveSurfaceColor = ChaiOrange, + eventDaySelectorInactiveSurfaceColor = ChaiTealLight, eventDaySelectorActiveTextColor = ChaiWhite, eventDaySelectorInactiveTextColor = ChaiWhite, badgeBackgroundColor = ChaiBlack, - textFieldBackgroundColor = ChaiGrey90, - textFieldBorderColor = ChaiSmokeyGrey, + textFieldBackgroundColor = ChaiSteal, + textFieldBorderColor = ChaiSubtleGrey, bottomSheetBackgroundColor = ChaiBlack, inactiveMultiSelectButtonBorderColor = ChaiGrey ) \ No newline at end of file diff --git a/chai/src/main/java/com/droidconke/chai/components/CText.kt b/chai/src/main/java/com/droidconke/chai/components/CText.kt index ef898e2..fd793e9 100755 --- a/chai/src/main/java/com/droidconke/chai/components/CText.kt +++ b/chai/src/main/java/com/droidconke/chai/components/CText.kt @@ -81,7 +81,7 @@ fun CSubtitle(dSubtitle: String) { Text( text = dSubtitle, style = TextStyle( - color = ChaiRed, + color = ChaiOrange, fontSize = 15.sp, fontWeight = FontWeight.W700, fontFamily = MontserratRegular @@ -96,7 +96,7 @@ fun CActionText(cAction: String) { Text( text = cAction, style = TextStyle( - color = ChaiRed, + color = ChaiOrange, fontSize = 15.sp, fontWeight = FontWeight.W700, fontFamily = MontserratRegular From dd795f543424ba97a52108a89edea060d4dea473 Mon Sep 17 00:00:00 2001 From: Waitara Date: Sat, 17 Aug 2024 16:59:14 +0300 Subject: [PATCH 2/2] Added documentation for the ChaiColors data class --- .../main/java/com/droidconke/chai/colors/ChaiColors.kt | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt b/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt index 69df3e1..8bc0389 100755 --- a/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt +++ b/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt @@ -32,7 +32,13 @@ import com.droidconke.chai.atoms.ChaiDarkerGrey import com.droidconke.chai.atoms.ChaiTeal import com.droidconke.chai.atoms.ChaiTealLight import com.droidconke.chai.atoms.ChaiWhite - +/** + * This class has the semantic names of the Chai design system colors. + * + * What are semantic names you might ask: + * * Semantic names are a consistent way to refer to colors based on their purpose in the UI. + * * They define how a primitive color(the individual color such as ChaiBlue) will be used throughout a design system + * */ @Immutable data class ChaiColors( val primary: Color = Color.Unspecified,