fix(suite-native): use correct alert colors for the dark theme

trezor · Jan 7, 2025 · 98b2554 · 98b2554
1 parent 3becd8c
commit 98b2554
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 21 deletions.
diff --git a/packages/theme/src/colors.ts b/packages/theme/src/colors.ts
@@ -34,21 +34,18 @@ const light = {
     backgroundAlertBlueSubtleOnElevation0: palette.lightAccentBlue300,
     backgroundAlertBlueSubtleOnElevation1: palette.lightAccentBlue200,
     backgroundAlertBlueSubtleOnElevation2: palette.lightAccentBlue100,
-    backgroundAlertBlueSubtleOnElevation3: palette.lightAccentBlue50,
     backgroundAlertBlueSubtleOnElevationNegative: palette.lightAccentBlue400,
     backgroundAlertRedBold: palette.lightAccentRed600,
     backgroundAlertRedBoldAlt: palette.lightAccentRed700,
     backgroundAlertRedSubtleOnElevation0: palette.lightAccentRed300,
     backgroundAlertRedSubtleOnElevation1: palette.lightAccentRed200,
     backgroundAlertRedSubtleOnElevation2: palette.lightAccentRed100,
-    backgroundAlertRedSubtleOnElevation3: palette.lightAccentRed50,
     backgroundAlertRedSubtleOnElevationNegative: palette.lightAccentRed400,
     backgroundAlertYellowBold: palette.lightAccentYellow600,
     backgroundAlertYellowBoldAlt: palette.lightAccentYellow700,
     backgroundAlertYellowSubtleOnElevation0: palette.lightAccentYellow300,
     backgroundAlertYellowSubtleOnElevation1: palette.lightAccentYellow200,
     backgroundAlertYellowSubtleOnElevation2: palette.lightAccentYellow100,
-    backgroundAlertYellowSubtleOnElevation3: palette.lightAccentYellow50,
     backgroundAlertYellowSubtleOnElevationNegative: palette.lightAccentYellow400,
     backgroundAlertPurpleSubtleOnElevationNegative: palette.lightAccentPurple400,
     backgroundNeutralBold: palette.lightGray1000,
@@ -195,25 +192,22 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
         // Figma Colors
         backgroundAlertBlueBold: palette.darkAccentBlue600,
         backgroundAlertBlueBoldAlt: palette.darkAccentBlue700,
-        backgroundAlertBlueSubtleOnElevation0: palette.darkAccentBlue50,
-        backgroundAlertBlueSubtleOnElevation1: palette.darkAccentBlue100,
-        backgroundAlertBlueSubtleOnElevation2: palette.darkAccentBlue200,
-        backgroundAlertBlueSubtleOnElevation3: palette.darkAccentBlue300,
+        backgroundAlertBlueSubtleOnElevation0: palette.darkAccentBlue200,
+        backgroundAlertBlueSubtleOnElevation1: palette.darkAccentBlue300,
+        backgroundAlertBlueSubtleOnElevation2: palette.darkAccentBlue400,
         backgroundAlertBlueSubtleOnElevationNegative: palette.darkAccentBlue100,
         backgroundAlertRedBold: palette.darkAccentRed600,
         backgroundAlertRedBoldAlt: palette.darkAccentRed700,
-        backgroundAlertRedSubtleOnElevation0: palette.darkAccentRed50,
-        backgroundAlertRedSubtleOnElevation1: palette.darkAccentRed100,
-        backgroundAlertRedSubtleOnElevation2: palette.darkAccentRed200,
-        backgroundAlertRedSubtleOnElevation3: palette.darkAccentRed300,
-        backgroundAlertRedSubtleOnElevationNegative: '#FFFFFF',
+        backgroundAlertRedSubtleOnElevation0: palette.darkAccentRed200,
+        backgroundAlertRedSubtleOnElevation1: palette.darkAccentRed300,
+        backgroundAlertRedSubtleOnElevation2: palette.darkAccentRed400,
+        backgroundAlertRedSubtleOnElevationNegative: palette.darkAccentRed100,
         backgroundAlertYellowBold: palette.darkAccentYellow600,
         backgroundAlertYellowBoldAlt: palette.darkAccentYellow700,
-        backgroundAlertYellowSubtleOnElevation0: palette.darkAccentYellow50,
-        backgroundAlertYellowSubtleOnElevation1: palette.darkAccentYellow100,
-        backgroundAlertYellowSubtleOnElevation2: palette.darkAccentYellow200,
-        backgroundAlertYellowSubtleOnElevation3: palette.darkAccentYellow300,
-        backgroundAlertYellowSubtleOnElevationNegative: '#FFFFFF',
+        backgroundAlertYellowSubtleOnElevation0: palette.darkAccentYellow200,
+        backgroundAlertYellowSubtleOnElevation1: palette.darkAccentYellow300,
+        backgroundAlertYellowSubtleOnElevation2: palette.darkAccentYellow400,
+        backgroundAlertYellowSubtleOnElevationNegative: palette.darkAccentYellow100,
         backgroundAlertPurpleSubtleOnElevationNegative: palette.darkAccentPurple400,
         backgroundNeutralBold: palette.darkGray1000,
         backgroundNeutralBoldInverted: palette.darkGray000,
@@ -224,9 +218,9 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
         backgroundNeutralSubtleOnElevationNegative: palette.darkGray50,
         backgroundPrimaryDefault: palette.darkPrimaryForest800,
         backgroundPrimaryPressed: palette.darkPrimaryForest900,
-        backgroundPrimarySubtleOnElevation0: palette.darkPrimaryForest100,
-        backgroundPrimarySubtleOnElevation1: palette.darkPrimaryForest200,
-        backgroundPrimarySubtleOnElevation2: palette.darkPrimaryForest300,
+        backgroundPrimarySubtleOnElevation0: palette.darkPrimaryForest200,
+        backgroundPrimarySubtleOnElevation1: palette.darkPrimaryForest300,
+        backgroundPrimarySubtleOnElevation2: palette.darkPrimaryForest400,
         backgroundPrimarySubtleOnElevationNegative: palette.darkPrimaryForest100,
         backgroundSecondaryDefault: palette.darkSecondaryGreen800,
         backgroundSecondaryPressed: palette.darkSecondaryGreen900,

diff --git a/packages/theme/src/palette.ts b/packages/theme/src/palette.ts
@@ -110,7 +110,7 @@ export const palette: Record<string, CSSColor> = {
     darkGray700: '#A3A3A3',
     darkGray800: '#E1E1E1',
     darkGray900: '#F4F4F4',
-    darkPrimaryForest100: '#0E2F25',
+    darkPrimaryForest100: '#0D211B',
     darkPrimaryForest200: '#0E2F25',
     darkPrimaryForest300: '#135340',
     darkPrimaryForest400: '#186850',