From a83228aaf26b2b9b780b83de88bc178fecdb04d7 Mon Sep 17 00:00:00 2001
From: Gareth Jones <gareth@clickhouse.com>
Date: Wed, 24 Jul 2024 13:17:16 -0400
Subject: [PATCH] Updating feedback colours (#448)

* Tweaking feedback colours

* Updating danger button colours
---
 src/styles/variables.classic.json |  26 ++--
 src/styles/variables.dark.json    | 220 +++++++++++++++---------------
 src/styles/variables.json         | 114 ++++++++--------
 src/styles/variables.light.json   | 114 ++++++++--------
 4 files changed, 237 insertions(+), 237 deletions(-)

diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json
index 055f601e..3dd9ee98 100644
--- a/src/styles/variables.classic.json
+++ b/src/styles/variables.classic.json
@@ -41,9 +41,9 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
-              "hover": "#ff9898",
-              "active": "lch(78 26.3 22)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 59.6% 59.6% / 0.2)",
+              "active": "rgb(100% 72.9% 72.9% / 0.3)"
             },
             "text": {
               "default": "#c10000"
@@ -130,7 +130,7 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
               "hover": "#ff9898",
               "active": "#ffbaba"
             },
@@ -140,9 +140,9 @@
               "active": "#c10000"
             },
             "stroke": {
-              "default": "#ffdddd",
-              "hover": "#ff9898",
-              "active": "lch(78 26.3 22)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 59.6% 59.6% / 0.2)",
+              "active": "rgb(100% 72.9% 72.9% / 0.3)"
             }
           },
           "ghost": {
@@ -164,7 +164,7 @@
           },
           "info": {
             "background": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             },
@@ -174,7 +174,7 @@
               "active": "#135be6"
             },
             "stroke": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             }
@@ -246,7 +246,7 @@
           "stroke": {
             "default": "#e6e7e9",
             "hover": "#e6e7e9",
-            "active": "lch(84 2.28 258)",
+            "active": "rgb(81.2% 82.3% 83.8%)",
             "disabled": "rgba(0,0,0,0)"
           }
         }
@@ -328,7 +328,7 @@
           "background": {
             "default": "#ffffff",
             "hover": "#f6f7fa",
-            "active": "lch(92.4 1.49 272)",
+            "active": "rgb(91.6% 92% 93.1%)",
             "disabled": "#dfdfdf"
           },
           "title": {
@@ -422,8 +422,8 @@
             "active": "#161517"
           },
           "background": {
-            "default": "lch(97.2 1.57 272 / 0.9)",
-            "hover": "lch(91.8 1.07 266)",
+            "default": "rgb(96.5% 96.9% 98% / 0.9)",
+            "hover": "rgb(90.4% 90.8% 91.6%)",
             "active": "lch(89.3 1.07 266)"
           },
           "stroke": {
diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json
index e3c0bd73..d2d4facc 100644
--- a/src/styles/variables.dark.json
+++ b/src/styles/variables.dark.json
@@ -5,12 +5,12 @@
         "default": {
           "label": {
             "default": "#ffffff",
-            "hover": "lch(100 0 0)",
+            "hover": "rgb(100% 100% 100%)",
             "active": "#ffffff"
           },
           "icon": {
             "default": "#ffffff",
-            "hover": "lch(100 0 0)",
+            "hover": "rgb(100% 100% 100%)",
             "active": "#ffffff"
           }
         },
@@ -22,7 +22,7 @@
           },
           "icon": {
             "default": "#FAFF69",
-            "hover": "lch(98.8 31.4 104)",
+            "hover": "rgb(99.6% 100% 75%)",
             "active": "#FAFF69"
           }
         }
@@ -32,11 +32,11 @@
       "color": {
         "background": {
           "default": "#1F1F1C",
-          "success": "#004206",
-          "neutral": "#414141",
-          "danger": "#610000",
-          "warning": "#4f2b00",
-          "info": "#09255B"
+          "success": "rgb(20% 100% 26.7% / 0.2)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.2)",
+          "warning": "rgb(100% 58% 8.63% / 0.2)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.2)"
         },
         "text": {
           "default": "#b3b6bd",
@@ -48,11 +48,11 @@
         },
         "iconBackground": {
           "default": "#1F1F1C",
-          "success": "#004206",
-          "neutral": "#414141",
-          "danger": "#610000",
-          "warning": "#4f2b00",
-          "info": "#09255B"
+          "success": "rgb(20% 100% 26.7% / 0)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0)",
+          "danger": "rgb(100% 13.7% 13.7% / 0)",
+          "warning": "rgb(100% 58% 8.63% / 0)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0)"
         },
         "iconForeground": {
           "default": "#b3b6bd",
@@ -82,12 +82,12 @@
       "color": {
         "background": {
           "default": "#1F1F1C",
-          "success": "#004206",
-          "neutral": "#414141",
-          "danger": "#610000",
+          "success": "rgb(20% 100% 26.7% / 0.2)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.2)",
           "disabled": "#414141",
-          "info": "#09255B",
-          "warning": "#4f2b00"
+          "info": "rgb(7.45% 35.7% 90.2% / 0.2)",
+          "warning": "rgb(100% 58% 8.63% / 0.2)"
         },
         "text": {
           "default": "#b3b6bd",
@@ -100,12 +100,12 @@
         },
         "stroke": {
           "default": "#323232",
-          "success": "#004206",
-          "neutral": "#414141",
-          "danger": "#610000",
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0.1)",
+          "danger": "rgb(100% 22.3% 22.3% / 0.2)",
           "disabled": "rgb(24.2% 24.2% 24.2%)",
-          "info": "#09255B",
-          "warning": "#4f2b00"
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)"
         }
       }
     },
