Chai Colors

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)
+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)

chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt

@@ -23,16 +23,22 @@ 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
-
+/**
+ * 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,
@@ -80,81 +86,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
 )

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