diff --git a/packages/orbit-tailwind-preset/package.json b/packages/orbit-tailwind-preset/package.json
index ebf75a4063..759121fcd8 100644
--- a/packages/orbit-tailwind-preset/package.json
+++ b/packages/orbit-tailwind-preset/package.json
@@ -34,7 +34,8 @@
     "tailwindcss": ">=3.3.2"
   },
   "dependencies": {
-    "@kiwicom/orbit-design-tokens": "^6.3.0"
+    "@kiwicom/orbit-design-tokens": "^6.3.0",
+    "color2k": "^2.0.2"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0"
diff --git a/packages/orbit-tailwind-preset/src/presets/__fixtures__/Colors.tsx b/packages/orbit-tailwind-preset/src/presets/__fixtures__/Colors.tsx
deleted file mode 100644
index a31287846c..0000000000
--- a/packages/orbit-tailwind-preset/src/presets/__fixtures__/Colors.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-
-const Colors = () => (
-  <div>
-    <p className="text-blue-normal">blue-normal</p>
-    <p className="text-blue-normal-hover">blue-normal-hover</p>
-    <p className="text-blue-normal-active">blue-normal-active</p>
-    <p className="text-blue-light">blue-light</p>
-    <p className="text-blue-light-hover">blue-light-hover</p>
-    <p className="text-blue-light-active">blue-light-active</p>
-    <p className="text-blue-dark">blue-dark</p>
-    <p className="text-blue-dark-hover">blue-dark-hover</p>
-    <p className="text-blue-dark-active">blue-dark-active</p>
-    <p className="text-blue-darker">blue-darker</p>
-
-    <p className="text-green-normal">green-normal</p>
-    <p className="text-green-normal-hover">green-normal-hover</p>
-    <p className="text-green-normal-active">green-normal-active</p>
-
-    <p className="text-green-light">green-light</p>
-    <p className="text-green-light-hover">green-light-hover</p>
-    <p className="text-green-light-active">green-light-active</p>
-
-    <p className="text-green-dark">green-dark</p>
-    <p className="text-green-dark-hover">green-dark-hover</p>
-    <p className="text-green-dark-active">green-dark-active</p>
-    <p className="text-green-darker">green-darker</p>
-
-    <p className="text-red-normal">red-normal</p>
-    <p className="text-red-normal-hover">red-normal-hover</p>
-    <p className="text-red-normal-active">red-normal-active</p>
-
-    <p className="text-red-light">red-light</p>
-    <p className="text-red-light-hover">red-light-hover</p>
-    <p className="text-red-light-active">red-light-active</p>
-
-    <p className="text-red-dark">red-dark</p>
-    <p className="text-red-dark-hover">red-dark-hover</p>
-    <p className="text-red-dark-active">red-dark-active</p>
-    <p className="text-red-darker">red-darker</p>
-
-    <p className="text-orange-normal">orange-normal</p>
-    <p className="text-orange-normal-hover">orange-normal-hover</p>
-    <p className="text-orange-normal-active">orange-normal-active</p>
-
-    <p className="text-orange-light">orange-light</p>
-    <p className="text-orange-light-hover">orange-light-hover</p>
-    <p className="text-orange-light-active">orange-light-active</p>
-
-    <p className="text-orange-dark">orange-dark</p>
-    <p className="text-orange-dark-hover">orange-dark-hover</p>
-    <p className="text-orange-dark-active">orange-dark-active</p>
-    <p className="text-orange-darker">orange-darker</p>
-
-    <p className="text-ink-normal">ink-normal</p>
-    <p className="text-ink-normal-hover">ink-normal-hover</p>
-    <p className="text-ink-normal-active">ink-normal-active</p>
-
-    <p className="text-ink-light">ink-light</p>
-    <p className="text-ink-light-hover">ink-light-hover</p>
-    <p className="text-ink-light-active">ink-light-active</p>
-
-    <p className="text-ink-dark">ink-dark</p>
-    <p className="text-ink-dark-hover">ink-dark-hover</p>
-    <p className="text-ink-dark-active">ink-dark-active</p>
-
-    <p className="text-product-normal">product-normal</p>
-    <p className="text-product-normal-hover">product-normal-hover</p>
-    <p className="text-product-normal-active">product-normal-active</p>
-
-    <p className="text-product-light">product-light</p>
-    <p className="text-product-light-hover">product-light-hover</p>
-    <p className="text-product-light-active">product-light-active</p>
-
-    <p className="text-product-dark">product-dark</p>
-    <p className="text-product-dark-hover">product-dark-hover</p>
-    <p className="text-product-dark-active">product-dark-active</p>
-    <p className="text-product-darker">product-darker</p>
-
-    <p className="text-white-normal">white-normal</p>
-    <p className="text-white-normal-hover">white-normal-hover</p>
-    <p className="text-white-normal-active">white-normal-active</p>
-
-    <p className="text-cloud-normal">cloud-normal</p>
-    <p className="text-cloud-normal-hover">cloud-normal-hover</p>
-    <p className="text-cloud-normal-active">cloud-normal-active</p>
-
-    <p className="text-cloud-light">cloud-light</p>
-    <p className="text-cloud-light-hover">cloud-light-hover</p>
-    <p className="text-cloud-light-active">cloud-light-active</p>
-
-    <p className="text-cloud-dark">cloud-dark</p>
-    <p className="text-cloud-dark-hover">cloud-dark-hover</p>
-    <p className="text-cloud-dark-active">cloud-dark-active</p>
-
-    <p className="text-social-facebook">social-facebook</p>
-    <p className="text-social-facebook-hover">social-facebook-hover</p>
-    <p className="text-social-facebook-active">social-facebook-active</p>
-
-    <p className="text-bundle-basic">bundle-basic</p>
-    <p className="text-bundle-medium">bundle-medium</p>
-  </div>
-);
-
-export default Colors;
diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
index 62cf847ea0..c6e45e8119 100644
--- a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
+++ b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
@@ -224,101 +224,101 @@ exports[`orbitPreset should match snapshot 1`] = `
         },
         "colors": {
           "blue": {
-            "dark": "var(--palette-blue-dark, #005AA3)",
-            "dark-active": "var(--palette-blue-dark-active, #003E70)",
-            "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-            "darker": "var(--palette-blue-darker, #004680)",
-            "light": "var(--palette-blue-light, #E8F4FD)",
-            "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-            "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-            "normal": "var(--palette-blue-normal, #0172CB)",
-            "normal-active": "var(--palette-blue-normal-active, #01508E)",
-            "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+            "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+            "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+            "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+            "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+            "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
           },
           "bundle": {
-            "basic": "var(--palette-bundle-basic, #D7331C)",
-            "medium": "var(--palette-bundle-medium, #3B1EB0)",
+            "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+            "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
           },
           "cloud": {
-            "dark": "var(--palette-cloud-dark, #BAC7D5)",
-            "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-            "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-            "light": "var(--palette-cloud-light, #F5F7F9)",
-            "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-            "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-            "normal": "var(--palette-cloud-normal, #E8EDF1)",
-            "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-            "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+            "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+            "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+            "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+            "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
           },
           "green": {
-            "dark": "var(--palette-green-dark, #2D7738)",
-            "dark-active": "var(--palette-green-dark-active, #1F5126)",
-            "dark-hover": "var(--palette-green-dark-hover, #276831)",
-            "darker": "var(--palette-green-darker, #235C2B)",
-            "light": "var(--palette-green-light, #EAF5EA)",
-            "light-active": "var(--palette-green-light-active, #CDE4CF)",
-            "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-            "normal": "var(--palette-green-normal, #28A138)",
-            "normal-active": "var(--palette-green-normal-active, #1D7228)",
-            "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+            "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+            "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+            "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+            "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+            "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
           },
           "ink": {
-            "dark": "var(--palette-ink-dark, #252A31)",
-            "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-            "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-            "light": "var(--palette-ink-light, #697D95)",
-            "light-active": "var(--palette-ink-light-active, #4A617C)",
-            "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-            "normal": "var(--palette-ink-normal, #4F5E71)",
-            "normal-active": "var(--palette-ink-normal-active, #324256)",
-            "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+            "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+            "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+            "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+            "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
           },
           "orange": {
-            "dark": "var(--palette-orange-dark, #AD5700)",
-            "dark-active": "var(--palette-orange-dark-active, #954A00)",
-            "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-            "darker": "var(--palette-orange-darker, #803F00)",
-            "light": "var(--palette-orange-light, #FEF2E6)",
-            "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-            "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-            "normal": "var(--palette-orange-normal, #DF7B00)",
-            "normal-active": "var(--palette-orange-normal-active, #B26200)",
-            "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+            "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+            "darker": "#803F00",
+            "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+            "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+            "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
           },
           "product": {
-            "dark": "var(--palette-product-dark, #007A69)",
-            "dark-active": "var(--palette-product-dark-active, #006657)",
-            "dark-hover": "var(--palette-product-dark-hover, #007060)",
-            "darker": "var(--palette-product-darker, #005C4E)",
-            "light": "var(--palette-product-light, #E1F4F3)",
-            "light-active": "var(--palette-product-light-active, #BFE8E2)",
-            "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-            "normal": "var(--palette-product-normal, #00A58E)",
-            "normal-active": "var(--palette-product-normal-active, #008472)",
-            "normal-hover": "var(--palette-product-normal-hover, #009580)",
+            "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+            "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+            "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+            "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+            "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
           },
           "red": {
-            "dark": "var(--palette-red-dark, #970C0C)",
-            "dark-active": "var(--palette-red-dark-active, #6D0909)",
-            "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-            "darker": "var(--palette-red-darker, #760909)",
-            "light": "var(--palette-red-light, #FAEAEA)",
-            "light-active": "var(--palette-red-light-active, #F3CECE)",
-            "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-            "normal": "var(--palette-red-normal, #D21C1C)",
-            "normal-active": "var(--palette-red-normal-active, #9D1515)",
-            "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+            "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+            "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+            "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+            "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+            "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+            "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+            "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+            "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
           },
           "social": {
-            "facebook": "var(--palette-social-facebook, #3B5998)",
-            "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-            "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+            "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+            "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+            "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
           },
           "transparent": "transparent",
           "white": {
-            "normal": "var(--palette-white-normal, #FFFFFF)",
-            "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-            "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+            "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+            "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+            "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
           },
         },
         "extend": {
@@ -396,101 +396,101 @@ exports[`orbitPreset should match snapshot 1`] = `
     "accentColor": {
       "auto": "auto",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "animation": {
@@ -597,183 +597,183 @@ exports[`orbitPreset should match snapshot 1`] = `
       "DEFAULT": "100%",
     },
     "backgroundColor": {
-      "badge-critical-background": "var(--palette-red-normal, #D21C1C)",
-      "badge-critical-subtle-background": "var(--palette-red-light, #FAEAEA)",
-      "badge-dark-background": "var(--palette-ink-dark, #252A31)",
-      "badge-info-background": "var(--palette-blue-normal, #0172CB)",
-      "badge-info-subtle-background": "var(--palette-blue-light, #E8F4FD)",
-      "badge-neutral-background": "var(--palette-cloud-light, #F5F7F9)",
-      "badge-success-background": "var(--palette-green-normal, #28A138)",
-      "badge-success-subtle-background": "var(--palette-green-light, #EAF5EA)",
-      "badge-warning-background": "var(--palette-orange-normal, #DF7B00)",
-      "badge-warning-subtle-background": "var(--palette-orange-light, #FEF2E6)",
-      "badge-white-background": "var(--palette-white-normal, #FFFFFF)",
+      "badge-critical-background": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "badge-critical-subtle-background": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+      "badge-dark-background": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "badge-info-background": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "badge-info-subtle-background": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+      "badge-neutral-background": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+      "badge-success-background": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "badge-success-subtle-background": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+      "badge-warning-background": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+      "badge-warning-subtle-background": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+      "badge-white-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
-      },
-      "button-critical-background": "var(--palette-red-normal, #D21C1C)",
-      "button-critical-background-active": "var(--palette-red-normal-active, #9D1515)",
-      "button-critical-background-hover": "var(--palette-red-normal-hover, #B91919)",
-      "button-critical-subtle-background": "var(--palette-red-light, #FAEAEA)",
-      "button-critical-subtle-background-active": "var(--palette-red-light-active, #F3CECE)",
-      "button-critical-subtle-background-hover": "var(--palette-red-light-hover, #F8E2E2)",
-      "button-info-background": "var(--palette-blue-normal, #0172CB)",
-      "button-info-background-active": "var(--palette-blue-normal-active, #01508E)",
-      "button-info-background-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
+      },
+      "button-critical-background": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "button-critical-background-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+      "button-critical-background-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "button-critical-subtle-background": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+      "button-critical-subtle-background-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+      "button-critical-subtle-background-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+      "button-info-background": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "button-info-background-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+      "button-info-background-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       "button-link-critical-background": "transparent",
-      "button-link-critical-background-active": "var(--palette-red-light-active, #F3CECE)",
-      "button-link-critical-background-hover": "var(--palette-red-light-hover, #F8E2E2)",
+      "button-link-critical-background-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+      "button-link-critical-background-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
       "button-link-primary-background": "transparent",
-      "button-link-primary-background-active": "var(--palette-product-light-active, #BFE8E2)",
-      "button-link-primary-background-hover": "var(--palette-product-light-hover, #D6F0EC)",
+      "button-link-primary-background-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+      "button-link-primary-background-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
       "button-link-secondary-background": "transparent",
-      "button-link-secondary-background-active": "var(--palette-cloud-light-active, #D6DEE6)",
-      "button-link-secondary-background-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-      "button-primary-background": "var(--button-primary-background, var(--palette-product-normal, #00A58E))",
-      "button-primary-background-active": "var(--button-primary-background-active, var(--palette-product-normal-active, #008472))",
-      "button-primary-background-hover": "var(--button-primary-background-hover, var(--palette-product-normal-hover, #009580))",
-      "button-primary-subtle-background": "var(--palette-product-light, #E1F4F3)",
-      "button-primary-subtle-background-active": "var(--palette-product-light-active, #BFE8E2)",
-      "button-primary-subtle-background-hover": "var(--palette-product-light-hover, #D6F0EC)",
-      "button-secondary-background": "var(--palette-cloud-normal, #E8EDF1)",
-      "button-secondary-background-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-      "button-secondary-background-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
-      "button-success-background": "var(--palette-green-normal, #28A138)",
-      "button-success-background-active": "var(--palette-green-normal-active, #1D7228)",
-      "button-success-background-hover": "var(--palette-green-normal-hover, #238B31)",
-      "button-warning-background": "var(--palette-orange-normal, #DF7B00)",
-      "button-warning-background-active": "var(--palette-orange-normal-active, #B26200)",
-      "button-warning-background-hover": "var(--palette-orange-normal-hover, #C96F00)",
-      "button-white-background": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-background-active": "var(--palette-cloud-light-hover, #E5EAEF)",
-      "button-white-background-hover": "var(--palette-cloud-light, #F5F7F9)",
+      "button-link-secondary-background-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+      "button-link-secondary-background-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+      "button-primary-background": "var(--button-primary-background, rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>))",
+      "button-primary-background-active": "var(--button-primary-background-active, rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>))",
+      "button-primary-background-hover": "var(--button-primary-background-hover, rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>))",
+      "button-primary-subtle-background": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+      "button-primary-subtle-background-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+      "button-primary-subtle-background-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+      "button-secondary-background": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "button-secondary-background-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+      "button-secondary-background-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
+      "button-success-background": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "button-success-background-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+      "button-success-background-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
+      "button-warning-background": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+      "button-warning-background-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+      "button-warning-background-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
+      "button-white-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-background-active": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+      "button-white-background-hover": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "country-flag-background": "transparent",
       "drawer-overlay-background": "rgba(37, 42, 49, 0.5)",
-      "elevation-action": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-action-active": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-fixed": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-fixed-reverse": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-flat": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-overlay": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-raised": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-raised-reverse": "var(--palette-white-normal, #FFFFFF)",
-      "elevation-suppressed": "var(--palette-cloud-light, #F5F7F9)",
-      "form-element-background": "var(--palette-white-normal, #FFFFFF)",
-      "form-element-disabled-background": "var(--palette-cloud-normal, #E8EDF1)",
+      "elevation-action": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-action-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-fixed": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-fixed-reverse": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-flat": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-overlay": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-raised": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-raised-reverse": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "elevation-suppressed": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+      "form-element-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "form-element-disabled-background": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
-      },
-      "social-button-apple-background": "var(--palette-ink-normal, #4F5E71)",
-      "social-button-apple-background-active": "var(--palette-ink-normal-active, #324256)",
-      "social-button-apple-background-hover": "var(--palette-ink-normal-hover, #3E4E63)",
-      "social-button-facebook-background": "var(--palette-social-facebook, #3B5998)",
-      "social-button-facebook-background-active": "var(--palette-social-facebook-active, #354F88)",
-      "social-button-facebook-background-hover": "var(--palette-social-facebook-hover, #385490)",
-      "social-button-google-background": "var(--palette-cloud-light, #F5F7F9)",
-      "social-button-google-background-active": "var(--palette-cloud-light-active, #D6DEE6)",
-      "social-button-google-background-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-      "social-button-twitter-background": "var(--palette-cloud-dark, #BAC7D5)",
-      "social-button-twitter-background-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-      "social-button-twitter-background-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
-      "tab-bundle-basic-background": "var(--palette-white-normal, #FFFFFF)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      },
+      "social-button-apple-background": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "social-button-apple-background-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+      "social-button-apple-background-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
+      "social-button-facebook-background": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+      "social-button-facebook-background-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+      "social-button-facebook-background-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      "social-button-google-background": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+      "social-button-google-background-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+      "social-button-google-background-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+      "social-button-twitter-background": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "social-button-twitter-background-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+      "social-button-twitter-background-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
+      "tab-bundle-basic-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "tab-bundle-basic-background-active": "rgba(215, 51, 28, 0.12)",
       "tab-bundle-basic-background-hover": "rgba(215, 51, 28, 0.08)",
-      "tab-bundle-medium-background": "var(--palette-white-normal, #FFFFFF)",
+      "tab-bundle-medium-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "tab-bundle-medium-background-active": "rgba(59, 30, 176, 0.12)",
       "tab-bundle-medium-background-hover": "rgba(59, 30, 176, 0.08)",
-      "tab-bundle-top-background": "var(--palette-white-normal, #FFFFFF)",
-      "tab-bundle-top-background-hover": "var(--palette-white-normal-hover, #F1F4F7)",
-      "tag-colored-background": "var(--palette-blue-light, #E8F4FD)",
-      "tag-colored-background-active": "var(--palette-blue-light-active, #C7E4FA)",
-      "tag-colored-background-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-      "tag-neutral-background": "var(--palette-cloud-normal, #E8EDF1)",
-      "tag-neutral-background-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-      "tag-neutral-background-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+      "tab-bundle-top-background": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "tab-bundle-top-background-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
+      "tag-colored-background": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+      "tag-colored-background-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+      "tag-colored-background-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+      "tag-neutral-background": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "tag-neutral-background-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+      "tag-neutral-background-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       "text-critical-background": "rgba(210, 28, 28, 0.1)",
       "text-info-background": "rgba(1, 114, 203, 0.1)",
       "text-primary-background": "rgba(37, 42, 49, 0.1)",
@@ -783,9 +783,9 @@ exports[`orbitPreset should match snapshot 1`] = `
       "text-white-background": "rgba(255, 255, 255, 0.1)",
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "backgroundImage": {
@@ -863,153 +863,153 @@ exports[`orbitPreset should match snapshot 1`] = `
     "borderColor": {
       "DEFAULT": "currentColor",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
-      },
-      "button-critical-bordered": "var(--palette-red-normal, #D21C1C)",
-      "button-critical-bordered-active": "var(--palette-red-normal-active, #9D1515)",
-      "button-critical-bordered-hover": "var(--palette-red-normal-hover, #B91919)",
-      "button-facebook-bordered": "var(--palette-social-facebook, #3B5998)",
-      "button-facebook-bordered-active": "var(--palette-social-facebook-active, #354F88)",
-      "button-facebook-bordered-hover": "var(--palette-social-facebook-hover, #385490)",
-      "button-google-bordered": "var(--palette-ink-dark, #252A31)",
-      "button-google-bordered-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-google-bordered-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-info-bordered": "var(--palette-blue-normal, #0172CB)",
-      "button-info-bordered-active": "var(--palette-blue-normal-active, #01508E)",
-      "button-info-bordered-hover": "var(--palette-blue-normal-hover, #0161AC)",
-      "button-primary-bordered": "var(--palette-product-normal, #00A58E)",
-      "button-primary-bordered-active": "var(--palette-product-normal-active, #008472)",
-      "button-primary-bordered-hover": "var(--palette-product-normal-hover, #009580)",
-      "button-secondary-bordered": "var(--palette-ink-dark, #252A31)",
-      "button-secondary-bordered-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-secondary-bordered-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-success-bordered": "var(--palette-green-normal, #28A138)",
-      "button-success-bordered-active": "var(--palette-green-normal-active, #1D7228)",
-      "button-success-bordered-hover": "var(--palette-green-normal-hover, #238B31)",
-      "button-warning-bordered": "var(--palette-orange-normal, #DF7B00)",
-      "button-warning-bordered-active": "var(--palette-orange-normal-active, #B26200)",
-      "button-warning-bordered-hover": "var(--palette-orange-normal-hover, #C96F00)",
-      "button-white-bordered": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-bordered-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-bordered-hover": "var(--palette-white-normal, #FFFFFF)",
-      "card": "var(--palette-cloud-normal, #E8EDF1)",
-      "checkbox-radio": "var(--palette-cloud-dark, #BAC7D5)",
-      "checkbox-radio-active": "var(--palette-ink-dark, #252A31)",
-      "checkbox-radio-error": "var(--palette-red-normal, #D21C1C)",
-      "checkbox-radio-focus": "var(--palette-blue-normal, #0172CB)",
-      "checkbox-radio-hover": "var(--palette-ink-normal, #4F5E71)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
+      },
+      "button-critical-bordered": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "button-critical-bordered-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+      "button-critical-bordered-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "button-facebook-bordered": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+      "button-facebook-bordered-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+      "button-facebook-bordered-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      "button-google-bordered": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-google-bordered-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-google-bordered-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-info-bordered": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "button-info-bordered-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+      "button-info-bordered-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
+      "button-primary-bordered": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+      "button-primary-bordered-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+      "button-primary-bordered-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
+      "button-secondary-bordered": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-secondary-bordered-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-secondary-bordered-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-success-bordered": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "button-success-bordered-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+      "button-success-bordered-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
+      "button-warning-bordered": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+      "button-warning-bordered-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+      "button-warning-bordered-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
+      "button-white-bordered": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-bordered-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-bordered-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "card": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "checkbox-radio": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "checkbox-radio-active": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "checkbox-radio-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "checkbox-radio-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "checkbox-radio-hover": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
-      },
-      "elevation-flat-border-color": "var(--palette-cloud-normal, #E8EDF1)",
-      "form-element": "var(--palette-cloud-dark, #BAC7D5)",
-      "form-element-active": "var(--palette-cloud-dark-active, #94A8BE)",
-      "form-element-border-color": "var(--palette-cloud-dark, #BAC7D5)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
+      },
+      "elevation-flat-border-color": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "form-element": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "form-element-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+      "form-element-border-color": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
       "form-element-disabled": "transparent",
-      "form-element-error": "var(--palette-red-normal, #D21C1C)",
-      "form-element-error-hover": "var(--palette-red-normal-hover, #B91919)",
-      "form-element-focus": "var(--palette-blue-normal, #0172CB)",
-      "form-element-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
+      "form-element-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "form-element-error-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "form-element-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "form-element-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
-      },
-      "input": "var(--palette-cloud-dark, #BAC7D5)",
-      "input-active": "var(--palette-cloud-dark-active, #94A8BE)",
-      "input-error": "var(--palette-red-normal, #D21C1C)",
-      "input-error-focus": "var(--palette-red-normal, #D21C1C)",
-      "input-error-hover": "var(--palette-red-normal-hover, #B91919)",
-      "input-focus": "var(--palette-blue-normal, #0172CB)",
-      "input-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-      "modal": "var(--palette-cloud-normal, #E8EDF1)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
+      },
+      "input": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "input-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+      "input-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "input-error-focus": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "input-error-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "input-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "input-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+      "modal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
-      },
-      "table": "var(--palette-cloud-normal, #E8EDF1)",
-      "table-cell": "var(--palette-cloud-dark, #BAC7D5)",
-      "table-head": "var(--palette-cloud-dark, #BAC7D5)",
-      "tag": "var(--palette-cloud-dark, #BAC7D5)",
-      "tag-focus": "var(--palette-blue-normal, #0172CB)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      },
+      "table": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "table-cell": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "table-head": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "tag": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "tag-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
       "transparent": "transparent",
-      "white": "var(--palette-white-normal, #FFFFFF)",
+      "white": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
     },
     "borderOpacity": {
       "0": "0",
@@ -1079,7 +1079,7 @@ exports[`orbitPreset should match snapshot 1`] = `
       "form-element-focus": "inset 0 0 0 1px rgba(1, 114, 203, 1),inset 0 0 0 3px rgba(1, 114, 203, 0.15)",
       "form-element-hover": "inset 0 0 0 1px rgba(166, 182, 200, 1)",
       "modal": "inset 0 0 0 transparent, 0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
-      "modal-scrolled": "inset 0 1px 0 var(--palette-cloud-normal, #E8EDF1), 0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
+      "modal-scrolled": "inset 0 1px 0 rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>), 0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12)",
       "none": "none",
       "overlay": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)",
       "raised": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)",
@@ -1088,101 +1088,101 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "boxShadowColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "brightness": {
@@ -1200,200 +1200,200 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "caretColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "colors": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "columns": {
@@ -1479,153 +1479,153 @@ exports[`orbitPreset should match snapshot 1`] = `
     "divideColor": {
       "DEFAULT": "currentColor",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
-      },
-      "button-critical-bordered": "var(--palette-red-normal, #D21C1C)",
-      "button-critical-bordered-active": "var(--palette-red-normal-active, #9D1515)",
-      "button-critical-bordered-hover": "var(--palette-red-normal-hover, #B91919)",
-      "button-facebook-bordered": "var(--palette-social-facebook, #3B5998)",
-      "button-facebook-bordered-active": "var(--palette-social-facebook-active, #354F88)",
-      "button-facebook-bordered-hover": "var(--palette-social-facebook-hover, #385490)",
-      "button-google-bordered": "var(--palette-ink-dark, #252A31)",
-      "button-google-bordered-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-google-bordered-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-info-bordered": "var(--palette-blue-normal, #0172CB)",
-      "button-info-bordered-active": "var(--palette-blue-normal-active, #01508E)",
-      "button-info-bordered-hover": "var(--palette-blue-normal-hover, #0161AC)",
-      "button-primary-bordered": "var(--palette-product-normal, #00A58E)",
-      "button-primary-bordered-active": "var(--palette-product-normal-active, #008472)",
-      "button-primary-bordered-hover": "var(--palette-product-normal-hover, #009580)",
-      "button-secondary-bordered": "var(--palette-ink-dark, #252A31)",
-      "button-secondary-bordered-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-secondary-bordered-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-success-bordered": "var(--palette-green-normal, #28A138)",
-      "button-success-bordered-active": "var(--palette-green-normal-active, #1D7228)",
-      "button-success-bordered-hover": "var(--palette-green-normal-hover, #238B31)",
-      "button-warning-bordered": "var(--palette-orange-normal, #DF7B00)",
-      "button-warning-bordered-active": "var(--palette-orange-normal-active, #B26200)",
-      "button-warning-bordered-hover": "var(--palette-orange-normal-hover, #C96F00)",
-      "button-white-bordered": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-bordered-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-bordered-hover": "var(--palette-white-normal, #FFFFFF)",
-      "card": "var(--palette-cloud-normal, #E8EDF1)",
-      "checkbox-radio": "var(--palette-cloud-dark, #BAC7D5)",
-      "checkbox-radio-active": "var(--palette-ink-dark, #252A31)",
-      "checkbox-radio-error": "var(--palette-red-normal, #D21C1C)",
-      "checkbox-radio-focus": "var(--palette-blue-normal, #0172CB)",
-      "checkbox-radio-hover": "var(--palette-ink-normal, #4F5E71)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
+      },
+      "button-critical-bordered": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "button-critical-bordered-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+      "button-critical-bordered-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "button-facebook-bordered": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+      "button-facebook-bordered-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+      "button-facebook-bordered-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      "button-google-bordered": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-google-bordered-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-google-bordered-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-info-bordered": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "button-info-bordered-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+      "button-info-bordered-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
+      "button-primary-bordered": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+      "button-primary-bordered-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+      "button-primary-bordered-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
+      "button-secondary-bordered": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-secondary-bordered-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-secondary-bordered-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-success-bordered": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "button-success-bordered-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+      "button-success-bordered-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
+      "button-warning-bordered": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+      "button-warning-bordered-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+      "button-warning-bordered-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
+      "button-white-bordered": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-bordered-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-bordered-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "card": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "checkbox-radio": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "checkbox-radio-active": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "checkbox-radio-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "checkbox-radio-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "checkbox-radio-hover": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
-      },
-      "elevation-flat-border-color": "var(--palette-cloud-normal, #E8EDF1)",
-      "form-element": "var(--palette-cloud-dark, #BAC7D5)",
-      "form-element-active": "var(--palette-cloud-dark-active, #94A8BE)",
-      "form-element-border-color": "var(--palette-cloud-dark, #BAC7D5)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
+      },
+      "elevation-flat-border-color": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "form-element": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "form-element-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+      "form-element-border-color": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
       "form-element-disabled": "transparent",
-      "form-element-error": "var(--palette-red-normal, #D21C1C)",
-      "form-element-error-hover": "var(--palette-red-normal-hover, #B91919)",
-      "form-element-focus": "var(--palette-blue-normal, #0172CB)",
-      "form-element-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
+      "form-element-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "form-element-error-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "form-element-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "form-element-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
-      },
-      "input": "var(--palette-cloud-dark, #BAC7D5)",
-      "input-active": "var(--palette-cloud-dark-active, #94A8BE)",
-      "input-error": "var(--palette-red-normal, #D21C1C)",
-      "input-error-focus": "var(--palette-red-normal, #D21C1C)",
-      "input-error-hover": "var(--palette-red-normal-hover, #B91919)",
-      "input-focus": "var(--palette-blue-normal, #0172CB)",
-      "input-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-      "modal": "var(--palette-cloud-normal, #E8EDF1)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
+      },
+      "input": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "input-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+      "input-error": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "input-error-focus": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "input-error-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "input-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "input-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+      "modal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
-      },
-      "table": "var(--palette-cloud-normal, #E8EDF1)",
-      "table-cell": "var(--palette-cloud-dark, #BAC7D5)",
-      "table-head": "var(--palette-cloud-dark, #BAC7D5)",
-      "tag": "var(--palette-cloud-dark, #BAC7D5)",
-      "tag-focus": "var(--palette-blue-normal, #0172CB)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      },
+      "table": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+      "table-cell": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "table-head": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "tag": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "tag-focus": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
       "transparent": "transparent",
-      "white": "var(--palette-white-normal, #FFFFFF)",
+      "white": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
     },
     "divideOpacity": {
       "0": "0",
@@ -1674,102 +1674,102 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "fill": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "none": "none",
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "flex": {
@@ -1901,101 +1901,101 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "gradientColorStops": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "grayscale": {
@@ -2485,101 +2485,101 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "outlineColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "outlineOffset": {
@@ -2632,101 +2632,101 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "placeholderColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "placeholderOpacity": {
@@ -2749,200 +2749,200 @@ exports[`orbitPreset should match snapshot 1`] = `
     "ringColor": {
       "DEFAULT": "#3b82f6",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "ringOffsetColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "ringOffsetWidth": {
@@ -3093,102 +3093,102 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "stroke": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "none": "none",
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "strokeWidth": {
@@ -3198,313 +3198,313 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "supports": {},
     "textColor": {
-      "badge-bundle-basic-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-bundle-medium-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-bundle-top-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-critical-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-critical-subtle-foreground": "var(--palette-red-dark, #970C0C)",
-      "badge-dark-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-info-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-info-subtle-foreground": "var(--palette-blue-dark, #005AA3)",
-      "badge-neutral-foreground": "var(--palette-ink-dark, #252A31)",
-      "badge-success-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-success-subtle-foreground": "var(--palette-green-dark, #2D7738)",
-      "badge-warning-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "badge-warning-subtle-foreground": "var(--palette-orange-dark, #AD5700)",
-      "badge-white-foreground": "var(--palette-ink-dark, #252A31)",
+      "badge-bundle-basic-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-bundle-medium-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-bundle-top-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-critical-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-critical-subtle-foreground": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+      "badge-dark-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-info-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-info-subtle-foreground": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+      "badge-neutral-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "badge-success-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-success-subtle-foreground": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+      "badge-warning-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "badge-warning-subtle-foreground": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+      "badge-white-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
-      },
-      "button-critical-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "button-critical-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-critical-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "button-critical-subtle-foreground": "var(--palette-red-dark, #970C0C)",
-      "button-critical-subtle-foreground-active": "var(--palette-red-dark-active, #6D0909)",
-      "button-critical-subtle-foreground-hover": "var(--palette-red-dark-hover, #890B0B)",
-      "button-info-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "button-info-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-info-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "button-link-critical-foreground": "var(--palette-red-normal, #D21C1C)",
-      "button-link-critical-foreground-active": "var(--palette-red-normal-active, #9D1515)",
-      "button-link-critical-foreground-hover": "var(--palette-red-normal-hover, #B91919)",
-      "button-link-primary-foreground": "var(--palette-product-normal, #00A58E)",
-      "button-link-primary-foreground-active": "var(--palette-product-dark-active, #006657)",
-      "button-link-primary-foreground-hover": "var(--palette-product-dark-hover, #007060)",
-      "button-link-secondary-foreground": "var(--palette-ink-dark, #252A31)",
-      "button-link-secondary-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-link-secondary-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-primary-foreground": "var(--button-primary-foreground, var(--palette-white-normal, #FFFFFF))",
-      "button-primary-foreground-active": "var(--button-primary-foreground-active, var(--palette-white-normal, #FFFFFF))",
-      "button-primary-foreground-hover": "var(--button-primary-foreground-hover, var(--palette-white-normal, #FFFFFF))",
-      "button-primary-subtle-foreground": "var(--button-primary-subtle-foreground, var(--palette-product-dark, #007A69))",
-      "button-primary-subtle-foreground-active": "var(--button-primary-subtle-foreground-active, var(--palette-product-dark-active, #006657))",
-      "button-primary-subtle-foreground-hover": "var(--button-primary-subtle-foreground-hover, var(--palette-product-dark-hover, #007060))",
-      "button-secondary-foreground": "var(--palette-ink-dark, #252A31)",
-      "button-secondary-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-secondary-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-success-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "button-success-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-success-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "button-warning-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "button-warning-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-warning-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "button-white-foreground": "var(--palette-ink-dark, #252A31)",
-      "button-white-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "button-white-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
+      },
+      "button-critical-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-critical-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-critical-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-critical-subtle-foreground": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+      "button-critical-subtle-foreground-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+      "button-critical-subtle-foreground-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+      "button-info-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-info-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-info-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-link-critical-foreground": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "button-link-critical-foreground-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+      "button-link-critical-foreground-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      "button-link-primary-foreground": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+      "button-link-primary-foreground-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+      "button-link-primary-foreground-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+      "button-link-secondary-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-link-secondary-foreground-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-link-secondary-foreground-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-primary-foreground": "var(--button-primary-foreground, rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>))",
+      "button-primary-foreground-active": "var(--button-primary-foreground-active, rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>))",
+      "button-primary-foreground-hover": "var(--button-primary-foreground-hover, rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>))",
+      "button-primary-subtle-foreground": "var(--button-primary-subtle-foreground, rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>))",
+      "button-primary-subtle-foreground-active": "var(--button-primary-subtle-foreground-active, rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>))",
+      "button-primary-subtle-foreground-hover": "var(--button-primary-subtle-foreground-hover, rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>))",
+      "button-secondary-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-secondary-foreground-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-secondary-foreground-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+      "button-success-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-success-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-success-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-warning-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-warning-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-warning-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "button-white-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "button-white-foreground-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "button-white-foreground-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
-      },
-      "critical-foreground": "var(--palette-red-normal, #D21C1C)",
-      "form-element-disabled-foreground": "var(--palette-ink-normal, #4F5E71)",
-      "form-element-filled-foreground": "var(--palette-ink-dark, #252A31)",
-      "form-element-foreground": "var(--palette-ink-light, #697D95)",
-      "form-element-label-filled-foreground": "var(--palette-ink-normal, #4F5E71)",
-      "form-element-label-foreground": "var(--palette-ink-dark, #252A31)",
-      "form-element-prefix-foreground": "var(--palette-ink-normal, #4F5E71)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
+      },
+      "critical-foreground": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "form-element-disabled-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "form-element-filled-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "form-element-foreground": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+      "form-element-label-filled-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "form-element-label-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "form-element-prefix-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
-      },
-      "heading-foreground": "var(--palette-ink-dark, #252A31)",
-      "heading-foreground-inverted": "var(--palette-white-normal, #FFFFFF)",
-      "icon-critical-foreground": "var(--palette-red-normal, #D21C1C)",
-      "icon-info-foreground": "var(--palette-blue-normal, #0172CB)",
-      "icon-primary-foreground": "var(--palette-ink-dark, #252A31)",
-      "icon-secondary-foreground": "var(--palette-ink-normal, #4F5E71)",
-      "icon-success-foreground": "var(--palette-green-normal, #28A138)",
-      "icon-tertiary-foreground": "var(--palette-cloud-dark, #BAC7D5)",
-      "icon-warning-foreground": "var(--palette-orange-normal, #DF7B00)",
-      "info-foreground": "var(--palette-blue-normal, #0172CB)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
+      },
+      "heading-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "heading-foreground-inverted": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "icon-critical-foreground": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+      "icon-info-foreground": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+      "icon-primary-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "icon-secondary-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "icon-success-foreground": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "icon-tertiary-foreground": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+      "icon-warning-foreground": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+      "info-foreground": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
-      },
-      "link-critical-foreground": "var(--palette-red-dark, #970C0C)",
-      "link-critical-foreground-active": "var(--palette-red-darker, #760909)",
-      "link-critical-foreground-hover": "var(--palette-red-dark-hover, #890B0B)",
-      "link-info-foreground": "var(--palette-blue-dark, #005AA3)",
-      "link-info-foreground-active": "var(--palette-blue-darker, #004680)",
-      "link-info-foreground-hover": "var(--palette-blue-dark-hover, #004F8F)",
-      "link-primary-foreground": "var(--palette-product-dark, #007A69)",
-      "link-primary-foreground-active": "var(--palette-product-dark-active, #006657)",
-      "link-primary-foreground-hover": "var(--palette-product-dark-hover, #007060)",
-      "link-secondary-foreground": "var(--palette-ink-dark, #252A31)",
-      "link-secondary-foreground-active": "var(--palette-product-dark-active, #006657)",
-      "link-secondary-foreground-hover": "var(--palette-product-dark-hover, #007060)",
-      "link-success-foreground": "var(--palette-green-dark, #2D7738)",
-      "link-success-foreground-active": "var(--palette-green-darker, #235C2B)",
-      "link-success-foreground-hover": "var(--palette-green-dark-hover, #276831)",
-      "link-warning-foreground": "var(--palette-orange-dark, #AD5700)",
-      "link-warning-foreground-active": "var(--palette-orange-darker, #803F00)",
-      "link-warning-foreground-hover": "var(--palette-orange-dark-hover, #A75400)",
-      "link-white-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "link-white-foreground-active": "var(--palette-product-light, #E1F4F3)",
-      "link-white-foreground-hover": "var(--palette-product-light, #E1F4F3)",
-      "loading-foreground": "var(--palette-cloud-dark, #BAC7D5)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
+      },
+      "link-critical-foreground": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+      "link-critical-foreground-active": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+      "link-critical-foreground-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+      "link-info-foreground": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+      "link-info-foreground-active": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+      "link-info-foreground-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+      "link-primary-foreground": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+      "link-primary-foreground-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+      "link-primary-foreground-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+      "link-secondary-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "link-secondary-foreground-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+      "link-secondary-foreground-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+      "link-success-foreground": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+      "link-success-foreground-active": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+      "link-success-foreground-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+      "link-warning-foreground": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+      "link-warning-foreground-active": "#803F00",
+      "link-warning-foreground-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+      "link-white-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "link-white-foreground-active": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+      "link-white-foreground-hover": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+      "loading-foreground": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
-      },
-      "primary-foreground": "var(--palette-ink-dark, #252A31)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
+      },
+      "primary-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
-      },
-      "secondary-foreground": "var(--palette-ink-normal, #4F5E71)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
+      },
+      "secondary-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
-      },
-      "social-button-apple-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-apple-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-apple-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-apple-icon-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-facebook-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-facebook-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "social-button-facebook-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
+      },
+      "social-button-apple-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-apple-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-apple-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-apple-icon-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-facebook-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-facebook-foreground-active": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+      "social-button-facebook-foreground-hover": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
       "social-button-facebook-icon-foreground": "#3B5998",