@@ -124,8 +124,8 @@
           "muted": "#b3b6bd"
         },
         "title": {
-          "default": "lch(97.5 0 0)",
-          "muted": "lch(97.5 0 0)"
+          "default": "rgb(97.5% 97.5% 97.5%)",
+          "muted": "rgb(97.5% 97.5% 97.5%)"
         }
       }
     },
@@ -148,7 +148,7 @@
             "stroke": {
               "default": "#FAFF69",
               "hover": "#FAFF69",
-              "active": "lch(83.3 60.6 103)",
+              "active": "rgb(83% 84.6% 34.9%)",
               "disabled": "#414141"
             }
           },
@@ -174,9 +174,9 @@
           },
           "danger": {
             "background": {
-              "default": "#610000",
-              "hover": "#910000",
-              "active": "lch(28.6 65.8 40)",
+              "default": "rgb(100% 13.7% 13.7% / 0.2)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.3)",
+              "active": "rgb(100% 13.7% 13.7% / 0.45)",
               "disabled": "#414141"
             },
             "text": {
@@ -186,9 +186,9 @@
               "disabled": "#808080"
             },
             "stroke": {
-              "default": "#610000",
-              "hover": "#910000",
-              "active": "lch(28.6 65.8 40)",
+              "default": "rgb(100% 22.3% 22.3% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.05)",
+              "active": "rgb(100% 13.7% 13.7% / 0.05)",
               "disabled": "#414141"
             }
           },
@@ -237,12 +237,12 @@
             "background": {
               "default": "#FAFF69",
               "hover": "rgb(98.6% 100% 58.8%)",
-              "active": "lch(86.5 62.9 103)"
+              "active": "rgb(86.2% 87.9% 36.2%)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",
               "hover": "rgb(98.6% 100% 58.8%)",
-              "active": "lch(86.5 62.9 103)"
+              "active": "rgb(86.2% 87.9% 36.2%)"
             },
             "text": {
               "default": "#1F1F1C",
@@ -260,9 +260,9 @@
           },
           "danger": {
             "background": {
-              "default": "#610000",
+              "default": "rgb(100% 13.7% 13.7% / 0.2)",
               "hover": "#ff9898",
-              "active": "#ffbaba"
+              "active": "#c10000"
             },
             "text": {
               "default": "#ffbaba",
@@ -270,9 +270,9 @@
               "active": "#ffbaba"
             },
             "stroke": {
-              "default": "#610000",
-              "hover": "#910000",
-              "active": "lch(28.6 65.8 40)"
+              "default": "rgb(100% 13.7% 13.7% / 0.2)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.3)",
+              "active": "rgb(100% 13.7% 13.7% / 0.45)"
             }
           },
           "ghost": {
@@ -294,7 +294,7 @@
           },
           "info": {
             "background": {
-              "default": "#09255B",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.2)",
               "hover": "#0e44ad",
               "active": "#135be6"
             },
@@ -304,7 +304,7 @@
               "active": "#b5cdf9"
             },
             "stroke": {
-              "default": "#09255B",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.2)",
               "hover": "#0e44ad",
               "active": "#135be6"
             }
