@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/index.js

@@ -24,6 +24,11 @@ __reExport(src_exports, require("./Calendar"), module.exports);
 __reExport(src_exports, require("./Card"), module.exports);
 __reExport(src_exports, require("./Checkbox"), module.exports);
 __reExport(src_exports, require("./Collapse"), module.exports);
+__reExport(src_exports, require("./DatePicker"), module.exports);
+__reExport(src_exports, require("./DesktopDatePicker"), module.exports);
+__reExport(src_exports, require("./DesktopTimePicker"), module.exports);
+__reExport(src_exports, require("./DesktopDateTimePicker"), module.exports);
+__reExport(src_exports, require("./DesktopPicker"), module.exports);
 __reExport(src_exports, require("./Divider"), module.exports);
 __reExport(src_exports, require("./Drawer"), module.exports);
 __reExport(src_exports, require("./Fade"), module.exports);
@@ -64,6 +69,9 @@ __reExport(src_exports, require("./Toast"), module.exports);
 __reExport(src_exports, require("./Dialog"), module.exports);
 __reExport(src_exports, require("./ThemeProvider"), module.exports);
 __reExport(src_exports, require("./locales"), module.exports);
+__reExport(src_exports, require("./SwipeAction"), module.exports);
+__reExport(src_exports, require("./CSSTransition"), module.exports);
+__reExport(src_exports, require("./TransitionGroup"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./ActionSheet"),
@@ -76,6 +84,11 @@ __reExport(src_exports, require("./locales"), module.exports);
   ...require("./Card"),
   ...require("./Checkbox"),
   ...require("./Collapse"),
+  ...require("./DatePicker"),
+  ...require("./DesktopDatePicker"),
+  ...require("./DesktopTimePicker"),
+  ...require("./DesktopDateTimePicker"),
+  ...require("./DesktopPicker"),
   ...require("./Divider"),
   ...require("./Drawer"),
   ...require("./Fade"),
@@ -115,5 +128,8 @@ __reExport(src_exports, require("./locales"), module.exports);
   ...require("./Toast"),
   ...require("./Dialog"),
   ...require("./ThemeProvider"),
-  ...require("./locales")
+  ...require("./locales"),
+  ...require("./SwipeAction"),
+  ...require("./CSSTransition"),
+  ...require("./TransitionGroup")
 });

package/dist/locales/base.d.ts

