@cashub/ui 0.49.0-beta.13 → 0.49.0-beta.15

package/iconbox/IconBox.js

@@ -40,100 +40,149 @@ const IconBox = _ref => {
     const circleSize = size || 60;
     const innerIconSize = iconSize || Math.round(circleSize * 0.5);
     const iconColorFinal = mode === 'gradient' ? '#FFFFFF' : accent;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentWrapper, {
-      mode: mode,
-      accent: accent,
-      gradientEnd: gradientEnd,
-      borderColor: borderColor,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentOuter, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccentGlassLayer, {
         mode: mode,
         accent: accent,
-        circleSize: circleSize,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
-          size: innerIconSize,
-          iconKey: iconKey,
-          iconColor: iconColorFinal,
-          src: icon,
-          alt: `${title}'s icon`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
-          children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
-          accentColor: accent,
-          children: children
+        gradientEnd: gradientEnd,
+        borderColor: borderColor
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentContent, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
+          mode: mode,
+          accent: accent,
+          circleSize: circleSize,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+            size: innerIconSize,
+            iconKey: iconKey,
+            iconColor: iconColorFinal,
+            src: icon,
+            alt: `${title}'s icon`
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+            accentColor: accent,
+            children: children
+          })]
         })]
       })]
     });
   }
   const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    bgImage: bgImage,
-    gradientFrom: gradientFrom,
-    gradientTo: gradientTo,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
-        sizeXS: sizeXS,
-        sizeS: sizeS,
-        size: size,
-        marginRight: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+  if (bgImage || gradientFrom && gradientTo) {
+    const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlainWrapper, {
+      bgImage: bgImage,
+      gradient: gradient,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
+          sizeXS: sizeXS,
+          sizeS: sizeS,
+          size: size,
+          marginRight: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+            sizeXS: sizeXS,
+            sizeS: sizeS,
+            size: size,
+            iconKey: iconKey,
+            iconColor: iconColor,
+            src: icon,
+            alt: `${title}'s icon`
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+          children: title
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+        children: children
+      })]
+    });
+  }
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GlassOuter, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GlassLayer, {
+      marker: marker
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GlassContent, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
           sizeXS: sizeXS,
           sizeS: sizeS,
           size: size,
-          iconKey: iconKey,
-          iconColor: iconColor,
-          src: icon,
-          alt: `${title}'s icon`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
-        children: title
+          marginRight: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+            sizeXS: sizeXS,
+            sizeS: sizeS,
+            size: size,
+            iconKey: iconKey,
+            iconColor: iconColor,
+            src: icon,
+            alt: `${title}'s icon`
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+          children: title
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+        children: children
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
-      children: children
     })]
   });
 };
 
-/* ---------- image 模式（原始版式） ---------- */
+/* ---------- image 模式：无图/无渐层时，走玻璃卡片（兄弟节点结构） ---------- */
 
