From da0fd28743d435963ce787d24327a178f698dcb5 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 13:10:11 +0530
Subject: [PATCH 01/32] feat(button): update loading state styling

---
 .../components/button/src/DestructiveButton.tsx           | 4 ++--
 .../components/button/src/DestructiveIconButton.tsx       | 2 +-
 .../components/button/src/DestructiveLinkButton.tsx       | 8 ++++----
 .../components/button/src/DestructiveSecondaryButton.tsx  | 4 ++--
 .../paste-core/components/button/src/InverseButton.tsx    | 4 ++--
 .../components/button/src/InverseLinkButton.tsx           | 2 +-
 packages/paste-core/components/button/src/LinkButton.tsx  | 2 +-
 .../paste-core/components/button/src/PrimaryButton.tsx    | 4 ++--
 .../components/button/src/PrimaryIconButton.tsx           | 2 +-
 .../paste-core/components/button/src/SecondaryButton.tsx  | 4 ++--
 .../components/button/src/SecondaryIconButton.tsx         | 2 +-
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/paste-core/components/button/src/DestructiveButton.tsx b/packages/paste-core/components/button/src/DestructiveButton.tsx
index c599564e2a..746c5f9e8a 100644
--- a/packages/paste-core/components/button/src/DestructiveButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/DestructiveIconButton.tsx b/packages/paste-core/components/button/src/DestructiveIconButton.tsx
index d047a1ca66..e0982670ee 100644
--- a/packages/paste-core/components/button/src/DestructiveIconButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
index 698cb6f4c6..e80247afaa 100644
--- a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
@@ -15,11 +15,11 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextLinkDestructive",
+  color: "colorTextWeaker",
   textAlign: "left",
-  _hover: { color: "colorTextLinkDestructiveStronger" },
-  _active: { color: "colorTextLinkDestructiveStronger" },
-  _focus: { color: "colorTextLinkDestructiveStronger" },
+  _hover: { color: "colorTextWeaker" },
+  _active: { color: "colorTextWeaker" },
+  _focus: { color: "colorTextWeaker" },
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
index 6a50ab28d8..8387c903ea 100644
--- a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
diff --git a/packages/paste-core/components/button/src/InverseButton.tsx b/packages/paste-core/components/button/src/InverseButton.tsx
index 4c33592ecd..6b8be46e1b 100644
--- a/packages/paste-core/components/button/src/InverseButton.tsx
+++ b/packages/paste-core/components/button/src/InverseButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   backgroundColor: "colorBackgroundInverseStrong",
-  boxShadow: "shadowBorderInverseWeaker",
+  boxShadow: "shadowBorderInverseWeakest",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/InverseLinkButton.tsx b/packages/paste-core/components/button/src/InverseLinkButton.tsx
index d17ab0a93c..0c3991d1d2 100644
--- a/packages/paste-core/components/button/src/InverseLinkButton.tsx
+++ b/packages/paste-core/components/button/src/InverseLinkButton.tsx
@@ -16,7 +16,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   textAlign: "left",
 });
 
diff --git a/packages/paste-core/components/button/src/LinkButton.tsx b/packages/paste-core/components/button/src/LinkButton.tsx
index 73b2ba6b28..1985e18a99 100644
--- a/packages/paste-core/components/button/src/LinkButton.tsx
+++ b/packages/paste-core/components/button/src/LinkButton.tsx
@@ -15,7 +15,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   textAlign: "left",
 });
 
diff --git a/packages/paste-core/components/button/src/PrimaryButton.tsx b/packages/paste-core/components/button/src/PrimaryButton.tsx
index b4a09b3e0c..ac0233dc2c 100644
--- a/packages/paste-core/components/button/src/PrimaryButton.tsx
+++ b/packages/paste-core/components/button/src/PrimaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/PrimaryIconButton.tsx b/packages/paste-core/components/button/src/PrimaryIconButton.tsx
index 5b32015e20..08d423ea47 100644
--- a/packages/paste-core/components/button/src/PrimaryIconButton.tsx
+++ b/packages/paste-core/components/button/src/PrimaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx
index 8012a4903c..b2818522cb 100644
--- a/packages/paste-core/components/button/src/SecondaryButton.tsx
+++ b/packages/paste-core/components/button/src/SecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
diff --git a/packages/paste-core/components/button/src/SecondaryIconButton.tsx b/packages/paste-core/components/button/src/SecondaryIconButton.tsx
index 56c92f2c36..536fdbc836 100644
--- a/packages/paste-core/components/button/src/SecondaryIconButton.tsx
+++ b/packages/paste-core/components/button/src/SecondaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {

From c388bc446caf2348436d26d574f96fccf38b7412 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 13:13:12 +0530
Subject: [PATCH 02/32] feat(tokens): update aliases and tokens

---
 packages/paste-design-tokens/tokens/aliases/color-palette.yml | 2 +-
 packages/paste-design-tokens/tokens/global/border-color.yml   | 2 +-
 packages/paste-design-tokens/tokens/global/box-shadow.yml     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index 38937153f1..60185325db 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -32,7 +32,7 @@ aliases:
   palette-gray-15: "#edeef2"
   palette-gray-20: "#e1e3ea"
   palette-gray-30: "#cacdd8"
-  palette-gray-40: "#8e96ae"
+  palette-gray-40: "#8B93AA"
   palette-gray-50: "#8891aa"
   palette-gray-55: "#67728e"
   palette-gray-60: "#606b85"
diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml
index d8781a7fa0..a772c06685 100644
--- a/packages/paste-design-tokens/tokens/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/global/border-color.yml
@@ -29,7 +29,7 @@ props:
       - color-background-destructive-weaker
       - color-background-destructive-weakest
   color-border:
-    value: "{!palette-gray-50}"
+    value: "{!palette-gray-40}"
     comment: Default border color
     uicontrol_contrast_pairing:
       # - color-background
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 45a424d480..050bc20423 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -39,7 +39,7 @@ props:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-30}"
     comment: Weak shadow border for disabled inputs.
   shadow-border:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-40}"
     comment: Shadow border for inputs.
   shadow-border-strong:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}"

From 83e3877ab5e332eadf684fef441ae56f8e23fe84 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 13:32:39 +0530
Subject: [PATCH 03/32] feat(button): update border radius based on size

---
 .../components/button/src/DestructiveLinkButton.tsx       | 8 +++++++-
 .../components/button/src/InverseLinkButton.tsx           | 7 ++++++-
 packages/paste-core/components/button/src/LinkButton.tsx  | 7 ++++++-
 packages/paste-core/components/button/src/styles.ts       | 8 ++++----
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
index e80247afaa..2a0f9cc072 100644
--- a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
@@ -30,6 +30,12 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   _focus: { color: "colorTextLinkDestructiveWeak" },
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -45,7 +51,7 @@ const DestructiveLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonPr
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/InverseLinkButton.tsx b/packages/paste-core/components/button/src/InverseLinkButton.tsx
index 0c3991d1d2..7813ef99e0 100644
--- a/packages/paste-core/components/button/src/InverseLinkButton.tsx
+++ b/packages/paste-core/components/button/src/InverseLinkButton.tsx
@@ -25,6 +25,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -40,7 +45,7 @@ const InverseLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/LinkButton.tsx b/packages/paste-core/components/button/src/LinkButton.tsx
index 1985e18a99..cd96c68bdb 100644
--- a/packages/paste-core/components/button/src/LinkButton.tsx
+++ b/packages/paste-core/components/button/src/LinkButton.tsx
@@ -24,6 +24,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -39,7 +44,7 @@ const LinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>(
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
index ed8a628e65..2e1669aab0 100644
--- a/packages/paste-core/components/button/src/styles.ts
+++ b/packages/paste-core/components/button/src/styles.ts
@@ -44,7 +44,7 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space30",
     paddingLeft: "space40",
     paddingRight: "space40",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
@@ -53,17 +53,17 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space20",
     paddingLeft: "space30",
     paddingRight: "space30",
-    borderRadius: "borderRadius10",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
   icon: {
     padding: "space30",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   icon_small: {
     padding: "space20",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   reset: {
     paddingTop: "space0",

From 31ddc63f098256c8fb8f953fab43751fba58c5ca Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 15:24:19 +0530
Subject: [PATCH 04/32] feat(checkbox): update styles

---
 .../base-radio-checkbox/src/BaseRadioCheckbox.tsx  | 14 +++++++-------
 .../button/src/DestructiveLinkButton.tsx           |  1 -
 .../components/checkbox/src/Checkbox.tsx           |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
index 9a8d0ee4cf..ea6e7ce402 100644
--- a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
+++ b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
@@ -55,8 +55,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           color: "colorTextInverse",
         }}
         _disabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
         }}
         _invalidSibling={{
           borderColor: "colorBorderError",
@@ -65,7 +65,7 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           borderColor: "colorBorderErrorStronger",
         }}
         _invalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