@@ -317,14 +317,14 @@
             "main": {
               "default": "#FAFF69",
               "hover": "lch(89.7 46.7 104)",
-              "active": "lch(83.3 60.6 103)",
-              "disabled": "lch(25.2 0 0)"
+              "active": "rgb(83% 84.6% 34.9%)",
+              "disabled": "rgb(23.3% 23.3% 23.3%)"
             },
             "action": {
-              "default": "lch(87.8 63.4 103)",
-              "hover": "lch(82.5 43 104)",
-              "active": "lch(73.3 53.3 103)",
-              "disabled": "lch(22.2 0 0)"
+              "default": "rgb(88.2% 90% 37.1%)",
+              "hover": "rgb(81.8% 83.2% 49.2%)",
+              "active": "rgb(73% 74.4% 30.7%)",
+              "disabled": "rgb(20.5% 20.5% 20.5%)"
             }
           },
           "text": {
@@ -340,17 +340,17 @@
             "disabled": "rgba(0,0,0,0)"
           },
           "divide": {
-            "default": "lch(85.4 61.7 103)",
-            "hover": "lch(78.5 40.9 104)",
-            "active": "lch(72.9 53 103)",
-            "disabled": "lch(23.1 0 0)"
+            "default": "rgb(85.8% 87.5% 36%)",
+            "hover": "rgb(77.8% 79.1% 46.8%)",
+            "active": "rgb(72.6% 74% 30.5%)",
+            "disabled": "rgb(21.3% 21.3% 21.3%)"
           }
         },
         "secondary": {
           "divide": {
             "default": "lch(31.2 0 0)",
             "hover": "lch(34.8 0 0)",
-            "active": "lch(24.8 2.56 307)",
+            "active": "rgb(23.7% 22.9% 24.4%)",
             "disabled": "lch(23.4 0 0)"
           },
           "background": {
@@ -362,9 +362,9 @@
             },
             "action": {
               "default": "#282828",
-              "hover": "lch(18.2 0 0)",
-              "active": "lch(21.9 0 0)",
-              "disabled": "lch(23.9 0 0)"
+              "hover": "rgb(17.8% 17.8% 17.8%)",
+              "active": "rgb(20.7% 20.7% 20.7%)",
+              "disabled": "rgb(22.1% 22.1% 22.1%)"
             }
           },
           "text": {
@@ -376,7 +376,7 @@
           "stroke": {
             "default": "#414141",
             "hover": "#414141",
-            "active": "lch(24.8 2.56 307)",
+            "active": "rgb(23.7% 22.9% 24.4%)",
             "disabled": "rgba(0,0,0,0)"
           }
         }