-const Wrapper = _styledComponents.default.div`
+const GlassOuter = _styledComponents.default.div`
+  position: relative;
+  border-radius: var(--border-radius);
+  margin-bottom: var(--spacing);
+`;
+const GlassLayer = _styledComponents.default.div`
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+  ${_ref2 => {
+  let {
+    marker
+  } = _ref2;
+  return marker && `
+    background-image: url(${marker.triangle});
+    background-repeat: no-repeat;
+    background-position: right bottom;
+    background-size: 30% 70%;
+  `;
+}}
+`;
+const GlassContent = _styledComponents.default.div`
+  position: relative;
+  padding: var(--spacing-l);
+  color: var(--font-on-background);
+`;
+
+/* ---------- image 模式：有 bgImage 或 gradient 时，走原本不透明版式 ---------- */
+
+const PlainWrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
   padding: var(--spacing-l);
   margin-bottom: var(--spacing);
   border-radius: var(--border-radius);
   color: var(--font-on-background);
-  ${_ref2 => {
+  background: ${_ref3 => {
   let {
     bgImage,
-    gradientFrom,
-    gradientTo,
-    theme
-  } = _ref2;
-  if (bgImage || gradientFrom && gradientTo) {
-    const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
-    const image = bgImage ? `url(${bgImage}), ` : '';
-    return `
-        background: ${image}${gradient};
-        background-repeat: no-repeat;
-        background-position: right bottom;
-        background-size: cover;
-      `;
-  }
-  const markerKey = theme?.bgMarkerKey || 'ember';
-  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
-  return `
-      background-color: rgba(255, 255, 255, 0.06);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      background-image: url(${marker.triangle});
-      background-repeat: no-repeat;
-      background-position: right bottom;
-      background-size: 30% 70%;
-    `;
-}}
+    gradient
+  } = _ref3;
+  return bgImage ? `url(${bgImage}), ${gradient}` : gradient;
+}};
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: cover;
 `;
 const IconBoxHead = _styledComponents.default.div`
   display: flex;
@@ -141,26 +190,28 @@ const IconBoxHead = _styledComponents.default.div`
   margin-bottom: var(--spacing);
 `;
 
-/* ---------- accent / gradient 模式 ---------- */
+/* ---------- accent / gradient 模式（兄弟节点结构） ---------- */
 
-const AccentWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  padding: var(--spacing);
+const AccentOuter = _styledComponents.default.div`
+  position: relative;
   border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  ${_ref3 => {
+`;
+const AccentGlassLayer = _styledComponents.default.div`
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+  ${_ref4 => {
   let {
     mode,
     accent,
     gradientEnd,
     borderColor
-  } = _ref3;
+  } = _ref4;
   if (mode === 'gradient') {
     return `
-        background: linear-gradient(22deg, var(--color-background2) 0%, var(--color-background2) 40%, ${gradientEnd} 100%);
+        background: linear-gradient(22deg, var(--color-card-gradient-base) 0%, var(--color-card-gradient-base) 40%, ${gradientEnd} 100%);
         border: 2px solid ${borderColor};
       `;
   }
@@ -170,30 +221,37 @@ const AccentWrapper = _styledComponents.default.div`
     `;
 }}
 `;
+const AccentContent = _styledComponents.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+  color: var(--font-on-background);
+`;
 const IconCircle = _styledComponents.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  width: ${_ref4 => {
+  width: ${_ref5 => {
   let {
     circleSize
-  } = _ref4;
+  } = _ref5;
   return `${circleSize}px`;
 }};
-  height: ${_ref5 => {
+  height: ${_ref6 => {
   let {
     circleSize
-  } = _ref5;
+  } = _ref6;
   return `${circleSize}px`;
 }};
   flex-shrink: 0;
   margin-right: var(--spacing-s);
-  background: ${_ref6 => {
+  background: ${_ref7 => {
   let {
     mode,
     accent
-  } = _ref6;
+  } = _ref7;
   return mode === 'gradient' ? 'rgba(255, 255, 255, 0.2)' : withAlpha(accent, '14');
 }};
 `;
@@ -214,16 +272,16 @@ const IconBoxBody = _styledComponents.default.div`
   font-size: var(--font-h1);
   font-weight: bold;
   line-height: 1.3;
-  text-align: ${_ref7 => {
+  text-align: ${_ref8 => {
   let {
     accentColor
-  } = _ref7;
+  } = _ref8;
   return accentColor ? 'left' : 'center';
 }};
-  color: ${_ref8 => {
+  color: ${_ref9 => {
   let {
     accentColor
-  } = _ref8;
+  } = _ref9;
   return accentColor || 'inherit';
 }};
 `;

package/layout/Layout.jsx

@@ -6,6 +6,7 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
+import bgMainRegistry from './bgMainRegistry';
 
 const Layout = ({
   mode,
@@ -68,6 +69,18 @@ const Main = styled.div`
   display: flex;
   flex: 1;
   position: relative;
+  ${({ theme }) => {
+    if (theme?.hideAsideDecoration) return '';
+    const bgKey = theme?.bgMainKey || 'default';
+    const bgImage = bgMainRegistry[bgKey];
+    return `
+      background: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+    `;
+  }}
 `;
 
 export default Layout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.49.0-beta.13",
+  "version": "0.49.0-beta.15",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/select/Select.js

@@ -768,7 +768,7 @@ const Combobox = _styledComponents.default.div`
     fillReverse
   } = _ref14;
   return fillReverse && `
-      background: var(--color-background1);
+      background: var(--color-select-reverse);
       border-color: transparent;
     `;
 }}

package/styles/GlobalStyle.js

@@ -123,178 +123,196 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   } = _ref19;
   return theme.bgColor4;
 }};
