From 2326fa273be5c3d42d18b2943ec095723294092c Mon Sep 17 00:00:00 2001
From: rzpcibot <64553331+rzpcibot@users.noreply.github.com>
Date: Thu, 16 Jan 2025 10:54:55 +0530
Subject: [PATCH] feat(tokens): add new tokens (#2467)

* feat(tokens): add new tokens

* chore: update snap

* chore: update react native snaps

* fix: build errors

* chore: update react native snaps

* chore: update snap web

* Create thin-horses-attack.md

---------

Co-authored-by: tewarig <gaurav.tewari@razorpay.com>
Co-authored-by: Saurabh Daware <saurabh.daware@razorpay.com>
---
 .changeset/thin-horses-attack.md              |  5 ++
 .../BaseButton.native.test.tsx.snap           | 48 ++++++-------
 .../BaseButton.web.test.tsx.snap              | 40 +++++------
 .../__snapshots__/Button.native.test.tsx.snap | 36 +++++-----
 .../__snapshots__/Button.web.test.tsx.snap    | 30 ++++----
 .../ButtonGroup.web.test.tsx.snap             | 32 ++++-----
 .../FileUpload.web.test.tsx.snap              |  4 +-
 .../BaseLink.native.test.tsx.snap             |  2 +-
 .../__snapshots__/BaseLink.web.test.tsx.snap  |  2 +-
 .../__snapshots__/Link.native.test.tsx.snap   |  2 +-
 .../__snapshots__/Link.web.test.tsx.snap      |  2 +-
 .../__snapshots__/Switch.native.test.tsx.snap |  2 +-
 .../__snapshots__/Switch.web.test.tsx.snap    |  2 +-
 .../__snapshots__/Code.native.test.tsx.snap   |  2 +-
 .../__snapshots__/Code.web.test.tsx.snap      |  2 +-
 packages/blade/src/tokens/global/colors.ts    | 70 ++++++++++++++++++-
 .../createTheme.native.test.tsx.snap          | 26 +++----
 .../createTheme.web.test.tsx.snap             | 26 +++----
 packages/blade/src/tokens/theme/bladeTheme.ts | 24 +++----
 .../blade/src/tokens/theme/createTheme.ts     |  1 +
 20 files changed, 217 insertions(+), 141 deletions(-)
 create mode 100644 .changeset/thin-horses-attack.md

diff --git a/.changeset/thin-horses-attack.md b/.changeset/thin-horses-attack.md
new file mode 100644
index 00000000000..4d4f06444c3
--- /dev/null
+++ b/.changeset/thin-horses-attack.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(tokens): change token values to match figma
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
index 141647131d8..1145c89aa01 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
@@ -1480,13 +1480,13 @@ exports[`<BaseButton /> should render disabled button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
-    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     focusBorderColor="hsla(227, 100%, 59%, 0.18)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
@@ -1515,7 +1515,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1536,7 +1536,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
@@ -1590,7 +1590,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -3416,13 +3416,13 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
-    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     focusBorderColor="hsla(227, 100%, 59%, 0.18)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
@@ -3451,7 +3451,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3472,7 +3472,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
@@ -3526,7 +3526,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -3702,7 +3702,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -3768,13 +3768,13 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     defaultBorderColor="hsla(214, 40%, 92%, 1)"
-    focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     focusBorderColor="hsla(214, 40%, 92%, 1)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     hoverBorderColor="hsla(214, 40%, 92%, 1)"
     isFullWidth={false}
     isLoading={false}
@@ -3803,7 +3803,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
           "borderColor": "hsla(214, 40%, 92%, 1)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3824,7 +3824,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
         },
       ]
     }
@@ -4998,13 +4998,13 @@ exports[`<BaseButton /> should render loading button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
-    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     focusBorderColor="hsla(227, 100%, 59%, 0.18)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={true}
@@ -5033,7 +5033,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -5054,7 +5054,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
@@ -5275,7 +5275,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
index 10d7352daea..4445e93ec95 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -102,17 +102,17 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
 }
 
 .c5.c5.c5.c5.c5:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c5.c5.c5.c5.c5:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c5.c5.c5.c5.c5:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -213,7 +213,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -1393,7 +1393,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -1427,17 +1427,17 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -1485,7 +1485,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -2999,7 +2999,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -3033,17 +3033,17 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -3091,7 +3091,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -3237,7 +3237,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -3291,7 +3291,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   border-color: hsla(214,40%,92%,1);
   border-width: 0px;
   border-radius: 4px;
@@ -3325,15 +3325,15 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
index 5baac5b6bc6..7c374772eb9 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
@@ -950,13 +950,13 @@ exports[`<Button /> should render disabled button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
-    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     focusBorderColor="hsla(227, 100%, 59%, 0.18)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
@@ -985,7 +985,7 @@ exports[`<Button /> should render disabled button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1006,7 +1006,7 @@ exports[`<Button /> should render disabled button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
@@ -1060,7 +1060,7 @@ exports[`<Button /> should render disabled button 1`] = `
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -1830,13 +1830,13 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
-    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     focusBorderColor="hsla(227, 100%, 59%, 0.18)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
     hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
@@ -1865,7 +1865,7 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1886,7 +1886,7 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.18)",
           "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
@@ -1940,7 +1940,7 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -2116,7 +2116,7 @@ exports[`<Button /> should render disabled primary color secondary button 1`] =
           style={
             [
               {
-                "color": "hsla(227, 100%, 59%, 0.18)",
+                "color": "hsla(227, 100%, 59%, 0.32)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -2182,13 +2182,13 @@ exports[`<Button /> should render disabled primary color tertiary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     defaultBorderColor="hsla(214, 40%, 92%, 1)"
-    focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     focusBorderColor="hsla(214, 40%, 92%, 1)"
     focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
     hoverBorderColor="hsla(214, 40%, 92%, 1)"
     isFullWidth={false}
     isLoading={false}
@@ -2217,7 +2217,7 @@ exports[`<Button /> should render disabled primary color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
           "borderColor": "hsla(214, 40%, 92%, 1)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2238,7 +2238,7 @@ exports[`<Button /> should render disabled primary color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
         },
       ]
     }
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
index 54a9fc310bb..f3e2444e126 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
@@ -681,7 +681,7 @@ exports[`<Button /> should render disabled button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -715,17 +715,17 @@ exports[`<Button /> should render disabled button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -773,7 +773,7 @@ exports[`<Button /> should render disabled button 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -1411,7 +1411,7 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -1445,17 +1445,17 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -1503,7 +1503,7 @@ exports[`<Button /> should render disabled primary color primary button 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -1649,7 +1649,7 @@ exports[`<Button /> should render disabled primary color secondary button 1`] =
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -1703,7 +1703,7 @@ exports[`<Button /> should render disabled primary color tertiary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   border-color: hsla(214,40%,92%,1);
   border-width: 0px;
   border-radius: 4px;
@@ -1737,15 +1737,15 @@ exports[`<Button /> should render disabled primary color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
diff --git a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
index 62f6ab4c03a..85746e7ad0e 100644
--- a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
@@ -1737,7 +1737,7 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -1771,17 +1771,17 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
 }
 
 .c1.c1.c1.c1.c1:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -1807,7 +1807,7 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -1839,7 +1839,7 @@ exports[`<ButtonGroup /> should render disabled ButtonGroup 1`] = `
   border-width: 1px;
   border-radius: 4px;
   border-style: solid;
-  border-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 button[role="button"] {
@@ -2561,7 +2561,7 @@ exports[`<ButtonGroup /> should render disabled primary color primary button 1`]
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   border-width: 0px;
   border-radius: 4px;
@@ -2595,17 +2595,17 @@ exports[`<ButtonGroup /> should render disabled primary color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,59%,0.09);
+  background-color: hsla(227,100%,59%,0.18);
   border-color: hsla(227,100%,59%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -2631,7 +2631,7 @@ exports[`<ButtonGroup /> should render disabled primary color primary button 1`]
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -2777,7 +2777,7 @@ exports[`<ButtonGroup /> should render disabled primary color secondary button 1
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
@@ -2853,7 +2853,7 @@ exports[`<ButtonGroup /> should render disabled primary color tertiary button 1`
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   border-color: hsla(214,40%,92%,1);
   border-width: 0px;
   border-radius: 4px;
@@ -2887,15 +2887,15 @@ exports[`<ButtonGroup /> should render disabled primary color tertiary button 1`
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   outline: 1px solid hsla(227,100%,59%,0.09);
   box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
diff --git a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
index 8d05e8c45a7..50044a5c1af 100644
--- a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
+++ b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
@@ -231,7 +231,7 @@ exports[`<FileUpload /> should accept data-analytics attribute 1`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 400;
@@ -1834,7 +1834,7 @@ exports[`<FileUpload /> should set disabled state with isDisabled 1`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
index ea5dd4c47c9..26ae3bfe802 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
@@ -430,7 +430,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
         style={
           [
             {
-              "color": "hsla(227, 100%, 59%, 0.18)",
+              "color": "hsla(227, 100%, 59%, 0.32)",
               "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
index 4a55db456cf..f20331d8262 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
@@ -338,7 +338,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
index ed7937485b9..27d16e478da 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
@@ -200,7 +200,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
         style={
           [
             {
-              "color": "hsla(227, 100%, 59%, 0.18)",
+              "color": "hsla(227, 100%, 59%, 0.32)",
               "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
index 7965eae8326..20c150f31cd 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
   font-weight: 500;
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
index b4dd141e78d..c29f7573daf 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
@@ -299,7 +299,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
           [
             {
               "alignItems": "center",
-              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
               "borderRadius": 9999,
               "display": "flex",
               "height": 24,
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
index 1fb84a64d0a..aa2bbc85dd4 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
@@ -273,7 +273,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
   width: 36px;
   height: 20px;
   border-radius: 9999px;
-  background-color: hsla(211,20%,52%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 80ms;
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
index 9c4dfca9768..a097a680fbd 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<Code /> should render Code with color 1`] = `
       style={
         [
           {
-            "color": "hsla(227, 100%, 59%, 0.18)",
+            "color": "hsla(227, 100%, 59%, 0.32)",
             "fontFamily": "Menlo",
             "fontSize": 10,
             "fontStyle": "normal",
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
index 4aea4de14f1..58417bf239e 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Code /> should render Code with color 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(227,100%,59%,0.18);
+  color: hsla(227,100%,59%,0.32);
   font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
diff --git a/packages/blade/src/tokens/global/colors.ts b/packages/blade/src/tokens/global/colors.ts
index 89568fb0939..d18a07c2b74 100644
--- a/packages/blade/src/tokens/global/colors.ts
+++ b/packages/blade/src/tokens/global/colors.ts
@@ -16,6 +16,7 @@ export type ColorChromaticScale = Readonly<{
   a100: string;
   a150: string;
   a200: string;
+  a400: string;
 }>;
 
 export type ColorNeutralGrayScale = Readonly<{
@@ -64,6 +65,9 @@ export type Color = Readonly<{
     sea: ColorChromaticScale;
     cloud: ColorChromaticScale;
     forest: ColorChromaticScale;
+    orchid: ColorChromaticScale;
+    magenta: ColorChromaticScale;
+    topaz: ColorChromaticScale;
   };
   neutral: {
     blueGrayLight: ColorNeutralGrayScale;
@@ -93,6 +97,7 @@ export const colors: Color = {
       a100: `hsla(227, 100%, 59%, ${opacity[300]})`,
       a150: `hsla(227, 100%, 59%, ${opacity[400]})`,
       a200: `hsla(227, 100%, 59%, ${opacity[500]})`,
+      a400: `hsla(227, 100%, 59%, ${opacity[800]})`,
     },
     emerald: {
       50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
@@ -110,6 +115,7 @@ export const colors: Color = {
       a100: `hsla(150, 100%, 32%, ${opacity[300]})`,
       a150: `hsla(150, 100%, 32%, ${opacity[400]})`,
       a200: `hsla(150, 100%, 32%, ${opacity[500]})`,
+      a400: `hsla(150, 100%, 32%, ${opacity[800]})`,
     },
     crimson: {
       50: `hsla(0, 100%, 98%, ${opacity[1200]})`,
@@ -127,6 +133,7 @@ export const colors: Color = {
       a100: `hsla(4, 74%, 49%, ${opacity[300]})`,
       a150: `hsla(4, 74%, 49%, ${opacity[400]})`,
       a200: `hsla(4, 74%, 49%, ${opacity[500]})`,
+      a400: `hsla(4, 74%, 49%, ${opacity[800]})`,
     },
     cider: {
       50: `hsla(24, 100%, 96%, ${opacity[1200]})`,
@@ -144,6 +151,7 @@ export const colors: Color = {
       a100: `hsla(25, 90%, 48%, ${opacity[300]})`,
       a150: `hsla(25, 90%, 48%, ${opacity[400]})`,
       a200: `hsla(25, 90%, 48%, ${opacity[500]})`,
+      a400: `hsla(25, 90%, 48%, ${opacity[800]})`,
     },
     sapphire: {
       50: `hsla(201, 92%, 95%, ${opacity[1200]})`,
@@ -161,6 +169,7 @@ export const colors: Color = {
       a100: `hsla(200, 84%, 44%, ${opacity[300]})`,
       a150: `hsla(200, 84%, 44%, ${opacity[400]})`,
       a200: `hsla(200, 84%, 44%, ${opacity[500]})`,
+      a400: `hsla(200, 84%, 44%, ${opacity[800]})`,
     },
     sea: {
       50: `hsla(180, 39%, 95%, ${opacity[1200]})`,
@@ -178,6 +187,7 @@ export const colors: Color = {
       a100: `hsla(180, 60%, 30%, ${opacity[300]})`,
       a150: `hsla(180, 60%, 30%, ${opacity[400]})`,
       a200: `hsla(180, 60%, 30%, ${opacity[500]})`,
+      a400: `hsla(180, 60%, 30%, ${opacity[800]})`,
     },
     cloud: {
       50: `hsla(198, 39%, 95%, ${opacity[1200]})`,
@@ -195,6 +205,7 @@ export const colors: Color = {
       a100: `hsla(200, 60%, 30%, ${opacity[300]})`,
       a150: `hsla(200, 60%, 30%, ${opacity[400]})`,
       a200: `hsla(200, 60%, 30%, ${opacity[500]})`,
+      a400: `hsla(200, 60%, 30%, ${opacity[800]})`,
     },
     forest: {
       50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
@@ -212,6 +223,61 @@ export const colors: Color = {
       a100: `hsla(155, 100%, 31%, ${opacity[300]})`,
       a150: `hsla(155, 100%, 31%, ${opacity[400]})`,
       a200: `hsla(155, 100%, 31%, ${opacity[500]})`,
+      a400: `hsla(155, 100%, 31%, ${opacity[800]})`,
+    },
+    orchid: {
+      50: `hsla(249, 100%, 98%, ${opacity[1200]})`,
+      100: `hsla(252, 100%, 95%, ${opacity[1200]})`,
+      200: `hsla(252, 100%, 88%, ${opacity[1200]})`,
+      300: `hsla(252, 100%, 80%, ${opacity[1200]})`,
+      400: `hsla(252, 100%, 74%, ${opacity[1200]})`,
+      500: `hsla(252, 100%, 67%, ${opacity[1200]})`,
+      600: `hsla(252, 57%, 54%, ${opacity[1200]})`,
+      700: `hsla(251, 49%, 41%, ${opacity[1200]})`,
+      800: `hsla(251, 49%, 32%, ${opacity[1200]})`,
+      900: `hsla(252, 50%, 24%, ${opacity[1200]})`,
+      1000: `hsla(252, 50%, 17%, ${opacity[1200]})`,
+      a50: `hsla(252, 100%, 67%, ${opacity[100]})`,
+      a100: `hsla(252, 100%, 67%, ${opacity[300]})`,
+      a150: `hsla(252, 100%, 67%, ${opacity[400]})`,
+      a200: `hsla(252, 100%, 67%, ${opacity[500]})`,
+      a400: `hsla(252, 100%, 67%, ${opacity[800]})`,
+    },
+    magenta: {
+      50: `hsla(330, 78%, 97%, ${opacity[1200]})`,
+      100: `hsla(331, 83%, 93%, ${opacity[1200]})`,
+      200: `hsla(330, 83%, 84%, ${opacity[1200]})`,
+      300: `hsla(331, 82%, 74%, ${opacity[1200]})`,
+      400: `hsla(331, 82%, 65%, ${opacity[1200]})`,
+      500: `hsla(331, 82%, 56%, ${opacity[1200]})`,
+      600: `hsla(331, 64%, 45%, ${opacity[1200]})`,
+      700: `hsla(331, 64%, 34%, ${opacity[1200]})`,
+      800: `hsla(331, 65%, 27%, ${opacity[1200]})`,
+      900: `hsla(331, 65%, 21%, ${opacity[1200]})`,
+      1000: `hsla(331, 65%, 15%, ${opacity[1200]})`,
+      a50: `hsla(331, 82%, 56%, ${opacity[100]})`,
+      a100: `hsla(331, 82%, 56%, ${opacity[300]})`,
+      a150: `hsla(331, 82%, 56%, ${opacity[400]})`,
+      a200: `hsla(331, 82%, 56%, ${opacity[500]})`,
+      a400: `hsla(331, 82%, 56%, ${opacity[800]})`,
+    },
+    topaz: {
+      50: `hsla(51, 100%, 92%, ${opacity[1200]})`,
+      100: `hsla(51, 100%, 80%, ${opacity[1200]})`,
+      200: `hsla(51, 100%, 68%, ${opacity[1200]})`,
+      300: `hsla(51, 100%, 60%, ${opacity[1200]})`,
+      400: `hsla(51, 100%, 50%, ${opacity[1200]})`,
+      500: `hsla(50, 100%, 46%, ${opacity[1200]})`,
+      600: `hsla(50, 100%, 40%, ${opacity[1200]})`,
+      700: `hsla(50, 100%, 32%, ${opacity[1200]})`,
+      800: `hsla(50, 100%, 28%, ${opacity[1200]})`,
+      900: `hsla(50, 100%, 24%, ${opacity[1200]})`,
+      1000: `hsla(50, 97%, 19%, ${opacity[1200]})`,
+      a50: `hsla(50, 100%, 46%, ${opacity[100]})`,
+      a100: `hsla(50, 100%, 46%, ${opacity[300]})`,
+      a150: `hsla(50, 100%, 46%, ${opacity[400]})`,
+      a200: `hsla(50, 100%, 46%, ${opacity[500]})`,
+      a400: `hsla(50, 100%, 46%, ${opacity[800]})`,
     },
   },
   neutral: {
@@ -279,7 +345,7 @@ export const colors: Color = {
       1300: `hsla(214, 24%, 6%, ${opacity[1200]})`,
       a25: `hsla(214, 6%, 55%, ${opacity[50]})`,
       a50: `hsla(214, 6%, 55%, ${opacity[100]})`,
-      a75: `hsla(214, 6%, 55%, ${opacity[100]})`,
+      a75: `hsla(214, 6%, 55%, ${opacity[200]})`,
       a100: `hsla(214, 6%, 55%, ${opacity[300]})`,
       a200: `hsla(214, 6%, 55%, ${opacity[500]})`,
       a400: `hsla(214, 6%, 55%, ${opacity[500]})`,
@@ -302,7 +368,7 @@ export const colors: Color = {
       1300: `hsla(240, 5%, 4%, ${opacity[1200]})`,
       a25: `hsla(228, 4%, 76%, ${opacity[50]})`,
       a50: `hsla(228, 4%, 76%, ${opacity[100]})`,
-      a75: `hsla(228, 4%, 76%, ${opacity[100]})`,
+      a75: `hsla(228, 4%, 76%, ${opacity[200]})`,
       a100: `hsla(228, 4%, 76%, ${opacity[300]})`,
       a200: `hsla(228, 4%, 76%, ${opacity[500]})`,
       a400: `hsla(228, 4%, 76%, ${opacity[500]})`,
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
index b86a004e5fb..ab66a076a43 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
           "neutral": {
             "intense": "hsla(220, 22%, 92%, 1)",
-            "subtle": "hsla(216, 27%, 24%, 1)",
+            "subtle": "hsla(215, 20%, 43%, 1)",
           },
           "notice": {
             "intense": "hsla(25, 100%, 63%, 1)",
@@ -126,7 +126,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "background": {
           "gray": {
             "default": "hsla(214, 20%, 84%, 0.12)",
-            "disabled": "hsla(214, 20%, 84%, 0.09)",
+            "disabled": "hsla(214, 20%, 84%, 0.18)",
             "faded": "hsla(214, 20%, 84%, 0.06)",
             "fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
             "highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -191,7 +191,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "border": {
           "gray": {
             "default": "hsla(216, 24%, 31%, 1)",
-            "disabled": "hsla(217, 27%, 21%, 1)",
+            "disabled": "hsla(216, 27%, 24%, 1)",
             "faded": "hsla(214, 20%, 84%, 0.18)",
             "highlighted": "hsla(216, 24%, 31%, 1)",
           },
@@ -377,7 +377,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
       },
       "popup": {
         "background": {
-          "intense": "hsla(217, 27%, 15%, 1)",
+          "intense": "hsla(216, 27%, 24%, 1)",
           "subtle": "hsla(217, 27%, 15%, 1)",
         },
         "border": {
@@ -479,7 +479,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "transparent": "hsla(0, 0%, 100%, 0)",
+      "transparent": "hsla(217, 27%, 15%, 0)",
     },
     "onLight": {
       "feedback": {
@@ -576,7 +576,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "background": {
           "gray": {
             "default": "hsla(211, 20%, 52%, 0.12)",
-            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
             "faded": "hsla(211, 20%, 52%, 0.06)",
             "fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
             "highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -1189,6 +1189,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
   "a100": "hsla(332, 100%, 26%, 0.12)",
   "a150": "hsla(332, 100%, 26%, 0.09)",
   "a200": "hsla(332, 100%, 26%, 0.18)",
+  "a400": "hsla(332, 100%, 26%, 0.24)",
   "a50": "hsla(332, 100%, 26%, 0.09)",
 }
 `;
@@ -1479,7 +1480,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
           },
           "neutral": {
             "intense": "hsla(220, 22%, 92%, 1)",
-            "subtle": "hsla(216, 27%, 24%, 1)",
+            "subtle": "hsla(215, 20%, 43%, 1)",
           },
           "notice": {
             "intense": "hsla(25, 100%, 63%, 1)",
@@ -1495,7 +1496,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "background": {
           "gray": {
             "default": "hsla(214, 20%, 84%, 0.12)",
-            "disabled": "hsla(214, 20%, 84%, 0.09)",
+            "disabled": "hsla(214, 20%, 84%, 0.18)",
             "faded": "hsla(214, 20%, 84%, 0.06)",
             "fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
             "highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -1560,7 +1561,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "border": {
           "gray": {
             "default": "hsla(216, 24%, 31%, 1)",
-            "disabled": "hsla(217, 27%, 21%, 1)",
+            "disabled": "hsla(216, 27%, 24%, 1)",
             "faded": "hsla(214, 20%, 84%, 0.18)",
             "highlighted": "hsla(216, 24%, 31%, 1)",
           },
@@ -1746,7 +1747,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
       },
       "popup": {
         "background": {
-          "intense": "hsla(217, 27%, 15%, 1)",
+          "intense": "hsla(216, 27%, 24%, 1)",
           "subtle": "hsla(217, 27%, 15%, 1)",
         },
         "border": {
@@ -1848,7 +1849,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
           },
         },
       },
-      "transparent": "hsla(0, 0%, 100%, 0)",
+      "transparent": "hsla(217, 27%, 15%, 0)",
     },
     "onLight": {
       "feedback": {
@@ -1945,7 +1946,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "background": {
           "gray": {
             "default": "hsla(211, 20%, 52%, 0.12)",
-            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
             "faded": "hsla(211, 20%, 52%, 0.06)",
             "fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
             "highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -2558,6 +2559,7 @@ exports[`createTheme should create a theme with the correct brand colors 5`] = `
   "a100": "hsla(57, 100%, 52%, 0.12)",
   "a150": "hsla(57, 100%, 52%, 0.09)",
   "a200": "hsla(57, 100%, 52%, 0.18)",
+  "a400": "hsla(57, 100%, 52%, 0.24)",
   "a50": "hsla(57, 100%, 52%, 0.09)",
 }
 `;
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
index df894f49a48..853aa9cfaeb 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
           "neutral": {
             "intense": "hsla(220, 22%, 92%, 1)",
-            "subtle": "hsla(216, 27%, 24%, 1)",
+            "subtle": "hsla(215, 20%, 43%, 1)",
           },
           "notice": {
             "intense": "hsla(25, 100%, 63%, 1)",
@@ -126,7 +126,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "background": {
           "gray": {
             "default": "hsla(214, 20%, 84%, 0.12)",
-            "disabled": "hsla(214, 20%, 84%, 0.09)",
+            "disabled": "hsla(214, 20%, 84%, 0.18)",
             "faded": "hsla(214, 20%, 84%, 0.06)",
             "fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
             "highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -191,7 +191,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "border": {
           "gray": {
             "default": "hsla(216, 24%, 31%, 1)",
-            "disabled": "hsla(217, 27%, 21%, 1)",
+            "disabled": "hsla(216, 27%, 24%, 1)",
             "faded": "hsla(214, 20%, 84%, 0.18)",
             "highlighted": "hsla(216, 24%, 31%, 1)",
           },
@@ -377,7 +377,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
       },
       "popup": {
         "background": {
-          "intense": "hsla(217, 27%, 15%, 1)",
+          "intense": "hsla(216, 27%, 24%, 1)",
           "subtle": "hsla(217, 27%, 15%, 1)",
         },
         "border": {
@@ -479,7 +479,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "transparent": "hsla(0, 0%, 100%, 0)",
+      "transparent": "hsla(217, 27%, 15%, 0)",
     },
     "onLight": {
       "feedback": {
@@ -576,7 +576,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
         "background": {
           "gray": {
             "default": "hsla(211, 20%, 52%, 0.12)",
-            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
             "faded": "hsla(211, 20%, 52%, 0.06)",
             "fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
             "highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -1117,6 +1117,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
   "a100": "hsla(332, 100%, 26%, 0.12)",
   "a150": "hsla(332, 100%, 26%, 0.09)",
   "a200": "hsla(332, 100%, 26%, 0.18)",
+  "a400": "hsla(332, 100%, 26%, 0.24)",
   "a50": "hsla(332, 100%, 26%, 0.09)",
 }
 `;
@@ -1374,7 +1375,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
           },
           "neutral": {
             "intense": "hsla(220, 22%, 92%, 1)",
-            "subtle": "hsla(216, 27%, 24%, 1)",
+            "subtle": "hsla(215, 20%, 43%, 1)",
           },
           "notice": {
             "intense": "hsla(25, 100%, 63%, 1)",
@@ -1390,7 +1391,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "background": {
           "gray": {
             "default": "hsla(214, 20%, 84%, 0.12)",
-            "disabled": "hsla(214, 20%, 84%, 0.09)",
+            "disabled": "hsla(214, 20%, 84%, 0.18)",
             "faded": "hsla(214, 20%, 84%, 0.06)",
             "fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
             "highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -1455,7 +1456,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "border": {
           "gray": {
             "default": "hsla(216, 24%, 31%, 1)",
-            "disabled": "hsla(217, 27%, 21%, 1)",
+            "disabled": "hsla(216, 27%, 24%, 1)",
             "faded": "hsla(214, 20%, 84%, 0.18)",
             "highlighted": "hsla(216, 24%, 31%, 1)",
           },
@@ -1641,7 +1642,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
       },
       "popup": {
         "background": {
-          "intense": "hsla(217, 27%, 15%, 1)",
+          "intense": "hsla(216, 27%, 24%, 1)",
           "subtle": "hsla(217, 27%, 15%, 1)",
         },
         "border": {
@@ -1743,7 +1744,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
           },
         },
       },
-      "transparent": "hsla(0, 0%, 100%, 0)",
+      "transparent": "hsla(217, 27%, 15%, 0)",
     },
     "onLight": {
       "feedback": {
@@ -1840,7 +1841,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         "background": {
           "gray": {
             "default": "hsla(211, 20%, 52%, 0.12)",
-            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
             "faded": "hsla(211, 20%, 52%, 0.06)",
             "fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
             "highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -2381,6 +2382,7 @@ exports[`createTheme should create a theme with the correct brand colors 5`] = `
   "a100": "hsla(57, 100%, 52%, 0.12)",
   "a150": "hsla(57, 100%, 52%, 0.09)",
   "a200": "hsla(57, 100%, 52%, 0.18)",
+  "a400": "hsla(57, 100%, 52%, 0.24)",
   "a50": "hsla(57, 100%, 52%, 0.09)",
 }
 `;
diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts
index 25cdac36ad2..2bad55e8349 100644
--- a/packages/blade/src/tokens/theme/bladeTheme.ts
+++ b/packages/blade/src/tokens/theme/bladeTheme.ts
@@ -229,14 +229,14 @@ const colors: ColorsWithModes = {
         gray: {
           default: globalColors.neutral.blueGrayLight.a75,
           highlighted: globalColors.neutral.blueGrayLight.a100,
-          disabled: globalColors.neutral.blueGrayLight.a50,
+          disabled: globalColors.neutral.blueGrayLight.a100,
           faded: globalColors.neutral.blueGrayLight.a25,
           fadedHighlighted: globalColors.neutral.blueGrayLight.a75,
         },
         primary: {
           default: globalColors.chromatic.azure[500],
           highlighted: globalColors.chromatic.azure[600],
-          disabled: globalColors.chromatic.azure.a50,
+          disabled: globalColors.chromatic.azure.a100,
           faded: globalColors.chromatic.azure.a50,
           fadedHighlighted: globalColors.chromatic.azure.a100,
         },
@@ -352,7 +352,7 @@ const colors: ColorsWithModes = {
           normal: globalColors.chromatic.azure[600],
           subtle: globalColors.chromatic.azure[500],
           muted: globalColors.chromatic.azure[400],
-          disabled: globalColors.chromatic.azure.a100,
+          disabled: globalColors.chromatic.azure.a200,
         },
         onPrimary: {
           normal: globalColors.neutral.white[500],
@@ -414,7 +414,7 @@ const colors: ColorsWithModes = {
           normal: globalColors.chromatic.azure[600],
           subtle: globalColors.chromatic.azure[500],
           muted: globalColors.chromatic.azure[400],
-          disabled: globalColors.chromatic.azure.a100,
+          disabled: globalColors.chromatic.azure.a200,
         },
         onPrimary: {
           normal: globalColors.neutral.white[500],
@@ -605,7 +605,7 @@ const colors: ColorsWithModes = {
           intense: globalColors.chromatic.sapphire[400],
         },
         neutral: {
-          subtle: globalColors.neutral.blueGrayDark[700],
+          subtle: globalColors.neutral.blueGrayDark[400],
           intense: globalColors.neutral.blueGrayDark[50],
         },
       },
@@ -672,14 +672,14 @@ const colors: ColorsWithModes = {
         gray: {
           default: globalColors.neutral.blueGrayDark.a75,
           highlighted: globalColors.neutral.blueGrayDark.a100,
-          disabled: globalColors.neutral.blueGrayDark.a50,
+          disabled: globalColors.neutral.blueGrayDark.a100,
           faded: globalColors.neutral.blueGrayDark.a25,
           fadedHighlighted: globalColors.neutral.blueGrayDark.a75,
         },
         primary: {
           default: globalColors.chromatic.azure[400],
           highlighted: globalColors.chromatic.azure[500],
-          disabled: globalColors.chromatic.azure.a100,
+          disabled: globalColors.chromatic.azure.a150,
           faded: globalColors.chromatic.azure.a150,
           fadedHighlighted: globalColors.chromatic.azure.a200,
         },
@@ -732,7 +732,7 @@ const colors: ColorsWithModes = {
         gray: {
           default: globalColors.neutral.blueGrayDark[600],
           highlighted: globalColors.neutral.blueGrayDark[600],
-          disabled: globalColors.neutral.blueGrayDark[800],
+          disabled: globalColors.neutral.blueGrayDark[700],
           faded: globalColors.neutral.blueGrayDark.a100,
         },
         primary: {
@@ -795,7 +795,7 @@ const colors: ColorsWithModes = {
           normal: globalColors.chromatic.azure[300],
           subtle: globalColors.chromatic.azure[400],
           muted: globalColors.chromatic.azure[600],
-          disabled: globalColors.chromatic.azure.a200,
+          disabled: globalColors.chromatic.azure.a400,
         },
         onPrimary: {
           normal: globalColors.neutral.white[500],
@@ -857,7 +857,7 @@ const colors: ColorsWithModes = {
           normal: globalColors.chromatic.azure[300],
           subtle: globalColors.chromatic.azure[400],
           muted: globalColors.chromatic.azure[600],
-          disabled: globalColors.chromatic.azure.a200,
+          disabled: globalColors.chromatic.azure.a400,
         },
         onPrimary: {
           normal: globalColors.neutral.white[500],
@@ -888,14 +888,14 @@ const colors: ColorsWithModes = {
     popup: {
       background: {
         subtle: globalColors.neutral.blueGrayDark[1000],
-        intense: globalColors.neutral.blueGrayDark[1000],
+        intense: globalColors.neutral.blueGrayDark[700],
       },
       border: {
         subtle: globalColors.neutral.blueGrayDark.a100,
         intense: globalColors.neutral.blueGrayDark.a100,
       },
     },
-    transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
+    transparent: `hsla(217, 27%, 15%, ${opacity[0]})`,
   },
 };
 
diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts
index 99101541814..be8a041ee44 100644
--- a/packages/blade/src/tokens/theme/createTheme.ts
+++ b/packages/blade/src/tokens/theme/createTheme.ts
@@ -88,6 +88,7 @@ const generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromati
     a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),
     a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),
     a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),
+    a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),
   };
 
   return brandColors;