@@ -386,7 +386,7 @@
           "background": {
             "default": "rgba(0,0,0,0)",
             "hover": "#282828",
-            "active": "lch(18.2 0 0)",
+            "active": "rgb(17.8% 17.8% 17.8%)",
             "disabled": "rgba(0,0,0,0)",
             "disabled-active": "lch(0 0 0 / 0)",
             "panel": "rgba(0,0,0,0)"
@@ -419,7 +419,7 @@
           "background": {
             "default": "rgba(0,0,0,0)",
             "hover": "#282828",
-            "active": "lch(15.8 0 0)"
+            "active": "rgb(15.4% 15.4% 15.4%)"
           },
           "stroke": {
             "default": "#323232",
@@ -440,13 +440,13 @@
           "background": {
             "default": "#1F1F1C",
             "hover": "#282828",
-            "active": "lch(15.3 0 0)",
+            "active": "rgb(14.9% 14.9% 14.9%)",
             "disabled": "#414141"
           },
           "title": {
-            "default": "lch(97.5 0 0)",
-            "hover": "lch(97.5 0 0)",
-            "active": "lch(97.5 0 0)",
+            "default": "rgb(97.5% 97.5% 97.5%)",
+            "hover": "rgb(97.5% 97.5% 97.5%)",
+            "active": "rgb(97.5% 97.5% 97.5%)",
             "disabled": "#808080"
           },
           "description": {
@@ -464,7 +464,7 @@
           "stroke": {
             "default": "#323232",
             "hover": "#323232",
-            "active": "lch(19.7 0 0)",
+            "active": "rgb(18.6% 18.6% 18.6%)",
             "disabled": "#414141"
           }
         }
@@ -474,13 +474,13 @@
           "background": {
             "default": "#1F1F1C",
             "hover": "#282828",
-            "active": "lch(15.3 0 0)",
+            "active": "rgb(14.9% 14.9% 14.9%)",
             "disabled": "#414141"
           },
           "title": {
-            "default": "lch(97.5 0 0)",
-            "hover": "lch(97.5 0 0)",
-            "active": "lch(97.5 0 0)",
+            "default": "rgb(97.5% 97.5% 97.5%)",
+            "hover": "rgb(97.5% 97.5% 97.5%)",
+            "active": "rgb(97.5% 97.5% 97.5%)",
             "disabled": "#808080"
           },
           "description": {
@@ -507,9 +507,9 @@
               "disabled": "#414141"
             },
             "title": {
-              "default": "lch(97.5 0 0)",
-              "hover": "lch(97.5 0 0)",
-              "active": "lch(97.5 0 0)",
+              "default": "rgb(97.5% 97.5% 97.5%)",
+              "hover": "rgb(97.5% 97.5% 97.5%)",
+              "active": "rgb(97.5% 97.5% 97.5%)",
               "disabled": "#808080"
             },
             "description": {
@@ -535,9 +535,9 @@
               "disabled": "#414141"
             },
             "title": {
-              "default": "lch(97.5 0 0)",
-              "hover": "lch(97.5 0 0)",
-              "active": "lch(97.5 0 0)",
+              "default": "rgb(97.5% 97.5% 97.5%)",
+              "hover": "rgb(97.5% 97.5% 97.5%)",
+              "active": "rgb(97.5% 97.5% 97.5%)",
               "disabled": "#808080"
             },
             "description": {
@@ -568,9 +568,9 @@
             "active": "#FAFF69"
           },
           "background": {
-            "default": "lch(16.1 0 0 / 0.9)",
-            "hover": "lch(18.2 0 0 / 0.9)",
-            "active": "lch(20.2 0 0 / 0.9)"
+            "default": "rgb(15.7% 15.7% 15.7% / 0.9)",
+            "hover": "rgb(17.8% 17.8% 17.8% / 0.9)",
+            "active": "rgb(19.9% 19.9% 19.9% / 0.9)"
           },
           "stroke": {
             "default": "linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%)",
@@ -584,8 +584,8 @@
     "checkbox": {
       "color": {
         "background": {
-          "default": "lch(18.2 0 0)",
-          "hover": "lch(18.2 0 0)",
+          "default": "rgb(17.8% 17.8% 17.8%)",
+          "hover": "rgb(17.8% 17.8% 17.8%)",
           "active": "#FAFF69",
           "disabled": "#414141"
         },
@@ -663,7 +663,7 @@
       "monacoTheme": {
         "parameter": {
           "foreground": "#c0c0c0",
-          "background": "#414141"
+          "background": "rgb(62.7% 62.7% 62.7% / 0.2)"
         }
       }
     },
@@ -683,11 +683,11 @@
     "field": {
       "color": {
         "background": {
-          "default": "lch(18.2 0 0)",
-          "hover": "lch(20.2 0 0)",
-          "active": "lch(20.2 0 0)",
+          "default": "rgb(17.8% 17.8% 17.8%)",
+          "hover": "rgb(19.9% 19.9% 19.9%)",
+          "active": "rgb(19.9% 19.9% 19.9%)",
           "disabled": "#414141",
-          "error": "lch(20.2 0 0)"
+          "error": "rgb(19.9% 19.9% 19.9%)"
         },
         "text": {
           "default": "#e6e7e9",
@@ -697,8 +697,8 @@
           "error": "#ffbaba"
         },
         "stroke": {
-          "default": "lch(24.7 0 0)",
-          "hover": "lch(28.5 0 0)",
+          "default": "rgb(23.6% 23.6% 23.6%)",
+          "hover": "rgb(27.4% 27.4% 27.4%)",
           "active": "#FAFF69",
           "disabled": "#414141",
           "error": "#ffbaba"
@@ -711,11 +711,11 @@
           "error": "#ffbaba"
         },
         "format": {
-          "default": "lch(62.9 0 0)",
-          "hover": "lch(62.9 0 0)",
-          "active": "lch(62.9 0 0)",
+          "default": "rgb(60.2% 60.2% 60.2%)",
+          "hover": "rgb(60.2% 60.2% 60.2%)",
+          "active": "rgb(60.2% 60.2% 60.2%)",
           "disabled": "#808080",
-          "error": "lch(62.9 0 0)"
+          "error": "rgb(60.2% 60.2% 60.2%)"
         },
         "genericLabel": {
           "default": "#ffffff",
@@ -741,16 +741,16 @@
           },
           "background": {
             "default": "#282828",
-            "hover": "lch(23.5 0 0)",
+            "hover": "rgb(23.1% 23.1% 23.1%)",
             "active": "#282828",
             "disabled": "#414141"
           },
           "format": {
             "default": "lch(62.9 0 0)",
-            "hover": "lch(62.9 0 0)",
-            "active": "lch(62.9 0 0)",
+            "hover": "rgb(60.2% 60.2% 60.2%)",
+            "active": "rgb(60.2% 60.2% 60.2%)",
             "disabled": "#808080",
-            "error": "lch(62.9 0 0)"
+            "error": "rgb(60.2% 60.2% 60.2%)"
           },
           "stroke": {
             "default": "#323232"
@@ -835,8 +835,8 @@
     "radio": {
       "color": {
         "background": {
-          "default": "lch(18.2 0 0)",
-          "hover": "lch(18.2 0 0)",
+          "default": "rgb(17.8% 17.8% 17.8%)",
+          "hover": "rgb(17.8% 17.8% 17.8%)",
           "active": "#FAFF69",
           "disabled": "#414141"
         },
@@ -848,7 +848,7 @@
         },
         "indicator": {
           "default": "#1F1F1C",
-          "hover": "lch(18.2 0 0)",
+          "hover": "rgb(17.8% 17.8% 17.8%)",
           "active": "#151515",
           "disabled": "#808080"
         }
@@ -1093,10 +1093,10 @@
           "background": {
             "default": "#282828",
             "hover": "#282828",
-            "active": "lch(18.2 0 0)"
+            "active": "rgb(17.8% 17.8% 17.8%)"
           },
           "title": {
-            "default": "lch(97.5 0 0)"
+            "default": "rgb(97.5% 97.5% 97.5%)"
           },
           "icon": {
             "default": "#ffffff"
@@ -1116,7 +1116,7 @@
           "background": {
             "default": "#1F1F1C",
             "hover": "lch(15.8 0 0)",
-            "active": "lch(17.9 0 0)"
+            "active": "rgb(17.5% 17.5% 17.5%)"
           },
           "stroke": {
             "default": "#323232"
@@ -1195,7 +1195,7 @@
     "toast": {
       "color": {
         "title": {
-          "default": "lch(97.5 0 0)"
+          "default": "rgb(97.5% 97.5% 97.5%)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1204,7 +1204,7 @@
           "default": "#414141"
         },
         "icon": {
-          "default": "lch(97.5 0 0)",
+          "default": "rgb(97.5% 97.5% 97.5%)",
           "success": "#CCFFD0",
           "warning": "#ffca8b",
           "danger": "#ffbaba"
@@ -1227,7 +1227,7 @@
           "default": "#1F1F1C"
         },
         "title": {
-          "default": "lch(97.5 0 0)"
+          "default": "rgb(97.5% 97.5% 97.5%)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1243,7 +1243,7 @@
           "default": "#282828"
         },
         "title": {
-          "default": "lch(97.5 0 0)"
+          "default": "rgb(97.5% 97.5% 97.5%)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1337,10 +1337,10 @@
           "default": "#FAFF69"
         },
         "shadow": {
-          "default": "lch(6.77 0 0 / 0.6)"
+          "default": "rgb(8.24% 8.24% 8.24% / 0.6)"
         },
         "title": {
-          "default": "lch(97.5 0 0)",
+          "default": "rgb(97.5% 97.5% 97.5%)",
           "muted": "#b3b6bd"
         }
       }
@@ -1348,23 +1348,23 @@
     "feedback": {
       "color": {
         "info": {
-          "background": "#09255B",
+          "background": "rgb(7.45% 35.7% 90.2% / 0.2)",
           "foreground": "#b5cdf9"
         },
         "success": {
-          "background": "#004206",
+          "background": "rgb(20% 100% 26.7% / 0.2)",
           "foreground": "#CCFFD0"
         },
         "warning": {
-          "background": "#4f2b00",
+          "background": "rgb(100% 58% 8.63% / 0.2)",
           "foreground": "#ffca8b"
         },
         "danger": {
-          "background": "#610000",
+          "background": "rgb(100% 13.7% 13.7% / 0.2)",
           "foreground": "#ffbaba"
         },
         "neutral": {
-          "background": "#414141",
+          "background": "rgb(62.7% 62.7% 62.7% / 0.2)",
           "foreground": "#c0c0c0",
           "stroke": "#323232"
         }
diff --git a/src/styles/variables.json b/src/styles/variables.json
index edcdbbe7..8c42f761 100644
--- a/src/styles/variables.json
+++ b/src/styles/variables.json
@@ -128,11 +128,11 @@
       "color": {
         "background": {
           "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "warning": "#ffedd8",
-          "info": "#dae6fc"
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)"
         },
         "text": {
           "default": "#696e79",
@@ -144,11 +144,11 @@
         },
         "iconBackground": {
           "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "warning": "#ffedd8",
-          "info": "#dae6fc"
+          "success": "rgb(20% 100% 26.7% / 0)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0)",
+          "danger": "rgb(100% 13.7% 13.7% / 0)",
+          "warning": "rgb(100% 58% 8.63% / 0)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0)"
         },
         "iconForeground": {
           "default": "#696e79",
@@ -241,13 +241,13 @@
       },
       "color": {
         "background": {
-          "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
+          "default": "#f6f7fa",
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
           "disabled": "#dfdfdf",
-          "info": "#dae6fc",
-          "warning": "#ffedd8"
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)"
         },
         "text": {
           "default": "#696e79",
@@ -260,12 +260,12 @@
         },
         "stroke": {
           "default": "#e6e7e9",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "disabled": "lch(84.4 0 0)",
-          "info": "#dae6fc",
-          "warning": "#ffedd8"
+          "success": "rgb(20% 100% 26.7% / 0.05)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+          "disabled": "rgb(83.1% 83.1% 83.1%)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.05)",
+          "warning": "rgb(100% 58% 8.63% / 0.05)"
         }
       }
     },
@@ -400,9 +400,9 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)",
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)",
               "disabled": "#dfdfdf"
             },
             "text": {
@@ -412,9 +412,9 @@
               "disabled": "#a0a0a0"
             },
             "stroke": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)",
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.05)",
+              "active": "rgb(100% 13.7% 13.7% / 0.05)",
               "disabled": "#dfdfdf"
             }
           },
@@ -512,9 +512,9 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)"
             },
             "text": {
               "default": "#c10000",
@@ -522,9 +522,9 @@
               "active": "#c10000"
             },
             "stroke": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)"
             }
           },
           "ghost": {
@@ -546,7 +546,7 @@
           },
           "info": {
             "background": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             },