@@ -1,7 +1,7 @@
 export interface BaseLang {
     dialog?: {
         cancel?: string;
-        confirm?: string;
+        ok?: string;
         placeholder?: string;
     };
     picker?: {
@@ -21,7 +21,10 @@ export interface BaseLang {
         placeholder?: string;
     };
     textarea?: {
+        labelName?: string;
         placeholder?: string;
+        remaining?: string;
+        characters?: string;
     };
     selector?: {
         select?: string;
@@ -37,4 +40,40 @@ export interface BaseLang {
         currentType?: Record<string, string>;
         hotCityType?: Record<string, string>;
     };
+    desktopDatePicker?: {
+        month?: Record<number, string>;
+    };
+    datePicker?: {
+        year: string;
+        month: string;
+        day: string;
+        hour: string;
+        minute: string;
+        second: string;
+    };
+    countdown?: {
+        remain?: {
+            year?: string;
+            month?: string;
+            day?: string;
+            hour?: string;
+            minute?: string;
+            second?: string;
+        };
+        remainTime?: string;
+        hasEnd?: string;
+        willEnd?: string;
+        timer?: string;
+    };
+    progress?: {
+        labelName?: string;
+        notStarted?: string;
+        justBegun?: string;
+        gettingStarted?: string;
+        inProgress?: string;
+        moreThanHalfway?: string;
+        almostComplete?: string;
+        complete?: string;
+        nearingCompletion?: string;
+    };
 }

package/dist/locales/en-US.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(en_US_exports);
 const enUS = {
   dialog: {
     cancel: "Cancel",
-    confirm: "Confirm",
+    ok: "OK",
     placeholder: "Placeholder"
   },
   picker: {
@@ -43,7 +43,10 @@ const enUS = {
     placeholder: "Placeholder"
   },
   textarea: {
-    placeholder: "Placeholder"
+    labelName: "TextArea",
+    placeholder: "Placeholder",
+    remaining: "Remaining",
+    characters: "Characters"
   },
   selector: {
     select: "Please select"
@@ -64,6 +67,55 @@ const enUS = {
       title: "Hot",
       code: "HOT"
     }
+  },
+  desktopDatePicker: {
+    month: {
+      1: "Jan",
+      2: "Feb",
+      3: "Mar",
+      4: "Apr",
+      5: "May",
+      6: "Jun",
+      7: "Jul",
+      8: "Aug",
+      9: "Sep",
+      10: "Oct",
+      11: "Nov",
+      12: "Dec"
+    }
+  },
+  datePicker: {
+    year: "Year",
+    month: "Month",
+    day: "Day",
+    hour: "Hour",
+    minute: "Minute",
+    second: "Second"
+  },
+  countdown: {
+    remain: {
+      year: "Year",
+      month: "Month",
+      day: "Day",
+      hour: "Hour",
+      minute: "Minute",
+      second: "Second"
+    },
+    remainTime: "Remaining Time",
+    hasEnd: "Countdown has ended",
+    willEnd: "About to end",
+    timer: "Timer"
+  },
+  progress: {
+    labelName: "Progress Bar",
+    notStarted: "Not started",
+    justBegun: "Just begun",
+    gettingStarted: "Getting started",
+    inProgress: "In progress",
+    moreThanHalfway: "More than halfway",
+    nearingCompletion: "Nearing completion",
+    almostComplete: "Almost complete",
+    complete: "Complete"
   }
 };
 var en_US_default = enUS;

package/dist/locales/zh-CN.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(zh_CN_exports);
 const zhCN = {
   dialog: {
     cancel: "\u53D6\u6D88",
-    confirm: "\u786E\u5B9A",
+    ok: "\u786E\u5B9A",
     placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9"
   },
   picker: {
@@ -46,6 +46,61 @@ const zhCN = {
     located: "\u5B9A\u4F4D",
     current: "\u5F53\u524D",
     hot: "\u70ED\u95E8"
+  },
+  desktopDatePicker: {
+    month: {
+      1: "1\u6708",
+      2: "2\u6708",
+      3: "3\u6708",
+      4: "4\u6708",
+      5: "5\u6708",
+      6: "6\u6708",
+      7: "7\u6708",
+      8: "8\u6708",
+      9: "9\u6708",
+      10: "10\u6708",
+      11: "11\u6708",
+      12: "12\u6708"
+    }
+  },
+  datePicker: {
+    year: "\u5E74",
+    month: "\u6708",
+    day: "\u65E5",
+    hour: "\u65F6",
+    minute: "\u5206",
+    second: "\u79D2"
+  },
+  countdown: {
+    remain: {
+      year: "\u5E74",
+      month: "\u4E2A\u6708",
+      day: "\u5929",
+      hour: "\u5C0F\u65F6",
+      minute: "\u5206\u949F",
+      second: "\u79D2"
+    },
+    remainTime: "\u5269\u4F59\u65F6\u95F4",
+    hasEnd: "\u5012\u8BA1\u65F6\u5DF2\u7ED3\u675F",
+    willEnd: "\u5373\u5C06\u7ED3\u675F",
+    timer: "\u5012\u8BA1\u65F6\u5668"
+  },
+  progress: {
+    labelName: "\u8FDB\u5EA6\u6761",
+    notStarted: "\u672A\u5F00\u59CB",
+    justBegun: "\u521A\u521A\u5F00\u59CB",
+    gettingStarted: "\u5F00\u59CB\u8FDB\u884C",
+    inProgress: "\u8FDB\u884C\u4E2D",
+    moreThanHalfway: "\u8FC7\u534A\u5B8C\u6210",
+    nearingCompletion: "\u63A5\u8FD1\u5B8C\u6210",
+    almostComplete: "\u5373\u5C06\u5B8C\u6210",
+    complete: "\u5DF2\u5B8C\u6210"
+  },
+  textarea: {
+    labelName: "\u6587\u672C\u533A\u57DF",
+    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    remaining: "\u5269\u4F59",
+    characters: "\u4E2A\u5B57"
   }
 };
 var zh_CN_default = zhCN;

package/dist/locales/zh-TW.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(zh_TW_exports);
 const zhTW = {
   dialog: {
     cancel: "\u53D6\u6D88",
-    confirm: "\u78BA\u8A8D",
+    ok: "\u78BA\u8A8D",
     placeholder: "\u8ACB\u8F38\u5165\u5167\u5BB9"
   },
   picker: {
@@ -46,6 +46,61 @@ const zhTW = {
     located: "\u5B9A\u4F4D",
     current: "\u76EE\u524D",
     hot: "\u71B1\u9580"
+  },
+  desktopDatePicker: {
+    month: {
+      1: "1\u6708",
+      2: "2\u6708",
+      3: "3\u6708",
+      4: "4\u6708",
+      5: "5\u6708",
+      6: "6\u6708",
+      7: "7\u6708",
+      8: "8\u6708",
+      9: "9\u6708",
+      10: "10\u6708",
+      11: "11\u6708",
+      12: "12\u6708"
+    }
+  },
+  datePicker: {
+    year: "\u5E74",
+    month: "\u6708",
+    day: "\u65E5",
+    hour: "\u6642",
+    minute: "\u5206",
+    second: "\u79D2"
+  },
+  countdown: {
+    remain: {
+      year: "\u5E74",
+      month: "\u500B\u6708",
+      day: "\u5929",
+      hour: "\u5C0F\u6642",
+      minute: "\u5206\u9418",
+      second: "\u79D2"
+    },
+    remainTime: "\u5269\u9918\u6642\u9593",
+    hasEnd: "\u5012\u6578\u8A08\u6642\u5DF2\u7D50\u675F",
+    willEnd: "\u5373\u5C07\u7D50\u675F",
+    timer: "\u5012\u6578\u8A08\u6642\u5668"
+  },
+  progress: {
+    labelName: "\u9032\u5EA6\u689D",
+    notStarted: "\u672A\u958B\u59CB",
+    justBegun: "\u525B\u525B\u958B\u59CB",
+    gettingStarted: "\u958B\u59CB\u9032\u884C",
+    inProgress: "\u9032\u884C\u4E2D",
+    moreThanHalfway: "\u904E\u534A\u5B8C\u6210",
+    nearingCompletion: "\u63A5\u8FD1\u5B8C\u6210",
+    almostComplete: "\u5373\u5C07\u5B8C\u6210",
+    complete: "\u5DF2\u5B8C\u6210"
+  },
+  textarea: {
+    labelName: "\u6587\u672C\u5340\u57DF",
+    placeholder: "\u8ACB\u8F38\u5165\u5167\u5BB9",
+    remaining: "\u5269\u9918",
+    characters: "\u500B\u5B57"
   }
 };
 var zh_TW_default = zhTW;

package/es/Alert/Alert.js

@@ -95,7 +95,8 @@ const AlertAction = (props) => {
     {
       className: `${prefixCls}-action`,
       color,
-      onClick: onClose
+      onClick: onClose,
+      "aria-label": "\u5173\u95ED\u6309\u94AE"
     },
     /* @__PURE__ */ React.createElement(CloseIcon, null)
   );

package/es/Alert/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * 自定义 Alert 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicAlertDemo: () => React.JSX.Element;
+export declare const multipleTypeAlertDemo: () => React.JSX.Element;
+export declare const actionAlertDemo: () => React.JSX.Element;
+export declare const complexInteractionAlertDemo: () => React.JSX.Element;
+declare const _default: {
+    basicAlertDemo: () => React.JSX.Element;
+    multipleTypeAlertDemo: () => React.JSX.Element;
+    actionAlertDemo: () => React.JSX.Element;
+    complexInteractionAlertDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/Alert/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,107 @@
+import React from "react";
+import Alert from "../../Alert";
+const basicAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Alert \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+const multipleTypeAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u4FE1\u606F\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "success",
+      onClose: () => {
+        console.log("\u5173\u95ED success alert");
+      }
+    },
+    "\u6210\u529F\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "warning",
+      onClose: () => {
+        console.log("\u5173\u95ED warning alert");
+      }
+    },
+    "\u8B66\u544A\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "danger",
+      onClose: () => {
+        console.log("\u5173\u95ED danger alert");
+      }
+    },
+    "\u9519\u8BEF\u63D0\u793A"
+  ));
+};
+const actionAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      action: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            console.log("\u6267\u884C\u64CD\u4F5C");
+          }
+        },
+        "\u6267\u884C\u64CD\u4F5C"
+      ),
+      onClose: () => {
+        console.log("\u5173\u95ED alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u5E26\u64CD\u4F5C\u6309\u94AE\u7684 Alert \u7EC4\u4EF6"
+  ));
+};
+const complexInteractionAlertDemo = () => {
+  const ComplexInteractionAlertDemo = () => {
+    const [showAlert, setShowAlert] = React.useState(true);
+    if (!showAlert) {
+      return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setShowAlert(true) }, "\u91CD\u65B0\u663E\u793A Alert");
+    }
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Alert,
+      {
+        color: "warning",
+        onClose: () => {
+          setShowAlert(false);
+        }
+      },
+      "\u8FD9\u662F\u4E00\u4E2A\u53EF\u4EE5\u5173\u95ED\u7684 Alert \u7EC4\u4EF6\uFF0C\u5173\u95ED\u540E\u4F1A\u663E\u793A\u91CD\u65B0\u663E\u793A\u6309\u94AE"
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionAlertDemo, null);
+};
+var A11yDemos_default = {
+  basicAlertDemo,
+  multipleTypeAlertDemo,
+  actionAlertDemo,
+  complexInteractionAlertDemo
+};
+export {
+  actionAlertDemo,
+  basicAlertDemo,
+  complexInteractionAlertDemo,
+  A11yDemos_default as default,
+  multipleTypeAlertDemo
+};