+          borderColor: "colorBorderWeak",
         }}
         _checkedAndHoverSibling={{
           borderColor: "colorBorderPrimaryStronger",
@@ -86,8 +86,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
             : undefined
         }
         _checkedAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         _checkedAndInvalidSibling={{
@@ -100,8 +100,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           backgroundColor: "colorBackgroundErrorStronger",
         }}
         _checkedAndInvalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         {...props}
diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
index 2a0f9cc072..360fa7e45c 100644
--- a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
@@ -35,7 +35,6 @@ const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
     borderRadius: "borderRadius20",
   });
 
-
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
index 69eb55a8c5..e3b6cdad41 100644
--- a/packages/paste-core/components/checkbox/src/Checkbox.tsx
+++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -21,7 +21,7 @@ const selectAllStyleProps = {
   paddingRight: "space30",
   paddingBottom: "space20",
   paddingLeft: "space30",
-  borderRadius: "borderRadius10",
+  borderRadius: "borderRadius20",
   backgroundColor: "colorBackground",
 };
 

From 59fab9070757f609797f185cfec61fbe76a64174 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 15:48:00 +0530
Subject: [PATCH 05/32] feat(label): add optional prop

---
 .../paste-core/components/label/package.json  |  2 ++
 .../paste-core/components/label/src/Label.tsx | 21 +++++++++++++++++--
 .../label/stories/label.stories.tsx           | 19 +++++++++++++++++
 yarn.lock                                     |  2 ++
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/label/package.json b/packages/paste-core/components/label/package.json
index 42f6a478d2..cafcd6a351 100644
--- a/packages/paste-core/components/label/package.json
+++ b/packages/paste-core/components/label/package.json
@@ -35,6 +35,7 @@
     "@twilio-paste/screen-reader-only": "^14.0.0",
     "@twilio-paste/style-props": "^10.0.0",
     "@twilio-paste/styling-library": "^4.0.0",
+    "@twilio-paste/text": "^11.0.1",
     "@twilio-paste/theme": "^12.0.0",
     "@twilio-paste/types": "^7.0.0",
     "@twilio-paste/uid-library": "^3.0.0",
@@ -54,6 +55,7 @@
     "@twilio-paste/screen-reader-only": "^14.0.1",
     "@twilio-paste/style-props": "^10.0.1",
     "@twilio-paste/styling-library": "^4.0.1",
+    "@twilio-paste/text": "^11.0.1",
     "@twilio-paste/theme": "^12.0.1",
     "@twilio-paste/types": "^7.0.1",
     "@twilio-paste/uid-library": "^3.0.1",
diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx
index 08dc46676c..4d3336b318 100644
--- a/packages/paste-core/components/label/src/Label.tsx
+++ b/packages/paste-core/components/label/src/Label.tsx
@@ -2,6 +2,7 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
 import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import type { TextColor } from "@twilio-paste/style-props";