-      "social-button-google-foreground": "var(--palette-ink-dark, #252A31)",
-      "social-button-google-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
-      "social-button-google-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",
+      "social-button-google-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+      "social-button-google-foreground-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+      "social-button-google-foreground-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
       "social-button-google-icon-foreground": "currentColor",
-      "social-button-twitter-foreground": "var(--palette-ink-normal, #4F5E71)",
-      "social-button-twitter-foreground-active": "var(--palette-ink-normal, #4F5E71)",
-      "social-button-twitter-foreground-hover": "var(--palette-ink-normal, #4F5E71)",
+      "social-button-twitter-foreground": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "social-button-twitter-foreground-active": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+      "social-button-twitter-foreground-hover": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
       "social-button-twitter-icon-foreground": "#00ACEE",
-      "success-foreground": "var(--palette-green-normal, #28A138)",
-      "tag-colored-foreground": "var(--palette-blue-darker, #004680)",
-      "tag-neutral-foreground": "var(--palette-ink-dark, #252A31)",
+      "success-foreground": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+      "tag-colored-foreground": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+      "tag-neutral-foreground": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
       "transparent": "transparent",
-      "warning-foreground": "var(--palette-orange-normal, #DF7B00)",
+      "warning-foreground": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
-      "white-foreground": "var(--palette-white-normal, #FFFFFF)",
+      "white-foreground": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
     },
     "textDecorationColor": {
       "blue": {
-        "dark": "var(--palette-blue-dark, #005AA3)",
-        "dark-active": "var(--palette-blue-dark-active, #003E70)",
-        "dark-hover": "var(--palette-blue-dark-hover, #004F8F)",
-        "darker": "var(--palette-blue-darker, #004680)",
-        "light": "var(--palette-blue-light, #E8F4FD)",
-        "light-active": "var(--palette-blue-light-active, #C7E4FA)",
-        "light-hover": "var(--palette-blue-light-hover, #DEF0FC)",
-        "normal": "var(--palette-blue-normal, #0172CB)",
-        "normal-active": "var(--palette-blue-normal-active, #01508E)",
-        "normal-hover": "var(--palette-blue-normal-hover, #0161AC)",
+        "dark": "rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>)",
+        "darker": "rgba(var(--palette-blue-darker, 0, 70, 128), <alpha-value>)",
+        "light": "rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>)",
+        "light-active": "rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>)",
+        "normal": "rgba(var(--palette-blue-normal, 1, 114, 203), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>)",
       },
       "bundle": {
-        "basic": "var(--palette-bundle-basic, #D7331C)",
-        "medium": "var(--palette-bundle-medium, #3B1EB0)",
+        "basic": "rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>)",
+        "medium": "rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>)",
       },
       "cloud": {
-        "dark": "var(--palette-cloud-dark, #BAC7D5)",
-        "dark-active": "var(--palette-cloud-dark-active, #94A8BE)",
-        "dark-hover": "var(--palette-cloud-dark-hover, #A6B6C8)",
-        "light": "var(--palette-cloud-light, #F5F7F9)",
-        "light-active": "var(--palette-cloud-light-active, #D6DEE6)",
-        "light-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-        "normal": "var(--palette-cloud-normal, #E8EDF1)",
-        "normal-active": "var(--palette-cloud-normal-active, #CAD4DE)",
-        "normal-hover": "var(--palette-cloud-normal-hover, #DCE3E9)",
+        "dark": "rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>)",
+        "light": "rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>)",
+        "light-active": "rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>)",
+        "normal": "rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>)",
       },
       "green": {
-        "dark": "var(--palette-green-dark, #2D7738)",
-        "dark-active": "var(--palette-green-dark-active, #1F5126)",
-        "dark-hover": "var(--palette-green-dark-hover, #276831)",
-        "darker": "var(--palette-green-darker, #235C2B)",
-        "light": "var(--palette-green-light, #EAF5EA)",
-        "light-active": "var(--palette-green-light-active, #CDE4CF)",
-        "light-hover": "var(--palette-green-light-hover, #E1EFE2)",
-        "normal": "var(--palette-green-normal, #28A138)",
-        "normal-active": "var(--palette-green-normal-active, #1D7228)",
-        "normal-hover": "var(--palette-green-normal-hover, #238B31)",
+        "dark": "rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>)",
+        "darker": "rgba(var(--palette-green-darker, 35, 92, 43), <alpha-value>)",
+        "light": "rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-green-normal, 40, 161, 56), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>)",
       },
       "ink": {
-        "dark": "var(--palette-ink-dark, #252A31)",
-        "dark-active": "var(--palette-ink-dark-active, #0B0C0F)",
-        "dark-hover": "var(--palette-ink-dark-hover, #181B20)",
-        "light": "var(--palette-ink-light, #697D95)",
-        "light-active": "var(--palette-ink-light-active, #4A617C)",
-        "light-hover": "var(--palette-ink-light-hover, #5D738E)",
-        "normal": "var(--palette-ink-normal, #4F5E71)",
-        "normal-active": "var(--palette-ink-normal-active, #324256)",
-        "normal-hover": "var(--palette-ink-normal-hover, #3E4E63)",
+        "dark": "rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>)",
+        "light": "rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>)",
+        "light-active": "rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>)",
+        "normal": "rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>)",
       },
       "orange": {
-        "dark": "var(--palette-orange-dark, #AD5700)",
-        "dark-active": "var(--palette-orange-dark-active, #954A00)",
-        "dark-hover": "var(--palette-orange-dark-hover, #A75400)",
-        "darker": "var(--palette-orange-darker, #803F00)",
-        "light": "var(--palette-orange-light, #FEF2E6)",
-        "light-active": "var(--palette-orange-light-active, #FAE2C6)",
-        "light-hover": "var(--palette-orange-light-hover, #FCECDA)",
-        "normal": "var(--palette-orange-normal, #DF7B00)",
-        "normal-active": "var(--palette-orange-normal-active, #B26200)",
-        "normal-hover": "var(--palette-orange-normal-hover, #C96F00)",
+        "dark": "rgba(var(--palette-orange-dark, 173, 87, 0), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-orange-dark-active, 149, 74, 0), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-orange-dark-hover, 167, 84, 0), <alpha-value>)",
+        "darker": "#803F00",
+        "light": "rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>)",
+        "light-active": "rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>)",
+        "normal": "rgba(var(--palette-orange-normal, 223, 123, 0), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-orange-normal-active, 178, 98, 0), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-orange-normal-hover, 201, 111, 0), <alpha-value>)",
       },
       "product": {
-        "dark": "var(--palette-product-dark, #007A69)",
-        "dark-active": "var(--palette-product-dark-active, #006657)",
-        "dark-hover": "var(--palette-product-dark-hover, #007060)",
-        "darker": "var(--palette-product-darker, #005C4E)",
-        "light": "var(--palette-product-light, #E1F4F3)",
-        "light-active": "var(--palette-product-light-active, #BFE8E2)",
-        "light-hover": "var(--palette-product-light-hover, #D6F0EC)",
-        "normal": "var(--palette-product-normal, #00A58E)",
-        "normal-active": "var(--palette-product-normal-active, #008472)",
-        "normal-hover": "var(--palette-product-normal-hover, #009580)",
+        "dark": "rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>)",
+        "darker": "rgba(var(--palette-product-darker, 0, 92, 78), <alpha-value>)",
+        "light": "rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>)",
+        "light-active": "rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>)",
+        "normal": "rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>)",
       },
       "red": {
-        "dark": "var(--palette-red-dark, #970C0C)",
-        "dark-active": "var(--palette-red-dark-active, #6D0909)",
-        "dark-hover": "var(--palette-red-dark-hover, #890B0B)",
-        "darker": "var(--palette-red-darker, #760909)",
-        "light": "var(--palette-red-light, #FAEAEA)",
-        "light-active": "var(--palette-red-light-active, #F3CECE)",
-        "light-hover": "var(--palette-red-light-hover, #F8E2E2)",
-        "normal": "var(--palette-red-normal, #D21C1C)",
-        "normal-active": "var(--palette-red-normal-active, #9D1515)",
-        "normal-hover": "var(--palette-red-normal-hover, #B91919)",
+        "dark": "rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>)",
+        "dark-active": "rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>)",
+        "dark-hover": "rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>)",
+        "darker": "rgba(var(--palette-red-darker, 118, 9, 9), <alpha-value>)",
+        "light": "rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>)",
+        "light-active": "rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>)",
+        "light-hover": "rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>)",
+        "normal": "rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>)",
       },
       "social": {
-        "facebook": "var(--palette-social-facebook, #3B5998)",
-        "facebook-active": "var(--palette-social-facebook-active, #354F88)",
-        "facebook-hover": "var(--palette-social-facebook-hover, #385490)",
+        "facebook": "rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>)",
+        "facebook-active": "rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>)",
+        "facebook-hover": "rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>)",
       },
       "transparent": "transparent",
       "white": {
-        "normal": "var(--palette-white-normal, #FFFFFF)",
-        "normal-active": "var(--palette-white-normal-active, #E7ECF1)",
-        "normal-hover": "var(--palette-white-normal-hover, #F1F4F7)",
+        "normal": "rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>)",
+        "normal-active": "rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>)",
+        "normal-hover": "rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>)",
       },
     },
     "textDecorationThickness": {
diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/colors.test.tsx b/packages/orbit-tailwind-preset/src/presets/__tests__/colors.test.tsx
deleted file mode 100644
index 054f829705..0000000000
--- a/packages/orbit-tailwind-preset/src/presets/__tests__/colors.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { getTokens } from "@kiwicom/orbit-design-tokens";
-
-import cssVariablesFoundation from "../foundation/cssVarsFoundation";
-import getTailwindTheme from "../foundation/getTailwindTheme";
-import { render, screen } from "../../testUtils";
-import Colors from "../__fixtures__/Colors";
-
-describe("colors", () => {
-  it("should generate correct styles", () => {
-    const theme = getTailwindTheme(getTokens(cssVariablesFoundation));
-    render(<Colors />);
-
-    Object.entries(theme.colors).forEach(([cat, values]) => {
-      if (cat === "transparent") return;
-
-      Object.keys(values).forEach(color => {
-        const el = screen.getByText(`${cat}-${color}`);
-        expect(el).toHaveStyle({
-          color: theme.colors[cat][color],
-        });
-      });
-    });
-  });
-});
diff --git a/packages/orbit-tailwind-preset/src/presets/foundation/cssVarsFoundation.ts b/packages/orbit-tailwind-preset/src/presets/foundation/cssVarsFoundation.ts
index b370d38066..c807b9224a 100644
--- a/packages/orbit-tailwind-preset/src/presets/foundation/cssVarsFoundation.ts
+++ b/packages/orbit-tailwind-preset/src/presets/foundation/cssVarsFoundation.ts
@@ -1,102 +1,157 @@
 import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+import { parseToRgba } from "color2k";
+
+const getChannels = (color: string) => parseToRgba(color).slice(0, -1).join(", ");
+const generateRgba = (color: string, fallback: string) =>
+  `rgba(var(--${color}, ${getChannels(fallback)}), <alpha-value>)`;
 
 const cssVarsFoundation = {
   palette: {
     product: {
-      normal: `var(--palette-product-normal, ${defaultTokens.paletteProductNormal})`,
-      normalHover: `var(--palette-product-normal-hover, ${defaultTokens.paletteProductNormalHover})`,
-      normalActive: `var(--palette-product-normal-active, ${defaultTokens.paletteProductNormalActive})`,
-      light: `var(--palette-product-light, ${defaultTokens.paletteProductLight})`,
-      lightHover: `var(--palette-product-light-hover, ${defaultTokens.paletteProductLightHover})`,
-      lightActive: `var(--palette-product-light-active, ${defaultTokens.paletteProductLightActive})`,
-      dark: `var(--palette-product-dark, ${defaultTokens.paletteProductDark})`,
-      darkHover: `var(--palette-product-dark-hover, ${defaultTokens.paletteProductDarkHover})`,
-      darkActive: `var(--palette-product-dark-active, ${defaultTokens.paletteProductDarkActive})`,
-      darker: `var(--palette-product-darker, ${defaultTokens.paletteProductDarker})`,
+      normal: generateRgba("palette-product-normal", defaultTokens.paletteProductNormal),
+      normalHover: generateRgba(
+        "palette-product-normal-hover",
+        defaultTokens.paletteProductNormalHover,
+      ),
+      normalActive: generateRgba(
+        "palette-product-normal-active",
+        defaultTokens.paletteProductNormalActive,
+      ),
+      light: generateRgba("palette-product-light", defaultTokens.paletteProductLight),
+      lightHover: generateRgba(
+        "palette-product-light-hover",
+        defaultTokens.paletteProductLightHover,
+      ),
+      lightActive: generateRgba(
+        "palette-product-light-active",
+        defaultTokens.paletteProductLightActive,
+      ),
+      dark: generateRgba("palette-product-dark", defaultTokens.paletteProductDark),
+      darkHover: generateRgba("palette-product-dark-hover", defaultTokens.paletteProductDarkHover),
+      darkActive: generateRgba(
+        "palette-product-dark-active",
+        defaultTokens.paletteProductDarkActive,
+      ),
+      darker: generateRgba("palette-product-darker", defaultTokens.paletteProductDarker),
     },
     blue: {
-      normal: `var(--palette-blue-normal, ${defaultTokens.paletteBlueNormal})`,
-      normalHover: `var(--palette-blue-normal-hover, ${defaultTokens.paletteBlueNormalHover})`,
-      normalActive: `var(--palette-blue-normal-active, ${defaultTokens.paletteBlueNormalActive})`,
-      light: `var(--palette-blue-light, ${defaultTokens.paletteBlueLight})`,
-      lightHover: `var(--palette-blue-light-hover, ${defaultTokens.paletteBlueLightHover})`,
-      lightActive: `var(--palette-blue-light-active, ${defaultTokens.paletteBlueLightActive})`,
-      dark: `var(--palette-blue-dark, ${defaultTokens.paletteBlueDark})`,
-      darkHover: `var(--palette-blue-dark-hover, ${defaultTokens.paletteBlueDarkHover})`,
-      darkActive: `var(--palette-blue-dark-active, ${defaultTokens.paletteBlueDarkActive})`,
-      darker: `var(--palette-blue-darker, ${defaultTokens.paletteBlueDarker})`,
+      normal: generateRgba("palette-blue-normal", defaultTokens.paletteBlueNormal),
+      normalHover: generateRgba("palette-blue-normal-hover", defaultTokens.paletteBlueNormalHover),
+      normalActive: generateRgba(
+        "palette-blue-normal-active",
+        defaultTokens.paletteBlueNormalActive,
+      ),
+      light: generateRgba("palette-blue-light", defaultTokens.paletteBlueLight),
+      lightHover: generateRgba("palette-blue-light-hover", defaultTokens.paletteBlueLightHover),
+      lightActive: generateRgba("palette-blue-light-active", defaultTokens.paletteBlueLightActive),
+      dark: generateRgba("palette-blue-dark", defaultTokens.paletteBlueDark),
+      darkHover: generateRgba("palette-blue-dark-hover", defaultTokens.paletteBlueDarkHover),
+      darkActive: generateRgba("palette-blue-dark-active", defaultTokens.paletteBlueDarkActive),
+      darker: generateRgba("palette-blue-darker", defaultTokens.paletteBlueDarker),
     },
     bundle: {
-      basic: `var(--palette-bundle-basic, ${defaultTokens.paletteBundleBasic})`,
-      medium: `var(--palette-bundle-medium, ${defaultTokens.paletteBundleMedium})`,
+      basic: generateRgba("palette-bundle-basic", defaultTokens.paletteBundleBasic),
+      medium: generateRgba("palette-bundle-medium", defaultTokens.paletteBundleMedium),
     },
     cloud: {
-      normal: `var(--palette-cloud-normal, ${defaultTokens.paletteCloudNormal})`,
-      normalHover: `var(--palette-cloud-normal-hover, ${defaultTokens.paletteCloudNormalHover})`,
-      normalActive: `var(--palette-cloud-normal-active, ${defaultTokens.paletteCloudNormalActive})`,
-      light: `var(--palette-cloud-light, ${defaultTokens.paletteCloudLight})`,
-      lightHover: `var(--palette-cloud-light-hover, ${defaultTokens.paletteCloudLightHover})`,
-      lightActive: `var(--palette-cloud-light-active, ${defaultTokens.paletteCloudLightActive})`,
-      dark: `var(--palette-cloud-dark, ${defaultTokens.paletteCloudDark})`,
-      darkHover: `var(--palette-cloud-dark-hover, ${defaultTokens.paletteCloudDarkHover})`,
-      darkActive: `var(--palette-cloud-dark-active, ${defaultTokens.paletteCloudDarkActive})`,
+      normal: generateRgba("palette-cloud-normal", defaultTokens.paletteCloudNormal),
+      normalHover: generateRgba(
+        "palette-cloud-normal-hover",
+        defaultTokens.paletteCloudNormalHover,
+      ),
+      normalActive: generateRgba(
+        "palette-cloud-normal-active",
+        defaultTokens.paletteCloudNormalActive,
+      ),
+      light: generateRgba("palette-cloud-light", defaultTokens.paletteCloudLight),
+      lightHover: generateRgba("palette-cloud-light-hover", defaultTokens.paletteCloudLightHover),
+      lightActive: generateRgba(
+        "palette-cloud-light-active",
+        defaultTokens.paletteCloudLightActive,
+      ),
+      dark: generateRgba("palette-cloud-dark", defaultTokens.paletteCloudDark),
+      darkHover: generateRgba("palette-cloud-dark-hover", defaultTokens.paletteCloudDarkHover),
+      darkActive: generateRgba("palette-cloud-dark-active", defaultTokens.paletteCloudDarkActive),
     },
     green: {
-      normal: `var(--palette-green-normal, ${defaultTokens.paletteGreenNormal})`,
-      normalHover: `var(--palette-green-normal-hover, ${defaultTokens.paletteGreenNormalHover})`,
-      normalActive: `var(--palette-green-normal-active, ${defaultTokens.paletteGreenNormalActive})`,
-      light: `var(--palette-green-light, ${defaultTokens.paletteGreenLight})`,
-      lightHover: `var(--palette-green-light-hover, ${defaultTokens.paletteGreenLightHover})`,
-      lightActive: `var(--palette-green-light-active, ${defaultTokens.paletteGreenLightActive})`,
-      dark: `var(--palette-green-dark, ${defaultTokens.paletteGreenDark})`,
-      darkHover: `var(--palette-green-dark-hover, ${defaultTokens.paletteGreenDarkHover})`,
-      darkActive: `var(--palette-green-dark-active, ${defaultTokens.paletteGreenDarkActive})`,
-      darker: `var(--palette-green-darker, ${defaultTokens.paletteGreenDarker})`,
+      normal: generateRgba("palette-green-normal", defaultTokens.paletteGreenNormal),
+      normalHover: generateRgba(
+        "palette-green-normal-hover",
+        defaultTokens.paletteGreenNormalHover,
+      ),
+      normalActive: generateRgba(
+        "palette-green-normal-active",
+        defaultTokens.paletteGreenNormalActive,
+      ),
+      light: generateRgba("palette-green-light", defaultTokens.paletteGreenLight),
+      lightHover: generateRgba("palette-green-light-hover", defaultTokens.paletteGreenLightHover),
+      lightActive: generateRgba(
+        "palette-green-light-active",
+        defaultTokens.paletteGreenLightActive,
+      ),
+      dark: generateRgba("palette-green-dark", defaultTokens.paletteGreenDark),
+      darkHover: generateRgba("palette-green-dark-hover", defaultTokens.paletteGreenDarkHover),
+      darkActive: generateRgba("palette-green-dark-active", defaultTokens.paletteGreenDarkActive),
+      darker: generateRgba("palette-green-darker", defaultTokens.paletteGreenDarker),
     },
     ink: {
-      normal: `var(--palette-ink-normal, ${defaultTokens.paletteInkNormal})`,
-      normalHover: `var(--palette-ink-normal-hover, ${defaultTokens.paletteInkNormalHover})`,
-      normalActive: `var(--palette-ink-normal-active, ${defaultTokens.paletteInkNormalActive})`,
-      light: `var(--palette-ink-light, ${defaultTokens.paletteInkLight})`,
-      lightHover: `var(--palette-ink-light-hover, ${defaultTokens.paletteInkLightHover})`,
-      lightActive: `var(--palette-ink-light-active, ${defaultTokens.paletteInkLightActive})`,
-      dark: `var(--palette-ink-dark, ${defaultTokens.paletteInkDark})`,
-      darkHover: `var(--palette-ink-dark-hover, ${defaultTokens.paletteInkDarkHover})`,
-      darkActive: `var(--palette-ink-dark-active, ${defaultTokens.paletteInkDarkActive})`,
+      normal: generateRgba("palette-ink-normal", defaultTokens.paletteInkNormal),
+      normalHover: generateRgba("palette-ink-normal-hover", defaultTokens.paletteInkNormalHover),
+      normalActive: generateRgba("palette-ink-normal-active", defaultTokens.paletteInkNormalActive),
+      light: generateRgba("palette-ink-light", defaultTokens.paletteInkLight),
+      lightHover: generateRgba("palette-ink-light-hover", defaultTokens.paletteInkLightHover),
+      lightActive: generateRgba("palette-ink-light-active", defaultTokens.paletteInkLightActive),
+      dark: generateRgba("palette-ink-dark", defaultTokens.paletteInkDark),
+      darkHover: generateRgba("palette-ink-dark-hover", defaultTokens.paletteInkDarkHover),
+      darkActive: generateRgba("palette-ink-dark-active", defaultTokens.paletteInkDarkActive),
     },
     orange: {
-      normal: `var(--palette-orange-normal, ${defaultTokens.paletteOrangeNormal})`,
-      normalHover: `var(--palette-orange-normal-hover, ${defaultTokens.paletteOrangeNormalHover})`,
-      normalActive: `var(--palette-orange-normal-active, ${defaultTokens.paletteOrangeNormalActive})`,
-      light: `var(--palette-orange-light, ${defaultTokens.paletteOrangeLight})`,
-      lightHover: `var(--palette-orange-light-hover, ${defaultTokens.paletteOrangeLightHover})`,
-      lightActive: `var(--palette-orange-light-active, ${defaultTokens.paletteOrangeLightActive})`,
-      dark: `var(--palette-orange-dark, ${defaultTokens.paletteOrangeDark})`,
-      darkHover: `var(--palette-orange-dark-hover, ${defaultTokens.paletteOrangeDarkHover})`,
-      darkActive: `var(--palette-orange-dark-active, ${defaultTokens.paletteOrangeDarkActive})`,
-      darker: `var(--palette-orange-darker, ${defaultTokens.paletteOrangeDarker})`,
+      normal: generateRgba("palette-orange-normal", defaultTokens.paletteOrangeNormal),
+      normalHover: generateRgba(
+        "palette-orange-normal-hover",
+        defaultTokens.paletteOrangeNormalHover,
+      ),
+      normalActive: generateRgba(
+        "palette-orange-normal-active",
+        defaultTokens.paletteOrangeNormalActive,
+      ),
+      light: generateRgba("palette-orange-light", defaultTokens.paletteOrangeLight),
+      lightHover: generateRgba("palette-orange-light-hover", defaultTokens.paletteOrangeLightHover),
+      lightActive: generateRgba(
+        "palette-orange-light-active",
+        defaultTokens.paletteOrangeLightActive,
+      ),
+      dark: generateRgba("palette-orange-dark", defaultTokens.paletteOrangeDark),
+      darkHover: generateRgba("palette-orange-dark-hover", defaultTokens.paletteOrangeDarkHover),
+      darkActive: generateRgba("palette-orange-dark-active", defaultTokens.paletteOrangeDarkActive),
     },
     red: {
-      normal: `var(--palette-red-normal, ${defaultTokens.paletteRedNormal})`,
-      normalHover: `var(--palette-red-normal-hover, ${defaultTokens.paletteRedNormalHover})`,
-      normalActive: `var(--palette-red-normal-active, ${defaultTokens.paletteRedNormalActive})`,
-      light: `var(--palette-red-light, ${defaultTokens.paletteRedLight})`,
-      lightHover: `var(--palette-red-light-hover, ${defaultTokens.paletteRedLightHover})`,
-      lightActive: `var(--palette-red-light-active, ${defaultTokens.paletteRedLightActive})`,
-      dark: `var(--palette-red-dark, ${defaultTokens.paletteRedDark})`,
-      darkHover: `var(--palette-red-dark-hover, ${defaultTokens.paletteRedDarkHover})`,
-      darkActive: `var(--palette-red-dark-active, ${defaultTokens.paletteRedDarkActive})`,
-      darker: `var(--palette-red-darker, ${defaultTokens.paletteRedDarker})`,
+      normal: generateRgba("palette-red-normal", defaultTokens.paletteRedNormal),
+      normalHover: generateRgba("palette-red-normal-hover", defaultTokens.paletteRedNormalHover),
+      normalActive: generateRgba("palette-red-normal-active", defaultTokens.paletteRedNormalActive),
+      light: generateRgba("palette-red-light", defaultTokens.paletteRedLight),
+      lightHover: generateRgba("palette-red-light-hover", defaultTokens.paletteRedLightHover),
+      lightActive: generateRgba("palette-red-light-active", defaultTokens.paletteRedLightActive),
+      dark: generateRgba("palette-red-dark", defaultTokens.paletteRedDark),
+      darkHover: generateRgba("palette-red-dark-hover", defaultTokens.paletteRedDarkHover),
+      darkActive: generateRgba("palette-red-dark-active", defaultTokens.paletteRedDarkActive),
+      darker: generateRgba("palette-red-darker", defaultTokens.paletteRedDarker),
     },
     social: {
-      facebook: `var(--palette-social-facebook, ${defaultTokens.paletteSocialFacebook})`,
-      facebookHover: `var(--palette-social-facebook-hover, ${defaultTokens.paletteSocialFacebookHover})`,
-      facebookActive: `var(--palette-social-facebook-active, ${defaultTokens.paletteSocialFacebookActive})`,
+      facebook: generateRgba("palette-social-facebook", defaultTokens.paletteSocialFacebook),
+      facebookHover: generateRgba(
+        "palette-social-facebook-hover",
+        defaultTokens.paletteSocialFacebookHover,
+      ),
+      facebookActive: generateRgba(
+        "palette-social-facebook-active",
+        defaultTokens.paletteSocialFacebookActive,
+      ),
     },
     white: {
-      normal: `var(--palette-white-normal, ${defaultTokens.paletteWhiteNormal})`,
-      normalHover: `var(--palette-white-normal-hover, ${defaultTokens.paletteWhiteHover})`,
-      normalActive: `var(--palette-white-normal-active, ${defaultTokens.paletteWhiteActive})`,
+      normal: generateRgba("palette-white-normal", defaultTokens.paletteWhiteNormal),
+      normalHover: generateRgba("palette-white-normal-hover", defaultTokens.paletteWhiteHover),
+      normalActive: generateRgba("palette-white-normal-active", defaultTokens.paletteWhiteActive),
     },
   },
 };