-    --color-backdrop: ${_ref20 => {
+    --color-card-gradient-base: ${_ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.backdropBg;
+  return theme.colorCardGradientBase || theme.bgColor2;
 }};
-    --font-h1: ${_ref21 => {
+    --color-select-reverse: ${_ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.fontH1;
+  return theme.colorSelectReverse || theme.bgColor1;
 }};
-    --font-h2: ${_ref22 => {
+    --color-glass-bg: ${_ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.fontH2;
+  return theme.colorGlassBg || 'rgba(255, 255, 255, 0.06)';
 }};
-    --font-h3: ${_ref23 => {
+    --color-backdrop: ${_ref23 => {
   let {
     theme
   } = _ref23;
-  return theme.fontH3;
+  return theme.backdropBg;
 }};
-    --font-body1: ${_ref24 => {
+    --font-h1: ${_ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.fontBody1;
+  return theme.fontH1;
 }};
-    --font-body2: ${_ref25 => {
+    --font-h2: ${_ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.fontBody2;
+  return theme.fontH2;
 }};
-    --font-button: ${_ref26 => {
+    --font-h3: ${_ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.fontButton;
+  return theme.fontH3;
 }};
-    --font-caption: ${_ref27 => {
+    --font-body1: ${_ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.fontCaption;
+  return theme.fontBody1;
 }};
-    --font-family: ${_ref28 => {
+    --font-body2: ${_ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.fontFamily;
+  return theme.fontBody2;
 }};
-    --font-normal: ${_ref29 => {
+    --font-button: ${_ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.fontWeightNormal;
+  return theme.fontButton;
 }};
-    --font-bold: ${_ref30 => {
+    --font-caption: ${_ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.fontWeightBold;
+  return theme.fontCaption;
 }};
-    --font-on-primary: ${_ref31 => {
+    --font-family: ${_ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.fontOnPrimary;
+  return theme.fontFamily;
 }};
-    --font-on-success: ${_ref32 => {
+    --font-normal: ${_ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.fontOnSuccess;
+  return theme.fontWeightNormal;
 }};
-    --font-on-warning: ${_ref33 => {
+    --font-bold: ${_ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.fontOnWarning;
+  return theme.fontWeightBold;
 }};
-    --font-on-danger: ${_ref34 => {
+    --font-on-primary: ${_ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.fontOnDanger;
+  return theme.fontOnPrimary;
 }};
-    --font-on-background: ${_ref35 => {
+    --font-on-success: ${_ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.fontOnBg;
+  return theme.fontOnSuccess;
 }};
-    --font-on-mute: ${_ref36 => {
+    --font-on-warning: ${_ref36 => {
   let {
     theme
   } = _ref36;
-  return theme.fontMutedColor;
+  return theme.fontOnWarning;
 }};
-    --box-shadow: ${_ref37 => {
+    --font-on-danger: ${_ref37 => {
   let {
     theme
   } = _ref37;
-  return theme.boxShadow;
+  return theme.fontOnDanger;
 }};
-    --border-color: ${_ref38 => {
+    --font-on-background: ${_ref38 => {
   let {
     theme
   } = _ref38;
-  return theme.borderColor;
+  return theme.fontOnBg;
 }};
-    --border-color-transparent: ${_ref39 => {
+    --font-on-mute: ${_ref39 => {
   let {
     theme
   } = _ref39;
-  return theme.borderColorTransparent;
+  return theme.fontMutedColor;
 }};
-    --border-width: ${_ref40 => {
+    --box-shadow: ${_ref40 => {
   let {
     theme
   } = _ref40;
-  return theme.borderWidth;
+  return theme.boxShadow;
 }};
-    --border-radius-s: ${_ref41 => {
+    --border-color: ${_ref41 => {
   let {
     theme
   } = _ref41;
-  return theme.borderRadiusS;
+  return theme.borderColor;
 }};
-    --border-radius: ${_ref42 => {
+    --border-color-transparent: ${_ref42 => {
   let {
     theme
   } = _ref42;
-  return theme.borderRadius;
+  return theme.borderColorTransparent;
 }};
-    --border-radius-l: ${_ref43 => {
+    --border-width: ${_ref43 => {
   let {
     theme
   } = _ref43;
-  return theme.borderRadiusL;
+  return theme.borderWidth;
 }};
-    --border-radius-round: ${_ref44 => {
+    --border-radius-s: ${_ref44 => {
   let {
     theme
   } = _ref44;
-  return theme.borderRadiusRound;
+  return theme.borderRadiusS;
 }};
-    --spacing-xs: ${_ref45 => {
+    --border-radius: ${_ref45 => {
   let {
     theme
   } = _ref45;
-  return theme.spacerXS;
+  return theme.borderRadius;
 }};
-    --spacing-s: ${_ref46 => {
+    --border-radius-l: ${_ref46 => {
   let {
     theme
   } = _ref46;
-  return theme.spacerS;
+  return theme.borderRadiusL;
 }};
-    --spacing: ${_ref47 => {
+    --border-radius-round: ${_ref47 => {
   let {
     theme
   } = _ref47;
-  return theme.spacer;
+  return theme.borderRadiusRound;
 }};
-    --spacing-l: ${_ref48 => {
+    --spacing-xs: ${_ref48 => {
   let {
     theme
   } = _ref48;
+  return theme.spacerXS;
+}};
+    --spacing-s: ${_ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.spacerS;
+}};
+    --spacing: ${_ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.spacer;
+}};
+    --spacing-l: ${_ref51 => {
+  let {
+    theme
+  } = _ref51;
   return theme.spacerL;
 }};
     /* Global style */

package/styles/theme/dark.theme.js

@@ -22,6 +22,9 @@ const colorStyle = {
   bgColor3: '#2d2a5d',
   bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#222143',
+  colorGlassBg: 'rgba(6, 12, 35, 0.6)',
+  colorCardGradientBase: '#141B30',
   cardMode: 'gradient',
   bgMainKey: 'dark',
   bgMarkerKey: 'dark',

package/styles/theme/ember.theme.js

@@ -20,12 +20,15 @@ const colorStyle = {
   bgColor3: '#F3E9E9',
   bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#FAF5F5',
+  colorGlassBg: 'rgba(255, 255, 255, 0.06)',
   useModernIcons: true,
   useModernCardIcons: true,
   useLightBrand: true,
   cardMode: 'accent',
   bgMainKey: 'default',
   bgMarkerKey: 'ember',
+  hideAsideDecoration: true,
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
   colorTextSidebar: '#FFFFFF',

package/styles/theme/white.theme.js

@@ -22,6 +22,8 @@ const colorStyle = {
   bgColor3: '#FFFFFF',
   bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#F7F7F9',
+  colorGlassBg: 'rgba(255, 255, 255, 0.06)',
   cardMode: 'accent',
   bgMainKey: 'white',
   bgMarkerKey: 'white',