+import { Text } from "@twilio-paste/text";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
@@ -31,6 +32,13 @@ type LabelBaseProps = {
    * @memberof LabelBaseProps
    */
   required?: boolean;
+  /**
+   * Shows the input is optional.
+   *
+   * @type {boolean}
+   * @memberof LabelBaseProps
+   */
+  optional?: boolean;
   /**
    *
    * @type {LabelVariants}
@@ -83,6 +91,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
       as = "label",
       marginBottom,
       required,
+      optional,
       disabled,
       children,
       variant,
@@ -124,7 +133,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
         textTransform="none"
         element={element}
         fontSize="fontSize30"
-        fontWeight="fontWeightSemibold"
+        fontWeight="fontWeightMedium"
         lineHeight="lineHeight30"
         color={textColor}
         cursor={cursor}
@@ -136,7 +145,15 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
               <RequiredDot element={`${element}_REQUIRED_DOT`} i18nLabel={i18nRequiredLabel} />
             </MediaFigure>
           )}
-          <MediaBody>{children}</MediaBody>
+          <MediaBody>
+            {children}
+            {optional && (
+              <Text as="span" fontStyle="italic" color="colorTextWeak" element={`${element}_OPTIONAL_TEXT`}>
+                {" "}
+                (optional)
+              </Text>
+            )}
+          </MediaBody>
         </MediaObject>
       </Box>
     );
diff --git a/packages/paste-core/components/label/stories/label.stories.tsx b/packages/paste-core/components/label/stories/label.stories.tsx
index 3c8d577f8e..e712116883 100644
--- a/packages/paste-core/components/label/stories/label.stories.tsx
+++ b/packages/paste-core/components/label/stories/label.stories.tsx
@@ -22,6 +22,9 @@ export const Default = (): React.ReactNode => {
       <Label htmlFor="label" required>
         Required Label
       </Label>
+      <Label htmlFor="label" optional>
+        Optional Label
+      </Label>
     </>
   );
 };
@@ -35,6 +38,9 @@ export const Disabled = (): React.ReactNode => {
       <Label htmlFor="label" required disabled>
         Required Label
       </Label>
+      <Label htmlFor="label" optional disabled>
+        Optional Label
+      </Label>
     </>
   );
 };
@@ -48,6 +54,9 @@ export const Inverse = (): React.ReactNode => {
       <Label htmlFor="label" required variant="inverse">
         Required Label
       </Label>
+      <Label htmlFor="label" optional variant="inverse">
+        Optional Label
+      </Label>
     </Box>
   );
 };
@@ -78,6 +87,9 @@ export const Customized: Story = () => {
           <Box display="flex" alignContent="start">
             <RequiredDot />
           </Box>
+          <Label optional htmlFor="optional_label" data-testid="label_test">
+            Optional label
+          </Label>
         </Card>
       </Box>
       <Box marginBottom="space70">
@@ -100,6 +112,9 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="required_dot" />
             </Box>
+            <Label optional htmlFor="optional_label" data-testid="label_test">
+              Optional label
+            </Label>
           </CustomizationProvider>
         </Card>
       </Box>
@@ -114,6 +129,7 @@ export const Customized: Story = () => {
               FOO_REQUIRED_DOT: { backgroundColor: "colorBackgroundDestructiveStrong" },
               BAR: { backgroundColor: "colorBackgroundDestructiveStrong" },
               BAR_WRAPPER: { cursor: "help" },
+              TAR_OPTIONAL_TEXT: { fontStyle: "normal", color: "colorTextWarningStrong" },
             }}
           >
             <Label htmlFor="label" element="FOO">
@@ -125,6 +141,9 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="custom_required_dot" element="BAR" />
             </Box>
+            <Label optional htmlFor="optional_label" data-testid="label_test" element="TAR">
+              Optional label
+            </Label>
           </CustomizationProvider>
         </Card>
       </Box>
diff --git a/yarn.lock b/yarn.lock
index c6b43a1128..3600dddeac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13284,6 +13284,7 @@ __metadata:
     "@twilio-paste/screen-reader-only": ^14.0.1
     "@twilio-paste/style-props": ^10.0.1
     "@twilio-paste/styling-library": ^4.0.1
+    "@twilio-paste/text": ^11.0.1
     "@twilio-paste/theme": ^12.0.1
     "@twilio-paste/types": ^7.0.1
     "@twilio-paste/uid-library": ^3.0.1
@@ -13304,6 +13305,7 @@ __metadata:
     "@twilio-paste/screen-reader-only": ^14.0.0
     "@twilio-paste/style-props": ^10.0.0
     "@twilio-paste/styling-library": ^4.0.0
+    "@twilio-paste/text": ^11.0.1
     "@twilio-paste/theme": ^12.0.0
     "@twilio-paste/types": ^7.0.0
     "@twilio-paste/uid-library": ^3.0.0

From 62bbfcba3c5b8d4b734ed124f0c93bb9e0459d56 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 15:57:50 +0530
Subject: [PATCH 06/32] feat(faux-input): update broder radius

---
 .../components/input-box/src/FauxInput/DefaultFauxInput.tsx     | 2 +-
 .../components/input-box/src/FauxInput/InverseFauxInput.tsx     | 2 +-
 packages/paste-core/components/select/src/Select.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
index e859af0bee..0c11c618ec 100644
--- a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
+++ b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
@@ -36,7 +36,7 @@ const DefaultFauxInput = React.forwardRef<HTMLDivElement, React.PropsWithChildre
         width="100%"
         backgroundColor={backgroundColor}
         boxShadow={boxShadow}
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         transition="box-shadow 100ms ease-in"
         cursor={disabled ? "not-allowed" : "text"}
         variant={variant}
diff --git a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
index 17042dbd77..873db8209e 100644
--- a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
+++ b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
@@ -32,7 +32,7 @@ const InverseFauxInput = React.forwardRef<HTMLDivElement, FauxInputProps>(
         width="100%"
         backgroundColor={backgroundColor}
         boxShadow={boxShadow}
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         color="colorTextInverse"
         transition="box-shadow 100ms ease-in"
         cursor={disabled ? "not-allowed" : "text"}
diff --git a/packages/paste-core/components/select/src/Select.tsx b/packages/paste-core/components/select/src/Select.tsx
index 46fc42e505..9962951db4 100644
--- a/packages/paste-core/components/select/src/Select.tsx
+++ b/packages/paste-core/components/select/src/Select.tsx
@@ -91,7 +91,7 @@ export const SelectElement = React.forwardRef<HTMLSelectElement, SelectProps>(
         // must set a solid color to inherit in options for Windows
         backgroundColor={variant === "inverse" ? "colorBackgroundInverse" : "colorBackgroundBody"}
         border="none"
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         boxShadow="none"
         color="inherit"
         cursor="pointer"

From 8fd8090012affa294639a2b6ac8beecd062d3150 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 17:16:05 +0530
Subject: [PATCH 07/32] feat(input-box): update border radius

---
 packages/paste-core/components/input-box/src/Prefix.tsx | 4 ++--
 packages/paste-core/components/input-box/src/Suffix.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx
index dc6cea6e9e..653fbf80aa 100644
--- a/packages/paste-core/components/input-box/src/Prefix.tsx
+++ b/packages/paste-core/components/input-box/src/Prefix.tsx
@@ -33,8 +33,8 @@ const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
       <Box
         alignItems="flex-start"
         backgroundColor={backgroundColor}
-        borderBottomLeftRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        borderBottomLeftRadius="borderRadius30"
+        borderTopLeftRadius="borderRadius30"
         display="flex"
         element={`${element}_PREFIX`}
         lineHeight="lineHeight20"
diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx
index 277bd4e661..07da79eb0a 100644
--- a/packages/paste-core/components/input-box/src/Suffix.tsx
+++ b/packages/paste-core/components/input-box/src/Suffix.tsx
@@ -33,8 +33,8 @@ const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
       <Box
         alignItems="flex-start"
         backgroundColor={backgroundColor}
-        borderBottomRightRadius="borderRadius20"
-        borderTopRightRadius="borderRadius20"
+        borderBottomRightRadius="borderRadius30"
+        borderTopRightRadius="borderRadius30"
         display="flex"
         element={`${element}_SUFFIX`}
         lineHeight="lineHeight20"

From 498e67447a4321b9f359cee2ba42ed5f34ce0396 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 17:18:33 +0530
Subject: [PATCH 08/32] feat(file-picker): update border radius

---
 packages/paste-core/components/file-picker/src/FilePicker.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx
index 09edb2818d..052c6b6f3e 100644
--- a/packages/paste-core/components/file-picker/src/FilePicker.tsx
+++ b/packages/paste-core/components/file-picker/src/FilePicker.tsx
@@ -127,12 +127,12 @@ const FilePicker = React.forwardRef<HTMLInputElement, FilePickerProps>(
             justifyContent="start"
             as="span"
             type="file"
-            borderRadius="borderRadius30"
+            borderRadius="borderRadius40"
             padding="space20"
             boxShadow="shadowBorder"
             backgroundColor="colorBackgroundBody"
             _focusSibling={{
-              borderRadius: "borderRadius30",
+              borderRadius: "borderRadius40",
               padding: "space20",
               boxShadow: "shadowFocus",
               backgroundColor: "colorBackgroundBody",

From 7a579b0c2d13402635d631675ac42cad17dace93 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 17:23:27 +0530
Subject: [PATCH 09/32] feat(file-uploader): update background color

---
 .../components/file-uploader/src/FileUploaderDropzone.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
index 8aa61e14bb..42d9e6ad84 100644
--- a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
+++ b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
@@ -87,7 +87,7 @@ const baseStyles: BoxStyleProps = {
 };
 
 const disabledStyles: BoxStyleProps = {
-  backgroundColor: "colorBackgroundStrong",
+  backgroundColor: "colorBackground",
   borderStyle: "solid",
   borderColor: "colorBorderWeaker",
   cursor: "not-allowed",

From e4ef93d69ba85ad482c4b416f2a72e13fbae91b0 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 17:30:43 +0530
Subject: [PATCH 10/32] feat(tokens): add new tokens

---
 packages/paste-design-tokens/tokens/aliases/color-palette.yml  | 2 +-
 .../paste-design-tokens/tokens/global/background-color.yml     | 3 +++
 .../tokens/themes/dark/global/background-color.yml             | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index 60185325db..3942b37f29 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -41,7 +41,7 @@ aliases:
   palette-gray-80: "#394762"
   palette-gray-85: "#25395b"
   palette-gray-90: "#1f304c"
-  palette-gray-95: "#19273E"
+  palette-gray-95: "#18253C"
   palette-gray-100: "#121c2d"
   palette-gray-110: "#0F1621"
 
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 8aaadc357c..23aa431da3 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -221,6 +221,9 @@ props:
   color-background-body-elevation:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-body elements.
+  color-background-body-elevation-primary:
+    value: "{!palette-blue-50}"
+    comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-weak elements.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index 9f8b1a05ed..ca9b04d658 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -201,6 +201,9 @@ props:
   color-background-body-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background-body elements.
+  color-background-body-elevation-primary:
+    value: "{!palette-gray-95}"
+    comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-weak elements.

From 51fb20d7202f31e8c7e41070639d3be0469c10bd Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 10 Apr 2025 17:43:55 +0530
Subject: [PATCH 11/32] feat(visual-picker): update disabled state bg

---
 packages/paste-core/components/textarea/src/TextArea.tsx        | 2 +-
 .../components/visual-picker/src/VisualPickerCheckbox.tsx       | 2 +-
 .../components/visual-picker/src/VisualPickerRadio.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-core/components/textarea/src/TextArea.tsx b/packages/paste-core/components/textarea/src/TextArea.tsx
index 9aedf968f9..16005c24ce 100644
--- a/packages/paste-core/components/textarea/src/TextArea.tsx
+++ b/packages/paste-core/components/textarea/src/TextArea.tsx
@@ -142,7 +142,7 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
       appearance: "none",
       background: "transparent",
       border: "none",
-      borderRadius: "borderRadius20",
+      borderRadius: "borderRadius30",
       boxShadow: "none",
       color: "inherit",
       display: "block",
diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
index 05e4a4d1d8..e01617a84b 100644
--- a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
+++ b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
@@ -75,7 +75,7 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
+        backgroundColor={disabled || groupIsDisabled ? "colorBackground" : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
         borderWidth="borderWidth10"
diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
index 907984ed35..9a3c9f940a 100644
--- a/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
+++ b/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
@@ -91,7 +91,7 @@ export const VisualPickerRadio = React.forwardRef<HTMLInputElement, VisualPicker
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
+        backgroundColor={disabled || groupIsDisabled ? "colorBackground" : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
         borderWidth="borderWidth10"

From b41d4ec6ad8e73604253f144226d22e8556fb81f Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Fri, 11 Apr 2025 17:07:37 +0530
Subject: [PATCH 12/32] feat(menu): update styles

---
 .../components/menu/src/MenuItem.styles.tsx   | 29 ++++++++++++-------
 .../tokens/global/background-color.yml        |  2 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
index 9785dfe745..0c864b22e1 100644
--- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx
+++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
@@ -12,24 +12,24 @@ const baseVariantStyles: MenuItemVariantStyles = {
     color: "colorText",
     _hover: {
       color: "colorTextPrimary",
-      backgroundColor: "colorBackgroundPrimaryWeakest",
-      borderColor: "colorBorderPrimary",
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
     },
     _focus: {
       color: "colorTextPrimary",
-      backgroundColor: "colorBackgroundPrimaryWeakest",
-      borderColor: "colorBorderPrimary",
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
+    },
+    _checked: {
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
+      color: "colorText",
     },
   },
   [MenuItemVariants.DESTRUCTIVE]: {
     color: "colorTextDestructive",
     _hover: {
       backgroundColor: "colorBackgroundDestructiveWeakest",
-      borderColor: "colorBorderDestructive",
     },
     _focus: {
       backgroundColor: "colorBackgroundDestructiveWeakest",
-      borderColor: "colorBorderDestructive",
     },
   },
 };
@@ -90,16 +90,23 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         fontSize="fontSize30"
         fontWeight="fontWeightNormal"
         lineHeight="lineHeight30"
-        margin="space0"
         outline="none"
         paddingY="space30"
-        borderLeftStyle="solid"
-        borderLeftWidth="borderWidth20"
-        borderColor="transparent"
+        borderRadius="borderRadius30"
+        margin="space10"
         cursor="pointer"
         paddingX="space70"
-        width="100%"
+        width="fill-available"
         {...variantStyles[variant]}
+        _checked_hover={
+          {
+            backgroundColor: "colorBackgroundWeak",
+            color: variant === MenuItemVariants.DESTRUCTIVE ? "colorTextDestructive" : "colorTextPrimary",
+            "& [data-paste-element='ICON']": {
+              color: "colorTextIcon",
+            },
+          } as BoxProps["_checked_hover"]
+        }
         _disabled={{
           color: "colorTextWeaker",
           cursor: "not-allowed",
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 23aa431da3..f1a6932b8c 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -222,7 +222,7 @@ props:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-body elements.
   color-background-body-elevation-primary:
-    value: "{!palette-blue-50}"
+    value: "{!palette-blue-05}"
     comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
     value: "{!palette-gray-05}"

From cb546bcfede623a841443efe00db71b6431914e9 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Fri, 11 Apr 2025 17:07:43 +0530
Subject: [PATCH 13/32] feat(combobox): update styles

---
 .../src/styles/ComboboxListboxOption.tsx      | 75 +++++++++----------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index 4995a412a7..651f7c8308 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -1,7 +1,7 @@
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import { SelectedIcon } from "@twilio-paste/icons/esm/SelectedIcon";
-import type { PositionOptions } from "@twilio-paste/style-props";
+import type { BackgroundColor, PositionOptions } from "@twilio-paste/style-props";
 import { Text } from "@twilio-paste/text";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
@@ -66,10 +66,20 @@ const getVirtualStyles = (startHeight: number): Record<string, unknown> => ({
   position: "absolute" as PositionOptions,
   top: 0,
   left: 0,
-  width: "100%",
+  width: "fill-available",
   transform: `translateY(${startHeight}px)`,
 });
 
+function getBackgroundColor(highlightedProp?: boolean, selectedProp?: boolean): BackgroundColor {
+  if (highlightedProp && selectedProp) {
+    return "colorBackgroundWeak";
+  }
+  if (highlightedProp || selectedProp) {
+    return "colorBackgroundBodyElevationPrimary";
+  }
+  return "colorBackgroundWeaker";
+}
+
 const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOptionProps>(
   (
     {
@@ -99,49 +109,34 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
         as="li"
         position="relative"
         element={`${element}_LIST_ITEM`}
-        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundWeaker"}
-        color={
-          highlighted
-            ? "colorTextPrimary"
-            : // eslint-disable-next-line unicorn/no-nested-ternary
-            selected
-            ? "colorTextPrimary"
-            : "colorText"
-        }
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        paddingY="space40"
+        color={highlighted ? "colorTextPrimary" : "colorText"}
         cursor={disabled ? "not-allowed" : "pointer"}
         ref={ref}
-        transition="background-color 150ms ease, color 150ms ease"
-        borderBottomWidth="borderWidth10"
-        borderBottomColor="colorBorderWeaker"
-        borderBottomStyle="solid"
         opacity={disabled ? 0.3 : 1}
-        _before={{
-          content: `""`,
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          left: 0,
-          borderLeftWidth: "borderWidth20",
-          borderLeftColor: highlighted ? "colorBorderPrimary" : "transparent",
-          borderLeftStyle: "solid",
-        }}
-        _last={{
-          borderBottomColor: "transparent",
-        }}
         {...virtualItemStyles}
-        {...VariantStyles[variant]}
       >
-        <Box as="span">
-          <Text as="span" color="inherit" element={`${element}_LIST_ITEM_TEXT`}>
-            {children}
-          </Text>
-        </Box>
-        <Box as="span" hidden={!selected}>
-          <SelectedIcon decorative color="inherit" />
+        {/* extra box to add proper margin since li is based on absolute positioning */}
+        <Box
+          as="span"
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          margin="space10"
+          borderRadius="borderRadius30"
+          backgroundColor={getBackgroundColor(highlighted, selected)}
+          paddingY="space40"
+          transition="background-color 150ms ease, color 150ms ease"
+          {...VariantStyles[variant]}
+        >
+          <Box as="span">
+            <Text as="span" color="inherit" element={`${element}_LIST_ITEM_TEXT`}>
+              {children}
+            </Text>
+          </Box>
+
+          <Box as="span" hidden={!selected}>
+            <SelectedIcon decorative color={highlighted && selected ? "colorTextIcon" : "colorTextPrimary"} />
+          </Box>
         </Box>
       </Box>
     );