@@ -556,7 +556,7 @@
               "active": "#135be6"
             },
             "stroke": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             }
@@ -597,13 +597,13 @@
               "default": "#302e32",
               "hover": "lch(27 3.82 267)",
               "active": "lch(5.68 1.13 305)",
-              "disabled": "lch(81.3 0 0)"
+              "disabled": "rgb(80% 80% 80%)"
             },
             "action": {
-              "default": "lch(6.24 1.29 305)",
+              "default": "rgb(7.76% 7.41% 8.12%)",
               "hover": "lch(25.6 3.63 267)",
               "active": "lch(3.47 0.72 305)",
-              "disabled": "lch(77.2 0 0)"
+              "disabled": "lch(77.9 0 0)"
             }
           },
           "text": {
@@ -643,7 +643,7 @@
               "default": "#f6f7fa",
               "hover": "lch(94.8 1.53 272)",
               "active": "lch(92.9 1.5 272)",
-              "disabled": "lch(77.2 0 0)"
+              "disabled": "lch(77.9 0 0)"
             }
           },
           "text": {
@@ -655,7 +655,7 @@
           "stroke": {
             "default": "#e6e7e9",
             "hover": "#e6e7e9",
-            "active": "lch(84 2.28 258)",
+            "active": "rgb(81.2% 82.3% 83.8%)",
             "disabled": "rgba(0,0,0,0)"
           }
         }
