@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43613492370

package/lib/foundation/bridge.js

@@ -75,91 +75,91 @@ function rampsDeclarations(ramps) {
  * 每条都指向 DSH 的语义令牌而不是具体色值，因此深浅主题切换由宿主的
  * `body[data-ds-dark-theme]` 驱动，本包不维护主题分支。
  */
-const SEMANTIC = `
-  /* 文字层级 */
-  --color-text-1: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.9));
-  --color-text-2: var(--dsw-alias-label-secondary, rgba(0, 0, 0, 0.7));
-  --color-text-3: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.55));
-  --color-text-4: var(--dsw-alias-label-caption, rgba(0, 0, 0, 0.35));
-  --color-text-white: var(--dsw-alias-label-primary-foreground, #fff);
-
-  /* 中性色：组件规则直接引用 --color-neutral-*，此处重绑指向文字与分割层级，
-     避免再走一层原始色阶。 */
-  --color-neutral-1: var(--dsw-alias-bg-layer-1);
-  --color-neutral-2: var(--dsw-alias-bg-layer-2);
-  --color-neutral-3: var(--dsw-alias-border-l2);
-  --color-neutral-4: var(--dsw-alias-border-l3);
-  --color-neutral-5: var(--dsw-alias-label-caption);
-  --color-neutral-6: var(--dsw-alias-label-tertiary);
-  --color-neutral-7: var(--dsw-alias-label-secondary);
-  --color-neutral-8: var(--dsw-alias-label-secondary);
-  --color-neutral-9: var(--dsw-alias-label-primary);
-  --color-neutral-10: var(--dsw-alias-label-primary);
-
-  /* 背景层级 */
-  --color-bg-1: var(--dsw-alias-bg-base);
-  --color-bg-2: var(--dsw-alias-bg-layer-1);
-  --color-bg-3: var(--dsw-alias-bg-layer-2);
-  --color-bg-4: var(--dsw-alias-bg-layer-3);
-  --color-bg-5: var(--dsw-alias-bg-layer-3);
-  --color-bg-white: var(--dsw-alias-bg-layer-1);
-  --color-bg-popup: var(--dsw-alias-bg-layer-2);
-  --color-white: var(--dsw-alias-label-primary-foreground);
-  --color-black: var(--dsw-alias-label-primary);
-
-  /* 边框与填充 */
-  --color-border: var(--dsw-alias-border-l2);
-  --color-border-1: var(--dsw-alias-border-l1);
-  --color-border-2: var(--dsw-alias-border-l2);
-  --color-border-3: var(--dsw-alias-border-l3);
-  --color-border-4: var(--dsw-alias-border-l4);
-  --color-fill-1: var(--dsw-alias-bg-layer-1);
-  --color-fill-2: var(--dsw-alias-interactive-bg-hover);
-  --color-fill-3: var(--dsw-alias-interactive-bg-hover-solid);
-  --color-fill-4: var(--dsw-alias-interactive-bg-active);
-  --color-secondary: var(--dsw-alias-interactive-bg-hover);
-  --color-secondary-hover: var(--dsw-alias-interactive-bg-hover-solid);
-  --color-secondary-active: var(--dsw-alias-interactive-bg-active);
-  --color-secondary-disabled: var(--dsw-alias-bg-layer-1);
-
-  /* 状态浅色填充，用于禁用态与提示背景 */
-  --color-primary-light-1: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
-  --color-primary-light-2: color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent);
-  --color-primary-light-3: color-mix(in srgb, var(--dsw-alias-state-business-primary) 22%, transparent);
-  --color-primary-light-4: color-mix(in srgb, var(--dsw-alias-state-business-primary) 32%, transparent);
-  --color-success-light-1: color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent);
-  --color-success-light-2: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);
-  --color-success-light-3: color-mix(in srgb, var(--dsw-alias-state-success-primary) 22%, transparent);
-  --color-success-light-4: color-mix(in srgb, var(--dsw-alias-state-success-primary) 32%, transparent);
-  --color-warning-light-1: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 8%, transparent);
-  --color-warning-light-2: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);
-  --color-warning-light-3: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 22%, transparent);
-  --color-warning-light-4: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 32%, transparent);
-  --color-danger-light-1: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
-  --color-danger-light-2: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);
-  --color-danger-light-3: color-mix(in srgb, var(--dsw-alias-state-error-primary) 22%, transparent);
-  --color-danger-light-4: color-mix(in srgb, var(--dsw-alias-state-error-primary) 32%, transparent);
-  --color-link-light-1: color-mix(in srgb, var(--dsw-alias-link) 8%, transparent);
-  --color-link-light-2: color-mix(in srgb, var(--dsw-alias-link) 14%, transparent);
-  --color-link-light-3: color-mix(in srgb, var(--dsw-alias-link) 22%, transparent);
-  --color-link-light-4: color-mix(in srgb, var(--dsw-alias-link) 32%, transparent);
-
-  /* 浮层表面与遮罩 */
-  --color-menu-light-bg: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
-  --color-menu-dark-bg: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
-  --color-menu-dark-hover: var(--dsw-alias-interactive-bg-hover);
-  --color-tooltip-bg: var(--dsw-alias-tooltip-bg);
-  --color-tooltip-text: var(--dsw-alias-tooltip-label);
-  --color-mask-bg: var(--dsw-alias-bg-mask-1);
-  --color-spin-layer-bg: var(--dsw-alias-bg-mask-2);
-
-  /* 圆角：按 DSH 圆角标准重绑。small 对应 28px 高的紧凑控件，medium 对应
-     32–40px 的标准控件，large 对应分组内容。 */
-  --border-radius-none: 0;
-  --border-radius-small: var(--dsw-radius-sm, 8px);
-  --border-radius-medium: var(--dsw-radius-md, 12px);
-  --border-radius-large: var(--dsw-radius-lg, 16px);
-  --border-radius-circle: 50%;
+const SEMANTIC = `
+  /* 文字层级 */
+  --color-text-1: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.9));
+  --color-text-2: var(--dsw-alias-label-secondary, rgba(0, 0, 0, 0.7));
+  --color-text-3: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.55));
+  --color-text-4: var(--dsw-alias-label-caption, rgba(0, 0, 0, 0.35));
+  --color-text-white: var(--dsw-alias-label-primary-foreground, #fff);
+
+  /* 中性色：组件规则直接引用 --color-neutral-*，此处重绑指向文字与分割层级，
+     避免再走一层原始色阶。 */
+  --color-neutral-1: var(--dsw-alias-bg-layer-1);
+  --color-neutral-2: var(--dsw-alias-bg-layer-2);
+  --color-neutral-3: var(--dsw-alias-border-l2);
+  --color-neutral-4: var(--dsw-alias-border-l3);
+  --color-neutral-5: var(--dsw-alias-label-caption);
+  --color-neutral-6: var(--dsw-alias-label-tertiary);
+  --color-neutral-7: var(--dsw-alias-label-secondary);
+  --color-neutral-8: var(--dsw-alias-label-secondary);
+  --color-neutral-9: var(--dsw-alias-label-primary);
+  --color-neutral-10: var(--dsw-alias-label-primary);
+
+  /* 背景层级 */
+  --color-bg-1: var(--dsw-alias-bg-base);
+  --color-bg-2: var(--dsw-alias-bg-layer-1);
+  --color-bg-3: var(--dsw-alias-bg-layer-2);
+  --color-bg-4: var(--dsw-alias-bg-layer-3);
+  --color-bg-5: var(--dsw-alias-bg-layer-3);
+  --color-bg-white: var(--dsw-alias-bg-layer-1);
+  --color-bg-popup: var(--dsw-alias-bg-layer-2);
+  --color-white: var(--dsw-alias-label-primary-foreground);
+  --color-black: var(--dsw-alias-label-primary);
+
+  /* 边框与填充 */
+  --color-border: var(--dsw-alias-border-l2);
+  --color-border-1: var(--dsw-alias-border-l1);
+  --color-border-2: var(--dsw-alias-border-l2);
+  --color-border-3: var(--dsw-alias-border-l3);
+  --color-border-4: var(--dsw-alias-border-l4);
+  --color-fill-1: var(--dsw-alias-bg-layer-1);
+  --color-fill-2: var(--dsw-alias-interactive-bg-hover);
+  --color-fill-3: var(--dsw-alias-interactive-bg-hover-solid);
+  --color-fill-4: var(--dsw-alias-interactive-bg-active);
+  --color-secondary: var(--dsw-alias-interactive-bg-hover);
+  --color-secondary-hover: var(--dsw-alias-interactive-bg-hover-solid);
+  --color-secondary-active: var(--dsw-alias-interactive-bg-active);
+  --color-secondary-disabled: var(--dsw-alias-bg-layer-1);
+
+  /* 状态浅色填充，用于禁用态与提示背景 */
+  --color-primary-light-1: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
+  --color-primary-light-2: color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent);
+  --color-primary-light-3: color-mix(in srgb, var(--dsw-alias-state-business-primary) 22%, transparent);
+  --color-primary-light-4: color-mix(in srgb, var(--dsw-alias-state-business-primary) 32%, transparent);
+  --color-success-light-1: color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent);
+  --color-success-light-2: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);
+  --color-success-light-3: color-mix(in srgb, var(--dsw-alias-state-success-primary) 22%, transparent);
+  --color-success-light-4: color-mix(in srgb, var(--dsw-alias-state-success-primary) 32%, transparent);
+  --color-warning-light-1: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 8%, transparent);
+  --color-warning-light-2: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);
+  --color-warning-light-3: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 22%, transparent);
+  --color-warning-light-4: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 32%, transparent);
+  --color-danger-light-1: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
+  --color-danger-light-2: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);
+  --color-danger-light-3: color-mix(in srgb, var(--dsw-alias-state-error-primary) 22%, transparent);
+  --color-danger-light-4: color-mix(in srgb, var(--dsw-alias-state-error-primary) 32%, transparent);
+  --color-link-light-1: color-mix(in srgb, var(--dsw-alias-link) 8%, transparent);
+  --color-link-light-2: color-mix(in srgb, var(--dsw-alias-link) 14%, transparent);
+  --color-link-light-3: color-mix(in srgb, var(--dsw-alias-link) 22%, transparent);
+  --color-link-light-4: color-mix(in srgb, var(--dsw-alias-link) 32%, transparent);
+
+  /* 浮层表面与遮罩 */
+  --color-menu-light-bg: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
+  --color-menu-dark-bg: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
+  --color-menu-dark-hover: var(--dsw-alias-interactive-bg-hover);
+  --color-tooltip-bg: var(--dsw-alias-tooltip-bg);
+  --color-tooltip-text: var(--dsw-alias-tooltip-label);
+  --color-mask-bg: var(--dsw-alias-bg-mask-1);
+  --color-spin-layer-bg: var(--dsw-alias-bg-mask-2);
+
+  /* 圆角：按 DSH 圆角标准重绑。small 对应 28px 高的紧凑控件，medium 对应
+     32–40px 的标准控件，large 对应分组内容。 */
+  --border-radius-none: 0;
+  --border-radius-small: var(--dsw-radius-sm, 8px);
+  --border-radius-medium: var(--dsw-radius-md, 12px);
+  --border-radius-large: var(--dsw-radius-lg, 16px);
+  --border-radius-circle: 50%;
 `;
 /**
  * 针对 DSH 具体控件契约的规则级覆盖。
@@ -168,111 +168,111 @@ const SEMANTIC = `
  * 中性近黑色，而非品牌蓝），且 Arco 在规则里写死了白字与蓝色焦点环，这两处
  * 需要直接改规则。
  */
