fix(Box): remove js check that allows brand token for Box backgroundColor (#2457)

* fix: remove js check that allows brand token for Box backgroundColor

* Create mean-guests-reflect.md

* update test

* fix: update snapshot

---------

Co-authored-by: saurabhdaware <saurabh.daware@razorpay.com>

Author: chaitanyadeorukhkar

.changeset/mean-guests-reflect.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: remove js check that allows brand token for Box backgroundColor

packages/blade/src/components/Box/Box.tsx

@@ -13,12 +13,11 @@ const validateBackgroundString = (stringBackgroundColorValue: string): void => {
   if (__DEV__) {
     if (
       !stringBackgroundColorValue.startsWith('surface.background') &&
-      !stringBackgroundColorValue.startsWith('brand.') &&
       !stringBackgroundColorValue.startsWith('overlay.') &&
       stringBackgroundColorValue !== 'transparent'
     ) {
       throwBladeError({
-        message: `Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`${stringBackgroundColorValue}\` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,
+        message: `Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`${stringBackgroundColorValue}\` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,
         moduleName: 'Box',
       });
     }

packages/blade/src/components/Box/__tests__/Box.native.test.tsx

@@ -61,7 +61,7 @@ describe('<Box />', () => {
       );
     } catch (err: unknown) {
       expect(err).toMatchInlineSnapshot(`
-        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`red\` instead.
+        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`red\` instead.
 
          Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨]
       `);

packages/blade/src/components/Box/__tests__/Box.web.test.tsx

@@ -71,7 +71,7 @@ describe('<Box />', () => {
       );
     } catch (err: unknown) {
       expect(err).toMatchInlineSnapshot(`
-        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`red\` instead.
+        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`red\` instead.
 
          Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨]
       `);