From 32b0835f199d8de3affd275e400ca3cd6361d3ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Vytick=20Vytrhl=C3=ADk?= <vytick@gmail.com>
Date: Thu, 18 Apr 2024 22:49:24 +0200
Subject: [PATCH] feat(suite): updated color names to palette mapping

---
 packages/theme/src/colors.ts | 40 ++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/theme/src/colors.ts b/packages/theme/src/colors.ts
index 1d23d71cf58..186fc36766f 100644
--- a/packages/theme/src/colors.ts
+++ b/packages/theme/src/colors.ts
@@ -37,18 +37,21 @@ const light = {
 
     // Figma Colors
     backgroundAlertBlueBold: palette.lightAccentBlue600,
+    backgroundAlertBlueBoldAlt: palette.lightAccentBlue700,
     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,
@@ -87,18 +90,21 @@ const light = {
     borderElevation1: palette.lightGray200,
     borderElevation2: palette.lightGray200,
     borderElevation3: palette.lightGray200,
-    borderElevationNegative: palette.lightGray300,
+    borderElevationNegative: palette.lightGray400,
     borderSecondary: palette.lightSecondaryEmerald800,
     borderSubtleInverted: palette.lightWhiteAlpha400,
-    iconAlertBlue: palette.lightAccentBlue700,
+    iconAlertBlue: palette.lightAccentBlue800,
     iconAlertRed: palette.lightAccentRed700,
-    iconAlertYellow: palette.lightAccentYellow700,
+    iconAlertYellow: palette.lightAccentYellow800,
     iconDefault: palette.lightGray1000,
     iconDefaultInverted: palette.lightWhiteAlpha1000,
     iconDisabled: palette.lightGray600,
+    iconOnBlue: palette.lightWhiteAlpha1000,
     iconOnPrimary: palette.lightWhiteAlpha1000,
+    iconOnRed: palette.lightWhiteAlpha1000,
     iconOnSecondary: palette.lightWhiteAlpha1000,
     iconOnTertiary: palette.lightGray800,
+    iconOnYellow: palette.lightGray1000,
     iconPrimaryDefault: palette.lightPrimaryForest800,
     iconPrimaryPressed: palette.lightPrimaryForest900,
     iconSubdued: palette.lightGray700,
@@ -142,15 +148,18 @@ const light = {
     interactionBackgroundWarningDefaultNormalOnElevation2: palette.lightAccentYellow200,
     interactionBackgroundWarningDefaultNormalOnElevation3: palette.lightAccentYellow100,
     interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.lightAccentYellow300,
-    textAlertBlue: palette.lightAccentBlue700,
+    textAlertBlue: palette.lightAccentBlue800,
     textAlertRed: palette.lightAccentRed700,
-    textAlertYellow: palette.lightAccentYellow700,
+    textAlertYellow: palette.lightAccentYellow800,
     textDefault: palette.lightGray1000,
     textDefaultInverted: palette.lightWhiteAlpha1000,
     textDisabled: palette.lightGray600,
+    textOnBlue: palette.lightWhiteAlpha1000,
     textOnPrimary: palette.lightWhiteAlpha1000,
+    textOnRed: palette.lightWhiteAlpha1000,
     textOnSecondary: palette.lightWhiteAlpha1000,
     textOnTertiary: palette.lightGray800,
+    textOnYellow: palette.lightGray1000,
     textPrimaryDefault: palette.lightPrimaryForest800,
     textPrimaryPressed: palette.lightPrimaryForest900,
     textSecondaryHighlight: palette.lightSecondaryEmerald800,
@@ -190,18 +199,21 @@ 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,
         backgroundAlertBlueSubtleOnElevationNegative: '#FFFFFF',
         backgroundAlertRedBold: palette.darkAccentRed600,
+        backgroundAlertRedBoldAlt: palette.darkAccentRed700,
         backgroundAlertRedSubtleOnElevation0: palette.darkAccentRed50,
         backgroundAlertRedSubtleOnElevation1: palette.darkAccentRed100,
         backgroundAlertRedSubtleOnElevation2: palette.darkAccentRed200,
         backgroundAlertRedSubtleOnElevation3: palette.darkAccentRed300,
         backgroundAlertRedSubtleOnElevationNegative: '#FFFFFF',
         backgroundAlertYellowBold: palette.darkAccentYellow600,
+        backgroundAlertYellowBoldAlt: palette.darkAccentYellow700,
         backgroundAlertYellowSubtleOnElevation0: palette.darkAccentYellow50,
         backgroundAlertYellowSubtleOnElevation1: palette.darkAccentYellow100,
         backgroundAlertYellowSubtleOnElevation2: palette.darkAccentYellow200,
@@ -234,13 +246,13 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
         backgroundTertiaryPressedOnElevationNegative: palette.darkGray100,
         borderAlertRed: palette.darkAccentRed600,
         borderDashed: palette.darkGray200,
-        borderFocus: palette.darkGray200,
-        borderInverted: palette.darkGray000,
         borderElevation0: palette.darkGray100,
         borderElevation1: palette.darkGray200,
         borderElevation2: palette.darkGray300,
         borderElevation3: palette.darkGray400,
-        borderElevationNegative: palette.darkGray200,
+        borderElevationNegative: palette.darkGray50,
+        borderFocus: palette.darkGray200,
+        borderInverted: palette.darkGray000,
         borderSecondary: palette.darkSecondaryGreen800,
         borderSubtleInverted: '#0000007F',
         iconAlertBlue: palette.darkAccentBlue700,
@@ -249,9 +261,12 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
         iconDefault: palette.darkGray1000,
         iconDefaultInverted: palette.darkGray000,
         iconDisabled: palette.darkGray600,
+        iconOnBlue: palette.darkGray1000,
         iconOnPrimary: palette.darkGray000,
+        iconOnRed: palette.darkGray1000,
         iconOnSecondary: palette.darkGray000,
         iconOnTertiary: palette.darkGray800,
+        iconOnYellow: palette.darkGray000,
         iconPrimaryDefault: palette.darkPrimaryForest800,
         iconPrimaryPressed: palette.darkPrimaryForest900,
         iconSubdued: palette.darkGray700,
@@ -295,15 +310,18 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
         interactionBackgroundWarningDefaultNormalOnElevation2: palette.darkAccentYellow300,
         interactionBackgroundWarningDefaultNormalOnElevation3: palette.darkAccentYellow400,
         interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.darkAccentYellow50,
-        textAlertBlue: palette.darkAccentBlue700,
-        textAlertRed: palette.darkAccentRed700,
-        textAlertYellow: palette.darkAccentYellow600,
+        textAlertBlue: palette.darkAccentBlue800,
+        textAlertRed: palette.darkAccentRed800,
+        textAlertYellow: palette.darkAccentYellow700,
         textDefault: palette.darkGray1000,
         textDefaultInverted: palette.darkGray000,
         textDisabled: palette.darkGray600,
+        textOnBlue: palette.darkAccentBlue800,
         textOnPrimary: palette.darkGray000,
+        textOnRed: palette.darkGray1000,
         textOnSecondary: palette.darkGray000,
         textOnTertiary: palette.darkGray800,
+        textOnYellow: palette.darkGray000,
         textPrimaryDefault: palette.darkPrimaryForest800,
         textPrimaryPressed: palette.darkPrimaryForest900,
         textSecondaryHighlight: palette.darkSecondaryGreen800,