From 79d4181ba87f2f976bc7c966485a5e9c93a17b9a Mon Sep 17 00:00:00 2001
From: Nathan Ong <nathan.d.ong@gmail.com>
Date: Fri, 25 Oct 2024 09:23:41 -0700
Subject: [PATCH 1/2] Remove duplicate colors, make text black

---
 packages/syntax-core/src/Box/Box.stories.tsx | 9 ++++++++-
 packages/syntax-core/src/colors/allColors.ts | 2 --
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/syntax-core/src/Box/Box.stories.tsx b/packages/syntax-core/src/Box/Box.stories.tsx
index cda78189..3eae7179 100644
--- a/packages/syntax-core/src/Box/Box.stories.tsx
+++ b/packages/syntax-core/src/Box/Box.stories.tsx
@@ -233,7 +233,14 @@ export const BackgroundColor: StoryObj<typeof Box> = {
           <Box key={color} backgroundColor={color} width={240} padding={2}>
             <Typography
               color={
-                ["gray10", "gray30", "white", "cream"].includes(color) ||
+                [
+                  "gray10",
+                  "gray30",
+                  "white",
+                  "cream",
+                  "white40",
+                  "white70",
+                ].includes(color) ||
                 (number && parseInt(number) < 400)
                   ? "gray900"
                   : "white"
diff --git a/packages/syntax-core/src/colors/allColors.ts b/packages/syntax-core/src/colors/allColors.ts
index 9cc3e1bc..61f4ed95 100644
--- a/packages/syntax-core/src/colors/allColors.ts
+++ b/packages/syntax-core/src/colors/allColors.ts
@@ -42,8 +42,6 @@ const colors = [
   "success800",
   "success900",
   "white",
-  "white40",
-  "white70",
   "yellow100",
   "yellow200",
   "yellow300",

From b23c022d7cd6e1e2d078ab7227b963a1566ae880 Mon Sep 17 00:00:00 2001
From: Nathan Ong <nathan.d.ong@gmail.com>
Date: Fri, 25 Oct 2024 09:46:35 -0700
Subject: [PATCH 2/2] Update css class for cambio colors

---
 .../syntax-core/src/colors/colors.module.css     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/syntax-core/src/colors/colors.module.css b/packages/syntax-core/src/colors/colors.module.css
index 8d5583dd..eb47eb73 100644
--- a/packages/syntax-core/src/colors/colors.module.css
+++ b/packages/syntax-core/src/colors/colors.module.css
@@ -435,11 +435,11 @@
   color: var(--color-cambio-white-100);
 }
 
-.cambioWhite40Color {
+.white40Color {
   color: var(--color-cambio-white-40);
 }
 
-.cambioWhite70Color {
+.white70Color {
   color: var(--color-cambio-white-70);
 }
 
@@ -451,6 +451,10 @@
   color: var(--color-cambio-gray-200);
 }
 
+.gray270Color {
+  color: var(--color-cambio-gray-270);
+}
+
 .cambioGray300Color {
   color: var(--color-cambio-gray-300);
 }
@@ -643,11 +647,11 @@
   background-color: var(--color-cambio-white-100);
 }
 
-.cambioWhite40BackgroundColor {
+.white40BackgroundColor {
   background-color: var(--color-cambio-white-40);
 }
 
-.cambioWhite70BackgroundColor {
+.white70BackgroundColor {
   background-color: var(--color-cambio-white-70);
 }
 
@@ -663,6 +667,10 @@
   background-color: var(--color-cambio-gray-300);
 }
 
+.gray270BackgroundColor {
+  background-color: var(--color-cambio-gray-270);
+}
+
 .gray370BackgroundColor {
   background-color: var(--color-cambio-gray-370);
 }