From ab517d07ef4c784df125d71b6dea2ec3bb0f7a62 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 16 Apr 2025 21:16:14 +0530
Subject: [PATCH 14/32] feat(prefix): update color for disabled examples

---
 .../components/combobox/stories/Combobox.stories.tsx          | 4 ++--
 .../paste-core/components/input/stories/input.stories.tsx     | 4 ++--
 .../paste-core/components/select/stories/select.stories.tsx   | 4 ++--
 .../components/textarea/stories/textarea.stories.tsx          | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
index 7338ec5e78..c879caef71 100644
--- a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -435,7 +435,7 @@ export const ComboboxDisabledInsertBeforeAndAfter: StoryFn = () => {
     <Combobox
       items={items}
       insertBefore={
-        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }
@@ -484,7 +484,7 @@ export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
       <Combobox
         items={items}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx
index cbe1bcbe89..53f2355eee 100644
--- a/packages/paste-core/components/input/stories/input.stories.tsx
+++ b/packages/paste-core/components/input/stories/input.stories.tsx
@@ -504,7 +504,7 @@ export const InputDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -587,7 +587,7 @@ export const InputDisabledInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onBlur={action("handleBlur")}
         variant="inverse"
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/select/stories/select.stories.tsx b/packages/paste-core/components/select/stories/select.stories.tsx
index 57fe29ef98..3737bcb78e 100644
--- a/packages/paste-core/components/select/stories/select.stories.tsx
+++ b/packages/paste-core/components/select/stories/select.stories.tsx
@@ -348,7 +348,7 @@ export const SelectDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -430,7 +430,7 @@ export const SelectDisabedInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
index b6129f6e4e..303b83ab74 100644
--- a/packages/paste-core/components/textarea/stories/textarea.stories.tsx
+++ b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -410,7 +410,7 @@ export const TextareaDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -478,7 +478,7 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }

From 5a68c6950283d1c568eb8ab49da4966ea879f6f2 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 16 Apr 2025 21:46:11 +0530
Subject: [PATCH 15/32] feat(core): add changesets

---
 .changeset/curly-jeans-talk.md   | 17 +++++++++++++++++
 .changeset/lazy-icons-prove.md   |  6 ++++++
 .changeset/selfish-birds-pump.md |  6 ++++++
 3 files changed, 29 insertions(+)
 create mode 100644 .changeset/curly-jeans-talk.md
 create mode 100644 .changeset/lazy-icons-prove.md
 create mode 100644 .changeset/selfish-birds-pump.md