-const RULES = `
-.dsh-ui .arco-btn {
-  font-family: inherit;
-  border-radius: var(--dsw-radius-md, 12px);
-  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
-}
-
-.dsh-ui .arco-btn-size-mini,
-.dsh-ui .arco-btn-size-small {
-  border-radius: var(--dsw-radius-sm, 8px);
-}
-
-.dsh-ui .arco-btn-primary:not(.arco-btn-disabled) {
-  background-color: var(--dsw-alias-button-primary-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-/* Arco 的 hover 规则把文字硬编码成白色；DSH 的主色在深色主题下是浅色填充，
-   白字会失去对比，因此背景与文字必须成对覆盖。 */
-.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):hover,
-.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
-  background-color: var(--dsw-alias-button-primary-hover);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
-  background-color: var(--dsw-alias-button-primary-hover);
-}
-
-.dsh-ui .arco-btn-primary.arco-btn-disabled {
-  background-color: var(--dsw-alias-button-primary-dimmed);
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.dsh-ui .arco-btn-secondary:not(.arco-btn-disabled) {
-  background-color: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.dsh-ui .arco-btn-secondary:not(.arco-btn-disabled):hover {
-  background-color: var(--dsw-alias-interactive-bg-hover-solid);
-}
-
-.dsh-ui .arco-btn-text:not(.arco-btn-disabled) {
-  color: var(--dsw-alias-label-secondary);
-}
-
-.dsh-ui .arco-btn-text:not(.arco-btn-disabled):hover {
-  background-color: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.dsh-ui .arco-btn-status-danger:not(.arco-btn-disabled) {
-  color: var(--dsw-alias-state-error-primary);
-}
-
-/* 危险操作的主按钮在 DSH 里是淡红色填充配错误色文字，而不是整块高饱和红底：
-   后者在深色主题下会变成一块亮粉色，与宿主的删除确认弹窗不一致。 */
-.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled) {
-  background-color: var(--dsw-alias-interactive-bg-hover-danger);
-  color: var(--dsw-alias-state-error-primary);
-}
-
-.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover,
-.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active {
-  background-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent);
-  color: var(--dsw-alias-state-error-primary);
-}
-
-.dsh-ui :focus-visible {
-  outline-color: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-  outline-width: var(--dsw-focus-ring-width);
-}
-
-/* 输入类控件的聚焦用描边表达，与宿主 Input 的边框变色一致；不叠加外扩焦点
-   环，否则边框外会多出一圈比控件本身更大的蓝框。这里必须显式写 outline-style
-   与 outline-width，单写 outline: none 会被上面的 :focus-visible 规则盖掉。 */
-.dsh-ui .arco-input:focus-visible,
-.dsh-ui .arco-textarea:focus-visible,
-.dsh-ui .arco-input-inner-wrapper:focus-within,
-.dsh-ui .arco-input-number:focus-within,
-.dsh-ui .arco-select-view:focus-visible,
-.dsh-ui .arco-select-view:focus-within {
-  box-shadow: none;
-  outline-style: none;
-  outline-width: 0;
-  border-color: var(--dsw-alias-state-business-primary);
-}
-
-.dsh-ui .arco-btn:focus-visible {
-  box-shadow: none;
-  outline: var(--dsw-focus-ring-width) solid var(--dsw-alias-state-business-primary);
-  outline-offset: 2px;
-}
-
-/* 浮层表面统一承载菜单材质，避免逐组件重复声明。 */
-.dsh-ui-overlay .arco-dropdown-menu,
-.dsh-ui-overlay .arco-select-popup,
-.dsh-ui-overlay .arco-trigger-popup .arco-dropdown,
-.dsh-ui-overlay .arco-picker-container {
-  background: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
-  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
-  border: 0;
-  box-shadow: var(--dsw-elevation-panel);
-}
+const RULES = `
+.dsh-ui .arco-btn {
+  font-family: inherit;
+  border-radius: var(--dsw-radius-md, 12px);
+  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+
+.dsh-ui .arco-btn-size-mini,
+.dsh-ui .arco-btn-size-small {
+  border-radius: var(--dsw-radius-sm, 8px);
+}
+
+.dsh-ui .arco-btn-primary:not(.arco-btn-disabled) {
+  background-color: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+/* Arco 的 hover 规则把文字硬编码成白色；DSH 的主色在深色主题下是浅色填充，
+   白字会失去对比，因此背景与文字必须成对覆盖。 */
+.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):hover,
+.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
+  background-color: var(--dsw-alias-button-primary-hover);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+.dsh-ui .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
+  background-color: var(--dsw-alias-button-primary-hover);
+}
+
+.dsh-ui .arco-btn-primary.arco-btn-disabled {
+  background-color: var(--dsw-alias-button-primary-dimmed);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.dsh-ui .arco-btn-secondary:not(.arco-btn-disabled) {
+  background-color: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.dsh-ui .arco-btn-secondary:not(.arco-btn-disabled):hover {
+  background-color: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
+.dsh-ui .arco-btn-text:not(.arco-btn-disabled) {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.dsh-ui .arco-btn-text:not(.arco-btn-disabled):hover {
+  background-color: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.dsh-ui .arco-btn-status-danger:not(.arco-btn-disabled) {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* 危险操作的主按钮在 DSH 里是淡红色填充配错误色文字，而不是整块高饱和红底：
+   后者在深色主题下会变成一块亮粉色，与宿主的删除确认弹窗不一致。 */
+.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled) {
+  background-color: var(--dsw-alias-interactive-bg-hover-danger);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover,
+.dsh-ui .arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active {
+  background-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.dsh-ui :focus-visible {
+  outline-color: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-width: var(--dsw-focus-ring-width);
+}
+
+/* 输入类控件的聚焦用描边表达，与宿主 Input 的边框变色一致；不叠加外扩焦点
+   环，否则边框外会多出一圈比控件本身更大的蓝框。这里必须显式写 outline-style
+   与 outline-width，单写 outline: none 会被上面的 :focus-visible 规则盖掉。 */
+.dsh-ui .arco-input:focus-visible,
+.dsh-ui .arco-textarea:focus-visible,
+.dsh-ui .arco-input-inner-wrapper:focus-within,
+.dsh-ui .arco-input-number:focus-within,
+.dsh-ui .arco-select-view:focus-visible,
+.dsh-ui .arco-select-view:focus-within {
+  box-shadow: none;
+  outline-style: none;
+  outline-width: 0;
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.dsh-ui .arco-btn:focus-visible {
+  box-shadow: none;
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+/* 浮层表面统一承载菜单材质，避免逐组件重复声明。 */
+.dsh-ui-overlay .arco-dropdown-menu,
+.dsh-ui-overlay .arco-select-popup,
+.dsh-ui-overlay .arco-trigger-popup .arco-dropdown,
+.dsh-ui-overlay .arco-picker-container {
+  background: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
+  border: 0;
+  box-shadow: var(--dsw-elevation-panel);
+}
 `;
 /**
  * 完整桥接样式表。
@@ -280,19 +280,19 @@ const RULES = `
  * 容器类 `.dsh-ui` 由 {@link DshProvider} 加在包裹元素上，浮层容器同时带
  * `.dsh-ui-overlay`，因此弹出层即使挂在 `body` 下也能拿到同一套变量。
  */
-export const BRIDGE_CSS = `
-.${'dsh-ui'},
-.dsh-ui-overlay {
-${SEMANTIC}
-${rampsDeclarations(RAMP_LIGHT)}
-}
-
-body[data-ds-dark-theme] .dsh-ui,
-body[data-ds-dark-theme] .dsh-ui-overlay {
-${rampsDeclarations(RAMP_DARK)}
-}
-
-${RULES}
+export const BRIDGE_CSS = `
+.${'dsh-ui'},
+.dsh-ui-overlay {
+${SEMANTIC}
+${rampsDeclarations(RAMP_LIGHT)}
+}
+
+body[data-ds-dark-theme] .dsh-ui,
+body[data-ds-dark-theme] .dsh-ui-overlay {
+${rampsDeclarations(RAMP_DARK)}
+}
+
+${RULES}
 `;
 /**
  * 供测试与门禁使用的深色基准色，避免在样式字符串之外再次写字面量。