fix(ui): replace transparent background for Alert

.github/actions/install/action.yml

@@ -13,7 +13,7 @@ runs:
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - name: Get pnpm store directory

packages/ui/package.json

@@ -32,9 +32,9 @@
     "build-storybook": "build-storybook",
     "publish-storybook": "chromatic --storybook-build-dir storybook-static --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
-    "test:visual": "loki --verboseRenderer --requireReference --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
+    "test:visual": "loki --verboseRenderer --requireReference --chromeTolerance 3 --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "test:visual:approve": "loki approve",
-    "generate-screenshots": "pnpm run build-storybook && loki update --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
+    "generate-screenshots": "pnpm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "lint": "pnpm run lint:ts && pnpm run lint:css",
     "lint:fix": "pnpm run lint:ts:fix && pnpm run lint:css:fix",
     "lint:ts": "eslint --ext .ts,.tsx .",
@@ -95,7 +95,7 @@
     "doiuse": "^4.4.1",
     "enzyme": "^3.11.0",
     "jest-axe": "^5.0.1",
-    "loki": "^0.31.1",
+    "loki": "^0.32.0",
     "postcss": "^8.4.23",
     "postcss-cli": "^9.1.0",
     "postcss-reporter": "^7.0.5",

packages/ui/src/Alert.module.scss

@@ -38,7 +38,7 @@
   &.success {
     color: c.$colorText;
     border-color: c.$colorSuccess;
-    background-color: rgba(c.$colorSuccess, 30%);
+    background-color: c.$colorSuccessLight;
 
     .icon {
       color: c.$colorText;
@@ -55,7 +55,7 @@
   &.info {
     color: c.$colorText;
     border-color: c.$colorInfo;
-    background-color: rgba(c.$colorInfo, 30%);
+    background-color: c.$colorInfoLight;
 
     .icon {
       color: c.$colorText;
@@ -72,7 +72,7 @@
   &.warning {
     color: c.$colorText;
     border-color: c.$colorWarning;
-    background-color: rgba(c.$colorWarning, 30%);
+    background-color: c.$colorWarningLight;
 
     .icon {
       color: c.$colorText;
@@ -89,7 +89,7 @@
   &.critical {
     color: c.$colorText;
     border-color: c.$colorError;
-    background-color: rgba(c.$colorError, 30%);
+    background-color: c.$colorErrorLight;
 
     .icon {
       color: c.$colorText;