diff --git a/.changeset/curly-jeans-talk.md b/.changeset/curly-jeans-talk.md
new file mode 100644
index 0000000000..573af45dda
--- /dev/null
+++ b/.changeset/curly-jeans-talk.md
@@ -0,0 +1,17 @@
+---
+"@twilio-paste/base-radio-checkbox": patch
+"@twilio-paste/button": patch
+"@twilio-paste/checkbox": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/file-picker": patch
+"@twilio-paste/file-uploader": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/select": patch
+"@twilio-paste/textarea": patch
+"@twilio-paste/visual-picker": patch
+"@twilio-paste/core": patch
+---
+
+[Base Radio Checkbox, Button, Combobox, File Picker, File Uploader, Input, Input Box, Menu, Select, Textarea, Visual Picker] Update styles of form related components
diff --git a/.changeset/lazy-icons-prove.md b/.changeset/lazy-icons-prove.md
new file mode 100644
index 0000000000..468c58f9f8
--- /dev/null
+++ b/.changeset/lazy-icons-prove.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
+---
+
+[Design Tokens] Update pallete and new elevation token
diff --git a/.changeset/selfish-birds-pump.md b/.changeset/selfish-birds-pump.md
new file mode 100644
index 0000000000..01791e4083
--- /dev/null
+++ b/.changeset/selfish-birds-pump.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/label": minor
+"@twilio-paste/core": minor
+---
+
+[Label] Update font weight and expose new prop for optional variant

From 0262ab6587fdb6cfd7c0c5d6157418af755e3780 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 16 Apr 2025 21:48:46 +0530
Subject: [PATCH 16/32] feat(type): update type docs

---
 packages/paste-core/components/label/type-docs.json       | 7 +++++++
 packages/paste-core/primitives/box/type-docs.json         | 2 +-
 packages/paste-core/primitives/sibling-box/type-docs.json | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/label/type-docs.json b/packages/paste-core/components/label/type-docs.json
index 7ef413585f..6d95a90370 100644
--- a/packages/paste-core/components/label/type-docs.json
+++ b/packages/paste-core/components/label/type-docs.json
@@ -1601,6 +1601,13 @@
       "required": false,
       "externalProp": true
     },