package/es/Alert/index.css

@@ -5,8 +5,8 @@ xhs-page {
   --bui-alert-padding: 8px;
   --bui-alert-line-height: 16px;
   --bui-alert-default-icon-font-size: 15px;
-  --bui-alert-action-margin-left: 16px;
-  --bui-alert-icon-margin-right: var(--bui-spacing-xs);
+  --bui-alert-action-margin: 0 0 0 16px;
+  --bui-alert-icon-margin: 0 var(--bui-spacing-xs) 0 0;
   --bui-alert-icon-font-size: var(--bui-title-size-4);
 }
 .bui-alert {
@@ -66,7 +66,7 @@ xhs-page {
 }
 .bui-alert-action {
   flex-shrink: 0;
-  margin-left: var(--bui-alert-action-margin-left);
+  margin: var(--bui-alert-action-margin);
   word-wrap: keep-all;
   font-size: var(--bui-text-size-3);
   cursor: pointer;
@@ -78,7 +78,7 @@ xhs-page {
 .bui-alert-icon {
   display: flex;
   align-items: center;
-  margin-right: var(--bui-alert-icon-margin-right);
+  margin: var(--bui-alert-icon-margin);
   vertical-align: middle;
   font-size: var(--bui-alert-icon-font-size);
   cursor: pointer;

package/es/Avatar/AvatarGroup.css

@@ -1,12 +1,12 @@
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -20,23 +20,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/es/Avatar/index.css

@@ -52,12 +52,12 @@ xhs-page {
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -71,23 +71,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/es/Backdrop/Backdrop.js

@@ -36,8 +36,8 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       children,
       className,
-      invisible,
-      open,
+      invisible = false,
+      open = false,
       transitionDuration
     } = _a, others = __objRest(_a, [
       "children",
@@ -49,6 +49,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
     return /* @__PURE__ */ React.createElement(Fade, __spreadValues({ in: open, timeout: transitionDuration }, others), /* @__PURE__ */ React.createElement(
       "div",
       {
+        "aria-hidden": "true",
         className: clsx(
           prefixCls,
           {

package/es/Backdrop/Backdrop.types.d.ts

@@ -4,6 +4,10 @@ import { FadeProps } from '../Fade/Fade.types';
 import { TransitionProps } from '../Transition';
 export interface BackdropTypeMap<D extends React.ElementType = 'div', P = {}> {
     props: P & {
+        /**
+         * 是否展示
+         * - default:false
+         */
         open?: boolean;
         /**
          * 是否透明不可见

package/es/Backdrop/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const basicBackdropDemo: () => React.JSX.Element;
+export declare const invisibleBackdropDemo: () => React.JSX.Element;
+declare const _default: {
+    basicBackdropDemo: () => React.JSX.Element;
+    invisibleBackdropDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/Backdrop/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Backdrop from "../../Backdrop";
+const basicBackdropDemo = () => {
+  return /* @__PURE__ */ React.createElement(Backdrop, { open: true });
+};
+const invisibleBackdropDemo = () => {
+  return /* @__PURE__ */ React.createElement(Backdrop, { open: true, invisible: true });
+};
+var A11yDemos_default = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+};
+export {
+  basicBackdropDemo,
+  A11yDemos_default as default,
+  invisibleBackdropDemo
+};

package/es/Backdrop/index.css

@@ -1,7 +1,7 @@
 :root,
 page,
 xhs-page {
-  --bui-backdrop-background-color: rgba(0, 0, 0, 0.68);
+  --bui-backdrop-bg-color: rgba(0, 0, 0, 0.68);
 }
 .bui-backdrop {
   position: fixed;
@@ -12,7 +12,7 @@ xhs-page {
   bottom: 0;
   left: 0;
   top: 0;
-  background-color: var(--bui-backdrop-background-color);
+  background-color: var(--bui-backdrop-bg-color);
 }
 .bui-backdrop-invisible {
   background-color: transparent;