@@ -883,7 +883,7 @@
           "background": {
             "default": "#ffffff",
             "hover": "#f6f7fa",
-            "active": "lch(95 0 0)",
+            "active": "rgb(95% 95% 95%)",
             "disabled": "#dfdfdf"
           },
           "title": {
@@ -1023,8 +1023,8 @@
             "active": "#161517"
           },
           "background": {
-            "default": "lch(97.2 1.57 272 / 0.9)",
-            "hover": "lch(91.8 1.07 266)",
+            "default": "rgb(96.5% 96.9% 98% / 0.9)",
+            "hover": "rgb(90.4% 90.8% 91.6%)",
             "active": "lch(89.8 1.08 266)"
           },
           "stroke": {
@@ -1155,7 +1155,7 @@
       "monacoTheme": {
         "parameter": {
           "foreground": "#53575f",
-          "background": "#e6e7e9"
+          "background": "rgb(41.2% 43.1% 47.5% / 0.1)"
         }
       }
     },
@@ -1270,8 +1270,8 @@
       },
       "color": {
         "background": {
-          "default": "lch(97.3 1.53 272)",
-          "hover": "lch(97.3 1.53 272)",
+          "default": "rgb(96.6% 96.9% 98.1%)",
+          "hover": "rgb(96.6% 96.9% 98.1%)",
           "active": "#ffffff",
           "disabled": "#dfdfdf",
           "error": "#ffffff"
@@ -1284,8 +1284,8 @@
           "error": "#c10000"
         },
         "stroke": {
-          "default": "lch(92 1.05 266)",
-          "hover": "lch(83.8 2.3 258)",
+          "default": "rgb(90.7% 91.1% 91.8%)",
+          "hover": "rgb(81% 82.1% 83.6%)",
           "active": "#161517",
           "disabled": "#dfdfdf",
           "error": "#c10000"
@@ -1366,7 +1366,7 @@
           },
           "background": {
             "default": "#ffffff",
-            "hover": "lch(97.5 1.43 272)",
+            "hover": "rgb(96.8% 97.1% 98.2%)",
             "active": "#ffffff",
             "disabled": "#ffffff"
           },
@@ -2143,7 +2143,7 @@
           "background": {
             "default": "#f6f7fa",
             "hover": "#f6f7fa",
-            "active": "lch(90.3 11.8 266)"
+            "active": "rgb(85% 89.5% 97.8%)"
           },
           "title": {
             "default": "#161517"
@@ -2201,7 +2201,7 @@
           "background": {
             "default": "#ffffff",
             "hover": "lch(90.9 12.2 266 / 0.2)",
-            "active": "lch(91.1 11.9 266 / 0.2)"
+            "active": "rgb(85.9% 90.4% 98.9% / 0.2)"
           },
           "stroke": {
             "default": "#e6e7e9"
@@ -2689,23 +2689,23 @@
     "feedback": {
       "color": {
         "info": {
-          "background": "#dae6fc",
+          "background": "rgb(7.45% 35.7% 90.2% / 0.1)",
           "foreground": "#135be6"
         },
         "success": {
-          "background": "#E5FFE8",
+          "background": "rgb(20% 100% 26.7% / 0.1)",
           "foreground": "#00990D"
         },
         "warning": {
-          "background": "#ffedd8",
+          "background": "rgb(100% 58% 8.63% / 0.1)",
           "foreground": "#9e5600"
         },
         "danger": {
-          "background": "#ffdddd",
+          "background": "rgb(100% 13.7% 13.7% / 0.1)",
           "foreground": "#c10000"
         },
         "neutral": {
-          "background": "#e6e7e9",
+          "background": "rgb(41.2% 43.1% 47.5% / 0.1)",
           "foreground": "#53575f",
           "stroke": "#e6e7e9"
         }
diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json
index 34269a6c..9462041b 100644
--- a/src/styles/variables.light.json
+++ b/src/styles/variables.light.json
@@ -32,11 +32,11 @@
       "color": {
         "background": {
           "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "warning": "#ffedd8",
-          "info": "#dae6fc"
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)"
         },
         "text": {
           "default": "#696e79",
@@ -48,11 +48,11 @@
         },
         "iconBackground": {
           "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "warning": "#ffedd8",
-          "info": "#dae6fc"
+          "success": "rgb(20% 100% 26.7% / 0)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0)",
+          "danger": "rgb(100% 13.7% 13.7% / 0)",
+          "warning": "rgb(100% 58% 8.63% / 0)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0)"
         },
         "iconForeground": {
           "default": "#696e79",
@@ -81,13 +81,13 @@
     "badge": {
       "color": {
         "background": {
-          "default": "#ffffff",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
+          "default": "#f6f7fa",
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
           "disabled": "#dfdfdf",
-          "info": "#dae6fc",
-          "warning": "#ffedd8"
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)"
         },
         "text": {
           "default": "#696e79",
@@ -100,12 +100,12 @@
         },
         "stroke": {
           "default": "#e6e7e9",
-          "success": "#E5FFE8",
-          "neutral": "#e6e7e9",
-          "danger": "#ffdddd",
-          "disabled": "lch(84.4 0 0)",
-          "info": "#dae6fc",
-          "warning": "#ffedd8"
+          "success": "rgb(20% 100% 26.7% / 0.05)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+          "disabled": "rgb(83.1% 83.1% 83.1%)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.05)",
+          "warning": "rgb(100% 58% 8.63% / 0.05)"
         }
       }
     },
@@ -174,9 +174,9 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)",
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)",
               "disabled": "#dfdfdf"
             },
             "text": {
@@ -186,9 +186,9 @@
               "disabled": "#a0a0a0"
             },
             "stroke": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)",
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.05)",
+              "active": "rgb(100% 13.7% 13.7% / 0.05)",
               "disabled": "#dfdfdf"
             }
           },