+    "optional": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Shows the input is optional."
+    },
     "popover": {
       "type": "\"\" | \"auto\" | \"manual\"",
       "defaultValue": null,
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 2f0dc2313e..270be1becf 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -767,7 +767,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 667e1aa1d8..791c96521e 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -869,7 +869,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

From 4d4b445ff39bc02d7381c380a73a228de8a33933 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 16 Apr 2025 21:58:00 +0530
Subject: [PATCH 17/32] feat(core): fix tests

---
 .../label/stories/label.stories.tsx           |  6 +-
 .../__snapshots__/index.test.tsx.snap         | 61 ++++++++++---------
 .../__snapshots__/index.spec.tsx.snap         |  4 +-
 .../src/__tests__/colorGradient.test.tsx      |  4 +-
 4 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/paste-core/components/label/stories/label.stories.tsx b/packages/paste-core/components/label/stories/label.stories.tsx
index e712116883..9f3ac06b32 100644
--- a/packages/paste-core/components/label/stories/label.stories.tsx
+++ b/packages/paste-core/components/label/stories/label.stories.tsx
@@ -87,7 +87,7 @@ export const Customized: Story = () => {
           <Box display="flex" alignContent="start">
             <RequiredDot />
           </Box>
-          <Label optional htmlFor="optional_label" data-testid="label_test">
+          <Label optional htmlFor="optional_label">
             Optional label
           </Label>
         </Card>
@@ -112,7 +112,7 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="required_dot" />
             </Box>
-            <Label optional htmlFor="optional_label" data-testid="label_test">
+            <Label optional htmlFor="optional_label">
               Optional label
             </Label>
           </CustomizationProvider>
@@ -141,7 +141,7 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="custom_required_dot" element="BAR" />
             </Box>
-            <Label optional htmlFor="optional_label" data-testid="label_test" element="TAR">
+            <Label optional htmlFor="optional_label" element="TAR">
               Optional label
             </Label>
           </CustomizationProvider>
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 6a1c825964..8cff4298f1 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,9 +11,9 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
@@ -68,6 +68,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -156,7 +157,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #18253C, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -177,7 +178,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -282,7 +283,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -512,7 +513,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -553,6 +554,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -590,7 +592,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -688,7 +690,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -777,7 +779,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -951,7 +953,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -997,7 +999,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -1038,6 +1040,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1075,7 +1078,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -1173,7 +1176,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -1262,7 +1265,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1436,7 +1439,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1466,13 +1469,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1523,6 +1526,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1611,7 +1615,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #18253C, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -1632,7 +1636,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -1737,7 +1741,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1957,7 +1961,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\",
@@ -1967,7 +1971,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -2008,6 +2012,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -2045,7 +2050,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -2121,7 +2126,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
-  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8e96ae\\",
+  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8B93AA\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
@@ -2143,7 +2148,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
@@ -2222,7 +2227,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -2406,7 +2411,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(195, 83, 35)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
index 1e7b20ed73..380cc81413 100644
--- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
@@ -22,7 +22,7 @@ Object {
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(142, 150, 174)",
+      "color": "rgb(139, 147, 170)",
     },
   },
   "labels": Object {
@@ -188,7 +188,7 @@ Object {
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(142, 150, 174)",
+      "color": "rgb(139, 147, 170)",
     },
   },
   "labels": Object {
diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx
index 033d0e6c6d..4d2a8bc3ea 100644
--- a/packages/paste-website/src/__tests__/colorGradient.test.tsx
+++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx
@@ -4,7 +4,7 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20",
 const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"];
 const aliasValues = [
   "#121c2d",
-  "#19273E",
+  "#18253C",
   "#1f304c",
   "#25395b",
   "#394762",
@@ -13,7 +13,7 @@ const aliasValues = [
   "#606b85",
   "#67728e",
   "#8891aa",
-  "#8e96ae",
+  "#8B93AA",
   "#cacdd8",
   "#e1e3ea",
   "#edeef2",

From b789f55f9d609fcad2a218a83cac3a6df2bca609 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 16 Apr 2025 22:00:16 +0530
Subject: [PATCH 18/32] feat(core): fix typo

---
 .changeset/lazy-icons-prove.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/lazy-icons-prove.md b/.changeset/lazy-icons-prove.md
index 468c58f9f8..dd46fd73ae 100644
--- a/.changeset/lazy-icons-prove.md
+++ b/.changeset/lazy-icons-prove.md
@@ -3,4 +3,4 @@
 "@twilio-paste/core": patch
 ---
 
-[Design Tokens] Update pallete and new elevation token
+[Design Tokens] Update palette and new elevation token

From 6cdd66ce441ea1d592e83c06d94fe6fe0f901806 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 23 Apr 2025 19:50:05 +0530
Subject: [PATCH 19/32] feat(prefix): update color for disabled examples

---
 .../components/combobox/stories/Combobox.stories.tsx          | 4 ++--
 .../paste-core/components/input/stories/input.stories.tsx     | 4 ++--
 .../paste-core/components/select/stories/select.stories.tsx   | 4 ++--
 .../components/textarea/stories/textarea.stories.tsx          | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
index c879caef71..c89637c891 100644
--- a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -435,7 +435,7 @@ export const ComboboxDisabledInsertBeforeAndAfter: StoryFn = () => {
     <Combobox
       items={items}
       insertBefore={
-        <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }
@@ -484,7 +484,7 @@ export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
       <Combobox
         items={items}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx
index 53f2355eee..db04a4ea22 100644
--- a/packages/paste-core/components/input/stories/input.stories.tsx
+++ b/packages/paste-core/components/input/stories/input.stories.tsx
@@ -504,7 +504,7 @@ export const InputDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -587,7 +587,7 @@ export const InputDisabledInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onBlur={action("handleBlur")}
         variant="inverse"
         insertBefore={
-          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/select/stories/select.stories.tsx b/packages/paste-core/components/select/stories/select.stories.tsx
index 3737bcb78e..cebf1d5c48 100644
--- a/packages/paste-core/components/select/stories/select.stories.tsx
+++ b/packages/paste-core/components/select/stories/select.stories.tsx
@@ -348,7 +348,7 @@ export const SelectDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -430,7 +430,7 @@ export const SelectDisabedInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
index 303b83ab74..fab21edb77 100644
--- a/packages/paste-core/components/textarea/stories/textarea.stories.tsx
+++ b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -410,7 +410,7 @@ export const TextareaDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text color="colorTextWeaker" as="span" fontWeight="fontWeightSemibold">
+          <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -478,7 +478,7 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeakest" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }

From 68a08db747f491886f3dbbc25fdcf6a6f65929a6 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 23 Apr 2025 20:45:57 +0530
Subject: [PATCH 20/32] fix(label): contrast issue

---
 packages/paste-core/components/label/src/Label.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx
index 4d3336b318..465ff5da91 100644
--- a/packages/paste-core/components/label/src/Label.tsx
+++ b/packages/paste-core/components/label/src/Label.tsx
@@ -148,7 +148,12 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
           <MediaBody>
             {children}
             {optional && (
-              <Text as="span" fontStyle="italic" color="colorTextWeak" element={`${element}_OPTIONAL_TEXT`}>
+              <Text
+                as="span"
+                fontStyle="italic"
+                color={variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeak"}
+                element={`${element}_OPTIONAL_TEXT`}
+              >
                 {" "}
                 (optional)
               </Text>

From 29cab8dc12e419a1bb6ac3142ab335cf43721a2a Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 24 Apr 2025 17:16:48 +0530
Subject: [PATCH 21/32] feat(label): update docs

---
 .../src/pages/components/label/index.mdx             | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/paste-website/src/pages/components/label/index.mdx b/packages/paste-website/src/pages/components/label/index.mdx
index 39b0698fdf..863c8c0839 100644
--- a/packages/paste-website/src/pages/components/label/index.mdx
+++ b/packages/paste-website/src/pages/components/label/index.mdx
@@ -167,6 +167,18 @@ Use required indicators to show users which fields they must fill out.
 </>`}
 </LivePreview>
 
+### Optional Label
+
+Use `optional` prop to show users which fields are optional to fill out.
+
+<LivePreview scope={{Input, Label, HelpText}} language="jsx">
+  {`<>
+  <Label htmlFor="email_address_1" optional>Email address</Label>
+  <Input aria-describedby="email_help_text" id="email_address_1" name="email_address_1" type="email" placeholder="example@twilio.com" onChange={() => {}}/>
+  <HelpText id="email_help_text">Use your work email address.</HelpText>
+</>`}
+</LivePreview>
+
 ### Disabled Label
 
 Use the disabled prop if a the label is associated with a disabled form field to show users that they can't interact with the field.

From 4b5cdfccf615ebdbdf469f4ec323b4acb09961d4 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Fri, 25 Apr 2025 15:06:52 +0530
Subject: [PATCH 22/32] fix(label): fix require dot causing scrolling issues

---
 .changeset/selfish-birds-pump.md                         | 2 +-
 packages/paste-core/components/label/src/RequiredDot.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/selfish-birds-pump.md b/.changeset/selfish-birds-pump.md
index 01791e4083..7b7a2da3ee 100644
--- a/.changeset/selfish-birds-pump.md
+++ b/.changeset/selfish-birds-pump.md
@@ -3,4 +3,4 @@
 "@twilio-paste/core": minor
 ---
 
-[Label] Update font weight and expose new prop for optional variant
+[Label] Update font weight, expose new prop for optional variant and fix require dot causing scrolling issue
diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx
index acb467e725..0b3b8f3793 100644
--- a/packages/paste-core/components/label/src/RequiredDot.tsx
+++ b/packages/paste-core/components/label/src/RequiredDot.tsx
@@ -40,6 +40,7 @@ export const RequiredDot: React.FC<React.PropsWithChildren<RequiredDotProps>> =
         display="block"
         height="4px"
         width="4px"
+        position="relative"
         element={element}
       >
         <ScreenReaderOnly>{i18nLabel}</ScreenReaderOnly>

From 75d23bd8e2bd9a60fbdccad5e87bed4a2bc23e9a Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 28 Apr 2025 16:25:48 +0530
Subject: [PATCH 23/32] feat(label): add i18nOptionalLabel prop

---
 packages/paste-core/components/label/src/Label.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx
index 465ff5da91..42299005af 100644
--- a/packages/paste-core/components/label/src/Label.tsx
+++ b/packages/paste-core/components/label/src/Label.tsx
@@ -52,6 +52,13 @@ type LabelBaseProps = {
    * @memberof LabelBaseProps
    */
   i18nRequiredLabel?: string;
+  /**
+   * Label text for the optional label.
+   *
+   * @type {string}
+   * @memberof LabelBaseProps
+   */
+  i18nOptionalLabel?: string;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
    *
@@ -97,6 +104,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
       variant,
       element = "LABEL",
       i18nRequiredLabel = "",
+      i18nOptionalLabel = "(optional)",
       ...props
     },
     ref,
@@ -153,9 +161,9 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
                 fontStyle="italic"
                 color={variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeak"}
                 element={`${element}_OPTIONAL_TEXT`}
+                marginLeft="space20"
               >
-                {" "}
-                (optional)
+                {i18nOptionalLabel}
               </Text>
             )}
           </MediaBody>

From 0ec57d8fdea585f6685145356c4b7a6238cb3ccb Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 28 Apr 2025 23:06:08 +0530
Subject: [PATCH 24/32] feat(label): update typedocs

---
 packages/paste-core/components/label/type-docs.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/paste-core/components/label/type-docs.json b/packages/paste-core/components/label/type-docs.json
index 6d95a90370..9db72a36e8 100644
--- a/packages/paste-core/components/label/type-docs.json
+++ b/packages/paste-core/components/label/type-docs.json
@@ -499,6 +499,13 @@
       "externalProp": true,
       "description": "You must specify the 'htmlFor' prop to associate the label with an input.\n\n\nYou cannot apply htmlFor to a legend element.\n\n\nYou cannot apply htmlFor to a div element."
     },
+    "i18nOptionalLabel": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Label text for the optional label."
+    },
     "i18nRequiredLabel": {
       "type": "string",
       "defaultValue": null,

From 1bf4f417b385e3f1a84023c0deeb42c9632446b3 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 30 Apr 2025 15:16:10 +0530
Subject: [PATCH 25/32] feat(core): update combobox and menu item

---
 .../components/combobox/src/styles/ComboboxListboxOption.tsx   | 3 ++-
 packages/paste-core/components/menu/src/MenuItem.styles.tsx    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index 651f7c8308..67f9fa7b3e 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -121,7 +121,8 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
           display="flex"
           justifyContent="space-between"
           alignItems="center"
-          margin="space10"
+          marginY="space10"
+          marginX="space20"
           borderRadius="borderRadius30"
           backgroundColor={getBackgroundColor(highlighted, selected)}
           paddingY="space40"
diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
index 0c864b22e1..cb5fba3843 100644
--- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx
+++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
@@ -93,7 +93,8 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         outline="none"
         paddingY="space30"
         borderRadius="borderRadius30"
-        margin="space10"
+        marginY="space10"
+        marginX="space20"
         cursor="pointer"
         paddingX="space70"
         width="fill-available"

From 99e8bf9b5de0b0b0150ded573e92483816dc5ae5 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 30 Apr 2025 20:02:41 +0530
Subject: [PATCH 26/32] feat(tokens): update tokens

---
 .../__tests__/__snapshots__/index.test.tsx.snap           | 8 ++++----
 .../tokens/themes/dark/global/background-color.yml        | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 8cff4298f1..30a2b7e65f 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
@@ -50,7 +50,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-destructive-strong\\": \\"rgb(246, 177, 177)\\",
   \\"color-background-destructive-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
@@ -1479,7 +1479,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
@@ -1508,7 +1508,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-destructive-strong\\": \\"rgb(246, 177, 177)\\",
   \\"color-background-destructive-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index ca9b04d658..a76c7e661c 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -7,7 +7,7 @@ imports:
 props:
   # base background
   color-background:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-95}"
     comment: Default background color for any container.
   color-background-strong:
     value: "{!palette-gray-90}"
@@ -28,7 +28,7 @@ props:
     value: "{!palette-gray-80}"
     comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-weak:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-95}"
     comment: Weak default background color.
   color-background-weaker:
     value: "{!palette-gray-100}"

From 8a7fb93f04713a31d65e33d3151521714dd9c791 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 30 Apr 2025 20:52:24 +0530
Subject: [PATCH 27/32] feat(tokens): update dark tokens

---
 .../tokens/themes/dark/global/background-color.yml          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index a76c7e661c..ed52cd2405 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -205,11 +205,11 @@ props:
     value: "{!palette-gray-95}"
     comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-90}"
     comment: Elevation token for color-background-weak elements.
   color-background-elevation:
-    value: "{!palette-gray-95}"
+    value: "{!palette-gray-90}"
     comment: Elevation token for color-background elements.
   color-background-strong-elevation:
-    value: "{!palette-gray-90}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-strong elements.

From 1d28c0cf2e36d0ed5f67e854e9dbca553712b6e1 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 30 Apr 2025 20:54:16 +0530
Subject: [PATCH 28/32] feat(tokens): remove tokens from twilio dark which are
 imported from dark

---
 .../themes/twilio-dark/global/background-color.yml   | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 0cc18d0203..f8e54a5267 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -65,18 +65,6 @@ props:
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
 
   #elevation background
-  color-background-body-elevation:
-    value: "{!palette-gray-95}"
-    comment: Elevation token for color-background-body elements.
-  color-background-weak-elevation:
-    value: "{!palette-gray-100}"
-    comment: Elevation token for color-background-weak elements.
-  color-background-elevation:
-    value: "{!palette-gray-95}"
-    comment: Elevation token for color-background elements.
-  color-background-strong-elevation:
-    value: "{!palette-gray-90}"
-    comment: Elevation token for color-background-strong elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.

From 61bd22cb579b4bda5a390e7b60894aa3776583c4 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 30 Apr 2025 20:54:38 +0530
Subject: [PATCH 29/32] feat(tokens): update snapshot

---
 .../__tests__/__snapshots__/index.test.tsx.snap      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 30a2b7e65f..299a428150 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
   \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(24, 37, 60)\\",
+  \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
@@ -67,10 +67,10 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1471,7 +1471,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
   \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(24, 37, 60)\\",
+  \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
@@ -1525,10 +1525,10 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",

From f45dd3e70f4d27ec245bb246d0489574e2affd68 Mon Sep 17 00:00:00 2001
From: Sarah <li.sarah.y@gmail.com>
Date: Wed, 7 May 2025 09:54:35 -0700
Subject: [PATCH 30/32] fix: update tokens in dark and default theme for
 contrast

---
 .../paste-design-tokens/tokens/aliases/color-palette.yml    | 4 ++--
 .../paste-design-tokens/tokens/global/background-color.yml  | 4 ++--
 .../tokens/themes/dark/aliases/color-palette.yml            | 6 +++---
 .../tokens/themes/dark/global/border-color.yml              | 2 +-
 .../tokens/themes/dark/global/box-shadow.yml                | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index 3942b37f29..8eb3e98b3d 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -122,8 +122,8 @@ aliases:
   palette-red-20: "#fccfcf"
   palette-red-30: "#f6b1b1"
   palette-red-40: "#f58a8a"
-  palette-red-50: "#eb5656"
-  palette-red-60: "#d61f1f"
+  palette-red-50: "#EC5B5B"
+  palette-red-60: "#DB132A"
   palette-red-65: "#c72323"
   palette-red-70: "#ad1111"
   palette-red-80: "#750c0c"
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index f1a6932b8c..90eff91951 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -116,7 +116,7 @@ props:
     value: "{!palette-red-60}"
     comment: Background color used for error alerts and toasts.
   color-background-error-weakest:
-    value: "{!palette-red-10}"
+    value: "{!palette-red-05}"
     comment: Weakest background color used for error alerts and toasts.
   color-background-required:
     value: "{!palette-red-50}"
@@ -176,7 +176,7 @@ props:
     value: "{!palette-red-20}"
     comment: Weaker background color used for destructive actions or highlights.
   color-background-destructive-weakest:
-    value: "{!palette-red-10}"
+    value: "{!palette-red-05}"
     comment: Weakest background color used for destructive actions or highlights.
 
   # overlay backgrounds
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
index f062895d37..d6efc3d79b 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
@@ -42,7 +42,7 @@ aliases:
   palette-gray-10: "#f4f4f6"
   palette-gray-20: "#e1e3ea"
   palette-gray-30: "#cacdd8"
-  palette-gray-40: "#aeb2c1"
+  palette-gray-40: "#8B93AA"
   palette-gray-50: "#8891aa"
   palette-gray-60: "#606b85"
   palette-gray-70: "#4b5671"
@@ -140,8 +140,8 @@ aliases:
   palette-red-20: "#fccfcf"
   palette-red-30: "#f6b1b1"
   palette-red-40: "#f58a8a"
-  palette-red-50: "#eb5656"
-  palette-red-60: "#d61f1f"
+  palette-red-50: "#EC5B5B"
+  palette-red-60: "#DB132A"
   palette-red-70: "#ad1111"
   palette-red-80: "#750c0c"
   palette-red-90: "#4a0b0b"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
index d46ed7a693..c0ea039506 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
@@ -31,7 +31,7 @@ props:
     value: "{!palette-blue-30}"
     comment: Strong primary border color
   color-border-primary:
-    value: "{!palette-blue-60}"
+    value: "{!palette-blue-55}"
     comment: Primary border color
   color-border-primary-weak:
     value: "{!palette-gray-80}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index 08b317da40..2e4aa7da6a 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -48,7 +48,7 @@ props:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}"
     comment: "Weaker shadow border for primary interactions."
   shadow-border-primary:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-60}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-55}"
     comment: "Default shadow border for primary interactions."
   shadow-border-primary-strong:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-30}"

From 6c946acc167a32760487e3f4a3b7011df0ab5039 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 8 May 2025 19:07:46 +0530
Subject: [PATCH 31/32] fix(form): fix tests

---
 .../__tests__/AccountSwitcher.spec.tsx        |   4 +-
 .../__tests__/customization.spec.tsx          |   2 +-
 .../alert-dialog/__tests__/index.spec.tsx     |   2 +-
 .../components/card/__test__/card.test.tsx    |   4 +-
 .../components/input/__tests__/input.test.tsx |   4 +-
 .../textarea/__tests__/textarea.test.tsx      |  14 +-
 .../__snapshots__/index.test.tsx.snap         | 178 +++++++++---------
 .../__snapshots__/index.spec.tsx.snap         |   4 +-
 8 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
index 1a713117f3..85313e1663 100644
--- a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
+++ b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
@@ -42,7 +42,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
@@ -59,7 +59,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
diff --git a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
index ea368ae21a..5ee38c3087 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
@@ -83,7 +83,7 @@ describe("Alert Dialog customization", () => {
   });
   it("should apply styles to Alert Dialog with custom element prop", () => {
     const { container } = render(<CustomizedDestructiveAlertDialog />);
-    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
     expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule("border", "inherit");
     expect(screen.getByText("Alert Dialog")).toHaveStyleRule("background-color", "rgb(235, 244, 255)");
     expect(
diff --git a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
index 2c707229b7..a7cecbd93c 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
@@ -30,7 +30,7 @@ describe("Alert Dialog", () => {
   it("Should have a destructive button style when the destructive prop is included", () => {
     render(<DestructiveAlertDialog />, { wrapper: ThemeWrapper });
     const button = screen.getByRole("button", { name: "Delete" });
-    expect(button).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(button).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("Should have a disabled destructive button style when the onConfirmDisabled prop is included", () => {
diff --git a/packages/paste-core/components/card/__test__/card.test.tsx b/packages/paste-core/components/card/__test__/card.test.tsx
index 8f1ae4bf83..ee9176e182 100644
--- a/packages/paste-core/components/card/__test__/card.test.tsx
+++ b/packages/paste-core/components/card/__test__/card.test.tsx
@@ -78,7 +78,7 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to Card with a custom element data attribute", (): void => {
@@ -94,6 +94,6 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 });
diff --git a/packages/paste-core/components/input/__tests__/input.test.tsx b/packages/paste-core/components/input/__tests__/input.test.tsx
index 5dcd8a8952..08661aff79 100644
--- a/packages/paste-core/components/input/__tests__/input.test.tsx
+++ b/packages/paste-core/components/input/__tests__/input.test.tsx
@@ -346,7 +346,7 @@ describe("Customization", () => {
     expect(renderedInputPrefix).toHaveStyleRule("background-color", "rgb(0, 20, 137)");
     expect(renderedInputSuffix).toHaveStyleRule("background-color", "rgb(0, 20, 137)");
     expect(renderedIncrement).toHaveStyleRule("background-color", "rgb(245, 240, 252)");
-    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to Input with a custom element data attribute", (): void => {
@@ -388,7 +388,7 @@ describe("Customization", () => {
     expect(renderedInputPrefix).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
     expect(renderedInputSuffix).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
     expect(renderedIncrement).toHaveStyleRule("background-color", "rgb(245, 240, 252)");
-    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to a Input variant with a custom element data attribute", (): void => {
diff --git a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
index ab3992655c..d41fae4dd4 100644
--- a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
+++ b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
@@ -151,10 +151,10 @@ describe("Textarea customization", () => {
     const renderedTextAreaElement = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_ELEMENT"]');
     const renderedTextAreaPrefix = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_PREFIX"]');
     const renderedTextAreaSuffix = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_SUFFIX"]');
-    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaElement).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaPrefix).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaSuffix).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
+    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaElement).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaPrefix).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaSuffix).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
   });
 
   it("should set custom CSS for custom textarea", () => {
@@ -163,10 +163,10 @@ describe("Textarea customization", () => {
     const renderedTextAreaElement = container.querySelector('[data-paste-element="NEW_TEXTAREA_ELEMENT"]');
     const renderedTextAreaPrefix = container.querySelector('[data-paste-element="NEW_TEXTAREA_PREFIX"]');
     const renderedTextAreaSuffix = container.querySelector('[data-paste-element="NEW_TEXTAREA_SUFFIX"]');
-    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaElement).toHaveStyleRule("color", "rgb(214, 31, 31)");
+    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaElement).toHaveStyleRule("color", "rgb(219, 19, 42)");
     expect(renderedTextAreaPrefix).toHaveStyleRule("padding", "1.5rem");
-    expect(renderedTextAreaSuffix).toHaveStyleRule("border-left-color", "rgb(214, 31, 31)");
+    expect(renderedTextAreaSuffix).toHaveStyleRule("border-left-color", "rgb(219, 19, 42)");
   });
 
   it("should set custom CSS for custom textarea variant", () => {
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 299a428150..db69f7a88d 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Design Tokens matches the Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -20,14 +20,14 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-strongest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-success-weakest\\": \\"rgb(5, 41, 18)\\",
@@ -35,11 +35,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
   \\"color-background-brand-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(49, 12, 12)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(56, 14, 120)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -66,7 +66,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
@@ -87,9 +87,9 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-new-weaker\\": \\"rgb(88, 23, 189)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
-  \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
+  \\"color-border-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-border-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-border-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -100,7 +100,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-strong\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strong\\": \\"rgb(246, 177, 177)\\",
@@ -165,8 +165,8 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-focus\\": \\"0 0 0 4px #606b85\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px #8891aa\\",
-  \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -181,7 +181,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #1f304c\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #001489\\",
@@ -227,7 +227,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
@@ -417,20 +417,20 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(255, 233, 128)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
   \\"color-text-icon-offline\\": \\"rgb(244, 244, 246)\\",
-  \\"color-text-link-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-link-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary-stronger\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-icon-success\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-warning\\": \\"rgb(255, 179, 122)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(231, 220, 250)\\",
-  \\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-success\\": \\"rgb(162, 246, 195)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -443,11 +443,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(204, 228, 255)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-icon-inverse\\": \\"rgb(225, 227, 234)\\",
   \\"color-text-error-strong\\": \\"rgb(246, 177, 177)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(235, 86, 86)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(236, 91, 91)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(231, 220, 250)\\",
   \\"color-text-link-strong\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -489,7 +489,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
 exports[`Design Tokens matches the Global theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -506,13 +506,13 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
+  \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
   \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
@@ -521,11 +521,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-error-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -552,7 +552,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
@@ -573,7 +573,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
   \\"color-border-new-weaker\\": \\"rgb(231, 220, 250)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-border-primary-weakest\\": \\"rgb(235, 244, 255)\\",
@@ -586,7 +586,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-strong\\": \\"rgb(96, 107, 133)\\",
   \\"color-border-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
@@ -652,7 +652,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -660,14 +660,14 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -713,11 +713,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -903,20 +903,20 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(84, 51, 8)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
-  \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-link-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
-  \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-icon-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -929,11 +929,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
-  \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(173, 17, 17)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -975,7 +975,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
 exports[`Design Tokens matches the Sendgrid theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -992,13 +992,13 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
+  \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
   \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
@@ -1007,11 +1007,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-error-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -1038,7 +1038,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
@@ -1059,7 +1059,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
   \\"color-border-new-weaker\\": \\"rgb(231, 220, 250)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-border-primary-weakest\\": \\"rgb(235, 244, 255)\\",
@@ -1072,7 +1072,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-strong\\": \\"rgb(96, 107, 133)\\",
   \\"color-border-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
@@ -1138,7 +1138,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -1146,14 +1146,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -1199,11 +1199,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -1389,20 +1389,20 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(84, 51, 8)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
-  \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-link-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
-  \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-icon-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -1415,11 +1415,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
-  \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(173, 17, 17)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -1461,7 +1461,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
 exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -1478,14 +1478,14 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-strongest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-success-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -1493,11 +1493,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
   \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(34, 9, 74)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -1524,7 +1524,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
@@ -1545,7 +1545,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(4, 60, 181)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(74, 11, 11)\\",
   \\"color-border-new-weaker\\": \\"rgb(88, 23, 189)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-border-primary-weakest\\": \\"rgb(3, 11, 93)\\",
@@ -1558,7 +1558,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-strong\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-neutral\\": \\"rgb(0, 109, 250)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strong\\": \\"rgb(245, 138, 138)\\",
@@ -1624,7 +1624,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -1639,7 +1639,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8891aa\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #043cb5\\",
@@ -1685,7 +1685,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
@@ -1875,20 +1875,20 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(255, 233, 128)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-icon-offline\\": \\"rgb(244, 244, 246)\\",
-  \\"color-text-link-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-link-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary-stronger\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-icon-success\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-warning\\": \\"rgb(255, 179, 122)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(231, 220, 250)\\",
-  \\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-success\\": \\"rgb(162, 246, 195)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -1901,11 +1901,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(102, 179, 255)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(246, 177, 177)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(235, 86, 86)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(236, 91, 91)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(200, 175, 240)\\",
   \\"color-text-link-strong\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -1947,7 +1947,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 exports[`Design Tokens matches the Twilio theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1983,7 +1983,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-neutral-weakest\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -2010,7 +2010,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
@@ -2118,7 +2118,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -2171,7 +2171,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
@@ -2232,7 +2232,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
   \\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -2367,7 +2367,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(3, 11, 93)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
@@ -2390,8 +2390,8 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(117, 12, 12)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
index 380cc81413..453c3f0fae 100644
--- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
@@ -18,7 +18,7 @@ Object {
     "rgb(109, 46, 209)",
     "rgb(136, 145, 170)",
     "rgb(117, 12, 12)",
-    "rgb(235, 86, 86)",
+    "rgb(236, 91, 91)",
   ],
   "credits": Object {
     "style": Object {
@@ -184,7 +184,7 @@ Object {
     "rgb(109, 46, 209)",
     "rgb(136, 145, 170)",
     "rgb(117, 12, 12)",
-    "rgb(235, 86, 86)",
+    "rgb(236, 91, 91)",
   ],
   "credits": Object {
     "style": Object {

From aa0d11932625faf9e83cb12e6a81943e9ae57312 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 8 May 2025 19:44:17 +0530
Subject: [PATCH 32/32] fix(form): fix cypress test

---
 cypress/integration/token-list/index.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/token-list/index.spec.ts b/cypress/integration/token-list/index.spec.ts
index 1bba292404..e293f0b12b 100644
--- a/cypress/integration/token-list/index.spec.ts
+++ b/cypress/integration/token-list/index.spec.ts
@@ -47,7 +47,7 @@ describe("Token list filter format control and theme control", function () {
     cy.get('[data-cy="theme-control"]').select("dark").should("have.value", "dark");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
       "include.text",
-      "rgb(18, 28, 45)",
+      "rgb(24, 37, 60)",
     );
     cy.get('[data-cy="theme-control"]').select("default").should("have.value", "default");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(