Merge pull request #13147 from woocommerce/feature/update-theme-colors

Update theme colors
woocommerce · Dec 17, 2024 · 5e95707 · 5e95707
2 parents 71e0fae + 6f234e4
commit 5e95707
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 115 deletions.
diff --git a/WooCommerce-Wear/src/main/java/com/woocommerce/android/wear/compose/theme/WooColors.kt b/WooCommerce-Wear/src/main/java/com/woocommerce/android/wear/compose/theme/WooColors.kt
@@ -17,13 +17,11 @@ object WooColors {
     val md_theme_dark_onBackground = Color(0xFFFFFFFF)
     val md_theme_dark_surface = Color(0xFF000000)
     val md_theme_dark_onSurface = Color(0xFFFFFFFF)
-    val woo_purple_surface = Color(0xBB533582)
-    val woo_purple_5 = Color(0xFFDFD1FB)
-    val woo_purple_10 = Color(0xFFCFB9F6)
-    val woo_purple_20 = Color(0xFFBEA0F2)
-    val woo_purple_alpha = Color(0x66674399)
+    val woo_purple_5 = Color(0xFFE1D7FF)
+    val woo_purple_10 = Color(0xFFD1C1FF)
+    val woo_purple_20 = Color(0xFFB999FF)
+    val woo_purple_alpha = Color(0x666108CE)
     val woo_gray_alpha = Color(0x80FFFFFF)
-    val woo_amber_40 = Color(0xFFFFA60E)
 }
 
 val WooWearColors = Colors(

diff --git a/WooCommerce-Wear/src/main/res/values/colors_base.xml b/WooCommerce-Wear/src/main/res/values/colors_base.xml
@@ -2,15 +2,14 @@
 <resources>
     <!-- Woo Colors -->
     <color name="woo_purple_0">#F2EDFF</color>
-    <color name="woo_purple_10">#F7EDF7</color>
-    <color name="woo_purple_20">#C792E0</color>
-    <color name="woo_purple_30">#B17FD4</color>
-    <color name="woo_purple_40">#AF7DD1</color>
-    <color name="woo_purple_50">#7F54B3</color>
-    <color name="woo_purple_60">#674399</color>
-    <color name="woo_purple_60_alpha_33">#33674399</color>
-    <color name="woo_purple_80">#3C2861</color>
-    <color name="woo_purple_90">#271B3D</color>
+    <color name="woo_purple_10">#D1C1FF</color>
+    <color name="woo_purple_20">#B999FF</color>
+    <color name="woo_purple_30">#A77EFF</color>
+    <color name="woo_purple_40">#873EFF</color>
+    <color name="woo_purple_50">#720EEC</color>
+    <color name="woo_purple_60">#6108CE</color>
+    <color name="woo_purple_80">#3C087E</color>
+    <color name="woo_purple_90">#2C045D</color>
     <color name="woo_purple_dark_secondary">#99EBEBF5</color>
 
     <color name="woo_pink_10">#ED9BB8</color>
@@ -74,12 +73,10 @@
     <color name="woo_gray_70">#3D444B</color>
     <color name="woo_gray_80">#2C3338</color>
     <color name="woo_gray_80_alpha_012">#1F2C3338</color>
-    <color name="woo_gray_80_alpha_030">#4D3C3C43</color>
     <color name="woo_gray_900">#F7F7F7</color>
 
     <color name="woo_black">#FF000000</color>
     <color name="woo_black_90">#121212</color>
-    <color name="woo_black_90_alpha_004">#0A000000</color>
     <color name="woo_black_90_alpha_012">#1F121212</color>
     <color name="woo_black_90_alpha_020">#33121212</color>
     <color name="woo_black_90_alpha_038">#61121212</color>

diff --git a/WooCommerce-Wear/src/wasabi/res/values/ic_launcher_background.xml b/WooCommerce-Wear/src/wasabi/res/values/ic_launcher_background.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#674399</color>
+    <color name="ic_launcher_background">@color/woo_purple_40</color>
 </resources>
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/FeedbackDialog.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/FeedbackDialog.kt
@@ -38,10 +38,10 @@ import com.woocommerce.android.R
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 
 @Suppress("MagicNumber")
-val Colors.feedbackSurface: Color get() = if (isLight) Color(0xFF1C1C1E) else Color(0xFFBEA0F2)
+val Colors.feedbackSurface: Color get() = if (isLight) Color(0xFF1C1C1E) else Color(0xFFB999FF)
 
 @Suppress("MagicNumber")
-val Colors.onFeedbackSurface: Color get() = if (isLight) Color(0xFFBEA0F2) else Color(0xFF1C1C1E)
+val Colors.onFeedbackSurface: Color get() = if (isLight) Color(0xFFB999FF) else Color(0xFF1C1C1E)
 
 @Composable
 fun FeedbackDialog(

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/theme/WooColors.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/theme/WooColors.kt
@@ -6,9 +6,9 @@ import androidx.compose.ui.graphics.Color
 
 @Suppress("MagicNumber")
 object WooColors {
-    val md_theme_light_primary = Color(0xFF674399)
+    val md_theme_light_primary = Color(0xFF873EFF)
     val md_theme_light_onPrimary = Color(0xFFFFFFFF)
-    val md_theme_light_primary_variant = Color(0xFF3C2861)
+    val md_theme_light_primary_variant = Color(0xFF3C087E)
     val md_theme_light_secondary = Color(0xFFC9356E)
     val md_theme_light_onSecondary = Color(0xFF000000)
     val md_theme_light_secondary_variant = Color(0xFF880E4F)
@@ -19,7 +19,7 @@ object WooColors {
     val md_theme_light_surface = Color(0xFFFFFFFF)
     val md_theme_light_onSurface = Color(0xFF000000)
 
-    val md_theme_dark_primary = Color(0xFFB17FD4)
+    val md_theme_dark_primary = Color(0xFF873EFF)
     val md_theme_dark_onPrimary = Color(0xFF000000)
     val md_theme_dark_primary_variant = Color(0xFF7F54B3)
     val md_theme_dark_secondary = Color(0xFFEB6594)

diff --git a/...ommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/WooPosTheme.kt b/...ommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/WooPosTheme.kt
@@ -25,7 +25,7 @@ data class CustomColors(
     val paymentSuccessText: Color,
     val paymentSuccessIcon: Color,
     val paymentProcessingText: Color,
-    val dialogSubtitleHighlightBackground: Color = Color(0x14747480),
+    val dialogSubtitleHighlightBackground: Color = WooPosColors.lightQuaternaryBackground,
     val homeBackground: Color,
     val warning: Color,
 )
@@ -62,29 +62,19 @@ private object WooPosColors {
     val lightCustomColorsBorder = Color(0xFFC6C6C8)
     val lightQuaternaryBackground = Color(0x14747480)
 
-    // Woo colors from here: W5OBIbzWilNI8qely8Y4OHQd-fi-144_2
+    // Woo colors from here: https://color-studio.blog/
     val WooPurple0 = Color(0xFFF2EDFF)
-    val WooPurple5 = Color(0xFFDFD1FB)
-    val WooPurple10 = Color(0xFFCFB9F6)
-    val WooPurple20 = Color(0xFFBEA0F2)
-    val WooPurple30 = Color(0xFFAD86E9)
-    val WooPurple40 = Color(0xFF966CCF)
-    val WooPurple50 = Color(0xFF7F54B3)
-    val WooPurple60 = Color(0xFF674399)
-    val WooPurple70 = Color(0xFF533582)
-    val WooPurple80 = Color(0xFF3C2861)
-    val WooPurple90 = Color(0xFF271B3D)
-    val WooPurple100 = Color(0xFF140E1F)
-
-    val Purple10 = Color(0xFFF7EDF7)
-    val Purple20 = Color(0xFFC792E0)
-    val Purple30 = Color(0xFFB17FD4)
-    val Purple40 = Color(0xFFAF7DD1)
-    val Purple50 = Color(0xFF7F54B3)
-    val Purple60 = Color(0xFF674399)
-    val Purple60Alpha33 = Color(0x33674399)
-    val Purple80 = Color(0xFF3C2861)
-    val Purple90 = Color(0xFF271B3D)
+    val WooPurple5 = Color(0xFFE1D7FF)
+    val WooPurple10 = Color(0xFFD1C1FF)
+    val WooPurple20 = Color(0xFFB999FF)
+    val WooPurple30 = Color(0xFFA77EFF)
+    val WooPurple40 = Color(0xFF873EFF)
+    val WooPurple50 = Color(0xFF720EEC)
+    val WooPurple60 = Color(0xFF6108CE)
+    val WooPurple70 = Color(0xFF5007AA)
+    val WooPurple80 = Color(0xFF3C087E)
+    val WooPurple90 = Color(0xFF2C045D)
+    val WooPurple100 = Color(0xFF1F0342)
 
     val Pink10 = Color(0xFFED9BB8)
     val Pink30 = Color(0xFFEB6594)
@@ -117,8 +107,8 @@ private object WooPosColors {
     val Yellow30 = Color(0xFFDBAE17)
     val Yellow50 = Color(0xFF907300)
     val Yellow70 = Color(0xFF5C4B00)
-    val Celadon0 = Color(0xFFECF7F4)
 
+    val Celadon0 = Color(0xFFECF7F4)
     val Celadon5 = Color(0xFFA7E8D4)
     val Celadon10 = Color(0xFF65D9B9)
     val Celadon20 = Color(0xFF2FC39E)
@@ -131,38 +121,20 @@ private object WooPosColors {
     val Green50 = Color(0xFF008A20)
 
     val White = Color(0xFFFFFFFF)
-    val WhiteAlpha005 = Color(0x0DFFFFFF)
-    val WhiteAlpha008 = Color(0x14FFFFFF)
-    val WhiteAlpha009 = Color(0x17FFFFFF)
-    val WhiteAlpha012 = Color(0x1FFFFFFF)
-    val WhiteAlpha038 = Color(0x61FFFFFF)
-    val WhiteAlpha060 = Color(0x99FFFFFF)
-    val WhiteAlpha087 = Color(0xDEFFFFFF)
 
     val Gray0 = Color(0xFFF6F7F7)
     val Gray5 = Color(0xFFDCDCDE)
-    val Gray6 = Color(0xFFF2F2F7)
     val Gray20 = Color(0xFFB4B1B8)
     val Gray40 = Color(0xFF787C82)
     val Gray60 = Color(0xFF51565F)
     val Gray70 = Color(0xFF3D444B)
     val Gray80 = Color(0xFF2C3338)
-    val Gray80Alpha012 = Color(0x1F2C3338)
-    val Gray80Alpha030 = Color(0x4D3C3C43)
     val Gray900 = Color(0xFFF7F7F7)
 
     val Black = Color(0xFF000000)
-    val Black90 = Color(0xFF121212)
-    val Black90Alpha004 = Color(0x0A000000)
-    val Black90Alpha012 = Color(0x1F121212)
-    val Black90Alpha020 = Color(0x33121212)
-    val Black90Alpha038 = Color(0x61121212)
-    val Black90Alpha060 = Color(0x99121212)
-    val Black90Alpha087 = Color(0xDE121212)
-    val Black900 = Color(0xFF272727)
     val Black60 = Color(0xFF6A6A6A)
     val Black80 = Color(0xFF363636)
-    val BlackAlpha008 = Color(0x14212121)
+    val Black90 = Color(0xFF121212)
 }
 
 private val DarkColorPalette = darkColors(
@@ -178,7 +150,7 @@ private val DarkColorPalette = darkColors(
 )
 
 private val LightColorPalette = lightColors(
-    primary = WooPosColors.Purple50,
+    primary = WooPosColors.WooPurple50,
     primaryVariant = WooPosColors.primaryVariant,
     onPrimary = Color.White,
     secondary = WooPosColors.lightColorPaletteSecondary,
@@ -195,7 +167,7 @@ private val DarkCustomColors = CustomColors(
     success = WooPosColors.greenNotFromPalette,
     error = WooPosColors.darkCustomColorsError,
     totalsErrorBackground = WooPosColors.darkQuaternaryBackground,
-    totalsBackground = Color(0xFF1C1C1E),
+    totalsBackground = WooPosColors.darkTotalsBackground,
     paymentSuccessBackground = WooPosColors.darkCustomColorsHomeBackground,
     paymentSuccessText = WooPosColors.oldGrayLight,
     paymentSuccessIcon = WooPosColors.darkCustomColorsHomeBackground,
@@ -213,7 +185,7 @@ private val LightCustomColors = CustomColors(
     totalsErrorBackground = WooPosColors.lightQuaternaryBackground,
     totalsBackground = WooPosColors.Gray0,
     paymentSuccessBackground = WooPosColors.White,
-    paymentSuccessText = WooPosColors.Purple90,
+    paymentSuccessText = WooPosColors.WooPurple90,
     paymentProcessingText = WooPosColors.White,
     paymentSuccessIcon = Color.White,
     homeBackground = WooPosColors.Gray0,

diff --git a/WooCommerce/src/main/res/color/button_toggle_fg_selector.xml b/WooCommerce/src/main/res/color/button_toggle_fg_selector.xml
@@ -2,13 +2,10 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item
         android:state_enabled="false"
-        android:alpha="@dimen/alpha_emphasis_disabled"
         android:color="@color/color_on_surface"/>
     <item
         android:state_checked="true"
-        android:alpha="@dimen/alpha_emphasis_high"
         android:color="@color/color_primary"/>
     <item
-        android:alpha="@dimen/alpha_emphasis_medium"
         android:color="@color/color_on_surface"/>
 </selector>
diff --git a/WooCommerce/src/main/res/drawable/list_primary_selector.xml b/WooCommerce/src/main/res/drawable/list_primary_selector.xml
diff --git a/WooCommerce/src/main/res/layout/product_filter_option_list_item.xml b/WooCommerce/src/main/res/layout/product_filter_option_list_item.xml
@@ -5,10 +5,10 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="?attr/selectableItemBackground"
     android:minHeight="@dimen/min_tap_target"
     android:paddingTop="@dimen/minor_100"
-    android:paddingBottom="@dimen/minor_100"
-    android:background="?attr/selectableItemBackground">
+    android:paddingBottom="@dimen/minor_100">
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/filterOptionItem_name"
@@ -23,29 +23,29 @@
 
     <Button
         android:id="@+id/explorePlugin"
+        style="@style/Woo.Button.Colored"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginEnd="@dimen/major_100"
+        android:clickable="false"
         android:text="@string/product_filter_explore_plugin"
+        android:textAllCaps="false"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:layout_marginEnd="@dimen/major_100"
-        android:textAllCaps="false"
-        android:visibility="gone"
-        android:clickable="false"/>
+        app:layout_constraintTop_toTopOf="parent" />
 
     <ImageView
         android:id="@+id/filterOptionItem_tick"
         android:layout_width="@dimen/image_minor_60"
         android:layout_height="@dimen/image_minor_60"
+        android:layout_marginEnd="@dimen/major_100"
         android:button="@null"
         android:contentDescription="@string/product_list_filters_list_item"
         android:src="@drawable/ic_done_secondary"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        android:layout_marginEnd="@dimen/major_100"
         tools:visibility="visible" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WooCommerce/src/main/res/values-night/colors_base.xml b/WooCommerce/src/main/res/values-night/colors_base.xml
@@ -3,7 +3,7 @@
     <!--
         General colors
     -->
-    <color name="color_primary">@color/woo_purple_30</color>
+    <color name="color_primary">@color/woo_purple_40</color>
     <color name="color_primary_surface">@color/woo_black_90</color>
     <color name="color_primary_variant">@color/woo_purple_50</color>
     <color name="color_secondary">@color/woo_pink_30</color>

diff --git a/WooCommerce/src/main/res/values/colors_base.xml b/WooCommerce/src/main/res/values/colors_base.xml
@@ -3,7 +3,7 @@
     <!--
         General colors
     -->
-    <color name="color_primary">@color/woo_purple_60</color>
+    <color name="color_primary">@color/woo_purple_40</color>
     <color name="color_primary_surface">@color/woo_purple_60</color>
     <color name="color_primary_variant">@color/woo_purple_80</color>
     <color name="color_secondary">@color/woo_pink_50</color>
@@ -86,7 +86,7 @@
     <color name="divider_color">@color/woo_black_90_alpha_012</color>
     <color name="color_ripple_overlay">@color/woo_black_90_alpha_012</color>
     <color name="image_border_color">@color/woo_black_90_alpha_012</color>
-    <color name="splash_background">@color/woo_purple_60</color>
+    <color name="splash_background">@color/woo_purple_40</color>
     <color name="color_toolbar">@color/woo_white</color>
     <color name="bottom_sheet_background">@color/color_surface</color>
 

diff --git a/WooCommerce/src/main/res/values/ic_launcher_background.xml b/WooCommerce/src/main/res/values/ic_launcher_background.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#674399</color>
+    <color name="ic_launcher_background">@color/woo_purple_40</color>
 </resources>
diff --git a/WooCommerce/src/main/res/values/wc_colors_base.xml b/WooCommerce/src/main/res/values/wc_colors_base.xml
@@ -1,15 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="woo_purple_0">#F2EDFF</color>
-    <color name="woo_purple_10">#F7EDF7</color>
-    <color name="woo_purple_20">#C792E0</color>
-    <color name="woo_purple_30">#B17FD4</color>
-    <color name="woo_purple_40">#AF7DD1</color>
-    <color name="woo_purple_50">#7F54B3</color>
-    <color name="woo_purple_60">#674399</color>
-    <color name="woo_purple_60_alpha_33">#33674399</color>
-    <color name="woo_purple_80">#3C2861</color>
-    <color name="woo_purple_90">#271B3D</color>
+    <color name="woo_purple_10">#D1C1FF</color>
+    <color name="woo_purple_20">#B999FF</color>
+    <color name="woo_purple_30">#A77EFF</color>
+    <color name="woo_purple_40">#873EFF</color>
+    <color name="woo_purple_50">#720EEC</color>
+    <color name="woo_purple_60">#6108CE</color>
+    <color name="woo_purple_80">#3C087E</color>
+    <color name="woo_purple_90">#2C045D</color>
     <color name="woo_purple_dark_secondary">#99EBEBF5</color>
 
     <color name="woo_pink_10">#ED9BB8</color>
@@ -73,12 +72,10 @@
     <color name="woo_gray_70">#3D444B</color>
     <color name="woo_gray_80">#2C3338</color>
     <color name="woo_gray_80_alpha_012">#1F2C3338</color>
-    <color name="woo_gray_80_alpha_030">#4D3C3C43</color>
     <color name="woo_gray_900">#F7F7F7</color>
 
     <color name="woo_black">#FF000000</color>
     <color name="woo_black_90">#121212</color>
-    <color name="woo_black_90_alpha_004">#0A000000</color>
     <color name="woo_black_90_alpha_012">#1F121212</color>
     <color name="woo_black_90_alpha_020">#33121212</color>
     <color name="woo_black_90_alpha_038">#61121212</color>

diff --git a/WooCommerce/src/wasabi/res/values/ic_launcher_background.xml b/WooCommerce/src/wasabi/res/values/ic_launcher_background.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#674399</color>
+    <color name="ic_launcher_background">@color/woo_purple_40</color>
 </resources>