@@ -260,9 +260,9 @@
           },
           "danger": {
             "background": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)"
             },
             "text": {
               "default": "#c10000",
@@ -270,9 +270,9 @@
               "active": "#c10000"
             },
             "stroke": {
-              "default": "#ffdddd",
-              "hover": "#ffbaba",
-              "active": "lch(70.3 41.1 23.9)"
+              "default": "rgb(100% 13.7% 13.7% / 0.1)",
+              "hover": "rgb(100% 13.7% 13.7% / 0.2)",
+              "active": "rgb(100% 13.7% 13.7% / 0.3)"
             }
           },
           "ghost": {
@@ -294,7 +294,7 @@
           },
           "info": {
             "background": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             },
@@ -304,7 +304,7 @@
               "active": "#135be6"
             },
             "stroke": {
-              "default": "#dae6fc",
+              "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
               "hover": "#b5cdf9",
               "active": "#91b3f6"
             }
@@ -318,13 +318,13 @@
               "default": "#302e32",
               "hover": "lch(27 3.82 267)",
               "active": "lch(5.68 1.13 305)",
-              "disabled": "lch(81.3 0 0)"
+              "disabled": "rgb(80% 80% 80%)"
             },
             "action": {
-              "default": "lch(6.24 1.29 305)",
+              "default": "rgb(7.76% 7.41% 8.12%)",
               "hover": "lch(25.6 3.63 267)",
               "active": "lch(3.47 0.72 305)",
-              "disabled": "lch(77.2 0 0)"
+              "disabled": "lch(77.9 0 0)"
             }
           },
           "text": {
@@ -364,7 +364,7 @@
               "default": "#f6f7fa",
               "hover": "lch(94.8 1.53 272)",
               "active": "lch(92.9 1.5 272)",
-              "disabled": "lch(77.2 0 0)"
+              "disabled": "lch(77.9 0 0)"
             }
           },
           "text": {
@@ -376,7 +376,7 @@
           "stroke": {
             "default": "#e6e7e9",
             "hover": "#e6e7e9",
-            "active": "lch(84 2.28 258)",
+            "active": "rgb(81.2% 82.3% 83.8%)",
             "disabled": "rgba(0,0,0,0)"
           }
         }
