From cd918f9ca5b3cceef655686605541a6edd26e94f Mon Sep 17 00:00:00 2001 From: joshua-livefront <139182194+joshua-livefront@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:55:21 -0400 Subject: [PATCH] BIT-690: Adding color palette and colors to light and dark themes (#74) --- .../bitwarden/ui/platform/theme/Theme.kt | 62 ++++++++-- app/src/main/res/values/colors.xml | 112 ++++++++++++++++-- app/src/main/res/values/colors_palette.xml | 66 +++++++++++ 3 files changed, 221 insertions(+), 19 deletions(-) create mode 100644 app/src/main/res/values/colors_palette.xml diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/Theme.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/Theme.kt index e1492adff..0eb3b43d3 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/Theme.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/Theme.kt @@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.platform.theme import android.app.Activity import android.content.Context import android.os.Build +import androidx.annotation.ColorRes import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.ColorScheme import androidx.compose.material3.MaterialTheme @@ -18,7 +19,6 @@ import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat import com.x8bit.bitwarden.R -import com.x8bit.bitwarden.R.color /** * The overall application theme. This can be configured to support a [darkTheme] and @@ -61,14 +61,62 @@ fun BitwardenTheme( private fun darkColorScheme(context: Context): ColorScheme = darkColorScheme( - primary = Color(context.getColor(color.dark_primary)), - secondary = Color(context.getColor(R.color.dark_primary)), - tertiary = Color(context.getColor(R.color.dark_primary)), + primary = R.color.dark_primary.toColor(context), + onPrimary = R.color.dark_on_primary.toColor(context), + primaryContainer = R.color.dark_primary_container.toColor(context), + onPrimaryContainer = R.color.dark_on_primary_container.toColor(context), + secondary = R.color.dark_secondary.toColor(context), + onSecondary = R.color.dark_on_secondary.toColor(context), + secondaryContainer = R.color.dark_secondary_container.toColor(context), + onSecondaryContainer = R.color.dark_on_secondary_container.toColor(context), + tertiary = R.color.dark_tertiary.toColor(context), + onTertiary = R.color.dark_on_tertiary.toColor(context), + tertiaryContainer = R.color.dark_tertiary_container.toColor(context), + onTertiaryContainer = R.color.dark_on_tertiary_container.toColor(context), + error = R.color.dark_error.toColor(context), + onError = R.color.dark_on_error.toColor(context), + errorContainer = R.color.dark_error_container.toColor(context), + onErrorContainer = R.color.dark_on_error_container.toColor(context), + surface = R.color.dark_surface.toColor(context), + onSurface = R.color.dark_on_surface.toColor(context), + onSurfaceVariant = R.color.dark_on_surface_variant.toColor(context), + outline = R.color.dark_outline.toColor(context), + outlineVariant = R.color.dark_outline_variant.toColor(context), + inverseSurface = R.color.dark_inverse_surface.toColor(context), + inverseOnSurface = R.color.dark_inverse_on_surface.toColor(context), + inversePrimary = R.color.dark_inverse_primary.toColor(context), + scrim = R.color.dark_scrim.toColor(context), ) private fun lightColorScheme(context: Context): ColorScheme = lightColorScheme( - primary = Color(context.getColor(color.primary)), - secondary = Color(context.getColor(R.color.primary)), - tertiary = Color(context.getColor(R.color.primary)), + primary = R.color.primary.toColor(context), + onPrimary = R.color.on_primary.toColor(context), + primaryContainer = R.color.primary_container.toColor(context), + onPrimaryContainer = R.color.on_primary_container.toColor(context), + secondary = R.color.secondary.toColor(context), + onSecondary = R.color.on_secondary.toColor(context), + secondaryContainer = R.color.secondary_container.toColor(context), + onSecondaryContainer = R.color.on_secondary_container.toColor(context), + tertiary = R.color.tertiary.toColor(context), + onTertiary = R.color.on_tertiary.toColor(context), + tertiaryContainer = R.color.tertiary_container.toColor(context), + onTertiaryContainer = R.color.on_tertiary_container.toColor(context), + error = R.color.error.toColor(context), + onError = R.color.on_error.toColor(context), + errorContainer = R.color.error_container.toColor(context), + onErrorContainer = R.color.on_error_container.toColor(context), + surface = R.color.surface.toColor(context), + onSurface = R.color.on_surface.toColor(context), + onSurfaceVariant = R.color.on_surface_variant.toColor(context), + outline = R.color.outline.toColor(context), + outlineVariant = R.color.outline_variant.toColor(context), + inverseSurface = R.color.inverse_surface.toColor(context), + inverseOnSurface = R.color.inverse_on_surface.toColor(context), + inversePrimary = R.color.inverse_primary.toColor(context), + scrim = R.color.scrim.toColor(context), ) + +@ColorRes +private fun Int.toColor(context: Context): Color = + Color(context.getColor(this)) diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index b8d0b3952..1690c2e01 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -1,20 +1,108 @@ <?xml version="1.0" encoding="utf-8"?> <resources> <!-- Light System --> - <color name="border">#dddddd</color> - <color name="notification_bar">#1452BC</color> - <color name="primary">#175DDC</color> + <color name="border">@color/silver_DDDDDD</color> + <color name="notification_bar">@color/blue_1452BC</color> + <color name="primary">@color/blue_175DDC</color> + <color name="on_primary">@color/white_FFFFFF</color> + <color name="primary_container">@color/blue_DAE2FF</color> + <color name="on_primary_container">@color/blue_001848</color> + <color name="primary_fixed">@color/blue_DAE2FF</color> + <color name="primary_fixed_dim">@color/blue_B2C5FF</color> + <color name="on_primary_fixed">@color/blue_001848</color> + <color name="on_primary_fixed_variant">@color/blue_003FA3</color> + <color name="secondary">@color/grey_585E71</color> + <color name="on_secondary">@color/white_FFFFFF</color> + <color name="secondary_container">@color/grey_DDE2F9</color> + <color name="on_secondary_container">@color/blue_151B2C</color> + <color name="secondary_fixed">@color/grey_DDE2F9</color> + <color name="secondary_fixed_dim">@color/grey_C0C6DD</color> + <color name="on_secondary_fixed">@color/blue_151B2C</color> + <color name="on_secondary_fixed_variant">@color/grey_404659</color> + <color name="tertiary">@color/blue_3B5BA9</color> + <color name="on_tertiary">@color/white_FFFFFF</color> + <color name="tertiary_container">@color/blue_DAE2FF</color> + <color name="on_tertiary_container">@color/blue_001848</color> + <color name="tertiary_fixed">@color/blue_DAE2FF</color> + <color name="tertiary_fixed_dim">@color/blue_B2C5FF</color> + <color name="on_tertiary_fixed">@color/blue_001848</color> + <color name="on_tertiary_fixed_variant">@color/blue_1F438F</color> + <color name="error">@color/red_BA1A1A</color> + <color name="on_error">@color/white_FFFFFF</color> + <color name="error_container">@color/red_FFDAD6</color> + <color name="on_error_container">@color/red_410002</color> + <color name="surface_dim">@color/grey_DBD9DD</color> + <color name="surface">@color/grey_FBF8FD</color> + <color name="surface_bright">@color/grey_FBF8FD</color> + <color name="surface_container_lowest">@color/white_FFFFFF</color> + <color name="surface_container_low">@color/white_F5F3F7</color> + <color name="surface_container">@color/white_EFEDF1</color> + <color name="surface_container_high">@color/white_E9E7EC</color> + <color name="surface_container_highest">@color/white_E4E2E6</color> + <color name="on_surface">@color/grey_1B1B1F</color> + <color name="on_surface_variant">@color/grey_45464F</color> + <color name="outline">@color/grey_757780</color> + <color name="outline_variant">@color/white_C5C6D0</color> + <color name="inverse_surface">@color/grey_303034</color> + <color name="inverse_on_surface">@color/grey_F2F0F4</color> + <color name="inverse_primary">@color/blue_B2C5FF</color> + <color name="scrim">@color/black_000000</color> + <color name="shadow">@color/black_000000</color> <!-- Dark System --> - <color name="dark_border">#666666</color> - <color name="dark_navigation_bar_background">#191919</color> - <color name="dark_notification_bar">#191919</color> - <color name="dark_primary">#52bdfb</color> + <color name="dark_border">@color/grey_666666</color> + <color name="dark_navigation_bar_background">@color/grey_191919</color> + <color name="dark_notification_bar">@color/grey_191919</color> + <color name="dark_primary">@color/blue_B2C5FF</color> + <color name="dark_on_primary">@color/blue_002B74</color> + <color name="dark_primary_container">@color/blue_003FA3</color> + <color name="dark_on_primary_container">@color/blue_DAE2FF</color> + <color name="dark_primary_fixed">@color/blue_DAE2FF</color> + <color name="dark_primary_fixed_dim">@color/blue_B2C5FF</color> + <color name="dark_on_primary_fixed">@color/blue_001848</color> + <color name="dark_on_primary_fixed_variant">@color/blue_003FA3</color> + <color name="dark_secondary">@color/grey_C0C6DD</color> + <color name="dark_on_secondary">@color/grey_2A3042</color> + <color name="dark_secondary_container">@color/grey_404659</color> + <color name="dark_on_secondary_container">@color/grey_DDE2F9</color> + <color name="dark_secondary_fixed">@color/grey_DDE2F9</color> + <color name="dark_secondary_fixed_dim">@color/grey_C0C6DD</color> + <color name="dark_on_secondary_fixed">@color/blue_151B2C</color> + <color name="dark_on_secondary_fixed_variant">@color/grey_404659</color> + <color name="dark_tertiary">@color/blue_B2C5FF</color> + <color name="dark_on_tertiary">@color/blue_002B73</color> + <color name="dark_tertiary_container">@color/blue_1F438F</color> + <color name="dark_on_tertiary_container">@color/blue_DAE2FF</color> + <color name="dark_tertiary_fixed">@color/blue_DAE2FF</color> + <color name="dark_tertiary_fixed_dim">@color/blue_B2C5FF</color> + <color name="dark_on_tertiary_fixed">@color/blue_001848</color> + <color name="dark_on_tertiary_fixed_variant">@color/blue_1F438F</color> + <color name="dark_error">@color/red_FFB4AB</color> + <color name="dark_on_error">@color/red_690005</color> + <color name="dark_error_container">@color/red_93000A</color> + <color name="dark_on_error_container">@color/red_FFDAD6</color> + <color name="dark_surface_dim">@color/grey_131316</color> + <color name="dark_surface">@color/grey_131316</color> + <color name="dark_surface_bright">@color/grey_39393C</color> + <color name="dark_surface_container_lowest">@color/grey_0D0E11</color> + <color name="dark_surface_container_low">@color/grey_1B1B1F</color> + <color name="dark_surface_container">@color/grey_1F1F23</color> + <color name="dark_surface_container_high">@color/grey_292A2D</color> + <color name="dark_surface_container_highest">@color/grey_343438</color> + <color name="dark_on_surface">@color/grey_C7C6CA</color> + <color name="dark_on_surface_variant">@color/white_C5C6D0</color> + <color name="dark_outline">@color/grey_8F909A</color> + <color name="dark_outline_variant">@color/grey_45464F</color> + <color name="dark_inverse_surface">@color/white_E4E2E6</color> + <color name="dark_inverse_on_surface">@color/grey_1B1B1F</color> + <color name="dark_inverse_primary">@color/blue_0055D4</color> + <color name="dark_scrim">@color/black_000000</color> + <color name="dark_shadow">@color/black_000000</color> <!-- Other --> - <color name="black">#000000</color> - <color name="dark_gray">#333333</color> - <color name="gray">#738182</color> - <color name="light_gray">#efeff4</color> - <color name="white">#FFFFFF</color> + <color name="black">@color/black_000000</color> + <color name="dark_gray">@color/grey_333333</color> + <color name="gray">@color/grey_738182</color> + <color name="light_gray">@color/grey_EFEFF4</color> + <color name="white">@color/white_FFFFFF</color> </resources> diff --git a/app/src/main/res/values/colors_palette.xml b/app/src/main/res/values/colors_palette.xml new file mode 100644 index 000000000..73e013311 --- /dev/null +++ b/app/src/main/res/values/colors_palette.xml @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="utf-8"?> +<resources> + <!-- Blues --> + <color name="blue_DAE2FF">#DAE2FF</color> + <color name="blue_B2C5FF">#B2C5FF</color> + <color name="blue_175DDC">#175DDC</color> + <color name="blue_0055D4">#0055D4</color> + <color name="blue_3B5BA9">#3B5BA9</color> + <color name="blue_1452BC">#1452BC</color> + <color name="blue_1F438F">#1F438F</color> + <color name="blue_003FA3">#003FA3</color> + <color name="blue_002B74">#002B74</color> + <color name="blue_002B73">#002B73</color> + <color name="blue_001848">#001848</color> + <color name="blue_151B2C">#151B2C</color> + + <!-- Greys --> + <color name="grey_FBF8FD">#FBF8FD</color> + <color name="grey_DDE2F9">#DDE2F9</color> + <color name="grey_EFEFF4">#EFEFF4</color> + <color name="grey_F2F0F4">#F2F0F4</color> + <color name="grey_DBD9DD">#DBD9DD</color> + <color name="grey_E4E2E6">#E4E2E6</color> + <color name="grey_C5C6D0">#C5C6D0</color> + <color name="grey_C7C6CA">#C7C6CA</color> + <color name="grey_8F909A">#8F909A</color> + <color name="grey_C0C6DD">#C0C6DD</color> + <color name="grey_757780">#757780</color> + <color name="grey_738182">#738182</color> + <color name="grey_585E71">#585E71</color> + <color name="grey_666666">#666666</color> + <color name="grey_45464F">#45464F</color> + <color name="grey_404659">#404659</color> + <color name="grey_333333">#333333</color> + <color name="grey_303034">#303034</color> + <color name="grey_2A3042">#2A3042</color> + <color name="grey_39393C">#39393C</color> + <color name="grey_292A2D">#292A2D</color> + <color name="grey_343438">#343438</color> + <color name="grey_1F1F23">#1F1F23</color> + <color name="grey_1B1B1F">#1B1B1F</color> + <color name="grey_191919">#191919</color> + <color name="grey_131316">#131316</color> + <color name="grey_0D0E11">#0D0E11</color> + + <!-- Reds and Oranges --> + <color name="red_FFDAD6">#FFDAD6</color> + <color name="red_FFB4AB">#FFB4AB</color> + <color name="red_BA1A1A">#BA1A1A</color> + <color name="red_93000A">#93000A</color> + <color name="red_690005">#690005</color> + <color name="red_410002">#410002</color> + + <!-- Whites and Off-Whites --> + <color name="white_FFFFFF">#FFFFFF</color> + <color name="white_F5F3F7">#F5F3F7</color> + <color name="white_EFEDF1">#EFEDF1</color> + <color name="white_E9E7EC">#E9E7EC</color> + <color name="white_C5C6D0">#C5C6D0</color> + <color name="white_E4E2E6">#E4E2E6</color> + + <!-- Misc Colors --> + <color name="silver_DDDDDD">#dddddd</color> + <color name="black_000000">#000000</color> + +</resources>