@@ -474,7 +474,7 @@
           "background": {
             "default": "#ffffff",
             "hover": "#f6f7fa",
-            "active": "lch(95 0 0)",
+            "active": "rgb(95% 95% 95%)",
             "disabled": "#dfdfdf"
           },
           "title": {
@@ -568,8 +568,8 @@
             "active": "#161517"
           },
           "background": {
-            "default": "lch(97.2 1.57 272 / 0.9)",
-            "hover": "lch(91.8 1.07 266)",
+            "default": "rgb(96.5% 96.9% 98% / 0.9)",
+            "hover": "rgb(90.4% 90.8% 91.6%)",
             "active": "lch(89.8 1.08 266)"
           },
           "stroke": {
@@ -657,7 +657,7 @@
       "monacoTheme": {
         "parameter": {
           "foreground": "#53575f",
-          "background": "#e6e7e9"
+          "background": "rgb(41.2% 43.1% 47.5% / 0.1)"
         }
       }
     },
@@ -677,8 +677,8 @@
     "field": {
       "color": {
         "background": {
-          "default": "lch(97.3 1.53 272)",
-          "hover": "lch(97.3 1.53 272)",
+          "default": "rgb(96.6% 96.9% 98.1%)",
+          "hover": "rgb(96.6% 96.9% 98.1%)",
           "active": "#ffffff",
           "disabled": "#dfdfdf",
           "error": "#ffffff"
@@ -691,8 +691,8 @@
           "error": "#c10000"
         },
         "stroke": {
-          "default": "lch(92 1.05 266)",
-          "hover": "lch(83.8 2.3 258)",
+          "default": "rgb(90.7% 91.1% 91.8%)",
+          "hover": "rgb(81% 82.1% 83.6%)",
           "active": "#161517",
           "disabled": "#dfdfdf",
           "error": "#c10000"
@@ -735,7 +735,7 @@
           },
           "background": {
             "default": "#ffffff",
-            "hover": "lch(97.5 1.43 272)",
+            "hover": "rgb(96.8% 97.1% 98.2%)",
             "active": "#ffffff",
             "disabled": "#ffffff"
           },
@@ -1089,7 +1089,7 @@
           "background": {
             "default": "#f6f7fa",
             "hover": "#f6f7fa",
-            "active": "lch(90.3 11.8 266)"
+            "active": "rgb(85% 89.5% 97.8%)"
           },
           "title": {
             "default": "#161517"
@@ -1112,7 +1112,7 @@
           "background": {
             "default": "#ffffff",
             "hover": "lch(90.9 12.2 266 / 0.2)",
-            "active": "lch(91.1 11.9 266 / 0.2)"
+            "active": "rgb(85.9% 90.4% 98.9% / 0.2)"
           },
           "stroke": {
             "default": "#e6e7e9"
@@ -1341,23 +1341,23 @@
     "feedback": {
       "color": {
         "info": {
-          "background": "#dae6fc",
+          "background": "rgb(7.45% 35.7% 90.2% / 0.1)",
           "foreground": "#135be6"
         },
         "success": {
-          "background": "#E5FFE8",
+          "background": "rgb(20% 100% 26.7% / 0.1)",
           "foreground": "#00990D"
         },
         "warning": {
-          "background": "#ffedd8",
+          "background": "rgb(100% 58% 8.63% / 0.1)",
           "foreground": "#9e5600"
         },
         "danger": {
-          "background": "#ffdddd",
+          "background": "rgb(100% 13.7% 13.7% / 0.1)",
           "foreground": "#c10000"
         },
         "neutral": {
-          "background": "#e6e7e9",
+          "background": "rgb(41.2% 43.1% 47.5% / 0.1)",
           "foreground": "#53575f",
           "stroke": "#e6e7e9"
         }